From 6af55fa6f53efe7c26bcbada8ccfc5966213d551 Mon Sep 17 00:00:00 2001 From: Marvin Frachet Date: Wed, 10 Nov 2021 10:52:10 +0100 Subject: [PATCH] Fix ML QA (#11534) --- .../src/components/AssetCard/DocAssetCard.js | 23 ++- .../AssetCard/tests/DocAssetCard.test.js | 142 ++++++++-------- .../AssetList/tests/AssetList.test.js | 82 +++++++--- .../Carousel/CarouselAsset.js | 19 ++- .../PendingAssetStep.test.js.snap | 154 +++++++++++------- .../admin/src/pages/App/MediaLibrary.js | 5 + 6 files changed, 261 insertions(+), 164 deletions(-) diff --git a/packages/core/upload/admin/src/components/AssetCard/DocAssetCard.js b/packages/core/upload/admin/src/components/AssetCard/DocAssetCard.js index 7ed32c2899..fcbf07318b 100644 --- a/packages/core/upload/admin/src/components/AssetCard/DocAssetCard.js +++ b/packages/core/upload/admin/src/components/AssetCard/DocAssetCard.js @@ -4,7 +4,6 @@ import styled from 'styled-components'; import { Card, CardAction, - CardAsset, CardBadge, CardBody, CardCheckbox, @@ -13,9 +12,12 @@ import { CardTitle, CardSubtitle, } from '@strapi/design-system/Card'; +import { Flex } from '@strapi/design-system/Flex'; import { IconButton } from '@strapi/design-system/IconButton'; import Pencil from '@strapi/icons/Pencil'; -import Book from '@strapi/icons/Book'; +import FileIcon from '@strapi/icons/File'; +import FilePdfIcon from '@strapi/icons/FilePdf'; +import { pxToRem } from '@strapi/helper-plugin'; import { useIntl } from 'react-intl'; import { getTrad } from '../../utils'; @@ -29,6 +31,11 @@ const IconWrapper = styled.span` } `; +const CardAsset = styled(Flex)` + border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0; + background: linear-gradient(180deg, #ffffff 0%, #f6f6f9 121.48%); +`; + export const DocAssetCard = ({ name, extension, selected, onSelect, onEdit, size }) => { const { formatMessage } = useIntl(); @@ -45,9 +52,17 @@ export const DocAssetCard = ({ name, extension, selected, onSelect, onEdit, size /> )} - + - + {extension === 'pdf' ? ( + + ) : ( + + )} diff --git a/packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js b/packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js index 450899dc15..ae16987ff4 100644 --- a/packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js +++ b/packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js @@ -29,7 +29,7 @@ describe('DocAssetCard', () => { ); expect(container).toMatchInlineSnapshot(` - .c22 { + .c23 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -47,14 +47,14 @@ describe('DocAssetCard', () => { box-shadow: 0px 1px 4px rgba(33,33,52,0.1); } - .c11 { + .c12 { padding-top: 8px; padding-right: 12px; padding-bottom: 8px; padding-left: 12px; } - .c18 { + .c19 { background: #f6f6f9; padding: 4px; border-radius: 4px; @@ -90,21 +90,7 @@ describe('DocAssetCard', () => { align-items: center; } - .c9 { - 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; - } - - .c12 { + .c13 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -118,34 +104,20 @@ describe('DocAssetCard', () => { align-items: flex-start; } - .c8 { - 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: 5.5rem; - width: 100%; - background: repeating-conic-gradient(#f6f6f9 0% 25%,transparent 0% 50%) 50% / 20px 20px; - } - - .c14 { + .c15 { font-weight: 600; color: #32324d; font-size: 0.75rem; line-height: 1.33; } - .c15 { + .c16 { color: #666687; font-size: 0.75rem; line-height: 1.33; } - .c21 { + .c22 { color: #666687; font-weight: 600; font-size: 0.6875rem; @@ -153,18 +125,18 @@ describe('DocAssetCard', () => { text-transform: uppercase; } - .c19 { + .c20 { display: inline-block; } - .c17 { + .c18 { margin-left: auto; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } - .c20 { + .c21 { margin-left: 4px; } @@ -236,7 +208,7 @@ describe('DocAssetCard', () => { background-color: #8e8ea9; } - .c13 { + .c14 { word-break: break-all; } @@ -245,6 +217,29 @@ describe('DocAssetCard', () => { border-bottom: 1px solid #eaeaef; } + .c8 { + width: 100%; + height: 5.5rem; + } + + .c9 { + 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; + } + .c6 { display: -webkit-box; display: -webkit-flex; @@ -343,14 +338,19 @@ describe('DocAssetCard', () => { fill: #666687; } - .c16 { + .c17 { text-transform: uppercase; } - .c10 svg { + .c11 svg { font-size: 3rem; } + .c10 { + border-radius: 4px 4px 0 0; + background: linear-gradient(180deg,#ffffff 0%,#f6f6f9 121.48%); + } +
{
-
- - - - - -
+ + +

hello.png

png
Doc @@ -465,7 +465,7 @@ describe('DocAssetCard', () => {

{ ); expect(container).toMatchInlineSnapshot(` - .c28 { + .c31 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -142,6 +142,29 @@ describe('MediaLibrary / AssetList', () => { width: 1px; } + .c26 { + width: 100%; + height: 10.25rem; + } + + .c27 { + 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; + } + .c21 { border: 0; -webkit-clip: rect(0 0 0 0); @@ -393,14 +416,19 @@ describe('MediaLibrary / AssetList', () => { max-height: 10.25rem; } - .c27 { + .c30 { text-transform: uppercase; } - .c26 svg { + .c29 svg { font-size: 3rem; } + .c28 { + border-radius: 4px 4px 0 0; + background: linear-gradient(180deg,#ffffff 0%,#f6f6f9 121.48%); + } + .c0 { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); @@ -599,29 +627,33 @@ describe('MediaLibrary / AssetList', () => { />

-
- - - - - -
+ + + +
{ class="c12" > pdf @@ -686,7 +718,7 @@ describe('MediaLibrary / AssetList', () => {

{ ); } - return ; + return ( + + {asset.ext.includes('pdf') ? ( + + ) : ( + + )} + + ); }; CarouselAsset.propTypes = { 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 c74c3b81ee..4cc96a942e 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`] = ` -.c49 { +.c52 { 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; } -.c46 { +.c49 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -163,12 +163,12 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` border-bottom: 1px solid #eaeaef; } -.c45 { +.c48 { border-radius: 0 0 4px 4px; border-top: 1px solid #eaeaef; } -.c47 > * + * { +.c50 > * + * { margin-left: 8px; } @@ -333,7 +333,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` background: #4945ff; } -.c48 { +.c51 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -345,7 +345,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` background: #ffffff; } -.c48 .sc-Qpmqz { +.c51 .sc-Qpmqz { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -356,55 +356,60 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` align-items: center; } -.c48 .c16 { +.c51 .c16 { color: #ffffff; } -.c48[aria-disabled='true'] { +.c51[aria-disabled='true'] { border: 1px solid #dcdce4; background: #eaeaef; } -.c48[aria-disabled='true'] .c16 { +.c51[aria-disabled='true'] .c16 { color: #666687; } -.c48[aria-disabled='true'] svg > g, -.c48[aria-disabled='true'] svg path { +.c51[aria-disabled='true'] svg > g, +.c51[aria-disabled='true'] svg path { fill: #666687; } -.c48[aria-disabled='true']:active { +.c51[aria-disabled='true']:active { border: 1px solid #dcdce4; background: #eaeaef; } -.c48[aria-disabled='true']:active .c16 { +.c51[aria-disabled='true']:active .c16 { color: #666687; } -.c48[aria-disabled='true']:active svg > g, -.c48[aria-disabled='true']:active svg path { +.c51[aria-disabled='true']:active svg > g, +.c51[aria-disabled='true']:active svg path { fill: #666687; } -.c48:hover { +.c51:hover { background-color: #f6f6f9; } -.c48:active { +.c51:active { background-color: #eaeaef; } -.c48 .c16 { +.c51 .c16 { color: #32324d; } -.c48 svg > g, -.c48 svg path { +.c51 svg > g, +.c51 svg path { fill: #32324d; } +.c36 { + width: 100%; + height: 5.5rem; +} + .c10 { display: -webkit-box; display: -webkit-flex; @@ -423,6 +428,24 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` align-items: center; } +.c37 { + 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; +} + .c9 { display: -webkit-box; display: -webkit-flex; @@ -471,7 +494,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` grid-column: span 4; } -.c40 { +.c43 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -502,7 +525,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` border-radius: 4px; } -.c41 { +.c44 { background: #32324d; color: #ffffff; padding: 4px; @@ -541,7 +564,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` align-items: flex-start; } -.c36 { +.c41 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -597,7 +620,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` text-transform: uppercase; } -.c43 { +.c46 { color: #ffffff; font-size: 0.75rem; line-height: 1.33; @@ -627,7 +650,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` border-bottom: 1px solid #eaeaef; } -.c42 { +.c45 { position: absolute; bottom: 4px; right: 4px; @@ -637,25 +660,30 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` text-transform: uppercase; } -.c44 { +.c47 { text-transform: uppercase; } -.c39 canvas, -.c39 video { +.c42 canvas, +.c42 video { display: block; max-width: 100%; max-height: 5.5rem; } -.c38 { +.c40 { text-transform: uppercase; } -.c37 svg { +.c39 svg { font-size: 3rem; } +.c38 { + border-radius: 4px 4px 0 0; + background: linear-gradient(180deg,#ffffff 0%,#f6f6f9 121.48%); +} + @media (max-width:68.75rem) { .c19 { grid-column: span; @@ -824,28 +852,32 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` class="c21 c22" >

-
- - - - - -
+ + + +
pdf @@ -907,10 +939,10 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = ` class="c23" >