Merge pull request #17 from thelia/feat/accordion

feat: accordion
thelia · Apr 29, 2024 · caa8c78 · caa8c78
2 parents 44300b3 + 96b1051
commit caa8c78
Show file tree

Hide file tree

Showing 7 changed files with 150 additions and 4 deletions.
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -20,6 +20,10 @@ const preview: Preview = {
           name: 'grey',
           value: '#F5F5F5'
         },
+        {
+          name: 'grey-lighter',
+          value: '#D6D6D6'
+        },
         {
           name: 'white',
           value: '#FFFFFF'

diff --git a/components/Molecules/Accordion/Accordion.stories.js b/components/Molecules/Accordion/Accordion.stories.js
@@ -0,0 +1,53 @@
+import Accordion from './Accordion.twig';
+import FilterList from '../Filters/FilterList/FilterList.twig';
+import FieldInput from '../Fields/FieldInput/FieldInput.twig';
+
+export default {
+  title: 'Design System/Molecules/Accordion'
+};
+
+const commonProps = {
+  args: {
+    title: 'Concertina',
+  },
+  argTypes: {
+    variant: {
+      options: ['text', 'bold', 'vermillon'],
+      control: { type: 'select' },
+    },
+  },
+};
+
+export const Base = {
+  render: (args) => Accordion(args),
+  ...commonProps,
+  args: {
+    ...commonProps.args,
+    variant: 'text',
+    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+  }
+};
+
+// TODO: manque input avec bouton à l'intérieur pour le code promo
+export const Bold = {
+  render: (args) => Accordion(args),
+  args: {
+    ...commonProps.args,
+    variant: 'bold',
+    content: `${FieldInput({ placeholder: 'Code Promo', name: 'promoCode' })}`,
+  }
+};
+
+export const Vermillon = {
+  render: (args) => Accordion(args),
+  args: {
+    ...commonProps.args,
+    variant: 'vermillon',
+    content: `
+    ${FilterList({ label: 'Du - cher au + cher', value: 1 })}
+    ${FilterList({ label: 'Du + cher au - cher', value: 2 })}
+    ${FilterList({ label: 'Nouveautés', value: 3 })}
+    ${FilterList({ label: 'Meilleurs notes', value: 4 })}
+    ${FilterList({ label: 'Promotions', value: 5 })}`,
+  }
+};
diff --git a/components/Molecules/Accordion/Accordion.twig b/components/Molecules/Accordion/Accordion.twig
@@ -0,0 +1,12 @@
+{% set classes = '' %}
+{% set classes = classes ~ ' Accordion--' ~ (variant|default('text')) %}
+
+<details class='Accordion{{ classes }}'>
+  <summary class='Accordion-summary'>
+    {{ title }}
+    <span class='Accordion-icon'>{{ source("/icons/chevron-down.svg") }}</span>
+  </summary>
+  <div class="Accordion-content">
+    {{ content }}
+  </div>
+</details>
diff --git a/components/Molecules/Accordion/accordion.css b/components/Molecules/Accordion/accordion.css
@@ -0,0 +1,77 @@
+.Accordion {
+  &-summary {
+    padding: rem-convert(14px) rem-convert(16px);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--grey-lighter);
+    font-size: var(--font-size-paragraph-2);
+    line-height: var(--line-height-paragraph-2);
+    font-family: var(--font-family-paragraph-2);
+    color: var(--black);
+
+    &::marker {
+      font-size: 0;
+    }
+  }
+
+  &-icon {
+    height: rem-convert(28px);
+    width: rem-convert(28px);
+    color: var(--black);
+    transform: rotate(0);
+    transition: 0.2s ease all;
+  }
+
+  &-content {
+    padding: rem-convert(18px) rem-convert(28px) rem-convert(30px)
+      rem-convert(16px);
+    border-bottom: 1px solid var(--grey-lighter);
+    font-size: var(--font-size-paragraph-5);
+    line-height: var(--line-height-paragraph-5);
+    font-family: var(--font-family-paragraph-5);
+    color: var(--black);
+  }
+
+  &[open] {
+    .Accordion-summary {
+      border-bottom: none;
+    }
+
+    .Accordion-icon {
+      transform: rotate(-180deg);
+      transition: 0.2s ease all;
+    }
+  }
+
+  &--bold {
+    .Accordion-summary {
+      font-weight: 600;
+      font-size: var(--font-size-paragraph-4);
+      line-height: var(--line-height-paragraph-4);
+      border-bottom: none;
+    }
+
+    .Accordion-content {
+      border-bottom: none;
+      padding: rem-convert(0px) rem-convert(16px) rem-convert(20px)
+        rem-convert(16px);
+    }
+  }
+
+  &--vermillon {
+    background-color: var(--theme-lightest);
+
+    .Accordion-summary {
+      font-size: var(--font-size-paragraph-4);
+      line-height: var(--line-height-paragraph-4);
+      border-bottom: none;
+    }
+
+    .Accordion-content {
+      border-bottom: none;
+      padding: rem-convert(0px) rem-convert(16px) rem-convert(20px)
+        rem-convert(16px);
+    }
+  }
+}
diff --git a/components/Molecules/Filters/FilterList/FilterList.stories.js b/components/Molecules/Filters/FilterList/FilterList.stories.js
@@ -8,9 +8,10 @@ export const Base = {
   render: (args) => FilterList(args),
   args: {
     label: 'Item filtre et tri',
-    value: 1
+    value: 1,
+    onClick: {},
   },
   parameters: {
-    backgrounds: { default: 'grey' },
+    backgrounds: { default: 'grey-lighter' },
   },
 };
diff --git a/components/Molecules/Filters/FilterList/FilterList.twig b/components/Molecules/Filters/FilterList/FilterList.twig
@@ -1,4 +1,4 @@
 <div class="FilterList" tabindex="1">
-  <input class="FilterList-input" type="checkbox" id="{{ value }}" value="{{ value }}">
+  <input class="FilterList-input" type="checkbox" id="{{ value }}" value="{{ value }}" {% if onClick %}onclick=onClick{% endif %}>
   <label class="FilterList-label" for="{{ value }}">{{ label }}</label>
 </div>
diff --git a/components/Molecules/Filters/FilterList/filterList.css b/components/Molecules/Filters/FilterList/filterList.css
@@ -20,7 +20,6 @@
     font-family: var(--font-family-paragraph-3);
     line-height: var(--line-height-paragraph-3);
     color: var(--black);
-    background-color: #fff;
     border-radius: 4px;
     width: 100%;
     padding: rem-convert(12px) rem-convert(56px) rem-convert(12px)