allaw-ui 3.4.3 → 3.4.4

package/dist/components/molecules/blogTextImageBlock/BlogTextImageBlock.stories.d.ts

@@ -0,0 +1,37 @@
+declare namespace _default {
+    export let title: string;
+    export { BlogTextImageBlock as component };
+    export let tags: string[];
+    export namespace argTypes {
+        export namespace title_1 {
+            let control: string;
+            let description: string;
+        }
+        export { title_1 as title };
+        export namespace article {
+            let control_1: string;
+            export { control_1 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
+        export namespace imageUrl {
+            let control_2: string;
+            export { control_2 as control };
+            let description_2: string;
+            export { description_2 as description };
+        }
+    }
+    export namespace parameters {
+        namespace docs {
+            export namespace description_3 {
+                let component: string;
+            }
+            export { description_3 as description };
+        }
+    }
+}
+export default _default;
+export const DefaultView: any;
+export const LongArticleWithImage: any;
+export const ArticleWithoutImage: any;
+import BlogTextImageBlock from "./BlogTextImageBlock";

package/dist/components/molecules/blogTextImageBlock/BlogTextImageBlock.stories.js

@@ -0,0 +1,58 @@
+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 BlogTextImageBlock from "./BlogTextImageBlock";
+export default {
+    title: "Components/molecules/Blog/BlogTextImageBlock",
+    component: BlogTextImageBlock,
+    tags: ["autodocs"],
+    argTypes: {
+        title: {
+            control: "text",
+            description: "Le titre principal de l'article du bloc.",
+        },
+        article: {
+            control: "text",
+            description: "Le contenu textuel de l'article ou de la description.",
+        },
+        imageUrl: {
+            control: "text",
+            description: "L'URL de l'image à afficher dans le bloc.",
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: "Le composant `BlogTextImageBlock` affiche un bloc structuré avec un titre, un paragraphe et une image associée. Il est idéal pour présenter des articles ou sections de blogs.",
+            },
+        },
+    },
+};
+var Template = function (args) { return React.createElement(BlogTextImageBlock, __assign({}, args)); };
+export var DefaultView = Template.bind({});
+DefaultView.args = {
+    title: "Titre d'exemple",
+    article: "Ceci est un exemple d'article court. Ce composant est conçu pour afficher un contenu structuré avec un titre, un paragraphe et une image.",
+    imageUrl: "https://images.unsplash.com/photo-1733324770222-a6c4a921b379?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+};
+export var LongArticleWithImage = Template.bind({});
+LongArticleWithImage.args = {
+    title: "Pourquoi une architecture modulaire est essentielle",
+    article: "L'architecture modulaire est une pratique clé pour la réussite des projets modernes.\n\nElle offre une meilleure maintenabilité en permettant aux développeurs de se concentrer sur des modules indépendants. De plus, elle améliore la collaboration grâce au déploiement incrémental et à une réduction des conflits.\n\nEnfin, elle garantit une meilleure scalabilité en isolant les fonctionnalités, ce qui simplifie les mises à jour et réduit les risques d'introduire des bugs dans l'ensemble de l'application.",
+    imageUrl: "https://images.unsplash.com/photo-1731955196267-e863d6f39794?q=80&w=1693&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+};
+export var ArticleWithoutImage = Template.bind({});
+ArticleWithoutImage.args = {
+    title: "Titre sans image",
+    article: "Ce test illustre l'affichage d'un article sans image associée. Le composant doit s'adapter en conséquence, en affichant uniquement le titre et le contenu textuel.",
+    imageUrl: "",
+};

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

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

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

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

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/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/breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import "./Breadcrumb.css";
+export interface BreadcrumbItem {
+    key: number;
+    label: string;
+    link: string;
+}
+export interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+}
+declare const Breadcrumb: React.FC<BreadcrumbProps>;
+export default Breadcrumb;

package/dist/components/molecules/breadcrumb/Breadcrumb.js

@@ -0,0 +1,12 @@
+import React from "react";
+import "./Breadcrumb.css";
+import TinyInfo from "../../atoms/typography/TinyInfo";
+var Breadcrumb = function (_a) {
+    var items = _a.items;
+    return (React.createElement("nav", { className: "breadcrumb" }, items.map(function (item, index) { return (React.createElement(React.Fragment, { key: item.key },
+        index > 0 && (React.createElement("span", { className: "breadcrumb-separator" },
+            React.createElement("i", { className: "allaw-icon-chevron-right" }))),
+        React.createElement("a", { href: item.link, className: "breadcrumb-link" },
+            React.createElement(TinyInfo, { variant: "medium14", color: index === items.length - 1 ? "dark-grey" : "mid-grey", text: item.label, align: "left" })))); })));
+};
+export default Breadcrumb;

package/dist/components/molecules/breadcrumb/Breadcrumb.stories.d.ts

@@ -0,0 +1,24 @@
+declare namespace _default {
+    export let title: string;
+    export { Breadcrumb as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace items {
+            let control: string;
+        }
+    }
+    export namespace parameters {
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
+        }
+    }
+}
+export default _default;
+export const Default: any;
+export const LongBreadcrumb: any;
+import Breadcrumb from "./Breadcrumb";

package/dist/components/molecules/breadcrumb/Breadcrumb.stories.js

@@ -0,0 +1,54 @@
+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 Breadcrumb from "./Breadcrumb";
+import "../../../styles/global.css";
+export default {
+    title: "Components/Molecules/Breadcrumb",
+    component: Breadcrumb,
+    tags: ["autodocs"],
+    argTypes: {
+        items: {
+            control: "object",
+        },
+    },
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "figma", value: "#404040" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+    },
+};
+var Template = function (args) { return React.createElement(Breadcrumb, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    items: [
+        { key: 1, label: "Home", link: "/" },
+        { key: 2, label: "Components", link: "/components" },
+        { key: 3, label: "Breadcrumb dzedbuzed bdze duze dze", link: "/components/breadcrumb" },
+    ],
+};
+export var LongBreadcrumb = Template.bind({});
+LongBreadcrumb.args = {
+    items: [
+        { key: 1, label: "Home", link: "/" },
+        { key: 2, label: "Category", link: "/category" },
+        { key: 3, label: "Subcategory", link: "/category/subcategory" },
+        { key: 4, label: "Product", link: "/category/subcategory/product" },
+        { key: 5, label: "Details", link: "/category/subcategory/product/details" },
+    ],
+};

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

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

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

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

package/dist/components/molecules/caseCard/CaseCard.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import "./CaseCard.css";
+import { BarColor } from "../../atoms/progressBars/ProgressBar";
+export interface CaseCardProps {
+    clientName: string;
+    title: string;
+    nextAppointment?: {
+        date: string;
+        time?: string;
+    };
+    categories: string[];
+    variant: "desktop" | "mobile" | "archived";
+    categoryLabelLimit?: number;
+    isDisabled?: boolean;
+    dateStyle?: "horizontal" | "hybride" | "vertical";
+    dateLabel?: string;
+    barColor?: BarColor;
+    showYear?: boolean;
+    steps?: number;
+    currentStep?: number;
+}
+declare const CaseCard: React.FC<CaseCardProps>;
+export default CaseCard;

package/dist/components/molecules/caseCard/CaseCard.js

@@ -0,0 +1,19 @@
+import React from "react";
+import "./CaseCard.css";
+import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
+import CardDate from "../../atoms/typography/CardDate";
+import ProgressBar from "../../atoms/progressBars/ProgressBar";
+var CaseCard = function (_a) {
+    var clientName = _a.clientName, title = _a.title, nextAppointment = _a.nextAppointment, categories = _a.categories, variant = _a.variant, _b = _a.categoryLabelLimit, categoryLabelLimit = _b === void 0 ? 20 : _b, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.dateStyle, dateStyle = _d === void 0 ? "hybride" : _d, dateLabel = _a.dateLabel, _e = _a.barColor, barColor = _e === void 0 ? "blue" : _e, _f = _a.showYear, showYear = _f === void 0 ? true : _f, _g = _a.steps, steps = _g === void 0 ? 100 : _g, _h = _a.currentStep, currentStep = _h === void 0 ? 50 : _h;
+    return (React.createElement("div", { className: "case-card-wrapper case-card-".concat(variant) },
+        React.createElement("div", { className: "case-card-content" },
+            React.createElement("div", { className: "case-card-header" },
+                React.createElement("h2", { className: "case-card-title ".concat(isDisabled ? "closed" : ""), title: title }, title),
+                React.createElement("span", { className: "case-card-client-name" }, clientName)),
+            React.createElement("div", { className: "case-card-progress-bar" },
+                React.createElement(ProgressBar, { startIcon: false, endIcon: false, steps: steps, isWrapperProgressBar: false, currentStep: currentStep, barColor: barColor })),
+            React.createElement("div", { className: "case-card-categories" }, categories.map(function (category, index) { return (React.createElement(OtherStatusTag, { key: index, label: category, type: "readonly", labelLimit: categoryLabelLimit })); }))),
+        nextAppointment && variant !== "archived" && (React.createElement("div", { className: "case-card-next-appointment" },
+            React.createElement(CardDate, { date: nextAppointment.date, showYear: showYear, variant: dateStyle, label: dateLabel, isDisabled: isDisabled })))));
+};
+export default CaseCard;

package/dist/components/molecules/caseCard/CaseCard.stories.d.ts

@@ -0,0 +1,114 @@
+declare namespace _default {
+    export let title: string;
+    export { CaseCard as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace variant {
+            namespace control {
+                let type: string;
+                let options: string[];
+            }
+            let description: string;
+        }
+        namespace categoryLabelLimit {
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
+        namespace isDisabled {
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+            let description_2: string;
+            export { description_2 as description };
+        }
+        namespace dateStyle {
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
+                let options_1: string[];
+                export { options_1 as options };
+            }
+            export { control_3 as control };
+            let description_3: string;
+            export { description_3 as description };
+        }
+        namespace dateLabel {
+            export namespace control_4 {
+                let type_4: string;
+                export { type_4 as type };
+            }
+            export { control_4 as control };
+            let description_4: string;
+            export { description_4 as description };
+        }
+        namespace barColor {
+            export namespace control_5 {
+                let type_5: string;
+                export { type_5 as type };
+                let options_2: string[];
+                export { options_2 as options };
+            }
+            export { control_5 as control };
+            let description_5: string;
+            export { description_5 as description };
+        }
+        namespace showYear {
+            export namespace control_6 {
+                let type_6: string;
+                export { type_6 as type };
+            }
+            export { control_6 as control };
+            let description_6: string;
+            export { description_6 as description };
+        }
+        namespace steps {
+            export namespace control_7 {
+                let type_7: string;
+                export { type_7 as type };
+            }
+            export { control_7 as control };
+            let description_7: string;
+            export { description_7 as description };
+        }
+        namespace currentStep {
+            export namespace control_8 {
+                let type_8: string;
+                export { type_8 as type };
+            }
+            export { control_8 as control };
+            let description_8: string;
+            export { description_8 as description };
+        }
+    }
+    export namespace parameters {
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
+        }
+    }
+}
+export default _default;
+export const Desktop: any;
+export const Mobile: any;
+export const LongCategories: any;
+export const LongTitle: any;
+export const Archived: any;
+export const RedProgressBar: any;
+export const GreenProgressBar: any;
+export const GreyProgressBar: any;
+export const WithYear: any;
+export const WithoutYear: any;
+export const ProgressExample: any;
+export const CompletedProgress: any;
+import CaseCard from "./CaseCard";