@shopgate/pwa-ui-material 7.32.0-beta.1 → 7.32.0-beta.10

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/AppBar/index.js CHANGED
@@ -12,11 +12,11 @@ import Center from "./components/Center";
12
12
  import Left from "./components/Left";
13
13
  import Below from "./components/Below";
14
14
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
15
- const useStyles = makeStyles()({
15
+ const useStyles = makeStyles()(theme => ({
16
16
  outer: {
17
17
  boxSizing: 'content-box',
18
18
  left: 0,
19
- paddingTop: 'var(--safe-area-inset-top)',
19
+ paddingTop: theme.layout.safeArea.top,
20
20
  position: 'sticky',
21
21
  top: 0,
22
22
  width: '100%',
@@ -30,7 +30,7 @@ const useStyles = makeStyles()({
30
30
  position: 'relative',
31
31
  zIndex: 14
32
32
  }
33
- });
33
+ }));
34
34
 
35
35
  /**
36
36
  * Updates the --app-bar-height custom property
@@ -1,6 +1,7 @@
1
1
  import React, { memo } from 'react';
2
2
  import PropTypes from 'prop-types';
3
- import { I18n, Button } from '@shopgate/engage/components';
3
+ import { I18n } from '@shopgate/engage/components';
4
+ import { Button } from '@shopgate/engage/components/v2';
4
5
  import { makeStyles } from '@shopgate/engage/styles';
5
6
  import { jsx as _jsx } from "react/jsx-runtime";
6
7
  const useStyles = makeStyles()(theme => ({
@@ -27,8 +28,8 @@ const Buttons = ({
27
28
  disabled = false
28
29
  }) => /*#__PURE__*/_jsx(Button, {
29
30
  className: classes.button,
30
- flat: true,
31
- type: "primary",
31
+ variant: "text",
32
+ color: "secondary",
32
33
  onClick: action,
33
34
  disabled: disabled,
34
35
  children: /*#__PURE__*/_jsx(I18n.Text, {
@@ -1,12 +1,11 @@
1
1
  import React, { memo } from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import { I18n, Ellipsis, Typography } from '@shopgate/engage/components';
4
- import { themeConfig } from '@shopgate/engage';
5
4
  import { makeStyles } from '@shopgate/engage/styles';
6
5
  import { jsx as _jsx } from "react/jsx-runtime";
7
6
  const useStyles = makeStyles()(theme => ({
8
7
  title: {
9
- lineHeight: themeConfig.typography.lineHeight,
8
+ lineHeight: theme.typography.body2.lineHeight,
10
9
  paddingBottom: theme.spacing(1),
11
10
  marginTop: '-.25em'
12
11
  }
@@ -17,7 +17,7 @@ const useStyles = makeStyles()(theme => ({
17
17
  width: '1px',
18
18
  zIndex: -1000,
19
19
  '&:first-of-type': {
20
- marginTop: 'calc(16px + var(--safe-area-inset-top))'
20
+ marginTop: `calc(16px + ${theme.layout.safeArea.top})`
21
21
  }
22
22
  },
23
23
  button: {
@@ -30,7 +30,7 @@ const useStyles = makeStyles()(theme => ({
30
30
  position: 'relative',
31
31
  width: '100%',
32
32
  '&:first-of-type': {
33
- paddingTop: 'calc(16px + var(--safe-area-inset-top))'
33
+ paddingTop: `calc(16px + ${theme.layout.safeArea.top})`
34
34
  }
35
35
  },
36
36
  label: {
@@ -19,7 +19,7 @@ const useStyles = makeStyles()(theme => ({
19
19
  fontSize: theme.typography.body2.fontSize,
20
20
  height: '100%',
21
21
  overflowY: 'scroll',
22
- paddingBottom: 'var(--safe-area-inset-bottom)',
22
+ paddingBottom: theme.layout.safeArea.bottom,
23
23
  WebkitOverflowScrolling: 'touch'
24
24
  },
25
25
  drawer: {
package/SnackBar/index.js CHANGED
@@ -4,14 +4,21 @@ import { config } from 'react-spring';
4
4
  import { Spring } from 'react-spring/renderprops.cjs';
5
5
  import Ellipsis from '@shopgate/pwa-common/components/Ellipsis';
6
6
  import { i18n } from '@shopgate/engage/core/helpers';
7
+ import { useLongPress } from '@shopgate/engage/core/hooks/events';
7
8
  import { makeStyles } from '@shopgate/engage/styles';
8
9
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
9
10
  const defaultToast = {};
11
+
12
+ // Approximate settle time of the slide-out (config.stiff). The current toast is removed from the
13
+ // queue this long after it starts sliding out, so the exit animation is fully visible before the
14
+ // next toast slides in. Timer-driven removal keeps queue advancement independent of the spring's
15
+ // onRest callback, which fires unreliably during the toast-to-toast handoff.
16
+ const EXIT_ANIMATION_MS = 500;
10
17
  const useStyles = makeStyles()(theme => ({
11
18
  container: {
12
19
  position: 'fixed',
13
20
  height: 'var(--snack-bar-height, 80px)',
14
- bottom: 'max(var(--footer-height), var(--safe-area-inset-bottom))',
21
+ bottom: `max(var(--footer-height), ${theme.layout.safeArea.bottom})`,
15
22
  transition: 'bottom 0.3s ease',
16
23
  overflow: 'hidden',
17
24
  zIndex: 6,
@@ -88,48 +95,106 @@ const SnackBar = ({
88
95
  cx
89
96
  } = useStyles();
90
97
  const toasts = useMemo(() => toastsProp || [], [toastsProp]);
98
+ const current = toasts.length ? toasts[0] : null;
99
+ const currentId = current ? current.id : null;
91
100
  const [visible, setVisible] = useState(true);
92
- const visibleRef = useRef(visible);
93
- const timerRef = useRef(null);
94
- useEffect(() => {
95
- visibleRef.current = visible;
96
- }, [visible]);
101
+ const autoHideTimer = useRef(null);
102
+ const exitTimer = useRef(null);
103
+ const pressingRef = useRef(false);
104
+
105
+ // Latest values reachable from the stable timer callbacks below without re-creating them.
106
+ const durationRef = useRef();
107
+ durationRef.current = current && current.duration || 2500;
108
+ const removeToastRef = useRef(removeToast);
109
+ removeToastRef.current = removeToast;
110
+
111
+ // Show whenever there is a toast to display; hide when the queue drains. Reacting to the queue
112
+ // length is what slides the next toast in after the current one has been removed.
97
113
  useEffect(() => {
98
114
  setVisible(toasts.length > 0);
99
115
  }, [toasts.length]);
116
+ useEffect(() => () => {
117
+ clearTimeout(autoHideTimer.current);
118
+ clearTimeout(exitTimer.current);
119
+ }, []);
100
120
  const snack = useMemo(() => {
101
- const raw = toasts.length ? toasts[0] : defaultToast;
121
+ const raw = current || defaultToast;
102
122
  return {
103
123
  ...raw,
104
124
  message: i18n.text(raw.message || '', raw.messageParams || {}),
105
125
  actionLabel: i18n.text(raw.actionLabel || '')
106
126
  };
107
- }, [toasts]);
127
+ }, [current]);
128
+
129
+ // Slide the current toast out, then advance the queue once the exit animation has played. The
130
+ // removal is timer-driven (not the spring's onRest), so it fires exactly once for the toast being
131
+ // dismissed and can't be re-triggered by the spring re-settling as the next toast slides in.
108
132
  const hide = useCallback(() => {
109
- clearTimeout(timerRef.current);
133
+ clearTimeout(autoHideTimer.current);
134
+ clearTimeout(exitTimer.current);
110
135
  setVisible(false);
136
+ exitTimer.current = setTimeout(() => removeToastRef.current(), EXIT_ANIMATION_MS);
111
137
  }, []);
138
+
139
+ // (Re)starts the auto-hide countdown. Stable identity (reads the duration via a ref), so the
140
+ // effect below only re-runs when the shown toast actually changes.
141
+ const scheduleAutoHide = useCallback(() => {
142
+ clearTimeout(autoHideTimer.current);
143
+ autoHideTimer.current = setTimeout(hide, durationRef.current);
144
+ }, [hide]);
145
+
146
+ // Start the countdown once per shown toast, keyed on its id — NOT on the spring's onRest. With
147
+ // `force`, onRest fires on every re-render, so scheduling the auto-hide there restarted the
148
+ // countdown on each render and could keep a toast on screen far longer than its duration.
149
+ useEffect(() => {
150
+ if (!currentId) {
151
+ return undefined;
152
+ }
153
+ scheduleAutoHide();
154
+ return () => clearTimeout(autoHideTimer.current);
155
+ }, [currentId, scheduleAutoHide]);
112
156
  const handleAction = useCallback(() => {
113
- clearTimeout(timerRef.current);
114
- if (toasts[0]) {
115
- toasts[0].action();
157
+ current?.action?.();
158
+ hide();
159
+ }, [current, hide]);
160
+ const handleLongPress = useCallback(() => {
161
+ pressingRef.current = false;
162
+ if (snack.onLongPress) {
163
+ snack.onLongPress();
116
164
  }
117
165
  hide();
118
- }, [toasts, hide]);
119
- const handleRest = useCallback(() => {
120
- if (visibleRef.current) {
121
- const duration = toasts[0]?.duration || 2500;
122
- timerRef.current = setTimeout(hide, duration);
123
- } else {
124
- removeToast();
166
+ }, [snack, hide]);
167
+
168
+ // While a long press is held, freeze the auto-hide countdown so the toast can't disappear
169
+ // mid-press. A press released before the threshold resumes the countdown from the start.
170
+ const handlePressStart = useCallback(() => {
171
+ pressingRef.current = true;
172
+ clearTimeout(autoHideTimer.current);
173
+ }, []);
174
+ const handlePressCancel = useCallback(() => {
175
+ pressingRef.current = false;
176
+ if (currentId) {
177
+ scheduleAutoHide();
125
178
  }
126
- }, [toasts, hide, removeToast]);
179
+ }, [currentId, scheduleAutoHide]);
180
+ const longPressHandlers = useLongPress(handleLongPress, {
181
+ threshold: 4000,
182
+ onStart: handlePressStart,
183
+ onCancel: handlePressCancel
184
+ });
127
185
  const {
128
186
  action = null,
129
187
  actionLabel = null,
130
- message = null
188
+ message = null,
189
+ onLongPress = null
131
190
  } = snack;
132
- const boxProps = {
191
+
192
+ // A toast is either long-pressable or has a whole-box click action — never both. Attaching both
193
+ // would let a single long press fire onLongPress (at the threshold) and then handleAction (on the
194
+ // release click). Long-press takes precedence.
195
+ const boxProps = onLongPress ? {
196
+ ...longPressHandlers
197
+ } : {
133
198
  ...(action && !actionLabel && {
134
199
  onClick: handleAction
135
200
  })
@@ -151,7 +216,6 @@ const SnackBar = ({
151
216
  config: config.stiff,
152
217
  reverse: !visible,
153
218
  force: true,
154
- onRest: handleRest,
155
219
  children: springProps =>
156
220
  /*#__PURE__*/
157
221
  // eslint-disable-next-line max-len
@@ -1,7 +1,8 @@
1
+ import React from 'react';
1
2
  import type { IconProps } from '@shopgate/pwa-common/components/Icon';
2
3
  /**
3
4
  * The Share icon component.
4
5
  */
5
- declare const ShareIcon: (props: Omit<IconProps, "content">) => import("react/jsx-runtime").JSX.Element;
6
+ declare const ShareIcon: (props: Omit<IconProps, "content">) => React.JSX.Element;
6
7
  export default ShareIcon;
7
8
  //# sourceMappingURL=ShareIcon.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ShareIcon.d.ts","sourceRoot":"","sources":["../../icons/ShareIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAItE;;GAEG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,4CACI,CAAC;AAEzD,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"ShareIcon.d.ts","sourceRoot":"","sources":["../../icons/ShareIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAItE;;GAEG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,sBACI,CAAC;AAEzD,eAAe,SAAS,CAAC"}
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@shopgate/pwa-ui-material",
3
- "version": "7.32.0-beta.1",
3
+ "version": "7.32.0-beta.10",
4
4
  "description": "Shopgate's material design UI components.",
5
5
  "main": "index.js",
6
6
  "license": "Apache-2.0",
7
7
  "devDependencies": {
8
- "@shopgate/pwa-common": "7.32.0-beta.1",
8
+ "@shopgate/pwa-common": "7.32.0-beta.10",
9
9
  "@types/color": "^4.2.0",
10
10
  "@types/react-transition-group": "^4.4.12",
11
11
  "react": "^17.0.2",
@@ -19,7 +19,7 @@
19
19
  "prop-types": "~15.8.1",
20
20
  "react-spring": "^8.0.27",
21
21
  "react-transition-group": "^4.4.5",
22
- "react-use": "^17.6.0"
22
+ "react-use": "^17.6.1"
23
23
  },
24
24
  "peerDependencies": {
25
25
  "react": "^16.0.0 || ^17.0.0"
@@ -1,37 +0,0 @@
1
- import React from 'react';
2
- import { mount } from 'enzyme';
3
- import AccordionContent from "./index";
4
- import { jsx as _jsx } from "react/jsx-runtime";
5
- jest.mock('react-spring', () => ({
6
- ...jest.requireActual('react-spring'),
7
- useSpring: jest.fn().mockReturnValue({
8
- hook: 'useSpring return value'
9
- })
10
- }));
11
- describe('<AccordionContent />', () => {
12
- it('should render as closed', () => {
13
- const wrapper = mount(/*#__PURE__*/_jsx(AccordionContent, {
14
- id: "some-id",
15
- children: /*#__PURE__*/_jsx("div", {
16
- id: "test",
17
- children: "Some Child"
18
- })
19
- }));
20
- expect(wrapper.find('#test').text()).toEqual('Some Child');
21
- expect(wrapper.find('div').get(0).props['aria-hidden']).toEqual(true);
22
- expect(wrapper).toMatchSnapshot();
23
- });
24
- it('should render as open', () => {
25
- const wrapper = mount(/*#__PURE__*/_jsx(AccordionContent, {
26
- open: true,
27
- id: "some-id",
28
- children: /*#__PURE__*/_jsx("div", {
29
- id: "test",
30
- children: "Some Child"
31
- })
32
- }));
33
- expect(wrapper.find('#test').text()).toEqual('Some Child');
34
- expect(wrapper.find('div').get(0).props['aria-hidden']).toEqual(false);
35
- expect(wrapper).toMatchSnapshot();
36
- });
37
- });
package/Accordion/spec.js DELETED
@@ -1,41 +0,0 @@
1
- import React from 'react';
2
- import { mount } from 'enzyme';
3
- import Accordion from "./index";
4
- import { jsx as _jsx } from "react/jsx-runtime";
5
- jest.unmock('@shopgate/pwa-ui-shared');
6
- jest.mock('@shopgate/engage/components');
7
- jest.mock('react-spring', () => ({
8
- ...jest.requireActual('react-spring'),
9
- useSpring: jest.fn().mockReturnValue({
10
- hook: 'useSpring return value'
11
- })
12
- }));
13
- describe('<Accordion />', () => {
14
- beforeEach(() => {
15
- jest.clearAllMocks();
16
- });
17
- it('should render with renderLabel prop and children', () => {
18
- const wrapper = mount(/*#__PURE__*/_jsx(Accordion, {
19
- renderLabel: () => /*#__PURE__*/_jsx("div", {}),
20
- testId: "Some Thing",
21
- children: "Some content."
22
- }));
23
- expect(wrapper).toMatchSnapshot();
24
- expect(wrapper.find('AccordionContent').exists()).toBe(true);
25
- });
26
- it('should not render without a renderLabel prop', () => {
27
- const wrapper = mount(/*#__PURE__*/_jsx(Accordion, {
28
- testId: "Some Thing"
29
- }));
30
- expect(wrapper).toMatchSnapshot();
31
- expect(wrapper.instance()).toEqual(null);
32
- });
33
- it('should not render without children', () => {
34
- const wrapper = mount(/*#__PURE__*/_jsx(Accordion, {
35
- renderLabel: () => {},
36
- testId: "Some Thing"
37
- }));
38
- expect(wrapper).toMatchSnapshot();
39
- expect(wrapper.instance()).toEqual(null);
40
- });
41
- });
@@ -1,29 +0,0 @@
1
- import React from 'react';
2
- import { shallow } from 'enzyme';
3
- import Button from '@shopgate/pwa-ui-shared/Button';
4
- import Buttons from "./index";
5
- import { jsx as _jsx } from "react/jsx-runtime";
6
- const actions = [{
7
- label: 'action0',
8
- action: jest.fn()
9
- }, {
10
- label: 'action1',
11
- action: jest.fn()
12
- }, {
13
- label: 'action2',
14
- action: jest.fn()
15
- }];
16
- describe('<Buttons />', () => {
17
- it('should not render if no actions are passed', () => {
18
- const wrapper = shallow(/*#__PURE__*/_jsx(Buttons, {}));
19
- expect(wrapper).toMatchSnapshot();
20
- expect(wrapper.instance()).toEqual(null);
21
- });
22
- it('should render buttons', () => {
23
- const wrapper = shallow(/*#__PURE__*/_jsx(Buttons, {
24
- actions: actions
25
- }));
26
- expect(wrapper).toMatchSnapshot();
27
- expect(wrapper.find(Button).length).toBe(actions.length);
28
- });
29
- });
@@ -1,18 +0,0 @@
1
- import React from 'react';
2
- import { shallow } from 'enzyme';
3
- import Content from "./index";
4
- import { jsx as _jsx } from "react/jsx-runtime";
5
- describe('<Content />', () => {
6
- it('should not render if no content is passed', () => {
7
- const wrapper = shallow(/*#__PURE__*/_jsx(Content, {}));
8
- expect(wrapper).toMatchSnapshot();
9
- expect(wrapper.instance()).toEqual(null);
10
- });
11
- it('should render content components', () => {
12
- const wrapper = shallow(/*#__PURE__*/_jsx(Content, {
13
- content: "Hello World"
14
- }));
15
- expect(wrapper).toMatchSnapshot();
16
- expect(wrapper.find('[id="basicDialogDesc"]').length).toBe(1);
17
- });
18
- });
@@ -1,18 +0,0 @@
1
- import React from 'react';
2
- import { shallow } from 'enzyme';
3
- import Title from "./index";
4
- import { jsx as _jsx } from "react/jsx-runtime";
5
- describe('<Title />', () => {
6
- it('should not render without a title', () => {
7
- const wrapper = shallow(/*#__PURE__*/_jsx(Title, {}));
8
- expect(wrapper).toMatchSnapshot();
9
- expect(wrapper.instance()).toEqual(null);
10
- });
11
- it('should render with a title', () => {
12
- const wrapper = shallow(/*#__PURE__*/_jsx(Title, {
13
- title: "Some test title"
14
- }));
15
- expect(wrapper).toMatchSnapshot();
16
- expect(wrapper.find('[id="basicDialogTitle"]').length).toBe(1);
17
- });
18
- });
@@ -1,44 +0,0 @@
1
- import React from 'react';
2
- import { shallow } from 'enzyme';
3
- import Title from "./components/Title";
4
- import Content from "./components/Content";
5
- import Buttons from "./components/Buttons";
6
- import BasicDialog from "./index";
7
- import { jsx as _jsx } from "react/jsx-runtime";
8
- const props = {
9
- title: 'Hello World',
10
- children: /*#__PURE__*/_jsx("div", {
11
- children: "Hello World"
12
- }),
13
- actions: [{
14
- label: 'action0',
15
- action: jest.fn()
16
- }, {
17
- label: 'action1',
18
- action: jest.fn()
19
- }, {
20
- label: 'action2',
21
- action: jest.fn()
22
- }]
23
- };
24
- jest.mock('@shopgate/engage/a11y/components');
25
- describe('<BasicDialog />', () => {
26
- it('should render with minimal props', () => {
27
- const wrapper = shallow(/*#__PURE__*/_jsx(BasicDialog, {
28
- actions: []
29
- }));
30
- expect(wrapper).toMatchSnapshot();
31
- });
32
- it('should render as expected', () => {
33
- const wrapper = shallow(/*#__PURE__*/_jsx(BasicDialog, {
34
- ...props
35
- }));
36
- expect(wrapper).toMatchSnapshot();
37
- expect(wrapper.find(Title).length).toBe(1);
38
- expect(wrapper.find(Title).props().title).toEqual(props.title);
39
- expect(wrapper.find(Content).length).toBe(1);
40
- expect(wrapper.find(Content).props().content).toEqual(props.children);
41
- expect(wrapper.find(Buttons).length).toBe(1);
42
- expect(wrapper.find(Buttons).props().actions).toEqual(props.actions);
43
- });
44
- });
@@ -1,10 +0,0 @@
1
- import React from 'react';
2
- import { mount } from 'enzyme';
3
- import Divider from "./index";
4
- import { jsx as _jsx } from "react/jsx-runtime";
5
- describe('<NavDrawerDivider />', () => {
6
- it('should match the snapshot', () => {
7
- const wrapper = mount(/*#__PURE__*/_jsx(Divider, {}));
8
- expect(wrapper).toMatchSnapshot();
9
- });
10
- });
package/NavDrawer/spec.js DELETED
@@ -1,139 +0,0 @@
1
- import "core-js/modules/es.array.reduce.js";
2
- /* eslint-disable global-require, extra-rules/no-single-line-objects */
3
- import React from 'react';
4
- import { shallow, mount } from 'enzyme';
5
- import { act } from 'react-dom/test-utils';
6
- import Transition from 'react-transition-group/Transition';
7
- jest.unmock('@shopgate/pwa-core');
8
- jest.mock('@shopgate/engage/styles', () => ({
9
- makeStyles: () => function mockUseStylesFactory(defs) {
10
- return function useStylesMock() {
11
- const keys = Object.keys(defs);
12
- const classes = keys.reduce((acc, key) => {
13
- acc[key] = `mock-class-${key}`;
14
- return acc;
15
- }, {});
16
- const cx = (...parts) => parts.filter(Boolean).join(' ');
17
- return {
18
- classes,
19
- cx
20
- };
21
- };
22
- }
23
- }));
24
- jest.mock('@shopgate/engage/components', () => {
25
- const mockReact = require('react');
26
- const mockPropTypes = require('prop-types');
27
- function Backdrop(props) {
28
- const {
29
- isVisible,
30
- onClick
31
- } = props;
32
- if (!isVisible) {
33
- return null;
34
- }
35
- return mockReact.createElement('button', {
36
- type: 'button',
37
- 'aria-label': 'Close',
38
- 'data-test-id': 'NavDrawerBackdrop',
39
- onClick
40
- });
41
- }
42
- Backdrop.propTypes = {
43
- isVisible: mockPropTypes.bool,
44
- onClick: mockPropTypes.func
45
- };
46
- Backdrop.defaultProps = {
47
- isVisible: false,
48
- onClick: undefined
49
- };
50
- Backdrop.displayName = 'Backdrop';
51
- return {
52
- Backdrop
53
- };
54
- });
55
- jest.mock('@shopgate/engage/a11y/components', () => {
56
- const mockPropTypes = require('prop-types');
57
- function ModalStateTracker(props) {
58
- return props.children;
59
- }
60
- ModalStateTracker.propTypes = {
61
- children: mockPropTypes.node
62
- };
63
- ModalStateTracker.defaultProps = {
64
- children: null
65
- };
66
- return {
67
- ModalStateTracker
68
- };
69
- });
70
- jest.mock("./components/Item", () => {
71
- const mockReact = require('react');
72
- const mockPropTypes = require('prop-types');
73
- const ItemWithRef = mockReact.forwardRef((props, ref) => mockReact.createElement('button', {
74
- type: 'button',
75
- ref,
76
- 'data-test-id': 'nav-drawer-item'
77
- }, props.label));
78
- ItemWithRef.propTypes = {
79
- label: mockPropTypes.string
80
- };
81
- ItemWithRef.defaultProps = {
82
- label: ''
83
- };
84
- return {
85
- __esModule: true,
86
- default: ItemWithRef
87
- };
88
- });
89
-
90
- // eslint-disable-next-line import/first
91
- import NavDrawer from "./index";
92
- import { jsx as _jsx } from "react/jsx-runtime";
93
- describe('NavDrawer', () => {
94
- it('should match the snapshot', () => {
95
- const wrapper = shallow(/*#__PURE__*/_jsx(NavDrawer, {
96
- children: "Content"
97
- }));
98
- expect(wrapper).toMatchSnapshot();
99
- });
100
- it('should open and close with an event', () => {
101
- const onOpen = jest.fn();
102
- const onClose = jest.fn();
103
- const wrapper = mount(/*#__PURE__*/_jsx(NavDrawer, {
104
- onOpen: onOpen,
105
- onClose: onClose,
106
- children: "Content"
107
- }));
108
- act(() => {
109
- NavDrawer.open();
110
- });
111
- wrapper.update();
112
- expect(wrapper.find(Transition).prop('in')).toEqual(true);
113
- expect(onOpen).toHaveBeenCalled();
114
- expect(onClose).not.toHaveBeenCalled();
115
- act(() => {
116
- NavDrawer.close();
117
- });
118
- wrapper.update();
119
- expect(wrapper.find(Transition).prop('in')).toEqual(false);
120
- expect(onClose).toHaveBeenCalled();
121
- });
122
- it('should close when Backdrop is clicked', () => {
123
- const wrapper = mount(/*#__PURE__*/_jsx(NavDrawer, {
124
- children: "Content"
125
- }));
126
- act(() => {
127
- NavDrawer.open();
128
- });
129
- wrapper.update();
130
- expect(wrapper.find(Transition).prop('in')).toEqual(true);
131
- const backdrop = wrapper.find('[data-test-id="NavDrawerBackdrop"]');
132
- act(() => {
133
- backdrop.simulate('click');
134
- });
135
- wrapper.update();
136
- expect(wrapper.find(Transition).prop('in')).toEqual(false);
137
- });
138
- });
139
- /* eslint-enable global-require, extra-rules/no-single-line-objects */
@@ -1,16 +0,0 @@
1
- {
2
- "extends": "@shopgate/engage/tsconfig.build.json",
3
- "compilerOptions": {
4
- "outDir": "./dist",
5
- "rootDir": "."
6
- },
7
- "include": ["**/*.ts", "**/*.tsx"],
8
- "exclude": [
9
- "dist",
10
- "node_modules",
11
- "**/*.spec.*",
12
- "**/__tests__/**",
13
- "**/__snapshots__/**",
14
- "coverage"
15
- ]
16
- }
package/tsconfig.json DELETED
@@ -1,3 +0,0 @@
1
- {
2
- "extends": "@shopgate/engage/tsconfig.json",
3
- }