@dnanpm/styleguide 3.8.3 → 3.9.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.
Files changed (5) hide show
  1. package/build/cjs/components/Drawer/Drawer.d.ts +20 -10
  2. package/build/cjs/components/Drawer/Drawer.js +24 -22
  3. package/build/es/components/Drawer/Drawer.d.ts +20 -10
  4. package/build/es/components/Drawer/Drawer.js +25 -23
  5. package/package.json +2 -2
package/build/cjs/components/Drawer/Drawer.d.ts CHANGED
@@ -3,6 +3,7 @@ import React from 'react';
3
3
  import type { Props as ReactModalProps } from 'react-modal';
4
4
  type Size = 'small' | 'medium' | 'large';
5
5
  type Variant = 'light' | 'dark';
6
+ type Side = 'left' | 'right';
6
7
  interface Props {
7
8
  /**
8
9
  * Allows to control the state of component
@@ -16,15 +17,6 @@ interface Props {
16
17
  * Unique ID for the component
17
18
  */
18
19
  id?: string;
19
- /**
20
- * Allows to change the color scheme of the component
21
- *
22
- * @param {Variant} light Sets header background color to `theme.color.background.white.default`
23
- * @param {Variant} dark Sets header background color to `theme.color.background.plum.E02`
24
- *
25
- * @default 'light'
26
- */
27
- variant?: Variant;
28
20
  /**
29
21
  * Allows to define subtitle shown in the header
30
22
  */
@@ -50,6 +42,24 @@ interface Props {
50
42
  * @default 'medium'
51
43
  */
52
44
  size?: Size;
45
+ /**
46
+ * Allows to change the color scheme of the component
47
+ *
48
+ * @param {Variant} light Sets header background color to `theme.color.background.white.default`
49
+ * @param {Variant} dark Sets header background color to `theme.color.background.plum.E02`
50
+ *
51
+ * @default 'light'
52
+ */
53
+ variant?: Variant;
54
+ /**
55
+ * Allows to change the opening side of the component
56
+ *
57
+ * @param {Side} left Opens the drawer from the left side
58
+ * @param {Side} right Opens the drawer from the right side
59
+ *
60
+ * @default 'right'
61
+ */
62
+ side?: Side;
53
63
  /**
54
64
  * Allows to pass a custom margin
55
65
  *
@@ -101,5 +111,5 @@ interface Props {
101
111
  */
102
112
  'data-testid'?: string;
103
113
  }
104
- declare const Drawer: ({ appElement, size, variant, padding, closeButton, isClosable, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
114
+ declare const Drawer: ({ appElement, size, side, variant, padding, closeButton, isClosable, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
105
115
  export default Drawer;
package/build/cjs/components/Drawer/Drawer.js CHANGED
@@ -20,40 +20,42 @@ const sizeMap = {
20
20
  medium: '768px',
21
21
  large: '1080px',
22
22
  };
23
+ const animationMap = {
24
+ small: ['0.4', '0.2'],
25
+ medium: ['0.5', '0.3'],
26
+ large: ['0.6', '0.4'],
27
+ };
23
28
  const GlobalStyle = styled.createGlobalStyle `
24
29
  body.ReactModal__Body--open {
25
30
  overflow: hidden;
26
31
  }
27
32
  `;
33
+ const slideOut = (side) => styled.keyframes `
34
+ 0% {
35
+ transform: translateX(0%);
36
+ }
37
+ 100% {
38
+ transform: translateX(${side === 'left' && '-'}100%);
39
+ }
40
+ `;
41
+ const slideIn = styled.keyframes `
42
+ 100% {
43
+ transform: translateX(0%);
44
+ }
45
+ `;
28
46
  const StyledReactModal = styled.default(ReactModal) `
29
47
  position: fixed;
30
48
  top: 0;
31
- right: 0;
49
+ ${({ side }) => (side === 'left' ? 'left: 0' : 'right: 0')};
32
50
  width: 100vw;
33
51
  height: 100dvh;
34
52
  max-width: 100vw;
35
53
  max-height: 100%;
36
- transform: translateX(100%);
37
- animation: slideIn 0.5s forwards;
54
+ transform: translateX(${({ side }) => side === 'left' && '-'}100%);
55
+ animation: ${slideIn} ${({ size }) => animationMap[size][0]}s forwards;
38
56
 
39
57
  &.ReactModal__Content--before-close {
40
- animation: slideOut 0.3s forwards;
41
- }
42
-
43
- @keyframes slideIn {
44
- 100% {
45
- transform: translateX(0%);
46
- }
47
- }
48
-
49
- @keyframes slideOut {
50
- 0% {
51
- transform: translateX(0%);
52
- }
53
-
54
- 100% {
55
- transform: translateX(100%);
56
- }
58
+ animation: ${({ side }) => slideOut(side)} ${({ size }) => animationMap[size][1]}s forwards;
57
59
  }
58
60
 
59
61
  ${({ size }) => styledUtils.media.sm `
@@ -165,10 +167,10 @@ const ModalContent = (_a, children) => {
165
167
  return (React.createElement(StyledReactModalContent, { id: id, ref: ref, tabIndex: tabIndex, role: role, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onClick: onClick, "aria-label": contentProps['aria-label'], "aria-modal": contentProps['aria-modal'], className: className }, children));
166
168
  };
167
169
  const Drawer = (_a) => {
168
- var { appElement = '#__next', size = 'medium', variant = 'light', padding = '1.25rem', closeButton = true, isClosable = true, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["appElement", "size", "variant", "padding", "closeButton", "isClosable", 'data-testid']);
170
+ var { appElement = '#__next', size = 'medium', side = 'right', variant = 'light', padding = '1.25rem', closeButton = true, isClosable = true, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["appElement", "size", "side", "variant", "padding", "closeButton", "isClosable", 'data-testid']);
169
171
  ReactModal.setAppElement(appElement);
170
172
  return (React.createElement(React.Fragment, null,
171
- React.createElement(StyledReactModal, { id: props.id, isOpen: props.isOpen, overlayElement: ModalOverlay, contentElement: ModalContent, onRequestClose: props.onRequestClose, portalClassName: props.className, contentLabel: props.contentLabel, shouldCloseOnEsc: isClosable, shouldCloseOnOverlayClick: isClosable, closeTimeoutMS: 300, size: size },
173
+ React.createElement(StyledReactModal, { id: props.id, isOpen: props.isOpen, overlayElement: ModalOverlay, contentElement: ModalContent, onRequestClose: props.onRequestClose, portalClassName: props.className, contentLabel: props.contentLabel, shouldCloseOnEsc: isClosable, shouldCloseOnOverlayClick: isClosable, closeTimeoutMS: 300, size: size, side: side },
172
174
  React.createElement(StyledBox, { elevation: "extraHigh", margin: props.margin, "data-testid": dataTestId },
173
175
  React.createElement("div", null,
174
176
  React.createElement(Floater.default, null, closeButton && isClosable && (React.createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, variant: variant },
package/build/es/components/Drawer/Drawer.d.ts CHANGED
@@ -3,6 +3,7 @@ import React from 'react';
3
3
  import type { Props as ReactModalProps } from 'react-modal';
4
4
  type Size = 'small' | 'medium' | 'large';
5
5
  type Variant = 'light' | 'dark';
6
+ type Side = 'left' | 'right';
6
7
  interface Props {
7
8
  /**
8
9
  * Allows to control the state of component
@@ -16,15 +17,6 @@ interface Props {
16
17
  * Unique ID for the component
17
18
  */
18
19
  id?: string;
19
- /**
20
- * Allows to change the color scheme of the component
21
- *
22
- * @param {Variant} light Sets header background color to `theme.color.background.white.default`
23
- * @param {Variant} dark Sets header background color to `theme.color.background.plum.E02`
24
- *
25
- * @default 'light'
26
- */
27
- variant?: Variant;
28
20
  /**
29
21
  * Allows to define subtitle shown in the header
30
22
  */
@@ -50,6 +42,24 @@ interface Props {
50
42
  * @default 'medium'
51
43
  */
52
44
  size?: Size;
45
+ /**
46
+ * Allows to change the color scheme of the component
47
+ *
48
+ * @param {Variant} light Sets header background color to `theme.color.background.white.default`
49
+ * @param {Variant} dark Sets header background color to `theme.color.background.plum.E02`
50
+ *
51
+ * @default 'light'
52
+ */
53
+ variant?: Variant;
54
+ /**
55
+ * Allows to change the opening side of the component
56
+ *
57
+ * @param {Side} left Opens the drawer from the left side
58
+ * @param {Side} right Opens the drawer from the right side
59
+ *
60
+ * @default 'right'
61
+ */
62
+ side?: Side;
53
63
  /**
54
64
  * Allows to pass a custom margin
55
65
  *
@@ -101,5 +111,5 @@ interface Props {
101
111
  */
102
112
  'data-testid'?: string;
103
113
  }
104
- declare const Drawer: ({ appElement, size, variant, padding, closeButton, isClosable, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
114
+ declare const Drawer: ({ appElement, size, side, variant, padding, closeButton, isClosable, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
105
115
  export default Drawer;
package/build/es/components/Drawer/Drawer.js CHANGED
@@ -2,7 +2,7 @@ import { __rest } from 'tslib';
2
2
  import { Close } from '@dnanpm/icons';
3
3
  import React__default from 'react';
4
4
  import ReactModal from 'react-modal';
5
- import styled, { createGlobalStyle } from '../../themes/styled.js';
5
+ import styled, { createGlobalStyle, keyframes } from '../../themes/styled.js';
6
6
  import theme from '../../themes/theme.js';
7
7
  import getElevationShadow from '../../utils/common.js';
8
8
  import { media } from '../../utils/styledUtils.js';
@@ -16,40 +16,42 @@ const sizeMap = {
16
16
  medium: '768px',
17
17
  large: '1080px',
18
18
  };
19
+ const animationMap = {
20
+ small: ['0.4', '0.2'],
21
+ medium: ['0.5', '0.3'],
22
+ large: ['0.6', '0.4'],
23
+ };
19
24
  const GlobalStyle = createGlobalStyle `
20
25
  body.ReactModal__Body--open {
21
26
  overflow: hidden;
22
27
  }
23
28
  `;
29
+ const slideOut = (side) => keyframes `
30
+ 0% {
31
+ transform: translateX(0%);
32
+ }
33
+ 100% {
34
+ transform: translateX(${side === 'left' && '-'}100%);
35
+ }
36
+ `;
37
+ const slideIn = keyframes `
38
+ 100% {
39
+ transform: translateX(0%);
40
+ }
41
+ `;
24
42
  const StyledReactModal = styled(ReactModal) `
25
43
  position: fixed;
26
44
  top: 0;
27
- right: 0;
45
+ ${({ side }) => (side === 'left' ? 'left: 0' : 'right: 0')};
28
46
  width: 100vw;
29
47
  height: 100dvh;
30
48
  max-width: 100vw;
31
49
  max-height: 100%;
32
- transform: translateX(100%);
33
- animation: slideIn 0.5s forwards;
50
+ transform: translateX(${({ side }) => side === 'left' && '-'}100%);
51
+ animation: ${slideIn} ${({ size }) => animationMap[size][0]}s forwards;
34
52
 
35
53
  &.ReactModal__Content--before-close {
36
- animation: slideOut 0.3s forwards;
37
- }
38
-
39
- @keyframes slideIn {
40
- 100% {
41
- transform: translateX(0%);
42
- }
43
- }
44
-
45
- @keyframes slideOut {
46
- 0% {
47
- transform: translateX(0%);
48
- }
49
-
50
- 100% {
51
- transform: translateX(100%);
52
- }
54
+ animation: ${({ side }) => slideOut(side)} ${({ size }) => animationMap[size][1]}s forwards;
53
55
  }
54
56
 
55
57
  ${({ size }) => media.sm `
@@ -161,10 +163,10 @@ const ModalContent = (_a, children) => {
161
163
  return (React__default.createElement(StyledReactModalContent, { id: id, ref: ref, tabIndex: tabIndex, role: role, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onClick: onClick, "aria-label": contentProps['aria-label'], "aria-modal": contentProps['aria-modal'], className: className }, children));
162
164
  };
163
165
  const Drawer = (_a) => {
164
- var { appElement = '#__next', size = 'medium', variant = 'light', padding = '1.25rem', closeButton = true, isClosable = true, 'data-testid': dataTestId } = _a, props = __rest(_a, ["appElement", "size", "variant", "padding", "closeButton", "isClosable", 'data-testid']);
166
+ var { appElement = '#__next', size = 'medium', side = 'right', variant = 'light', padding = '1.25rem', closeButton = true, isClosable = true, 'data-testid': dataTestId } = _a, props = __rest(_a, ["appElement", "size", "side", "variant", "padding", "closeButton", "isClosable", 'data-testid']);
165
167
  ReactModal.setAppElement(appElement);
166
168
  return (React__default.createElement(React__default.Fragment, null,
167
- React__default.createElement(StyledReactModal, { id: props.id, isOpen: props.isOpen, overlayElement: ModalOverlay, contentElement: ModalContent, onRequestClose: props.onRequestClose, portalClassName: props.className, contentLabel: props.contentLabel, shouldCloseOnEsc: isClosable, shouldCloseOnOverlayClick: isClosable, closeTimeoutMS: 300, size: size },
169
+ React__default.createElement(StyledReactModal, { id: props.id, isOpen: props.isOpen, overlayElement: ModalOverlay, contentElement: ModalContent, onRequestClose: props.onRequestClose, portalClassName: props.className, contentLabel: props.contentLabel, shouldCloseOnEsc: isClosable, shouldCloseOnOverlayClick: isClosable, closeTimeoutMS: 300, size: size, side: side },
168
170
  React__default.createElement(StyledBox, { elevation: "extraHigh", margin: props.margin, "data-testid": dataTestId },
169
171
  React__default.createElement("div", null,
170
172
  React__default.createElement(Floater, null, closeButton && isClosable && (React__default.createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, variant: variant },
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@dnanpm/styleguide",
3
3
  "sideEffects": false,
4
- "version": "v3.8.3",
4
+ "version": "v3.9.0",
5
5
  "main": "build/cjs/index.js",
6
6
  "module": "build/es/index.js",
7
7
  "jsnext:main": "build/es/index.js",
@@ -41,7 +41,7 @@
41
41
  ],
42
42
  "devDependencies": {
43
43
  "@babel/core": "^7.26.0",
44
- "@babel/preset-env": "^7.25.8",
44
+ "@babel/preset-env": "^7.26.0",
45
45
  "@babel/preset-react": "^7.25.9",
46
46
  "@babel/preset-typescript": "^7.25.7",
47
47
  "@dnanpm/icons": "2.0.3",