allaw-ui 3.4.3 → 3.4.5

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/radioForm/RadioForm.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import "./RadioForm.css";
+import "../../../styles/global.css";
+export interface RadioFormProps {
+    label: string;
+    isRequired: boolean;
+    options: string[];
+    defaultSelected?: string;
+    onChange?: (selectedOption: string | null) => void;
+}
+declare const RadioForm: React.FC<RadioFormProps>;
+export default RadioForm;

package/dist/components/molecules/radioForm/RadioForm.js

@@ -0,0 +1,27 @@
+import React, { useState, useEffect } from "react";
+import "./RadioForm.css";
+import "../../../styles/global.css";
+import Paragraph from "../../atoms/typography/Paragraph";
+import RadioButton from "../../atoms/radios/RadioButton";
+var RadioForm = function (_a) {
+    var label = _a.label, isRequired = _a.isRequired, options = _a.options, defaultSelected = _a.defaultSelected, onChange = _a.onChange;
+    var _b = useState(defaultSelected || null), selectedOption = _b[0], setSelectedOption = _b[1];
+    useEffect(function () {
+        if (defaultSelected) {
+            setSelectedOption(defaultSelected);
+        }
+    }, [defaultSelected]);
+    var handleOptionChange = function (option) {
+        setSelectedOption(option);
+        if (onChange) {
+            onChange(option);
+        }
+    };
+    return (React.createElement("div", { className: "radio-form" },
+        React.createElement(Paragraph, { variant: "medium", color: "noir", text: React.createElement(React.Fragment, null,
+                label,
+                " ",
+                isRequired && React.createElement("span", { className: "radio-form-required" }, "*")), size: "default" }),
+        React.createElement("div", { className: "radio-form-options" }, options.map(function (option, index) { return (React.createElement(RadioButton, { key: index, label: option, style: "hybride", isActive: selectedOption === option, onClick: function () { return handleOptionChange(option); } })); }))));
+};
+export default RadioForm;

package/dist/components/molecules/radioForm/RadioForm.stories.d.ts

@@ -0,0 +1,27 @@
+declare namespace _default {
+    export let title: string;
+    export { RadioForm as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace label {
+            let control: string;
+        }
+        namespace isRequired {
+            let control_1: string;
+            export { control_1 as control };
+        }
+        namespace options {
+            let control_2: string;
+            export { control_2 as control };
+        }
+        namespace defaultSelected {
+            let control_3: string;
+            export { control_3 as control };
+        }
+    }
+}
+export default _default;
+export const Default: any;
+export const WithDefaultSelection: any;
+export const MultipleOptions: any;
+import RadioForm from "./RadioForm";

package/dist/components/molecules/radioForm/RadioForm.stories.js

@@ -0,0 +1,52 @@
+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, { useState } from "react";
+import RadioForm from "./RadioForm";
+import "../../../styles/global.css";
+export default {
+    title: "Components/Molecules/RadioForm",
+    component: RadioForm,
+    tags: ["autodocs"],
+    argTypes: {
+        label: { control: "text" },
+        isRequired: { control: "boolean" },
+        options: { control: "array" },
+        defaultSelected: { control: "text" },
+    },
+};
+var Template = function (args) {
+    var _a = useState(args.defaultSelected || null), selectedOption = _a[0], setSelectedOption = _a[1];
+    var handleChange = function (newOption) {
+        setSelectedOption(newOption);
+        console.log("Selected option:", newOption);
+    };
+    return React.createElement(RadioForm, __assign({}, args, { onChange: handleChange }));
+};
+export var Default = Template.bind({});
+Default.args = {
+    label: "Référencer ma fiche pro dans les recherches sur allaw.fr",
+    isRequired: true,
+    options: ["Oui", "Non"],
+};
+export var WithDefaultSelection = Template.bind({});
+WithDefaultSelection.args = {
+    label: "Référencer ma fiche pro dans les recherches sur allaw.fr",
+    isRequired: true,
+    options: ["Oui", "Non"],
+    defaultSelected: "Oui",
+};
+export var MultipleOptions = Template.bind({});
+MultipleOptions.args = {
+    label: "Choisissez votre option préférée",
+    isRequired: false,
+    options: ["Option 1", "Option 2", "Option 3"],
+};

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

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

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

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

package/dist/components/molecules/selectForm/SelectForm.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import "./SelectForm.css";
+import "../../../styles/global.css";
+import { SelectItem } from "../../atoms/selects/Select";
+export interface SelectFormProps {
+    label: string;
+    isRequired: boolean;
+    options: SelectItem[];
+    isMultiple: boolean;
+    placeHolder?: string;
+    width?: number;
+    selectedItem?: string | string[];
+    maxItems?: number;
+    onChange?: (selected: string | string[]) => void;
+    variant?: "bold" | "semiBold" | "medium";
+    color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "grey-venom" | "venom-grey-dark";
+}
+declare const SelectForm: React.FC<SelectFormProps>;
+export default SelectForm;

package/dist/components/molecules/selectForm/SelectForm.js

@@ -0,0 +1,15 @@
+import React from "react";
+import "./SelectForm.css";
+import "../../../styles/global.css";
+import Paragraph from "../../atoms/typography/Paragraph";
+import Select from "../../atoms/selects/Select";
+var SelectForm = function (_a) {
+    var label = _a.label, isRequired = _a.isRequired, options = _a.options, isMultiple = _a.isMultiple, _b = _a.placeHolder, placeHolder = _b === void 0 ? "Sélectionner une valeur" : _b, _c = _a.width, width = _c === void 0 ? 100 : _c, selectedItem = _a.selectedItem, maxItems = _a.maxItems, onChange = _a.onChange, _d = _a.variant, variant = _d === void 0 ? "medium" : _d, _e = _a.color, color = _e === void 0 ? "noir" : _e;
+    return (React.createElement("div", { className: "select-form" },
+        React.createElement(Paragraph, { variant: variant, color: color, text: React.createElement(React.Fragment, null,
+                label,
+                " ",
+                isRequired && React.createElement("span", { className: "select-form-required" }, "*")), size: "default" }),
+        React.createElement(Select, { items: options, multiple: isMultiple, isRequired: isRequired, width: width, placeholder: placeHolder, selectedItem: selectedItem, maxItems: maxItems, onChange: onChange })));
+};
+export default SelectForm;

package/dist/components/molecules/selectForm/SelectForm.stories.d.ts

@@ -0,0 +1,72 @@
+declare namespace _default {
+    export let title: string;
+    export { SelectForm as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace label {
+            let control: string;
+        }
+        namespace isRequired {
+            let control_1: string;
+            export { control_1 as control };
+        }
+        namespace options {
+            let control_2: string;
+            export { control_2 as control };
+        }
+        namespace isMultiple {
+            let control_3: string;
+            export { control_3 as control };
+        }
+        namespace maxItems {
+            export namespace control_4 {
+                let type: string;
+                let min: number;
+            }
+            export { control_4 as control };
+            export namespace _if {
+                let arg: string;
+                let truthy: boolean;
+            }
+            export { _if as if };
+        }
+        namespace width {
+            export namespace control_5 {
+                let type_1: string;
+                export { type_1 as type };
+                let min_1: number;
+                export { min_1 as min };
+                export let max: number;
+            }
+            export { control_5 as control };
+        }
+        namespace selectedItem {
+            let control_6: string;
+            export { control_6 as control };
+        }
+        namespace variant {
+            export namespace control_7 {
+                let type_2: string;
+                export { type_2 as type };
+                let options_1: string[];
+                export { options_1 as options };
+            }
+            export { control_7 as control };
+        }
+        namespace color {
+            export namespace control_8 {
+                let type_3: string;
+                export { type_3 as type };
+                let options_2: string[];
+                export { options_2 as options };
+            }
+            export { control_8 as control };
+        }
+    }
+}
+export default _default;
+export const Default: any;
+export const Multiple: any;
+export const CustomWidth: any;
+export const WithSelectedItem: any;
+import SelectForm from "./SelectForm";

package/dist/components/molecules/selectForm/SelectForm.stories.js

@@ -0,0 +1,104 @@
+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, { useState } from "react";
+import SelectForm from "./SelectForm";
+import "../../../styles/global.css";
+export default {
+    title: "Components/Molecules/SelectForm",
+    component: SelectForm,
+    tags: ["autodocs"],
+    argTypes: {
+        label: { control: "text" },
+        isRequired: { control: "boolean" },
+        options: { control: "object" },
+        isMultiple: { control: "boolean" },
+        maxItems: {
+            control: {
+                type: "number",
+                min: 1,
+            },
+            if: { arg: "isMultiple", truthy: true },
+        },
+        width: {
+            control: {
+                type: "number",
+                min: 1,
+                max: 100,
+            },
+        },
+        selectedItem: { control: "text" },
+        variant: {
+            control: {
+                type: "select",
+                options: ["bold", "semiBold", "medium"],
+            },
+        },
+        color: {
+            control: {
+                type: "select",
+                options: [
+                    "bleu-allaw",
+                    "mid-grey",
+                    "dark-grey",
+                    "noir",
+                    "pure-white",
+                    "grey-venom",
+                    "venom-grey-dark",
+                ],
+            },
+        },
+    },
+};
+var Template = function (args) {
+    var _a = useState(args.selectedItem), selectedOption = _a[0], setSelectedOption = _a[1];
+    var handleChange = function (newOption) {
+        setSelectedOption(newOption);
+        console.log("Selected option:", newOption);
+    };
+    return (React.createElement(SelectForm, __assign({}, args, { selectedItem: selectedOption, onChange: handleChange })));
+};
+export var Default = Template.bind({});
+Default.args = {
+    label: "Délais de préavis (en jours ouvrés) avant la date de rendez-vous",
+    isRequired: true,
+    options: [
+        { label: "24h", value: "24h" },
+        { label: "48h", value: "48h" },
+        { label: "72h", value: "72h" },
+        { label: "1 semaine", value: "1week" },
+        { label: "2 semaines", value: "2weeks" },
+    ],
+    isMultiple: false,
+    width: 100,
+    selectedItem: "",
+    variant: "medium",
+    color: "noir",
+};
+export var Multiple = Template.bind({});
+Multiple.args = {
+    label: "Sélectionnez vos domaines d'expertise",
+    isRequired: false,
+    options: [
+        { label: "Droit des affaires", value: "business" },
+        { label: "Droit immobilier", value: "real_estate" },
+        { label: "Droit du travail", value: "labor" },
+        { label: "Droit de la famille", value: "family" },
+    ],
+    isMultiple: true,
+    width: 100,
+    selectedItem: [],
+    maxItems: 3,
+};
+export var CustomWidth = Template.bind({});
+CustomWidth.args = __assign(__assign({}, Default.args), { width: 50 });
+export var WithSelectedItem = Template.bind({});
+WithSelectedItem.args = __assign(__assign({}, Default.args), { selectedItem: "48h" });

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

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

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

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

package/dist/components/molecules/stepper/ConfirmationModal.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import "./Stepper.css";
+interface ConfirmationModalProps {
+    show: boolean;
+    title: string;
+    description: string;
+    confirmLabel: string;
+    cancelLabel: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+    isDanger?: boolean;
+}
+declare const ConfirmationModal: React.FC<ConfirmationModalProps>;
+export default ConfirmationModal;

package/dist/components/molecules/stepper/ConfirmationModal.js

@@ -0,0 +1,26 @@
+import React from "react";
+import "./Stepper.css";
+import PrimaryButton from "../../atoms/buttons/PrimaryButton";
+import SecondaryButton from "../../atoms/buttons/SecondaryButton";
+import Heading from "../../atoms/typography/Heading";
+import Paragraph from "../../atoms/typography/Paragraph";
+var ConfirmationModal = function (_a) {
+    var show = _a.show, title = _a.title, description = _a.description, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, onConfirm = _a.onConfirm, onCancel = _a.onCancel, _b = _a.isDanger, isDanger = _b === void 0 ? false : _b;
+    var handleOutsideClick = function (e) {
+        if (e.target === e.currentTarget) {
+            onCancel();
+        }
+    };
+    if (!show)
+        return null;
+    return (React.createElement("div", { className: "confirmation-modal", onClick: handleOutsideClick },
+        React.createElement("div", { className: "confirmation-modal-content" },
+            React.createElement("div", { className: "confirmation-modal-heading-wrapper" },
+                React.createElement(Heading, { text: title, variant: "h4", color: "noir", align: "left" })),
+            React.createElement("div", { className: "confirmation-modal-paragraph-wrapper" },
+                React.createElement(Paragraph, { text: description, variant: "medium", size: "default", className: "confirmation-modal-paragraph" })),
+            React.createElement("div", { className: "confirmation-modal-buttons" },
+                React.createElement(SecondaryButton, { label: cancelLabel, onClick: onCancel, startIconName: "allaw-icon-close", startIcon: true }),
+                React.createElement(PrimaryButton, { label: confirmLabel, variant: isDanger ? "warning" : "default", onClick: onConfirm, endIconName: "allaw-icon-check", endIcon: true })))));
+};
+export default ConfirmationModal;

package/dist/components/molecules/stepper/Stepper.d.ts

@@ -0,0 +1,51 @@
+import React from "react";
+import "./Stepper.css";
+import "../../../styles/global.css";
+import "../../../styles/icons.css";
+export interface StepperProps {
+    steps: number;
+    currentStep: number;
+    startIcon?: boolean[];
+    endIcon?: boolean;
+    children: React.ReactNode[];
+    secondaryButton?: {
+        show: boolean;
+        label: string;
+        startIcon?: React.ReactNode;
+        endIcon?: React.ReactNode;
+        startIconName?: string;
+        endIconName?: string;
+        onSecondaryButtonClick?: (step: number) => void;
+        fullWidth?: boolean;
+    }[];
+    primaryButton?: {
+        show: boolean;
+        label: string;
+        startIcon?: React.ReactNode;
+        endIcon?: React.ReactNode;
+        startIconName?: string;
+        endIconName?: string;
+        onPrimaryButtonClick?: (step: number) => void;
+        disabled?: boolean;
+        fullWidth?: boolean;
+    }[];
+    showProgressBar?: boolean[];
+    onClose?: () => void;
+    validateStep?: (step: number) => boolean | Promise<boolean>;
+    confirmationModal?: {
+        show: boolean;
+        title: string;
+        description: string;
+        confirmLabel: string;
+        cancelLabel: string;
+        isDanger: boolean;
+    };
+    onModalConfirm?: () => void;
+    onModalCancel?: () => void;
+    verticalOffset?: {
+        top?: number;
+        bottom?: number;
+    };
+}
+declare const Stepper: React.FC<StepperProps>;
+export default Stepper;