feat(main-menu-button): wip

components/Molecules/MenuButton/MainMenuButton.twig

@@ -0,0 +1,17 @@
+{% set classes = "" %}
+{% set hasSubMenus = hasSubMenus ?? false %}
+{% if selected %}
+  {% set classes = classes ~ " MainMenuButton--selected" %}
+{% endif %}
+
+<a href="{{href}}" class="MainMenuButton {{ classes }}">
+  <div class="MainMenuButton-icon">
+      {{ source("/icons/dashboard.svg") }}
+  </div>
+  <div class="MainMenuButton-label paragraph-3 font-semibold">{{label}}</div>
+  {% if hasSubMenus %}
+    <div class="MainMenuButton-plus">
+        {{ source("/icons/plus.svg") }}
+    </div>
+  {% endif %}
+</a>

components/Molecules/MenuButton/MenuButton.stories.js

@@ -0,0 +1,24 @@
+import MainMenuButton from './MainMenuButton.twig';
+import SubMenuButton from './SubMenuButton.twig';
+
+export default {
+  title: 'Design System/Molecules/MenuButton'
+};
+
+export const base = {
+  render: (args) => MainMenuButton(args),
+  args: {
+    label: 'Dashboard',
+    selected: false,
+    hasSubMenus: true
+  }
+};
+
+export const subMenu = {
+  render: (args) => SubMenuButton(args),
+  args: {
+    label: 'Toutes mes commandes',
+    selected: false,
+    count: 24
+  }
+};

components/Molecules/MenuButton/SubMenuButton.twig

@@ -0,0 +1,14 @@
+{% set classes = "" %}
+{% set labelClasses = "bg-white text-black" %}
+{% if selected %}
+  {% set classes = classes ~ " SubMenuButton--selected" %}
+  {% set labelClasses = labelClasses ~ " group-hover:bg-grey-lighter" %}
+{% endif %}
+
+<a href="{{href}}" class="SubMenuButton group {{ classes }}">
+  <div class="SubMenuButton-label paragraph-4 font-semibold">{{label}}</div>
+
+  {% if count %}
+    {% include "../../Atoms/Labels/Label.twig" with { text: count, classes: labelClasses } %}
+  {% endif %}
+</a>

components/Molecules/MenuButton/menuButton.css

@@ -0,0 +1,80 @@
+.MainMenuButton {
+  display: flex;
+  align-items: center;
+  background-color: var(--grey-dark);
+  color: var(--white);
+  padding: rem-convert(16px);
+  width: rem-convert(225px);
+  border-radius: rem-convert(8px);
+
+  &-icon {
+    margin-right: rem-convert(8px);
+  }
+
+  &-plus {
+    margin-left: auto;
+  }
+
+  &-icon,
+  &-plus {
+    width: rem-convert(22px);
+    height: rem-convert(22px);
+  }
+
+  &:hover {
+    background-color: var(--black);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--vermillon-medium);
+    outline-offset: 0px;
+  }
+
+  &--selected {
+    background-color: var(--grey-lightest);
+    color: var(--grey-darker);
+
+    .MainMenuButton-icon {
+      color: var(--vermillon-dark);
+    }
+
+    &:hover {
+      background-color: var(--white);
+    }
+  }
+}
+
+.SubMenuButton {
+  display: flex;
+  align-items: center;
+  background-color: var(--grey-dark);
+  color: var(--white);
+  padding-left: rem-convert(16px);
+  padding-right: rem-convert(11px);
+  padding-top: rem-convert(11px);
+  padding-bottom: rem-convert(11px);
+  gap: rem-convert(8px);
+  border-radius: rem-convert(8px);
+
+  &:hover {
+    background-color: var(--black);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--vermillon-medium);
+    outline-offset: 0px;
+  }
+
+  &--selected {
+    background-color: var(--grey-lightest);
+    color: var(--grey-darker);
+
+    .SubMenuButton-icon {
+      color: var(--vermillon-dark);
+    }
+
+    &:hover {
+      background-color: var(--white);
+    }
+  }
+}