@pareto-engineering/design-system 4.0.0-alpha.22 → 4.0.0-alpha.24

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

@@ -451,6 +451,27 @@ exports[`Storyshots Example/Page Logged Out 1`] = `
 
 exports[`Storyshots a/AppContext Base 1`] = `"Sample AppContext"`;
 
+exports[`Storyshots a/BlurOverlay Base 1`] = `
+<div
+  className="base blur-overlay modifierActive"
+>
+  <div
+    style={
+      {
+        "backgroundColor": "blue",
+        "bottom": "0",
+        "color": "white",
+        "height": "100px",
+        "minWidth": "100%",
+        "position": "fixed",
+      }
+    }
+  >
+    Sample Foreground Component
+  </div>
+</div>
+`;
+
 exports[`Storyshots a/ContentTree Base 1`] = `
 <div
   style={
@@ -3151,7 +3172,7 @@ exports[`Storyshots a/Timestamp Distance Format 1`] = `
   className="base timestamp"
   onClick={[Function]}
 >
-  7 months ago
+  8 months ago
 </p>
 `;
 
@@ -11765,6 +11786,653 @@ exports[`Storyshots b/Button/Group Base 1`] = `
 </div>
 `;
 
+exports[`Storyshots b/Button/WithLink Base 1`] = `
+<div
+  className="base button-group"
+>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-main"
+      type="button"
+    >
+      This is a
+       
+      main
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-main-80"
+      type="button"
+    >
+      This is a
+       
+      main-80
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-main-50"
+      type="button"
+    >
+      This is a
+       
+      main-50
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-main2"
+      type="button"
+    >
+      This is a
+       
+      main2
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-interactive"
+      type="button"
+    >
+      This is a
+       
+      interactive
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-interactive-icons"
+      type="button"
+    >
+      This is a
+       
+      interactive-icons
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-shadow"
+      type="button"
+    >
+      This is a
+       
+      shadow
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-success"
+      type="button"
+    >
+      This is a
+       
+      success
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-warning"
+      type="button"
+    >
+      This is a
+       
+      warning
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-error"
+      type="button"
+    >
+      This is a
+       
+      error
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-blocked"
+      type="button"
+    >
+      This is a
+       
+      blocked
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-backlog"
+      type="button"
+    >
+      This is a
+       
+      backlog
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-in-progress"
+      type="button"
+    >
+      This is a
+       
+      in-progress
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-in-review"
+      type="button"
+    >
+      This is a
+       
+      in-review
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-requested"
+      type="button"
+    >
+      This is a
+       
+      requested
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-completed"
+      type="button"
+    >
+      This is a
+       
+      completed
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-background-far"
+      type="button"
+    >
+      This is a
+       
+      background-far
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-background-near"
+      type="button"
+    >
+      This is a
+       
+      background-near
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-background-cards"
+      type="button"
+    >
+      This is a
+       
+      background-cards
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-background-cards-80"
+      type="button"
+    >
+      This is a
+       
+      background-cards-80
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-background-cards-50"
+      type="button"
+    >
+      This is a
+       
+      background-cards-50
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-background-inputs"
+      type="button"
+    >
+      This is a
+       
+      background-inputs
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-background-mesh"
+      type="button"
+    >
+      This is a
+       
+      background-mesh
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-heading"
+      type="button"
+    >
+      This is a
+       
+      heading
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-paragraph"
+      type="button"
+    >
+      This is a
+       
+      paragraph
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-subtitle"
+      type="button"
+    >
+      This is a
+       
+      subtitle
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-metadata"
+      type="button"
+    >
+      This is a
+       
+      metadata
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-link"
+      type="button"
+    >
+      This is a
+       
+      link
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-transparent"
+      type="button"
+    >
+      This is a
+       
+      transparent
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-highlighted"
+      type="button"
+    >
+      This is a
+       
+      highlighted
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-disabled"
+      type="button"
+    >
+      This is a
+       
+      disabled
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-twitter"
+      type="button"
+    >
+      This is a
+       
+      twitter
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-facebook"
+      type="button"
+    >
+      This is a
+       
+      facebook
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-instagram"
+      type="button"
+    >
+      This is a
+       
+      instagram
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-google"
+      type="button"
+    >
+      This is a
+       
+      google
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-black"
+      type="button"
+    >
+      This is a
+       
+      black
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-anchor"
+      type="button"
+    >
+      This is a
+       
+      anchor
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-grey"
+      type="button"
+    >
+      This is a
+       
+      grey
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-pearl"
+      type="button"
+    >
+      This is a
+       
+      pearl
+       
+      button
+    </button>
+  </a>
+  <a
+    className="base button-with-link"
+    href="#/"
+    onClick={[Function]}
+  >
+    <button
+      className="base button x-white"
+      type="button"
+    >
+      This is a
+       
+      white
+       
+      button
+    </button>
+  </a>
+</div>
+`;
+
 exports[`Storyshots b/Card Base 1`] = `
 <div
   className="base card"
@@ -14117,7 +14785,9 @@ exports[`Storyshots b/ThemeSelector Base 1`] = `
     className="base theme-selector"
     onClick={[Function]}
     onKeyDown={[Function]}
-  />
+  >
+    Dark
+  </a>
 </div>
 `;