mirror of
https://github.com/strapi/strapi.git
synced 2025-12-12 07:27:46 +00:00
merge bis + fix merge conflicts
This commit is contained in:
ronronscelestes
commit
31ea7896ca
@ -23,6 +23,10 @@ const Wrapper = styled.div`
|
||||
margin-block-end: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: ${36 / 16}rem;
|
||||
font-weight: 600;
|
||||
|
||||
@ -20,7 +20,7 @@ loadCss();
|
||||
const md = new Markdown({
|
||||
html: true, // Enable HTML tags in source
|
||||
xhtmlOut: false,
|
||||
breaks: false,
|
||||
breaks: true,
|
||||
langPrefix: 'language-',
|
||||
linkify: true,
|
||||
typographer: true,
|
||||
|
||||
@ -12,6 +12,7 @@ const Editor = ({
|
||||
editorRef,
|
||||
error,
|
||||
isPreviewMode,
|
||||
isExpandMode,
|
||||
name,
|
||||
onChange,
|
||||
placeholder,
|
||||
@ -64,7 +65,7 @@ const Editor = ({
|
||||
|
||||
return (
|
||||
<EditorAndPreviewWrapper>
|
||||
<EditorStylesContainer disabled={disabled || isPreviewMode}>
|
||||
<EditorStylesContainer isExpandMode={isExpandMode} disabled={disabled || isPreviewMode}>
|
||||
<textarea ref={textareaRef} />
|
||||
</EditorStylesContainer>
|
||||
{isPreviewMode && <PreviewWysiwyg data={value} />}
|
||||
@ -76,6 +77,7 @@ Editor.defaultProps = {
|
||||
disabled: false,
|
||||
error: undefined,
|
||||
isPreviewMode: false,
|
||||
isExpandMode: false,
|
||||
placeholder: '',
|
||||
value: '',
|
||||
};
|
||||
@ -85,6 +87,7 @@ Editor.propTypes = {
|
||||
editorRef: PropTypes.shape({ current: PropTypes.any }).isRequired,
|
||||
error: PropTypes.string,
|
||||
isPreviewMode: PropTypes.bool,
|
||||
isExpandMode: PropTypes.bool,
|
||||
name: PropTypes.string.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
placeholder: PropTypes.string,
|
||||
|
||||
@ -4,6 +4,7 @@ import styled from 'styled-components';
|
||||
/* stylelint-disable */
|
||||
export const EditorStylesContainer = styled.div`
|
||||
cursor: ${({ disabled }) => (disabled ? 'not-allowed !important' : 'auto')};
|
||||
height: 100%;
|
||||
/* BASICS */
|
||||
.CodeMirror-placeholder {
|
||||
color: ${({ theme }) => theme.colors.neutral600} !important;
|
||||
@ -12,7 +13,7 @@ export const EditorStylesContainer = styled.div`
|
||||
.CodeMirror {
|
||||
/* Set height, width, borders, and global font properties here */
|
||||
font-size: ${14 / 16}rem;
|
||||
height: 290px;
|
||||
height: ${({ isExpandMode }) => (isExpandMode ? '100%' : '290px')};
|
||||
color: ${({ theme }) => theme.colors.neutral800};
|
||||
direction: ltr;
|
||||
font-family: --apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
||||
|
||||
@ -28,7 +28,9 @@ import {
|
||||
} from './WysiwygStyles';
|
||||
|
||||
const WysiwygNav = ({
|
||||
disabled,
|
||||
editorRef,
|
||||
isExpandMode,
|
||||
isPreviewMode,
|
||||
onActionClick,
|
||||
onToggleMediaLib,
|
||||
@ -46,7 +48,7 @@ const WysiwygNav = ({
|
||||
setVisiblePopover(prev => !prev);
|
||||
};
|
||||
|
||||
if (isPreviewMode) {
|
||||
if (disabled || isPreviewMode) {
|
||||
return (
|
||||
<Box padding={2} background="neutral100">
|
||||
<Flex justifyContent="space-between">
|
||||
@ -87,12 +89,14 @@ const WysiwygNav = ({
|
||||
<MoreButton disabled id="more" label="More" icon={<More />} />
|
||||
</Flex>
|
||||
|
||||
{!isExpandMode && (
|
||||
<Button onClick={onTogglePreviewMode} variant="tertiary" id="preview">
|
||||
{formatMessage({
|
||||
id: 'components.Wysiwyg.ToggleMode.markdown-mode',
|
||||
defaultMessage: 'Markdown mode',
|
||||
})}
|
||||
</Button>
|
||||
)}
|
||||
</Flex>
|
||||
</Box>
|
||||
);
|
||||
@ -149,7 +153,7 @@ const WysiwygNav = ({
|
||||
/>
|
||||
{visiblePopover && (
|
||||
<Popover centered source={buttonMoreRef} spacing={4} id="popover">
|
||||
<FocusTrap onEscape={handleTogglePopover}>
|
||||
<FocusTrap onEscape={handleTogglePopover} restoreFocus={false}>
|
||||
<Flex>
|
||||
<IconButtonGroupMargin>
|
||||
<CustomIconButton
|
||||
@ -235,7 +239,9 @@ WysiwygNav.defaultProps = {
|
||||
};
|
||||
|
||||
WysiwygNav.propTypes = {
|
||||
disabled: PropTypes.bool.isRequired,
|
||||
editorRef: PropTypes.shape({ current: PropTypes.any }).isRequired,
|
||||
isExpandMode: PropTypes.bool.isRequired,
|
||||
isPreviewMode: PropTypes.bool,
|
||||
onActionClick: PropTypes.func,
|
||||
onToggleMediaLib: PropTypes.func,
|
||||
|
||||
@ -45,6 +45,7 @@ export const IconButtonGroupMargin = styled(IconButtonGroup)`
|
||||
|
||||
export const EditorAndPreviewWrapper = styled.div`
|
||||
position: relative;
|
||||
height: calc(100% - 48px);
|
||||
`;
|
||||
|
||||
// FOOTER
|
||||
|
||||
@ -144,15 +144,18 @@ const Wysiwyg = ({
|
||||
onCollapse={handleToggleExpand}
|
||||
>
|
||||
<WysiwygNav
|
||||
isExpandMode={isExpandMode}
|
||||
editorRef={editorRef}
|
||||
isPreviewMode={isPreviewMode}
|
||||
onActionClick={handleActionClick}
|
||||
onToggleMediaLib={handleToggleMediaLib}
|
||||
onTogglePreviewMode={isExpandMode ? undefined : handleTogglePreviewMode}
|
||||
disabled={disabled}
|
||||
/>
|
||||
|
||||
<Editor
|
||||
disabled={disabled}
|
||||
isExpandMode={isExpandMode}
|
||||
editorRef={editorRef}
|
||||
error={errorMessage}
|
||||
isPreviewMode={isPreviewMode}
|
||||
@ -185,7 +188,7 @@ const Wysiwyg = ({
|
||||
|
||||
Wysiwyg.defaultProps = {
|
||||
description: null,
|
||||
disabled: true,
|
||||
disabled: false,
|
||||
error: '',
|
||||
labelAction: undefined,
|
||||
placeholder: null,
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import * as React from 'react';
|
||||
import { IntlProvider } from 'react-intl';
|
||||
import { render, waitFor, fireEvent } from '@testing-library/react';
|
||||
import { lightTheme, ThemeProvider } from '@strapi/design-system';
|
||||
import { ThemeProvider } from '@strapi/design-system/ThemeProvider';
|
||||
import { lightTheme } from '@strapi/design-system/themes';
|
||||
import Wysiwyg from '../index';
|
||||
|
||||
jest.mock('@strapi/helper-plugin', () => ({
|
||||
@ -39,6 +40,7 @@ describe('Wysiwyg render and actions buttons', () => {
|
||||
name="rich-text"
|
||||
intlLabel={{ id: 'hello world', defaultMessage: 'hello world' }}
|
||||
onChange={onChange}
|
||||
disabled={false}
|
||||
/>
|
||||
</IntlProvider>
|
||||
</ThemeProvider>
|
||||
@ -203,7 +205,7 @@ describe('Wysiwyg render and actions buttons', () => {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.c28 .sc-BHvUt {
|
||||
.c28 .sc-pVTFL {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
@ -607,7 +609,8 @@ describe('Wysiwyg render and actions buttons', () => {
|
||||
}
|
||||
|
||||
.c32 {
|
||||
cursor: not-allowed !important;
|
||||
cursor: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.c32 .CodeMirror-placeholder {
|
||||
@ -1008,6 +1011,7 @@ describe('Wysiwyg render and actions buttons', () => {
|
||||
|
||||
.c31 {
|
||||
position: relative;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
|
||||
.c36 {
|
||||
@ -1238,7 +1242,6 @@ describe('Wysiwyg render and actions buttons', () => {
|
||||
>
|
||||
<div
|
||||
class="c32"
|
||||
disabled=""
|
||||
>
|
||||
<textarea
|
||||
style="display: none;"
|
||||
@ -1254,8 +1257,6 @@ describe('Wysiwyg render and actions buttons', () => {
|
||||
aria-label="Editor"
|
||||
autocapitalize="off"
|
||||
autocorrect="off"
|
||||
disabled=""
|
||||
readonly=""
|
||||
spellcheck="false"
|
||||
style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; min-height: 1em; outline: none;"
|
||||
tabindex="0"
|
||||
|
||||
@ -41,9 +41,7 @@ const DisplayedFields = ({ editLayout, editLayoutRemainingFields, onRemoveField,
|
||||
<Box padding={4} hasRadius borderStyle="dashed" borderWidth="1px" borderColor="neutral300">
|
||||
<Stack size={2}>
|
||||
{editLayout.map((row, index) => (
|
||||
<React.Fragment key={row.rowId}>
|
||||
<RowsLayout row={row} rowIndex={index} onRemoveField={onRemoveField} />
|
||||
</React.Fragment>
|
||||
<RowsLayout key={row.rowId} row={row} rowIndex={index} onRemoveField={onRemoveField} />
|
||||
))}
|
||||
<SimpleMenu
|
||||
id="label"
|
||||
|
||||
@ -47,19 +47,18 @@ const ModalForm = ({ onChange }) => {
|
||||
return formToDisplay.map(meta => {
|
||||
const formType = get(attributes, [selectedField, 'type']);
|
||||
|
||||
if (formType === 'dynamiczone' && !['label', 'description'].includes(meta)) {
|
||||
if (
|
||||
formType === 'dynamiczone' ||
|
||||
(formType === 'component' && !['label', 'description'].includes(meta))
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if ((formType === 'component' || formType === 'media') && meta !== 'label') {
|
||||
if (formType === 'component' && meta !== 'label') {
|
||||
return null;
|
||||
}
|
||||
|
||||
if ((formType === 'json' || formType === 'boolean') && meta === 'placeholder') {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (formType === 'richtext' && meta === 'editable') {
|
||||
if (['media', 'json', 'boolean'].includes(formType) && meta === 'placeholder') {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
@ -87,12 +87,12 @@
|
||||
"koa-passport": "4.1.4",
|
||||
"koa-static": "5.0.0",
|
||||
"lodash": "4.17.21",
|
||||
"markdown-it": "^12.0.6",
|
||||
"markdown-it": "^12.3.2",
|
||||
"markdown-it-abbr": "^1.0.4",
|
||||
"markdown-it-container": "^3.0.0",
|
||||
"markdown-it-deflist": "^2.0.3",
|
||||
"markdown-it-deflist": "^2.1.0",
|
||||
"markdown-it-emoji": "^2.0.0",
|
||||
"markdown-it-footnote": "^3.0.2",
|
||||
"markdown-it-footnote": "^3.0.3",
|
||||
"markdown-it-ins": "^3.0.1",
|
||||
"markdown-it-mark": "^3.0.1",
|
||||
"markdown-it-sub": "^1.0.0",
|
||||
|
||||
@ -38,6 +38,7 @@ const DateTimePicker = ({
|
||||
name,
|
||||
required,
|
||||
size,
|
||||
step,
|
||||
value,
|
||||
...props
|
||||
}) => {
|
||||
@ -146,6 +147,7 @@ const DateTimePicker = ({
|
||||
onClear={onClear && handleTimeClear}
|
||||
clearLabel={clearLabel}
|
||||
disabled={disabled}
|
||||
step={step}
|
||||
/>
|
||||
</Stack>
|
||||
<FieldHint />
|
||||
@ -168,6 +170,7 @@ DateTimePicker.defaultProps = {
|
||||
onClear: undefined,
|
||||
required: false,
|
||||
size: 'M',
|
||||
step: 1,
|
||||
value: undefined,
|
||||
};
|
||||
|
||||
@ -184,6 +187,7 @@ DateTimePicker.propTypes = {
|
||||
onClear: PropTypes.func,
|
||||
required: PropTypes.bool,
|
||||
size: PropTypes.oneOf(['S', 'M']),
|
||||
step: PropTypes.number,
|
||||
value: PropTypes.instanceOf(Date),
|
||||
};
|
||||
|
||||
|
||||
@ -146,6 +146,7 @@ const GenericInput = ({
|
||||
|
||||
onChange({ target: { name, value: formattedDate, type } });
|
||||
}}
|
||||
step={step}
|
||||
onClear={() => onChange({ target: { name, value: '', type } })}
|
||||
placeholder={formattedPlaceholder}
|
||||
required={required}
|
||||
|
||||
@ -12,6 +12,7 @@ import {
|
||||
CardTitle,
|
||||
CardSubtitle,
|
||||
} from '@strapi/design-system/Card';
|
||||
import { Box } from '@strapi/design-system/Box';
|
||||
import { Flex } from '@strapi/design-system/Flex';
|
||||
import { IconButton } from '@strapi/design-system/IconButton';
|
||||
import Pencil from '@strapi/icons/Pencil';
|
||||
@ -68,7 +69,9 @@ export const DocAssetCard = ({ name, extension, selected, onSelect, onEdit, size
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<CardContent>
|
||||
<Box paddingTop={1}>
|
||||
<CardTitle as="h2">{name}</CardTitle>
|
||||
</Box>
|
||||
<CardSubtitle>
|
||||
<Extension>{extension}</Extension>
|
||||
</CardSubtitle>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'styled-components';
|
||||
import { Box } from '@strapi/design-system/Box';
|
||||
import {
|
||||
Card,
|
||||
CardAction,
|
||||
@ -58,7 +59,9 @@ export const ImageAssetCard = ({
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<CardContent>
|
||||
<Box paddingTop={1}>
|
||||
<CardTitle as="h2">{name}</CardTitle>
|
||||
</Box>
|
||||
<CardSubtitle>
|
||||
<Extension>{extension}</Extension>
|
||||
{height && width && ` - ${height}✕${width}`}
|
||||
|
||||
@ -12,6 +12,7 @@ import {
|
||||
} from '@strapi/design-system/Card';
|
||||
import { Typography } from '@strapi/design-system/Typography';
|
||||
import { Stack } from '@strapi/design-system/Stack';
|
||||
import { Box } from '@strapi/design-system/Box';
|
||||
import { useIntl } from 'react-intl';
|
||||
import { getTrad } from '../../utils';
|
||||
import { AssetType } from '../../constants';
|
||||
@ -82,7 +83,9 @@ export const UploadingAssetCard = ({ asset, onCancel, onStatusChange, addUploade
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<CardContent>
|
||||
<Box paddingTop={1}>
|
||||
<CardTitle as="h2">{asset.name}</CardTitle>
|
||||
</Box>
|
||||
<CardSubtitle>
|
||||
<Extension>{asset.ext}</Extension>
|
||||
</CardSubtitle>
|
||||
|
||||
@ -70,7 +70,9 @@ export const VideoAssetCard = ({
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<CardContent>
|
||||
<Box paddingTop={1}>
|
||||
<CardTitle as="h2">{name}</CardTitle>
|
||||
</Box>
|
||||
<CardSubtitle>
|
||||
<Extension>{extension}</Extension>
|
||||
</CardSubtitle>
|
||||
|
||||
@ -29,7 +29,7 @@ describe('DocAssetCard', () => {
|
||||
);
|
||||
|
||||
expect(container).toMatchInlineSnapshot(`
|
||||
.c23 {
|
||||
.c24 {
|
||||
border: 0;
|
||||
-webkit-clip: rect(0 0 0 0);
|
||||
clip: rect(0 0 0 0);
|
||||
@ -54,7 +54,7 @@ describe('DocAssetCard', () => {
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.c19 {
|
||||
.c20 {
|
||||
background: #f6f6f9;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
@ -105,7 +105,7 @@ describe('DocAssetCard', () => {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.c20 {
|
||||
.c21 {
|
||||
display: -webkit-inline-box;
|
||||
display: -webkit-inline-flex;
|
||||
display: -ms-inline-flexbox;
|
||||
@ -123,20 +123,20 @@ describe('DocAssetCard', () => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c15 {
|
||||
.c16 {
|
||||
font-weight: 600;
|
||||
color: #32324d;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
}
|
||||
|
||||
.c16 {
|
||||
.c17 {
|
||||
color: #666687;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
}
|
||||
|
||||
.c22 {
|
||||
.c23 {
|
||||
color: #666687;
|
||||
font-weight: 600;
|
||||
font-size: 0.6875rem;
|
||||
@ -144,14 +144,14 @@ describe('DocAssetCard', () => {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.c18 {
|
||||
.c19 {
|
||||
margin-left: auto;
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.c21 {
|
||||
.c22 {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
@ -232,6 +232,10 @@ describe('DocAssetCard', () => {
|
||||
border-bottom: 1px solid #eaeaef;
|
||||
}
|
||||
|
||||
.c15 {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
width: 100%;
|
||||
height: 5.5rem;
|
||||
@ -353,7 +357,7 @@ describe('DocAssetCard', () => {
|
||||
fill: #666687;
|
||||
}
|
||||
|
||||
.c17 {
|
||||
.c18 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@ -447,30 +451,34 @@ describe('DocAssetCard', () => {
|
||||
<div
|
||||
class="c14"
|
||||
>
|
||||
<h2
|
||||
<div
|
||||
class="c15"
|
||||
>
|
||||
<h2
|
||||
class="c16"
|
||||
id="card-1-title"
|
||||
>
|
||||
hello.png
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
class="c16"
|
||||
class="c17"
|
||||
>
|
||||
<span
|
||||
class="c17"
|
||||
class="c18"
|
||||
>
|
||||
png
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c18"
|
||||
class="c19"
|
||||
>
|
||||
<div
|
||||
class="c19 c20 c21"
|
||||
class="c20 c21 c22"
|
||||
>
|
||||
<span
|
||||
class="c22"
|
||||
class="c23"
|
||||
>
|
||||
Doc
|
||||
</span>
|
||||
@ -480,7 +488,7 @@ describe('DocAssetCard', () => {
|
||||
</div>
|
||||
</article>
|
||||
<div
|
||||
class="c23"
|
||||
class="c24"
|
||||
>
|
||||
<p
|
||||
aria-live="polite"
|
||||
|
||||
@ -31,7 +31,7 @@ describe('ImageAssetCard', () => {
|
||||
);
|
||||
|
||||
expect(container).toMatchInlineSnapshot(`
|
||||
.c21 {
|
||||
.c22 {
|
||||
border: 0;
|
||||
-webkit-clip: rect(0 0 0 0);
|
||||
clip: rect(0 0 0 0);
|
||||
@ -43,6 +43,10 @@ describe('ImageAssetCard', () => {
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.c13 {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
background: #ffffff;
|
||||
border-radius: 4px;
|
||||
@ -56,7 +60,7 @@ describe('ImageAssetCard', () => {
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.c17 {
|
||||
.c18 {
|
||||
background: #f6f6f9;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
@ -107,7 +111,7 @@ describe('ImageAssetCard', () => {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.c18 {
|
||||
.c19 {
|
||||
display: -webkit-inline-box;
|
||||
display: -webkit-inline-flex;
|
||||
display: -ms-inline-flexbox;
|
||||
@ -146,20 +150,20 @@ describe('ImageAssetCard', () => {
|
||||
background: repeating-conic-gradient(#f6f6f9 0% 25%,transparent 0% 50%) 50% / 20px 20px;
|
||||
}
|
||||
|
||||
.c13 {
|
||||
.c14 {
|
||||
font-weight: 600;
|
||||
color: #32324d;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
}
|
||||
|
||||
.c14 {
|
||||
.c15 {
|
||||
color: #666687;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
}
|
||||
|
||||
.c20 {
|
||||
.c21 {
|
||||
color: #666687;
|
||||
font-weight: 600;
|
||||
font-size: 0.6875rem;
|
||||
@ -167,14 +171,14 @@ describe('ImageAssetCard', () => {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.c16 {
|
||||
.c17 {
|
||||
margin-left: auto;
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.c19 {
|
||||
.c20 {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
@ -353,7 +357,7 @@ describe('ImageAssetCard', () => {
|
||||
fill: #666687;
|
||||
}
|
||||
|
||||
.c15 {
|
||||
.c16 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@ -422,17 +426,21 @@ describe('ImageAssetCard', () => {
|
||||
<div
|
||||
class="c12"
|
||||
>
|
||||
<h2
|
||||
<div
|
||||
class="c13"
|
||||
>
|
||||
<h2
|
||||
class="c14"
|
||||
id="card-1-title"
|
||||
>
|
||||
hello.png
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
class="c14"
|
||||
class="c15"
|
||||
>
|
||||
<span
|
||||
class="c15"
|
||||
class="c16"
|
||||
>
|
||||
png
|
||||
</span>
|
||||
@ -440,13 +448,13 @@ describe('ImageAssetCard', () => {
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c16"
|
||||
class="c17"
|
||||
>
|
||||
<div
|
||||
class="c17 c18 c19"
|
||||
class="c18 c19 c20"
|
||||
>
|
||||
<span
|
||||
class="c20"
|
||||
class="c21"
|
||||
>
|
||||
Image
|
||||
</span>
|
||||
@ -456,7 +464,7 @@ describe('ImageAssetCard', () => {
|
||||
</div>
|
||||
</article>
|
||||
<div
|
||||
class="c21"
|
||||
class="c22"
|
||||
>
|
||||
<p
|
||||
aria-live="polite"
|
||||
|
||||
@ -11,8 +11,8 @@ export const DialogTitle = () => {
|
||||
<ModalHeader>
|
||||
<Typography fontWeight="bold" textColor="neutral800" as="h2" id="asset-dialog-title">
|
||||
{formatMessage({
|
||||
id: getTrad('header.actions.upload-assets'),
|
||||
defaultMessage: 'Upload assets',
|
||||
id: getTrad('header.actions.add-assets'),
|
||||
defaultMessage: 'Add new assets',
|
||||
})}
|
||||
</Typography>
|
||||
</ModalHeader>
|
||||
|
||||
@ -25,7 +25,7 @@ export const SelectedStep = ({ selectedAssets, onSelectAsset, onReorderAsset })
|
||||
<Typography variant="pi" textColor="neutral600">
|
||||
{formatMessage({
|
||||
id: getTrad('modal.upload-list.sub-header-subtitle'),
|
||||
defaultMessage: 'Manage the assets before adding them to the Media Library',
|
||||
defaultMessage: 'Manage the assets before uploading them to the Media Library',
|
||||
})}
|
||||
</Typography>
|
||||
</Stack>
|
||||
|
||||
@ -127,8 +127,8 @@ export const AssetDialog = ({
|
||||
canCreate ? (
|
||||
<Button variant="secondary" startIcon={<PlusIcon />} onClick={onAddAsset}>
|
||||
{formatMessage({
|
||||
id: getTrad('modal.header.browse'),
|
||||
defaultMessage: 'Upload assets',
|
||||
id: getTrad('header.actions.add-assets'),
|
||||
defaultMessage: 'Add new assets',
|
||||
})}
|
||||
</Button>
|
||||
) : (
|
||||
|
||||
@ -130,7 +130,7 @@ describe('MediaLibrary / AssetList', () => {
|
||||
);
|
||||
|
||||
expect(container).toMatchInlineSnapshot(`
|
||||
.c31 {
|
||||
.c32 {
|
||||
border: 0;
|
||||
-webkit-clip: rect(0 0 0 0);
|
||||
clip: rect(0 0 0 0);
|
||||
@ -142,12 +142,16 @@ describe('MediaLibrary / AssetList', () => {
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.c26 {
|
||||
.c11 {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.c27 {
|
||||
width: 100%;
|
||||
height: 10.25rem;
|
||||
}
|
||||
|
||||
.c27 {
|
||||
.c28 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
@ -165,7 +169,7 @@ describe('MediaLibrary / AssetList', () => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c21 {
|
||||
.c22 {
|
||||
border: 0;
|
||||
-webkit-clip: rect(0 0 0 0);
|
||||
clip: rect(0 0 0 0);
|
||||
@ -190,14 +194,14 @@ describe('MediaLibrary / AssetList', () => {
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.c15 {
|
||||
.c16 {
|
||||
background: #f6f6f9;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
min-width: 20px;
|
||||
}
|
||||
|
||||
.c22 {
|
||||
.c23 {
|
||||
background: #32324d;
|
||||
color: #ffffff;
|
||||
padding: 4px;
|
||||
@ -242,7 +246,7 @@ describe('MediaLibrary / AssetList', () => {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.c16 {
|
||||
.c17 {
|
||||
display: -webkit-inline-box;
|
||||
display: -webkit-inline-flex;
|
||||
display: -ms-inline-flexbox;
|
||||
@ -260,7 +264,7 @@ describe('MediaLibrary / AssetList', () => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c19 {
|
||||
.c20 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
@ -295,20 +299,20 @@ describe('MediaLibrary / AssetList', () => {
|
||||
background: repeating-conic-gradient(#f6f6f9 0% 25%,transparent 0% 50%) 50% / 20px 20px;
|
||||
}
|
||||
|
||||
.c11 {
|
||||
.c12 {
|
||||
font-weight: 600;
|
||||
color: #32324d;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
}
|
||||
|
||||
.c12 {
|
||||
.c13 {
|
||||
color: #666687;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
}
|
||||
|
||||
.c18 {
|
||||
.c19 {
|
||||
color: #666687;
|
||||
font-weight: 600;
|
||||
font-size: 0.6875rem;
|
||||
@ -316,20 +320,20 @@ describe('MediaLibrary / AssetList', () => {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.c24 {
|
||||
.c25 {
|
||||
color: #ffffff;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
}
|
||||
|
||||
.c14 {
|
||||
.c15 {
|
||||
margin-left: auto;
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.c17 {
|
||||
.c18 {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
@ -410,36 +414,36 @@ describe('MediaLibrary / AssetList', () => {
|
||||
border-bottom: 1px solid #eaeaef;
|
||||
}
|
||||
|
||||
.c23 {
|
||||
.c24 {
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
.c13 {
|
||||
.c14 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.c25 {
|
||||
.c26 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.c20 canvas,
|
||||
.c20 video {
|
||||
.c21 canvas,
|
||||
.c21 video {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 10.25rem;
|
||||
}
|
||||
|
||||
.c30 {
|
||||
.c31 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.c29 svg {
|
||||
.c30 svg {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.c28 {
|
||||
.c29 {
|
||||
border-radius: 4px 4px 0 0;
|
||||
background: linear-gradient(180deg,#ffffff 0%,#f6f6f9 121.48%);
|
||||
}
|
||||
@ -494,17 +498,21 @@ describe('MediaLibrary / AssetList', () => {
|
||||
<div
|
||||
class="c10"
|
||||
>
|
||||
<h2
|
||||
<div
|
||||
class="c11"
|
||||
>
|
||||
<h2
|
||||
class="c12"
|
||||
id="card-1-title"
|
||||
>
|
||||
strapi-cover_1fabc982ce.png
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
class="c12"
|
||||
class="c13"
|
||||
>
|
||||
<span
|
||||
class="c13"
|
||||
class="c14"
|
||||
>
|
||||
png
|
||||
</span>
|
||||
@ -512,13 +520,13 @@ describe('MediaLibrary / AssetList', () => {
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c14"
|
||||
class="c15"
|
||||
>
|
||||
<div
|
||||
class="c15 c16 c17"
|
||||
class="c16 c17 c18"
|
||||
>
|
||||
<span
|
||||
class="c18"
|
||||
class="c19"
|
||||
>
|
||||
Image
|
||||
</span>
|
||||
@ -548,10 +556,10 @@ describe('MediaLibrary / AssetList', () => {
|
||||
class="c6"
|
||||
>
|
||||
<div
|
||||
class="c19"
|
||||
class="c20"
|
||||
>
|
||||
<div
|
||||
class="c20"
|
||||
class="c21"
|
||||
>
|
||||
<figure
|
||||
class=""
|
||||
@ -565,7 +573,7 @@ describe('MediaLibrary / AssetList', () => {
|
||||
/>
|
||||
</video>
|
||||
<figcaption
|
||||
class="c21"
|
||||
class="c22"
|
||||
>
|
||||
mov_bbb.mp4
|
||||
</figcaption>
|
||||
@ -574,10 +582,10 @@ describe('MediaLibrary / AssetList', () => {
|
||||
</div>
|
||||
</div>
|
||||
<time
|
||||
class="c22 c23"
|
||||
class="c23 c24"
|
||||
>
|
||||
<span
|
||||
class="c24"
|
||||
class="c25"
|
||||
>
|
||||
...
|
||||
</span>
|
||||
@ -592,30 +600,34 @@ describe('MediaLibrary / AssetList', () => {
|
||||
<div
|
||||
class="c10"
|
||||
>
|
||||
<h2
|
||||
<div
|
||||
class="c11"
|
||||
>
|
||||
<h2
|
||||
class="c12"
|
||||
id="card-2-title"
|
||||
>
|
||||
mov_bbb.mp4
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
class="c12"
|
||||
class="c13"
|
||||
>
|
||||
<span
|
||||
class="c25"
|
||||
class="c26"
|
||||
>
|
||||
mp4
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c14"
|
||||
class="c15"
|
||||
>
|
||||
<div
|
||||
class="c15 c16 c17"
|
||||
class="c16 c17 c18"
|
||||
>
|
||||
<span
|
||||
class="c18"
|
||||
class="c19"
|
||||
>
|
||||
Video
|
||||
</span>
|
||||
@ -642,12 +654,12 @@ describe('MediaLibrary / AssetList', () => {
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="c26 c27 c28"
|
||||
class="c27 c28 c29"
|
||||
height="10.25rem"
|
||||
width="100%"
|
||||
>
|
||||
<span
|
||||
class="c29"
|
||||
class="c30"
|
||||
>
|
||||
<svg
|
||||
aria-label="CARTE MARIAGE AVS - Printemps.pdf"
|
||||
@ -680,30 +692,34 @@ describe('MediaLibrary / AssetList', () => {
|
||||
<div
|
||||
class="c10"
|
||||
>
|
||||
<h2
|
||||
<div
|
||||
class="c11"
|
||||
>
|
||||
<h2
|
||||
class="c12"
|
||||
id="card-3-title"
|
||||
>
|
||||
CARTE MARIAGE AVS - Printemps.pdf
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
class="c12"
|
||||
class="c13"
|
||||
>
|
||||
<span
|
||||
class="c30"
|
||||
class="c31"
|
||||
>
|
||||
pdf
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c14"
|
||||
class="c15"
|
||||
>
|
||||
<div
|
||||
class="c15 c16 c17"
|
||||
class="c16 c17 c18"
|
||||
>
|
||||
<span
|
||||
class="c18"
|
||||
class="c19"
|
||||
>
|
||||
Doc
|
||||
</span>
|
||||
@ -733,7 +749,7 @@ describe('MediaLibrary / AssetList', () => {
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c31"
|
||||
class="c32"
|
||||
>
|
||||
<p
|
||||
aria-live="polite"
|
||||
|
||||
@ -79,7 +79,7 @@ export const EmptyStateAsset = ({ disabled, onClick, onDropAsset }) => {
|
||||
>
|
||||
{formatMessage({
|
||||
id: getTrad('mediaLibraryInput.placeholder'),
|
||||
defaultMessage: 'Click to select an asset or drag and drop one in this area',
|
||||
defaultMessage: 'Click to add an asset or drag and drop one in this area',
|
||||
})}
|
||||
</TextAlignTypography>
|
||||
</Flex>
|
||||
|
||||
@ -18,8 +18,8 @@ export const AddAssetStep = ({ onClose, onAddAsset, trackedLocation }) => {
|
||||
<ModalHeader>
|
||||
<Typography fontWeight="bold" textColor="neutral800" as="h2" id="title">
|
||||
{formatMessage({
|
||||
id: getTrad('header.actions.upload-assets'),
|
||||
defaultMessage: 'Upload assets',
|
||||
id: getTrad('header.actions.add-assets'),
|
||||
defaultMessage: 'Add new assets',
|
||||
})}
|
||||
</Typography>
|
||||
</ModalHeader>
|
||||
|
||||
@ -62,8 +62,8 @@ export const PendingAssetStep = ({
|
||||
<ModalHeader>
|
||||
<Typography fontWeight="bold" textColor="neutral800" as="h2" id="title">
|
||||
{formatMessage({
|
||||
id: getTrad('header.actions.upload-assets'),
|
||||
defaultMessage: 'Upload assets',
|
||||
id: getTrad('header.actions.add-assets'),
|
||||
defaultMessage: 'Add new assets',
|
||||
})}
|
||||
</Typography>
|
||||
</ModalHeader>
|
||||
@ -85,14 +85,14 @@ export const PendingAssetStep = ({
|
||||
<Typography variant="pi" textColor="neutral600">
|
||||
{formatMessage({
|
||||
id: getTrad('modal.upload-list.sub-header-subtitle'),
|
||||
defaultMessage: 'Manage the assets before adding them to the Media Library',
|
||||
defaultMessage: 'Manage the assets before uploading them to the Media Library',
|
||||
})}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Button size="S" onClick={onClickAddAsset}>
|
||||
{formatMessage({
|
||||
id: getTrad('header.actions.upload-new-asset'),
|
||||
defaultMessage: 'Upload new asset',
|
||||
id: getTrad('header.actions.add-assets'),
|
||||
defaultMessage: 'Add new assets',
|
||||
})}
|
||||
</Button>
|
||||
</Flex>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
||||
.c51 {
|
||||
.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;
|
||||
}
|
||||
|
||||
.c48 {
|
||||
.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;
|
||||
}
|
||||
|
||||
.c47 {
|
||||
.c48 {
|
||||
border-radius: 0 0 4px 4px;
|
||||
border-top: 1px solid #eaeaef;
|
||||
}
|
||||
|
||||
.c49 > * + * {
|
||||
.c50 > * + * {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
@ -327,7 +327,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
||||
background: #4945ff;
|
||||
}
|
||||
|
||||
.c50 {
|
||||
.c51 {
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
@ -339,7 +339,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.c50 .sc-kJpAUB {
|
||||
.c51 .sc-kJpAUB {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
@ -350,56 +350,56 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c50 .c15 {
|
||||
.c51 .c15 {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.c50[aria-disabled='true'] {
|
||||
.c51[aria-disabled='true'] {
|
||||
border: 1px solid #dcdce4;
|
||||
background: #eaeaef;
|
||||
}
|
||||
|
||||
.c50[aria-disabled='true'] .c15 {
|
||||
.c51[aria-disabled='true'] .c15 {
|
||||
color: #666687;
|
||||
}
|
||||
|
||||
.c50[aria-disabled='true'] svg > g,
|
||||
.c50[aria-disabled='true'] svg path {
|
||||
.c51[aria-disabled='true'] svg > g,
|
||||
.c51[aria-disabled='true'] svg path {
|
||||
fill: #666687;
|
||||
}
|
||||
|
||||
.c50[aria-disabled='true']:active {
|
||||
.c51[aria-disabled='true']:active {
|
||||
border: 1px solid #dcdce4;
|
||||
background: #eaeaef;
|
||||
}
|
||||
|
||||
.c50[aria-disabled='true']:active .c15 {
|
||||
.c51[aria-disabled='true']:active .c15 {
|
||||
color: #666687;
|
||||
}
|
||||
|
||||
.c50[aria-disabled='true']:active svg > g,
|
||||
.c50[aria-disabled='true']:active svg path {
|
||||
.c51[aria-disabled='true']:active svg > g,
|
||||
.c51[aria-disabled='true']:active svg path {
|
||||
fill: #666687;
|
||||
}
|
||||
|
||||
.c50:hover {
|
||||
.c51:hover {
|
||||
background-color: #f6f6f9;
|
||||
}
|
||||
|
||||
.c50:active {
|
||||
.c51:active {
|
||||
background-color: #eaeaef;
|
||||
}
|
||||
|
||||
.c50 .c15 {
|
||||
.c51 .c15 {
|
||||
color: #32324d;
|
||||
}
|
||||
|
||||
.c50 svg > g,
|
||||
.c50 svg path {
|
||||
.c51 svg > g,
|
||||
.c51 svg path {
|
||||
fill: #32324d;
|
||||
}
|
||||
|
||||
.c35 {
|
||||
.c36 {
|
||||
width: 100%;
|
||||
height: 5.5rem;
|
||||
}
|
||||
@ -422,7 +422,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c36 {
|
||||
.c37 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
@ -488,7 +488,11 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
||||
grid-column: span 4;
|
||||
}
|
||||
|
||||
.c42 {
|
||||
.c27 {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.c43 {
|
||||
border: 0;
|
||||
-webkit-clip: rect(0 0 0 0);
|
||||
clip: rect(0 0 0 0);
|
||||
@ -513,14 +517,14 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.c31 {
|
||||
.c32 {
|
||||
background: #f6f6f9;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
min-width: 20px;
|
||||
}
|
||||
|
||||
.c43 {
|
||||
.c44 {
|
||||
background: #32324d;
|
||||
color: #ffffff;
|
||||
padding: 4px;
|
||||
@ -559,7 +563,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.c32 {
|
||||
.c33 {
|
||||
display: -webkit-inline-box;
|
||||
display: -webkit-inline-flex;
|
||||
display: -ms-inline-flexbox;
|
||||
@ -577,7 +581,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c40 {
|
||||
.c41 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
@ -612,20 +616,20 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
||||
background: repeating-conic-gradient(#f6f6f9 0% 25%,transparent 0% 50%) 50% / 20px 20px;
|
||||
}
|
||||
|
||||
.c27 {
|
||||
.c28 {
|
||||
font-weight: 600;
|
||||
color: #32324d;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
}
|
||||
|
||||
.c28 {
|
||||
.c29 {
|
||||
color: #666687;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
}
|
||||
|
||||
.c34 {
|
||||
.c35 {
|
||||
color: #666687;
|
||||
font-weight: 600;
|
||||
font-size: 0.6875rem;
|
||||
@ -633,20 +637,20 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.c45 {
|
||||
.c46 {
|
||||
color: #ffffff;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
}
|
||||
|
||||
.c30 {
|
||||
.c31 {
|
||||
margin-left: auto;
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.c33 {
|
||||
.c34 {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
@ -659,36 +663,36 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
||||
border-bottom: 1px solid #eaeaef;
|
||||
}
|
||||
|
||||
.c44 {
|
||||
.c45 {
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
.c29 {
|
||||
.c30 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.c46 {
|
||||
.c47 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.c41 canvas,
|
||||
.c41 video {
|
||||
.c42 canvas,
|
||||
.c42 video {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 5.5rem;
|
||||
}
|
||||
|
||||
.c39 {
|
||||
.c40 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.c38 svg {
|
||||
.c39 svg {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.c37 {
|
||||
.c38 {
|
||||
border-radius: 4px 4px 0 0;
|
||||
background: linear-gradient(180deg,#ffffff 0%,#f6f6f9 121.48%);
|
||||
}
|
||||
@ -717,7 +721,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
||||
class="c3"
|
||||
id="title"
|
||||
>
|
||||
Upload assets
|
||||
Add new assets
|
||||
</h2>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
@ -755,12 +759,12 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
||||
<span
|
||||
class="c11"
|
||||
>
|
||||
{number, plural, =0 {No asset} one {1 asset} other {# assets}} selected
|
||||
{number, plural, =0 {No asset} one {1 asset} other {# assets}} ready to upload
|
||||
</span>
|
||||
<span
|
||||
class="c12"
|
||||
>
|
||||
Manage the assets before adding them to the Media Library
|
||||
Manage the assets before uploading them to the Media Library
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
@ -771,7 +775,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
||||
<span
|
||||
class="c15 c16"
|
||||
>
|
||||
Upload new asset
|
||||
Add new assets
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
@ -814,28 +818,32 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
||||
<div
|
||||
class="c26"
|
||||
>
|
||||
<h2
|
||||
<div
|
||||
class="c27"
|
||||
>
|
||||
<h2
|
||||
class="c28"
|
||||
id="card-1-title"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="c28"
|
||||
class="c29"
|
||||
>
|
||||
<span
|
||||
class="c29"
|
||||
class="c30"
|
||||
>
|
||||
jpg
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c30"
|
||||
class="c31"
|
||||
>
|
||||
<div
|
||||
class="c31 c32 c33"
|
||||
class="c32 c33 c34"
|
||||
>
|
||||
<span
|
||||
class="c34"
|
||||
class="c35"
|
||||
>
|
||||
Image
|
||||
</span>
|
||||
@ -861,12 +869,12 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
||||
class="c20 c21"
|
||||
>
|
||||
<div
|
||||
class="c35 c36 c37"
|
||||
class="c36 c37 c38"
|
||||
height="5.5rem"
|
||||
width="100%"
|
||||
>
|
||||
<span
|
||||
class="c38"
|
||||
class="c39"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
@ -898,28 +906,32 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
||||
<div
|
||||
class="c26"
|
||||
>
|
||||
<h2
|
||||
<div
|
||||
class="c27"
|
||||
>
|
||||
<h2
|
||||
class="c28"
|
||||
id="card-2-title"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="c28"
|
||||
class="c29"
|
||||
>
|
||||
<span
|
||||
class="c39"
|
||||
class="c40"
|
||||
>
|
||||
pdf
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c30"
|
||||
class="c31"
|
||||
>
|
||||
<div
|
||||
class="c31 c32 c33"
|
||||
class="c32 c33 c34"
|
||||
>
|
||||
<span
|
||||
class="c34"
|
||||
class="c35"
|
||||
>
|
||||
Doc
|
||||
</span>
|
||||
@ -948,10 +960,10 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
||||
class="c22"
|
||||
>
|
||||
<div
|
||||
class="c40"
|
||||
class="c41"
|
||||
>
|
||||
<div
|
||||
class="c41"
|
||||
class="c42"
|
||||
>
|
||||
<figure
|
||||
class=""
|
||||
@ -965,17 +977,17 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
||||
/>
|
||||
</video>
|
||||
<figcaption
|
||||
class="c42"
|
||||
class="c43"
|
||||
/>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<time
|
||||
class="c43 c44"
|
||||
class="c44 c45"
|
||||
>
|
||||
<span
|
||||
class="c45"
|
||||
class="c46"
|
||||
>
|
||||
...
|
||||
</span>
|
||||
@ -990,28 +1002,32 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
||||
<div
|
||||
class="c26"
|
||||
>
|
||||
<h2
|
||||
<div
|
||||
class="c27"
|
||||
>
|
||||
<h2
|
||||
class="c28"
|
||||
id="card-3-title"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="c28"
|
||||
class="c29"
|
||||
>
|
||||
<span
|
||||
class="c46"
|
||||
class="c47"
|
||||
>
|
||||
mp4
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c30"
|
||||
class="c31"
|
||||
>
|
||||
<div
|
||||
class="c31 c32 c33"
|
||||
class="c32 c33 c34"
|
||||
>
|
||||
<span
|
||||
class="c34"
|
||||
class="c35"
|
||||
>
|
||||
Video
|
||||
</span>
|
||||
@ -1027,17 +1043,17 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c0 c47"
|
||||
class="c0 c48"
|
||||
>
|
||||
<div
|
||||
class="c2"
|
||||
>
|
||||
<div
|
||||
class="c48 c49"
|
||||
class="c49 c50"
|
||||
>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
class="c13 c50"
|
||||
class="c13 c51"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -1046,7 +1062,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="c48 c49"
|
||||
class="c49 c50"
|
||||
>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
@ -1064,7 +1080,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
|
||||
</div>
|
||||
</form>
|
||||
<div
|
||||
class="c51"
|
||||
class="c52"
|
||||
>
|
||||
<p
|
||||
aria-live="polite"
|
||||
|
||||
@ -94,14 +94,14 @@ describe('UploadAssetDialog', () => {
|
||||
target: { files: fileList },
|
||||
});
|
||||
|
||||
expect(screen.getByText('Upload new asset')).toBeInTheDocument();
|
||||
expect(screen.getAllByText(`Add new assets`).length).toBe(2);
|
||||
expect(
|
||||
screen.getByText(
|
||||
'{number, plural, =0 {No asset} one {1 asset} other {# assets}} selected'
|
||||
'{number, plural, =0 {No asset} one {1 asset} other {# assets}} ready to upload'
|
||||
)
|
||||
).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByText('Manage the assets before adding them to the Media Library')
|
||||
screen.getByText('Manage the assets before uploading them to the Media Library')
|
||||
).toBeInTheDocument();
|
||||
expect(screen.getAllByText(`test.${ext}`).length).toBe(number);
|
||||
expect(screen.getByText(ext)).toBeInTheDocument();
|
||||
@ -193,13 +193,13 @@ describe('UploadAssetDialog', () => {
|
||||
await waitFor(() =>
|
||||
expect(
|
||||
screen.getByText(
|
||||
'{number, plural, =0 {No asset} one {1 asset} other {# assets}} selected'
|
||||
'{number, plural, =0 {No asset} one {1 asset} other {# assets}} ready to upload'
|
||||
)
|
||||
).toBeInTheDocument()
|
||||
);
|
||||
expect(screen.getByText('Upload new asset')).toBeInTheDocument();
|
||||
expect(screen.getAllByText(`Add new assets`).length).toBe(2);
|
||||
expect(
|
||||
screen.getByText('Manage the assets before adding them to the Media Library')
|
||||
screen.getByText('Manage the assets before uploading them to the Media Library')
|
||||
).toBeInTheDocument();
|
||||
|
||||
assets.forEach(asset => {
|
||||
|
||||
@ -598,7 +598,7 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
|
||||
class="c7"
|
||||
id="title"
|
||||
>
|
||||
Upload assets
|
||||
Add new assets
|
||||
</h2>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
@ -1434,7 +1434,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
|
||||
class="c6"
|
||||
id="title"
|
||||
>
|
||||
Upload assets
|
||||
Add new assets
|
||||
</h2>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
|
||||
@ -89,8 +89,8 @@ export const MediaLibrary = () => {
|
||||
canCreate ? (
|
||||
<Button startIcon={<Plus />} onClick={toggleUploadAssetDialog}>
|
||||
{formatMessage({
|
||||
id: getTrad('header.actions.upload-assets'),
|
||||
defaultMessage: 'Upload assets',
|
||||
id: getTrad('header.actions.add-assets'),
|
||||
defaultMessage: 'Add new assets',
|
||||
})}
|
||||
</Button>
|
||||
) : (
|
||||
@ -157,8 +157,8 @@ export const MediaLibrary = () => {
|
||||
onClick={toggleUploadAssetDialog}
|
||||
>
|
||||
{formatMessage({
|
||||
id: getTrad('modal.header.browse'),
|
||||
defaultMessage: 'Upload assets',
|
||||
id: getTrad('header.actions.add-assets'),
|
||||
defaultMessage: 'Add new assets',
|
||||
})}
|
||||
</Button>
|
||||
) : (
|
||||
|
||||
@ -179,7 +179,7 @@ describe('Media library homepage', () => {
|
||||
|
||||
renderML();
|
||||
|
||||
await waitFor(() => expect(screen.queryByText(`Upload assets`)).not.toBeInTheDocument());
|
||||
await waitFor(() => expect(screen.queryByText(`Add new assets`)).not.toBeInTheDocument());
|
||||
});
|
||||
|
||||
it('shows the "Upload assets" button when the user does have the permissions to', async () => {
|
||||
@ -193,7 +193,7 @@ describe('Media library homepage', () => {
|
||||
|
||||
renderML();
|
||||
|
||||
await waitFor(() => expect(screen.getByText(`Upload assets`)).toBeInTheDocument());
|
||||
await waitFor(() => expect(screen.getByText(`Add new assets`)).toBeInTheDocument());
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
"form.input.label.file-name": "File name",
|
||||
"form.upload-url.error.url.invalid": "One URL is invalid",
|
||||
"form.upload-url.error.url.invalids": "{number} URLs are invalids",
|
||||
"header.actions.add-assets": "Add new assets",
|
||||
"header.actions.upload-assets": "Upload assets",
|
||||
"header.actions.upload-new-asset": "Upload new asset",
|
||||
"header.content.assets-empty": "No assets",
|
||||
@ -30,7 +31,7 @@
|
||||
"input.label": "Drag & Drop here or",
|
||||
"input.label-bold": "Drag & drop",
|
||||
"input.label-normal": "to upload or",
|
||||
"input.placeholder": "Click to select an asset or drag & drop a file in this area",
|
||||
"input.placeholder": "Click to add an asset or drag & drop a file in this area",
|
||||
"input.placeholder.icon": "Drop the asset in this zone",
|
||||
"input.url.description": "Separate your URL links by a carriage return.",
|
||||
"input.url.label": "URL",
|
||||
@ -44,12 +45,12 @@
|
||||
"list.assets.loading-asset": "Loading the preview for the media: {path}",
|
||||
"list.assets.not-supported-content": "No preview available",
|
||||
"list.assets.preview-asset": "Preview for the video at path {path}",
|
||||
"list.assets.selected": "{number, plural, =0 {No asset} one {1 asset} other {# assets}} selected",
|
||||
"list.assets.selected": "{number, plural, =0 {No asset} one {1 asset} other {# assets}} ready to upload",
|
||||
"list.assets.type-not-allowed": "This type of file is not allowed.",
|
||||
"list.assets-empty.search": "No result found",
|
||||
"mediaLibraryInput.actions.nextSlide": "Next slide",
|
||||
"mediaLibraryInput.actions.previousSlide": "Previous slide",
|
||||
"mediaLibraryInput.placeholder": "Click to select an asset or drag and drop one in this area",
|
||||
"mediaLibraryInput.placeholder": "Click to add an asset or drag and drop one in this area",
|
||||
"mediaLibraryInput.slideCount": "{n} of {m} slides",
|
||||
"modal.edit.title": "Details",
|
||||
"modal.file-details.date": "Date",
|
||||
@ -68,7 +69,7 @@
|
||||
"modal.selected-list.sub-header-subtitle": "Drag & drop to reorder the assets in the field",
|
||||
"modal.upload-list.footer.button.plural": "Upload {number} assets to the library",
|
||||
"modal.upload-list.footer.button.singular": "Upload {number} asset to the library",
|
||||
"modal.upload-list.sub-header-subtitle": "Manage the assets before adding them to the Media Library",
|
||||
"modal.upload-list.sub-header-subtitle": "Manage the assets before uploading them to the Media Library",
|
||||
"modal.upload-list.sub-header-title.plural": "{number} assets selected",
|
||||
"modal.upload-list.sub-header-title.singular": "{number} asset selected",
|
||||
"modal.upload-list.sub-header.button": "Add more assets",
|
||||
|
||||
@ -15246,7 +15246,7 @@ markdown-it-container@^3.0.0:
|
||||
resolved "https://registry.yarnpkg.com/markdown-it-container/-/markdown-it-container-3.0.0.tgz#1d19b06040a020f9a827577bb7dbf67aa5de9a5b"
|
||||
integrity sha512-y6oKTq4BB9OQuY/KLfk/O3ysFhB3IMYoIWhGJEidXt1NQFocFK2sA2t0NYZAMyMShAGL6x5OPIbrmXPIqaN9rw==
|
||||
|
||||
markdown-it-deflist@^2.0.3:
|
||||
markdown-it-deflist@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/markdown-it-deflist/-/markdown-it-deflist-2.1.0.tgz#50d7a56b9544cd81252f7623bd785e28a8dcef5c"
|
||||
integrity sha512-3OuqoRUlSxJiuQYu0cWTLHNhhq2xtoSFqsZK8plANg91+RJQU1ziQ6lA2LzmFAEes18uPBsHZpcX6We5l76Nzg==
|
||||
@ -15256,7 +15256,7 @@ markdown-it-emoji@^2.0.0:
|
||||
resolved "https://registry.yarnpkg.com/markdown-it-emoji/-/markdown-it-emoji-2.0.0.tgz#3164ad4c009efd946e98274f7562ad611089a231"
|
||||
integrity sha512-39j7/9vP/CPCKbEI44oV8yoPJTpvfeReTn/COgRhSpNrjWF3PfP/JUxxB0hxV6ynOY8KH8Y8aX9NMDdo6z+6YQ==
|
||||
|
||||
markdown-it-footnote@^3.0.2:
|
||||
markdown-it-footnote@^3.0.3:
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/markdown-it-footnote/-/markdown-it-footnote-3.0.3.tgz#e0e4c0d67390a4c5f0c75f73be605c7c190ca4d8"
|
||||
integrity sha512-YZMSuCGVZAjzKMn+xqIco9d1cLGxbELHZ9do/TSYVzraooV8ypsppKNmUJ0fVH5ljkCInQAtFpm8Rb3eXSrt5w==
|
||||
@ -15281,7 +15281,7 @@ markdown-it-sup@1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/markdown-it-sup/-/markdown-it-sup-1.0.0.tgz#cb9c9ff91a5255ac08f3fd3d63286e15df0a1fc3"
|
||||
integrity sha1-y5yf+RpSVawI8/09YyhuFd8KH8M=
|
||||
|
||||
markdown-it@^12.0.6:
|
||||
markdown-it@^12.3.2:
|
||||
version "12.3.2"
|
||||
resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-12.3.2.tgz#bf92ac92283fe983fe4de8ff8abfb5ad72cd0c90"
|
||||
integrity sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user