allaw-ui 2.2.5 → 2.2.7

package/dist/components/atoms/buttons/IconButton.js

@@ -2,18 +2,13 @@ import React from "react";
 import "./IconButton.css";
 import "../../../styles/global.css";
 var IconButton = function (_a) {
-    var style = _a.style, iconName = _a.iconName, color = _a.color, onClick = _a.onClick;
+    var _b = _a.style, style = _b === void 0 ? "smallFilled" : _b, _c = _a.iconName, iconName = _c === void 0 ? "allaw-icon-calendar" : _c, color = _a.color, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d;
     var customStyle = color
         ? {
             "--custom-background-color": color,
         }
         : {};
-    return (React.createElement("button", { className: "icon-button ".concat(style), onClick: onClick, style: customStyle },
+    return (React.createElement("button", { className: "icon-button ".concat(style), onClick: onClick, style: customStyle, "aria-label": iconName.replace("allaw-icon-", "").replace("-", " ") },
         React.createElement("i", { className: "icon ".concat(iconName), style: { color: color ? color : "inherit" } })));
 };
-IconButton.defaultProps = {
-    style: "smallFilled",
-    iconName: "allaw-icon-calendar",
-    onClick: function () { },
-};
 export default IconButton;

package/dist/components/atoms/buttons/TertiaryButton.d.ts

@@ -5,6 +5,7 @@ export interface TertiaryButtonProps {
     startIcon?: string;
     label: string;
     variant?: boolean;
+    href?: string;
     onClick?: () => void;
 }
 declare const TertiaryButton: React.FC<TertiaryButtonProps>;

package/dist/components/atoms/buttons/TertiaryButton.js

@@ -1,9 +1,13 @@
 import React from "react";
+import Link from "next/link";
 import "./TertiaryButton.css";
 import "../../../styles/global.css";
 var TertiaryButton = function (_a) {
-    var startIcon = _a.startIcon, label = _a.label, _b = _a.variant, variant = _b === void 0 ? false : _b, onClick = _a.onClick;
-    return (React.createElement("button", { type: "button", className: "tertiary-button ".concat(variant ? "tertiary-button-variant" : "tertiary-button-default"), onClick: onClick },
+    var startIcon = _a.startIcon, label = _a.label, _b = _a.variant, variant = _b === void 0 ? false : _b, href = _a.href, onClick = _a.onClick;
+    var buttonClass = "tertiary-button ".concat(variant ? "tertiary-button-variant" : "tertiary-button-default");
+    return href ? (React.createElement(Link, { href: href, className: buttonClass },
+        startIcon && React.createElement("span", { className: "tertiary-button-icon ".concat(startIcon) }),
+        React.createElement("span", { className: "tertiary-button-label" }, label))) : (React.createElement("button", { type: "button", className: buttonClass, onClick: onClick },
         startIcon && React.createElement("span", { className: "tertiary-button-icon ".concat(startIcon) }),
         React.createElement("span", { className: "tertiary-button-label" }, label)));
 };

package/dist/components/atoms/featureCard/featureCard.js

@@ -2,7 +2,6 @@ import React from "react";
 import styles from "./featureCard.module.css";
 import { TertiaryButton } from "../buttons";
 import Image from "next/image";
-import Link from "next/link";
 var FeatureCard = function (_a) {
     var title = _a.title, image = _a.image, content = _a.content, action = _a.action;
     return (React.createElement("article", { className: styles.featureCardContainer },
@@ -12,8 +11,6 @@ var FeatureCard = function (_a) {
                 React.createElement("h3", null, title)),
             React.createElement("div", { className: styles.featureCardDescription },
                 React.createElement("p", null, content))),
-        action && (React.createElement("div", { className: styles.actionButton },
-            React.createElement(Link, { href: action.href, passHref: true },
-                React.createElement(TertiaryButton, { label: action.label }))))));
+        action && React.createElement(TertiaryButton, { href: action.href, label: action.label })));
 };
 export default FeatureCard;

package/dist/components/molecules/banner/Banner.js

@@ -1,10 +1,19 @@
-import React from "react";
+"use client";
+import React, { useState, useEffect } from "react";
 import Image from "next/image";
 import styles from "./Banner.module.css";
 import Link from "next/link";
 var Banner = function (_a) {
     var tag = _a.tag, title = _a.title, content = _a.content, image = _a.image, action = _a.action, highlightColor = _a.highlightColor, backgroundColor = _a.backgroundColor;
-    var isMobile = typeof window !== "undefined" && window.innerWidth <= 995;
+    var _b = useState(false), isMobile = _b[0], setIsMobile = _b[1];
+    useEffect(function () {
+        var updateIsMobile = function () {
+            setIsMobile(window.innerWidth <= 995);
+        };
+        updateIsMobile(); // Vérifie à l'initialisation
+        window.addEventListener("resize", updateIsMobile); // Met à jour au resize
+        return function () { return window.removeEventListener("resize", updateIsMobile); };
+    }, []);
     return (React.createElement("section", { className: styles.bannerContainer, style: { backgroundColor: backgroundColor } },
         image && (React.createElement("figure", { className: "".concat(styles.imageContainer, " ").concat(isMobile ? styles[image.verticalSide] : styles[image.horizontalSide]) },
             React.createElement(Image, { src: image.src || "", alt: image.alt || "", fill: true, sizes: "(max-width: 995px) 100vw, 400px", className: styles.bannerImageContent }))),

package/dist/components/molecules/banner/Banner.module.css

@@ -8,6 +8,7 @@
   border-radius: 32px;
   width: 100%;
   height: auto;
+  min-height: 400px;
   max-width: 100%;
   background: #edf3f4;
 }
@@ -16,6 +17,7 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  justify-content: space-between;
   gap: 24px;
   width: 100%;
   height: auto;
@@ -29,14 +31,19 @@
   position: relative;
   width: 100%;
   height: auto;
+  max-height: 100%;
   display: flex;
   align-items: stretch;
   max-width: 400px;
+  object-position: center;
+  overflow: hidden;
 }
 
 .bannerImageContent {
   object-fit: cover;
-  object-position: center;
+  object-position: center center;
+  width: 100%;
+  height: 100%;
   border-radius: 24px;
 }
 
@@ -69,7 +76,7 @@
   white-space: normal;
   color: var(--Primary-Mid-black, #171e25);
   font-family: Poppins, sans-serif;
-  font-size: 30px;
+  font-size: 28px;
   font-weight: 600;
   max-width: 100%;
   line-height: 1.4;
@@ -106,8 +113,7 @@
 }
 
 .action:hover {
-  filter: brightness(95%);
-  transform: scale(1.005);
+  filter: brightness(90%);
 }
 
 .actionLabel {
@@ -137,7 +143,7 @@
     width: auto;
     gap: 40px;
     padding: 40px;
-    height: 750px;
+    height: auto;
   }
 
   .bannerDescription {
@@ -146,6 +152,7 @@
     -webkit-line-clamp: 6;
     line-clamp: 6;
     font-size: 14px;
+    font-weight: 500;
   }
 
   .bannerContent {
@@ -170,7 +177,7 @@
   }
 
   .bannerTitle {
-    font-size: 22px;
+    font-size: 24px;
   }
 
   .imageContainer.top {

package/dist/components/molecules/brands/Brands.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export type BrandsProps = {
+    images: {
+        src: string;
+        alt: string;
+    }[];
+};
+declare const Brands: React.FC<BrandsProps>;
+export default Brands;

package/dist/components/molecules/brands/Brands.js

@@ -0,0 +1,13 @@
+import React from "react";
+import styles from "./brands.module.css";
+import Image from "next/image";
+var Brands = function (_a) {
+    var images = _a.images;
+    var limitedImages = images.slice(0, 7);
+    return (React.createElement("section", { className: styles.brandsContainer, "aria-labelledby": "brands-title" },
+        React.createElement("div", { className: styles.brandsContent },
+            React.createElement("h2", { className: styles.brandsTitle, id: "brands-title" }, "Ils parlent de nous dans la presse"),
+            React.createElement("ul", { className: styles.brandsList }, limitedImages.map(function (image, index) { return (React.createElement("li", { key: index, className: styles.brandItem },
+                React.createElement(Image, { src: image.src, alt: image.alt, className: styles.brandImage, width: 100, height: 100 }))); })))));
+};
+export default Brands;

package/dist/components/molecules/brands/Brands.stories.d.ts

@@ -0,0 +1,8 @@
+declare namespace _default {
+    export let title: string;
+    export { Brands as component };
+}
+export default _default;
+export const Default: any;
+export const WithExtraImages: any;
+import Brands from "./Brands";

package/dist/components/molecules/brands/Brands.stories.js

@@ -0,0 +1,66 @@
+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 Brands, { BrandsProps } from "./Brands";
+export default {
+    title: "Components/Molecules/Brands",
+    component: Brands,
+};
+var Template = function (args) { return React.createElement(Brands, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    images: [
+        {
+            src: "https://images.unsplash.com/photo-1504711434969-e33886168f5c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bWVkaWF8ZW58MHx8MHx8fDA%3D",
+            alt: "Logo Brand 1",
+        },
+        {
+            src: "https://plus.unsplash.com/premium_photo-1689701711439-e54f039f8d97?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bWVkaWF8ZW58MHx8MHx8fDA%3D",
+            alt: "Logo Brand 2",
+        },
+        {
+            src: "https://images.unsplash.com/photo-1424223022789-26fd8f34bba2?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fG1lZGlhfGVufDB8fDB8fHww",
+            alt: "Logo Brand 3",
+        },
+        {
+            src: "https://images.unsplash.com/photo-1563986768494-4dee2763ff3f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fG1lZGlhfGVufDB8fDB8fHww",
+            alt: "Logo Brand 4",
+        },
+        {
+            src: "https://images.unsplash.com/photo-1611162617213-7d7a39e9b1d7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fG1lZGlhfGVufDB8fDB8fHww",
+            alt: "Logo Brand 5",
+        },
+        {
+            src: "https://images.unsplash.com/photo-1597075095308-0b47fc649175?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8ZGVzJTIwbSVDMyVBOWRpYXMlMjBzb2NpYXV4fGVufDB8fDB8fHww",
+            alt: "Logo Brand 6",
+        },
+        {
+            src: "https://images.unsplash.com/photo-1517292987719-0369a794ec0f?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+            alt: "Logo Brand 7",
+        },
+    ],
+};
+export var WithExtraImages = Template.bind({});
+WithExtraImages.args = {
+    images: [
+        { src: "/images/brand1.png", alt: "Logo Brand 1" },
+        { src: "/images/brand2.png", alt: "Logo Brand 2" },
+        { src: "/images/brand3.png", alt: "Logo Brand 3" },
+        { src: "/images/brand4.png", alt: "Logo Brand 4" },
+        { src: "/images/brand5.png", alt: "Logo Brand 5" },
+        { src: "/images/brand6.png", alt: "Logo Brand 6" },
+        { src: "/images/brand7.png", alt: "Logo Brand 7" },
+        { src: "/images/brand8.png", alt: "Logo Brand 8 (Ignorée)" }, // Ignorée
+        { src: "/images/brand9.png", alt: "Logo Brand 9 (Ignorée)" }, // Ignorée
+    ],
+};

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

@@ -0,0 +1,74 @@
+.brandsContainer {
+  display: flex;
+  width: 100%;
+  height: auto;
+  padding: 64px 40px;
+  justify-content: center;
+  align-items: center;
+  gap: 40px;
+}
+
+.brandsContent {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 48px;
+}
+
+.brandsTitle {
+  color: var(--Primary-Mid-black, #171e25);
+  text-align: center;
+  font-family: Poppins;
+  font-size: 30px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+.brandsList {
+  display: flex;
+  align-items: flex-start;
+  gap: 30px;
+  justify-content: center;
+}
+
+.brandItem {
+  width: 130px;
+  height: 87px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.brandImage {
+  max-width: 100%;
+  height: auto;
+  width: auto;
+  object-fit: contain;
+}
+
+@media (max-width: 1200px) {
+  .brandsList {
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+  }
+
+  .brandItem {
+    min-width: 120px;
+    width: 120px;
+  }
+}
+
+@media (max-width: 995px) {
+  .brandsTitle {
+    font-size: 26px;
+  }
+
+  .brandItem {
+    min-width: 110px;
+  }
+}

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

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

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

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

package/dist/components/molecules/featureGrid/FeatureGrid.js

@@ -19,8 +19,8 @@ var FeatureGrid = function (_a) {
             React.createElement("div", { className: styles.featureGridItem },
                 React.createElement(FeatureCard, { key: currentIndex, title: features[currentIndex].title, image: features[currentIndex].image, content: features[currentIndex].content, action: features[currentIndex].action })),
             React.createElement("div", { className: styles.navigationButtons },
-                React.createElement(IconButton, { style: "iconCircle", iconName: "allaw-icon-arrow-left", onClick: handlePrevious }),
-                React.createElement(IconButton, { style: "iconCircle", iconName: "allaw-icon-arrow-right", onClick: handleNext }))),
+                React.createElement(IconButton, { style: "iconCircle", iconName: "allaw-icon-arrow-left", onClick: handlePrevious, "aria-label": "Voir l'\u00E9l\u00E9ment pr\u00E9c\u00E9dent" }),
+                React.createElement(IconButton, { style: "iconCircle", iconName: "allaw-icon-arrow-right", onClick: handleNext, "aria-label": "Voir l'\u00E9l\u00E9ment suivant" }))),
         React.createElement("ul", { className: "".concat(styles.featureGridContainer, " ").concat(styles.gridView) }, features.map(function (feature, index) { return (React.createElement("li", { className: styles.featureGridItem, key: index },
             React.createElement(FeatureCard, { title: feature.title, image: feature.image, content: feature.content, action: feature.action }))); }))));
 };

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

@@ -14,7 +14,7 @@
   color: var(--Primary-Mid-black, #171e25);
   text-align: center;
   font-family: Poppins;
-  font-size: 46px;
+  font-size: 30px;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
@@ -98,7 +98,7 @@
 
   .featureGridTitle {
     margin-bottom: 24px;
-    font-size: 28px;
+    font-size: 26px;
   }
 
   .featureGridContainer {

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

@@ -0,0 +1,18 @@
+import React from "react";
+export type FlexContentProps = {
+    reverse?: boolean;
+    title?: string;
+    sectionTitle: string;
+    content: string;
+    action?: {
+        href: string;
+        label: string;
+    };
+    imageContent?: {
+        src: string;
+        alt: string;
+    };
+    imageWidthPercentage?: number;
+};
+declare const FlexContent: React.FC<FlexContentProps>;
+export default FlexContent;

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

@@ -0,0 +1,21 @@
+import React from "react";
+import styles from "./flexContent.module.css";
+import Image from "next/image";
+import Link from "next/link";
+var FlexContent = function (_a) {
+    var _b = _a.reverse, reverse = _b === void 0 ? false : _b, title = _a.title, sectionTitle = _a.sectionTitle, content = _a.content, action = _a.action, imageContent = _a.imageContent, _c = _a.imageWidthPercentage, imageWidthPercentage = _c === void 0 ? 60 : _c;
+    var safeImageWidth = Math.max(10, Math.min(imageWidthPercentage, 90));
+    var textWidth = 100 - safeImageWidth;
+    return (React.createElement("section", { className: styles.flexContentContainer, "aria-labelledby": sectionTitle },
+        title && (React.createElement("h2", { className: styles.flexContentTitle, id: "flex-content-title" }, title)),
+        React.createElement("article", { className: "".concat(styles.flexContentWrapper, " ").concat(reverse ? styles.reverse : "", " ").concat(!(imageContent === null || imageContent === void 0 ? void 0 : imageContent.src) ? styles.fullWidth : "") },
+            React.createElement("div", { className: "".concat(styles.flexContentLeftWrapper, " ").concat(styles.desktopWidth), style: { width: "".concat(textWidth, "%") } },
+                React.createElement("div", { className: styles.flexContentLeft },
+                    React.createElement("h3", { className: styles.flexContentSectionTitle }, sectionTitle),
+                    React.createElement("p", { className: styles.flexContentDescription }, content),
+                    action && (React.createElement(Link, { href: action.href, className: styles.flexContentButton },
+                        React.createElement("span", { className: styles.flexContentButtonLabel }, action.label))))),
+            (imageContent === null || imageContent === void 0 ? void 0 : imageContent.src) && (React.createElement("div", { className: styles.flexContentRight, style: { width: "".concat(safeImageWidth, "%") } },
+                React.createElement(Image, { src: imageContent.src, alt: imageContent.alt, className: styles.flexContentImage, width: 1240, height: 550 }))))));
+};
+export default FlexContent;

package/dist/components/molecules/flexContent/FlexContent.stories.d.ts

@@ -0,0 +1,9 @@
+declare namespace _default {
+    export let title: string;
+    export { FlexContent as component };
+}
+export default _default;
+export const Default: any;
+export const Reverse: any;
+export const NoImage: any;
+import FlexContent from "./FlexContent";

package/dist/components/molecules/flexContent/FlexContent.stories.js

@@ -0,0 +1,47 @@
+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 FlexContent, { FlexContentProps } from "./FlexContent";
+export default {
+    title: "Components/Molecules/FlexContent",
+    component: FlexContent,
+};
+var Template = function (args) { return React.createElement(FlexContent, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    reverse: false,
+    title: "Découvrez notre solution",
+    sectionTitle: "Une solution adaptée à vos besoins",
+    content: "Notre solution est conçue pour vous offrir des résultats concrets et durables. Avec des fonctionnalités adaptées à vos besoins, elle vous permet de gérer vos projets plus efficacement et d'atteindre vos objectifs. Découvrez comment nos outils innovants, combinés à une approche personnalisée, peuvent transformer votre vision en réalité et vous aider à vous démarquer dans votre domaine. Nous vous accompagnons pas à pas pour garantir des résultats à la hauteur de vos attentes.",
+    action: {
+        href: "/learn-more",
+        label: "En savoir plus",
+    },
+    imageContent: {
+        src: "https://images.unsplash.com/photo-1737405555489-78b3755eaa81?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        alt: "Image illustrant la solution",
+    },
+};
+export var Reverse = Template.bind({});
+Reverse.args = __assign(__assign({}, Default.args), { reverse: true, sectionTitle: "Une nouvelle perspective", content: "Avec notre approche innovante, nous renversons les codes pour vous offrir des opportunités uniques et avant-gardistes." });
+export var NoImage = Template.bind({});
+NoImage.args = {
+    reverse: false,
+    title: "Découvrez notre solution sans image",
+    sectionTitle: "Pas d'image, juste du contenu",
+    content: "Parfois, une image n'est pas nécessaire. Ce mode vous permet de mettre l'accent uniquement sur le texte et l'action.  Ce mode vous permet de mettre l'accent uniquement sur le texte et l'action  Ce mode vous permet de mettre l'accent uniquement sur le texte et l'action  Ce mode vous permet de mettre l'accent uniquement sur le texte et l'action  Ce mode vous permet de mettre l'accent uniquement sur le texte et l'action  Ce mode vous permet de mettre l'accent uniquement sur le texte et l'action  Ce mode vous permet de mettre l'accent uniquement sur le texte et l'action  Ce mode vous permet de mettre l'accent uniquement sur le texte et l'action ",
+    action: {
+        href: "/no-image",
+        label: "En savoir plus",
+    },
+};