@hexure/ui 1.1.1 → 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 +107 -44
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/Button/Button.d.ts +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/components/Modal/Modal.d.ts +2 -2
- package/dist/cjs/types/components/Multiselect/MultiSelect.d.ts +1 -1
- package/dist/cjs/types/index.d.ts +1 -0
- package/dist/esm/index.js +107 -45
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/Button/Button.d.ts +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/components/Modal/Modal.d.ts +2 -2
- package/dist/esm/types/components/Multiselect/MultiSelect.d.ts +1 -1
- package/dist/esm/types/index.d.ts +1 -0
- package/dist/index.d.ts +40 -12
- 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,19 +2025,36 @@ 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
|
-
var
|
|
2040
|
+
var button_type_mapping = {
|
|
2041
|
+
primary: {
|
|
2042
|
+
background_color: Colors.PRIMARY.Hex,
|
|
2043
|
+
border_color: Colors.PRIMARY.Hex,
|
|
2044
|
+
content_color: '#fff',
|
|
2045
|
+
},
|
|
2046
|
+
secondary: {
|
|
2047
|
+
background_color: 'transparent',
|
|
2048
|
+
border_color: Colors.PRIMARY.Hex,
|
|
2049
|
+
content_color: Colors.PRIMARY.Hex,
|
|
2050
|
+
},
|
|
2051
|
+
red: {
|
|
2052
|
+
background_color: Colors.RED.Hex,
|
|
2053
|
+
border_color: Colors.RED.Hex,
|
|
2054
|
+
content_color: '#fff',
|
|
2055
|
+
},
|
|
2056
|
+
};
|
|
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) {
|
|
2041
2058
|
if (props.$hasChildren) {
|
|
2042
2059
|
if (props.$small) {
|
|
2043
2060
|
return '0 10px';
|
|
@@ -2047,7 +2064,9 @@ var StyledButton = styled.button(templateObject_1$i || (templateObject_1$i = __m
|
|
|
2047
2064
|
}
|
|
2048
2065
|
}
|
|
2049
2066
|
return '0px';
|
|
2050
|
-
}, function (props) {
|
|
2067
|
+
}, function (props) {
|
|
2068
|
+
return props.$type ? button_type_mapping[props.$type].background_color : Colors.PRIMARY.Hex;
|
|
2069
|
+
}, function (props) {
|
|
2051
2070
|
if (props.$hasChildren) {
|
|
2052
2071
|
return 'auto';
|
|
2053
2072
|
}
|
|
@@ -2055,34 +2074,36 @@ var StyledButton = styled.button(templateObject_1$i || (templateObject_1$i = __m
|
|
|
2055
2074
|
return '30px';
|
|
2056
2075
|
}
|
|
2057
2076
|
return '40px';
|
|
2058
|
-
}, function (props) { return (props.$disabled ? 'default' : 'pointer'); }, function (props) { return (props.$disabled ? 0.6 : 0.9); },
|
|
2059
|
-
|
|
2060
|
-
|
|
2077
|
+
}, function (props) { return (props.$disabled ? 'default' : 'pointer'); }, function (props) { return (props.$disabled ? 0.6 : 0.9); }, function (props) {
|
|
2078
|
+
return props.$type ? button_type_mapping[props.$type].border_color : Colors.PRIMARY.Hex;
|
|
2079
|
+
}, function (props) { return (props.$disabled ? 0.6 : 1); });
|
|
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'); });
|
|
2061
2082
|
var Button = function (_a) {
|
|
2062
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"]);
|
|
2063
2084
|
var has_children = children && children.length > 0;
|
|
2064
|
-
return (React.createElement(StyledButton, __assign({ "$disabled": disabled, "$hasChildren": !!has_children, "$margin": margin, "$
|
|
2085
|
+
return (React.createElement(StyledButton, __assign({ "$disabled": disabled, "$hasChildren": !!has_children, "$margin": margin, "$small": small, "$type": type, onClick: disabled ? undefined : onClick }, accessibleProps),
|
|
2065
2086
|
children ? (React.createElement(Label$3, { "$small": small, "$type": type }, children)) : null,
|
|
2066
2087
|
icon ? (React.createElement(StyledIcon, { "$hasChildren": !!has_children },
|
|
2067
|
-
React.createElement(Icon, { color: type
|
|
2088
|
+
React.createElement(Icon, { color: type ? button_type_mapping[type].content_color : '#fff', path: icon, size: small ? '20px' : '24px' }))) : null));
|
|
2068
2089
|
};
|
|
2069
|
-
var templateObject_1$
|
|
2090
|
+
var templateObject_1$j, templateObject_2$h, templateObject_3$c;
|
|
2070
2091
|
|
|
2071
|
-
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) {
|
|
2072
2093
|
return ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none';
|
|
2073
2094
|
}, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; }, function (props) { return props.$align || 'left'; });
|
|
2074
2095
|
var Copy = function (_a) {
|
|
2075
|
-
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;
|
|
2076
|
-
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));
|
|
2077
2098
|
};
|
|
2078
2099
|
Copy.defaultProps = {
|
|
2079
2100
|
type: 'default',
|
|
2080
2101
|
};
|
|
2081
|
-
var templateObject_1$
|
|
2102
|
+
var templateObject_1$i;
|
|
2082
2103
|
|
|
2083
|
-
var H1 = styled.h1(templateObject_1$
|
|
2084
|
-
var H2 = styled.h2(templateObject_2$
|
|
2085
|
-
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'; });
|
|
2086
2107
|
var Heading = function (_a) {
|
|
2087
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"]);
|
|
2088
2109
|
switch (type) {
|
|
@@ -2101,11 +2122,11 @@ Heading.defaultProps = {
|
|
|
2101
2122
|
bold: false,
|
|
2102
2123
|
type: 'primary',
|
|
2103
2124
|
};
|
|
2104
|
-
var templateObject_1$
|
|
2125
|
+
var templateObject_1$h, templateObject_2$g, templateObject_3$b;
|
|
2105
2126
|
|
|
2106
|
-
var Wrapper$9 = styled.div(templateObject_1$
|
|
2107
|
-
var Container$
|
|
2108
|
-
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"])));
|
|
2109
2130
|
var ActionDialog = function (_a) {
|
|
2110
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"]);
|
|
2111
2132
|
React.useEffect(function () {
|
|
@@ -2119,17 +2140,17 @@ var ActionDialog = function (_a) {
|
|
|
2119
2140
|
};
|
|
2120
2141
|
}, []);
|
|
2121
2142
|
return (React.createElement(Wrapper$9, __assign({}, accessibleProps),
|
|
2122
|
-
React.createElement(Container$
|
|
2143
|
+
React.createElement(Container$2, { open: true },
|
|
2123
2144
|
title ? (React.createElement(Heading, { margin: '0px 0px 20px 0px', type: 'secondary' }, title)) : null,
|
|
2124
2145
|
description ? React.createElement(Copy, { align: 'center' }, description) : null,
|
|
2125
2146
|
primaryButton || secondaryButton ? (React.createElement(Buttons, null,
|
|
2126
2147
|
secondaryButton ? (React.createElement(Button, __assign({}, secondaryButton, { margin: '0px 5px', type: 'secondary' }))) : null,
|
|
2127
2148
|
primaryButton ? React.createElement(Button, __assign({}, primaryButton, { margin: '0px 5px', type: 'primary' })) : null)) : null)));
|
|
2128
2149
|
};
|
|
2129
|
-
var templateObject_1$
|
|
2150
|
+
var templateObject_1$g, templateObject_2$f, templateObject_3$a;
|
|
2130
2151
|
|
|
2131
|
-
var Wrapper$8 = styled.div(templateObject_1$
|
|
2132
|
-
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"])));
|
|
2133
2154
|
var Alert = function (_a) {
|
|
2134
2155
|
var _b = _a.type, type = _b === void 0 ? 'info' : _b, title = _a.title, description = _a.description, accessibleProps = __rest(_a, ["type", "title", "description"]);
|
|
2135
2156
|
var type_mapping = {
|
|
@@ -2157,14 +2178,14 @@ var Alert = function (_a) {
|
|
|
2157
2178
|
title ? (React.createElement(Heading, { bold: true, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
|
|
2158
2179
|
description ? React.createElement(Copy, { margin: '10px 0 0 0' }, description) : null)));
|
|
2159
2180
|
};
|
|
2160
|
-
var templateObject_1$
|
|
2161
|
-
|
|
2162
|
-
var Wrapper$7 = styled.div(templateObject_1$
|
|
2163
|
-
var Left = styled.div(templateObject_2$
|
|
2164
|
-
var Info = styled.div(templateObject_3$
|
|
2165
|
-
var Selected = styled.span(templateObject_4$
|
|
2166
|
-
var Clear = styled.span(templateObject_5$
|
|
2167
|
-
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"])));
|
|
2168
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);
|
|
2169
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);
|
|
2170
2191
|
var BulkActionBar = function (_a) {
|
|
@@ -2181,18 +2202,18 @@ var BulkActionBar = function (_a) {
|
|
|
2181
2202
|
React.createElement(Icon, { color: Colors.RED.Hex, path: js.mdiInformationOutline, size: '20px' }),
|
|
2182
2203
|
React.createElement(ErrorMsg, null, errorMsg))) : null));
|
|
2183
2204
|
};
|
|
2184
|
-
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;
|
|
2185
2206
|
|
|
2186
2207
|
var Checkbox = function (_a) {
|
|
2187
2208
|
var children = _a.children, disabled = _a.disabled, checked = _a.checked, onChange = _a.onChange, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange"]);
|
|
2188
|
-
var Wrapper = styled.label(templateObject_1$
|
|
2189
|
-
var Input = styled.input(templateObject_2$
|
|
2190
|
-
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);
|
|
2191
2212
|
return (React.createElement(Wrapper, __assign({}, accessibleProps, { onClick: disabled ? undefined : onChange }),
|
|
2192
2213
|
React.createElement(Input, { checked: checked, disabled: disabled, name: accessibleProps.name, type: 'checkbox' }),
|
|
2193
2214
|
children ? React.createElement(Label, null, children) : null));
|
|
2194
2215
|
};
|
|
2195
|
-
var templateObject_1$
|
|
2216
|
+
var templateObject_1$d, templateObject_2$c, templateObject_3$8;
|
|
2196
2217
|
|
|
2197
2218
|
var Checklist = function (_a) {
|
|
2198
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"]);
|
|
@@ -2212,8 +2233,8 @@ var Checklist = function (_a) {
|
|
|
2212
2233
|
}
|
|
2213
2234
|
onChange(updated_selected);
|
|
2214
2235
|
};
|
|
2215
|
-
var SelectAll = styled.div(templateObject_1$
|
|
2216
|
-
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 "])));
|
|
2217
2238
|
return (React.createElement(React.Fragment, null,
|
|
2218
2239
|
showSelectAll && values.length ? (React.createElement(SelectAll, null,
|
|
2219
2240
|
React.createElement(Checkbox, { checked: selected.length === values.length, disabled: disabled, onChange: handleToggleAll }, "Select All"))) : null,
|
|
@@ -2223,7 +2244,48 @@ var Checklist = function (_a) {
|
|
|
2223
2244
|
return (React.createElement(Checkbox, __assign({}, accessibleProps, { checked: checked, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
|
|
2224
2245
|
}))));
|
|
2225
2246
|
};
|
|
2226
|
-
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;
|
|
2227
2289
|
|
|
2228
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'; });
|
|
2229
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"])));
|
|
@@ -2324,7 +2386,7 @@ var Container = styled.dialog(templateObject_2$7 || (templateObject_2$7 = __make
|
|
|
2324
2386
|
var Header$1 = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n position: sticky;\n top: 0;\n padding: 20px;\n border-bottom: 1px solid #e5e5e5;\n display: flex;\n align-items: center;\n background: #ffffff;\n box-sizing: border-box;\n"], ["\n position: sticky;\n top: 0;\n padding: 20px;\n border-bottom: 1px solid #e5e5e5;\n display: flex;\n align-items: center;\n background: #ffffff;\n box-sizing: border-box;\n"])));
|
|
2325
2387
|
var Close = styled.div(templateObject_4$3 || (templateObject_4$3 = __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"])));
|
|
2326
2388
|
var CloseMsg = styled.span(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 1em;\n color: ", ";\n"], ["\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 1em;\n color: ", ";\n"])), FontSizes.SMALL, FontStyles.DEFAULT, Colors.MEDIUM_GRAY.Hex);
|
|
2327
|
-
var ContentWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n overflow: auto;\n background: #ffffff;\n max-height: calc(100vh - 260px);\n box-sizing: border-box;\n"], ["\n overflow: auto;\n background: #ffffff;\n max-height: calc(100vh - 260px);\n box-sizing: border-box;\n"])));
|
|
2389
|
+
var ContentWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n overflow-x: hidden;\n overflow-y: auto;\n background: #ffffff;\n max-height: calc(100vh - 260px);\n box-sizing: border-box;\n"], ["\n overflow-x: hidden;\n overflow-y: auto;\n background: #ffffff;\n max-height: calc(100vh - 260px);\n box-sizing: border-box;\n"])));
|
|
2328
2390
|
var ButtonBar = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: sticky;\n bottom: 0;\n background: #ffffff;\n padding: 20px;\n border-top: 1px solid #e5e5e5;\n display: flex;\n align-items: center;\n justify-self: flex-end;\n box-sizing: border-box;\n"], ["\n position: sticky;\n bottom: 0;\n background: #ffffff;\n padding: 20px;\n border-top: 1px solid #e5e5e5;\n display: flex;\n align-items: center;\n justify-self: flex-end;\n box-sizing: border-box;\n"])));
|
|
2329
2391
|
var Modal = function (_a) {
|
|
2330
2392
|
var children = _a.children, title = _a.title, onClose = _a.onClose, maxWidth = _a.maxWidth, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, tertiaryButton = _a.tertiaryButton, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "primaryButton", "secondaryButton", "tertiaryButton"]);
|
|
@@ -2533,6 +2595,7 @@ exports.Button = Button;
|
|
|
2533
2595
|
exports.Checkbox = Checkbox;
|
|
2534
2596
|
exports.Checklist = Checklist;
|
|
2535
2597
|
exports.Copy = Copy;
|
|
2598
|
+
exports.Drawer = Drawer;
|
|
2536
2599
|
exports.Field = Field;
|
|
2537
2600
|
exports.Heading = Heading;
|
|
2538
2601
|
exports.Input = Input$1;
|