@entur/typography 1.9.13-beta.0 → 1.10.0-beta.1
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/README.md +100 -4
- package/dist/BaseHeading.d.ts +18 -0
- package/dist/Blockquote.d.ts +12 -0
- package/dist/CodeText.d.ts +16 -0
- package/dist/EmphasizedText.d.ts +20 -0
- package/dist/Heading1.d.ts +20 -0
- package/dist/Heading2.d.ts +20 -0
- package/dist/Heading3.d.ts +20 -0
- package/dist/Heading4.d.ts +20 -0
- package/dist/Heading5.d.ts +20 -0
- package/dist/Heading6.d.ts +20 -0
- package/dist/Label.d.ts +20 -0
- package/dist/LeadParagraph.d.ts +20 -0
- package/dist/Link.d.ts +22 -0
- package/dist/ListItem.d.ts +11 -0
- package/dist/NumberedList.d.ts +8 -0
- package/dist/Paragraph.d.ts +20 -0
- package/dist/PreformattedText.d.ts +16 -0
- package/dist/SmallText.d.ts +20 -0
- package/dist/StrongText.d.ts +20 -0
- package/dist/SubLabel.d.ts +20 -0
- package/dist/SubParagraph.d.ts +20 -0
- package/dist/UnorderedList.d.ts +8 -0
- package/dist/beta/BlockquoteBeta.d.ts +12 -0
- package/dist/beta/Heading.d.ts +21 -0
- package/dist/beta/LinkBeta.d.ts +16 -0
- package/dist/beta/Text.d.ts +21 -0
- package/dist/beta/index.d.ts +6 -0
- package/dist/beta/types.d.ts +5 -0
- package/dist/beta/utils.d.ts +9 -0
- package/dist/index.d.ts +26 -426
- package/dist/index.js +8 -0
- package/dist/styles.css +838 -2
- package/dist/typography.cjs.development.js +508 -0
- package/dist/typography.cjs.development.js.map +1 -0
- package/dist/typography.cjs.production.min.js +2 -0
- package/dist/typography.cjs.production.min.js.map +1 -0
- package/dist/typography.esm.js +453 -458
- package/dist/typography.esm.js.map +1 -1
- package/package.json +17 -33
- package/scripts/migrate-typography.js +858 -0
- package/dist/typography.cjs.js +0 -483
- package/dist/typography.cjs.js.map +0 -1
package/dist/typography.esm.js
CHANGED
|
@@ -1,483 +1,478 @@
|
|
|
1
|
-
import { warnAboutMissingStyles } from
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import { warnAboutMissingStyles } from '@entur/utils';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
import { ExternalIcon } from '@entur/icons';
|
|
5
|
+
|
|
6
|
+
function _extends() {
|
|
7
|
+
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
8
|
+
for (var e = 1; e < arguments.length; e++) {
|
|
9
|
+
var t = arguments[e];
|
|
10
|
+
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
11
|
+
}
|
|
12
|
+
return n;
|
|
13
|
+
}, _extends.apply(null, arguments);
|
|
6
14
|
}
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
if (hasRequiredClassnames) return classnames.exports;
|
|
16
|
-
hasRequiredClassnames = 1;
|
|
17
|
-
(function(module) {
|
|
18
|
-
(function() {
|
|
19
|
-
var hasOwn = {}.hasOwnProperty;
|
|
20
|
-
function classNames2() {
|
|
21
|
-
var classes = "";
|
|
22
|
-
for (var i = 0; i < arguments.length; i++) {
|
|
23
|
-
var arg = arguments[i];
|
|
24
|
-
if (arg) {
|
|
25
|
-
classes = appendClass(classes, parseValue(arg));
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
return classes;
|
|
29
|
-
}
|
|
30
|
-
function parseValue(arg) {
|
|
31
|
-
if (typeof arg === "string" || typeof arg === "number") {
|
|
32
|
-
return arg;
|
|
33
|
-
}
|
|
34
|
-
if (typeof arg !== "object") {
|
|
35
|
-
return "";
|
|
36
|
-
}
|
|
37
|
-
if (Array.isArray(arg)) {
|
|
38
|
-
return classNames2.apply(null, arg);
|
|
39
|
-
}
|
|
40
|
-
if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
|
|
41
|
-
return arg.toString();
|
|
42
|
-
}
|
|
43
|
-
var classes = "";
|
|
44
|
-
for (var key in arg) {
|
|
45
|
-
if (hasOwn.call(arg, key) && arg[key]) {
|
|
46
|
-
classes = appendClass(classes, key);
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
return classes;
|
|
50
|
-
}
|
|
51
|
-
function appendClass(value, newClass) {
|
|
52
|
-
if (!newClass) {
|
|
53
|
-
return value;
|
|
54
|
-
}
|
|
55
|
-
if (value) {
|
|
56
|
-
return value + " " + newClass;
|
|
57
|
-
}
|
|
58
|
-
return value + newClass;
|
|
59
|
-
}
|
|
60
|
-
if (module.exports) {
|
|
61
|
-
classNames2.default = classNames2;
|
|
62
|
-
module.exports = classNames2;
|
|
63
|
-
} else {
|
|
64
|
-
window.classNames = classNames2;
|
|
65
|
-
}
|
|
66
|
-
})();
|
|
67
|
-
})(classnames);
|
|
68
|
-
return classnames.exports;
|
|
15
|
+
function _objectWithoutPropertiesLoose(r, e) {
|
|
16
|
+
if (null == r) return {};
|
|
17
|
+
var t = {};
|
|
18
|
+
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
|
|
19
|
+
if (-1 !== e.indexOf(n)) continue;
|
|
20
|
+
t[n] = r[n];
|
|
21
|
+
}
|
|
22
|
+
return t;
|
|
69
23
|
}
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
);
|
|
24
|
+
|
|
25
|
+
var _excluded$p = ["className", "ref"],
|
|
26
|
+
_excluded2$1 = ["className"];
|
|
27
|
+
var Blockquote = function Blockquote(_ref) {
|
|
28
|
+
var className = _ref.className,
|
|
29
|
+
ref = _ref.ref,
|
|
30
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$p);
|
|
31
|
+
return React.createElement("blockquote", _extends({
|
|
32
|
+
className: classNames('eds-blockquote', className),
|
|
33
|
+
ref: ref
|
|
34
|
+
}, rest));
|
|
81
35
|
};
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
}
|
|
89
|
-
);
|
|
36
|
+
var BlockquoteFooter = function BlockquoteFooter(_ref2) {
|
|
37
|
+
var className = _ref2.className,
|
|
38
|
+
rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
|
|
39
|
+
return React.createElement("footer", _extends({
|
|
40
|
+
className: classNames('eds-blockquote__footer', className)
|
|
41
|
+
}, rest));
|
|
90
42
|
};
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
43
|
+
|
|
44
|
+
var _excluded$o = ["className", "as"];
|
|
45
|
+
var defaultElement$h = 'code';
|
|
46
|
+
var CodeText = function CodeText(_ref) {
|
|
47
|
+
var className = _ref.className,
|
|
48
|
+
as = _ref.as,
|
|
49
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$o);
|
|
50
|
+
var Element = as || defaultElement$h;
|
|
51
|
+
return React.createElement(Element, _extends({
|
|
52
|
+
className: classNames('eds-code-text', className)
|
|
53
|
+
}, rest));
|
|
99
54
|
};
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
[`eds-emphasized-text--margin-top`]: margin === "top",
|
|
115
|
-
[`eds-emphasized-text--margin-bottom`]: margin === "bottom",
|
|
116
|
-
[`eds-emphasized-text--margin-none`]: margin === "none"
|
|
117
|
-
},
|
|
118
|
-
className
|
|
119
|
-
),
|
|
120
|
-
...rest
|
|
121
|
-
}
|
|
122
|
-
);
|
|
55
|
+
|
|
56
|
+
var _excluded$n = ["className", "margin", "as"];
|
|
57
|
+
var defaultElement$g = 'em';
|
|
58
|
+
var EmphasizedText = function EmphasizedText(_ref) {
|
|
59
|
+
var _classNames;
|
|
60
|
+
var className = _ref.className,
|
|
61
|
+
_ref$margin = _ref.margin,
|
|
62
|
+
margin = _ref$margin === void 0 ? 'both' : _ref$margin,
|
|
63
|
+
as = _ref.as,
|
|
64
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$n);
|
|
65
|
+
var Element = as || defaultElement$g;
|
|
66
|
+
return React.createElement(Element, _extends({
|
|
67
|
+
className: classNames('eds-emphasized-text', (_classNames = {}, _classNames["eds-emphasized-text--margin-top"] = margin === 'top', _classNames["eds-emphasized-text--margin-bottom"] = margin === 'bottom', _classNames["eds-emphasized-text--margin-none"] = margin === 'none', _classNames), className)
|
|
68
|
+
}, rest));
|
|
123
69
|
};
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
{
|
|
140
|
-
[`${baseClass}--margin-top`]: margin === "top",
|
|
141
|
-
[`${baseClass}--margin-bottom`]: margin === "bottom",
|
|
142
|
-
[`${baseClass}--margin-none`]: margin === "none"
|
|
143
|
-
},
|
|
144
|
-
className
|
|
145
|
-
),
|
|
146
|
-
...rest
|
|
147
|
-
}
|
|
148
|
-
);
|
|
70
|
+
|
|
71
|
+
var _excluded$m = ["className", "level", "margin", "as"];
|
|
72
|
+
var defaultElement$f = 'h1';
|
|
73
|
+
var BaseHeading = function BaseHeading(_ref) {
|
|
74
|
+
var _classNames;
|
|
75
|
+
var className = _ref.className,
|
|
76
|
+
level = _ref.level,
|
|
77
|
+
margin = _ref.margin,
|
|
78
|
+
as = _ref.as,
|
|
79
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$m);
|
|
80
|
+
var Element = as || defaultElement$f;
|
|
81
|
+
var baseClass = "eds-h" + level;
|
|
82
|
+
return React.createElement(Element, _extends({
|
|
83
|
+
className: classNames(baseClass, (_classNames = {}, _classNames[baseClass + "--margin-top"] = margin === 'top', _classNames[baseClass + "--margin-bottom"] = margin === 'bottom', _classNames[baseClass + "--margin-none"] = margin === 'none', _classNames), className)
|
|
84
|
+
}, rest));
|
|
149
85
|
};
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
86
|
+
|
|
87
|
+
var _excluded$l = ["margin", "children", "as"];
|
|
88
|
+
var defaultElement$e = 'h1';
|
|
89
|
+
var Heading1 = function Heading1(_ref) {
|
|
90
|
+
var _ref$margin = _ref.margin,
|
|
91
|
+
margin = _ref$margin === void 0 ? 'both' : _ref$margin,
|
|
92
|
+
children = _ref.children,
|
|
93
|
+
as = _ref.as,
|
|
94
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$l);
|
|
95
|
+
var Element = as || defaultElement$e;
|
|
96
|
+
return React.createElement(BaseHeading, _extends({
|
|
97
|
+
as: Element,
|
|
98
|
+
margin: margin
|
|
99
|
+
}, rest, {
|
|
100
|
+
level: 1
|
|
101
|
+
}), children);
|
|
159
102
|
};
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
103
|
+
|
|
104
|
+
var _excluded$k = ["margin", "children", "as"];
|
|
105
|
+
var defaultElement$d = 'h2';
|
|
106
|
+
var Heading2 = function Heading2(_ref) {
|
|
107
|
+
var _ref$margin = _ref.margin,
|
|
108
|
+
margin = _ref$margin === void 0 ? 'both' : _ref$margin,
|
|
109
|
+
children = _ref.children,
|
|
110
|
+
as = _ref.as,
|
|
111
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$k);
|
|
112
|
+
var Element = as || defaultElement$d;
|
|
113
|
+
return React.createElement(BaseHeading, _extends({
|
|
114
|
+
as: Element,
|
|
115
|
+
margin: margin
|
|
116
|
+
}, rest, {
|
|
117
|
+
level: 2
|
|
118
|
+
}), children);
|
|
169
119
|
};
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
120
|
+
|
|
121
|
+
var _excluded$j = ["margin", "children", "as"];
|
|
122
|
+
var defaultElement$c = 'h3';
|
|
123
|
+
var Heading3 = function Heading3(_ref) {
|
|
124
|
+
var _ref$margin = _ref.margin,
|
|
125
|
+
margin = _ref$margin === void 0 ? 'both' : _ref$margin,
|
|
126
|
+
children = _ref.children,
|
|
127
|
+
as = _ref.as,
|
|
128
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$j);
|
|
129
|
+
var Element = as || defaultElement$c;
|
|
130
|
+
return React.createElement(BaseHeading, _extends({
|
|
131
|
+
as: Element,
|
|
132
|
+
margin: margin
|
|
133
|
+
}, rest, {
|
|
134
|
+
level: 3
|
|
135
|
+
}), children);
|
|
179
136
|
};
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
137
|
+
|
|
138
|
+
var _excluded$i = ["margin", "children", "as"];
|
|
139
|
+
var defaultElement$b = 'h4';
|
|
140
|
+
var Heading4 = function Heading4(_ref) {
|
|
141
|
+
var _ref$margin = _ref.margin,
|
|
142
|
+
margin = _ref$margin === void 0 ? 'both' : _ref$margin,
|
|
143
|
+
children = _ref.children,
|
|
144
|
+
as = _ref.as,
|
|
145
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$i);
|
|
146
|
+
var Element = as || defaultElement$b;
|
|
147
|
+
return React.createElement(BaseHeading, _extends({
|
|
148
|
+
as: Element,
|
|
149
|
+
margin: margin
|
|
150
|
+
}, rest, {
|
|
151
|
+
level: 4
|
|
152
|
+
}), children);
|
|
189
153
|
};
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
154
|
+
|
|
155
|
+
var _excluded$h = ["margin", "children", "as"];
|
|
156
|
+
var defaultElement$a = 'h5';
|
|
157
|
+
var Heading5 = function Heading5(_ref) {
|
|
158
|
+
var _ref$margin = _ref.margin,
|
|
159
|
+
margin = _ref$margin === void 0 ? 'both' : _ref$margin,
|
|
160
|
+
children = _ref.children,
|
|
161
|
+
as = _ref.as,
|
|
162
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$h);
|
|
163
|
+
var Element = as || defaultElement$a;
|
|
164
|
+
return React.createElement(BaseHeading, _extends({
|
|
165
|
+
as: Element,
|
|
166
|
+
margin: margin
|
|
167
|
+
}, rest, {
|
|
168
|
+
level: 5
|
|
169
|
+
}), children);
|
|
199
170
|
};
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
171
|
+
|
|
172
|
+
var _excluded$g = ["margin", "children", "as"];
|
|
173
|
+
var defaultElement$9 = 'h6';
|
|
174
|
+
var Heading6 = function Heading6(_ref) {
|
|
175
|
+
var _ref$margin = _ref.margin,
|
|
176
|
+
margin = _ref$margin === void 0 ? 'both' : _ref$margin,
|
|
177
|
+
children = _ref.children,
|
|
178
|
+
as = _ref.as,
|
|
179
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$g);
|
|
180
|
+
var Element = as || defaultElement$9;
|
|
181
|
+
return React.createElement(BaseHeading, _extends({
|
|
182
|
+
as: Element,
|
|
183
|
+
margin: margin
|
|
184
|
+
}, rest, {
|
|
185
|
+
level: 6
|
|
186
|
+
}), children);
|
|
209
187
|
};
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
[`eds-label--margin-top`]: margin === "top",
|
|
225
|
-
[`eds-label--margin-bottom`]: margin === "bottom",
|
|
226
|
-
[`eds-label--margin-none`]: margin === "none"
|
|
227
|
-
},
|
|
228
|
-
className
|
|
229
|
-
),
|
|
230
|
-
...rest
|
|
231
|
-
}
|
|
232
|
-
);
|
|
188
|
+
|
|
189
|
+
var _excluded$f = ["className", "margin", "as"];
|
|
190
|
+
var defaultElement$8 = 'label';
|
|
191
|
+
var Label = function Label(_ref) {
|
|
192
|
+
var _classNames;
|
|
193
|
+
var className = _ref.className,
|
|
194
|
+
_ref$margin = _ref.margin,
|
|
195
|
+
margin = _ref$margin === void 0 ? 'both' : _ref$margin,
|
|
196
|
+
as = _ref.as,
|
|
197
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$f);
|
|
198
|
+
var Element = as || defaultElement$8;
|
|
199
|
+
return React.createElement(Element, _extends({
|
|
200
|
+
className: classNames('eds-label', (_classNames = {}, _classNames["eds-label--margin-top"] = margin === 'top', _classNames["eds-label--margin-bottom"] = margin === 'bottom', _classNames["eds-label--margin-none"] = margin === 'none', _classNames), className)
|
|
201
|
+
}, rest));
|
|
233
202
|
};
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
[`eds-lead-paragraph--margin-top`]: margin === "top",
|
|
249
|
-
[`eds-lead-paragraph--margin-bottom`]: margin === "bottom",
|
|
250
|
-
[`eds-lead-paragraph--margin-none`]: margin === "none"
|
|
251
|
-
},
|
|
252
|
-
className
|
|
253
|
-
),
|
|
254
|
-
...rest
|
|
255
|
-
}
|
|
256
|
-
);
|
|
203
|
+
|
|
204
|
+
var _excluded$e = ["className", "margin", "as"];
|
|
205
|
+
var defaultElement$7 = 'p';
|
|
206
|
+
var LeadParagraph = function LeadParagraph(_ref) {
|
|
207
|
+
var _classNames;
|
|
208
|
+
var className = _ref.className,
|
|
209
|
+
_ref$margin = _ref.margin,
|
|
210
|
+
margin = _ref$margin === void 0 ? 'both' : _ref$margin,
|
|
211
|
+
as = _ref.as,
|
|
212
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
|
|
213
|
+
var Element = as || defaultElement$7;
|
|
214
|
+
return React.createElement(Element, _extends({
|
|
215
|
+
className: classNames('eds-lead-paragraph', (_classNames = {}, _classNames["eds-lead-paragraph--margin-top"] = margin === 'top', _classNames["eds-lead-paragraph--margin-bottom"] = margin === 'bottom', _classNames["eds-lead-paragraph--margin-none"] = margin === 'none', _classNames), className)
|
|
216
|
+
}, rest));
|
|
257
217
|
};
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
),
|
|
281
|
-
...rest,
|
|
282
|
-
children: [
|
|
283
|
-
children,
|
|
284
|
-
external ? /* @__PURE__ */ jsx(
|
|
285
|
-
ExternalIcon,
|
|
286
|
-
{
|
|
287
|
-
className: "eds-link--ext-icon",
|
|
288
|
-
"aria-label": ariaLabelExternalIcon
|
|
289
|
-
}
|
|
290
|
-
) : /* @__PURE__ */ jsx(Fragment, {})
|
|
291
|
-
]
|
|
292
|
-
}
|
|
293
|
-
);
|
|
218
|
+
|
|
219
|
+
var _excluded$d = ["external", "ariaLabelExternalIcon", "className", "margin", "children", "as"];
|
|
220
|
+
var defaultElement$6 = 'a';
|
|
221
|
+
var Link = function Link(_ref) {
|
|
222
|
+
var _classNames;
|
|
223
|
+
var _ref$external = _ref.external,
|
|
224
|
+
external = _ref$external === void 0 ? false : _ref$external,
|
|
225
|
+
_ref$ariaLabelExterna = _ref.ariaLabelExternalIcon,
|
|
226
|
+
ariaLabelExternalIcon = _ref$ariaLabelExterna === void 0 ? '(ekstern lenke)' : _ref$ariaLabelExterna,
|
|
227
|
+
className = _ref.className,
|
|
228
|
+
_ref$margin = _ref.margin,
|
|
229
|
+
margin = _ref$margin === void 0 ? 'both' : _ref$margin,
|
|
230
|
+
children = _ref.children,
|
|
231
|
+
as = _ref.as,
|
|
232
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
|
|
233
|
+
var Element = as || defaultElement$6;
|
|
234
|
+
return React.createElement(Element, _extends({
|
|
235
|
+
className: classNames('eds-link', (_classNames = {}, _classNames["eds-link--margin-top"] = margin === 'top', _classNames["eds-link--margin-bottom"] = margin === 'bottom', _classNames["eds-link--margin-none"] = margin === 'none', _classNames), className)
|
|
236
|
+
}, rest), children, external ? React.createElement(ExternalIcon, {
|
|
237
|
+
className: "eds-link--ext-icon",
|
|
238
|
+
"aria-label": ariaLabelExternalIcon
|
|
239
|
+
}) : React.createElement(React.Fragment, null));
|
|
294
240
|
};
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
[`eds-strong-text--margin-top`]: margin === "top",
|
|
310
|
-
[`eds-strong-text--margin-bottom`]: margin === "bottom",
|
|
311
|
-
[`eds-strong-text--margin-none`]: margin === "none"
|
|
312
|
-
},
|
|
313
|
-
className
|
|
314
|
-
),
|
|
315
|
-
...rest
|
|
316
|
-
}
|
|
317
|
-
);
|
|
241
|
+
|
|
242
|
+
var _excluded$c = ["className", "margin", "as"];
|
|
243
|
+
var defaultElement$5 = 'strong';
|
|
244
|
+
var StrongText = function StrongText(_ref) {
|
|
245
|
+
var _classNames;
|
|
246
|
+
var className = _ref.className,
|
|
247
|
+
_ref$margin = _ref.margin,
|
|
248
|
+
margin = _ref$margin === void 0 ? 'both' : _ref$margin,
|
|
249
|
+
as = _ref.as,
|
|
250
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$c);
|
|
251
|
+
var Element = as || defaultElement$5;
|
|
252
|
+
return React.createElement(Element, _extends({
|
|
253
|
+
className: classNames('eds-strong-text', (_classNames = {}, _classNames["eds-strong-text--margin-top"] = margin === 'top', _classNames["eds-strong-text--margin-bottom"] = margin === 'bottom', _classNames["eds-strong-text--margin-none"] = margin === 'none', _classNames), className)
|
|
254
|
+
}, rest));
|
|
318
255
|
};
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
...rest
|
|
332
|
-
}) => /* @__PURE__ */ jsx(
|
|
333
|
-
"ol",
|
|
334
|
-
{
|
|
335
|
-
className: classNames(
|
|
336
|
-
"eds-numbered-list",
|
|
337
|
-
{ [`eds-numbered-list--type-${type}`]: type },
|
|
338
|
-
className
|
|
339
|
-
),
|
|
340
|
-
type,
|
|
341
|
-
...rest
|
|
342
|
-
}
|
|
343
|
-
);
|
|
344
|
-
const defaultElement$4 = "p";
|
|
345
|
-
const Paragraph = ({
|
|
346
|
-
margin = "bottom",
|
|
347
|
-
className,
|
|
348
|
-
as,
|
|
349
|
-
...rest
|
|
350
|
-
}) => {
|
|
351
|
-
const Element = as || defaultElement$4;
|
|
352
|
-
return /* @__PURE__ */ jsx(
|
|
353
|
-
Element,
|
|
354
|
-
{
|
|
355
|
-
className: classNames(
|
|
356
|
-
"eds-paragraph",
|
|
357
|
-
{
|
|
358
|
-
"eds-paragraph--margin-bottom": margin === "bottom",
|
|
359
|
-
"eds-paragraph--margin-none": margin === "none"
|
|
360
|
-
},
|
|
361
|
-
className
|
|
362
|
-
),
|
|
363
|
-
...rest
|
|
364
|
-
}
|
|
365
|
-
);
|
|
256
|
+
|
|
257
|
+
var _excluded$b = ["children", "className", "title"];
|
|
258
|
+
var ListItem = function ListItem(_ref) {
|
|
259
|
+
var children = _ref.children,
|
|
260
|
+
className = _ref.className,
|
|
261
|
+
title = _ref.title,
|
|
262
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
|
|
263
|
+
return React.createElement("li", _extends({
|
|
264
|
+
className: classNames('eds-list-item', className)
|
|
265
|
+
}, rest), title && React.createElement(StrongText, {
|
|
266
|
+
className: "eds-list-item__title"
|
|
267
|
+
}, title), children);
|
|
366
268
|
};
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
{
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
}
|
|
380
|
-
);
|
|
269
|
+
|
|
270
|
+
var _excluded$a = ["className", "type"];
|
|
271
|
+
var NumberedList = function NumberedList(_ref) {
|
|
272
|
+
var _classNames;
|
|
273
|
+
var className = _ref.className,
|
|
274
|
+
_ref$type = _ref.type,
|
|
275
|
+
type = _ref$type === void 0 ? '1' : _ref$type,
|
|
276
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
|
|
277
|
+
return React.createElement("ol", _extends({
|
|
278
|
+
className: classNames('eds-numbered-list', (_classNames = {}, _classNames["eds-numbered-list--type-" + type] = type, _classNames), className),
|
|
279
|
+
type: type
|
|
280
|
+
}, rest));
|
|
381
281
|
};
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
[`eds-small-text--margin-none`]: margin === "none"
|
|
399
|
-
},
|
|
400
|
-
className
|
|
401
|
-
),
|
|
402
|
-
...rest
|
|
403
|
-
}
|
|
404
|
-
);
|
|
282
|
+
|
|
283
|
+
var _excluded$9 = ["margin", "className", "as"];
|
|
284
|
+
var defaultElement$4 = 'p';
|
|
285
|
+
var Paragraph = function Paragraph(_ref) {
|
|
286
|
+
var _ref$margin = _ref.margin,
|
|
287
|
+
margin = _ref$margin === void 0 ? 'bottom' : _ref$margin,
|
|
288
|
+
className = _ref.className,
|
|
289
|
+
as = _ref.as,
|
|
290
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
|
|
291
|
+
var Element = as || defaultElement$4;
|
|
292
|
+
return React.createElement(Element, _extends({
|
|
293
|
+
className: classNames('eds-paragraph', {
|
|
294
|
+
'eds-paragraph--margin-bottom': margin === 'bottom',
|
|
295
|
+
'eds-paragraph--margin-none': margin === 'none'
|
|
296
|
+
}, className)
|
|
297
|
+
}, rest));
|
|
405
298
|
};
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
return
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
299
|
+
|
|
300
|
+
var _excluded$8 = ["className", "as"];
|
|
301
|
+
var defaultElement$3 = 'pre';
|
|
302
|
+
var PreformattedText = function PreformattedText(_ref) {
|
|
303
|
+
var className = _ref.className,
|
|
304
|
+
as = _ref.as,
|
|
305
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
|
|
306
|
+
var Element = as || defaultElement$3;
|
|
307
|
+
return React.createElement(Element, _extends({
|
|
308
|
+
className: classNames('eds-preformatted-text', className)
|
|
309
|
+
}, rest));
|
|
310
|
+
};
|
|
311
|
+
|
|
312
|
+
var _excluded$7 = ["className", "margin", "as"];
|
|
313
|
+
var defaultElement$2 = 'span';
|
|
314
|
+
var SmallText = function SmallText(_ref) {
|
|
315
|
+
var _classNames;
|
|
316
|
+
var className = _ref.className,
|
|
317
|
+
_ref$margin = _ref.margin,
|
|
318
|
+
margin = _ref$margin === void 0 ? 'both' : _ref$margin,
|
|
319
|
+
as = _ref.as,
|
|
320
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
|
|
321
|
+
var Element = as || defaultElement$2;
|
|
322
|
+
return React.createElement(Element, _extends({
|
|
323
|
+
className: classNames('eds-small-text', (_classNames = {}, _classNames["eds-small-text--margin-top"] = margin === 'top', _classNames["eds-small-text--margin-bottom"] = margin === 'bottom', _classNames["eds-small-text--margin-none"] = margin === 'none', _classNames), className)
|
|
324
|
+
}, rest));
|
|
325
|
+
};
|
|
326
|
+
|
|
327
|
+
var _excluded$6 = ["className", "margin", "as"];
|
|
328
|
+
var defaultElement$1 = 'span';
|
|
329
|
+
var SubLabel = function SubLabel(_ref) {
|
|
330
|
+
var _classNames;
|
|
331
|
+
var className = _ref.className,
|
|
332
|
+
_ref$margin = _ref.margin,
|
|
333
|
+
margin = _ref$margin === void 0 ? 'both' : _ref$margin,
|
|
334
|
+
as = _ref.as,
|
|
335
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
|
|
336
|
+
var Element = as || defaultElement$1;
|
|
337
|
+
return React.createElement(Element, _extends({
|
|
338
|
+
className: classNames('eds-sub-label', (_classNames = {}, _classNames["eds-sub-label--margin-top"] = margin === 'top', _classNames["eds-sub-label--margin-bottom"] = margin === 'bottom', _classNames["eds-sub-label--margin-none"] = margin === 'none', _classNames), className)
|
|
339
|
+
}, rest));
|
|
340
|
+
};
|
|
341
|
+
|
|
342
|
+
var _excluded$5 = ["className", "margin", "as"];
|
|
343
|
+
var defaultElement = 'p';
|
|
344
|
+
var SubParagraph = function SubParagraph(_ref) {
|
|
345
|
+
var _classNames;
|
|
346
|
+
var className = _ref.className,
|
|
347
|
+
margin = _ref.margin,
|
|
348
|
+
as = _ref.as,
|
|
349
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
|
|
350
|
+
var Element = as || defaultElement;
|
|
351
|
+
return React.createElement(Element, _extends({
|
|
352
|
+
className: classNames('eds-sub-paragraph', (_classNames = {}, _classNames["eds-sub-paragraph--margin-top"] = margin === 'top', _classNames["eds-sub-paragraph--margin-bottom"] = margin === 'bottom', _classNames["eds-sub-paragraph--margin-none"] = margin === 'none', _classNames), className)
|
|
353
|
+
}, rest));
|
|
354
|
+
};
|
|
355
|
+
|
|
356
|
+
var _excluded$4 = ["className"];
|
|
357
|
+
var UnorderedList = function UnorderedList(_ref) {
|
|
358
|
+
var className = _ref.className,
|
|
359
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
|
|
360
|
+
return React.createElement("ul", _extends({
|
|
361
|
+
className: classNames('eds-unordered-list', className)
|
|
362
|
+
}, rest));
|
|
429
363
|
};
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
},
|
|
448
|
-
className
|
|
449
|
-
),
|
|
450
|
-
...rest
|
|
364
|
+
|
|
365
|
+
function getHeadingVariantFromSemanticType(semanticType) {
|
|
366
|
+
// Handle string element types (like 'h1', 'div', 'span')
|
|
367
|
+
if (typeof semanticType === 'string') {
|
|
368
|
+
switch (semanticType) {
|
|
369
|
+
case 'h1':
|
|
370
|
+
return 'title-1';
|
|
371
|
+
case 'h2':
|
|
372
|
+
return 'title-2';
|
|
373
|
+
case 'h3':
|
|
374
|
+
return 'subtitle-1';
|
|
375
|
+
case 'h4':
|
|
376
|
+
return 'subtitle-2';
|
|
377
|
+
case 'p':
|
|
378
|
+
return 'paragraph';
|
|
379
|
+
default:
|
|
380
|
+
return 'title-1';
|
|
451
381
|
}
|
|
452
|
-
|
|
382
|
+
}
|
|
383
|
+
// Handle React component types (functions/classes) - default to 'title-1'
|
|
384
|
+
return 'title-1';
|
|
385
|
+
}
|
|
386
|
+
/**
|
|
387
|
+
* Generates spacing class names for typography components
|
|
388
|
+
* @param spacing - The spacing value from TypographySpacing
|
|
389
|
+
* @param componentPrefix - The CSS class prefix (e.g., 'eds-heading', 'eds-text')
|
|
390
|
+
* @returns Object with class names for the spacing prop
|
|
391
|
+
*/
|
|
392
|
+
function getSpacingClasses(spacing, componentPrefix) {
|
|
393
|
+
var _ref;
|
|
394
|
+
if (!spacing) return undefined;
|
|
395
|
+
return _ref = {}, _ref[componentPrefix + "--spacing-none"] = spacing === 'none', _ref[componentPrefix + "--spacing-xs2"] = spacing === 'xs2', _ref[componentPrefix + "--spacing-xs2-top"] = spacing === 'xs2-top', _ref[componentPrefix + "--spacing-xs2-bottom"] = spacing === 'xs2-bottom', _ref[componentPrefix + "--spacing-xs"] = spacing === 'xs', _ref[componentPrefix + "--spacing-xs-top"] = spacing === 'xs-top', _ref[componentPrefix + "--spacing-xs-bottom"] = spacing === 'xs-bottom', _ref[componentPrefix + "--spacing-sm"] = spacing === 'sm', _ref[componentPrefix + "--spacing-sm-top"] = spacing === 'sm-top', _ref[componentPrefix + "--spacing-sm-bottom"] = spacing === 'sm-bottom', _ref[componentPrefix + "--spacing-md"] = spacing === 'md', _ref[componentPrefix + "--spacing-md-top"] = spacing === 'md-top', _ref[componentPrefix + "--spacing-md-bottom"] = spacing === 'md-bottom', _ref[componentPrefix + "--spacing-lg"] = spacing === 'lg', _ref[componentPrefix + "--spacing-lg-top"] = spacing === 'lg-top', _ref[componentPrefix + "--spacing-lg-bottom"] = spacing === 'lg-bottom', _ref[componentPrefix + "--spacing-xl"] = spacing === 'xl', _ref[componentPrefix + "--spacing-xl-top"] = spacing === 'xl-top', _ref[componentPrefix + "--spacing-xl-bottom"] = spacing === 'xl-bottom', _ref;
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
var _excluded$3 = ["children", "as", "size", "variant", "weight", "spacing", "className"];
|
|
399
|
+
var TypographyText = function TypographyText(_ref) {
|
|
400
|
+
var children = _ref.children,
|
|
401
|
+
as = _ref.as,
|
|
402
|
+
size = _ref.size,
|
|
403
|
+
variant = _ref.variant,
|
|
404
|
+
_ref$weight = _ref.weight,
|
|
405
|
+
weight = _ref$weight === void 0 ? 'medium' : _ref$weight,
|
|
406
|
+
spacing = _ref.spacing,
|
|
407
|
+
className = _ref.className,
|
|
408
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
|
409
|
+
var BodyElement = as || 'p';
|
|
410
|
+
return React.createElement(BodyElement, _extends({
|
|
411
|
+
className: classNames('eds-text', variant && "eds-text--" + variant, size && "eds-text--" + size, weight && "eds-text--weight-" + weight, getSpacingClasses(spacing, 'eds-text'), className)
|
|
412
|
+
}, rest), children);
|
|
413
|
+
};
|
|
414
|
+
// Export as Text to avoid DOM conflicts
|
|
415
|
+
var Text = TypographyText;
|
|
416
|
+
|
|
417
|
+
var _excluded$2 = ["children", "as", "size", "variant", "spacing", "className"];
|
|
418
|
+
var Heading = function Heading(_ref) {
|
|
419
|
+
var _classNames, _classNames2;
|
|
420
|
+
var children = _ref.children,
|
|
421
|
+
as = _ref.as,
|
|
422
|
+
size = _ref.size,
|
|
423
|
+
variant = _ref.variant,
|
|
424
|
+
spacing = _ref.spacing,
|
|
425
|
+
className = _ref.className,
|
|
426
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
427
|
+
var HeadingElement = as || 'h1';
|
|
428
|
+
// Function to determine the variant based on the semantic type
|
|
429
|
+
var usedVariant = variant != null ? variant : getHeadingVariantFromSemanticType(HeadingElement);
|
|
430
|
+
// When size is explicitly provided, it should override variant styling
|
|
431
|
+
var shouldUseSize = size !== undefined;
|
|
432
|
+
return React.createElement(HeadingElement, _extends({
|
|
433
|
+
className: classNames('eds-heading', (_classNames = {}, _classNames["eds-heading--" + usedVariant] = !shouldUseSize, _classNames), (_classNames2 = {}, _classNames2["eds-heading--" + size] = shouldUseSize && size, _classNames2), getSpacingClasses(spacing, 'eds-heading'), className)
|
|
434
|
+
}, rest), children);
|
|
435
|
+
};
|
|
436
|
+
|
|
437
|
+
var _excluded$1 = ["className"],
|
|
438
|
+
_excluded2 = ["className"];
|
|
439
|
+
var BlockquoteBeta = function BlockquoteBeta(_ref) {
|
|
440
|
+
var className = _ref.className,
|
|
441
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
|
442
|
+
return React.createElement("blockquote", _extends({
|
|
443
|
+
className: classNames('eds-text--blockquote', className)
|
|
444
|
+
}, rest));
|
|
445
|
+
};
|
|
446
|
+
var BlockquoteFooterBeta = function BlockquoteFooterBeta(_ref2) {
|
|
447
|
+
var className = _ref2.className,
|
|
448
|
+
rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
|
|
449
|
+
return React.createElement("footer", _extends({
|
|
450
|
+
className: classNames('eds-text--blockquote__footer', className)
|
|
451
|
+
}, rest));
|
|
453
452
|
};
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
ListItem,
|
|
474
|
-
NumberedList,
|
|
475
|
-
Paragraph,
|
|
476
|
-
PreformattedText,
|
|
477
|
-
SmallText,
|
|
478
|
-
StrongText,
|
|
479
|
-
SubLabel,
|
|
480
|
-
SubParagraph,
|
|
481
|
-
UnorderedList
|
|
453
|
+
|
|
454
|
+
var _excluded = ["external", "ariaLabelExternalIcon", "className", "spacing", "children", "as"];
|
|
455
|
+
var LinkBeta = function LinkBeta(_ref) {
|
|
456
|
+
var _ref$external = _ref.external,
|
|
457
|
+
external = _ref$external === void 0 ? false : _ref$external,
|
|
458
|
+
_ref$ariaLabelExterna = _ref.ariaLabelExternalIcon,
|
|
459
|
+
ariaLabelExternalIcon = _ref$ariaLabelExterna === void 0 ? '(ekstern lenke)' : _ref$ariaLabelExterna,
|
|
460
|
+
className = _ref.className,
|
|
461
|
+
spacing = _ref.spacing,
|
|
462
|
+
children = _ref.children,
|
|
463
|
+
as = _ref.as,
|
|
464
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
465
|
+
var LinkElement = as || 'a';
|
|
466
|
+
return React.createElement(LinkElement, _extends({
|
|
467
|
+
className: classNames('eds-text--link', getSpacingClasses(spacing, 'eds-text--link'), className)
|
|
468
|
+
}, rest), children, external ? React.createElement(ExternalIcon, {
|
|
469
|
+
className: "eds-text--link--ext-icon",
|
|
470
|
+
"aria-label": ariaLabelExternalIcon
|
|
471
|
+
}) : null);
|
|
482
472
|
};
|
|
473
|
+
|
|
474
|
+
warnAboutMissingStyles('typography');
|
|
475
|
+
// migration helpers - use @entur/typography/migration for migration support
|
|
476
|
+
|
|
477
|
+
export { Blockquote, BlockquoteBeta, BlockquoteFooter, BlockquoteFooterBeta, CodeText, EmphasizedText, Heading, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Label, LeadParagraph, Link, LinkBeta, ListItem, NumberedList, Paragraph, PreformattedText, SmallText, StrongText, SubLabel, SubParagraph, Text, UnorderedList };
|
|
483
478
|
//# sourceMappingURL=typography.esm.js.map
|