mirror of
https://github.com/strapi/strapi.git
synced 2025-09-19 13:31:34 +00:00
Fix ML QA (#11534)
This commit is contained in:
Marvin Frachet
GitHub
parent
55c6d635c2
commit
6af55fa6f5
@ -4,7 +4,6 @@ import styled from 'styled-components';
|
|||||||
import {
|
import {
|
||||||
Card,
|
Card,
|
||||||
CardAction,
|
CardAction,
|
||||||
CardAsset,
|
|
||||||
CardBadge,
|
CardBadge,
|
||||||
CardBody,
|
CardBody,
|
||||||
CardCheckbox,
|
CardCheckbox,
|
||||||
@ -13,9 +12,12 @@ import {
|
|||||||
CardTitle,
|
CardTitle,
|
||||||
CardSubtitle,
|
CardSubtitle,
|
||||||
} from '@strapi/design-system/Card';
|
} from '@strapi/design-system/Card';
|
||||||
|
import { Flex } from '@strapi/design-system/Flex';
|
||||||
import { IconButton } from '@strapi/design-system/IconButton';
|
import { IconButton } from '@strapi/design-system/IconButton';
|
||||||
import Pencil from '@strapi/icons/Pencil';
|
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 { useIntl } from 'react-intl';
|
||||||
import { getTrad } from '../../utils';
|
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 }) => {
|
export const DocAssetCard = ({ name, extension, selected, onSelect, onEdit, size }) => {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage } = useIntl();
|
||||||
|
|
||||||
@ -45,9 +52,17 @@ export const DocAssetCard = ({ name, extension, selected, onSelect, onEdit, size
|
|||||||
/>
|
/>
|
||||||
</CardAction>
|
</CardAction>
|
||||||
)}
|
)}
|
||||||
<CardAsset size={size}>
|
<CardAsset
|
||||||
|
width="100%"
|
||||||
|
height={size === 'S' ? pxToRem(88) : pxToRem(164)}
|
||||||
|
justifyContent="center"
|
||||||
|
>
|
||||||
<IconWrapper>
|
<IconWrapper>
|
||||||
<Book aria-label={name} />
|
{extension === 'pdf' ? (
|
||||||
|
<FilePdfIcon aria-label={name} />
|
||||||
|
) : (
|
||||||
|
<FileIcon aria-label={name} />
|
||||||
|
)}
|
||||||
</IconWrapper>
|
</IconWrapper>
|
||||||
</CardAsset>
|
</CardAsset>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
|
|||||||
@ -29,7 +29,7 @@ describe('DocAssetCard', () => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
expect(container).toMatchInlineSnapshot(`
|
expect(container).toMatchInlineSnapshot(`
|
||||||
.c22 {
|
.c23 {
|
||||||
border: 0;
|
border: 0;
|
||||||
-webkit-clip: rect(0 0 0 0);
|
-webkit-clip: rect(0 0 0 0);
|
||||||
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);
|
box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c11 {
|
.c12 {
|
||||||
padding-top: 8px;
|
padding-top: 8px;
|
||||||
padding-right: 12px;
|
padding-right: 12px;
|
||||||
padding-bottom: 8px;
|
padding-bottom: 8px;
|
||||||
padding-left: 12px;
|
padding-left: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c18 {
|
.c19 {
|
||||||
background: #f6f6f9;
|
background: #f6f6f9;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
@ -90,21 +90,7 @@ describe('DocAssetCard', () => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c9 {
|
.c13 {
|
||||||
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 {
|
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
@ -118,34 +104,20 @@ describe('DocAssetCard', () => {
|
|||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c8 {
|
.c15 {
|
||||||
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 {
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #32324d;
|
color: #32324d;
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
line-height: 1.33;
|
line-height: 1.33;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c15 {
|
.c16 {
|
||||||
color: #666687;
|
color: #666687;
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
line-height: 1.33;
|
line-height: 1.33;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c21 {
|
.c22 {
|
||||||
color: #666687;
|
color: #666687;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 0.6875rem;
|
font-size: 0.6875rem;
|
||||||
@ -153,18 +125,18 @@ describe('DocAssetCard', () => {
|
|||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c19 {
|
.c20 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c17 {
|
.c18 {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
-webkit-flex-shrink: 0;
|
-webkit-flex-shrink: 0;
|
||||||
-ms-flex-negative: 0;
|
-ms-flex-negative: 0;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c20 {
|
.c21 {
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -236,7 +208,7 @@ describe('DocAssetCard', () => {
|
|||||||
background-color: #8e8ea9;
|
background-color: #8e8ea9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c13 {
|
.c14 {
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -245,6 +217,29 @@ describe('DocAssetCard', () => {
|
|||||||
border-bottom: 1px solid #eaeaef;
|
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 {
|
.c6 {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
@ -343,14 +338,19 @@ describe('DocAssetCard', () => {
|
|||||||
fill: #666687;
|
fill: #666687;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c16 {
|
.c17 {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c10 svg {
|
.c11 svg {
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.c10 {
|
||||||
|
border-radius: 4px 4px 0 0;
|
||||||
|
background: linear-gradient(180deg,#ffffff 0%,#f6f6f9 121.48%);
|
||||||
|
}
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<article
|
<article
|
||||||
aria-labelledby="card-1-title"
|
aria-labelledby="card-1-title"
|
||||||
@ -398,64 +398,64 @@ describe('DocAssetCard', () => {
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="c8"
|
class="c8 c9 c10"
|
||||||
|
height="5.5rem"
|
||||||
|
width="100%"
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
class="c9"
|
class="c11"
|
||||||
>
|
>
|
||||||
<span
|
<svg
|
||||||
class="c10"
|
aria-label="hello.png"
|
||||||
|
fill="none"
|
||||||
|
height="1em"
|
||||||
|
viewBox="0 0 24 33"
|
||||||
|
width="1em"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
>
|
>
|
||||||
<svg
|
<path
|
||||||
aria-label="hello.png"
|
clip-rule="evenodd"
|
||||||
fill="none"
|
d="M16.39.749l6.915 7.377A2.59 2.59 0 0124 9.877v19.638c0 1.381-1.042 2.493-2.337 2.493H2.337C1.042 32.008 0 30.896 0 29.515V2.5C0 1.827.253 1.22.695.75 1.137.277 1.705.008 2.337.008h12.41c.6 0 1.2.27 1.643.74zm.473 7.983h5.116L15.82 2.197V7.62c0 .607.474 1.112 1.042 1.112zM2.337 30.559h19.326c.537 0 .98-.471.98-1.044V10.18h-5.78c-1.326 0-2.4-1.145-2.4-2.56V1.456H2.337a.949.949 0 00-.695.303c-.19.203-.284.472-.284.741v27.015c0 .573.442 1.044.979 1.044zm3.358-5.248h12.442c.379 0 .695.326.726.718 0 .392-.316.718-.694.718H5.695c-.38 0-.695-.326-.695-.718 0-.392.316-.718.695-.718zm12.442-5.287H5.695c-.38 0-.695.327-.695.718 0 .392.316.718.695.718h12.474c.378 0 .694-.326.694-.718 0-.391-.347-.718-.726-.718zM5.695 14.738h12.442c.379 0 .726.326.726.718 0 .391-.316.718-.694.718H5.695c-.38 0-.695-.327-.695-.718 0-.392.316-.718.695-.718z"
|
||||||
height="1em"
|
fill="#C0C0CF"
|
||||||
viewBox="0 0 24 24"
|
fill-rule="evenodd"
|
||||||
width="1em"
|
/>
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
</svg>
|
||||||
>
|
</span>
|
||||||
<path
|
|
||||||
d="M20 22H6.5A3.5 3.5 0 013 18.5V5a3 3 0 013-3h14a1 1 0 011 1v18a1 1 0 01-1 1zm-1-2v-3H6.5a1.5 1.5 0 100 3H19z"
|
|
||||||
fill="#8E8EA9"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="c11"
|
class="c12"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="c12"
|
class="c13"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="c13"
|
class="c14"
|
||||||
>
|
>
|
||||||
<h2
|
<h2
|
||||||
class="c14"
|
class="c15"
|
||||||
id="card-1-title"
|
id="card-1-title"
|
||||||
>
|
>
|
||||||
hello.png
|
hello.png
|
||||||
</h2>
|
</h2>
|
||||||
<div
|
<div
|
||||||
class="c15"
|
class="c16"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="c16"
|
class="c17"
|
||||||
>
|
>
|
||||||
png
|
png
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="c17"
|
class="c18"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="c18 c19 c20"
|
class="c19 c20 c21"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="c21"
|
class="c22"
|
||||||
>
|
>
|
||||||
Doc
|
Doc
|
||||||
</span>
|
</span>
|
||||||
@ -465,7 +465,7 @@ describe('DocAssetCard', () => {
|
|||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<div
|
<div
|
||||||
class="c22"
|
class="c23"
|
||||||
>
|
>
|
||||||
<p
|
<p
|
||||||
aria-live="polite"
|
aria-live="polite"
|
||||||
|
|||||||
@ -130,7 +130,7 @@ describe('MediaLibrary / AssetList', () => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
expect(container).toMatchInlineSnapshot(`
|
expect(container).toMatchInlineSnapshot(`
|
||||||
.c28 {
|
.c31 {
|
||||||
border: 0;
|
border: 0;
|
||||||
-webkit-clip: rect(0 0 0 0);
|
-webkit-clip: rect(0 0 0 0);
|
||||||
clip: rect(0 0 0 0);
|
clip: rect(0 0 0 0);
|
||||||
@ -142,6 +142,29 @@ describe('MediaLibrary / AssetList', () => {
|
|||||||
width: 1px;
|
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 {
|
.c21 {
|
||||||
border: 0;
|
border: 0;
|
||||||
-webkit-clip: rect(0 0 0 0);
|
-webkit-clip: rect(0 0 0 0);
|
||||||
@ -393,14 +416,19 @@ describe('MediaLibrary / AssetList', () => {
|
|||||||
max-height: 10.25rem;
|
max-height: 10.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c27 {
|
.c30 {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c26 svg {
|
.c29 svg {
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.c28 {
|
||||||
|
border-radius: 4px 4px 0 0;
|
||||||
|
background: linear-gradient(180deg,#ffffff 0%,#f6f6f9 121.48%);
|
||||||
|
}
|
||||||
|
|
||||||
.c0 {
|
.c0 {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
|
grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
|
||||||
@ -599,29 +627,33 @@ describe('MediaLibrary / AssetList', () => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="c6"
|
class="c26 c27 c28"
|
||||||
|
height="10.25rem"
|
||||||
|
width="100%"
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
class="c19"
|
class="c29"
|
||||||
>
|
>
|
||||||
<span
|
<svg
|
||||||
class="c26"
|
aria-label="CARTE MARIAGE AVS - Printemps.pdf"
|
||||||
|
fill="none"
|
||||||
|
height="1em"
|
||||||
|
viewBox="0 0 24 33"
|
||||||
|
width="1em"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
>
|
>
|
||||||
<svg
|
<path
|
||||||
aria-label="CARTE MARIAGE AVS - Printemps.pdf"
|
d="M23.305 8.126L16.39.749c-.443-.472-1.043-.741-1.643-.741H2.337c-.632 0-1.2.27-1.642.74A2.529 2.529 0 000 2.5v27.015c0 1.381 1.042 2.493 2.337 2.493h19.326c1.295 0 2.337-1.112 2.337-2.493V9.877c0-.64-.253-1.28-.695-1.751zm-1.326.606h-5.116c-.568 0-1.042-.505-1.042-1.112V2.197l6.158 6.535zm-.316 21.827H2.337c-.537 0-.98-.471-.98-1.044V2.5c0-.269.096-.538.285-.74a.949.949 0 01.695-.304h12.126V7.62c0 1.415 1.074 2.56 2.4 2.56h5.78v19.335c0 .573-.443 1.044-.98 1.044z"
|
||||||
fill="none"
|
fill="#D9822F"
|
||||||
height="1em"
|
/>
|
||||||
viewBox="0 0 24 24"
|
<path
|
||||||
width="1em"
|
clip-rule="evenodd"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
d="M13.964 20.095c.344.252.781.522 1.312.811a16.714 16.714 0 011.827-.1c1.53 0 2.451.236 2.764.709.166.212.177.463.031.753 0 .01-.005.02-.016.029l-.03.029v.014c-.063.367-.433.55-1.11.55-.5 0-1.098-.096-1.795-.29a11.908 11.908 0 01-2.03-.767c-2.3.232-4.341.633-6.121 1.202-1.593 2.53-2.852 3.795-3.779 3.795a.965.965 0 01-.437-.102l-.375-.174a1.668 1.668 0 00-.093-.072c-.105-.096-.136-.27-.094-.521.094-.386.385-.828.874-1.325.49-.498 1.177-.963 2.061-1.398.146-.087.266-.058.36.087.02.02.03.039.03.058a34.703 34.703 0 001.672-2.853c.707-1.313 1.249-2.578 1.623-3.794a10.952 10.952 0 01-.476-2.31c-.067-.748-.034-1.364.102-1.847.114-.386.333-.579.655-.579h.344c.24 0 .422.072.547.217.187.203.234.531.14.985a.307.307 0 01-.062.116.35.35 0 01.015.116v.434c-.02 1.188-.093 2.115-.218 2.78.572 1.584 1.332 2.733 2.28 3.447zM4.97 26.047c.542-.232 1.255-.995 2.14-2.289-.531.387-.987.792-1.367 1.217-.38.425-.637.782-.773 1.072zm6.183-11.412c-.135-.868-.125-1.506.032-1.911v-.03c.01-.009.015-.019.015-.028a.798.798 0 01.203.521c0 .01.005.024.016.044 0 .01.005.019.015.029a.317.317 0 00-.062.116c-.073.386-.11.593-.11.622l-.109.637zm-1.904 7.66a24.288 24.288 0 014.434-1.173 2.398 2.398 0 01-.203-.137 2.761 2.761 0 01-.25-.196c-.79-.647-1.452-1.496-1.983-2.549-.28.83-.713 1.782-1.296 2.854-.312.54-.546.94-.702 1.201zm7.9-.58c1.208 0 1.937.117 2.187.349.02.019.031.033.031.043-.042.01-.135.014-.281.014-.5 0-1.145-.135-1.936-.405z"
|
||||||
>
|
fill="#D9822F"
|
||||||
<path
|
fill-rule="evenodd"
|
||||||
d="M20 22H6.5A3.5 3.5 0 013 18.5V5a3 3 0 013-3h14a1 1 0 011 1v18a1 1 0 01-1 1zm-1-2v-3H6.5a1.5 1.5 0 100 3H19z"
|
/>
|
||||||
fill="#8E8EA9"
|
</svg>
|
||||||
/>
|
</span>
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
@ -643,7 +675,7 @@ describe('MediaLibrary / AssetList', () => {
|
|||||||
class="c12"
|
class="c12"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="c27"
|
class="c30"
|
||||||
>
|
>
|
||||||
pdf
|
pdf
|
||||||
</span>
|
</span>
|
||||||
@ -686,7 +718,7 @@ describe('MediaLibrary / AssetList', () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="c28"
|
class="c31"
|
||||||
>
|
>
|
||||||
<p
|
<p
|
||||||
aria-live="polite"
|
aria-live="polite"
|
||||||
|
|||||||
@ -1,12 +1,17 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import BookIcon from '@strapi/icons/Book';
|
import FileIcon from '@strapi/icons/File';
|
||||||
import { Icon } from '@strapi/design-system/Icon';
|
import FilePdfIcon from '@strapi/icons/FilePdf';
|
||||||
import { Box } from '@strapi/design-system/Box';
|
import { Box } from '@strapi/design-system/Box';
|
||||||
|
import { Flex } from '@strapi/design-system/Flex';
|
||||||
import { AssetType, AssetDefinition } from '../../../constants';
|
import { AssetType, AssetDefinition } from '../../../constants';
|
||||||
import { VideoPreview } from '../../AssetCard/VideoPreview';
|
import { VideoPreview } from '../../AssetCard/VideoPreview';
|
||||||
import { createAssetUrl } from '../../../utils/createAssetUrl';
|
import { createAssetUrl } from '../../../utils/createAssetUrl';
|
||||||
|
|
||||||
|
const DocAsset = styled(Flex)`
|
||||||
|
background: linear-gradient(180deg, #ffffff 0%, #f6f6f9 121.48%);
|
||||||
|
`;
|
||||||
|
|
||||||
const VideoPreviewWrapper = styled(Box)`
|
const VideoPreviewWrapper = styled(Box)`
|
||||||
canvas,
|
canvas,
|
||||||
video {
|
video {
|
||||||
@ -40,7 +45,15 @@ export const CarouselAsset = ({ asset }) => {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return <Icon as={BookIcon} aria-label={asset.alternativeText || asset.name} />;
|
return (
|
||||||
|
<DocAsset width="100%" height="100%" justifyContent="center" hasRadius>
|
||||||
|
{asset.ext.includes('pdf') ? (
|
||||||
|
<FilePdfIcon aria-label={asset.alternativeText || asset.name} width="24px" height="32px" />
|
||||||
|
) : (
|
||||||
|
<FileIcon aria-label={asset.alternativeText || asset.name} width="24px" height="32px" />
|
||||||
|
)}
|
||||||
|
</DocAsset>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
CarouselAsset.propTypes = {
|
CarouselAsset.propTypes = {
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
||||||
.c49 {
|
.c52 {
|
||||||
border: 0;
|
border: 0;
|
||||||
-webkit-clip: rect(0 0 0 0);
|
-webkit-clip: rect(0 0 0 0);
|
||||||
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;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c46 {
|
.c49 {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
@ -163,12 +163,12 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
|||||||
border-bottom: 1px solid #eaeaef;
|
border-bottom: 1px solid #eaeaef;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c45 {
|
.c48 {
|
||||||
border-radius: 0 0 4px 4px;
|
border-radius: 0 0 4px 4px;
|
||||||
border-top: 1px solid #eaeaef;
|
border-top: 1px solid #eaeaef;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c47 > * + * {
|
.c50 > * + * {
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -333,7 +333,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
|||||||
background: #4945ff;
|
background: #4945ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c48 {
|
.c51 {
|
||||||
-webkit-align-items: center;
|
-webkit-align-items: center;
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
@ -345,7 +345,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
|||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c48 .sc-Qpmqz {
|
.c51 .sc-Qpmqz {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
@ -356,55 +356,60 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c48 .c16 {
|
.c51 .c16 {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c48[aria-disabled='true'] {
|
.c51[aria-disabled='true'] {
|
||||||
border: 1px solid #dcdce4;
|
border: 1px solid #dcdce4;
|
||||||
background: #eaeaef;
|
background: #eaeaef;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c48[aria-disabled='true'] .c16 {
|
.c51[aria-disabled='true'] .c16 {
|
||||||
color: #666687;
|
color: #666687;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c48[aria-disabled='true'] svg > g,
|
.c51[aria-disabled='true'] svg > g,
|
||||||
.c48[aria-disabled='true'] svg path {
|
.c51[aria-disabled='true'] svg path {
|
||||||
fill: #666687;
|
fill: #666687;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c48[aria-disabled='true']:active {
|
.c51[aria-disabled='true']:active {
|
||||||
border: 1px solid #dcdce4;
|
border: 1px solid #dcdce4;
|
||||||
background: #eaeaef;
|
background: #eaeaef;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c48[aria-disabled='true']:active .c16 {
|
.c51[aria-disabled='true']:active .c16 {
|
||||||
color: #666687;
|
color: #666687;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c48[aria-disabled='true']:active svg > g,
|
.c51[aria-disabled='true']:active svg > g,
|
||||||
.c48[aria-disabled='true']:active svg path {
|
.c51[aria-disabled='true']:active svg path {
|
||||||
fill: #666687;
|
fill: #666687;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c48:hover {
|
.c51:hover {
|
||||||
background-color: #f6f6f9;
|
background-color: #f6f6f9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c48:active {
|
.c51:active {
|
||||||
background-color: #eaeaef;
|
background-color: #eaeaef;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c48 .c16 {
|
.c51 .c16 {
|
||||||
color: #32324d;
|
color: #32324d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c48 svg > g,
|
.c51 svg > g,
|
||||||
.c48 svg path {
|
.c51 svg path {
|
||||||
fill: #32324d;
|
fill: #32324d;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.c36 {
|
||||||
|
width: 100%;
|
||||||
|
height: 5.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.c10 {
|
.c10 {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
@ -423,6 +428,24 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
|||||||
align-items: center;
|
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 {
|
.c9 {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
@ -471,7 +494,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
|||||||
grid-column: span 4;
|
grid-column: span 4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c40 {
|
.c43 {
|
||||||
border: 0;
|
border: 0;
|
||||||
-webkit-clip: rect(0 0 0 0);
|
-webkit-clip: rect(0 0 0 0);
|
||||||
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;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c41 {
|
.c44 {
|
||||||
background: #32324d;
|
background: #32324d;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
@ -541,7 +564,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
|||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c36 {
|
.c41 {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
@ -597,7 +620,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
|||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c43 {
|
.c46 {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
line-height: 1.33;
|
line-height: 1.33;
|
||||||
@ -627,7 +650,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
|||||||
border-bottom: 1px solid #eaeaef;
|
border-bottom: 1px solid #eaeaef;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c42 {
|
.c45 {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 4px;
|
bottom: 4px;
|
||||||
right: 4px;
|
right: 4px;
|
||||||
@ -637,25 +660,30 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
|||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c44 {
|
.c47 {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c39 canvas,
|
.c42 canvas,
|
||||||
.c39 video {
|
.c42 video {
|
||||||
display: block;
|
display: block;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
max-height: 5.5rem;
|
max-height: 5.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c38 {
|
.c40 {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c37 svg {
|
.c39 svg {
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.c38 {
|
||||||
|
border-radius: 4px 4px 0 0;
|
||||||
|
background: linear-gradient(180deg,#ffffff 0%,#f6f6f9 121.48%);
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width:68.75rem) {
|
@media (max-width:68.75rem) {
|
||||||
.c19 {
|
.c19 {
|
||||||
grid-column: span;
|
grid-column: span;
|
||||||
@ -824,28 +852,32 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
|||||||
class="c21 c22"
|
class="c21 c22"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="c23"
|
class="c36 c37 c38"
|
||||||
|
height="5.5rem"
|
||||||
|
width="100%"
|
||||||
>
|
>
|
||||||
<div
|
<span
|
||||||
class="c36"
|
class="c39"
|
||||||
>
|
>
|
||||||
<span
|
<svg
|
||||||
class="c37"
|
fill="none"
|
||||||
|
height="1em"
|
||||||
|
viewBox="0 0 24 33"
|
||||||
|
width="1em"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
>
|
>
|
||||||
<svg
|
<path
|
||||||
fill="none"
|
d="M23.305 8.126L16.39.749c-.443-.472-1.043-.741-1.643-.741H2.337c-.632 0-1.2.27-1.642.74A2.529 2.529 0 000 2.5v27.015c0 1.381 1.042 2.493 2.337 2.493h19.326c1.295 0 2.337-1.112 2.337-2.493V9.877c0-.64-.253-1.28-.695-1.751zm-1.326.606h-5.116c-.568 0-1.042-.505-1.042-1.112V2.197l6.158 6.535zm-.316 21.827H2.337c-.537 0-.98-.471-.98-1.044V2.5c0-.269.096-.538.285-.74a.949.949 0 01.695-.304h12.126V7.62c0 1.415 1.074 2.56 2.4 2.56h5.78v19.335c0 .573-.443 1.044-.98 1.044z"
|
||||||
height="1em"
|
fill="#D9822F"
|
||||||
viewBox="0 0 24 24"
|
/>
|
||||||
width="1em"
|
<path
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
clip-rule="evenodd"
|
||||||
>
|
d="M13.964 20.095c.344.252.781.522 1.312.811a16.714 16.714 0 011.827-.1c1.53 0 2.451.236 2.764.709.166.212.177.463.031.753 0 .01-.005.02-.016.029l-.03.029v.014c-.063.367-.433.55-1.11.55-.5 0-1.098-.096-1.795-.29a11.908 11.908 0 01-2.03-.767c-2.3.232-4.341.633-6.121 1.202-1.593 2.53-2.852 3.795-3.779 3.795a.965.965 0 01-.437-.102l-.375-.174a1.668 1.668 0 00-.093-.072c-.105-.096-.136-.27-.094-.521.094-.386.385-.828.874-1.325.49-.498 1.177-.963 2.061-1.398.146-.087.266-.058.36.087.02.02.03.039.03.058a34.703 34.703 0 001.672-2.853c.707-1.313 1.249-2.578 1.623-3.794a10.952 10.952 0 01-.476-2.31c-.067-.748-.034-1.364.102-1.847.114-.386.333-.579.655-.579h.344c.24 0 .422.072.547.217.187.203.234.531.14.985a.307.307 0 01-.062.116.35.35 0 01.015.116v.434c-.02 1.188-.093 2.115-.218 2.78.572 1.584 1.332 2.733 2.28 3.447zM4.97 26.047c.542-.232 1.255-.995 2.14-2.289-.531.387-.987.792-1.367 1.217-.38.425-.637.782-.773 1.072zm6.183-11.412c-.135-.868-.125-1.506.032-1.911v-.03c.01-.009.015-.019.015-.028a.798.798 0 01.203.521c0 .01.005.024.016.044 0 .01.005.019.015.029a.317.317 0 00-.062.116c-.073.386-.11.593-.11.622l-.109.637zm-1.904 7.66a24.288 24.288 0 014.434-1.173 2.398 2.398 0 01-.203-.137 2.761 2.761 0 01-.25-.196c-.79-.647-1.452-1.496-1.983-2.549-.28.83-.713 1.782-1.296 2.854-.312.54-.546.94-.702 1.201zm7.9-.58c1.208 0 1.937.117 2.187.349.02.019.031.033.031.043-.042.01-.135.014-.281.014-.5 0-1.145-.135-1.936-.405z"
|
||||||
<path
|
fill="#D9822F"
|
||||||
d="M20 22H6.5A3.5 3.5 0 013 18.5V5a3 3 0 013-3h14a1 1 0 011 1v18a1 1 0 01-1 1zm-1-2v-3H6.5a1.5 1.5 0 100 3H19z"
|
fill-rule="evenodd"
|
||||||
fill="#8E8EA9"
|
/>
|
||||||
/>
|
</svg>
|
||||||
</svg>
|
</span>
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
@ -865,7 +897,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
|||||||
class="c29"
|
class="c29"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="c38"
|
class="c40"
|
||||||
>
|
>
|
||||||
pdf
|
pdf
|
||||||
</span>
|
</span>
|
||||||
@ -907,10 +939,10 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
|||||||
class="c23"
|
class="c23"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="c36"
|
class="c41"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="c39"
|
class="c42"
|
||||||
>
|
>
|
||||||
<figure
|
<figure
|
||||||
class=""
|
class=""
|
||||||
@ -924,17 +956,17 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
|||||||
/>
|
/>
|
||||||
</video>
|
</video>
|
||||||
<figcaption
|
<figcaption
|
||||||
class="c40"
|
class="c43"
|
||||||
/>
|
/>
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<time
|
<time
|
||||||
class="c41 c42"
|
class="c44 c45"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="c43"
|
class="c46"
|
||||||
>
|
>
|
||||||
...
|
...
|
||||||
</span>
|
</span>
|
||||||
@ -957,7 +989,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
|||||||
class="c29"
|
class="c29"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="c44"
|
class="c47"
|
||||||
>
|
>
|
||||||
mp4
|
mp4
|
||||||
</span>
|
</span>
|
||||||
@ -986,17 +1018,17 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="c0 c45"
|
class="c0 c48"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="c2"
|
class="c2"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="c46 c47"
|
class="c49 c50"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
aria-disabled="false"
|
aria-disabled="false"
|
||||||
class="c14 c48"
|
class="c14 c51"
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
@ -1005,7 +1037,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="c46 c47"
|
class="c49 c50"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
aria-disabled="false"
|
aria-disabled="false"
|
||||||
@ -1023,7 +1055,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<div
|
<div
|
||||||
class="c49"
|
class="c52"
|
||||||
>
|
>
|
||||||
<p
|
<p
|
||||||
aria-live="polite"
|
aria-live="polite"
|
||||||
|
|||||||
@ -115,6 +115,11 @@ export const MediaLibrary = () => {
|
|||||||
id: getTrad('bulk.select.label'),
|
id: getTrad('bulk.select.label'),
|
||||||
defaultMessage: 'Select all assets',
|
defaultMessage: 'Select all assets',
|
||||||
})}
|
})}
|
||||||
|
indeterminate={
|
||||||
|
assets?.length > 0 &&
|
||||||
|
selected.length > 0 &&
|
||||||
|
selected.length !== assets?.length
|
||||||
|
}
|
||||||
value={assets?.length > 0 && selected.length === assets?.length}
|
value={assets?.length > 0 && selected.length === assets?.length}
|
||||||
onChange={() => selectAll(assets)}
|
onChange={() => selectAll(assets)}
|
||||||
/>
|
/>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user