allaw-ui 2.2.5 → 2.2.6

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

@@ -0,0 +1,217 @@
+.flexContentContainer {
+  display: flex;
+  padding: 48px 32px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 90px;
+  width: 100%;
+  height: auto;
+  min-height: 675px;
+}
+
+.flexContentTitle {
+  color: var(--Primary-Mid-black, #171e25);
+  text-align: center;
+  font-family: Poppins;
+  font-size: 28px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+  width: 100%;
+  max-width: 100%;
+}
+
+.flexContentWrapper.fullWidth .contentLeftWrap {
+  width: 100%;
+}
+
+.flexContentWrapper.fullWidth .contentRight {
+  display: none;
+}
+
+.flexContentWrapper {
+  width: 100%;
+  height: auto;
+  display: flex;
+  overflow: hidden;
+  flex-direction: row;
+  align-items: center;
+  gap: 4rem;
+}
+
+.flexContentWrapper.reverse {
+  flex-direction: row-reverse;
+}
+
+.flexContentLeftWrapper {
+  width: auto;
+  display: flex;
+  align-items: center;
+  gap: 70px;
+  flex: 1 0 0;
+}
+
+.flexContentLeft {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 48px;
+}
+
+.flexContentSectionTitle {
+  color: var(--Primary-Mid-black, #171e25);
+  font-family: Poppins;
+  font-size: 28px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+.flexContentDescription {
+  overflow: hidden;
+  color: var(--Primary-Dark-grey, #456073);
+  text-overflow: ellipsis;
+  font-family: "Open Sans";
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 8;
+  line-clamp: 8;
+  align-self: stretch;
+  width: 100%;
+  max-width: 100%;
+}
+
+.flexContentButton {
+  display: flex;
+  height: 48px;
+  padding: 12px 40px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 56px;
+  background: #2d6176;
+}
+
+.flexContentButton:hover {
+  filter: brightness(90%);
+}
+
+.flexContentButtonLabel {
+  color: var(--Primary-Blanc, #fff);
+  font-family: "Open Sans";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  text-align: center;
+}
+
+.flexContentRight {
+  width: auto;
+}
+
+.flexContentImage {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 400px;
+  max-height: 500px;
+  border-radius: 16px;
+  object-fit: cover;
+  object-position: center;
+  overflow: hidden;
+}
+
+@media (max-width: 1200px) {
+  .flexContentButton {
+    align-self: stretch;
+    justify-content: center;
+  }
+}
+
+@media (max-width: 995px) {
+  .flexContentContainer {
+    padding: 40px 24px;
+    gap: 40px;
+    max-height: none;
+    min-height: 0;
+  }
+
+  .flexContentTitle {
+    display: none;
+  }
+
+  .flexContentSectionTitle {
+    font-size: 24px;
+  }
+
+  .flexContentDescription {
+    font-size: 16px;
+    font-weight: 500;
+  }
+
+  .flexContentWrapper {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 32px;
+    max-height: none;
+    width: 100%;
+  }
+
+  .flexContentWrapper.reverse {
+    flex-direction: column !important;
+  }
+
+  .flexContentRight {
+    width: 100% !important;
+    order: -1;
+  }
+
+  .flexContentLeftWrapper {
+    width: 100% !important;
+    order: 1;
+  }
+
+  .flexContentImage {
+    width: 100%;
+    max-height: 300px;
+    object-fit: fill;
+    object-position: center;
+  }
+}
+
+@media (min-width: 996px) {
+  .desktopWidth {
+    width: auto !important;
+  }
+}
+
+@media (max-width: 995px) and (min-width: 500px) {
+  .flexContentImage {
+    width: 100%;
+    height: 100%;
+    max-height: 500px;
+    object-fit: cover;
+    object-position: center;
+  }
+
+  .flexContentRight {
+    width: 100%;
+    height: auto;
+    min-height: 350px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

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

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

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

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

package/dist/components/molecules/frameCTA/FrameCTA.d.ts

@@ -13,6 +13,7 @@ export type FrameCTAProps = {
         src: string;
         alt: string;
     };
+    textColor?: "black" | "white" | "gray";
 };
 declare const FrameCTA: React.FC<FrameCTAProps>;
 export default FrameCTA;

package/dist/components/molecules/frameCTA/FrameCTA.js

@@ -3,10 +3,10 @@ import Link from "next/link";
 import styles from "./frameCTA.module.css";
 import Image from "next/image";
 var FrameCTA = function (_a) {
-    var title = _a.title, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, backgroundImage = _a.backgroundImage;
-    return (React.createElement("section", { className: styles.frameCTAContainer, "aria-labelledby": "cta-title" },
+    var title = _a.title, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, backgroundImage = _a.backgroundImage, textColor = _a.textColor;
+    return (React.createElement("section", { className: "".concat(styles.frameCTAContainer, " ").concat(styles["text-".concat(textColor)]), "aria-labelledby": "cta-title" },
         React.createElement("div", { className: styles.frameCTABackgroundImage, "aria-hidden": "true" },
-            React.createElement(Image, { src: backgroundImage.src, alt: backgroundImage.alt, layout: "fill", objectFit: "cover", objectPosition: "center", className: styles.frameCTABackground })),
+            React.createElement(Image, { src: backgroundImage.src, alt: backgroundImage.alt, fill: true, className: styles.frameCTABackground })),
         React.createElement("div", { className: styles.frameCTAContent },
             React.createElement("h2", { className: styles.frameCTATitle }, title),
             React.createElement("div", { className: styles.frameCTAButtonContainer },

package/dist/components/molecules/frameCTA/FrameCTA.stories.d.ts

@@ -4,4 +4,5 @@ declare namespace _default {
 }
 export default _default;
 export const Default: any;
+export const WhiteText: any;
 import FrameCTA from "./FrameCTA";

package/dist/components/molecules/frameCTA/FrameCTA.stories.js

@@ -19,6 +19,12 @@ export default {
 var Template = function (args) { return React.createElement(FrameCTA, __assign({}, args)); };
 export var Default = Template.bind({});
 Default.args = {
+    textColor: {
+        control: "select",
+        options: ["black", "white", "gray"],
+        description: "Couleur du texte pour le titre et le contenu",
+        defaultValue: "",
+    },
     title: "Poppins - SemiBold - 46px souvent sur 2 lignes",
     primaryButton: {
         label: "Bouton",
@@ -33,3 +39,20 @@ Default.args = {
         alt: "Image de fond arrière plan",
     },
 };
+export var WhiteText = Template.bind({});
+WhiteText.args = {
+    title: "Texte en blanc sur la même image",
+    primaryButton: {
+        label: "Bouton principal",
+        href: "/primary",
+    },
+    secondaryButton: {
+        label: "Bouton secondaire",
+        href: "/secondary",
+    },
+    backgroundImage: {
+        src: "https://images.unsplash.com/photo-1731862872903-1d39fe0c10f8?q=80&w=2108&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", // Même image que dans l'exemple par défaut
+        alt: "Image de fond arrière plan",
+    },
+    textColor: "white",
+};

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

@@ -1,6 +1,7 @@
 .frameCTAContainer {
   width: 100%;
-  height: 675px;
+  min-height: 675px;
+  height: auto;
   position: relative;
   border-radius: 16px;
   display: flex;
@@ -38,7 +39,7 @@
   color: var(--Primary-Mid-black, #171e25);
   text-align: center;
   font-family: Poppins;
-  font-size: 46px;
+  font-size: 34px;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
@@ -83,6 +84,7 @@
 
 .frameCTAButtonLabel {
   color: var(--Primary-Blanc, #fff);
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
   font-family: "Open Sans";
   font-size: 16px;
   font-style: normal;
@@ -95,15 +97,32 @@
   text-overflow: ellipsis;
 }
 
-.primaryButton:hover,
-.secondaryButton:hover {
-  filter: brightness(95%);
-  transform: scale(1.005);
+.frameCTAPrimaryButton:hover,
+.frameCTASecondaryButton:hover {
+  filter: brightness(90%);
+}
+
+.text-black .frameCTATitle {
+  color: var(--noir, #171e25);
+}
+
+.text-white .frameCTATitle {
+  color: var(--pure-white, #ffffff);
+}
+
+.text-gray .frameCTATitle {
+  color: var(--Primary-Dark-grey, #456073);
 }
 
 @media (max-width: 995px) {
   .frameCTAContainer {
-    height: 420px;
+    height: auto;
+    min-height: 450px;
+    border-radius: 0;
+  }
+
+  .frameCTABackground {
+    border-radius: 0;
   }
 
   .frameCTAContent {
@@ -114,7 +133,7 @@
   }
 
   .frameCTATitle {
-    font-size: 24px;
+    font-size: 30px;
     margin-bottom: 10px;
     text-align: center;
   }

package/dist/components/molecules/heroSection/HeroSection.d.ts

@@ -15,6 +15,7 @@ export type HeroSectionProps = {
         href: string;
         label: string;
     };
+    textColor?: "black" | "white" | "gray";
 };
 declare const HeroSection: React.FC<HeroSectionProps>;
 export default HeroSection;

package/dist/components/molecules/heroSection/HeroSection.js

@@ -3,20 +3,18 @@ import styles from "./heroSection.module.css";
 import Image from "next/image";
 import Link from "next/link";
 var HeroSection = function (_a) {
-    var _b = _a.reverse, reverse = _b === void 0 ? false : _b, title = _a.title, content = _a.content, imageBackground = _a.imageBackground, imageTop = _a.imageTop, action = _a.action;
-    return (React.createElement("section", { className: "".concat(styles.heroSection, " ").concat(reverse ? styles.reverse : "") },
-        React.createElement("div", { className: styles.leftSection, style: {
-                backgroundImage: "url(".concat(imageBackground.src || "", ")"),
-            } },
-            React.createElement("div", { className: styles.heroSectionContent },
-                React.createElement("h2", { className: styles.heroSectionTitle }, title),
-                React.createElement("p", { className: styles.heroSectionParagraph }, content),
-                React.createElement(Link, { href: action.href, className: styles.action },
-                    React.createElement("span", { className: styles.actionLabel }, action.label)))),
-        React.createElement("aside", { className: styles.rightSection },
-            React.createElement("div", { className: styles.heroSectionBgImage },
-                React.createElement(Image, { src: imageBackground.src || "", alt: imageBackground.alt || "", className: styles.heroSectionImage, layout: "fill", objectFit: "cover", objectPosition: "center" })),
-            React.createElement("div", { className: styles.heroSectionTopImage },
-                React.createElement(Image, { src: imageTop.src || "", alt: imageTop.alt || "", className: styles.heroSectionImage, width: 615, height: 322 })))));
+    var _b = _a.reverse, reverse = _b === void 0 ? false : _b, title = _a.title, content = _a.content, imageBackground = _a.imageBackground, imageTop = _a.imageTop, action = _a.action, textColor = _a.textColor;
+    return (React.createElement("header", { className: "".concat(styles.banner, " ").concat(reverse ? styles.bannerReverse : ""), style: {
+            backgroundImage: "url(".concat(imageBackground.src, ")"),
+        }, "aria-labelledby": "hero-title" },
+        React.createElement("div", { className: styles.overlayContainer },
+            React.createElement("div", { className: styles.contentWrapper },
+                React.createElement("div", { className: "".concat(styles.contentLeft, " ").concat(textColor ? styles["text-".concat(textColor)] : "") },
+                    React.createElement("h1", { id: "hero-title", className: styles.contentTitle }, title),
+                    React.createElement("p", { className: styles.contentText }, content),
+                    React.createElement(Link, { href: action.href, className: styles.contentButton },
+                        React.createElement("span", { className: styles.contentButtonLabel }, action.label))),
+                React.createElement("div", { className: styles.contentRight },
+                    React.createElement(Image, { src: imageTop.src, alt: imageTop.alt, className: styles.contentImage, width: 600, height: 400, priority: true }))))));
 };
 export default HeroSection;

package/dist/components/molecules/heroSection/HeroSection.stories.d.ts

@@ -41,4 +41,6 @@ declare namespace _default {
 }
 export default _default;
 export const Default: any;
+export const WithLongDescription: any;
+export const WhiteTextColor: any;
 import HeroSection from "./HeroSection";

package/dist/components/molecules/heroSection/HeroSection.stories.js

@@ -49,7 +49,7 @@ Default.args = {
     title: "Transformez votre carrière en un clic",
     content: "Accédez à des opportunités adaptées à vos aspirations, connectez-vous avec des clients du monde entier et simplifiez vos projets grâce à nos outils performants.",
     imageBackground: {
-        src: "https://images.unsplash.com/photo-1736695796493-699707480bcf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwxNDB8fHxlbnwwfHx8fHw%3D",
+        src: "https://plus.unsplash.com/premium_photo-1672940671025-113a634f83d1?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
         alt: "Personne travaillant sur un ordinateur portable",
     },
     imageTop: {
@@ -61,3 +61,40 @@ Default.args = {
         label: "Rejoignez-nous",
     },
 };
+export var WithLongDescription = Template.bind({});
+WithLongDescription.args = {
+    reverse: true,
+    title: "Un avenir meilleur vous attend",
+    content: "Découvrez une plateforme révolutionnaire qui connecte des talents avec des opportunités uniques. Nous croyons en la puissance de la collaboration et en la capacité des individus à atteindre leurs objectifs, quels qu'ils soient. Grâce à notre réseau mondial, vous pouvez collaborer avec des experts de diverses industries, apprendre de nouvelles compétences et faire partie d'une communauté qui valorise l'innovation. Que vous soyez à la recherche d'un emploi, d'un client, ou d'une nouvelle aventure, nous avons les outils pour vous aider à réussir. Inscrivez-vous aujourd'hui pour découvrir un monde de possibilités sans fin.",
+    imageBackground: {
+        src: "https://images.unsplash.com/photo-1737381439846-b927265e7dfc?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        alt: "Personne au sommet d'une montagne au coucher du soleil",
+    },
+    imageTop: {
+        src: "https://images.unsplash.com/photo-1737498352618-4fac98caa557?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        alt: "Personne analysant des graphiques financiers sur un écran",
+    },
+    action: {
+        href: "/explore",
+        label: "Découvrez maintenant",
+    },
+};
+export var WhiteTextColor = Template.bind({});
+WhiteTextColor.args = {
+    reverse: false,
+    title: "Avec un texte blanc en format mobile",
+    content: "Ce texte utilise la couleur blanche pour être lisible sur des fonds sombres ou colorés.",
+    imageBackground: {
+        src: "https://images.unsplash.com/photo-1737381439846-b927265e7dfc?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        alt: "Personne créative travaillant dans un espace sombre",
+    },
+    imageTop: {
+        src: "https://images.unsplash.com/photo-1737498352618-4fac98caa557?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        alt: "Éléments graphiques et lumineux",
+    },
+    action: {
+        href: "/white-text",
+        label: "En savoir plus",
+    },
+    textColor: "white",
+};