allaw-ui 2.2.4 → 2.2.6

package/dist/components/molecules/heroSection/heroSection.module.css

@@ -1,136 +1,89 @@
-.heroSection {
-  display: flex;
+.banner {
   position: relative;
   width: 100%;
-  height: 675px;
-  overflow: hidden;
-}
-
-.leftSection {
-  flex: 5;
-  background: #fff;
-  height: 100%;
+  min-height: 60dvh;
+  height: auto;
   display: flex;
-  flex-direction: column;
-  align-items: flex-end;
+  align-items: stretch;
   justify-content: center;
-  width: 1400px;
-  padding-right: 40px;
-  background-color: none;
-  background-size: cover;
-  background-position: center;
+  background-position: right;
+  background-size: 50% 100%;
+  background-repeat: no-repeat;
 }
 
-.heroSection.reverse {
+.bannerReverse {
   flex-direction: row-reverse;
+  background-position: left;
 }
 
-.heroSection.reverse .heroSectionTopImage {
-  left: auto;
-  right: 0%;
-}
-
-.heroSection.reverse .leftSection {
-  align-items: flex-start;
-  padding-right: 0;
-  padding-left: 40px;
-}
-
-.rightSection {
-  flex: 5;
-  height: 100%;
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
+.overlayContainer {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 80px;
 }
 
-.heroSectionBgImage {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
+.contentWrapper {
+  max-width: 1400px;
+  display: flex;
+  overflow: hidden;
+  gap: 70px;
+  flex-direction: row;
+  align-items: center;
 }
 
-.heroSectionTopImage {
-  position: absolute;
-  top: 50%;
-  left: 0%;
-  width: 90%;
-  transform: translateY(-50%);
-  z-index: 2;
+.bannerReverse .contentWrapper {
+  flex-direction: row-reverse;
 }
 
-.heroSectionContent {
+.contentLeft {
+  width: 50%;
+  padding: 3rem;
   display: flex;
   flex-direction: column;
+  justify-content: center;
   align-items: flex-start;
-  gap: 22px;
-  height: 350px;
-  width: 80%;
+  gap: 48px;
 }
 
-.heroSectionTitle {
+.contentTitle {
   color: var(--Primary-Mid-black, #171e25);
   font-family: Poppins;
-  font-size: 30px;
+  font-size: 40px;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  line-clamp: 2;
-  -webkit-line-clamp: 2;
   max-width: 100%;
-  overflow: hidden;
 }
 
-.heroSectionImage {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center;
-  display: block;
-}
-
-.heroSectionParagraph {
+.contentText {
   color: var(--Primary-Dark-grey, #456073);
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 4;
-  line-clamp: 4;
-  overflow: hidden;
-  white-space: normal;
-  text-overflow: ellipsis;
   font-family: "Open Sans";
   font-size: 16px;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
+  max-width: 100%;
 }
 
-.action {
+.contentButton {
   display: flex;
   height: 48px;
   padding: 12px 40px;
   justify-content: center;
   align-items: center;
+  gap: 8px;
   border-radius: 56px;
   background: #2d6176;
-  max-width: 300px;
-  text-decoration: none;
-  width: 100%;
-  overflow: hidden;
+  display: block;
 }
 
-.action:hover {
-  filter: brightness(95%);
-  transform: scale(1.005);
+.contentButton:hover {
+  filter: brightness(90%);
 }
 
-.actionLabel {
+.contentButtonLabel {
   color: var(--Primary-Blanc, #fff);
   font-family: "Open Sans";
   font-size: 16px;
@@ -144,10 +97,6 @@
 }
 
 @media (max-width: 995px) {
-  .heroSection {
-    max-height: 420px;
-  }
-
   .leftSection {
     background-size: cover;
     background-position: center;
@@ -185,3 +134,84 @@
     background-repeat: initial;
   }
 }
+
+.backgroundImage {
+  object-fit: cover;
+  object-position: center;
+}
+
+.contentRight {
+  width: 50%;
+  position: relative;
+  max-height: 35dvh;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 16px;
+}
+
+.contentImage {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  border-radius: 16px;
+  object-position: center;
+  max-height: none;
+  max-width: none;
+}
+
+@media (max-width: 995px) {
+  .banner {
+    background-size: 100% 100%;
+    background-position: center;
+  }
+
+  .overlayContainer {
+    padding: 60px 32px;
+  }
+
+  .contentWrapper {
+    background-color: transparent;
+    box-shadow: none;
+    max-width: 100%;
+    height: auto;
+    flex-direction: column !important;
+  }
+
+  .contentLeft {
+    width: 100%;
+    padding: 0;
+  }
+
+  .contentRight {
+    display: none;
+  }
+
+  .contentTitle {
+    font-size: 34px;
+  }
+
+  .contentText {
+    font-size: 16px;
+  }
+
+  .contentButtonLabel {
+    font-size: 14px;
+  }
+
+  .text-black .contentTitle,
+  .text-black .contentText {
+    color: var(--noir, #171e25);
+  }
+
+  .text-white .contentTitle,
+  .text-white .contentText {
+    color: var(--pure-white, #ffffff);
+  }
+
+  .text-gray .contentTitle,
+  .text-gray .contentText {
+    color: var(--Primary-Dark-grey, #456073);
+  }
+}

package/dist/components/molecules/questionAnswer/QuestionAnswer.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export type QuestionAnswerProps = {
+    questions: {
+        question: string;
+        answer: string;
+    }[];
+};
+declare const QuestionAnswer: React.FC<QuestionAnswerProps>;
+export default QuestionAnswer;

package/dist/components/molecules/questionAnswer/QuestionAnswer.js

@@ -0,0 +1,38 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React, { useState } from "react";
+import styles from "./questionAnswer.module.css";
+import IconButton from "../../atoms/buttons/IconButton";
+var QuestionAnswer = function (_a) {
+    var questions = _a.questions;
+    var _b = useState([]), openIndices = _b[0], setOpenIndices = _b[1];
+    var toggleAnswer = function (index) {
+        if (openIndices.includes(index)) {
+            setOpenIndices(openIndices.filter(function (i) { return i !== index; }));
+        }
+        else {
+            setOpenIndices(__spreadArray(__spreadArray([], openIndices, true), [index], false));
+        }
+    };
+    return (React.createElement("section", { className: styles.questionAnswerContainer, "aria-labelledby": "faq-title" },
+        React.createElement("div", { className: styles.questionAnswerContent },
+            React.createElement("h2", { className: styles.questionAnswerTitle }, "Questions Fr\u00E9quemment Pos\u00E9es"),
+            React.createElement("ul", { className: styles.questionAnswerListContent }, questions.map(function (item, index) { return (React.createElement("li", { key: index, className: styles.questionAnswerItem, onClick: function () { return toggleAnswer(index); } },
+                React.createElement("div", { className: styles.questionContainer },
+                    React.createElement("h3", { className: styles.questionTitle }, item.question),
+                    React.createElement(IconButton, { color: "#050505", style: "iconOnly", iconName: openIndices.includes(index)
+                            ? "allaw-icon-chevron-up"
+                            : "allaw-icon-chevron-down", "aria-label": openIndices.includes(index)
+                            ? "Fermer la r\u00E9ponse \u00E0 : ".concat(item.question)
+                            : "Ouvrir la r\u00E9ponse \u00E0 : ".concat(item.question) })),
+                React.createElement("div", { id: "answer-".concat(index), className: "".concat(styles.answerContainer, " ").concat(openIndices.includes(index) ? styles.open : "") },
+                    React.createElement("p", { className: styles.answer }, item.answer)))); })))));
+};
+export default QuestionAnswer;

package/dist/components/molecules/questionAnswer/QuestionAnswer.stories.d.ts

@@ -0,0 +1,17 @@
+declare namespace _default {
+    export let title: string;
+    export { QuestionAnswer as component };
+    export namespace argTypes {
+        export namespace title_1 {
+            let control: string;
+        }
+        export { title_1 as title };
+        export namespace questions {
+            let control_1: string;
+            export { control_1 as control };
+        }
+    }
+}
+export default _default;
+export const Default: any;
+import QuestionAnswer from "./QuestionAnswer";

package/dist/components/molecules/questionAnswer/QuestionAnswer.stories.js

@@ -0,0 +1,48 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+import QuestionAnswer, { QuestionAnswerProps } from "./QuestionAnswer";
+export default {
+    title: "Components/Molecules/QuestionAnswer",
+    component: QuestionAnswer,
+    argTypes: {
+        title: { control: "text" },
+        questions: { control: "object" },
+    },
+};
+var Template = function (args) { return React.createElement(QuestionAnswer, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    questions: [
+        {
+            question: "Comment puis-je créer un compte ?",
+            answer: "Pour créer un compte, cliquez sur le bouton 'S'inscrire' en haut à droite de la page d'accueil. Remplissez le formulaire avec vos informations personnelles et validez. Vous recevrez ensuite un email de confirmation pour activer votre compte.",
+        },
+        {
+            question: "Quels sont les modes de paiement acceptés ?",
+            answer: "Nous acceptons les paiements par carte bancaire (Visa, Mastercard, American Express) ainsi que les paiements via PayPal. Les virements bancaires sont également possibles pour certains clients professionnels.",
+        },
+        {
+            question: "Comment garantir la sécurité de mes données personnelles ?",
+            answer: "Nous utilisons des protocoles de sécurité avancés, tels que le cryptage SSL, pour protéger vos données. De plus, vos informations sont stockées sur des serveurs sécurisés et ne sont jamais partagées avec des tiers sans votre consentement.",
+        },
+        {
+            question: "Puis-je annuler ou modifier ma commande après validation ?",
+            answer: "Oui, vous pouvez annuler ou modifier votre commande dans un délai de 24 heures après sa validation, à condition qu'elle n'ait pas encore été expédiée. Rendez-vous dans la section 'Mes commandes' de votre compte pour effectuer les modifications.",
+        },
+        {
+            question: "Que faire si je rencontre un problème technique ?",
+            answer: "Si vous rencontrez un problème technique, vous pouvez consulter notre centre d'aide pour trouver des solutions aux problèmes courants. Si le problème persiste, contactez notre support client via le formulaire en ligne ou par téléphone au numéro indiqué sur la page 'Contact'.",
+        },
+    ],
+};

package/dist/components/molecules/questionAnswer/index.d.ts

@@ -0,0 +1,2 @@
+export { default as QuestionAnswer } from "./QuestionAnswer";
+export type { QuestionAnswerProps } from "./QuestionAnswer";

package/dist/components/molecules/questionAnswer/index.js

@@ -0,0 +1 @@
+export { default as QuestionAnswer } from "./QuestionAnswer";

package/dist/components/molecules/questionAnswer/questionAnswer.module.css

@@ -0,0 +1,126 @@
+.questionAnswerContainer {
+  width: 100%;
+  height: auto;
+  display: flex;
+  padding: 64px 0;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.questionAnswerContent {
+  display: flex;
+  max-width: 730px;
+  width: 100%;
+  height: auto;
+  flex-direction: column;
+  align-items: center;
+  gap: 124px;
+}
+
+.questionAnswerTitle {
+  color: var(--Primary-Mid-black, #171e25);
+  text-align: center;
+  font-family: Poppins;
+  font-size: 30px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  width: 100%;
+}
+
+.questionAnswerListContent {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 32px;
+  height: auto;
+  width: 100%;
+}
+
+.questionAnswerItem {
+  display: flex;
+  gap: 32px;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  border-bottom: 2px solid var(--Primary-Venom-grey, #e6edf5);
+  width: 100%;
+}
+
+.questionContainer {
+  display: flex;
+  align-items: flex-start;
+  gap: 32px;
+  align-self: stretch;
+  justify-content: space-between;
+  cursor: pointer;
+}
+
+.questionTitle {
+  color: var(--Primary-Mid-black, #171e25);
+  font-family: Poppins;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+.answerContainer {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease, opacity 0.3s ease;
+  opacity: 0;
+}
+
+.answerContainer.open {
+  max-height: 600px;
+  opacity: 1;
+  padding-bottom: 16px;
+}
+
+.answer {
+  color: var(--Primary-Dark-grey, #456073);
+  font-family: "Open Sans";
+  font-size: 20px;
+  font-weight: 400;
+  line-height: normal;
+}
+
+@media (max-width: 995px) {
+  .questionAnswerContainer {
+    padding: 26px 80px;
+  }
+
+  .questionAnswerContent {
+    gap: 70px;
+  }
+
+  .questionAnswerTitle {
+    font-size: 26px;
+  }
+
+  .answer {
+    font-size: 18px;
+  }
+}
+
+@media (max-width: 450px) {
+  .questionAnswerContainer {
+    padding: 12px 40px;
+    gap: 20px;
+  }
+
+  .questionAnswerContent {
+    gap: 60px;
+  }
+
+  .questionTitle {
+    font-size: 18px;
+  }
+
+  .answer {
+    font-size: 16px;
+  }
+}

package/dist/index.d.ts

@@ -64,21 +64,29 @@ export { default as Breadcrumb } from "./components/molecules/breadcrumb/Breadcr
 export { default as ProCard } from "./components/molecules/proCard/ProCard";
 export { default as Pagination } from "./components/molecules/pagination/Pagination";
 export type { PaginationProps } from "./components/molecules/pagination/Pagination";
-export { default as BlogHeader } from "./components/molecules/blogHeader/BlogHeader";
-export type { BlogHeaderProps } from "./components/molecules/blogHeader/BlogHeader";
-export { default as BlogCard } from "./components/molecules/blogCard/BlogCard";
-export type { BlogCardProps } from "./components/molecules/blogCard/BlogCard";
-export { default as BlogText } from "./components/molecules/blogText/BlogText";
-export type { BlogTextProps } from "./components/molecules/blogText/BlogText";
-export { default as blogTextImageBlock } from "./components/molecules/blogTextImageBlock/BlogTextImageBlock";
-export type { BlogTextImageBlockProps } from "./components/molecules/blogTextImageBlock/BlogTextImageBlock";
-export { default as blogFooter } from "./components/molecules/blogFooter/BlogFooter";
-export type { BlogFooterProps } from "./components/molecules/blogFooter/BlogFooter";
 export { default as Banner } from "./components/molecules/banner/Banner";
 export type { BannerProps } from "./components/molecules/banner/Banner";
+export { default as FeatureCard } from "./components/atoms/featureCard/featureCard";
+export type { FeatureType } from "./components/atoms/featureCard/featureCard";
 export { default as FeatureGrid } from "./components/molecules/featureGrid/FeatureGrid";
 export type { FeatureGridProps } from "./components/molecules/featureGrid/FeatureGrid";
 export { default as HeroSection } from "./components/molecules/heroSection/HeroSection";
 export type { HeroSectionProps } from "./components/molecules/heroSection/HeroSection";
 export { default as FrameCTA } from "./components/molecules/frameCTA/FrameCTA";
 export type { FrameCTAProps } from "./components/molecules/frameCTA/FrameCTA";
+export { default as QuestionAnswer } from "./components/molecules/questionAnswer/QuestionAnswer";
+export type { QuestionAnswerProps } from "./components/molecules/questionAnswer/QuestionAnswer";
+export { default as FlexContent } from "./components/molecules/flexContent/FlexContent";
+export type { FlexContentProps } from "./components/molecules/flexContent/FlexContent";
+export { default as Brands } from "./components/molecules/brands/Brands";
+export type { BrandsProps } from "./components/molecules/brands/Brands";
+export { default as BlogHeader } from "./components/molecules/blogHeader/BlogHeader";
+export type { BlogHeaderProps } from "./components/molecules/blogHeader/BlogHeader";
+export { default as blogFooter } from "./components/molecules/blogFooter/BlogFooter";
+export type { BlogFooterProps } from "./components/molecules/blogFooter/BlogFooter";
+export { default as BlogCard } from "./components/molecules/blogCard/BlogCard";
+export type { BlogCardProps } from "./components/molecules/blogCard/BlogCard";
+export { default as BlogText } from "./components/molecules/blogText/BlogText";
+export type { BlogTextProps } from "./components/molecules/blogText/BlogText";
+export { default as blogTextImageBlock } from "./components/molecules/blogTextImageBlock/BlogTextImageBlock";
+export type { BlogTextImageBlockProps } from "./components/molecules/blogTextImageBlock/BlogTextImageBlock";

package/dist/index.js

@@ -80,13 +80,18 @@ export { default as Breadcrumb } from "./components/molecules/breadcrumb/Breadcr
 export { default as ProCard } from "./components/molecules/proCard/ProCard";
 // Pagination
 export { default as Pagination } from "./components/molecules/pagination/Pagination";
+// Storyblok component
+export { default as Banner } from "./components/molecules/banner/Banner";
+export { default as FeatureCard } from "./components/atoms/featureCard/featureCard";
+export { default as FeatureGrid } from "./components/molecules/featureGrid/FeatureGrid";
+export { default as HeroSection } from "./components/molecules/heroSection/HeroSection";
+export { default as FrameCTA } from "./components/molecules/frameCTA/FrameCTA";
+export { default as QuestionAnswer } from "./components/molecules/questionAnswer/QuestionAnswer";
+export { default as FlexContent } from "./components/molecules/flexContent/FlexContent";
+export { default as Brands } from "./components/molecules/brands/Brands";
 // Blog
 export { default as BlogHeader } from "./components/molecules/blogHeader/BlogHeader";
+export { default as blogFooter } from "./components/molecules/blogFooter/BlogFooter";
 export { default as BlogCard } from "./components/molecules/blogCard/BlogCard";
 export { default as BlogText } from "./components/molecules/blogText/BlogText";
 export { default as blogTextImageBlock } from "./components/molecules/blogTextImageBlock/BlogTextImageBlock";
-export { default as blogFooter } from "./components/molecules/blogFooter/BlogFooter";
-export { default as Banner } from "./components/molecules/banner/Banner";
-export { default as FeatureGrid } from "./components/molecules/featureGrid/FeatureGrid";
-export { default as HeroSection } from "./components/molecules/heroSection/HeroSection";
-export { default as FrameCTA } from "./components/molecules/frameCTA/FrameCTA";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "2.2.4",
+  "version": "2.2.6",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",