SnackBar

thelia · May 17, 2024 · 062f74e · 062f74e
1 parent 532c4de
commit 062f74e
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 0 deletions.
diff --git a/components/Organisms/SnackBar/SnackBar.stories.js b/components/Organisms/SnackBar/SnackBar.stories.js
@@ -0,0 +1,26 @@
+import SnackBar from './SnackBar.twig';
+
+export default {
+  title: 'Design System/Organisms/SnackBar'
+};
+
+export const base = {
+  render: (args) => SnackBar(args),
+  args: {
+    size:  'small',
+    variant: 'error',
+    button: 'Bouton',
+    text: 'Ici un message d’erreur pour aider l’utilisateur à corriger son erreur.',
+    withIcon: true
+  },
+  argTypes: {
+    size: {
+      options: ['small', 'large'],
+      control: { type: 'radio' }
+    },
+    variant: {
+      options: ['error', 'warning', 'validated', 'informative', 'neutral-light', 'neutral-dark'],
+      control: { type: 'radio' }
+    },
+  }
+};
diff --git a/components/Organisms/SnackBar/SnackBar.twig b/components/Organisms/SnackBar/SnackBar.twig
@@ -0,0 +1,20 @@
+{% set icon = '' %}
+{% if variant|default('theme-light') == 'error' %}{% set icon = 'error' %}{% endif %}
+{% if variant|default('theme-light') == 'warning' %}{% set icon = 'warning' %}{% endif %}
+{% if variant|default('theme-light') == 'validated' %}{% set icon = 'check' %}{% endif %}
+{% if variant|default('theme-light') == 'informative' %}{% set icon = 'info' %}{% endif %}
+
+<div class='SnackBar SnackBar-{{ size|default('small') }} SnackBar--{{ variant|default('theme-light') }}'>
+  <div class='SnackBar-content'>
+    {% if withIcon and icon %}
+    <div class='SnackBar-icon'>{{ source("/icons/" ~ icon  ~".svg") }}</div>
+    {% endif %}
+    <div class='SnackBar-message'>{{ text }}</div>
+  </div>
+  {% if button %}
+  <div class='SnackBar-button'>
+    {% include '../../Molecules/Button/Button.twig' with
+      {classes:'', variant:'secondary', text:button} %}
+  </div>
+  {% endif %}
+</div>
diff --git a/components/Organisms/SnackBar/snackbar.css b/components/Organisms/SnackBar/snackbar.css
@@ -0,0 +1,58 @@
+.SnackBar {
+  border-radius: 8px;
+  border: 1px solid var(--black);
+  padding-bottom: rem-convert(20px);
+  padding-top: rem-convert(20px);
+  &-content {
+    display: flex;
+  }
+  &-icon {
+    width: rem-convert(20px);
+    height: rem-convert(20px);
+    margin-right: rem-convert(8px);
+    flex-shrink: 0;
+  }
+  &-small {
+    width: rem-convert(334px);
+    padding-right: rem-convert(30px);
+    padding-left: rem-convert(24px);
+
+    .SnackBar-button {
+      margin-top: rem-convert(10px);
+    }
+  }
+  &-large {
+    display: flex;
+    gap: 10px;
+    width: rem-convert(661px);
+    padding-right: rem-convert(24px);
+    padding-left: rem-convert(24px);
+  }
+
+
+  &--neutral-light {
+    background: var(--theme-lightest);
+    border-color: var(--theme-medium);
+  }
+  &--neutral-dark {
+    background: var(--theme-light);
+    border-color: var(--theme-medium);
+  }
+
+  &--error {
+    background: var(--error-lightest);
+    border-color: var(--error);
+  }
+  &--warning {
+    background: var(--warning-lightest);
+    border-color: var(--warning);
+  }
+  &--validated {
+    background: var(--validated-lightest);
+    border-color: var(--validated);
+  }
+  &--informative {
+    background: var(--informative-lightest);
+    border-color: var(--informative);
+  }
+}