allaw-ui 1.0.144 → 1.0.145

package/dist/components/atoms/progressBars/ProgressBar.css

@@ -6,7 +6,7 @@
   justify-content: space-between;
   align-items: center;
   height: 1.5rem;
-  gap: 4rem;
+  gap: 2rem;
   padding-left: 0.7rem;
 }
 

package/dist/components/atoms/progressBars/ProgressBar.js

@@ -8,9 +8,8 @@ var ProgressBar = function (_a) {
     var progressWidth = constrainedCurrentStep === 0 ? 0 : (constrainedCurrentStep / steps) * 100;
     var noIconsMargin = !startIcon && !endIcon ? "0px" : "0 10px";
     return (React.createElement("div", { className: "progress-bar-container" },
-        startIcon && (React.createElement("div", { className: "progress-bar-icon-container" },
-            React.createElement("button", { className: "progress-bar-chevron", onClick: onStartIconClick },
-                React.createElement("i", { className: "allaw-icon-chevron-left" })))),
+        React.createElement("div", { className: "progress-bar-icon-container" }, startIcon && (React.createElement("button", { className: "progress-bar-chevron", onClick: onStartIconClick },
+            React.createElement("i", { className: "allaw-icon-chevron-left" })))),
         React.createElement("div", { className: "progress-bar-background ".concat(showProgressBar ? "" : "hidden-content"), style: {
                 height: isWrapperProgressBar ? "6px" : "8px",
                 width: startIcon ? "calc(100% - 32px)" : "100%",

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

@@ -1,9 +1,13 @@
 import React from "react";
 import "../../../styles/global.css";
 export interface SelectableListItemProps {
-    label: string;
-    column2?: string;
-    column3?: string;
+    labels: {
+        label: string;
+        width?: string;
+        align?: string;
+        fontWeight?: "normal" | "bold";
+        color?: "mid-grey" | "dark-grey" | "noir" | "venom-grey-dark" | "actions-valid" | "actions-error";
+    }[];
     isActive: boolean;
     onClick: () => void;
 }

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

@@ -2,12 +2,22 @@ import React from "react";
 import styles from "./SelectableListItem.module.css";
 import "../../../styles/global.css";
 var SelectableListItem = function (_a) {
-    var label = _a.label, column2 = _a.column2, column3 = _a.column3, isActive = _a.isActive, onClick = _a.onClick;
+    var labels = _a.labels, isActive = _a.isActive, onClick = _a.onClick;
     return (React.createElement("button", { className: "".concat(styles.selectableListItem, " ").concat(isActive ? styles.selectableListItemActive : ""), onClick: onClick },
-        React.createElement("div", { className: styles.selectableListItemIcon }, isActive && React.createElement("span", { className: styles.selectableListItemIconInner })),
-        React.createElement("span", { className: styles.selectableListItemLabel }, label),
-        React.createElement("div", { className: styles.selectableListItemColumnsWrapper },
-            column2 && (React.createElement("span", { className: styles.selectableListItemColumn2 }, column2)),
-            column3 && (React.createElement("span", { className: styles.selectableListItemColumn3 }, column3)))));
+        React.createElement("span", { className: styles.selectableListItemIcon }, isActive && React.createElement("span", { className: styles.selectableListItemIconInner })),
+        React.createElement("div", { className: styles.selectableListItemLabels }, labels.map(function (label, index) {
+            var _a, _b;
+            return (React.createElement("span", { key: index, className: styles.selectableListItemLabel, style: {
+                    width: ((_a = label.width) === null || _a === void 0 ? void 0 : _a.includes("%")) ? label.width : undefined,
+                    minWidth: ((_b = label.width) === null || _b === void 0 ? void 0 : _b.includes("px")) ? label.width : undefined,
+                    justifyContent: label.align === "start"
+                        ? "flex-start"
+                        : label.align === "end"
+                            ? "flex-end"
+                            : "center",
+                    fontWeight: label.fontWeight === "bold" ? "bold" : "normal",
+                    color: "var(--".concat(label.color, ", inherit)"),
+                } }, label.label));
+        }))));
 };
 export default SelectableListItem;

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

@@ -1,8 +1,7 @@
 .selectableListItem {
   display: flex;
-  flex-direction: row;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
   border: none;
   background: none;
   cursor: pointer;
@@ -13,40 +12,6 @@
   width: 100%;
 }
 
-@media (max-width: 767px) {
-  .selectableListItem {
-    padding: 12px 16px;
-  }
-
-  .selectableListItemIcon {
-    display: none;
-  }
-}
-
-@media (max-width: 575px) {
-  .selectableListItem {
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 12px;
-  }
-
-  .selectableListItemLabel {
-    margin-bottom: 8px;
-  }
-
-  .selectableListItemColumnsWrapper {
-    flex-direction: row;
-    align-items: center;
-  }
-}
-
-@media (max-width: 413px) {
-  .selectableListItemColumnsWrapper {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}
-
 .selectableListItem:hover {
   background-color: #e6edf5;
 }
@@ -68,12 +33,6 @@
   border: 1px solid #d1dce7;
 }
 
-@media (max-width: 767px) {
-  .selectableListItemIcon {
-    display: none;
-  }
-}
-
 .selectableListItemActive .selectableListItemIcon {
   padding: 3px;
   border: 1px solid #d1dce7;
@@ -86,30 +45,13 @@
   background: #25beeb;
 }
 
-.selectableListItemLabel {
-  flex-grow: 1;
-  font-family: "Open Sans", sans-serif;
-  font-size: 16px;
-  font-style: normal;
-  line-height: 1.2;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-height: calc(16px * 1.2 * 3);
-  text-align: left;
-}
-
-.selectableListItemColumnsWrapper {
+.selectableListItemLabels {
   display: flex;
-  gap: 12px;
+  flex-wrap: nowrap;
+  width: 100%;
 }
 
-.selectableListItemColumn2,
-.selectableListItemColumn3 {
-  flex-shrink: 0;
-  text-align: right;
+.selectableListItemLabel {
   font-family: "Open Sans", sans-serif;
   font-size: 16px;
   font-style: normal;
@@ -117,27 +59,6 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-}
-
-.selectableListItemColumn2 {
-  color: var(--mid-grey, #728ea7);
-  width: 80px;
-}
-
-@media (max-width: 575px) {
-  .selectableListItemColumn2 {
-    text-align: left;
-  }
-}
-
-.selectableListItemColumn3 {
-  color: var(--noir, #171e25);
-  font-weight: 700;
-  width: 80px;
-}
-
-@media (max-width: 413px) {
-  .selectableListItemColumn3 {
-    text-align: left;
-  }
+  display: flex;
+  align-items: center;
 }

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

@@ -9,9 +9,13 @@ declare namespace _default {
     export let tags: string[];
     export let excludeStories: RegExp;
     export namespace args {
-        let label: string;
-        let column2: string;
-        let column3: string;
+        let labels: {
+            label: string;
+            width: string;
+            align: string;
+            fontWeight: string;
+            color: string;
+        }[];
         let isActive: boolean;
     }
     export namespace parameters {

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

@@ -20,7 +20,29 @@ export default {
     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.", column2: "(35 min)", column3: "100 €", isActive: false }),
+    args: __assign(__assign({}, ActionsData), { labels: [
+            {
+                label: "Adoption",
+                width: "100%",
+                align: "start",
+                fontWeight: "normal",
+                color: "noir",
+            },
+            {
+                label: "(35 min)",
+                width: "100px",
+                align: "end",
+                fontWeight: "normal",
+                color: "mid-grey",
+            },
+            {
+                label: "100 €",
+                width: "80px",
+                align: "end",
+                fontWeight: "bold",
+                color: "noir",
+            },
+        ], isActive: false }),
     parameters: {
         backgrounds: {
             default: "light",
@@ -45,8 +67,28 @@ var Template = function (args) {
 export var Default = Template.bind({});
 export var Active = Template.bind({});
 Active.args = {
-    label: "Adoption",
-    column2: "(35 min)",
-    column3: "100 €",
+    labels: [
+        {
+            label: "Adoption",
+            width: "100%",
+            align: "start",
+            fontWeight: "normal",
+            color: "noir",
+        },
+        {
+            label: "(35 min)",
+            width: "100px",
+            align: "end",
+            fontWeight: "normal",
+            color: "mid-grey",
+        },
+        {
+            label: "100 €",
+            width: "80px",
+            align: "end",
+            fontWeight: "bold",
+            color: "noir",
+        },
+    ],
     isActive: true,
 };

package/dist/components/molecules/stepper/Stepper.css

@@ -81,6 +81,9 @@
 
 .stepper-content {
   width: 100%;
+  max-height: 100%;
+  height: 90%;
+  overflow-y: scroll;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -90,3 +93,14 @@
   line-height: 24px;
   letter-spacing: 0em;
 }
+
+
+@media (max-width: 800px) {
+  .stepper-container  {
+    height: 95vh;
+    position: fixed;
+    bottom: 0;
+    justify-content: start;
+    padding: 2rem;
+  }
+}

package/dist/stories/Header.stories.d.ts

@@ -7,9 +7,9 @@ declare const meta: {
         layout: string;
     };
     args: {
-        onLogin: import("@vitest/spy").Mock<(...args: any[]) => any>;
-        onLogout: import("@vitest/spy").Mock<(...args: any[]) => any>;
-        onCreateAccount: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onLogin: import("@vitest/spy").Mock<[], void>;
+        onLogout: import("@vitest/spy").Mock<[], void>;
+        onCreateAccount: import("@vitest/spy").Mock<[], void>;
     };
 };
 export default meta;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "1.0.144",
+  "version": "1.0.145",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",