@pareto-engineering/design-system 2.0.0-alpha.3 → 2.0.0-alpha.7

package/src/__snapshots__/Storyshots.test.js.snap

@@ -783,6 +783,39 @@ exports[`Storyshots a/LoadingCircle Base 1`] = `
 </div>
 `;
 
+exports[`Storyshots a/OvalIllustration With Background 1`] = `
+<div
+  className="base oval-illustration right"
+>
+  <div
+    className="oval-background y-background3"
+  />
+  <div
+    className="illustration"
+  >
+    <img
+      alt="illustration"
+      src="https://www.azernews.az/media/pictures/company_picture.jpg"
+    />
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/OvalIllustration Without Background 1`] = `
+<div
+  className="base oval-illustration left"
+>
+  <div
+    className="illustration"
+  >
+    <img
+      alt="illustration"
+      src="https://www.azernews.az/media/pictures/company_picture.jpg"
+    />
+  </div>
+</div>
+`;
+
 exports[`Storyshots a/People Base 1`] = `
 <div
   className="x-background1 b-x v1 p-v"
@@ -1146,141 +1179,514 @@ exports[`Storyshots a/SVG Stroke 1`] = `
 </svg>
 `;
 
-exports[`Storyshots a/SiteContext Base 1`] = `"Sample SiteContext"`;
-
-exports[`Storyshots a/Spinner Base 1`] = `
+exports[`Storyshots a/Shapes Circle 1`] = `
 <div
-  className="y-background1 b-y"
+  className="y-background5 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
 >
   <div
-    className="base spinner x-main1"
+    className="base shapes"
+    style={
+      Object {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "30em",
+        "--vertical-align": "flex-end",
+      }
+    }
   >
     <div
-      className="loader"
+      className="circle"
     />
   </div>
 </div>
 `;
 
-exports[`Storyshots a/TeamInfo Base 1`] = `
+exports[`Storyshots a/Shapes Diamonds 1`] = `
 <div
-  className="base team-info u1"
+  className="y-background4 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
 >
-  <p
-    className="description s-1 md-s0"
-  >
-    Working at Pareto constantly allows me to learn something new. The team gives everyone a strong support system and never leaves anyone behind, especially when tasks get difficult.
-  </p>
   <div
-    className="content"
+    className="base shapes"
+    style={
+      Object {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "30em",
+        "--vertical-align": "flex-end",
+      }
+    }
   >
-    <img
-      alt="Lanie Col-long, Partner at Pareto"
-      className="img mr-u"
-      src="https://pareto-v1.s3.us-west-2.amazonaws.com/profile-pictures/Lanie-Col-long.png"
-    />
     <div
-      className="team-member"
+      className="diamonds"
     >
-      <span
-        className="name s-1"
-      >
-        Lanie Col-long
-      </span>
-      <span
-        className="role s-2"
-      >
-        Partner
-      </span>
+      <div
+        className="top-right"
+      />
+      <div
+        className="bottom-left"
+      />
+      <div
+        className="bottom-right"
+      />
     </div>
   </div>
 </div>
 `;
 
-exports[`Storyshots a/Timestamp Base 1`] = `
-<p
-  className="base timestamp"
-  onClick={[Function]}
+exports[`Storyshots a/Shapes Ellipse 1`] = `
+<div
+  className="y-main3 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
 >
-  1665792000000
-</p>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "30em",
+        "--vertical-align": "flex-end",
+      }
+    }
+  >
+    <div
+      className="ellipse"
+    />
+  </div>
+</div>
 `;
 
-exports[`Storyshots a/Timestamp Date Format 1`] = `
-<p
-  className="base timestamp"
+exports[`Storyshots a/Shapes Ellipses 1`] = `
+<div
+  className="y-background4 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
 >
-  2022-10-15 at 00:00
-</p>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "30em",
+        "--vertical-align": "flex-end",
+      }
+    }
+  >
+    <div
+      className="ellipses"
+    >
+      <div
+        className="first"
+      />
+      <div
+        className="second"
+      />
+    </div>
+  </div>
+</div>
 `;
 
-exports[`Storyshots a/Timestamp Distance Format 1`] = `
-<p
-  className="base timestamp"
-  onClick={[Function]}
+exports[`Storyshots a/Shapes Half Circle 1`] = `
+<div
+  className="y-background4 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
 >
-  in 10 months
-</p>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "30em",
+        "--vertical-align": "flex-end",
+      }
+    }
+  >
+    <div
+      className="half-circle"
+    />
+  </div>
+</div>
 `;
 
-exports[`Storyshots a/Timestamp Prefix 1`] = `
-<p
-  className="base timestamp"
-  onClick={[Function]}
+exports[`Storyshots a/Shapes Half Ellipse 1`] = `
+<div
+  className="y-background3 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
 >
-  <strong>
-    Updated :
-  </strong>
-   
-  1665792000000
-</p>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "25em",
+        "--vertical-align": "flex-end",
+      }
+    }
+  >
+    <div
+      className="half-ellipse"
+    />
+  </div>
+</div>
 `;
 
-exports[`Storyshots a/Timestamp Relative Format 1`] = `
-Array [
-  "Click to see relative format. Relative format has not been enabled by default because of chromatic snapshots.",
-  <p
-    className="base timestamp"
-    onClick={[Function]}
+exports[`Storyshots a/Shapes Half Ellipses 1`] = `
+<div
+  className="y-background3 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
+>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "25em",
+        "--vertical-align": "flex-end",
+      }
+    }
   >
-    2022-10-10T00:00:00.000+00:00
-  </p>,
-]
+    <div
+      className="half-ellipses"
+    >
+      <div
+        className="up"
+      />
+      <div
+        className="down"
+      />
+    </div>
+  </div>
+</div>
 `;
 
-exports[`Storyshots b/Button Base 1`] = `
-<button
-  className="base button x-main1"
-  type="button"
+exports[`Storyshots a/Shapes Rectangles 1`] = `
+<div
+  className="y-background5 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
 >
-  Sample Button
-</button>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "30em",
+        "--vertical-align": "flex-end",
+      }
+    }
+  >
+    <div
+      className="rectangles"
+    >
+      <div
+        className="top"
+      />
+      <div
+        className="center"
+      />
+      <div
+        className="bottom"
+      />
+    </div>
+  </div>
+</div>
 `;
 
-exports[`Storyshots b/Button Colors 1`] = `
-Array [
-  <button
-    className="base button x-main1"
-    type="button"
-  >
-    This is a
-     
-    main1
-     
-    button
-  </button>,
-  <button
-    className="base button x-main2"
-    type="button"
+exports[`Storyshots a/Shapes Rotated Ellipses 1`] = `
+<div
+  className="y-background5 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
+>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "60em",
+        "--vertical-align": "center",
+      }
+    }
   >
-    This is a
-     
-    main2
-     
-    button
-  </button>,
+    <div
+      className="rotated-ellipses"
+    >
+      <div
+        className="ellipse-one"
+      />
+      <div
+        className="ellipse-two"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Shapes Spiral 1`] = `
+<div
+  className="y-background6 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
+>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "100em",
+        "--vertical-align": "center",
+      }
+    }
+  >
+    <div
+      className="spiral"
+    >
+      <div
+        className="circle-one"
+      />
+      <div
+        className="circle-two"
+      />
+      <div
+        className="circle-three"
+      />
+      <div
+        className="circle-four"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Shapes Triangle 1`] = `
+<div
+  className="y-background6 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
+>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "30em",
+        "--vertical-align": "flex-end",
+      }
+    }
+  >
+    <div
+      className="triangle"
+    />
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/SiteContext Base 1`] = `"Sample SiteContext"`;
+
+exports[`Storyshots a/Spinner Base 1`] = `
+<div
+  className="y-background1 b-y"
+>
+  <div
+    className="base spinner x-main1"
+  >
+    <div
+      className="loader"
+    />
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/TeamInfo Base 1`] = `
+<div
+  className="base team-info u1"
+>
+  <p
+    className="description s-1 md-s0"
+  >
+    Working at Pareto constantly allows me to learn something new. The team gives everyone a strong support system and never leaves anyone behind, especially when tasks get difficult.
+  </p>
+  <div
+    className="content"
+  >
+    <img
+      alt="Lanie Col-long, Partner at Pareto"
+      className="img mr-u"
+      src="https://pareto-v1.s3.us-west-2.amazonaws.com/profile-pictures/Lanie-Col-long.png"
+    />
+    <div
+      className="team-member"
+    >
+      <span
+        className="name s-1"
+      >
+        Lanie Col-long
+      </span>
+      <span
+        className="role s-2"
+      >
+        Partner
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Timestamp Base 1`] = `
+<p
+  className="base timestamp"
+  onClick={[Function]}
+>
+  1665792000000
+</p>
+`;
+
+exports[`Storyshots a/Timestamp Date Format 1`] = `
+<p
+  className="base timestamp"
+>
+  2022-10-15 at 00:00
+</p>
+`;
+
+exports[`Storyshots a/Timestamp Distance Format 1`] = `
+<p
+  className="base timestamp"
+  onClick={[Function]}
+>
+  in 10 months
+</p>
+`;
+
+exports[`Storyshots a/Timestamp Prefix 1`] = `
+<p
+  className="base timestamp"
+  onClick={[Function]}
+>
+  <strong>
+    Updated :
+  </strong>
+   
+  1665792000000
+</p>
+`;
+
+exports[`Storyshots a/Timestamp Relative Format 1`] = `
+Array [
+  "Click to see relative format. Relative format has not been enabled by default because of chromatic snapshots.",
+  <p
+    className="base timestamp"
+    onClick={[Function]}
+  >
+    2022-10-10T00:00:00.000+00:00
+  </p>,
+]
+`;
+
+exports[`Storyshots b/Button Base 1`] = `
+<button
+  className="base button x-main1"
+  type="button"
+>
+  Sample Button
+</button>
+`;
+
+exports[`Storyshots b/Button Compact 1`] = `
+Array [
   <button
-    className="base button x-main3"
+    className="base button x-main1 modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    main1
+     
+    button
+  </button>,
+  <button
+    className="base button x-main2 modifierCompact"
+    type="button"
+  >
+    This is a
+     
+    main2
+     
+    button
+  </button>,
+  <button
+    className="base button x-main3 modifierCompact"
     type="button"
   >
     This is a
@@ -1290,7 +1696,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-main4"
+    className="base button x-main4 modifierCompact"
     type="button"
   >
     This is a
@@ -1300,7 +1706,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-success"
+    className="base button x-success modifierCompact"
     type="button"
   >
     This is a
@@ -1310,7 +1716,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-warning"
+    className="base button x-warning modifierCompact"
     type="button"
   >
     This is a
@@ -1320,7 +1726,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-error"
+    className="base button x-error modifierCompact"
     type="button"
   >
     This is a
@@ -1330,7 +1736,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-background1"
+    className="base button x-background1 modifierCompact"
     type="button"
   >
     This is a
@@ -1340,7 +1746,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-background2"
+    className="base button x-background2 modifierCompact"
     type="button"
   >
     This is a
@@ -1350,7 +1756,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-background3"
+    className="base button x-background3 modifierCompact"
     type="button"
   >
     This is a
@@ -1360,7 +1766,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-background4"
+    className="base button x-background4 modifierCompact"
     type="button"
   >
     This is a
@@ -1370,7 +1776,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-background5"
+    className="base button x-background5 modifierCompact"
     type="button"
   >
     This is a
@@ -1380,7 +1786,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-background6"
+    className="base button x-background6 modifierCompact"
     type="button"
   >
     This is a
@@ -1390,7 +1796,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-heading"
+    className="base button x-heading modifierCompact"
     type="button"
   >
     This is a
@@ -1400,7 +1806,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-paragraph"
+    className="base button x-paragraph modifierCompact"
     type="button"
   >
     This is a
@@ -1410,7 +1816,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-subtitle"
+    className="base button x-subtitle modifierCompact"
     type="button"
   >
     This is a
@@ -1420,7 +1826,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-metadata"
+    className="base button x-metadata modifierCompact"
     type="button"
   >
     This is a
@@ -1430,7 +1836,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-link"
+    className="base button x-link modifierCompact"
     type="button"
   >
     This is a
@@ -1440,7 +1846,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-navlink"
+    className="base button x-navlink modifierCompact"
     type="button"
   >
     This is a
@@ -1450,7 +1856,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-twitter"
+    className="base button x-twitter modifierCompact"
     type="button"
   >
     This is a
@@ -1460,7 +1866,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-facebook"
+    className="base button x-facebook modifierCompact"
     type="button"
   >
     This is a
@@ -1470,7 +1876,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-instagram"
+    className="base button x-instagram modifierCompact"
     type="button"
   >
     This is a
@@ -1480,7 +1886,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-google"
+    className="base button x-google modifierCompact"
     type="button"
   >
     This is a
@@ -1490,7 +1896,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-black"
+    className="base button x-black modifierCompact"
     type="button"
   >
     This is a
@@ -1500,7 +1906,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-anchor"
+    className="base button x-anchor modifierCompact"
     type="button"
   >
     This is a
@@ -1510,7 +1916,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-grey"
+    className="base button x-grey modifierCompact"
     type="button"
   >
     This is a
@@ -1520,7 +1926,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-pearl"
+    className="base button x-pearl modifierCompact"
     type="button"
   >
     This is a
@@ -1530,7 +1936,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-white"
+    className="base button x-white modifierCompact"
     type="button"
   >
     This is a
@@ -1542,267 +1948,332 @@ Array [
 ]
 `;
 
-exports[`Storyshots b/Button Compact 1`] = `
+exports[`Storyshots b/Button Disabled 1`] = `
 Array [
   <button
-    className="base button x-main1 modifierCompact"
+    className="base button x-main1"
+    disabled={true}
     type="button"
   >
     This is a
      
     main1
      
+    button
   </button>,
   <button
-    className="base button x-main2 modifierCompact"
+    className="base button x-main2"
+    disabled={true}
     type="button"
   >
     This is a
      
     main2
      
+    button
   </button>,
   <button
-    className="base button x-main3 modifierCompact"
+    className="base button x-main3"
+    disabled={true}
     type="button"
   >
     This is a
      
     main3
      
+    button
   </button>,
   <button
-    className="base button x-main4 modifierCompact"
+    className="base button x-main4"
+    disabled={true}
     type="button"
   >
     This is a
      
     main4
      
+    button
   </button>,
   <button
-    className="base button x-success modifierCompact"
+    className="base button x-success"
+    disabled={true}
     type="button"
   >
     This is a
      
     success
      
+    button
   </button>,
   <button
-    className="base button x-warning modifierCompact"
+    className="base button x-warning"
+    disabled={true}
     type="button"
   >
     This is a
      
     warning
      
+    button
   </button>,
   <button
-    className="base button x-error modifierCompact"
+    className="base button x-error"
+    disabled={true}
     type="button"
   >
     This is a
      
     error
      
+    button
   </button>,
   <button
-    className="base button x-background1 modifierCompact"
+    className="base button x-background1"
+    disabled={true}
     type="button"
   >
     This is a
      
     background1
      
+    button
   </button>,
   <button
-    className="base button x-background2 modifierCompact"
+    className="base button x-background2"
+    disabled={true}
     type="button"
   >
     This is a
      
     background2
      
+    button
   </button>,
   <button
-    className="base button x-background3 modifierCompact"
+    className="base button x-background3"
+    disabled={true}
     type="button"
   >
     This is a
      
     background3
      
+    button
   </button>,
   <button
-    className="base button x-background4 modifierCompact"
+    className="base button x-background4"
+    disabled={true}
     type="button"
   >
     This is a
      
     background4
      
+    button
   </button>,
   <button
-    className="base button x-background5 modifierCompact"
+    className="base button x-background5"
+    disabled={true}
     type="button"
   >
     This is a
      
     background5
      
+    button
   </button>,
   <button
-    className="base button x-background6 modifierCompact"
+    className="base button x-background6"
+    disabled={true}
     type="button"
   >
     This is a
      
     background6
      
+    button
   </button>,
   <button
-    className="base button x-heading modifierCompact"
+    className="base button x-heading"
+    disabled={true}
     type="button"
   >
     This is a
      
     heading
      
+    button
   </button>,
   <button
-    className="base button x-paragraph modifierCompact"
+    className="base button x-paragraph"
+    disabled={true}
     type="button"
   >
     This is a
      
     paragraph
      
+    button
   </button>,
   <button
-    className="base button x-subtitle modifierCompact"
+    className="base button x-subtitle"
+    disabled={true}
     type="button"
   >
     This is a
      
     subtitle
      
+    button
   </button>,
   <button
-    className="base button x-metadata modifierCompact"
+    className="base button x-metadata"
+    disabled={true}
     type="button"
   >
     This is a
      
     metadata
      
+    button
   </button>,
   <button
-    className="base button x-link modifierCompact"
+    className="base button x-link"
+    disabled={true}
     type="button"
   >
     This is a
      
     link
      
+    button
   </button>,
   <button
-    className="base button x-navlink modifierCompact"
+    className="base button x-navlink"
+    disabled={true}
     type="button"
   >
     This is a
      
     navlink
      
+    button
   </button>,
   <button
-    className="base button x-twitter modifierCompact"
+    className="base button x-twitter"
+    disabled={true}
     type="button"
   >
     This is a
      
     twitter
      
+    button
   </button>,
   <button
-    className="base button x-facebook modifierCompact"
+    className="base button x-facebook"
+    disabled={true}
     type="button"
   >
     This is a
      
     facebook
      
+    button
   </button>,
   <button
-    className="base button x-instagram modifierCompact"
+    className="base button x-instagram"
+    disabled={true}
     type="button"
   >
     This is a
      
     instagram
      
+    button
   </button>,
   <button
-    className="base button x-google modifierCompact"
+    className="base button x-google"
+    disabled={true}
     type="button"
   >
     This is a
      
     google
      
+    button
   </button>,
   <button
-    className="base button x-black modifierCompact"
+    className="base button x-black"
+    disabled={true}
     type="button"
   >
     This is a
      
     black
      
+    button
   </button>,
   <button
-    className="base button x-anchor modifierCompact"
+    className="base button x-anchor"
+    disabled={true}
     type="button"
   >
     This is a
      
     anchor
      
+    button
   </button>,
   <button
-    className="base button x-grey modifierCompact"
+    className="base button x-grey"
+    disabled={true}
     type="button"
   >
     This is a
      
     grey
      
+    button
   </button>,
   <button
-    className="base button x-pearl modifierCompact"
+    className="base button x-pearl"
+    disabled={true}
     type="button"
   >
     This is a
      
     pearl
      
+    button
   </button>,
   <button
-    className="base button x-white modifierCompact"
+    className="base button x-white"
+    disabled={true}
     type="button"
   >
     This is a
      
     white
      
+    button
   </button>,
 ]
 `;
 
-exports[`Storyshots b/Button Disabled 1`] = `
+exports[`Storyshots b/Button Ghost 1`] = `
+<button
+  className="base button x-main1 modifierGhost"
+  type="button"
+>
+  Sample Button
+</button>
+`;
+
+exports[`Storyshots b/Button Ghost Disabled 1`] = `
 Array [
   <button
-    className="base button x-main1"
+    className="base button x-main1 modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1810,9 +2281,10 @@ Array [
      
     main1
      
+    button
   </button>,
   <button
-    className="base button x-main2"
+    className="base button x-main2 modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1820,9 +2292,10 @@ Array [
      
     main2
      
+    button
   </button>,
   <button
-    className="base button x-main3"
+    className="base button x-main3 modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1830,9 +2303,10 @@ Array [
      
     main3
      
+    button
   </button>,
   <button
-    className="base button x-main4"
+    className="base button x-main4 modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1840,9 +2314,10 @@ Array [
      
     main4
      
+    button
   </button>,
   <button
-    className="base button x-success"
+    className="base button x-success modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1850,9 +2325,10 @@ Array [
      
     success
      
+    button
   </button>,
   <button
-    className="base button x-warning"
+    className="base button x-warning modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1860,9 +2336,10 @@ Array [
      
     warning
      
+    button
   </button>,
   <button
-    className="base button x-error"
+    className="base button x-error modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1870,9 +2347,10 @@ Array [
      
     error
      
+    button
   </button>,
   <button
-    className="base button x-background1"
+    className="base button x-background1 modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1880,9 +2358,10 @@ Array [
      
     background1
      
+    button
   </button>,
   <button
-    className="base button x-background2"
+    className="base button x-background2 modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1890,9 +2369,10 @@ Array [
      
     background2
      
+    button
   </button>,
   <button
-    className="base button x-background3"
+    className="base button x-background3 modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1900,9 +2380,10 @@ Array [
      
     background3
      
+    button
   </button>,
   <button
-    className="base button x-background4"
+    className="base button x-background4 modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1910,9 +2391,10 @@ Array [
      
     background4
      
+    button
   </button>,
   <button
-    className="base button x-background5"
+    className="base button x-background5 modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1920,9 +2402,10 @@ Array [
      
     background5
      
+    button
   </button>,
   <button
-    className="base button x-background6"
+    className="base button x-background6 modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1930,9 +2413,10 @@ Array [
      
     background6
      
+    button
   </button>,
   <button
-    className="base button x-heading"
+    className="base button x-heading modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1940,9 +2424,10 @@ Array [
      
     heading
      
+    button
   </button>,
   <button
-    className="base button x-paragraph"
+    className="base button x-paragraph modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1950,9 +2435,10 @@ Array [
      
     paragraph
      
+    button
   </button>,
   <button
-    className="base button x-subtitle"
+    className="base button x-subtitle modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1960,9 +2446,10 @@ Array [
      
     subtitle
      
+    button
   </button>,
   <button
-    className="base button x-metadata"
+    className="base button x-metadata modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1970,9 +2457,10 @@ Array [
      
     metadata
      
+    button
   </button>,
   <button
-    className="base button x-link"
+    className="base button x-link modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1980,9 +2468,10 @@ Array [
      
     link
      
+    button
   </button>,
   <button
-    className="base button x-navlink"
+    className="base button x-navlink modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1990,9 +2479,10 @@ Array [
      
     navlink
      
+    button
   </button>,
   <button
-    className="base button x-twitter"
+    className="base button x-twitter modifierGhost"
     disabled={true}
     type="button"
   >
@@ -2000,9 +2490,10 @@ Array [
      
     twitter
      
+    button
   </button>,
   <button
-    className="base button x-facebook"
+    className="base button x-facebook modifierGhost"
     disabled={true}
     type="button"
   >
@@ -2010,9 +2501,10 @@ Array [
      
     facebook
      
+    button
   </button>,
   <button
-    className="base button x-instagram"
+    className="base button x-instagram modifierGhost"
     disabled={true}
     type="button"
   >
@@ -2020,9 +2512,10 @@ Array [
      
     instagram
      
+    button
   </button>,
   <button
-    className="base button x-google"
+    className="base button x-google modifierGhost"
     disabled={true}
     type="button"
   >
@@ -2030,9 +2523,10 @@ Array [
      
     google
      
+    button
   </button>,
   <button
-    className="base button x-black"
+    className="base button x-black modifierGhost"
     disabled={true}
     type="button"
   >
@@ -2040,9 +2534,10 @@ Array [
      
     black
      
+    button
   </button>,
   <button
-    className="base button x-anchor"
+    className="base button x-anchor modifierGhost"
     disabled={true}
     type="button"
   >
@@ -2050,9 +2545,10 @@ Array [
      
     anchor
      
+    button
   </button>,
   <button
-    className="base button x-grey"
+    className="base button x-grey modifierGhost"
     disabled={true}
     type="button"
   >
@@ -2060,9 +2556,10 @@ Array [
      
     grey
      
+    button
   </button>,
   <button
-    className="base button x-pearl"
+    className="base button x-pearl modifierGhost"
     disabled={true}
     type="button"
   >
@@ -2070,9 +2567,10 @@ Array [
      
     pearl
      
+    button
   </button>,
   <button
-    className="base button x-white"
+    className="base button x-white modifierGhost"
     disabled={true}
     type="button"
   >
@@ -2080,20 +2578,12 @@ Array [
      
     white
      
+    button
   </button>,
 ]
 `;
 
-exports[`Storyshots b/Button Ghost 1`] = `
-<button
-  className="base button x-main1 modifierGhost"
-  type="button"
->
-  Sample Button
-</button>
-`;
-
-exports[`Storyshots b/Button Ghost Colors 1`] = `
+exports[`Storyshots b/Button Ghosts 1`] = `
 Array [
   <button
     className="base button x-main1 modifierGhost"
@@ -3365,176 +3855,747 @@ Array [
     </div>
   </button>,
   <button
-    className="base button x-anchor"
+    className="base button x-anchor"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-grey"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-pearl"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+  <button
+    className="base button x-white"
+    type="button"
+  >
+    <div
+      className="base loading-circle"
+      style={
+        Object {
+          "--height-width": "1.15em",
+          "--stroke-width": undefined,
+          "--x": "var(--on-x)",
+        }
+      }
+    >
+      <svg
+        className="svg-circle"
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "--animation-duration": "2s",
+          }
+        }
+        version="1.1"
+        viewBox="25 25 50 50"
+        x="0px"
+        xmlSpace="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+        y="0px"
+      >
+        <circle
+          className="path"
+          cx="50"
+          cy="50"
+          fill="none"
+          r="20"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  </button>,
+]
+`;
+
+exports[`Storyshots b/Button Normal 1`] = `
+Array [
+  <button
+    className="base button x-main1"
+    type="button"
+  >
+    This is a
+     
+    main1
+     
+    button
+  </button>,
+  <button
+    className="base button x-main2"
+    type="button"
+  >
+    This is a
+     
+    main2
+     
+    button
+  </button>,
+  <button
+    className="base button x-main3"
+    type="button"
+  >
+    This is a
+     
+    main3
+     
+    button
+  </button>,
+  <button
+    className="base button x-main4"
+    type="button"
+  >
+    This is a
+     
+    main4
+     
+    button
+  </button>,
+  <button
+    className="base button x-success"
+    type="button"
+  >
+    This is a
+     
+    success
+     
+    button
+  </button>,
+  <button
+    className="base button x-warning"
+    type="button"
+  >
+    This is a
+     
+    warning
+     
+    button
+  </button>,
+  <button
+    className="base button x-error"
+    type="button"
+  >
+    This is a
+     
+    error
+     
+    button
+  </button>,
+  <button
+    className="base button x-background1"
+    type="button"
+  >
+    This is a
+     
+    background1
+     
+    button
+  </button>,
+  <button
+    className="base button x-background2"
+    type="button"
+  >
+    This is a
+     
+    background2
+     
+    button
+  </button>,
+  <button
+    className="base button x-background3"
+    type="button"
+  >
+    This is a
+     
+    background3
+     
+    button
+  </button>,
+  <button
+    className="base button x-background4"
+    type="button"
+  >
+    This is a
+     
+    background4
+     
+    button
+  </button>,
+  <button
+    className="base button x-background5"
+    type="button"
+  >
+    This is a
+     
+    background5
+     
+    button
+  </button>,
+  <button
+    className="base button x-background6"
+    type="button"
+  >
+    This is a
+     
+    background6
+     
+    button
+  </button>,
+  <button
+    className="base button x-heading"
+    type="button"
+  >
+    This is a
+     
+    heading
+     
+    button
+  </button>,
+  <button
+    className="base button x-paragraph"
+    type="button"
+  >
+    This is a
+     
+    paragraph
+     
+    button
+  </button>,
+  <button
+    className="base button x-subtitle"
+    type="button"
+  >
+    This is a
+     
+    subtitle
+     
+    button
+  </button>,
+  <button
+    className="base button x-metadata"
+    type="button"
+  >
+    This is a
+     
+    metadata
+     
+    button
+  </button>,
+  <button
+    className="base button x-link"
+    type="button"
+  >
+    This is a
+     
+    link
+     
+    button
+  </button>,
+  <button
+    className="base button x-navlink"
+    type="button"
+  >
+    This is a
+     
+    navlink
+     
+    button
+  </button>,
+  <button
+    className="base button x-twitter"
+    type="button"
+  >
+    This is a
+     
+    twitter
+     
+    button
+  </button>,
+  <button
+    className="base button x-facebook"
+    type="button"
+  >
+    This is a
+     
+    facebook
+     
+    button
+  </button>,
+  <button
+    className="base button x-instagram"
+    type="button"
+  >
+    This is a
+     
+    instagram
+     
+    button
+  </button>,
+  <button
+    className="base button x-google"
+    type="button"
+  >
+    This is a
+     
+    google
+     
+    button
+  </button>,
+  <button
+    className="base button x-black"
+    type="button"
+  >
+    This is a
+     
+    black
+     
+    button
+  </button>,
+  <button
+    className="base button x-anchor"
+    type="button"
+  >
+    This is a
+     
+    anchor
+     
+    button
+  </button>,
+  <button
+    className="base button x-grey"
+    type="button"
+  >
+    This is a
+     
+    grey
+     
+    button
+  </button>,
+  <button
+    className="base button x-pearl"
+    type="button"
+  >
+    This is a
+     
+    pearl
+     
+    button
+  </button>,
+  <button
+    className="base button x-white"
+    type="button"
+  >
+    This is a
+     
+    white
+     
+    button
+  </button>,
+]
+`;
+
+exports[`Storyshots b/Button Simple 1`] = `
+Array [
+  <button
+    className="base button x-main1 modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    main1
+     
+    button
+  </button>,
+  <button
+    className="base button x-main2 modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    main2
+     
+    button
+  </button>,
+  <button
+    className="base button x-main3 modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    main3
+     
+    button
+  </button>,
+  <button
+    className="base button x-main4 modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    main4
+     
+    button
+  </button>,
+  <button
+    className="base button x-success modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    success
+     
+    button
+  </button>,
+  <button
+    className="base button x-warning modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    warning
+     
+    button
+  </button>,
+  <button
+    className="base button x-error modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    error
+     
+    button
+  </button>,
+  <button
+    className="base button x-background1 modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    background1
+     
+    button
+  </button>,
+  <button
+    className="base button x-background2 modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    background2
+     
+    button
+  </button>,
+  <button
+    className="base button x-background3 modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    background3
+     
+    button
+  </button>,
+  <button
+    className="base button x-background4 modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    background4
+     
+    button
+  </button>,
+  <button
+    className="base button x-background5 modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    background5
+     
+    button
+  </button>,
+  <button
+    className="base button x-background6 modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    background6
+     
+    button
+  </button>,
+  <button
+    className="base button x-heading modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    heading
+     
+    button
+  </button>,
+  <button
+    className="base button x-paragraph modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    paragraph
+     
+    button
+  </button>,
+  <button
+    className="base button x-subtitle modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    subtitle
+     
+    button
+  </button>,
+  <button
+    className="base button x-metadata modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    metadata
+     
+    button
+  </button>,
+  <button
+    className="base button x-link modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    link
+     
+    button
+  </button>,
+  <button
+    className="base button x-navlink modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    navlink
+     
+    button
+  </button>,
+  <button
+    className="base button x-twitter modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    twitter
+     
+    button
+  </button>,
+  <button
+    className="base button x-facebook modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    facebook
+     
+    button
+  </button>,
+  <button
+    className="base button x-instagram modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    instagram
+     
+    button
+  </button>,
+  <button
+    className="base button x-google modifierSimple"
     type="button"
   >
-    <div
-      className="base loading-circle"
-      style={
-        Object {
-          "--height-width": "1.15em",
-          "--stroke-width": undefined,
-          "--x": "var(--on-x)",
-        }
-      }
-    >
-      <svg
-        className="svg-circle"
-        preserveAspectRatio="xMinYMin meet"
-        style={
-          Object {
-            "--animation-duration": "2s",
-          }
-        }
-        version="1.1"
-        viewBox="25 25 50 50"
-        x="0px"
-        xmlSpace="preserve"
-        xmlns="http://www.w3.org/2000/svg"
-        y="0px"
-      >
-        <circle
-          className="path"
-          cx="50"
-          cy="50"
-          fill="none"
-          r="20"
-          strokeLinecap="round"
-          strokeMiterlimit="10"
-        />
-      </svg>
-    </div>
+    This is a
+     
+    google
+     
+    button
   </button>,
   <button
-    className="base button x-grey"
+    className="base button x-black modifierSimple"
     type="button"
   >
-    <div
-      className="base loading-circle"
-      style={
-        Object {
-          "--height-width": "1.15em",
-          "--stroke-width": undefined,
-          "--x": "var(--on-x)",
-        }
-      }
-    >
-      <svg
-        className="svg-circle"
-        preserveAspectRatio="xMinYMin meet"
-        style={
-          Object {
-            "--animation-duration": "2s",
-          }
-        }
-        version="1.1"
-        viewBox="25 25 50 50"
-        x="0px"
-        xmlSpace="preserve"
-        xmlns="http://www.w3.org/2000/svg"
-        y="0px"
-      >
-        <circle
-          className="path"
-          cx="50"
-          cy="50"
-          fill="none"
-          r="20"
-          strokeLinecap="round"
-          strokeMiterlimit="10"
-        />
-      </svg>
-    </div>
+    This is a
+     
+    black
+     
+    button
   </button>,
   <button
-    className="base button x-pearl"
+    className="base button x-anchor modifierSimple"
     type="button"
   >
-    <div
-      className="base loading-circle"
-      style={
-        Object {
-          "--height-width": "1.15em",
-          "--stroke-width": undefined,
-          "--x": "var(--on-x)",
-        }
-      }
-    >
-      <svg
-        className="svg-circle"
-        preserveAspectRatio="xMinYMin meet"
-        style={
-          Object {
-            "--animation-duration": "2s",
-          }
-        }
-        version="1.1"
-        viewBox="25 25 50 50"
-        x="0px"
-        xmlSpace="preserve"
-        xmlns="http://www.w3.org/2000/svg"
-        y="0px"
-      >
-        <circle
-          className="path"
-          cx="50"
-          cy="50"
-          fill="none"
-          r="20"
-          strokeLinecap="round"
-          strokeMiterlimit="10"
-        />
-      </svg>
-    </div>
+    This is a
+     
+    anchor
+     
+    button
   </button>,
   <button
-    className="base button x-white"
+    className="base button x-grey modifierSimple"
     type="button"
   >
-    <div
-      className="base loading-circle"
-      style={
-        Object {
-          "--height-width": "1.15em",
-          "--stroke-width": undefined,
-          "--x": "var(--on-x)",
-        }
-      }
-    >
-      <svg
-        className="svg-circle"
-        preserveAspectRatio="xMinYMin meet"
-        style={
-          Object {
-            "--animation-duration": "2s",
-          }
-        }
-        version="1.1"
-        viewBox="25 25 50 50"
-        x="0px"
-        xmlSpace="preserve"
-        xmlns="http://www.w3.org/2000/svg"
-        y="0px"
-      >
-        <circle
-          className="path"
-          cx="50"
-          cy="50"
-          fill="none"
-          r="20"
-          strokeLinecap="round"
-          strokeMiterlimit="10"
-        />
-      </svg>
-    </div>
+    This is a
+     
+    grey
+     
+    button
+  </button>,
+  <button
+    className="base button x-pearl modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    pearl
+     
+    button
+  </button>,
+  <button
+    className="base button x-white modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    white
+     
+    button
   </button>,
 ]
 `;
 
-exports[`Storyshots b/Button Simple 1`] = `
+exports[`Storyshots b/Button Simple Disabled 1`] = `
 Array [
   <button
     className="base button x-main1 modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -3545,6 +4606,7 @@ Array [
   </button>,
   <button
     className="base button x-main2 modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -3555,6 +4617,7 @@ Array [
   </button>,
   <button
     className="base button x-main3 modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -3565,6 +4628,7 @@ Array [
   </button>,
   <button
     className="base button x-main4 modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -3575,6 +4639,7 @@ Array [
   </button>,
   <button
     className="base button x-success modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -3585,6 +4650,7 @@ Array [
   </button>,
   <button
     className="base button x-warning modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -3595,6 +4661,7 @@ Array [
   </button>,
   <button
     className="base button x-error modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -3605,6 +4672,7 @@ Array [
   </button>,
   <button
     className="base button x-background1 modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -3615,6 +4683,7 @@ Array [
   </button>,
   <button
     className="base button x-background2 modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -3625,6 +4694,7 @@ Array [
   </button>,
   <button
     className="base button x-background3 modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -3635,6 +4705,7 @@ Array [
   </button>,
   <button
     className="base button x-background4 modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -3645,6 +4716,7 @@ Array [
   </button>,
   <button
     className="base button x-background5 modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -3655,6 +4727,7 @@ Array [
   </button>,
   <button
     className="base button x-background6 modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -3665,6 +4738,7 @@ Array [
   </button>,
   <button
     className="base button x-heading modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -3675,6 +4749,7 @@ Array [
   </button>,
   <button
     className="base button x-paragraph modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -3685,6 +4760,7 @@ Array [
   </button>,
   <button
     className="base button x-subtitle modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -3695,6 +4771,7 @@ Array [
   </button>,
   <button
     className="base button x-metadata modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -3705,6 +4782,7 @@ Array [
   </button>,
   <button
     className="base button x-link modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -3715,6 +4793,7 @@ Array [
   </button>,
   <button
     className="base button x-navlink modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -3725,6 +4804,7 @@ Array [
   </button>,
   <button
     className="base button x-twitter modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -3735,6 +4815,7 @@ Array [
   </button>,
   <button
     className="base button x-facebook modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -3745,6 +4826,7 @@ Array [
   </button>,
   <button
     className="base button x-instagram modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -3755,6 +4837,7 @@ Array [
   </button>,
   <button
     className="base button x-google modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -3765,6 +4848,7 @@ Array [
   </button>,
   <button
     className="base button x-black modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -3775,6 +4859,7 @@ Array [
   </button>,
   <button
     className="base button x-anchor modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -3785,6 +4870,7 @@ Array [
   </button>,
   <button
     className="base button x-grey modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -3795,6 +4881,7 @@ Array [
   </button>,
   <button
     className="base button x-pearl modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -3805,6 +4892,7 @@ Array [
   </button>,
   <button
     className="base button x-white modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a
@@ -5303,6 +6391,62 @@ exports[`Storyshots b/Page Item Type 1`] = `
 </main>
 `;
 
+exports[`Storyshots b/Page Sections With Background 1`] = `
+<main
+  className="base page"
+  id="with-sections"
+>
+  <section
+    className="base section y-success b-light-y"
+    id="with-sections_s1"
+    style={
+      Object {
+        "alignItems": "center",
+        "display": "flex",
+        "height": "30em",
+        "justifyContent": "center",
+      }
+    }
+  >
+    <figure
+      className="base quote x-paragraph"
+    >
+      <blockquote
+        className="blockquote uc"
+      >
+        <p
+          className="quotation c-x md-s0 s-1"
+        >
+          Pareto was like having a full-time employee without having to hire somebody. That’s how I would explain it. An on-call, on-demand full-time employee.
+        </p>
+      </blockquote>
+      <figcaption
+        className="figcaption"
+      >
+        <cite>
+          Austen Spoonts
+        </cite>
+      </figcaption>
+    </figure>
+    <div
+      className="base shapes"
+      style={
+        Object {
+          "--horizontal-align": "center",
+          "--overflow": "hidden",
+          "--shape-height": "30em",
+          "--vertical-align": "flex-end",
+        }
+      }
+    >
+      <div
+        className="triangle"
+      />
+    </div>
+  </section>
+</main>
+`;
+
 exports[`Storyshots b/Page With Sections 1`] = `
 <main
   className="base page"