Cross Selling

assets/css/slider.css

@@ -0,0 +1,7 @@
+.slider {
+  cursor: grab;
+  user-select: none;
+  &:active {
+    cursor: grabbing;
+  }
+}

components/Layout/SimilarContent/similarContent.js → assets/js/slider.js

@@ -1,4 +1,4 @@
-export function similarContent() {
+export function slider() {
   const slider = document.querySelector('.slider');
   let isDown = false;
   let startX;

components/Layout/CrossSelling/CrossSelling.stories.js

@@ -0,0 +1,39 @@
+import CrossSelling from './CrossSelling.twig';
+import { slider } from '../../../assets/js/slider';
+
+export default {
+  title: 'Design System/Layout/CrossSelling'
+};
+
+const standardProduct = {
+  productTitle: 'Nom du produit',
+  secondaryTitle: 'Titre secondaire',
+  price: '1000,00€',
+  promoPrice: '900,00€',
+  rate: 4,
+  isNew: true,
+  displayWishButton: true,
+  reviewCount: 12
+};
+
+const products = [];
+
+for (let i = 0; i < 5; i++) {
+  products.push(standardProduct);
+}
+
+export const base = {
+  render: (args) => CrossSelling(args),
+  play: () => {
+    slider();
+  },
+  args: {
+    products,
+    title: 'Derniers produits consultés',
+    button: { href: '#', label: 'Tout voir' }
+  },
+  parameters: {
+    backgrounds: { default: 'grey' }
+  },
+  argTypes: {}
+};

components/Layout/CrossSelling/CrossSelling.twig

@@ -0,0 +1,13 @@
+<div class='xl:container xl:mx-auto'>
+  <div class='h2 text-black pb-6'>{{ title }}</div>
+</div>
+
+<div class='CrossSelling slider'>
+  {% for product in products %}
+    {% include '../../Organisms/ProductCard/ProductCard.twig' with product %}
+  {% endfor %}
+</div>
+
+<div class='xl:container xl:mx-auto mt-5'>
+  {% include '../../Molecules/Button/Button.twig' with {text: button.label, href: button.href,icon_right:'chevron-right', variant:'secondary'} %}
+</div>

components/Layout/CrossSelling/crossSelling.css

@@ -0,0 +1,35 @@
+.CrossSelling {
+  display: flex;
+  gap: rem-convert(16px);
+  overflow: hidden;
+
+  .ProductCard {
+    flex-shrink: 0;
+    width: rem-convert(187px);
+    @screen md {
+      width: rem-convert(288px);
+    }
+    @screen lg {
+      width: rem-convert(288px);
+    }
+  }
+
+
+  @screen lg {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: rem-convert(24px);
+    cursor: initial;
+    .ProductCard {
+      width: initial;
+      &:active {
+        cursor: initial;
+      }
+    }
+  }
+
+  @screen xl {
+    @apply container mx-auto;
+  }
+
+}

components/Layout/SimilarContent/SimilarContent.stories.js

@@ -1,5 +1,5 @@
 import SimilarContent from './SimilarContent.twig';
-import { similarContent } from './similarContent';
+import { slider } from '../../../assets/js/slider';
 
 export default {
   title: 'Design System/Layout/SimilarContent'
@@ -24,7 +24,7 @@ export const base = {
     button: { href: '#', label: 'Voir toutes les actualités' }
   },
   play: () => {
-    similarContent();
+    slider();
   },
   parameters: {
     backgrounds: { default: 'grey' }

components/Layout/SimilarContent/similarContent.css

@@ -5,10 +5,6 @@
   @screen md {
     flex-direction: row;
     overflow: hidden;
-    cursor: grab;
-    &:active {
-      cursor: grabbing;
-    }
     .SimilarContentCard {
       width: 340px;
       flex-shrink: 0;
@@ -20,10 +16,14 @@
     cursor: initial;
     .SimilarContentCard {
       width: initial;
+      &:active {
+        cursor: initial;
+      }
     }
   }
   @screen xl {
     @apply container mx-auto;
+    gap: rem-convert(32px);
     grid-template-columns: repeat(3, 1fr);
   }