@pareto-engineering/design-system 2.0.0-alpha.10 → 2.0.0-alpha.14

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

@@ -63,6 +63,27 @@ exports[`Storyshots a/AnimatedCounter Before And After 1`] = `
 </div>
 `;
 
+exports[`Storyshots a/BackgroundGradient Base 1`] = `
+<div
+  className="y-background4"
+  style={
+    Object {
+      "height": "700px",
+      "position": "relative",
+    }
+  }
+>
+  <div
+    className="base background-gradient"
+    style={
+      Object {
+        "--gradient-height": "50em",
+      }
+    }
+  />
+</div>
+`;
+
 exports[`Storyshots a/ContentCard Content After 1`] = `
 <div
   className="u1 p-u"
@@ -93,10 +114,10 @@ exports[`Storyshots a/ContentCard Content After 1`] = `
         </p>
       </div>
       <div
-        className="base conversation illustration y-background u1"
+        className="base conversation illustration y-background2 u1"
       >
         <div
-          className="base message x-main2 ours"
+          className="base message x-background1 ours v1"
         >
           <div
             className="elementContent"
@@ -113,7 +134,7 @@ exports[`Storyshots a/ContentCard Content After 1`] = `
           </div>
         </div>
         <div
-          className="base message x-background2"
+          className="base message x-background1 v1"
         >
           <div
             className="elementContent"
@@ -130,7 +151,7 @@ exports[`Storyshots a/ContentCard Content After 1`] = `
           </div>
         </div>
         <div
-          className="base message x-main2 ours"
+          className="base message x-background1 ours v1"
         >
           <div
             className="elementContent"
@@ -207,10 +228,10 @@ exports[`Storyshots a/ContentCard Layout Left 1`] = `
         </p>
       </div>
       <div
-        className="base conversation illustration y-background u1"
+        className="base conversation illustration y-background2 u1"
       >
         <div
-          className="base message x-main2 ours"
+          className="base message x-background1 ours v1"
         >
           <div
             className="elementContent"
@@ -227,7 +248,7 @@ exports[`Storyshots a/ContentCard Layout Left 1`] = `
           </div>
         </div>
         <div
-          className="base message x-background2"
+          className="base message x-background1 v1"
         >
           <div
             className="elementContent"
@@ -244,7 +265,7 @@ exports[`Storyshots a/ContentCard Layout Left 1`] = `
           </div>
         </div>
         <div
-          className="base message x-main2 ours"
+          className="base message x-background1 ours v1"
         >
           <div
             className="elementContent"
@@ -296,10 +317,10 @@ exports[`Storyshots a/ContentCard Layout Right 1`] = `
         </p>
       </div>
       <div
-        className="base conversation illustration y-background u1"
+        className="base conversation illustration y-background2 u1"
       >
         <div
-          className="base message x-main2 ours"
+          className="base message x-background1 ours v1"
         >
           <div
             className="elementContent"
@@ -316,7 +337,7 @@ exports[`Storyshots a/ContentCard Layout Right 1`] = `
           </div>
         </div>
         <div
-          className="base message x-background2"
+          className="base message x-background1 v1"
         >
           <div
             className="elementContent"
@@ -333,7 +354,7 @@ exports[`Storyshots a/ContentCard Layout Right 1`] = `
           </div>
         </div>
         <div
-          className="base message x-main2 ours"
+          className="base message x-background1 ours v1"
         >
           <div
             className="elementContent"
@@ -357,10 +378,10 @@ exports[`Storyshots a/ContentCard Layout Right 1`] = `
 
 exports[`Storyshots a/Conversation Base 1`] = `
 <div
-  className="base conversation y-background u1"
+  className="base conversation y-background2 u1"
 >
   <div
-    className="base message x-background2"
+    className="base message x-background1 v1"
   >
     <div
       className="elementContent"
@@ -377,7 +398,7 @@ exports[`Storyshots a/Conversation Base 1`] = `
     </div>
   </div>
   <div
-    className="base message x-main2 ours"
+    className="base message x-background1 ours v1"
   >
     <div
       className="elementContent"
@@ -389,12 +410,12 @@ exports[`Storyshots a/Conversation Base 1`] = `
         :
       </p>
       <p>
-        Hi Humbl, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.
+        Hi Morgan! Here is the database we prepared for you.
       </p>
     </div>
   </div>
   <div
-    className="base message x-background2"
+    className="base message x-background1 v1"
   >
     <div
       className="elementContent"
@@ -410,6 +431,201 @@ exports[`Storyshots a/Conversation Base 1`] = `
       </p>
     </div>
   </div>
+  <div
+    className="base message x-background1 ours v1"
+  >
+    <div
+      className="elementContent"
+    >
+      <p
+        className="sender v25 mb-v s-1"
+      >
+        CAMILLE
+        :
+      </p>
+      <p>
+        Hi Morgan! Here is the database we prepared for you.
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Conversation With Attachment 1`] = `
+<div
+  className="base conversation y-background2 u1"
+>
+  <div
+    className="base message x-background1 v1"
+  >
+    <div
+      className="elementContent"
+    >
+      <p
+        className="sender v25 mb-v s-1"
+      >
+        HUMBL
+        :
+      </p>
+      <p>
+        Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.
+      </p>
+    </div>
+  </div>
+  <div
+    className="base message x-background1 ours v1"
+  >
+    <div
+      className="elementContent"
+    >
+      <p
+        className="sender v25 mb-v s-1"
+      >
+        CAMILLE
+        :
+      </p>
+      <p>
+        Hi Morgan! Here is the database we prepared for you.
+      </p>
+      <div
+        className="attachment y-main4"
+      >
+        <span
+          className="f-icons"
+        >
+          A
+        </span>
+        <p
+          className="ml-v"
+        >
+          spreadsheet.xlsx
+        </p>
+      </div>
+    </div>
+  </div>
+  <div
+    className="base message x-background1 v1"
+  >
+    <div
+      className="elementContent"
+    >
+      <p
+        className="sender v25 mb-v s-1"
+      >
+        HUMBL
+        :
+      </p>
+      <p>
+        Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.
+      </p>
+    </div>
+  </div>
+  <div
+    className="base message x-background1 ours v1"
+  >
+    <div
+      className="elementContent"
+    >
+      <p
+        className="sender v25 mb-v s-1"
+      >
+        CAMILLE
+        :
+      </p>
+      <p>
+        Hi Morgan! Here is the database we prepared for you.
+      </p>
+      <div
+        className="attachment y-main4"
+      >
+        <span
+          className="f-icons"
+        >
+          A
+        </span>
+        <p
+          className="ml-v"
+        >
+          spreadsheet.xlsx
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Conversation With Triangle 1`] = `
+<div
+  className="base conversation y-background2 u1"
+>
+  <div
+    className="base message x-background1 has-triangle v1"
+  >
+    <div
+      className="elementContent"
+    >
+      <p
+        className="sender v25 mb-v s-1"
+      >
+        HUMBL
+        :
+      </p>
+      <p>
+        Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.
+      </p>
+    </div>
+  </div>
+  <div
+    className="base message x-background1 ours has-triangle v1"
+  >
+    <div
+      className="elementContent"
+    >
+      <p
+        className="sender v25 mb-v s-1"
+      >
+        CAMILLE
+        :
+      </p>
+      <p>
+        Hi Morgan! Here is the database we prepared for you.
+      </p>
+    </div>
+  </div>
+  <div
+    className="base message x-background1 has-triangle v1"
+  >
+    <div
+      className="elementContent"
+    >
+      <p
+        className="sender v25 mb-v s-1"
+      >
+        HUMBL
+        :
+      </p>
+      <p>
+        Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.
+      </p>
+    </div>
+  </div>
+  <div
+    className="base message x-background1 ours has-triangle v1"
+  >
+    <div
+      className="elementContent"
+    >
+      <p
+        className="sender v25 mb-v s-1"
+      >
+        CAMILLE
+        :
+      </p>
+      <p>
+        Hi Morgan! Here is the database we prepared for you.
+      </p>
+    </div>
+  </div>
 </div>
 `;
 
@@ -1442,6 +1658,71 @@ exports[`Storyshots a/Shapes Half Ellipses 1`] = `
 </div>
 `;
 
+exports[`Storyshots a/Shapes Intersecting Circles 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": "30em",
+        "--vertical-align": "center",
+      }
+    }
+  >
+    <div
+      className="intersecting-circles"
+    >
+      <div
+        className="left"
+      />
+      <div
+        className="right"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Shapes Inverted 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="inverted-triangle"
+    />
+  </div>
+</div>
+`;
+
 exports[`Storyshots a/Shapes Rectangles 1`] = `
 <div
   className="y-background5 b-light-y"
@@ -1539,154 +1820,1294 @@ exports[`Storyshots a/Shapes Spiral 1`] = `
       }
     }
   >
-    <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="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 9 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 Arrow Left 1`] = `
+Array [
+  <button
+    className="base button x-main1 arrow-left"
+    type="button"
+  >
+    This is a
+     
+    main1
+     
+    button
+  </button>,
+  <button
+    className="base button x-main2 arrow-left"
+    type="button"
+  >
+    This is a
+     
+    main2
+     
+    button
+  </button>,
+  <button
+    className="base button x-main3 arrow-left"
+    type="button"
+  >
+    This is a
+     
+    main3
+     
+    button
+  </button>,
+  <button
+    className="base button x-main4 arrow-left"
+    type="button"
+  >
+    This is a
+     
+    main4
+     
+    button
+  </button>,
+  <button
+    className="base button x-success arrow-left"
+    type="button"
+  >
+    This is a
+     
+    success
+     
+    button
+  </button>,
+  <button
+    className="base button x-warning arrow-left"
+    type="button"
+  >
+    This is a
+     
+    warning
+     
+    button
+  </button>,
+  <button
+    className="base button x-error arrow-left"
+    type="button"
+  >
+    This is a
+     
+    error
+     
+    button
+  </button>,
+  <button
+    className="base button x-background1 arrow-left"
+    type="button"
+  >
+    This is a
+     
+    background1
+     
+    button
+  </button>,
+  <button
+    className="base button x-background2 arrow-left"
+    type="button"
+  >
+    This is a
+     
+    background2
+     
+    button
+  </button>,
+  <button
+    className="base button x-background3 arrow-left"
+    type="button"
+  >
+    This is a
+     
+    background3
+     
+    button
+  </button>,
+  <button
+    className="base button x-background4 arrow-left"
+    type="button"
+  >
+    This is a
+     
+    background4
+     
+    button
+  </button>,
+  <button
+    className="base button x-background5 arrow-left"
+    type="button"
+  >
+    This is a
+     
+    background5
+     
+    button
+  </button>,
+  <button
+    className="base button x-background6 arrow-left"
+    type="button"
+  >
+    This is a
+     
+    background6
+     
+    button
+  </button>,
+  <button
+    className="base button x-heading arrow-left"
+    type="button"
+  >
+    This is a
+     
+    heading
+     
+    button
+  </button>,
+  <button
+    className="base button x-paragraph arrow-left"
+    type="button"
+  >
+    This is a
+     
+    paragraph
+     
+    button
+  </button>,
+  <button
+    className="base button x-subtitle arrow-left"
+    type="button"
+  >
+    This is a
+     
+    subtitle
+     
+    button
+  </button>,
+  <button
+    className="base button x-metadata arrow-left"
+    type="button"
+  >
+    This is a
+     
+    metadata
+     
+    button
+  </button>,
+  <button
+    className="base button x-link arrow-left"
+    type="button"
+  >
+    This is a
+     
+    link
+     
+    button
+  </button>,
+  <button
+    className="base button x-navlink arrow-left"
+    type="button"
+  >
+    This is a
+     
+    navlink
+     
+    button
+  </button>,
+  <button
+    className="base button x-twitter arrow-left"
+    type="button"
+  >
+    This is a
+     
+    twitter
+     
+    button
+  </button>,
+  <button
+    className="base button x-facebook arrow-left"
+    type="button"
+  >
+    This is a
+     
+    facebook
+     
+    button
+  </button>,
+  <button
+    className="base button x-instagram arrow-left"
+    type="button"
+  >
+    This is a
+     
+    instagram
+     
+    button
+  </button>,
+  <button
+    className="base button x-google arrow-left"
+    type="button"
+  >
+    This is a
+     
+    google
+     
+    button
+  </button>,
+  <button
+    className="base button x-black arrow-left"
+    type="button"
+  >
+    This is a
+     
+    black
+     
+    button
+  </button>,
+  <button
+    className="base button x-anchor arrow-left"
+    type="button"
+  >
+    This is a
+     
+    anchor
+     
+    button
+  </button>,
+  <button
+    className="base button x-grey arrow-left"
+    type="button"
+  >
+    This is a
+     
+    grey
+     
+    button
+  </button>,
+  <button
+    className="base button x-pearl arrow-left"
+    type="button"
+  >
+    This is a
+     
+    pearl
+     
+    button
+  </button>,
+  <button
+    className="base button x-white arrow-left"
+    type="button"
+  >
+    This is a
+     
+    white
+     
+    button
+  </button>,
+]
+`;
+
+exports[`Storyshots b/Button Arrow Left Simple 1`] = `
+Array [
+  <button
+    className="base button x-main1 modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    main1
+     
+    button
+  </button>,
+  <button
+    className="base button x-main2 modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    main2
+     
+    button
+  </button>,
+  <button
+    className="base button x-main3 modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    main3
+     
+    button
+  </button>,
+  <button
+    className="base button x-main4 modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    main4
+     
+    button
+  </button>,
+  <button
+    className="base button x-success modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    success
+     
+    button
+  </button>,
+  <button
+    className="base button x-warning modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    warning
+     
+    button
+  </button>,
+  <button
+    className="base button x-error modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    error
+     
+    button
+  </button>,
+  <button
+    className="base button x-background1 modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    background1
+     
+    button
+  </button>,
+  <button
+    className="base button x-background2 modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    background2
+     
+    button
+  </button>,
+  <button
+    className="base button x-background3 modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    background3
+     
+    button
+  </button>,
+  <button
+    className="base button x-background4 modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    background4
+     
+    button
+  </button>,
+  <button
+    className="base button x-background5 modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    background5
+     
+    button
+  </button>,
+  <button
+    className="base button x-background6 modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    background6
+     
+    button
+  </button>,
+  <button
+    className="base button x-heading modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    heading
+     
+    button
+  </button>,
+  <button
+    className="base button x-paragraph modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    paragraph
+     
+    button
+  </button>,
+  <button
+    className="base button x-subtitle modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    subtitle
+     
+    button
+  </button>,
+  <button
+    className="base button x-metadata modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    metadata
+     
+    button
+  </button>,
+  <button
+    className="base button x-link modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    link
+     
+    button
+  </button>,
+  <button
+    className="base button x-navlink modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    navlink
+     
+    button
+  </button>,
+  <button
+    className="base button x-twitter modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    twitter
+     
+    button
+  </button>,
+  <button
+    className="base button x-facebook modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    facebook
+     
+    button
+  </button>,
+  <button
+    className="base button x-instagram modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    instagram
+     
+    button
+  </button>,
+  <button
+    className="base button x-google modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    google
+     
+    button
+  </button>,
+  <button
+    className="base button x-black modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    black
+     
+    button
+  </button>,
+  <button
+    className="base button x-anchor modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    anchor
+     
+    button
+  </button>,
+  <button
+    className="base button x-grey modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    grey
+     
+    button
+  </button>,
+  <button
+    className="base button x-pearl modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    pearl
+     
+    button
+  </button>,
+  <button
+    className="base button x-white modifierSimple arrow-left"
+    type="button"
+  >
+    This is a
+     
+    white
+     
+    button
+  </button>,
+]
+`;
+
+exports[`Storyshots b/Button Arrow Right 1`] = `
+Array [
+  <button
+    className="base button x-main1 arrow-right"
+    type="button"
+  >
+    This is a
+     
+    main1
+     
+    button
+  </button>,
+  <button
+    className="base button x-main2 arrow-right"
+    type="button"
+  >
+    This is a
+     
+    main2
+     
+    button
+  </button>,
+  <button
+    className="base button x-main3 arrow-right"
+    type="button"
+  >
+    This is a
+     
+    main3
+     
+    button
+  </button>,
+  <button
+    className="base button x-main4 arrow-right"
+    type="button"
+  >
+    This is a
+     
+    main4
+     
+    button
+  </button>,
+  <button
+    className="base button x-success arrow-right"
+    type="button"
+  >
+    This is a
+     
+    success
+     
+    button
+  </button>,
+  <button
+    className="base button x-warning arrow-right"
+    type="button"
+  >
+    This is a
+     
+    warning
+     
+    button
+  </button>,
+  <button
+    className="base button x-error arrow-right"
+    type="button"
+  >
+    This is a
+     
+    error
+     
+    button
+  </button>,
+  <button
+    className="base button x-background1 arrow-right"
+    type="button"
+  >
+    This is a
+     
+    background1
+     
+    button
+  </button>,
+  <button
+    className="base button x-background2 arrow-right"
+    type="button"
+  >
+    This is a
+     
+    background2
+     
+    button
+  </button>,
+  <button
+    className="base button x-background3 arrow-right"
+    type="button"
+  >
+    This is a
+     
+    background3
+     
+    button
+  </button>,
+  <button
+    className="base button x-background4 arrow-right"
+    type="button"
+  >
+    This is a
+     
+    background4
+     
+    button
+  </button>,
+  <button
+    className="base button x-background5 arrow-right"
+    type="button"
+  >
+    This is a
+     
+    background5
+     
+    button
+  </button>,
+  <button
+    className="base button x-background6 arrow-right"
+    type="button"
+  >
+    This is a
+     
+    background6
+     
+    button
+  </button>,
+  <button
+    className="base button x-heading arrow-right"
+    type="button"
+  >
+    This is a
+     
+    heading
+     
+    button
+  </button>,
+  <button
+    className="base button x-paragraph arrow-right"
+    type="button"
+  >
+    This is a
+     
+    paragraph
+     
+    button
+  </button>,
+  <button
+    className="base button x-subtitle arrow-right"
+    type="button"
+  >
+    This is a
+     
+    subtitle
+     
+    button
+  </button>,
+  <button
+    className="base button x-metadata arrow-right"
+    type="button"
+  >
+    This is a
+     
+    metadata
+     
+    button
+  </button>,
+  <button
+    className="base button x-link arrow-right"
+    type="button"
+  >
+    This is a
+     
+    link
+     
+    button
+  </button>,
+  <button
+    className="base button x-navlink arrow-right"
+    type="button"
+  >
+    This is a
+     
+    navlink
+     
+    button
+  </button>,
+  <button
+    className="base button x-twitter arrow-right"
+    type="button"
+  >
+    This is a
+     
+    twitter
+     
+    button
+  </button>,
+  <button
+    className="base button x-facebook arrow-right"
+    type="button"
+  >
+    This is a
+     
+    facebook
+     
+    button
+  </button>,
+  <button
+    className="base button x-instagram arrow-right"
+    type="button"
+  >
+    This is a
+     
+    instagram
+     
+    button
+  </button>,
+  <button
+    className="base button x-google arrow-right"
+    type="button"
+  >
+    This is a
+     
+    google
+     
+    button
+  </button>,
+  <button
+    className="base button x-black arrow-right"
+    type="button"
+  >
+    This is a
+     
+    black
+     
+    button
+  </button>,
+  <button
+    className="base button x-anchor arrow-right"
+    type="button"
+  >
+    This is a
+     
+    anchor
+     
+    button
+  </button>,
+  <button
+    className="base button x-grey arrow-right"
+    type="button"
+  >
+    This is a
+     
+    grey
+     
+    button
+  </button>,
+  <button
+    className="base button x-pearl arrow-right"
+    type="button"
+  >
+    This is a
+     
+    pearl
+     
+    button
+  </button>,
+  <button
+    className="base button x-white arrow-right"
+    type="button"
+  >
+    This is a
+     
+    white
+     
+    button
+  </button>,
+]
+`;
+
+exports[`Storyshots b/Button Arrow Right Simple 1`] = `
+Array [
+  <button
+    className="base button x-main1 modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    main1
+     
+    button
+  </button>,
+  <button
+    className="base button x-main2 modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    main2
+     
+    button
+  </button>,
+  <button
+    className="base button x-main3 modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    main3
+     
+    button
+  </button>,
+  <button
+    className="base button x-main4 modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    main4
+     
+    button
+  </button>,
+  <button
+    className="base button x-success modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    success
+     
+    button
+  </button>,
+  <button
+    className="base button x-warning modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    warning
+     
+    button
+  </button>,
+  <button
+    className="base button x-error modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    error
+     
+    button
+  </button>,
+  <button
+    className="base button x-background1 modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    background1
+     
+    button
+  </button>,
+  <button
+    className="base button x-background2 modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    background2
+     
+    button
+  </button>,
+  <button
+    className="base button x-background3 modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    background3
+     
+    button
+  </button>,
+  <button
+    className="base button x-background4 modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    background4
+     
+    button
+  </button>,
+  <button
+    className="base button x-background5 modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    background5
+     
+    button
+  </button>,
+  <button
+    className="base button x-background6 modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    background6
+     
+    button
+  </button>,
+  <button
+    className="base button x-heading modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    heading
+     
+    button
+  </button>,
+  <button
+    className="base button x-paragraph modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    paragraph
+     
+    button
+  </button>,
+  <button
+    className="base button x-subtitle modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    subtitle
+     
+    button
+  </button>,
+  <button
+    className="base button x-metadata modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    metadata
+     
+    button
+  </button>,
+  <button
+    className="base button x-link modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    link
+     
+    button
+  </button>,
+  <button
+    className="base button x-navlink modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    navlink
+     
+    button
+  </button>,
+  <button
+    className="base button x-twitter modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    twitter
+     
+    button
+  </button>,
+  <button
+    className="base button x-facebook modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    facebook
+     
+    button
+  </button>,
+  <button
+    className="base button x-instagram modifierSimple arrow-right"
+    type="button"
   >
-    <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"
+    This is a
+     
+    instagram
+     
+    button
+  </button>,
+  <button
+    className="base button x-google modifierSimple arrow-right"
+    type="button"
   >
-    <div
-      className="loader"
-    />
-  </div>
-</div>
-`;
-
-exports[`Storyshots a/TeamInfo Base 1`] = `
-<div
-  className="base team-info u1"
->
-  <p
-    className="description s-1 md-s0"
+    This is a
+     
+    google
+     
+    button
+  </button>,
+  <button
+    className="base button x-black modifierSimple arrow-right"
+    type="button"
   >
-    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"
+    This is a
+     
+    black
+     
+    button
+  </button>,
+  <button
+    className="base button x-anchor modifierSimple arrow-right"
+    type="button"
   >
-    <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]}
+    This is a
+     
+    anchor
+     
+    button
+  </button>,
+  <button
+    className="base button x-grey modifierSimple arrow-right"
+    type="button"
   >
-    2022-10-10T00:00:00.000+00:00
-  </p>,
+    This is a
+     
+    grey
+     
+    button
+  </button>,
+  <button
+    className="base button x-pearl modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    pearl
+     
+    button
+  </button>,
+  <button
+    className="base button x-white modifierSimple arrow-right"
+    type="button"
+  >
+    This is a
+     
+    white
+     
+    button
+  </button>,
 ]
 `;
 
@@ -6430,11 +7851,11 @@ exports[`Storyshots b/Page Item Type 1`] = `
 exports[`Storyshots b/Page Sections With Background 1`] = `
 <main
   className="base page"
-  id="with-sections"
+  id="with-background"
 >
   <section
     className="base section y-success b-light-y"
-    id="with-sections_s1"
+    id="with-background_s1"
     style={
       Object {
         "alignItems": "center",
@@ -6483,6 +7904,55 @@ exports[`Storyshots b/Page Sections With Background 1`] = `
 </main>
 `;
 
+exports[`Storyshots b/Page Sections With Background Gradient 1`] = `
+<main
+  className="base page"
+  id="with-background-gradient"
+>
+  <section
+    className="base section y-success"
+    id="with-background-gradient_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 background-gradient"
+      style={
+        Object {
+          "--gradient-height": "50em",
+        }
+      }
+    />
+  </section>
+</main>
+`;
+
 exports[`Storyshots b/Page With Sections 1`] = `
 <main
   className="base page"