allaw-ui 1.1.1 → 2.0.0

package/dist/components/atoms/selects/Select.stories.js

@@ -0,0 +1,154 @@
+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 Select from "./Select";
+import "../../../styles/global.css";
+export var ActionsData = {};
+export default {
+    title: "Components/Atoms/Selects/Select",
+    component: Select,
+    tags: ["autodocs"],
+    excludeStories: /.*Data$/,
+    args: __assign({}, ActionsData),
+    argTypes: {
+        items: {
+            control: {
+                type: "array",
+            },
+        },
+        placeholder: {
+            control: {
+                type: "text",
+            },
+        },
+        multiple: {
+            control: {
+                type: "boolean",
+            },
+        },
+        isRequired: {
+            control: {
+                type: "boolean",
+            },
+        },
+        selectedItem: {
+            control: {
+                type: "text",
+            },
+        },
+        onChange: {
+            table: {
+                disable: true,
+            },
+        },
+        width: {
+            control: {
+                type: "number",
+                min: 1,
+                max: 100,
+            },
+        },
+    },
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "figma", value: "#404040" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+        layout: "padded",
+        viewport: {
+            viewports: {
+                responsive: {
+                    name: "Responsive",
+                    styles: {
+                        height: "360px", // Définition de la hauteur du viewport
+                    },
+                },
+            },
+            defaultViewport: "responsive", // Définition du viewport par défaut
+        },
+    },
+};
+var Template = function (args) {
+    var _a = useState(args.selectedItem), selected = _a[0], setSelected = _a[1];
+    var handleChange = function (newSelected) {
+        setSelected(newSelected);
+    };
+    return React.createElement(Select, __assign({}, args, { selectedItem: selected, onChange: handleChange }));
+};
+export var Default = Template.bind({});
+Default.args = {
+    items: [
+        { label: "Lundi 12 août", value: "lundi-12-aout" },
+        { label: "Mardi 13 août", value: "mardi-13-aout" },
+        { label: "Mercredi 14 août", value: "mercredi-14-aout" },
+        { label: "Jeudi 15 août", value: "jeudi-15-aout" },
+        { label: "Vendredi 16 août", value: "vendredi-16-aout" },
+        { label: "Samedi 17 août", value: "samedi-17-aout" },
+    ],
+    selectedItem: "",
+    placeholder: "Select...",
+    multiple: false,
+    isRequired: false,
+    width: 100,
+};
+export var Pressed = Template.bind({});
+Pressed.args = {
+    items: [
+        { label: "Lundi 12 août", value: "lundi-12-aout" },
+        { label: "Mardi 13 août", value: "mardi-13-aout" },
+        { label: "Mercredi 14 août", value: "mercredi-14-aout" },
+        { label: "Jeudi 15 août", value: "jeudi-15-aout" },
+        { label: "Vendredi 16 août", value: "vendredi-16-aout" },
+        { label: "Samedi 17 août", value: "samedi-17-aout" },
+    ],
+    selectedItem: "lundi-12-aout",
+    placeholder: "Select...",
+    multiple: false,
+    isRequired: false,
+};
+export var Multiple = Template.bind({});
+Multiple.args = {
+    items: [
+        { label: "Lundi 12 août", value: "lundi-12-aout" },
+        { label: "Mardi 13 août", value: "mardi-13-aout" },
+        { label: "Mercredi 14 août", value: "mercredi-14-aout" },
+        { label: "Jeudi 15 août", value: "jeudi-15-aout" },
+        { label: "Vendredi 16 août", value: "vendredi-16-aout" },
+        { label: "Samedi 17 août", value: "samedi-17-aout" },
+    ],
+    selectedItem: [],
+    placeholder: "Select...",
+    multiple: true,
+    isRequired: false,
+};
+export var Required = Template.bind({});
+Required.args = {
+    items: [
+        { label: "Lundi 12 août", value: "lundi-12-aout" },
+        { label: "Mardi 13 août", value: "mardi-13-aout" },
+        { label: "Mercredi 14 août", value: "mercredi-14-aout" },
+        { label: "Jeudi 15 août", value: "jeudi-15-aout" },
+        { label: "Vendredi 16 août", value: "vendredi-16-aout" },
+        { label: "Samedi 17 août", value: "samedi-17-aout" },
+    ],
+    selectedItem: "",
+    placeholder: "Select...",
+    multiple: false,
+    isRequired: true,
+};
+export var CustomWidth = Template.bind({});
+CustomWidth.args = __assign(__assign({}, Default.args), { width: 50 });

package/dist/components/atoms/selects/SelectableListItem.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import "../../../styles/global.css";
+import "../../../styles/icons.css";
+export interface SelectableListItemProps {
+    label: string;
+    duration?: string;
+    price?: string;
+    isActive: boolean;
+    onClick: () => void;
+    icon?: string;
+}
+declare const SelectableListItem: React.FC<SelectableListItemProps>;
+export default SelectableListItem;

package/dist/components/atoms/selects/SelectableListItem.js

@@ -0,0 +1,18 @@
+import React from "react";
+import styles from "./SelectableListItem.module.css";
+import "../../../styles/global.css";
+import "../../../styles/icons.css";
+var SelectableListItem = function (_a) {
+    var label = _a.label, duration = _a.duration, price = _a.price, isActive = _a.isActive, onClick = _a.onClick, icon = _a.icon;
+    var hasIcon = icon && icon.length > 0;
+    return (React.createElement("button", { className: "".concat(styles.container, " ").concat(isActive ? styles.active : "", " ").concat(hasIcon ? styles.withIcon : ""), onClick: onClick },
+        React.createElement("div", { className: styles.iconContainer }, isActive && React.createElement("span", { className: styles.activeIcon })),
+        hasIcon && (React.createElement("div", { className: styles.iconWrapper },
+            React.createElement("i", { className: "".concat(icon, " ").concat(styles.icon) }))),
+        React.createElement("div", { className: styles.content },
+            React.createElement("span", { className: styles.label }, label)),
+        React.createElement("div", { className: styles.columnsWrapper },
+            duration && React.createElement("span", { className: styles.duration }, duration),
+            price && React.createElement("span", { className: styles.price }, price))));
+};
+export default SelectableListItem;

package/dist/components/atoms/selects/SelectableListItem.module.css

@@ -0,0 +1,157 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  transition: color 0.15s, border-bottom 0.15s;
+  padding: 12px 24px;
+  border-radius: 16px;
+  background: #f4f7fb;
+  width: 100%;
+  min-height: 48px;
+}
+
+.withIcon {
+  flex-direction: row !important;
+}
+
+.container:hover {
+  background-color: #e6edf5;
+}
+
+.active {
+  background: #e6edf5;
+  outline: 1px solid #728ea7;
+}
+
+.iconContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: #ffffff;
+  width: 24px;
+  min-width: 25px;
+  height: 24px;
+  border: 1px solid #d1dce7;
+}
+
+.activeIcon {
+  color: rgb(37, 190, 235);
+  font-size: 22px;
+  font-weight: 600;
+  width: 40px;
+}
+
+.iconWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon {
+  color: rgb(37, 190, 235);
+  font-size: 22px;
+  font-weight: 600;
+  width: 40px;
+}
+
+.content {
+  flex-grow: 1;
+}
+
+.label {
+  font-family: "Open Sans", sans-serif;
+  color: #171e25;
+  font-style: normal;
+  font-weight: 600;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-height: calc(16px * 1.3 * 3 + 2px);
+  text-align: left;
+  font-size: 16px;
+  font-style: normal;
+  text-align: start;
+  line-height: normal;
+}
+
+.columnsWrapper {
+  display: flex;
+  gap: 12px;
+}
+
+.duration,
+.price {
+  flex-shrink: 0;
+  text-align: right;
+  font-family: "Open Sans", sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  line-height: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.duration {
+  color: var(--mid-grey, #728ea7);
+  width: 80px;
+}
+
+.price {
+  color: var(--noir, #171e25);
+  font-weight: 700;
+  width: 80px;
+}
+
+@media (max-width: 767px) {
+  .container {
+    padding: 12px 16px;
+  }
+
+  .iconContainer {
+    display: none;
+  }
+}
+
+@media (max-width: 575px) {
+  .container:not(.withIcon) {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 12px;
+  }
+
+  .container:not(.withIcon) .label {
+    margin-bottom: 8px;
+  }
+
+  .container:not(.withIcon) .columnsWrapper {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+}
+
+@media (max-width: 575px) {
+  .duration {
+    text-align: left;
+  }
+}
+
+@media (max-width: 413px) {
+  .columnsWrapper {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .price {
+    text-align: left;
+  }
+}

package/dist/components/atoms/selects/SelectableListItem.stories.d.ts

@@ -0,0 +1,33 @@
+export namespace ActionsData {
+    namespace onClick {
+        let action: string;
+    }
+}
+declare namespace _default {
+    export let title: string;
+    export { SelectableListItem as component };
+    export let tags: string[];
+    export let excludeStories: RegExp;
+    export namespace args {
+        let label: string;
+        let duration: string;
+        let price: string;
+        let isActive: boolean;
+        let icon: string;
+    }
+    export namespace parameters {
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
+        }
+        let layout: string;
+    }
+}
+export default _default;
+export const Default: any;
+export const Active: any;
+import SelectableListItem from "./SelectableListItem";

package/dist/components/atoms/selects/SelectableListItem.stories.js

@@ -0,0 +1,53 @@
+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 SelectableListItem from "./SelectableListItem";
+import "../../../styles/global.css";
+export var ActionsData = {
+    onClick: { action: "clicked" },
+};
+export default {
+    title: "Components/Atoms/selects/SelectableListItem",
+    component: SelectableListItem,
+    tags: ["autodocs"],
+    excludeStories: /.*Data$/,
+    args: __assign(__assign({}, ActionsData), { label: "Consultation juridique personnalisée visant à analyser votre situation et à vous fournir des conseils adaptés à vos besoins. Cette prestation inclut l'étude des documents pertinents, une évaluation des solutions juridiques envisageables, et des recommandations pour défendre efficacement vos intérêts.", duration: "(35 min)", price: "100 €", isActive: false, icon: "allaw-icon-visio" }),
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "figma", value: "#404040" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+        layout: "padded",
+    },
+};
+var Template = function (args) {
+    var _a = useState(false), isActive = _a[0], setIsActive = _a[1];
+    var handleClick = function () {
+        setIsActive(!isActive);
+        args.onClick();
+    };
+    return (React.createElement(SelectableListItem, __assign({}, args, { isActive: isActive, onClick: handleClick })));
+};
+export var Default = Template.bind({});
+export var Active = Template.bind({});
+Active.args = {
+    label: "Adoption",
+    duration: "(35 min)",
+    price: "100 €",
+    isActive: true,
+    icon: "allaw-icon-visio",
+};

package/dist/components/atoms/selects/index.d.ts

@@ -2,3 +2,5 @@ export { default as Select } from "./Select";
 export type { SelectItem, SelectProps, SelectRef } from "./Select";
 export { default as ComboBox } from "./ComboBox";
 export type { ComboBoxProps, ComboBoxRef } from "./ComboBox";
+export { default as SelectableListItem } from "./SelectableListItem";
+export type { SelectableListItemProps } from "./SelectableListItem";

package/dist/components/atoms/selects/index.js

@@ -1,2 +1,3 @@
 export { default as Select } from "./Select";
 export { default as ComboBox } from "./ComboBox";
+export { default as SelectableListItem } from "./SelectableListItem";

package/dist/components/atoms/tags/AppointementStatusTag.stories.d.ts

@@ -0,0 +1,17 @@
+declare namespace _default {
+    export let title: string;
+    export { AppointementStatusTag as component };
+    export let tags: string[];
+}
+export default _default;
+export const Confirmed: any;
+export const Pending: any;
+export const Available: any;
+export const Unavailable: any;
+export const Cancelled: any;
+export const Passed: any;
+export const RefusedStatus: any;
+export const ConfirmedBig: any;
+export const PassedBig: any;
+export const CancelledBigVariant: any;
+import AppointementStatusTag from "./AppointementStatusTag";

package/dist/components/atoms/tags/AppointementStatusTag.stories.js

@@ -0,0 +1,70 @@
+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 AppointementStatusTag from "./AppointementStatusTag";
+import "../../../styles/global.css";
+export default {
+    title: "Components/Atoms/Tags/AppointementStatusTag",
+    component: AppointementStatusTag,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return React.createElement(AppointementStatusTag, __assign({}, args)); };
+export var Confirmed = Template.bind({});
+Confirmed.args = {
+    status: "confirmed",
+    variant: "default",
+};
+export var Pending = Template.bind({});
+Pending.args = {
+    status: "pending",
+    variant: "default",
+};
+export var Available = Template.bind({});
+Available.args = {
+    status: "available",
+    variant: "default",
+};
+export var Unavailable = Template.bind({});
+Unavailable.args = {
+    status: "unavailable",
+    variant: "default",
+};
+export var Cancelled = Template.bind({});
+Cancelled.args = {
+    status: "cancelled",
+    variant: "default",
+};
+export var Passed = Template.bind({});
+Passed.args = {
+    status: "passed",
+    variant: "default",
+};
+export var RefusedStatus = Template.bind({});
+RefusedStatus.args = {
+    status: "refused",
+    variant: "default",
+};
+export var ConfirmedBig = Template.bind({});
+ConfirmedBig.args = {
+    status: "confirmed",
+    variant: "big",
+};
+export var PassedBig = Template.bind({});
+PassedBig.args = {
+    status: "passed",
+    variant: "big",
+};
+export var CancelledBigVariant = Template.bind({});
+CancelledBigVariant.args = {
+    status: "cancelled",
+    variant: "big",
+};

package/dist/components/atoms/tags/FolderStatusTag.css

@@ -2,15 +2,15 @@
 
 .folder-status-tag {
   display: inline-flex;
-  padding: 8px;
+  padding: 6px;
   justify-content: center;
   align-items: center;
   gap: 8px;
-  border-radius: 8px;
+  border-radius: 6px;
   font-family: "Open Sans", sans-serif;
-  font-size: 14px;
+  font-size: 12px;
   font-style: normal;
-  font-weight: 700;
+  font-weight: 600;
   line-height: normal;
   text-align: right;
 }

package/dist/components/atoms/tags/FolderStatusTag.stories.d.ts

@@ -0,0 +1,28 @@
+declare namespace _default {
+    export let title: string;
+    export { FolderStatusTag as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace status {
+            namespace control {
+                let type: string;
+                let options: 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 Open: any;
+export const Closed: any;
+export const Bloqued: any;
+import FolderStatusTag from "./FolderStatusTag";

package/dist/components/atoms/tags/FolderStatusTag.stories.js

@@ -0,0 +1,51 @@
+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 FolderStatusTag from "./FolderStatusTag";
+import "../../../styles/global.css";
+export default {
+    title: "Components/Atoms/Tags/FolderStatusTag",
+    component: FolderStatusTag,
+    tags: ["autodocs"],
+    argTypes: {
+        status: {
+            control: {
+                type: "select",
+                options: ["OPEN", "CLOSED", "BLOCKED"],
+            },
+        },
+    },
+    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(FolderStatusTag, __assign({}, args)); };
+export var Open = Template.bind({});
+Open.args = {
+    status: "OPEN",
+};
+export var Closed = Template.bind({});
+Closed.args = {
+    status: "CLOSED",
+};
+export var Bloqued = Template.bind({});
+Bloqued.args = {
+    status: "BLOCKED",
+};

package/dist/components/atoms/tags/OtherStatusTag.css

@@ -58,7 +58,6 @@
   gap: 4px;
   flex-shrink: 0;
   border-radius: 8px;
-  border: 1px solid var(--tag-blue, #1985e8);
   color: var(--tag-blue, #1985e8);
   text-align: center;
   font-family: "Open Sans";
@@ -69,6 +68,26 @@
   letter-spacing: 0.12px;
 }
 
+.other-status-tag.information.information-color-blue {
+  border: 1px solid var(--tag-blue, #1985e8);
+  color: var(--tag-blue, #1985e8);
+}
+
+.other-status-tag.information.information-color-green {
+  border: 1px solid var(--green-tag-dark, #29a36a);
+  color: var(--green-tag-dark, #29a36a);
+}
+
+.other-status-tag.information.information-color-red {
+  border: 1px solid var(--red-tag-dark, #e15151);
+  color: var(--red-tag-dark, #e15151);
+}
+
+.other-status-tag.information.information-color-orange {
+  border: 1px solid var(--orange-tag-dark, #ff9f43);
+  color: var(--orange-tag-dark, #ff9f43);
+}
+
 .other-status-tag.information .icon {
   display: flex;
   width: 16px;

package/dist/components/atoms/tags/OtherStatusTag.d.ts

@@ -7,6 +7,7 @@ export interface OtherStatusTagProps {
     startIconName?: string;
     labelLimit?: number;
     style?: "normal" | "compact";
+    informationColor?: "blue" | "green" | "red" | "orange";
 }
 declare const OtherStatusTag: React.FC<OtherStatusTagProps>;
 export default OtherStatusTag;