allaw-ui 1.0.114 → 1.0.117

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.
Files changed (12) hide show
  1. package/dist/components/molecules/BlogTextBlock/BlogTextBlock.d.ts +1 -1
  2. package/dist/components/molecules/BlogTextBlock/BlogTextBlock.js +21 -17
  3. package/dist/components/molecules/blogArticle/BlogArticle.d.ts +0 -1
  4. package/dist/components/molecules/blogArticle/BlogArticle.js +14 -11
  5. package/dist/components/molecules/blogArticle/{BlogArticle.css → BlogArticle.module.css} +17 -16
  6. package/dist/components/molecules/blogArticle/BlogArticle.stories.js +1 -1
  7. package/dist/index.d.ts +2 -0
  8. package/dist/index.js +1 -0
  9. package/dist/stories/Header.stories.d.ts +3 -3
  10. package/package.json +1 -1
  11. package/dist/components/molecules/blogArticle/index.d.ts +0 -2
  12. package/dist/components/molecules/blogArticle/index.js +0 -1
package/dist/components/molecules/BlogTextBlock/BlogTextBlock.d.ts CHANGED
@@ -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, }: BlogTextBlockProps): React.JSX.Element;
11
+ declare function BlogTextBlock({ Title, Date, TimeToRead, Profession, ImageBlog }: BlogTextBlockProps): React.JSX.Element;
12
12
  export default BlogTextBlock;
package/dist/components/molecules/BlogTextBlock/BlogTextBlock.js CHANGED
@@ -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("div", { className: "blogContainer" },
8
- React.createElement("div", { className: "blogContainerTop" },
9
- React.createElement(Heading, { text: Title, variant: "h2", color: "noir", align: "left" }),
10
- React.createElement("div", { className: "blogInfoContainer" },
11
- React.createElement(TinyInfo, { variant: "medium12", text: Date.toLocaleDateString(), color: "dark-grey" }),
12
- React.createElement("div", { className: "timeToReadContainer" },
13
- React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" },
14
- React.createElement("g", { clipPath: "url(#clip0_9957_3676)" },
15
- 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" }),
16
- React.createElement("path", { d: "M7 3.5V7L9.33333 8.16667", stroke: "#25BEEB", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })),
17
- React.createElement("defs", null,
18
- React.createElement("clipPath", { id: "clip0_9957_3676" },
19
- React.createElement("rect", { width: "14", height: "14", fill: "white" })))),
20
- React.createElement(TinyInfo, { variant: "medium12", text: TimeToRead, color: "dark-grey" })),
21
- React.createElement(TinyInfo, { variant: "medium12", text: Profession, color: "dark-grey" })),
22
- React.createElement("div", { className: "blogImageContainer" },
23
- React.createElement(Image, { src: ImageBlog, alt: "Image de fond d'un article de blog", width: 1000, height: 449 }))),
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;
package/dist/components/molecules/blogArticle/BlogArticle.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import React from 'react';
2
- import './BlogArticle.css';
3
2
  export type BlogArticleProps = {
4
3
  Article_URL: string;
5
4
  Image_URL: string;
package/dist/components/molecules/blogArticle/BlogArticle.js CHANGED
@@ -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: "blog-top-section ".concat(!Image_URL ? 'placeholder' : '') }, Image_URL ? (React.createElement(Image, { className: "blog-image", src: Image_URL, alt: Title || 'Image de l’article de blog', width: 361, height: 230, objectFit: "cover" })) : (React.createElement("span", { className: "placeholder-text" }))));
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: "blog-bottom-section" },
14
- React.createElement("div", { className: "blog-bottom-section-up" },
15
- React.createElement("div", { className: "tags-container" }, Tags.map(function (tag, index) { return (React.createElement(OtherStatusTag, { key: index, label: tag })); })),
16
- React.createElement(TinyInfo, { text: Date.toLocaleDateString(), variant: 'medium14', color: 'mid-grey' })),
17
- React.createElement("div", { className: "blog-split-section" }),
18
- React.createElement("div", { className: "blog-bottom-section-down" },
19
- React.createElement("div", { className: "blog-title" },
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: 'blog-description' },
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: 'blog-container' },
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
  };
package/dist/components/molecules/blogArticle/{BlogArticle.css → BlogArticle.module.css} RENAMED
@@ -1,4 +1,4 @@
1
- .blog-container {
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
- .blog-container:hover {
14
+ .blogContainer:hover {
15
15
  transform: scale(1.015);
16
16
  }
17
17
 
18
- .blog-top-section {
18
+ .blogTopSection {
19
19
  height: 230px;
20
20
  align-self: stretch;
21
21
  }
22
22
 
23
- .blog-split-section {
23
+ .blogSplitSection {
24
24
  width: 329px;
25
25
  height: 1px;
26
26
  background: #F1F4F8;
27
27
  }
28
28
 
29
- .blog-bottom-section {
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
- .blog-image {
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
- .blog-title {
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
- .blog-description {
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
- .blog-top-section.placeholder {
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
- .tags-container {
71
+ .tagsContainer {
72
72
  display: flex;
73
73
  flex-direction: row;
74
- flex-wrap: wrap; /* Permet le retour à la ligne si nécessaire */
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
- .blog-bottom-section-up {
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
- .blog-bottom-section-down {
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
- .blog-date {
99
- color:#728EA7;
99
+ .blogDate {
100
+ color: #728EA7;
100
101
  font-family: Inter;
101
102
  font-size: 14px;
102
103
  font-style: normal;
package/dist/components/molecules/blogArticle/BlogArticle.stories.js CHANGED
@@ -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: ['Conseil'],
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...',
package/dist/index.d.ts CHANGED
@@ -63,3 +63,5 @@ export { default as Pagination } from "./components/molecules/pagination/Paginat
63
63
  export type { PaginationProps } from "./components/molecules/pagination/Pagination";
64
64
  export { default as BlogTextBlock } from './components/molecules/BlogTextBlock/BlogTextBlock';
65
65
  export type { BlogTextBlockProps } from './components/molecules/BlogTextBlock/BlogTextBlock';
66
+ export { default as BlogArticle } from './components/molecules/blogArticle/BlogArticle';
67
+ export type { BlogArticleProps } from './components/molecules/blogArticle/BlogArticle';
package/dist/index.js CHANGED
@@ -80,3 +80,4 @@ export { default as ProCard } from "./components/molecules/proCard/ProCard";
80
80
  // Pagination
81
81
  export { default as Pagination } from "./components/molecules/pagination/Pagination";
82
82
  export { default as BlogTextBlock } from './components/molecules/BlogTextBlock/BlogTextBlock';
83
+ export { default as BlogArticle } from './components/molecules/blogArticle/BlogArticle';
package/dist/stories/Header.stories.d.ts CHANGED
@@ -7,9 +7,9 @@ declare const meta: {
7
7
  layout: string;
8
8
  };
9
9
  args: {
10
- onLogin: import("@vitest/spy").Mock<(...args: any[]) => any>;
11
- onLogout: import("@vitest/spy").Mock<(...args: any[]) => any>;
12
- onCreateAccount: import("@vitest/spy").Mock<(...args: any[]) => any>;
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,6 +1,6 @@
1
1
  {
2
2
  "name": "allaw-ui",
3
- "version": "1.0.114",
3
+ "version": "1.0.117",
4
4
  "description": "Composants UI pour l'application Allaw",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",
package/dist/components/molecules/blogArticle/index.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export { default as BlogArticle } from "./BlogArticle";
2
- export type { BlogArticleProps } from "./BlogArticle";
package/dist/components/molecules/blogArticle/index.js DELETED
@@ -1 +0,0 @@
1
- export { default as BlogArticle } from "./BlogArticle";