@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
|
@@ -10,6 +10,8 @@ export interface CopyProps extends AccessibleProps {
|
|
|
10
10
|
padding?: string;
|
|
11
11
|
/** Set the type of copy to display */
|
|
12
12
|
type?: 'default' | 'bold' | 'italic' | 'underline' | 'line-through' | 'small';
|
|
13
|
+
/** Set the color of the copy based on the design system color pallette */
|
|
14
|
+
color?: 'PRIMARY' | 'GREEN' | 'RED' | 'YELLOW' | 'BLACK' | 'GRAY' | 'MEDIUM_GRAY' | 'LIGHT_GRAY';
|
|
13
15
|
}
|
|
14
16
|
declare const Copy: FC<CopyProps>;
|
|
15
17
|
export default Copy;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
|
+
import { AccessibleProps } from '../../utils/Accessibility';
|
|
3
|
+
interface ButtonProps extends AccessibleProps {
|
|
4
|
+
disabled: boolean;
|
|
5
|
+
children: string;
|
|
6
|
+
icon?: string;
|
|
7
|
+
onClick: (e?: any) => void;
|
|
8
|
+
tabIndex?: number;
|
|
9
|
+
}
|
|
10
|
+
export interface DrawerProps extends AccessibleProps {
|
|
11
|
+
primaryButton: ButtonProps;
|
|
12
|
+
secondaryButton?: ButtonProps;
|
|
13
|
+
tertiaryButton?: ButtonProps;
|
|
14
|
+
/** It is used to pass child nodes, string values and number as child components. */
|
|
15
|
+
children: ReactNode;
|
|
16
|
+
/** It is used to give title. */
|
|
17
|
+
title: string;
|
|
18
|
+
/** Define an optional description that's displayed under the title */
|
|
19
|
+
description?: string;
|
|
20
|
+
/** Set a width wider than 400px */
|
|
21
|
+
width?: string | number;
|
|
22
|
+
/** Display an scrim over the main content, forcing users to interact with the drawer */
|
|
23
|
+
scrim?: 'transparent' | 'dark';
|
|
24
|
+
/** It is used to close drawer. */
|
|
25
|
+
onClose: (e?: any) => void;
|
|
26
|
+
}
|
|
27
|
+
declare const Drawer: FC<DrawerProps>;
|
|
28
|
+
export default Drawer;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
|
3
|
+
declare const _default: ComponentMeta<React.FC<import("./Drawer").DrawerProps>>;
|
|
4
|
+
export default _default;
|
|
5
|
+
export declare const _Drawer: ComponentStory<React.FC<import("./Drawer").DrawerProps>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './Drawer';
|
|
@@ -6,6 +6,7 @@ export { default as Button } from './components/Button';
|
|
|
6
6
|
export { default as Checkbox } from './components/Checkbox';
|
|
7
7
|
export { default as Checklist } from './components/Checklist';
|
|
8
8
|
export { default as Copy } from './components/Copy';
|
|
9
|
+
export { default as Drawer } from './components/Drawer';
|
|
9
10
|
export { default as Field } from './components/Field';
|
|
10
11
|
export { default as Heading } from './components/Heading';
|
|
11
12
|
export { default as Input } from './components/Input';
|
package/dist/esm/index.js
CHANGED
|
@@ -2023,17 +2023,17 @@ var FontSizes = {
|
|
|
2023
2023
|
SMALL: '13px',
|
|
2024
2024
|
};
|
|
2025
2025
|
|
|
2026
|
-
var Header$
|
|
2027
|
-
var Title = styled.div(templateObject_2$
|
|
2026
|
+
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"])));
|
|
2027
|
+
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);
|
|
2028
2028
|
var Accordion = function (_a) {
|
|
2029
2029
|
var title = _a.title, children = _a.children, open = _a.open, onClick = _a.onClick, accessibleProps = __rest(_a, ["title", "children", "open", "onClick"]);
|
|
2030
2030
|
return (React.createElement(React.Fragment, null,
|
|
2031
|
-
React.createElement(Header$
|
|
2031
|
+
React.createElement(Header$3, __assign({ onClick: onClick }, accessibleProps),
|
|
2032
2032
|
React.createElement(Title, null, title),
|
|
2033
2033
|
React.createElement(Icon, { color: Colors.BLACK.Hex, path: open ? mdiChevronUp : mdiChevronDown, size: '24px' })),
|
|
2034
2034
|
open ? children : null));
|
|
2035
2035
|
};
|
|
2036
|
-
var templateObject_1$
|
|
2036
|
+
var templateObject_1$k, templateObject_2$i;
|
|
2037
2037
|
|
|
2038
2038
|
var button_type_mapping = {
|
|
2039
2039
|
primary: {
|
|
@@ -2052,7 +2052,7 @@ var button_type_mapping = {
|
|
|
2052
2052
|
content_color: '#fff',
|
|
2053
2053
|
},
|
|
2054
2054
|
};
|
|
2055
|
-
var StyledButton = styled.button(templateObject_1$
|
|
2055
|
+
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) {
|
|
2056
2056
|
if (props.$hasChildren) {
|
|
2057
2057
|
if (props.$small) {
|
|
2058
2058
|
return '0 10px';
|
|
@@ -2075,8 +2075,8 @@ var StyledButton = styled.button(templateObject_1$i || (templateObject_1$i = __m
|
|
|
2075
2075
|
}, function (props) { return (props.$disabled ? 'default' : 'pointer'); }, function (props) { return (props.$disabled ? 0.6 : 0.9); }, function (props) {
|
|
2076
2076
|
return props.$type ? button_type_mapping[props.$type].border_color : Colors.PRIMARY.Hex;
|
|
2077
2077
|
}, function (props) { return (props.$disabled ? 0.6 : 1); });
|
|
2078
|
-
var Label$3 = styled.span(templateObject_2$
|
|
2079
|
-
var StyledIcon = styled.span(templateObject_3$
|
|
2078
|
+
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'); });
|
|
2079
|
+
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'); });
|
|
2080
2080
|
var Button = function (_a) {
|
|
2081
2081
|
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"]);
|
|
2082
2082
|
var has_children = children && children.length > 0;
|
|
@@ -2085,23 +2085,23 @@ var Button = function (_a) {
|
|
|
2085
2085
|
icon ? (React.createElement(StyledIcon, { "$hasChildren": !!has_children },
|
|
2086
2086
|
React.createElement(Icon, { color: type ? button_type_mapping[type].content_color : '#fff', path: icon, size: small ? '20px' : '24px' }))) : null));
|
|
2087
2087
|
};
|
|
2088
|
-
var templateObject_1$
|
|
2088
|
+
var templateObject_1$j, templateObject_2$h, templateObject_3$c;
|
|
2089
2089
|
|
|
2090
|
-
var StyledComponent = styled.p(templateObject_1$
|
|
2090
|
+
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) {
|
|
2091
2091
|
return ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none';
|
|
2092
2092
|
}, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; }, function (props) { return props.$align || 'left'; });
|
|
2093
2093
|
var Copy = function (_a) {
|
|
2094
|
-
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;
|
|
2095
|
-
return (React.createElement(StyledComponent, { "$align": align, "$margin": margin, "$padding": padding, "$type": type }, children));
|
|
2094
|
+
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;
|
|
2095
|
+
return (React.createElement(StyledComponent, { "$align": align, "$color": color, "$margin": margin, "$padding": padding, "$type": type }, children));
|
|
2096
2096
|
};
|
|
2097
2097
|
Copy.defaultProps = {
|
|
2098
2098
|
type: 'default',
|
|
2099
2099
|
};
|
|
2100
|
-
var templateObject_1$
|
|
2100
|
+
var templateObject_1$i;
|
|
2101
2101
|
|
|
2102
|
-
var H1 = styled.h1(templateObject_1$
|
|
2103
|
-
var H2 = styled.h2(templateObject_2$
|
|
2104
|
-
var H3 = styled.h3(templateObject_3$
|
|
2102
|
+
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'; });
|
|
2103
|
+
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'; });
|
|
2104
|
+
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'; });
|
|
2105
2105
|
var Heading = function (_a) {
|
|
2106
2106
|
var bold = _a.bold, children = _a.children, margin = _a.margin, padding = _a.padding, type = _a.type, accessibleProps = __rest(_a, ["bold", "children", "margin", "padding", "type"]);
|
|
2107
2107
|
switch (type) {
|
|
@@ -2120,11 +2120,11 @@ Heading.defaultProps = {
|
|
|
2120
2120
|
bold: false,
|
|
2121
2121
|
type: 'primary',
|
|
2122
2122
|
};
|
|
2123
|
-
var templateObject_1$
|
|
2123
|
+
var templateObject_1$h, templateObject_2$g, templateObject_3$b;
|
|
2124
2124
|
|
|
2125
|
-
var Wrapper$9 = styled.div(templateObject_1$
|
|
2126
|
-
var Container$
|
|
2127
|
-
var Buttons = styled.div(templateObject_3$
|
|
2125
|
+
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"])));
|
|
2126
|
+
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"])));
|
|
2127
|
+
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"])));
|
|
2128
2128
|
var ActionDialog = function (_a) {
|
|
2129
2129
|
var description = _a.description, title = _a.title, onClose = _a.onClose, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, accessibleProps = __rest(_a, ["description", "title", "onClose", "primaryButton", "secondaryButton"]);
|
|
2130
2130
|
useEffect(function () {
|
|
@@ -2138,17 +2138,17 @@ var ActionDialog = function (_a) {
|
|
|
2138
2138
|
};
|
|
2139
2139
|
}, []);
|
|
2140
2140
|
return (React.createElement(Wrapper$9, __assign({}, accessibleProps),
|
|
2141
|
-
React.createElement(Container$
|
|
2141
|
+
React.createElement(Container$2, { open: true },
|
|
2142
2142
|
title ? (React.createElement(Heading, { margin: '0px 0px 20px 0px', type: 'secondary' }, title)) : null,
|
|
2143
2143
|
description ? React.createElement(Copy, { align: 'center' }, description) : null,
|
|
2144
2144
|
primaryButton || secondaryButton ? (React.createElement(Buttons, null,
|
|
2145
2145
|
secondaryButton ? (React.createElement(Button, __assign({}, secondaryButton, { margin: '0px 5px', type: 'secondary' }))) : null,
|
|
2146
2146
|
primaryButton ? React.createElement(Button, __assign({}, primaryButton, { margin: '0px 5px', type: 'primary' })) : null)) : null)));
|
|
2147
2147
|
};
|
|
2148
|
-
var templateObject_1$
|
|
2148
|
+
var templateObject_1$g, templateObject_2$f, templateObject_3$a;
|
|
2149
2149
|
|
|
2150
|
-
var Wrapper$8 = styled.div(templateObject_1$
|
|
2151
|
-
var Content$1 = styled.div(templateObject_2$
|
|
2150
|
+
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"])));
|
|
2151
|
+
var Content$1 = styled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n margin-left: 20px;\n"], ["\n margin-left: 20px;\n"])));
|
|
2152
2152
|
var Alert = function (_a) {
|
|
2153
2153
|
var _b = _a.type, type = _b === void 0 ? 'info' : _b, title = _a.title, description = _a.description, accessibleProps = __rest(_a, ["type", "title", "description"]);
|
|
2154
2154
|
var type_mapping = {
|
|
@@ -2176,14 +2176,14 @@ var Alert = function (_a) {
|
|
|
2176
2176
|
title ? (React.createElement(Heading, { bold: true, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
|
|
2177
2177
|
description ? React.createElement(Copy, { margin: '10px 0 0 0' }, description) : null)));
|
|
2178
2178
|
};
|
|
2179
|
-
var templateObject_1$
|
|
2180
|
-
|
|
2181
|
-
var Wrapper$7 = styled.div(templateObject_1$
|
|
2182
|
-
var Left = styled.div(templateObject_2$
|
|
2183
|
-
var Info = styled.div(templateObject_3$
|
|
2184
|
-
var Selected = styled.span(templateObject_4$
|
|
2185
|
-
var Clear = styled.span(templateObject_5$
|
|
2186
|
-
var Actions = styled.div(templateObject_6$
|
|
2179
|
+
var templateObject_1$f, templateObject_2$e;
|
|
2180
|
+
|
|
2181
|
+
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);
|
|
2182
|
+
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"])));
|
|
2183
|
+
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"])));
|
|
2184
|
+
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);
|
|
2185
|
+
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);
|
|
2186
|
+
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"])));
|
|
2187
2187
|
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);
|
|
2188
2188
|
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);
|
|
2189
2189
|
var BulkActionBar = function (_a) {
|
|
@@ -2200,18 +2200,18 @@ var BulkActionBar = function (_a) {
|
|
|
2200
2200
|
React.createElement(Icon, { color: Colors.RED.Hex, path: mdiInformationOutline, size: '20px' }),
|
|
2201
2201
|
React.createElement(ErrorMsg, null, errorMsg))) : null));
|
|
2202
2202
|
};
|
|
2203
|
-
var templateObject_1$
|
|
2203
|
+
var templateObject_1$e, templateObject_2$d, templateObject_3$9, templateObject_4$6, templateObject_5$4, templateObject_6$3, templateObject_7$2, templateObject_8;
|
|
2204
2204
|
|
|
2205
2205
|
var Checkbox = function (_a) {
|
|
2206
2206
|
var children = _a.children, disabled = _a.disabled, checked = _a.checked, onChange = _a.onChange, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange"]);
|
|
2207
|
-
var Wrapper = styled.label(templateObject_1$
|
|
2208
|
-
var Input = styled.input(templateObject_2$
|
|
2209
|
-
var Label = styled.span(templateObject_3$
|
|
2207
|
+
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);
|
|
2208
|
+
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 "])));
|
|
2209
|
+
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);
|
|
2210
2210
|
return (React.createElement(Wrapper, __assign({}, accessibleProps, { onClick: disabled ? undefined : onChange }),
|
|
2211
2211
|
React.createElement(Input, { checked: checked, disabled: disabled, name: accessibleProps.name, type: 'checkbox' }),
|
|
2212
2212
|
children ? React.createElement(Label, null, children) : null));
|
|
2213
2213
|
};
|
|
2214
|
-
var templateObject_1$
|
|
2214
|
+
var templateObject_1$d, templateObject_2$c, templateObject_3$8;
|
|
2215
2215
|
|
|
2216
2216
|
var Checklist = function (_a) {
|
|
2217
2217
|
var disabled = _a.disabled, onChange = _a.onChange, options = _a.options, selected = _a.selected, showSelectAll = _a.showSelectAll, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll"]);
|
|
@@ -2231,8 +2231,8 @@ var Checklist = function (_a) {
|
|
|
2231
2231
|
}
|
|
2232
2232
|
onChange(updated_selected);
|
|
2233
2233
|
};
|
|
2234
|
-
var SelectAll = styled.div(templateObject_1$
|
|
2235
|
-
var Options = styled.div(templateObject_2$
|
|
2234
|
+
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);
|
|
2235
|
+
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 "])));
|
|
2236
2236
|
return (React.createElement(React.Fragment, null,
|
|
2237
2237
|
showSelectAll && values.length ? (React.createElement(SelectAll, null,
|
|
2238
2238
|
React.createElement(Checkbox, { checked: selected.length === values.length, disabled: disabled, onChange: handleToggleAll }, "Select All"))) : null,
|
|
@@ -2242,7 +2242,48 @@ var Checklist = function (_a) {
|
|
|
2242
2242
|
return (React.createElement(Checkbox, __assign({}, accessibleProps, { checked: checked, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
|
|
2243
2243
|
}))));
|
|
2244
2244
|
};
|
|
2245
|
-
var templateObject_1$
|
|
2245
|
+
var templateObject_1$c, templateObject_2$b;
|
|
2246
|
+
|
|
2247
|
+
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) {
|
|
2248
|
+
var $scrim = _a.$scrim;
|
|
2249
|
+
return ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent');
|
|
2250
|
+
});
|
|
2251
|
+
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) {
|
|
2252
|
+
var $width = _a.$width;
|
|
2253
|
+
return $width || '400px';
|
|
2254
|
+
});
|
|
2255
|
+
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"])));
|
|
2256
|
+
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"])));
|
|
2257
|
+
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"])));
|
|
2258
|
+
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"])));
|
|
2259
|
+
var Drawer = function (_a) {
|
|
2260
|
+
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"]);
|
|
2261
|
+
useEffect(function () {
|
|
2262
|
+
document.onkeydown = function (e) {
|
|
2263
|
+
if (e.key === 'Escape') {
|
|
2264
|
+
onClose();
|
|
2265
|
+
}
|
|
2266
|
+
};
|
|
2267
|
+
return function cleanup() {
|
|
2268
|
+
document.onkeydown = null;
|
|
2269
|
+
};
|
|
2270
|
+
}, []);
|
|
2271
|
+
return (React.createElement(React.Fragment, null,
|
|
2272
|
+
React.createElement(Container$1, __assign({}, accessibleProps, { "$width": width }),
|
|
2273
|
+
React.createElement(Header$2, null,
|
|
2274
|
+
React.createElement("div", null,
|
|
2275
|
+
title ? React.createElement(Heading, { type: 'secondary' }, title) : null,
|
|
2276
|
+
description ? React.createElement(Copy, { color: 'GRAY' }, description) : null),
|
|
2277
|
+
React.createElement(Close$1, { onClick: onClose },
|
|
2278
|
+
React.createElement(Button, { icon: mdiClose, small: true, type: 'secondary' }))),
|
|
2279
|
+
React.createElement(ContentWrapper$1, null, children),
|
|
2280
|
+
primaryButton || secondaryButton || tertiaryButton ? (React.createElement(ButtonBar$1, null,
|
|
2281
|
+
tertiaryButton ? React.createElement(Button, __assign({}, tertiaryButton, { type: 'secondary' })) : null,
|
|
2282
|
+
secondaryButton ? React.createElement(Button, __assign({}, secondaryButton, { type: 'secondary' })) : null,
|
|
2283
|
+
primaryButton ? React.createElement(Button, __assign({}, primaryButton, { type: 'primary' })) : null)) : null),
|
|
2284
|
+
scrim ? React.createElement(Scrim$1, { "$scrim": scrim, onClick: onClose }) : null));
|
|
2285
|
+
};
|
|
2286
|
+
var templateObject_1$b, templateObject_2$a, templateObject_3$7, templateObject_4$5, templateObject_5$3, templateObject_6$2;
|
|
2246
2287
|
|
|
2247
2288
|
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'; });
|
|
2248
2289
|
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"])));
|
|
@@ -2544,5 +2585,5 @@ var Toggle = function (_a) {
|
|
|
2544
2585
|
Toggle.defaultProps = {};
|
|
2545
2586
|
var templateObject_1, templateObject_2;
|
|
2546
2587
|
|
|
2547
|
-
export { Accordion, ActionDialog, Alert, BulkActionBar, Button, Checkbox, Checklist, Copy, Field, Heading, Input$1 as Input, Modal, MultiSelect, Pagination, Radio, RadioList, Select, Table, Tabs, Tag, Toggle };
|
|
2588
|
+
export { Accordion, ActionDialog, Alert, BulkActionBar, Button, Checkbox, Checklist, Copy, Drawer, Field, Heading, Input$1 as Input, Modal, MultiSelect, Pagination, Radio, RadioList, Select, Table, Tabs, Tag, Toggle };
|
|
2548
2589
|
//# sourceMappingURL=index.js.map
|