Merge pull request #427 from primer/markdown_stories

Adding stories from markdown for the other modules that didn't have any stories

Author: jonrohan

.storybook/config.js

@@ -2,9 +2,10 @@ import React from 'react'
 import { configure, addDecorator } from '@storybook/react'
 import { setOptions } from '@storybook/addon-options'
 import '../modules/primer/index.scss'
+import { version } from '../modules/primer/package.json'
 
 setOptions({
-  name: 'Primer',
+  name: `Primer v${version}`,
   url: 'http://primer.github.io/',
   showDownPanel: false,
 })

.storybook/lib/storiesFromMarkdown.js

@@ -12,7 +12,7 @@ const htmlParser = new htmlToReact.Parser()
 
 const railsOcticonToReact = (html) => {
   // <%= octicon "tools" %> to <Octicon name="tools" />
-  const octre = /<%= octicon ["']([a-z\-]+)["'][^%]*%>/gi
+  const octre = /<%= octicon[\(\s]["']([a-z\-]+)["'][^%]*%>/gi
   html = html.replace(octre, (match, name) => {
     return ReactDOMServer.renderToStaticMarkup(<Octicon name={name} />)
   })

modules/primer-branch-name/README.md

@@ -42,16 +42,19 @@ status: Stable
 
 Branch names can be a link name or not:
 
-```html
+```html title="Branch name"
 <span class="branch-name">a_new_feature_branch</span>
+```
+
+```html title="Branch name with link"
 <a href="#url" class="branch-name">a_new_feature_branch</a>
 ```
 
 You may also include an octicon before the branch name text:
 
-```html
+```html title="Branch name with icon"
 <span class="branch-name">
-  <%= octicon("git-branch") width:16 height:16 %>
+  <%= octicon("git-branch", width:16, height:16) %>
   a_new_feature_branch
 </span>
 ```

modules/primer-branch-name/stories.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown'
+
+const stories = storiesOf('Branch Name', module)
+
+storiesFromMarkdown(require.context('.', true, /\.md$/))
+  .forEach(({title, story}) => {
+    stories.add(title, story)
+  })

modules/primer-labels/README.md

@@ -54,13 +54,14 @@ GitHub also programmatically generates and applies a background color for labels
 
 The base `Label` style does not apply a background color, here's an example using the `bg-blue` utility to apply a blue background:
 
-```html
+```html title="Label"
 <span title="Label: default label" class="Label bg-blue">default label</span>
 ```
 
 **Note:** Be sure to include a title attribute on labels, it's helpful for people using screen-readers to differentiate a label from other text. I.e. without the title attribute, the following example would read as _"New select component design"_, rather than identifying `design` as a label.
 
-```html
+```html title="Label without title"
+<!-- Don't do this -->
 <a href="#url">New select component</a><span class="Label bg-blue ml-1">design</span>
 ```
 
@@ -70,31 +71,31 @@ Labels come in a few different themes. Use a theme that helps communicate the co
 
 Use `Label--gray` to create a label with a light gray background and gray text. This label is neutral in color and can be used in contexts where all you need to communicate is metadata, or whe you want a label to feel less prominent compared with labels with stronger colors.
 
-```html
+```html title="Label theme gray"
 <span title="Label: gray label" class="Label Label--gray">gray label</span>
 ```
 
 Use `Label--gray-darker` to create a label with a dark-gray background color. This label is also neutral in color, however, since it's background is darker it can stand out more compared to `Label--gray`.
 
-```html
+```html title="Label theme dark gray"
 <span title="Label: dark gray label" class="Label Label--gray-darker">dark gray label</span>
 ```
 
 Use `Label--orange` to communicate "warning". The orange background color is very close to red, so avoid using next to labels with a red background color since most people will find it hard to tell the difference.
 
-```html
+```html title="Label theme orange"
 <span title="Label: orange label" class="Label Label--orange">orange label</span>
 ```
 
 Use `Label--outline` to create a label with gray text, a gray border, and a transparent background. The outline reduces the contrast of this label in combination with filled labels. Use this in contexts where you need it to stand out less than other labels and communicate a neutral message.
 
-```html
+```html title="Label outline"
 <span title="Label: outline label" class="Label Label--outline">outlined label</span>
 ```
 
 Use `Label--outline-green` in combination with `Label--outline` to communicate a positive message.
 
-```html
+```html title="Label outline green"
 <span title="Label: green outline label" class="Label Label--outline Label--outline-green">green outlined label</span>
 ```
 
@@ -103,14 +104,14 @@ Use `Label--outline-green` in combination with `Label--outline` to communicate a
 
 Use state labels to inform users of an items status. States are large labels with bolded text. The default state has a gray background.
 
-```html
+```html title="State"
 <span class="State">Default</span>
 ```
 
 ### State themes
 States come in a few variations that apply different colors. Use the state that best communicates the status or function.
 
-```html
+```html title="State themes"
 <span title="Status: open" class="State State--green"><%= octicon "git-pull-request" %> Open</span>
 <span title="Status: closed" class="State State--red"><%= octicon "git-pull-request" %> Closed</span>
 <span title="Status: merged" class="State State--purple"><%= octicon "git-merge" %> Merged</span>
@@ -121,7 +122,7 @@ States come in a few variations that apply different colors. Use the state that
 ### Small states
 Use `State--small` for a state label with reduced padding a smaller font size. This is useful in denser areas of content.
 
-```html
+```html title="Small states"
 <span title="Status: open" class="State State--green State--small"><%= octicon "issue-opened" %> Open</span>
 <span title="Status: closed" class="State State--red State--small"><%= octicon "issue-closed" %> Closed</span>
 ```
@@ -130,15 +131,15 @@ Use `State--small` for a state label with reduced padding a smaller font size. T
 
 Use the `Counter` component to add a count to navigational elements and buttons. Counters come in 3 variations: the default `Counter` with a light gray background, `Counter--gray` with a dark-gray background and inverse white text, and `Counter--gray-light` with a light-gray background and dark gray text.
 
-```html
+```html title="Counter"
 <span class="Counter">16</span>
 <span class="Counter Counter--gray">32</span>
 <span class="Counter Counter--gray-light">64</span>
 ```
 
 Use the `Counter` in navigation to indicate the number of items without the user having to click through or count the items, such as open issues in a GitHub repo. See more options in [navigation](../../core/components/navigation).
 
-```html
+```html title="Counter in tabs"
 <div class="tabnav">
   <nav class="tabnav-tabs" aria-label="Foo bar">
     <a href="#url" class="tabnav-tab selected" aria-current="page">Foo tab <span class="Counter">23</a>
@@ -149,7 +150,7 @@ Use the `Counter` in navigation to indicate the number of items without the user
 
 Counters can also be used in `Box` headers to indicate the number of items in a list. See more on the [box component](../../core/components/box).
 
-```html
+```html title="Counter in Box headers"
 <div class="Box">
   <div class="Box-header">
     <h3 class="Box-title">

modules/primer-labels/stories.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown'
+
+const stories = storiesOf('Labels', module)
+
+storiesFromMarkdown(require.context('.', true, /\.md$/))
+  .forEach(({title, story}) => {
+    stories.add(title, story)
+  })

modules/primer-layout/README.md

@@ -50,9 +50,9 @@ You can find all the below styles in `_layout.scss`.
 
 Center your page's contents with a `.container`.
 
-```html+erb
-<div class="container">
-  <!-- contents here -->
+```html title="Container"
+<div class="container border">
+  Container
 </div>
 ```
 
@@ -73,7 +73,7 @@ The grid is pretty standard—you create rows with `.columns` and individual col
 
 In practice, your columns will look like the example below.
 
-```html
+```html title="Grid columns"
 <div class="container">
   <div class="columns mb-1">
     <div class="one-fifth column block-blue p-3 border">
@@ -117,9 +117,9 @@ In practice, your columns will look like the example below.
 
 Columns can be [centered](/utilities/#centering-content) by adding `.centered` to the `.column` class.
 
-```html
+```html title="Grid centered"
 <div class="columns">
-  <div class="one-half column centered block-blue p-3">
+  <div class="one-half column centered block-blue border p-3">
     .one-half
   </div>
 </div>

modules/primer-layout/docs/grid.md

@@ -13,7 +13,7 @@ The grid is 12 columns and percentage-based. The number of columns a container s
 
 Use `.clearfix` on the container and float utilities with columns for a floated grid layout.
 
-```html
+```html title="Float based grid"
 <div class="container-lg clearfix">
   <div class="col-4 float-left border p-4">
     My column
@@ -31,7 +31,7 @@ Use `.clearfix` on the container and float utilities with columns for a floated
 
 To reverse the order of columns, use `float-right` to float columns to the right.
 
-```html
+```html title="Float grid reversed"
 <div class="container-lg clearfix">
   <div class="col-4 float-right border p-4">
     One
@@ -48,7 +48,7 @@ To reverse the order of columns, use `float-right` to float columns to the right
 ## Nesting
 You can infinitely nest grid layouts within other columns since the column widths are percentage based. With great flexibility comes great responsibility - be sensible with how far you nest!
 
-```html
+```html title="Nesting grids"
 <div class="clearfix">
   <div class="col-6 float-left px-1">
     <div class="border p-1">Unnested</div>
@@ -74,7 +74,8 @@ You can infinitely nest grid layouts within other columns since the column width
 ## Centering a column
 
 Use `.mx-auto` to center columns within a container.
-```html
+
+```html title="Centering a column"
 <div class="border">
   <div class="col-6 p-2 mx-auto border">
     This column is the center of my world.
@@ -85,7 +86,8 @@ Use `.mx-auto` to center columns within a container.
 
 ## Column widths
 Column widths can be used with any other block or inline-block elements to add percentage-based widths.
-```html
+
+```html title="Column widths"
 <div>
   <div class="col-4 float-right p-2 border text-red">
     <%= octicon "heart" %> Don't go bacon my heart.
@@ -98,7 +100,7 @@ Column widths can be used with any other block or inline-block elements to add p
 
 Using column offset classes can push a div over X number of columns. They work responsively using the [breakpoints outlined below](/styleguide/css/modules/grid#responsive-grids).
 
-```html
+```html title="Offset columns"
 <div class="clearfix">
   <div class="offset-1 col-3 border p-3">.offset-1</div>
   <div class="offset-2 col-3 border p-3">.offset-2</div>
@@ -108,7 +110,7 @@ Using column offset classes can push a div over X number of columns. They work r
 ## Gutters
 Use gutter styles or padding utilities to create gutters. You can use the default gutter style, `gutter`, or either of its modifiers, `gutter-condensed` or `gutter-spacious`. Gutter styles also support responsive breakpoint modifiers. Gutter styles add padding to the left and right side of each column and apply a negative margin to the container to ensure content inside each column lines up with content outside of the grid.
 
-```html
+```html title="Gutters"
 <div class="clearfix gutter-md-spacious border">
   <div class="col-3 float-left">
     <div class="border p-3">.col-md-3</div>
@@ -127,7 +129,7 @@ Use gutter styles or padding utilities to create gutters. You can use the defaul
 
 Use padding utilities to create gutters for more customized layouts.
 
-```html
+```html title="Gutters with padding"
 <div class="container-lg clearfix">
   <div class="col-3 float-left pr-2 mb-3">
     <div class="border bg-gray-light">.pr-2</div>
@@ -156,7 +158,7 @@ Use padding utilities to create gutters for more customized layouts.
 ## Inline-block grids
 Use column widths with `d-inline-block` as an alternative to floated grids.
 
-```html
+```html title="Inline-block grid"
 <div>
   <div class="col-4 d-inline-block border">
     .col-4 .d-inline-block
@@ -171,7 +173,7 @@ Use column widths with `d-inline-block` as an alternative to floated grids.
 ```
 
 You can use column widths and other utilities on elements such as lists to create the layout you need while keeping the markup semantically correct.
-```html
+```html title="Inline-block grid list"
 <ul class="list-style-none">
   <li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="/broccolini.png" alt="broccolini" /></li><!--
   --><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="/jonrohan.png" alt="jonrohan" /></li><!--
@@ -190,7 +192,7 @@ Using [display table utilities](/styleguide/css/utilities/layout#display) with c
 
 A useful example is being able to keep the height of the container equal across a row when the length of content may differ.
 
-```html
+```html title="Table grid"
 <div class="d-table col-12">
   <div class="col-4 d-table-cell border p-2">
     Bacon ipsum dolor amet leberkas pork pig kielbasa shankle ribeye meatball, salami alcatra venison.
@@ -205,7 +207,7 @@ A useful example is being able to keep the height of the container equal across
 ```
 You can also create an alternative [media object](/styleguide/css/utilities/layout#the-media-object) layout with `.display-table` and column widths.
 
-```html
+```html title="Table grid alternative"
 <div class="d-table col-12">
   <div class="col-2 d-table-cell v-align-middle">
     <img class="width-full avatar" src="/github.png" alt="github" />
@@ -220,7 +222,7 @@ You can also create an alternative [media object](/styleguide/css/utilities/layo
 
 Note that table cells will fill the width of their container even when the total columns doesn't add up to 12.
 
-```html
+```html title="Table grid cells"
 <div class="d-table col-12">
   <div class="col-4 d-table-cell border">
     .col-4 .d-table-cell
@@ -240,7 +242,7 @@ You can use [flex utilities](/styleguide/css/utilities/flexbox) on the container
 
 This can be useful for keeping columns the same height, justifying content and vertically aligning items. The flexbox grid is also great for working with responsive layouts.
 
-```html
+```html title="Flexbox grid"
 <div class="d-flex flex-column flex-md-row flex-items-center flex-md-items-center">
   <div class="col-2 d-flex flex-items-center flex-items-center flex-md-items-start">
     <img class="width-full avatar mb-2 mb-md-0" src="/github.png" alt="github" />
@@ -273,7 +275,7 @@ We use abbreviations for each breakpoint to keep the class names concise.
 
 In this example at the `sm` breakpoint 2 columns will show, at the `md` breakpoint 4 columns will show, and at the `lg` breakpoint 6 columns will show.
 
-```html
+```html title="Responsive grid"
 <div class="container-lg clearfix">
   <div class="col-sm-6 col-md-3 col-lg-2 float-left p-2 border">
     .col-sm-6 .col-md-3 .col-lg-2
@@ -298,7 +300,7 @@ In this example at the `sm` breakpoint 2 columns will show, at the `md` breakpoi
 
 For demonstration, this is how the above example would look at the `sm` breakpoint.
 
-```html
+```html title="Responsive grid small"
 <div class="container-lg clearfix">
   <div class="col-sm-6 float-left p-2 border">
     .col-sm-6
@@ -322,7 +324,7 @@ For demonstration, this is how the above example would look at the `sm` breakpoi
 ```
 This is how that same example would look at the `md` breakpoint.
 
-```html
+```html title="Responsive grid medium"
 <div class="container-lg clearfix">
   <div class="col-md-3 float-left p-2 border">
     .col-md-3
@@ -347,7 +349,7 @@ This is how that same example would look at the `md` breakpoint.
 
 This is how that example would look at the `lg` breakpoint.
 
-```html
+```html title="Responsive grid large"
 <div class="container-lg clearfix">
   <div class="col-lg-2 float-left p-2 border">
     .col-lg-2
@@ -373,7 +375,7 @@ This is how that example would look at the `lg` breakpoint.
 ## Containers
 Container widths match our breakpoints and are available at a `md`, `lg`, and `xl` size. Containers apply a max-width rather than a fixed width for responsive layouts, and they center the container.
 
-```html
+```html title="Containers sized"
 <div class="container-md border">
   .container-md, max-width 768px
 </div>

modules/primer-layout/stories.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown'
+
+const stories = storiesOf('Layout', module)
+
+storiesFromMarkdown(require.context('.', true, /\.md$/))
+  .forEach(({title, story}) => {
+    stories.add(title, story)
+  })