allaw-ui 2.9.7 → 2.9.8
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/Link.d.ts +1 -0
- package/dist/components/atoms/typography/Link.js +2 -2
- package/dist/components/atoms/typography/Link.module.css +11 -0
- package/dist/components/atoms/typography/Link.stories.d.ts +8 -0
- package/dist/components/atoms/typography/Link.stories.js +31 -0
- package/package.json +1 -1
|
@@ -13,7 +13,7 @@ import React from "react";
|
|
|
13
13
|
import styles from "./Link.module.css";
|
|
14
14
|
import { convertToHtml } from "../../../utils/utils";
|
|
15
15
|
var Link = function (_a) {
|
|
16
|
-
var variant = _a.variant, color = _a.color, text = _a.text, maxLines = _a.maxLines, maxChars = _a.maxChars, _b = _a.size, size = _b === void 0 ? "default" : _b, className = _a.className, onClick = _a.onClick, _c = _a.isUnderline, isUnderline = _c === void 0 ? false : _c;
|
|
16
|
+
var variant = _a.variant, color = _a.color, text = _a.text, maxLines = _a.maxLines, maxChars = _a.maxChars, _b = _a.size, size = _b === void 0 ? "default" : _b, className = _a.className, onClick = _a.onClick, _c = _a.isUnderline, isUnderline = _c === void 0 ? false : _c, _d = _a.hasHoverColor, hasHoverColor = _d === void 0 ? false : _d;
|
|
17
17
|
var truncateText = function (text, maxChars) {
|
|
18
18
|
if (text.length <= maxChars)
|
|
19
19
|
return text;
|
|
@@ -23,7 +23,7 @@ var Link = function (_a) {
|
|
|
23
23
|
var truncatedText = maxChars ? truncateText(htmlText, maxChars) : htmlText;
|
|
24
24
|
var isClickable = typeof onClick === "function";
|
|
25
25
|
var colorClassName = color ? "color-".concat(color) : "";
|
|
26
|
-
return (React.createElement("div", { className: "".concat(styles.link, " ").concat(styles[variant], " ").concat(size === "small" ? styles["link-small"] : "", " ").concat(className || "", " ").concat(isClickable ? styles.pointer : "", " ").concat(styles[colorClassName], " ").concat(isUnderline ? styles.underline : ""), style: __assign({ whiteSpace: "pre-line" }, (maxLines
|
|
26
|
+
return (React.createElement("div", { className: "".concat(styles.link, " ").concat(styles[variant], " ").concat(size === "small" ? styles["link-small"] : "", " ").concat(className || "", " ").concat(isClickable ? styles.pointer : "", " ").concat(styles[colorClassName], " ").concat(isUnderline ? styles.underline : "", " ").concat(hasHoverColor ? styles.hoverColor : ""), style: __assign({ whiteSpace: "pre-line" }, (maxLines
|
|
27
27
|
? {
|
|
28
28
|
WebkitLineClamp: maxLines,
|
|
29
29
|
display: "-webkit-box",
|
|
@@ -61,6 +61,17 @@
|
|
|
61
61
|
|
|
62
62
|
.underline:hover {
|
|
63
63
|
text-decoration: underline;
|
|
64
|
+
text-underline-offset: 5px;
|
|
65
|
+
text-decoration-thickness: 1px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.hoverColor:hover {
|
|
69
|
+
color: var(--bleu-allaw, #25beeb) !important;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.hoverColor.underline:hover {
|
|
73
|
+
text-decoration: underline;
|
|
74
|
+
text-decoration-color: var(--bleu-allaw, #25beeb);
|
|
64
75
|
text-underline-offset: 7px;
|
|
65
76
|
text-decoration-thickness: 1px;
|
|
66
77
|
}
|
|
@@ -36,6 +36,12 @@ declare namespace _default {
|
|
|
36
36
|
export { control_4 as control };
|
|
37
37
|
export let description: string;
|
|
38
38
|
}
|
|
39
|
+
namespace hasHoverColor {
|
|
40
|
+
let control_5: string;
|
|
41
|
+
export { control_5 as control };
|
|
42
|
+
let description_1: string;
|
|
43
|
+
export { description_1 as description };
|
|
44
|
+
}
|
|
39
45
|
namespace onClick {
|
|
40
46
|
let action: string;
|
|
41
47
|
}
|
|
@@ -61,4 +67,6 @@ export const MediumSmall: any;
|
|
|
61
67
|
export const ClickableLink: any;
|
|
62
68
|
export const UnderlinedLink: any;
|
|
63
69
|
export const ClickableUnderlinedLink: any;
|
|
70
|
+
export const HoverColorLink: any;
|
|
71
|
+
export const HoverColorUnderlinedLink: any;
|
|
64
72
|
import Link from "./Link";
|
|
@@ -42,6 +42,10 @@ export default {
|
|
|
42
42
|
control: "boolean",
|
|
43
43
|
description: "Ajoute un soulignement au survol",
|
|
44
44
|
},
|
|
45
|
+
hasHoverColor: {
|
|
46
|
+
control: "boolean",
|
|
47
|
+
description: "Change la couleur du texte en bleu au survol",
|
|
48
|
+
},
|
|
45
49
|
onClick: { action: "clicked" },
|
|
46
50
|
},
|
|
47
51
|
parameters: {
|
|
@@ -64,6 +68,7 @@ Bold.args = {
|
|
|
64
68
|
text: "Open Sans - Bold - 16px",
|
|
65
69
|
size: "default",
|
|
66
70
|
isUnderline: false,
|
|
71
|
+
hasHoverColor: false,
|
|
67
72
|
};
|
|
68
73
|
export var SemiBold = Template.bind({});
|
|
69
74
|
SemiBold.args = {
|
|
@@ -72,6 +77,7 @@ SemiBold.args = {
|
|
|
72
77
|
text: "Open Sans - SemiBold - 16px",
|
|
73
78
|
size: "default",
|
|
74
79
|
isUnderline: false,
|
|
80
|
+
hasHoverColor: false,
|
|
75
81
|
};
|
|
76
82
|
export var Medium = Template.bind({});
|
|
77
83
|
Medium.args = {
|
|
@@ -80,6 +86,7 @@ Medium.args = {
|
|
|
80
86
|
text: "Open Sans - Medium - 16px",
|
|
81
87
|
size: "default",
|
|
82
88
|
isUnderline: false,
|
|
89
|
+
hasHoverColor: false,
|
|
83
90
|
};
|
|
84
91
|
export var BoldSmall = Template.bind({});
|
|
85
92
|
BoldSmall.args = {
|
|
@@ -88,6 +95,7 @@ BoldSmall.args = {
|
|
|
88
95
|
text: "Open Sans - Bold - 12px",
|
|
89
96
|
size: "small",
|
|
90
97
|
isUnderline: false,
|
|
98
|
+
hasHoverColor: false,
|
|
91
99
|
};
|
|
92
100
|
export var SemiBoldSmall = Template.bind({});
|
|
93
101
|
SemiBoldSmall.args = {
|
|
@@ -96,6 +104,7 @@ SemiBoldSmall.args = {
|
|
|
96
104
|
text: "Open Sans - SemiBold - 12px",
|
|
97
105
|
size: "small",
|
|
98
106
|
isUnderline: false,
|
|
107
|
+
hasHoverColor: false,
|
|
99
108
|
};
|
|
100
109
|
export var MediumSmall = Template.bind({});
|
|
101
110
|
MediumSmall.args = {
|
|
@@ -104,6 +113,7 @@ MediumSmall.args = {
|
|
|
104
113
|
text: "Open Sans - Medium - 12px",
|
|
105
114
|
size: "small",
|
|
106
115
|
isUnderline: false,
|
|
116
|
+
hasHoverColor: false,
|
|
107
117
|
};
|
|
108
118
|
export var ClickableLink = Template.bind({});
|
|
109
119
|
ClickableLink.args = {
|
|
@@ -113,6 +123,7 @@ ClickableLink.args = {
|
|
|
113
123
|
size: "small",
|
|
114
124
|
onClick: function () { return console.log("Linke cliqué"); },
|
|
115
125
|
isUnderline: false,
|
|
126
|
+
hasHoverColor: false,
|
|
116
127
|
};
|
|
117
128
|
export var UnderlinedLink = Template.bind({});
|
|
118
129
|
UnderlinedLink.args = {
|
|
@@ -121,6 +132,7 @@ UnderlinedLink.args = {
|
|
|
121
132
|
text: "Survolez-moi pour voir le soulignement",
|
|
122
133
|
size: "default",
|
|
123
134
|
isUnderline: true,
|
|
135
|
+
hasHoverColor: false,
|
|
124
136
|
};
|
|
125
137
|
export var ClickableUnderlinedLink = Template.bind({});
|
|
126
138
|
ClickableUnderlinedLink.args = {
|
|
@@ -130,4 +142,23 @@ ClickableUnderlinedLink.args = {
|
|
|
130
142
|
size: "small",
|
|
131
143
|
onClick: function () { return console.log("Lien cliqué"); },
|
|
132
144
|
isUnderline: true,
|
|
145
|
+
hasHoverColor: false,
|
|
146
|
+
};
|
|
147
|
+
export var HoverColorLink = Template.bind({});
|
|
148
|
+
HoverColorLink.args = {
|
|
149
|
+
variant: "semiBold",
|
|
150
|
+
color: "mid-grey",
|
|
151
|
+
text: "Survolez-moi pour changer la couleur",
|
|
152
|
+
size: "default",
|
|
153
|
+
isUnderline: false,
|
|
154
|
+
hasHoverColor: true,
|
|
155
|
+
};
|
|
156
|
+
export var HoverColorUnderlinedLink = Template.bind({});
|
|
157
|
+
HoverColorUnderlinedLink.args = {
|
|
158
|
+
variant: "semiBold",
|
|
159
|
+
color: "dark-grey",
|
|
160
|
+
text: "Survolez-moi pour changer la couleur et voir le soulignement",
|
|
161
|
+
size: "default",
|
|
162
|
+
isUnderline: true,
|
|
163
|
+
hasHoverColor: true,
|
|
133
164
|
};
|