allaw-ui 1.0.166 → 1.0.169

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

@@ -73,7 +73,7 @@
   -webkit-line-clamp: 3;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-height: calc(16px * 1.3 * 3);
+  max-height: calc(16px * 1.3 * 3 + 2px);
   text-align: left;
   font-size: 16px;
   font-style: normal;

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

@@ -0,0 +1,13 @@
+import React from "react";
+export interface LinkProps {
+    variant: "bold" | "semiBold" | "medium";
+    color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "grey-venom" | "venom-grey-dark";
+    text: React.ReactNode;
+    maxLines?: number;
+    maxChars?: number;
+    size?: "default" | "small";
+    className?: string;
+    onClick?: () => void;
+}
+declare const Link: React.FC<LinkProps>;
+export default Link;

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

@@ -0,0 +1,35 @@
+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);
+};
+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;
+    var truncateText = function (text, maxChars) {
+        if (text.length <= maxChars)
+            return text;
+        return text.slice(0, maxChars) + "...";
+    };
+    var htmlText = convertToHtml(text);
+    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]), style: __assign({ whiteSpace: "pre-line" }, (maxLines
+            ? {
+                WebkitLineClamp: maxLines,
+                display: "-webkit-box",
+                WebkitBoxOrient: "vertical",
+                overflow: "hidden",
+            }
+            : {})), onClick: onClick, dangerouslySetInnerHTML: { __html: truncatedText } }));
+};
+export default Link;

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

@@ -0,0 +1,60 @@
+@import "../../../styles/colors.module.css";
+
+.link {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-size: 1rem;
+  line-height: normal;
+}
+
+.link-small {
+  font-size: 0.875rem;
+}
+
+.link.bold {
+  font-weight: 700;
+}
+
+.link.semiBold {
+  font-weight: 600;
+}
+
+.link.medium {
+  font-weight: 400;
+}
+
+.link.color-bleu-allaw {
+  color: var(--bleu-allaw);
+}
+
+.link.color-mid-grey {
+  color: var(--mid-grey);
+}
+
+.link.color-dark-grey {
+  color: var(--dark-grey);
+}
+
+.link.color-noir {
+  color: var(--noir);
+}
+
+.link.color-pure-white {
+  color: var(--pure-white);
+}
+
+.link.color-grey-venom {
+  color: var(--grey-venom);
+}
+
+.link.color-venom-grey-dark {
+  color: var(--venom-grey-dark);
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.pointer:hover {
+  cursor: pointer;
+}

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

@@ -0,0 +1,57 @@
+declare namespace _default {
+    export let title: string;
+    export { Link as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace variant {
+            namespace control {
+                let type: string;
+                let options: string[];
+            }
+        }
+        namespace color {
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+                let options_1: string[];
+                export { options_1 as options };
+            }
+            export { control_1 as control };
+        }
+        namespace text {
+            let control_2: string;
+            export { control_2 as control };
+        }
+        namespace size {
+            export namespace control_3 {
+                let type_2: string;
+                export { type_2 as type };
+                let options_2: string[];
+                export { options_2 as options };
+            }
+            export { control_3 as control };
+        }
+        namespace onClick {
+            let action: string;
+        }
+    }
+    export namespace parameters {
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
+        }
+    }
+}
+export default _default;
+export const Bold: any;
+export const SemiBold: any;
+export const Medium: any;
+export const BoldSmall: any;
+export const SemiBoldSmall: any;
+export const MediumSmall: any;
+export const ClickableLink: any;
+import Link from "./Link";

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

@@ -0,0 +1,105 @@
+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);
+};
+import React from "react";
+import Link from "./Link";
+import "../../../styles/global.css";
+export default {
+    title: "Components/UI-Variables/Typography/Link",
+    component: Link,
+    tags: ["autodocs"],
+    argTypes: {
+        variant: {
+            control: {
+                type: "select",
+                options: ["bold", "semiBold", "medium"],
+            },
+        },
+        color: {
+            control: {
+                type: "select",
+                options: ["bleu-allaw", "mid-grey", "dark-grey", "noir", "pure-white"],
+            },
+        },
+        text: {
+            control: "text",
+        },
+        size: {
+            control: {
+                type: "select",
+                options: ["default", "small"],
+            },
+        },
+        onClick: { action: "clicked" },
+    },
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "figma", value: "#404040" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+    },
+};
+var Template = function (args) { return React.createElement(Link, __assign({}, args)); };
+export var Bold = Template.bind({});
+Bold.args = {
+    variant: "bold",
+    color: "noir",
+    text: "Open Sans - Bold - 16px",
+    size: "default",
+};
+export var SemiBold = Template.bind({});
+SemiBold.args = {
+    variant: "semiBold",
+    color: "noir",
+    text: "Open Sans - SemiBold - 16px",
+    size: "default",
+};
+export var Medium = Template.bind({});
+Medium.args = {
+    variant: "medium",
+    color: "noir",
+    text: "Open Sans - Medium - 16px",
+    size: "default",
+};
+export var BoldSmall = Template.bind({});
+BoldSmall.args = {
+    variant: "bold",
+    color: "noir",
+    text: "Open Sans - Bold - 12px",
+    size: "small",
+};
+export var SemiBoldSmall = Template.bind({});
+SemiBoldSmall.args = {
+    variant: "semiBold",
+    color: "noir",
+    text: "Open Sans - SemiBold - 12px",
+    size: "small",
+};
+export var MediumSmall = Template.bind({});
+MediumSmall.args = {
+    variant: "medium",
+    color: "noir",
+    text: "Open Sans - Medium - 12px",
+    size: "small",
+};
+export var ClickableLink = Template.bind({});
+ClickableLink.args = {
+    variant: "semiBold",
+    color: "bleu-allaw",
+    text: "Cliquez sur moi",
+    size: "small",
+    onClick: function () { return console.log("Linke cliqué"); },
+};

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

@@ -8,6 +8,7 @@ export interface ParagraphProps {
     maxChars?: number;
     size?: "default" | "small";
     className?: string;
+    onClick?: () => void;
 }
 declare const Paragraph: React.FC<ParagraphProps>;
 export default Paragraph;

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

@@ -13,7 +13,7 @@ import React from "react";
 import "./Paragraph.css";
 import { convertToHtml } from "../../../utils/utils";
 var Paragraph = 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;
+    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;
     var truncateText = function (text, maxChars) {
         if (text.length <= maxChars)
             return text;
@@ -28,6 +28,6 @@ var Paragraph = function (_a) {
                 WebkitBoxOrient: "vertical",
                 overflow: "hidden",
             }
-            : {})), dangerouslySetInnerHTML: { __html: truncatedText } }));
+            : {})), onClick: onClick, dangerouslySetInnerHTML: { __html: truncatedText } }));
 };
 export default Paragraph;

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

@@ -31,6 +31,9 @@ declare namespace _default {
             }
             export { control_3 as control };
         }
+        namespace onClick {
+            let action: string;
+        }
     }
     export namespace parameters {
         namespace backgrounds {

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

@@ -38,6 +38,7 @@ export default {
                 options: ["default", "small"],
             },
         },
+        onClick: { action: "clicked" },
     },
     parameters: {
         backgrounds: {

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

@@ -1,10 +1,12 @@
 export { default as Heading } from "./Heading";
 export { default as Paragraph } from "./Paragraph";
+export { default as Link } from "./Link";
 export { default as SmallTitle } from "./SmallTitle";
 export { default as Subtitle } from "./Subtitle";
 export { default as TinyInfo } from "./TinyInfo";
 export type { HeadingProps } from "./Heading";
 export type { ParagraphProps } from "./Paragraph";
+export type { LinkProps } from "./Link";
 export type { SmallTitleProps } from "./SmallTitle";
 export type { SubtitleProps } from "./Subtitle";
 export type { TinyInfoProps } from "./TinyInfo";

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

@@ -1,5 +1,6 @@
 export { default as Heading } from "./Heading";
 export { default as Paragraph } from "./Paragraph";
+export { default as Link } from "./Link";
 export { default as SmallTitle } from "./SmallTitle";
 export { default as Subtitle } from "./Subtitle";
 export { default as TinyInfo } from "./TinyInfo";

package/dist/index.d.ts

@@ -33,6 +33,7 @@ export { default as FolderStatusTag } from "./components/atoms/tags/FolderStatus
 export { default as OtherStatusTag } from "./components/atoms/tags/OtherStatusTag";
 export { default as Heading } from "./components/atoms/typography/Heading";
 export { default as Paragraph } from "./components/atoms/typography/Paragraph";
+export { default as Link } from "./components/atoms/typography/Link";
 export { default as SmallTitle } from "./components/atoms/typography/SmallTitle";
 export { default as Subtitle } from "./components/atoms/typography/Subtitle";
 export { default as TinyInfo } from "./components/atoms/typography/TinyInfo";

package/dist/index.js

@@ -39,6 +39,7 @@ export { default as OtherStatusTag } from "./components/atoms/tags/OtherStatusTa
 // Typography
 export { default as Heading } from "./components/atoms/typography/Heading";
 export { default as Paragraph } from "./components/atoms/typography/Paragraph";
+export { default as Link } from "./components/atoms/typography/Link";
 export { default as SmallTitle } from "./components/atoms/typography/SmallTitle";
 export { default as Subtitle } from "./components/atoms/typography/Subtitle";
 export { default as TinyInfo } from "./components/atoms/typography/TinyInfo";

package/dist/styles/colors.module.css

@@ -1,44 +1,107 @@
-:root {
-    /* Primary colors */
-    --bleu-allaw: #25beeb;
-    --mid-grey: #728ea7;
-    --dark-grey: #456073;
-    --noir: #171e25;
-    --pure-white: #ffffff;
-  
-    /* Greyscale */
-    --grey-venom: #e6edf5;
-    --venom-grey-dark: #d1dce8;
-    --grey-light: #f6fcfe;
-    --grey-light-2: #f2f8fc;
-    --active-grey: #e9eef5;
-    --blue-lightning: #f6fcfe;
-    --fond-de-selection: #f6fcfe;
-    --lightSteelBlue: #a2b5c8;
-  
-    /* Tag colors */
-    --tag-white: #eef5fc;
-    --green-tag-dark: #29a36a;
-    --green-tag-light: #daf6e9;
-    --red-tag-dark: #e15151;
-    --red-tag-light: #fdf2f2;
-    --blue-tag-dark: #1985e8;
-    --blue-tag-light: #daebfb;
-    --gris-clair: #dee8f2;
-  
-    /* Actions */
-    --actions-valid: #29a36a;
-    --actions-error: #e15151;
-  
-    /* Background */
-    --background-pro: #fcfdfd;
-    --background-usager: #ffffff;
-  }
-  
-  .bgBleuAllaw {
-    background-color: var(--bleu-allaw);
-  }
-  
-  .textMidGrey {
-    color: var(--mid-grey);
-  }
+.bgBleuAllaw {
+  background-color: var(--bleu-allaw);
+}
+
+.textMidGrey {
+  color: var(--mid-grey);
+}
+
+.bleuAllaw {
+  --bleu-allaw: #25beeb;
+}
+
+.midGrey {
+  --mid-grey: #728ea7;
+}
+
+.darkGrey {
+  --dark-grey: #456073;
+}
+
+.noir {
+  --noir: #171e25;
+}
+
+.pureWhite {
+  --pure-white: #ffffff;
+}
+
+.greyVenom {
+  --grey-venom: #e6edf5;
+}
+
+.venomGreyDark {
+  --venom-grey-dark: #d1dce8;
+}
+
+.greyLight {
+  --grey-light: #f6fcfe;
+}
+
+.greyLight2 {
+  --grey-light-2: #f2f8fc;
+}
+
+.activeGrey {
+  --active-grey: #e9eef5;
+}
+
+.blueLightning {
+  --blue-lightning: #f6fcfe;
+}
+
+.fondDeSelection {
+  --fond-de-selection: #f6fcfe;
+}
+
+.lightSteelBlue {
+  --lightSteelBlue: #a2b5c8;
+}
+
+.tagWhite {
+  --tag-white: #eef5fc;
+}
+
+.greenTagDark {
+  --green-tag-dark: #29a36a;
+}
+
+.greenTagLight {
+  --green-tag-light: #daf6e9;
+}
+
+.redTagDark {
+  --red-tag-dark: #e15151;
+}
+
+.redTagLight {
+  --red-tag-light: #fdf2f2;
+}
+
+.blueTagDark {
+  --blue-tag-dark: #1985e8;
+}
+
+.blueTagLight {
+  --blue-tag-light: #daebfb;
+}
+
+.grisClair {
+  --gris-clair: #dee8f2;
+}
+
+.actionsValid {
+  --actions-valid: #29a36a;
+}
+
+.actionsError {
+  --actions-error: #e15151;
+}
+
+.backgroundPro {
+  --background-pro: #fcfdfd;
+}
+
+.backgroundUsager {
+  --background-usager: #ffffff;
+}

package/package.json

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