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

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

@@ -1257,10 +1257,10 @@ exports[`Storyshots b/Button Base 1`] = `
 </button>
 `;
 
-exports[`Storyshots b/Button Colors 1`] = `
+exports[`Storyshots b/Button Compact 1`] = `
 Array [
   <button
-    className="base button x-main1"
+    className="base button x-main1 modifierCompact"
     type="button"
   >
     This is a
@@ -1270,7 +1270,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-main2"
+    className="base button x-main2 modifierCompact"
     type="button"
   >
     This is a
@@ -1280,7 +1280,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-main3"
+    className="base button x-main3 modifierCompact"
     type="button"
   >
     This is a
@@ -1290,7 +1290,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-main4"
+    className="base button x-main4 modifierCompact"
     type="button"
   >
     This is a
@@ -1300,7 +1300,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-success"
+    className="base button x-success modifierCompact"
     type="button"
   >
     This is a
@@ -1310,7 +1310,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-warning"
+    className="base button x-warning modifierCompact"
     type="button"
   >
     This is a
@@ -1320,7 +1320,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-error"
+    className="base button x-error modifierCompact"
     type="button"
   >
     This is a
@@ -1330,7 +1330,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-background1"
+    className="base button x-background1 modifierCompact"
     type="button"
   >
     This is a
@@ -1340,7 +1340,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-background2"
+    className="base button x-background2 modifierCompact"
     type="button"
   >
     This is a
@@ -1350,7 +1350,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-background3"
+    className="base button x-background3 modifierCompact"
     type="button"
   >
     This is a
@@ -1360,7 +1360,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-background4"
+    className="base button x-background4 modifierCompact"
     type="button"
   >
     This is a
@@ -1370,7 +1370,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-background5"
+    className="base button x-background5 modifierCompact"
     type="button"
   >
     This is a
@@ -1380,7 +1380,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-background6"
+    className="base button x-background6 modifierCompact"
     type="button"
   >
     This is a
@@ -1390,7 +1390,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-heading"
+    className="base button x-heading modifierCompact"
     type="button"
   >
     This is a
@@ -1400,7 +1400,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-paragraph"
+    className="base button x-paragraph modifierCompact"
     type="button"
   >
     This is a
@@ -1410,7 +1410,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-subtitle"
+    className="base button x-subtitle modifierCompact"
     type="button"
   >
     This is a
@@ -1420,7 +1420,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-metadata"
+    className="base button x-metadata modifierCompact"
     type="button"
   >
     This is a
@@ -1430,7 +1430,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-link"
+    className="base button x-link modifierCompact"
     type="button"
   >
     This is a
@@ -1440,7 +1440,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-navlink"
+    className="base button x-navlink modifierCompact"
     type="button"
   >
     This is a
@@ -1450,7 +1450,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-twitter"
+    className="base button x-twitter modifierCompact"
     type="button"
   >
     This is a
@@ -1460,7 +1460,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-facebook"
+    className="base button x-facebook modifierCompact"
     type="button"
   >
     This is a
@@ -1470,7 +1470,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-instagram"
+    className="base button x-instagram modifierCompact"
     type="button"
   >
     This is a
@@ -1480,7 +1480,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-google"
+    className="base button x-google modifierCompact"
     type="button"
   >
     This is a
@@ -1490,7 +1490,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-black"
+    className="base button x-black modifierCompact"
     type="button"
   >
     This is a
@@ -1500,7 +1500,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-anchor"
+    className="base button x-anchor modifierCompact"
     type="button"
   >
     This is a
@@ -1510,7 +1510,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-grey"
+    className="base button x-grey modifierCompact"
     type="button"
   >
     This is a
@@ -1520,7 +1520,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-pearl"
+    className="base button x-pearl modifierCompact"
     type="button"
   >
     This is a
@@ -1530,7 +1530,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-white"
+    className="base button x-white modifierCompact"
     type="button"
   >
     This is a
@@ -1542,267 +1542,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 +1875,10 @@ Array [
      
     main1
      
+    button
   </button>,
   <button
-    className="base button x-main2"
+    className="base button x-main2 modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1820,9 +1886,10 @@ Array [
      
     main2
      
+    button
   </button>,
   <button
-    className="base button x-main3"
+    className="base button x-main3 modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1830,9 +1897,10 @@ Array [
      
     main3
      
+    button
   </button>,
   <button
-    className="base button x-main4"
+    className="base button x-main4 modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1840,9 +1908,10 @@ Array [
      
     main4
      
+    button
   </button>,
   <button
-    className="base button x-success"
+    className="base button x-success modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1850,9 +1919,10 @@ Array [
      
     success
      
+    button
   </button>,
   <button
-    className="base button x-warning"
+    className="base button x-warning modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1860,9 +1930,10 @@ Array [
      
     warning
      
+    button
   </button>,
   <button
-    className="base button x-error"
+    className="base button x-error modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1870,9 +1941,10 @@ Array [
      
     error
      
+    button
   </button>,
   <button
-    className="base button x-background1"
+    className="base button x-background1 modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1880,9 +1952,10 @@ Array [
      
     background1
      
+    button
   </button>,
   <button
-    className="base button x-background2"
+    className="base button x-background2 modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1890,9 +1963,10 @@ Array [
      
     background2
      
+    button
   </button>,
   <button
-    className="base button x-background3"
+    className="base button x-background3 modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1900,9 +1974,10 @@ Array [
      
     background3
      
+    button
   </button>,
   <button
-    className="base button x-background4"
+    className="base button x-background4 modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1910,9 +1985,10 @@ Array [
      
     background4
      
+    button
   </button>,
   <button
-    className="base button x-background5"
+    className="base button x-background5 modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1920,9 +1996,10 @@ Array [
      
     background5
      
+    button
   </button>,
   <button
-    className="base button x-background6"
+    className="base button x-background6 modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1930,9 +2007,10 @@ Array [
      
     background6
      
+    button
   </button>,
   <button
-    className="base button x-heading"
+    className="base button x-heading modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1940,9 +2018,10 @@ Array [
      
     heading
      
+    button
   </button>,
   <button
-    className="base button x-paragraph"
+    className="base button x-paragraph modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1950,9 +2029,10 @@ Array [
      
     paragraph
      
+    button
   </button>,
   <button
-    className="base button x-subtitle"
+    className="base button x-subtitle modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1960,9 +2040,10 @@ Array [
      
     subtitle
      
+    button
   </button>,
   <button
-    className="base button x-metadata"
+    className="base button x-metadata modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1970,9 +2051,10 @@ Array [
      
     metadata
      
+    button
   </button>,
   <button
-    className="base button x-link"
+    className="base button x-link modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1980,9 +2062,10 @@ Array [
      
     link
      
+    button
   </button>,
   <button
-    className="base button x-navlink"
+    className="base button x-navlink modifierGhost"
     disabled={true}
     type="button"
   >
@@ -1990,9 +2073,10 @@ Array [
      
     navlink
      
+    button
   </button>,
   <button
-    className="base button x-twitter"
+    className="base button x-twitter modifierGhost"
     disabled={true}
     type="button"
   >
@@ -2000,9 +2084,10 @@ Array [
      
     twitter
      
+    button
   </button>,
   <button
-    className="base button x-facebook"
+    className="base button x-facebook modifierGhost"
     disabled={true}
     type="button"
   >
@@ -2010,9 +2095,10 @@ Array [
      
     facebook
      
+    button
   </button>,
   <button
-    className="base button x-instagram"
+    className="base button x-instagram modifierGhost"
     disabled={true}
     type="button"
   >
@@ -2020,9 +2106,10 @@ Array [
      
     instagram
      
+    button
   </button>,
   <button
-    className="base button x-google"
+    className="base button x-google modifierGhost"
     disabled={true}
     type="button"
   >
@@ -2030,9 +2117,10 @@ Array [
      
     google
      
+    button
   </button>,
   <button
-    className="base button x-black"
+    className="base button x-black modifierGhost"
     disabled={true}
     type="button"
   >
@@ -2040,9 +2128,10 @@ Array [
      
     black
      
+    button
   </button>,
   <button
-    className="base button x-anchor"
+    className="base button x-anchor modifierGhost"
     disabled={true}
     type="button"
   >
@@ -2050,9 +2139,10 @@ Array [
      
     anchor
      
+    button
   </button>,
   <button
-    className="base button x-grey"
+    className="base button x-grey modifierGhost"
     disabled={true}
     type="button"
   >
@@ -2060,9 +2150,10 @@ Array [
      
     grey
      
+    button
   </button>,
   <button
-    className="base button x-pearl"
+    className="base button x-pearl modifierGhost"
     disabled={true}
     type="button"
   >
@@ -2070,9 +2161,10 @@ Array [
      
     pearl
      
+    button
   </button>,
   <button
-    className="base button x-white"
+    className="base button x-white modifierGhost"
     disabled={true}
     type="button"
   >
@@ -2080,20 +2172,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"
@@ -3531,10 +3615,10 @@ Array [
 ]
 `;
 
-exports[`Storyshots b/Button Simple 1`] = `
+exports[`Storyshots b/Button Normal 1`] = `
 Array [
   <button
-    className="base button x-main1 modifierSimple"
+    className="base button x-main1"
     type="button"
   >
     This is a
@@ -3544,7 +3628,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-main2 modifierSimple"
+    className="base button x-main2"
     type="button"
   >
     This is a
@@ -3554,7 +3638,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-main3 modifierSimple"
+    className="base button x-main3"
     type="button"
   >
     This is a
@@ -3564,7 +3648,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-main4 modifierSimple"
+    className="base button x-main4"
     type="button"
   >
     This is a
@@ -3574,7 +3658,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-success modifierSimple"
+    className="base button x-success"
     type="button"
   >
     This is a
@@ -3584,7 +3668,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-warning modifierSimple"
+    className="base button x-warning"
     type="button"
   >
     This is a
@@ -3594,7 +3678,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-error modifierSimple"
+    className="base button x-error"
     type="button"
   >
     This is a
@@ -3604,7 +3688,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-background1 modifierSimple"
+    className="base button x-background1"
     type="button"
   >
     This is a
@@ -3614,7 +3698,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-background2 modifierSimple"
+    className="base button x-background2"
     type="button"
   >
     This is a
@@ -3624,7 +3708,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-background3 modifierSimple"
+    className="base button x-background3"
     type="button"
   >
     This is a
@@ -3634,7 +3718,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-background4 modifierSimple"
+    className="base button x-background4"
     type="button"
   >
     This is a
@@ -3644,7 +3728,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-background5 modifierSimple"
+    className="base button x-background5"
     type="button"
   >
     This is a
@@ -3654,7 +3738,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-background6 modifierSimple"
+    className="base button x-background6"
     type="button"
   >
     This is a
@@ -3664,7 +3748,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-heading modifierSimple"
+    className="base button x-heading"
     type="button"
   >
     This is a
@@ -3674,7 +3758,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-paragraph modifierSimple"
+    className="base button x-paragraph"
     type="button"
   >
     This is a
@@ -3684,7 +3768,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-subtitle modifierSimple"
+    className="base button x-subtitle"
     type="button"
   >
     This is a
@@ -3694,7 +3778,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-metadata modifierSimple"
+    className="base button x-metadata"
     type="button"
   >
     This is a
@@ -3704,7 +3788,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-link modifierSimple"
+    className="base button x-link"
     type="button"
   >
     This is a
@@ -3714,7 +3798,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-navlink modifierSimple"
+    className="base button x-navlink"
     type="button"
   >
     This is a
@@ -3724,7 +3808,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-twitter modifierSimple"
+    className="base button x-twitter"
     type="button"
   >
     This is a
@@ -3734,7 +3818,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-facebook modifierSimple"
+    className="base button x-facebook"
     type="button"
   >
     This is a
@@ -3744,7 +3828,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-instagram modifierSimple"
+    className="base button x-instagram"
     type="button"
   >
     This is a
@@ -3754,7 +3838,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-google modifierSimple"
+    className="base button x-google"
     type="button"
   >
     This is a
@@ -3764,7 +3848,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-black modifierSimple"
+    className="base button x-black"
     type="button"
   >
     This is a
@@ -3774,7 +3858,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-anchor modifierSimple"
+    className="base button x-anchor"
     type="button"
   >
     This is a
@@ -3784,7 +3868,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-grey modifierSimple"
+    className="base button x-grey"
     type="button"
   >
     This is a
@@ -3794,7 +3878,7 @@ Array [
     button
   </button>,
   <button
-    className="base button x-pearl modifierSimple"
+    className="base button x-pearl"
     type="button"
   >
     This is a
@@ -3804,7 +3888,605 @@ Array [
     button
   </button>,
   <button
-    className="base button x-white modifierSimple"
+    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"
+  >
+    This is a
+     
+    google
+     
+    button
+  </button>,
+  <button
+    className="base button x-black modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    black
+     
+    button
+  </button>,
+  <button
+    className="base button x-anchor modifierSimple"
+    type="button"
+  >
+    This is a
+     
+    anchor
+     
+    button
+  </button>,
+  <button
+    className="base button x-grey modifierSimple"
+    type="button"
+  >
+    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 Disabled 1`] = `
+Array [
+  <button
+    className="base button x-main1 modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    main1
+     
+    button
+  </button>,
+  <button
+    className="base button x-main2 modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    main2
+     
+    button
+  </button>,
+  <button
+    className="base button x-main3 modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    main3
+     
+    button
+  </button>,
+  <button
+    className="base button x-main4 modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    main4
+     
+    button
+  </button>,
+  <button
+    className="base button x-success modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    success
+     
+    button
+  </button>,
+  <button
+    className="base button x-warning modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    warning
+     
+    button
+  </button>,
+  <button
+    className="base button x-error modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    error
+     
+    button
+  </button>,
+  <button
+    className="base button x-background1 modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    background1
+     
+    button
+  </button>,
+  <button
+    className="base button x-background2 modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    background2
+     
+    button
+  </button>,
+  <button
+    className="base button x-background3 modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    background3
+     
+    button
+  </button>,
+  <button
+    className="base button x-background4 modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    background4
+     
+    button
+  </button>,
+  <button
+    className="base button x-background5 modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    background5
+     
+    button
+  </button>,
+  <button
+    className="base button x-background6 modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    background6
+     
+    button
+  </button>,
+  <button
+    className="base button x-heading modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    heading
+     
+    button
+  </button>,
+  <button
+    className="base button x-paragraph modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    paragraph
+     
+    button
+  </button>,
+  <button
+    className="base button x-subtitle modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    subtitle
+     
+    button
+  </button>,
+  <button
+    className="base button x-metadata modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    metadata
+     
+    button
+  </button>,
+  <button
+    className="base button x-link modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    link
+     
+    button
+  </button>,
+  <button
+    className="base button x-navlink modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    navlink
+     
+    button
+  </button>,
+  <button
+    className="base button x-twitter modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    twitter
+     
+    button
+  </button>,
+  <button
+    className="base button x-facebook modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    facebook
+     
+    button
+  </button>,
+  <button
+    className="base button x-instagram modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    instagram
+     
+    button
+  </button>,
+  <button
+    className="base button x-google modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    google
+     
+    button
+  </button>,
+  <button
+    className="base button x-black modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    black
+     
+    button
+  </button>,
+  <button
+    className="base button x-anchor modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    anchor
+     
+    button
+  </button>,
+  <button
+    className="base button x-grey modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    grey
+     
+    button
+  </button>,
+  <button
+    className="base button x-pearl modifierSimple"
+    disabled={true}
+    type="button"
+  >
+    This is a
+     
+    pearl
+     
+    button
+  </button>,
+  <button
+    className="base button x-white modifierSimple"
+    disabled={true}
     type="button"
   >
     This is a