diff --git a/packages/doc/content/components/components/dialog/index.mdx b/packages/doc/content/components/components/dialog/index.mdx index a586dc0fff..8a1b5d8b4a 100644 --- a/packages/doc/content/components/components/dialog/index.mdx +++ b/packages/doc/content/components/components/dialog/index.mdx @@ -114,7 +114,7 @@ render(() => { isOpen={isOpen} onClose={handleOnClose} > - + Are you sure you want to downgrade to a Platinum plan? @@ -257,4 +257,11 @@ render(() => { ### Props +### Dialog + + + +### Dialog.Header + + diff --git a/packages/doc/content/components/components/drawer/index.mdx b/packages/doc/content/components/components/drawer/index.mdx index 02ab1a5153..e4e716309b 100644 --- a/packages/doc/content/components/components/drawer/index.mdx +++ b/packages/doc/content/components/components/drawer/index.mdx @@ -28,41 +28,256 @@ render(() => { alert('This is your custom action'); }; + const BoxContent = styled(Box)` + height: 100%; + max-width: 340px; + + display: flex; + flex-direction: column; + + margin-top: 100px; + `; + return ( <> - - - - Drawer title - - - - - - - - - Cancel - - + + + + + + + + + + + + Large button + + + + + ); +}); +``` + +### Drawer with back button + +```javascript state +render(() => { + const [isOpen, setIsOpen] = useState(false); + + const handleOpen = () => { + setIsOpen(true); + }; + + const handleOnClose = () => { + setIsOpen(false); + }; + + const handleOnAction = () => { + alert('This is your custom action'); + }; + + const BoxContent = styled(Box)` + height: 100%; + max-width: 340px; + + display: flex; + flex-direction: column; + + margin-top: 100px; + `; + + return ( + <> + + + + + + + + + + + + + Large button + + + + + ); +}); +``` + +### Drawer with divider on header + +```javascript state +render(() => { + const [isOpen, setIsOpen] = useState(false); + + const handleOpen = () => { + setIsOpen(true); + }; + + const handleOnClose = () => { + setIsOpen(false); + }; + + const handleOnAction = () => { + alert('This is your custom action'); + }; + + const BoxContent = styled(Box)` + height: 100%; + max-width: 340px; + + display: flex; + flex-direction: column; + + margin-top: 100px; + `; + + return ( + <> + + + + + + + + + + + + + Large button + + + + + ); +}); +``` + +### Drawer with no close button + +```javascript state +render(() => { + const [isOpen, setIsOpen] = useState(false); + + const handleOpen = () => { + setIsOpen(true); + }; + + const handleOnClose = () => { + setIsOpen(false); + }; + + const handleOnAction = () => { + alert('This is your custom action'); + }; + + const BoxContent = styled(Box)` + height: 100%; + max-width: 340px; + + display: flex; + flex-direction: column; + + margin-top: 100px; + `; + + return ( + <> + + + + + + + + + + + + + Large button + + + + + ); +}); +``` + +### Drawer with no header + +```javascript state +render(() => { + const [isOpen, setIsOpen] = useState(false); + + const handleOpen = () => { + setIsOpen(true); + }; + + const handleOnClose = () => { + setIsOpen(false); + }; + + const handleOnAction = () => { + alert('This is your custom action'); + }; + + const BoxContent = styled(Box)` + height: 100%; + max-width: 340px; + + display: flex; + flex-direction: column; + + margin-top: 100px; + `; + + return ( + <> + + + + + + + + + + + Large button + + + ); }); @@ -70,4 +285,8 @@ render(() => { ### Props +#### Drawer + +#### Drawer.Header + diff --git a/packages/yoga/package.json b/packages/yoga/package.json index dddd5e6333..f64d5b40f5 100644 --- a/packages/yoga/package.json +++ b/packages/yoga/package.json @@ -52,8 +52,10 @@ "react-phone-input-2": "^2.15.1" }, "devDependencies": { + "@testing-library/dom": "^9.2.0", "@testing-library/react": "^12.0.4", "@testing-library/react-native": "^9.1.0", + "@testing-library/user-event": "^14.4.3", "babel-plugin-inline-react-svg": "^1.1.1", "styled-components": "^4.4.0" }, diff --git a/packages/yoga/src/BottomSheet/web/BottomSheet.test.jsx b/packages/yoga/src/BottomSheet/web/BottomSheet.test.jsx index 8fa089b0ed..c130bbcc20 100644 --- a/packages/yoga/src/BottomSheet/web/BottomSheet.test.jsx +++ b/packages/yoga/src/BottomSheet/web/BottomSheet.test.jsx @@ -66,8 +66,8 @@ describe('', () => { it('should show the close button', () => { render( - {}}> - Title + {}}> + {}}>Title , ); diff --git a/packages/yoga/src/Dialog/web/Dialog.jsx b/packages/yoga/src/Dialog/web/Dialog.jsx index 0809438b21..ceb01606ea 100644 --- a/packages/yoga/src/Dialog/web/Dialog.jsx +++ b/packages/yoga/src/Dialog/web/Dialog.jsx @@ -3,9 +3,8 @@ import { createPortal } from 'react-dom'; import styled from 'styled-components'; import { func, bool, node, number, string } from 'prop-types'; -import { Close } from '@gympass/yoga-icons'; import { usePortal, useCombinedRefs } from '../../hooks'; -import { Button, Card, Box } from '../..'; +import { Card } from '../..'; export const StyledDialog = styled(Card)` ${({ @@ -54,13 +53,9 @@ const Overlay = styled.div` `; const Dialog = React.forwardRef( - ( - { isOpen, hideCloseButton, children, dialogId, onClose, zIndex, ...props }, - forwardedRef, - ) => { + ({ isOpen, children, dialogId, onClose, zIndex, ...props }, forwardedRef) => { const dialogRef = useCombinedRefs(forwardedRef); const dialogElement = usePortal(dialogId ?? 'dialog'); - const isCloseButtonVisible = onClose && !hideCloseButton; const closeDialog = useCallback( e => { @@ -97,11 +92,6 @@ const Dialog = React.forwardRef( zIndex={zIndex} > - {isCloseButtonVisible && ( - - - - )} {children} , @@ -118,18 +108,17 @@ Dialog.propTypes = { dialogId: string, /** Control the dialog visibility. */ isOpen: bool, - /** Hide the close button when onClose prop is defined. */ - hideCloseButton: bool, /** Function to close the dialog. */ onClose: func, + backHandler: func, zIndex: number, children: node.isRequired, }; Dialog.defaultProps = { isOpen: false, - hideCloseButton: false, onClose: undefined, + backHandler: undefined, zIndex: 3, dialogId: undefined, }; diff --git a/packages/yoga/src/Dialog/web/Dialog.test.jsx b/packages/yoga/src/Dialog/web/Dialog.test.jsx index 0c6255665a..08e35715df 100644 --- a/packages/yoga/src/Dialog/web/Dialog.test.jsx +++ b/packages/yoga/src/Dialog/web/Dialog.test.jsx @@ -28,7 +28,7 @@ describe('', () => { const { baseElement } = render( - Title + Title Subtitle @@ -73,7 +73,7 @@ describe('', () => { render( - Title + Title , ); diff --git a/packages/yoga/src/Dialog/web/Header.jsx b/packages/yoga/src/Dialog/web/Header.jsx index b706a66a3c..308d9e4fdf 100644 --- a/packages/yoga/src/Dialog/web/Header.jsx +++ b/packages/yoga/src/Dialog/web/Header.jsx @@ -1,17 +1,39 @@ import React from 'react'; -import Box from '../../Box'; +import { Close } from '@gympass/yoga-icons'; +import { func, node } from 'prop-types'; +import { Box, Button } from '../..'; -const Header = props => ( - -); +function Header({ onClose, children, ...props }) { + return ( + + {onClose && ( + + + + )} + + {children} + + ); +} + +Header.propTypes = { + onClose: func, + children: node, +}; + +Header.defaultProps = { + onClose: undefined, + children: null, +}; Header.displayName = 'Dialog.Header'; diff --git a/packages/yoga/src/Dialog/web/__snapshots__/Dialog.test.jsx.snap b/packages/yoga/src/Dialog/web/__snapshots__/Dialog.test.jsx.snap index 3d731d5723..e65ebaa1f0 100644 --- a/packages/yoga/src/Dialog/web/__snapshots__/Dialog.test.jsx.snap +++ b/packages/yoga/src/Dialog/web/__snapshots__/Dialog.test.jsx.snap @@ -244,7 +244,7 @@ exports[` should match snapshot with close button 1`] = ` fill: #FFFFFF; } -.c6 { +.c3 { margin-bottom: 24px; color: #231B22; font-size: 24px; @@ -272,7 +272,7 @@ exports[` should match snapshot with close button 1`] = ` gap: 24px; } -.c3 { +.c4 { width: 100%; display: -webkit-box; display: -webkit-flex; @@ -284,12 +284,12 @@ exports[` should match snapshot with close button 1`] = ` justify-content: flex-end; } -.c5 { +.c6 { width: 24px; height: 24px; } -.c4 { +.c5 { box-sizing: border-box; text-align: center; outline: none; @@ -332,7 +332,7 @@ exports[` should match snapshot with close button 1`] = ` width: 48px; } -.c4 svg { +.c5 svg { width: 24px; height: 24px; fill: #FFFFFF; @@ -341,39 +341,39 @@ exports[` should match snapshot with close button 1`] = ` transition: fill 0.2s; } -.c4:not([disabled]):hover, -.c4:not([disabled]):focus { +.c5:not([disabled]):hover, +.c5:not([disabled]):focus { box-shadow: 0 4px 8px rgba(216,56,94,0.45); } -.c4:active { +.c5:active { background-color: rgba(216,56,94,0.75); color: #FFFFFF; } -.c4:active svg { +.c5:active svg { fill: #FFFFFF; } -.c4 svg { +.c5 svg { fill: #D8385E; } -.c4:active { +.c5:active { background-color: rgba(255,255,255,0.75); color: rgba(216,56,94,0.75); } -.c4:active svg { +.c5:active svg { fill: rgba(216,56,94,0.75); } -.c4:not([disabled]):hover, -.c4:not([disabled]):focus { +.c5:not([disabled]):hover, +.c5:not([disabled]):focus { box-shadow: 0 4px 8px rgba(255,255,255,0.45); } -.c4 svg { +.c5 svg { width: unset; height: unset; margin-right: unset; @@ -438,24 +438,24 @@ exports[` should match snapshot with close button 1`] = `
-
- -
-
+ > + + + Title
({ padding: { top: spacing.small, - right: spacing.xxxlarge, + right: spacing.xxlarge, bottom: spacing.xxlarge, - left: spacing.xxxlarge, + left: spacing.xxlarge, }, width: { default: 600, diff --git a/packages/yoga/src/Drawer/web/Content.jsx b/packages/yoga/src/Drawer/web/Content.jsx index 41b0515080..92a20d4d38 100644 --- a/packages/yoga/src/Drawer/web/Content.jsx +++ b/packages/yoga/src/Drawer/web/Content.jsx @@ -1,11 +1,16 @@ import styled from 'styled-components'; +import { theme } from '@gympass/yoga'; import Dialog from '../../Dialog'; const Content = styled(Dialog.Content)` - margin: 0; - height: 100%; width: 100%; + height: 100%; + align-self: flex-start; + + margin: ${theme.spacing.zero}; + padding-left: ${theme.spacing.xxlarge}px; + text-align: left; `; diff --git a/packages/yoga/src/Drawer/web/Drawer.jsx b/packages/yoga/src/Drawer/web/Drawer.jsx index 4d34824683..977d68cbf7 100644 --- a/packages/yoga/src/Drawer/web/Drawer.jsx +++ b/packages/yoga/src/Drawer/web/Drawer.jsx @@ -1,9 +1,25 @@ import React from 'react'; import styled from 'styled-components'; import { node, number } from 'prop-types'; +import { theme } from '@gympass/yoga'; import Dialog from '../../Dialog'; const StyledDrawer = styled(Dialog)` + position: absolute; + right: 0; + + align-self: flex-end; + + height: 100%; + padding: ${theme.spacing.zero} !important; + border-radius: ${theme.borders.zero} !important; + + transition: 0.25s ease-in-out; + + animation: content; + animation-duration: 400ms; + animation-fill-mode: forwards; + ${({ theme: { yoga: { @@ -11,18 +27,9 @@ const StyledDrawer = styled(Dialog)` }, }, }) => ` - padding: ${drawer.padding.top}px ${drawer.padding.right}px ${drawer.padding.bottom}px ${drawer.padding.left}px; - width: min(${drawer.width.default}px, 100%); + width: min(${drawer.width.default}px, 100%); `} - border-radius: 0!important; - height: 100%; - align-self: flex-end; - position: absolute; - right: 0; - animation: content; - animation-duration: 400ms; - animation-fill-mode: forwards; - transition: 0.25s ease-in-out; + @keyframes content { 0% { transform: translate3d(100%, 0, 0); diff --git a/packages/yoga/src/Drawer/web/Drawer.test.jsx b/packages/yoga/src/Drawer/web/Drawer.test.jsx index 9dc21ac5d2..d14c54afce 100644 --- a/packages/yoga/src/Drawer/web/Drawer.test.jsx +++ b/packages/yoga/src/Drawer/web/Drawer.test.jsx @@ -1,5 +1,6 @@ import React from 'react'; -import { screen, render, fireEvent, cleanup } from '@testing-library/react'; +import { screen, render, cleanup } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { ThemeProvider, Button } from '../..'; @@ -12,10 +13,10 @@ describe('', () => { const { baseElement } = render( - Title + Subtitle - + , @@ -24,30 +25,212 @@ describe('', () => { expect(baseElement).toMatchSnapshot(); }); - it('should render a minimal drawer', () => { + it('should render a minimal drawer', async () => { const onActionMock = jest.fn(); render( - Title + Subtitle , ); - screen.getByText('Title'); - screen.getByText('Subtitle'); + const title = screen.getByText('Title'); + const subtitle = screen.getByText('Subtitle'); - const button = screen.getByRole('button', { name: /Ok, got it/i }); + const button = screen.getByRole('button', { name: /Ok, got it!/i }); - fireEvent.click(button); + await userEvent.setup().click(button); - expect(onActionMock).toHaveBeenCalledTimes(1); + expect(title).toBeVisible(); + expect(subtitle).toBeVisible(); + expect(onActionMock).toBeCalledTimes(1); + }); + + describe('', () => { + afterEach(cleanup); + + it('should render close bottom', () => { + const onCloseActionMock = jest.fn(); + + render( + + + + + , + ); + + const closeButton = screen.getByRole('button', { + name: 'close-button-drawer', + }); + + expect(closeButton).toBeVisible(); + }); + + it('should render back bottom', () => { + const backHandleActionMock = jest.fn(); + + render( + + + + + , + ); + + const backButton = screen.getByRole('button', { + name: 'back-button-drawer', + }); + + expect(backButton).toBeVisible(); + }); + + it('should render close and back bottons', () => { + const onCloseActionMock = jest.fn(); + const backHandleActionMock = jest.fn(); + + render( + + + + + , + ); + + const backButton = screen.getByRole('button', { + name: 'back-button-drawer', + }); + const closeButton = screen.getByRole('button', { + name: 'close-button-drawer', + }); + + expect(backButton).toBeVisible(); + expect(closeButton).toBeVisible(); + }); + + it('should render divider component', () => { + render( + + + + + , + ); + + const divider = screen.getByRole('separator', { name: 'divider-drawer' }); + + expect(divider).toBeInTheDocument(); + }); + + it('should render drawer without drawer.header', async () => { + const onButtonActionMock = jest.fn(); + + render( + + + Subtitle + + + + + , + ); + + const headerDrawer = screen.queryByRole('heading', { + name: 'header-drawer', + }); + + const subtitle = screen.getByText('Subtitle'); + + await userEvent + .setup() + .click(screen.getByRole('button', { name: /Ok, got it!/i })); + + expect(onButtonActionMock).toBeCalledTimes(1); + + expect(headerDrawer).not.toBeInTheDocument(); + expect(subtitle).toBeVisible(); + }); + + it('should render onClose, backHandler and divider', async () => { + const onCloseActionMock = jest.fn(); + const backHandleActionMock = jest.fn(); + + render( + + + + + , + ); + + const closeButton = screen.getByRole('button', { + name: 'close-button-drawer', + }); + const backButton = screen.getByRole('button', { + name: 'back-button-drawer', + }); + + const divider = screen.getByRole('separator', { name: 'divider-drawer' }); + + expect(closeButton).toBeVisible(); + expect(backButton).toBeVisible(); + expect(divider).toBeVisible(); + }); + + it('should call onClose function', async () => { + const onCloseActionMock = jest.fn(); + + render( + + + + + , + ); + + await userEvent + .setup() + .click(screen.getByRole('button', { name: 'close-button-drawer' })); + + expect(onCloseActionMock).toBeCalledTimes(1); + }); + + it('should call backHandler function', async () => { + const backHandleActionMock = jest.fn(); + + render( + + + + + , + ); + + await userEvent + .setup() + .click(screen.getByRole('button', { name: 'back-button-drawer' })); + + expect(backHandleActionMock).toBeCalledTimes(1); + }); }); }); diff --git a/packages/yoga/src/Drawer/web/Footer.jsx b/packages/yoga/src/Drawer/web/Footer.jsx index e3b6f25b15..b18c3c8599 100644 --- a/packages/yoga/src/Drawer/web/Footer.jsx +++ b/packages/yoga/src/Drawer/web/Footer.jsx @@ -3,7 +3,18 @@ import React from 'react'; import Box from '../../Box'; function Footer(props) { - return ; + return ( + + ); } Footer.displayName = 'Drawer.Footer'; diff --git a/packages/yoga/src/Drawer/web/Header.jsx b/packages/yoga/src/Drawer/web/Header.jsx index 75efff709f..e61517b260 100644 --- a/packages/yoga/src/Drawer/web/Header.jsx +++ b/packages/yoga/src/Drawer/web/Header.jsx @@ -1,9 +1,100 @@ import React from 'react'; +import { bool, string, func } from 'prop-types'; +import { Close } from '@gympass/yoga-icons'; import Box from '../../Box'; +import { Divider, Heading } from '../..'; -const Header = props => ( - -); +function Header({ onClose, title, backHandler, divider, hideCloseButton }) { + function showCloseButton() { + if (onClose && !hideCloseButton) { + return ( + + ); + } + + return null; + } + + function showTitle() { + if (title) { + return ( + + {title} + + ); + } + + return null; + } + + function showBackButton() { + if (backHandler) { + return ( + + ); + } + + return null; + } + + function showDivider() { + if (divider) { + return ( + + + + ); + } + + return null; + } + + return ( + + + + {showBackButton()} + + {showTitle()} + + {showCloseButton()} + + + + {showDivider()} + + ); +} + +Header.propTypes = { + onClose: func, + title: string, + backHandler: func, + divider: bool, + hideCloseButton: bool, +}; + +Header.defaultProps = { + onClose: undefined, + title: undefined, + backHandler: undefined, + divider: false, + hideCloseButton: false, +}; Header.displayName = 'Drawer.Header'; diff --git a/packages/yoga/src/Drawer/web/__snapshots__/Drawer.test.jsx.snap b/packages/yoga/src/Drawer/web/__snapshots__/Drawer.test.jsx.snap index 1a924a4a4f..a7cbf5043f 100644 --- a/packages/yoga/src/Drawer/web/__snapshots__/Drawer.test.jsx.snap +++ b/packages/yoga/src/Drawer/web/__snapshots__/Drawer.test.jsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` should match snapshot 1`] = ` -.c8 { +.c14 { box-sizing: border-box; text-align: center; outline: none; @@ -40,7 +40,7 @@ exports[` should match snapshot 1`] = ` text-decoration: none; } -.c8 svg { +.c14 svg { width: 24px; height: 24px; fill: #FFFFFF; @@ -49,26 +49,47 @@ exports[` should match snapshot 1`] = ` transition: fill 0.2s; } -.c8:not([disabled]):hover, -.c8:not([disabled]):focus { +.c14:not([disabled]):hover, +.c14:not([disabled]):focus { box-shadow: 0 4px 8px rgba(35,27,34,0.45); } -.c8:active { +.c14:active { background-color: rgba(35,27,34,0.75); color: #FFFFFF; } -.c8:active svg { +.c14:active svg { fill: #FFFFFF; } .c4 { width: 100%; - color: #231B22; } .c5 { + padding-top: 16px; + padding-right: 16px; + padding-left: 40px; +} + +.c8 { + width: 100%; + text-align: center; +} + +.c10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c11 { margin-bottom: 32px; color: #6B6B78; font-size: 16px; @@ -76,7 +97,11 @@ exports[` should match snapshot 1`] = ` text-align: center; } -.c7 { +.c13 { + padding-top: 16px; + padding-right: 16px; + padding-bottom: 40px; + padding-left: 40px; width: 100%; display: -webkit-box; display: -webkit-flex; @@ -84,6 +109,16 @@ exports[` should match snapshot 1`] = ` display: flex; } +.c9 { + margin: 0; + padding: 0; + font-size: 16px; + font-weight: 500; + font-family: Rubik; + color: #231B22; + font-size: 14px; +} + .c1 { padding: 16px 16px 16px 16px; border-radius: 8px; @@ -131,33 +166,59 @@ exports[` should match snapshot 1`] = ` background-color: rgba(35,27,34,0.48); } +.c6 { + background: #FFFFFF; + padding: 16px 20px; + width: 100%; + min-height: 56px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0; +} + +.c7 { + width: 24px; + height: 24px; +} + .c3 { - padding: 16px 56px 40px 56px; - width: min(600px,100%); - border-radius: 0!important; - height: 100%; + position: absolute; + right: 0; -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; - position: absolute; - right: 0; + height: 100%; + padding: 0 !important; + border-radius: 0 !important; + -webkit-transition: 0.25s ease-in-out; + transition: 0.25s ease-in-out; -webkit-animation: content; animation: content; -webkit-animation-duration: 400ms; animation-duration: 400ms; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; - -webkit-transition: 0.25s ease-in-out; - transition: 0.25s ease-in-out; + width: min(600px,100%); } -.c6 { - margin: 0; - height: 100%; +.c12 { width: 100%; + height: 100%; -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; + margin: 0; + padding-left: 40px; text-align: left; } @@ -173,28 +234,58 @@ exports[` should match snapshot 1`] = `
-
- Title -
+
+
+
+
+

+ Title +

+
+
+
+
+
+
+
Subtitle
diff --git a/yarn.lock b/yarn.lock index 4d9caec23f..4181a4f72f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4070,6 +4070,20 @@ lz-string "^1.4.4" pretty-format "^27.0.2" +"@testing-library/dom@^9.2.0": + version "9.2.0" + resolved "https://registry.us.gympass.cloud/repository/npm-group/@testing-library/dom/-/dom-9.2.0.tgz#0e1f45e956f2a16f471559c06edd8827c4832f04" + integrity sha512-xTEnpUKiV/bMyEsE5bT4oYA0x0Z/colMtxzUY8bKyPXBNLn/e0V4ZjBZkEhms0xE4pv9QsPfSRu9AWS4y5wGvA== + dependencies: + "@babel/code-frame" "^7.10.4" + "@babel/runtime" "^7.12.5" + "@types/aria-query" "^5.0.1" + aria-query "^5.0.0" + chalk "^4.1.0" + dom-accessibility-api "^0.5.9" + lz-string "^1.5.0" + pretty-format "^27.0.2" + "@testing-library/jest-dom@^5.16.4": version "5.16.4" resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.16.4.tgz#938302d7b8b483963a3ae821f1c0808f872245cd" @@ -4113,6 +4127,11 @@ "@testing-library/dom" "^8.0.0" "@types/react-dom" "<18.0.0" +"@testing-library/user-event@^14.4.3": + version "14.4.3" + resolved "https://registry.us.gympass.cloud/repository/npm-group/@testing-library/user-event/-/user-event-14.4.3.tgz#af975e367743fa91989cd666666aec31a8f50591" + integrity sha512-kCUc5MEwaEMakkO5x7aoD+DLi02ehmEM2QCGWvNqAS1dV/fAvORWEjnjsEIvml59M7Y5kCkWN6fCCyPOe8OL6Q== + "@tokenizer/token@^0.3.0": version "0.3.0" resolved "https://registry.yarnpkg.com/@tokenizer/token/-/token-0.3.0.tgz#fe98a93fe789247e998c75e74e9c7c63217aa276" @@ -4177,6 +4196,11 @@ resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.2.tgz#ed4e0ad92306a704f9fb132a0cfcf77486dbe2bc" integrity sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig== +"@types/aria-query@^5.0.1": + version "5.0.1" + resolved "https://registry.us.gympass.cloud/repository/npm-group/@types/aria-query/-/aria-query-5.0.1.tgz#3286741fb8f1e1580ac28784add4c7a1d49bdfbc" + integrity sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q== + "@types/babel__core@^7.0.0", "@types/babel__core@^7.1.14": version "7.1.19" resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.19.tgz#7b497495b7d1b4812bdb9d02804d0576f43ee460" @@ -15079,6 +15103,11 @@ lz-string@^1.4.4: resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26" integrity sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ== +lz-string@^1.5.0: + version "1.5.0" + resolved "https://registry.us.gympass.cloud/repository/npm-group/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941" + integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ== + magic-string@^0.25.0, magic-string@^0.25.1: version "0.25.9" resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c" @@ -20339,7 +20368,7 @@ shallowequal@^1.0.1, shallowequal@^1.1.0: sharp@0.28.0, sharp@^0.27.0: version "0.28.0" - resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.28.0.tgz#93297cec530b3709e11677cf41565d9a654075a0" + resolved "https://registry.us.gympass.cloud/repository/npm-group/sharp/-/sharp-0.28.0.tgz#93297cec530b3709e11677cf41565d9a654075a0" integrity sha512-kGTaWLNMCkLYxkH2Pv7s+5LQBnWQ4mRKXs1XD19AWOxShWvU8b78qaWqTR/4ryNcPORO+qBoBnFF/Lzda5HgkQ== dependencies: color "^3.1.3"