Pae category

thelia · Jun 7, 2024 · a84e5b0 · a84e5b0
1 parent c981de9
commit a84e5b0
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 13 deletions.
diff --git a/components/Layout/ProductCategory/ProductCategory.stories.js b/components/Layout/ProductCategory/ProductCategory.stories.js
@@ -18,7 +18,8 @@ for (let i = 0; i < 5; i++) {
 export const base = {
   render: (args) => ProductCategory(args),
   args: {
-    categories: categories
+    categories: categories,
+    title: 'Nos catégories de produits'
   },
   argTypes: {}
 };
diff --git a/components/Layout/ProductCategory/ProductCategory.twig b/components/Layout/ProductCategory/ProductCategory.twig
@@ -1,6 +1,8 @@
-<h2 class='h2 text-black pb-6'>Nos catégories de produits</h2>
+<div class='xl:container xl:mx-auto'>
+  <h2 class='h2 text-black pb-6'>{{ title }}</h2>
+</div>
 
-<div class='flex flex-col gap-10'>
+<div class='flex flex-col gap-10  lg:grid lg:grid-cols-3 xl:container xl:mx-auto'>
   {% set additionalVariables = { displayWishButton: true, product:product} %}
   {% for category in categories %}
     {% set allVariables = category|merge(additionalVariables) %}

diff --git a/components/Organisms/CategoryCard/CategoryCard.twig b/components/Organisms/CategoryCard/CategoryCard.twig
@@ -1,11 +1,11 @@
 {% set productThumbnailUrl = base_url ~ "/images/placeholder2.webp" %}
 {% set productTumbnailTitle = "placeholder" %}
 {% set classes = classes|default('') %}
-<div class="ProductCard {{ classes }}">
+<div class="CategoryCard {{ classes }}">
 
-  <div class="ProductCard-mainContent">
-    <a class="ProductCard-imgLink" href="#">
-      <figure class="ProductCard-img">
+  <div class="CategoryCard-mainContent">
+    <a class="CategoryCard-imgLink" href="#">
+      <figure class="CategoryCard-img">
         {% if productThumbnailUrl %}
           <img src="{{ productThumbnailUrl }}" alt="{{ productTumbnailTitle }}"
                title="{{ productTumbnailTitle }}"  loading="lazy">
@@ -15,14 +15,12 @@
         {% endif %}
       </figure>
     </a>
-    <div class="ProductCard-desc">
-
-      <a href="#" class="ProductCard-title">{{ title }}</a>
-
-      <div class="ProductCard-footer">
-        {% include '../../Molecules/Button/Button.twig' with {text: button.label, href: '#',icon_right:'chevron-right'} %}
+    <div class="CategoryCard-desc">
 
+      <a href="#" class="CategoryCard-title">{{ title }}</a>
 
+      <div class="CategoryCard-footer">
+        {% include '../../Molecules/Button/Button.twig' with {text: button.label, href: button.href,icon_right:'chevron-right'} %}
 
       </div>
     </div>

diff --git a/components/Organisms/CategoryCard/categoryCard.css b/components/Organisms/CategoryCard/categoryCard.css
@@ -0,0 +1,114 @@
+.CategoryCard {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background: var(--white);
+  @apply rounded-lg;
+
+
+  &-header {
+    margin-bottom: 0.5rem;
+    position: absolute;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    padding: 10px;
+    z-index: 9;
+  }
+
+  @screen md {
+    &:nth-child(2n) {
+      .CategoryCard-mainContent {
+        flex-direction: row-reverse;
+      }
+    }
+  }
+  @screen lg {
+    &:nth-child(2n) {
+      .CategoryCard-mainContent {
+        flex-direction: row;
+      }
+    }
+  }
+
+  &-mainContent {
+    width: 100%;
+    @screen md {
+      display: flex;
+    }
+    @screen lg {
+      display: block;
+    }
+  }
+
+  &-img {
+    overflow: hidden;
+    height: 187px;
+    @screen sm {
+      height: 280px;
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center;
+      transition: all cubic-bezier(0, 0, 0, 0.7) 0.3s;
+    }
+  }
+
+  &-desc {
+    padding: 16px;
+    @screen sm {
+      padding: 24px;
+    }
+    @screen md {
+      flex-grow: 1;
+      justify-content: center;
+      flex-direction: column;
+      display: flex;
+    }
+  }
+
+
+  &-title {
+    @apply h5;
+    color: var(--black);
+    text-decoration: none;
+    transition: inherit;
+    display: block;
+  }
+
+  &:hover,
+  &:focus-visible{
+    .CategoryCard-img {
+      img {
+        transform: scale(1.075);
+      }
+    }
+  }
+
+  &:focus,
+  &:focus-visible {
+    outline: none;
+
+    .CategoryCard-img {
+      outline: 2px solid theme('colors.gray.400');
+    }
+  }
+
+
+
+  &-footer {
+    margin-top: rem-convert(13px);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+}