@decisiv/ui-components 2.0.1-alpha.157 → 2.0.1-alpha.158
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/lib/components/Drawer/index.d.ts +22 -0
- package/lib/components/Drawer/index.d.ts.map +1 -0
- package/lib/components/Drawer/index.js +105 -0
- package/lib/components/Drawer/index.test.js +122 -0
- package/lib/components/Drawer/schema.d.ts +3 -0
- package/lib/components/Drawer/schema.d.ts.map +1 -0
- package/lib/components/Drawer/schema.js +32 -0
- package/lib/components/Drawer/styles.d.ts +11 -0
- package/lib/components/Drawer/styles.d.ts.map +1 -0
- package/lib/components/Drawer/styles.js +79 -0
- package/lib/components/index.d.ts +1 -0
- package/lib/components/index.d.ts.map +1 -1
- package/lib/components/index.js +9 -0
- package/lib/providers/ConfigProvider/utils/translations.d.ts +4 -0
- package/lib/providers/ConfigProvider/utils/translations.d.ts.map +1 -1
- package/lib/providers/ConfigProvider/utils/translations.js +4 -0
- package/package.json +2 -2
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ButtonProps } from '../Button';
|
|
3
|
+
interface HeaderProps {
|
|
4
|
+
title?: string;
|
|
5
|
+
description?: string;
|
|
6
|
+
}
|
|
7
|
+
interface Action extends ButtonProps {
|
|
8
|
+
id: string;
|
|
9
|
+
}
|
|
10
|
+
interface FooterProps {
|
|
11
|
+
actions?: Action[];
|
|
12
|
+
}
|
|
13
|
+
export interface DrawerProps extends HeaderProps, FooterProps {
|
|
14
|
+
side?: 'left' | 'right';
|
|
15
|
+
zIndex?: number;
|
|
16
|
+
visible?: boolean;
|
|
17
|
+
onClose?: (event: React.MouseEvent<unknown> | KeyboardEvent) => void;
|
|
18
|
+
}
|
|
19
|
+
export declare type OverlayProps = Pick<DrawerProps, 'zIndex' | 'side' | 'visible'>;
|
|
20
|
+
declare const Drawer: React.FC<DrawerProps>;
|
|
21
|
+
export default Drawer;
|
|
22
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiC,MAAM,OAAO,CAAC;AAItD,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAkBhD,UAAU,WAAW;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,MAAO,SAAQ,WAAW;IAClC,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,UAAU,WAAW;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,MAAM,WAAW,WAAY,SAAQ,WAAW,EAAE,WAAW;IAC3D,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,aAAa,KAAK,IAAI,CAAC;CACtE;AAED,oBAAY,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAE5E,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAiGjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
10
|
+
var _Times = _interopRequireDefault(require("@decisiv/iconix/lib/components/Times"));
|
|
11
|
+
|
|
12
|
+
var _Flex = _interopRequireDefault(require("../Flex"));
|
|
13
|
+
|
|
14
|
+
var _Button = _interopRequireDefault(require("../Button"));
|
|
15
|
+
|
|
16
|
+
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
|
|
17
|
+
|
|
18
|
+
var _Typography = require("../Typography");
|
|
19
|
+
|
|
20
|
+
var _ConfigProvider = require("../../providers/ConfigProvider");
|
|
21
|
+
|
|
22
|
+
var _canUseDOM = _interopRequireDefault(require("../../utils/canUseDOM"));
|
|
23
|
+
|
|
24
|
+
var _styles = require("./styles");
|
|
25
|
+
|
|
26
|
+
var _useTranslations = _interopRequireDefault(require("../../utils/useTranslations"));
|
|
27
|
+
|
|
28
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
29
|
+
|
|
30
|
+
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
|
|
31
|
+
|
|
32
|
+
var Drawer = function Drawer(_ref) {
|
|
33
|
+
var title = _ref.title,
|
|
34
|
+
description = _ref.description,
|
|
35
|
+
children = _ref.children,
|
|
36
|
+
onClose = _ref.onClose,
|
|
37
|
+
_ref$zIndex = _ref.zIndex,
|
|
38
|
+
zIndex = _ref$zIndex === void 0 ? 100 : _ref$zIndex,
|
|
39
|
+
_ref$side = _ref.side,
|
|
40
|
+
side = _ref$side === void 0 ? 'right' : _ref$side,
|
|
41
|
+
_ref$actions = _ref.actions,
|
|
42
|
+
actions = _ref$actions === void 0 ? null : _ref$actions,
|
|
43
|
+
_ref$visible = _ref.visible,
|
|
44
|
+
visible = _ref$visible === void 0 ? false : _ref$visible;
|
|
45
|
+
|
|
46
|
+
var _useConfig = (0, _ConfigProvider.useConfig)(),
|
|
47
|
+
createPortal = _useConfig.createPortal;
|
|
48
|
+
|
|
49
|
+
var translate = (0, _useTranslations.default)();
|
|
50
|
+
var onKeyDown = (0, _react.useCallback)(function (event) {
|
|
51
|
+
if (event.key === 'Escape') {
|
|
52
|
+
onClose && onClose(event);
|
|
53
|
+
}
|
|
54
|
+
}, [onClose]); // Allow closing the modal by pressing the Escape key
|
|
55
|
+
|
|
56
|
+
(0, _react.useEffect)(function () {
|
|
57
|
+
if (visible && _canUseDOM.default) {
|
|
58
|
+
document.addEventListener('keydown', onKeyDown);
|
|
59
|
+
return function () {
|
|
60
|
+
document.removeEventListener('keydown', onKeyDown);
|
|
61
|
+
};
|
|
62
|
+
} // eslint has issues with no return statement here...
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
return undefined;
|
|
66
|
+
}, [visible, onKeyDown]);
|
|
67
|
+
var showHeader = !!onClose || !!title;
|
|
68
|
+
var showFooter = actions && actions.length > 0;
|
|
69
|
+
var closeBtnTooltip = translate('Close', 'drawer.closeBtnTooltip');
|
|
70
|
+
var closeDrawerLabel = translate('Close Drawer', 'drawer.closeBtn');
|
|
71
|
+
return createPortal(_react.default.createElement(_styles.Overlay, {
|
|
72
|
+
zIndex: zIndex,
|
|
73
|
+
side: side,
|
|
74
|
+
visible: visible,
|
|
75
|
+
"data-testid": "overlay"
|
|
76
|
+
}, _react.default.createElement(_styles.Content, {
|
|
77
|
+
visible: visible,
|
|
78
|
+
side: side,
|
|
79
|
+
"data-testid": "content"
|
|
80
|
+
}, showHeader && _react.default.createElement(_styles.Header, {
|
|
81
|
+
"data-testid": "drawer-header"
|
|
82
|
+
}, _react.default.createElement(_Flex.default, null, title && _react.default.createElement(_styles.Title, null, title), onClose && _react.default.createElement(_Tooltip.default, {
|
|
83
|
+
zIndex: 101,
|
|
84
|
+
target: // eslint-disable-next-line react/jsx-wrap-multilines
|
|
85
|
+
_react.default.createElement(_styles.CloseButton, {
|
|
86
|
+
variant: "ghost",
|
|
87
|
+
icon: _Times.default,
|
|
88
|
+
onClick: onClose,
|
|
89
|
+
"aria-label": closeDrawerLabel
|
|
90
|
+
})
|
|
91
|
+
}, closeBtnTooltip)), description && _react.default.createElement(_Typography.P, {
|
|
92
|
+
shade: 1,
|
|
93
|
+
paddingTop: 1
|
|
94
|
+
}, description)), _react.default.createElement(_styles.Body, null, children), showFooter && _react.default.createElement(_styles.Footer, {
|
|
95
|
+
"data-testid": "drawer-footer"
|
|
96
|
+
}, actions && actions.map(function (action, i) {
|
|
97
|
+
return _react.default.createElement(_Flex.default, {
|
|
98
|
+
key: action.id,
|
|
99
|
+
marginLeft: i > 0 ? 0.5 : 0
|
|
100
|
+
}, _react.default.createElement(_Button.default, action));
|
|
101
|
+
})))));
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
var _default = Drawer;
|
|
105
|
+
exports.default = _default;
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _react = _interopRequireDefault(require("react"));
|
|
4
|
+
|
|
5
|
+
require("jest-styled-components");
|
|
6
|
+
|
|
7
|
+
var _react2 = require("@testing-library/react");
|
|
8
|
+
|
|
9
|
+
var _ConfigProvider = require("../../providers/ConfigProvider");
|
|
10
|
+
|
|
11
|
+
var _ = _interopRequireDefault(require("."));
|
|
12
|
+
|
|
13
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
|
+
|
|
15
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
|
|
16
|
+
|
|
17
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
18
|
+
|
|
19
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
20
|
+
|
|
21
|
+
var render = function render(ui, options) {
|
|
22
|
+
return (0, _react2.render)(ui, _objectSpread({}, options, {
|
|
23
|
+
wrapper: function wrapper(_ref) {
|
|
24
|
+
var children = _ref.children;
|
|
25
|
+
return _react.default.createElement(_ConfigProvider.ConfigProvider, null, children);
|
|
26
|
+
}
|
|
27
|
+
}));
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
describe('Drawer', function () {
|
|
31
|
+
describe('visible', function () {
|
|
32
|
+
describe('when "visible" is false', function () {
|
|
33
|
+
it('renders with the property "display: none"', function () {
|
|
34
|
+
var _render = render(_react.default.createElement(_.default, {
|
|
35
|
+
visible: false
|
|
36
|
+
})),
|
|
37
|
+
getByTestId = _render.getByTestId;
|
|
38
|
+
|
|
39
|
+
expect(getByTestId(/overlay/i)).toHaveStyleRule('display', 'none');
|
|
40
|
+
});
|
|
41
|
+
});
|
|
42
|
+
});
|
|
43
|
+
describe('title', function () {
|
|
44
|
+
it('renders the text passed as "title" in an h3 tag', function () {
|
|
45
|
+
var title = 'This is the title';
|
|
46
|
+
|
|
47
|
+
var _render2 = render(_react.default.createElement(_.default, {
|
|
48
|
+
visible: true,
|
|
49
|
+
title: title
|
|
50
|
+
})),
|
|
51
|
+
getByText = _render2.getByText;
|
|
52
|
+
|
|
53
|
+
expect(getByText(title, {
|
|
54
|
+
selector: 'h3'
|
|
55
|
+
})).toBeInTheDocument();
|
|
56
|
+
});
|
|
57
|
+
});
|
|
58
|
+
describe('onClose', function () {
|
|
59
|
+
var onClose = jest.fn();
|
|
60
|
+
it('renders a close button if "onClose" is passed', function () {
|
|
61
|
+
var _render3 = render(_react.default.createElement(_.default, {
|
|
62
|
+
visible: true,
|
|
63
|
+
onClose: onClose
|
|
64
|
+
})),
|
|
65
|
+
getByLabelText = _render3.getByLabelText;
|
|
66
|
+
|
|
67
|
+
var closeBtn = getByLabelText(/close drawer/i);
|
|
68
|
+
expect(closeBtn).toBeInTheDocument();
|
|
69
|
+
});
|
|
70
|
+
it('does not render a close button if "onClose" is not passed', function () {
|
|
71
|
+
var _render4 = render(_react.default.createElement(_.default, {
|
|
72
|
+
visible: true
|
|
73
|
+
})),
|
|
74
|
+
queryByLabelText = _render4.queryByLabelText;
|
|
75
|
+
|
|
76
|
+
var closeBtn = queryByLabelText(/close drawer/i);
|
|
77
|
+
expect(closeBtn).not.toBeInTheDocument();
|
|
78
|
+
});
|
|
79
|
+
it('calls the "onClose" function when clicking the close button', function () {
|
|
80
|
+
var _render5 = render(_react.default.createElement(_.default, {
|
|
81
|
+
visible: true,
|
|
82
|
+
onClose: onClose
|
|
83
|
+
})),
|
|
84
|
+
getByLabelText = _render5.getByLabelText;
|
|
85
|
+
|
|
86
|
+
var closeBtn = getByLabelText(/close drawer/i);
|
|
87
|
+
|
|
88
|
+
_react2.fireEvent.click(closeBtn);
|
|
89
|
+
|
|
90
|
+
expect(onClose).toHaveBeenCalled();
|
|
91
|
+
});
|
|
92
|
+
});
|
|
93
|
+
describe('actions', function () {
|
|
94
|
+
describe('when an array of actions is provided', function () {
|
|
95
|
+
var onSubmit = jest.fn();
|
|
96
|
+
var onCancel = jest.fn();
|
|
97
|
+
var actions = [{
|
|
98
|
+
id: '1',
|
|
99
|
+
text: 'Submit',
|
|
100
|
+
onClick: onSubmit
|
|
101
|
+
}, {
|
|
102
|
+
id: '2',
|
|
103
|
+
text: 'Cancel',
|
|
104
|
+
onClick: onCancel
|
|
105
|
+
}];
|
|
106
|
+
it('renders the array as buttons in the footer of the Drawer', function () {
|
|
107
|
+
var _render6 = render(_react.default.createElement(_.default, {
|
|
108
|
+
visible: true,
|
|
109
|
+
actions: actions
|
|
110
|
+
})),
|
|
111
|
+
getByText = _render6.getByText;
|
|
112
|
+
|
|
113
|
+
expect(getByText(/submit/i, {
|
|
114
|
+
selector: 'button'
|
|
115
|
+
})).toBeInTheDocument();
|
|
116
|
+
expect(getByText(/cancel/i, {
|
|
117
|
+
selector: 'button'
|
|
118
|
+
})).toBeInTheDocument();
|
|
119
|
+
});
|
|
120
|
+
});
|
|
121
|
+
});
|
|
122
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/schema.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,MAAM,KAAsC,CAAC;AAqBnD,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _reactDesc = require("react-desc");
|
|
9
|
+
|
|
10
|
+
var _schema = require("../Button/schema");
|
|
11
|
+
|
|
12
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
|
|
13
|
+
|
|
14
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
15
|
+
|
|
16
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
17
|
+
|
|
18
|
+
var schema = (0, _reactDesc.describe)({
|
|
19
|
+
displayName: 'Drawer'
|
|
20
|
+
});
|
|
21
|
+
schema.propTypes = {
|
|
22
|
+
visible: _reactDesc.PropTypes.bool.description('This controls the visibility of the drawer').defaultValue('false'),
|
|
23
|
+
onClose: _reactDesc.PropTypes.func.description('a callback function called when clicking the close button'),
|
|
24
|
+
side: _reactDesc.PropTypes.oneOf(['left', 'right']).description('used to define the side where the Drawer will come up from').defaultValue('left'),
|
|
25
|
+
title: _reactDesc.PropTypes.string.description('Text to show as title'),
|
|
26
|
+
description: _reactDesc.PropTypes.string.description('Text to show as description'),
|
|
27
|
+
actions: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.shape(_objectSpread({
|
|
28
|
+
id: _reactDesc.PropTypes.string
|
|
29
|
+
}, (0, _schema.makeButtonSchemaPropTypes)()))).description('An array of button props objects with an identifier, all rendered in order in the footer')
|
|
30
|
+
};
|
|
31
|
+
var _default = schema;
|
|
32
|
+
exports.default = _default;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ButtonProps } from '../Button';
|
|
3
|
+
import { DrawerProps } from '.';
|
|
4
|
+
export declare const Overlay: import("styled-components").StyledComponent<"div", any, Pick<DrawerProps, "zIndex" | "visible" | "side">, never>;
|
|
5
|
+
export declare const Content: import("styled-components").StyledComponent<"div", any, Pick<DrawerProps, "visible" | "side">, never>;
|
|
6
|
+
export declare const Header: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
7
|
+
export declare const Title: import("styled-components").StyledComponent<"h3", any, import("../Typography").TypographyProps, never>;
|
|
8
|
+
export declare const Body: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
9
|
+
export declare const Footer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
10
|
+
export declare const CloseButton: import("styled-components").StyledComponent<import("react").RefForwardingComponent<HTMLButtonElement, ButtonProps>, any, ButtonProps, never>;
|
|
11
|
+
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/styles.ts"],"names":[],"mappings":";AAMA,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAgB,MAAM,GAAG,CAAC;AAE9C,eAAO,MAAM,OAAO,kHAYnB,CAAC;AAMF,eAAO,MAAM,OAAO,uGAqCnB,CAAC;AAEF,eAAO,MAAM,MAAM,oEAMlB,CAAC;AAEF,eAAO,MAAM,KAAK,wGAEjB,CAAC;AAEF,eAAO,MAAM,IAAI,oEAKhB,CAAC;AAEF,eAAO,MAAM,MAAM,oEAOlB,CAAC;AAEF,eAAO,MAAM,WAAW,8IAIvB,CAAC"}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.CloseButton = exports.Footer = exports.Body = exports.Title = exports.Header = exports.Content = exports.Overlay = void 0;
|
|
7
|
+
|
|
8
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
|
+
|
|
10
|
+
var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
|
|
11
|
+
|
|
12
|
+
var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
|
|
13
|
+
|
|
14
|
+
var _designTokens = require("@decisiv/design-tokens");
|
|
15
|
+
|
|
16
|
+
var _dynamicModifiers = require("../../utils/dynamicModifiers");
|
|
17
|
+
|
|
18
|
+
var _Button = _interopRequireDefault(require("../Button"));
|
|
19
|
+
|
|
20
|
+
var _Typography = require("../Typography");
|
|
21
|
+
|
|
22
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
|
+
|
|
24
|
+
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
|
|
25
|
+
|
|
26
|
+
var Overlay = _styledComponents.default.div.withConfig({
|
|
27
|
+
displayName: "styles__Overlay",
|
|
28
|
+
componentId: "p3l2i8-0"
|
|
29
|
+
})(["display:", ";position:fixed;background:", ";bottom:0;left:0;right:0;top:0;justify-content:", ";", ";"], function (_ref) {
|
|
30
|
+
var visible = _ref.visible;
|
|
31
|
+
return visible ? 'flex' : 'none';
|
|
32
|
+
}, (0, _toColorString.default)(_designTokens.color.opacity.charcoal75), function (_ref2) {
|
|
33
|
+
var side = _ref2.side;
|
|
34
|
+
return side === 'left' ? 'start' : 'end';
|
|
35
|
+
}, (0, _dynamicModifiers.applyDynamicModifiers)('zIndex', 'z-index'));
|
|
36
|
+
|
|
37
|
+
exports.Overlay = Overlay;
|
|
38
|
+
var DRAWER_WIDTH = (0, _rem.default)(_designTokens.spacing.base * 40);
|
|
39
|
+
|
|
40
|
+
var Content = _styledComponents.default.div.withConfig({
|
|
41
|
+
displayName: "styles__Content",
|
|
42
|
+
componentId: "p3l2i8-1"
|
|
43
|
+
})(["position:relative;height:100%;width:", ";top:0;display:flex;flex-direction:column;background-color:", ";animation-duration:0.75s;@keyframes fadeinleft{from{left:-", ";}to{left:0;}}@keyframes fadeinright{from{right:-", ";}to{right:0;}}", ""], DRAWER_WIDTH, (0, _toColorString.default)(_designTokens.color.base.snowWhite), DRAWER_WIDTH, DRAWER_WIDTH, function (_ref3) {
|
|
44
|
+
var side = _ref3.side;
|
|
45
|
+
return side === 'left' ? (0, _styledComponents.css)(["animation-name:fadeinleft;"]) : (0, _styledComponents.css)(["animation-name:fadeinright;"]);
|
|
46
|
+
});
|
|
47
|
+
|
|
48
|
+
exports.Content = Content;
|
|
49
|
+
|
|
50
|
+
var Header = _styledComponents.default.div.withConfig({
|
|
51
|
+
displayName: "styles__Header",
|
|
52
|
+
componentId: "p3l2i8-2"
|
|
53
|
+
})(["display:flex;flex-direction:column;padding:", ";min-height:fit-content;background-color:", ";"], (0, _rem.default)(_designTokens.spacing.base * 2), (0, _toColorString.default)(_designTokens.color.base.snowWhite));
|
|
54
|
+
|
|
55
|
+
exports.Header = Header;
|
|
56
|
+
var Title = (0, _styledComponents.default)(_Typography.H3).withConfig({
|
|
57
|
+
displayName: "styles__Title",
|
|
58
|
+
componentId: "p3l2i8-3"
|
|
59
|
+
})(["word-break:break-word;"]);
|
|
60
|
+
exports.Title = Title;
|
|
61
|
+
|
|
62
|
+
var Body = _styledComponents.default.div.withConfig({
|
|
63
|
+
displayName: "styles__Body",
|
|
64
|
+
componentId: "p3l2i8-4"
|
|
65
|
+
})(["display:flex;height:100%;overflow-y:auto;background-color:", ";"], (0, _toColorString.default)(_designTokens.color.base.snowWhite));
|
|
66
|
+
|
|
67
|
+
exports.Body = Body;
|
|
68
|
+
|
|
69
|
+
var Footer = _styledComponents.default.div.withConfig({
|
|
70
|
+
displayName: "styles__Footer",
|
|
71
|
+
componentId: "p3l2i8-5"
|
|
72
|
+
})(["height:", ";display:flex;padding:", " ", ";margin-top:auto;background-color:", ";border-top:1px solid ", ";"], (0, _rem.default)(_designTokens.spacing.base * 6.2), (0, _rem.default)(_designTokens.spacing.base * 1.5), (0, _rem.default)(_designTokens.spacing.base * 2), (0, _toColorString.default)(_designTokens.color.base.fullMoon), (0, _toColorString.default)(_designTokens.color.opacity.charcoal15));
|
|
73
|
+
|
|
74
|
+
exports.Footer = Footer;
|
|
75
|
+
var CloseButton = (0, _styledComponents.default)(_Button.default).withConfig({
|
|
76
|
+
displayName: "styles__CloseButton",
|
|
77
|
+
componentId: "p3l2i8-6"
|
|
78
|
+
})(["padding-right:0;padding-left:", ";margin-left:auto;"], (0, _rem.default)(_designTokens.spacing.base));
|
|
79
|
+
exports.CloseButton = CloseButton;
|
|
@@ -7,6 +7,7 @@ export { default as Button } from './Button';
|
|
|
7
7
|
export { default as Checkbox } from './Checkbox';
|
|
8
8
|
export { default as CheckboxGroup } from './CheckboxGroup';
|
|
9
9
|
export { default as Combobox } from './Combobox';
|
|
10
|
+
export { default as Drawer } from './Drawer';
|
|
10
11
|
export { default as DropdownList, DropdownListCategory, DropdownListItem, DropdownListOption, DropdownListProps, } from './DropdownList';
|
|
11
12
|
export { default as Filter } from './Filter';
|
|
12
13
|
export { default as Flex } from './Flex';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}
|
package/lib/components/index.js
CHANGED
|
@@ -19,6 +19,7 @@ var _exportNames = {
|
|
|
19
19
|
Checkbox: true,
|
|
20
20
|
CheckboxGroup: true,
|
|
21
21
|
Combobox: true,
|
|
22
|
+
Drawer: true,
|
|
22
23
|
DropdownList: true,
|
|
23
24
|
DropdownListCategory: true,
|
|
24
25
|
DropdownListItem: true,
|
|
@@ -158,6 +159,12 @@ Object.defineProperty(exports, "Combobox", {
|
|
|
158
159
|
return _Combobox.default;
|
|
159
160
|
}
|
|
160
161
|
});
|
|
162
|
+
Object.defineProperty(exports, "Drawer", {
|
|
163
|
+
enumerable: true,
|
|
164
|
+
get: function get() {
|
|
165
|
+
return _Drawer.default;
|
|
166
|
+
}
|
|
167
|
+
});
|
|
161
168
|
Object.defineProperty(exports, "DropdownList", {
|
|
162
169
|
enumerable: true,
|
|
163
170
|
get: function get() {
|
|
@@ -465,6 +472,8 @@ var _CheckboxGroup = _interopRequireDefault(require("./CheckboxGroup"));
|
|
|
465
472
|
|
|
466
473
|
var _Combobox = _interopRequireDefault(require("./Combobox"));
|
|
467
474
|
|
|
475
|
+
var _Drawer = _interopRequireDefault(require("./Drawer"));
|
|
476
|
+
|
|
468
477
|
var _DropdownList = _interopRequireWildcard(require("./DropdownList"));
|
|
469
478
|
|
|
470
479
|
var _Filter = _interopRequireDefault(require("./Filter"));
|
|
@@ -53,6 +53,10 @@ declare const translations: {
|
|
|
53
53
|
readonly viewNextMonth: "View next month";
|
|
54
54
|
readonly viewPrevMonth: "View previous month";
|
|
55
55
|
};
|
|
56
|
+
drawer: {
|
|
57
|
+
readonly closeBtnTooltip: "Close";
|
|
58
|
+
readonly closeBtn: "Close Drawer";
|
|
59
|
+
};
|
|
56
60
|
jumpTo: {
|
|
57
61
|
readonly menuLabel: "Jump To";
|
|
58
62
|
readonly navLabel: "Jump To:";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../../src/providers/ConfigProvider/utils/translations.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY
|
|
1
|
+
{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../../src/providers/ConfigProvider/utils/translations.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmIR,CAAC;AAEX,oBAAY,YAAY,GAAG,OAAO,YAAY,CAAC;AAE/C,eAAe,YAAY,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@decisiv/ui-components",
|
|
3
|
-
"version": "2.0.1-alpha.
|
|
3
|
+
"version": "2.0.1-alpha.158+21696d8",
|
|
4
4
|
"description": "Decisiv's design system React components",
|
|
5
5
|
"author": "Decisiv UI Development Team",
|
|
6
6
|
"license": "MIT",
|
|
@@ -71,5 +71,5 @@
|
|
|
71
71
|
"access": "public"
|
|
72
72
|
},
|
|
73
73
|
"private": false,
|
|
74
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "21696d86d2effb6cad0ee3f073b6183bb6199e1c"
|
|
75
75
|
}
|