allaw-ui 1.0.143 → 1.0.144

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

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

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

@@ -2,22 +2,12 @@ import React from "react";
 import styles from "./SelectableListItem.module.css";
 import "../../../styles/global.css";
 var SelectableListItem = function (_a) {
-    var labels = _a.labels, isActive = _a.isActive, onClick = _a.onClick;
+    var label = _a.label, column2 = _a.column2, column3 = _a.column3, isActive = _a.isActive, onClick = _a.onClick;
     return (React.createElement("button", { className: "".concat(styles.selectableListItem, " ").concat(isActive ? styles.selectableListItemActive : ""), onClick: onClick },
-        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));
-        }))));
+        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)))));
 };
 export default SelectableListItem;

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

@@ -1,7 +1,8 @@
 .selectableListItem {
   display: flex;
+  flex-direction: row;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
   border: none;
   background: none;
   cursor: pointer;
@@ -12,6 +13,40 @@
   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;
 }
@@ -33,6 +68,12 @@
   border: 1px solid #d1dce7;
 }
 
+@media (max-width: 767px) {
+  .selectableListItemIcon {
+    display: none;
+  }
+}
+
 .selectableListItemActive .selectableListItemIcon {
   padding: 3px;
   border: 1px solid #d1dce7;
@@ -45,13 +86,30 @@
   background: #25beeb;
 }
 
-.selectableListItemLabels {
+.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 {
   display: flex;
-  flex-wrap: nowrap;
-  width: 100%;
+  gap: 12px;
 }
 
-.selectableListItemLabel {
+.selectableListItemColumn2,
+.selectableListItemColumn3 {
+  flex-shrink: 0;
+  text-align: right;
   font-family: "Open Sans", sans-serif;
   font-size: 16px;
   font-style: normal;
@@ -59,6 +117,27 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  display: flex;
-  align-items: center;
+}
+
+.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;
+  }
 }

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

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

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

@@ -20,29 +20,7 @@ export default {
     component: SelectableListItem,
     tags: ["autodocs"],
     excludeStories: /.*Data$/,
-    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 }),
+    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 }),
     parameters: {
         backgrounds: {
             default: "light",
@@ -67,28 +45,8 @@ var Template = function (args) {
 export var Default = Template.bind({});
 export var Active = Template.bind({});
 Active.args = {
-    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",
-        },
-    ],
+    label: "Adoption",
+    column2: "(35 min)",
+    column3: "100 €",
     isActive: true,
 };

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

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

package/package.json

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