allaw-ui 4.1.2 → 4.1.4

package/dist/components/molecules/proSwitch/ProSwitchModal.stories.js

@@ -0,0 +1,194 @@
+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);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React, { useState } from "react";
+import { action } from "@storybook/addon-actions";
+import ProSwitchModal from "./ProSwitchModal";
+import "../../../styles/global.css";
+export default {
+    title: "Components/Molecules/ProSwitch/ProSwitchModal",
+    component: ProSwitchModal,
+    tags: ["autodocs"],
+    argTypes: {
+        open: { control: false },
+        pros: { control: false },
+        selected: { control: false },
+        mode: { control: { type: "select", options: ["single", "multiple"] } },
+        onClosePortal: { action: "close" },
+        onOpenPortal: { action: "open" },
+        onOrderChange: { action: "orderChange" },
+        onSelect: { action: "select" },
+    },
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "figma", value: "#404040" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+    },
+};
+var samplePros = [
+    {
+        token: "t1",
+        proUserId: "1",
+        name: "Dupont",
+        firstName: "Jean",
+        profilePictureLink: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face",
+        profession: "AVOCAT",
+    },
+    {
+        token: "t2",
+        proUserId: "2",
+        name: "Martin",
+        firstName: "Marie",
+        profilePictureLink: "",
+        profession: "NOTAIRE",
+    },
+    {
+        token: "t3",
+        proUserId: "3",
+        name: "Durand",
+        firstName: "Pierre",
+        profilePictureLink: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face",
+        profession: "AVOCAT",
+    },
+    {
+        token: "t4",
+        proUserId: "4",
+        name: "Bernard",
+        firstName: "Sophie",
+        profilePictureLink: "",
+        profession: "COMMISSAIRE",
+    },
+    {
+        token: "t5",
+        proUserId: "5",
+        name: "Petit",
+        firstName: "Lucas",
+        profilePictureLink: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=150&h=150&fit=crop&crop=face",
+        profession: "AVOCAT",
+    },
+    {
+        token: "t6",
+        proUserId: "6",
+        name: "Rousseau",
+        firstName: "Emma",
+        profilePictureLink: "",
+        profession: "NOTAIRE",
+    },
+    {
+        token: "t7",
+        proUserId: "7",
+        name: "Leroy",
+        firstName: "François",
+        profilePictureLink: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=150&h=150&fit=crop&crop=face",
+        profession: "AVOCAT",
+    },
+    {
+        token: "t8",
+        proUserId: "8",
+        name: "Moreau",
+        firstName: "Alice",
+        profilePictureLink: "",
+        profession: "COMMISSAIRE",
+    },
+];
+var Template = function (args) {
+    var _a = useState(true), open = _a[0], setOpen = _a[1];
+    var initialPros = args.pros || samplePros;
+    var _b = useState(args.selected && args.selected.length > 0
+        ? args.selected
+        : initialPros.slice(0, 2).map(function (p) { return p.proUserId; })), selected = _b[0], setSelected = _b[1];
+    var _c = useState(initialPros.map(function (p) { return p.proUserId; })), order = _c[0], setOrder = _c[1];
+    var handleOrderChange = function (newOrderPros) {
+        setOrder(newOrderPros.map(function (p) { return p.proUserId; }));
+        action("onOrderChange")(newOrderPros);
+    };
+    var handleSelect = function (selectedPros) {
+        setSelected(selectedPros.map(function (p) { return p.proUserId; }));
+        action("onSelect")(selectedPros);
+    };
+    return (React.createElement("div", null,
+        React.createElement("button", { onClick: function () { return setOpen(true); }, style: { marginBottom: 16 } }, "Ouvrir la modal"),
+        React.createElement(ProSwitchModal, __assign({}, args, { open: open, pros: initialPros.filter(function (p) { return order.includes(p.proUserId); }), selected: selected, onOrderChange: handleOrderChange, onSelect: handleSelect, onClosePortal: function () { return setOpen(false); }, onOpenPortal: action("onOpenPortal") }))));
+};
+export var Default = Template.bind({});
+Default.args = {
+    mode: "multiple",
+};
+export var Single = Template.bind({});
+Single.args = {
+    mode: "single",
+};
+export var Reorder = Template.bind({});
+Reorder.args = {
+    mode: "multiple",
+};
+export var Scroll = Template.bind({});
+Scroll.args = {
+    mode: "multiple",
+    pros: __spreadArray(__spreadArray(__spreadArray([], samplePros, true), samplePros.map(function (p, i) { return (__assign(__assign({}, p), { proUserId: "x" + (i + 1) })); }), true), samplePros.map(function (p, i) { return (__assign(__assign({}, p), { proUserId: "y" + (i + 1) })); }), true),
+};
+export var FallbackInitiales = Template.bind({});
+FallbackInitiales.args = {
+    mode: "multiple",
+    pros: samplePros.map(function (p) { return (__assign(__assign({}, p), { profilePictureLink: "" })); }),
+};
+export var Responsive = Template.bind({});
+Responsive.args = {
+    mode: "multiple",
+    pros: samplePros,
+};
+export var ResponsiveMobile = Template.bind({});
+ResponsiveMobile.args = {
+    mode: "multiple",
+};
+ResponsiveMobile.parameters = {
+    viewport: {
+        defaultViewport: "mobile1",
+    },
+    layout: "fullscreen",
+};
+export var FewProfiles = Template.bind({});
+FewProfiles.args = {
+    mode: "multiple",
+    pros: [
+        {
+            token: "t1",
+            proUserId: "1",
+            name: "Dupont",
+            firstName: "Jean",
+            profilePictureLink: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face",
+            profession: "AVOCAT",
+        },
+        {
+            token: "t2",
+            proUserId: "2",
+            name: "Martin",
+            firstName: "Marie",
+            profilePictureLink: "",
+            profession: "NOTAIRE",
+        },
+    ],
+};

package/dist/components/molecules/proSwitch/avatarBubble.module.css

@@ -0,0 +1,116 @@
+.avatarBubble {
+  position: relative;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background-color: var(--tag-light-grey, #e6edf5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  outline: none;
+}
+
+.avatarBubble:hover {
+  transform: translateY(-5px);
+  z-index: 10;
+}
+
+.avatarBubble:focus-visible {
+  outline: 2px solid var(--bleu-allaw, #25beeb);
+  outline-offset: 2px;
+}
+
+/* État désactivé */
+.avatarBubble[data-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  filter: grayscale(100%);
+}
+
+.avatarBubble[data-disabled="true"]:hover {
+  transform: none;
+}
+
+.avatarBubble[data-disabled="true"]:focus-visible {
+  outline: none;
+}
+
+/* Désactiver l'animation au hover */
+.avatarBubble.noHoverAnimation:hover,
+.avatarBubble[data-disable-hover-animation="true"]:hover {
+  transform: none;
+}
+
+.avatarBubble.noHoverAnimation[data-selected="true"]:hover,
+.avatarBubble[data-disable-hover-animation="true"][data-selected="true"]:hover {
+  transform: none;
+}
+
+/* Conteneur d'image */
+.imageContainer {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+/* Initiales */
+.initials {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--noir, #171e25);
+  font-family: var(--font-open-sans, "Open Sans");
+  font-weight: 600;
+  font-size: inherit;
+  text-align: center;
+  line-height: 1;
+  user-select: none;
+}
+
+/* Responsive breakpoints */
+@media (max-width: 640px) {
+  .avatarBubble {
+    /* Styles spécifiques mobile si nécessaire */
+  }
+}
+
+@media (min-width: 1024px) {
+  .avatarBubble {
+    /* Styles spécifiques desktop si nécessaire */
+  }
+}
+
+.thin {
+  border: 2px solid var(--tag-light-grey, #e6edf5);
+}
+
+.thick {
+  border: 4px solid var(--tag-light-grey, #e6edf5);
+}
+
+.selectedThin {
+  border: 2px solid var(--bleu-allaw, #25beeb);
+  box-shadow: 0px 0px 4px rgba(37, 190, 235, 0.5);
+  z-index: 5;
+}
+
+.selectedThick {
+  border: 4px solid var(--bleu-allaw, #25beeb);
+  box-shadow: 0px 0px 4px rgba(37, 190, 235, 0.5);
+  z-index: 5;
+}

package/dist/components/molecules/proSwitch/avatarToggleGroup.module.css

@@ -0,0 +1,183 @@
+.proSwitch {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-left: 12px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  height: 61px; /* 45 + 8*2 */
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+  overflow: visible;
+}
+
+.proSwitch[data-disabled="true"] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.proSwitch[data-disabled="true"] .avatarStack,
+.proSwitch[data-disabled="true"] .moreButton {
+  cursor: not-allowed;
+}
+
+/* Stack d'avatars avec chevauchement */
+.avatarStack {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  overflow: visible;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.avatarWrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease;
+  /* z-index dynamique dans le style inline du composant */
+}
+
+.avatarWrapper:hover {
+  transform: translateY(-2px);
+  z-index: 101;
+}
+
+/* Supprime le ring focus sur le wrapper, laisse le ring bleu uniquement sur l'avatar sélectionné */
+.avatarWrapper:focus-within {
+  outline: none;
+}
+
+/* Bouton +X pour les pros cachés */
+.moreButton {
+  width: 42.5px;
+  height: 42.5px;
+  border-radius: 50%;
+  background-color: var(--dark-grey, #456073);
+  color: white;
+  border: 3px solid var(--tag-light-grey, #e6edf5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-family: var(--font-open-sans, "Open Sans");
+  font-weight: 600;
+  font-size: 14px;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+  margin-left: -8px;
+  z-index: 5;
+}
+
+.moreButton:hover {
+  background-color: var(--mid-grey, #728ea7);
+  transform: translateY(-2px);
+  z-index: 15;
+}
+
+.moreButton:focus-visible {
+  outline: 2px solid var(--bleu-allaw, #25beeb);
+  outline-offset: 2px;
+}
+
+.moreButton:active {
+  transform: translateY(0);
+}
+
+.moreButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* État focus pour la navigation clavier */
+.focused {
+  outline: 2px solid var(--bleu-allaw, #25beeb);
+  outline-offset: 2px;
+  border-radius: 50%;
+}
+
+/* Responsive breakpoints */
+@media (max-width: 640px) {
+  .proSwitch {
+    height: 40px;
+    padding-left: 8px;
+  }
+
+  .moreButton {
+    width: 32px;
+    height: 32px;
+    font-size: 12px;
+    margin-left: -6px;
+  }
+
+  /* Ajuster la taille des avatars en mobile */
+  .avatarWrapper .avatarBubble {
+    width: 32px !important;
+    height: 32px !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .proSwitch {
+    height: 50px;
+    padding-left: 16px;
+  }
+
+  .moreButton {
+    width: 56px;
+    height: 56px;
+    font-size: 16px;
+    margin-left: -10px;
+  }
+
+  /* Ajuster la taille des avatars en desktop */
+  .avatarWrapper .avatarBubble {
+    width: 56px !important;
+    height: 56px !important;
+  }
+}
+
+/* Animation pour les transitions d'état */
+.avatarWrapper,
+.moreButton {
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Support pour les lecteurs d'écran */
+.proSwitch[role="group"] {
+  /* Assure que le groupe est bien annoncé */
+}
+
+/* Amélioration de l'accessibilité pour le focus */
+.proSwitch:focus-within {
+  /* Le focus est géré au niveau des éléments enfants */
+}
+
+/* États spéciaux pour les interactions tactiles */
+@media (hover: none) and (pointer: coarse) {
+  .avatarWrapper:hover,
+  .moreButton:hover {
+    transform: none;
+  }
+
+  .avatarWrapper:active,
+  .moreButton:active {
+    transform: scale(0.95);
+  }
+}
+
+/* Optimisation pour les écrans haute densité */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  .avatarWrapper,
+  .moreButton {
+    /* Assure une netteté optimale sur les écrans Retina */
+    image-rendering: -webkit-optimize-contrast;
+    image-rendering: crisp-edges;
+  }
+}

package/dist/components/molecules/proSwitch/proSwitch.module.css

@@ -0,0 +1,32 @@
+.proSwitchContainer {
+  width: 100%;
+  position: relative;
+  padding: 8px 0;
+  display: flex;
+  align-items: center;
+}
+
+.avatarToggleGroup {
+  margin: 0;
+  padding: 0;
+}
+
+.proSwitchEmpty {
+  width: 100%;
+  text-align: center;
+  color: #728ea7;
+  font-size: 16px;
+  padding: 24px 0;
+  font-family: var(--font-open-sans, "Open Sans");
+  background: #f8fafc;
+}
+
+@media (max-width: 640px) {
+  .proSwitchContainer {
+    padding: 8px 0;
+  }
+  .proSwitchEmpty {
+    font-size: 15px;
+    padding: 20px 0;
+  }
+}