allaw-ui 0.1.71 → 1.0.0

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

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

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

@@ -0,0 +1,33 @@
+import React from "react";
+import styles from "./BlogCard.module.css";
+import Link from "next/link";
+import TinyInfo from "../../atoms/typography/TinyInfo";
+import Image from "next/image";
+var BlogTopSection = function (_a) {
+    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;
+    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) {
+                var validatedTag = tag.trim().length > 12 ? "".concat(tag.slice(0, 12), "...") : tag;
+                return (React.createElement("span", { key: index, className: styles.blogTypeTag }, validatedTag));
+            })),
+            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.blogDescription },
+                React.createElement(TinyInfo, { variant: "medium14", text: description, color: "noir", align: "left" })))));
+};
+var BlogCard = function (_a) {
+    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, { 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

@@ -0,0 +1,148 @@
+.blogContainer {
+  text-decoration: none;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  max-width: 260px;
+  min-width: 260px;
+  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: 380px;
+}
+
+.blogContainer:hover {
+  transform: scale(1.015);
+}
+
+.blogTopSection {
+  height: 150px;
+  object-fit: contain;
+  width: 100%;
+}
+
+.blogSplitSection {
+  width: 100%;
+  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;
+  width: 100%;
+}
+
+.blogImage {
+  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;
+  text-align: left;
+  color: var(--Primary-Mid-black, #171e25);
+  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 {
+  display: -webkit-box;
+  line-clamp: 3;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-align: left;
+  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;
+}
+
+.tagsContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 8px;
+  max-width: 100%;
+  scroll-behavior: smooth;
+  flex-wrap: wrap;
+  overflow: hidden;
+}
+
+.blogTypeTag {
+  font-size: 12px;
+  padding: 4px 6px;
+  border-radius: 0.3rem;
+  font-style: normal;
+  font-weight: 600;
+  font-family: "Open Sans";
+  text-align: center;
+  height: fit-content;
+  width: fit-content;
+  color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
+  background-color: var(--primary-light-grey, #f4f7fb);
+  border: none;
+  display: inline-block;
+  line-height: 1;
+}
+
+.blogBottomSectionUp {
+  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;
+}
+
+.blogDate {
+  color: #728ea7;
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}

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

@@ -0,0 +1,10 @@
+declare namespace _default {
+    export let title: string;
+    export { BlogCard as component };
+}
+export default _default;
+export const Default: any;
+export const NoImage: any;
+export const LongDescriptionTitle: any;
+export const MultipleTags: any;
+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/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/blogFooter/BlogFooter.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export type BlogFooterProps = {
+    job: "Avocat" | "Notaire" | "Commissaire de justice";
+    firstName: string;
+    lastName: string;
+    address: string;
+    profileUrl: string;
+    description: string;
+    imageUrl: string;
+};
+declare function BlogFooter({ job, firstName, lastName, address, profileUrl, description, imageUrl, }: BlogFooterProps): React.JSX.Element;
+export default BlogFooter;

package/dist/components/molecules/blogFooter/BlogFooter.js

@@ -0,0 +1,14 @@
+import React from "react";
+import Link from "next/link";
+import styles from "./BlogFooter.module.css";
+import ProCard from "../../molecules/proCard/ProCard";
+function BlogFooter(_a) {
+    var job = _a.job, firstName = _a.firstName, lastName = _a.lastName, address = _a.address, profileUrl = _a.profileUrl, description = _a.description, imageUrl = _a.imageUrl;
+    return (React.createElement("footer", { className: styles.BlogFooterContainer },
+        React.createElement("div", { className: styles.BlogFooterCard },
+            React.createElement("p", { className: styles.BlogFooterTitle }, description),
+            React.createElement(Link, { href: profileUrl, passHref: true, legacyBehavior: true },
+                React.createElement("a", { className: styles.LinkWrapper, "aria-label": "Profil de ".concat(firstName, " ").concat(lastName) },
+                    React.createElement(ProCard, { job: job, firstName: firstName, lastName: lastName, address: address, profileUrl: profileUrl, imageUrl: imageUrl }))))));
+}
+export default BlogFooter;

package/dist/components/molecules/blogFooter/BlogFooter.module.css

@@ -0,0 +1,48 @@
+.BlogFooterContainer {
+  display: flex;
+  justify-content: flex-end;
+  background-color: white;
+  padding: 16px;
+  width: 100%;
+  max-width: 1000px;
+}
+
+.BlogFooterCard {
+  display: flex;
+  flex-direction: column;
+  max-width: 370px;
+  width: 100%;
+  gap: 20px;
+}
+
+.BlogFooterTitle {
+  width: 100%;
+  color: var(--Primary-Mid-black, #171e25);
+  text-align: left;
+  font-family: Poppins;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  margin: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  line-clamp: 3;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
+.LinkWrapper {
+  text-decoration: none;
+  display: block;
+  width: 100%;
+}
+
+@media (max-width: 720px) {
+  .BlogFooterContainer {
+    justify-content: center;
+    padding: 12px;
+  }
+}

package/dist/components/molecules/blogFooter/BlogFooter.stories.d.ts

@@ -0,0 +1,60 @@
+declare namespace _default {
+    export let title: string;
+    export { BlogFooter as component };
+    export let tags: string[];
+    export namespace argTypes {
+        export namespace job {
+            let control: string;
+            let description: string;
+        }
+        export namespace firstName {
+            let control_1: string;
+            export { control_1 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
+        export namespace lastName {
+            let control_2: string;
+            export { control_2 as control };
+            let description_2: string;
+            export { description_2 as description };
+        }
+        export namespace address {
+            let control_3: string;
+            export { control_3 as control };
+            let description_3: string;
+            export { description_3 as description };
+        }
+        export namespace profileUrl {
+            let control_4: string;
+            export { control_4 as control };
+            let description_4: string;
+            export { description_4 as description };
+        }
+        export namespace imageUrl {
+            let control_5: string;
+            export { control_5 as control };
+            let description_5: string;
+            export { description_5 as description };
+        }
+        export namespace description_6 {
+            let control_6: string;
+            export { control_6 as control };
+            let description_7: string;
+            export { description_7 as description };
+        }
+        export { description_6 as description };
+    }
+    export namespace parameters {
+        namespace docs {
+            export namespace description_8 {
+                let component: string;
+            }
+            export { description_8 as description };
+        }
+    }
+}
+export default _default;
+export const Default: any;
+export const WithLongDescription: any;
+import BlogFooter from "./BlogFooter";

package/dist/components/molecules/blogFooter/BlogFooter.stories.js

@@ -0,0 +1,67 @@
+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 BlogFooter, { BlogFooterProps } from "./BlogFooter";
+export default {
+    title: "Components/molecules/Blog/BlogFooter",
+    component: BlogFooter,
+    tags: ["autodocs"],
+    argTypes: {
+        job: { control: "text", description: "Le métier de la personne." },
+        firstName: { control: "text", description: "Le prénom de la personne." },
+        lastName: {
+            control: "text",
+            description: "Le nom de famille de la personne.",
+        },
+        address: { control: "text", description: "L'adresse de la personne." },
+        profileUrl: {
+            control: "text",
+            description: "L'URL du profil ou de l'image de la personne.",
+        },
+        imageUrl: {
+            control: "text",
+            description: "L'URL de l'image de la carte ou de la personne.",
+        },
+        description: {
+            control: "text",
+            description: "Une description ou un titre lié au blog.",
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: "Le composant `BlogFooter` affiche une section de pied de page avec des informations sur une personne, incluant un métier, un nom, une adresse, une description et une image.",
+            },
+        },
+    },
+};
+var Template = function (args) { return React.createElement(BlogFooter, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    job: "Avocat",
+    firstName: "Jean",
+    lastName: "Dupont",
+    address: "123 Rue de la Loi, Paris",
+    profileUrl: "https://via.placeholder.com/150",
+    description: "À propos de l'auteur",
+    imageUrl: "https://plus.unsplash.com/premium_photo-1698084059560-9a53de7b816b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8YXZvY2F0fGVufDB8fDB8fHww",
+};
+export var WithLongDescription = Template.bind({});
+WithLongDescription.args = {
+    job: "Notaire",
+    firstName: "Marie",
+    lastName: "Durand",
+    address: "45 Boulevard Haussmann, Paris",
+    profileUrl: "https://via.placeholder.com/150",
+    description: "Marie Durand est une notaire expérimentée avec plus de 15 ans d'expérience dans le domaine juridique. Elle est spécialisée dans les contrats immobiliers et la gestion des patrimoines complexes.",
+    imageUrl: "https://images.unsplash.com/photo-1587986077033-5fccb5819f5b?w=400&q=80",
+};

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

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

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

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

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,21 @@
+import React from "react";
+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;
+    return (React.createElement("article", { className: styles.blogContainerWrapper },
+        React.createElement("header", { className: styles.blogContainer },
+            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("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("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

@@ -0,0 +1,150 @@
+.blogContainerWrapper {
+  display: flex;
+  justify-content: center;
+  background-color: white;
+  padding: 16px;
+  gap: 20px;
+  width: 100%;
+  max-width: 1000px;
+}
+
+.blogContainer {
+  display: flex;
+  width: 100%;
+  max-width: 1000px;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: white;
+  padding: 16px;
+  gap: 16px;
+}
+
+.blogInfoContainer {
+  display: flex;
+  align-items: flex-end;
+  gap: 14px;
+  width: auto;
+  height: auto;
+  flex-wrap: wrap;
+}
+
+.title {
+  width: 100%;
+  color: var(--Primary-Mid-black, #171e25);
+  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;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+  white-space: normal;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.blogImage {
+  width: 100%;
+  height: 450px;
+  object-fit: cover;
+  object-position: center;
+}
+
+.blogImageContainer {
+  width: 100%;
+  max-width: 1000px;
+  max-height: 449px;
+  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: 825px) {
+  .blogImage {
+    height: 200px;
+  }
+
+  .title {
+    font-size: 25px;
+  }
+}
+
+@media (max-width: 400px) {
+  .blogContainerWrapper {
+    padding: 0;
+  }
+
+  .title {
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+  }
+
+  .blogContainer {
+    gap: 12px;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 0 8px;
+    margin-top: 4px;
+  }
+}