diff --git a/packages/core/upload/admin/src/components/AssetCard/AssetCard.js b/packages/core/upload/admin/src/components/AssetCard/AssetCard.js index 79b7bb2eb6..77fb534497 100644 --- a/packages/core/upload/admin/src/components/AssetCard/AssetCard.js +++ b/packages/core/upload/admin/src/components/AssetCard/AssetCard.js @@ -6,34 +6,21 @@ import { VideoAssetCard } from './VideoAssetCard'; import { DocAssetCard } from './DocAssetCard'; import { AudioAssetCard } from './AudioAssetCard'; import { AssetType, AssetDefinition } from '../../constants'; -import { createAssetUrl, toSingularTypes } from '../../utils'; +import { createAssetUrl } from '../../utils'; -export const AssetCard = ({ - allowedTypes, - asset, - isSelected, - onSelect, - onEdit, - onRemove, - size, - local, -}) => { - const singularTypes = toSingularTypes(allowedTypes); - const fileType = asset.mime.split('/')[0]; +export const AssetCard = ({ asset, isSelected, onSelect, onEdit, onRemove, size, local }) => { const handleSelect = onSelect ? () => onSelect(asset) : undefined; - const canSelectAsset = - singularTypes.includes(fileType) || - (singularTypes.includes('file') && !['video', 'image', 'audio'].includes(fileType)); const commonAssetCardProps = { id: asset.id, + isSelectable: asset.isSelectable, extension: getFileExtension(asset.ext), key: asset.id, name: asset.name, url: local ? asset.url : createAssetUrl(asset, true), mime: asset.mime, onEdit: onEdit ? () => onEdit(asset) : undefined, - onSelect: !canSelectAsset && !isSelected ? undefined : handleSelect, + onSelect: handleSelect, onRemove: onRemove ? () => onRemove(asset) : undefined, selected: isSelected, size, @@ -63,7 +50,6 @@ export const AssetCard = ({ }; AssetCard.defaultProps = { - allowedTypes: ['images', 'files', 'videos', 'audios'], isSelected: false, // Determine if the asset is loaded locally or from a remote resource local: false, @@ -74,7 +60,6 @@ AssetCard.defaultProps = { }; AssetCard.propTypes = { - allowedTypes: PropTypes.array, asset: AssetDefinition.isRequired, local: PropTypes.bool, onSelect: PropTypes.func, diff --git a/packages/core/upload/admin/src/components/AssetCard/AssetCardBase.js b/packages/core/upload/admin/src/components/AssetCard/AssetCardBase.js index 2b04521bbc..096a8b723c 100644 --- a/packages/core/upload/admin/src/components/AssetCard/AssetCardBase.js +++ b/packages/core/upload/admin/src/components/AssetCard/AssetCardBase.js @@ -44,12 +44,13 @@ const CardContainer = styled(Card)` export const AssetCardBase = ({ children, - name, extension, - selected, + isSelectable, + name, onSelect, onRemove, onEdit, + selected, subtitle, variant, }) => { @@ -76,7 +77,7 @@ export const AssetCardBase = ({ return ( - {onSelect && ( + {isSelectable && ( // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
@@ -129,10 +130,11 @@ export const AssetCardBase = ({ AssetCardBase.defaultProps = { children: undefined, - selected: false, + isSelectable: true, onEdit: undefined, onSelect: undefined, onRemove: undefined, + selected: false, subtitle: '', variant: 'Image', }; @@ -140,6 +142,7 @@ AssetCardBase.defaultProps = { AssetCardBase.propTypes = { children: PropTypes.node, extension: PropTypes.string.isRequired, + isSelectable: PropTypes.bool, name: PropTypes.string.isRequired, onEdit: PropTypes.func, onSelect: PropTypes.func, diff --git a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js index 02be2ea8bd..f5c9c09e0a 100644 --- a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js +++ b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js @@ -25,7 +25,7 @@ import { localStorageKeys, } from '../../../constants'; import getTrad from '../../../utils/getTrad'; -import { getBreadcrumbDataCM } from '../../../utils'; +import { getBreadcrumbDataCM, toSingularTypes } from '../../../utils'; import getAllowedFiles from '../../../utils/getAllowedFiles'; import { AssetGridList } from '../../AssetGridList'; import { TableList } from '../../TableList'; @@ -39,6 +39,7 @@ import { Filters } from './Filters'; import PaginationFooter from './PaginationFooter'; import PageSize from './PageSize'; import SearchAsset from './SearchAsset'; +import { isSelectable } from './utils/isSelectable'; const StartBlockActions = styled(Flex)` & > * + * { @@ -65,7 +66,7 @@ const ActionContainer = styled(Box)` export const BrowseStep = ({ allowedTypes, - assets, + assets: rawAssets, canCreate, canRead, folders, @@ -96,6 +97,13 @@ export const BrowseStep = ({ } ); + const singularTypes = toSingularTypes(allowedTypes); + const assets = rawAssets.map((asset) => { + const fileType = asset?.mime?.split('/')?.[0]; + + return { ...asset, isSelectable: isSelectable(singularTypes, fileType) }; + }); + const breadcrumbs = !isCurrentFolderLoading && getBreadcrumbDataCM(currentFolder); const allAllowedAsset = getAllowedFiles(allowedTypes, assets); @@ -249,10 +257,7 @@ export const BrowseStep = ({ // TODO: remove when fixed on DS side // when number of rows in Table changes, the keyboard tab from a row to another // is not working for 1st and last column - [ - ...folders.map((folder) => ({ ...folder, type: 'folder' })), - ...assets.map((asset) => ({ ...asset, type: 'asset' })), - ] + [...folders.map((folder) => ({ ...folder, type: 'folder' })), ...assets] } selected={selectedAssets} shouldDisableBulkSelect={!multiple} diff --git a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/utils/isSelectable.js b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/utils/isSelectable.js new file mode 100644 index 0000000000..c404c3db2a --- /dev/null +++ b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/utils/isSelectable.js @@ -0,0 +1,3 @@ +export const isSelectable = (allowedTypes, fileType) => + allowedTypes.includes(fileType) || + (allowedTypes.includes('file') && !['video', 'image', 'audio'].includes(fileType)); diff --git a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/utils/tests/isSelectable.test.js b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/utils/tests/isSelectable.test.js new file mode 100644 index 0000000000..7ec8c70252 --- /dev/null +++ b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/utils/tests/isSelectable.test.js @@ -0,0 +1,19 @@ +import { isSelectable } from '../isSelectable'; + +describe('TableList | isSelectable', () => { + it('should return true if asset is an allowed file type', () => { + expect(isSelectable(['image', 'file', 'video', 'audio'], 'image')).toEqual(true); + }); + + it('should return true if asset type is not contained in allowed types array but file type is contained', () => { + expect(isSelectable(['video', 'audio', 'file'], 'pdf')).toEqual(true); + }); + + it('should return false if asset type is not contained in allowed types array and file type is image, video or audio', () => { + expect(isSelectable(['video', 'audio', 'file'], 'image')).toEqual(false); + + expect(isSelectable(['image', 'audio', 'file'], 'video')).toEqual(false); + + expect(isSelectable(['image', 'video', 'file'], 'audio')).toEqual(false); + }); +}); diff --git a/packages/core/upload/admin/src/components/TableList/TableRows.js b/packages/core/upload/admin/src/components/TableList/TableRows.js index cb7a533ed2..f3b3690dfb 100644 --- a/packages/core/upload/admin/src/components/TableList/TableRows.js +++ b/packages/core/upload/admin/src/components/TableList/TableRows.js @@ -11,14 +11,10 @@ import Pencil from '@strapi/icons/Pencil'; import Eye from '@strapi/icons/Eye'; import { CellContent } from './CellContent'; -import { isSelectable } from './utils/isSelectable'; import { AssetDefinition, FolderDefinition, tableHeaders as cells } from '../../constants'; -import { getTrad, toSingularTypes } from '../../utils'; +import { getTrad } from '../../utils'; export const TableRows = ({ - allowedTypes, - canUpdate, - isFolderSelectionAllowed, onChangeFolder, onEditAsset, onEditFolder, @@ -36,14 +32,13 @@ export const TableRows = ({ } }; - const singularTypes = toSingularTypes(allowedTypes); - return ( {rows.map((element) => { const { alternativeText, id, + isSelectable, name, ext, url, @@ -53,10 +48,6 @@ export const TableRows = ({ type: elementType, } = element; - const fileType = mime?.split('/')?.[0]; - const canBeSelected = - isSelectable(singularTypes, elementType, fileType, isFolderSelectionAllowed) && canUpdate; - const isSelected = !!selected.find((currentRow) => currentRow.id === id); return ( @@ -76,7 +67,7 @@ export const TableRows = ({ }, { name } )} - disabled={!canBeSelected} + disabled={!isSelectable} onValueChange={() => onSelectOne(element)} checked={isSelected} /> @@ -136,22 +127,16 @@ export const TableRows = ({ }; TableRows.defaultProps = { - allowedTypes: ['images', 'files', 'videos', 'audios'], - canUpdate: true, onChangeFolder: null, - isFolderSelectionAllowed: true, rows: [], selected: [], }; TableRows.propTypes = { - allowedTypes: PropTypes.arrayOf(PropTypes.string), - canUpdate: PropTypes.bool, - isFolderSelectionAllowed: PropTypes.bool, - rows: PropTypes.arrayOf(AssetDefinition, FolderDefinition), onChangeFolder: PropTypes.func, onEditAsset: PropTypes.func.isRequired, onEditFolder: PropTypes.func.isRequired, onSelectOne: PropTypes.func.isRequired, + rows: PropTypes.arrayOf(AssetDefinition, FolderDefinition), selected: PropTypes.arrayOf(AssetDefinition, FolderDefinition), }; diff --git a/packages/core/upload/admin/src/components/TableList/index.js b/packages/core/upload/admin/src/components/TableList/index.js index 9af6c911ac..a8e273198f 100644 --- a/packages/core/upload/admin/src/components/TableList/index.js +++ b/packages/core/upload/admin/src/components/TableList/index.js @@ -15,9 +15,6 @@ import { TableRows } from './TableRows'; export const TableList = ({ assetCount, - isFolderSelectionAllowed, - allowedTypes, - canUpdate, folderCount, indeterminate, onChangeSort, @@ -114,9 +111,6 @@ export const TableList = ({ { - let canSelectElement; - - if (elementType === 'folder') { - canSelectElement = isFolderSelectionAllowed; - } else { - canSelectElement = - allowedTypes.includes(fileType) || - (allowedTypes.includes('file') && !['video', 'image', 'audio'].includes(fileType)); - } - - return canSelectElement; -}; diff --git a/packages/core/upload/admin/src/components/TableList/utils/tests/isSelectable.test.js b/packages/core/upload/admin/src/components/TableList/utils/tests/isSelectable.test.js deleted file mode 100644 index c47dda79ff..0000000000 --- a/packages/core/upload/admin/src/components/TableList/utils/tests/isSelectable.test.js +++ /dev/null @@ -1,74 +0,0 @@ -import { isSelectable } from '../isSelectable'; - -const ALLOWED_TYPES_FIXTURE = ['image', 'file', 'video', 'audio']; -const ELEMENT_TYPE_FIXTURE = 'asset'; -const FILE_TYPE_FIXTURE = 'image'; -const IS_FOLDER_SELECTION_ALLOWED_FIXTURE = true; - -describe('TableList | isSelectable', () => { - it('should return true if asset is an allowed file type', () => { - expect( - isSelectable( - ALLOWED_TYPES_FIXTURE, - ELEMENT_TYPE_FIXTURE, - FILE_TYPE_FIXTURE, - IS_FOLDER_SELECTION_ALLOWED_FIXTURE - ) - ).toEqual(true); - }); - - it('should return true if asset type is not contained in allowed types array but file type is contained', () => { - expect( - isSelectable( - ['video', 'audio', 'file'], - ELEMENT_TYPE_FIXTURE, - 'pdf', - IS_FOLDER_SELECTION_ALLOWED_FIXTURE - ) - ).toEqual(true); - }); - - it('should return false if asset type is not contained in allowed types array and file type is image, video or audio', () => { - expect( - isSelectable( - ['video', 'audio', 'file'], - ELEMENT_TYPE_FIXTURE, - 'image', - IS_FOLDER_SELECTION_ALLOWED_FIXTURE - ) - ).toEqual(false); - - expect( - isSelectable( - ['image', 'audio', 'file'], - ELEMENT_TYPE_FIXTURE, - 'video', - IS_FOLDER_SELECTION_ALLOWED_FIXTURE - ) - ).toEqual(false); - - expect( - isSelectable( - ['image', 'video', 'file'], - ELEMENT_TYPE_FIXTURE, - 'audio', - IS_FOLDER_SELECTION_ALLOWED_FIXTURE - ) - ).toEqual(false); - }); - - it('should return true if folder is allowed', () => { - expect( - isSelectable( - ALLOWED_TYPES_FIXTURE, - 'folder', - FILE_TYPE_FIXTURE, - IS_FOLDER_SELECTION_ALLOWED_FIXTURE - ) - ).toEqual(true); - }); - - it('should return false if folder is not allowed', () => { - expect(isSelectable(ALLOWED_TYPES_FIXTURE, 'folder', FILE_TYPE_FIXTURE, false)).toEqual(false); - }); -}); 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 d02234a732..f8b07d4b65 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`] = ` -.c52 { +.c55 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -48,33 +48,37 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` } .c24 { + position: start; +} + +.c29 { position: end; } -.c32 { +.c35 { padding-top: 8px; padding-right: 12px; padding-bottom: 8px; padding-left: 12px; } -.c35 { +.c38 { padding-top: 4px; } -.c38 { +.c41 { background: #f6f6f9; padding: 4px; border-radius: 4px; min-width: 20px; } -.c42 { +.c45 { width: 100%; height: 5.5rem; } -.c46 { +.c49 { background: #32324d; color: #ffffff; padding: 4px; @@ -145,7 +149,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` flex-direction: row; } -.c33 { +.c36 { -webkit-align-items: flex-start; -webkit-box-align: flex-start; -ms-flex-align: flex-start; @@ -159,7 +163,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` flex-direction: row; } -.c39 { +.c42 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -205,7 +209,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` color: #32324d; } -.c41 { +.c44 { font-weight: 600; font-size: 0.6875rem; line-height: 1.45; @@ -213,7 +217,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` color: #666687; } -.c48 { +.c51 { font-size: 0.75rem; line-height: 1.33; color: #ffffff; @@ -370,7 +374,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` fill: #ffffff; } -.c51 { +.c54 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -384,7 +388,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` background: #ffffff; } -.c51 .c0 { +.c54 .c0 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -395,55 +399,123 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` align-items: center; } -.c51 .c4 { +.c54 .c4 { color: #ffffff; } -.c51[aria-disabled='true'] { +.c54[aria-disabled='true'] { border: 1px solid #dcdce4; background: #eaeaef; } -.c51[aria-disabled='true'] .c4 { +.c54[aria-disabled='true'] .c4 { color: #666687; } -.c51[aria-disabled='true'] svg > g, -.c51[aria-disabled='true'] svg path { +.c54[aria-disabled='true'] svg > g, +.c54[aria-disabled='true'] svg path { fill: #666687; } -.c51[aria-disabled='true']:active { +.c54[aria-disabled='true']:active { border: 1px solid #dcdce4; background: #eaeaef; } -.c51[aria-disabled='true']:active .c4 { +.c54[aria-disabled='true']:active .c4 { color: #666687; } -.c51[aria-disabled='true']:active svg > g, -.c51[aria-disabled='true']:active svg path { +.c54[aria-disabled='true']:active svg > g, +.c54[aria-disabled='true']:active svg path { fill: #666687; } -.c51:hover { +.c54:hover { background-color: #f6f6f9; } -.c51:active { +.c54:active { background-color: #eaeaef; } -.c51 .c4 { +.c54 .c4 { color: #32324d; } -.c51 svg > g, -.c51 svg path { +.c54 svg > g, +.c54 svg path { fill: #32324d; } +.c28 { + margin: 0; + height: 18px; + min-width: 18px; + border-radius: 4px; + border: 1px solid #c0c0cf; + -webkit-appearance: none; + background-color: #ffffff; + cursor: pointer; +} + +.c28:checked { + background-color: #4945ff; + border: 1px solid #4945ff; +} + +.c28: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%); +} + +.c28:checked:disabled:after { + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSIjOEU4RUE5IgogIC8+Cjwvc3ZnPg==) no-repeat no-repeat center center; +} + +.c28:disabled { + background-color: #dcdce4; + border: 1px solid #c0c0cf; +} + +.c28:indeterminate { + background-color: #4945ff; + border: 1px solid #4945ff; +} + +.c28: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%); +} + +.c28:indeterminate:disabled { + background-color: #dcdce4; + border: 1px solid #c0c0cf; +} + +.c28:indeterminate:disabled:after { + background-color: #8e8ea9; +} + .c7 { display: -webkit-box; display: -webkit-flex; @@ -489,12 +561,12 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` border-bottom: 1px solid #eaeaef; } -.c49 { +.c52 { border-radius: 0 0 4px 4px; border-top: 1px solid #eaeaef; } -.c50 > * + * { +.c53 > * + * { margin-left: 8px; } @@ -514,13 +586,19 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` max-width: 100%; } -.c28 { +.c27 { + position: absolute; + top: 12px; + left: 12px; +} + +.c31 { position: absolute; top: 12px; right: 12px; } -.c31 { +.c34 { margin: 0; padding: 0; max-height: 100%; @@ -528,7 +606,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` object-fit: contain; } -.c30 { +.c33 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -544,18 +622,18 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` border-top-right-radius: 4px; } -.c37 { +.c40 { margin-left: auto; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } -.c40 { +.c43 { margin-left: 4px; } -.c34 { +.c37 { word-break: break-all; } @@ -564,21 +642,21 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` border-bottom: 1px solid #eaeaef; } -.c47 { +.c50 { position: absolute; bottom: 4px; right: 4px; } -.c36 { +.c39 { text-transform: uppercase; } -.c29 { +.c32 { opacity: 0; } -.c29:focus-within { +.c32:focus-within { opacity: 1; } @@ -586,22 +664,22 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` cursor: pointer; } -.c21:hover .c27 { +.c21:hover .c30 { opacity: 1; } -.c45 canvas, -.c45 video { +.c48 canvas, +.c48 video { display: block; max-width: 100%; max-height: 5.5rem; } -.c44 svg { +.c47 svg { font-size: 3rem; } -.c43 { +.c46 { border-radius: 4px 4px 0 0; background: linear-gradient(180deg,#ffffff 0%,#f6f6f9 121.48%); } @@ -717,8 +795,24 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
+
+
+
+ +
+
+
@@ -783,27 +877,27 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `

jpg @@ -824,13 +918,13 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `

Image @@ -857,8 +951,24 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
+
+
+
+ +
+
+
@@ -923,12 +1033,12 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `

pdf @@ -983,13 +1093,13 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `

Doc @@ -1016,8 +1126,24 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
+
+
+
+ +
+
+
@@ -1082,13 +1208,13 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `

mp4 @@ -1151,13 +1277,13 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `

Video @@ -1173,17 +1299,17 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `