Merge pull request #39 from thelia/reworks/new-stories

Reworks/new stories
thelia · Jul 16, 2024 · b5075c4 · b5075c4
2 parents b80cc5d + 5b4a3ca
commit b5075c4
Show file tree

Hide file tree

Showing 37 changed files with 558 additions and 462 deletions.
diff --git a/assets/icons/chevron-right.svg b/assets/icons/chevron-right.svg
diff --git a/assets/icons/lock.svg b/assets/icons/lock.svg
diff --git a/components/Atoms/Form/Checkbox.twig b/components/Atoms/Form/Checkbox.twig
@@ -7,14 +7,9 @@
 {% set label = label|default('') %}
 
 <label class="Checkbox {{ classes }} {{ error ? 'error'  : ''}}">
-  <input type="checkbox"
-         name='{{ name }}'
-         value='{{ value }}'
-         {% if disabled %}disabled{% endif %}
-         {% if checked %}checked{% endif %}
-  >
-  <div class="checkmark">
-    <span>{{ svg("checkbox") }}</span>
-  </div>
-  <span>{{ label }}</span>
+	<input type="checkbox" name='{{ name }}' value='{{ value }}' {% if disabled %} disabled {% endif %} {% if checked %} checked {% endif %}>
+	<div class="checkmark">
+		<span>{{ svg("checkbox") }}</span>
+	</div>
+	<span class="paragraph-5">{{ label }}</span>
 </label>
diff --git a/components/Atoms/Form/checkbox.css b/components/Atoms/Form/checkbox.css
@@ -1,4 +1,5 @@
-.Checkbox, .Radio {
+.Checkbox,
+.Radio {
   display: flex;
   align-items: center;
   position: relative;
@@ -18,7 +19,7 @@
     height: 0;
     width: 0;
 
-    &:focus-visible{
+    &:focus-visible {
       & ~ .checkmark {
         outline: var(--checkbox-focus) solid 1px;
         outline-offset: 1px;
@@ -32,11 +33,12 @@
     border: 1px solid var(--current-checkbox-color);
     border-radius: 2px;
     position: relative;
+    flex-shrink: 0;
     span {
       display: none;
     }
   }
-  input:disabled  ~ .checkmark {
+  input:disabled ~ .checkmark {
     border: 1px solid var(--current-checkbox-disabled);
   }
 
@@ -58,7 +60,7 @@
     &:indeterminate {
       ~ .checkmark {
         &:after {
-          content: "";
+          content: '';
           position: absolute;
           width: 8px;
           height: 2px;
@@ -103,13 +105,13 @@
   input {
     &:checked {
       & ~ .checkmark:after {
-        content: "";
+        content: '';
         position: absolute;
         border-radius: 555rem;
-        top:2px;
-        bottom:2px;
-        left:2px;
-        right:2px;
+        top: 2px;
+        bottom: 2px;
+        left: 2px;
+        right: 2px;
         background-color: var(--current-checkbox-color);
       }
     }

diff --git a/components/Layout/CrossSelling/CrossSelling.twig b/components/Layout/CrossSelling/CrossSelling.twig
@@ -2,16 +2,14 @@
 {% set products = products|default([]) %}
 {% set button = button|default({label:"", href:""}) %}
 
-<div class='xl:container xl:mx-auto'>
+<div class="pt-[56px] pb-[68px] pl-[24px] md:pl-[48px] xl:pt-[68px] xl:pb-[104px] lg:px-0 lg:container lg:mx-auto">
 	<div class='pb-6 text-black h2'>{{ title }}</div>
-</div>
-
-<div class='CrossSelling slider'>
-	{% for product in products %}
-		{% include '../../Organisms/ProductCard/ProductCard.twig' with product %}
-	{% endfor %}
-</div>
-
-<div class='mt-5 xl:container xl:mx-auto'>
-	{% include '../../Molecules/Button/Button.twig' with {text: button.label, href: button.href,icon_right:'chevron-right', variant:'secondary'} %}
+	<div class='CrossSelling slider'>
+		{% for product in products %}
+			{% include '../../Organisms/ProductCard/ProductCard.twig' with product %}
+		{% endfor %}
+	</div>
+	<div class='mt-5'>
+		{% include '../../Molecules/Button/Button.twig' with {text: button.label, href: button.href,icon_right:'chevron-right', variant:'secondary'} %}
+	</div>
 </div>
diff --git a/components/Layout/CrossSelling/crossSelling.css b/components/Layout/CrossSelling/crossSelling.css
@@ -4,17 +4,14 @@
   overflow: hidden;
 
   .ProductCard {
-    flex-shrink: 0;
+    flex: 0 0 auto;
     width: rem-convert(187px);
     @screen md {
-      width: rem-convert(288px);
-    }
-    @screen lg {
+      flex-grow: 1;
       width: rem-convert(288px);
     }
   }
 
-
   @screen lg {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
@@ -31,5 +28,4 @@
   @screen xl {
     @apply container mx-auto;
   }
-
 }
diff --git a/components/Layout/PromotionalBanner/PromotionalBanner.twig b/components/Layout/PromotionalBanner/PromotionalBanner.twig
@@ -4,21 +4,21 @@
 {% set link = type|default('') %}
 
 <div class='PromotionalBanner'>
-  <div class='PromotionalBanner-header'>
-    <button type='button' class='PromotionalBanner-close' data-promotional-banner-close>{{ svg("close") }}</button>
-  </div>
-  <div class='PromotionalBanner-content'>
-    <div class='PromotionalBanner-message'>{{ text }}</div>
-    {% if type == "button" %}
-      <div class='PromotionalBanner-button'>
-        <a href='{{ link }}' class='Button'>{{ linkLabel }}</a>
-      </div>
-    {% endif %}
-    {% if type == "link" %}
-      <div class='PromotionalBanner-button'>
-        <a href='{{ link }}' class='underline'>{{ linkLabel }}</a>
-      </div>
-    {% endif %}
-  </div>
+	<div class='PromotionalBanner-header'>
+		<button type='button' class='PromotionalBanner-close' data-promotional-banner-close>{{ source("/icons/close.svg") }}</button>
+	</div>
+	<div class='PromotionalBanner-content{% if type == "button" %} PromotionalBanner-content--button{% endif %}'>
+		<div class='PromotionalBanner-message'>{{ text }}</div>
+		{% if type == "button" %}
+			<div class='PromotionalBanner-button'>
+				<a href='{{ link }}' class='Button'>{{ linkLabel }}</a>
+			</div>
+		{% endif %}
+		{% if type == "link" %}
+			<div class='PromotionalBanner-button'>
+				<a href='{{ link }}' class='underline'>{{ linkLabel }}</a>
+			</div>
+		{% endif %}
+	</div>
 
 </div>
diff --git a/components/Layout/PromotionalBanner/promotionalBanner.css b/components/Layout/PromotionalBanner/promotionalBanner.css
@@ -27,10 +27,15 @@
     align-items: flex-start;
 
     @screen md {
-      flex-direction: row;
-      gap: rem-convert(48px);
       max-width: rem-convert(1110px);
-      align-items: center;
+    }
+
+    &--button {
+      @screen md {
+        flex-direction: row;
+        gap: rem-convert(48px);
+        align-items: center;
+      }
     }
   }
   &-button {

diff --git a/components/Layout/Reinsurance/reinsurance.css b/components/Layout/Reinsurance/reinsurance.css
@@ -1,40 +1,69 @@
 .ReinsuranceModule {
   background: var(--white);
+  --spacer: 24px;
+
+  @screen md {
+    --spacer: 10px;
+  }
+
+  @screen lg {
+    --spacer: 54px;
+  }
+
   &-wrapper {
     max-width: rem-convert(1082px);
-    margin-right: auto;
-    margin-left: auto;
-    padding: rem-convert(25px)  rem-convert(40px);
+    margin: 0 auto;
+    padding: rem-convert(40px) rem-convert(24px);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
     color: var(--grey);
+
     @screen md {
-      display: flex;
+      flex-direction: row;
     }
     strong {
       @apply paragraph-4;
       font-weight: 700;
       display: block;
       color: var(--black);
     }
+
     > div {
       display: flex;
-      gap:  rem-convert(12px);
-      border-bottom: 0.5px solid var(--grey-lighter);
-      padding-bottom: rem-convert(24px);
-      padding-top: rem-convert(24px);
+      gap: rem-convert(12px);
+
       @screen md {
-        flex: 1 1 0;
-        border-bottom: 0;
-        padding: 0 rem-convert(10px);
-        border-right: 0.5px solid var(--grey-lighter);
+        max-width: calc(100% / 3);
       }
     }
+
     > div:first-child {
-      padding-top: 0;
+      padding: 0 0 var(--spacer);
+
+      @screen md {
+        padding: 0 var(--spacer) 0 0;
+      }
     }
+
+    > div:nth-child(2) {
+      border: solid var(--grey-lighter);
+      border-width: 1px 0;
+
+      padding: var(--spacer) 0;
+
+      @screen md {
+        border-width: 0 1px;
+        padding: 0 var(--spacer);
+      }
+    }
+
     > div:last-child {
-      padding-bottom: 0;
-      border-right:0;
-      border-bottom: none;
+      padding: var(--spacer) 0 0;
+
+      @screen md {
+        padding: 0 0 0 var(--spacer);
+      }
     }
   }
   &-text {

diff --git a/components/Layout/Review/Review.stories.js b/components/Layout/Review/Review.stories.js
@@ -16,7 +16,7 @@ const standardReview = {
 
 const reviews = [];
 
-for (let i = 0; i < 4; i++) {
+for (let i = 0; i < 3; i++) {
   reviews.push(standardReview);
 }
 
@@ -31,6 +31,6 @@ export const base = {
     slider();
   },
   parameters: {
-    backgrounds: { default: 'grey' }
+    backgrounds: { default: 'theme-lighter' }
   }
 };
diff --git a/components/Layout/Review/Review.twig b/components/Layout/Review/Review.twig
@@ -2,16 +2,12 @@
 {% set reviews = reviews|default([]) %}
 {% set button = button|default({label:"", href:""}) %}
 
-<div class='xl:container xl:mx-auto'>
-  <div class='h4 text-black pb-6'>{{ title }}</div>
-</div>
-
-<div class='Reviews slider'>
-  {% for review in reviews %}
-    {% include '../../Organisms/Card/Review/Review.twig' with review %}
-  {% 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 class="px-6 py-20 mx-auto md:px-12 md:pr-0 lg:px-0 lg:container">
+	<div class='pb-6 text-black h2'>{{ title }}</div>
+	<div class='Reviews slider'>
+		{% for review in reviews %}
+			{% include '../../Organisms/Card/Review/Review.twig' with review %}
+		{% endfor %}
+	</div>
+	{% include '../../Molecules/Button/Button.twig' with {text: button.label, href: button.href,icon_right:'chevron-right', variant:'secondary', classes: "mt-5"} %}
 </div>
diff --git a/components/Layout/Review/review.css b/components/Layout/Review/review.css
@@ -1,29 +1,36 @@
 .Reviews {
   display: flex;
   flex-direction: column;
-  gap: rem-convert(16px);
+  gap: 0.5rem;
+
   @screen md {
     flex-direction: row;
     overflow: hidden;
+    gap: 1.5rem;
+
     .Review {
       width: 271px;
       flex-shrink: 0;
+
+      &:last-child {
+        margin-right: 3rem;
+      }
     }
   }
+
   @screen lg {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
     cursor: initial;
+
     .Review {
-      width: initial;
+      width: auto;
+      flex-shrink: 1;
       &:active {
         cursor: initial;
       }
+
+      &:last-child {
+        margin-right: 0;
+      }
     }
   }
-  @screen xl {
-    @apply container mx-auto;
-    gap: rem-convert(32px);
-    grid-template-columns: repeat(3, 1fr);
-  }
 }
diff --git a/components/Layout/SimilarContent/SimilarContent.stories.js b/components/Layout/SimilarContent/SimilarContent.stories.js
@@ -27,6 +27,6 @@ export const base = {
     slider();
   },
   parameters: {
-    backgrounds: { default: 'grey' }
+    backgrounds: { default: 'theme-lighter' }
   }
 };