allaw-ui 1.1.1 → 2.0.0

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

@@ -7,6 +7,8 @@ export interface ParagraphProps {
     maxLines?: number;
     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;
+    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;
@@ -21,13 +21,13 @@ var Paragraph = function (_a) {
     };
     var htmlText = convertToHtml(text);
     var truncatedText = maxChars ? truncateText(htmlText, maxChars) : htmlText;
-    return (React.createElement("div", { className: "paragraph ".concat(variant, " ").concat(color ? "color-".concat(color) : "", " ").concat(size === "small" ? "paragraph-small" : ""), style: __assign({ whiteSpace: "pre-line" }, (maxLines
+    return (React.createElement("div", { className: "paragraph ".concat(variant, " ").concat(color ? "color-".concat(color) : "", " ").concat(size === "small" ? "paragraph-small" : "", " ").concat(className || "").trim(), style: __assign({ whiteSpace: "pre-line" }, (maxLines
             ? {
                 WebkitLineClamp: maxLines,
                 display: "-webkit-box",
                 WebkitBoxOrient: "vertical",
                 overflow: "hidden",
             }
-            : {})), dangerouslySetInnerHTML: { __html: truncatedText } }));
+            : {})), onClick: onClick, dangerouslySetInnerHTML: { __html: truncatedText } }));
 };
 export default Paragraph;

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

@@ -0,0 +1,56 @@
+declare namespace _default {
+    export let title: string;
+    export { Paragraph 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;
+import Paragraph from "./Paragraph";

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

@@ -0,0 +1,97 @@
+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 Paragraph from "./Paragraph";
+import "../../../styles/global.css";
+export default {
+    title: "Components/UI-Variables/Typography/Paragraph",
+    component: Paragraph,
+    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(Paragraph, __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",
+};

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

@@ -0,0 +1,42 @@
+declare namespace _default {
+    export let title: string;
+    export { SmallTitle 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 };
+        }
+    }
+    export namespace parameters {
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
+        }
+    }
+}
+export default _default;
+export const Bold20: any;
+export const Medium32: any;
+export const SemiBold12: any;
+export const Medium12: any;
+import SmallTitle from "./SmallTitle";

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

@@ -0,0 +1,72 @@
+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 SmallTitle from "./SmallTitle";
+import "../../../styles/global.css";
+export default {
+    title: "Components/UI-Variables/Typography/SmallTitle",
+    component: SmallTitle,
+    tags: ["autodocs"],
+    argTypes: {
+        variant: {
+            control: {
+                type: "select",
+                options: ["bold20", "medium32", "semiBold12", "medium12"],
+            },
+        },
+        color: {
+            control: {
+                type: "select",
+                options: ["bleu-allaw", "mid-grey", "dark-grey", "noir", "pure-white"],
+            },
+        },
+        text: {
+            control: "text",
+        },
+    },
+    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(SmallTitle, __assign({}, args)); };
+export var Bold20 = Template.bind({});
+Bold20.args = {
+    variant: "bold20",
+    color: "noir",
+    text: "Open Sans - Bold - 20px",
+};
+export var Medium32 = Template.bind({});
+Medium32.args = {
+    variant: "medium32",
+    color: "noir",
+    text: "Open Sans - Medium - 32px",
+};
+export var SemiBold12 = Template.bind({});
+SemiBold12.args = {
+    variant: "semiBold12",
+    color: "noir",
+    text: "Open Sans - SemiBold - 12px",
+};
+export var Medium12 = Template.bind({});
+Medium12.args = {
+    variant: "medium12",
+    color: "noir",
+    text: "Open Sans - Medium - 12px",
+};

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

@@ -0,0 +1,40 @@
+declare namespace _default {
+    export let title: string;
+    export { Subtitle 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 };
+        }
+    }
+    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 Medium: any;
+import Subtitle from "./Subtitle";

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

@@ -0,0 +1,60 @@
+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 Subtitle from "./Subtitle";
+import "../../../styles/global.css";
+export default {
+    title: "Components/UI-Variables/Typography/Subtitle",
+    component: Subtitle,
+    tags: ["autodocs"],
+    argTypes: {
+        variant: {
+            control: {
+                type: "select",
+                options: ["bold", "medium"],
+            },
+        },
+        color: {
+            control: {
+                type: "select",
+                options: ["bleu-allaw", "mid-grey", "dark-grey", "noir", "pure-white"],
+            },
+        },
+        text: {
+            control: "text",
+        },
+    },
+    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(Subtitle, __assign({}, args)); };
+export var Bold = Template.bind({});
+Bold.args = {
+    variant: "bold",
+    color: "noir",
+    text: "Open Sans - Bold - 18px",
+};
+export var Medium = Template.bind({});
+Medium.args = {
+    variant: "medium",
+    color: "noir",
+    text: "Open Sans - Medium - 18px",
+};

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

@@ -6,6 +6,7 @@ export interface TinyInfoProps {
     text: string;
     href?: string;
     className?: string;
+    align?: "left" | "center" | "right";
     uppercase?: boolean;
 }
 declare const TinyInfo: React.FC<TinyInfoProps>;

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

@@ -6,9 +6,9 @@ var toUpperCaseWithAccents = function (str) {
     });
 };
 var TinyInfo = function (_a) {
-    var variant = _a.variant, _b = _a.color, color = _b === void 0 ? "noir" : _b, text = _a.text, href = _a.href, className = _a.className, _c = _a.uppercase, uppercase = _c === void 0 ? false : _c;
+    var variant = _a.variant, _b = _a.color, color = _b === void 0 ? "noir" : _b, text = _a.text, href = _a.href, className = _a.className, _c = _a.uppercase, uppercase = _c === void 0 ? false : _c, _d = _a.align, align = _d === void 0 ? "center" : _d;
     var processedText = uppercase ? toUpperCaseWithAccents(text) : text;
-    var content = (React.createElement("span", { className: "tiny-info ".concat(variant, " ").concat(color ? "color-".concat(color) : "", " ").concat(className || ""), dangerouslySetInnerHTML: { __html: processedText } }));
+    var content = (React.createElement("span", { className: "tiny-info ".concat(variant, " ").concat(color ? "color-".concat(color) : "", " ").concat(className || ""), dangerouslySetInnerHTML: { __html: processedText }, style: { textAlign: align } }));
     return href ? (React.createElement("a", { href: href, className: "tiny-info-link ".concat(className || "") }, content)) : (content);
 };
 export default TinyInfo;