Order Card

thelia · May 28, 2024 · 9577d62 · 9577d62
1 parent f7819c8
commit 9577d62
Show file tree

Hide file tree

Showing 5 changed files with 181 additions and 4 deletions.
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -1,4 +1,5 @@
 import { Preview } from '@storybook/html';
+import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
 import Twig from 'twig';
 
 import '../components/base.css';
@@ -35,6 +36,16 @@ const preview: Preview = {
       ]
     },
     viewport: {
+      viewports: {
+        ...MINIMAL_VIEWPORTS,
+        largeDesktop: {
+          name: 'Large desktop',
+          styles: {
+            width: '1681px',
+            height: '801px'
+          }
+        }
+      },
       defaultViewport: 'desktop'
     }
   }

diff --git a/components/Organisms/Card/Order/OrderCard.stories.js b/components/Organisms/Card/Order/OrderCard.stories.js
@@ -0,0 +1,24 @@
+import OrderCard from './OrderCard.twig';
+
+export default {
+  title: 'Design System/Organisms/Card/OrderCard'
+};
+
+export const Base = {
+  render: (args) =>
+    `<div class='max-w-[320] sm:max-w-[390px] md:max-w-[438px] 2xl:max-w-[616px]'>${OrderCard(args)}</div>`,
+  args: {
+    orderNumber: 'XXXX XXXX XXX',
+    date: '08/01/2024',
+    deliveryDate: '10/01/2024',
+    nbItems: 1,
+    price: '398,26€',
+    productImages: [
+      { alt: 'image 1', src: '/images/placeholder2.webp' },
+      { alt: 'image 2', src: '/images/placeholder2.webp' },
+      { alt: 'image 2', src: '/images/placeholder2.webp' },
+      { alt: 'image 2', src: '/images/placeholder2.webp' },
+      { alt: 'image 6', src: '/images/placeholder2.webp' }
+    ]
+  }
+};
diff --git a/components/Organisms/Card/Order/OrderCard.twig b/components/Organisms/Card/Order/OrderCard.twig
@@ -0,0 +1,30 @@
+<div class='OrderCard'>
+  <div class='2xl:flex justify-between'>
+    <div>
+      <div class='OrderCard-title'>Commande N° {{ orderNumber }}</div>
+      <div class='OrderCard-date'>du {{ date }}</div>
+    </div>
+    <div class='flex 2xl:block 2xl:mt-0 justify-between mt-1'>
+      <div class='text-black paragraph-3'>{{ nbItems }} article{% if nbItems > 1 %}s{% endif %}</div>
+      <div class='text-black paragraph-1 font-semibold'>{{ price }}</div>
+    </div>
+  </div>
+
+  <div class='2xl:flex 2xl:items-center 2xl:gap-4 2xl:mb-4 2xl:mt-2'>
+    <div class='mt-1 mb-2 2xl:mt-0 2xl:mb-0'>
+      {% include '../../../Molecules/OrderTag/OrderTag.twig' with {customText: 'Commande expédiée', variant:'validated'} %}
+    </div>
+    <div class='OrderCard-delivery'>Livraison prévue le {{ deliveryDate }}</div>
+  </div>
+  <div class='OrderCard-images'>
+    {%  for img in productImages %}
+      <div class='OrderCard-image'>
+        <img src='{{ img.src }}' alt='{{ img.alt }}' />
+      </div>
+    {% endfor %}
+    <div class='OrderCard-nbImages'></div>
+  </div>
+  <div class='text-center md:text-left mt-6'>
+    {% include '../../../Molecules/Button/Button.twig' with {text: 'Voir le détail de la commande'} %}
+  </div>
+</div>
diff --git a/components/Organisms/Card/Order/orderCard.css b/components/Organisms/Card/Order/orderCard.css
@@ -0,0 +1,104 @@
+.OrderCard {
+  max-width: rem-convert(616px);
+  background: var(--theme-lightest);
+  padding-top: rem-convert(40px);
+  padding-bottom: rem-convert(45px);
+  padding-left: rem-convert(23px);
+  padding-right: rem-convert(25px);
+
+  &-title {
+    color: var(--black);
+    @apply h5;
+  }
+  &-date {
+    color: var(--grey);
+    @apply paragraph-3;
+  }
+  &-delivery {
+    color: var(--grey-dark);
+    font-family: 'Roboto', serif;
+    font-size: var(--font-size-xs);
+    font-weight: 400;
+    line-height: rem-convert(20px);
+  }
+
+  &-images {
+    display: flex;
+    flex-wrap: wrap;
+    background-color: var(--white);
+    border-radius: rem-convert(4px);
+    padding: rem-convert(4px);
+    gap: rem-convert(4px);
+    box-shadow: 0 0 8px 0 rgba(84, 84, 84, 0.15);
+    counter-reset:nbOrderImages;
+  }
+  &-image {
+    width: rem-convert(72px);
+    height: rem-convert(72px);
+
+    &:nth-child(6) ~ .OrderCard-image  {
+      counter-increment:nbOrderImages;
+      position: absolute;
+      max-height: 0;
+      max-width: 0;
+      overflow: hidden;
+      opacity: 0;
+    }
+
+    @screen '2xl' {
+      &:not(:nth-child(n+7)):nth-last-child(2) ~ .OrderCard-nbImages {
+        display: none;
+      }
+    }
+
+    @screen maxSm {
+      &:nth-child(2) ~ .OrderCard-image  {
+        counter-increment:nbOrderImages;
+        position: absolute;
+        max-height: 0;
+        max-width: 0;
+        overflow: hidden;
+        opacity: 0;
+      }
+      &:not(:nth-child(n+3)):nth-last-child(2) ~ .OrderCard-nbImages {
+        display: none;
+      }
+    }
+    @screen maxXs {
+      &:nth-child(3) ~ .OrderCard-image  {
+        counter-increment:nbOrderImages;
+        position: absolute;
+        max-height: 0;
+        max-width: 0;
+        overflow: hidden;
+        opacity: 0;
+      }
+      &:not(:nth-child(n+4)):nth-last-child(2) ~ .OrderCard-nbImages {
+        display: none;
+      }
+    }
+    @screen 'max2xl' {
+      &:nth-child(4) ~ .OrderCard-image  {
+        counter-increment:nbOrderImages;
+        position: absolute;
+        max-height: 0;
+        max-width: 0;
+        overflow: hidden;
+        opacity: 0;
+      }
+      &:not(:nth-child(n+5)):nth-last-child(2) ~ .OrderCard-nbImages {
+        display: none;
+      }
+    }
+  }
+  &-nbImages {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:before {
+      content: '+' counter(nbOrderImages);
+    }
+  }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -33,16 +33,24 @@ module.exports = {
         processing: 'var(--processing)',
         'processing-lightest': 'var(--processing-lightest)',
         'checkbox-focus': 'var(--checkbox-focus)'
+      },
+      screens: {
+        xs: '320px',
+        '3xl': '1920px',
+        max2xl: { max: '1680px' },
+        maxXl: { max: '1366px' },
+        maxLg: { max: '1024px' },
+        maxMd: { max: '768px' },
+        maxSm: { max: '390px' },
+        maxXs: { max: '321px' }
       }
     },
     screens: {
-      xs: '320px',
       sm: '390px',
       md: '768px',
       lg: '1024px',
       xl: '1366px',
-      '2xl': '1680px',
-      '3xl': '1920px',
+      '2xl': '1680px'
     },
     fontSize: {
       '2xs': 'var(--font-size-2xs)',
@@ -53,7 +61,7 @@ module.exports = {
       xl: 'var(--font-size-xl)',
       '2xl': 'var(--font-size-2xl)',
       '3xl': 'var(--font-size-3xl)',
-      '4xl': 'var(--font-size-4xl)',
+      '4xl': 'var(--font-size-4xl)'
     }
   },
   plugins: []