Merge pull request #29 from thelia/feat/card-suggest-filters

feat: card suggest filters
thelia · May 2, 2024 · 3cf9904 · 3cf9904
2 parents 67a0114 + 998d6ba
commit 3cf9904
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 0 deletions.
diff --git a/components/Organisms/Card/SuggestFilters/SuggestFilters.stories.js b/components/Organisms/Card/SuggestFilters/SuggestFilters.stories.js
@@ -0,0 +1,13 @@
+import SuggestFilters from './SuggestFilters.twig';
+
+export default {
+  title: 'Design System/Organisms/Card/SuggestFilters'
+};
+
+export const Base = {
+  render: (args) => SuggestFilters(args),
+  args: {
+    customText: "<p>Vous n'avez pas trouvé le produit que vous recherchez ?</p><p>Essayez les filtres</p>",
+    button: "Filtrer & trier",
+  }
+};
diff --git a/components/Organisms/Card/SuggestFilters/SuggestFilters.twig b/components/Organisms/Card/SuggestFilters/SuggestFilters.twig
@@ -0,0 +1,4 @@
+<div class="SuggestFilters">
+    <div class="SuggestFilters-desc">{{ customText }}</div>
+    {% include '../../../Molecules/Button/Button.twig' with {text: button, variant: "secondary", icon_left: "filter", classes: ' Button--medium'} %}
+</div>
diff --git a/components/Organisms/Card/SuggestFilters/suggestFilters.css b/components/Organisms/Card/SuggestFilters/suggestFilters.css
@@ -0,0 +1,11 @@
+.SuggestFilters {
+  max-width: rem-convert(370px);
+  text-align: center;
+  background-color: var(--theme-lightest);
+  padding: rem-convert(24px);
+
+  &-desc {
+    @apply paragraph-2;
+    margin-bottom: rem-convert(8px);
+  }
+}