allaw-ui 1.0.132 → 1.0.134

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

@@ -4,7 +4,7 @@ export interface SelectableListItemProps {
     labels: {
         label: string;
         width?: string;
-        align?: "start" | "end" | "center";
+        align?: string;
         fontWeight?: "normal" | "bold";
         color?: "mid-grey" | "dark-grey" | "noir" | "venom-grey-dark" | "actions-valid" | "actions-error";
     }[];

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

@@ -1,15 +1,9 @@
 import React from "react";
-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,25 +1,7 @@
-import React, { useState, useEffect } from "react";
+import React 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, 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));
+    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: "".concat(styles.heading, " ").concat(styles[variant], " ").concat(styles["color-".concat(color)], " ").concat(styles["align-".concat(align)]) }, text));
 };
 export default Heading;

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

@@ -59,6 +59,5 @@ export const H3: any;
 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

@@ -20,7 +20,7 @@ export default {
         variant: {
             control: {
                 type: "select",
-                options: ["h1", "h2", "h3", "h4", "h5", "h6", "h7"],
+                options: ["h1", "h2", "h3", "h4", "h5", "h6"],
             },
         },
         color: {
@@ -64,13 +64,13 @@ export var H1 = Template.bind({});
 H1.args = {
     variant: "h1",
     color: "pure-white",
-    text: "Poppins – SemiBold – 60px",
+    text: "Poppins – SemiBold – 50px",
 };
 export var H2 = Template.bind({});
 H2.args = {
     variant: "h2",
     color: "pure-white",
-    text: "Poppins – SemiBold – 36px",
+    text: "Poppins – SemiBold – 38px",
 };
 export var H3 = Template.bind({});
 H3.args = {
@@ -88,18 +88,12 @@ export var H5 = Template.bind({});
 H5.args = {
     variant: "h5",
     color: "pure-white",
-    text: "Poppins – Medium – 24px",
+    text: "Poppins – Medium – 18px",
 };
 export var H6 = Template.bind({});
 H6.args = {
     variant: "h6",
     color: "pure-white",
-    text: "Poppins – SemiBold – 18px",
-};
-export var H7 = Template.bind({});
-H7.args = {
-    variant: "h7",
-    color: "pure-white",
     text: "Poppins – SemiBold – 14px",
 };
 export var ResponsiveExample = Template.bind({});

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

@@ -7,6 +7,7 @@ export interface ParagraphProps {
     maxLines?: number;
     maxChars?: number;
     size?: "default" | "small";
+    className?: string;
 }
 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;
     var truncateText = function (text, maxChars) {
         if (text.length <= maxChars)
             return text;
@@ -21,7 +21,7 @@ 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",

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 export type BlogCardProps = {
     Article_URL: string;
     Image_URL: string;

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

@@ -1,12 +1,12 @@
-import React from 'react';
-import styles from './BlogCard.module.css';
-import Link from 'next/link';
-import { OtherStatusTag } from '../../atoms/tags';
-import { Heading, TinyInfo } from '../../atoms/typography';
-import Image from 'next/image';
+import React from "react";
+import styles from "./BlogCard.module.css";
+import Link from "next/link";
+import { OtherStatusTag } from "../../atoms/tags";
+import { TinyInfo } from "../../atoms/typography";
+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 }))));
+    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 BlogBottomSection = function (_a) {
     var Tags = _a.Tags, Date = _a.Date, Title = _a.Title, Description = _a.Description;
@@ -19,18 +19,16 @@ var BlogBottomSection = function (_a) {
             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 },
-                React.createElement(Heading, { variant: "h6", text: Title, color: "noir", align: "left" })),
+            React.createElement("div", { className: styles.blogTitle }, Title),
             React.createElement("div", { className: styles.blogDescription },
                 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;
-    return (React.createElement(React.Fragment, null, onClick ? React.createElement("button", { className: styles.blogContainer, onClick: function () { return onClick && 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 }))));
+        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 })))));
 };
 export default BlogCard;

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

@@ -1,117 +1,124 @@
 .blogContainer {
-    text-decoration: none;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    width: 361px;
-    box-shadow: 0px 1px 20px 0px rgba(213, 233, 246, 0.80);
-    border-radius: 16px;
-    overflow: hidden;
-    transition: transform 0.2s ease;
-    cursor: pointer;
-    border: none;
-    height: 100%;
-    max-height: 385px;
+  text-decoration: none;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 361px;
+  box-shadow: 0px 1px 20px 0px rgba(213, 233, 246, 0.8);
+  border-radius: 16px;
+  overflow: hidden;
+  transition: transform 0.2s ease;
+  cursor: pointer;
+  border: none;
+  height: 100%;
+  max-height: 385px;
 }
 
 .blogContainer:hover {
-    transform: scale(1.015);
+  transform: scale(1.015);
 }
 
 .blogTopSection {
-    height: 200px;
-    object-fit: contain;
-    width: 100%;
+  height: 200px;
+  object-fit: contain;
+  width: 100%;
 }
 
 .blogSplitSection {
-    width: 329px;
-    height: 1px;
-    background: #F1F4F8;
+  width: 329px;
+  height: 1px;
+  background: #f1f4f8;
 }
 
 .blogBottomSection {
-    flex: 1;
-    display: flex;
-    padding: 23px 16px 24px 16px;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 12px;
-    background: #FFF;
+  flex: 1;
+  display: flex;
+  padding: 23px 16px 24px 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  background: #fff;
 }
 
 .blogImage {
-    background: var(--Primary-Light-grey, #F4F7FB);
-    width: 100%; 
-    height: 100%; 
-    object-fit: cover; 
+  background: var(--Primary-Light-grey, #f4f7fb);
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .blogTitle {
-    display: -webkit-box;
-    line-clamp: 1;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
+  display: -webkit-box;
+  line-clamp: 1;
+  -webkit-line-clamp: 1;
+  -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;
 }
 
 .blogDescription {
-    display: -webkit-box;
-    line-clamp: 3;
-    -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; 
+  display: -webkit-box;
+  line-clamp: 3;
+  -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 {
-    background: var(--Primary-Light-grey, #F4F7FB);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #ccc;
-    font-family: Arial, sans-serif;
-    font-size: 14px;
+  background: var(--Primary-Light-grey, #f4f7fb);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ccc;
+  font-family: Arial, sans-serif;
+  font-size: 14px;
 }
 
 .tagsContainer {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    gap: 8px;
-    max-width: 100%;
-    scroll-behavior: smooth;
-    flex-wrap: wrap;
-    overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 8px;
+  max-width: 100%;
+  scroll-behavior: smooth;
+  flex-wrap: wrap;
+  overflow: hidden;
 }
 
 .blogBottomSectionUp {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    align-self: stretch;
-    width: 100%; 
-    overflow: hidden; 
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  width: 100%;
+  overflow: hidden;
 }
 
 .blogBottomSectionDown {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 16px;
-    align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
 }
 
 .blogDate {
-    color: #728EA7;
-    font-family: Inter;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: normal;
-}
+  color: #728ea7;
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}

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

@@ -7,5 +7,5 @@ export type BlogHeaderProps = {
     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

@@ -4,18 +4,18 @@ 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;
-    return (React.createElement("div", { className: styles.blogContainerWrapper },
+    return (React.createElement("article", { className: styles.blogContainerWrapper },
         React.createElement("div", { className: styles.blogContainer },
-            React.createElement("div", { className: styles.blogTitle },
-                React.createElement("h1", { className: styles.title }, Title)),
+            React.createElement("h1", { className: styles.title }, Title),
             React.createElement("div", { className: styles.blogInfoContainer },
-                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" }),
+                    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" }),
-                React.createElement(TinyInfo, { variant: "semiBold12", text: Author, color: "dark-grey" })),
-            React.createElement("div", { className: styles.blogImageContainer },
+                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 })))));
 }
 export default BlogHeader;

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

@@ -3,6 +3,7 @@
   justify-content: center;
   background-color: white;
   padding: 16px;
+  gap: 20px;
   width: 100%;
 }
 
@@ -13,6 +14,7 @@
   flex-direction: column;
   align-items: flex-start;
   background-color: white;
+  padding: 16px;
   gap: 16px;
 }
 
@@ -25,7 +27,15 @@
   flex-wrap: wrap;
 }
 
-.blogTitle {
+.title {
+  color: var(--Primary-Mid-black, #171e25);
+  font-family: var(--font-poppins);
+  font-family: "Poppins";
+  font-size: 40px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  letter-spacing: 0.4px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
@@ -38,17 +48,6 @@
   overflow-wrap: break-word;
 }
 
-.title {
-  color: var(--Primary-Mid-black, #171E25);
-  font-family: var(--font-poppins);
-  font-family: "Poppins";
-  font-size: 40px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: normal;
-  letter-spacing: 0.4px;
-}
-
 .blogImage {
   width: 100%;
   height: 450px;
@@ -58,6 +57,8 @@
 
 .blogImageContainer {
   width: 100%;
+  max-width: 1000px;
+  max-height: 449px;
   height: auto;
   overflow: hidden;
   display: flex;
@@ -73,16 +74,16 @@
 }
 
 .timeToReadContainer > i {
-  color: #25BEEB;
+  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; 
+    gap: 6px;
     width: 100%;
     justify-content: space-between;
     align-items: stretch;
@@ -132,7 +133,7 @@
     padding: 0;
   }
 
-  .blogTitle {
+  .title {
     -webkit-line-clamp: 3;
     line-clamp: 3;
   }
@@ -144,6 +145,4 @@
     padding: 0 8px;
     margin-top: 4px;
   }
-
-
 }

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

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

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { Paragraph } from "src/components/atoms/typography";
+import styles from "./BlogText.module.css";
+function BlogText(_a) {
+    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 }))));
+}
+export default BlogText;

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

@@ -0,0 +1,54 @@
+.BlogTextContainerWrapper {
+  display: flex;
+  justify-content: center;
+  background-color: white;
+  padding: 16px;
+  width: 100%;
+}
+
+.BlogTextContainer {
+  display: flex;
+  max-width: 1000px;
+  width: 100%;
+  min-height: 200px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 20px;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  white-space: normal;
+  padding: 16px;
+}
+
+.BlogTextTitle {
+  color: var(--Primary-Mid-black, #171e25);
+  font-family: Poppins;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+.BlogTextCustomParagraph {
+  white-space: pre-wrap;
+  overflow: auto;
+}
+
+@media (max-width: 825px) {
+  .BlogTextContainer {
+    gap: 12px;
+    padding: 0 12px;
+  }
+}
+
+@media (max-width: 400px) {
+  .BlogTextContainerWrapper {
+    padding: 0;
+  }
+
+  .BlogTextContainer {
+    gap: 10px;
+    padding: 0 8px;
+    margin-top: 4px;
+  }
+}

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

@@ -0,0 +1,30 @@
+declare namespace _default {
+    export let title: string;
+    export { BlogText as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace Title {
+            let control: string;
+            let description: string;
+        }
+        namespace Article {
+            let control_1: string;
+            export { control_1 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
+    }
+    export namespace parameters {
+        namespace docs {
+            export namespace description_2 {
+                let component: string;
+            }
+            export { description_2 as description };
+        }
+    }
+}
+export default _default;
+export const ShortTitleAndContent: any;
+export const LongTitleAndContent: any;
+export const ArticleWithLineBreaks: any;
+import BlogText from "../blogText/BlogText";

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

@@ -0,0 +1,51 @@
+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 BlogText from "../blogText/BlogText";
+export default {
+    title: "Components/molecules/Blog/BlogText",
+    component: BlogText,
+    tags: ["autodocs"],
+    argTypes: {
+        Title: {
+            control: "text",
+            description: "Le titre principal du bloc de texte du blog.",
+        },
+        Article: {
+            control: "text",
+            description: "Le contenu textuel de l'article ou de la description du blog.",
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: "Le composant `BlogText` est conçu pour afficher un titre et un long article ou contenu dans un format structuré, idéal pour les sections de texte des blogs.",
+            },
+        },
+    },
+};
+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.",
+};
+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.",
+};
+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.",
+};

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+import React from "react";
+import styles from "./BlogTextImageBlock.module.css";
+import Image from "next/image";
+import { Paragraph } from "src/components/atoms/typography";
+function BlogTextImageBlock(_a) {
+    var Title = _a.Title, Article = _a.Article, Image_URL = _a.Image_URL;
+    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("figure", { className: styles.BlogTextImageBlockRight },
+                React.createElement(Image, { width: 484, height: 322, src: Image_URL, alt: "Image d'un article de blog", className: styles.blogTextImageBlockImage })))));
+}
+export default BlogTextImageBlock;

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

@@ -0,0 +1,103 @@
+.BlogTextImageBlockWrapper {
+  display: flex;
+  justify-content: center;
+  background-color: white;
+  width: 100%;
+  padding: 16px;
+  gap: 20px;
+}
+
+.BlogTextImageBlockContainer {
+  display: flex;
+  width: 100%;
+  max-width: 1000px;
+  flex-direction: row;
+  background-color: white;
+  padding: 16px;
+  gap: 32px;
+}
+
+.BlogTextImageBlockLeft {
+  flex: 0 0 calc(50% - 16px);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  word-wrap: break-word;
+}
+
+.BlogTextImageBlockRight {
+  flex: 0 0 calc(50% - 16px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.BlogTextImageBlockTitle {
+  color: var(--Primary-Mid-black, #171e25);
+  font-family: "Poppins" !important;
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  white-space: normal;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: block;
+  word-break: break-word;
+}
+
+.blogTextImageBlockParagraph {
+  font-size: 16px;
+  line-height: 1.5;
+  margin: 0;
+  text-align: left;
+  word-break: break-word;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.blogTextImageBlockImage {
+  width: 100%;
+  max-width: 100%;
+  max-height: 400px;
+  height: auto;
+}
+
+@media (max-width: 800px) {
+  .BlogTextImageBlockContainer {
+    flex-direction: column;
+    gap: 16px;
+    padding: 8px;
+  }
+
+  .BlogTextImageBlockLeft,
+  .BlogTextImageBlockRight {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+
+  .BlogTextImageBlockRight {
+    justify-content: center;
+  }
+
+  .blogTextImageBlockImage {
+    max-width: 100%;
+    height: auto;
+  }
+}
+
+@media (max-width: 400px) {
+  .BlogTextImageBlockWrapper {
+    padding: 4px;
+  }
+
+  .BlogTextImageBlockTitle {
+    font-size: 16px;
+  }
+
+  .blogTextImageBlockParagraph {
+    font-size: 14px;
+    line-height: 1.4;
+  }
+}

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

@@ -0,0 +1,36 @@
+declare namespace _default {
+    export let title: string;
+    export { BlogTextImageBlock as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace Title {
+            let control: string;
+            let description: string;
+        }
+        namespace Article {
+            let control_1: string;
+            export { control_1 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
+        namespace Image_URL {
+            let control_2: string;
+            export { control_2 as control };
+            let description_2: string;
+            export { description_2 as description };
+        }
+    }
+    export namespace parameters {
+        namespace docs {
+            export namespace description_3 {
+                let component: string;
+            }
+            export { description_3 as description };
+        }
+    }
+}
+export default _default;
+export const DefaultView: any;
+export const LongArticleWithImage: any;
+export const ArticleWithoutImage: any;
+import BlogTextImageBlock from "./BlogTextImageBlock";

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

@@ -0,0 +1,58 @@
+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 BlogTextImageBlock from "./BlogTextImageBlock";
+export default {
+    title: "Components/molecules/Blog/BlogTextImageBlock",
+    component: BlogTextImageBlock,
+    tags: ["autodocs"],
+    argTypes: {
+        Title: {
+            control: "text",
+            description: "Le titre principal de l'article du bloc.",
+        },
+        Article: {
+            control: "text",
+            description: "Le contenu textuel de l'article ou de la description.",
+        },
+        Image_URL: {
+            control: "text",
+            description: "L'URL de l'image à afficher dans le bloc.",
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: "Le composant `BlogTextImageBlock` affiche un bloc structuré avec un titre, un paragraphe et une image associée. Il est idéal pour présenter des articles ou sections de blogs.",
+            },
+        },
+    },
+};
+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",
+};
+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",
+};
+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: "",
+};

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

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

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

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

package/dist/index.d.ts

@@ -66,3 +66,7 @@ export { default as BlogHeader } from "./components/molecules/blogHeader/BlogHea
 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";
+export { default as BlogText } from "./components/molecules/blogText/BlogText";
+export type { BlogTextProps } from "./components/molecules/blogText/BlogText";
+export { default as blogTextImageBlock } from "./components/molecules/blogTextImageBlock/BlogTextImageBlock";
+export type { BlogTextImageBlockProps } from "./components/molecules/blogTextImageBlock/BlogTextImageBlock";

package/dist/index.js

@@ -82,3 +82,5 @@ export { default as ProCard } from "./components/molecules/proCard/ProCard";
 export { default as Pagination } from "./components/molecules/pagination/Pagination";
 export { default as BlogHeader } from "./components/molecules/blogHeader/BlogHeader";
 export { default as BlogCard } from "./components/molecules/blogCard/BlogCard";
+export { default as BlogText } from "./components/molecules/blogText/BlogText";
+export { default as blogTextImageBlock } from "./components/molecules/blogTextImageBlock/BlogTextImageBlock";

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/package.json

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