allaw-ui 2.6.7 → 2.6.9
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/atoms/typography/Heading.css +1 -0
- package/dist/components/atoms/typography/Heading.d.ts +9 -3
- package/dist/components/atoms/typography/Heading.js +35 -3
- package/dist/components/atoms/typography/Heading.stories.d.ts +33 -0
- package/dist/components/atoms/typography/Heading.stories.js +52 -0
- package/package.json +1 -1
|
@@ -1,10 +1,16 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import "./Heading.css";
|
|
3
|
+
export type HeadingVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "h7";
|
|
4
|
+
export type HeadingColor = "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white";
|
|
5
|
+
export type HeadingAlign = "left" | "justify" | "center";
|
|
6
|
+
export type ResponsiveSize = Record<number, HeadingVariant>;
|
|
3
7
|
export interface HeadingProps {
|
|
4
|
-
variant:
|
|
5
|
-
color?:
|
|
8
|
+
variant: HeadingVariant;
|
|
9
|
+
color?: HeadingColor;
|
|
6
10
|
text: React.ReactNode;
|
|
7
|
-
align?:
|
|
11
|
+
align?: HeadingAlign;
|
|
12
|
+
responsiveSize?: ResponsiveSize;
|
|
13
|
+
as?: React.ElementType;
|
|
8
14
|
}
|
|
9
15
|
declare const Heading: React.FC<HeadingProps>;
|
|
10
16
|
export default Heading;
|
|
@@ -1,7 +1,39 @@
|
|
|
1
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
import React, { useEffect, useState } from "react";
|
|
2
3
|
import "./Heading.css";
|
|
3
4
|
var Heading = function (_a) {
|
|
4
|
-
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;
|
|
5
|
-
|
|
5
|
+
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, responsiveSize = _a.responsiveSize, _d = _a.as, Component = _d === void 0 ? "span" : _d;
|
|
6
|
+
var _e = useState(variant), currentVariant = _e[0], setCurrentVariant = _e[1];
|
|
7
|
+
useEffect(function () {
|
|
8
|
+
if (!responsiveSize)
|
|
9
|
+
return;
|
|
10
|
+
var handleResize = function () {
|
|
11
|
+
var width = window.innerWidth;
|
|
12
|
+
var breakpoints = Object.keys(responsiveSize)
|
|
13
|
+
.map(Number)
|
|
14
|
+
.sort(function (a, b) { return a - b; });
|
|
15
|
+
// Find the appropriate variant for the current width
|
|
16
|
+
var selectedVariant = variant; // Default to the prop variant
|
|
17
|
+
for (var _i = 0, breakpoints_1 = breakpoints; _i < breakpoints_1.length; _i++) {
|
|
18
|
+
var breakpoint = breakpoints_1[_i];
|
|
19
|
+
if (width >= breakpoint) {
|
|
20
|
+
selectedVariant = responsiveSize[breakpoint];
|
|
21
|
+
}
|
|
22
|
+
else {
|
|
23
|
+
break;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
setCurrentVariant(selectedVariant);
|
|
27
|
+
};
|
|
28
|
+
// Initial check
|
|
29
|
+
handleResize();
|
|
30
|
+
// Add event listener
|
|
31
|
+
window.addEventListener("resize", handleResize);
|
|
32
|
+
// Cleanup
|
|
33
|
+
return function () {
|
|
34
|
+
window.removeEventListener("resize", handleResize);
|
|
35
|
+
};
|
|
36
|
+
}, [responsiveSize, variant]);
|
|
37
|
+
return (React.createElement(Component, { className: "heading ".concat(currentVariant, " color-").concat(color, " align-").concat(align) }, text));
|
|
6
38
|
};
|
|
7
39
|
export default Heading;
|
|
@@ -22,6 +22,37 @@ declare namespace _default {
|
|
|
22
22
|
let control_2: string;
|
|
23
23
|
export { control_2 as control };
|
|
24
24
|
}
|
|
25
|
+
namespace align {
|
|
26
|
+
export namespace control_3 {
|
|
27
|
+
let type_2: string;
|
|
28
|
+
export { type_2 as type };
|
|
29
|
+
let options_2: string[];
|
|
30
|
+
export { options_2 as options };
|
|
31
|
+
}
|
|
32
|
+
export { control_3 as control };
|
|
33
|
+
}
|
|
34
|
+
namespace responsiveSize {
|
|
35
|
+
let control_4: string;
|
|
36
|
+
export { control_4 as control };
|
|
37
|
+
}
|
|
38
|
+
namespace as {
|
|
39
|
+
export namespace control_5 {
|
|
40
|
+
let type_3: string;
|
|
41
|
+
export { type_3 as type };
|
|
42
|
+
let options_3: string[];
|
|
43
|
+
export { options_3 as options };
|
|
44
|
+
}
|
|
45
|
+
export { control_5 as control };
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
export namespace args {
|
|
49
|
+
let responsiveSize_1: {
|
|
50
|
+
480: string;
|
|
51
|
+
768: string;
|
|
52
|
+
1024: string;
|
|
53
|
+
1440: string;
|
|
54
|
+
};
|
|
55
|
+
export { responsiveSize_1 as responsiveSize };
|
|
25
56
|
}
|
|
26
57
|
export namespace parameters {
|
|
27
58
|
namespace backgrounds {
|
|
@@ -42,4 +73,6 @@ export const H4: any;
|
|
|
42
73
|
export const H5: any;
|
|
43
74
|
export const H6: any;
|
|
44
75
|
export const H7: any;
|
|
76
|
+
export const ResponsiveHeading: any;
|
|
77
|
+
export const CustomElement: any;
|
|
45
78
|
import Heading from "./Heading";
|
|
@@ -32,6 +32,30 @@ export default {
|
|
|
32
32
|
text: {
|
|
33
33
|
control: "text",
|
|
34
34
|
},
|
|
35
|
+
align: {
|
|
36
|
+
control: {
|
|
37
|
+
type: "select",
|
|
38
|
+
options: ["left", "justify", "center"],
|
|
39
|
+
},
|
|
40
|
+
},
|
|
41
|
+
responsiveSize: {
|
|
42
|
+
control: "object",
|
|
43
|
+
},
|
|
44
|
+
as: {
|
|
45
|
+
control: {
|
|
46
|
+
type: "select",
|
|
47
|
+
options: ["span", "h1", "h2", "h3", "h4", "h5", "h6", "p", "div"],
|
|
48
|
+
},
|
|
49
|
+
},
|
|
50
|
+
},
|
|
51
|
+
args: {
|
|
52
|
+
// Valeurs par défaut pour tous les stories
|
|
53
|
+
responsiveSize: {
|
|
54
|
+
480: "h5",
|
|
55
|
+
768: "h4",
|
|
56
|
+
1024: "h3",
|
|
57
|
+
1440: "h2",
|
|
58
|
+
},
|
|
35
59
|
},
|
|
36
60
|
parameters: {
|
|
37
61
|
backgrounds: {
|
|
@@ -51,40 +75,68 @@ H1.args = {
|
|
|
51
75
|
variant: "h1",
|
|
52
76
|
color: "pure-white",
|
|
53
77
|
text: "Poppins – SemiBold – 60px",
|
|
78
|
+
as: "h1",
|
|
54
79
|
};
|
|
55
80
|
export var H2 = Template.bind({});
|
|
56
81
|
H2.args = {
|
|
57
82
|
variant: "h2",
|
|
58
83
|
color: "pure-white",
|
|
59
84
|
text: "Poppins – SemiBold – 36px",
|
|
85
|
+
as: "h2",
|
|
60
86
|
};
|
|
61
87
|
export var H3 = Template.bind({});
|
|
62
88
|
H3.args = {
|
|
63
89
|
variant: "h3",
|
|
64
90
|
color: "pure-white",
|
|
65
91
|
text: "Poppins – SemiBold – 28px",
|
|
92
|
+
as: "h3",
|
|
66
93
|
};
|
|
67
94
|
export var H4 = Template.bind({});
|
|
68
95
|
H4.args = {
|
|
69
96
|
variant: "h4",
|
|
70
97
|
color: "pure-white",
|
|
71
98
|
text: "Poppins – SemiBold – 24px",
|
|
99
|
+
as: "h4",
|
|
72
100
|
};
|
|
73
101
|
export var H5 = Template.bind({});
|
|
74
102
|
H5.args = {
|
|
75
103
|
variant: "h5",
|
|
76
104
|
color: "pure-white",
|
|
77
105
|
text: "Poppins – Medium – 24px",
|
|
106
|
+
as: "h5",
|
|
78
107
|
};
|
|
79
108
|
export var H6 = Template.bind({});
|
|
80
109
|
H6.args = {
|
|
81
110
|
variant: "h6",
|
|
82
111
|
color: "pure-white",
|
|
83
112
|
text: "Poppins – SemiBold – 18px",
|
|
113
|
+
as: "h6",
|
|
84
114
|
};
|
|
85
115
|
export var H7 = Template.bind({});
|
|
86
116
|
H7.args = {
|
|
87
117
|
variant: "h7",
|
|
88
118
|
color: "pure-white",
|
|
89
119
|
text: "Poppins – SemiBold – 14px",
|
|
120
|
+
as: "span",
|
|
121
|
+
};
|
|
122
|
+
export var ResponsiveHeading = Template.bind({});
|
|
123
|
+
ResponsiveHeading.args = {
|
|
124
|
+
variant: "h6", // Default variant
|
|
125
|
+
color: "noir",
|
|
126
|
+
text: "This heading changes size based on viewport width",
|
|
127
|
+
align: "left",
|
|
128
|
+
responsiveSize: {
|
|
129
|
+
480: "h5",
|
|
130
|
+
768: "h4",
|
|
131
|
+
1024: "h3",
|
|
132
|
+
1440: "h2",
|
|
133
|
+
},
|
|
134
|
+
as: "h2",
|
|
135
|
+
};
|
|
136
|
+
export var CustomElement = Template.bind({});
|
|
137
|
+
CustomElement.args = {
|
|
138
|
+
variant: "h3",
|
|
139
|
+
color: "bleu-allaw",
|
|
140
|
+
text: "This heading uses a paragraph tag",
|
|
141
|
+
as: "p",
|
|
90
142
|
};
|