From e43a8f4908abcfc26a81c2495a279473323ecc65 Mon Sep 17 00:00:00 2001
From: tkoleary <terrenceoleary@gmail.com>
Date: Mon, 7 Dec 2020 17:08:20 -0600
Subject: [PATCH 01/17] Updatess to buttons and headings

-Normalized heading line hieights just for display here
-Gave buttons the names of their types
-some code-block cleanup for readability
-Fixed typos
-Added missing color attribute
---
 .../elements/Button/Button.stories.mdx        | 66 +++++++++----------
 .../elements/Heading/Heading.stories.js       | 11 ++--
 .../elements/Heading/Heading.stories.mdx      |  7 +-
 3 files changed, 44 insertions(+), 40 deletions(-)

diff --git a/packages/core/stories/elements/Button/Button.stories.mdx b/packages/core/stories/elements/Button/Button.stories.mdx
index 20edc1ddad..601cc19831 100644
--- a/packages/core/stories/elements/Button/Button.stories.mdx
+++ b/packages/core/stories/elements/Button/Button.stories.mdx
@@ -13,12 +13,12 @@ import * as stories from './Button.stories.js';
 
 # Buttons
 Buttons express what action will occur when the user clicks or touches it. Buttons are used to initialize an action, either in the background or foreground of an experience.
-<Canvas withSource="none" >
+<Canvas>
   <Story
-    name='test'
-    parameters={{ docs: { source: {code: null}}}}>
-    <Button text="Button" />
-    </Story>
+		name="button-primary"
+    parameters={{ docs: { transformSource: () => renderReactMarkup(<Button usage="" text="Primary Button"/>) } }}>
+      <Button usage="" text="button" />
+  </Story>
 </Canvas>
 
 ## Overview
@@ -36,23 +36,23 @@ Default buttons are solid colors with uppercased button text (this is configurab
 <Canvas>
   <Story
     name="button-primary-c-primary"
-    parameters={{ docs: { transformSource: () => renderReactMarkup(<Button usage="" text="button"/>) } }}>
-      <Button usage="" text="button" />
+    parameters={{ docs: { transformSource: () => renderReactMarkup(<Button usage="" text="Primary"/>) } }}>
+      <Button usage="" text="Primary" />
   </Story>
   <Story
     name="button-primary-c-primary-alt"
-    parameters={{ docs: { transformSource: () => renderReactMarkup(<Button usage="" theme="c-primary-alt" text="button"/>) } }}>
-      <Button usage="" theme="c-primary-alt" text="button"/>
+    parameters={{ docs: { transformSource: () => renderReactMarkup(<Button usage="" theme="c-primary-alt" text="Primary"/>) } }}>
+      <Button usage="" theme="c-primary-alt" text="Primary"/>
   </Story>
   <Story
     name="button-primary-c-highlight"
-    parameters={{ docs: { transformSource: () => renderReactMarkup(<Button usage="" theme="c-highlight" text="button"/>) } }}>
-      <Button usage="" theme="c-highlight" text="button"/>
+    parameters={{ docs: { transformSource: () => renderReactMarkup(<Button usage="" theme="c-highlight" text="Primary"/>) } }}>
+      <Button usage="" theme="c-highlight" text="Primary"/>
   </Story>
   <Story
     name="button-primary-c-gray"
-    parameters={{ docs: { transformSource: () => renderReactMarkup(<Button usage="" theme="c-gray-dark" text="button"/>) } }}>
-      <Button usage="" theme="c-gray-dark" text="button"/>
+    parameters={{ docs: { transformSource: () => renderReactMarkup(<Button usage="" theme="c-gray-dark" text="Primary"/>) } }}>
+      <Button usage="" theme="c-gray-dark" text="Primary"/>
   </Story>
   <Story story={stories.buttonCSS} />
 </Canvas>
@@ -68,23 +68,23 @@ The outline button provides a less prominent visual to indicate an less importan
 <Canvas>
   <Story
     name="button-secondary-c-primary"
-    parameters={{ docs: { transformSource: () => renderReactMarkup(<Button usage="secondary" text="button"/>) } }}>
-      <Button usage="secondary" text="button" />
+    parameters={{ docs: { transformSource: () => renderReactMarkup(<Button usage="secondary" text="Secondary"/>) } }}>
+      <Button usage="secondary" text="Secondary" />
   </Story>
   <Story
     name="button-secondary-c-primary-alt"
-    parameters={{ docs: { transformSource: () => renderReactMarkup(<Button usage="secondary" theme="c-primary-alt" text="button"/>) } }}>
-      <Button usage="secondary" theme="c-primary-alt" text="button"/>
+    parameters={{ docs: { transformSource: () => renderReactMarkup(<Button usage="secondary" theme="c-primary-alt" text="Secondary"/>) } }}>
+      <Button usage="secondary" theme="c-primary-alt" text="Secondary"/>
   </Story>
   <Story
     name="button-secondary-c-highlight"
-    parameters={{ docs: { transformSource: () => renderReactMarkup(<Button usage="secondary" theme="c-highlight" text="button"/>) } }}>
-      <Button usage="secondary" theme="c-highlight" text="button"/>
+    parameters={{ docs: { transformSource: () => renderReactMarkup(<Button usage="secondary" theme="c-highlight" text="Secondary"/>) } }}>
+      <Button usage="secondary" theme="c-highlight" text="Secondary"/>
   </Story>
   <Story
     name="button-secondary-c-gray"
-    parameters={{ docs: { transformSource: () => renderReactMarkup(<Button usage="secondary" theme="c-gray-dark" text="button"/>) } }}>
-      <Button usage="secondary" theme="c-gray-dark" text="button"/>
+    parameters={{ docs: { transformSource: () => renderReactMarkup(<Button usage="secondary" theme="c-gray-dark" text="Secondary"/>) } }}>
+      <Button usage="secondary" theme="c-gray-dark" text="Secondary"/>
   </Story>
   <Story story={stories.buttonCSS2} />
 </Canvas>
@@ -99,8 +99,8 @@ The outline button provides a less prominent visual to indicate an less importan
 <Canvas>
   <Story
     name="button-tertiary"
-    parameters={{ docs: { transformSource: () => renderReactMarkup(<Button usage="tertiary" text="button"/>) } }}>
-      <Button usage="tertiary" text="button"/>
+    parameters={{ docs: { transformSource: () => renderReactMarkup(<Button usage="tertiary" text="Tertiary"/>) } }}>
+      <Button usage="tertiary" text="Tertiary"/>
   </Story>
   <Story story={stories.buttonCSS3} />
 </Canvas>
@@ -116,8 +116,8 @@ Appears as a link.
 <Canvas>
   <Story
     name="button-quaternary"
-    parameters={{ docs: { transformSource: () => renderReactMarkup(<Button usage="quaternary" text="button" />) } }}>
-      <Button usage="quaternary" text="button" />
+    parameters={{ docs: { transformSource: () => renderReactMarkup(<Button usage="quaternary" text="Quaternary" />) } }}>
+      <Button usage="quaternary" text="Quaternary" />
   </Story>
   <Story story={stories.buttonCSS4} />
 </Canvas>
@@ -131,23 +131,23 @@ Box shadow on default buttons are used to accentuate the actions. For disabled b
 <Canvas>
   <Story
     name="button-primary--disabled"
-    parameters={{ docs: { transformSource: () => renderReactMarkup(<Button usage="" text="button" disabled/>) } }}>
-      <Button usage="" text="button" disabled/>
+    parameters={{ docs: { transformSource: () => renderReactMarkup(<Button usage="" text="Disabled" disabled/>) } }}>
+      <Button usage="" text="Disabled" disabled/>
   </Story>
   <Story
     name="button-secondary--disabled"
-    parameters={{ docs: { transformSource: (src) => renderReactMarkup(<Button usage="secondary" text="button" disabled/>) } }}>
-      <Button usage="secondary" text="button" disabled/>
+    parameters={{ docs: { transformSource: (src) => renderReactMarkup(<Button usage="secondary" text="Disabled" disabled/>) } }}>
+      <Button usage="secondary" text="Disabled" disabled/>
   </Story>
   <Story
     name="button-tertiary--disabled"
-    parameters={{ docs: { transformSource: (src) => renderReactMarkup(<Button usage="tertiary" text="button" disabled/>) } }}>
-      <Button usage="tertiary" text="button" disabled/>
+    parameters={{ docs: { transformSource: (src) => renderReactMarkup(<Button usage="tertiary" text="Disabled" disabled/>) } }}>
+      <Button usage="tertiary" text="Disabled" disabled/>
   </Story>
   <Story
     name="button-quaternary--disabled"
-    parameters={{ docs: { transformSource: (src) => renderReactMarkup(<Button usage="quaternary" text="button" disabled/>) } }}>
-      <Button usage="quaternary" text="button" disabled/>
+    parameters={{ docs: { transformSource: (src) => renderReactMarkup(<Button usage="quaternary" text="Disabled" disabled/>) } }}>
+      <Button usage="quaternary" text="Disabled" disabled/>
   </Story>
   <Story story={stories.buttonCSSDisabled} />
 </Canvas>
diff --git a/packages/core/stories/elements/Heading/Heading.stories.js b/packages/core/stories/elements/Heading/Heading.stories.js
index 1eca2bd5aa..8759e90a1b 100644
--- a/packages/core/stories/elements/Heading/Heading.stories.js
+++ b/packages/core/stories/elements/Heading/Heading.stories.js
@@ -8,7 +8,7 @@ import { attachHTML } from '../../util/renderCode';
 const { STORYBOOK_CDN_PATH } = process.env;
 
 const coloredHeading = (
-  <>
+  <section>
     <ColoredHeading
       color="blue"
       level="2"
@@ -21,16 +21,15 @@ const coloredHeading = (
       text="Colored Heading (Primary Alt)"
     />
     <ColoredHeading
-      color=""
+      color="gray"
       level="2"
       text="Colored Heading (Gray)"
     />
-  </>
-
+</section>
 )
 
 const compHeading = (
-  <>
+  <section>
     <CompHeading
       centered={false}
       color=""
@@ -58,7 +57,7 @@ const compHeading = (
       title="Comp Heading (Gray | H5)"
       titleContext=""
     />
-  </>
+</section>
 )
 
 
diff --git a/packages/core/stories/elements/Heading/Heading.stories.mdx b/packages/core/stories/elements/Heading/Heading.stories.mdx
index 897e3015e6..1bdb675d52 100644
--- a/packages/core/stories/elements/Heading/Heading.stories.mdx
+++ b/packages/core/stories/elements/Heading/Heading.stories.mdx
@@ -21,7 +21,7 @@ import {
 
 Headings are used as the titles of each major section of a page in the interface.
 
-<div className="sb-block">
+<div className="sb-block reset-vspace">
   { Object.keys(headings).map((key, keyIndex) => (
       (key !== "Body text") &&
       (<Heading level={headings[key]} key={`element.key.${keyIndex}`} text={key} />)
@@ -38,9 +38,11 @@ Navigating through the `<h1>` and `<h2>` elements allows the user to understand
 <br />
 
 ## Variations
+
 <br />
 
 ### Colored Heading Variations
+
 Should be used as a navigational heading, high up on the page. If a page heading H1 exists, should use a lower heading level than the page heading, usually as H2. Color is for styling purposes with no semantic differences.
 
 <Canvas>
@@ -50,6 +52,7 @@ Should be used as a navigational heading, high up on the page. If a page heading
 <br />
 
 ### Component Heading Variations
+
 Should be used to to separate content within a big section. If used under Colored Heading, should use a lower heading level than the colored heading, usually as H3 or lower. When nesting Color Headings, use colors as an indicator of the hierarchy in this order: Primary Alt > Highlight > Gray.
 
 <Canvas>
@@ -59,7 +62,9 @@ Should be used to to separate content within a big section. If used under Colore
 <br />
 
 ### List Heading Variations
+
 Should be used as a heading of a list either full width or in a 50/50 split the main content well.
+
 <Canvas>
   <Story story={stories.headingSidebar} />
 </Canvas>

From b965bb9c658d622c6949b3b895e385eaf3d6aed1 Mon Sep 17 00:00:00 2001
From: tkoleary <terrenceoleary@gmail.com>
Date: Tue, 8 Dec 2020 12:01:09 -0600
Subject: [PATCH 02/17] Updated content

---
 .../elements/Button/Button.stories.mdx        | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/packages/core/stories/elements/Button/Button.stories.mdx b/packages/core/stories/elements/Button/Button.stories.mdx
index 601cc19831..b38a19a0c3 100644
--- a/packages/core/stories/elements/Button/Button.stories.mdx
+++ b/packages/core/stories/elements/Button/Button.stories.mdx
@@ -12,20 +12,19 @@ import * as stories from './Button.stories.js';
 />
 
 # Buttons
-Buttons express what action will occur when the user clicks or touches it. Buttons are used to initialize an action, either in the background or foreground of an experience.
+
+Buttons are used in forms and interactive applications, but also as prominent call-to-action links on website pages.
+
 <Canvas>
   <Story
 		name="button-primary"
     parameters={{ docs: { transformSource: () => renderReactMarkup(<Button usage="" text="Primary Button"/>) } }}>
-      <Button usage="" text="button" />
+      <Button usage="" text="Primary Button" />
   </Story>
 </Canvas>
 
-## Overview
-Buttons are vital for creating a smooth conversational flow on the web, and should be used sparingly. Buttons should adhere to standard web practices, and afford for a target area of 45 pixels. They should also appear slightly raised, and not be completely flat. They have a slight shadow on them so they appear clickable. The small buttons are often used on forms and to set filters on listing pages. The large buttons should be used for primary calls to action. Font sizes reduce slightly on mobile.
+Following web best practices buttons have a target area of 45 pixels. To provide more visual affordance that they are clickable—not just text in a box—they have a shadow to appear slightly raised. Small buttons can be used for secondary tasks on forms—for example image upload—and filters on listing pages. Large buttons should be used for form submits or primary calls to action. There should usually be only one  primary button in any UI. Font sizes reduce slightly on mobile.
 
-
-## Variations
 <br />
 
 ### Primary Button
@@ -57,14 +56,14 @@ Default buttons are solid colors with uppercased button text (this is configurab
   <Story story={stories.buttonCSS} />
 </Canvas>
 
-
 <hr className="sp--top" />
 
-### Secondary Button
-**Usage:** For the secondary action on a page.
+### Secondary Buttons
+
+**Usage:** For secondary actions
+
+**Style:** The outline button has less visual prominence than the primary button so it can be used alongside it as a secondary action, for example "Cancel". The hover state of the secondary button inverts the background and foreground colors.
 
-**Style:**
-The outline button provides a less prominent visual to indicate an less important action on a page, e.g. the Back button. The hover state of the secondary button inverts the background/foreground colors.
 <Canvas>
   <Story
     name="button-secondary-c-primary"
@@ -94,7 +93,7 @@ The outline button provides a less prominent visual to indicate an less importan
 ### Tertiary Button
 **Usage:** For the third action on a page.
 
-**Style:** This is a solid gray button with a lighter background color than the foreground text. The muted color makes this button less prominent on a page than the secondary outline button a providing an option for a tertiary action. The hover state of this button will invert background color with white color text.
+**Style:** The muted of this button is even less prominent than outline button for third-level tasks. The hover state inverts the background and text colors.
 
 <Canvas>
   <Story

From 9e6a2cbe4ffc6b4c6056249b1241ca44c0fa1ba1 Mon Sep 17 00:00:00 2001
From: tkoleary <terrenceoleary@gmail.com>
Date: Tue, 8 Dec 2020 14:37:44 -0600
Subject: [PATCH 03/17] Updated buttons with 2 column layout

---
 .../elements/Button/Button.stories.mdx        | 132 ++++++++++++------
 packages/core/stories/styles/index.scss       |  13 ++
 2 files changed, 103 insertions(+), 42 deletions(-)

diff --git a/packages/core/stories/elements/Button/Button.stories.mdx b/packages/core/stories/elements/Button/Button.stories.mdx
index b38a19a0c3..f97702b43b 100644
--- a/packages/core/stories/elements/Button/Button.stories.mdx
+++ b/packages/core/stories/elements/Button/Button.stories.mdx
@@ -11,27 +11,38 @@ import * as stories from './Button.stories.js';
   }}
 />
 
-# Buttons
+## Buttons
 
 Buttons are used in forms and interactive applications, but also as prominent call-to-action links on website pages.
 
 <Canvas>
   <Story
 		name="button-primary"
-    parameters={{ docs: { transformSource: () => renderReactMarkup(<Button usage="" text="Primary Button"/>) } }}>
-      <Button usage="" text="Primary Button" />
+    parameters={{ docs: { transformSource: () => renderReactMarkup(<Button usage="" text="Button"/>) } }}>
+      <Button usage="" text="Button" />
   </Story>
 </Canvas>
 
 Following web best practices buttons have a target area of 45 pixels. To provide more visual affordance that they are clickable—not just text in a box—they have a shadow to appear slightly raised. Small buttons can be used for secondary tasks on forms—for example image upload—and filters on listing pages. Large buttons should be used for form submits or primary calls to action. There should usually be only one  primary button in any UI. Font sizes reduce slightly on mobile.
 
-<br />
+---
 
-### Primary Button
-**Usage:** For the principle call to action on the page.
+### Primary Buttons
+
+<div class="container">
+	<div class="row">
+    <div class="col-4">
+			<h4>Usage:</h4>
+			<p>For the main action in a form, or for a call-to-action link on a page.</p>
+    </div>
+    <div class="col-8">
+			<h4>Style:</h4>
+			<p>Default buttons are solid color with contrasting uppercase text. For actions with text longer than two words use the `tile-case` class. On hover the Background color becomes lighter.
+			</p>
+    </div>
+  </div>
+</div>
 
-**Style:**
-Default buttons are solid colors with uppercased button text (this is configurable with an capitalized option for longer button text) Box shadow are used to accentuate the actions. Background color of the primary button lightens when being hovered over.
 <Canvas>
   <Story
     name="button-primary-c-primary"
@@ -56,13 +67,24 @@ Default buttons are solid colors with uppercased button text (this is configurab
   <Story story={stories.buttonCSS} />
 </Canvas>
 
-<hr className="sp--top" />
+---
 
 ### Secondary Buttons
 
-**Usage:** For secondary actions
-
-**Style:** The outline button has less visual prominence than the primary button so it can be used alongside it as a secondary action, for example "Cancel". The hover state of the secondary button inverts the background and foreground colors.
+<div class="container">
+	<div class="row">
+    <div class="col-4">
+			<h4>Usage:</h4>
+			<p>For secondary actions
+			</p>
+    </div>
+    <div class="col-8">
+			<h4>Style:</h4>
+			<p>The outline button has less visual prominence than the primary button so it can be used alongside it as a secondary action, for example "Cancel". The hover state of the secondary button inverts the background and foreground colors.
+			</p>
+    </div>
+  </div>
+</div>
 
 <Canvas>
   <Story
@@ -88,12 +110,23 @@ Default buttons are solid colors with uppercased button text (this is configurab
   <Story story={stories.buttonCSS2} />
 </Canvas>
 
-<hr className="sp--top" />
+---
 
-### Tertiary Button
-**Usage:** For the third action on a page.
+### Tertiary Buttons
 
-**Style:** The muted of this button is even less prominent than outline button for third-level tasks. The hover state inverts the background and text colors.
+<div class="container">
+	<div class="row">
+    <div class="col-4">
+			<h4>Usage:</h4>
+			<p>For third-level actions on a page.</p>
+    </div>
+    <div class="col-8">
+			<h4>Style:</h4>
+			<p>The gray color is even less prominent than outline button to de-emphasize third-level tasks. The hover state inverts the background and text colors.
+			</p>
+    </div>
+  </div>
+</div>
 
 <Canvas>
   <Story
@@ -104,13 +137,23 @@ Default buttons are solid colors with uppercased button text (this is configurab
   <Story story={stories.buttonCSS3} />
 </Canvas>
 
-<hr className="sp--top" />
+---
 
-### Quaternary Button
-**Usage:** For the third action on a page.
+### Quaternary Buttons
 
-**Style:**
-Appears as a link.
+<div class="container">
+	<div class="row">
+    <div class="col-4">
+			<h4>Usage:</h4>
+			<p>For fourth-level actions or actions.</p>
+    </div>
+    <div class="col-8">
+			<h4>Style:</h4>
+			<p>Appears as a link.
+			</p>
+    </div>
+  </div>
+</div>
 
 <Canvas>
   <Story
@@ -121,11 +164,24 @@ Appears as a link.
   <Story story={stories.buttonCSS4} />
 </Canvas>
 
-### Disabled Button
-**Usage:** A disabled button is unusable and un-clickable. The disabled attribute can be set to keep a user from clicking on the button until some other condition has been met.
-
-**Style:**
-Box shadow on default buttons are used to accentuate the actions. For disabled buttons, box shadow is removed and opacity for the button is set to 0.5 for a muted look and no hover or focus state is provided.
+---
+
+### Disabled Buttons
+
+<div class="container">
+	<div class="row">
+    <div class="col-6">
+			<h4>Usage:</h4>
+			<p>Disabled buttons should not be clickable. The disabled attribute (as opposed to hidden) can be applied for actions where the user should see the action and it's state but may not be able to perform it because they either don't have permission or some other condition in the form has not been met.
+			</p>
+    </div>
+    <div class="col-6">
+			<h4>Style:</h4>
+			<p>Disabled buttons have no box shadow (since the box shadow is what suggests clickability). Their opacity is `0.5.`, no hover or focus states are provided and the cursor is set to `not-allowed`.
+			</p>
+    </div>
+  </div>
+</div>
 
 <Canvas>
   <Story
@@ -152,19 +208,11 @@ Box shadow on default buttons are used to accentuate the actions. For disabled b
 </Canvas>
 
 ### Accessibility & Best Practices
-* Avoid using `<div>` or `<img>` tags to create buttons. Screen readers don't automatically know either is a usable button.
-* Buttons should display a visible focus state when users tab to them.
-* The label text and the background have a color contrast to meet the WCAG guideline.
-* `<button>` has built-in keyboard accessibility — it can be tabbed between, and activated using Return/Enter.
-* When an icon or any image is included in `<button>`;
-  1. if the icon or image is NOT decorative, make sure they have text alternative presentation.
-  2. if it is decorative \(= use them supplementary\) with text for its label, do not add any text alternative to it.  Use `aria-hidden="true"`, empty alt attribute `alt=""`. Do not use `title` and other aria attributes to make the icon or image recognizable to assistive technologies.
-* When styling links to look like buttons, remember that screen readers handle links slightly differently than they do buttons. Pressing the Space key triggers a button, but pressing the Enter key triggers a link.
-* Avoid using `<div>` or `<img>` tags to create buttons. Screen readers don't automatically know either is a usable button.
-* Buttons should display a visible focus state when users tab to them.
-* The label text and the background have a color contrast to meet the WCAG guideline.
-* `<button>` has built-in keyboard accessibility — it can be tabbed between, and activated using Return/Enter.
-* When an icon or any image is included in `<button>`;
-  1. if the icon or image is NOT decorative, make sure they have text alternative presentation.
-  2. if it is decorative \(= use them supplementary\) with text for its label, do not add any text alternative to it.  Use `aria-hidden="true"`, empty alt attribute `alt=""`. Do not use `title` and other aria attributes to make the icon or image recognizable to assistive technologies.
-* When styling links to look like buttons, remember that screen readers handle links slightly differently than they do buttons. Pressing the Space key triggers a button, but pressing the Enter key triggers a link.
+
+* **Always** use `<button>` or `<a>` tags, *never* `<div>` or `<img>` tags so they are recognizable to screen readers.
+* **Always** Make sure text and background colors have sufficient contrast to meet WCAG guidelines.
+* **Never** disable or hide the browser focus state so focussed elements always have a visual affordance.
+* When using icons in buttons:
+  1. **Never** use an icon alone without text and always provide text for the icon itself, unlesss the icon is purely decorative.
+  2. If it is decorative, use `aria-hidden="true"`, with an empty alt attribute `alt=""`, and do not use `title` or other aria attributes.
+* When styling links as buttons, remember the keyboard handles links and buttons differently. The **Space** key triggers a button, but the **Enter** key triggers a link. Your UI help text should reflect that.
diff --git a/packages/core/stories/styles/index.scss b/packages/core/stories/styles/index.scss
index be550f5d89..3f4c3fdfd6 100644
--- a/packages/core/stories/styles/index.scss
+++ b/packages/core/stories/styles/index.scss
@@ -52,6 +52,19 @@
   }
 }
 
+// Bootstrap grid overrides
+.container {
+	padding-left: 0 !important;
+}
+
+col-xl, .col-xl-auto, .col-xl-12, .col-xl-11, .col-xl-10, .col-xl-9, .col-xl-8, .col-xl-7, .col-xl-6, .col-xl-5, .col-xl-4, .col-xl-3, .col-xl-2, .col-xl-1, .col-lg, .col-lg-auto, .col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1, .col-md, .col-md-auto, .col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, .col-sm, .col-sm-auto, .col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1, .col, .col-auto, .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 {
+	padding-left: 0 !important;
+
+	p {
+		margin-top: 0;
+	}
+}
+
 small {
 	font-size: .9rem;
 }

From bee2ac7010faeac7c5e504ef46e5b70b4d1b798b Mon Sep 17 00:00:00 2001
From: tkoleary <terrenceoleary@gmail.com>
Date: Tue, 8 Dec 2020 14:48:18 -0600
Subject: [PATCH 04/17] Changed h4 to inline strong

---
 .../elements/Button/Button.stories.mdx        | 55 ++++++++++---------
 1 file changed, 30 insertions(+), 25 deletions(-)

diff --git a/packages/core/stories/elements/Button/Button.stories.mdx b/packages/core/stories/elements/Button/Button.stories.mdx
index f97702b43b..009ca7cca7 100644
--- a/packages/core/stories/elements/Button/Button.stories.mdx
+++ b/packages/core/stories/elements/Button/Button.stories.mdx
@@ -25,19 +25,21 @@ Buttons are used in forms and interactive applications, but also as prominent ca
 
 Following web best practices buttons have a target area of 45 pixels. To provide more visual affordance that they are clickable—not just text in a box—they have a shadow to appear slightly raised. Small buttons can be used for secondary tasks on forms—for example image upload—and filters on listing pages. Large buttons should be used for form submits or primary calls to action. There should usually be only one  primary button in any UI. Font sizes reduce slightly on mobile.
 
----
+<hr className="sp--top" />
 
 ### Primary Buttons
 
 <div class="container">
 	<div class="row">
     <div class="col-4">
-			<h4>Usage:</h4>
-			<p>For the main action in a form, or for a call-to-action link on a page.</p>
+			<p>
+				<strong>Usage: </strong>
+			For the main action in a form, or for a call-to-action link on a page.</p>
     </div>
     <div class="col-8">
-			<h4>Style:</h4>
-			<p>Default buttons are solid color with contrasting uppercase text. For actions with text longer than two words use the `tile-case` class. On hover the Background color becomes lighter.
+			<p>
+				<strong>Style: </strong>
+			Default buttons are solid color with contrasting uppercase text. For actions with text longer than two words use the `tile-case` class. On hover the Background color becomes lighter.
 			</p>
     </div>
   </div>
@@ -67,20 +69,20 @@ Following web best practices buttons have a target area of 45 pixels. To provide
   <Story story={stories.buttonCSS} />
 </Canvas>
 
----
+<hr className="sp--top" />
 
 ### Secondary Buttons
 
 <div class="container">
 	<div class="row">
     <div class="col-4">
-			<h4>Usage:</h4>
-			<p>For secondary actions
+			<p>
+				<strong>Usage: </strong>For secondary actions
 			</p>
     </div>
     <div class="col-8">
-			<h4>Style:</h4>
-			<p>The outline button has less visual prominence than the primary button so it can be used alongside it as a secondary action, for example "Cancel". The hover state of the secondary button inverts the background and foreground colors.
+			<p>
+				<strong>Style: </strong>The outline button has less visual prominence than the primary button so it can be used alongside it as a secondary action, for example "Cancel". The hover state of the secondary button inverts the background and foreground colors.
 			</p>
     </div>
   </div>
@@ -110,19 +112,20 @@ Following web best practices buttons have a target area of 45 pixels. To provide
   <Story story={stories.buttonCSS2} />
 </Canvas>
 
----
+<hr className="sp--top" />
 
 ### Tertiary Buttons
 
 <div class="container">
 	<div class="row">
     <div class="col-4">
-			<h4>Usage:</h4>
-			<p>For third-level actions on a page.</p>
+			<p>
+				<strong>Usage: </strong>For third-level actions on a page.
+			</p>
     </div>
     <div class="col-8">
-			<h4>Style:</h4>
-			<p>The gray color is even less prominent than outline button to de-emphasize third-level tasks. The hover state inverts the background and text colors.
+			<p>
+				<strong>Style: </strong>The gray color is even less prominent than outline button to de-emphasize third-level tasks. The hover state inverts the background and text colors.
 			</p>
     </div>
   </div>
@@ -137,19 +140,19 @@ Following web best practices buttons have a target area of 45 pixels. To provide
   <Story story={stories.buttonCSS3} />
 </Canvas>
 
----
+<hr className="sp--top" />
 
 ### Quaternary Buttons
 
 <div class="container">
 	<div class="row">
     <div class="col-4">
-			<h4>Usage:</h4>
-			<p>For fourth-level actions or actions.</p>
+			<p>
+				<strong>Usage: </strong>For fourth-level actions or actions.</p>
     </div>
     <div class="col-8">
-			<h4>Style:</h4>
-			<p>Appears as a link.
+			<p>
+				<strong>Style: </strong>Appears as a link.
 			</p>
     </div>
   </div>
@@ -164,20 +167,20 @@ Following web best practices buttons have a target area of 45 pixels. To provide
   <Story story={stories.buttonCSS4} />
 </Canvas>
 
----
+<hr className="sp--top" />
 
 ### Disabled Buttons
 
 <div class="container">
 	<div class="row">
     <div class="col-6">
-			<h4>Usage:</h4>
-			<p>Disabled buttons should not be clickable. The disabled attribute (as opposed to hidden) can be applied for actions where the user should see the action and it's state but may not be able to perform it because they either don't have permission or some other condition in the form has not been met.
+			<p>
+				<strong>Usage: </strong>Disabled buttons should not be clickable. The disabled attribute (as opposed to hidden) can be applied for actions where the user should see the action and it's state but may not be able to perform it because they either don't have permission or some other condition in the form has not been met.
 			</p>
     </div>
     <div class="col-6">
-			<h4>Style:</h4>
-			<p>Disabled buttons have no box shadow (since the box shadow is what suggests clickability). Their opacity is `0.5.`, no hover or focus states are provided and the cursor is set to `not-allowed`.
+			<p>
+				<strong>Style: </strong>Disabled buttons have no box shadow (since the box shadow is what suggests clickability). Their opacity is `0.5.`, no hover or focus states are provided and the cursor is set to `not-allowed`.
 			</p>
     </div>
   </div>
@@ -207,6 +210,8 @@ Following web best practices buttons have a target area of 45 pixels. To provide
   <Story story={stories.buttonCSSDisabled} />
 </Canvas>
 
+<hr className="sp--top" />
+
 ### Accessibility & Best Practices
 
 * **Always** use `<button>` or `<a>` tags, *never* `<div>` or `<img>` tags so they are recognizable to screen readers.

From 136fc0f94094d67274bdf276213efa59d3ec663e Mon Sep 17 00:00:00 2001
From: tkoleary <terrenceoleary@gmail.com>
Date: Tue, 8 Dec 2020 17:22:49 -0600
Subject: [PATCH 05/17] Updates to all elements pages

---
 .../elements/Button/Button.stories.mdx        |  16 +--
 .../elements/Heading/Heading.stories.js       |   1 +
 .../elements/Heading/Heading.stories.mdx      |  25 ++--
 .../stories/elements/Link/Link.stories.mdx    | 117 +++++++++++++-----
 packages/core/stories/styles/index.scss       |  15 +++
 5 files changed, 118 insertions(+), 56 deletions(-)

diff --git a/packages/core/stories/elements/Button/Button.stories.mdx b/packages/core/stories/elements/Button/Button.stories.mdx
index 009ca7cca7..258bd8ac6a 100644
--- a/packages/core/stories/elements/Button/Button.stories.mdx
+++ b/packages/core/stories/elements/Button/Button.stories.mdx
@@ -33,13 +33,12 @@ Following web best practices buttons have a target area of 45 pixels. To provide
 	<div class="row">
     <div class="col-4">
 			<p>
-				<strong>Usage: </strong>
-			For the main action in a form, or for a call-to-action link on a page.</p>
+				<strong>Usage: </strong>For the main action in a form, or for a call-to-action link on a page.
+			</p>
     </div>
     <div class="col-8">
 			<p>
-				<strong>Style: </strong>
-			Default buttons are solid color with contrasting uppercase text. For actions with text longer than two words use the `tile-case` class. On hover the Background color becomes lighter.
+				<strong>Style: </strong>Default buttons are solid color with contrasting uppercase text. For actions with text longer than two words use the <code>title-case</code> class. On hover the Background color becomes lighter.
 			</p>
     </div>
   </div>
@@ -77,7 +76,7 @@ Following web best practices buttons have a target area of 45 pixels. To provide
 	<div class="row">
     <div class="col-4">
 			<p>
-				<strong>Usage: </strong>For secondary actions
+				<strong>Usage: </strong>For secondary actions.
 			</p>
     </div>
     <div class="col-8">
@@ -148,7 +147,8 @@ Following web best practices buttons have a target area of 45 pixels. To provide
 	<div class="row">
     <div class="col-4">
 			<p>
-				<strong>Usage: </strong>For fourth-level actions or actions.</p>
+				<strong>Usage: </strong>For fourth-level actions or actions.
+			</p>
     </div>
     <div class="col-8">
 			<p>
@@ -180,7 +180,7 @@ Following web best practices buttons have a target area of 45 pixels. To provide
     </div>
     <div class="col-6">
 			<p>
-				<strong>Style: </strong>Disabled buttons have no box shadow (since the box shadow is what suggests clickability). Their opacity is `0.5.`, no hover or focus states are provided and the cursor is set to `not-allowed`.
+				<strong>Style: </strong>Disabled buttons have no box shadow (since the box shadow is what suggests clickability). Their opacity is <code>0.5.</code>, no hover or focus states are provided and the cursor is set to <code>not-allowed</code>.
 			</p>
     </div>
   </div>
@@ -214,7 +214,7 @@ Following web best practices buttons have a target area of 45 pixels. To provide
 
 ### Accessibility & Best Practices
 
-* **Always** use `<button>` or `<a>` tags, *never* `<div>` or `<img>` tags so they are recognizable to screen readers.
+* **Always** use `<button>` or `<a>` tags, **never** `<div>` or `<img>` tags so they are recognizable to screen readers.
 * **Always** Make sure text and background colors have sufficient contrast to meet WCAG guidelines.
 * **Never** disable or hide the browser focus state so focussed elements always have a visual affordance.
 * When using icons in buttons:
diff --git a/packages/core/stories/elements/Heading/Heading.stories.js b/packages/core/stories/elements/Heading/Heading.stories.js
index 8759e90a1b..da32507f07 100644
--- a/packages/core/stories/elements/Heading/Heading.stories.js
+++ b/packages/core/stories/elements/Heading/Heading.stories.js
@@ -4,6 +4,7 @@ import ColoredHeading from '@massds/mayflower-react/dist/ColoredHeading';
 import CompHeading from '@massds/mayflower-react/dist/CompHeading';
 import SidebarHeading from '@massds/mayflower-react/dist/SidebarHeading';
 import { attachHTML } from '../../util/renderCode';
+import { attachCSS } from '../../util/renderCode';
 
 const { STORYBOOK_CDN_PATH } = process.env;
 
diff --git a/packages/core/stories/elements/Heading/Heading.stories.mdx b/packages/core/stories/elements/Heading/Heading.stories.mdx
index 1bdb675d52..170bbe2a0e 100644
--- a/packages/core/stories/elements/Heading/Heading.stories.mdx
+++ b/packages/core/stories/elements/Heading/Heading.stories.mdx
@@ -29,17 +29,9 @@ Headings are used as the titles of each major section of a page in the interface
   )}
 </div>
 
-<br />
+Numbered headings create a hierarchy in your pages so users can scan them easily, but they are also used by search engines and screen readers to navigate your content. The `<h1>` is most important with usually only one per page followed by `<h2>` through `<h6>` in decreasing size and importance. In mayflower—as in most design systems—headings of the same level are often styled differently based on their context. For example an `<h2>` inside `.ma__header` has a different size and font weight than an `<h2>` inside `.ma__section-links`, but within any given context the relative sizes are consistent.
 
-## Overview
-These elements represent headings for their sections.These elements have a rank given by the number in their name. The `<h1>` element is said to have the highest rank, the `<h6>` element has the lowest rank, and two elements with the same name have equal rank.
-Navigating through the `<h1>` and `<h2>` elements allows the user to understand the overall purpose of a page and how its content is structured. The `<h3>` through `<h6>` elements provide a quick understanding of the details in each section.
-
-<br />
-
-## Variations
-
-<br />
+<hr className="sp--top" />
 
 ### Colored Heading Variations
 
@@ -49,17 +41,17 @@ Should be used as a navigational heading, high up on the page. If a page heading
   <Story story={stories.headingColored} />
 </Canvas>
 
-<br />
+<hr className="sp--top" />
 
 ### Component Heading Variations
 
-Should be used to to separate content within a big section. If used under Colored Heading, should use a lower heading level than the colored heading, usually as H3 or lower. When nesting Color Headings, use colors as an indicator of the hierarchy in this order: Primary Alt > Highlight > Gray.
+Should be used to to separate content within a big section. If used under Colored Heading, should use a lower heading level than the colored heading, usually as an `<h3>` or lower. When nesting Color Headings, use colors as an indicator of the hierarchy in this order: Primary Alt > Highlight > Gray.
 
 <Canvas>
   <Story story={stories.headingComp} />
 </Canvas>
 
-<br />
+<hr className="sp--top" />
 
 ### List Heading Variations
 
@@ -69,6 +61,7 @@ Should be used as a heading of a list either full width or in a 50/50 split the
   <Story story={stories.headingSidebar} />
 </Canvas>
 
-## Accessibility & Best Practices
-Headings should not be used to convey style items
-Headings must be hierarchical and properly nested (all h2’s within an h1 etc) so as to maintain proper navigability for low or non-sighted users
+## Accessibility Best-practices
+
+* Headings should not be used to convey style items.
+* Headings must be hierarchical and properly nested (all h2’s within an h1 etc) so as to maintain proper navigability for low or non-sighted users
diff --git a/packages/core/stories/elements/Link/Link.stories.mdx b/packages/core/stories/elements/Link/Link.stories.mdx
index 30c1aabc2f..f8c5f1c0c6 100644
--- a/packages/core/stories/elements/Link/Link.stories.mdx
+++ b/packages/core/stories/elements/Link/Link.stories.mdx
@@ -14,27 +14,52 @@ import * as stories from './Link.stories.js';
 />
 
 # Links
-Links are used to embed actions or pathways to more information in a sentence or on a page.
-
-## Variations
-
-#### Inline Link
-**Usage:** Use when you are linking just a few words of text or when you are doing inline links.
 
-**Style:** [To-do: Regular inline links should also have underline decoration.. Look into generating the appropriate CSS]
+Links are used to embed actions or pathways to more information in a sentence or on a page.
 
-<Canvas>
+### Inline Link
+
+<div class="container">
+	<div class="row">
+    <div class="col-6">
+			<p>
+				<strong>Usage: </strong>Use when you are linking just a few words of text or when you are doing inline links.
+			</p>
+    </div>
+    <div class="col-6">
+			<p>
+				<strong>Style: </strong>Inline links take the style of the surrounding text, adding only the blue color and an underline.
+			</p>
+    </div>
+  </div>
+</div>
+
+<Canvas className="borderless">
   <Story
     name="link">
-      <a href="#">Inline Link</a>
+      <p>Some content and then an <a href="#">inline link</a>, followed by more content.</p>
   </Story>
   <Story story={stories.linkCSS} />
 </Canvas>
 
-#### Decorative Link
-**Usage:** Used for standalone links that require more emphasis.
-
-**Style:**
+<hr className="sp--top" />
+
+### Decorative Link
+
+<div class="container">
+	<div class="row">
+    <div class="col-6">
+			<p>
+				<strong>Usage: </strong>Used for standalone links that require more emphasis, usually inside <code>ma__section-links</code>.
+			</p>
+    </div>
+    <div class="col-6">
+			<p>
+				<strong>Style: </strong>the decorative link is slightly larger in size and appended with an arrow icon.
+			</p>
+    </div>
+  </div>
+</div>
 
 <Canvas>
   <Story
@@ -46,11 +71,24 @@ Links are used to embed actions or pathways to more information in a sentence or
   <Story story={stories.linkDecorativeCSS} />
 </Canvas>
 
-
-#### Callout Link
-**Usage:** Call to action links that require more emphasis.
-
-**Style:**
+<hr className="sp--top" />
+
+### Callout Link
+
+<div class="container">
+	<div class="row">
+    <div class="col-6">
+			<p>
+				<strong>Usage: </strong>Call to action links that require more emphasis.
+			</p>
+    </div>
+    <div class="col-6">
+			<p>
+				<strong>Style: </strong>The callout link has the style of a decorative link, but with a slightly larger font-size, and enlosed in a box.
+			</p>
+    </div>
+  </div>
+</div>
 
 <Canvas>
   <Story
@@ -61,34 +99,49 @@ Links are used to embed actions or pathways to more information in a sentence or
   <Story story={stories.linkCalloutCSS} />
 </Canvas>
 
-
-#### Link styled as a button
-**Usage:** Use when you are linking just a few words of text or when you are doing inline links. In general, we should style buttons as button and style links as links, to provide . [*For material honesty, we shouldn't encourage styling links as buttons, should use callout links instead, unless we can come up with appropriate examples*]
-
-**Style:**
+<hr className="sp--top" />
+
+### Link styled as a button
+
+<div class="container">
+	<div class="row">
+    <div class="col-6">
+			<p>
+				<strong>Usage: </strong>If absolutely necessary this can be used for calls-to-action if there are technical reasons not to use <code>ma__button</code>.
+				</p>
+    </div>
+    <div class="col-6">
+			<p>
+				<strong>Style: </strong>Styled exactly the same as <code>ma__button</code>.
+			</p>
+    </div>
+  </div>
+</div>
 
 <Canvas>
   <Story
     name="link-button-primary"
-    parameters={{ docs: { transformSource: () => renderReactMarkup(<Button href="#" text="Button as a link" usage="" type="submit"/>) } }}>
-      <Button href="#" text="Button as a link" usage="" type="submit"/>
+    parameters={{ docs: { transformSource: () => renderReactMarkup(<Button href="#" text="Link as a button" usage="primary" />) } }}>
+    	<Button href="#" text="Link as a button" usage="primary" />
   </Story>
   <Story
     name="link-button-secondary"
-    parameters={{ docs: { transformSource: () => renderReactMarkup(<Button href="#" text="Button as a link" usage="secondary"/>) } }}>
-      <Button href="#" text="Button as a link" usage="secondary"/>
+    parameters={{ docs: { transformSource: () => renderReactMarkup(<Button href="#" text="Link as a button" usage="secondary" />) } }}>
+    	<Button href="#" text="Link as a button" usage="secondary" />
   </Story>
   <Story
     name="link-button-tertiary"
-    parameters={{ docs: { transformSource: () => renderReactMarkup(  <Button href="#" text="Button as a link" usage="tertiary"/>) } }}>
-        <Button href="#" text="Button as a link" usage="tertiary"/>
+    parameters={{ docs: { transformSource: () => renderReactMarkup(<Button href="#" text="Link as a button" usage="tertiary" />) } }}>
+    	<Button href="#" text="Link as a button" usage="tertiary" />
   </Story>
   <Story story={stories.linkButtonCSS} />
 </Canvas>
 
+<hr className="sp--top" />
+
+### Accessibility & Best Practices
 
-## Accessibility & Best Practices
 The purpose of a link can be determined from the link text alone or from the text combined with programmatically determined content
 
-* The largest errors usually found here are on article preview links or similar where there may be multiple links on a page stating “read more” or other similar repeatable text, this should be avoided.
-* Additionally links that are not links but items such as files, e-mail to links and phone numbers should be clearly labeled as such.
+* Avoid using language in links that providess no specific information or is repetitive like “read more”.
+* Links that start a process like downloading files, opening your e-mail client, or calling a phone number should be clearly labeled for what they are.
diff --git a/packages/core/stories/styles/index.scss b/packages/core/stories/styles/index.scss
index 3f4c3fdfd6..8e2f991a96 100644
--- a/packages/core/stories/styles/index.scss
+++ b/packages/core/stories/styles/index.scss
@@ -52,6 +52,11 @@
   }
 }
 
+/*  Tables */
+table.sbdocs.sbdocs-table {
+  min-width: 100%;
+}
+
 // Bootstrap grid overrides
 .container {
 	padding-left: 0 !important;
@@ -59,6 +64,11 @@
 
 col-xl, .col-xl-auto, .col-xl-12, .col-xl-11, .col-xl-10, .col-xl-9, .col-xl-8, .col-xl-7, .col-xl-6, .col-xl-5, .col-xl-4, .col-xl-3, .col-xl-2, .col-xl-1, .col-lg, .col-lg-auto, .col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1, .col-md, .col-md-auto, .col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, .col-sm, .col-sm-auto, .col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1, .col, .col-auto, .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 {
 	padding-left: 0 !important;
+	padding-right: 30px !important;
+
+	&:last-child {
+		padding-right: 0 !important;
+	}
 
 	p {
 		margin-top: 0;
@@ -109,6 +119,11 @@ ul.sg-colors {
   }
 }
 
+// Links story
+span.ma__decorative-link  {
+	display: inline !important;
+}
+
 // Header story
 .ma__header_slim {
   &__utility-link {

From e8be3dafe93adb7606f497cd063b6b4a7ef4b6ca Mon Sep 17 00:00:00 2001
From: Terrence Kevin Oleary <terrenceoleary@gmail.com>
Date: Thu, 10 Dec 2020 15:40:09 -0600
Subject: [PATCH 06/17] Update
 packages/core/stories/elements/Button/Button.stories.mdx

Co-authored-by: Minghua Sun <clairesunstudio@gmail.com>
---
 packages/core/stories/elements/Button/Button.stories.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/stories/elements/Button/Button.stories.mdx b/packages/core/stories/elements/Button/Button.stories.mdx
index 258bd8ac6a..06fdff56ca 100644
--- a/packages/core/stories/elements/Button/Button.stories.mdx
+++ b/packages/core/stories/elements/Button/Button.stories.mdx
@@ -11,7 +11,7 @@ import * as stories from './Button.stories.js';
   }}
 />
 
-## Buttons
+# Buttons
 
 Buttons are used in forms and interactive applications, but also as prominent call-to-action links on website pages.
 

From f38357c45ff3e5ba5db053a4fc2bac34962adb6d Mon Sep 17 00:00:00 2001
From: tkoleary <terrenceoleary@gmail.com>
Date: Fri, 11 Dec 2020 10:48:49 -0600
Subject: [PATCH 07/17] Removed grid markup

-also removed grid override CSS
-replaced hr class with style for the element agnosstic to bottom or top
-replaced all hr tags with  markdown (`---`)
---
 .../elements/Button/Button.stories.mdx        | 108 +++++-------------
 .../elements/Heading/Heading.stories.mdx      |   6 +-
 .../stories/elements/Link/Link.stories.mdx    |  77 +++----------
 packages/core/stories/styles/index.scss       |  32 +-----
 4 files changed, 52 insertions(+), 171 deletions(-)

diff --git a/packages/core/stories/elements/Button/Button.stories.mdx b/packages/core/stories/elements/Button/Button.stories.mdx
index 06fdff56ca..2f5ebc0191 100644
--- a/packages/core/stories/elements/Button/Button.stories.mdx
+++ b/packages/core/stories/elements/Button/Button.stories.mdx
@@ -25,24 +25,13 @@ Buttons are used in forms and interactive applications, but also as prominent ca
 
 Following web best practices buttons have a target area of 45 pixels. To provide more visual affordance that they are clickable—not just text in a box—they have a shadow to appear slightly raised. Small buttons can be used for secondary tasks on forms—for example image upload—and filters on listing pages. Large buttons should be used for form submits or primary calls to action. There should usually be only one  primary button in any UI. Font sizes reduce slightly on mobile.
 
-<hr className="sp--top" />
+---
 
 ### Primary Buttons
 
-<div class="container">
-	<div class="row">
-    <div class="col-4">
-			<p>
-				<strong>Usage: </strong>For the main action in a form, or for a call-to-action link on a page.
-			</p>
-    </div>
-    <div class="col-8">
-			<p>
-				<strong>Style: </strong>Default buttons are solid color with contrasting uppercase text. For actions with text longer than two words use the <code>title-case</code> class. On hover the Background color becomes lighter.
-			</p>
-    </div>
-  </div>
-</div>
+**Usage:** For the main action in a form, or for a call-to-action link on a page.
+
+**Style:** Default buttons are solid color with contrasting uppercase text. For actions with text longer than two words use the `title-case` class. On hover the Background color becomes lighter.
 
 <Canvas>
   <Story
@@ -68,24 +57,13 @@ Following web best practices buttons have a target area of 45 pixels. To provide
   <Story story={stories.buttonCSS} />
 </Canvas>
 
-<hr className="sp--top" />
+---
 
 ### Secondary Buttons
 
-<div class="container">
-	<div class="row">
-    <div class="col-4">
-			<p>
-				<strong>Usage: </strong>For secondary actions.
-			</p>
-    </div>
-    <div class="col-8">
-			<p>
-				<strong>Style: </strong>The outline button has less visual prominence than the primary button so it can be used alongside it as a secondary action, for example "Cancel". The hover state of the secondary button inverts the background and foreground colors.
-			</p>
-    </div>
-  </div>
-</div>
+**Usage:** For secondary actions.
+
+**Style:** The outline button has less visual prominence than the primary button so it can be used alongside it as a secondary action, for example "Cancel". The hover state of the secondary button inverts the background and foreground colors.
 
 <Canvas>
   <Story
@@ -111,24 +89,13 @@ Following web best practices buttons have a target area of 45 pixels. To provide
   <Story story={stories.buttonCSS2} />
 </Canvas>
 
-<hr className="sp--top" />
+---
 
 ### Tertiary Buttons
 
-<div class="container">
-	<div class="row">
-    <div class="col-4">
-			<p>
-				<strong>Usage: </strong>For third-level actions on a page.
-			</p>
-    </div>
-    <div class="col-8">
-			<p>
-				<strong>Style: </strong>The gray color is even less prominent than outline button to de-emphasize third-level tasks. The hover state inverts the background and text colors.
-			</p>
-    </div>
-  </div>
-</div>
+**Usage:** For third-level actions on a page.
+
+**Style:** The gray color is even less prominent than outline button to de-emphasize third-level tasks. The hover state inverts the background and text colors.
 
 <Canvas>
   <Story
@@ -139,24 +106,13 @@ Following web best practices buttons have a target area of 45 pixels. To provide
   <Story story={stories.buttonCSS3} />
 </Canvas>
 
-<hr className="sp--top" />
+---
 
 ### Quaternary Buttons
 
-<div class="container">
-	<div class="row">
-    <div class="col-4">
-			<p>
-				<strong>Usage: </strong>For fourth-level actions or actions.
-			</p>
-    </div>
-    <div class="col-8">
-			<p>
-				<strong>Style: </strong>Appears as a link.
-			</p>
-    </div>
-  </div>
-</div>
+**Usage:** For fourth-level actions or actions.
+
+**Style:** Appears as a link.
 
 <Canvas>
   <Story
@@ -167,24 +123,14 @@ Following web best practices buttons have a target area of 45 pixels. To provide
   <Story story={stories.buttonCSS4} />
 </Canvas>
 
-<hr className="sp--top" />
+---
 
 ### Disabled Buttons
 
-<div class="container">
-	<div class="row">
-    <div class="col-6">
-			<p>
-				<strong>Usage: </strong>Disabled buttons should not be clickable. The disabled attribute (as opposed to hidden) can be applied for actions where the user should see the action and it's state but may not be able to perform it because they either don't have permission or some other condition in the form has not been met.
-			</p>
-    </div>
-    <div class="col-6">
-			<p>
-				<strong>Style: </strong>Disabled buttons have no box shadow (since the box shadow is what suggests clickability). Their opacity is <code>0.5.</code>, no hover or focus states are provided and the cursor is set to <code>not-allowed</code>.
-			</p>
-    </div>
-  </div>
-</div>
+**Usage:** Disabled buttons should not be clickable. The disabled attribute (as opposed to hidden) can be applied for actions where the user should see the action and it's state but may not be able to perform it because they either don't have permission or some other condition in the form has not been met.
+
+**Style:** Disabled buttons have no box shadow (since the box shadow is what suggests clickability). Their opacity is `0.5.`, no hover or focus states are provided and the cursor is set to `not-allowed`.
+
 
 <Canvas>
   <Story
@@ -210,14 +156,14 @@ Following web best practices buttons have a target area of 45 pixels. To provide
   <Story story={stories.buttonCSSDisabled} />
 </Canvas>
 
-<hr className="sp--top" />
+---
 
 ### Accessibility & Best Practices
 
-* **Always** use `<button>` or `<a>` tags, **never** `<div>` or `<img>` tags so they are recognizable to screen readers.
-* **Always** Make sure text and background colors have sufficient contrast to meet WCAG guidelines.
-* **Never** disable or hide the browser focus state so focussed elements always have a visual affordance.
+*** Always** use `<button>` or `<a>` tags,** never** `<div>` or `<img>` tags so they are recognizable to screen readers.
+*** Always** Make sure text and background colors have sufficient contrast to meet WCAG guidelines.
+*** Never** disable or hide the browser focus state so focussed elements always have a visual affordance.
 * When using icons in buttons:
-  1. **Never** use an icon alone without text and always provide text for the icon itself, unlesss the icon is purely decorative.
+  1.** Never** use an icon alone without text and always provide text for the icon itself, unlesss the icon is purely decorative.
   2. If it is decorative, use `aria-hidden="true"`, with an empty alt attribute `alt=""`, and do not use `title` or other aria attributes.
-* When styling links as buttons, remember the keyboard handles links and buttons differently. The **Space** key triggers a button, but the **Enter** key triggers a link. Your UI help text should reflect that.
+* When styling links as buttons, remember the keyboard handles links and buttons differently. The** Space** key triggers a button, but the** Enter** key triggers a link. Your UI help text should reflect that.
diff --git a/packages/core/stories/elements/Heading/Heading.stories.mdx b/packages/core/stories/elements/Heading/Heading.stories.mdx
index 170bbe2a0e..d4cbcdb656 100644
--- a/packages/core/stories/elements/Heading/Heading.stories.mdx
+++ b/packages/core/stories/elements/Heading/Heading.stories.mdx
@@ -31,7 +31,7 @@ Headings are used as the titles of each major section of a page in the interface
 
 Numbered headings create a hierarchy in your pages so users can scan them easily, but they are also used by search engines and screen readers to navigate your content. The `<h1>` is most important with usually only one per page followed by `<h2>` through `<h6>` in decreasing size and importance. In mayflower—as in most design systems—headings of the same level are often styled differently based on their context. For example an `<h2>` inside `.ma__header` has a different size and font weight than an `<h2>` inside `.ma__section-links`, but within any given context the relative sizes are consistent.
 
-<hr className="sp--top" />
+---
 
 ### Colored Heading Variations
 
@@ -41,7 +41,7 @@ Should be used as a navigational heading, high up on the page. If a page heading
   <Story story={stories.headingColored} />
 </Canvas>
 
-<hr className="sp--top" />
+---
 
 ### Component Heading Variations
 
@@ -51,7 +51,7 @@ Should be used to to separate content within a big section. If used under Colore
   <Story story={stories.headingComp} />
 </Canvas>
 
-<hr className="sp--top" />
+---
 
 ### List Heading Variations
 
diff --git a/packages/core/stories/elements/Link/Link.stories.mdx b/packages/core/stories/elements/Link/Link.stories.mdx
index f8c5f1c0c6..55a9b86449 100644
--- a/packages/core/stories/elements/Link/Link.stories.mdx
+++ b/packages/core/stories/elements/Link/Link.stories.mdx
@@ -19,20 +19,9 @@ Links are used to embed actions or pathways to more information in a sentence or
 
 ### Inline Link
 
-<div class="container">
-	<div class="row">
-    <div class="col-6">
-			<p>
-				<strong>Usage: </strong>Use when you are linking just a few words of text or when you are doing inline links.
-			</p>
-    </div>
-    <div class="col-6">
-			<p>
-				<strong>Style: </strong>Inline links take the style of the surrounding text, adding only the blue color and an underline.
-			</p>
-    </div>
-  </div>
-</div>
+**Usage:** Use when you are linking just a few words of text or when you are doing inline links.
+
+**Style:** Inline links take the style of the surrounding text, adding only the blue color and an underline.
 
 <Canvas className="borderless">
   <Story
@@ -42,24 +31,13 @@ Links are used to embed actions or pathways to more information in a sentence or
   <Story story={stories.linkCSS} />
 </Canvas>
 
-<hr className="sp--top" />
+---
 
 ### Decorative Link
 
-<div class="container">
-	<div class="row">
-    <div class="col-6">
-			<p>
-				<strong>Usage: </strong>Used for standalone links that require more emphasis, usually inside <code>ma__section-links</code>.
-			</p>
-    </div>
-    <div class="col-6">
-			<p>
-				<strong>Style: </strong>the decorative link is slightly larger in size and appended with an arrow icon.
-			</p>
-    </div>
-  </div>
-</div>
+**Usage:** Used for standalone links that require more emphasis, usually inside `ma__section-links`.
+
+**Style:** the decorative link is slightly larger in size and appended with an arrow icon.
 
 <Canvas>
   <Story
@@ -71,24 +49,14 @@ Links are used to embed actions or pathways to more information in a sentence or
   <Story story={stories.linkDecorativeCSS} />
 </Canvas>
 
-<hr className="sp--top" />
+---
 
 ### Callout Link
 
-<div class="container">
-	<div class="row">
-    <div class="col-6">
-			<p>
-				<strong>Usage: </strong>Call to action links that require more emphasis.
-			</p>
-    </div>
-    <div class="col-6">
-			<p>
-				<strong>Style: </strong>The callout link has the style of a decorative link, but with a slightly larger font-size, and enlosed in a box.
-			</p>
-    </div>
-  </div>
-</div>
+
+**Usage:** Call to action links that require more emphasis.
+
+**Style:** The callout link has the style of a decorative link, but with a slightly larger font-size, and enlosed in a box.
 
 <Canvas>
   <Story
@@ -99,24 +67,13 @@ Links are used to embed actions or pathways to more information in a sentence or
   <Story story={stories.linkCalloutCSS} />
 </Canvas>
 
-<hr className="sp--top" />
+---
 
 ### Link styled as a button
 
-<div class="container">
-	<div class="row">
-    <div class="col-6">
-			<p>
-				<strong>Usage: </strong>If absolutely necessary this can be used for calls-to-action if there are technical reasons not to use <code>ma__button</code>.
-				</p>
-    </div>
-    <div class="col-6">
-			<p>
-				<strong>Style: </strong>Styled exactly the same as <code>ma__button</code>.
-			</p>
-    </div>
-  </div>
-</div>
+**Usage:** If absolutely necessary this can be used for calls-to-action if there are technical reasons not to use `ma__button`.
+
+**Style:** Styled exactly the same as `ma__button`.
 
 <Canvas>
   <Story
@@ -137,7 +94,7 @@ Links are used to embed actions or pathways to more information in a sentence or
   <Story story={stories.linkButtonCSS} />
 </Canvas>
 
-<hr className="sp--top" />
+---
 
 ### Accessibility & Best Practices
 
diff --git a/packages/core/stories/styles/index.scss b/packages/core/stories/styles/index.scss
index 8e2f991a96..190a81ca7e 100644
--- a/packages/core/stories/styles/index.scss
+++ b/packages/core/stories/styles/index.scss
@@ -43,38 +43,16 @@
 @use '@massds/mayflower-assets/scss/01-atoms/place-holder';
 
 // Global
-.sp {
-  &--top {
-    margin-top: 2rem;
-  }
-  &--bottom {
-    margin-bottom: 2rem;
-  }
+hr {
+	margin: 2rem 0;
 }
 
-/*  Tables */
+// Tables
+table,
 table.sbdocs.sbdocs-table {
   min-width: 100%;
 }
 
-// Bootstrap grid overrides
-.container {
-	padding-left: 0 !important;
-}
-
-col-xl, .col-xl-auto, .col-xl-12, .col-xl-11, .col-xl-10, .col-xl-9, .col-xl-8, .col-xl-7, .col-xl-6, .col-xl-5, .col-xl-4, .col-xl-3, .col-xl-2, .col-xl-1, .col-lg, .col-lg-auto, .col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1, .col-md, .col-md-auto, .col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, .col-sm, .col-sm-auto, .col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1, .col, .col-auto, .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 {
-	padding-left: 0 !important;
-	padding-right: 30px !important;
-
-	&:last-child {
-		padding-right: 0 !important;
-	}
-
-	p {
-		margin-top: 0;
-	}
-}
-
 small {
 	font-size: .9rem;
 }
@@ -174,4 +152,4 @@ p.lang-label {
 	line-height: 1.5;
 	margin-block-start: 0;
   margin-block-end: 0;
-}
\ No newline at end of file
+}

From e1cd15bc37d918e8d292433760eca820f65a6d8e Mon Sep 17 00:00:00 2001
From: tkoleary <terrenceoleary@gmail.com>
Date: Fri, 11 Dec 2020 11:09:28 -0600
Subject: [PATCH 08/17] Added withSource noe back to buttons first strory

also made some minor typo fixes and added bullets
---
 .../elements/Button/Button.stories.mdx        | 41 ++++++++-----------
 .../elements/Heading/Heading.stories.mdx      |  4 +-
 .../stories/elements/Link/Link.stories.mdx    | 25 +++++------
 3 files changed, 30 insertions(+), 40 deletions(-)

diff --git a/packages/core/stories/elements/Button/Button.stories.mdx b/packages/core/stories/elements/Button/Button.stories.mdx
index 2f5ebc0191..8d0fa218bb 100644
--- a/packages/core/stories/elements/Button/Button.stories.mdx
+++ b/packages/core/stories/elements/Button/Button.stories.mdx
@@ -15,7 +15,7 @@ import * as stories from './Button.stories.js';
 
 Buttons are used in forms and interactive applications, but also as prominent call-to-action links on website pages.
 
-<Canvas>
+<Canvas withSource="none">
   <Story
 		name="button-primary"
     parameters={{ docs: { transformSource: () => renderReactMarkup(<Button usage="" text="Button"/>) } }}>
@@ -23,15 +23,14 @@ Buttons are used in forms and interactive applications, but also as prominent ca
   </Story>
 </Canvas>
 
-Following web best practices buttons have a target area of 45 pixels. To provide more visual affordance that they are clickable—not just text in a box—they have a shadow to appear slightly raised. Small buttons can be used for secondary tasks on forms—for example image upload—and filters on listing pages. Large buttons should be used for form submits or primary calls to action. There should usually be only one  primary button in any UI. Font sizes reduce slightly on mobile.
+Following web best practices buttons have a target area of 45 pixels. To provide more visual affordance that they are clickable—not just text in a box—they have a shadow to appear slightly raised. Small buttons can be used for secondary tasks on forms—for example image upload—and filters on listing pages. Large buttons should be used for form submits or primary calls to action. There should usually be only one primary button in any UI. Font sizes reduce slightly on mobile.
 
 ---
 
 ### Primary Buttons
 
-**Usage:** For the main action in a form, or for a call-to-action link on a page.
-
-**Style:** Default buttons are solid color with contrasting uppercase text. For actions with text longer than two words use the `title-case` class. On hover the Background color becomes lighter.
+- **Usage:** For the main action in a form, or for a call-to-action link on a page.
+- **Style:** Default buttons are solid color with contrasting uppercase text. For actions with text longer than two words use the `title-case` class. On hover the Background color becomes lighter.
 
 <Canvas>
   <Story
@@ -61,9 +60,8 @@ Following web best practices buttons have a target area of 45 pixels. To provide
 
 ### Secondary Buttons
 
-**Usage:** For secondary actions.
-
-**Style:** The outline button has less visual prominence than the primary button so it can be used alongside it as a secondary action, for example "Cancel". The hover state of the secondary button inverts the background and foreground colors.
+- **Usage:** For secondary actions.
+- **Style:** The outline button has less visual prominence than the primary button so it can be used alongside it as a secondary action, for example "Cancel". The hover state of the secondary button inverts the background and foreground colors.
 
 <Canvas>
   <Story
@@ -93,9 +91,8 @@ Following web best practices buttons have a target area of 45 pixels. To provide
 
 ### Tertiary Buttons
 
-**Usage:** For third-level actions on a page.
-
-**Style:** The gray color is even less prominent than outline button to de-emphasize third-level tasks. The hover state inverts the background and text colors.
+- **Usage:** For third-level actions on a page.
+- **Style:** The gray color is even less prominent than outline button to de-emphasize third-level tasks. The hover state inverts the background and text colors.
 
 <Canvas>
   <Story
@@ -110,9 +107,8 @@ Following web best practices buttons have a target area of 45 pixels. To provide
 
 ### Quaternary Buttons
 
-**Usage:** For fourth-level actions or actions.
-
-**Style:** Appears as a link.
+- **Usage:** For fourth-level actions or actions.
+- **Style:** Appears as a link.
 
 <Canvas>
   <Story
@@ -127,9 +123,8 @@ Following web best practices buttons have a target area of 45 pixels. To provide
 
 ### Disabled Buttons
 
-**Usage:** Disabled buttons should not be clickable. The disabled attribute (as opposed to hidden) can be applied for actions where the user should see the action and it's state but may not be able to perform it because they either don't have permission or some other condition in the form has not been met.
-
-**Style:** Disabled buttons have no box shadow (since the box shadow is what suggests clickability). Their opacity is `0.5.`, no hover or focus states are provided and the cursor is set to `not-allowed`.
+- **Usage:** Disabled buttons should not be clickable. The disabled attribute (as opposed to hidden) can be applied for actions where the user should see the action and it's state but may not be able to perform it because they either don't have permission or some other condition in the form has not been met.
+- **Style:** Disabled buttons have no box shadow (since the box shadow is what suggests clickability). Their opacity is `0.5.`, no hover or focus states are provided and the cursor is set to `not-allowed`.
 
 
 <Canvas>
@@ -160,10 +155,10 @@ Following web best practices buttons have a target area of 45 pixels. To provide
 
 ### Accessibility & Best Practices
 
-*** Always** use `<button>` or `<a>` tags,** never** `<div>` or `<img>` tags so they are recognizable to screen readers.
-*** Always** Make sure text and background colors have sufficient contrast to meet WCAG guidelines.
-*** Never** disable or hide the browser focus state so focussed elements always have a visual affordance.
-* When using icons in buttons:
-  1.** Never** use an icon alone without text and always provide text for the icon itself, unlesss the icon is purely decorative.
+- **Always** use `<button>` or `<a>` tags,** never** `<div>` or `<img>` tags so they are recognizable to screen readers.
+- **Always** Make sure text and background colors have sufficient contrast to meet WCAG guidelines.
+- **Never** disable or hide the browser focus state so focussed elements always have a visual affordance.
+- When using icons in buttons:
+  1. **Never** use an icon alone without text and always provide text for the icon itself, unlesss the icon is purely decorative.
   2. If it is decorative, use `aria-hidden="true"`, with an empty alt attribute `alt=""`, and do not use `title` or other aria attributes.
-* When styling links as buttons, remember the keyboard handles links and buttons differently. The** Space** key triggers a button, but the** Enter** key triggers a link. Your UI help text should reflect that.
+- When styling links as buttons, remember the keyboard handles links and buttons differently. The **Space** key triggers a button, but the **Enter** key triggers a link. Your UI help text should reflect that.
diff --git a/packages/core/stories/elements/Heading/Heading.stories.mdx b/packages/core/stories/elements/Heading/Heading.stories.mdx
index d4cbcdb656..4ba12bc3a8 100644
--- a/packages/core/stories/elements/Heading/Heading.stories.mdx
+++ b/packages/core/stories/elements/Heading/Heading.stories.mdx
@@ -63,5 +63,5 @@ Should be used as a heading of a list either full width or in a 50/50 split the
 
 ## Accessibility Best-practices
 
-* Headings should not be used to convey style items.
-* Headings must be hierarchical and properly nested (all h2’s within an h1 etc) so as to maintain proper navigability for low or non-sighted users
+- Headings should not be used to convey style items.
+- Headings must be hierarchical and properly nested (all h2’s within an h1 etc) so as to maintain proper navigability for low or non-sighted users
diff --git a/packages/core/stories/elements/Link/Link.stories.mdx b/packages/core/stories/elements/Link/Link.stories.mdx
index 55a9b86449..32595cf9bd 100644
--- a/packages/core/stories/elements/Link/Link.stories.mdx
+++ b/packages/core/stories/elements/Link/Link.stories.mdx
@@ -19,9 +19,8 @@ Links are used to embed actions or pathways to more information in a sentence or
 
 ### Inline Link
 
-**Usage:** Use when you are linking just a few words of text or when you are doing inline links.
-
-**Style:** Inline links take the style of the surrounding text, adding only the blue color and an underline.
+- **Usage:** Use when you are linking just a few words of text or when you are doing inline links.
+- **Style:** Inline links take the style of the surrounding text, adding only the blue color and an underline.
 
 <Canvas className="borderless">
   <Story
@@ -35,9 +34,8 @@ Links are used to embed actions or pathways to more information in a sentence or
 
 ### Decorative Link
 
-**Usage:** Used for standalone links that require more emphasis, usually inside `ma__section-links`.
-
-**Style:** the decorative link is slightly larger in size and appended with an arrow icon.
+- **Usage:** Used for standalone links that require more emphasis, usually inside `ma__section-links`.
+- **Style:** the decorative link is slightly larger in size and appended with an arrow icon.
 
 <Canvas>
   <Story
@@ -53,10 +51,8 @@ Links are used to embed actions or pathways to more information in a sentence or
 
 ### Callout Link
 
-
-**Usage:** Call to action links that require more emphasis.
-
-**Style:** The callout link has the style of a decorative link, but with a slightly larger font-size, and enlosed in a box.
+- **Usage:** Call to action links that require more emphasis.
+- **Style:** The callout link has the style of a decorative link, but with a slightly larger font-size, and enlosed in a box.
 
 <Canvas>
   <Story
@@ -71,9 +67,8 @@ Links are used to embed actions or pathways to more information in a sentence or
 
 ### Link styled as a button
 
-**Usage:** If absolutely necessary this can be used for calls-to-action if there are technical reasons not to use `ma__button`.
-
-**Style:** Styled exactly the same as `ma__button`.
+- **Usage:** If absolutely necessary this can be used for calls-to-action if there are technical reasons not to use `ma__button`.
+- **Style:** Styled exactly the same as `ma__button`.
 
 <Canvas>
   <Story
@@ -100,5 +95,5 @@ Links are used to embed actions or pathways to more information in a sentence or
 
 The purpose of a link can be determined from the link text alone or from the text combined with programmatically determined content
 
-* Avoid using language in links that providess no specific information or is repetitive like “read more”.
-* Links that start a process like downloading files, opening your e-mail client, or calling a phone number should be clearly labeled for what they are.
+- Avoid using language in links that provides no specific information or is repetitive like “read more”.
+- Links that start a process like downloading files, opening your e-mail client, or calling a phone number should be clearly labeled for what they do.

From 1349482ddf717f959b8bf575e1e5097e3f3f2000 Mon Sep 17 00:00:00 2001
From: Terrence Kevin Oleary <terrenceoleary@gmail.com>
Date: Fri, 11 Dec 2020 13:48:02 -0600
Subject: [PATCH 09/17] Update
 packages/core/stories/elements/Button/Button.stories.mdx

Co-authored-by: Minghua Sun <clairesunstudio@gmail.com>
---
 packages/core/stories/elements/Button/Button.stories.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/stories/elements/Button/Button.stories.mdx b/packages/core/stories/elements/Button/Button.stories.mdx
index 8d0fa218bb..b7f75e9dca 100644
--- a/packages/core/stories/elements/Button/Button.stories.mdx
+++ b/packages/core/stories/elements/Button/Button.stories.mdx
@@ -91,7 +91,7 @@ Following web best practices buttons have a target area of 45 pixels. To provide
 
 ### Tertiary Buttons
 
-- **Usage:** For third-level actions on a page.
+- **Usage:** For third-level actions.
 - **Style:** The gray color is even less prominent than outline button to de-emphasize third-level tasks. The hover state inverts the background and text colors.
 
 <Canvas>

From 97cc674042261922cdc3fb752af60d0f1259f1a8 Mon Sep 17 00:00:00 2001
From: Terrence Kevin Oleary <terrenceoleary@gmail.com>
Date: Fri, 11 Dec 2020 13:48:21 -0600
Subject: [PATCH 10/17] Update
 packages/core/stories/elements/Button/Button.stories.mdx

Co-authored-by: Minghua Sun <clairesunstudio@gmail.com>
---
 packages/core/stories/elements/Button/Button.stories.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/stories/elements/Button/Button.stories.mdx b/packages/core/stories/elements/Button/Button.stories.mdx
index b7f75e9dca..a0dfbf7bac 100644
--- a/packages/core/stories/elements/Button/Button.stories.mdx
+++ b/packages/core/stories/elements/Button/Button.stories.mdx
@@ -13,7 +13,7 @@ import * as stories from './Button.stories.js';
 
 # Buttons
 
-Buttons are used in forms and interactive applications, but also as prominent call-to-action links on website pages.
+Buttons are used in forms and interactive applications to trigger actions.
 
 <Canvas withSource="none">
   <Story

From d02308f374716e7da07741b17f88599dc5df0d73 Mon Sep 17 00:00:00 2001
From: Terrence Kevin Oleary <terrenceoleary@gmail.com>
Date: Fri, 11 Dec 2020 13:49:02 -0600
Subject: [PATCH 11/17] Update
 packages/core/stories/elements/Button/Button.stories.mdx

Co-authored-by: Minghua Sun <clairesunstudio@gmail.com>
---
 packages/core/stories/elements/Button/Button.stories.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/stories/elements/Button/Button.stories.mdx b/packages/core/stories/elements/Button/Button.stories.mdx
index a0dfbf7bac..66967923d2 100644
--- a/packages/core/stories/elements/Button/Button.stories.mdx
+++ b/packages/core/stories/elements/Button/Button.stories.mdx
@@ -30,7 +30,7 @@ Following web best practices buttons have a target area of 45 pixels. To provide
 ### Primary Buttons
 
 - **Usage:** For the main action in a form, or for a call-to-action link on a page.
-- **Style:** Default buttons are solid color with contrasting uppercase text. For actions with text longer than two words use the `title-case` class. On hover the Background color becomes lighter.
+- **Style:** Default buttons are solid color with contrasting uppercase text. For actions with text longer than two words use the title case instead of all caps. On hover, the Background color becomes lighter.
 
 <Canvas>
   <Story

From b0885c6165586dbeeaeb9ef797bbb00c9753c150 Mon Sep 17 00:00:00 2001
From: Terrence Kevin Oleary <terrenceoleary@gmail.com>
Date: Fri, 11 Dec 2020 13:49:36 -0600
Subject: [PATCH 12/17] Update
 packages/core/stories/elements/Link/Link.stories.mdx

Co-authored-by: Minghua Sun <clairesunstudio@gmail.com>
---
 packages/core/stories/elements/Link/Link.stories.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/stories/elements/Link/Link.stories.mdx b/packages/core/stories/elements/Link/Link.stories.mdx
index 32595cf9bd..6c63dfe690 100644
--- a/packages/core/stories/elements/Link/Link.stories.mdx
+++ b/packages/core/stories/elements/Link/Link.stories.mdx
@@ -22,7 +22,7 @@ Links are used to embed actions or pathways to more information in a sentence or
 - **Usage:** Use when you are linking just a few words of text or when you are doing inline links.
 - **Style:** Inline links take the style of the surrounding text, adding only the blue color and an underline.
 
-<Canvas className="borderless">
+<Canvas>
   <Story
     name="link">
       <p>Some content and then an <a href="#">inline link</a>, followed by more content.</p>

From 5f7f478f1865249b244fdda1697d2d00dd754df9 Mon Sep 17 00:00:00 2001
From: Terrence Kevin Oleary <terrenceoleary@gmail.com>
Date: Fri, 11 Dec 2020 13:51:05 -0600
Subject: [PATCH 13/17] Update packages/core/stories/styles/index.scss

Co-authored-by: Minghua Sun <clairesunstudio@gmail.com>
---
 packages/core/stories/styles/index.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/stories/styles/index.scss b/packages/core/stories/styles/index.scss
index 190a81ca7e..708b132534 100644
--- a/packages/core/stories/styles/index.scss
+++ b/packages/core/stories/styles/index.scss
@@ -99,7 +99,7 @@ ul.sg-colors {
 
 // Links story
 span.ma__decorative-link  {
-	display: inline !important;
+	display: inline;
 }
 
 // Header story

From 942dc3d5c60b3750ba6742d828b6c55ec89fa7cf Mon Sep 17 00:00:00 2001
From: tkoleary <terrenceoleary@gmail.com>
Date: Fri, 11 Dec 2020 14:07:20 -0600
Subject: [PATCH 14/17] Some minor tweaks from comments

---
 packages/core/stories/elements/Button/Button.stories.mdx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/core/stories/elements/Button/Button.stories.mdx b/packages/core/stories/elements/Button/Button.stories.mdx
index 66967923d2..a4d5d984e8 100644
--- a/packages/core/stories/elements/Button/Button.stories.mdx
+++ b/packages/core/stories/elements/Button/Button.stories.mdx
@@ -30,7 +30,7 @@ Following web best practices buttons have a target area of 45 pixels. To provide
 ### Primary Buttons
 
 - **Usage:** For the main action in a form, or for a call-to-action link on a page.
-- **Style:** Default buttons are solid color with contrasting uppercase text. For actions with text longer than two words use the title case instead of all caps. On hover, the Background color becomes lighter.
+- **Style:** Default buttons are solid color with contrasting uppercase text. THe hover state lightens the primary button background color.
 
 <Canvas>
   <Story
@@ -92,7 +92,7 @@ Following web best practices buttons have a target area of 45 pixels. To provide
 ### Tertiary Buttons
 
 - **Usage:** For third-level actions.
-- **Style:** The gray color is even less prominent than outline button to de-emphasize third-level tasks. The hover state inverts the background and text colors.
+- **Style:** The gray color is even less prominent than outline button to de-emphasize third-level tasks. The hover state lightens the primary button background color.
 
 <Canvas>
   <Story
@@ -108,7 +108,7 @@ Following web best practices buttons have a target area of 45 pixels. To provide
 ### Quaternary Buttons
 
 - **Usage:** For fourth-level actions or actions.
-- **Style:** Appears as a link.
+- **Style:** Appears as a link, with a small amount of letterspacing and underline (Actually a `border-bottom` not a text underline). The hover state darkens the underline and increases it's weight.
 
 <Canvas>
   <Story

From 8010164b34e90045996084f2e220a200b9c43f6c Mon Sep 17 00:00:00 2001
From: tkoleary <terrenceoleary@gmail.com>
Date: Fri, 11 Dec 2020 14:28:19 -0600
Subject: [PATCH 15/17] Typo fixes

---
 packages/core/stories/elements/Button/Button.stories.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/stories/elements/Button/Button.stories.mdx b/packages/core/stories/elements/Button/Button.stories.mdx
index a4d5d984e8..8c2d97a502 100644
--- a/packages/core/stories/elements/Button/Button.stories.mdx
+++ b/packages/core/stories/elements/Button/Button.stories.mdx
@@ -30,7 +30,7 @@ Following web best practices buttons have a target area of 45 pixels. To provide
 ### Primary Buttons
 
 - **Usage:** For the main action in a form, or for a call-to-action link on a page.
-- **Style:** Default buttons are solid color with contrasting uppercase text. THe hover state lightens the primary button background color.
+- **Style:** Default buttons are solid color with contrasting uppercase text. The hover state lightens the primary button background color.
 
 <Canvas>
   <Story
@@ -92,7 +92,7 @@ Following web best practices buttons have a target area of 45 pixels. To provide
 ### Tertiary Buttons
 
 - **Usage:** For third-level actions.
-- **Style:** The gray color is even less prominent than outline button to de-emphasize third-level tasks. The hover state lightens the primary button background color.
+- **Style:** The gray color is even less prominent than outline button to de-emphasize third-level tasks. The hover state lightens the tertiary button background color.
 
 <Canvas>
   <Story

From 2df2d8c219cf3c6bec547810be44d2c8a84198da Mon Sep 17 00:00:00 2001
From: Minghua Sun <clairesunstudio@gmail.com>
Date: Fri, 11 Dec 2020 16:23:01 -0500
Subject: [PATCH 16/17] Update
 packages/core/stories/elements/Link/Link.stories.mdx

---
 packages/core/stories/elements/Link/Link.stories.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/stories/elements/Link/Link.stories.mdx b/packages/core/stories/elements/Link/Link.stories.mdx
index 6c63dfe690..4b5ebac201 100644
--- a/packages/core/stories/elements/Link/Link.stories.mdx
+++ b/packages/core/stories/elements/Link/Link.stories.mdx
@@ -67,7 +67,7 @@ Links are used to embed actions or pathways to more information in a sentence or
 
 ### Link styled as a button
 
-- **Usage:** If absolutely necessary this can be used for calls-to-action if there are technical reasons not to use `ma__button`.
+- **Usage:** If absolutely necessary this can be used for calls-to-action if there are good design reasons not to use Callout Link. In general, links should be styled differently than buttons, to help set expectations of their different behaviors.
 - **Style:** Styled exactly the same as `ma__button`.
 
 <Canvas>

From af7c0ec874ee0be2fd514c041133da9158a2cb91 Mon Sep 17 00:00:00 2001
From: Minghua Sun <clairesunstudio@gmail.com>
Date: Fri, 11 Dec 2020 16:23:13 -0500
Subject: [PATCH 17/17] Update
 packages/core/stories/elements/Link/Link.stories.mdx

---
 packages/core/stories/elements/Link/Link.stories.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/stories/elements/Link/Link.stories.mdx b/packages/core/stories/elements/Link/Link.stories.mdx
index 4b5ebac201..750705b8f0 100644
--- a/packages/core/stories/elements/Link/Link.stories.mdx
+++ b/packages/core/stories/elements/Link/Link.stories.mdx
@@ -65,7 +65,7 @@ Links are used to embed actions or pathways to more information in a sentence or
 
 ---
 
-### Link styled as a button
+### Link Styled as a Button
 
 - **Usage:** If absolutely necessary this can be used for calls-to-action if there are good design reasons not to use Callout Link. In general, links should be styled differently than buttons, to help set expectations of their different behaviors.
 - **Style:** Styled exactly the same as `ma__button`.