feat(snack-bar): all variants

components/Organisms/SnackBar/SnackBar.stories.js

@@ -0,0 +1,38 @@
+import SnackBar from './SnackBar.twig';
+
+export default {
+  title: 'Design System/Organisms/SnackBar'
+};
+
+export const base = {
+  render: (args) => SnackBar(args),
+  args: {
+    title: 'SnackBar title',
+    close: true,
+    content:
+      'lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+    variant: 'info',
+    action: 'Bouton',
+    secondaryAction: 'Bouton',
+    icon: true
+  },
+  argTypes: {
+    close: {
+      control: { type: 'boolean' }
+    },
+    variant: {
+      control: { type: 'select' },
+      options: ['info', 'success', 'warning', 'error']
+    },
+    action: {
+      control: { type: 'text' }
+    },
+    secondaryAction: {
+      control: { type: 'text' }
+    },
+    link: {
+      control: { type: 'object' },
+      description: 'Object with label and href'
+    }
+  }
+};

components/Organisms/SnackBar/SnackBar.twig

@@ -0,0 +1,33 @@
+<div class='SnackBar SnackBar--{{ variant }}'>
+	{% if close %}
+		<button class='SnackBar-close'>
+			{{ source('/icons/close.svg') }}
+		</button>
+	{% endif %}
+
+	{% if icon %}
+		<div class='SnackBar-icon'>
+			{{ source('/icons/' ~ variant ~ '.svg') }}
+		</div>
+	{% endif %}
+
+	{% if title %}
+		<div class='font-bold SnackBar-title paragraph-2'>
+			{{ title }}
+		</div>
+	{% endif %}
+	<div class='SnackBar-content paragraph-3'>{{ content }}</div>
+	{% if action or secondaryAction or link %}
+		<div class='SnackBar-actions'>
+			{% if action %}
+				<button class='Button Button--medium Button--primary'>{{ action }}</button>
+			{% endif %}
+			{% if secondaryAction %}
+				<button class='Button Button--medium Button--secondary'>{{ secondaryAction }}</button>
+			{% endif %}
+			{% if link %}
+				{% include '../../Molecules/Links/Link.twig' with { label: link.label, classes: '', href: link.href, target: '', iconLeft: 'arrow-left', iconRight: 'arrow-right', iconSize: 'h-5 w-5' } %}
+			{% endif %}
+		</div>
+	{% endif %}
+</div>

components/Organisms/SnackBar/snackBar.css

@@ -0,0 +1,86 @@
+.SnackBar {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding-left: rem-convert(48px);
+  padding-right: rem-convert(24px);
+  padding-top: rem-convert(24px);
+  padding-bottom: rem-convert(24px);
+  display: flex;
+  max-width: rem-convert(360px);
+  flex-direction: column;
+  position: relative;
+
+  &-close {
+    width: rem-convert(24px);
+    height: rem-convert(24px);
+    position: absolute;
+    top: 14px;
+    right: 14px;
+  }
+
+  &-icon {
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    left: 16px;
+    top: 24px;
+  }
+
+  &:not(:has(.SnackBar-icon)) {
+    padding-left: rem-convert(16px);
+  }
+
+  &:not(:has(.SnackBar-actions)) {
+    .SnackBar-content {
+      margin-bottom: 0px;
+    }
+  }
+
+  &:not(:has(.SnackBar-title)) {
+    .SnackBar-content {
+      margin-top: 0px;
+    }
+  }
+
+  &-title {
+    position: relative;
+  }
+
+  &-content {
+    margin-top: rem-convert(4px);
+    margin-bottom: rem-convert(16px);
+  }
+
+  &-actions {
+    display: flex;
+    gap: rem-convert(16px);
+  }
+
+  &--info {
+    background: var(--informative-lightest);
+    border-color: var(--informative);
+
+    .SnackBar-icon {
+      color: var(--informative);
+    }
+  }
+
+  &--success {
+    background: var(--success-lightest);
+    border-color: var(--success-dark);
+
+    .SnackBar-icon {
+      color: var(--success-dark);
+    }
+  }
+
+  &--warning {
+    background: var(--warning-lightest);
+    border-color: var(--warning);
+  }
+
+  &--error {
+    background: var(--error-lightest);
+    border-color: var(--error);
+  }
+}