allaw-ui 1.0.135 → 1.0.136

package/dist/components/atoms/tags/OtherStatusTag.css

@@ -58,7 +58,6 @@
   gap: 4px;
   flex-shrink: 0;
   border-radius: 8px;
-  border: 1px solid var(--tag-blue, #1985e8);
   color: var(--tag-blue, #1985e8);
   text-align: center;
   font-family: "Open Sans";
@@ -69,6 +68,26 @@
   letter-spacing: 0.12px;
 }
 
+.other-status-tag.information.information-color-blue {
+  border: 1px solid var(--tag-blue, #1985e8);
+  color: var(--tag-blue, #1985e8);
+}
+
+.other-status-tag.information.information-color-green {
+  border: 1px solid var(--green-tag-dark, #29a36a);
+  color: var(--green-tag-dark, #29a36a);
+}
+
+.other-status-tag.information.information-color-red {
+  border: 1px solid var(--red-tag-dark, #e15151);
+  color: var(--red-tag-dark, #e15151);
+}
+
+.other-status-tag.information.information-color-orange {
+  border: 1px solid var(--orange-tag-dark, #ff9f43);
+  color: var(--orange-tag-dark, #ff9f43);
+}
+
 .other-status-tag.information .icon {
   display: flex;
   width: 16px;

package/dist/components/atoms/tags/OtherStatusTag.d.ts

@@ -7,6 +7,7 @@ export interface OtherStatusTagProps {
     startIconName?: string;
     labelLimit?: number;
     style?: "normal" | "compact";
+    informationColor?: "blue" | "green" | "red" | "orange";
 }
 declare const OtherStatusTag: React.FC<OtherStatusTagProps>;
 export default OtherStatusTag;

package/dist/components/atoms/tags/OtherStatusTag.js

@@ -1,13 +1,13 @@
 import React from "react";
 import "./OtherStatusTag.css";
 var OtherStatusTag = function (_a) {
-    var _b = _a.label, label = _b === void 0 ? "Tags" : _b, _c = _a.type, type = _c === void 0 ? "readonly" : _c, _d = _a.startIcon, startIcon = _d === void 0 ? false : _d, _e = _a.startIconName, startIconName = _e === void 0 ? "allaw-icon-pmr" : _e, labelLimit = _a.labelLimit, _f = _a.style, style = _f === void 0 ? "normal" : _f;
+    var _b = _a.label, label = _b === void 0 ? "Tags" : _b, _c = _a.type, type = _c === void 0 ? "readonly" : _c, _d = _a.startIcon, startIcon = _d === void 0 ? false : _d, _e = _a.startIconName, startIconName = _e === void 0 ? "allaw-icon-pmr" : _e, labelLimit = _a.labelLimit, _f = _a.style, style = _f === void 0 ? "normal" : _f, _g = _a.informationColor, informationColor = _g === void 0 ? "blue" : _g;
     var truncateText = function (text, limit) {
         if (!limit || text.length <= limit)
             return text;
         return "".concat(text.slice(0, limit), "...");
     };
-    return (React.createElement("div", { className: "other-status-tag ".concat(type, " ").concat(style) },
+    return (React.createElement("div", { className: "other-status-tag ".concat(type, " ").concat(style, " ").concat(type === "information" ? "information-color-".concat(informationColor) : "") },
         type === "information" && startIcon && (React.createElement("span", { className: "icon ".concat(startIconName) })),
         React.createElement("span", { className: "other-status-tag-label", title: label }, truncateText(label, labelLimit)),
         type === "editable" && React.createElement("span", { className: "icon allaw-icon-close" })));

package/dist/components/atoms/tags/OtherStatusTag.stories.d.ts

@@ -59,6 +59,19 @@ declare namespace _default {
             export { description_5 as description };
             export let defaultValue: string;
         }
+        export namespace informationColor {
+            export namespace control_6 {
+                let type_7: string;
+                export { type_7 as type };
+                let options_2: string[];
+                export { options_2 as options };
+            }
+            export { control_6 as control };
+            let description_6: string;
+            export { description_6 as description };
+            let defaultValue_1: string;
+            export { defaultValue_1 as defaultValue };
+        }
     }
     export namespace parameters {
         namespace backgrounds {

package/dist/components/atoms/tags/OtherStatusTag.stories.js

@@ -56,6 +56,14 @@ export default {
             description: "Style du tag (normal ou compact)",
             defaultValue: "normal",
         },
+        informationColor: {
+            control: {
+                type: "select",
+                options: ["blue", "green", "red", "orange"],
+            },
+            description: "Couleur du tag d'information",
+            defaultValue: "blue",
+        },
     },
     parameters: {
         backgrounds: {
@@ -90,6 +98,7 @@ Information.args = {
     type: "information",
     startIcon: true,
     startIconName: "allaw-icon-pmr",
+    informationColor: "blue",
 };
 export var LongLabel = Template.bind({});
 LongLabel.args = {

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

@@ -1,12 +1,12 @@
 import React from "react";
 export type BlogCardProps = {
-    Article_URL: string;
-    Image_URL: string;
-    Tags: string[];
-    Date: Date;
-    Title: string;
-    Description: string;
-    Preview?: boolean;
+    articleUrl: string;
+    imageUrl: string;
+    tags: string[];
+    date: Date;
+    title: string;
+    description: string;
+    preview?: boolean;
     onClick?: () => void;
 };
 declare const BlogCard: React.FC<BlogCardProps>;

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

@@ -5,30 +5,30 @@ import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
 import TinyInfo from "../../atoms/typography/TinyInfo";
 import Image from "next/image";
 var BlogTopSection = function (_a) {
-    var Image_URL = _a.Image_URL, Title = _a.Title;
-    return (React.createElement("div", { className: "".concat(styles.blogTopSection, " ").concat(!Image_URL ? styles.placeholder : "") }, Image_URL ? (React.createElement(Image, { className: styles.blogImage, src: Image_URL, alt: Title || "Image de l’article de blog", width: 361, height: 230, objectFit: "cover" })) : (React.createElement("span", { className: styles.placeholderText }))));
+    var imageUrl = _a.imageUrl, title = _a.title;
+    return (React.createElement("div", { className: "".concat(styles.blogTopSection, " ").concat(!imageUrl ? styles.placeholder : "") }, imageUrl ? (React.createElement(Image, { className: styles.blogImage, src: imageUrl, alt: title || "Image de l’article de blog", width: 361, height: 230, objectFit: "cover" })) : (React.createElement("span", { className: styles.placeholderText }))));
 };
 var BlogBottomSection = function (_a) {
-    var Tags = _a.Tags, Date = _a.Date, Title = _a.Title, Description = _a.Description;
+    var tags = _a.tags, date = _a.date, title = _a.title, description = _a.description;
     return (React.createElement("div", { className: styles.blogBottomSection },
         React.createElement("div", { className: styles.blogBottomSectionUp },
-            React.createElement("div", { className: styles.tagsContainer }, Tags.slice(0, 2).map(function (tag, index) {
+            React.createElement("div", { className: styles.tagsContainer }, tags.slice(0, 2).map(function (tag, index) {
                 var validatedTag = tag.trim().length > 12 ? "".concat(tag.slice(0, 12), "...") : tag;
                 return React.createElement(OtherStatusTag, { key: index, label: validatedTag });
             })),
-            React.createElement(TinyInfo, { text: Date.toLocaleDateString(), variant: "medium14", color: "mid-grey" })),
+            React.createElement(TinyInfo, { text: date.toLocaleDateString(), variant: "medium14", color: "mid-grey" })),
         React.createElement("div", { className: styles.blogSplitSection }),
         React.createElement("div", { className: styles.blogBottomSectionDown },
-            React.createElement("div", { className: styles.blogTitle }, Title),
+            React.createElement("div", { className: styles.blogTitle }, title),
             React.createElement("div", { className: styles.blogDescription },
-                React.createElement(TinyInfo, { variant: "medium14", text: Description, color: "noir", align: "left" })))));
+                React.createElement(TinyInfo, { variant: "medium14", text: description, color: "noir", align: "left" })))));
 };
 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;
+    var articleUrl = _a.articleUrl, imageUrl = _a.imageUrl, 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 }),
-        React.createElement(BlogBottomSection, { Tags: Tags, Date: Date, Title: Title, Description: Description }))) : (React.createElement(Link, { href: Article_URL, className: styles.blogContainer },
-        !Preview && React.createElement(BlogTopSection, { Image_URL: Image_URL, Title: Title }),
-        React.createElement(BlogBottomSection, { Tags: Tags, Date: Date, Title: Title, Description: Description })))));
+        !preview && React.createElement(BlogTopSection, { imageUrl: imageUrl, title: title }),
+        React.createElement(BlogBottomSection, { tags: tags, date: date, title: title, description: description }))) : (React.createElement(Link, { href: articleUrl, className: styles.blogContainer },
+        !preview && React.createElement(BlogTopSection, { imageUrl: imageUrl, title: title }),
+        React.createElement(BlogBottomSection, { tags: tags, date: date, title: title, description: description })))));
 };
 export default BlogCard;

package/dist/components/molecules/blogCard/BlogCard.module.css

@@ -3,7 +3,8 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  width: 361px;
+  width: 100%;
+  max-width: 361px;
   box-shadow: 0px 1px 20px 0px rgba(213, 233, 246, 0.8);
   border-radius: 16px;
   overflow: hidden;
@@ -38,6 +39,7 @@
   align-items: flex-start;
   gap: 12px;
   background: #fff;
+  width: 100%;
 }
 
 .blogImage {
@@ -54,12 +56,14 @@
   -webkit-box-orient: vertical;
   overflow: hidden;
   color: var(--Primary-Mid-black, #171e25);
-  text-align: center;
   font-family: Poppins;
   font-size: 18px;
   font-style: normal;
   font-weight: 600;
   line-height: 22px;
+  max-width: 100%;
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
 
 .blogDescription {

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

@@ -7,4 +7,4 @@ export const Default: any;
 export const NoImage: any;
 export const LongDescriptionTitle: any;
 export const MultipleTags: any;
-import BlogCard from './BlogCard';
+import BlogCard from "./BlogCard";

package/dist/components/molecules/blogCard/BlogCard.stories.js

@@ -0,0 +1,33 @@
+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 BlogCard from "./BlogCard";
+export default {
+    title: "Components/Molecules/Blog/BlogCard",
+    component: BlogCard,
+};
+var Template = function (args) { return React.createElement(BlogCard, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    articleUrl: "https://example.com/card",
+    imageUrl: "https://plus.unsplash.com/premium_photo-1661329930662-19a43503782f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8YXZvY2F0fGVufDB8fDB8fHww",
+    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...",
+};
+export var NoImage = Template.bind({});
+NoImage.args = __assign(__assign({}, Default.args), { imageUrl: "" });
+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. dgfdfdfgdfgdfgdfgfdgdfgdfgfgfdgd 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/blogHeader/BlogHeader.d.ts

@@ -1,11 +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;
+    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;
+declare function BlogHeader({ title, author, date, timeToRead, profession, imageBlog, }: BlogHeaderProps): React.JSX.Element;
 export default BlogHeader;

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

@@ -3,19 +3,19 @@ import TinyInfo from "../../atoms/typography/TinyInfo";
 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 title = _a.title, author = _a.author, date = _a.date, timeToRead = _a.timeToRead, profession = _a.profession, imageBlog = _a.imageBlog;
     return (React.createElement("article", { className: styles.blogContainerWrapper },
         React.createElement("div", { className: styles.blogContainer },
-            React.createElement("h1", { className: styles.title }, Title),
+            React.createElement("h1", { className: styles.title }, title),
             React.createElement("div", { className: styles.blogInfoContainer },
-                React.createElement("time", { className: styles.blogDate, dateTime: Date.toISOString(), "aria-label": "Date de publication" },
-                    React.createElement(TinyInfo, { variant: "semiBold12", text: Date.toLocaleDateString(), color: "dark-grey" })),
+                React.createElement("time", { className: styles.blogDate, dateTime: date.toISOString(), "aria-label": "Date de publication" },
+                    React.createElement(TinyInfo, { variant: "semiBold12", text: date.toLocaleDateString(), color: "dark-grey" })),
                 React.createElement("div", { className: styles.timeToReadContainer },
                     React.createElement("i", { className: "allaw-icon-clock", "aria-hidden": "true" }),
-                    React.createElement(TinyInfo, { variant: "semiBold12", text: "".concat(TimeToRead, " min"), color: "dark-grey" })),
-                React.createElement(TinyInfo, { variant: "semiBold12", text: Profession, color: "dark-grey", "aria-label": "Profession de l'auteur" }),
-                React.createElement(TinyInfo, { variant: "semiBold12", text: Author, color: "dark-grey", "aria-label": "Auteur de l'article" })),
+                    React.createElement(TinyInfo, { variant: "semiBold12", text: "".concat(timeToRead, " min"), color: "dark-grey" })),
+                React.createElement(TinyInfo, { variant: "semiBold12", text: profession, color: "dark-grey", "aria-label": "Profession de l'auteur" }),
+                React.createElement(TinyInfo, { variant: "semiBold12", text: author, color: "dark-grey", "aria-label": "Auteur de l'article" })),
             React.createElement("figure", { className: styles.blogImageContainer },
-                React.createElement(Image, { src: ImageBlog, alt: "Illustration pour l'article intitul\u00E9 \"".concat(Title, "\""), width: 1000, height: 449, className: styles.blogImage })))));
+                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

@@ -5,6 +5,7 @@
   padding: 16px;
   gap: 20px;
   width: 100%;
+  max-width: 1000px;
 }
 
 .blogContainer {
@@ -28,9 +29,9 @@
 }
 
 .title {
+  width: 100%;
   color: var(--Primary-Mid-black, #171e25);
-  font-family: var(--font-poppins);
-  font-family: "Poppins";
+  font-family: Poppins;
   font-size: 40px;
   font-style: normal;
   font-weight: 600;
@@ -46,6 +47,7 @@
   white-space: normal;
   word-wrap: break-word;
   overflow-wrap: break-word;
+  word-break: break-word;
 }
 
 .blogImage {

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

@@ -2,29 +2,30 @@ declare namespace _default {
     export let title: string;
     export { BlogHeader as component };
     export namespace argTypes {
-        namespace Title {
+        export namespace title_1 {
             let control: string;
             let description: string;
         }
-        namespace Author {
+        export { title_1 as title };
+        export namespace author {
             let control_1: string;
             export { control_1 as control };
             let description_1: string;
             export { description_1 as description };
         }
-        namespace Date {
+        export namespace date {
             let control_2: string;
             export { control_2 as control };
             let description_2: string;
             export { description_2 as description };
         }
-        namespace TimeToRead {
+        export namespace timeToRead {
             let control_3: string;
             export { control_3 as control };
             let description_3: string;
             export { description_3 as description };
         }
-        namespace Profession {
+        export namespace profession {
             export namespace control_4 {
                 let type: string;
             }
@@ -33,7 +34,7 @@ declare namespace _default {
             let description_4: string;
             export { description_4 as description };
         }
-        namespace ImageBlog {
+        export namespace imageBlog {
             let control_5: string;
             export { control_5 as control };
             let description_5: string;

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

@@ -15,43 +15,49 @@ export default {
     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: "number", description: "The estimated time to read the blog post" },
-        Profession: {
+        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: "number",
+            description: "The estimated time to read the blog post",
+        },
+        profession: {
             control: { type: "select" },
             options: ["Avocat", "Notaire", "Commissaire de justice"],
             description: "The profession associated with the author",
         },
-        ImageBlog: { control: "text", description: "The image for the blog post" },
+        imageBlog: { control: "text", description: "The image for the blog post" },
     },
 };
 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,
-    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",
+    title: "Understanding Legal Procedures",
+    author: "John Doe",
+    date: new Date("2023-10-21"),
+    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({});
 NotaryExample.args = {
-    Title: "The Role of a Notary in Legal Contracts",
-    Author: "Jane Smith",
-    Date: new Date("2023-08-15"),
-    TimeToRead: 7,
-    Profession: "Notaire",
-    ImageBlog: "https://via.placeholder.com/1000x449",
+    title: "The Role of a Notary in Legal Contracts",
+    author: "Jane Smith",
+    date: new Date("2023-08-15"),
+    timeToRead: 7,
+    profession: "Notaire",
+    imageBlog: "https://via.placeholder.com/1000x449",
 };
 export var JudicialOfficerExample = Template.bind({});
 JudicialOfficerExample.args = {
-    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: 9,
-    Profession: "Commissaire de justice",
-    ImageBlog: "https://via.placeholder.com/1000x449",
+    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: 9,
+    profession: "Commissaire de justice",
+    imageBlog: "https://via.placeholder.com/1000x449",
 };

package/dist/components/molecules/blogText/BlogText.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 export type BlogTextProps = {
-    Title: string;
-    Article: string;
+    title: string;
+    article: string;
 };
-declare function BlogText({ Title, Article }: BlogTextProps): React.JSX.Element;
+declare function BlogText({ title, article }: BlogTextProps): React.JSX.Element;
 export default BlogText;

package/dist/components/molecules/blogText/BlogText.js

@@ -2,10 +2,10 @@ import React from "react";
 import Paragraph from "../../atoms/typography/Paragraph";
 import styles from "./BlogText.module.css";
 function BlogText(_a) {
-    var Title = _a.Title, Article = _a.Article;
+    var title = _a.title, article = _a.article;
     return (React.createElement("section", { className: styles.BlogTextContainerWrapper },
         React.createElement("div", { className: styles.BlogTextContainer },
-            React.createElement("h3", { className: styles.BlogTextTitle }, Title),
-            React.createElement(Paragraph, { variant: "semiBold", color: "dark-grey", text: Article, className: styles.BlogTextCustomParagraph }))));
+            React.createElement("h3", { className: styles.BlogTextTitle }, title),
+            React.createElement(Paragraph, { variant: "semiBold", color: "dark-grey", text: article, className: styles.BlogTextCustomParagraph }))));
 }
 export default BlogText;

package/dist/components/molecules/blogText/BlogText.module.css

@@ -27,11 +27,16 @@
   font-style: normal;
   font-weight: 600;
   line-height: normal;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  hyphens: auto;
 }
 
 .BlogTextCustomParagraph {
   white-space: pre-wrap;
-  overflow: auto;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  hyphens: auto;
 }
 
 @media (max-width: 825px) {

package/dist/components/molecules/blogText/BlogText.stories.d.ts

@@ -3,11 +3,12 @@ declare namespace _default {
     export { BlogText as component };
     export let tags: string[];
     export namespace argTypes {
-        namespace Title {
+        export namespace title_1 {
             let control: string;
             let description: string;
         }
-        namespace Article {
+        export { title_1 as title };
+        export namespace article {
             let control_1: string;
             export { control_1 as control };
             let description_1: string;

package/dist/components/molecules/blogText/BlogText.stories.js

@@ -16,11 +16,11 @@ export default {
     component: BlogText,
     tags: ["autodocs"],
     argTypes: {
-        Title: {
+        title: {
             control: "text",
             description: "Le titre principal du bloc de texte du blog.",
         },
-        Article: {
+        article: {
             control: "text",
             description: "Le contenu textuel de l'article ou de la description du blog.",
         },
@@ -36,16 +36,16 @@ export default {
 var Template = function (args) { return React.createElement(BlogText, __assign({}, args)); };
 export var ShortTitleAndContent = Template.bind({});
 ShortTitleAndContent.args = {
-    Title: "Introduction",
-    Article: "Ceci est un article court qui résume l'idée principale de la section.",
+    title: "Introduction",
+    article: "Ceci est un article court qui résume l'idée principale de la section.",
 };
 export var LongTitleAndContent = Template.bind({});
 LongTitleAndContent.args = {
-    Title: "Pourquoi adopter une architecture modulaire dans vos projets ?",
-    Article: "L'adoption d'une architecture modulaire offre plusieurs avantages clés pour les projets de développement.\n\nEn premier lieu, elle améliore la maintenabilité du code en permettant aux développeurs de travailler sur des modules indépendants.\n\nEnsuite, elle facilite le déploiement incrémental et la collaboration d'équipe, réduisant ainsi les conflits lors du développement.\n\nEnfin, elle permet une meilleure scalabilité en isolant les fonctionnalités, ce qui rend les mises à jour plus fluides et réduit les risques d'introduire des bugs dans l'ensemble de l'application.",
+    title: "Pourquoi adopter une architecture modulaire dans vos projets ?",
+    article: "L'adoption d'une architecture modulaire offre plusieurs avantages clés pour les projets de développement.\n\nEn premier lieu, elle améliore la maintenabilité du code en permettant aux développeurs de travailler sur des modules indépendants.\n\nEnsuite, elle facilite le déploiement incrémental et la collaboration d'équipe, réduisant ainsi les conflits lors du développement.\n\nEnfin, elle permet une meilleure scalabilité en isolant les fonctionnalités, ce qui rend les mises à jour plus fluides et réduit les risques d'introduire des bugs dans l'ensemble de l'application.",
 };
 export var ArticleWithLineBreaks = Template.bind({});
 ArticleWithLineBreaks.args = {
-    Title: "Article avec retours à la ligne",
-    Article: "L'adoption d'une architecture modulaire offre plusieurs avantages :\n\n- Maintenabilit\u00E9 du code : possibilit\u00E9 de travailler sur des modules ind\u00E9pendants.\n- D\u00E9ploiement incr\u00E9mental : am\u00E9lioration de la collaboration.\n- Scalabilit\u00E9 : isolation des fonctionnalit\u00E9s pour r\u00E9duire les risques de bugs.\n\nCeci est un test avec des retours \u00E0 la ligne pour valider l'affichage.",
+    title: "Article avec retours à la ligne",
+    article: "L'adoption d'une architecture modulaire offre plusieurs avantages :\n\n- Maintenabilit\u00E9 du code : possibilit\u00E9 de travailler sur des modules ind\u00E9pendants.\n- D\u00E9ploiement incr\u00E9mental : am\u00E9lioration de la collaboration.\n- Scalabilit\u00E9 : isolation des fonctionnalit\u00E9s pour r\u00E9duire les risques de bugs.\n\nCeci est un test avec des retours \u00E0 la ligne pour valider l'affichage.",
 };

package/dist/components/molecules/blogTextImageBlock/BlogTextImageBlock.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
 export type BlogTextImageBlockProps = {
-    Title: string;
-    Article: string;
-    Image_URL: string;
+    title: string;
+    article: string;
+    imageUrl: string;
 };
-declare function BlogTextImageBlock({ Title, Article, Image_URL, }: BlogTextImageBlockProps): React.JSX.Element;
+declare function BlogTextImageBlock({ title, article, imageUrl, }: BlogTextImageBlockProps): React.JSX.Element;
 export default BlogTextImageBlock;

package/dist/components/molecules/blogTextImageBlock/BlogTextImageBlock.js

@@ -3,13 +3,13 @@ import styles from "./BlogTextImageBlock.module.css";
 import Image from "next/image";
 import Paragraph from "../../atoms/typography/Paragraph";
 function BlogTextImageBlock(_a) {
-    var Title = _a.Title, Article = _a.Article, Image_URL = _a.Image_URL;
+    var title = _a.title, article = _a.article, imageUrl = _a.imageUrl;
     return (React.createElement("section", { className: styles.BlogTextImageBlockWrapper },
         React.createElement("div", { className: styles.BlogTextImageBlockContainer },
             React.createElement("div", { className: styles.BlogTextImageBlockLeft },
-                React.createElement("div", { className: styles.BlogTextImageBlockTitle }, Title),
-                React.createElement(Paragraph, { variant: "semiBold", text: Article, color: "dark-grey", className: styles.blogTextImageBlockParagraph })),
+                React.createElement("div", { className: styles.BlogTextImageBlockTitle }, title),
+                React.createElement(Paragraph, { variant: "semiBold", text: article, color: "dark-grey", className: styles.blogTextImageBlockParagraph })),
             React.createElement("figure", { className: styles.BlogTextImageBlockRight },
-                React.createElement(Image, { width: 484, height: 322, src: Image_URL, alt: "Image d'un article de blog", className: styles.blogTextImageBlockImage })))));
+                React.createElement(Image, { width: 484, height: 322, src: imageUrl, alt: "Image d'un article de blog", className: styles.blogTextImageBlockImage })))));
 }
 export default BlogTextImageBlock;

package/dist/components/molecules/blogTextImageBlock/BlogTextImageBlock.module.css

@@ -2,19 +2,18 @@
   display: flex;
   justify-content: center;
   background-color: white;
-  width: 100%;
   padding: 16px;
-  gap: 20px;
+  width: 100%;
 }
 
 .BlogTextImageBlockContainer {
   display: flex;
-  width: 100%;
   max-width: 1000px;
+  width: 100%;
   flex-direction: row;
-  background-color: white;
+  gap: 20px;
   padding: 16px;
-  gap: 32px;
+  background-color: white;
 }
 
 .BlogTextImageBlockLeft {
@@ -34,7 +33,7 @@
 
 .BlogTextImageBlockTitle {
   color: var(--Primary-Mid-black, #171e25);
-  font-family: "Poppins" !important;
+  font-family: Poppins;
   font-size: 18px;
   font-weight: 600;
   margin: 0;
@@ -55,6 +54,7 @@
   word-break: break-word;
   word-wrap: break-word;
   overflow-wrap: break-word;
+  white-space: pre-wrap;
 }
 
 .blogTextImageBlockImage {
@@ -92,6 +92,11 @@
     padding: 4px;
   }
 
+  .BlogTextImageBlockContainer {
+    gap: 10px;
+    padding: 0 8px;
+  }
+
   .BlogTextImageBlockTitle {
     font-size: 16px;
   }

package/dist/components/molecules/blogTextImageBlock/BlogTextImageBlock.stories.d.ts

@@ -3,17 +3,18 @@ declare namespace _default {
     export { BlogTextImageBlock as component };
     export let tags: string[];
     export namespace argTypes {
-        namespace Title {
+        export namespace title_1 {
             let control: string;
             let description: string;
         }
-        namespace Article {
+        export { title_1 as title };
+        export namespace article {
             let control_1: string;
             export { control_1 as control };
             let description_1: string;
             export { description_1 as description };
         }
-        namespace Image_URL {
+        export namespace imageUrl {
             let control_2: string;
             export { control_2 as control };
             let description_2: string;

package/dist/components/molecules/blogTextImageBlock/BlogTextImageBlock.stories.js

@@ -16,15 +16,15 @@ export default {
     component: BlogTextImageBlock,
     tags: ["autodocs"],
     argTypes: {
-        Title: {
+        title: {
             control: "text",
             description: "Le titre principal de l'article du bloc.",
         },
-        Article: {
+        article: {
             control: "text",
             description: "Le contenu textuel de l'article ou de la description.",
         },
-        Image_URL: {
+        imageUrl: {
             control: "text",
             description: "L'URL de l'image à afficher dans le bloc.",
         },
@@ -40,19 +40,19 @@ export default {
 var Template = function (args) { return React.createElement(BlogTextImageBlock, __assign({}, args)); };
 export var DefaultView = Template.bind({});
 DefaultView.args = {
-    Title: "Titre d'exemple",
-    Article: "Ceci est un exemple d'article court. Ce composant est conçu pour afficher un contenu structuré avec un titre, un paragraphe et une image.",
-    Image_URL: "https://images.unsplash.com/photo-1733324770222-a6c4a921b379?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    title: "Titre d'exemple",
+    article: "Ceci est un exemple d'article court. Ce composant est conçu pour afficher un contenu structuré avec un titre, un paragraphe et une image.",
+    imageUrl: "https://images.unsplash.com/photo-1733324770222-a6c4a921b379?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
 };
 export var LongArticleWithImage = Template.bind({});
 LongArticleWithImage.args = {
-    Title: "Pourquoi une architecture modulaire est essentielle",
-    Article: "L'architecture modulaire est une pratique clé pour la réussite des projets modernes.\n\nElle offre une meilleure maintenabilité en permettant aux développeurs de se concentrer sur des modules indépendants. De plus, elle améliore la collaboration grâce au déploiement incrémental et à une réduction des conflits.\n\nEnfin, elle garantit une meilleure scalabilité en isolant les fonctionnalités, ce qui simplifie les mises à jour et réduit les risques d'introduire des bugs dans l'ensemble de l'application.",
-    Image_URL: "https://images.unsplash.com/photo-1731955196267-e863d6f39794?q=80&w=1693&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    title: "Pourquoi une architecture modulaire est essentielle",
+    article: "L'architecture modulaire est une pratique clé pour la réussite des projets modernes.\n\nElle offre une meilleure maintenabilité en permettant aux développeurs de se concentrer sur des modules indépendants. De plus, elle améliore la collaboration grâce au déploiement incrémental et à une réduction des conflits.\n\nEnfin, elle garantit une meilleure scalabilité en isolant les fonctionnalités, ce qui simplifie les mises à jour et réduit les risques d'introduire des bugs dans l'ensemble de l'application.",
+    imageUrl: "https://images.unsplash.com/photo-1731955196267-e863d6f39794?q=80&w=1693&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
 };
 export var ArticleWithoutImage = Template.bind({});
 ArticleWithoutImage.args = {
-    Title: "Titre sans image",
-    Article: "Ce test illustre l'affichage d'un article sans image associée. Le composant doit s'adapter en conséquence, en affichant uniquement le titre et le contenu textuel.",
-    Image_URL: "",
+    title: "Titre sans image",
+    article: "Ce test illustre l'affichage d'un article sans image associée. Le composant doit s'adapter en conséquence, en affichant uniquement le titre et le contenu textuel.",
+    imageUrl: "",
 };

package/dist/components/molecules/documentCard/DocumentCard.d.ts

@@ -4,7 +4,7 @@ export interface DocumentCardProps {
     type: "document" | "note" | "invoice" | "waiting" | "payment" | undefined;
     title: string;
     date: Date | undefined;
-    status: "sent" | "received" | "internal";
+    status: "sent" | "received" | "internal" | "notRequired" | "waiting" | "expired" | "canceled" | "failed" | "processing" | "maxAttemptsReached";
     documents?: {
         [key: string]: boolean;
     };

package/dist/components/molecules/documentCard/DocumentCard.js

@@ -29,6 +29,20 @@ var DocumentCard = function (_a) {
                 return "REÇU";
             case "sent":
                 return "ENVOYÉ";
+            case "notRequired":
+                return "NON REQUIS";
+            case "waiting":
+                return "EN ATTENTE";
+            case "expired":
+                return "EXPIRÉ";
+            case "canceled":
+                return "ANNULÉ";
+            case "failed":
+                return "ÉCHOUÉ";
+            case "processing":
+                return "EN COURS";
+            case "maxAttemptsReached":
+                return "ÉCHOUÉ";
             default:
                 return "INTERNE";
         }
@@ -55,6 +69,25 @@ var DocumentCard = function (_a) {
             year: "2-digit",
         });
     };
+    var getInformationColor = function (status) {
+        switch (status) {
+            case "internal":
+            case "received":
+            case "sent":
+            case "notRequired":
+            case "waiting":
+                return "blue";
+            case "processing":
+                return "orange";
+            case "expired":
+            case "canceled":
+            case "failed":
+            case "maxAttemptsReached":
+                return "red";
+            default:
+                return "blue";
+        }
+    };
     if (type === "waiting") {
         var documentList = Object.keys(documents);
         return (React.createElement("div", { className: "document-card waiting", style: { cursor: onCardClick ? "pointer" : "default" }, onClick: function () { return onCardClick && onCardClick(); } },
@@ -79,8 +112,8 @@ var DocumentCard = function (_a) {
                 React.createElement("span", { className: "document-card-date" }, formatDate(date)))),
         React.createElement("div", { className: "document-card-right" },
             React.createElement("div", { className: "document-card-status" },
-                React.createElement(OtherStatusTag, { type: "information", label: getStatusName() })),
-            type != "payment" && React.createElement("div", { className: "document-card-icon-eye" },
-                React.createElement("i", { className: "allaw-icon-eye" })))));
+                React.createElement(OtherStatusTag, { type: "information", label: getStatusName(), informationColor: getInformationColor(status) })),
+            type != "payment" && (React.createElement("div", { className: "document-card-icon-eye" },
+                React.createElement("i", { className: "allaw-icon-eye" }))))));
 };
 export default DocumentCard;

package/dist/components/molecules/documentCard/DocumentCard.stories.js

@@ -32,7 +32,18 @@ export default {
         status: {
             control: {
                 type: "select",
-                options: ["sent", "received"],
+                options: [
+                    "sent",
+                    "received",
+                    "internal",
+                    "notRequired",
+                    "waiting",
+                    "expired",
+                    "canceled",
+                    "failed",
+                    "processing",
+                    "maxAttemptsReached",
+                ],
             },
         },
         documents: {

package/dist/styles/colors.css

@@ -25,10 +25,12 @@
   --blue-tag-dark: #1985e8;
   --blue-tag-light: #daebfb;
   --gris-clair: #dee8f2;
+  --orange-tag-dark: #ff9f43;
 
   /* Actions */
   --actions-valid: #29a36a;
   --actions-error: #e15151;
+  --actions-warning: #ffc857;
 
   /* Background */
   --background-pro: #fcfdfd;

package/package.json

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

package/dist/components/molecules/blogCard/BlodCard.stories.js

@@ -1,33 +0,0 @@
-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 BlogCard from './BlogCard';
-export default {
-    title: 'Components/Molecules/Blog/BlogCard',
-    component: BlogCard,
-};
-var Template = function (args) { return React.createElement(BlogCard, __assign({}, args)); };
-export var Default = Template.bind({});
-Default.args = {
-    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: ['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...',
-};
-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. 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'] });