@pareto-engineering/design-system 4.3.5 → 4.3.7-alpha.2

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

@@ -10466,6 +10466,355 @@ exports[`Storyshots a/MetaCard With Blur 1`] = `
 </div>
 `;
 
+exports[`Storyshots a/Notification Base 1`] = `
+<div
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+      "height": "100px",
+      "justifyContent": "center",
+    }
+  }
+>
+  <div
+    className="base notification x-deepblue"
+  >
+    <div
+      className="message-container"
+    >
+      <span
+        className="icon"
+      >
+        g
+      </span>
+      <span
+        className="message"
+      >
+        This is a notification with a custom color
+      </span>
+    </div>
+    <button
+      className="base button close x-deepblue modifierCompact"
+      onClick={[Function]}
+      type="button"
+    >
+      <span
+        className="icon"
+      >
+        Y
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Notification Error 1`] = `
+<div
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+      "height": "100px",
+      "justifyContent": "center",
+    }
+  }
+>
+  <div
+    className="base notification x-error"
+  >
+    <div
+      className="message-container"
+    >
+      <span
+        className="icon"
+      >
+        g
+      </span>
+      <span
+        className="message"
+      >
+        This is an error notification
+      </span>
+    </div>
+    <button
+      className="base button close x-error modifierCompact"
+      onClick={[Function]}
+      type="button"
+    >
+      <span
+        className="icon"
+      >
+        Y
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Notification Info 1`] = `
+<div
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+      "height": "100px",
+      "justifyContent": "center",
+    }
+  }
+>
+  <div
+    className="base notification x-in-progress"
+  >
+    <div
+      className="message-container"
+    >
+      <span
+        className="icon"
+      >
+        h
+      </span>
+      <span
+        className="message"
+      >
+        This is an info notification
+      </span>
+    </div>
+    <button
+      className="base button close x-in-progress modifierCompact"
+      onClick={[Function]}
+      type="button"
+    >
+      <span
+        className="icon"
+      >
+        Y
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Notification Success 1`] = `
+<div
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+      "height": "100px",
+      "justifyContent": "center",
+    }
+  }
+>
+  <div
+    className="base notification x-success"
+  >
+    <div
+      className="message-container"
+    >
+      <span
+        className="icon"
+      >
+        I
+      </span>
+      <span
+        className="message"
+      >
+        This is a success notification
+      </span>
+    </div>
+    <button
+      className="base button close x-success modifierCompact"
+      onClick={[Function]}
+      type="button"
+    >
+      <span
+        className="icon"
+      >
+        Y
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Notification Warning 1`] = `
+<div
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+      "height": "100px",
+      "justifyContent": "center",
+    }
+  }
+>
+  <div
+    className="base notification x-blocked"
+  >
+    <div
+      className="message-container"
+    >
+      <span
+        className="icon"
+      >
+        x
+      </span>
+      <span
+        className="message"
+      >
+        This is a warning notification
+      </span>
+    </div>
+    <button
+      className="base button close x-blocked modifierCompact"
+      onClick={[Function]}
+      type="button"
+    >
+      <span
+        className="icon"
+      >
+        Y
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/NotificationStack Base 1`] = `
+<div
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+      "height": "500px",
+      "justifyContent": "center",
+    }
+  }
+>
+  <div
+    className="base notification-stack"
+  >
+    <div
+      className="base notification stacked x-error"
+    >
+      <div
+        className="message-container"
+      >
+        <span
+          className="icon"
+        >
+          g
+        </span>
+        <span
+          className="message"
+        >
+          This is an error notification
+        </span>
+      </div>
+      <button
+        className="base button close x-error modifierCompact"
+        onClick={[Function]}
+        type="button"
+      >
+        <span
+          className="icon"
+        >
+          Y
+        </span>
+      </button>
+    </div>
+    <div
+      className="base notification stacked x-blocked"
+    >
+      <div
+        className="message-container"
+      >
+        <span
+          className="icon"
+        >
+          x
+        </span>
+        <span
+          className="message"
+        >
+          This is a warning notification
+        </span>
+      </div>
+      <button
+        className="base button close x-blocked modifierCompact"
+        onClick={[Function]}
+        type="button"
+      >
+        <span
+          className="icon"
+        >
+          Y
+        </span>
+      </button>
+    </div>
+    <div
+      className="base notification stacked x-in-progress"
+    >
+      <div
+        className="message-container"
+      >
+        <span
+          className="icon"
+        >
+          h
+        </span>
+        <span
+          className="message"
+        >
+          This is an info notification
+        </span>
+      </div>
+      <button
+        className="base button close x-in-progress modifierCompact"
+        onClick={[Function]}
+        type="button"
+      >
+        <span
+          className="icon"
+        >
+          Y
+        </span>
+      </button>
+    </div>
+    <div
+      className="base notification stacked x-success"
+    >
+      <div
+        className="message-container"
+      >
+        <span
+          className="icon"
+        >
+          I
+        </span>
+        <span
+          className="message"
+        >
+          This is a success notification
+        </span>
+      </div>
+      <button
+        className="base button close x-success modifierCompact"
+        onClick={[Function]}
+        type="button"
+      >
+        <span
+          className="icon"
+        >
+          Y
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots a/People Base 1`] = `
 <div
   className="x-background-far b-x v1 p-v"