allaw-ui 1.0.113 → 1.0.115
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/molecules/BlogTextBlock/BlogTextBlock.d.ts +1 -1
- package/dist/components/molecules/BlogTextBlock/BlogTextBlock.js +21 -17
- package/dist/components/molecules/blogArticle/BlogArticle.d.ts +0 -1
- package/dist/components/molecules/blogArticle/BlogArticle.js +14 -11
- package/dist/components/molecules/blogArticle/{BlogArticle.css → BlogArticle.module.css} +17 -16
- package/dist/components/molecules/blogArticle/BlogArticle.stories.js +1 -1
- package/dist/stories/Header.stories.d.ts +3 -3
- package/package.json +1 -1
- package/dist/components/molecules/blogArticle/index.d.ts +0 -2
- package/dist/components/molecules/blogArticle/index.js +0 -1
- package/dist/styles/colors.module.css +0 -36
|
@@ -8,5 +8,5 @@ export type BlogTextBlockProps = {
|
|
|
8
8
|
Profession: "Avocat" | "Notaire" | "Commissaire de justice";
|
|
9
9
|
ImageBlog: string;
|
|
10
10
|
};
|
|
11
|
-
declare function BlogTextBlock({ Title, Date, TimeToRead, Profession, ImageBlog
|
|
11
|
+
declare function BlogTextBlock({ Title, Date, TimeToRead, Profession, ImageBlog }: BlogTextBlockProps): React.JSX.Element;
|
|
12
12
|
export default BlogTextBlock;
|
|
@@ -4,23 +4,27 @@ import Image from "next/image";
|
|
|
4
4
|
import "./BlogTextBlock.css";
|
|
5
5
|
function BlogTextBlock(_a) {
|
|
6
6
|
var Title = _a.Title, Date = _a.Date, TimeToRead = _a.TimeToRead, Profession = _a.Profession, ImageBlog = _a.ImageBlog;
|
|
7
|
-
return (React.createElement(
|
|
8
|
-
React.createElement("div", { className: "
|
|
9
|
-
React.createElement(
|
|
10
|
-
|
|
11
|
-
React.createElement(
|
|
12
|
-
|
|
13
|
-
React.createElement("
|
|
14
|
-
React.createElement("
|
|
15
|
-
React.createElement("
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
React.createElement("
|
|
19
|
-
React.createElement("
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
React.createElement(
|
|
7
|
+
return (React.createElement(React.Fragment, null,
|
|
8
|
+
React.createElement("div", { className: "blogContainer" },
|
|
9
|
+
React.createElement("div", { className: "blogContainerTop" },
|
|
10
|
+
React.createElement(Heading, { text: Title, variant: "h2", color: "noir", align: "left" }),
|
|
11
|
+
React.createElement("div", { className: "blogInfoContainer" },
|
|
12
|
+
React.createElement(TinyInfo, { variant: "medium12", text: Date.toLocaleDateString(), color: "dark-grey" }),
|
|
13
|
+
React.createElement("div", { className: "timeToReadContainer" },
|
|
14
|
+
React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" },
|
|
15
|
+
React.createElement("g", { clipPath: "url(#clip0_9957_3676)" },
|
|
16
|
+
React.createElement("path", { d: "M7.00033 12.8332C10.222 12.8332 12.8337 10.2215 12.8337 6.99984C12.8337 3.77818 10.222 1.1665 7.00033 1.1665C3.77866 1.1665 1.16699 3.77818 1.16699 6.99984C1.16699 10.2215 3.77866 12.8332 7.00033 12.8332Z", stroke: "#25BEEB", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
17
|
+
React.createElement("path", { d: "M7 3.5V7L9.33333 8.16667", stroke: "#25BEEB", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })),
|
|
18
|
+
React.createElement("defs", null,
|
|
19
|
+
React.createElement("clipPath", { id: "clip0_9957_3676" },
|
|
20
|
+
React.createElement("rect", { width: "14", height: "14", fill: "white" })))),
|
|
21
|
+
React.createElement(TinyInfo, { variant: "medium12", text: TimeToRead, color: "dark-grey" })),
|
|
22
|
+
React.createElement(TinyInfo, { variant: "medium12", text: Profession, color: "dark-grey" })),
|
|
23
|
+
React.createElement("div", { className: "blogImageContainer" },
|
|
24
|
+
React.createElement(Image, { src: ImageBlog, alt: "Image de fond d'un article de blog", width: 1000, height: 449 }))),
|
|
25
|
+
React.createElement("div", { className: "blogContainerBottom" })),
|
|
26
|
+
React.createElement("div", { className: "blogImageContainer" },
|
|
27
|
+
React.createElement(Image, { src: ImageBlog, alt: "Image de fond d'un article de blog", width: 1000, height: 449 })),
|
|
24
28
|
React.createElement("div", { className: "blogContainerBottom" })));
|
|
25
29
|
}
|
|
26
30
|
export default BlogTextBlock;
|
|
@@ -1,29 +1,32 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import './BlogArticle.css';
|
|
2
|
+
import styles from './BlogArticle.module.css';
|
|
3
3
|
import Link from 'next/link';
|
|
4
4
|
import { OtherStatusTag } from '../../atoms/tags';
|
|
5
5
|
import { Heading, TinyInfo } from '../../atoms/typography';
|
|
6
6
|
import Image from 'next/image';
|
|
7
7
|
var BlogTopSection = function (_a) {
|
|
8
8
|
var Image_URL = _a.Image_URL, Title = _a.Title;
|
|
9
|
-
return (React.createElement("div", { className: "
|
|
9
|
+
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 }))));
|
|
10
10
|
};
|
|
11
11
|
var BlogBottomSection = function (_a) {
|
|
12
12
|
var Tags = _a.Tags, Date = _a.Date, Title = _a.Title, Description = _a.Description;
|
|
13
|
-
return (React.createElement("div", { className:
|
|
14
|
-
React.createElement("div", { className:
|
|
15
|
-
React.createElement("div", { className:
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
React.createElement(
|
|
13
|
+
return (React.createElement("div", { className: styles.blogBottomSection },
|
|
14
|
+
React.createElement("div", { className: styles.blogBottomSectionUp },
|
|
15
|
+
React.createElement("div", { className: styles.tagsContainer }, Tags.slice(0, 2).map(function (tag, index) {
|
|
16
|
+
var validatedTag = tag.trim().length > 12 ? "".concat(tag.slice(0, 12), "...") : tag;
|
|
17
|
+
return React.createElement(OtherStatusTag, { key: index, label: validatedTag });
|
|
18
|
+
})),
|
|
19
|
+
React.createElement(TinyInfo, { text: Date.toLocaleDateString(), variant: "medium14", color: "mid-grey" })),
|
|
20
|
+
React.createElement("div", { className: styles.blogSplitSection }),
|
|
21
|
+
React.createElement("div", { className: styles.blogBottomSectionDown },
|
|
22
|
+
React.createElement("div", { className: styles.blogTitle },
|
|
20
23
|
React.createElement(Heading, { variant: "h6", text: Title, color: "noir", align: "center" })),
|
|
21
|
-
React.createElement("div", { className:
|
|
24
|
+
React.createElement("div", { className: styles.blogDescription },
|
|
22
25
|
React.createElement(TinyInfo, { variant: "medium14", text: Description, color: "noir" })))));
|
|
23
26
|
};
|
|
24
27
|
var BlogArticle = function (_a) {
|
|
25
28
|
var Article_URL = _a.Article_URL, Image_URL = _a.Image_URL, Tags = _a.Tags, Date = _a.Date, Title = _a.Title, Description = _a.Description;
|
|
26
|
-
return (React.createElement(Link, { href: Article_URL, className:
|
|
29
|
+
return (React.createElement(Link, { href: Article_URL, className: styles.blogContainer },
|
|
27
30
|
React.createElement(BlogTopSection, { Image_URL: Image_URL, Title: Title }),
|
|
28
31
|
React.createElement(BlogBottomSection, { Tags: Tags, Date: Date, Title: Title, Description: Description })));
|
|
29
32
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.
|
|
1
|
+
.blogContainer {
|
|
2
2
|
text-decoration: none;
|
|
3
3
|
display: flex;
|
|
4
4
|
flex-direction: column;
|
|
@@ -11,22 +11,22 @@
|
|
|
11
11
|
cursor: pointer;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
.
|
|
14
|
+
.blogContainer:hover {
|
|
15
15
|
transform: scale(1.015);
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
.
|
|
18
|
+
.blogTopSection {
|
|
19
19
|
height: 230px;
|
|
20
20
|
align-self: stretch;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
.
|
|
23
|
+
.blogSplitSection {
|
|
24
24
|
width: 329px;
|
|
25
25
|
height: 1px;
|
|
26
26
|
background: #F1F4F8;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
.
|
|
29
|
+
.blogBottomSection {
|
|
30
30
|
display: flex;
|
|
31
31
|
padding: 23px 16px 24px 16px;
|
|
32
32
|
flex-direction: column;
|
|
@@ -35,14 +35,14 @@
|
|
|
35
35
|
background: #FFF;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
.
|
|
38
|
+
.blogImage {
|
|
39
39
|
background: var(--Primary-Light-grey, #F4F7FB);
|
|
40
40
|
width: 100%;
|
|
41
41
|
height: 100%;
|
|
42
42
|
object-fit: cover;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
-
.
|
|
45
|
+
.blogTitle {
|
|
46
46
|
display: -webkit-box;
|
|
47
47
|
line-clamp: 1;
|
|
48
48
|
-webkit-line-clamp: 1;
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
overflow: hidden;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
-
.
|
|
53
|
+
.blogDescription {
|
|
54
54
|
display: -webkit-box;
|
|
55
55
|
line-clamp: 3;
|
|
56
56
|
-webkit-line-clamp: 3;
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
overflow: hidden;
|
|
59
59
|
}
|
|
60
60
|
|
|
61
|
-
.
|
|
61
|
+
.blogTopSectionPlaceholder {
|
|
62
62
|
background: var(--Primary-Light-grey, #F4F7FB);
|
|
63
63
|
display: flex;
|
|
64
64
|
align-items: center;
|
|
@@ -68,17 +68,18 @@
|
|
|
68
68
|
font-size: 14px;
|
|
69
69
|
}
|
|
70
70
|
|
|
71
|
-
.
|
|
71
|
+
.tagsContainer {
|
|
72
72
|
display: flex;
|
|
73
73
|
flex-direction: row;
|
|
74
|
-
|
|
74
|
+
justify-content: center;
|
|
75
75
|
gap: 8px;
|
|
76
76
|
max-width: 100%;
|
|
77
|
-
overflow-x: auto; /* Garde la possibilité de scroller horizontalement si la largeur dépasse */
|
|
78
77
|
scroll-behavior: smooth;
|
|
78
|
+
flex-wrap: wrap;
|
|
79
|
+
overflow: hidden;
|
|
79
80
|
}
|
|
80
81
|
|
|
81
|
-
.
|
|
82
|
+
.blogBottomSectionUp {
|
|
82
83
|
display: flex;
|
|
83
84
|
justify-content: space-between;
|
|
84
85
|
align-items: center;
|
|
@@ -87,7 +88,7 @@
|
|
|
87
88
|
overflow: hidden;
|
|
88
89
|
}
|
|
89
90
|
|
|
90
|
-
.
|
|
91
|
+
.blogBottomSectionDown {
|
|
91
92
|
display: flex;
|
|
92
93
|
flex-direction: column;
|
|
93
94
|
align-items: flex-start;
|
|
@@ -95,8 +96,8 @@
|
|
|
95
96
|
align-self: stretch;
|
|
96
97
|
}
|
|
97
98
|
|
|
98
|
-
.
|
|
99
|
-
color
|
|
99
|
+
.blogDate {
|
|
100
|
+
color: #728EA7;
|
|
100
101
|
font-family: Inter;
|
|
101
102
|
font-size: 14px;
|
|
102
103
|
font-style: normal;
|
|
@@ -20,7 +20,7 @@ export var Default = Template.bind({});
|
|
|
20
20
|
Default.args = {
|
|
21
21
|
Article_URL: 'https://example.com/article',
|
|
22
22
|
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',
|
|
23
|
-
Tags: ['
|
|
23
|
+
Tags: ['Blablablablabla', "Blablablabla", "Blablablabla"],
|
|
24
24
|
Date: new Date('2023-04-23'),
|
|
25
25
|
Title: 'Le Droit en France',
|
|
26
26
|
Description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquam...',
|
|
@@ -7,9 +7,9 @@ declare const meta: {
|
|
|
7
7
|
layout: string;
|
|
8
8
|
};
|
|
9
9
|
args: {
|
|
10
|
-
onLogin: import("@vitest/spy").Mock<
|
|
11
|
-
onLogout: import("@vitest/spy").Mock<
|
|
12
|
-
onCreateAccount: import("@vitest/spy").Mock<
|
|
10
|
+
onLogin: import("@vitest/spy").Mock<[], void>;
|
|
11
|
+
onLogout: import("@vitest/spy").Mock<[], void>;
|
|
12
|
+
onCreateAccount: import("@vitest/spy").Mock<[], void>;
|
|
13
13
|
};
|
|
14
14
|
};
|
|
15
15
|
export default meta;
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as BlogArticle } from "./BlogArticle";
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
.colors {
|
|
2
|
-
/* Primary colors */
|
|
3
|
-
--bleu-allaw: #25beeb;
|
|
4
|
-
--mid-grey: #728ea7;
|
|
5
|
-
--dark-grey: #456073;
|
|
6
|
-
--noir: #171e25;
|
|
7
|
-
--pure-white: #ffffff;
|
|
8
|
-
|
|
9
|
-
/* Greyscale */
|
|
10
|
-
--grey-venom: #e6edf5;
|
|
11
|
-
--venom-grey-dark: #d1dce8;
|
|
12
|
-
--grey-light: #f6fcfe;
|
|
13
|
-
--grey-light-2: #f2f8fc;
|
|
14
|
-
--active-grey: #e9eef5;
|
|
15
|
-
--blue-lightning: #f6fcfe;
|
|
16
|
-
--fond-de-selection: #f6fcfe;
|
|
17
|
-
--lightSteelBlue: #a2b5c8;
|
|
18
|
-
|
|
19
|
-
/* Tag colors */
|
|
20
|
-
--tag-white: #eef5fc;
|
|
21
|
-
--green-tag-dark: #29a36a;
|
|
22
|
-
--green-tag-light: #daf6e9;
|
|
23
|
-
--red-tag-dark: #e15151;
|
|
24
|
-
--red-tag-light: #fdf2f2;
|
|
25
|
-
--blue-tag-dark: #1985e8;
|
|
26
|
-
--blue-tag-light: #daebfb;
|
|
27
|
-
--gris-clair: #dee8f2;
|
|
28
|
-
|
|
29
|
-
/* Actions */
|
|
30
|
-
--actions-valid: #29a36a;
|
|
31
|
-
--actions-error: #e15151;
|
|
32
|
-
|
|
33
|
-
/* Background */
|
|
34
|
-
--background-pro: #fcfdfd;
|
|
35
|
-
--background-usager: #ffffff;
|
|
36
|
-
}
|