allaw-ui 1.0.124 → 1.0.126

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

@@ -0,0 +1,15 @@
+import React from "react";
+import "../../../styles/global.css";
+export interface SelectableListItemProps {
+    labels: {
+        label: string;
+        width?: string;
+        align?: "start" | "end" | "center";
+        fontWeight?: "normal" | "bold";
+        color?: "mid-grey" | "dark-grey" | "noir" | "venom-grey-dark" | "actions-valid" | "actions-error";
+    }[];
+    isActive: boolean;
+    onClick: () => void;
+}
+declare const SelectableListItem: React.FC<SelectableListItemProps>;
+export default SelectableListItem;

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

@@ -0,0 +1,23 @@
+import React from "react";
+import styles from "./SelectableListItem.module.css";
+import "../../../styles/global.css";
+var SelectableListItem = function (_a) {
+    var labels = _a.labels, isActive = _a.isActive, onClick = _a.onClick;
+    return (React.createElement("button", { className: "".concat(styles.selectableListItem, " ").concat(isActive ? styles.selectableListItemActive : ""), onClick: onClick },
+        React.createElement("span", { className: styles.selectableListItemIcon }, isActive && React.createElement("span", { className: styles.selectableListItemIconInner })),
+        React.createElement("div", { className: styles.selectableListItemLabels }, labels.map(function (label, index) {
+            var _a, _b;
+            return (React.createElement("span", { key: index, className: styles.selectableListItemLabel, style: {
+                    width: ((_a = label.width) === null || _a === void 0 ? void 0 : _a.includes("%")) ? label.width : undefined,
+                    minWidth: ((_b = label.width) === null || _b === void 0 ? void 0 : _b.includes("px")) ? label.width : undefined,
+                    justifyContent: label.align === "start"
+                        ? "flex-start"
+                        : label.align === "end"
+                            ? "flex-end"
+                            : "center",
+                    fontWeight: label.fontWeight === "bold" ? "bold" : "normal",
+                    color: "var(--".concat(label.color, ", inherit)"),
+                } }, label.label));
+        }))));
+};
+export default SelectableListItem;

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

@@ -0,0 +1,73 @@
+.selectableListItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  transition: color 0.15s, border-bottom 0.15s;
+  padding: 12px 24px;
+  border-radius: 16px;
+  background: var(--secondary-light-grey, #f4f7fb);
+  width: 100%;
+}
+
+.selectableListItem:hover {
+  background-color: var(--venom-grey, #e6edf5);
+}
+
+.selectableListItemActive {
+  background: var(--venom-grey, #e6edf5);
+  outline: 1px solid var(--mid-grey, #728ea7);
+}
+
+.selectableListItemIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--Primary-Blanc, #fff);
+  width: 24px;
+  min-width: 25px;
+  height: 24px;
+  border: 1px solid #d1dce7;
+}
+
+.selectableListItemActive .selectableListItemIcon {
+  padding: 3px;
+  border: 1px solid #d1dce7;
+}
+
+.selectableListItemActive .selectableListItemIconInner {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--primary-blue, #25beeb);
+}
+
+.selectableListItemLabels {
+  display: flex;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.selectableListItemLabel {
+  font-family: "Open Sans", sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  line-height: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+}
+
+:root {
+  --mid-grey: #728ea7;
+  --dark-grey: #456073;
+  --noir: #171e25;
+  --venom-grey-dark: #d1dce8;
+  --actions-valid: #29a36a;
+  --actions-error: #e15151;
+}

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

@@ -0,0 +1,36 @@
+export namespace ActionsData {
+    namespace onClick {
+        let action: string;
+    }
+}
+declare namespace _default {
+    export let title: string;
+    export { SelectableListItem as component };
+    export let tags: string[];
+    export let excludeStories: RegExp;
+    export namespace args {
+        let labels: {
+            label: string;
+            width: string;
+            align: string;
+            fontWeight: string;
+            color: string;
+        }[];
+        let isActive: boolean;
+    }
+    export namespace parameters {
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
+        }
+        let layout: string;
+    }
+}
+export default _default;
+export const Default: any;
+export const Active: any;
+import SelectableListItem from "./SelectableListItem";

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

@@ -0,0 +1,94 @@
+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, { useState } from "react";
+import SelectableListItem from "./SelectableListItem";
+import "../../../styles/global.css";
+export var ActionsData = {
+    onClick: { action: "clicked" },
+};
+export default {
+    title: "Components/Atoms/selects/SelectableListItem",
+    component: SelectableListItem,
+    tags: ["autodocs"],
+    excludeStories: /.*Data$/,
+    args: __assign(__assign({}, ActionsData), { labels: [
+            {
+                label: "Adoption",
+                width: "100%",
+                align: "start",
+                fontWeight: "normal",
+                color: "noir",
+            },
+            {
+                label: "(35 min)",
+                width: "100px",
+                align: "end",
+                fontWeight: "normal",
+                color: "mid-grey",
+            },
+            {
+                label: "100 €",
+                width: "80px",
+                align: "end",
+                fontWeight: "bold",
+                color: "noir",
+            },
+        ], isActive: false }),
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "figma", value: "#404040" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+        layout: "padded",
+    },
+};
+var Template = function (args) {
+    var _a = useState(false), isActive = _a[0], setIsActive = _a[1];
+    var handleClick = function () {
+        setIsActive(!isActive);
+        args.onClick();
+    };
+    return (React.createElement(SelectableListItem, __assign({}, args, { isActive: isActive, onClick: handleClick })));
+};
+export var Default = Template.bind({});
+export var Active = Template.bind({});
+Active.args = {
+    labels: [
+        {
+            label: "Adoption",
+            width: "100%",
+            align: "start",
+            fontWeight: "normal",
+            color: "noir",
+        },
+        {
+            label: "(35 min)",
+            width: "100px",
+            align: "end",
+            fontWeight: "normal",
+            color: "mid-grey",
+        },
+        {
+            label: "100 €",
+            width: "80px",
+            align: "end",
+            fontWeight: "bold",
+            color: "noir",
+        },
+    ],
+    isActive: true,
+};

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

@@ -2,3 +2,5 @@ export { default as Select } from "./Select";
 export type { SelectItem, SelectProps, SelectRef } from "./Select";
 export { default as ComboBox } from "./ComboBox";
 export type { ComboBoxProps, ComboBoxRef } from "./ComboBox";
+export { default as SelectableListItem } from "./SelectableListItem";
+export type { SelectableListItemProps } from "./SelectableListItem";

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

@@ -1,2 +1,3 @@
 export { default as Select } from "./Select";
 export { default as ComboBox } from "./ComboBox";
+export { default as SelectableListItem } from "./SelectableListItem";

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

@@ -1,10 +1,15 @@
 import React from "react";
-import "./Heading.css";
+export interface ResponsiveSetting {
+    maxWidth: number;
+    minWidth: number;
+    styles: React.CSSProperties;
+}
 export interface HeadingProps {
     variant: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "h7";
     color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white";
     text: React.ReactNode;
     align?: "left" | "justify" | "center";
+    responsiveSettings?: ResponsiveSetting[];
 }
 declare const Heading: React.FC<HeadingProps>;
 export default Heading;

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

@@ -1,7 +1,25 @@
-import React from "react";
-import "./Heading.css";
+import React, { useState, useEffect } from "react";
+import styles from "./Heading.module.css";
 var Heading = function (_a) {
-    var variant = _a.variant, _b = _a.color, color = _b === void 0 ? "pure-white" : _b, text = _a.text, _c = _a.align, align = _c === void 0 ? "center" : _c;
-    return React.createElement("span", { className: "heading ".concat(variant, " color-").concat(color, " align-").concat(align) }, text);
+    var variant = _a.variant, _b = _a.color, color = _b === void 0 ? "pure-white" : _b, text = _a.text, _c = _a.align, align = _c === void 0 ? "center" : _c, responsiveSettings = _a.responsiveSettings;
+    var _d = useState({}), dynamicStyles = _d[0], setDynamicStyles = _d[1];
+    var calculateStyles = function () {
+        if (!responsiveSettings || responsiveSettings.length === 0)
+            return;
+        var currentWidth = window.innerWidth;
+        var matchedSetting = responsiveSettings.find(function (setting) {
+            return currentWidth <= setting.maxWidth && currentWidth >= setting.minWidth;
+        });
+        if (matchedSetting) {
+            setDynamicStyles(matchedSetting.styles);
+        }
+    };
+    useEffect(function () {
+        calculateStyles();
+        var handleResize = function () { return calculateStyles(); };
+        window.addEventListener("resize", handleResize);
+        return function () { return window.removeEventListener("resize", handleResize); };
+    }, [responsiveSettings]);
+    return (React.createElement("span", { className: "".concat(styles.heading, " ").concat(styles[variant], " ").concat(styles["color-".concat(color)], " ").concat(styles["align-".concat(align)]), style: dynamicStyles }, text));
 };
 export default Heading;

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

@@ -0,0 +1,43 @@
+.heading {
+  font-weight: bold;
+}
+
+.h1 {
+  font-size: 32px;
+}
+
+.h2 {
+  font-size: 28px;
+}
+
+.color-bleu-allaw {
+  color: #25beeb;
+}
+
+.color-mid-grey {
+  color: #728ea7;
+}
+
+.color-dark-grey {
+  color: #495867;
+}
+
+.color-noir {
+  color: #000000;
+}
+
+.color-pure-white {
+  color: #ffffff;
+}
+
+.align-left {
+  text-align: left;
+}
+
+.align-center {
+  text-align: center;
+}
+
+.align-justify {
+  text-align: justify;
+}

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

@@ -22,6 +22,24 @@ declare namespace _default {
             let control_2: string;
             export { control_2 as control };
         }
+        namespace responsiveSettings {
+            export namespace control_3 {
+                let type_2: null;
+                export { type_2 as type };
+            }
+            export { control_3 as control };
+            export let description: string;
+            export namespace table {
+                export namespace type_3 {
+                    let summary: string;
+                }
+                export { type_3 as type };
+                export namespace defaultValue {
+                    let summary_1: string;
+                    export { summary_1 as summary };
+                }
+            }
+        }
     }
     export namespace parameters {
         namespace backgrounds {
@@ -42,4 +60,5 @@ export const H4: any;
 export const H5: any;
 export const H6: any;
 export const H7: any;
+export const ResponsiveExample: any;
 import Heading from "./Heading";

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

@@ -26,12 +26,26 @@ export default {
         color: {
             control: {
                 type: "select",
-                options: ["bleu-allaw", "mid-grey", "dark-grey", "noir", "pure-white"], // Ajoutez d'autres couleurs si nécessaire
+                options: ["bleu-allaw", "mid-grey", "dark-grey", "noir", "pure-white"],
             },
         },
         text: {
             control: "text",
         },
+        responsiveSettings: {
+            control: {
+                type: null,
+            },
+            description: "An array of responsive settings. Each object defines the styles for specific min and max widths.",
+            table: {
+                type: {
+                    summary: "Array<{ maxWidth: number, minWidth: number, styles: React.CSSProperties }>",
+                },
+                defaultValue: {
+                    summary: "[]",
+                },
+            },
+        },
     },
     parameters: {
         backgrounds: {
@@ -88,3 +102,26 @@ H7.args = {
     color: "pure-white",
     text: "Poppins – SemiBold – 14px",
 };
+export var ResponsiveExample = Template.bind({});
+ResponsiveExample.args = {
+    variant: "h2",
+    color: "pure-white",
+    text: "Responsive Heading Example",
+    responsiveSettings: [
+        {
+            maxWidth: 1000,
+            minWidth: 768,
+            styles: { fontSize: "36px", lineHeight: "42px", letterSpacing: "0.38px" },
+        },
+        {
+            maxWidth: 767,
+            minWidth: 480,
+            styles: { fontSize: "28px", lineHeight: "34px", letterSpacing: "0.28px" },
+        },
+        {
+            maxWidth: 479,
+            minWidth: 0,
+            styles: { fontSize: "16px", lineHeight: "26px", letterSpacing: "0.2px" },
+        },
+    ],
+};

package/dist/components/molecules/{blogArticle/BlogArticle.stories.d.ts → blogCard/BlodCard.stories.d.ts}

@@ -1,10 +1,10 @@
 declare namespace _default {
     export let title: string;
-    export { BlogArticle as component };
+    export { BlogCard as component };
 }
 export default _default;
 export const Default: any;
 export const NoImage: any;
 export const LongDescriptionTitle: any;
 export const MultipleTags: any;
-import BlogArticle from './BlogArticle';
+import BlogCard from './BlogCard';

package/dist/components/molecules/{blogArticle/BlogArticle.stories.js → blogCard/BlodCard.stories.js}

@@ -10,17 +10,17 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React from 'react';
-import BlogArticle from './BlogArticle';
+import BlogCard from './BlogCard';
 export default {
-    title: 'Components/Molecules/BlogArticle',
-    component: BlogArticle,
+    title: 'Components/Molecules/Blog/BlogCard',
+    component: BlogCard,
 };
-var Template = function (args) { return React.createElement(BlogArticle, __assign({}, args)); };
+var Template = function (args) { return React.createElement(BlogCard, __assign({}, args)); };
 export var Default = Template.bind({});
 Default.args = {
-    Article_URL: 'https://example.com/article',
+    Article_URL: 'https://example.com/card',
     Image_URL: 'https://plus.unsplash.com/premium_photo-1661329930662-19a43503782f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8YXZvY2F0fGVufDB8fDB8fHww',
-    Tags: ['Blablablablabla', "Blablablabla", "Blablablabla"],
+    Tags: ['Conseil', "Droit", "Donation"],
     Date: new Date('2023-04-23'),
     Title: 'Le Droit en France',
     Description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquam...',
@@ -28,6 +28,6 @@ Default.args = {
 export var NoImage = Template.bind({});
 NoImage.args = __assign(__assign({}, Default.args), { Image_URL: '' });
 export var LongDescriptionTitle = Template.bind({});
-LongDescriptionTitle.args = __assign(__assign({}, Default.args), { Description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum lacus vitae turpis malesuada, id varius magna faucibus. Nulla facilisi. Suspendisse potenti. Vivamus in purus sit amet sapien sodales convallis. Integer venenatis velit id lorem aliquam, sit amet pulvinar neque volutpat.', Title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum lacus vitae turpis malesuada, id varius magna faucibus. Nulla facilisi. Suspendisse potenti. Vivamus in purus sit amet sapien sodales convallis. Integer venenatis velit id lorem aliquam, sit amet pulvinar neque volutpat.' });
+LongDescriptionTitle.args = __assign(__assign({}, Default.args), { Description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum lacus vitae turpis malesuada, id varius magna faucibus. Nulla facilisi. Suspendisse potenti. Vivamus in purus sit amet sapien sodales convallis. Integer venenatis velit id lorem aliquam, sit amet pulvinar neque volutpat. dgfdfdfgdfgdfgdfgdfgfdgdfgdfgfgfdgd dfgffsd', Title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum lacus vitae turpis malesuada, id varius magna faucibus. Nulla facilisi. Suspendisse potenti. Vivamus in purus sit amet sapien sodales convallis. Integer venenatis velit id lorem aliquam, sit amet pulvinar neque volutpat.' });
 export var MultipleTags = Template.bind({});
 MultipleTags.args = __assign(__assign({}, Default.args), { Tags: ['Conseil', 'Droit', 'Avocat', 'Justice', 'Légal', 'Justice', 'Légal'] });

package/dist/components/molecules/{blogArticle/BlogArticle.d.ts → blogCard/BlogCard.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-export type BlogArticleProps = {
+export type BlogCardProps = {
     Article_URL: string;
     Image_URL: string;
     Tags: string[];
@@ -9,5 +9,5 @@ export type BlogArticleProps = {
     Preview?: boolean;
     onClick?: () => void;
 };
-declare const BlogArticle: React.FC<BlogArticleProps>;
-export default BlogArticle;
+declare const BlogCard: React.FC<BlogCardProps>;
+export default BlogCard;

package/dist/components/molecules/{blogArticle/BlogArticle.js → blogCard/BlogCard.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './BlogArticle.module.css';
+import styles from './BlogCard.module.css';
 import Link from 'next/link';
 import { OtherStatusTag } from '../../atoms/tags';
 import { Heading, TinyInfo } from '../../atoms/typography';
@@ -24,7 +24,7 @@ var BlogBottomSection = function (_a) {
             React.createElement("div", { className: styles.blogDescription },
                 React.createElement(TinyInfo, { variant: "medium14", text: Description, color: "noir", align: "left" })))));
 };
-var BlogArticle = function (_a) {
+var BlogCard = function (_a) {
     var Article_URL = _a.Article_URL, Image_URL = _a.Image_URL, Tags = _a.Tags, Date = _a.Date, Title = _a.Title, Description = _a.Description, _b = _a.Preview, Preview = _b === void 0 ? false : _b, onClick = _a.onClick;
     return (React.createElement(React.Fragment, null, onClick ? React.createElement("button", { className: styles.blogContainer, onClick: function () { return onClick && onClick(); } },
         !Preview && React.createElement(BlogTopSection, { Image_URL: Image_URL, Title: Title }),
@@ -33,4 +33,4 @@ var BlogArticle = function (_a) {
             !Preview && React.createElement(BlogTopSection, { Image_URL: Image_URL, Title: Title }),
             React.createElement(BlogBottomSection, { Tags: Tags, Date: Date, Title: Title, Description: Description }))));
 };
-export default BlogArticle;
+export default BlogCard;

package/dist/components/molecules/{blogArticle/BlogArticle.module.css → blogCard/BlogCard.module.css}

@@ -61,6 +61,12 @@
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: normal; 
+    word-wrap: break-word; 
+    overflow-wrap: break-word;
+    word-break: break-word; 
+    hyphens: auto; 
 }
 
 .blogTopSectionPlaceholder {

package/dist/components/molecules/blogCard/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BlogCard } from "./BlogCard";
+export type { BlogCardProps } from "./BlogCard";

package/dist/components/molecules/blogCard/index.js

@@ -0,0 +1 @@
+export { default as BlogCard } from "./BlogCard";

package/dist/components/molecules/blogHeader/BlogHeader.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export type BlogHeaderProps = {
+    Title: string;
+    Author: string;
+    Date: Date;
+    TimeToRead: number;
+    Profession: "Avocat" | "Notaire" | "Commissaire de justice";
+    ImageBlog: string;
+};
+declare function BlogHeader({ Title, Author, Date, TimeToRead, Profession, ImageBlog }: BlogHeaderProps): React.JSX.Element;
+export default BlogHeader;

package/dist/components/molecules/blogHeader/BlogHeader.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { Heading, TinyInfo } from "../../atoms/typography";
+import Image from "next/image";
+import styles from "./BlogHeader.module.css";
+function BlogHeader(_a) {
+    var Title = _a.Title, Author = _a.Author, Date = _a.Date, TimeToRead = _a.TimeToRead, Profession = _a.Profession, ImageBlog = _a.ImageBlog;
+    var responsiveSettings = [
+        {
+            maxWidth: 1000,
+            minWidth: 768,
+            styles: { fontSize: "32px", lineHeight: "40px" },
+        },
+        {
+            maxWidth: 767,
+            minWidth: 480,
+            styles: { fontSize: "28px", lineHeight: "36px" },
+        },
+        {
+            maxWidth: 479,
+            minWidth: 0,
+            styles: { fontSize: "24px", lineHeight: "32px" },
+        },
+    ];
+    return (React.createElement("div", { className: styles.blogContainerWrapper },
+        React.createElement("div", { className: styles.blogContainer },
+            React.createElement("div", { className: styles.blogTitle },
+                React.createElement(Heading, { text: Title, variant: "h2", color: "noir", align: "left", responsiveSettings: responsiveSettings })),
+            React.createElement("div", { className: styles.blogInfoContainer },
+                React.createElement(TinyInfo, { variant: "medium12", text: Date.toLocaleDateString(), color: "dark-grey" }),
+                React.createElement("div", { className: styles.timeToReadContainer },
+                    React.createElement("i", { className: "allaw-icon-clock" }),
+                    React.createElement(TinyInfo, { variant: "medium12", text: "".concat(TimeToRead, " min"), color: "dark-grey" })),
+                React.createElement(TinyInfo, { variant: "medium12", text: Profession, color: "dark-grey" }),
+                React.createElement(TinyInfo, { variant: "medium12", text: Author, color: "dark-grey" })),
+            React.createElement("div", { className: styles.blogImageContainer },
+                React.createElement(Image, { src: ImageBlog, alt: "Illustration pour l'article intitul\u00E9 \"".concat(Title, "\""), width: 1000, height: 449, className: styles.blogImage })))));
+}
+export default BlogHeader;

package/dist/components/molecules/blogHeader/BlogHeader.module.css

@@ -0,0 +1,132 @@
+.blogContainerWrapper {
+  display: flex;
+  justify-content: center;
+  background-color: white;
+  padding: 16px;
+}
+
+.blogContainer {
+  display: flex;
+  width: 100%;
+  max-width: 1000px;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: white;
+  gap: 16px;
+}
+
+.blogInfoContainer {
+  display: flex;
+  align-items: flex-end;
+  gap: 14px;
+  width: auto;
+  height: auto;
+  flex-wrap: wrap;
+}
+
+.blogTitle {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+  white-space: normal;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.blogImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+.blogImageContainer {
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.timeToReadContainer {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.timeToReadContainer > i {
+  color: #25BEEB;
+  font-size: 12px;
+} 
+
+@media (max-width: 700px) and (min-width: 400px) {
+  .blogInfoContainer {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: 6px; 
+    width: 100%;
+    justify-content: space-between;
+    align-items: stretch;
+  }
+
+  .blogInfoContainer > *:nth-child(1) {
+    grid-column: 1;
+    grid-row: 1;
+    justify-self: start;
+    align-self: start;
+  }
+
+  .blogInfoContainer > *:nth-child(2) {
+    grid-column: 2;
+    grid-row: 1;
+    justify-self: end;
+    align-self: start;
+  }
+
+  .blogInfoContainer > *:nth-child(3) {
+    grid-column: 1;
+    grid-row: 2;
+    justify-self: start;
+    align-self: end;
+  }
+
+  .blogInfoContainer > *:nth-child(4) {
+    grid-column: 2;
+    grid-row: 2;
+    justify-self: end;
+    align-self: end;
+  }
+}
+
+@media (max-width: 400px) {
+  .blogContainerWrapper {
+    padding: 0;
+  }
+
+  .blogTitle {
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+  }
+
+  .blogContainer {
+    gap: 12px;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 0 8px;
+    margin-top: 4px;
+  }
+
+  .blogInfoContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    align-items: flex-start;
+  }
+}

package/dist/components/molecules/{BlogTextBlock/BlogTextBlock.stories.d.ts → blogHeader/BlogHeader.stories.d.ts}

@@ -1,6 +1,6 @@
 declare namespace _default {
     export let title: string;
-    export { BlogTextBlock as component };
+    export { BlogHeader as component };
     export namespace argTypes {
         namespace Title {
             let control: string;
@@ -45,4 +45,4 @@ export default _default;
 export const Default: any;
 export const NotaryExample: any;
 export const JudicialOfficerExample: any;
-import BlogTextBlock from "./BlogTextBlock";
+import BlogHeader from "./BlogHeader";

package/dist/components/molecules/{BlogTextBlock/BlogTextBlock.stories.js → blogHeader/BlogHeader.stories.js}

@@ -10,31 +10,31 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React from "react";
-import BlogTextBlock, { BlogTextBlockProps } from "./BlogTextBlock";
+import BlogHeader, { BlogHeaderProps } from "./BlogHeader";
 export default {
-    title: "Components/molecules/BlogTextBlock",
-    component: BlogTextBlock,
+    title: "Components/molecules/Blog/BlogHeader",
+    component: BlogHeader,
     argTypes: {
         Title: { control: "text", description: "The title of the blog post" },
         Author: { control: "text", description: "The author of the blog post" },
         Date: { control: "date", description: "The publication date of the blog post" },
-        TimeToRead: { control: "text", description: "The estimated time to read the blog post" },
+        TimeToRead: { control: "number", description: "The estimated time to read the blog post" },
         Profession: {
             control: { type: "select" },
-            options: ["avocat", "notaire", "commissaire de justice"],
+            options: ["Avocat", "Notaire", "Commissaire de justice"],
             description: "The profession associated with the author",
         },
         ImageBlog: { control: "text", description: "The image for the blog post" },
     },
 };
-var Template = function (args) { return React.createElement(BlogTextBlock, __assign({}, args)); };
+var Template = function (args) { return React.createElement(BlogHeader, __assign({}, args)); };
 export var Default = Template.bind({});
 Default.args = {
     Title: "Understanding Legal Procedures",
     Author: "John Doe",
     Date: new Date("2023-10-21"),
-    TimeToRead: "5 min",
-    Profession: "avocat",
+    TimeToRead: 5,
+    Profession: "Avocat",
     ImageBlog: "https://plus.unsplash.com/premium_photo-1661329930662-19a43503782f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8YXZvY2F0fGVufDB8fDB8fHww",
 };
 export var NotaryExample = Template.bind({});
@@ -42,16 +42,16 @@ NotaryExample.args = {
     Title: "The Role of a Notary in Legal Contracts",
     Author: "Jane Smith",
     Date: new Date("2023-08-15"),
-    TimeToRead: "7 min",
-    Profession: "notaire",
+    TimeToRead: 7,
+    Profession: "Notaire",
     ImageBlog: "https://via.placeholder.com/1000x449",
 };
 export var JudicialOfficerExample = Template.bind({});
 JudicialOfficerExample.args = {
-    Title: "How Judicial Officers Ensure Justice",
+    Title: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quod consequuntur perferendis accusamus distinctio error rem nostrum odio dolorem laudantium libero dicta saepe magnam ipsum impedit eos, numquam ducimus? Nisi",
     Author: "Alice Cooper",
     Date: new Date("2023-09-10"),
-    TimeToRead: "6 min",
-    Profession: "commissaire de justice",
+    TimeToRead: 9,
+    Profession: "Commissaire de justice",
     ImageBlog: "https://via.placeholder.com/1000x449",
 };

package/dist/components/molecules/blogHeader/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BlogHeader } from './BlogHeader';
+export type { BlogHeaderProps } from './BlogHeader';

package/dist/components/molecules/blogHeader/index.js

@@ -0,0 +1 @@
+export { default as BlogHeader } from './BlogHeader';

package/dist/index.d.ts

@@ -23,6 +23,7 @@ export { default as Select } from "./components/atoms/selects/Select";
 export type { SelectItem, SelectProps, SelectRef, } from "./components/atoms/selects/Select";
 export { default as ComboBox } from "./components/atoms/selects/ComboBox";
 export type { ComboBoxProps, ComboBoxRef, } from "./components/atoms/selects/ComboBox";
+export { default as SelectableListItem } from "./components/atoms/selects/SelectableListItem";
 export { default as Datepicker } from "./components/atoms/datepickers/Datepicker";
 export type { DatepickerProps } from "./components/atoms/datepickers/Datepicker";
 export { default as DatepickerForm } from "./components/molecules/datepickerForm/DatepickerForm";
@@ -61,7 +62,7 @@ export { default as Breadcrumb } from "./components/molecules/breadcrumb/Breadcr
 export { default as ProCard } from "./components/molecules/proCard/ProCard";
 export { default as Pagination } from "./components/molecules/pagination/Pagination";
 export type { PaginationProps } from "./components/molecules/pagination/Pagination";
-export { default as BlogTextBlock } from './components/molecules/BlogTextBlock/BlogTextBlock';
-export type { BlogTextBlockProps } from './components/molecules/BlogTextBlock/BlogTextBlock';
-export { default as BlogArticle } from './components/molecules/blogArticle/BlogArticle';
-export type { BlogArticleProps } from './components/molecules/blogArticle/BlogArticle';
+export { default as BlogHeader } from "./components/molecules/blogHeader/BlogHeader";
+export type { BlogHeaderProps } from "./components/molecules/blogHeader/BlogHeader";
+export { default as BlogCard } from "./components/molecules/blogCard/BlogCard";
+export type { BlogCardProps } from "./components/molecules/blogCard/BlogCard";

package/dist/index.js

@@ -27,6 +27,7 @@ export { default as SingleFilter } from "./components/atoms/filters/SingleFilter
 // Selects
 export { default as Select } from "./components/atoms/selects/Select";
 export { default as ComboBox } from "./components/atoms/selects/ComboBox";
+export { default as SelectableListItem } from "./components/atoms/selects/SelectableListItem";
 // Datepickers
 export { default as Datepicker } from "./components/atoms/datepickers/Datepicker";
 // DatepickerForm
@@ -79,5 +80,5 @@ export { default as Breadcrumb } from "./components/molecules/breadcrumb/Breadcr
 export { default as ProCard } from "./components/molecules/proCard/ProCard";
 // Pagination
 export { default as Pagination } from "./components/molecules/pagination/Pagination";
-export { default as BlogTextBlock } from './components/molecules/BlogTextBlock/BlogTextBlock';
-export { default as BlogArticle } from './components/molecules/blogArticle/BlogArticle';
+export { default as BlogHeader } from "./components/molecules/blogHeader/BlogHeader";
+export { default as BlogCard } from "./components/molecules/blogCard/BlogCard";

package/dist/stories/Header.stories.d.ts

@@ -7,9 +7,9 @@ declare const meta: {
         layout: string;
     };
     args: {
-        onLogin: import("@vitest/spy").Mock<[], void>;
-        onLogout: import("@vitest/spy").Mock<[], void>;
-        onCreateAccount: import("@vitest/spy").Mock<[], void>;
+        onLogin: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onLogout: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onCreateAccount: import("@vitest/spy").Mock<(...args: any[]) => any>;
     };
 };
 export default meta;

package/dist/styles/colors.module.css

@@ -0,0 +1,44 @@
+: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);
+  }

package/package.json

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

package/dist/components/atoms/typography/Heading.css

@@ -1,77 +0,0 @@
-@import "../../../styles/colors.css";
-
-.heading {
-  font-family: Poppins;
-  font-style: normal;
-  line-height: normal;
-}
-
-.heading.h1 {
-  font-size: 60px;
-  font-weight: 600;
-  letter-spacing: 0.5px;
-}
-
-.heading.h2 {
-  font-size: 36px;
-  font-weight: 600;
-  letter-spacing: 0.38px;
-}
-
-.heading.h3 {
-  font-size: 28px;
-  font-weight: 600;
-  letter-spacing: 0.28px;
-}
-
-.heading.h4 {
-  font-size: 24px;
-  font-weight: 600;
-}
-
-.heading.h5 {
-  font-size: 24px;
-  font-weight: 500;
-}
-
-.heading.h6 {
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.heading.h7 {
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.heading.color-bleu-allaw {
-  color: var(--bleu-allaw);
-}
-
-.heading.color-mid-grey {
-  color: var(--mid-grey);
-}
-
-.heading.color-dark-grey {
-  color: var(--dark-grey);
-}
-
-.heading.color-noir {
-  color: var(--noir);
-}
-
-.heading.color-pure-white {
-  color: var(--pure-white);
-}
-
-.heading.align-left {
-  text-align: left;
-}
-
-.heading.align-justify {
-  text-align: justify;
-}
-
-.heading.align-center {
-  text-align: center;
-}

package/dist/components/molecules/BlogTextBlock/BlogTextBlock.css

@@ -1,43 +0,0 @@
-.blogContainerTop {
-    display: flex;
-    width: 1000px;
-    max-width: 1000px;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 23px;
-}
-
-.blogInfoContainer {
-    display: flex;
-    flex-direction: row;
-    align-items: center; 
-    justify-content: flex-start; 
-    gap: 23px; 
-    width: auto; 
-    height: auto; 
-    flex-wrap: nowrap;
-}
-
-.blogContainerBottom {
-    display: flex;
-    max-width: 1000px;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 20px;
-}
-
-.blogImageContainer {
-    align-self: stretch;
-    background: #D9D9D9;
-    object-fit: cover;
-}
-
-.timeToReadContainer {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.timeToReadContainer svg {
-    flex-shrink: 0;
-}

package/dist/components/molecules/BlogTextBlock/BlogTextBlock.d.ts

@@ -1,12 +0,0 @@
-import React from "react";
-import "./BlogTextBlock.css";
-export type BlogTextBlockProps = {
-    Title: string;
-    Author: string;
-    Date: Date;
-    TimeToRead: string;
-    Profession: "Avocat" | "Notaire" | "Commissaire de justice";
-    ImageBlog: string;
-};
-declare function BlogTextBlock({ Title, Date, TimeToRead, Profession, ImageBlog }: BlogTextBlockProps): React.JSX.Element;
-export default BlogTextBlock;

package/dist/components/molecules/BlogTextBlock/BlogTextBlock.js

@@ -1,30 +0,0 @@
-import React from "react";
-import { Heading, TinyInfo } from "../../atoms/typography";
-import Image from "next/image";
-import "./BlogTextBlock.css";
-function BlogTextBlock(_a) {
-    var Title = _a.Title, Date = _a.Date, TimeToRead = _a.TimeToRead, Profession = _a.Profession, ImageBlog = _a.ImageBlog;
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "blogContainer" },
-            React.createElement("div", { className: "blogContainerTop" },
-                React.createElement(Heading, { text: Title, variant: "h2", color: "noir", align: "left" }),
-                React.createElement("div", { className: "blogInfoContainer" },
-                    React.createElement(TinyInfo, { variant: "medium12", text: Date.toLocaleDateString(), color: "dark-grey" }),
-                    React.createElement("div", { className: "timeToReadContainer" },
-                        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" },
-                            React.createElement("g", { clipPath: "url(#clip0_9957_3676)" },
-                                React.createElement("path", { d: "M7.00033 12.8332C10.222 12.8332 12.8337 10.2215 12.8337 6.99984C12.8337 3.77818 10.222 1.1665 7.00033 1.1665C3.77866 1.1665 1.16699 3.77818 1.16699 6.99984C1.16699 10.2215 3.77866 12.8332 7.00033 12.8332Z", stroke: "#25BEEB", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-                                React.createElement("path", { d: "M7 3.5V7L9.33333 8.16667", stroke: "#25BEEB", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })),
-                            React.createElement("defs", null,
-                                React.createElement("clipPath", { id: "clip0_9957_3676" },
-                                    React.createElement("rect", { width: "14", height: "14", fill: "white" })))),
-                        React.createElement(TinyInfo, { variant: "medium12", text: TimeToRead, color: "dark-grey" })),
-                    React.createElement(TinyInfo, { variant: "medium12", text: Profession, color: "dark-grey" })),
-                React.createElement("div", { className: "blogImageContainer" },
-                    React.createElement(Image, { src: ImageBlog, alt: "Image de fond d'un article de blog", width: 1000, height: 449 }))),
-            React.createElement("div", { className: "blogContainerBottom" })),
-        React.createElement("div", { className: "blogImageContainer" },
-            React.createElement(Image, { src: ImageBlog, alt: "Image de fond d'un article de blog", width: 1000, height: 449 })),
-        React.createElement("div", { className: "blogContainerBottom" })));
-}
-export default BlogTextBlock;