@hexure/ui 1.1.2 → 1.2.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/README.md +10 -9
- package/dist/cjs/index.js +81 -39
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/Copy/Copy.d.ts +2 -0
- package/dist/cjs/types/components/Drawer/Drawer.d.ts +28 -0
- package/dist/cjs/types/components/Drawer/Drawer.stories.d.ts +5 -0
- package/dist/cjs/types/components/Drawer/index.d.ts +1 -0
- package/dist/cjs/types/index.d.ts +1 -0
- package/dist/esm/index.js +81 -40
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/Copy/Copy.d.ts +2 -0
- package/dist/esm/types/components/Drawer/Drawer.d.ts +28 -0
- package/dist/esm/types/components/Drawer/Drawer.stories.d.ts +5 -0
- package/dist/esm/types/components/Drawer/index.d.ts +1 -0
- package/dist/esm/types/index.d.ts +1 -0
- package/dist/index.d.ts +36 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -67,17 +67,18 @@ You should release a new version of this package immediately after a Pull Reques
|
|
|
67
67
|
- Making minor bumps to npm packages
|
|
68
68
|
- Fixing bugs with existing components
|
|
69
69
|
2. Pull down the latest version of main and create a new branch off it that corresponds with the new version number: `git branch -b release/1.x.x`
|
|
70
|
-
3.
|
|
70
|
+
3. Update package.json with the new version number.
|
|
71
|
+
4. Make sure ESLint passes: `npm run eslint`
|
|
71
72
|
- Since ESLint passing is a requirement for all PRs, this should always pass
|
|
72
|
-
|
|
73
|
+
5. Run Rollup to compile the src files into the dist directory for distribution: `npm run rollup`
|
|
73
74
|
- Sometimes rollup won't exit out the command after generating the files into dist. If this happens, just exit out of the process
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
75
|
+
6. Verify the updates are seen in the dist directory: `git status` and/or `git diff`
|
|
76
|
+
7. Add, commit, and push the changes: `git add .` then `git commit -m "v1.x.x"` then `git push origin release/1.x.x`
|
|
77
|
+
8. Create a Pull Request in Azure DevOps against the main branch.
|
|
78
|
+
9. Your Pull Request must be reviewed and approved by the lead over this repository.
|
|
79
|
+
10. Once approved, merge your pull request into main.
|
|
80
|
+
11. Pull down the updated main branch and run `npm publish`
|
|
81
|
+
12. Go to the Azure DevOps repo and add a new Tag
|
|
81
82
|
- Tag Name: v1.x.x
|
|
82
83
|
- Description: Add details around what was added/changed
|
|
83
84
|
|
package/dist/cjs/index.js
CHANGED
|
@@ -2025,17 +2025,17 @@ var FontSizes = {
|
|
|
2025
2025
|
SMALL: '13px',
|
|
2026
2026
|
};
|
|
2027
2027
|
|
|
2028
|
-
var Header$
|
|
2029
|
-
var Title = styled.div(templateObject_2$
|
|
2028
|
+
var Header$3 = styled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n background: #f5f5f5;\n border: 1px solid #e5e5e5;\n padding: 14px 20px;\n height: 50px;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n background: #f5f5f5;\n border: 1px solid #e5e5e5;\n padding: 14px 20px;\n height: 50px;\n cursor: pointer;\n"])));
|
|
2029
|
+
var Title = styled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 400;\n color: ", ";\n line-height: 1.6em;\n font-family: ", ";\n box-sizing: border-box;\n"], ["\n font-size: ", ";\n font-weight: 400;\n color: ", ";\n line-height: 1.6em;\n font-family: ", ";\n box-sizing: border-box;\n"])), FontSizes.DEFAULT, Colors.BLACK.Hex, FontStyles.DEFAULT);
|
|
2030
2030
|
var Accordion = function (_a) {
|
|
2031
2031
|
var title = _a.title, children = _a.children, open = _a.open, onClick = _a.onClick, accessibleProps = __rest(_a, ["title", "children", "open", "onClick"]);
|
|
2032
2032
|
return (React.createElement(React.Fragment, null,
|
|
2033
|
-
React.createElement(Header$
|
|
2033
|
+
React.createElement(Header$3, __assign({ onClick: onClick }, accessibleProps),
|
|
2034
2034
|
React.createElement(Title, null, title),
|
|
2035
2035
|
React.createElement(Icon, { color: Colors.BLACK.Hex, path: open ? js.mdiChevronUp : js.mdiChevronDown, size: '24px' })),
|
|
2036
2036
|
open ? children : null));
|
|
2037
2037
|
};
|
|
2038
|
-
var templateObject_1$
|
|
2038
|
+
var templateObject_1$k, templateObject_2$i;
|
|
2039
2039
|
|
|
2040
2040
|
var button_type_mapping = {
|
|
2041
2041
|
primary: {
|
|
@@ -2054,7 +2054,7 @@ var button_type_mapping = {
|
|
|
2054
2054
|
content_color: '#fff',
|
|
2055
2055
|
},
|
|
2056
2056
|
};
|
|
2057
|
-
var StyledButton = styled.button(templateObject_1$
|
|
2057
|
+
var StyledButton = styled.button(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n height: ", ";\n line-height: 1em;\n border-radius: ", ";\n margin: ", ";\n padding: ", ";\n outline: none;\n background: ", ";\n width: ", ";\n cursor: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n &:hover {\n opacity: ", ";\n }\n"], ["\n height: ", ";\n line-height: 1em;\n border-radius: ", ";\n margin: ", ";\n padding: ", ";\n outline: none;\n background: ", ";\n width: ", ";\n cursor: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n &:hover {\n opacity: ", ";\n }\n"])), function (props) { return (props.$small ? '30px' : '40px'); }, function (props) { return (props.$small ? '15px' : '20px'); }, function (props) { return props.$margin || '0px'; }, function (props) {
|
|
2058
2058
|
if (props.$hasChildren) {
|
|
2059
2059
|
if (props.$small) {
|
|
2060
2060
|
return '0 10px';
|
|
@@ -2077,8 +2077,8 @@ var StyledButton = styled.button(templateObject_1$i || (templateObject_1$i = __m
|
|
|
2077
2077
|
}, function (props) { return (props.$disabled ? 'default' : 'pointer'); }, function (props) { return (props.$disabled ? 0.6 : 0.9); }, function (props) {
|
|
2078
2078
|
return props.$type ? button_type_mapping[props.$type].border_color : Colors.PRIMARY.Hex;
|
|
2079
2079
|
}, function (props) { return (props.$disabled ? 0.6 : 1); });
|
|
2080
|
-
var Label$3 = styled.span(templateObject_2$
|
|
2081
|
-
var StyledIcon = styled.span(templateObject_3$
|
|
2080
|
+
var Label$3 = styled.span(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-family: ", ";\n font-weight: 500;\n line-height: ", ";\n"], ["\n color: ", ";\n font-size: ", ";\n font-family: ", ";\n font-weight: 500;\n line-height: ", ";\n"])), function (props) { return (props.$type ? button_type_mapping[props.$type].content_color : '#fff'); }, function (props) { return (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT); }, FontStyles.DEFAULT, function (props) { return (props.$small ? '2.2em' : '2.9em'); });
|
|
2081
|
+
var StyledIcon = styled.span(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n margin-left: ", ";\n margin-right: ", ";\n display: flex;\n align-items: center;\n box-sizing: border-box;\n"], ["\n margin-left: ", ";\n margin-right: ", ";\n display: flex;\n align-items: center;\n box-sizing: border-box;\n"])), function (props) { return (props.$hasChildren ? '6px' : '0px'); }, function (props) { return (props.$hasChildren ? '-4px' : '0px'); });
|
|
2082
2082
|
var Button = function (_a) {
|
|
2083
2083
|
var children = _a.children, _b = _a.disabled, disabled = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.margin, margin = _c === void 0 ? '' : _c, onClick = _a.onClick, _d = _a.small, small = _d === void 0 ? false : _d, _e = _a.type, type = _e === void 0 ? 'primary' : _e, accessibleProps = __rest(_a, ["children", "disabled", "icon", "margin", "onClick", "small", "type"]);
|
|
2084
2084
|
var has_children = children && children.length > 0;
|
|
@@ -2087,23 +2087,23 @@ var Button = function (_a) {
|
|
|
2087
2087
|
icon ? (React.createElement(StyledIcon, { "$hasChildren": !!has_children },
|
|
2088
2088
|
React.createElement(Icon, { color: type ? button_type_mapping[type].content_color : '#fff', path: icon, size: small ? '20px' : '24px' }))) : null));
|
|
2089
2089
|
};
|
|
2090
|
-
var templateObject_1$
|
|
2090
|
+
var templateObject_1$j, templateObject_2$h, templateObject_3$c;
|
|
2091
2091
|
|
|
2092
|
-
var StyledComponent = styled.p(templateObject_1$
|
|
2092
|
+
var StyledComponent = styled.p(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n letter-spacing: ", ";\n font-weight: ", ";\n font-style: ", ";\n text-decoration: ", ";\n font-family: 'Roboto', Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n text-align: ", ";\n box-sizing: border-box;\n"], ["\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n letter-spacing: ", ";\n font-weight: ", ";\n font-style: ", ";\n text-decoration: ", ";\n font-family: 'Roboto', Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n text-align: ", ";\n box-sizing: border-box;\n"])), function (props) { return Colors[props.$color].Hex; }, function (props) { return (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT); }, function (props) { return (props.$type === 'small' ? '1.5em' : '1.6em'); }, function (props) { return (props.$type === 'small' ? '1px' : '0px'); }, function (props) { return (props.$type === 'bold' ? '500' : '400'); }, function (props) { return (props.$type === 'italic' ? 'italic' : 'normal'); }, function (props) {
|
|
2093
2093
|
return ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none';
|
|
2094
2094
|
}, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; }, function (props) { return props.$align || 'left'; });
|
|
2095
2095
|
var Copy = function (_a) {
|
|
2096
|
-
var children = _a.children, _b = _a.align, align = _b === void 0 ? '' : _b, _c = _a.margin, margin = _c === void 0 ? '' : _c, _d = _a.padding, padding = _d === void 0 ? '' : _d, _e = _a.type, type = _e === void 0 ? 'default' : _e;
|
|
2097
|
-
return (React.createElement(StyledComponent, { "$align": align, "$margin": margin, "$padding": padding, "$type": type }, children));
|
|
2096
|
+
var children = _a.children, _b = _a.align, align = _b === void 0 ? '' : _b, _c = _a.margin, margin = _c === void 0 ? '' : _c, _d = _a.padding, padding = _d === void 0 ? '' : _d, _e = _a.type, type = _e === void 0 ? 'default' : _e, _f = _a.color, color = _f === void 0 ? 'BLACK' : _f;
|
|
2097
|
+
return (React.createElement(StyledComponent, { "$align": align, "$color": color, "$margin": margin, "$padding": padding, "$type": type }, children));
|
|
2098
2098
|
};
|
|
2099
2099
|
Copy.defaultProps = {
|
|
2100
2100
|
type: 'default',
|
|
2101
2101
|
};
|
|
2102
|
-
var templateObject_1$
|
|
2102
|
+
var templateObject_1$i;
|
|
2103
2103
|
|
|
2104
|
-
var H1 = styled.h1(templateObject_1$
|
|
2105
|
-
var H2 = styled.h2(templateObject_2$
|
|
2106
|
-
var H3 = styled.h3(templateObject_3$
|
|
2104
|
+
var H1 = styled.h1(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n color: ", ";\n font-size: 30px;\n font-weight: ", ";\n line-height: 1.4em;\n font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n box-sizing: border-box;\n"], ["\n color: ", ";\n font-size: 30px;\n font-weight: ", ";\n line-height: 1.4em;\n font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n box-sizing: border-box;\n"])), Colors.BLACK.Hex, function (props) { return (props.$bold ? '500' : '400'); }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; });
|
|
2105
|
+
var H2 = styled.h2(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n color: ", ";\n font-size: 24px;\n font-weight: ", ";\n line-height: 1.33em;\n font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n box-sizing: border-box;\n"], ["\n color: ", ";\n font-size: 24px;\n font-weight: ", ";\n line-height: 1.33em;\n font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n box-sizing: border-box;\n"])), Colors.BLACK.Hex, function (props) { return (props.$bold ? '500' : '400'); }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; });
|
|
2106
|
+
var H3 = styled.h3(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n color: ", ";\n font-size: 18px;\n font-weight: ", ";\n line-height: 1.33em;\n font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n box-sizing: border-box;\n"], ["\n color: ", ";\n font-size: 18px;\n font-weight: ", ";\n line-height: 1.33em;\n font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n box-sizing: border-box;\n"])), Colors.BLACK.Hex, function (props) { return (props.$bold ? '500' : '400'); }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; });
|
|
2107
2107
|
var Heading = function (_a) {
|
|
2108
2108
|
var bold = _a.bold, children = _a.children, margin = _a.margin, padding = _a.padding, type = _a.type, accessibleProps = __rest(_a, ["bold", "children", "margin", "padding", "type"]);
|
|
2109
2109
|
switch (type) {
|
|
@@ -2122,11 +2122,11 @@ Heading.defaultProps = {
|
|
|
2122
2122
|
bold: false,
|
|
2123
2123
|
type: 'primary',
|
|
2124
2124
|
};
|
|
2125
|
-
var templateObject_1$
|
|
2125
|
+
var templateObject_1$h, templateObject_2$g, templateObject_3$b;
|
|
2126
2126
|
|
|
2127
|
-
var Wrapper$9 = styled.div(templateObject_1$
|
|
2128
|
-
var Container$
|
|
2129
|
-
var Buttons = styled.div(templateObject_3$
|
|
2127
|
+
var Wrapper$9 = styled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 9999;\n background: rgba(0, 0, 0, 0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n"], ["\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 9999;\n background: rgba(0, 0, 0, 0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n"])));
|
|
2128
|
+
var Container$2 = styled.dialog(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n max-width: 600px;\n width: auto;\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n outline: none;\n border: none;\n position: relative;\n padding: 40px;\n text-align: center;\n box-sizing: border-box;\n"], ["\n max-width: 600px;\n width: auto;\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n outline: none;\n border: none;\n position: relative;\n padding: 40px;\n text-align: center;\n box-sizing: border-box;\n"])));
|
|
2129
|
+
var Buttons = styled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 30px;\n box-sizing: border-box;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 30px;\n box-sizing: border-box;\n"])));
|
|
2130
2130
|
var ActionDialog = function (_a) {
|
|
2131
2131
|
var description = _a.description, title = _a.title, onClose = _a.onClose, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, accessibleProps = __rest(_a, ["description", "title", "onClose", "primaryButton", "secondaryButton"]);
|
|
2132
2132
|
React.useEffect(function () {
|
|
@@ -2140,17 +2140,17 @@ var ActionDialog = function (_a) {
|
|
|
2140
2140
|
};
|
|
2141
2141
|
}, []);
|
|
2142
2142
|
return (React.createElement(Wrapper$9, __assign({}, accessibleProps),
|
|
2143
|
-
React.createElement(Container$
|
|
2143
|
+
React.createElement(Container$2, { open: true },
|
|
2144
2144
|
title ? (React.createElement(Heading, { margin: '0px 0px 20px 0px', type: 'secondary' }, title)) : null,
|
|
2145
2145
|
description ? React.createElement(Copy, { align: 'center' }, description) : null,
|
|
2146
2146
|
primaryButton || secondaryButton ? (React.createElement(Buttons, null,
|
|
2147
2147
|
secondaryButton ? (React.createElement(Button, __assign({}, secondaryButton, { margin: '0px 5px', type: 'secondary' }))) : null,
|
|
2148
2148
|
primaryButton ? React.createElement(Button, __assign({}, primaryButton, { margin: '0px 5px', type: 'primary' })) : null)) : null)));
|
|
2149
2149
|
};
|
|
2150
|
-
var templateObject_1$
|
|
2150
|
+
var templateObject_1$g, templateObject_2$f, templateObject_3$a;
|
|
2151
2151
|
|
|
2152
|
-
var Wrapper$8 = styled.div(templateObject_1$
|
|
2153
|
-
var Content$1 = styled.div(templateObject_2$
|
|
2152
|
+
var Wrapper$8 = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n border: 1px solid #f1f1f1;\n border-radius: 4px;\n border-left-width: 4px;\n box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: flex-start;\n padding: 20px;\n box-sizing: border-box;\n"], ["\n border: 1px solid #f1f1f1;\n border-radius: 4px;\n border-left-width: 4px;\n box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: flex-start;\n padding: 20px;\n box-sizing: border-box;\n"])));
|
|
2153
|
+
var Content$1 = styled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n margin-left: 20px;\n"], ["\n margin-left: 20px;\n"])));
|
|
2154
2154
|
var Alert = function (_a) {
|
|
2155
2155
|
var _b = _a.type, type = _b === void 0 ? 'info' : _b, title = _a.title, description = _a.description, accessibleProps = __rest(_a, ["type", "title", "description"]);
|
|
2156
2156
|
var type_mapping = {
|
|
@@ -2178,14 +2178,14 @@ var Alert = function (_a) {
|
|
|
2178
2178
|
title ? (React.createElement(Heading, { bold: true, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
|
|
2179
2179
|
description ? React.createElement(Copy, { margin: '10px 0 0 0' }, description) : null)));
|
|
2180
2180
|
};
|
|
2181
|
-
var templateObject_1$
|
|
2182
|
-
|
|
2183
|
-
var Wrapper$7 = styled.div(templateObject_1$
|
|
2184
|
-
var Left = styled.div(templateObject_2$
|
|
2185
|
-
var Info = styled.div(templateObject_3$
|
|
2186
|
-
var Selected = styled.span(templateObject_4$
|
|
2187
|
-
var Clear = styled.span(templateObject_5$
|
|
2188
|
-
var Actions = styled.div(templateObject_6$
|
|
2181
|
+
var templateObject_1$f, templateObject_2$e;
|
|
2182
|
+
|
|
2183
|
+
var Wrapper$7 = styled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n border: 1px solid ", ";\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n"], ["\n border: 1px solid ", ";\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n"])), Colors.PRIMARY.Hex);
|
|
2184
|
+
var Left = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-shrink: 0;\n"], ["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-shrink: 0;\n"])));
|
|
2185
|
+
var Info = styled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n margin-right: 30px;\n"], ["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n margin-right: 30px;\n"])));
|
|
2186
|
+
var Selected = styled.span(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n font-family: ", ";\n color: ", ";\n line-height: 1;\n"], ["\n font-size: 14px;\n font-weight: 400;\n font-family: ", ";\n color: ", ";\n line-height: 1;\n"])), FontStyles.DEFAULT, Colors.BLACK.Hex);
|
|
2187
|
+
var Clear = styled.span(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n font-family: ", ";\n color: ", ";\n line-height: 1;\n cursor: pointer;\n padding-left: 10px;\n margin-left: 10px;\n border-left: 1px solid #ccc;\n"], ["\n font-size: 14px;\n font-weight: 400;\n font-family: ", ";\n color: ", ";\n line-height: 1;\n cursor: pointer;\n padding-left: 10px;\n margin-left: 10px;\n border-left: 1px solid #ccc;\n"])), FontStyles.DEFAULT, Colors.PRIMARY.Hex);
|
|
2188
|
+
var Actions = styled.div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n column-gap: 10px;\n"], ["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n column-gap: 10px;\n"])));
|
|
2189
2189
|
var Error$1 = styled.div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n background: rgba(", ", 0.1);\n border-radius: 4px;\n padding: 6px 8px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n margin-left: 30px;\n"], ["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n background: rgba(", ", 0.1);\n border-radius: 4px;\n padding: 6px 8px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n margin-left: 30px;\n"])), Colors.RED.Rgb);
|
|
2190
2190
|
var ErrorMsg = styled.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 500;\n font-family: ", ";\n line-height: 1em;\n color: ", ";\n margin-left: 8px;\n"], ["\n font-size: 14px;\n font-weight: 500;\n font-family: ", ";\n line-height: 1em;\n color: ", ";\n margin-left: 8px;\n"])), FontStyles.DEFAULT, Colors.RED.Hex);
|
|
2191
2191
|
var BulkActionBar = function (_a) {
|
|
@@ -2202,18 +2202,18 @@ var BulkActionBar = function (_a) {
|
|
|
2202
2202
|
React.createElement(Icon, { color: Colors.RED.Hex, path: js.mdiInformationOutline, size: '20px' }),
|
|
2203
2203
|
React.createElement(ErrorMsg, null, errorMsg))) : null));
|
|
2204
2204
|
};
|
|
2205
|
-
var templateObject_1$
|
|
2205
|
+
var templateObject_1$e, templateObject_2$d, templateObject_3$9, templateObject_4$6, templateObject_5$4, templateObject_6$3, templateObject_7$2, templateObject_8;
|
|
2206
2206
|
|
|
2207
2207
|
var Checkbox = function (_a) {
|
|
2208
2208
|
var children = _a.children, disabled = _a.disabled, checked = _a.checked, onChange = _a.onChange, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange"]);
|
|
2209
|
-
var Wrapper = styled.label(templateObject_1$
|
|
2210
|
-
var Input = styled.input(templateObject_2$
|
|
2211
|
-
var Label = styled.span(templateObject_3$
|
|
2209
|
+
var Wrapper = styled.label(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n padding: 4px 0;\n cursor: ", ";\n display: flex;\n align-items: center;\n font-size: ", ";\n line-height: 1.6em;\n box-sizing: border-box;\n "], ["\n padding: 4px 0;\n cursor: ", ";\n display: flex;\n align-items: center;\n font-size: ", ";\n line-height: 1.6em;\n box-sizing: border-box;\n "])), disabled ? 'default' : 'pointer', FontSizes.DEFAULT);
|
|
2210
|
+
var Input = styled.input(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n font-size: 20px;\n margin: 0px 0px 2px 0px;\n line-height: 1.1em;\n box-sizing: border-box;\n "], ["\n font-size: 20px;\n margin: 0px 0px 2px 0px;\n line-height: 1.1em;\n box-sizing: border-box;\n "])));
|
|
2211
|
+
var Label = styled.span(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n line-height: 1.6em;\n color: ", ";\n margin-left: 6px;\n box-sizing: border-box;\n "], ["\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n line-height: 1.6em;\n color: ", ";\n margin-left: 6px;\n box-sizing: border-box;\n "])), FontStyles.DEFAULT, FontSizes.DEFAULT, Colors.BLACK.Hex);
|
|
2212
2212
|
return (React.createElement(Wrapper, __assign({}, accessibleProps, { onClick: disabled ? undefined : onChange }),
|
|
2213
2213
|
React.createElement(Input, { checked: checked, disabled: disabled, name: accessibleProps.name, type: 'checkbox' }),
|
|
2214
2214
|
children ? React.createElement(Label, null, children) : null));
|
|
2215
2215
|
};
|
|
2216
|
-
var templateObject_1$
|
|
2216
|
+
var templateObject_1$d, templateObject_2$c, templateObject_3$8;
|
|
2217
2217
|
|
|
2218
2218
|
var Checklist = function (_a) {
|
|
2219
2219
|
var disabled = _a.disabled, onChange = _a.onChange, options = _a.options, selected = _a.selected, showSelectAll = _a.showSelectAll, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll"]);
|
|
@@ -2233,8 +2233,8 @@ var Checklist = function (_a) {
|
|
|
2233
2233
|
}
|
|
2234
2234
|
onChange(updated_selected);
|
|
2235
2235
|
};
|
|
2236
|
-
var SelectAll = styled.div(templateObject_1$
|
|
2237
|
-
var Options = styled.div(templateObject_2$
|
|
2236
|
+
var SelectAll = styled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n padding: 8px 12px;\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n "], ["\n padding: 8px 12px;\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n "])), Colors.LIGHT_GRAY.Hex);
|
|
2237
|
+
var Options = styled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n padding: 12px;\n box-sizing: border-box;\n "], ["\n padding: 12px;\n box-sizing: border-box;\n "])));
|
|
2238
2238
|
return (React.createElement(React.Fragment, null,
|
|
2239
2239
|
showSelectAll && values.length ? (React.createElement(SelectAll, null,
|
|
2240
2240
|
React.createElement(Checkbox, { checked: selected.length === values.length, disabled: disabled, onChange: handleToggleAll }, "Select All"))) : null,
|
|
@@ -2244,7 +2244,48 @@ var Checklist = function (_a) {
|
|
|
2244
2244
|
return (React.createElement(Checkbox, __assign({}, accessibleProps, { checked: checked, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
|
|
2245
2245
|
}))));
|
|
2246
2246
|
};
|
|
2247
|
-
var templateObject_1$
|
|
2247
|
+
var templateObject_1$c, templateObject_2$b;
|
|
2248
|
+
|
|
2249
|
+
var Scrim$1 = styled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 9998;\n background: ", ";\n"], ["\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 9998;\n background: ", ";\n"])), function (_a) {
|
|
2250
|
+
var $scrim = _a.$scrim;
|
|
2251
|
+
return ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent');
|
|
2252
|
+
});
|
|
2253
|
+
var Container$1 = styled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n z-index: 9999;\n min-width: 400px;\n width: ", ";\n overflow: hidden;\n box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n outline: none;\n border: none;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n padding: 0px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n background: #fff;\n"], ["\n z-index: 9999;\n min-width: 400px;\n width: ", ";\n overflow: hidden;\n box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n outline: none;\n border: none;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n padding: 0px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n background: #fff;\n"])), function (_a) {
|
|
2254
|
+
var $width = _a.$width;
|
|
2255
|
+
return $width || '400px';
|
|
2256
|
+
});
|
|
2257
|
+
var Header$2 = styled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n padding: 30px 20px;\n display: flex;\n align-items: flex-start;\n box-sizing: border-box;\n flex-shrink: 0;\n background: #fff;\n"], ["\n padding: 30px 20px;\n display: flex;\n align-items: flex-start;\n box-sizing: border-box;\n flex-shrink: 0;\n background: #fff;\n"])));
|
|
2258
|
+
var Close$1 = styled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n margin-left: auto;\n display: flex;\n align-items: center;\n padding-left: 20px;\n cursor: pointer;\n"], ["\n margin-left: auto;\n display: flex;\n align-items: center;\n padding-left: 20px;\n cursor: pointer;\n"])));
|
|
2259
|
+
var ContentWrapper$1 = styled.div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n overflow-x: hidden;\n overflow-y: auto;\n box-sizing: border-box;\n flex: 1;\n background: #fff;\n"], ["\n overflow-x: hidden;\n overflow-y: auto;\n box-sizing: border-box;\n flex: 1;\n background: #fff;\n"])));
|
|
2260
|
+
var ButtonBar$1 = styled.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n padding: 20px;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n box-sizing: border-box;\n gap: 10px;\n flex-shrink: 0;\n background: #fff;\n"], ["\n padding: 20px;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n box-sizing: border-box;\n gap: 10px;\n flex-shrink: 0;\n background: #fff;\n"])));
|
|
2261
|
+
var Drawer = function (_a) {
|
|
2262
|
+
var children = _a.children, description = _a.description, title = _a.title, onClose = _a.onClose, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, tertiaryButton = _a.tertiaryButton, scrim = _a.scrim, width = _a.width, accessibleProps = __rest(_a, ["children", "description", "title", "onClose", "primaryButton", "secondaryButton", "tertiaryButton", "scrim", "width"]);
|
|
2263
|
+
React.useEffect(function () {
|
|
2264
|
+
document.onkeydown = function (e) {
|
|
2265
|
+
if (e.key === 'Escape') {
|
|
2266
|
+
onClose();
|
|
2267
|
+
}
|
|
2268
|
+
};
|
|
2269
|
+
return function cleanup() {
|
|
2270
|
+
document.onkeydown = null;
|
|
2271
|
+
};
|
|
2272
|
+
}, []);
|
|
2273
|
+
return (React.createElement(React.Fragment, null,
|
|
2274
|
+
React.createElement(Container$1, __assign({}, accessibleProps, { "$width": width }),
|
|
2275
|
+
React.createElement(Header$2, null,
|
|
2276
|
+
React.createElement("div", null,
|
|
2277
|
+
title ? React.createElement(Heading, { type: 'secondary' }, title) : null,
|
|
2278
|
+
description ? React.createElement(Copy, { color: 'GRAY' }, description) : null),
|
|
2279
|
+
React.createElement(Close$1, { onClick: onClose },
|
|
2280
|
+
React.createElement(Button, { icon: js.mdiClose, small: true, type: 'secondary' }))),
|
|
2281
|
+
React.createElement(ContentWrapper$1, null, children),
|
|
2282
|
+
primaryButton || secondaryButton || tertiaryButton ? (React.createElement(ButtonBar$1, null,
|
|
2283
|
+
tertiaryButton ? React.createElement(Button, __assign({}, tertiaryButton, { type: 'secondary' })) : null,
|
|
2284
|
+
secondaryButton ? React.createElement(Button, __assign({}, secondaryButton, { type: 'secondary' })) : null,
|
|
2285
|
+
primaryButton ? React.createElement(Button, __assign({}, primaryButton, { type: 'primary' })) : null)) : null),
|
|
2286
|
+
scrim ? React.createElement(Scrim$1, { "$scrim": scrim, onClick: onClose }) : null));
|
|
2287
|
+
};
|
|
2288
|
+
var templateObject_1$b, templateObject_2$a, templateObject_3$7, templateObject_4$5, templateObject_5$3, templateObject_6$2;
|
|
2248
2289
|
|
|
2249
2290
|
var Wrapper$6 = styled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (props) { return props.$margin || '0px 0px 15px 0px'; });
|
|
2250
2291
|
var LabelRow = styled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0 0 4px 0;\n box-sizing: border-box;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0 0 4px 0;\n box-sizing: border-box;\n"])));
|
|
@@ -2554,6 +2595,7 @@ exports.Button = Button;
|
|
|
2554
2595
|
exports.Checkbox = Checkbox;
|
|
2555
2596
|
exports.Checklist = Checklist;
|
|
2556
2597
|
exports.Copy = Copy;
|
|
2598
|
+
exports.Drawer = Drawer;
|
|
2557
2599
|
exports.Field = Field;
|
|
2558
2600
|
exports.Heading = Heading;
|
|
2559
2601
|
exports.Input = Input$1;
|