allaw-ui 1.0.151 → 1.0.153

package/dist/assets/allaw-font.svg

@@ -103,4 +103,19 @@
 <glyph unicode="&#xe94d;" d="M521.966 762.708c95.81 0 160.44-41.386 197.292-75.971l144.001 140.601c-88.439 82.205-203.53 132.663-341.293 132.663-199.563 0-371.911-114.52-455.817-281.197l164.977-128.129c41.39 123.025 155.91 212.034 290.839 212.034z" />
 <glyph unicode="&#xe94e;" glyph-name="apple" data-tags="apple" d="M798.293 128c-35.413-52.907-72.96-104.533-130.133-105.387-57.173-1.28-75.52 33.707-140.373 33.707-65.28 0-85.333-32.853-139.521-34.987-55.893-2.133-98.133 56.32-133.973 107.947-72.96 105.387-128.853 299.52-53.76 430.080 37.12 64.853 103.68 105.813 175.787 107.093 54.615 0.853 106.668-37.12 140.375-37.12 33.28 0 96.427 45.653 162.56 38.827 27.733-1.28 105.387-11.093 155.307-84.48-3.84-2.56-92.587-54.613-91.733-162.56 1.28-128.853 113.067-171.947 114.347-172.373-1.28-2.987-17.92-61.44-58.88-120.747zM554.667 810.667c31.147 35.413 82.773 62.293 125.44 64 5.547-49.92-14.507-100.267-44.373-136.107-29.44-36.267-78.080-64.427-125.867-60.587-6.4 49.067 17.493 100.267 44.8 132.693z" />
 <glyph unicode="&#xe94f;" glyph-name="linkedin" data-tags="linkedin" d="M1024-64h-204.8v358.349c0 98.304-43.366 153.139-121.139 153.139-84.634 0-134.861-57.139-134.861-153.139v-358.349h-204.8v665.6h204.8v-74.854c0 0 64.256 112.742 209.050 112.742 144.845 0 251.75-88.371 251.75-271.258v-432.23zM125.030 708.045c-69.069 0-125.030 56.422-125.030 126.003 0 69.53 55.962 125.952 125.030 125.952 69.018 0 124.979-56.422 124.979-125.952 0.051-69.581-55.962-126.003-124.979-126.003v0zM0-64h256v665.6h-256v-665.6z" />
+<glyph unicode="&#xe950;" glyph-name="microsoft-outlook" data-tags="microsoft-outlook" d="M1024 644.821v-447.061c0-9.813-3.413-18.091-10.155-24.576-6.741-6.571-15.019-9.813-24.747-9.813h-364.672v296.917l68.267-52.437c4.352-3.627 9.771-5.376 16.171-5.376 6.315 0 11.819 1.749 16.597 5.419zM624.427 731.051h364.672c9.003 0 16.768-2.688 23.168-8.192 6.4-5.461 9.984-12.8 10.581-21.76l-314.411-250.709-84.011 66.091zM571.904 923.136v-950.229l-571.904 98.816v749.867l571.989 101.547zM399.147 446.123c-0.853 48.341-13.355 88.405-37.504 120.064-23.68 31.573-54.4 48.256-90.923 49.664-35.157-1.408-65.237-18.048-89.6-49.664-24.32-31.659-36.48-71.765-37.12-120.064 0.64-47.659 13.44-87.339 37.76-119.083 24.363-31.573 54.357-48.341 89.643-50.176 36.48 1.493 67.157 18.091 91.52 49.92 24.32 31.915 37.12 71.68 37.76 119.339zM266.027 552.021c18.389-0.853 33.877-10.923 46.208-30.592 12.16-19.669 18.56-44.587 18.56-74.752 0-30.763-6.357-55.765-18.56-75.563-12.843-19.797-28.16-30.037-46.763-30.037s-33.92 9.643-46.72 29.44-18.56 44.8-18.56 74.837c0 30.080 5.76 55.083 18.56 74.24 12.117 19.2 27.563 29.44 46.123 30.763z" />
+<glyph unicode="&#xe951;" d="M277.333 682.667h469.333v-469.333h-469.333v469.333z" />
+<glyph unicode="&#xe952;" d="M547.84 513.707l21.504-30.72 33.792 24.576v-178.176h36.864v233.472h-30.72z" />
+<glyph unicode="&#xe953;" glyph-name="microsoftoutlook" data-tags="microsoft-outlook" d="M1024 644.821v-447.061c0-9.813-3.413-18.091-10.155-24.576-6.741-6.571-15.019-9.813-24.747-9.813h-364.672v296.917l68.267-52.437c4.352-3.627 9.771-5.376 16.171-5.376 6.315 0 11.819 1.749 16.597 5.419zM624.427 731.051h364.672c9.003 0 16.768-2.688 23.168-8.192 6.4-5.461 9.984-12.8 10.581-21.76l-314.411-250.709-84.011 66.091zM571.904 923.136v-950.229l-571.904 98.816v749.867l571.989 101.547zM399.147 446.123c-0.853 48.341-13.355 88.405-37.504 120.064-23.68 31.573-54.4 48.256-90.923 49.664-35.157-1.408-65.237-18.048-89.6-49.664-24.32-31.659-36.48-71.765-37.12-120.064 0.64-47.659 13.44-87.339 37.76-119.083 24.363-31.573 54.357-48.341 89.643-50.176 36.48 1.493 67.157 18.091 91.52 49.92 24.32 31.915 37.12 71.68 37.76 119.339zM266.027 552.021c18.389-0.853 33.877-10.923 46.208-30.592 12.16-19.669 18.56-44.587 18.56-74.752 0-30.763-6.357-55.765-18.56-75.563-12.843-19.797-28.16-30.037-46.763-30.037s-33.92 9.643-46.72 29.44-18.56 44.8-18.56 74.837c0 30.080 5.76 55.083 18.56 74.24 12.117 19.2 27.563 29.44 46.123 30.763z" />
+<glyph unicode="&#xe954;" d="M489.451 453.44c13.333 12.245 21.611 29.227 21.611 47.979 0 37.269-32.704 67.584-72.896 67.584-34.176 0-63.403-21.525-71.040-52.331l35.349-8.981c3.52 14.165 18.517 24.448 35.691 24.448 20.096 0 36.459-13.781 36.459-30.72s-16.363-30.72-36.459-30.72h-21.269v-36.864h21.269c23.061 0 42.517-16.021 42.517-34.987 0-19.285-18.475-34.987-41.195-34.987-20.523 0-38.059 13.013-40.832 30.251l-35.989-5.888c5.589-34.901 38.613-61.227 76.8-61.227 42.816 0 77.653 32.235 77.653 71.851 0 21.824-10.752 41.408-27.669 54.592z" />
+<glyph unicode="&#xe955;" d="M725.333 64h-426.667l-21.333 85.333 21.333 85.333h426.667l21.333-85.333z" />
+<glyph unicode="&#xe956;" d="M810.667 213.333l85.333 21.333v426.667l-85.333 21.333-85.333-21.333v-426.667z" />
+<glyph unicode="&#xe957;" d="M725.333 661.333l21.333 85.333-21.333 85.333h-533.333c-35.349 0-64-28.651-64-64v-533.333l85.333-21.333 85.333 21.333v426.667h426.667z" />
+<glyph unicode="&#xe958;" d="M725.333 234.667v-170.667l170.667 170.667z" />
+<glyph unicode="&#xe959;" d="M832 832h-106.667v-170.667h170.667v106.667c0 35.349-28.651 64-64 64z" />
+<glyph unicode="&#xe95a;" d="M48.762 911.238h438.857v-438.857h-438.857v438.857z" />
+<glyph unicode="&#xe95b;" d="M48.762 423.619h438.857v-438.857h-438.857v438.857z" />
+<glyph unicode="&#xe95c;" d="M536.381 911.238h438.857v-438.857h-438.857v438.857z" />
+<glyph unicode="&#xe95d;" d="M536.381 423.619h438.857v-438.857h-438.857v438.857z" />
+<glyph unicode="&#xe95e;" d="M192 64h106.667v170.667h-170.667v-106.667c0-35.349 28.651-64 64-64z" />
 </font></defs></svg>

package/dist/components/atoms/buttons/OAuthProviderButton.css

@@ -22,9 +22,7 @@
 .oauth-provider-button.google {
   width: 100%;
   background: #ffffff;
-  box-shadow:
-    0px 2px 3px 0px #0000002b,
-    0px 0px 3px 0px #00000015;
+  box-shadow: 0px 2px 3px 0px #0000002b, 0px 0px 3px 0px #00000015;
 }
 
 .oauth-provider-button.google .label {
@@ -86,26 +84,6 @@
   padding-bottom: 0px;
 }
 
-.allaw-icon-google .path1:before {
-  content: "\e94a";
-  color: rgb(66, 133, 244);
-}
-.allaw-icon-google .path2:before {
-  content: "\e94b";
-  margin-left: -1em;
-  color: rgb(52, 168, 83);
-}
-.allaw-icon-google .path3:before {
-  content: "\e94c";
-  margin-left: -1em;
-  color: rgb(251, 188, 5);
-}
-.allaw-icon-google .path4:before {
-  content: "\e94d";
-  margin-left: -1em;
-  color: rgb(235, 67, 53);
-}
-
 .linkedin-icon-container {
   display: flex;
   align-items: center;
@@ -115,3 +93,28 @@
   border-radius: 4px;
   background: #ffffff;
 }
+
+.oauth-provider-button.microsoft {
+  font-family: "Segoe UI";
+  font-size: 15px;
+  font-weight: 600;
+  color: #5e5e5e;
+  background-color: #ffffff;
+  border: 1px solid #8c8c8c;
+  height: 41px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding-left: 12px;
+  padding-right: 12px;
+  cursor: pointer;
+  width: 100%;
+}
+
+.oauth-provider-button.microsoft:hover {
+  background-color: #f3f3f3;
+}
+
+.oauth-provider-button.microsoft:active {
+  background-color: #e5e5e5;
+}

package/dist/components/atoms/buttons/OAuthProviderButton.d.ts

@@ -2,8 +2,8 @@ import React from "react";
 import "./OAuthProviderButton.css";
 import "../../../styles/global.css";
 export interface OAuthProviderButtonProps {
-    provider: "google" | "apple" | "linkedin";
-    type: "login" | "signup";
+    provider: "google" | "apple" | "linkedin" | "microsoft";
+    type: "login" | "signup" | "calendar";
     url: string;
     size: 14 | 16 | 18 | 20 | 22 | 24;
     onClick?: () => void;

package/dist/components/atoms/buttons/OAuthProviderButton.js

@@ -10,20 +10,29 @@ var OAuthProviderButton = function (_a) {
             google: {
                 login: "Continuer avec Google",
                 signup: "S'inscrire avec Google",
+                calendar: "Google Calendar",
             },
             apple: {
                 login: "Continuer avec Apple",
                 signup: "S'inscrire avec Apple",
+                calendar: "Apple Calendar",
             },
             linkedin: {
                 login: "Continuer avec LinkedIn",
                 signup: "S'inscrire avec LinkedIn",
+                calendar: "Ajouter à l'Agenda",
+            },
+            microsoft: {
+                login: "Continuer avec Microsoft",
+                signup: "S'inscrire avec Microsoft",
+                calendar: "Microsoft Outlook",
             },
         };
         var shortLabels = {
             google: "Google",
             apple: "Apple",
             linkedin: "LinkedIn",
+            microsoft: "Microsoft",
         };
         return { labels: labels, shortLabels: shortLabels };
     };
@@ -48,6 +57,11 @@ var OAuthProviderButton = function (_a) {
     var updateLabel = function () {
         var _a, _b;
         var _c = getLabels(), labels = _c.labels, shortLabels = _c.shortLabels;
+        if (!labels[provider][type]) {
+            console.warn("Type \"".concat(type, "\" non pris en charge pour le provider \"").concat(provider, "\"."));
+            setLabel("Type inconnu");
+            return;
+        }
         var maxWidth = (_b = (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0;
         var thresholdWidth = getThresholdWidth(size);
         var newLabel = maxWidth < thresholdWidth
@@ -68,7 +82,6 @@ var OAuthProviderButton = function (_a) {
             }
         };
     }, [provider, type, size]);
-    // Force an update after the first render to ensure the correct label is set
     useEffect(function () {
         if (buttonRef.current) {
             updateLabel();
@@ -76,37 +89,57 @@ var OAuthProviderButton = function (_a) {
     }, []);
     var renderIcon = function () {
         var iconSizes = {
-            google: size * 0.8,
+            google: type === "calendar" ? size * 1.2 : size * 0.8,
             apple: size * 1.2,
             linkedin: size * 0.8,
+            microsoft: type === "calendar" ? size * 1.2 : size * 1.2,
         };
-        var iconClasses = {
+        var baseIconClass = {
             google: "allaw-icon-google",
             apple: "allaw-icon-apple",
             linkedin: "allaw-icon-linkedin",
+            microsoft: "allaw-icon-microsoft",
+        };
+        var calendarIconClass = {
+            google: "allaw-icon-google-calendar",
+            microsoft: "allaw-icon-microsoft-outlook",
         };
-        var iconSize = iconSizes[provider];
-        var iconClass = iconClasses[provider];
+        var iconClass = type === "calendar" && (provider === "google" || provider === "microsoft")
+            ? calendarIconClass[provider]
+            : baseIconClass[provider];
         if (provider === "google") {
-            return (React.createElement("span", { className: iconClass, style: { fontSize: "".concat(iconSize, "px") } },
+            var isCalendar = type === "calendar";
+            return (React.createElement("span", { className: iconClass, style: { fontSize: "".concat(iconSizes[provider], "px") } },
                 React.createElement("span", { className: "path1" }),
                 React.createElement("span", { className: "path2" }),
                 React.createElement("span", { className: "path3" }),
-                React.createElement("span", { className: "path4" })));
+                React.createElement("span", { className: "path4" }),
+                isCalendar && (React.createElement(React.Fragment, null,
+                    React.createElement("span", { className: "path5" }),
+                    React.createElement("span", { className: "path6" }),
+                    React.createElement("span", { className: "path7" }),
+                    React.createElement("span", { className: "path8" })))));
         }
         else if (provider === "linkedin") {
             var containerSize = size * 1.4;
             return (React.createElement("div", { className: "linkedin-icon-container", style: {
-                    fontSize: "".concat(iconSize, "px"),
+                    fontSize: "".concat(iconSizes[provider], "px"),
                     width: "".concat(containerSize, "px"),
                     height: "".concat(containerSize, "px"),
                     minWidth: "".concat(containerSize, "px"),
                     minHeight: "".concat(containerSize, "px"),
                 } },
-                React.createElement("i", { className: iconClass, style: { fontSize: "".concat(iconSize, "px") } })));
+                React.createElement("i", { className: iconClass, style: { fontSize: "".concat(iconSizes[provider], "px") } })));
+        }
+        else if (provider === "microsoft") {
+            return (React.createElement("span", { className: iconClass, style: { fontSize: "".concat(iconSizes[provider], "px") } },
+                React.createElement("span", { className: "path1" }),
+                React.createElement("span", { className: "path2" }),
+                React.createElement("span", { className: "path3" }),
+                React.createElement("span", { className: "path4" })));
         }
         else {
-            return (React.createElement("i", { className: iconClass, style: { fontSize: "".concat(iconSize, "px") } }));
+            return (React.createElement("i", { className: iconClass, style: { fontSize: "".concat(iconSizes[provider], "px") } }));
         }
     };
     var handleClick = function () {

package/dist/components/atoms/buttons/OAuthProviderButton.stories.d.ts

@@ -47,4 +47,10 @@ export const AppleLogin: any;
 export const AppleSignup: any;
 export const LinkedinLogin: any;
 export const LinkedinSignup: any;
+export const MicrosoftLogin: any;
+export const MicrosoftSignup: any;
+export const GoogleCalendar: any;
+export const AppleCalendar: any;
+export const LinkedinCalendar: any;
+export const MicrosoftCalendar: any;
 import OAuthProviderButton from "./OAuthProviderButton";

package/dist/components/atoms/buttons/OAuthProviderButton.stories.js

@@ -20,7 +20,7 @@ export default {
         provider: {
             control: {
                 type: "select",
-                options: ["google", "apple", "linkedin"],
+                options: ["google", "apple", "linkedin", "microsoft"],
             },
         },
         type: {
@@ -86,3 +86,45 @@ LinkedinSignup.args = {
     url: "https://linkedin.com/signup",
     size: 20,
 };
+export var MicrosoftLogin = Template.bind({});
+MicrosoftLogin.args = {
+    provider: "microsoft",
+    type: "login",
+    url: "https://microsoft.com",
+    size: 20,
+};
+export var MicrosoftSignup = Template.bind({});
+MicrosoftSignup.args = {
+    provider: "microsoft",
+    type: "signup",
+    url: "https://microsoft.com/signup",
+    size: 20,
+};
+export var GoogleCalendar = Template.bind({});
+GoogleCalendar.args = {
+    provider: "google",
+    type: "calendar",
+    url: "https://calendar.google.com/calendar/u/0/r/eventedit",
+    size: 20,
+};
+export var AppleCalendar = Template.bind({});
+AppleCalendar.args = {
+    provider: "apple",
+    type: "calendar",
+    url: "https://www.icloud.com/calendar",
+    size: 20,
+};
+export var LinkedinCalendar = Template.bind({});
+LinkedinCalendar.args = {
+    provider: "linkedin",
+    type: "calendar",
+    url: "#",
+    size: 20,
+};
+export var MicrosoftCalendar = Template.bind({});
+MicrosoftCalendar.args = {
+    provider: "microsoft",
+    type: "calendar",
+    url: "https://outlook.office.com/calendar",
+    size: 20,
+};

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

@@ -1,11 +1,13 @@
 import React from "react";
 import "../../../styles/global.css";
+import "../../../styles/icons.css";
 export interface SelectableListItemProps {
     label: string;
-    column2?: string;
-    column3?: 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

@@ -1,13 +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, 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("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)))));
+    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

@@ -1,4 +1,4 @@
-.selectableListItem {
+.container {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -11,103 +11,83 @@
   border-radius: 16px;
   background: #f4f7fb;
   width: 100%;
+  min-height: 48px;
 }
 
-@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;
-  }
+.withIcon {
+  flex-direction: row !important;
 }
 
-.selectableListItem:hover {
+.container:hover {
   background-color: #e6edf5;
 }
 
-.selectableListItemActive {
+.active {
   background: #e6edf5;
   outline: 1px solid #728ea7;
 }
 
-.selectableListItemIcon {
+.iconContainer {
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  background: #fff;
+  background: #ffffff;
   width: 24px;
   min-width: 25px;
   height: 24px;
   border: 1px solid #d1dce7;
 }
 
-@media (max-width: 767px) {
-  .selectableListItemIcon {
-    display: none;
-  }
+.activeIcon {
+  color: rgb(37, 190, 235);
+  font-size: 22px;
+  font-weight: 600;
+  width: 40px;
 }
 
-.selectableListItemActive .selectableListItemIcon {
-  padding: 3px;
-  border: 1px solid #d1dce7;
+.iconWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.selectableListItemActive .selectableListItemIconInner {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: #25beeb;
+.icon {
+  color: rgb(37, 190, 235);
+  font-size: 22px;
+  font-weight: 600;
+  width: 40px;
 }
 
-.selectableListItemLabel {
+.content {
   flex-grow: 1;
+}
+
+.label {
   font-family: "Open Sans", sans-serif;
-  font-size: 16px;
+
   font-style: normal;
-  line-height: 1.2;
+  font-weight: 600;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-height: calc(16px * 1.2 * 3);
+  max-height: calc(16px * 1.3 * 3);
   text-align: left;
+  font-size: 16px;
+  font-style: normal;
+  text-align: start;
+  line-height: normal;
 }
 
-.selectableListItemColumnsWrapper {
+.columnsWrapper {
   display: flex;
   gap: 12px;
 }
 
-.selectableListItemColumn2,
-.selectableListItemColumn3 {
+.duration,
+.price {
   flex-shrink: 0;
   text-align: right;
   font-family: "Open Sans", sans-serif;
@@ -119,25 +99,59 @@
   text-overflow: ellipsis;
 }
 
-.selectableListItemColumn2 {
+.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) {
-  .selectableListItemColumn2 {
-    text-align: left;
+  .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%;
   }
 }
 
-.selectableListItemColumn3 {
-  color: var(--noir, #171e25);
-  font-weight: 700;
-  width: 80px;
+@media (max-width: 575px) {
+  .duration {
+    text-align: left;
+  }
 }
 
 @media (max-width: 413px) {
-  .selectableListItemColumn3 {
+  .columnsWrapper {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .price {
     text-align: left;
   }
 }

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

@@ -10,9 +10,10 @@ declare namespace _default {
     export let excludeStories: RegExp;
     export namespace args {
         let label: string;
-        let column2: string;
-        let column3: string;
+        let duration: string;
+        let price: string;
         let isActive: boolean;
+        let icon: string;
     }
     export namespace parameters {
         namespace backgrounds {

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

@@ -20,7 +20,7 @@ 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), { 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",
@@ -46,7 +46,8 @@ export var Default = Template.bind({});
 export var Active = Template.bind({});
 Active.args = {
     label: "Adoption",
-    column2: "(35 min)",
-    column3: "100 €",
+    duration: "(35 min)",
+    price: "100 €",
     isActive: true,
+    icon: "allaw-icon-visio",
 };

package/dist/styles/icons.css

@@ -17,8 +17,7 @@ li {
 @font-face {
   font-family: "allaw-font";
   src: url("../assets/allaw-font.eot");
-  src:
-    url("../assets/allaw-font.eot?#iefix") format("embedded-opentype"),
+  src: url("../assets/allaw-font.eot?#iefix") format("embedded-opentype"),
     url("../assets/allaw-font.ttf") format("truetype"),
     url("../assets/allaw-font.woff") format("woff"),
     url("../assets/allaw-font.svg#allaw-font") format("svg");
@@ -46,315 +45,225 @@ li {
 .allaw-icon-cam:before {
   content: "\e942";
 }
-
-.allaw-icon-cam-outline:before {
+.allaw-icon-camOutline:before {
   content: "\e944";
 }
-
-.allaw-icon-hung-up:before {
-  content: "\e944";
+.allaw-icon-hungUp:before {
+  content: "\e945";
 }
-
 .allaw-icon-mic:before {
   content: "\e946";
 }
-
-.allaw-icon-mic-outline:before {
+.allaw-icon-micOutline:before {
   content: "\e947";
 }
-
-.allaw-icon-presentation:before {
+.allaw-icon-presIcon:before {
   content: "\e948";
 }
-
-.allaw-icon-presentation-outline:before {
+.allaw-icon-presIconOutline:before {
   content: "\e949";
 }
-
+.allaw-icon-visio:before {
+  content: "\e943";
+}
 .allaw-icon-verified:before {
   content: "\e90a";
 }
-
 .allaw-icon-logo:before {
   content: "\e941";
 }
-
 .allaw-icon-document:before {
   content: "\e915";
 }
-
 .allaw-icon-export:before {
   content: "\e916";
 }
-
-.allaw-icon-visio:before {
-  content: "\e943";
-}
-
-.allaw-icon-cam-off:before {
-  content: "\e946";
-}
-
-.allaw-icon-hung-up:before {
-  content: "\e945";
-}
-
-.allaw-icon-mic-off:before {
-  content: "\e944";
-}
-
 .allaw-icon-eye-off:before {
   content: "\e917";
 }
-
-.allaw-icon-visio::before {
-  content: "\e942";
-}
-
 .allaw-icon-arrow-up:before {
   content: "\e918";
 }
-
 .allaw-icon-file-not-found:before {
   content: "\e919";
 }
-
 .allaw-icon-arrow-left:before {
   content: "\e91a";
 }
-
 .allaw-icon-file:before {
   content: "\e91b";
 }
-
 .allaw-icon-archive:before {
   content: "\e91c";
 }
-
 .allaw-icon-arrow-right:before {
   content: "\e91d";
 }
-
 .allaw-icon-arrow-up-right:before {
   content: "\e91e";
 }
-
 .allaw-icon-calendar:before {
   content: "\e91f";
 }
-
 .allaw-icon-carefull:before {
   content: "\e920";
 }
-
 .allaw-icon-check-circle:before {
   content: "\e921";
 }
-
 .allaw-icon-check:before {
   content: "\e922";
 }
-
 .allaw-icon-chevron-down:before {
   content: "\e923";
 }
-
 .allaw-icon-chevron-left:before {
   content: "\e924";
 }
-
 .allaw-icon-chevron-right:before {
   content: "\e925";
 }
-
 .allaw-icon-chevron-up:before {
   content: "\e926";
 }
-
 .allaw-icon-deconnexion:before {
   content: "\e927";
 }
-
 .allaw-icon-download:before {
   content: "\e928";
 }
-
 .allaw-icon-edit-2:before {
   content: "\e929";
 }
-
 .allaw-icon-edit-3:before {
   content: "\e92a";
 }
-
 .allaw-icon-encrypted-file:before {
   content: "\e92b";
 }
-
 .allaw-icon-external-link:before {
   content: "\e92c";
 }
-
 .allaw-icon-eye:before {
   content: "\e92d";
 }
-
 .allaw-icon-folder:before {
   content: "\e92e";
 }
-
 .allaw-icon-grid:before {
   content: "\e92f";
 }
-
 .allaw-icon-help-circle:before {
   content: "\e930";
 }
-
 .allaw-icon-home:before {
   content: "\e931";
 }
-
 .allaw-icon-inbox:before {
   content: "\e932";
 }
-
 .allaw-icon-info:before {
   content: "\e933";
 }
-
 .allaw-icon-link-off:before {
   content: "\e934";
 }
-
 .allaw-icon-link:before {
   content: "\e935";
 }
-
 .allaw-icon-loader:before {
   content: "\e936";
 }
-
 .allaw-icon-lock:before {
   content: "\e937";
 }
-
 .allaw-icon-map-pin:before {
   content: "\e938";
 }
-
 .allaw-icon-map:before {
   content: "\e939";
 }
-
 .allaw-icon-more-vertical:before {
   content: "\e93a";
 }
-
 .allaw-icon-play-circle:before {
   content: "\e93b";
 }
-
 .allaw-icon-refresh-cw:before {
   content: "\e93c";
 }
-
 .allaw-icon-rss:before {
   content: "\e93d";
 }
-
 .allaw-icon-search:before {
   content: "\e93e";
 }
-
 .allaw-icon-settings:before {
   content: "\e93f";
 }
-
 .allaw-icon-share:before {
   content: "\e940";
 }
-
 .allaw-icon-contact-support:before {
   content: "\e900";
 }
-
 .allaw-icon-phone:before {
   content: "\e901";
 }
-
 .allaw-icon-user:before {
   content: "\e902";
 }
-
 .allaw-icon-users:before {
   content: "\e903";
 }
-
 .allaw-icon-add:before {
   content: "\e904";
 }
-
 .allaw-icon-warning:before {
   content: "\e905";
 }
-
 .allaw-icon-website:before {
   content: "\e906";
 }
-
 .allaw-icon-close:before {
   content: "\e907";
 }
-
 .allaw-icon-carefull1:before {
   content: "\e908";
 }
-
 .allaw-icon-loading:before {
   content: "\e909";
 }
-
 .allaw-icon-near-me:before {
   content: "\e90b";
 }
-
 .allaw-icon-filter:before {
   content: "\e90c";
 }
-
 .allaw-icon-clock:before {
   content: "\e90d";
 }
-
 .allaw-icon-pmr:before {
   content: "\e90e";
 }
-
 .allaw-icon-prestation:before {
   content: "\e90f";
 }
-
 .allaw-icon-mail:before {
   content: "\e910";
 }
-
 .allaw-icon-upload-file:before {
   content: "\e911";
 }
-
 .allaw-icon-burger:before {
   content: "\e912";
 }
-
 .allaw-icon-star-fill:before {
   content: "\e913";
 }
-
 .allaw-icon-star-unfill:before {
   content: "\e914";
 }
-
 .allaw-icon-google .path1:before {
   content: "\e94a";
   color: rgb(66, 133, 244);
@@ -374,15 +283,75 @@ li {
   margin-left: -1em;
   color: rgb(235, 67, 53);
 }
-
 .allaw-icon-apple:before {
   content: "\e94e";
 }
-
-.allaw-icon-linkedin:before {
-  content: "\e94e";
-}
-
 .allaw-icon-linkedin:before {
   content: "\e94f";
 }
+.allaw-icon-microsoft-outlook:before {
+  content: "\e950";
+  color: #0072c6;
+}
+.allaw-icon-google-calendar .path1:before {
+  content: "\e951";
+  color: rgb(255, 255, 255);
+}
+.allaw-icon-google-calendar .path2:before {
+  content: "\e952";
+  margin-left: -1em;
+  color: rgb(66, 133, 244);
+}
+.allaw-icon-google-calendar .path3:before {
+  content: "\e954";
+  margin-left: -1em;
+  color: rgb(25, 103, 210);
+}
+.allaw-icon-google-calendar .path4:before {
+  content: "\e955";
+  margin-left: -1em;
+  color: rgb(251, 188, 4);
+}
+.allaw-icon-google-calendar .path5:before {
+  content: "\e956";
+  margin-left: -1em;
+  color: rgb(24, 128, 56);
+}
+.allaw-icon-google-calendar .path6:before {
+  content: "\e957";
+  margin-left: -1em;
+  color: rgb(52, 168, 83);
+}
+.allaw-icon-google-calendar .path7:before {
+  content: "\e958";
+  margin-left: -1em;
+  color: rgb(234, 67, 53);
+}
+.allaw-icon-google-calendar .path8:before {
+  content: "\e959";
+  margin-left: -1em;
+  color: none;
+}
+.allaw-icon-microsoft .path1:before {
+  content: "\e95a";
+  color: rgb(242, 80, 34);
+}
+.allaw-icon-microsoft .path2:before {
+  content: "\e95b";
+  margin-left: -1em;
+  color: rgb(0, 164, 239);
+}
+.allaw-icon-microsoft .path3:before {
+  content: "\e95c";
+  margin-left: -1em;
+  color: rgb(127, 186, 0);
+}
+.allaw-icon-microsoft .path4:before {
+  content: "\e95d";
+  margin-left: -1em;
+  color: rgb(255, 185, 0);
+}
+.allaw-icon-microsoftoutlook:before {
+  content: "\e953";
+  color: #0072c6;
+}

package/package.json

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