Merge pull request #42 from texastribune/story-body-updates

Account for hr in story body

assets/scss/6-components/story-body/_story-body.scss

@@ -18,6 +18,7 @@ $story-narrow-bp: ($story-narrow / 1rem) + $story-padding-buffer;
   > h6,
   > ul,
   > span,
+  > hr,
   > div:not([class^="plugin"]) {
     max-width: $story-narrow;
     margin: $size-b auto;
@@ -42,4 +43,7 @@ $story-narrow-bp: ($story-narrow / 1rem) + $story-padding-buffer;
     position: initial;
   }
 
+  hr {
+    margin: $size-xl auto;
+  }
 }

assets/scss/6-components/story-body/story-body.html

@@ -10,13 +10,20 @@ <h3>Helper classes needed</h3>
     <li>t-serif</li>
     <li>t-space-heading-m</li>
   </ul>
+  <h3>Horizontal Rules</h3>
+  <p>Use a horizontal rule to break up content. A horizontal rule is displayed below.</p>
+  <hr/>
+  <p>The hr tag has built in top and bottom margin. We do this because it's normally used as a spacing element and the need for cushion is assumed.</p>
+  <h3>Headings</h3>
   <p>Our editor has a dropdown option called <em>Subheader</em> for adding a heading element. By default, that tag is an h3. In the event someone were to open the source and add others, this is how they would display.</p>
   <h2>Heading 2</h2>
   <h3>Heading 3 - Default</h3>
   <h4>Heading 4</h4>
   <h5>Heading 5</h5>
   <h6>Heading 6</h6>
-  <div class="has-padding has-bg-yellow">Example of rouge div</div>
+  <h3>Plugins</h3>
+  <p>Plugins are special and have their own rules for positioning. A div without the plugin class will still align with the story text, but any div prefixed with "plugin" will be excluded from the max-width and margin declaration the other elements adhere to.</p>
+  <div class="has-padding has-bg-yellow">Example of rouge div without the plugin class.</div>
   <div class="plugin has-padding has-bg-gray-light">Example of plugin. Should be not be bound by container.</div>
   <div class="plugin-ad has-padding has-bg-gray-light">Example of ad plugin. Should be not be bound by container</div>
 </section>