@4alldigital/foundation-ui--gamma 1.22.0 → 1.23.0
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/foundation-ui.css +1 -1
- package/dist/index.esm.js +121 -99
- package/dist/index.js +121 -98
- package/dist/types/fui/components/Blockquote/Blockquote.d.ts +7 -0
- package/dist/types/fui/components/Blockquote/Blockquote.stories.d.ts +6 -0
- package/dist/types/fui/components/Blockquote/Blockquote.test.d.ts +1 -0
- package/dist/types/fui/components/Blockquote/Blockquote.types.d.ts +7 -0
- package/dist/types/fui/components/Blockquote/index.d.ts +1 -0
- package/dist/types/fui/components/Button/Button.d.ts +7 -0
- package/dist/types/fui/components/Button/Button.stories.d.ts +8 -0
- package/dist/types/fui/components/Button/Button.test.d.ts +1 -0
- package/dist/types/fui/components/Button/Button.types.d.ts +36 -0
- package/dist/types/fui/components/Button/index.d.ts +1 -0
- package/dist/types/fui/components/Container/Container.d.ts +7 -0
- package/dist/types/fui/components/Container/Container.stories.d.ts +6 -0
- package/dist/types/fui/components/Container/Container.test.d.ts +1 -0
- package/dist/types/fui/components/Container/Container.types.d.ts +7 -0
- package/dist/types/fui/components/Container/index.d.ts +1 -0
- package/dist/types/fui/components/ContentPageLayout/ContentPageLayout.d.ts +7 -0
- package/dist/types/fui/components/ContentPageLayout/ContentPageLayout.stories.d.ts +6 -0
- package/dist/types/fui/components/ContentPageLayout/ContentPageLayout.test.d.ts +1 -0
- package/dist/types/fui/components/ContentPageLayout/ContentPageLayout.types.d.ts +17 -0
- package/dist/types/fui/components/ContentPageLayout/index.d.ts +1 -0
- package/dist/types/fui/components/ContentRowsLayout/ContentRowsLayout.d.ts +7 -0
- package/dist/types/fui/components/ContentRowsLayout/ContentRowsLayout.stories.d.ts +6 -0
- package/dist/types/fui/components/ContentRowsLayout/ContentRowsLayout.test.d.ts +1 -0
- package/dist/types/fui/components/ContentRowsLayout/ContentRowsLayout.types.d.ts +15 -0
- package/dist/types/fui/components/ContentRowsLayout/index.d.ts +1 -0
- package/dist/types/fui/components/Copy/Copy.d.ts +7 -0
- package/dist/types/fui/components/Copy/Copy.stories.d.ts +6 -0
- package/dist/types/fui/components/Copy/Copy.test.d.ts +1 -0
- package/dist/types/fui/components/Copy/Copy.types.d.ts +41 -0
- package/dist/types/fui/components/Copy/index.d.ts +1 -0
- package/dist/types/fui/components/Form/Form.d.ts +8 -0
- package/dist/types/fui/components/Form/Form.stories.d.ts +7 -0
- package/dist/types/fui/components/Form/Form.test.d.ts +1 -0
- package/dist/types/fui/components/Form/Form.types.d.ts +21 -0
- package/dist/types/fui/components/Form/index.d.ts +1 -0
- package/dist/types/fui/components/FormField/FormField.d.ts +8 -0
- package/dist/types/fui/components/FormField/FormField.stories.d.ts +7 -0
- package/dist/types/fui/components/FormField/FormField.test.d.ts +1 -0
- package/dist/types/fui/components/FormField/FormField.types.d.ts +25 -0
- package/dist/types/fui/components/FormField/index.d.ts +1 -0
- package/dist/types/fui/components/FormSelect/FormSelect.d.ts +4 -0
- package/dist/types/fui/components/FormSelect/FormSelect.stories.d.ts +6 -0
- package/dist/types/fui/components/FormSelect/FormSelect.test.d.ts +1 -0
- package/dist/types/fui/components/FormSelect/FormSelect.types.d.ts +39 -0
- package/dist/types/fui/components/FormSelect/index.d.ts +1 -0
- package/dist/types/fui/components/Heading/Heading.d.ts +7 -0
- package/dist/types/fui/components/Heading/Heading.stories.d.ts +7 -0
- package/dist/types/fui/components/Heading/Heading.test.d.ts +1 -0
- package/dist/types/fui/components/Heading/Heading.types.d.ts +31 -0
- package/dist/types/fui/components/Heading/index.d.ts +1 -0
- package/dist/types/fui/components/Hr/Hr.d.ts +5 -0
- package/dist/types/fui/components/Hr/Hr.stories.d.ts +6 -0
- package/dist/types/fui/components/Hr/Hr.test.d.ts +1 -0
- package/dist/types/fui/components/Hr/index.d.ts +1 -0
- package/dist/types/fui/components/Icon/Icon.d.ts +11 -0
- package/dist/types/fui/components/Icon/Icon.stories.d.ts +6 -0
- package/dist/types/fui/components/Icon/Icon.test.d.ts +1 -0
- package/dist/types/fui/components/Icon/Icon.types.d.ts +7 -0
- package/dist/types/fui/components/Icon/index.d.ts +1 -0
- package/dist/types/fui/components/Image/Image.d.ts +7 -0
- package/dist/types/fui/components/Image/Image.stories.d.ts +6 -0
- package/dist/types/fui/components/Image/Image.test.d.ts +1 -0
- package/dist/types/fui/components/Image/Image.types.d.ts +16 -0
- package/dist/types/fui/components/Image/index.d.ts +1 -0
- package/dist/types/fui/components/Link/Link.d.ts +7 -0
- package/dist/types/fui/components/Link/Link.stories.d.ts +6 -0
- package/dist/types/fui/components/Link/Link.test.d.ts +1 -0
- package/dist/types/fui/components/Link/Link.types.d.ts +12 -0
- package/dist/types/fui/components/Link/index.d.ts +1 -0
- package/dist/types/fui/components/List/List.d.ts +7 -0
- package/dist/types/fui/components/List/List.stories.d.ts +6 -0
- package/dist/types/fui/components/List/List.test.d.ts +1 -0
- package/dist/types/fui/components/List/List.types.d.ts +25 -0
- package/dist/types/fui/components/List/index.d.ts +1 -0
- package/dist/types/fui/components/ListItem/ListItem.d.ts +7 -0
- package/dist/types/fui/components/ListItem/ListItem.test.d.ts +1 -0
- package/dist/types/fui/components/ListItem/ListItem.types.d.ts +8 -0
- package/dist/types/fui/components/ListItem/index.d.ts +1 -0
- package/dist/types/fui/components/Loader/Loader.d.ts +7 -0
- package/dist/types/fui/components/Loader/Loader.stories.d.ts +6 -0
- package/dist/types/fui/components/Loader/Loader.test.d.ts +1 -0
- package/dist/types/fui/components/Loader/Loader.types.d.ts +4 -0
- package/dist/types/fui/components/Loader/index.d.ts +1 -0
- package/dist/types/fui/components/Notice/Notice.d.ts +7 -0
- package/dist/types/fui/components/Notice/Notice.stories.d.ts +6 -0
- package/dist/types/fui/components/Notice/Notice.test.d.ts +1 -0
- package/dist/types/fui/components/Notice/Notice.types.d.ts +5 -0
- package/dist/types/fui/components/Notice/index.d.ts +1 -0
- package/dist/types/fui/components/TextInput/TextInput.d.ts +5 -0
- package/dist/types/fui/components/TextInput/TextInput.stories.d.ts +6 -0
- package/dist/types/fui/components/TextInput/TextInput.test.d.ts +1 -0
- package/dist/types/fui/components/TextInput/TextInput.types.d.ts +31 -0
- package/dist/types/fui/components/TextInput/index.d.ts +1 -0
- package/dist/types/fui/components/index.d.ts +15 -0
- package/dist/types/fui/context/ThemeContext.d.ts +18 -0
- package/dist/types/fui/index.d.ts +1 -0
- package/dist/types/fui/setupTests.d.ts +1 -0
- package/dist/types/fui/stories/Header.d.ts +11 -0
- package/dist/types/fui/stories/Header.stories.d.ts +8 -0
- package/dist/types/fui/stories/Page.d.ts +2 -0
- package/dist/types/fui/stories/Page.stories.d.ts +8 -0
- package/package.json +2 -4
package/dist/index.js
CHANGED
|
@@ -5,16 +5,33 @@ var cx = require('classnames');
|
|
|
5
5
|
var react = require('@iconify/react');
|
|
6
6
|
|
|
7
7
|
var Blockquote = function (_a) {
|
|
8
|
-
var text = _a.text, citation = _a.citation, className = _a.className, citationAttribute = _a.citationAttribute,
|
|
8
|
+
var text = _a.text, citation = _a.citation, className = _a.className, citationAttribute = _a.citationAttribute, _b = _a.showIcon, showIcon = _b === void 0 ? true : _b;
|
|
9
9
|
var classes = cx('text-xl italic font-bold', className);
|
|
10
10
|
return (jsxRuntime.jsxs("blockquote", { "data-testid": "Blockquote", className: classes, children: [showIcon && jsxRuntime.jsx("svg", { "aria-hidden": "true", className: "w-10 h-10", viewBox: "0 0 24 27", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M14.017 18L14.017 10.609C14.017 4.905 17.748 1.039 23 0L23.995 2.151C21.563 3.068 20 5.789 20 8H24V18H14.017ZM0 18V10.609C0 4.905 3.748 1.038 9 0L9.996 2.151C7.563 3.068 6 5.789 6 8H9.983L9.983 18L0 18Z", fill: "currentColor" }) }), jsxRuntime.jsx("div", { children: text }), citation && (jsxRuntime.jsx("figcaption", { className: "flex flex-start items-center mt-6 space-x-3", children: jsxRuntime.jsxs("div", { className: "flex items-center divide-x-2", children: [jsxRuntime.jsx("cite", { className: "pr-3 font-medium", children: citation }), citationAttribute && jsxRuntime.jsx("cite", { className: "pl-3 text-sm font-light", children: citationAttribute })] }) }))] }));
|
|
11
11
|
};
|
|
12
|
-
Blockquote.
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
Blockquote.displayName = 'Blockquote';
|
|
13
|
+
|
|
14
|
+
var BTN_TYPES;
|
|
15
|
+
(function (BTN_TYPES) {
|
|
16
|
+
BTN_TYPES["SUBMIT"] = "submit";
|
|
17
|
+
BTN_TYPES["RESET"] = "reset";
|
|
18
|
+
BTN_TYPES["BUTTON"] = "button";
|
|
19
|
+
})(BTN_TYPES || (BTN_TYPES = {}));
|
|
20
|
+
var BTN_VARIANTS;
|
|
21
|
+
(function (BTN_VARIANTS) {
|
|
22
|
+
BTN_VARIANTS["PRIMARY"] = "primary";
|
|
23
|
+
BTN_VARIANTS["SECONDARY"] = "secondary";
|
|
24
|
+
BTN_VARIANTS["TERTIARY"] = "tertiary";
|
|
25
|
+
})(BTN_VARIANTS || (BTN_VARIANTS = {}));
|
|
26
|
+
var BTN_SIZES;
|
|
27
|
+
(function (BTN_SIZES) {
|
|
28
|
+
BTN_SIZES["SMALL"] = "small";
|
|
29
|
+
BTN_SIZES["MEDIUM"] = "medium";
|
|
30
|
+
BTN_SIZES["LARGE"] = "large";
|
|
31
|
+
})(BTN_SIZES || (BTN_SIZES = {}));
|
|
15
32
|
|
|
16
33
|
var Button = function (_a) {
|
|
17
|
-
var
|
|
34
|
+
var _b = _a.variant, variant = _b === void 0 ? BTN_VARIANTS.PRIMARY : _b, _c = _a.size, size = _c === void 0 ? BTN_SIZES.MEDIUM : _c, _d = _a.type, type = _d === void 0 ? BTN_TYPES.BUTTON : _d, _e = _a.wide, wide = _e === void 0 ? true : _e, _f = _a.rounded, rounded = _f === void 0 ? true : _f, _g = _a.raised, raised = _g === void 0 ? true : _g, uppercase = _a.uppercase, children = _a.children, id = _a.id, disabled = _a.disabled, ariaLabel = _a.ariaLabel, onClick = _a.onClick, icon = _a.icon, external = _a.external, iconFirst = _a.iconFirst, outline = _a.outline, testID = _a.testID, className = _a.className;
|
|
18
35
|
var smallX = wide ? 'px-5' : 'px-3';
|
|
19
36
|
var mediumX = wide ? 'px-8' : 'px-4';
|
|
20
37
|
var largeX = wide ? 'px-11' : 'px-5';
|
|
@@ -38,69 +55,59 @@ var Button = function (_a) {
|
|
|
38
55
|
y: 'py-3',
|
|
39
56
|
space: 'space-x-4',
|
|
40
57
|
text: 'text-lg',
|
|
41
|
-
icon: 'w-6 h-6'
|
|
58
|
+
icon: 'w-6 h-6',
|
|
42
59
|
},
|
|
43
60
|
};
|
|
44
|
-
var classes = cx('font-bold flex items-center transition-all duration-200 transform active:scale-95 justify-around border-solid border rounded', { 'text-white border-primary hover:bg-primary-darker hover:border-primary-darker': variant === 'primary' }, { 'text-white border-secondary hover:bg-secondary-darker hover:border-secondary-darker': variant === 'secondary' }, { 'text-black border-tertiary hover:bg-tertiary-darker hover:border-tertiary-darker': variant === 'tertiary' }, { 'bg-primary': variant === 'primary' && !outline }, { 'bg-secondary': variant === 'secondary' && !outline }, { 'bg-tertiary': variant === 'tertiary' && !outline }, { 'bg-transparent': outline }, { shadow: raised }, { uppercase: uppercase }, { 'auto-cols-auto grid-cols-2 gap-2': icon || external }, { 'rounded-full': rounded }, { 'flex-row-reverse': iconFirst }, "".concat(sizes[size].y, " ").concat(sizes[size].x, " ").concat(sizes[size].text));
|
|
61
|
+
var classes = cx('font-bold flex items-center transition-all duration-200 transform active:scale-95 justify-around border-solid border rounded', { 'text-white border-primary hover:bg-primary-darker hover:border-primary-darker': variant === 'primary' }, { 'text-white border-secondary hover:bg-secondary-darker hover:border-secondary-darker': variant === 'secondary' }, { 'text-black border-tertiary hover:bg-tertiary-darker hover:border-tertiary-darker': variant === 'tertiary' }, { 'bg-primary': variant === 'primary' && !outline }, { 'bg-secondary': variant === 'secondary' && !outline }, { 'bg-tertiary': variant === 'tertiary' && !outline }, { 'bg-transparent': outline }, { shadow: raised }, { uppercase: uppercase }, { 'auto-cols-auto grid-cols-2 gap-2': icon || external }, { 'rounded-full': rounded }, { 'flex-row-reverse': iconFirst }, "".concat(sizes[size].y, " ").concat(sizes[size].x, " ").concat(sizes[size].text), className);
|
|
45
62
|
var iconClasses = cx(sizes[size].icon);
|
|
46
|
-
return (jsxRuntime.jsx("button", { id: id, "data-testid": testID || id ||
|
|
47
|
-
};
|
|
48
|
-
Button.defaultProps = {
|
|
49
|
-
variant: 'primary',
|
|
50
|
-
size: 'medium',
|
|
51
|
-
type: 'button',
|
|
52
|
-
raised: true,
|
|
53
|
-
wide: true,
|
|
54
|
-
rounded: true,
|
|
63
|
+
return (jsxRuntime.jsx("button", { id: id, "data-testid": testID || id || 'Button', onClick: onClick, className: classes, type: type, disabled: disabled, "aria-label": ariaLabel, role: "button", children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [children, icon && !external && (jsxRuntime.jsx("span", { className: "flex items-center", children: jsxRuntime.jsx(react.Icon, { icon: icon, className: iconClasses }) })), external && (jsxRuntime.jsx("span", { className: "flex items-center", children: jsxRuntime.jsx(react.Icon, { icon: "carbon:launch", className: iconClasses }) }))] }) }));
|
|
55
64
|
};
|
|
65
|
+
Button.displayName = 'Button';
|
|
56
66
|
|
|
57
|
-
var
|
|
58
|
-
(function (
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
})(
|
|
65
|
-
var
|
|
66
|
-
(function (
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
})(
|
|
72
|
-
var
|
|
73
|
-
(function (
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
})(
|
|
77
|
-
var
|
|
78
|
-
(function (
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
})(
|
|
83
|
-
var
|
|
84
|
-
(function (
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
67
|
+
var ALIGN;
|
|
68
|
+
(function (ALIGN) {
|
|
69
|
+
ALIGN["LEFT"] = "left";
|
|
70
|
+
ALIGN["CENTER"] = "center";
|
|
71
|
+
ALIGN["RIGHT"] = "right";
|
|
72
|
+
ALIGN["JUSTIFY"] = "justify";
|
|
73
|
+
ALIGN["NOWRAP"] = "nowrap";
|
|
74
|
+
})(ALIGN || (ALIGN = {}));
|
|
75
|
+
var TRANSFORM;
|
|
76
|
+
(function (TRANSFORM) {
|
|
77
|
+
TRANSFORM["LOWERCASE"] = "lowercase";
|
|
78
|
+
TRANSFORM["UPPERCASE"] = "uppercase";
|
|
79
|
+
TRANSFORM["CAPITALIZE"] = "capitalize";
|
|
80
|
+
TRANSFORM["NORMALCASE"] = "normal-case";
|
|
81
|
+
})(TRANSFORM || (TRANSFORM = {}));
|
|
82
|
+
var CONTEXTUAL;
|
|
83
|
+
(function (CONTEXTUAL) {
|
|
84
|
+
CONTEXTUAL["INVERTED"] = "inverted";
|
|
85
|
+
CONTEXTUAL["MUTED"] = "muted";
|
|
86
|
+
})(CONTEXTUAL || (CONTEXTUAL = {}));
|
|
87
|
+
var SIZE$1;
|
|
88
|
+
(function (SIZE) {
|
|
89
|
+
SIZE["SMALL"] = "small";
|
|
90
|
+
SIZE["LARGE"] = "large";
|
|
91
|
+
SIZE["INTRO"] = "intro";
|
|
92
|
+
})(SIZE$1 || (SIZE$1 = {}));
|
|
93
|
+
var TAG;
|
|
94
|
+
(function (TAG) {
|
|
95
|
+
TAG["P"] = "p";
|
|
96
|
+
TAG["SPAN"] = "span";
|
|
97
|
+
TAG["DIV"] = "div";
|
|
98
|
+
TAG["SMALL"] = "small";
|
|
99
|
+
})(TAG || (TAG = {}));
|
|
89
100
|
|
|
90
101
|
var Copy = function (_a) {
|
|
91
102
|
var _b;
|
|
92
|
-
var children = _a.children,
|
|
103
|
+
var children = _a.children, _c = _a.as, Tag = _c === void 0 ? TAG.P : _c, size = _a.size, _d = _a.align, align = _d === void 0 ? ALIGN.LEFT : _d, transform = _a.transform, id = _a.id, testID = _a.testID;
|
|
93
104
|
var classes = cx((_b = {}, _b["text-".concat(align)] = align, _b), { 'text-sm': size === 'small' }, { 'text-lg': size === 'large' }, { 'text-2xl': size === 'intro' }, { 'mb-3 leading-5': Tag === 'p' }, { 'text-sm': Tag === 'small' }, 'body-text', transform);
|
|
94
|
-
return jsxRuntime.jsx(Tag, { "data-testid": testID || id ||
|
|
95
|
-
};
|
|
96
|
-
Copy.defaultProps = {
|
|
97
|
-
inverted: false,
|
|
98
|
-
maxLength: false,
|
|
99
|
-
tag: Tag.DIV,
|
|
100
|
-
align: Align.LEFT,
|
|
105
|
+
return (jsxRuntime.jsx(Tag, { "data-testid": testID || id || 'Copy', className: classes, children: children }));
|
|
101
106
|
};
|
|
107
|
+
Copy.displayName = 'Copy';
|
|
102
108
|
|
|
103
109
|
var Hr = function () { return (jsxRuntime.jsx("hr", { className: cx('border-0 border-b border-dark-body-text dark:border-dark-body-text') })); };
|
|
110
|
+
Hr.displayName = 'Hr';
|
|
104
111
|
|
|
105
112
|
var HeadingTag;
|
|
106
113
|
(function (HeadingTag) {
|
|
@@ -128,7 +135,7 @@ var HeadingTransform;
|
|
|
128
135
|
|
|
129
136
|
var Heading = function (_a) {
|
|
130
137
|
var _b;
|
|
131
|
-
var children = _a.children,
|
|
138
|
+
var children = _a.children, _c = _a.tag, tag = _c === void 0 ? HeadingTag.H1 : _c, transform = _a.transform, align = _a.align, id = _a.id, testID = _a.testID, flush = _a.flush, className = _a.className;
|
|
132
139
|
var fontSize = function () {
|
|
133
140
|
switch (tag) {
|
|
134
141
|
case 'h1':
|
|
@@ -150,29 +157,25 @@ var Heading = function (_a) {
|
|
|
150
157
|
var classes = cx("font-heading font-bold ".concat(size), (_b = {}, _b["text-".concat(align)] = align, _b), { 'm-0': flush }, transform, className);
|
|
151
158
|
return (jsxRuntime.jsx(Tag, { "data-testid": testID || id || 'Heading', className: classes, children: children }));
|
|
152
159
|
};
|
|
153
|
-
Heading.
|
|
154
|
-
tag: HeadingTag.H1,
|
|
155
|
-
};
|
|
160
|
+
Heading.displayName = 'Heading';
|
|
156
161
|
|
|
157
162
|
/**
|
|
158
163
|
* Icon component
|
|
159
164
|
* List of supported icons can be found at https://icon-sets.iconify.design.
|
|
160
165
|
*/
|
|
161
166
|
var Icon = function (_a) {
|
|
162
|
-
var name = _a.name,
|
|
167
|
+
var name = _a.name, _b = _a.size, size = _b === void 0 ? 24 : _b, color = _a.color, id = _a.id, testID = _a.testID;
|
|
163
168
|
if (color) {
|
|
164
169
|
return jsxRuntime.jsx(react.Icon, { "data-testid": testID || id || "Icon", icon: name, width: size, height: size, color: color });
|
|
165
170
|
}
|
|
166
171
|
return jsxRuntime.jsx(react.Icon, { "data-testid": testID || id || "Icon", icon: name, width: size, height: size, className: cx('fill-current') });
|
|
167
172
|
};
|
|
168
|
-
Icon.
|
|
169
|
-
size: 24,
|
|
170
|
-
};
|
|
173
|
+
Icon.displayName = 'Icon';
|
|
171
174
|
|
|
172
175
|
var Image = function (_a) {
|
|
173
|
-
var src = _a.src, alt = _a.alt, title = _a.title, caption = _a.caption,
|
|
176
|
+
var src = _a.src, alt = _a.alt, title = _a.title, caption = _a.caption, _b = _a.figure, figure = _b === void 0 ? false : _b, onLoad = _a.onLoad, id = _a.id, className = _a.className, testID = _a.testID;
|
|
174
177
|
var figureClasses = cx('m-0');
|
|
175
|
-
var classes = cx('w-full h-auto');
|
|
178
|
+
var classes = cx('w-full h-auto', className);
|
|
176
179
|
/**
|
|
177
180
|
* Render as a figure.
|
|
178
181
|
*/
|
|
@@ -184,9 +187,10 @@ var Image = function (_a) {
|
|
|
184
187
|
*/
|
|
185
188
|
return jsxRuntime.jsx("img", { "data-testid": testID || id || "Image", onLoad: onLoad, src: src, alt: alt, title: title, className: classes });
|
|
186
189
|
};
|
|
190
|
+
Image.displayName = 'Image';
|
|
187
191
|
|
|
188
192
|
var Link = function (_a) {
|
|
189
|
-
var href = _a.href, children = _a.children,
|
|
193
|
+
var href = _a.href, children = _a.children, _b = _a.onClick, onClick = _b === void 0 ? function () { return console.log('Link clicked'); } : _b, history = _a.history, target = _a.target, id = _a.id, testID = _a.testID, className = _a.className;
|
|
190
194
|
var handleClick = function (event) {
|
|
191
195
|
if (onClick) {
|
|
192
196
|
onClick(event);
|
|
@@ -200,15 +204,10 @@ var Link = function (_a) {
|
|
|
200
204
|
history.push(href);
|
|
201
205
|
}
|
|
202
206
|
};
|
|
203
|
-
var classes = cx('link');
|
|
204
|
-
return (jsxRuntime.jsx("a", { "data-testid": testID || id ||
|
|
205
|
-
};
|
|
206
|
-
Link.defaultProps = {
|
|
207
|
-
href: undefined,
|
|
208
|
-
onClick: function () { return console.log('Link clicked'); },
|
|
209
|
-
history: undefined,
|
|
210
|
-
target: undefined,
|
|
207
|
+
var classes = cx('link', className);
|
|
208
|
+
return (jsxRuntime.jsx("a", { "data-testid": testID || id || 'Link', className: classes, href: href, onClick: handleClick, target: target, children: children }));
|
|
211
209
|
};
|
|
210
|
+
Link.displayName = 'Link';
|
|
212
211
|
|
|
213
212
|
var Variants;
|
|
214
213
|
(function (Variants) {
|
|
@@ -229,56 +228,80 @@ var ListTag;
|
|
|
229
228
|
})(ListTag || (ListTag = {}));
|
|
230
229
|
|
|
231
230
|
var List = function (_a) {
|
|
232
|
-
var variants = _a.variants, children = _a.children,
|
|
233
|
-
var modifiers = variants
|
|
234
|
-
? variants.map(function (el) { return "list--".concat(el); })
|
|
235
|
-
: null;
|
|
231
|
+
var variants = _a.variants, children = _a.children, _b = _a.as, as = _b === void 0 ? ListTag.UL : _b, id = _a.id, testID = _a.testID, className = _a.className;
|
|
232
|
+
var modifiers = variants ? variants.map(function (el) { return "list--".concat(el); }) : null;
|
|
236
233
|
var Tag = as;
|
|
237
|
-
return jsxRuntime.jsx(Tag, { "data-testid": testID || id ||
|
|
238
|
-
};
|
|
239
|
-
List.defaultProps = {
|
|
240
|
-
as: ListTag.UL,
|
|
234
|
+
return (jsxRuntime.jsx(Tag, { "data-testid": testID || id || 'List', className: cx(modifiers, className), children: children }));
|
|
241
235
|
};
|
|
236
|
+
List.displayName = 'List';
|
|
242
237
|
|
|
243
238
|
var ListItem = function (_a) {
|
|
244
|
-
var children = _a.children,
|
|
245
|
-
return jsxRuntime.jsx(Tag, { "data-testid": testID || id ||
|
|
246
|
-
};
|
|
247
|
-
ListItem.defaultProps = {
|
|
248
|
-
as: 'li',
|
|
239
|
+
var children = _a.children, _b = _a.as, Tag = _b === void 0 ? 'li' : _b, id = _a.id, testID = _a.testID, className = _a.className;
|
|
240
|
+
return (jsxRuntime.jsx(Tag, { "data-testid": testID || id || 'ListItem', className: cx('list-item', className), children: children }));
|
|
249
241
|
};
|
|
242
|
+
ListItem.displayName = 'ListItem';
|
|
250
243
|
|
|
251
244
|
var Notice = function (_a) {
|
|
252
|
-
var
|
|
253
|
-
return (jsxRuntime.jsx("div", { "data-testid": testID || id ||
|
|
245
|
+
var _b = _a.foo, foo = _b === void 0 ? 'bar' : _b, id = _a.id, testID = _a.testID;
|
|
246
|
+
return (jsxRuntime.jsx("div", { "data-testid": testID || id || 'Notice', className: "foo-bar", children: foo }));
|
|
254
247
|
};
|
|
248
|
+
Notice.displayName = 'Notice';
|
|
255
249
|
|
|
256
250
|
var Loader = function (_a) {
|
|
257
|
-
var
|
|
251
|
+
var _b = _a.size, size = _b === void 0 ? 8 : _b;
|
|
258
252
|
var sizeClass = size ? "w-".concat(size, " h-").concat(size) : 'w-8 h-8';
|
|
259
253
|
return (jsxRuntime.jsx("div", { "data-testid": "Loader", children: jsxRuntime.jsxs("div", { role: "status", children: [jsxRuntime.jsxs("svg", { className: "animate-spin -ml-1 mr-3 ".concat(sizeClass, " text-white"), xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsxRuntime.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }), jsxRuntime.jsx("span", { className: "sr-only", children: "Loading..." })] }) }));
|
|
260
254
|
};
|
|
261
|
-
Loader.
|
|
262
|
-
size: 8,
|
|
263
|
-
};
|
|
255
|
+
Loader.displayName = 'Loader';
|
|
264
256
|
|
|
265
257
|
var Container = function (_a) {
|
|
266
|
-
var children = _a.children, className = _a.className, spacing = _a.spacing;
|
|
267
|
-
var classes = cx('container', 'mx-auto', 'my-0', 'px-4', { 'py-40': spacing === 'feature' }, { 'py-24': spacing === 'component' }, { 'py-16': spacing === 'module' }, { 'py-10': spacing === 'element' }, { 'py-4': spacing === 'atom' }, { 'py-0': spacing === 'none' }, className);
|
|
258
|
+
var children = _a.children, className = _a.className, spacing = _a.spacing, padded = _a.padded;
|
|
259
|
+
var classes = cx('container', 'mx-auto', 'my-0', { 'px-4': padded }, { 'py-40': spacing === 'feature' }, { 'py-24': spacing === 'component' }, { 'py-16': spacing === 'module' }, { 'py-10': spacing === 'element' }, { 'py-4': spacing === 'atom' }, { 'py-0': spacing === 'none' }, className);
|
|
268
260
|
return (jsxRuntime.jsx("div", { "data-testid": "Container", className: classes, children: children }));
|
|
269
261
|
};
|
|
270
|
-
Container.
|
|
262
|
+
Container.displayName = 'Container';
|
|
263
|
+
|
|
264
|
+
var SPACING;
|
|
265
|
+
(function (SPACING) {
|
|
266
|
+
SPACING["NONE"] = "none";
|
|
267
|
+
SPACING["ATOM"] = "atom";
|
|
268
|
+
SPACING["DEFAULT"] = "default";
|
|
269
|
+
SPACING["ELEMENT"] = "element";
|
|
270
|
+
SPACING["COMPONENT"] = "component";
|
|
271
|
+
SPACING["MODULE"] = "module";
|
|
272
|
+
SPACING["FEATURE"] = "feature";
|
|
273
|
+
})(SPACING || (SPACING = {}));
|
|
271
274
|
|
|
272
275
|
var ContentPageLayout = function (_a) {
|
|
273
|
-
var
|
|
276
|
+
var _b = _a.spacing, spacing = _b === void 0 ? SPACING.DEFAULT : _b, children = _a.children, narrow = _a.narrow, flush = _a.flush, className = _a.className;
|
|
274
277
|
var classes = cx('flex', 'flex-col', 'flex-1', 'relative', { 'py-40': spacing === 'feature' }, { 'py-24': spacing === 'component' }, { 'py-16': spacing === 'module' }, { 'py-10': spacing === 'element' }, { 'py-8': spacing === 'default' }, { 'py-4': spacing === 'atom' }, { 'py-0': spacing === 'none' }, { 'max-w-5xl': narrow }, { 'p-0': flush }, className);
|
|
275
278
|
return (jsxRuntime.jsx("div", { "data-testid": "ContentPageLayout", className: classes, children: children }));
|
|
276
279
|
};
|
|
280
|
+
ContentPageLayout.displayName = 'ContentPageLayout';
|
|
281
|
+
|
|
282
|
+
var SIZE;
|
|
283
|
+
(function (SIZE) {
|
|
284
|
+
SIZE["NONE"] = "none";
|
|
285
|
+
SIZE["ATOM"] = "atom";
|
|
286
|
+
SIZE["DEFAULT"] = "default";
|
|
287
|
+
SIZE["ELEMENT"] = "element";
|
|
288
|
+
SIZE["COMPONENT"] = "component";
|
|
289
|
+
SIZE["MODULE"] = "module";
|
|
290
|
+
SIZE["FEATURE"] = "feature";
|
|
291
|
+
})(SIZE || (SIZE = {}));
|
|
292
|
+
|
|
293
|
+
var ContentRowsLayout = function (_a) {
|
|
294
|
+
var className = _a.className, children = _a.children, _b = _a.size, size = _b === void 0 ? SIZE.DEFAULT : _b;
|
|
295
|
+
var classes = cx('grid', 'auto-rows-min', 'grid-cols-1', 'gap-x-4', { 'gap-y-0 mb-0': size === 'none' }, { 'gap-y-2 mb-2': size === 'atom' }, { 'gap-y-4 mb-4': size === 'default' }, { 'gap-y-8 mb-8': size === 'element' }, { 'gap-y-16 mb-16': size === 'module' }, { 'gap-y-24 mb-24': size === 'component' }, { 'gap-y-40 mb-40': size === 'feature' }, className);
|
|
296
|
+
return (jsxRuntime.jsx("div", { "data-testid": "ContentRowsLayout", className: classes, children: children }));
|
|
297
|
+
};
|
|
298
|
+
ContentRowsLayout.displayName = 'ContentRowsLayout';
|
|
277
299
|
|
|
278
300
|
exports.Blockquote = Blockquote;
|
|
279
301
|
exports.Button = Button;
|
|
280
302
|
exports.Container = Container;
|
|
281
303
|
exports.ContentPageLayout = ContentPageLayout;
|
|
304
|
+
exports.ContentRowsLayout = ContentRowsLayout;
|
|
282
305
|
exports.Copy = Copy;
|
|
283
306
|
exports.Heading = Heading;
|
|
284
307
|
exports.Hr = Hr;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './Blockquote';
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Props } from './Button.types';
|
|
2
|
+
declare const Button: {
|
|
3
|
+
({ variant, size, type, wide, rounded, raised, uppercase, children, id, disabled, ariaLabel, onClick, icon, external, iconFirst, outline, testID, className, }: Props): React.ReactElement;
|
|
4
|
+
displayName: string;
|
|
5
|
+
};
|
|
6
|
+
export default Button;
|
|
7
|
+
export type { Props };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import Button from '.';
|
|
3
|
+
declare const meta: Meta<typeof Button>;
|
|
4
|
+
type Story = StoryObj<typeof Button>;
|
|
5
|
+
export declare const Default: Story;
|
|
6
|
+
export default meta;
|
|
7
|
+
export declare const WithIcon: Story;
|
|
8
|
+
export declare const IconOnly: Story;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { MouseEventHandler } from 'react';
|
|
2
|
+
export declare enum BTN_TYPES {
|
|
3
|
+
SUBMIT = "submit",
|
|
4
|
+
RESET = "reset",
|
|
5
|
+
BUTTON = "button"
|
|
6
|
+
}
|
|
7
|
+
export declare enum BTN_VARIANTS {
|
|
8
|
+
PRIMARY = "primary",
|
|
9
|
+
SECONDARY = "secondary",
|
|
10
|
+
TERTIARY = "tertiary"
|
|
11
|
+
}
|
|
12
|
+
export declare enum BTN_SIZES {
|
|
13
|
+
SMALL = "small",
|
|
14
|
+
MEDIUM = "medium",
|
|
15
|
+
LARGE = "large"
|
|
16
|
+
}
|
|
17
|
+
export interface Props {
|
|
18
|
+
variant?: BTN_VARIANTS;
|
|
19
|
+
size: BTN_SIZES;
|
|
20
|
+
uppercase?: boolean;
|
|
21
|
+
children: React.ReactNode;
|
|
22
|
+
type?: BTN_TYPES;
|
|
23
|
+
disabled?: boolean;
|
|
24
|
+
ariaLabel: string;
|
|
25
|
+
onClick?: MouseEventHandler<HTMLButtonElement>;
|
|
26
|
+
icon?: string;
|
|
27
|
+
external?: boolean;
|
|
28
|
+
iconFirst?: boolean;
|
|
29
|
+
raised?: boolean;
|
|
30
|
+
outline?: boolean;
|
|
31
|
+
wide?: boolean;
|
|
32
|
+
rounded?: boolean;
|
|
33
|
+
id?: string;
|
|
34
|
+
testID?: string;
|
|
35
|
+
className?: string;
|
|
36
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './Button';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './Container';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare enum SPACING {
|
|
3
|
+
NONE = "none",
|
|
4
|
+
ATOM = "atom",
|
|
5
|
+
DEFAULT = "default",
|
|
6
|
+
ELEMENT = "element",
|
|
7
|
+
COMPONENT = "component",
|
|
8
|
+
MODULE = "module",
|
|
9
|
+
FEATURE = "feature"
|
|
10
|
+
}
|
|
11
|
+
export interface Props {
|
|
12
|
+
children: React.ReactNode;
|
|
13
|
+
narrow?: boolean;
|
|
14
|
+
flush?: boolean;
|
|
15
|
+
spacing?: SPACING;
|
|
16
|
+
className?: string;
|
|
17
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './ContentPageLayout';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare enum SIZE {
|
|
3
|
+
NONE = "none",
|
|
4
|
+
ATOM = "atom",
|
|
5
|
+
DEFAULT = "default",
|
|
6
|
+
ELEMENT = "element",
|
|
7
|
+
COMPONENT = "component",
|
|
8
|
+
MODULE = "module",
|
|
9
|
+
FEATURE = "feature"
|
|
10
|
+
}
|
|
11
|
+
export interface Props {
|
|
12
|
+
className?: string;
|
|
13
|
+
children: React.ReactNode;
|
|
14
|
+
size?: SIZE;
|
|
15
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './ContentRowsLayout';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare enum ALIGN {
|
|
3
|
+
LEFT = "left",
|
|
4
|
+
CENTER = "center",
|
|
5
|
+
RIGHT = "right",
|
|
6
|
+
JUSTIFY = "justify",
|
|
7
|
+
NOWRAP = "nowrap"
|
|
8
|
+
}
|
|
9
|
+
export declare enum TRANSFORM {
|
|
10
|
+
LOWERCASE = "lowercase",
|
|
11
|
+
UPPERCASE = "uppercase",
|
|
12
|
+
CAPITALIZE = "capitalize",
|
|
13
|
+
NORMALCASE = "normal-case"
|
|
14
|
+
}
|
|
15
|
+
export declare enum CONTEXTUAL {
|
|
16
|
+
INVERTED = "inverted",
|
|
17
|
+
MUTED = "muted"
|
|
18
|
+
}
|
|
19
|
+
export declare enum SIZE {
|
|
20
|
+
SMALL = "small",
|
|
21
|
+
LARGE = "large",
|
|
22
|
+
INTRO = "intro"
|
|
23
|
+
}
|
|
24
|
+
export declare enum TAG {
|
|
25
|
+
P = "p",
|
|
26
|
+
SPAN = "span",
|
|
27
|
+
DIV = "div",
|
|
28
|
+
SMALL = "small"
|
|
29
|
+
}
|
|
30
|
+
export interface Props {
|
|
31
|
+
children: string | Array<React.ReactNode> | React.ReactNode;
|
|
32
|
+
align?: ALIGN;
|
|
33
|
+
size?: SIZE;
|
|
34
|
+
transform?: TRANSFORM;
|
|
35
|
+
contextual?: CONTEXTUAL;
|
|
36
|
+
inverted?: boolean;
|
|
37
|
+
maxLength?: boolean;
|
|
38
|
+
as: TAG;
|
|
39
|
+
id?: string;
|
|
40
|
+
testID?: string;
|
|
41
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './Copy';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Props } from './Form.types';
|
|
3
|
+
declare const Form: {
|
|
4
|
+
({ children, className, noValidate, submit, onSubmit, hideSubmit, ariaSubmitLabel, submitID, }: Props): React.ReactElement;
|
|
5
|
+
displayName: string;
|
|
6
|
+
};
|
|
7
|
+
export default Form;
|
|
8
|
+
export type { Props };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|