allaw-ui 2.9.7 → 2.9.9

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

@@ -5,6 +5,26 @@
   row-gap: 1.5rem;
 }
 
+/* Styles pour la taille small */
+.tab-navigation.small {
+  width: 100%;
+  overflow-x: auto;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  justify-content: flex-start;
+  padding-bottom: 4px; /* Pour éviter que la barre de défilement ne coupe le contenu */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+.tab-navigation.small::-webkit-scrollbar {
+  display: none; /* Cache la barre de défilement pour Chrome, Safari, etc. */
+}
+
+.tab-navigation.small .tab-item {
+  flex: 0 0 auto;
+}
+
 .tab-navigation.small .tab-label {
   font-size: 14px;
 }
@@ -24,22 +44,48 @@
   position: relative;
 }
 
+.tab-navigation.small .tab-item {
+  display: flex;
+  padding: 0px 12px 8px 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  position: relative;
+}
+
 .tab-navigation.normal .tab-item.active {
   border-bottom: 3px solid #000;
   padding-bottom: 10px;
   color: var(--Primary-Mid-black, var(--primary-black, #171e25));
 }
 
+.tab-navigation.small .tab-item.active {
+  border-bottom: 2px solid #000;
+  padding-bottom: 8px;
+  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
+}
+
 .tab-navigation.normal .tab-item.inactive {
   border-bottom: 3px solid var(--grey-venom, #e6edf5);
   color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
 }
 
+.tab-navigation.small .tab-item.inactive {
+  border-bottom: 2px solid var(--grey-venom, #e6edf5);
+  color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
+}
+
 .tab-navigation.normal .tab-item.inactive:hover {
   border-bottom: 3px solid var(--venom-grey-dark, #d1dce8);
   color: var(--Tags-Mid-grey, var(--dark-grey, #456073));
 }
 
+.tab-navigation.small .tab-item.inactive:hover {
+  border-bottom: 2px solid var(--venom-grey-dark, #d1dce8);
+  color: var(--Tags-Mid-grey, var(--dark-grey, #456073));
+}
+
 /* Style round */
 .tab-navigation.tab-navigation--round {
   padding: 4px;
@@ -58,6 +104,10 @@
   border-radius: 6px;
 }
 
+.tab-navigation.tab-navigation--round.small .tab-item {
+  padding: 6px 12px;
+}
+
 .tab-navigation.tab-navigation--round .tab-item.active {
   background: var(--dark-grey, #456073);
   color: var(--pure-white, #fff);
@@ -67,6 +117,12 @@
   border: 1px solid var(--dark-grey, #456073);
 }
 
+.tab-navigation.tab-navigation--round.small .tab-item.active {
+  height: 28px;
+  padding: 8px 16px;
+  border-radius: 14px;
+}
+
 .tab-navigation.tab-navigation--round .tab-item.active:hover {
   background: #3c5364;
   color: var(--pure-white, #fff);
@@ -81,13 +137,18 @@
   border: 1px solid var(--grey-venom, #e6edf5);
 }
 
+.tab-navigation.tab-navigation--round.small .tab-item.inactive {
+  height: 28px;
+  padding: 8px 16px;
+  border-radius: 14px;
+}
+
 .tab-navigation.tab-navigation--round .tab-item.inactive:hover {
   background: #e6edf5;
 }
 
 .tab-label {
   font-family: "Open Sans", sans-serif;
-  font-size: 14px;
   font-style: normal;
   font-weight: 500;
   line-height: 1;
@@ -107,6 +168,17 @@
   top: 7px;
 }
 
+.tab-navigation.small .tab-notification-dot {
+  top: 5px;
+  right: 8px;
+  width: 4px;
+  height: 4px;
+}
+
 .tab-navigation.tab-navigation--round .tab-notification-dot {
   top: 15px;
 }
+
+.tab-navigation.tab-navigation--round.small .tab-notification-dot {
+  top: 10px;
+}

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

@@ -1,9 +1,27 @@
-import React from "react";
+import React, { useRef, useEffect, useState } from "react";
 import "./TabNavigation.css";
 import "../../../styles/global.css";
 var TabNavigation = function (_a) {
     var tabs = _a.tabs, onTabClick = _a.onTabClick, _b = _a.size, size = _b === void 0 ? "normal" : _b, _c = _a.variant, variant = _c === void 0 ? "normal" : _c;
-    return (React.createElement("div", { className: "tab-navigation ".concat(size, " ").concat(variant === "round" ? "tab-navigation--round" : "") }, tabs.map(function (tab, index) { return (React.createElement("div", { key: index, className: "tab-item ".concat(tab.isActive ? "active" : "inactive"), onClick: function () { return onTabClick(index); } },
+    var navRef = useRef(null);
+    var _d = useState(null), activeTabElement = _d[0], setActiveTabElement = _d[1];
+    // Scroll to active tab when it changes
+    useEffect(function () {
+        if (size === "small" && navRef.current && activeTabElement) {
+            var navWidth = navRef.current.offsetWidth;
+            var tabOffset = activeTabElement.offsetLeft;
+            var tabWidth = activeTabElement.offsetWidth;
+            // Center the active tab in the navigation
+            navRef.current.scrollLeft = tabOffset - navWidth / 2 + tabWidth / 2;
+        }
+    }, [activeTabElement, size]);
+    // Set active tab element reference
+    var setTabRef = function (element, isActive) {
+        if (element && isActive) {
+            setActiveTabElement(element);
+        }
+    };
+    return (React.createElement("div", { ref: navRef, className: "tab-navigation ".concat(size, " ").concat(variant === "round" ? "tab-navigation--round" : "") }, tabs.map(function (tab, index) { return (React.createElement("div", { key: index, ref: function (el) { return setTabRef(el, tab.isActive); }, className: "tab-item ".concat(tab.isActive ? "active" : "inactive"), onClick: function () { return onTabClick(index); } },
         React.createElement("span", { className: "tab-label" }, tab.label),
         tab.hasNotification && React.createElement("span", { className: "tab-notification-dot" }))); })));
 };

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

@@ -35,10 +35,45 @@ declare namespace _default {
                 value: string;
             }[];
         }
+        namespace viewport {
+            namespace viewports {
+                namespace mobile {
+                    let name: string;
+                    namespace styles {
+                        let width: string;
+                        let height: string;
+                    }
+                }
+                namespace tablet {
+                    let name_1: string;
+                    export { name_1 as name };
+                    export namespace styles_1 {
+                        let width_1: string;
+                        export { width_1 as width };
+                        let height_1: string;
+                        export { height_1 as height };
+                    }
+                    export { styles_1 as styles };
+                }
+                namespace desktop {
+                    let name_2: string;
+                    export { name_2 as name };
+                    export namespace styles_2 {
+                        let width_2: string;
+                        export { width_2 as width };
+                        let height_2: string;
+                        export { height_2 as height };
+                    }
+                    export { styles_2 as styles };
+                }
+            }
+        }
     }
 }
 export default _default;
 export const Default: any;
+export const Small: any;
 export const Round: any;
 export const SmallRound: any;
+export const ManyTabsSmall: any;
 import TabNavigation from "./TabNavigation";

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

@@ -45,6 +45,31 @@ export default {
                 { name: "dark", value: "#171e25" },
             ],
         },
+        viewport: {
+            viewports: {
+                mobile: {
+                    name: "Mobile",
+                    styles: {
+                        width: "375px",
+                        height: "667px",
+                    },
+                },
+                tablet: {
+                    name: "Tablet",
+                    styles: {
+                        width: "768px",
+                        height: "1024px",
+                    },
+                },
+                desktop: {
+                    name: "Desktop",
+                    styles: {
+                        width: "1280px",
+                        height: "800px",
+                    },
+                },
+            },
+        },
     },
 };
 var Template = function (args) { return React.createElement(TabNavigation, __assign({}, args)); };
@@ -60,7 +85,40 @@ Default.args = {
     size: "normal",
     variant: "normal",
 };
+export var Small = Template.bind({});
+Small.args = __assign(__assign({}, Default.args), { size: "small" });
+Small.parameters = {
+    viewport: {
+        defaultViewport: "mobile",
+    },
+};
 export var Round = Template.bind({});
 Round.args = __assign(__assign({}, Default.args), { variant: "round" });
 export var SmallRound = Template.bind({});
 SmallRound.args = __assign(__assign({}, Default.args), { size: "small", variant: "round" });
+SmallRound.parameters = {
+    viewport: {
+        defaultViewport: "mobile",
+    },
+};
+// Démonstration avec beaucoup d'onglets pour montrer le défilement horizontal
+export var ManyTabsSmall = Template.bind({});
+ManyTabsSmall.args = {
+    tabs: [
+        { label: "Tous", isActive: true, hasNotification: false },
+        { label: "Notes", isActive: false, hasNotification: false },
+        { label: "Documents", isActive: false, hasNotification: true },
+        { label: "Factures", isActive: false, hasNotification: false },
+        { label: "Messages", isActive: false, hasNotification: false },
+        { label: "Contrats", isActive: false, hasNotification: false },
+        { label: "Clients", isActive: false, hasNotification: false },
+    ],
+    onTabClick: function (index) { return console.log("Tab ".concat(index, " cliqu\u00E9")); },
+    size: "small",
+    variant: "normal",
+};
+ManyTabsSmall.parameters = {
+    viewport: {
+        defaultViewport: "mobile",
+    },
+};

package/dist/components/atoms/typography/Link.d.ts

@@ -9,6 +9,7 @@ export interface LinkProps {
     className?: string;
     onClick?: () => void;
     isUnderline?: boolean;
+    hasHoverColor?: boolean;
 }
 declare const Link: React.FC<LinkProps>;
 export default Link;

package/dist/components/atoms/typography/Link.js

@@ -13,7 +13,7 @@ import React from "react";
 import styles from "./Link.module.css";
 import { convertToHtml } from "../../../utils/utils";
 var Link = function (_a) {
-    var variant = _a.variant, color = _a.color, text = _a.text, maxLines = _a.maxLines, maxChars = _a.maxChars, _b = _a.size, size = _b === void 0 ? "default" : _b, className = _a.className, onClick = _a.onClick, _c = _a.isUnderline, isUnderline = _c === void 0 ? false : _c;
+    var variant = _a.variant, color = _a.color, text = _a.text, maxLines = _a.maxLines, maxChars = _a.maxChars, _b = _a.size, size = _b === void 0 ? "default" : _b, className = _a.className, onClick = _a.onClick, _c = _a.isUnderline, isUnderline = _c === void 0 ? false : _c, _d = _a.hasHoverColor, hasHoverColor = _d === void 0 ? false : _d;
     var truncateText = function (text, maxChars) {
         if (text.length <= maxChars)
             return text;
@@ -23,7 +23,7 @@ var Link = function (_a) {
     var truncatedText = maxChars ? truncateText(htmlText, maxChars) : htmlText;
     var isClickable = typeof onClick === "function";
     var colorClassName = color ? "color-".concat(color) : "";
-    return (React.createElement("div", { className: "".concat(styles.link, " ").concat(styles[variant], " ").concat(size === "small" ? styles["link-small"] : "", " ").concat(className || "", " ").concat(isClickable ? styles.pointer : "", " ").concat(styles[colorClassName], " ").concat(isUnderline ? styles.underline : ""), style: __assign({ whiteSpace: "pre-line" }, (maxLines
+    return (React.createElement("div", { className: "".concat(styles.link, " ").concat(styles[variant], " ").concat(size === "small" ? styles["link-small"] : "", " ").concat(className || "", " ").concat(isClickable ? styles.pointer : "", " ").concat(styles[colorClassName], " ").concat(isUnderline ? styles.underline : "", " ").concat(hasHoverColor ? styles.hoverColor : ""), style: __assign({ whiteSpace: "pre-line" }, (maxLines
             ? {
                 WebkitLineClamp: maxLines,
                 display: "-webkit-box",

package/dist/components/atoms/typography/Link.module.css

@@ -61,6 +61,17 @@
 
 .underline:hover {
   text-decoration: underline;
+  text-underline-offset: 5px;
+  text-decoration-thickness: 1px;
+}
+
+.hoverColor:hover {
+  color: var(--bleu-allaw, #25beeb) !important;
+}
+
+.hoverColor.underline:hover {
+  text-decoration: underline;
+  text-decoration-color: var(--bleu-allaw, #25beeb);
   text-underline-offset: 7px;
   text-decoration-thickness: 1px;
 }

package/dist/components/atoms/typography/Link.stories.d.ts

@@ -36,6 +36,12 @@ declare namespace _default {
             export { control_4 as control };
             export let description: string;
         }
+        namespace hasHoverColor {
+            let control_5: string;
+            export { control_5 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
         namespace onClick {
             let action: string;
         }
@@ -61,4 +67,6 @@ export const MediumSmall: any;
 export const ClickableLink: any;
 export const UnderlinedLink: any;
 export const ClickableUnderlinedLink: any;
+export const HoverColorLink: any;
+export const HoverColorUnderlinedLink: any;
 import Link from "./Link";

package/dist/components/atoms/typography/Link.stories.js

@@ -42,6 +42,10 @@ export default {
             control: "boolean",
             description: "Ajoute un soulignement au survol",
         },
+        hasHoverColor: {
+            control: "boolean",
+            description: "Change la couleur du texte en bleu au survol",
+        },
         onClick: { action: "clicked" },
     },
     parameters: {
@@ -64,6 +68,7 @@ Bold.args = {
     text: "Open Sans - Bold - 16px",
     size: "default",
     isUnderline: false,
+    hasHoverColor: false,
 };
 export var SemiBold = Template.bind({});
 SemiBold.args = {
@@ -72,6 +77,7 @@ SemiBold.args = {
     text: "Open Sans - SemiBold - 16px",
     size: "default",
     isUnderline: false,
+    hasHoverColor: false,
 };
 export var Medium = Template.bind({});
 Medium.args = {
@@ -80,6 +86,7 @@ Medium.args = {
     text: "Open Sans - Medium - 16px",
     size: "default",
     isUnderline: false,
+    hasHoverColor: false,
 };
 export var BoldSmall = Template.bind({});
 BoldSmall.args = {
@@ -88,6 +95,7 @@ BoldSmall.args = {
     text: "Open Sans - Bold - 12px",
     size: "small",
     isUnderline: false,
+    hasHoverColor: false,
 };
 export var SemiBoldSmall = Template.bind({});
 SemiBoldSmall.args = {
@@ -96,6 +104,7 @@ SemiBoldSmall.args = {
     text: "Open Sans - SemiBold - 12px",
     size: "small",
     isUnderline: false,
+    hasHoverColor: false,
 };
 export var MediumSmall = Template.bind({});
 MediumSmall.args = {
@@ -104,6 +113,7 @@ MediumSmall.args = {
     text: "Open Sans - Medium - 12px",
     size: "small",
     isUnderline: false,
+    hasHoverColor: false,
 };
 export var ClickableLink = Template.bind({});
 ClickableLink.args = {
@@ -113,6 +123,7 @@ ClickableLink.args = {
     size: "small",
     onClick: function () { return console.log("Linke cliqué"); },
     isUnderline: false,
+    hasHoverColor: false,
 };
 export var UnderlinedLink = Template.bind({});
 UnderlinedLink.args = {
@@ -121,6 +132,7 @@ UnderlinedLink.args = {
     text: "Survolez-moi pour voir le soulignement",
     size: "default",
     isUnderline: true,
+    hasHoverColor: false,
 };
 export var ClickableUnderlinedLink = Template.bind({});
 ClickableUnderlinedLink.args = {
@@ -130,4 +142,23 @@ ClickableUnderlinedLink.args = {
     size: "small",
     onClick: function () { return console.log("Lien cliqué"); },
     isUnderline: true,
+    hasHoverColor: false,
+};
+export var HoverColorLink = Template.bind({});
+HoverColorLink.args = {
+    variant: "semiBold",
+    color: "mid-grey",
+    text: "Survolez-moi pour changer la couleur",
+    size: "default",
+    isUnderline: false,
+    hasHoverColor: true,
+};
+export var HoverColorUnderlinedLink = Template.bind({});
+HoverColorUnderlinedLink.args = {
+    variant: "semiBold",
+    color: "dark-grey",
+    text: "Survolez-moi pour changer la couleur et voir le soulignement",
+    size: "default",
+    isUnderline: true,
+    hasHoverColor: true,
 };

package/package.json

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