From 2cb6df703fa7530484e94a4496b3f7609a4a94f2 Mon Sep 17 00:00:00 2001 From: Marvin Frachet Date: Wed, 27 Oct 2021 13:59:04 +0200 Subject: [PATCH] Add select only when multiple is not set (#11375) --- .../lib/src/hooks/useSelectionState/index.js | 10 +- .../getFileExtension/getFileExtension.js | 2 +- .../src/components/AssetCard/AssetCard.js | 90 +++ .../src/components/AssetCard/VideoPreview.js | 3 +- .../admin/src/components/AssetList/index.js | 50 +- .../AssetDialog/BrowseStep/index.js | 6 +- .../MediaLibraryInput/AssetDialog/index.js | 24 +- .../MediaLibraryInput/CarouselAsset.js | 49 ++ .../src/components/MediaLibraryInput/index.js | 50 +- .../PendingAssetStep/PendingAssetStep.js | 38 +- .../tests/PendingAssetStep.test.js | 6 - .../PendingAssetStep.test.js.snap | 544 ++++++++++++------ 12 files changed, 592 insertions(+), 280 deletions(-) create mode 100644 packages/core/upload/admin/src/components/AssetCard/AssetCard.js create mode 100644 packages/core/upload/admin/src/components/MediaLibraryInput/CarouselAsset.js diff --git a/packages/core/helper-plugin/lib/src/hooks/useSelectionState/index.js b/packages/core/helper-plugin/lib/src/hooks/useSelectionState/index.js index 40094c7bb5..a810386ee5 100644 --- a/packages/core/helper-plugin/lib/src/hooks/useSelectionState/index.js +++ b/packages/core/helper-plugin/lib/src/hooks/useSelectionState/index.js @@ -26,5 +26,13 @@ export const useSelectionState = (key, initialValue) => { } }; - return [selections, { selectOne, selectAll }]; + const selectOnly = nextSelection => { + if (selections.indexOf(nextSelection) > -1) { + setSelections([]); + } else { + setSelections([nextSelection]); + } + }; + + return [selections, { selectOne, selectAll, selectOnly }]; }; diff --git a/packages/core/helper-plugin/lib/src/utils/getFileExtension/getFileExtension.js b/packages/core/helper-plugin/lib/src/utils/getFileExtension/getFileExtension.js index 037651ec89..6e93a1a561 100644 --- a/packages/core/helper-plugin/lib/src/utils/getFileExtension/getFileExtension.js +++ b/packages/core/helper-plugin/lib/src/utils/getFileExtension/getFileExtension.js @@ -1,3 +1,3 @@ -const getFileExtension = ext => (ext ? ext.substr(1) : null); +const getFileExtension = ext => (ext && ext[0] === '.' ? ext.substr(1) : ext); export default getFileExtension; diff --git a/packages/core/upload/admin/src/components/AssetCard/AssetCard.js b/packages/core/upload/admin/src/components/AssetCard/AssetCard.js new file mode 100644 index 0000000000..6f6d51cc91 --- /dev/null +++ b/packages/core/upload/admin/src/components/AssetCard/AssetCard.js @@ -0,0 +1,90 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { prefixFileUrlWithBackendUrl, getFileExtension } from '@strapi/helper-plugin'; +import { ImageAssetCard } from './ImageAssetCard'; +import { VideoAssetCard } from './VideoAssetCard'; +import { DocAssetCard } from './DocAssetCard'; +import { AssetType } from '../../constants'; + +export const AssetCard = ({ asset, isSelected, onSelect, onEdit, size }) => { + if (asset.mime.includes(AssetType.Video)) { + return ( + onEdit(asset)} + onSelect={() => onSelect(asset)} + selected={isSelected} + size={size} + /> + ); + } + + if (asset.mime.includes(AssetType.Image)) { + return ( + onEdit(asset)} + onSelect={() => onSelect(asset)} + selected={isSelected} + size={size} + /> + ); + } + + return ( + onEdit(asset)} + onSelect={() => onSelect(asset)} + selected={isSelected} + size={size} + /> + ); +}; + +AssetCard.defaultProps = { + isSelected: false, + onSelect: undefined, + onEdit: undefined, + size: 'M', +}; + +AssetCard.propTypes = { + asset: PropTypes.shape({ + id: PropTypes.number, + height: PropTypes.number, + width: PropTypes.number, + size: PropTypes.number, + createdAt: PropTypes.string, + ext: PropTypes.string, + mime: PropTypes.string, + name: PropTypes.string, + url: PropTypes.string, + alternativeText: PropTypes.string, + caption: PropTypes.string, + formats: PropTypes.shape({ + thumbnail: PropTypes.shape({ + url: PropTypes.string, + }), + }), + }).isRequired, + onSelect: PropTypes.func, + onEdit: PropTypes.func, + isSelected: PropTypes.bool, + size: PropTypes.oneOf(['S', 'M']), +}; diff --git a/packages/core/upload/admin/src/components/AssetCard/VideoPreview.js b/packages/core/upload/admin/src/components/AssetCard/VideoPreview.js index a0f41aaa74..b05eb21124 100644 --- a/packages/core/upload/admin/src/components/AssetCard/VideoPreview.js +++ b/packages/core/upload/admin/src/components/AssetCard/VideoPreview.js @@ -57,11 +57,12 @@ export const VideoPreview = ({ url, mime, onLoadDuration, size }) => { VideoPreview.defaultProps = { size: 'M', + onLoadDuration: () => {}, }; VideoPreview.propTypes = { url: PropTypes.string.isRequired, mime: PropTypes.string.isRequired, - onLoadDuration: PropTypes.func.isRequired, + onLoadDuration: PropTypes.func, size: PropTypes.oneOf(['S', 'M']), }; diff --git a/packages/core/upload/admin/src/components/AssetList/index.js b/packages/core/upload/admin/src/components/AssetList/index.js index 18028fb475..e69281a247 100644 --- a/packages/core/upload/admin/src/components/AssetList/index.js +++ b/packages/core/upload/admin/src/components/AssetList/index.js @@ -3,11 +3,7 @@ import PropTypes from 'prop-types'; import styled from 'styled-components'; import { Box } from '@strapi/parts/Box'; import { KeyboardNavigable } from '@strapi/parts/KeyboardNavigable'; -import { prefixFileUrlWithBackendUrl, getFileExtension } from '@strapi/helper-plugin'; -import { ImageAssetCard } from '../AssetCard/ImageAssetCard'; -import { VideoAssetCard } from '../AssetCard/VideoAssetCard'; -import { DocAssetCard } from '../AssetCard/DocAssetCard'; -import { AssetType } from '../../constants'; +import { AssetCard } from '../AssetCard/AssetCard'; const GridColSize = { S: 180, @@ -27,51 +23,13 @@ export const AssetList = ({ assets, onEditAsset, onSelectAsset, selectedAssets, {assets.map(asset => { const isSelected = selectedAssets.indexOf(asset) > -1; - if (asset.mime.includes(AssetType.Video)) { - return ( - onEditAsset(asset)} - onSelect={() => onSelectAsset(asset)} - selected={isSelected} - size={size} - /> - ); - } - - if (asset.mime.includes(AssetType.Image)) { - return ( - onEditAsset(asset)} - onSelect={() => onSelectAsset(asset)} - selected={isSelected} - size={size} - /> - ); - } - return ( - onEditAsset(asset)} onSelect={() => onSelectAsset(asset)} - selected={isSelected} size={size} /> ); diff --git a/packages/core/upload/admin/src/components/MediaLibraryInput/AssetDialog/BrowseStep/index.js b/packages/core/upload/admin/src/components/MediaLibraryInput/AssetDialog/BrowseStep/index.js index cd7bb3f1bc..d17a4cc1c5 100644 --- a/packages/core/upload/admin/src/components/MediaLibraryInput/AssetDialog/BrowseStep/index.js +++ b/packages/core/upload/admin/src/components/MediaLibraryInput/AssetDialog/BrowseStep/index.js @@ -51,10 +51,14 @@ export const BrowseStep = ({ ); }; +BrowseStep.defaultProps = { + onSelectAllAsset: undefined, +}; + BrowseStep.propTypes = { assets: PropTypes.arrayOf(PropTypes.shape({})).isRequired, onEditAsset: PropTypes.func.isRequired, onSelectAsset: PropTypes.func.isRequired, - onSelectAllAsset: PropTypes.func.isRequired, + onSelectAllAsset: PropTypes.func, selectedAssets: PropTypes.arrayOf(PropTypes.shape({})).isRequired, }; diff --git a/packages/core/upload/admin/src/components/MediaLibraryInput/AssetDialog/index.js b/packages/core/upload/admin/src/components/MediaLibraryInput/AssetDialog/index.js index 2260f840d7..218b76dfc4 100644 --- a/packages/core/upload/admin/src/components/MediaLibraryInput/AssetDialog/index.js +++ b/packages/core/upload/admin/src/components/MediaLibraryInput/AssetDialog/index.js @@ -22,17 +22,22 @@ import { BrowseStep } from './BrowseStep'; import { useMediaLibraryPermissions } from '../../../hooks/useMediaLibraryPermissions'; import { useAssets } from '../../../hooks/useAssets'; -// TODO: this will move when "multiple" will be used for real -// eslint-disable-next-line no-unused-vars -export const AssetDialog = ({ onClose, multiple }) => { +export const AssetDialog = ({ onClose, onValidate, multiple }) => { const { formatMessage } = useIntl(); - const [selectedAssets, { selectOne, selectAll }] = useSelectionState('id', []); - + const [selectedAssets, { selectOne, selectAll, selectOnly }] = useSelectionState('id', []); const { canRead, canCreate, isLoading: isLoadingPermissions } = useMediaLibraryPermissions(); const { data, isLoading, error } = useAssets({ skipWhen: !canRead, }); + const handleSelectAsset = asset => { + if (multiple) { + selectOne(asset); + } else { + selectOnly(asset); + } + }; + const loading = isLoadingPermissions || isLoading; const assets = data?.results; @@ -116,16 +121,16 @@ export const AssetDialog = ({ onClose, multiple }) => { selectAll(assets)} + onSelectAllAsset={multiple ? () => selectAll(assets) : undefined} onEditAsset={() => {}} /> - + @@ -140,7 +145,7 @@ export const AssetDialog = ({ onClose, multiple }) => { } endActions={ <> - @@ -157,4 +162,5 @@ AssetDialog.defaultProps = { AssetDialog.propTypes = { multiple: PropTypes.bool, onClose: PropTypes.func.isRequired, + onValidate: PropTypes.func.isRequired, }; diff --git a/packages/core/upload/admin/src/components/MediaLibraryInput/CarouselAsset.js b/packages/core/upload/admin/src/components/MediaLibraryInput/CarouselAsset.js new file mode 100644 index 0000000000..d9482343c6 --- /dev/null +++ b/packages/core/upload/admin/src/components/MediaLibraryInput/CarouselAsset.js @@ -0,0 +1,49 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { prefixFileUrlWithBackendUrl } from '@strapi/helper-plugin'; +import IconDocumentation from '@strapi/icons/IconDocumentation'; +import { Icon } from '@strapi/parts/Icon'; +import { Box } from '@strapi/parts/Box'; +import { AssetType } from '../../constants'; +import { VideoPreview } from '../AssetCard/VideoPreview'; + +export const CarouselAsset = ({ asset }) => { + if (asset.mime.includes(AssetType.Video)) { + return ; + } + + if (asset.mime.includes(AssetType.Image)) { + return ( + + ); + } + + return ; +}; + +CarouselAsset.propTypes = { + asset: PropTypes.shape({ + id: PropTypes.number, + height: PropTypes.number, + width: PropTypes.number, + size: PropTypes.number, + createdAt: PropTypes.string, + ext: PropTypes.string, + mime: PropTypes.string, + name: PropTypes.string, + url: PropTypes.string, + alternativeText: PropTypes.string, + caption: PropTypes.string, + formats: PropTypes.shape({ + thumbnail: PropTypes.shape({ + url: PropTypes.string, + }), + }), + }).isRequired, +}; diff --git a/packages/core/upload/admin/src/components/MediaLibraryInput/index.js b/packages/core/upload/admin/src/components/MediaLibraryInput/index.js index 2a59dfb324..3ec8f86781 100644 --- a/packages/core/upload/admin/src/components/MediaLibraryInput/index.js +++ b/packages/core/upload/admin/src/components/MediaLibraryInput/index.js @@ -5,18 +5,25 @@ import { Carousel, CarouselSlide } from '@strapi/parts/Carousel'; import getTrad from '../../utils/getTrad'; import { EmptyStateAsset } from './EmptyStateAsset'; import { AssetDialog } from './AssetDialog'; +import { CarouselAsset } from './CarouselAsset'; export const MediaLibraryInput = ({ intlLabel, description, disabled, error, multiple }) => { const [selectedIndex, setSelectedIndex] = useState(0); + const [selectedAssets, setSelectedAssets] = useState([]); const [isAssetDialogOpen, setIsAssetDialogOpen] = useState(false); const { formatMessage } = useIntl(); const handleNext = () => { - setSelectedIndex(current => (current < 2 ? current + 1 : 0)); + setSelectedIndex(current => (current < selectedAssets.length - 1 ? current + 1 : 0)); }; const handlePrevious = () => { - setSelectedIndex(current => (current > 0 ? current - 1 : 2)); + setSelectedIndex(current => (current > 0 ? current - 1 : selectedAssets.length - 1)); + }; + + const handleValidation = nextSelectedAssets => { + setSelectedAssets(nextSelectedAssets); + setIsAssetDialogOpen(false); }; const hint = description @@ -47,17 +54,38 @@ export const MediaLibraryInput = ({ intlLabel, description, disabled, error, mul hint={hint} error={errorMessage} > - - setIsAssetDialogOpen(true)} /> - + {selectedAssets.length === 0 ? ( + + setIsAssetDialogOpen(true)} /> + + ) : ( + selectedAssets.map((asset, index) => ( + + + + )) + )} {isAssetDialogOpen && ( - setIsAssetDialogOpen(false)} multiple={multiple} /> + setIsAssetDialogOpen(false)} + onValidate={handleValidation} + multiple={multiple} + /> )} ); 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 4c7be2f510..6dc8e0ac7d 100644 --- a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js +++ b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js @@ -8,9 +8,7 @@ import { Flex } from '@strapi/parts/Flex'; import { Stack } from '@strapi/parts/Stack'; import { Grid, GridItem } from '@strapi/parts/Grid'; import { KeyboardNavigable } from '@strapi/parts/KeyboardNavigable'; -import { DocAssetCard } from '../../AssetCard/DocAssetCard'; -import { ImageAssetCard } from '../../AssetCard/ImageAssetCard'; -import { VideoAssetCard } from '../../AssetCard/VideoAssetCard'; +import { AssetCard } from '../../AssetCard/AssetCard'; import { UploadingAssetCard } from '../../AssetCard/UploadingAssetCard'; import { getTrad } from '../../../utils'; import { AssetType, AssetSource } from '../../../constants'; @@ -117,41 +115,9 @@ export const PendingAssetStep = ({ ); } - if (asset.type === AssetType.Image) { - return ( - - - - ); - } - - if (asset.type === AssetType.Video) { - 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 482e43ad29..a3bcfdc39b 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 @@ -46,12 +46,6 @@ describe('PendingAssetStep', () => { ext: 'mp4', mime: 'video/mp4', }, - { - source: 'url', - type: 'unknown', - url: 'https://www.w3schools.com/html/mov_bbb.mp4', - ext: 'mp4', - }, ]; const { container } = renderTL( diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.js.snap b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.js.snap index 8808c7355c..a781d080ef 100644 --- a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.js.snap +++ b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` -.c50 { +.c55 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -46,7 +46,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` align-items: center; } -.c47 { +.c52 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -162,11 +162,11 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` border-bottom: 1px solid #eaeaef; } -.c46 { +.c51 { border-top: 1px solid #eaeaef; } -.c48 > * + * { +.c53 > * + * { margin-left: 8px; } @@ -331,7 +331,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` background: #4945ff; } -.c49 { +.c54 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -343,7 +343,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` background: #ffffff; } -.c49 .sc-fFYUIl { +.c54 .sc-fFYUIl { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -354,52 +354,52 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` align-items: center; } -.c49 .c16 { +.c54 .c16 { color: #ffffff; } -.c49[aria-disabled='true'] { +.c54[aria-disabled='true'] { border: 1px solid #dcdce4; background: #eaeaef; } -.c49[aria-disabled='true'] .c16 { +.c54[aria-disabled='true'] .c16 { color: #666687; } -.c49[aria-disabled='true'] svg > g, -.c49[aria-disabled='true'] svg path { +.c54[aria-disabled='true'] svg > g, +.c54[aria-disabled='true'] svg path { fill: #666687; } -.c49[aria-disabled='true']:active { +.c54[aria-disabled='true']:active { border: 1px solid #dcdce4; background: #eaeaef; } -.c49[aria-disabled='true']:active .c16 { +.c54[aria-disabled='true']:active .c16 { color: #666687; } -.c49[aria-disabled='true']:active svg > g, -.c49[aria-disabled='true']:active svg path { +.c54[aria-disabled='true']:active svg > g, +.c54[aria-disabled='true']:active svg path { fill: #666687; } -.c49:hover { +.c54:hover { background-color: #f6f6f9; } -.c49:active { +.c54:active { background-color: #eaeaef; } -.c49 .c16 { +.c54 .c16 { color: #32324d; } -.c49 svg > g, -.c49 svg path { +.c54 svg > g, +.c54 svg path { fill: #32324d; } @@ -469,33 +469,143 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` grid-column: span 4; } +.c26 { + 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; +} + +.c26 svg { + height: 12px; + width: 12px; +} + +.c26 svg > g, +.c26 svg path { + fill: #ffffff; +} + +.c26[aria-disabled='true'] { + pointer-events: none; +} + +.c26: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; +} + +.c26:focus-visible { + outline: none; +} + +.c26:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; +} + +.c27 { + 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; +} + +.c27 svg > g, +.c27 svg path { + fill: #8e8ea9; +} + +.c27:hover svg > g, +.c27:hover svg path { + fill: #666687; +} + +.c27:active svg > g, +.c27:active svg path { + fill: #a5a5ba; +} + +.c27[aria-disabled='true'] { + background-color: #eaeaef; +} + +.c27[aria-disabled='true'] svg path { + fill: #666687; +} + .c20 { background: #ffffff; border-radius: 4px; box-shadow: 0px 1px 4px rgba(33,33,52,0.1); } -.c25 { +.c30 { padding-top: 8px; padding-right: 12px; padding-bottom: 8px; padding-left: 12px; } -.c32 { +.c37 { background: #f6f6f9; color: #666687; padding: 4px; border-radius: 4px; } -.c42 { +.c47 { background: #32324d; color: #ffffff; padding: 4px; border-radius: 4px; } +.c23 { + position: absolute; + top: 12px; + left: 12px; +} + +.c25 { + position: absolute; + top: 12px; + right: 12px; +} + .c21 { display: -webkit-box; display: -webkit-flex; @@ -514,7 +624,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` align-items: center; } -.c26 { +.c31 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -528,7 +638,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` align-items: flex-start; } -.c38 { +.c43 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -542,14 +652,14 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` align-items: center; } -.c24 { +.c29 { margin: 0; padding: 0; max-height: 100%; max-width: 100%; } -.c23 { +.c28 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -563,62 +673,129 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` background: repeating-conic-gradient(#f6f6f9 0% 25%,transparent 0% 50%) 50% / 20px 20px; } -.c28 { +.c33 { font-weight: 500; font-size: 0.75rem; line-height: 1.33; color: #32324d; } -.c29 { +.c34 { font-weight: 400; font-size: 0.75rem; line-height: 1.33; color: #666687; } -.c35 { +.c40 { font-weight: 400; font-size: 0.875rem; line-height: 1.43; color: #32324d; } -.c44 { +.c49 { font-weight: 400; font-size: 0.75rem; line-height: 1.33; color: #ffffff; } -.c36 { +.c41 { font-weight: 600; line-height: 1.14; } -.c37 { +.c42 { font-weight: 600; font-size: 0.6875rem; line-height: 1.45; text-transform: uppercase; } -.c33 { +.c38 { display: inline-block; } -.c31 { +.c36 { margin-left: auto; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } -.c34 { +.c39 { margin-left: 4px; } -.c27 { +.c24 { + margin: 0; + height: 18px; + min-width: 18px; + border-radius: 4px; + border: 1px solid #c0c0cf; + -webkit-appearance: none; + background-color: #ffffff; +} + +.c24:checked { + background-color: #4945ff; + border: 1px solid #4945ff; +} + +.c24:checked:after { + content: ''; + display: block; + position: relative; + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSJ3aGl0ZSIKICAvPgo8L3N2Zz4=) no-repeat no-repeat center center; + width: 10px; + height: 10px; + left: 50%; + top: 50%; + -webkit-transform: translateX(-50%) translateY(-50%); + -ms-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); +} + +.c24:checked:disabled:after { + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSIjOEU4RUE5IgogIC8+Cjwvc3ZnPg==) no-repeat no-repeat center center; +} + +.c24:disabled { + background-color: #dcdce4; + border: 1px solid #c0c0cf; +} + +.c24:indeterminate { + background-color: #4945ff; + border: 1px solid #4945ff; +} + +.c24:indeterminate:after { + content: ''; + display: block; + position: relative; + color: white; + height: 2px; + width: 10px; + background-color: #ffffff; + left: 50%; + top: 50%; + -webkit-transform: translateX(-50%) translateY(-50%); + -ms-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); +} + +.c24:indeterminate:disabled { + background-color: #dcdce4; + border: 1px solid #c0c0cf; +} + +.c24:indeterminate:disabled:after { + background-color: #8e8ea9; +} + +.c32 { word-break: break-all; } @@ -627,35 +804,35 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` border-bottom: 1px solid #eaeaef; } -.c43 { +.c48 { position: absolute; bottom: 4px; right: 4px; } -.c40 { +.c35 { text-transform: uppercase; } -.c39 svg { - font-size: 3rem; -} - -.c30 { - text-transform: uppercase; -} - -.c41 canvas, -.c41 video { +.c46 canvas, +.c46 video { display: block; max-width: 100%; max-height: 5.5rem; } +.c50 { + text-transform: uppercase; +} + .c45 { text-transform: uppercase; } +.c44 svg { + font-size: 3rem; +} + @media (max-width:68.75rem) { .c19 { grid-column: span; @@ -760,45 +937,82 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` >
+ +
+
+ + + +
+

jpg

Image @@ -825,12 +1039,49 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` >
+ +
+
+ + + +
+

pdf

Doc @@ -905,12 +1156,49 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` >
+ +
+
+ + + +
+

mp4

Video @@ -974,102 +1262,22 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
-
-
-
-
-
-
- - - - - -
-
-
-
-
-
-

-
- - mp4 - -
-

-
-
- - Doc - -
-
-
-
-
-
-