yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-12-30 00:37:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'features/deits' into deits/transfer-push

Browse Source
This commit is contained in:
Convly 2022-12-28 10:30:41 +01:00
commit 3cb821dc1e
258 changed files with 8979 additions and 5370 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/issues_dailyCron.yml vendored
View File

@ -17,7 +17,7 @@ jobs:
with:
actions: 'close-issues'
token: ${{ secrets.GITHUB_TOKEN }}
labels: 'status: pending reproduction'
labels: 'status: can not reproduce'
inactive-day: 14
close-reason: 'completed'
body: |

11
packages/core/admin/admin/src/components/GlobalStyle/index.js
View File

@ -1,16 +1,5 @@
import { createGlobalStyle } from 'styled-components';
const loadCss = async () => {
await import(/* webpackChunkName: "fontawesome-css" */ 'font-awesome/css/font-awesome.min.css');
await import(
/* webpackChunkName: "fontawesome-css-all" */ '@fortawesome/fontawesome-free/css/all.css'
);
await import(/* webpackChunkName: "fontawesome-js" */ '@fortawesome/fontawesome-free/js/all.min');
await import(/* webpackChunkName: "cropper-css" */ 'cropperjs/dist/cropper.css');
};
loadCss();
const GlobalStyle = createGlobalStyle`
body {
background: ${({ theme }) => theme.colors.neutral100};

8
packages/core/admin/admin/src/content-manager/components/BackHeader/index.js
View File

@ -1,8 +0,0 @@
import styled from 'styled-components';
import { BackHeader as BaseBackHeader } from '@strapi/helper-plugin';
const BackHeader = styled(BaseBackHeader)`
left: 24rem;
`;
export default BackHeader;

28
packages/core/admin/admin/src/content-manager/components/Block/components.js
View File

@ -1,28 +0,0 @@
import styled from 'styled-components';
const Wrapper = styled.div`
margin-bottom: 35px;
background: #ffffff;
padding: 22px 28px 18px;
padding-bottom: 13px;
border-radius: 2px;
box-shadow: 0 2px 4px #e3e9f3;
-webkit-font-smoothing: antialiased;
`;
const Sub = styled.div`
padding-top: 0px;
line-height: 18px;
> p:first-child {
margin-bottom: 1px;
font-weight: 700;
color: #333740;
font-size: 1.8rem;
}
> p {
color: #787e8f;
font-size: 13px;
}
`;
export { Wrapper, Sub };

43
packages/core/admin/admin/src/content-manager/components/Block/index.js
View File

@ -1,43 +0,0 @@
/**
*
* Block
*/
import React, { memo } from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import { Wrapper, Sub } from './components';
const renderMsg = (msg) => <p>{msg}</p>;
const Block = ({ children, description, style, title }) => (
<div className="col-md-12">
<Wrapper style={style}>
<Sub>
{!!title && (
<p>
<FormattedMessage id={title} />
</p>
)}
{!!description && <FormattedMessage id={description}>{renderMsg}</FormattedMessage>}
</Sub>
{children}
</Wrapper>
</div>
);
Block.defaultProps = {
children: null,
description: null,
style: {},
title: null,
};
Block.propTypes = {
children: PropTypes.any,
description: PropTypes.string,
style: PropTypes.object,
title: PropTypes.string,
};
export default memo(Block);

49
packages/core/admin/admin/src/content-manager/components/ComponentIcon/ComponentIcon.js Normal file
View File

@ -0,0 +1,49 @@
import PropTypes from 'prop-types';
import React from 'react';
import styled from 'styled-components';
import { Flex } from '@strapi/design-system';
const WIDTH_S = 5;
const WIDTH_M = 8;
const Wrapper = styled(Flex)`
border-radius: ${({ showBackground }) => (showBackground ? `50%` : 0)};
color: ${({ theme }) => theme.colors.neutral600};
height: ${({ theme, size }) => theme.spaces[size === 'S' ? WIDTH_S : WIDTH_M]};
width: ${({ theme, size }) => theme.spaces[size === 'S' ? WIDTH_S : WIDTH_M]};
svg {
height: ${({ theme, size }) => theme.spaces[size === 'S' ? WIDTH_S - 2 : WIDTH_M - 3]};
width: ${({ theme, size }) => theme.spaces[size === 'S' ? WIDTH_S - 2 : WIDTH_M - 3]};
}
`;
export function ComponentIcon({ showBackground = true, size = 'M' }) {
return (
<Wrapper
alignItems="center"
background={showBackground ? 'neutral200' : null}
justifyContent="center"
size={size}
showBackground={showBackground}
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path
d="M216.3 2c4.8-2.6 10.5-2.6 15.3 0L422.3 106c5.1 2.8 8.3 8.2 8.3 14s-3.2 11.2-8.3 14L231.7 238c-4.8 2.6-10.5 2.6-15.3 0L25.7 134c-5.1-2.8-8.3-8.2-8.3-14s3.2-11.2 8.3-14L216.3 2zM23.7 170l176 96c5.1 2.8 8.3 8.2 8.3 14V496c0 5.6-3 10.9-7.8 13.8s-10.9 3-15.8 .3L8.3 414C3.2 411.2 0 405.9 0 400V184c0-5.6 3-10.9 7.8-13.8s10.9-3 15.8-.3zm400.7 0c5-2.7 11-2.6 15.8 .3s7.8 8.1 7.8 13.8V400c0 5.9-3.2 11.2-8.3 14l-176 96c-5 2.7-11 2.6-15.8-.3s-7.8-8.1-7.8-13.8V280c0-5.9 3.2-11.2 8.3-14l176-96z"
fill="currentColor"
/>
</svg>
</Wrapper>
);
}
ComponentIcon.defaultProps = {
showBackground: true,
size: 'M',
};
ComponentIcon.propTypes = {
showBackground: PropTypes.bool,
size: PropTypes.string,
};

1
packages/core/admin/admin/src/content-manager/components/ComponentIcon/index.js Normal file
View File

@ -0,0 +1 @@
export * from './ComponentIcon';

7
packages/core/admin/admin/src/content-manager/components/Container/index.js
View File

@ -1,7 +0,0 @@
import styled from 'styled-components';
const Container = styled.div`
padding: 18px 30px 66px 30px;
`;
export default Container;

77
packages/core/admin/admin/src/content-manager/components/CustomInputCheckbox/components.js
View File

@ -1,77 +0,0 @@
import styled, { css } from 'styled-components';
/* eslint-disable */
const Label = styled.label`
cursor: pointer;
position: relative;
vertical-align: middle;
> input {
display: none;
}
&:before {
content: '';
position: absolute;
left: 15px;
top: calc(50% - 8px);
width: 14px;
height: 14px;
border: 1px solid rgba(16, 22, 34, 0.15);
background-color: #fdfdfd;
border-radius: 3px;
}
${({ shouldDisplaySomeChecked }) => {
if (shouldDisplaySomeChecked) {
return css`
&:after {
content: '\f068';
position: absolute;
top: calc(50% - 8px);
left: 18px;
font-size: 10px;
font-family: 'FontAwesome';
font-weight: 100;
color: #1c5de7;
}
`;
}
}}
${({ shouldDisplayAllChecked }) => {
if (shouldDisplayAllChecked) {
return css`
&:after {
content: '\f00c';
position: absolute;
top: calc(50% - 9px);
left: 17px;
font-size: 10px;
font-family: 'FontAwesome';
font-weight: 100;
color: #1c5de7;
transition: all 0.2s;
}
`;
}
}}
${({ isChecked }) => {
if (isChecked) {
return css`
&:after {
content: '\f00c';
position: absolute;
top: calc(50% - 11px);
left: 17px;
font-size: 10px;
font-family: 'FontAwesome';
font-weight: 100;
color: #1c5de7;
transition: all 0.2s;
}
`;
}
}}
`;
export { Label };

53
packages/core/admin/admin/src/content-manager/components/CustomInputCheckbox/index.js
View File

@ -1,53 +0,0 @@
/**
*
* CustomInputCheckbox
*/
import React, { memo } from 'react';
import PropTypes from 'prop-types';
import { Label } from './components';
function CustomInputCheckbox({ entriesToDelete, isAll, name, onChange, value }) {
const shouldDisplaySomeChecked = isAll && entriesToDelete.length > 0 && !value;
const shouldDisplayAllChecked = isAll && value;
return (
<span className="form-check" style={{ marginLeft: '-15px' }}>
<Label
className="form-check-label"
isAll={isAll}
shouldDisplaySomeChecked={shouldDisplaySomeChecked}
shouldDisplayAllChecked={shouldDisplayAllChecked}
isChecked={value && !isAll}
htmlFor={name}
>
<input
className="form-check-input"
checked={value}
id={name}
name={name}
onChange={onChange}
type="checkbox"
/>
</Label>
</span>
);
}
CustomInputCheckbox.defaultProps = {
entriesToDelete: [],
isAll: false,
name: '',
value: false,
};
CustomInputCheckbox.propTypes = {
entriesToDelete: PropTypes.array,
isAll: PropTypes.bool,
name: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
onChange: PropTypes.func.isRequired,
value: PropTypes.bool,
};
export default memo(CustomInputCheckbox);

63
packages/core/admin/admin/src/content-manager/components/DynamicComponentCard/Wrapper.js
View File

@ -1,63 +0,0 @@
import styled from 'styled-components';
const Wrapper = styled.div`
position: relative;
height: 90px;
width: 139px !important;
margin: 0 10px 10px 0;
padding: 18px 10px;
background-color: #ffffff;
color: #919bae;
text-align: center;
border-radius: 2px;
cursor: pointer;
border: 1px solid #ffffff;
button {
outline: 0;
}
.component-uid {
width: 119px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #919bae;
font-weight: 500;
font-size: 13px;
line-height: normal;
}
.component-icon {
width: 35px;
height: 35px;
margin-bottom: 5px;
line-height: 35px;
align-self: center;
border-radius: 50%;
background-color: #e9eaeb;
color: #b4b6ba;
padding: 0;
i,
svg {
margin: auto;
display: block;
}
}
&:hover {
background-color: #e6f0fb;
color: #007eff;
border: 1px solid #aed4fb;
.component-icon {
background-color: #aed4fb;
color: #007eff;
}
.component-uid {
color: #007eff;
}
}
`;
export default Wrapper;

10
packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/RelationMultiple/tests/__snapshots__/index.test.js.snap
View File

@ -207,6 +207,11 @@ exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the sn
fill: #8e8ea9;
}
.c9 {
border-radius: 4px;
height: 1.5rem;
}
.c12 {
display: -webkit-box;
display: -webkit-flex;
@ -227,11 +232,6 @@ exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the sn
padding: 4px 12px;
}
.c9 {
border-radius: 4px;
height: 1.5rem;
}
<div>
<div
aria-hidden="true"

48
packages/core/admin/admin/src/content-manager/components/DynamicZone/components/ComponentCard.js
View File

@ -7,23 +7,13 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Box } from '@strapi/design-system/Box';
import { Typography } from '@strapi/design-system/Typography';
import { Stack } from '@strapi/design-system/Stack';
import { pxToRem } from '@strapi/helper-plugin';
const StyledFontAwesomeIcon = styled(FontAwesomeIcon)`
width: ${pxToRem(32)} !important;
height: ${pxToRem(32)} !important;
padding: ${pxToRem(9)};
border-radius: ${pxToRem(64)};
background: ${({ theme }) => theme.colors.neutral150};
path {
fill: ${({ theme }) => theme.colors.neutral500};
}
`;
import { ComponentIcon } from '../../ComponentIcon';
const ComponentBox = styled(Box)`
flex-shrink: 0;
@ -35,46 +25,42 @@ const ComponentBox = styled(Box)`
justify-content: center;
align-items: center;
&.active,
&:focus,
&:hover {
border: 1px solid ${({ theme }) => theme.colors.primary200};
background: ${({ theme }) => theme.colors.primary100};
${StyledFontAwesomeIcon} {
background: ${({ theme }) => theme.colors.primary200};
path {
fill: ${({ theme }) => theme.colors.primary600};
}
${Typography} {
color: ${({ theme }) => theme.colors.primary600};
}
${Typography} {
/* > Stack > ComponentIcon */
> div > div:first-child {
background: ${({ theme }) => theme.colors.primary200};
color: ${({ theme }) => theme.colors.primary600};
}
}
`;
export default function ComponentCard({ children, icon, onClick }) {
export default function ComponentCard({ children, onClick }) {
return (
<button type="button" onClick={onClick}>
<ComponentBox borderRadius="borderRadius">
<Stack spacing={1} style={{ justifyContent: 'center', alignItems: 'center' }}>
<StyledFontAwesomeIcon data-testid="component-card-icon" icon={icon} />
<Typography variant="pi" fontWeight="bold" textColor="neutral600">
{children}
</Typography>
</Stack>
</ComponentBox>
</button>
<ComponentBox as="button" type="button" onClick={onClick} hasRadius>
<Stack spacing={1} alignItems="center" justifyContent="center">
<ComponentIcon />
<Typography variant="pi" fontWeight="bold" textColor="neutral600">
{children}
</Typography>
</Stack>
</ComponentBox>
);
}
ComponentCard.defaultProps = {
icon: 'dice-d6',
onClick() {},
};
ComponentCard.propTypes = {
children: PropTypes.node.isRequired,
icon: PropTypes.string,
onClick: PropTypes.func,
};

4
packages/core/admin/admin/src/content-manager/components/DynamicZone/components/ComponentCategory.js
View File

@ -30,8 +30,8 @@ const ComponentCategory = ({ category, components, variant, isOpen, onAddCompone
<AccordionContent>
<Box paddingTop={4} paddingBottom={4} paddingLeft={3} paddingRight={3}>
<Grid>
{components.map(({ componentUid, info: { displayName, icon } }) => (
<ComponentCard key={componentUid} icon={icon} onClick={onAddComponent(componentUid)}>
{components.map(({ componentUid, info: { displayName } }) => (
<ComponentCard key={componentUid} onClick={onAddComponent(componentUid)}>
{formatMessage({ id: displayName, defaultMessage: displayName })}
</ComponentCard>
))}

6
packages/core/admin/admin/src/content-manager/components/DynamicZone/components/DynamicComponent.js
View File

@ -2,7 +2,6 @@ import React, { useMemo, useState } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { useIntl } from 'react-intl';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import get from 'lodash/get';
import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion';
@ -20,6 +19,7 @@ import ArrowUp from '@strapi/icons/ArrowUp';
import { useContentTypeLayout } from '../../../hooks';
import { getTrad } from '../../../utils';
import { ComponentIcon } from '../../ComponentIcon';
import FieldComponent from '../../FieldComponent';
const IconButtonCustom = styled(IconButton)`
@ -73,7 +73,7 @@ const DynamicZoneComponent = ({
const mainField = get(modifiedData, [name, index, mainFieldKey]) ?? '';
const displayedValue = mainFieldKey === 'id' ? '' : mainField.trim();
const displayedValue = mainFieldKey === 'id' ? '' : String(mainField).trim();
const mainValue = displayedValue.length > 0 ? ` - ${displayedValue}` : displayedValue;
@ -111,7 +111,7 @@ const DynamicZoneComponent = ({
<StyledBox hasRadius>
<Accordion expanded={isOpen} onToggle={handleToggle} size="S" error={errorMessage}>
<AccordionToggle
startIcon={icon && <FontAwesomeIcon icon={icon} />}
startIcon={<ComponentIcon showBackground={false} size="S" />}
action={
<Stack horizontal spacing={0} expanded={isOpen}>
{showDownIcon && (

11
packages/core/admin/admin/src/content-manager/components/DynamicZone/components/tests/ComponentCard.test.js
View File

@ -16,17 +16,6 @@ describe('ComponentCard', () => {
</ThemeProvider>
);
it('should render children by default', () => {
const { getByTestId, getByText } = setup();
expect(getByText('test')).toBeInTheDocument();
expect(getByTestId('component-card-icon')).toMatchSnapshot();
});
it('should render a valid icon when passed its name', () => {
const { getByTestId } = setup({ icon: 'fa-camera' });
expect(getByTestId('component-card-icon')).toMatchSnapshot();
});
it('should call the onClick handler when passed', () => {
const onClick = jest.fn();
const { getByText } = setup({ onClick });

4
packages/core/admin/admin/src/content-manager/components/DynamicZone/components/tests/ComponentCategory.test.js
View File

@ -5,10 +5,6 @@ import { IntlProvider } from 'react-intl';
import ComponentCategory from '../ComponentCategory';
jest.mock('@fortawesome/react-fontawesome', () => ({
FontAwesomeIcon: () => null,
}));
describe('ComponentCategory', () => {
const setup = (props) =>
render(

4
packages/core/admin/admin/src/content-manager/components/DynamicZone/components/tests/ComponentPicker.test.js
View File

@ -7,10 +7,6 @@ import ComponentPicker from '../ComponentPicker';
import { layoutData } from './fixtures';
jest.mock('@fortawesome/react-fontawesome', () => ({
FontAwesomeIcon: () => null,
}));
jest.mock('../../../../hooks', () => ({
useContentTypeLayout: jest.fn().mockReturnValue({
getComponentLayout: jest.fn().mockImplementation((componentUid) => layoutData[componentUid]),

4
packages/core/admin/admin/src/content-manager/components/DynamicZone/components/tests/DynamicComponent.test.js
View File

@ -7,10 +7,6 @@ import DynamicComponent from '../DynamicComponent';
import { layoutData } from './fixtures';
jest.mock('@fortawesome/react-fontawesome', () => ({
FontAwesomeIcon: () => null,
}));
jest.mock('../../../../hooks', () => ({
useContentTypeLayout: jest.fn().mockReturnValue({
getComponentLayout: jest.fn().mockImplementation((componentUid) => layoutData[componentUid]),

83
packages/core/admin/admin/src/content-manager/components/DynamicZone/components/tests/__snapshots__/ComponentCard.test.js.snap
View File

@ -1,83 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ComponentCard should render a valid icon when passed its name 1`] = `
.c1 {
width: 2rem !important;
height: 2rem !important;
padding: 0.5625rem;
border-radius: 4rem;
background: #eaeaef;
}
.c1 path {
fill: #8e8ea9;
}
.c2.active .c0,
.c2:hover .c0 {
background: #d9d8ff;
}
.c2.active .c0 path,
.c2:hover .c0 path {
fill: #4945ff;
}
<svg
aria-hidden="true"
class="svg-inline--fa fa-camera c0 c1"
data-icon="camera"
data-prefix="fas"
data-testid="component-card-icon"
focusable="false"
role="img"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M512 144v288c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V144c0-26.5 21.5-48 48-48h88l12.3-32.9c7-18.7 24.9-31.1 44.9-31.1h125.5c20 0 37.9 12.4 44.9 31.1L376 96h88c26.5 0 48 21.5 48 48zM376 288c0-66.2-53.8-120-120-120s-120 53.8-120 120 53.8 120 120 120 120-53.8 120-120zm-32 0c0 48.5-39.5 88-88 88s-88-39.5-88-88 39.5-88 88-88 88 39.5 88 88z"
fill="currentColor"
/>
</svg>
`;
exports[`ComponentCard should render children by default 1`] = `
.c1 {
width: 2rem !important;
height: 2rem !important;
padding: 0.5625rem;
border-radius: 4rem;
background: #eaeaef;
}
.c1 path {
fill: #8e8ea9;
}
.c2.active .c0,
.c2:hover .c0 {
background: #d9d8ff;
}
.c2.active .c0 path,
.c2:hover .c0 path {
fill: #4945ff;
}
<svg
aria-hidden="true"
class="svg-inline--fa fa-dice-d6 c0 c1"
data-icon="dice-d6"
data-prefix="fas"
data-testid="component-card-icon"
focusable="false"
role="img"
viewBox="0 0 448 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M422.19 109.95L256.21 9.07c-19.91-12.1-44.52-12.1-64.43 0L25.81 109.95c-5.32 3.23-5.29 11.27.06 14.46L224 242.55l198.14-118.14c5.35-3.19 5.38-11.22.05-14.46zm13.84 44.63L240 271.46v223.82c0 12.88 13.39 20.91 24.05 14.43l152.16-92.48c19.68-11.96 31.79-33.94 31.79-57.7v-197.7c0-6.41-6.64-10.43-11.97-7.25zM0 161.83v197.7c0 23.77 12.11 45.74 31.79 57.7l152.16 92.47c10.67 6.48 24.05-1.54 24.05-14.43V271.46L11.97 154.58C6.64 151.4 0 155.42 0 161.83z"
fill="currentColor"
/>
</svg>
`;

4
packages/core/admin/admin/src/content-manager/components/DynamicZone/tests/index.test.js
View File

@ -7,10 +7,6 @@ import { DynamicZone } from '../index';
import { layoutData } from './fixtures';
jest.mock('@fortawesome/react-fontawesome', () => ({
FontAwesomeIcon: () => null,
}));
const toggleNotification = jest.fn();
jest.mock('@strapi/helper-plugin', () => ({

3
packages/core/admin/admin/src/content-manager/components/EditViewDataManagerProvider/utils/findLeafByPathAndReplace.js
View File

@ -24,7 +24,8 @@ export const findLeafByPathAndReplace = (endpath, replaceWith) => {
* and the current path is not undefined in the accumulator
* then we assume it's a leaf and we can replace it.
*/
if (endpath === curr && acc[curr] !== undefined) {
if (ind === currentArr.length - 1 && endpath === curr && acc[curr] !== undefined) {
set(acc, curr, replaceWith);
return acc;

30
packages/core/admin/admin/src/content-manager/components/EditViewDataManagerProvider/utils/tests/findLeafByPathAndReplace.test.js
View File

@ -122,4 +122,34 @@ describe('findLeafByPathAndReplace', () => {
},
});
});
it('should only replace the leaf if it is the last item in the array of paths', () => {
const obj = {
a: {
a: [
{
a: 'd',
},
],
},
};
const path = ['a', 'a', 'a'];
const [lastPath] = path.slice(-1);
const findLeaf = findLeafByPathAndReplace(lastPath, []);
path.reduce(findLeaf, obj);
expect(obj).toMatchObject({
a: {
a: [
{
a: [],
},
],
},
});
});
});

14
packages/core/admin/admin/src/content-manager/components/FilterOptionsCTA/index.js
View File

@ -1,14 +0,0 @@
import styled from 'styled-components';
const FilterOptionsCTA = styled.button`
display: flex;
justify-content: center;
height: 20px;
width: 20px;
margin: 8px 5px 0px 0px;
border-radius: 50%;
border: 1px solid #e3e9f3;
cursor: pointer;
`;
export default FilterOptionsCTA;

22
packages/core/admin/admin/src/content-manager/components/FormTitle/index.js
View File

@ -1,22 +0,0 @@
import React, { memo } from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
const FormTitle = ({ description, title }) => (
<>
{!!title && <FormattedMessage id={title} />}
{!!description && <FormattedMessage id={description}>{(msg) => <p>{msg}</p>}</FormattedMessage>}
</>
);
FormTitle.propTypes = {
description: PropTypes.string,
title: PropTypes.string,
};
FormTitle.defaultProps = {
description: null,
title: null,
};
export default memo(FormTitle);

20
packages/core/admin/admin/src/content-manager/components/FormWrapper/index.js
View File

@ -1,20 +0,0 @@
import styled from 'styled-components';
const FormWrapper = styled.div`
padding: 22px 10px 0 10px;
background: #ffffff;
border-radius: 2px;
box-shadow: 0 2px 4px #e3e9f3;
margin-bottom: 17px;
> div {
margin-right: 0;
margin-left: 0;
}
.row {
&:last-of-type {
margin-bottom: 0;
}
}
`;
export default FormWrapper;

38
packages/core/admin/admin/src/content-manager/components/InputJSON/FieldError.js
View File

@ -1,38 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import { Typography } from '@strapi/design-system/Typography';
export const FieldError = ({ id, error, name }) => {
const { formatMessage } = useIntl();
const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';
if (!error) {
return null;
}
return (
<Typography
as="p"
variant="pi"
id={`${id || name}-error`}
textColor="danger600"
data-strapi-field-error
>
{errorMessage}
</Typography>
);
};
FieldError.defaultProps = {
id: undefined,
error: undefined,
};
FieldError.propTypes = {
error: PropTypes.string,
id: PropTypes.string,
name: PropTypes.string.isRequired,
};
export default FieldError;

12
packages/core/admin/admin/src/content-manager/components/InputJSON/FieldWrapper.js
View File

@ -3,12 +3,18 @@ import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import { Field } from '@strapi/design-system/Field';
const FieldWrapper = ({ name, hint, error, children }) => {
const FieldWrapper = ({ name, hint, error, children, required }) => {
const { formatMessage } = useIntl();
const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';
return (
<Field name={name} hint={hint && formatMessage(hint)} error={errorMessage} id={name}>
<Field
name={name}
hint={hint && formatMessage(hint)}
error={errorMessage}
id={name}
required={required}
>
{children}
</Field>
);
@ -17,6 +23,7 @@ const FieldWrapper = ({ name, hint, error, children }) => {
FieldWrapper.defaultProps = {
hint: undefined,
error: '',
required: false,
};
FieldWrapper.propTypes = {
@ -27,6 +34,7 @@ FieldWrapper.propTypes = {
}),
error: PropTypes.string,
children: PropTypes.node.isRequired,
required: PropTypes.bool,
};
export default FieldWrapper;

20
packages/core/admin/admin/src/content-manager/components/InputJSON/Label.js
View File

@ -1,18 +1,9 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { useIntl } from 'react-intl';
import { FieldLabel } from '@strapi/design-system/Field';
import { Box } from '@strapi/design-system/Box';
import { Flex } from '@strapi/design-system/Flex';
const LabelAction = styled(Box)`
svg path {
fill: ${({ theme }) => theme.colors.neutral500};
}
`;
const Label = ({ intlLabel, labelAction, name, required }) => {
const Label = ({ intlLabel, labelAction, name }) => {
const { formatMessage } = useIntl();
const label = intlLabel?.id
? formatMessage(
@ -21,19 +12,13 @@ const Label = ({ intlLabel, labelAction, name, required }) => {
)
: name;
return (
<Flex>
<FieldLabel required={required}>{label}</FieldLabel>
{labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
</Flex>
);
return <FieldLabel action={labelAction}>{label}</FieldLabel>;
};
Label.defaultProps = {
id: undefined,
intlLabel: undefined,
labelAction: undefined,
required: false,
};
Label.propTypes = {
@ -45,7 +30,6 @@ Label.propTypes = {
}),
labelAction: PropTypes.element,
name: PropTypes.string.isRequired,
required: PropTypes.bool,
};
export default Label;

10
packages/core/admin/admin/src/content-manager/components/InputJSON/index.js
View File

@ -157,13 +157,17 @@ class InputJSON extends React.Component {
}
return (
<FieldWrapper name={this.props.name} hint={this.props.description} error={this.props.error}>
<FieldWrapper
name={this.props.name}
hint={this.props.description}
error={this.props.error}
required={this.props.required}
>
<Stack spacing={1}>
<Label
intlLabel={this.props.intlLabel}
labelAction={this.props.labelAction}
name={this.props.name}
required={this.props.required}
labelAction={this.props.labelAction}
/>
<StyledBox error={this.props.error}>
<EditorWrapper disabled={this.props.disabled}>

1
packages/core/admin/admin/src/content-manager/components/InputUID/tests/index.test.js
View File

@ -235,6 +235,7 @@ describe('<InputUID />', () => {
<input
aria-disabled="false"
aria-invalid="false"
aria-required="false"
class="c6"
id="textinput-1"
name="test"

19
packages/core/admin/admin/src/content-manager/components/LayoutTitle/index.js
View File

@ -1,19 +0,0 @@
import styled from 'styled-components';
const LayoutTitle = styled.div`
color: #333740;
font-size: 13px;
font-weight: 500;
line-height: 18px;
p {
margin-top: 2px;
margin-bottom: 13px;
color: #9ea7b8;
font-size: 12px;
font-weight: 400;
line-height: normal;
}
`;
export default LayoutTitle;

52
packages/core/admin/admin/src/content-manager/components/PlusButton/index.js
View File

@ -1,52 +0,0 @@
import styled from 'styled-components';
const beforeStyle = `
content: ' ';
position: absolute;
display: block;
width: 14px;
height: 2px;
left: 11px;
top: 17px;
bottom: 10px;
z-index: 9;
`;
const afterStyle = `
content: ' ';
position: absolute;
display: block;
height: 14px;
width: 2px;
left: 17px;
top: 11px;
right: 10px;
z-index: 9;
`;
const Button = styled.button`
position: relative;
height: 36px;
width: 36px;
background-color: #f3f4f4;
border-radius: 50%;
text-align: center;
:focus {
outline: 0;
}
:before {
${beforeStyle}
}
:after {
${afterStyle}
}
:before,
:after {
background-color: #b4b6ba;
}
`;
export default Button;

27
packages/core/admin/admin/src/content-manager/components/PreviewCarret/components.js
View File

@ -1,27 +0,0 @@
import styled from 'styled-components';
/* eslint-disable indent */
const Wrapper = styled.div`
display: flex;
flex-direction: column;
justify-content: space-around;
height: 30px;
width: 100%;
padding: 0 5px;
${({ isComponent }) =>
isComponent &&
`
height: 34px;
padding: 0;
`}
border-radius: 2px;
> div {
width: 100%;
height: 2px;
background: #007eff;
}
`;
export default Wrapper;

22
packages/core/admin/admin/src/content-manager/components/PreviewCarret/index.js
View File

@ -1,22 +0,0 @@
import React, { memo } from 'react';
import PropTypes from 'prop-types';
import Wrapper from './components';
const PreviewCarret = ({ isComponent, style }) => (
<Wrapper isComponent={isComponent} style={style}>
<div />
</Wrapper>
);
PreviewCarret.defaultProps = {
isComponent: false,
style: {},
};
PreviewCarret.propTypes = {
isComponent: PropTypes.bool,
style: PropTypes.object,
};
export default memo(PreviewCarret);

6
packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js
View File

@ -226,15 +226,13 @@ const RelationInput = ({
}, [previewRelationsLength, relations]);
return (
<Field error={error} name={name} hint={description} id={id}>
<Field error={error} name={name} hint={description} id={id} required={required}>
<Relation
totalNumberOfRelations={totalNumberOfRelations}
size={size}
search={
<>
<FieldLabel action={labelAction} required={required}>
{label}
</FieldLabel>
<FieldLabel action={labelAction}>{label}</FieldLabel>
<ReactSelect
// position fixed doesn't update position on scroll
// react select doesn't update menu position on options change

114
packages/core/admin/admin/src/content-manager/components/RelationInput/tests/__snapshots__/RelationInput.test.js.snap
View File

@ -214,63 +214,6 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
fill: #666687;
}
.c11 {
background: transparent;
border: none;
position: relative;
outline: none;
}
.c11[aria-disabled='true'] {
pointer-events: none;
}
.c11[aria-disabled='true'] svg path {
fill: #666687;
}
.c11 svg {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-size: 0.625rem;
}
.c11 svg path {
fill: #4945ff;
}
.c11:after {
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
border-radius: 8px;
content: '';
position: absolute;
top: -4px;
bottom: -4px;
left: -4px;
right: -4px;
border: 2px solid transparent;
}
.c11:focus-visible {
outline: none;
}
.c11:focus-visible:after {
border-radius: 8px;
content: '';
position: absolute;
top: -5px;
bottom: -5px;
left: -5px;
right: -5px;
border: 2px solid #4945ff;
}
.c9 {
background: transparent;
border: none;
@ -378,6 +321,63 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
border: 2px solid #4945ff;
}
.c11 {
background: transparent;
border: none;
position: relative;
outline: none;
}
.c11[aria-disabled='true'] {
pointer-events: none;
}
.c11[aria-disabled='true'] svg path {
fill: #666687;
}
.c11 svg {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-size: 0.625rem;
}
.c11 svg path {
fill: #4945ff;
}
.c11:after {
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
border-radius: 8px;
content: '';
position: absolute;
top: -4px;
bottom: -4px;
left: -4px;
right: -4px;
border: 2px solid transparent;
}
.c11:focus-visible {
outline: none;
}
.c11:focus-visible:after {
border-radius: 8px;
content: '';
position: absolute;
top: -5px;
bottom: -5px;
left: -5px;
right: -5px;
border: 2px solid #4945ff;
}
.c17 {
width: 100%;
min-width: 0;

1
packages/core/admin/admin/src/content-manager/components/RepeatableComponent/AccordionGroupCustom/index.js
View File

@ -8,7 +8,6 @@ import { Flex } from '@strapi/design-system/Flex';
import { KeyboardNavigable } from '@strapi/design-system/KeyboardNavigable';
const AccordionFooter = styled(Box)`
overflow: hidden;
border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
border-left: 1px solid ${({ theme }) => theme.colors.neutral200};

11
packages/core/admin/admin/src/content-manager/components/SectionTitle/Title.js
View File

@ -1,11 +0,0 @@
import styled from 'styled-components';
const Title = styled.div`
color: #787e8f;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.77px;
text-transform: uppercase;
`;
export default Title;

26
packages/core/admin/admin/src/content-manager/components/SectionTitle/index.js
View File

@ -1,26 +0,0 @@
import React, { memo } from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import { getTrad } from '../../utils';
import Title from './Title';
const SectionTitle = ({ isSettings }) => {
const suffix = isSettings ? 'settings' : 'view';
const msgId = getTrad(`containers.SettingPage.${suffix}`);
return (
<div style={{ marginBottom: '18px' }}>
<FormattedMessage id={msgId}>{(msg) => <Title>{msg}</Title>}</FormattedMessage>
</div>
);
};
SectionTitle.propTypes = {
isSettings: PropTypes.bool,
};
SectionTitle.defaultProps = {
isSettings: false,
};
export default memo(SectionTitle);

4
packages/core/admin/admin/src/content-manager/pages/App/tests/index.test.js
View File

@ -21,10 +21,6 @@ jest.mock('../useModels', () =>
})
);
jest.mock('@fortawesome/react-fontawesome', () => ({
FontAwesomeIcon: () => null,
}));
jest.mock('../../NoContentType', () => () => {
return <div>NoContentType</div>;
});

56
packages/core/admin/admin/src/content-manager/pages/EditSettingsView/components/DynamicZoneList.js
View File

@ -1,43 +1,31 @@
import React from 'react';
import get from 'lodash/get';
import PropTypes from 'prop-types';
import { Flex } from '@strapi/design-system/Flex';
import { Typography } from '@strapi/design-system/Typography';
import { Box } from '@strapi/design-system/Box';
import { Stack } from '@strapi/design-system/Stack';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import { Box, Flex, Typography, Stack } from '@strapi/design-system';
import { ComponentIcon } from '../../../components/ComponentIcon';
import useLayoutDnd from '../../../hooks/useLayoutDnd';
const CustomFlex = styled(Flex)`
border-radius: 50%;
svg {
& > * {
fill: ${({ theme }) => theme.colors.neutral500};
}
width: 12px;
height: 12px;
}
`;
const CustomLink = styled(Flex)`
text-decoration: none;
&:focus,
&:hover {
${({ theme }) => `
background: ${theme.colors.primary100};
svg {
& > * {
fill: ${theme.colors.primary600};
}
}
background-color: ${theme.colors.primary100};
border-color: ${theme.colors.primary200};
${Typography} {
color: ${theme.colors.primary600};
}
${CustomFlex} {
background: ${theme.colors.primary200};
}
border-color: ${theme.colors.primary200};
`}
/* > ComponentIcon */
> div:first-child {
background: ${({ theme }) => theme.colors.primary200};
color: ${({ theme }) => theme.colors.primary600};
}
}
`;
@ -61,19 +49,11 @@ const DynamicZoneList = ({ components }) => {
as={Link}
to={`/content-manager/components/${componentUid}/configurations/edit`}
>
<CustomFlex
width={`${32 / 16}rem`}
height={`${32 / 16}rem`}
background="neutral150"
justifyContent="center"
alignItems="center"
padding={2}
>
<FontAwesomeIcon icon={get(componentLayouts, [componentUid, 'info', 'icon'], '')} />
</CustomFlex>
<ComponentIcon />
<Box paddingTop={1}>
<Typography fontSize={1} textColor="neutral600" fontWeight="bold">
{get(componentLayouts, [componentUid, 'info', 'displayName'], '')}
{componentLayouts?.[componentUid]?.info?.displayName ?? ''}
</Typography>
</Box>
</CustomLink>

2
packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/__snapshots__/index.test.js.snap
View File

@ -947,7 +947,6 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
<span
class="c7 c25"
for="select-1"
id="select-1-label"
>
<div
class="c1 c10"
@ -2406,7 +2405,6 @@ exports[`EditSettingsView should add field 1`] = `
<span
class="c7 c25"
for="select-11"
id="select-11-label"
>
<div
class="c1 c10"

4
packages/core/admin/admin/src/content-manager/pages/EditView/DraftAndPublishBadge/tests/index.test.js
View File

@ -84,7 +84,7 @@ describe('<DraftAndPublishBadge />', () => {
class="c0"
>
<div
class="c1 sc-dcgwPl cizjuL"
class="c1 sc-ehIJor wxhvj"
>
<svg
class="c2"
@ -184,7 +184,7 @@ describe('<DraftAndPublishBadge />', () => {
class="c0"
>
<div
class="c1 sc-dcgwPl cizjuL"
class="c1 sc-ehIJor wxhvj"
>
<svg
class="c2"

2
packages/core/admin/admin/src/content-manager/pages/EditView/Header/index.js
View File

@ -74,7 +74,7 @@ const Header = ({
{formatMessage({ id: 'app.utils.publish', defaultMessage: 'Publish' })}
</Button>
)}
<Button disabled={!didChangeData} isLoading={status === 'submit-pending'} type="submit">
<Button disabled={!didChangeData} loading={status === 'submit-pending'} type="submit">
{formatMessage({
id: getTrad('containers.Edit.submit'),
defaultMessage: 'Save',

296
packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/__snapshots__/index.test.js.snap
View File

@ -559,77 +559,6 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
width: 100%;
}
.c30 {
position: relative;
display: inline-block;
z-index: 0;
width: 100%;
}
.c33 {
overflow: hidden;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
outline: none;
box-shadow: 0;
-webkit-transition-property: border-color,box-shadow,fill;
transition-property: border-color,box-shadow,fill;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
}
.c33:focus-within {
border: 1px solid #4945ff;
box-shadow: #4945ff 0px 0px 0px 2px;
}
.c36 {
background-color: transparent;
border: 1px solid #f6f6f9;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 2;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
padding-top: 6px;
padding-bottom: 6px;
}
.c38 {
background-color: #ffffff;
border: 1px solid #dcdce4;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 2;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
padding-top: 6px;
padding-bottom: 6px;
}
.c40 {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
z-index: 1;
width: 100%;
}
.c27 {
max-width: 320px;
}
.c7 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
@ -719,6 +648,77 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
outline: none;
}
.c30 {
position: relative;
display: inline-block;
z-index: 0;
width: 100%;
}
.c33 {
overflow: hidden;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
outline: none;
box-shadow: 0;
-webkit-transition-property: border-color,box-shadow,fill;
transition-property: border-color,box-shadow,fill;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
}
.c33:focus-within {
border: 1px solid #4945ff;
box-shadow: #4945ff 0px 0px 0px 2px;
}
.c36 {
background-color: transparent;
border: 1px solid #f6f6f9;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 2;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
padding-top: 6px;
padding-bottom: 6px;
}
.c38 {
background-color: #ffffff;
border: 1px solid #dcdce4;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 2;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
padding-top: 6px;
padding-bottom: 6px;
}
.c40 {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
z-index: 1;
width: 100%;
}
.c27 {
max-width: 320px;
}
.c66 {
display: -webkit-box;
display: -webkit-flex;
@ -1007,6 +1007,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
</div>
<input
aria-disabled="false"
aria-required="false"
checked=""
class="c40"
id="toggleinput-1"
@ -1077,6 +1078,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
</div>
<input
aria-disabled="false"
aria-required="false"
checked=""
class="c40"
id="toggleinput-2"
@ -1147,6 +1149,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
</div>
<input
aria-disabled="false"
aria-required="false"
class="c40"
id="toggleinput-3"
name="settings.bulkable"
@ -1175,7 +1178,6 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
<span
class="c10 c29"
for="select-4"
id="select-4-label"
>
<div
class="c0 c13"
@ -1266,7 +1268,6 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
<span
class="c10 c29"
for="select-5"
id="select-5-label"
>
<div
class="c0 c13"
@ -1350,7 +1351,6 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
<span
class="c10 c29"
for="select-6"
id="select-6-label"
>
<div
class="c0 c13"
@ -2289,77 +2289,6 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
width: 100%;
}
.c30 {
position: relative;
display: inline-block;
z-index: 0;
width: 100%;
}
.c33 {
overflow: hidden;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
outline: none;
box-shadow: 0;
-webkit-transition-property: border-color,box-shadow,fill;
transition-property: border-color,box-shadow,fill;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
}
.c33:focus-within {
border: 1px solid #4945ff;
box-shadow: #4945ff 0px 0px 0px 2px;
}
.c36 {
background-color: transparent;
border: 1px solid #f6f6f9;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 2;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
padding-top: 6px;
padding-bottom: 6px;
}
.c38 {
background-color: #ffffff;
border: 1px solid #dcdce4;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 2;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
padding-top: 6px;
padding-bottom: 6px;
}
.c40 {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
z-index: 1;
width: 100%;
}
.c27 {
max-width: 320px;
}
.c7 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
@ -2449,6 +2378,77 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
outline: none;
}
.c30 {
position: relative;
display: inline-block;
z-index: 0;
width: 100%;
}
.c33 {
overflow: hidden;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
outline: none;
box-shadow: 0;
-webkit-transition-property: border-color,box-shadow,fill;
transition-property: border-color,box-shadow,fill;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
}
.c33:focus-within {
border: 1px solid #4945ff;
box-shadow: #4945ff 0px 0px 0px 2px;
}
.c36 {
background-color: transparent;
border: 1px solid #f6f6f9;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 2;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
padding-top: 6px;
padding-bottom: 6px;
}
.c38 {
background-color: #ffffff;
border: 1px solid #dcdce4;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 2;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
padding-top: 6px;
padding-bottom: 6px;
}
.c40 {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
z-index: 1;
width: 100%;
}
.c27 {
max-width: 320px;
}
.c66 {
display: -webkit-box;
display: -webkit-flex;
@ -2736,6 +2736,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
</div>
<input
aria-disabled="false"
aria-required="false"
checked=""
class="c40"
id="toggleinput-31"
@ -2806,6 +2807,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
</div>
<input
aria-disabled="false"
aria-required="false"
checked=""
class="c40"
id="toggleinput-32"
@ -2876,6 +2878,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
</div>
<input
aria-disabled="false"
aria-required="false"
class="c40"
id="toggleinput-33"
name="settings.bulkable"
@ -2904,7 +2907,6 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
<span
class="c10 c29"
for="select-34"
id="select-34-label"
>
<div
class="c0 c13"
@ -2995,7 +2997,6 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
<span
class="c10 c29"
for="select-35"
id="select-35-label"
>
<div
class="c0 c13"
@ -3079,7 +3080,6 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
<span
class="c10 c29"
for="select-36"
id="select-36-label"
>
<div
class="c0 c13"

86
packages/core/admin/admin/src/pages/Admin/Onboarding/index.js
View File

@ -1,11 +1,10 @@
import React, { useState } from 'react';
import styled from 'styled-components';
import { useIntl } from 'react-intl';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faQuestion, faTimes } from '@fortawesome/free-solid-svg-icons';
import { Box } from '@strapi/design-system/Box';
import { Typography } from '@strapi/design-system/Typography';
import { FocusTrap } from '@strapi/design-system/FocusTrap';
import { Box, Flex, FocusTrap, Typography, Icon, Stack } from '@strapi/design-system';
import { Book, Cross, Information, Question } from '@strapi/icons';
import { pxToRem } from '@strapi/helper-plugin';
import { useConfigurations } from '../../../hooks';
const OnboardingWrapper = styled(Box)`
@ -14,52 +13,44 @@ const OnboardingWrapper = styled(Box)`
right: ${({ theme }) => theme.spaces[2]};
`;
const Button = styled.button`
const Button = styled(Box)`
width: ${({ theme }) => theme.spaces[8]};
height: ${({ theme }) => theme.spaces[8]};
background: ${({ theme }) => theme.colors.primary600};
box-shadow: ${({ theme }) => theme.shadows.tableShadow};
border-radius: 50%;
svg {
color: ${({ theme }) => theme.colors.buttonNeutral0};
svg path {
fill: ${({ theme }) => theme.colors.buttonNeutral0};
}
`;
const LinksWrapper = styled(Box)`
position: absolute;
bottom: ${({ theme }) => `${theme.spaces[9]}`};
min-width: ${200 / 16}rem;
position: absolute;
right: 0;
width: ${200 / 16}rem;
`;
const StyledLink = styled.a`
display: flex;
align-items: center;
const StyledLink = styled(Flex)`
text-decoration: none;
padding: ${({ theme }) => theme.spaces[2]};
padding-left: ${({ theme }) => theme.spaces[5]};
svg {
color: ${({ theme }) => theme.colors.neutral600};
margin-right: ${({ theme }) => theme.spaces[2]};
svg path {
fill: ${({ theme }) => theme.colors.neutral600};
}
&:focus,
&:hover {
background: ${({ theme }) => theme.colors.neutral100};
color: ${({ theme }) => theme.colors.neutral500};
svg {
color: ${({ theme }) => theme.colors.neutral700};
svg path {
fill: ${({ theme }) => theme.colors.neutral700};
}
${[Typography]} {
color: ${({ theme }) => theme.colors.neutral700};
}
}
${[Typography]} {
color: ${({ theme }) => theme.colors.neutral600};
}
`;
const Onboarding = () => {
@ -71,9 +62,9 @@ const Onboarding = () => {
return null;
}
const staticLinks = [
const STATIC_LINKS = [
{
icon: 'book',
Icon: <Book />,
label: formatMessage({
id: 'global.documentation',
defaultMessage: 'Documentation',
@ -81,7 +72,7 @@ const Onboarding = () => {
destination: 'https://docs.strapi.io',
},
{
icon: 'file',
Icon: <Information />,
label: formatMessage({ id: 'app.static.links.cheatsheet', defaultMessage: 'CheatSheet' }),
destination: 'https://strapi-showcase.s3-us-west-2.amazonaws.com/CheatSheet.pdf',
},
@ -94,37 +85,44 @@ const Onboarding = () => {
return (
<OnboardingWrapper as="aside">
<Button
as="button"
id="onboarding"
aria-label={formatMessage({
id: 'app.components.Onboarding.help.button',
defaultMessage: 'Help button',
})}
aria-label={formatMessage(
isOpen
? {
id: 'app.components.Onboarding.help.button-close',
defaultMessage: 'Close help menu',
}
: {
id: 'app.components.Onboarding.help.button',
defaultMessage: 'Open help menu',
}
)}
onClick={handleClick}
>
{!isOpen && <FontAwesomeIcon icon={faQuestion} />}
{isOpen && <FontAwesomeIcon icon={faTimes} />}
<Icon as={isOpen ? Cross : Question} height={pxToRem(16)} width={pxToRem(16)} />
</Button>
{/* FIX ME - replace with popover when overflow popover is fixed
+ when v4 mockups for onboarding component are ready */}
{isOpen && (
<FocusTrap onEscape={handleClick}>
<LinksWrapper
background="neutral0"
hasRadius
shadow="tableShadow"
paddingBottom={2}
paddingTop={2}
>
{staticLinks.map((link) => (
<LinksWrapper background="neutral0" hasRadius shadow="tableShadow" padding={2}>
{STATIC_LINKS.map((link) => (
<StyledLink
as="a"
key={link.label}
rel="nofollow noreferrer noopener"
target="_blank"
href={link.destination}
padding={2}
hasRadius
alignItems="center"
>
<FontAwesomeIcon icon={link.icon} />
<Typography>{link.label}</Typography>
<Stack horizontal spacing={2}>
{link.Icon}
<Typography color="neutral600">{link.label}</Typography>
</Stack>
</StyledLink>
))}
</LinksWrapper>

55
packages/core/admin/admin/src/pages/Admin/Onboarding/tests/__snapshots__/index.test.js.snap Normal file
View File

@ -0,0 +1,55 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Onboarding renders and matches the snapshot 1`] = `
.c2 {
color: #666687;
width: 1rem;
height: 1rem;
}
.c3 path {
fill: #666687;
}
.c0 {
position: fixed;
bottom: 8px;
right: 8px;
}
.c1 {
width: 40px;
height: 40px;
background: #4945ff;
box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
border-radius: 50%;
}
.c1 svg path {
fill: #ffffff;
}
<aside
class="c0"
>
<button
aria-label="Open help menu"
class="c1"
id="onboarding"
>
<svg
class="c2 c3"
fill="none"
height="1rem"
viewBox="0 0 15 14"
width="1rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.08 4.1c0-1.19 1.18-2.17 2.42-2.17s2.43.98 2.43 2.17c0 1.1-.56 1.61-1.31 2.28l-.03.03c-.75.65-1.66 1.47-1.66 3.09a.57.57 0 101.15 0c0-1.08.55-1.6 1.3-2.26l.02-.02c.75-.66 1.67-1.48 1.67-3.12C11.07 2.13 9.22.78 7.5.78 5.78.78 3.93 2.13 3.93 4.1a.57.57 0 101.15 0zm2.42 9.26a.88.88 0 100-1.75.88.88 0 000 1.75z"
fill="#212134"
/>
</svg>
</button>
</aside>
`;

50
packages/core/admin/admin/src/pages/Admin/Onboarding/tests/index.test.js
View File

@ -2,12 +2,8 @@ import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { IntlProvider } from 'react-intl';
import { ThemeProvider, lightTheme } from '@strapi/design-system';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faFile, faBook } from '@fortawesome/free-solid-svg-icons';
import Onboarding from '../index';
library.add(faFile, faBook);
jest.mock('../../../../hooks', () => ({
useConfigurations: jest.fn(() => {
return { showTutorials: true };
@ -28,51 +24,7 @@ describe('Onboarding', () => {
container: { firstChild },
} = render(App);
expect(firstChild).toMatchInlineSnapshot(`
.c0 {
position: fixed;
bottom: 8px;
right: 8px;
}
.c1 {
width: 40px;
height: 40px;
background: #4945ff;
box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
border-radius: 50%;
}
.c1 svg {
color: #ffffff;
}
<aside
class="c0"
>
<button
aria-label="Help button"
class="c1"
id="onboarding"
>
<svg
aria-hidden="true"
class="svg-inline--fa fa-question "
data-icon="question"
data-prefix="fas"
focusable="false"
role="img"
viewBox="0 0 384 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M202.021 0C122.202 0 70.503 32.703 29.914 91.026c-7.363 10.58-5.093 25.086 5.178 32.874l43.138 32.709c10.373 7.865 25.132 6.026 33.253-4.148 25.049-31.381 43.63-49.449 82.757-49.449 30.764 0 68.816 19.799 68.816 49.631 0 22.552-18.617 34.134-48.993 51.164-35.423 19.86-82.299 44.576-82.299 106.405V320c0 13.255 10.745 24 24 24h72.471c13.255 0 24-10.745 24-24v-5.773c0-42.86 125.268-44.645 125.268-160.627C377.504 66.256 286.902 0 202.021 0zM192 373.459c-38.196 0-69.271 31.075-69.271 69.271 0 38.195 31.075 69.27 69.271 69.27s69.271-31.075 69.271-69.271-31.075-69.27-69.271-69.27z"
fill="currentColor"
/>
</svg>
</button>
</aside>
`);
expect(firstChild).toMatchSnapshot();
});
it('should open links when button is clicked', () => {

34
packages/core/admin/admin/src/pages/AuthPage/components/Login/tests/BaseLogin.test.js
View File

@ -516,21 +516,6 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
align-items: center;
}
.c27 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: flex-start;
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
}
.c27 * {
cursor: pointer;
}
.c35 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
@ -588,6 +573,21 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
outline: none;
}
.c27 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: flex-start;
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
}
.c27 * {
cursor: pointer;
}
.c3 {
margin: 0 auto;
width: 552px;
@ -670,7 +670,6 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
<label
class="c8 c15"
for="textinput-1"
required=""
>
<div
class="c1 c4"
@ -689,6 +688,7 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
<input
aria-disabled="false"
aria-invalid="false"
aria-required="true"
class="c20"
id="textinput-1"
name="email"
@ -708,7 +708,6 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
<label
class="c8 c15"
for="textinput-2"
required=""
>
<div
class="c1 c4"
@ -727,6 +726,7 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
<input
aria-disabled="false"
aria-invalid="false"
aria-required="true"
class="c21 c22"
id="textinput-2"
name="password"

32
packages/core/admin/admin/src/pages/AuthPage/components/Oops/tests/index.test.js
View File

@ -273,22 +273,6 @@ describe('ADMIN | PAGES | AUTH | Oops', () => {
fill: #8e8ea9;
}
.c8 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c8 svg {
height: 4px;
width: 6px;
}
.c21 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
@ -346,6 +330,22 @@ describe('ADMIN | PAGES | AUTH | Oops', () => {
outline: none;
}
.c8 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c8 svg {
height: 4px;
width: 6px;
}
.c12 {
margin: 0 auto;
width: 552px;

2
packages/core/admin/admin/src/pages/AuthPage/components/Register/index.js
View File

@ -268,7 +268,7 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
required
label={formatMessage({
id: 'Auth.form.confirmPassword.label',
defaultMessage: 'Confirmation Password',
defaultMessage: 'Confirm Password',
})}
type={confirmPasswordShown ? 'text' : 'password'}
/>

41
packages/core/admin/admin/src/pages/AuthPage/components/Register/tests/index.test.js
View File

@ -621,6 +621,10 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
align-items: center;
}
.c12:focus-visible {
outline: none;
}
.c39 {
display: -webkit-box;
display: -webkit-flex;
@ -636,6 +640,17 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
cursor: pointer;
}
.c23 {
display: grid;
grid-template-columns: repeat(12,1fr);
gap: 16px;
}
.c24 {
grid-column: span 6;
max-width: 100%;
}
.c8 {
display: -webkit-box;
display: -webkit-flex;
@ -652,21 +667,6 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
width: 6px;
}
.c12:focus-visible {
outline: none;
}
.c23 {
display: grid;
grid-template-columns: repeat(12,1fr);
gap: 16px;
}
.c24 {
grid-column: span 6;
max-width: 100%;
}
.c11 {
margin: 0 auto;
width: 552px;
@ -831,7 +831,6 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
<label
class="c5 c26"
for="textinput-2"
required=""
>
<div
class="c0 c13"
@ -850,6 +849,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
<input
aria-disabled="false"
aria-invalid="false"
aria-required="true"
class="c31"
id="textinput-2"
name="firstname"
@ -889,6 +889,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
<input
aria-disabled="false"
aria-invalid="false"
aria-required="false"
class="c31"
id="textinput-3"
name="lastname"
@ -910,7 +911,6 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
<label
class="c5 c26"
for="textinput-4"
required=""
>
<div
class="c0 c13"
@ -929,6 +929,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
<input
aria-disabled="false"
aria-invalid="false"
aria-required="true"
class="c31"
id="textinput-4"
name="email"
@ -948,7 +949,6 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
<label
class="c5 c26"
for="textinput-5"
required=""
>
<div
class="c0 c13"
@ -968,6 +968,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
aria-describedby="textinput-5-hint"
aria-disabled="false"
aria-invalid="false"
aria-required="true"
class="c32 c33"
id="textinput-5"
name="password"
@ -1015,12 +1016,11 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
<label
class="c5 c26"
for="textinput-6"
required=""
>
<div
class="c0 c13"
>
Confirmation Password
Confirm Password
<span
class="c5 c27 c28"
>
@ -1034,6 +1034,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
<input
aria-disabled="false"
aria-invalid="false"
aria-required="true"
class="c32 c33"
id="textinput-6"
name="confirmPassword"

2
packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/index.js
View File

@ -154,7 +154,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
required
label={formatMessage({
id: 'Auth.form.confirmPassword.label',
defaultMessage: 'Confirmation Password',
defaultMessage: 'Confirm Password',
})}
type={confirmPasswordShown ? 'text' : 'password'}
/>

38
packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/tests/index.test.js
View File

@ -495,22 +495,6 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
align-items: center;
}
.c8 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c8 svg {
height: 4px;
width: 6px;
}
.c35 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
@ -568,6 +552,22 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
outline: none;
}
.c8 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c8 svg {
height: 4px;
width: 6px;
}
.c12 {
margin: 0 auto;
width: 552px;
@ -694,7 +694,6 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
<label
class="c5 c21"
for="textinput-2"
required=""
>
<div
class="c0 c13"
@ -714,6 +713,7 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
aria-describedby="textinput-2-hint"
aria-disabled="false"
aria-invalid="false"
aria-required="true"
class="c26 c27"
id="textinput-2"
name="password"
@ -761,12 +761,11 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
<label
class="c5 c21"
for="textinput-3"
required=""
>
<div
class="c0 c13"
>
Confirmation Password
Confirm Password
<span
class="c5 c22 c23"
>
@ -780,6 +779,7 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
<input
aria-disabled="false"
aria-invalid="false"
aria-required="true"
class="c26 c27"
id="textinput-3"
name="confirmPassword"

63
packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/index.test.js.snap
View File

@ -585,6 +585,25 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
border: none;
}
.c38 {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
background: transparent;
border: none;
}
.c38:focus {
outline: none;
}
.c38[aria-disabled='true'] {
cursor: not-allowed;
}
.c25 {
border: none;
border-radius: 4px;
@ -646,37 +665,6 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
box-shadow: #4945ff 0px 0px 0px 2px;
}
.c58 path {
fill: #666687;
}
.c60 path {
fill: #f29d41;
}
.c75 path {
fill: #328048;
}
.c38 {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
background: transparent;
border: none;
}
.c38:focus {
outline: none;
}
.c38[aria-disabled='true'] {
cursor: not-allowed;
}
.c37 {
position: relative;
border: 1px solid #dcdce4;
@ -763,6 +751,18 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
box-shadow: #4945ff 0px 0px 0px 2px;
}
.c58 path {
fill: #666687;
}
.c60 path {
fill: #f29d41;
}
.c75 path {
fill: #328048;
}
.c10 {
cursor: pointer;
}
@ -1051,6 +1051,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
<input
aria-disabled="false"
aria-invalid="false"
aria-required="false"
class="c25"
id="field-1"
name="searchbar"

63
packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/plugins.test.js.snap
View File

@ -585,6 +585,25 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
border: none;
}
.c38 {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
background: transparent;
border: none;
}
.c38:focus {
outline: none;
}
.c38[aria-disabled='true'] {
cursor: not-allowed;
}
.c25 {
border: none;
border-radius: 4px;
@ -646,37 +665,6 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
box-shadow: #4945ff 0px 0px 0px 2px;
}
.c58 path {
fill: #666687;
}
.c60 path {
fill: #f29d41;
}
.c75 path {
fill: #328048;
}
.c38 {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
background: transparent;
border: none;
}
.c38:focus {
outline: none;
}
.c38[aria-disabled='true'] {
cursor: not-allowed;
}
.c37 {
position: relative;
border: 1px solid #dcdce4;
@ -763,6 +751,18 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
box-shadow: #4945ff 0px 0px 0px 2px;
}
.c58 path {
fill: #666687;
}
.c60 path {
fill: #f29d41;
}
.c75 path {
fill: #328048;
}
.c10 {
cursor: pointer;
}
@ -1051,6 +1051,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
<input
aria-disabled="false"
aria-invalid="false"
aria-required="false"
class="c25"
id="field-1"
name="searchbar"

63
packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/providers.test.js.snap
View File

@ -580,6 +580,25 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
border: none;
}
.c38 {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
background: transparent;
border: none;
}
.c38:focus {
outline: none;
}
.c38[aria-disabled='true'] {
cursor: not-allowed;
}
.c25 {
border: none;
border-radius: 4px;
@ -641,37 +660,6 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
box-shadow: #4945ff 0px 0px 0px 2px;
}
.c58 path {
fill: #666687;
}
.c71 path {
fill: #f29d41;
}
.c77 path {
fill: #328048;
}
.c38 {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
background: transparent;
border: none;
}
.c38:focus {
outline: none;
}
.c38[aria-disabled='true'] {
cursor: not-allowed;
}
.c37 {
position: relative;
border: 1px solid #dcdce4;
@ -758,6 +746,18 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
box-shadow: #4945ff 0px 0px 0px 2px;
}
.c58 path {
fill: #666687;
}
.c71 path {
fill: #f29d41;
}
.c77 path {
fill: #328048;
}
.c10 {
cursor: pointer;
}
@ -1046,6 +1046,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
<input
aria-disabled="false"
aria-invalid="false"
aria-required="false"
class="c25"
id="field-1"
name="searchbar"

410
packages/core/admin/admin/src/pages/ProfilePage/tests/__snapshots__/index.test.js.snap
View File

@ -1,6 +1,139 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
.c23 {
font-size: 0.75rem;
line-height: 1.33;
font-weight: 600;
color: #32324d;
}
.c25 {
font-size: 0.875rem;
line-height: 1.43;
color: #d02b20;
}
.c21 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.c24 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.c27 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
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: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.c22 > * {
margin-top: 0;
margin-bottom: 0;
}
.c22 > * + * {
margin-top: 4px;
}
.c26 {
line-height: 0;
}
.c29 {
border: none;
border-radius: 4px;
padding-bottom: 0.65625rem;
padding-left: 16px;
padding-right: 16px;
padding-top: 0.65625rem;
color: #32324d;
font-weight: 400;
font-size: 0.875rem;
display: block;
width: 100%;
background: inherit;
}
.c29::-webkit-input-placeholder {
color: #8e8ea9;
opacity: 1;
}
.c29::-moz-placeholder {
color: #8e8ea9;
opacity: 1;
}
.c29:-ms-input-placeholder {
color: #8e8ea9;
opacity: 1;
}
.c29::placeholder {
color: #8e8ea9;
opacity: 1;
}
.c29[aria-disabled='true'] {
color: inherit;
}
.c29:focus {
outline: none;
box-shadow: none;
}
.c28 {
border: 1px solid #dcdce4;
border-radius: 4px;
background: #ffffff;
outline: none;
box-shadow: 0;
-webkit-transition-property: border-color,box-shadow,fill;
transition-property: border-color,box-shadow,fill;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
}
.c28:focus-within {
border: 1px solid #4945ff;
box-shadow: #4945ff 0px 0px 0px 2px;
}
.c2 {
background: #f6f6f9;
padding-top: 40px;
@ -32,17 +165,17 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
}
.c29 {
.c35 {
padding-right: 12px;
padding-left: 8px;
}
.c37 {
.c43 {
padding-right: 16px;
padding-left: 16px;
}
.c40 {
.c46 {
padding-left: 12px;
}
@ -114,26 +247,20 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
color: #32324d;
}
.c22 {
.c31 {
font-size: 0.75rem;
line-height: 1.33;
font-weight: 600;
color: #32324d;
}
.c23 {
font-size: 0.875rem;
line-height: 1.43;
color: #d02b20;
}
.c32 {
.c38 {
font-size: 0.875rem;
line-height: 1.43;
color: #32324d;
}
.c38 {
.c44 {
font-size: 0.875rem;
line-height: 1.43;
display: block;
@ -143,7 +270,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
color: #32324d;
}
.c42 {
.c48 {
font-size: 0.75rem;
line-height: 1.33;
color: #666687;
@ -167,12 +294,12 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
margin-top: 16px;
}
.c21 > * {
.c30 > * {
margin-top: 0;
margin-bottom: 0;
}
.c21 > * + * {
.c30 > * + * {
margin-top: 4px;
}
@ -306,55 +433,26 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
fill: #ffffff;
}
.c24 {
line-height: 0;
}
.c26 {
border: none;
border-radius: 4px;
padding-bottom: 0.65625rem;
padding-left: 16px;
padding-right: 16px;
padding-top: 0.65625rem;
color: #32324d;
font-weight: 400;
font-size: 0.875rem;
display: block;
.c41 {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
background: inherit;
background: transparent;
border: none;
}
.c26::-webkit-input-placeholder {
color: #8e8ea9;
opacity: 1;
}
.c26::-moz-placeholder {
color: #8e8ea9;
opacity: 1;
}
.c26:-ms-input-placeholder {
color: #8e8ea9;
opacity: 1;
}
.c26::placeholder {
color: #8e8ea9;
opacity: 1;
}
.c26[aria-disabled='true'] {
color: inherit;
}
.c26:focus {
.c41:focus {
outline: none;
box-shadow: none;
}
.c27 {
.c41[aria-disabled='true'] {
cursor: not-allowed;
}
.c33 {
border: none;
border-radius: 4px;
padding-bottom: 0.65625rem;
@ -369,36 +467,36 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
background: inherit;
}
.c27::-webkit-input-placeholder {
.c33::-webkit-input-placeholder {
color: #8e8ea9;
opacity: 1;
}
.c27::-moz-placeholder {
.c33::-moz-placeholder {
color: #8e8ea9;
opacity: 1;
}
.c27:-ms-input-placeholder {
.c33:-ms-input-placeholder {
color: #8e8ea9;
opacity: 1;
}
.c27::placeholder {
.c33::placeholder {
color: #8e8ea9;
opacity: 1;
}
.c27[aria-disabled='true'] {
.c33[aria-disabled='true'] {
color: inherit;
}
.c27:focus {
.c33:focus {
outline: none;
box-shadow: none;
}
.c25 {
.c32 {
border: 1px solid #dcdce4;
border-radius: 4px;
background: #ffffff;
@ -410,12 +508,12 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
transition-duration: 0.2s;
}
.c25:focus-within {
.c32:focus-within {
border: 1px solid #4945ff;
box-shadow: #4945ff 0px 0px 0px 2px;
}
.c30 {
.c36 {
border: none;
background: transparent;
font-size: 1.6rem;
@ -431,26 +529,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
align-items: center;
}
.c35 {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
background: transparent;
border: none;
}
.c35:focus {
outline: none;
}
.c35[aria-disabled='true'] {
cursor: not-allowed;
}
.c34 {
.c40 {
position: relative;
border: 1px solid #dcdce4;
padding-right: 12px;
@ -466,28 +545,28 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
transition-duration: 0.2s;
}
.c34:focus-within {
.c40:focus-within {
border: 1px solid #4945ff;
box-shadow: #4945ff 0px 0px 0px 2px;
}
.c39 {
.c45 {
background: transparent;
border: none;
position: relative;
z-index: 1;
}
.c39 svg {
.c45 svg {
height: 0.6875rem;
width: 0.6875rem;
}
.c39 svg path {
.c45 svg path {
fill: #666687;
}
.c41 {
.c47 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -496,11 +575,11 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
border: none;
}
.c41 svg {
.c47 svg {
width: 0.375rem;
}
.c36 {
.c42 {
width: 100%;
}
@ -519,20 +598,20 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
max-width: 100%;
}
.c33 {
.c39 {
color: #4945ff;
}
.c28::-ms-reveal {
.c34::-ms-reveal {
display: none;
}
.c31 svg {
.c37 svg {
height: 1rem;
width: 1rem;
}
.c31 svg path {
.c37 svg path {
fill: #666687;
}
@ -643,32 +722,32 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
<div>
<div>
<div
class="c1 c14 c21"
class="c21 c22"
spacing="1"
>
<label
class="c5 c22"
class="c23"
for="firstname"
required=""
>
<div
class="c1 c4"
class="c24"
>
First name
<span
class="c5 c23 c24"
class="c25 c26"
>
*
</span>
</div>
</label>
<div
class="c1 c3 c25"
class="c27 c28"
>
<input
aria-disabled="false"
aria-invalid="false"
class="c26"
aria-required="true"
class="c29"
id="firstname"
name="firstname"
placeholder=""
@ -690,26 +769,27 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
<div>
<div>
<div
class="c1 c14 c21"
class="c21 c22"
spacing="1"
>
<label
class="c5 c22"
class="c23"
for="lastname"
>
<div
class="c1 c4"
class="c24"
>
Last name
</div>
</label>
<div
class="c1 c3 c25"
class="c27 c28"
>
<input
aria-disabled="false"
aria-invalid="false"
class="c26"
aria-required="false"
class="c29"
id="lastname"
name="lastname"
placeholder=""
@ -731,32 +811,32 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
<div>
<div>
<div
class="c1 c14 c21"
class="c21 c22"
spacing="1"
>
<label
class="c5 c22"
class="c23"
for="email"
required=""
>
<div
class="c1 c4"
class="c24"
>
Email
<span
class="c5 c23 c24"
class="c25 c26"
>
*
</span>
</div>
</label>
<div
class="c1 c3 c25"
class="c27 c28"
>
<input
aria-disabled="false"
aria-invalid="false"
class="c26"
aria-required="true"
class="c29"
id="email"
name="email"
placeholder=""
@ -778,26 +858,27 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
<div>
<div>
<div
class="c1 c14 c21"
class="c21 c22"
spacing="1"
>
<label
class="c5 c22"
class="c23"
for="username"
>
<div
class="c1 c4"
class="c24"
>
Username
</div>
</label>
<div
class="c1 c3 c25"
class="c27 c28"
>
<input
aria-disabled="false"
aria-invalid="false"
class="c26"
aria-required="false"
class="c29"
id="username"
name="username"
placeholder=""
@ -837,11 +918,11 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
<div>
<div>
<div
class="c1 c14 c21"
class="c1 c14 c30"
spacing="1"
>
<label
class="c5 c22"
class="c5 c31"
for="textinput-1"
>
<div
@ -851,23 +932,24 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
</div>
</label>
<div
class="c1 c3 c25"
class="c1 c3 c32"
>
<input
aria-disabled="false"
aria-invalid="false"
class="c27 c28"
aria-required="false"
class="c33 c34"
id="textinput-1"
name="currentPassword"
type="password"
value=""
/>
<div
class="c1 c29"
class="c1 c35"
>
<button
aria-label="Hide password"
class="c30 c31"
class="c36 c37"
type="button"
>
<svg
@ -903,11 +985,11 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
<div>
<div>
<div
class="c1 c14 c21"
class="c1 c14 c30"
spacing="1"
>
<label
class="c5 c22"
class="c5 c31"
for="textinput-2"
>
<div
@ -917,24 +999,25 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
</div>
</label>
<div
class="c1 c3 c25"
class="c1 c3 c32"
>
<input
aria-disabled="false"
aria-invalid="false"
aria-required="false"
autocomplete="new-password"
class="c27 c28"
class="c33 c34"
id="textinput-2"
name="password"
type="password"
value=""
/>
<div
class="c1 c29"
class="c1 c35"
>
<button
aria-label="Hide password"
class="c30 c31"
class="c36 c37"
type="button"
>
<svg
@ -966,11 +1049,11 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
<div>
<div>
<div
class="c1 c14 c21"
class="c1 c14 c30"
spacing="1"
>
<label
class="c5 c22"
class="c5 c31"
for="textinput-3"
>
<div
@ -980,24 +1063,25 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
</div>
</label>
<div
class="c1 c3 c25"
class="c1 c3 c32"
>
<input
aria-disabled="false"
aria-invalid="false"
aria-required="false"
autocomplete="new-password"
class="c27 c28"
class="c33 c34"
id="textinput-3"
name="confirmPassword"
type="password"
value=""
/>
<div
class="c1 c29"
class="c1 c35"
>
<button
aria-label="Hide password"
class="c30 c31"
class="c36 c37"
type="button"
>
<svg
@ -1031,7 +1115,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
spacing="4"
>
<div
class="c1 c14 c21"
class="c1 c14 c30"
spacing="1"
>
<h2
@ -1040,11 +1124,11 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
Experience
</h2>
<span
class="c5 c32"
class="c5 c38"
>
Preference changes will apply only to you. More information is available
<a
class="c33"
class="c39"
href="https://docs.strapi.io/developer-docs/latest/development/admin-customization.html#locales"
rel="noopener noreferrer"
target="_blank"
@ -1065,13 +1149,12 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
>
<div>
<div
class="c1 c14 c21"
class="c1 c14 c30"
spacing="1"
>
<span
class="c5 c22"
class="c5 c31"
for="select-4"
id="select-4-label"
>
<div
class="c1 c4"
@ -1080,7 +1163,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
</div>
</span>
<div
class="c1 c4 c34"
class="c1 c4 c40"
>
<button
aria-describedby="select-4-hint"
@ -1088,21 +1171,21 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
aria-expanded="false"
aria-haspopup="listbox"
aria-labelledby="select-4-label select-4-content"
class="c35"
class="c41"
id="select-4"
type="button"
/>
<div
class="c1 c3 c36"
class="c1 c3 c42"
>
<div
class="c1 c4"
>
<div
class="c1 c37"
class="c1 c43"
>
<span
class="c5 c38"
class="c5 c44"
id="select-4-content"
>
Select
@ -1115,7 +1198,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
<button
aria-disabled="false"
aria-label="Clear the interface language selected"
class="c1 c39"
class="c1 c45"
title="Clear the interface language selected"
type="button"
>
@ -1134,7 +1217,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
</button>
<button
aria-hidden="true"
class="c1 c40 c39 c41"
class="c1 c46 c45 c47"
tabindex="-1"
title="Carret Down Button"
type="button"
@ -1158,7 +1241,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
</div>
</div>
<p
class="c5 c42"
class="c5 c48"
id="select-4-hint"
>
This will only display your own interface in the chosen language.
@ -1175,13 +1258,12 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
>
<div>
<div
class="c1 c14 c21"
class="c1 c14 c30"
spacing="1"
>
<span
class="c5 c22"
class="c5 c31"
for="select-5"
id="select-5-label"
>
<div
class="c1 c4"
@ -1190,7 +1272,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
</div>
</span>
<div
class="c1 c4 c34"
class="c1 c4 c40"
>
<button
aria-describedby="select-5-hint"
@ -1198,21 +1280,21 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
aria-expanded="false"
aria-haspopup="listbox"
aria-labelledby="select-5-label select-5-content"
class="c35"
class="c41"
id="select-5"
type="button"
/>
<div
class="c1 c3 c36"
class="c1 c3 c42"
>
<div
class="c1 c4"
>
<div
class="c1 c37"
class="c1 c43"
>
<span
class="c5 c38"
class="c5 c44"
id="select-5-content"
>
Light mode
@ -1224,7 +1306,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
>
<button
aria-hidden="true"
class="c1 c40 c39 c41"
class="c1 c46 c45 c47"
tabindex="-1"
title="Carret Down Button"
type="button"
@ -1248,7 +1330,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
</div>
</div>
<p
class="c5 c42"
class="c5 c48"
id="select-5-hint"
>
Displays your interface in the chosen mode.

2
packages/core/admin/admin/src/pages/SettingsPage/components/SettingsNav/tests/index.test.js
View File

@ -417,7 +417,7 @@ describe('SettingsPage || components || SettingsNav', () => {
</div>
</div>
<div
class="c16 sc-dcgwPl c25"
class="c16 sc-ehIJor c25"
>
<svg
class="c26"

662
packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/tests/__snapshots__/index.test.js.snap
View File

@ -461,6 +461,25 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
fill: #ffffff;
}
.c36 {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
background: transparent;
border: none;
}
.c36:focus {
outline: none;
}
.c36[aria-disabled='true'] {
cursor: not-allowed;
}
.c29 {
line-height: 0;
}
@ -526,29 +545,6 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
box-shadow: #4945ff 0px 0px 0px 2px;
}
.c65 path {
fill: #666687;
}
.c36 {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
background: transparent;
border: none;
}
.c36:focus {
outline: none;
}
.c36[aria-disabled='true'] {
cursor: not-allowed;
}
.c35 {
position: relative;
border: 1px solid #dcdce4;
@ -603,6 +599,101 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
width: 100%;
}
.c65 path {
fill: #666687;
}
.c4 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-text-decoration: none;
text-decoration: none;
position: relative;
outline: none;
}
.c4 svg path {
fill: #4945ff;
}
.c4 svg {
font-size: 0.625rem;
}
.c4:after {
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
border-radius: 8px;
content: '';
position: absolute;
top: -4px;
bottom: -4px;
left: -4px;
right: -4px;
border: 2px solid transparent;
}
.c4:focus-visible {
outline: none;
}
.c4:focus-visible:after {
border-radius: 8px;
content: '';
position: absolute;
top: -5px;
bottom: -5px;
left: -5px;
right: -5px;
border: 2px solid #4945ff;
}
.c6 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.c0:focus-visible {
outline: none;
}
.c24 {
display: grid;
grid-template-columns: repeat(12,1fr);
gap: 20px;
}
.c45 {
display: grid;
grid-template-columns: repeat(12,1fr);
gap: 0px;
}
.c25 {
grid-column: span 6;
max-width: 100%;
}
.c46 {
grid-column: span 7;
max-width: 100%;
}
.c68 {
grid-column: span 5;
max-width: 100%;
}
.c33 {
border: 1px solid #dcdce4;
border-radius: 4px;
@ -696,6 +787,46 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
opacity: 1;
}
.c52 {
border: 1px solid #f6f6f9;
}
.c52:hover:not([aria-disabled='true']) {
border: 1px solid #4945ff;
}
.c52:hover:not([aria-disabled='true']) .c7 {
color: #4945ff;
}
.c52:hover:not([aria-disabled='true']) > .c9 {
background: #f0f0ff;
}
.c52:hover:not([aria-disabled='true']) [data-strapi-dropdown='true'] {
background: #d9d8ff;
}
.c66 {
border: 1px solid #ffffff;
}
.c66:hover:not([aria-disabled='true']) {
border: 1px solid #4945ff;
}
.c66:hover:not([aria-disabled='true']) .c7 {
color: #4945ff;
}
.c66:hover:not([aria-disabled='true']) > .c9 {
background: #f0f0ff;
}
.c66:hover:not([aria-disabled='true']) [data-strapi-dropdown='true'] {
background: #d9d8ff;
}
.c58 {
background: transparent;
border: none;
@ -753,137 +884,6 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
border: 2px solid #4945ff;
}
.c4 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-text-decoration: none;
text-decoration: none;
position: relative;
outline: none;
}
.c4 svg path {
fill: #4945ff;
}
.c4 svg {
font-size: 0.625rem;
}
.c4:after {
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
border-radius: 8px;
content: '';
position: absolute;
top: -4px;
bottom: -4px;
left: -4px;
right: -4px;
border: 2px solid transparent;
}
.c4:focus-visible {
outline: none;
}
.c4:focus-visible:after {
border-radius: 8px;
content: '';
position: absolute;
top: -5px;
bottom: -5px;
left: -5px;
right: -5px;
border: 2px solid #4945ff;
}
.c6 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.c0:focus-visible {
outline: none;
}
.c24 {
display: grid;
grid-template-columns: repeat(12,1fr);
gap: 20px;
}
.c45 {
display: grid;
grid-template-columns: repeat(12,1fr);
gap: 0px;
}
.c25 {
grid-column: span 6;
max-width: 100%;
}
.c46 {
grid-column: span 7;
max-width: 100%;
}
.c68 {
grid-column: span 5;
max-width: 100%;
}
.c52 {
border: 1px solid #f6f6f9;
}
.c52:hover:not([aria-disabled='true']) {
border: 1px solid #4945ff;
}
.c52:hover:not([aria-disabled='true']) .c7 {
color: #4945ff;
}
.c52:hover:not([aria-disabled='true']) > .c9 {
background: #f0f0ff;
}
.c52:hover:not([aria-disabled='true']) [data-strapi-dropdown='true'] {
background: #d9d8ff;
}
.c66 {
border: 1px solid #ffffff;
}
.c66:hover:not([aria-disabled='true']) {
border: 1px solid #4945ff;
}
.c66:hover:not([aria-disabled='true']) .c7 {
color: #4945ff;
}
.c66:hover:not([aria-disabled='true']) > .c9 {
background: #f0f0ff;
}
.c66:hover:not([aria-disabled='true']) [data-strapi-dropdown='true'] {
background: #d9d8ff;
}
.c59 {
text-align: left;
}
@ -1081,7 +1081,6 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
<label
class="c7 c27"
for="textinput-1"
required=""
>
<div
class="c1 c9 c11"
@ -1100,6 +1099,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
<input
aria-disabled="false"
aria-invalid="false"
aria-required="true"
class="c31"
id="textinput-1"
name="name"
@ -1144,6 +1144,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
>
<textarea
aria-invalid="false"
aria-required="false"
class="c34"
id="textarea-2"
name="description"
@ -1168,8 +1169,6 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
<span
class="c7 c27"
for="select-3"
id="select-3-label"
required=""
>
<div
class="c1 c9 c11"
@ -1261,8 +1260,6 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
<span
class="c7 c27"
for="select-4"
id="select-4-label"
required=""
>
<div
class="c1 c9 c11"
@ -2140,6 +2137,25 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
fill: #ffffff;
}
.c43 {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
background: transparent;
border: none;
}
.c43:focus {
outline: none;
}
.c43[aria-disabled='true'] {
cursor: not-allowed;
}
.c36 {
line-height: 0;
}
@ -2205,29 +2221,6 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
box-shadow: #4945ff 0px 0px 0px 2px;
}
.c74 path {
fill: #666687;
}
.c43 {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
background: transparent;
border: none;
}
.c43:focus {
outline: none;
}
.c43[aria-disabled='true'] {
cursor: not-allowed;
}
.c42 {
position: relative;
border: 1px solid #dcdce4;
@ -2319,156 +2312,10 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
width: 100%;
}
.c40 {
border: 1px solid #dcdce4;
border-radius: 4px;
padding-left: 16px;
padding-right: 16px;
padding-top: 12px;
padding-bottom: 12px;
background: #ffffff;
outline: none;
box-shadow: 0;
-webkit-transition-property: border-color,box-shadow,fill;
transition-property: border-color,box-shadow,fill;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
}
.c40:focus-within {
border: 1px solid #4945ff;
box-shadow: #4945ff 0px 0px 0px 2px;
}
.c41 {
display: block;
width: 100%;
font-weight: 400;
font-size: 0.875rem;
border: none;
color: #32324d;
resize: none;
background: inherit;
}
.c41::-webkit-input-placeholder {
color: #8e8ea9;
opacity: 1;
}
.c41::-moz-placeholder {
color: #8e8ea9;
opacity: 1;
}
.c41:-ms-input-placeholder {
color: #8e8ea9;
opacity: 1;
}
.c41::placeholder {
color: #8e8ea9;
opacity: 1;
}
.c41:focus-within {
outline: none;
}
.c39 textarea {
height: 5rem;
line-height: 1.25rem;
}
.c39 textarea::-webkit-input-placeholder {
font-weight: 400;
font-size: 0.875rem;
line-height: 1.43;
color: #8e8ea9;
opacity: 1;
}
.c39 textarea::-moz-placeholder {
font-weight: 400;
font-size: 0.875rem;
line-height: 1.43;
color: #8e8ea9;
opacity: 1;
}
.c39 textarea:-ms-input-placeholder {
font-weight: 400;
font-size: 0.875rem;
line-height: 1.43;
color: #8e8ea9;
opacity: 1;
}
.c39 textarea::placeholder {
font-weight: 400;
font-size: 0.875rem;
line-height: 1.43;
color: #8e8ea9;
opacity: 1;
}
.c67 {
background: transparent;
border: none;
position: relative;
outline: none;
}
.c67[aria-disabled='true'] {
pointer-events: none;
}
.c67[aria-disabled='true'] svg path {
.c74 path {
fill: #666687;
}
.c67 svg {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-size: 0.625rem;
}
.c67 svg path {
fill: #4945ff;
}
.c67:after {
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
border-radius: 8px;
content: '';
position: absolute;
top: -4px;
bottom: -4px;
left: -4px;
right: -4px;
border: 2px solid transparent;
}
.c67:focus-visible {
outline: none;
}
.c67:focus-visible:after {
border-radius: 8px;
content: '';
position: absolute;
top: -5px;
bottom: -5px;
left: -5px;
right: -5px;
border: 2px solid #4945ff;
}
.c4 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
@ -2573,6 +2420,99 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
max-width: 100%;
}
.c40 {
border: 1px solid #dcdce4;
border-radius: 4px;
padding-left: 16px;
padding-right: 16px;
padding-top: 12px;
padding-bottom: 12px;
background: #ffffff;
outline: none;
box-shadow: 0;
-webkit-transition-property: border-color,box-shadow,fill;
transition-property: border-color,box-shadow,fill;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
}
.c40:focus-within {
border: 1px solid #4945ff;
box-shadow: #4945ff 0px 0px 0px 2px;
}
.c41 {
display: block;
width: 100%;
font-weight: 400;
font-size: 0.875rem;
border: none;
color: #32324d;
resize: none;
background: inherit;
}
.c41::-webkit-input-placeholder {
color: #8e8ea9;
opacity: 1;
}
.c41::-moz-placeholder {
color: #8e8ea9;
opacity: 1;
}
.c41:-ms-input-placeholder {
color: #8e8ea9;
opacity: 1;
}
.c41::placeholder {
color: #8e8ea9;
opacity: 1;
}
.c41:focus-within {
outline: none;
}
.c39 textarea {
height: 5rem;
line-height: 1.25rem;
}
.c39 textarea::-webkit-input-placeholder {
font-weight: 400;
font-size: 0.875rem;
line-height: 1.43;
color: #8e8ea9;
opacity: 1;
}
.c39 textarea::-moz-placeholder {
font-weight: 400;
font-size: 0.875rem;
line-height: 1.43;
color: #8e8ea9;
opacity: 1;
}
.c39 textarea:-ms-input-placeholder {
font-weight: 400;
font-size: 0.875rem;
line-height: 1.43;
color: #8e8ea9;
opacity: 1;
}
.c39 textarea::placeholder {
font-weight: 400;
font-size: 0.875rem;
line-height: 1.43;
color: #8e8ea9;
opacity: 1;
}
.c61 {
border: 1px solid #f6f6f9;
}
@ -2613,6 +2553,63 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
background: #d9d8ff;
}
.c67 {
background: transparent;
border: none;
position: relative;
outline: none;
}
.c67[aria-disabled='true'] {
pointer-events: none;
}
.c67[aria-disabled='true'] svg path {
fill: #666687;
}
.c67 svg {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-size: 0.625rem;
}
.c67 svg path {
fill: #4945ff;
}
.c67:after {
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
border-radius: 8px;
content: '';
position: absolute;
top: -4px;
bottom: -4px;
left: -4px;
right: -4px;
border: 2px solid transparent;
}
.c67:focus-visible {
outline: none;
}
.c67:focus-visible:after {
border-radius: 8px;
content: '';
position: absolute;
top: -5px;
bottom: -5px;
left: -5px;
right: -5px;
border: 2px solid #4945ff;
}
.c68 {
text-align: left;
}
@ -2880,7 +2877,6 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
<label
class="c7 c34"
for="textinput-28"
required=""
>
<div
class="c1 c9 c11"
@ -2899,6 +2895,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
<input
aria-disabled="false"
aria-invalid="false"
aria-required="true"
class="c38"
id="textinput-28"
name="name"
@ -2943,6 +2940,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
>
<textarea
aria-invalid="false"
aria-required="false"
class="c41"
id="textarea-29"
name="description"
@ -2969,8 +2967,6 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
<span
class="c7 c34"
for="select-30"
id="select-30-label"
required=""
>
<div
class="c1 c9 c11"
@ -3066,8 +3062,6 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
<span
class="c7 c34"
for="select-31"
id="select-31-label"
required=""
>
<div
class="c1 c9 c11"

1
packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/tests/__snapshots__/index.test.js.snap
View File

@ -1963,6 +1963,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
<input
aria-disabled="false"
aria-invalid="false"
aria-required="false"
class="c45"
id="textinput-117"
name="logo-url"

160
packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/__snapshots__/index.test.js.snap
View File

@ -471,6 +471,85 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
box-shadow: #4945ff 0px 0px 0px 2px;
}
.c4 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-text-decoration: none;
text-decoration: none;
position: relative;
outline: none;
}
.c4 svg path {
fill: #4945ff;
}
.c4 svg {
font-size: 0.625rem;
}
.c4:after {
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
border-radius: 8px;
content: '';
position: absolute;
top: -4px;
bottom: -4px;
left: -4px;
right: -4px;
border: 2px solid transparent;
}
.c4:focus-visible {
outline: none;
}
.c4:focus-visible:after {
border-radius: 8px;
content: '';
position: absolute;
top: -5px;
bottom: -5px;
left: -5px;
right: -5px;
border: 2px solid #4945ff;
}
.c6 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.c36 {
height: 100vh;
}
.c26 {
display: grid;
grid-template-columns: repeat(12,1fr);
gap: 16px;
}
.c27 {
grid-column: span 6;
max-width: 100%;
}
.c0:focus-visible {
outline: none;
}
.c33 {
border: 1px solid #dcdce4;
border-radius: 4px;
@ -564,85 +643,6 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
opacity: 1;
}
.c4 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-text-decoration: none;
text-decoration: none;
position: relative;
outline: none;
}
.c4 svg path {
fill: #4945ff;
}
.c4 svg {
font-size: 0.625rem;
}
.c4:after {
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
border-radius: 8px;
content: '';
position: absolute;
top: -4px;
bottom: -4px;
left: -4px;
right: -4px;
border: 2px solid transparent;
}
.c4:focus-visible {
outline: none;
}
.c4:focus-visible:after {
border-radius: 8px;
content: '';
position: absolute;
top: -5px;
bottom: -5px;
left: -5px;
right: -5px;
border: 2px solid #4945ff;
}
.c6 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.c36 {
height: 100vh;
}
.c26 {
display: grid;
grid-template-columns: repeat(12,1fr);
gap: 16px;
}
.c27 {
grid-column: span 6;
max-width: 100%;
}
.c0:focus-visible {
outline: none;
}
@media (max-width:68.75rem) {
.c27 {
grid-column: span;
@ -815,6 +815,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
<input
aria-disabled="false"
aria-invalid="false"
aria-required="false"
class="c31"
id="textinput-1"
name="name"
@ -859,6 +860,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
>
<textarea
aria-invalid="false"
aria-required="false"
class="c34"
id="textarea-2"
name="description"

8
packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/tests/index.test.js
View File

@ -751,10 +751,6 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
fill: #666687;
}
.c21 path {
fill: #32324d;
}
.c47 {
position: absolute;
left: 0;
@ -828,6 +824,10 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
width: 100%;
}
.c21 path {
fill: #32324d;
}
.c56 > * + * {
margin-left: 4px;
}

4
packages/core/admin/admin/src/pages/SettingsPage/tests/index.test.js
View File

@ -16,10 +16,6 @@ jest.mock('../../../hooks', () => ({
useThemeToggle: jest.fn(() => ({ currentTheme: 'light', themes: { light: lightTheme } })),
}));
jest.mock('@fortawesome/react-fontawesome', () => ({
FontAwesomeIcon: () => null,
}));
jest.mock('react-intl', () => ({
FormattedMessage: ({ id }) => id,
useIntl: () => ({ formatMessage: jest.fn(({ id }) => id) }),

41
packages/core/admin/admin/src/pages/UseCasePage/tests/index.test.js
View File

@ -472,22 +472,6 @@ describe('Admin | UseCasePage', () => {
fill: #ffffff;
}
.c8 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c8 svg {
height: 4px;
width: 6px;
}
.c25 {
position: absolute;
left: 0;
@ -561,6 +545,10 @@ describe('Admin | UseCasePage', () => {
width: 100%;
}
.c10:focus-visible {
outline: none;
}
.c37 {
background: transparent;
border: none;
@ -618,14 +606,26 @@ describe('Admin | UseCasePage', () => {
border: 2px solid #4945ff;
}
.c10:focus-visible {
outline: none;
}
.c15 {
height: 4.5rem;
}
.c8 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c8 svg {
height: 4px;
width: 6px;
}
.c12 {
margin: 0 auto;
width: 552px;
@ -732,7 +732,6 @@ describe('Admin | UseCasePage', () => {
<span
class="c5 c22"
for="usecase"
id="usecase-label"
>
<div
class="c0 c23"

3
packages/core/admin/admin/src/translations/en.json
View File

@ -11,7 +11,7 @@
"Auth.form.button.login.strapi": "Log in via Strapi",
"Auth.form.button.password-recovery": "Password Recovery",
"Auth.form.button.register": "Let's start",
"Auth.form.confirmPassword.label": "Confirmation Password",
"Auth.form.confirmPassword.label": "Confirm Password",
"Auth.form.currentPassword.label": "Current Password",
"Auth.form.email.label": "Email",
"Auth.form.email.placeholder": "e.g. kai@doe.com",
@ -460,6 +460,7 @@
"app.utils.select-filter": "Select filter",
"app.utils.unpublish": "Unpublish",
"clearLabel": "Clear",
"selectButtonTitle": "Select",
"coming.soon": "This content is currently under construction and will be back in a few weeks!",
"component.Input.error.validation.integer": "The value must be an integer",
"components.AutoReloadBlocker.description": "Run Strapi with one of the following commands:",

50
packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/__snapshots__/index.test.js.snap
View File

@ -421,6 +421,30 @@ exports[`Admin | ee | SettingsPage | SSO renders and matches the snapshot 1`] =
width: 100%;
}
.c1 {
display: grid;
grid-template-columns: 1fr;
}
.c3 {
overflow-x: hidden;
}
.c21 {
display: grid;
grid-template-columns: repeat(12,1fr);
gap: 16px;
}
.c22 {
grid-column: span 6;
max-width: 100%;
}
.c4:focus-visible {
outline: none;
}
.c26 {
position: relative;
display: inline-block;
@ -492,30 +516,6 @@ exports[`Admin | ee | SettingsPage | SSO renders and matches the snapshot 1`] =
max-width: 320px;
}
.c1 {
display: grid;
grid-template-columns: 1fr;
}
.c3 {
overflow-x: hidden;
}
.c21 {
display: grid;
grid-template-columns: repeat(12,1fr);
gap: 16px;
}
.c22 {
grid-column: span 6;
max-width: 100%;
}
.c4:focus-visible {
outline: none;
}
@media (max-width:68.75rem) {
.c22 {
grid-column: span 12;
@ -675,6 +675,7 @@ exports[`Admin | ee | SettingsPage | SSO renders and matches the snapshot 1`] =
<input
aria-disabled="false"
aria-label="autoRegister"
aria-required="false"
checked=""
class="c36"
data-testid="autoRegister"
@ -708,7 +709,6 @@ exports[`Admin | ee | SettingsPage | SSO renders and matches the snapshot 1`] =
<span
class="c8 c25"
for="select-2"
id="select-2-label"
>
<div
class="c0 c7"

160
packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/tests/__snapshots__/index.test.js.snap
View File

@ -463,6 +463,85 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
box-shadow: #4945ff 0px 0px 0px 2px;
}
.c4 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-text-decoration: none;
text-decoration: none;
position: relative;
outline: none;
}
.c4 svg path {
fill: #4945ff;
}
.c4 svg {
font-size: 0.625rem;
}
.c4:after {
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
border-radius: 8px;
content: '';
position: absolute;
top: -4px;
bottom: -4px;
left: -4px;
right: -4px;
border: 2px solid transparent;
}
.c4:focus-visible {
outline: none;
}
.c4:focus-visible:after {
border-radius: 8px;
content: '';
position: absolute;
top: -5px;
bottom: -5px;
left: -5px;
right: -5px;
border: 2px solid #4945ff;
}
.c6 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.c36 {
height: 100vh;
}
.c26 {
display: grid;
grid-template-columns: repeat(12,1fr);
gap: 16px;
}
.c27 {
grid-column: span 6;
max-width: 100%;
}
.c0:focus-visible {
outline: none;
}
.c33 {
border: 1px solid #dcdce4;
border-radius: 4px;
@ -556,85 +635,6 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
opacity: 1;
}
.c4 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-text-decoration: none;
text-decoration: none;
position: relative;
outline: none;
}
.c4 svg path {
fill: #4945ff;
}
.c4 svg {
font-size: 0.625rem;
}
.c4:after {
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
border-radius: 8px;
content: '';
position: absolute;
top: -4px;
bottom: -4px;
left: -4px;
right: -4px;
border: 2px solid transparent;
}
.c4:focus-visible {
outline: none;
}
.c4:focus-visible:after {
border-radius: 8px;
content: '';
position: absolute;
top: -5px;
bottom: -5px;
left: -5px;
right: -5px;
border: 2px solid #4945ff;
}
.c6 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.c36 {
height: 100vh;
}
.c26 {
display: grid;
grid-template-columns: repeat(12,1fr);
gap: 16px;
}
.c27 {
grid-column: span 6;
max-width: 100%;
}
.c0:focus-visible {
outline: none;
}
.c25 {
border: 1px solid #d9d8ff;
background: #f0f0ff;
@ -828,6 +828,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
<input
aria-disabled="false"
aria-invalid="false"
aria-required="false"
class="c31"
id="textinput-1"
name="name"
@ -872,6 +873,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
>
<textarea
aria-invalid="false"
aria-required="false"
class="c34"
id="textarea-2"
name="description"

14
packages/core/admin/package.json
View File

@ -45,21 +45,16 @@
"@babel/runtime": "7.18.9",
"@casl/ability": "^5.4.3",
"@fingerprintjs/fingerprintjs": "3.3.3",
"@fortawesome/fontawesome-free": "^5.15.3",
"@fortawesome/fontawesome-svg-core": "6.2.0",
"@fortawesome/free-brands-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.2.0",
"@pmmmwh/react-refresh-webpack-plugin": "0.5.7",
"@strapi/babel-plugin-switch-ee-ce": "4.5.4",
"@strapi/data-transfer": "4.5.4",
"@strapi/design-system": "1.4.0",
"@strapi/design-system": "1.4.1",
"@strapi/helper-plugin": "4.5.4",
"@strapi/icons": "1.4.0",
"@strapi/icons": "1.4.1",
"@strapi/permissions": "4.5.4",
"@strapi/typescript-utils": "4.5.4",
"@strapi/utils": "4.5.4",
"axios": "0.27.2",
"axios": "1.2.1",
"babel-loader": "8.2.5",
"babel-plugin-styled-components": "2.0.2",
"bcryptjs": "2.4.3",
@ -68,13 +63,12 @@
"codemirror": "^5.65.8",
"cross-env": "^7.0.3",
"css-loader": "6.7.2",
"date-fns": "2.29.2",
"date-fns": "2.29.3",
"dotenv": "8.5.1",
"esbuild-loader": "^2.20.0",
"execa": "^1.0.0",
"fast-deep-equal": "3.1.3",
"find-root": "1.1.0",
"font-awesome": "^4.7.0",
"fork-ts-checker-webpack-plugin": "7.2.1",
"formik": "^2.2.6",
"fs-extra": "10.0.0",

8
packages/core/admin/server/routes/roles.js
View File

@ -1,14 +1,6 @@
'use strict';
module.exports = [
{
method: 'POST',
path: '/users/batch-delete',
handler: 'user.deleteMany',
config: {
policies: [{ name: 'admin::hasPermissions', config: { actions: ['admin::users.delete'] } }],
},
},
{
method: 'GET',
path: '/roles/:id/permissions',

6
packages/core/admin/server/services/__tests__/role.test.js
View File

@ -398,6 +398,12 @@ describe('Role', () => {
properties: {},
subject: null,
},
{
action: 'plugin::upload.configure-view',
conditions: [],
properties: {},
subject: null,
},
{
action: 'plugin::upload.assets.create',
conditions: [],

1
packages/core/admin/server/services/role.js
View File

@ -282,6 +282,7 @@ const getDefaultPluginPermissions = ({ isAuthor = false } = {}) => {
// add plugin permissions for each role
return [
{ action: 'plugin::upload.read', conditions },
{ action: 'plugin::upload.configure-view' },
{ action: 'plugin::upload.assets.create' },
{ action: 'plugin::upload.assets.update', conditions },
{ action: 'plugin::upload.assets.download' },

18
packages/core/admin/server/tests/admin-permission.test.api.js
View File

@ -225,6 +225,12 @@ describe('Role CRUD End to End', () => {
"plugin": "upload",
"subCategory": "assets",
},
{
"action": "plugin::upload.configure-view",
"displayName": "Configure view",
"plugin": "upload",
"subCategory": "general",
},
{
"action": "plugin::upload.read",
"displayName": "Access the Media Library",
@ -728,6 +734,12 @@ describe('Role CRUD End to End', () => {
"plugin": "upload",
"subCategory": "assets",
},
{
"action": "plugin::upload.configure-view",
"displayName": "Configure view",
"plugin": "upload",
"subCategory": "general",
},
{
"action": "plugin::upload.read",
"displayName": "Access the Media Library",
@ -1238,6 +1250,12 @@ describe('Role CRUD End to End', () => {
"plugin": "upload",
"subCategory": "assets",
},
{
"action": "plugin::upload.configure-view",
"displayName": "Configure view",
"plugin": "upload",
"subCategory": "general",
},
{
"action": "plugin::upload.read",
"displayName": "Access the Media Library",

4
packages/core/admin/server/tests/admin-role.test.api.js
View File

@ -82,7 +82,7 @@ describe('Role CRUD End to End', () => {
expect(res.statusCode).toBe(200);
expect(Array.isArray(res.body.data)).toBe(true);
expect(res.body.data).toHaveLength(5);
expect(res.body.data).toHaveLength(6);
res.body.data
.filter((p) => !p.action.includes('plugin::upload'))
.forEach((permission) => {
@ -98,7 +98,7 @@ describe('Role CRUD End to End', () => {
expect(res.statusCode).toBe(200);
expect(Array.isArray(res.body.data)).toBe(true);
expect(res.body.data).toHaveLength(5);
expect(res.body.data).toHaveLength(6);
res.body.data
.filter((p) => !p.action.includes('plugin::upload'))
.forEach((permission) => {

2
packages/core/admin/webpack.alias.js
View File

@ -7,8 +7,6 @@ const aliasExactMatch = [
'@strapi/design-system',
'@strapi/helper-plugin',
'@strapi/icons',
'@fortawesome/fontawesome-svg-core',
'@fortawesome/free-solid-svg-icons',
'date-fns',
'formik',
'history',

43
packages/core/content-type-builder/admin/src/components/ComponentCard/ComponentIcon/ComponentIcon.js Normal file
View File

@ -0,0 +1,43 @@
import PropTypes from 'prop-types';
import React from 'react';
import styled from 'styled-components';
import { Flex } from '@strapi/design-system';
const Wrapper = styled(Flex)`
border-radius: 50%;
color: ${({ theme, isActive }) => (isActive ? theme.colors.primary600 : theme.colors.neutral600)};
height: ${({ theme }) => theme.spaces[8]};
width: ${({ theme }) => theme.spaces[8]};
svg {
height: ${({ theme }) => theme.spaces[5]};
width: ${({ theme }) => theme.spaces[5]};
}
`;
export function ComponentIcon({ isActive }) {
return (
<Wrapper
alignItems="center"
background={isActive ? 'primary200' : 'neutral200'}
justifyContent="center"
isActive={isActive}
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path
d="M216.3 2c4.8-2.6 10.5-2.6 15.3 0L422.3 106c5.1 2.8 8.3 8.2 8.3 14s-3.2 11.2-8.3 14L231.7 238c-4.8 2.6-10.5 2.6-15.3 0L25.7 134c-5.1-2.8-8.3-8.2-8.3-14s3.2-11.2 8.3-14L216.3 2zM23.7 170l176 96c5.1 2.8 8.3 8.2 8.3 14V496c0 5.6-3 10.9-7.8 13.8s-10.9 3-15.8 .3L8.3 414C3.2 411.2 0 405.9 0 400V184c0-5.6 3-10.9 7.8-13.8s10.9-3 15.8-.3zm400.7 0c5-2.7 11-2.6 15.8 .3s7.8 8.1 7.8 13.8V400c0 5.9-3.2 11.2-8.3 14l-176 96c-5 2.7-11 2.6-15.8-.3s-7.8-8.1-7.8-13.8V280c0-5.9 3.2-11.2 8.3-14l176-96z"
fill="currentColor"
/>
</svg>
</Wrapper>
);
}
ComponentIcon.defaultProps = {
isActive: false,
};
ComponentIcon.propTypes = {
isActive: PropTypes.bool,
};

1
packages/core/content-type-builder/admin/src/components/ComponentCard/ComponentIcon/index.js Normal file
View File

@ -0,0 +1 @@
export * from './ComponentIcon';

107
packages/core/content-type-builder/admin/src/components/ComponentCard/index.js
View File

@ -7,31 +7,16 @@
import React from 'react';
import get from 'lodash/get';
import PropTypes from 'prop-types';
import { Box } from '@strapi/design-system/Box';
import { Stack } from '@strapi/design-system/Stack';
import { Typography } from '@strapi/design-system/Typography';
import { Box, Flex, Typography } from '@strapi/design-system';
import { pxToRem } from '@strapi/helper-plugin';
import Cross from '@strapi/icons/Cross';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import styled from 'styled-components';
import { ComponentIcon } from './ComponentIcon';
import useDataManager from '../../hooks/useDataManager';
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
const StyledFontAwesomeIcon = styled(FontAwesomeIcon)`
width: ${pxToRem(32)} !important;
height: ${pxToRem(32)} !important;
padding: ${pxToRem(9)};
border-radius: ${pxToRem(64)};
background: ${({ theme }) => theme.colors.neutral150};
path {
fill: ${({ theme }) => theme.colors.neutral500};
}
`;
const CloseButton = styled.div`
const CloseButton = styled(Box)`
position: absolute;
display: none;
top: 5px;
@ -40,25 +25,24 @@ const CloseButton = styled.div`
svg {
width: ${pxToRem(10)};
height: ${pxToRem(10)};
path {
fill: ${({ theme }) => theme.colors.primary600};
}
}
`;
const ComponentBox = styled(Box)`
flex-shrink: 0;
const ComponentBox = styled(Flex)`
width: ${pxToRem(140)};
height: ${pxToRem(80)};
position: relative;
border: 1px solid ${({ theme }) => theme.colors.neutral200};
background: ${({ theme }) => theme.colors.neutral100};
border-radius: ${({ theme }) => theme.borderRadius};
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
&.active,
&:focus,
&:hover {
border: 1px solid ${({ theme }) => theme.colors.primary200};
background: ${({ theme }) => theme.colors.primary100};
@ -67,30 +51,23 @@ const ComponentBox = styled(Box)`
display: block;
}
${StyledFontAwesomeIcon} {
background: ${({ theme }) => theme.colors.primary200};
path {
fill: ${({ theme }) => theme.colors.primary600};
}
${Typography} {
color: ${({ theme }) => theme.colors.primary600};
}
${Typography} {
/* > ComponentIcon */
> div:first-child {
background: ${({ theme }) => theme.colors.primary200};
color: ${({ theme }) => theme.colors.primary600};
}
}
`;
const StackCentered = styled(Stack)`
align-items: center;
`;
function ComponentCard({ component, dzName, index, isActive, isInDevelopmentMode, onClick }) {
const { modifiedData, removeComponentFromDynamicZone } = useDataManager();
const {
schema: { icon, displayName },
} = get(modifiedData, ['components', component], {
schema: { icon: null },
});
schema: { displayName },
} = get(modifiedData, ['components', component], { schema: {} });
const onClose = (e) => {
e.stopPropagation();
@ -98,33 +75,33 @@ function ComponentCard({ component, dzName, index, isActive, isInDevelopmentMode
};
return (
<button type="button" onClick={onClick}>
<ComponentBox
className={isActive ? 'active' : ''}
borderRadius="borderRadius"
paddingLeft={4}
paddingRight={4}
>
<StackCentered spacing={1}>
<StyledFontAwesomeIcon icon={icon || 'dice-d6'} />
<Box maxWidth={`calc(${pxToRem(140)} - 32px)`}>
<Typography variant="pi" fontWeight="bold" ellipsis>
{displayName}
</Typography>
</Box>
</StackCentered>
{isInDevelopmentMode && (
<CloseButton
role="button"
tabIndex={0}
onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && onClose(e)}
onClick={onClose}
>
<Cross />
</CloseButton>
)}
</ComponentBox>
</button>
<ComponentBox
as="button"
alignItems="center"
direction="column"
className={isActive ? 'active' : ''}
borderRadius="borderRadius"
justifyContent="center"
paddingLeft={4}
paddingRight={4}
shrink={0}
type="button"
onClick={onClick}
>
<ComponentIcon isActive={isActive} />
<Box marginTop={1} maxWidth="100%">
<Typography variant="pi" fontWeight="bold" ellipsis>
{displayName}
</Typography>
</Box>
{isInDevelopmentMode && (
<CloseButton as="button" onClick={onClose} type="button">
<Cross />
</CloseButton>
)}
</ComponentBox>
);
}

31
packages/core/content-type-builder/admin/src/components/ComponentIconPicker/Cell.js
View File

@ -1,31 +0,0 @@
import styled from 'styled-components';
import { Flex } from '@strapi/design-system/Flex';
const Cell = styled(Flex)`
svg {
z-index: 2;
color: ${({ isSelected, theme }) =>
isSelected ? theme.colors.primary600 : theme.colors.neutral300};
}
${({ isSelected, theme }) => {
if (isSelected) {
return `
&::after {
content: '';
position: absolute;
top: 8px;
left: 8px;
border-radius: 50%;
width: 28px;
height: 28px;
background-color: ${theme.colors.primary200};
z-index: 1;
}
`;
}
return '';
}}
`;
export default Cell;

161
packages/core/content-type-builder/admin/src/components/ComponentIconPicker/index.js
View File

@ -1,161 +0,0 @@
import React, { useEffect, useState, useRef } from 'react';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import { FixedSizeGrid } from 'react-window';
import { Searchbar } from '@strapi/design-system/Searchbar';
import { IconButton } from '@strapi/design-system/IconButton';
import Search from '@strapi/icons/Search';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Box } from '@strapi/design-system/Box';
import { Flex } from '@strapi/design-system/Flex';
import { Stack } from '@strapi/design-system/Stack';
import { Typography } from '@strapi/design-system/Typography';
import { getIndexFromColAndRow } from './utils/getIndexFromColAndRow';
import useDataManager from '../../hooks/useDataManager';
import getTrad from '../../utils/getTrad';
import Cell from './Cell';
const CELL_WIDTH = 42;
const COLUMN_COUNT = 18;
const ComponentIconPicker = ({ error, intlLabel, name, onChange, value }) => {
const { allIcons } = useDataManager();
const { formatMessage } = useIntl();
const searchWrapperRef = useRef();
const [showSearch, setShowSearch] = useState(false);
const [search, setSearch] = useState('');
const [icons, setIcons] = useState(allIcons);
const toggleSearch = () => setShowSearch((prev) => !prev);
useEffect(() => {
if (showSearch) {
searchWrapperRef.current.querySelector('input').focus();
}
}, [showSearch]);
const handleChangeSearch = ({ target: { value } }) => {
setSearch(value);
setIcons(() => allIcons.filter((icon) => icon.includes(value)));
};
// eslint-disable-next-line react/prop-types
const IconRenderer = ({ columnIndex, rowIndex, style }) => {
const icon = icons[getIndexFromColAndRow(columnIndex, rowIndex, COLUMN_COUNT)];
return (
<div style={style} key={`col-${columnIndex}`}>
{icon && (
<Cell
style={{ width: '100%', height: '100%' }}
alignItems="center"
justifyContent="center"
onClick={() => {
onChange({ target: { name, value: icon } });
}}
isSelected={icon === value}
as="button"
type="button"
>
<FontAwesomeIcon icon={icon} />
</Cell>
)}
</div>
);
};
const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';
return (
<Box>
<Stack spacing={1}>
<Flex justifyContent="space-between">
<Typography
variant="pi"
fontWeight="bold"
textColor="neutral800"
htmlFor={name}
as="label"
>
{formatMessage(intlLabel)}
</Typography>
{showSearch ? (
<div ref={searchWrapperRef} style={{ width: 206 }}>
<Searchbar
name="searchbar"
onBlur={() => {
if (!search) {
toggleSearch();
}
}}
onClear={() => {
setSearch('');
setIcons(allIcons);
toggleSearch();
}}
value={search}
onChange={handleChangeSearch}
clearLabel="Clearing the icon search"
placeholder={formatMessage({
id: getTrad('ComponentIconPicker.search.placeholder'),
defaultMessage: 'Search for an icon',
})}
size="S"
>
{formatMessage({
id: getTrad('ComponentIconPicker.search.placeholder'),
defaultMessage: 'Search for an icon',
})}
</Searchbar>
</div>
) : (
<IconButton onClick={toggleSearch} aria-label="Edit" icon={<Search />} noBorder />
)}
</Flex>
<Stack spacing={1}>
<Box padding={1} background="neutral100" borderColor={error ? 'danger600' : ''} hasRadius>
<FixedSizeGrid
columnCount={COLUMN_COUNT}
columnWidth={CELL_WIDTH}
height={132}
rowHeight={CELL_WIDTH}
rowCount={Math.ceil(icons.length / COLUMN_COUNT)}
width={CELL_WIDTH * COLUMN_COUNT}
>
{IconRenderer}
</FixedSizeGrid>
</Box>
{error && (
<Typography
variant="pi"
id={`${name}-error`}
textColor="danger600"
data-strapi-field-error
>
{errorMessage}
</Typography>
)}
</Stack>
</Stack>
</Box>
);
};
ComponentIconPicker.defaultProps = {
error: null,
};
ComponentIconPicker.propTypes = {
error: PropTypes.string,
intlLabel: PropTypes.shape({
id: PropTypes.string.isRequired,
defaultMessage: PropTypes.string.isRequired,
values: PropTypes.object,
}).isRequired,
name: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
value: PropTypes.string.isRequired,
};
export default ComponentIconPicker;

3
packages/core/content-type-builder/admin/src/components/ComponentIconPicker/utils/getIndexFromColAndRow.js
View File

@ -1,3 +0,0 @@
export const getIndexFromColAndRow = (columnIndex, rowIndex, numCols) => {
return columnIndex + rowIndex * numCols;
};

21
packages/core/content-type-builder/admin/src/components/ComponentIconPicker/utils/tests/getIndexFromColAndRow.test.js
View File

@ -1,21 +0,0 @@
import { getIndexFromColAndRow } from '../getIndexFromColAndRow';
const FIXTURE = [
[[0, 0, 2], 0],
[[1, 0, 2], 1],
[[0, 1, 2], 2],
[[0, 2, 2], 4],
[[1, 4, 2], 9],
];
describe('getIndexFromColAndRow', () => {
FIXTURE.forEach(([input, expected]) => {
test(`returns ${expected} for ${JSON.stringify(input)}`, () => {
expect(getIndexFromColAndRow(...input)).toBe(expected);
});
});
});

114
packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/tests/__snapshots__/index.test.js.snap
View File

@ -354,63 +354,6 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
fill: #666687;
}
.c36 {
background: transparent;
border: none;
position: relative;
outline: none;
}
.c36[aria-disabled='true'] {
pointer-events: none;
}
.c36[aria-disabled='true'] svg path {
fill: #666687;
}
.c36 svg {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-size: 0.625rem;
}
.c36 svg path {
fill: #4945ff;
}
.c36:after {
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
border-radius: 8px;
content: '';
position: absolute;
top: -4px;
bottom: -4px;
left: -4px;
right: -4px;
border: 2px solid transparent;
}
.c36:focus-visible {
outline: none;
}
.c36:focus-visible:after {
border-radius: 8px;
content: '';
position: absolute;
top: -5px;
bottom: -5px;
left: -5px;
right: -5px;
border: 2px solid #4945ff;
}
.c1 {
width: 14.5rem;
background: #f6f6f9;
@ -547,6 +490,63 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
fill: #8e8ea9;
}
.c36 {
background: transparent;
border: none;
position: relative;
outline: none;
}
.c36[aria-disabled='true'] {
pointer-events: none;
}
.c36[aria-disabled='true'] svg path {
fill: #666687;
}
.c36 svg {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-size: 0.625rem;
}
.c36 svg path {
fill: #4945ff;
}
.c36:after {
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
border-radius: 8px;
content: '';
position: absolute;
top: -4px;
bottom: -4px;
left: -4px;
right: -4px;
border: 2px solid transparent;
}
.c36:focus-visible {
outline: none;
}
.c36:focus-visible:after {
border-radius: 8px;
content: '';
position: absolute;
top: -5px;
bottom: -5px;
left: -5px;
right: -5px;
border: 2px solid #4945ff;
}
<div>
<div
class="c0"

3
packages/core/content-type-builder/admin/src/components/DataManagerProvider/index.js
View File

@ -54,7 +54,6 @@ import makeSelectDataManagerProvider from './selectors';
import formatSchemas from './utils/formatSchemas';
const DataManagerProvider = ({
allIcons,
children,
components,
contentTypes,
@ -579,7 +578,6 @@ const DataManagerProvider = ({
addCustomFieldAttribute,
addCreatedComponentToDynamicZone,
allComponentsCategories: retrieveSpecificInfoFromComponents(components, ['category']),
allIcons,
changeDynamicZoneComponents,
components,
componentsGroupedByCategory: groupBy(components, 'category'),
@ -622,7 +620,6 @@ DataManagerProvider.defaultProps = {
};
DataManagerProvider.propTypes = {
allIcons: PropTypes.array.isRequired,
children: PropTypes.node.isRequired,
components: PropTypes.object,
contentTypes: PropTypes.object.isRequired,

14
packages/core/content-type-builder/admin/src/components/FormModal/component/form.js
View File

@ -24,20 +24,6 @@ const componentForm = {
},
],
},
{
sectionTitle: null,
items: [
{
name: `${prefix}icon`,
type: 'component-icon-picker',
size: 12,
intlLabel: {
id: getTrad('modalForm.components.icon.label'),
defaultMessage: 'Icon',
},
},
],
},
];
return sections;

3
packages/core/content-type-builder/admin/src/components/FormModal/index.js
View File

@ -36,7 +36,6 @@ import BooleanRadioGroup from '../BooleanRadioGroup';
import CheckboxWithNumberField from '../CheckboxWithNumberField';
import CustomRadioGroup from '../CustomRadioGroup';
import ContentTypeRadioGroup from '../ContentTypeRadioGroup';
import ComponentIconPicker from '../ComponentIconPicker';
import Relation from '../Relation';
import PluralName from '../PluralName';
import SelectCategory from '../SelectCategory';
@ -227,7 +226,6 @@ const FormModal = () => {
data: {
displayName: data.schema.displayName,
category: data.category,
icon: data.schema.icon,
},
});
}
@ -877,7 +875,6 @@ const FormModal = () => {
'allowed-types-select': AllowedTypesSelect,
'boolean-radio-group': BooleanRadioGroup,
'checkbox-with-number-field': CheckboxWithNumberField,
'component-icon-picker': ComponentIconPicker,
'content-type-radio-group': ContentTypeRadioGroup,
'radio-group': CustomRadioGroup,
relation: Relation,

3
packages/core/content-type-builder/admin/src/pages/App/index.js
View File

@ -15,7 +15,6 @@ import pluginId from '../../pluginId';
import DataManagerProvider from '../../components/DataManagerProvider';
import FormModalNavigationProvider from '../../components/FormModalNavigationProvider';
import RecursivePath from '../RecursivePath';
import icons from './utils/icons.json';
import ContentTypeBuilderNav from '../../components/ContentTypeBuilderNav';
const ListView = lazy(() =>
@ -41,7 +40,7 @@ const App = () => {
<CheckPagePermissions permissions={pluginPermissions.main}>
<Helmet title={title} />
<FormModalNavigationProvider>
<DataManagerProvider allIcons={icons}>
<DataManagerProvider>
<Layout sideNav={<ContentTypeBuilderNav />}>
<Suspense fallback={<LoadingIndicatorPage />}>
<Switch>

962
packages/core/content-type-builder/admin/src/pages/App/utils/icons.json
View File

@ -1,962 +0,0 @@
[
"ad",
"address-book",
"address-card",
"adjust",
"air-freshener",
"align-center",
"align-justify",
"align-left",
"align-right",
"allergies",
"ambulance",
"american-sign-language-interpreting",
"anchor",
"angle-double-down",
"angle-double-left",
"angle-double-right",
"angle-double-up",
"angle-down",
"angle-left",
"angle-right",
"angle-up",
"angry",
"ankh",
"apple-alt",
"archive",
"archway",
"arrow-alt-circle-down",
"arrow-alt-circle-left",
"arrow-alt-circle-right",
"arrow-alt-circle-up",
"arrow-circle-down",
"arrow-circle-left",
"arrow-circle-right",
"arrow-circle-up",
"arrow-down",
"arrow-left",
"arrow-right",
"arrow-up",
"arrows-alt",
"arrows-alt-h",
"arrows-alt-v",
"assistive-listening-systems",
"asterisk",
"at",
"atlas",
"atom",
"audio-description",
"award",
"baby",
"baby-carriage",
"backspace",
"backward",
"bacon",
"balance-scale",
"balance-scale-left",
"balance-scale-right",
"ban",
"band-aid",
"barcode",
"bars",
"baseball-ball",
"basketball-ball",
"bath",
"battery-empty",
"battery-full",
"battery-half",
"battery-quarter",
"battery-three-quarters",
"bed",
"beer",
"bell",
"bell-slash",
"bezier-curve",
"bible",
"bicycle",
"biking",
"binoculars",
"biohazard",
"birthday-cake",
"blender",
"blender-phone",
"blind",
"blog",
"bold",
"bolt",
"bomb",
"bone",
"bong",
"book",
"book-dead",
"book-medical",
"book-open",
"book-reader",
"bookmark",
"border-all",
"border-none",
"border-style",
"bowling-ball",
"box",
"box-open",
"boxes",
"braille",
"brain",
"bread-slice",
"briefcase",
"briefcase-medical",
"broadcast-tower",
"broom",
"brush",
"bug",
"building",
"bullhorn",
"bullseye",
"burn",
"bus",
"bus-alt",
"business-time",
"calculator",
"calendar",
"calendar-alt",
"calendar-check",
"calendar-day",
"calendar-minus",
"calendar-plus",
"calendar-times",
"calendar-week",
"camera",
"camera-retro",
"campground",
"candy-cane",
"cannabis",
"capsules",
"car",
"car-alt",
"car-battery",
"car-crash",
"car-side",
"caret-down",
"caret-left",
"caret-right",
"caret-square-down",
"caret-square-left",
"caret-square-right",
"caret-square-up",
"caret-up",
"carrot",
"cart-arrow-down",
"cart-plus",
"cash-register",
"cat",
"certificate",
"chair",
"chalkboard",
"chalkboard-teacher",
"charging-station",
"chart-area",
"chart-bar",
"chart-line",
"chart-pie",
"check",
"check-circle",
"check-double",
"check-square",
"cheese",
"chess",
"chess-bishop",
"chess-board",
"chess-king",
"chess-knight",
"chess-pawn",
"chess-queen",
"chess-rook",
"chevron-circle-down",
"chevron-circle-left",
"chevron-circle-right",
"chevron-circle-up",
"chevron-down",
"chevron-left",
"chevron-right",
"chevron-up",
"child",
"church",
"circle",
"circle-notch",
"city",
"clinic-medical",
"clipboard",
"clipboard-check",
"clipboard-list",
"clock",
"clone",
"closed-captioning",
"cloud",
"cloud-download-alt",
"cloud-meatball",
"cloud-moon",
"cloud-moon-rain",
"cloud-rain",
"cloud-showers-heavy",
"cloud-sun",
"cloud-sun-rain",
"cloud-upload-alt",
"cocktail",
"code",
"code-branch",
"coffee",
"cog",
"cogs",
"coins",
"columns",
"comment",
"comment-alt",
"comment-dollar",
"comment-dots",
"comment-medical",
"comment-slash",
"comments",
"comments-dollar",
"compact-disc",
"compass",
"compress",
"compress-arrows-alt",
"concierge-bell",
"cookie",
"cookie-bite",
"copy",
"copyright",
"couch",
"credit-card",
"crop",
"crop-alt",
"cross",
"crosshairs",
"crow",
"crown",
"crutch",
"cube",
"cubes",
"cut",
"database",
"deaf",
"democrat",
"desktop",
"dharmachakra",
"diagnoses",
"dice",
"dice-d20",
"dice-d6",
"dice-five",
"dice-four",
"dice-one",
"dice-six",
"dice-three",
"dice-two",
"digital-tachograph",
"directions",
"divide",
"dizzy",
"dna",
"dog",
"dollar-sign",
"dolly",
"dolly-flatbed",
"donate",
"door-closed",
"door-open",
"dot-circle",
"dove",
"download",
"drafting-compass",
"dragon",
"draw-polygon",
"drum",
"drum-steelpan",
"drumstick-bite",
"dumbbell",
"dumpster",
"dumpster-fire",
"dungeon",
"edit",
"egg",
"eject",
"ellipsis-h",
"ellipsis-v",
"envelope",
"envelope-open",
"envelope-open-text",
"envelope-square",
"equals",
"eraser",
"ethernet",
"euro-sign",
"exchange-alt",
"exclamation",
"exclamation-circle",
"exclamation-triangle",
"expand",
"expand-arrows-alt",
"external-link-alt",
"external-link-square-alt",
"eye",
"eye-dropper",
"eye-slash",
"fan",
"fast-backward",
"fast-forward",
"fax",
"feather",
"feather-alt",
"female",
"fighter-jet",
"file",
"file-alt",
"file-archive",
"file-audio",
"file-code",
"file-contract",
"file-csv",
"file-download",
"file-excel",
"file-export",
"file-image",
"file-import",
"file-invoice",
"file-invoice-dollar",
"file-medical",
"file-medical-alt",
"file-pdf",
"file-powerpoint",
"file-prescription",
"file-signature",
"file-upload",
"file-video",
"file-word",
"fill",
"fill-drip",
"film",
"filter",
"fingerprint",
"fire",
"fire-alt",
"fire-extinguisher",
"first-aid",
"fish",
"fist-raised",
"flag",
"flag-checkered",
"flag-usa",
"flask",
"flushed",
"folder",
"folder-minus",
"folder-open",
"folder-plus",
"font",
"football-ball",
"forward",
"frog",
"frown",
"frown-open",
"funnel-dollar",
"futbol",
"gamepad",
"gas-pump",
"gavel",
"gem",
"genderless",
"ghost",
"gift",
"gifts",
"glass-cheers",
"glass-martini",
"glass-martini-alt",
"glass-whiskey",
"glasses",
"globe",
"globe-africa",
"globe-americas",
"globe-asia",
"globe-europe",
"golf-ball",
"gopuram",
"graduation-cap",
"greater-than",
"greater-than-equal",
"grimace",
"grin",
"grin-alt",
"grin-beam",
"grin-beam-sweat",
"grin-hearts",
"grin-squint",
"grin-squint-tears",
"grin-stars",
"grin-tears",
"grin-tongue",
"grin-tongue-squint",
"grin-tongue-wink",
"grin-wink",
"grip-horizontal",
"grip-lines",
"grip-lines-vertical",
"grip-vertical",
"guitar",
"h-square",
"hamburger",
"hammer",
"hamsa",
"hand-holding",
"hand-holding-heart",
"hand-holding-usd",
"hand-lizard",
"hand-middle-finger",
"hand-paper",
"hand-peace",
"hand-point-down",
"hand-point-left",
"hand-point-right",
"hand-point-up",
"hand-pointer",
"hand-rock",
"hand-scissors",
"hand-spock",
"hands",
"hands-helping",
"handshake",
"hanukiah",
"hard-hat",
"hashtag",
"hat-cowboy",
"hat-cowboy-side",
"hat-wizard",
"haykal",
"hdd",
"heading",
"headphones",
"headphones-alt",
"headset",
"heart",
"heart-broken",
"heartbeat",
"helicopter",
"highlighter",
"hiking",
"hippo",
"history",
"hockey-puck",
"holly-berry",
"home",
"horse",
"horse-head",
"hospital",
"hospital-alt",
"hospital-symbol",
"hot-tub",
"hotdog",
"hotel",
"hourglass",
"hourglass-end",
"hourglass-half",
"hourglass-start",
"house-damage",
"hryvnia",
"i-cursor",
"ice-cream",
"icicles",
"icons",
"id-badge",
"id-card",
"id-card-alt",
"igloo",
"image",
"images",
"inbox",
"indent",
"industry",
"infinity",
"info",
"info-circle",
"italic",
"jedi",
"joint",
"journal-whills",
"kaaba",
"key",
"keyboard",
"khanda",
"kiss",
"kiss-beam",
"kiss-wink-heart",
"kiwi-bird",
"landmark",
"language",
"laptop",
"laptop-code",
"laptop-medical",
"laugh",
"laugh-beam",
"laugh-squint",
"laugh-wink",
"layer-group",
"leaf",
"lemon",
"less-than",
"less-than-equal",
"level-down-alt",
"level-up-alt",
"life-ring",
"lightbulb",
"link",
"lira-sign",
"list",
"list-alt",
"list-ol",
"list-ul",
"location-arrow",
"lock",
"lock-open",
"long-arrow-alt-down",
"long-arrow-alt-left",
"long-arrow-alt-right",
"long-arrow-alt-up",
"low-vision",
"luggage-cart",
"magic",
"magnet",
"mail-bulk",
"male",
"map",
"map-marked",
"map-marked-alt",
"map-marker",
"map-marker-alt",
"map-pin",
"map-signs",
"marker",
"mars",
"mars-double",
"mars-stroke",
"mars-stroke-h",
"mars-stroke-v",
"mask",
"medal",
"medkit",
"meh",
"meh-blank",
"meh-rolling-eyes",
"memory",
"menorah",
"mercury",
"meteor",
"microchip",
"microphone",
"microphone-alt",
"microphone-alt-slash",
"microphone-slash",
"microscope",
"minus",
"minus-circle",
"minus-square",
"mitten",
"mobile",
"mobile-alt",
"money-bill",
"money-bill-alt",
"money-bill-wave",
"money-bill-wave-alt",
"money-check",
"money-check-alt",
"monument",
"moon",
"mortar-pestle",
"mosque",
"motorcycle",
"mountain",
"mouse",
"mouse-pointer",
"mug-hot",
"music",
"network-wired",
"neuter",
"newspaper",
"not-equal",
"notes-medical",
"object-group",
"object-ungroup",
"oil-can",
"om",
"otter",
"outdent",
"pager",
"paint-brush",
"paint-roller",
"palette",
"pallet",
"paper-plane",
"paperclip",
"parachute-box",
"paragraph",
"parking",
"passport",
"pastafarianism",
"paste",
"pause",
"pause-circle",
"paw",
"peace",
"pen",
"pen-alt",
"pen-fancy",
"pen-nib",
"pen-square",
"pencil-alt",
"pencil-ruler",
"people-carry",
"pepper-hot",
"percent",
"percentage",
"person-booth",
"phone",
"phone-alt",
"phone-slash",
"phone-square",
"phone-square-alt",
"phone-volume",
"photo-video",
"piggy-bank",
"pills",
"pizza-slice",
"place-of-worship",
"plane",
"plane-arrival",
"plane-departure",
"play",
"play-circle",
"plug",
"plus",
"plus-circle",
"plus-square",
"podcast",
"poll",
"poll-h",
"poo",
"poo-storm",
"poop",
"portrait",
"pound-sign",
"power-off",
"pray",
"praying-hands",
"prescription",
"prescription-bottle",
"prescription-bottle-alt",
"print",
"procedures",
"project-diagram",
"puzzle-piece",
"qrcode",
"question",
"question-circle",
"quidditch",
"quote-left",
"quote-right",
"quran",
"radiation",
"radiation-alt",
"rainbow",
"random",
"receipt",
"record-vinyl",
"recycle",
"redo",
"redo-alt",
"registered",
"remove-format",
"reply",
"reply-all",
"republican",
"restroom",
"retweet",
"ribbon",
"ring",
"road",
"robot",
"rocket",
"route",
"rss",
"rss-square",
"ruble-sign",
"ruler",
"ruler-combined",
"ruler-horizontal",
"ruler-vertical",
"running",
"rupee-sign",
"sad-cry",
"sad-tear",
"satellite",
"satellite-dish",
"save",
"school",
"screwdriver",
"scroll",
"sd-card",
"search",
"search-dollar",
"search-location",
"search-minus",
"search-plus",
"seedling",
"server",
"shapes",
"share",
"share-alt",
"share-alt-square",
"share-square",
"shekel-sign",
"shield-alt",
"ship",
"shipping-fast",
"shoe-prints",
"shopping-bag",
"shopping-basket",
"shopping-cart",
"shower",
"shuttle-van",
"sign",
"sign-in-alt",
"sign-language",
"sign-out-alt",
"signal",
"signature",
"sim-card",
"sitemap",
"skating",
"skiing",
"skiing-nordic",
"skull",
"skull-crossbones",
"slash",
"sleigh",
"sliders-h",
"smile",
"smile-beam",
"smile-wink",
"smog",
"smoking",
"smoking-ban",
"sms",
"snowboarding",
"snowflake",
"snowman",
"snowplow",
"socks",
"solar-panel",
"sort",
"sort-alpha-down",
"sort-alpha-down-alt",
"sort-alpha-up",
"sort-alpha-up-alt",
"sort-amount-down",
"sort-amount-down-alt",
"sort-amount-up",
"sort-amount-up-alt",
"sort-down",
"sort-numeric-down",
"sort-numeric-down-alt",
"sort-numeric-up",
"sort-numeric-up-alt",
"sort-up",
"spa",
"space-shuttle",
"spell-check",
"spider",
"spinner",
"splotch",
"spray-can",
"square",
"square-full",
"square-root-alt",
"stamp",
"star",
"star-and-crescent",
"star-half",
"star-half-alt",
"star-of-david",
"star-of-life",
"step-backward",
"step-forward",
"stethoscope",
"sticky-note",
"stop",
"stop-circle",
"stopwatch",
"store",
"store-alt",
"stream",
"street-view",
"strikethrough",
"stroopwafel",
"subscript",
"subway",
"suitcase",
"suitcase-rolling",
"sun",
"superscript",
"surprise",
"swatchbook",
"swimmer",
"swimming-pool",
"synagogue",
"sync",
"sync-alt",
"syringe",
"table",
"table-tennis",
"tablet",
"tablet-alt",
"tablets",
"tachometer-alt",
"tag",
"tags",
"tape",
"tasks",
"taxi",
"teeth",
"teeth-open",
"temperature-high",
"temperature-low",
"tenge",
"terminal",
"text-height",
"text-width",
"th",
"th-large",
"th-list",
"theater-masks",
"thermometer",
"thermometer-empty",
"thermometer-full",
"thermometer-half",
"thermometer-quarter",
"thermometer-three-quarters",
"thumbs-down",
"thumbs-up",
"thumbtack",
"ticket-alt",
"times",
"times-circle",
"tint",
"tint-slash",
"tired",
"toggle-off",
"toggle-on",
"toilet",
"toilet-paper",
"toolbox",
"tools",
"tooth",
"torah",
"torii-gate",
"tractor",
"trademark",
"traffic-light",
"train",
"tram",
"transgender",
"transgender-alt",
"trash",
"trash-alt",
"trash-restore",
"trash-restore-alt",
"tree",
"trophy",
"truck",
"truck-loading",
"truck-monster",
"truck-moving",
"truck-pickup",
"tshirt",
"tty",
"tv",
"umbrella",
"umbrella-beach",
"underline",
"undo",
"undo-alt",
"universal-access",
"university",
"unlink",
"unlock",
"unlock-alt",
"upload",
"user",
"user-alt",
"user-alt-slash",
"user-astronaut",
"user-check",
"user-circle",
"user-clock",
"user-cog",
"user-edit",
"user-friends",
"user-graduate",
"user-injured",
"user-lock",
"user-md",
"user-minus",
"user-ninja",
"user-nurse",
"user-plus",
"user-secret",
"user-shield",
"user-slash",
"user-tag",
"user-tie",
"user-times",
"users",
"users-cog",
"utensil-spoon",
"utensils",
"vector-square",
"venus",
"venus-double",
"venus-mars",
"vial",
"vials",
"video",
"video-slash",
"vihara",
"voicemail",
"volleyball-ball",
"volume-down",
"volume-mute",
"volume-off",
"volume-up",
"vote-yea",
"vr-cardboard",
"walking",
"wallet",
"warehouse",
"water",
"wave-square",
"weight",
"weight-hanging",
"wheelchair",
"wifi",
"wind",
"window-close",
"window-maximize",
"window-minimize",
"window-restore",
"wine-bottle",
"wine-glass",
"wine-glass-alt",
"won-sign",
"wrench",
"x-ray",
"yen-sign",
"yin-yang"
]

570
packages/core/content-type-builder/admin/src/pages/ListView/tests/__snapshots__/index.test.js.snap
View File

@ -1,6 +1,78 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<ListView /> renders and matches the snapshot 1`] = `
.c63 {
font-size: 0.75rem;
line-height: 1.33;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 600;
color: #32324d;
}
.c55 {
padding-right: 16px;
padding-left: 16px;
border-radius: borderRadius;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.c58 {
background: #d9d8ff;
}
.c61 {
margin-top: 4px;
max-width: 100%;
}
.c66 {
background: #dcdce4;
}
.c56 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.c59 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
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;
}
.c36 {
border: 0;
-webkit-clip: rect(0 0 0 0);
@ -75,25 +147,15 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
padding-left: 40px;
}
.c55 {
padding-right: 16px;
padding-left: 16px;
border-radius: borderRadius;
}
.c60 {
max-width: calc(8.75rem - 32px);
}
.c66 {
.c70 {
background: #d9d8ff;
}
.c68 {
.c72 {
background: #eaeaef;
}
.c70 {
.c74 {
background: #f0f0ff;
padding: 20px;
}
@ -224,17 +286,6 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
color: #4945ff;
}
.c61 {
font-size: 0.75rem;
line-height: 1.33;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 600;
color: #32324d;
}
.c22 > * {
margin-top: 0;
margin-bottom: 0;
@ -564,13 +615,13 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
fill: #ffffff;
}
.c69 {
.c73 {
height: 1px;
border: none;
margin: 0;
}
.c72 {
.c76 {
height: 1.5rem;
width: 1.5rem;
border-radius: 50%;
@ -588,16 +639,16 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
align-items: center;
}
.c72 svg {
.c76 svg {
height: 0.625rem;
width: 0.625rem;
}
.c72 svg path {
.c76 svg path {
fill: #4945ff;
}
.c71 {
.c75 {
border-radius: 0 0 4px 4px;
display: block;
width: 100%;
@ -705,89 +756,80 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
display: flex;
}
.c59 {
width: 2rem !important;
height: 2rem !important;
padding: 0.5625rem;
border-radius: 4rem;
background: #eaeaef;
.c60 {
border-radius: 50%;
color: #4945ff;
height: 40px;
width: 40px;
}
.c59 path {
fill: #8e8ea9;
.c60 svg {
height: 20px;
width: 20px;
}
.c63 {
.c67 {
border-radius: 50%;
color: #666687;
height: 40px;
width: 40px;
}
.c67 svg {
height: 20px;
width: 20px;
}
.c65 {
position: absolute;
display: none;
top: 5px;
right: 0.5rem;
}
.c63 svg {
.c65 svg {
width: 0.625rem;
height: 0.625rem;
}
.c63 svg path {
.c65 svg path {
fill: #4945ff;
}
.c56 {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
.c57 {
width: 8.75rem;
height: 5rem;
position: relative;
border: 1px solid #dcdce4;
background: #f6f6f9;
border-radius: 4px;
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;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 100%;
}
.c56.active,
.c56:hover {
.c57.active,
.c57:focus,
.c57:hover {
border: 1px solid #d9d8ff;
background: #f0f0ff;
}
.c56.active .c62,
.c56:hover .c62 {
.c57.active .c64,
.c57:focus .c64,
.c57:hover .c64 {
display: block;
}
.c56.active .c58,
.c56:hover .c58 {
background: #d9d8ff;
}
.c56.active .c58 path,
.c56:hover .c58 path {
fill: #4945ff;
}
.c56.active .c6,
.c56:hover .c6 {
.c57.active .c62,
.c57:focus .c62,
.c57:hover .c62 {
color: #4945ff;
}
.c57 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
.c57.active > div:first-child,
.c57:focus > div:first-child,
.c57:hover > div:first-child {
background: #d9d8ff;
color: #4945ff;
}
.c37.component-row,
@ -881,7 +923,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
overflow-x: auto;
}
.c64 {
.c68 {
padding-top: 5.625rem;
}
@ -963,7 +1005,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
fill: #666687;
}
.c67 {
.c71 {
height: 1.5rem;
width: 1.5rem;
border-radius: 50%;
@ -981,12 +1023,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
align-items: center;
}
.c67 svg {
.c71 svg {
height: 0.625rem;
width: 0.625rem;
}
.c67 svg path {
.c71 svg path {
fill: #4945ff;
}
@ -1026,7 +1068,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
fill: #eaeaef;
}
.c65 {
.c69 {
position: relative;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
@ -1036,7 +1078,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
transform: translate(-0.5px,-1px);
}
.c65 * {
.c69 * {
fill: #d9d8ff;
}
@ -3533,221 +3575,177 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</div>
</button>
<button
class="c55 c56 c57 active"
type="button"
>
<div
class="c0 c55 c56 active"
class="c58 c59 c60"
>
<div
class="c0 c21 c51 c57"
spacing="1"
<svg
viewBox="0 0 448 512"
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden="true"
class="svg-inline--fa fa-adjust c58 c59"
data-icon="adjust"
data-prefix="fas"
focusable="false"
role="img"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z"
fill="currentColor"
/>
</svg>
<div
class="c0 c60"
>
<span
class="c6 c61"
/>
</div>
</div>
<div
class="c62 c63"
role="button"
tabindex="0"
>
<svg
fill="none"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M24 2.417L21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417z"
fill="#212134"
/>
</svg>
</div>
<path
d="M216.3 2c4.8-2.6 10.5-2.6 15.3 0L422.3 106c5.1 2.8 8.3 8.2 8.3 14s-3.2 11.2-8.3 14L231.7 238c-4.8 2.6-10.5 2.6-15.3 0L25.7 134c-5.1-2.8-8.3-8.2-8.3-14s3.2-11.2 8.3-14L216.3 2zM23.7 170l176 96c5.1 2.8 8.3 8.2 8.3 14V496c0 5.6-3 10.9-7.8 13.8s-10.9 3-15.8 .3L8.3 414C3.2 411.2 0 405.9 0 400V184c0-5.6 3-10.9 7.8-13.8s10.9-3 15.8-.3zm400.7 0c5-2.7 11-2.6 15.8 .3s7.8 8.1 7.8 13.8V400c0 5.9-3.2 11.2-8.3 14l-176 96c-5 2.7-11 2.6-15.8-.3s-7.8-8.1-7.8-13.8V280c0-5.9 3.2-11.2 8.3-14l176-96z"
fill="currentColor"
/>
</svg>
</div>
<div
class="c61"
>
<span
class="c62 c63"
/>
</div>
<button
class="c64 c65"
type="button"
>
<svg
fill="none"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M24 2.417L21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417z"
fill="#212134"
/>
</svg>
</button>
</button>
<button
class="c55 c56 c57"
type="button"
>
<div
class="c0 c55 c56"
class="c66 c59 c67"
>
<div
class="c0 c21 c51 c57"
spacing="1"
<svg
viewBox="0 0 448 512"
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden="true"
class="svg-inline--fa fa-address-book c58 c59"
data-icon="address-book"
data-prefix="fas"
focusable="false"
role="img"
viewBox="0 0 448 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M436 160c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h320c26.5 0 48-21.5 48-48v-48h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20zm-228-32c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm112 236.8c0 10.6-10 19.2-22.4 19.2H118.4C106 384 96 375.4 96 364.8v-19.2c0-31.8 30.1-57.6 67.2-57.6h5c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h5c37.1 0 67.2 25.8 67.2 57.6v19.2z"
fill="currentColor"
/>
</svg>
<div
class="c0 c60"
>
<span
class="c6 c61"
/>
</div>
</div>
<div
class="c62 c63"
role="button"
tabindex="0"
>
<svg
fill="none"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M24 2.417L21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417z"
fill="#212134"
/>
</svg>
</div>
<path
d="M216.3 2c4.8-2.6 10.5-2.6 15.3 0L422.3 106c5.1 2.8 8.3 8.2 8.3 14s-3.2 11.2-8.3 14L231.7 238c-4.8 2.6-10.5 2.6-15.3 0L25.7 134c-5.1-2.8-8.3-8.2-8.3-14s3.2-11.2 8.3-14L216.3 2zM23.7 170l176 96c5.1 2.8 8.3 8.2 8.3 14V496c0 5.6-3 10.9-7.8 13.8s-10.9 3-15.8 .3L8.3 414C3.2 411.2 0 405.9 0 400V184c0-5.6 3-10.9 7.8-13.8s10.9-3 15.8-.3zm400.7 0c5-2.7 11-2.6 15.8 .3s7.8 8.1 7.8 13.8V400c0 5.9-3.2 11.2-8.3 14l-176 96c-5 2.7-11 2.6-15.8-.3s-7.8-8.1-7.8-13.8V280c0-5.9 3.2-11.2 8.3-14l176-96z"
fill="currentColor"
/>
</svg>
</div>
<div
class="c61"
>
<span
class="c62 c63"
/>
</div>
<button
class="c64 c65"
type="button"
>
<svg
fill="none"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M24 2.417L21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417z"
fill="#212134"
/>
</svg>
</button>
</button>
<button
class="c55 c56 c57"
type="button"
>
<div
class="c0 c55 c56"
class="c66 c59 c67"
>
<div
class="c0 c21 c51 c57"
spacing="1"
<svg
viewBox="0 0 448 512"
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden="true"
class="svg-inline--fa fa-calendar c58 c59"
data-icon="calendar"
data-prefix="fas"
focusable="false"
role="img"
viewBox="0 0 448 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z"
fill="currentColor"
/>
</svg>
<div
class="c0 c60"
>
<span
class="c6 c61"
/>
</div>
</div>
<div
class="c62 c63"
role="button"
tabindex="0"
>
<svg
fill="none"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M24 2.417L21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417z"
fill="#212134"
/>
</svg>
</div>
<path
d="M216.3 2c4.8-2.6 10.5-2.6 15.3 0L422.3 106c5.1 2.8 8.3 8.2 8.3 14s-3.2 11.2-8.3 14L231.7 238c-4.8 2.6-10.5 2.6-15.3 0L25.7 134c-5.1-2.8-8.3-8.2-8.3-14s3.2-11.2 8.3-14L216.3 2zM23.7 170l176 96c5.1 2.8 8.3 8.2 8.3 14V496c0 5.6-3 10.9-7.8 13.8s-10.9 3-15.8 .3L8.3 414C3.2 411.2 0 405.9 0 400V184c0-5.6 3-10.9 7.8-13.8s10.9-3 15.8-.3zm400.7 0c5-2.7 11-2.6 15.8 .3s7.8 8.1 7.8 13.8V400c0 5.9-3.2 11.2-8.3 14l-176 96c-5 2.7-11 2.6-15.8-.3s-7.8-8.1-7.8-13.8V280c0-5.9 3.2-11.2 8.3-14l176-96z"
fill="currentColor"
/>
</svg>
</div>
<div
class="c61"
>
<span
class="c62 c63"
/>
</div>
<button
class="c64 c65"
type="button"
>
<svg
fill="none"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M24 2.417L21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417z"
fill="#212134"
/>
</svg>
</button>
</button>
<button
class="c55 c56 c57"
type="button"
>
<div
class="c0 c55 c56"
class="c66 c59 c67"
>
<div
class="c0 c21 c51 c57"
spacing="1"
<svg
viewBox="0 0 448 512"
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden="true"
class="svg-inline--fa fa-cannabis c58 c59"
data-icon="cannabis"
data-prefix="fas"
focusable="false"
role="img"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M503.47 360.25c-1.56-.82-32.39-16.89-76.78-25.81 64.25-75.12 84.05-161.67 84.93-165.64 1.18-5.33-.44-10.9-4.3-14.77-3.03-3.04-7.12-4.7-11.32-4.7-1.14 0-2.29.12-3.44.38-3.88.85-86.54 19.59-160.58 79.76.01-1.46.01-2.93.01-4.4 0-118.79-59.98-213.72-62.53-217.7A15.973 15.973 0 0 0 256 0c-5.45 0-10.53 2.78-13.47 7.37-2.55 3.98-62.53 98.91-62.53 217.7 0 1.47.01 2.94.01 4.4-74.03-60.16-156.69-78.9-160.58-79.76-1.14-.25-2.29-.38-3.44-.38-4.2 0-8.29 1.66-11.32 4.7A15.986 15.986 0 0 0 .38 168.8c.88 3.97 20.68 90.52 84.93 165.64-44.39 8.92-75.21 24.99-76.78 25.81a16.003 16.003 0 0 0-.02 28.29c2.45 1.29 60.76 31.72 133.49 31.72 6.14 0 11.96-.1 17.5-.31-11.37 22.23-16.52 38.31-16.81 39.22-1.8 5.68-.29 11.89 3.91 16.11a16.019 16.019 0 0 0 16.1 3.99c1.83-.57 37.72-11.99 77.3-39.29V504c0 4.42 3.58 8 8 8h16c4.42 0 8-3.58 8-8v-64.01c39.58 27.3 75.47 38.71 77.3 39.29a16.019 16.019 0 0 0 16.1-3.99c4.2-4.22 5.71-10.43 3.91-16.11-.29-.91-5.45-16.99-16.81-39.22 5.54.21 11.37.31 17.5.31 72.72 0 131.04-30.43 133.49-31.72 5.24-2.78 8.52-8.22 8.51-14.15-.01-5.94-3.29-11.39-8.53-14.15z"
fill="currentColor"
/>
</svg>
<div
class="c0 c60"
>
<span
class="c6 c61"
/>
</div>
</div>
<div
class="c62 c63"
role="button"
tabindex="0"
>
<svg
fill="none"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M24 2.417L21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417z"
fill="#212134"
/>
</svg>
</div>
<path
d="M216.3 2c4.8-2.6 10.5-2.6 15.3 0L422.3 106c5.1 2.8 8.3 8.2 8.3 14s-3.2 11.2-8.3 14L231.7 238c-4.8 2.6-10.5 2.6-15.3 0L25.7 134c-5.1-2.8-8.3-8.2-8.3-14s3.2-11.2 8.3-14L216.3 2zM23.7 170l176 96c5.1 2.8 8.3 8.2 8.3 14V496c0 5.6-3 10.9-7.8 13.8s-10.9 3-15.8 .3L8.3 414C3.2 411.2 0 405.9 0 400V184c0-5.6 3-10.9 7.8-13.8s10.9-3 15.8-.3zm400.7 0c5-2.7 11-2.6 15.8 .3s7.8 8.1 7.8 13.8V400c0 5.9-3.2 11.2-8.3 14l-176 96c-5 2.7-11 2.6-15.8-.3s-7.8-8.1-7.8-13.8V280c0-5.9 3.2-11.2 8.3-14l176-96z"
fill="currentColor"
/>
</svg>
</div>
<div
class="c61"
>
<span
class="c62 c63"
/>
</div>
<button
class="c64 c65"
type="button"
>
<svg
fill="none"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M24 2.417L21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417z"
fill="#212134"
/>
</svg>
</button>
</button>
</div>
</div>
<div
class="c0 c64"
class="c0 c68"
>
<div
class="c0 "
@ -3780,7 +3778,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
class="c0 c39"
>
<svg
class="c65"
class="c69"
color="primary200"
fill="none"
height="23"
@ -3922,7 +3920,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
class="c0 c39"
>
<svg
class="c65"
class="c69"
color="primary200"
fill="none"
height="23"
@ -4064,7 +4062,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
class="c0 c39"
>
<svg
class="c65"
class="c69"
color="primary200"
fill="none"
height="23"
@ -4207,7 +4205,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
>
<div
aria-hidden="true"
class="c0 c66 c67"
class="c0 c70 c71"
>
<svg
fill="none"
@ -4270,7 +4268,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
class="c0 c39"
>
<svg
class="c65"
class="c69"
color="primary200"
fill="none"
height="23"
@ -4412,7 +4410,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
class="c0 c39"
>
<svg
class="c65"
class="c69"
color="primary200"
fill="none"
height="23"
@ -4554,7 +4552,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
class="c0 c39"
>
<svg
class="c65"
class="c69"
color="primary200"
fill="none"
height="23"
@ -4696,7 +4694,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
class="c0 c39"
>
<svg
class="c65"
class="c69"
color="primary200"
fill="none"
height="23"
@ -4840,7 +4838,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
class="c0 c39"
>
<svg
class="c65"
class="c69"
color="primary200"
fill="none"
height="23"
@ -4984,7 +4982,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
class="c0 c39"
>
<svg
class="c65"
class="c69"
color="primary200"
fill="none"
height="23"
@ -5131,7 +5129,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
>
<div
aria-hidden="true"
class="c0 c66 c67"
class="c0 c70 c71"
>
<svg
fill="none"
@ -5194,7 +5192,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
class="c0 c39"
>
<svg
class="c65"
class="c69"
color="primary200"
fill="none"
height="23"
@ -5336,7 +5334,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
class="c0 c39"
>
<svg
class="c65"
class="c69"
color="primary200"
fill="none"
height="23"
@ -5478,7 +5476,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
class="c0 c39"
>
<svg
class="c65"
class="c69"
color="primary200"
fill="none"
height="23"
@ -6543,7 +6541,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
>
<div
aria-hidden="true"
class="c0 c66 c67"
class="c0 c70 c71"
>
<svg
fill="none"
@ -6606,7 +6604,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
class="c0 c39"
>
<svg
class="c65"
class="c69"
color="primary200"
fill="none"
height="23"
@ -6748,7 +6746,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
class="c0 c39"
>
<svg
class="c65"
class="c69"
color="primary200"
fill="none"
height="23"
@ -6892,7 +6890,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
class="c0 c39"
>
<svg
class="c65"
class="c69"
color="primary200"
fill="none"
height="23"
@ -7035,7 +7033,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
>
<div
aria-hidden="true"
class="c0 c66 c67"
class="c0 c70 c71"
>
<svg
fill="none"
@ -7075,17 +7073,17 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</div>
<div>
<hr
class="c0 c68 c69"
class="c0 c72 c73"
/>
<button
class="c0 c70 c71"
class="c0 c74 c75"
>
<div
class="c0 c9"
>
<div
aria-hidden="true"
class="c0 c66 c72"
class="c0 c70 c76"
>
<svg
fill="none"

1
packages/core/content-type-builder/admin/src/translations/de.json
View File

@ -1,5 +1,4 @@
{
"ComponentIconPicker.search.placeholder": "Suche nach einem Icon",
"attribute.boolean": "Boolean",
"attribute.boolean.description": "Ja oder nein, 1 oder 0, wahr oder falsch",
"attribute.component": "Komponente",

1
packages/core/content-type-builder/admin/src/translations/dk.json
View File

@ -1,5 +1,4 @@
{
"ComponentIconPicker.search.placeholder": "Søg efter ikon",
"attribute.boolean": "Boolean",
"attribute.boolean.description": "Ja eller nej, 1 eller 0, sand eller falsk",
"attribute.component": "Komponent",

1
packages/core/content-type-builder/admin/src/translations/en.json
View File

@ -1,5 +1,4 @@
{
"ComponentIconPicker.search.placeholder": "Search for an icon",
"attribute.boolean": "Boolean",
"attribute.boolean.description": "Yes or no, 1 or 0, true or false",
"attribute.component": "Component",

1
packages/core/content-type-builder/admin/src/translations/es.json
View File

@ -1,5 +1,4 @@
{
"ComponentIconPicker.search.placeholder": "Buscar un icono",
"attribute.boolean": "Booleano",
"attribute.boolean.description": "Si o no, 1 o 0, verdadero o falso",
"attribute.component": "Componente",

1
packages/core/content-type-builder/admin/src/translations/ko.json
View File

@ -1,5 +1,4 @@
{
"ComponentIconPicker.search.placeholder": "아이콘 검색",
"attribute.boolean": "불리언(Boolean)",
"attribute.boolean.description": "예 아니오, 1 또는 0, 참 또는 거짓",
"attribute.component": "컴포넌트",

1
packages/core/content-type-builder/admin/src/translations/pl.json
View File

@ -1,5 +1,4 @@
{
"ComponentIconPicker.search.placeholder": "Szukaj ikonki",
"attribute.boolean": "Typ logiczny",
"attribute.boolean.description": "Tak lub nie, 1 lub 0, true lub false",
"attribute.component": "Komponent",

1
packages/core/content-type-builder/admin/src/translations/pt-BR.json
View File

@ -1,5 +1,4 @@
{
"ComponentIconPicker.search.placeholder": "Pesquisar por um ícone",
"attribute.boolean": "Booleano",
"attribute.boolean.description": "Sim ou não, 1 ou 0, verdadeiro ou falso",
"attribute.component": "Componente",

1
packages/core/content-type-builder/admin/src/translations/sv.json
View File

@ -1,5 +1,4 @@
{
"ComponentIconPicker.search.placeholder": "Sök för en ikon",
"attribute.boolean": "Booleskt värde",
"attribute.boolean.description": "Ja eller nej, 1 eller 0, sant eller falskt",
"attribute.component": "Komponent",

1
packages/core/content-type-builder/admin/src/translations/zh.json
View File

@ -1,5 +1,4 @@
{
"ComponentIconPicker.search.placeholder": "搜尋圖示",
"attribute.boolean": "布林值",
"attribute.boolean.description": "好或不好、1 或 0、是或否",
"attribute.component": "元件",

3
packages/core/content-type-builder/server/controllers/validation/__tests__/component.test.js
View File

@ -28,7 +28,6 @@ describe('Component validator', () => {
component: {
category: 'default',
displayName: 'mycompo',
icon: 'american-sign-language-interpreting',
attributes: {
title: {
type: 'string',
@ -50,7 +49,6 @@ describe('Component validator', () => {
component: {
category: 'default',
displayName: 'mycompo',
icon: 'american-sign-language-interpreting',
attributes: {
title: {
type: 'string',
@ -74,7 +72,6 @@ describe('Component validator', () => {
component: {
category: 'default',
displayName: 'mycompo',
icon: 'american-sign-language-interpreting',
attributes: {
title: {
type: 'string',

Some files were not shown because too many files have changed in this diff Show More