diff --git a/packages/core/upload/admin/src/components/AssetCard/UnknownAssetCard.js b/packages/core/upload/admin/src/components/AssetCard/UnknownAssetCard.js deleted file mode 100644 index 2aba43b4f8..0000000000 --- a/packages/core/upload/admin/src/components/AssetCard/UnknownAssetCard.js +++ /dev/null @@ -1,78 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import styled from 'styled-components'; -import { - Card, - CardAction, - CardAsset, - CardBody, - CardCheckbox, - CardContent, - CardHeader, - CardTitle, - CardSubtitle, -} from '@strapi/parts/Card'; -import { IconButton } from '@strapi/parts/IconButton'; -import EditIcon from '@strapi/icons/EditIcon'; -import EmptyStatePicture from '@strapi/icons/EmptyStatePicture'; -import { useIntl } from 'react-intl'; -import { getTrad } from '../../utils'; - -const Extension = styled.span` - text-transform: uppercase; -`; - -const IconWrapper = styled.span` - svg { - font-size: 3rem; - } -`; - -export const UnknownAssetCard = ({ name, extension, selected, onSelect, onEdit, size }) => { - const { formatMessage } = useIntl(); - - return ( - - - {onSelect && } - {onEdit && ( - - } - /> - - )} - - - - - - - - - {name} - - {extension} - - - - - ); -}; - -UnknownAssetCard.defaultProps = { - selected: false, - onEdit: undefined, - onSelect: undefined, - size: 'M', -}; - -UnknownAssetCard.propTypes = { - extension: PropTypes.string.isRequired, - name: PropTypes.string.isRequired, - onEdit: PropTypes.func, - onSelect: PropTypes.func, - selected: PropTypes.bool, - size: PropTypes.oneOf(['S', 'M']), -}; diff --git a/packages/core/upload/admin/src/components/AssetCard/tests/UnknownAssetCard.test.js b/packages/core/upload/admin/src/components/AssetCard/tests/UnknownAssetCard.test.js deleted file mode 100644 index c4d4f15719..0000000000 --- a/packages/core/upload/admin/src/components/AssetCard/tests/UnknownAssetCard.test.js +++ /dev/null @@ -1,296 +0,0 @@ -import React from 'react'; -import { ThemeProvider, lightTheme } from '@strapi/parts'; -import { render as renderTL } from '@testing-library/react'; -import { UnknownAssetCard } from '../UnknownAssetCard'; -import en from '../../../translations/en.json'; - -jest.mock('../../../utils', () => ({ - ...jest.requireActual('../../../utils'), - getTrad: x => x, -})); - -jest.mock('react-intl', () => ({ - useIntl: () => ({ formatMessage: jest.fn(({ id }) => en[id]) }), -})); - -describe('UnknownAssetCard', () => { - it('snapshots the component', () => { - const { container } = renderTL( - - - - ); - - expect(container).toMatchInlineSnapshot(` - .c12 { - border: 0; - -webkit-clip: rect(0 0 0 0); - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - } - - .c0 { - background: #ffffff; - border-radius: 4px; - box-shadow: 0px 1px 4px rgba(33,33,52,0.1); - } - - .c6 { - padding-top: 8px; - padding-right: 12px; - padding-bottom: 8px; - padding-left: 12px; - } - - .c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - } - - .c4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - } - - .c7 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; - } - - .c3 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - height: 10.25rem; - width: 100%; - background: repeating-conic-gradient(#f6f6f9 0% 25%,transparent 0% 50%) 50% / 20px 20px; - } - - .c9 { - font-weight: 500; - font-size: 0.75rem; - line-height: 1.33; - color: #32324d; - } - - .c10 { - font-weight: 400; - font-size: 0.75rem; - line-height: 1.33; - color: #666687; - } - - .c8 { - word-break: break-all; - } - - .c2 { - position: relative; - border-bottom: 1px solid #eaeaef; - } - - .c11 { - text-transform: uppercase; - } - - .c5 svg { - font-size: 3rem; - } - -
-
-
-
-
- - - - - - - - - - - - - - - - -
-
-
-
-
-
-

- hello.png -

-
- - png - -
-
-
-
-
-
-

-

-

-
- `); - }); -}); diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/FromUrlForm.test.js b/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/FromUrlForm.test.js deleted file mode 100644 index 74e11bb791..0000000000 --- a/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/FromUrlForm.test.js +++ /dev/null @@ -1,104 +0,0 @@ -import React from 'react'; -import { ThemeProvider, lightTheme } from '@strapi/parts'; -import { render as renderTL, screen, fireEvent, waitFor } from '@testing-library/react'; -import { FromUrlForm } from '../FromUrlForm'; -import en from '../../../../translations/en.json'; -import { server } from './server'; - -jest.mock('../../../../utils', () => ({ - ...jest.requireActual('../../../../utils'), - getTrad: x => x, -})); - -jest.mock('react-intl', () => ({ - useIntl: () => ({ formatMessage: jest.fn(({ id }) => en[id]) }), -})); - -describe('FromUrlForm', () => { - beforeAll(() => server.listen()); - afterEach(() => server.resetHandlers()); - afterAll(() => server.close()); - - it('snapshots the component with 4 URLs: 3 valid and one in failure', async () => { - const onAddAssetSpy = jest.fn(); - - renderTL( - - - - ); - - const urls = [ - 'http://localhost:5000/an-image.png', - 'http://localhost:5000/a-pdf.pdf', - 'http://localhost:5000/a-video.mp4', - 'http://localhost:5000/not-working-like-cors.lutin', - ].join('\n'); - - fireEvent.change(screen.getByLabelText('URL'), { target: { value: urls } }); - fireEvent.click(screen.getByText('Next')); - - const expectedAssets = [ - { - name: 'http://localhost:5000/an-image.png', - ext: 'png', - mime: 'image/png', - source: 'url', - type: 'image', - url: 'http://localhost:5000/an-image.png', - rawFile: new File([''], 'image/png'), - }, - { - name: 'http://localhost:5000/a-pdf.pdf', - ext: 'pdf', - mime: 'application/pdf', - source: 'url', - type: 'doc', - url: 'http://localhost:5000/a-pdf.pdf', - rawFile: new File([''], 'application/pdf'), - }, - { - name: 'http://localhost:5000/a-video.mp4', - ext: 'mp4', - mime: 'video/mp4', - source: 'url', - type: 'video', - url: 'http://localhost:5000/a-video.mp4', - rawFile: new File([''], 'video/mp4'), - }, - { - name: 'http://localhost:5000/not-working-like-cors.lutin', - ext: 'lutin', - mime: 'application/json', - source: 'url', - type: 'doc', - url: 'http://localhost:5000/not-working-like-cors.lutin', - rawFile: new File([''], 'something/weird'), - }, - ]; - await waitFor(() => expect(onAddAssetSpy).toHaveBeenCalledWith(expectedAssets)); - }); - - it('shows an error message when the asset does not exist', async () => { - const onAddAssetSpy = jest.fn(); - - renderTL( - - - - ); - - const urls = [ - 'http://localhost:5000/an-image.png', - 'http://localhost:5000/a-pdf.pdf', - 'http://localhost:5000/a-video.mp4', - 'http://localhost:5000/not-working-like-cors.lutin', - 'http://localhost:1234/some-where-not-existing.jpg', - ].join('\n'); - - fireEvent.change(screen.getByLabelText('URL'), { target: { value: urls } }); - fireEvent.click(screen.getByText('Next')); - - await waitFor(() => expect(screen.getByText('Network Error')).toBeInTheDocument()); - }); -}); diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js index b88331b98e..73799d39b7 100644 --- a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js +++ b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js @@ -11,7 +11,6 @@ import { KeyboardNavigable } from '@strapi/parts/KeyboardNavigable'; import { DocAssetCard } from '../../AssetCard/DocAssetCard'; import { ImageAssetCard } from '../../AssetCard/ImageAssetCard'; import { VideoAssetCard } from '../../AssetCard/VideoAssetCard'; -import { UnknownAssetCard } from '../../AssetCard/UnknownAssetCard'; import { UploadingAssetCard } from '../../AssetCard/UploadingAssetCard'; import { getTrad } from '../../../utils'; import { AssetType, AssetSource } from '../../../constants'; @@ -148,19 +147,6 @@ export const PendingAssetStep = ({ ); } - if (asset.type === AssetType.Unknown) { - return ( - - - - ); - } - return ( diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/PendingAssetStep.test.js b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/PendingAssetStep.test.js index 162ef15615..a36aab666c 100644 --- a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/PendingAssetStep.test.js +++ b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/PendingAssetStep.test.js @@ -70,7 +70,7 @@ describe('PendingAssetStep', () => { ); expect(container).toMatchInlineSnapshot(` - .c52 { + .c50 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -115,7 +115,7 @@ describe('PendingAssetStep', () => { align-items: center; } - .c49 { + .c47 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -231,11 +231,11 @@ describe('PendingAssetStep', () => { border-bottom: 1px solid #eaeaef; } - .c48 { + .c46 { border-top: 1px solid #eaeaef; } - .c50 > * + * { + .c48 > * + * { margin-left: 8px; } @@ -400,7 +400,7 @@ describe('PendingAssetStep', () => { background: #4945ff; } - .c51 { + .c49 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -412,7 +412,7 @@ describe('PendingAssetStep', () => { background: #ffffff; } - .c51 .sc-fFYUIl { + .c49 .sc-fFYUIl { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -423,52 +423,52 @@ describe('PendingAssetStep', () => { align-items: center; } - .c51 .c16 { + .c49 .c16 { color: #ffffff; } - .c51[aria-disabled='true'] { + .c49[aria-disabled='true'] { border: 1px solid #dcdce4; background: #eaeaef; } - .c51[aria-disabled='true'] .c16 { + .c49[aria-disabled='true'] .c16 { color: #666687; } - .c51[aria-disabled='true'] svg > g, - .c51[aria-disabled='true'] svg path { + .c49[aria-disabled='true'] svg > g, + .c49[aria-disabled='true'] svg path { fill: #666687; } - .c51[aria-disabled='true']:active { + .c49[aria-disabled='true']:active { border: 1px solid #dcdce4; background: #eaeaef; } - .c51[aria-disabled='true']:active .c16 { + .c49[aria-disabled='true']:active .c16 { color: #666687; } - .c51[aria-disabled='true']:active svg > g, - .c51[aria-disabled='true']:active svg path { + .c49[aria-disabled='true']:active svg > g, + .c49[aria-disabled='true']:active svg path { fill: #666687; } - .c51:hover { + .c49:hover { background-color: #f6f6f9; } - .c51:active { + .c49:active { background-color: #eaeaef; } - .c51 .c16 { + .c49 .c16 { color: #32324d; } - .c51 svg > g, - .c51 svg path { + .c49 svg > g, + .c49 svg path { fill: #32324d; } @@ -724,14 +724,6 @@ describe('PendingAssetStep', () => { text-transform: uppercase; } - .c47 { - text-transform: uppercase; - } - - .c46 svg { - font-size: 3rem; - } - @media (max-width:68.75rem) { .c19 { grid-column: span; @@ -1071,86 +1063,19 @@ describe('PendingAssetStep', () => { class="c38" > - - - - - - - - - - - - + @@ -1173,12 +1098,25 @@ describe('PendingAssetStep', () => { class="c29" > mp4 +
+
+ + Doc + +
+
@@ -1189,17 +1127,17 @@ describe('PendingAssetStep', () => {

({ ...jest.requireActual('../../../utils'), @@ -10,17 +12,28 @@ jest.mock('../../../utils', () => ({ })); jest.mock('react-intl', () => ({ - useIntl: () => ({ formatMessage: jest.fn(({ id }) => en[id]) }), + useIntl: () => ({ formatMessage: jest.fn(({ id }) => en[id] || id) }), })); -const render = (props = { onSucces: () => {}, onError: () => {} }) => +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + refetchOnWindowFocus: false, + }, + }, +}); + +const render = (props = { onSuccess: () => {}, onClose: () => {} }) => renderTL( - - - , + + + + + , { container: document.body } ); +<<<<<<< HEAD describe('', () => { it('snapshots the component', () => { const { container } = render(); @@ -800,5 +813,171 @@ describe('', () => {

`); +======= +describe('UploadAssetDialog', () => { + beforeAll(() => server.listen()); + afterEach(() => server.resetHandlers()); + afterAll(() => server.close()); + + describe('from computer', () => { + it('snapshots the component', () => { + const { container } = render(); + + expect(container).toMatchSnapshot(); + }); + + it('closes the dialog when clicking on cancel on the add asset step', () => { + const onCloseSpy = jest.fn(); + render({ onClose: onCloseSpy, onSuccess: () => {} }); + + fireEvent.click(screen.getByText('app.components.Button.cancel')); + + expect(onCloseSpy).toBeCalled(); + }); + + it('closes the dialog when clicking on cancel on the pending asset step', () => { + const file = new File(['Some stuff'], 'test.png', { type: 'image/png' }); + const onCloseSpy = jest.fn(); + + const { container } = render({ onClose: onCloseSpy, onSuccess: () => {} }); + + const fileList = [file]; + fileList.item = i => fileList[i]; + + fireEvent.change(container.querySelector('[type="file"]'), { target: { files: fileList } }); + fireEvent.click(screen.getByText('app.components.Button.cancel')); + + expect(onCloseSpy).toBeCalled(); + }); + + [ + ['png', 'image/png', 'Image'], + ['mp4', 'video/mp4', 'Video'], + ['pdf', 'application/pdf', 'Doc'], + ['unknown', 'unknown', 'Doc'], + ].forEach(([ext, mime, assetType]) => { + it(`shows a valid ${mime} file`, () => { + const onCloseSpy = jest.fn(); + + const file = new File(['Some stuff'], `test.${ext}`, { type: mime }); + + const fileList = [file]; + fileList.item = i => fileList[i]; + + const { container } = render({ onClose: onCloseSpy, onSuccess: () => {} }); + + fireEvent.change(container.querySelector('[type="file"]'), { + target: { files: fileList }, + }); + + expect(screen.getByText('Upload new asset')).toBeInTheDocument(); + expect(screen.getByText('{number} assets selected')).toBeInTheDocument(); + expect( + screen.getByText('Manage the assets before adding them to the Media Library') + ).toBeInTheDocument(); + expect(screen.getByText(`test.${ext}`)).toBeInTheDocument(); + expect(screen.getByText(ext)).toBeInTheDocument(); + expect(screen.getByText(assetType)).toBeInTheDocument(); + }); + }); + }); + + describe('from url', () => { + it('snapshots the component', () => { + const { container } = render(); + + fireEvent.click(screen.getByText('From url')); + + expect(container).toMatchSnapshot(); + }); + + it('shows an error message when the asset does not exist', async () => { + render(); + fireEvent.click(screen.getByText('From url')); + + const urls = [ + 'http://localhost:5000/an-image.png', + 'http://localhost:5000/a-pdf.pdf', + 'http://localhost:5000/a-video.mp4', + 'http://localhost:5000/not-working-like-cors.lutin', + 'http://localhost:1234/some-where-not-existing.jpg', + ].join('\n'); + + fireEvent.change(screen.getByLabelText('URL'), { target: { value: urls } }); + fireEvent.click(screen.getByText('Next')); + + await waitFor(() => expect(screen.getByText('Network Error')).toBeInTheDocument()); + }); + + it('snapshots the component with 4 URLs: 3 valid and one in failure', async () => { + render(); + fireEvent.click(screen.getByText('From url')); + + const urls = [ + 'http://localhost:5000/an-image.png', + 'http://localhost:5000/a-pdf.pdf', + 'http://localhost:5000/a-video.mp4', + 'http://localhost:5000/not-working-like-cors.lutin', + ].join('\n'); + + fireEvent.change(screen.getByLabelText('URL'), { target: { value: urls } }); + fireEvent.click(screen.getByText('Next')); + + const assets = [ + { + name: 'http://localhost:5000/an-image.png', + ext: 'png', + mime: 'image/png', + source: 'url', + type: 'image', + url: 'http://localhost:5000/an-image.png', + rawFile: new File([''], 'image/png'), + }, + { + name: 'http://localhost:5000/a-pdf.pdf', + ext: 'pdf', + mime: 'application/pdf', + source: 'url', + type: 'doc', + url: 'http://localhost:5000/a-pdf.pdf', + rawFile: new File([''], 'application/pdf'), + }, + { + name: 'http://localhost:5000/a-video.mp4', + ext: 'mp4', + mime: 'video/mp4', + source: 'url', + type: 'video', + url: 'http://localhost:5000/a-video.mp4', + rawFile: new File([''], 'video/mp4'), + }, + { + name: 'http://localhost:5000/not-working-like-cors.lutin', + ext: 'lutin', + mime: 'application/json', + source: 'url', + type: 'doc', + url: 'http://localhost:5000/not-working-like-cors.lutin', + rawFile: new File([''], 'something/weird'), + }, + ]; + + await waitFor(() => expect(screen.getByText('{number} assets selected')).toBeInTheDocument()); + expect(screen.getByText('Upload new asset')).toBeInTheDocument(); + expect( + screen.getByText('Manage the assets before adding them to the Media Library') + ).toBeInTheDocument(); + + assets.forEach(asset => { + const dialog = within(screen.getByRole('dialog')); + const card = within(dialog.getAllByLabelText(asset.name)[0]); + + expect(card.getByText(asset.ext)).toBeInTheDocument(); + expect( + card.getByText(asset.type.charAt(0).toUpperCase() + asset.type.slice(1)) + ).toBeInTheDocument(); + }); + }); +>>>>>>> 86fa7a6ff (Testing upload asset dialog (#11285)) }); }); diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/tests/__snapshots__/UploadAssetDialog.test.js.snap b/packages/core/upload/admin/src/components/UploadAssetDialog/tests/__snapshots__/UploadAssetDialog.test.js.snap new file mode 100644 index 0000000000..7de94c8fad --- /dev/null +++ b/packages/core/upload/admin/src/components/UploadAssetDialog/tests/__snapshots__/UploadAssetDialog.test.js.snap @@ -0,0 +1,1606 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`UploadAssetDialog from computer snapshots the component 1`] = ` +.c0 { + border: 0; + -webkit-clip: rect(0 0 0 0); + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +.c2 { + background: #ffffff; + border-radius: 4px; + box-shadow: 0px 2px 15px rgba(33,33,52,0.1); +} + +.c4 { + background: #f6f6f9; + padding-top: 16px; + padding-right: 20px; + padding-bottom: 16px; + padding-left: 20px; +} + +.c1 { + position: fixed; + z-index: 4; + inset: 0; + background: rgb(220,220,228,0.8); + padding: 0 40px; + 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; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + +.c3 { + width: 51.875rem; +} + +.c6 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -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; +} + +.c35 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c9 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + cursor: pointer; + padding: 8px; + border-radius: 4px; + background: #ffffff; + border: 1px solid #dcdce4; + position: relative; + outline: none; +} + +.c9 svg { + height: 12px; + width: 12px; +} + +.c9 svg > g, +.c9 svg path { + fill: #ffffff; +} + +.c9[aria-disabled='true'] { + pointer-events: none; +} + +.c9:after { + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; + border-radius: 8px; + content: ''; + position: absolute; + top: -4px; + bottom: -4px; + left: -4px; + right: -4px; + border: 2px solid transparent; +} + +.c9:focus-visible { + outline: none; +} + +.c9:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; +} + +.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; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2rem; + width: 2rem; +} + +.c10 svg > g, +.c10 svg path { + fill: #8e8ea9; +} + +.c10:hover svg > g, +.c10:hover svg path { + fill: #666687; +} + +.c10:active svg > g, +.c10:active svg path { + fill: #a5a5ba; +} + +.c10[aria-disabled='true'] { + background-color: #eaeaef; +} + +.c10[aria-disabled='true'] svg path { + fill: #666687; +} + +.c5 { + border-bottom: 1px solid #eaeaef; +} + +.c34 { + border-top: 1px solid #eaeaef; +} + +.c36 > * + * { + margin-left: 8px; +} + +.c28 { + font-weight: 500; + font-size: 1rem; + line-height: 1.25; + color: #666687; +} + +.c7 { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #32324d; +} + +.c8 { + font-weight: 600; + line-height: 1.14; +} + +.c19 { + background: #eaeaef; +} + +.c20 { + height: 1px; + border: none; + margin: 0; +} + +.c11 { + padding-top: 24px; + padding-right: 40px; + padding-left: 40px; +} + +.c21 { + padding-top: 24px; + padding-right: 40px; + padding-bottom: 24px; + padding-left: 40px; +} + +.c22 { + background: #f6f6f9; + padding-top: 64px; + padding-bottom: 64px; + border-radius: 4px; + border-color: #c0c0cf; + border: 1px solid #c0c0cf; +} + +.c27 { + padding-top: 12px; + padding-bottom: 20px; +} + +.c14 { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #4945ff; +} + +.c18 { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #666687; +} + +.c15 { + font-weight: 600; + line-height: 1.14; +} + +.c16 { + font-weight: 600; + font-size: 0.6875rem; + line-height: 1.45; + text-transform: uppercase; +} + +.c12 { + padding: 16px; +} + +.c13 { + border-bottom: 2px solid #4945ff; +} + +.c17 { + border-bottom: 2px solid transparent; +} + +.c32 { + font-weight: 500; + font-size: 0.75rem; + line-height: 1.33; + color: #32324d; +} + +.c29 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + cursor: pointer; + padding: 8px; + border-radius: 4px; + background: #ffffff; + border: 1px solid #dcdce4; + position: relative; + outline: none; +} + +.c29 svg { + height: 12px; + width: 12px; +} + +.c29 svg > g, +.c29 svg path { + fill: #ffffff; +} + +.c29[aria-disabled='true'] { + pointer-events: none; +} + +.c29:after { + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; + border-radius: 8px; + content: ''; + position: absolute; + top: -4px; + bottom: -4px; + left: -4px; + right: -4px; + border: 2px solid transparent; +} + +.c29:focus-visible { + outline: none; +} + +.c29:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; +} + +.c30 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 8px 16px; + background: #4945ff; + border: none; + border: 1px solid #4945ff; + background: #4945ff; +} + +.c30 .sc-cAxRzm { + 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; +} + +.c30 .c31 { + color: #ffffff; +} + +.c30[aria-disabled='true'] { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c30[aria-disabled='true'] .c31 { + color: #666687; +} + +.c30[aria-disabled='true'] svg > g, +.c30[aria-disabled='true'] svg path { + fill: #666687; +} + +.c30[aria-disabled='true']:active { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c30[aria-disabled='true']:active .c31 { + color: #666687; +} + +.c30[aria-disabled='true']:active svg > g, +.c30[aria-disabled='true']:active svg path { + fill: #666687; +} + +.c30:hover { + border: 1px solid #7b79ff; + background: #7b79ff; +} + +.c30:active { + border: 1px solid #4945ff; + background: #4945ff; +} + +.c37 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 8px 16px; + background: #4945ff; + border: none; + border: 1px solid #dcdce4; + background: #ffffff; +} + +.c37 .sc-cAxRzm { + 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; +} + +.c37 .c31 { + color: #ffffff; +} + +.c37[aria-disabled='true'] { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c37[aria-disabled='true'] .c31 { + color: #666687; +} + +.c37[aria-disabled='true'] svg > g, +.c37[aria-disabled='true'] svg path { + fill: #666687; +} + +.c37[aria-disabled='true']:active { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c37[aria-disabled='true']:active .c31 { + color: #666687; +} + +.c37[aria-disabled='true']:active svg > g, +.c37[aria-disabled='true']:active svg path { + fill: #666687; +} + +.c37:hover { + background-color: #f6f6f9; +} + +.c37:active { + background-color: #eaeaef; +} + +.c37 .c31 { + color: #32324d; +} + +.c37 svg > g, +.c37 svg path { + fill: #32324d; +} + +.c24 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c33 { + border: 0; + -webkit-clip: rect(0 0 0 0); + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +.c25 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c26 { + font-size: 3.75rem; +} + +.c26 svg path { + fill: #4945ff; +} + +.c23 { + border-style: dashed; +} + + +
+

+

+

+
+
+
+ +
+
+ +`; + +exports[`UploadAssetDialog from url snapshots the component 1`] = ` + + .c0 { + border: 0; + -webkit-clip: rect(0 0 0 0); + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +
+

+

+

+ .c1 { + background: #ffffff; + border-radius: 4px; + box-shadow: 0px 2px 15px rgba(33,33,52,0.1); +} + +.c3 { + background: #f6f6f9; + padding-top: 16px; + padding-right: 20px; + padding-bottom: 16px; + padding-left: 20px; +} + +.c0 { + position: fixed; + z-index: 4; + inset: 0; + background: rgb(220,220,228,0.8); + padding: 0 40px; + 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; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + +.c2 { + width: 51.875rem; +} + +.c5 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -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; +} + +.c29 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + cursor: pointer; + padding: 8px; + border-radius: 4px; + background: #ffffff; + border: 1px solid #dcdce4; + position: relative; + outline: none; +} + +.c8 svg { + height: 12px; + width: 12px; +} + +.c8 svg > g, +.c8 svg path { + fill: #ffffff; +} + +.c8[aria-disabled='true'] { + pointer-events: none; +} + +.c8:after { + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; + border-radius: 8px; + content: ''; + position: absolute; + top: -4px; + bottom: -4px; + left: -4px; + right: -4px; + border: 2px solid transparent; +} + +.c8:focus-visible { + outline: none; +} + +.c8:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; +} + +.c9 { + 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; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2rem; + width: 2rem; +} + +.c9 svg > g, +.c9 svg path { + fill: #8e8ea9; +} + +.c9:hover svg > g, +.c9:hover svg path { + fill: #666687; +} + +.c9:active svg > g, +.c9:active svg path { + fill: #a5a5ba; +} + +.c9[aria-disabled='true'] { + background-color: #eaeaef; +} + +.c9[aria-disabled='true'] svg path { + fill: #666687; +} + +.c4 { + border-bottom: 1px solid #eaeaef; +} + +.c28 { + border-top: 1px solid #eaeaef; +} + +.c30 > * + * { + margin-left: 8px; +} + +.c6 { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #32324d; +} + +.c7 { + font-weight: 600; + line-height: 1.14; +} + +.c18 { + background: #eaeaef; +} + +.c19 { + height: 1px; + border: none; + margin: 0; +} + +.c10 { + padding-top: 24px; + padding-right: 40px; + padding-left: 40px; +} + +.c20 { + padding-top: 24px; + padding-right: 40px; + padding-bottom: 24px; + padding-left: 40px; +} + +.c17 { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #4945ff; +} + +.c13 { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #666687; +} + +.c14 { + font-weight: 600; + line-height: 1.14; +} + +.c15 { + font-weight: 600; + font-size: 0.6875rem; + line-height: 1.45; + text-transform: uppercase; +} + +.c11 { + padding: 16px; +} + +.c16 { + border-bottom: 2px solid #4945ff; +} + +.c12 { + border-bottom: 2px solid transparent; +} + +.c24 { + font-weight: 500; + font-size: 0.75rem; + line-height: 1.33; + color: #32324d; +} + +.c27 { + font-weight: 400; + font-size: 0.75rem; + line-height: 1.33; + color: #666687; +} + +.c23 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c25 { + border: 1px solid #dcdce4; + border-radius: 4px; + padding-left: 16px; + padding-right: 16px; + padding-top: 12px; + padding-bottom: 12px; + background: #ffffff; + outline: none; + box-shadow: 0; + -webkit-transition-property: border-color,box-shadow,fill; + transition-property: border-color,box-shadow,fill; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; +} + +.c25:focus-within { + border: 1px solid #4945ff; + box-shadow: #4945ff 0px 0px 0px 2px; +} + +.c26 { + display: block; + width: 100%; + font-weight: 400; + font-size: 0.875rem; + border: none; + color: #32324d; + resize: none; +} + +.c26::-webkit-input-placeholder { + color: #8e8ea9; + opacity: 1; +} + +.c26::-moz-placeholder { + color: #8e8ea9; + opacity: 1; +} + +.c26:-ms-input-placeholder { + color: #8e8ea9; + opacity: 1; +} + +.c26::placeholder { + color: #8e8ea9; + opacity: 1; +} + +.c26:focus-within { + outline: none; +} + +.c22 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c22 > * { + margin-top: 0; + margin-bottom: 0; +} + +.c22 > * + * { + margin-top: 4px; +} + +.c21 textarea { + height: 5rem; + line-height: 1.25rem; +} + +.c21 textarea::-webkit-input-placeholder { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #8e8ea9; + opacity: 1; +} + +.c21 textarea::-moz-placeholder { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #8e8ea9; + opacity: 1; +} + +.c21 textarea:-ms-input-placeholder { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #8e8ea9; + opacity: 1; +} + +.c21 textarea::placeholder { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #8e8ea9; + opacity: 1; +} + +.c34 { + font-weight: 500; + font-size: 0.75rem; + line-height: 1.33; + color: #32324d; +} + +.c31 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + cursor: pointer; + padding: 8px; + border-radius: 4px; + background: #ffffff; + border: 1px solid #dcdce4; + position: relative; + outline: none; +} + +.c31 svg { + height: 12px; + width: 12px; +} + +.c31 svg > g, +.c31 svg path { + fill: #ffffff; +} + +.c31[aria-disabled='true'] { + pointer-events: none; +} + +.c31:after { + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; + border-radius: 8px; + content: ''; + position: absolute; + top: -4px; + bottom: -4px; + left: -4px; + right: -4px; + border: 2px solid transparent; +} + +.c31:focus-visible { + outline: none; +} + +.c31:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; +} + +.c35 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 8px 16px; + background: #4945ff; + border: none; + border: 1px solid #4945ff; + background: #4945ff; +} + +.c35 .sc-cAxRzm { + 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; +} + +.c35 .c33 { + color: #ffffff; +} + +.c35[aria-disabled='true'] { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c35[aria-disabled='true'] .c33 { + color: #666687; +} + +.c35[aria-disabled='true'] svg > g, +.c35[aria-disabled='true'] svg path { + fill: #666687; +} + +.c35[aria-disabled='true']:active { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c35[aria-disabled='true']:active .c33 { + color: #666687; +} + +.c35[aria-disabled='true']:active svg > g, +.c35[aria-disabled='true']:active svg path { + fill: #666687; +} + +.c35:hover { + border: 1px solid #7b79ff; + background: #7b79ff; +} + +.c35:active { + border: 1px solid #4945ff; + background: #4945ff; +} + +.c32 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 8px 16px; + background: #4945ff; + border: none; + border: 1px solid #dcdce4; + background: #ffffff; +} + +.c32 .sc-cAxRzm { + 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; +} + +.c32 .c33 { + color: #ffffff; +} + +.c32[aria-disabled='true'] { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c32[aria-disabled='true'] .c33 { + color: #666687; +} + +.c32[aria-disabled='true'] svg > g, +.c32[aria-disabled='true'] svg path { + fill: #666687; +} + +.c32[aria-disabled='true']:active { + border: 1px solid #dcdce4; + background: #eaeaef; +} + +.c32[aria-disabled='true']:active .c33 { + color: #666687; +} + +.c32[aria-disabled='true']:active svg > g, +.c32[aria-disabled='true']:active svg path { + fill: #666687; +} + +.c32:hover { + background-color: #f6f6f9; +} + +.c32:active { + background-color: #eaeaef; +} + +.c32 .c33 { + color: #32324d; +} + +.c32 svg > g, +.c32 svg path { + fill: #32324d; +} + +
+
+
+