allaw-ui 5.0.1 → 5.0.2
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.
|
@@ -1,15 +1,5 @@
|
|
|
1
1
|
@import "../../../styles/colors.css";
|
|
2
2
|
|
|
3
|
-
:root {
|
|
4
|
-
--heading-h1-font-size: 60px;
|
|
5
|
-
--heading-h2-font-size: 36px;
|
|
6
|
-
--heading-h3-font-size: 28px;
|
|
7
|
-
--heading-h4-font-size: 24px;
|
|
8
|
-
--heading-h5-font-size: 20px;
|
|
9
|
-
--heading-h6-font-size: 18px;
|
|
10
|
-
--heading-h7-font-size: 14px;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
3
|
.heading {
|
|
14
4
|
font-family: Poppins;
|
|
15
5
|
font-style: normal;
|
|
@@ -55,35 +45,6 @@
|
|
|
55
45
|
font-weight: 600;
|
|
56
46
|
}
|
|
57
47
|
|
|
58
|
-
/* Responsive heading - adjusts font-size only, keeps semantic HTML tag */
|
|
59
|
-
.heading.responsive {
|
|
60
|
-
/* Use the base variant size as fallback for mobile */
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
@media (min-width: 480px) {
|
|
64
|
-
.heading.responsive {
|
|
65
|
-
font-size: var(--font-size-480) !important;
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
@media (min-width: 768px) {
|
|
70
|
-
.heading.responsive {
|
|
71
|
-
font-size: var(--font-size-768) !important;
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
@media (min-width: 1024px) {
|
|
76
|
-
.heading.responsive {
|
|
77
|
-
font-size: var(--font-size-1024) !important;
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
@media (min-width: 1440px) {
|
|
82
|
-
.heading.responsive {
|
|
83
|
-
font-size: var(--font-size-1440) !important;
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
|
|
87
48
|
.heading.color-bleu-allaw {
|
|
88
49
|
color: var(--bleu-allaw);
|
|
89
50
|
}
|
|
@@ -1,28 +1,38 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
|
2
2
|
import "./Heading.css";
|
|
3
3
|
var Heading = function (_a) {
|
|
4
|
-
var variant = _a.variant, _b = _a.color, color = _b === void 0 ? "
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
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 ? "left" : _c, responsiveSize = _a.responsiveSize, _d = _a.as, Component = _d === void 0 ? "span" : _d;
|
|
5
|
+
var _e = useState(variant), currentVariant = _e[0], setCurrentVariant = _e[1];
|
|
6
|
+
useEffect(function () {
|
|
7
|
+
if (!responsiveSize)
|
|
8
|
+
return;
|
|
9
|
+
var handleResize = function () {
|
|
10
|
+
var width = window.innerWidth;
|
|
11
|
+
var breakpoints = Object.keys(responsiveSize)
|
|
12
|
+
.map(Number)
|
|
13
|
+
.sort(function (a, b) { return a - b; });
|
|
14
|
+
// Find the appropriate variant for the current width
|
|
15
|
+
var selectedVariant = variant; // Default to the prop variant
|
|
16
|
+
for (var _i = 0, breakpoints_1 = breakpoints; _i < breakpoints_1.length; _i++) {
|
|
17
|
+
var breakpoint = breakpoints_1[_i];
|
|
18
|
+
if (width >= breakpoint) {
|
|
19
|
+
selectedVariant = responsiveSize[breakpoint];
|
|
20
|
+
}
|
|
21
|
+
else {
|
|
22
|
+
break;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
setCurrentVariant(selectedVariant);
|
|
26
|
+
};
|
|
27
|
+
// Initial check
|
|
28
|
+
handleResize();
|
|
29
|
+
// Add event listener
|
|
30
|
+
window.addEventListener("resize", handleResize);
|
|
31
|
+
// Cleanup
|
|
32
|
+
return function () {
|
|
33
|
+
window.removeEventListener("resize", handleResize);
|
|
34
|
+
};
|
|
35
|
+
}, [responsiveSize, variant]);
|
|
36
|
+
return (React.createElement(Component, { className: "heading ".concat(currentVariant, " color-").concat(color, " align-").concat(align) }, text));
|
|
27
37
|
};
|
|
28
38
|
export default Heading;
|
|
@@ -46,7 +46,12 @@ declare namespace _default {
|
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
48
|
export namespace args {
|
|
49
|
-
let responsiveSize_1:
|
|
49
|
+
let responsiveSize_1: {
|
|
50
|
+
480: string;
|
|
51
|
+
768: string;
|
|
52
|
+
1024: string;
|
|
53
|
+
1440: string;
|
|
54
|
+
};
|
|
50
55
|
export { responsiveSize_1 as responsiveSize };
|
|
51
56
|
}
|
|
52
57
|
export namespace parameters {
|
|
@@ -10,8 +10,8 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
12
|
import React from "react";
|
|
13
|
-
import Heading from "./Heading";
|
|
14
13
|
import "../../../styles/global.css";
|
|
14
|
+
import Heading from "./Heading";
|
|
15
15
|
export default {
|
|
16
16
|
title: "Components/UI-Variables/Typography/Heading",
|
|
17
17
|
component: Heading,
|
|
@@ -50,7 +50,12 @@ export default {
|
|
|
50
50
|
},
|
|
51
51
|
args: {
|
|
52
52
|
// Valeurs par défaut pour tous les stories
|
|
53
|
-
responsiveSize:
|
|
53
|
+
responsiveSize: {
|
|
54
|
+
480: "h5",
|
|
55
|
+
768: "h4",
|
|
56
|
+
1024: "h3",
|
|
57
|
+
1440: "h2",
|
|
58
|
+
},
|
|
54
59
|
},
|
|
55
60
|
parameters: {
|
|
56
61
|
backgrounds: {
|