SubHeader Title Only & Orders

components/Layout/Subheader/Orders/SubheaderOrders.stories.js

@@ -0,0 +1,13 @@
+import SubheaderOrders from './SubheaderOrders.twig';
+
+export default {
+  title: 'Design System/Layout/Subheader/Orders'
+};
+
+export const base = {
+  render: (args) => SubheaderOrders(args),
+  args: {
+    title: 'Mes commandes'
+  },
+  argTypes: {}
+};

components/Layout/Subheader/Orders/SubheaderOrders.twig

@@ -0,0 +1,9 @@
+<div class='Subheader Subheader-orders'>
+  <div class='container mx-auto flex flex-col items-center'>
+    <h1 class='Subheader-title'>{{ title }}</h1>
+  <div class='flex'>
+    {% include '../../../Molecules/Button/Button.twig' with {text: 'En cours', sharp:true} %}
+    {% include '../../../Molecules/Button/Button.twig' with {text: 'Historique', sharp:true, variant: 'secondary'} %}
+  </div>
+  </div>
+</div>

components/Layout/Subheader/TitleOnly/SubheaderTitle.stories.js

@@ -0,0 +1,20 @@
+import SubheaderTitle from './SubheaderTitle.twig';
+
+export default {
+  title: 'Design System/Layout/Subheader/TitleOnly'
+};
+
+export const base = {
+  render: (args) => SubheaderTitle(args),
+  args: {
+    position: 'left',
+    title: 'Nom de la page',
+    tag: 'h1'
+  },
+  argTypes: {
+    position: {
+      options: ['left', 'centered'],
+      control: { type: 'radio' }
+    }
+  }
+};

components/Layout/Subheader/TitleOnly/SubheaderTitle.twig

@@ -0,0 +1,6 @@
+{% set tag = tag|default('h1') %}
+<div class='Subheader Subheader-titleOnly  {% if position == 'centered' %}Subheader-centered{% endif %}'>
+  <div class='container mx-auto'>
+    <{{ tag }} class='Subheader-title'>{{ title }}</{{ tag }}>
+  </div>
+</div>

components/Layout/Subheader/subheader.css

@@ -0,0 +1,34 @@
+.Subheader {
+  background: var(--theme-lighter);
+  display: flex;
+  align-items: center;
+  &-titleOnly {
+    min-height: rem-convert(340px);
+    padding: rem-convert(24px 0);
+    @screen md {
+      min-height: rem-convert(250px);
+      padding: rem-convert(32px 0);
+    }
+  }
+  &-orders {
+    min-height: rem-convert(256px);
+    padding: rem-convert(24px 0);
+    @screen md {
+      min-height: rem-convert(282px);
+      padding: rem-convert(32px 0);
+    }
+    @screen lg {
+      min-height: rem-convert(282px);
+      padding: rem-convert(32px 0);
+    }
+  }
+  &-centered {
+    text-align: center;
+    @screen lg {
+      text-align: left;
+    }
+  }
+  &-title {
+    @apply h1;
+  }
+}