From 89d59fdac3810df67d6f6251427ae3658869f830 Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Thu, 18 Nov 2021 10:55:46 +0100 Subject: [PATCH 1/5] attribute options, component card and component icon picker --- .../AttributeOptions/AttributeOption/index.js | 10 ++++----- .../src/components/AttributeOptions/index.js | 6 ++++-- .../src/components/ComponentCard/index.js | 20 +++++++++++------- .../components/ComponentIconPicker/index.js | 21 ++++++++++++++----- 4 files changed, 38 insertions(+), 19 deletions(-) diff --git a/packages/core/content-type-builder/admin/src/components/AttributeOptions/AttributeOption/index.js b/packages/core/content-type-builder/admin/src/components/AttributeOptions/AttributeOption/index.js index c493426b5a..ab767fe443 100644 --- a/packages/core/content-type-builder/admin/src/components/AttributeOptions/AttributeOption/index.js +++ b/packages/core/content-type-builder/admin/src/components/AttributeOptions/AttributeOption/index.js @@ -9,7 +9,7 @@ import PropTypes from 'prop-types'; import { useIntl } from 'react-intl'; import { Box } from '@strapi/design-system/Box'; import { Flex } from '@strapi/design-system/Flex'; -import { Text } from '@strapi/design-system/Text'; +import { Typography } from '@strapi/design-system/Typography'; import useFormModalNavigation from '../../../hooks/useFormModalNavigation'; import getTrad from '../../../utils/getTrad'; import AttributeIcon from '../../AttributeIcon'; @@ -35,15 +35,15 @@ const AttributeOption = ({ type }) => { - + {formatMessage({ id: getTrad(`attribute.${type}`), defaultMessage: type })} - + - + {formatMessage({ id: getTrad(`attribute.${type}.description`) })} - + diff --git a/packages/core/content-type-builder/admin/src/components/AttributeOptions/index.js b/packages/core/content-type-builder/admin/src/components/AttributeOptions/index.js index 4adcad4d71..42abbe14e6 100644 --- a/packages/core/content-type-builder/admin/src/components/AttributeOptions/index.js +++ b/packages/core/content-type-builder/admin/src/components/AttributeOptions/index.js @@ -14,7 +14,7 @@ import { KeyboardNavigable } from '@strapi/design-system/KeyboardNavigable'; import { ModalBody } from '@strapi/design-system/ModalLayout'; import { Flex } from '@strapi/design-system/Flex'; import { Stack } from '@strapi/design-system/Stack'; -import { H2 } from '@strapi/design-system/Text'; +import { Typography } from '@strapi/design-system/Typography'; import { getTrad } from '../../utils'; import AttributeOption from './AttributeOption'; @@ -27,7 +27,9 @@ const AttributeOptions = ({ attributes, forTarget, kind }) => { return ( -

{formatMessage({ id: titleId, defaultMessage: 'Select a field' })}

+ + {formatMessage({ id: titleId, defaultMessage: 'Select a field' })} + diff --git a/packages/core/content-type-builder/admin/src/components/ComponentCard/index.js b/packages/core/content-type-builder/admin/src/components/ComponentCard/index.js index 84e876e15a..af3ce9334c 100644 --- a/packages/core/content-type-builder/admin/src/components/ComponentCard/index.js +++ b/packages/core/content-type-builder/admin/src/components/ComponentCard/index.js @@ -9,7 +9,7 @@ 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 { Text } from '@strapi/design-system/Text'; +import { Typography } from '@strapi/design-system/Typography'; import { pxToRem } from '@strapi/helper-plugin'; import Cross from '@strapi/icons/Cross'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -74,12 +74,16 @@ const ComponentBox = styled(Box)` } } - ${Text} { + ${Typography} { 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 { @@ -101,12 +105,14 @@ function ComponentCard({ component, dzName, index, isActive, isInDevelopmentMode paddingLeft={4} paddingRight={4} > - + - - {displayName} - - + + + {displayName} + + + {isInDevelopmentMode && ( - + {formatMessage(intlLabel)} - + {showSearch ? (
{error && ( -

+ {errorMessage} -

+ )} From 1b77407800ac5b621629392ea3d3dec70880a6a7 Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Thu, 18 Nov 2021 11:07:30 +0100 Subject: [PATCH 2/5] custom radio group and draft and publish toggle --- .../components/CustomRadioGroup/components.js | 4 ++-- .../src/components/CustomRadioGroup/index.js | 12 ++++++------ .../components/DraftAndPublishToggle/index.js | 19 ++++++++++++------- 3 files changed, 20 insertions(+), 15 deletions(-) diff --git a/packages/core/content-type-builder/admin/src/components/CustomRadioGroup/components.js b/packages/core/content-type-builder/admin/src/components/CustomRadioGroup/components.js index 0f5f55dec2..1bae8807e4 100644 --- a/packages/core/content-type-builder/admin/src/components/CustomRadioGroup/components.js +++ b/packages/core/content-type-builder/admin/src/components/CustomRadioGroup/components.js @@ -1,6 +1,6 @@ import styled from 'styled-components'; import { Stack } from '@strapi/design-system/Stack'; -import { Text } from '@strapi/design-system/Text'; +import { Typography } from '@strapi/design-system/Typography'; import { inputFocusStyle } from '@strapi/design-system/themes'; const Wrapper = styled(Stack)` @@ -60,7 +60,7 @@ const Wrapper = styled(Stack)` .container input:checked ~ div { background: ${({ theme }) => theme.colors.primary100}; - ${Text} { + ${Typography} { color: ${({ theme }) => theme.colors.primary600}; } border: 1px solid ${({ theme }) => theme.colors.primary200}; diff --git a/packages/core/content-type-builder/admin/src/components/CustomRadioGroup/index.js b/packages/core/content-type-builder/admin/src/components/CustomRadioGroup/index.js index 169650b691..54aebeb1f6 100644 --- a/packages/core/content-type-builder/admin/src/components/CustomRadioGroup/index.js +++ b/packages/core/content-type-builder/admin/src/components/CustomRadioGroup/index.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { useIntl } from 'react-intl'; -import { Text } from '@strapi/design-system/Text'; +import { Typography } from '@strapi/design-system/Typography'; import { Box } from '@strapi/design-system/Box'; import { Flex } from '@strapi/design-system/Flex'; import { Stack } from '@strapi/design-system/Stack'; @@ -12,9 +12,9 @@ const CustomRadioGroup = ({ intlLabel, name, onChange, radios, value }) => { return ( - + {formatMessage(intlLabel)} - + {radios.map(radio => { return ( @@ -35,10 +35,10 @@ const CustomRadioGroup = ({ intlLabel, name, onChange, radios, value }) => { - {formatMessage(radio.title)} - + {formatMessage(radio.title)} + {formatMessage(radio.description)} - + diff --git a/packages/core/content-type-builder/admin/src/components/DraftAndPublishToggle/index.js b/packages/core/content-type-builder/admin/src/components/DraftAndPublishToggle/index.js index 6c5144b85e..08bf7d198d 100644 --- a/packages/core/content-type-builder/admin/src/components/DraftAndPublishToggle/index.js +++ b/packages/core/content-type-builder/admin/src/components/DraftAndPublishToggle/index.js @@ -6,16 +6,21 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; +import styled from 'styled-components'; import { useIntl } from 'react-intl'; import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system/Dialog'; import { ToggleInput } from '@strapi/design-system/ToggleInput'; -import { Text } from '@strapi/design-system/Text'; +import { Typography } from '@strapi/design-system/Typography'; import { Flex } from '@strapi/design-system/Flex'; import { Stack } from '@strapi/design-system/Stack'; import { Button } from '@strapi/design-system/Button'; import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle'; import { getTrad } from '../../utils'; +const TypographyTextAlign = styled(Typography)` + text-align: center; +`; + const DraftAndPublishToggle = ({ description, disabled, @@ -81,22 +86,22 @@ const DraftAndPublishToggle = ({ }> - - + + {formatMessage({ id: getTrad('popUpWarning.draft-publish.message'), defaultMessage: 'If you disable the Draft/Publish system, your drafts will be deleted.', })} - + - - + + {formatMessage({ id: getTrad('popUpWarning.draft-publish.second-message'), defaultMessage: 'Are you sure you want to disable it?', })} - + From ab6f64b9b650b37a08dffc6ee4c1810be2fa31bb Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Thu, 18 Nov 2021 11:17:10 +0100 Subject: [PATCH 3/5] dz list, form modal, list --- .../src/components/DynamicZoneList/index.js | 6 ++--- .../admin/src/components/FormModal/index.js | 6 ++--- .../src/components/FormModalHeader/index.js | 6 ++--- .../admin/src/components/List/index.js | 26 +++++++++---------- 4 files changed, 22 insertions(+), 22 deletions(-) diff --git a/packages/core/content-type-builder/admin/src/components/DynamicZoneList/index.js b/packages/core/content-type-builder/admin/src/components/DynamicZoneList/index.js index a88db852b0..aaa55df08d 100644 --- a/packages/core/content-type-builder/admin/src/components/DynamicZoneList/index.js +++ b/packages/core/content-type-builder/admin/src/components/DynamicZoneList/index.js @@ -11,7 +11,7 @@ import { pxToRem } from '@strapi/helper-plugin'; import Plus from '@strapi/icons/Plus'; import { Box } from '@strapi/design-system/Box'; import { Stack } from '@strapi/design-system/Stack'; -import { Text } from '@strapi/design-system/Text'; +import { Typography } from '@strapi/design-system/Typography'; import { useIntl } from 'react-intl'; import styled from 'styled-components'; import useDataManager from '../../hooks/useDataManager'; @@ -80,12 +80,12 @@ function DynamicZoneList({ customRowComponent, components, addComponent, name, t )} diff --git a/packages/core/content-type-builder/admin/src/components/FormModal/index.js b/packages/core/content-type-builder/admin/src/components/FormModal/index.js index 5a0f2e4c9d..934f390c60 100644 --- a/packages/core/content-type-builder/admin/src/components/FormModal/index.js +++ b/packages/core/content-type-builder/admin/src/components/FormModal/index.js @@ -17,7 +17,7 @@ import { Box } from '@strapi/design-system/Box'; import { Button } from '@strapi/design-system/Button'; import { Divider } from '@strapi/design-system/Divider'; import { ModalLayout, ModalBody, ModalFooter } from '@strapi/design-system/ModalLayout'; -import { H2 } from '@strapi/design-system/Text'; +import { Typography } from '@strapi/design-system/Typography'; import { Tabs, Tab, TabGroup, TabPanels, TabPanel } from '@strapi/design-system/Tabs'; import { Flex } from '@strapi/design-system/Flex'; import { Stack } from '@strapi/design-system/Stack'; @@ -922,7 +922,7 @@ const FormModal = () => { }} > -

+ {formatMessage( { id: getModalTitleSubHeader({ @@ -944,7 +944,7 @@ const FormModal = () => { step, } )} -

+ {formatMessage({ diff --git a/packages/core/content-type-builder/admin/src/components/FormModalHeader/index.js b/packages/core/content-type-builder/admin/src/components/FormModalHeader/index.js index 7eecf161d4..501384dd01 100644 --- a/packages/core/content-type-builder/admin/src/components/FormModalHeader/index.js +++ b/packages/core/content-type-builder/admin/src/components/FormModalHeader/index.js @@ -13,7 +13,7 @@ import { ModalHeader } from '@strapi/design-system/ModalLayout'; import { Box } from '@strapi/design-system/Box'; import { Flex } from '@strapi/design-system/Flex'; import { Stack } from '@strapi/design-system/Stack'; -import { ButtonText } from '@strapi/design-system/Text'; +import { Typography } from '@strapi/design-system/Typography'; import useDataManager from '../../hooks/useDataManager'; import getTrad from '../../utils/getTrad'; import AttributeIcon from '../AttributeIcon'; @@ -66,9 +66,9 @@ const FormModalHeader = ({ - + {formatMessage({ id: headerId }, { name: displayName })} - + diff --git a/packages/core/content-type-builder/admin/src/components/List/index.js b/packages/core/content-type-builder/admin/src/components/List/index.js index c94b9a63db..8ecd9ab109 100644 --- a/packages/core/content-type-builder/admin/src/components/List/index.js +++ b/packages/core/content-type-builder/admin/src/components/List/index.js @@ -10,7 +10,7 @@ import PropTypes from 'prop-types'; import { EmptyBodyTable, useTracking } from '@strapi/helper-plugin'; import { Box } from '@strapi/design-system/Box'; import { Button } from '@strapi/design-system/Button'; -import { TableLabel } from '@strapi/design-system/Text'; +import { Typography } from '@strapi/design-system/Typography'; import { Table, Thead, Tr, Th, TFooter } from '@strapi/design-system/Table'; import Plus from '@strapi/icons/Plus'; import { useIntl } from 'react-intl'; @@ -55,14 +55,14 @@ function List({ - + {formatMessage({ id: 'table.headers.name', defaultMessage: 'Name' })} - + - + {formatMessage({ id: 'table.headers.type', defaultMessage: 'Type' })} - + @@ -83,14 +83,14 @@ function List({ - + {formatMessage({ id: 'table.headers.name', defaultMessage: 'Name' })} - + - + {formatMessage({ id: 'table.headers.type', defaultMessage: 'Type' })} - + @@ -133,14 +133,14 @@ function List({ - + {formatMessage({ id: 'table.headers.name', defaultMessage: 'Name' })} - + - + {formatMessage({ id: 'table.headers.type', defaultMessage: 'Type' })} - + From c0115497bbdc7d678852f10700b43b60723d3704 Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Thu, 18 Nov 2021 11:22:34 +0100 Subject: [PATCH 4/5] list row, nested footer, relation, tab form --- .../admin/src/components/ListRow/index.js | 12 ++++++------ .../admin/src/components/NestedTFooter/index.js | 6 +++--- .../src/components/Relation/RelationField/index.js | 6 +++--- .../Relation/RelationNaturePicker/index.js | 10 +++++----- .../admin/src/components/TabForm/index.js | 6 ++++-- 5 files changed, 21 insertions(+), 19 deletions(-) diff --git a/packages/core/content-type-builder/admin/src/components/ListRow/index.js b/packages/core/content-type-builder/admin/src/components/ListRow/index.js index 4d554064a2..02c59ecb2b 100644 --- a/packages/core/content-type-builder/admin/src/components/ListRow/index.js +++ b/packages/core/content-type-builder/admin/src/components/ListRow/index.js @@ -6,7 +6,7 @@ import { useIntl } from 'react-intl'; import { IconButton } from '@strapi/design-system/IconButton'; import { Flex } from '@strapi/design-system/Flex'; import { Stack } from '@strapi/design-system/Stack'; -import { Text } from '@strapi/design-system/Text'; +import { Typography } from '@strapi/design-system/Typography'; import Pencil from '@strapi/icons/Pencil'; import Trash from '@strapi/icons/Trash'; import { stopPropagation, onRowClick } from '@strapi/helper-plugin'; @@ -94,12 +94,12 @@ function ListRow({ {loopNumber !== 0 && } - {upperFirst(name)} + {upperFirst(name)} {target ? ( - + {formatMessage({ id: getTrad( `modelPage.attribute.${isMorph ? 'relation-polymorphic' : 'relationWith'}` @@ -116,9 +116,9 @@ function ListRow({ defaultMessage: 'from', })}: ${isPluginContentType})`} - + ) : ( - + {formatMessage({ id: getTrad(`attribute.${readableType}`), defaultMessage: type, @@ -129,7 +129,7 @@ function ListRow({ id: getTrad('component.repeatable'), defaultMessage: '(repeatable)', })} - + )} diff --git a/packages/core/content-type-builder/admin/src/components/NestedTFooter/index.js b/packages/core/content-type-builder/admin/src/components/NestedTFooter/index.js index 5ca0e58080..551d63feae 100644 --- a/packages/core/content-type-builder/admin/src/components/NestedTFooter/index.js +++ b/packages/core/content-type-builder/admin/src/components/NestedTFooter/index.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Flex } from '@strapi/design-system/Flex'; import { Box } from '@strapi/design-system/Box'; -import { Text } from '@strapi/design-system/Text'; +import { Typography } from '@strapi/design-system/Typography'; import styled from 'styled-components'; const IconBox = styled(Box)` @@ -40,9 +40,9 @@ const NestedTFooter = ({ children, icon, color, ...props }) => { {icon} - + {children} - + diff --git a/packages/core/content-type-builder/admin/src/components/Relation/RelationField/index.js b/packages/core/content-type-builder/admin/src/components/Relation/RelationField/index.js index 9a84638cda..fadf4ba57a 100644 --- a/packages/core/content-type-builder/admin/src/components/Relation/RelationField/index.js +++ b/packages/core/content-type-builder/admin/src/components/Relation/RelationField/index.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { Box } from '@strapi/design-system/Box'; import { Flex } from '@strapi/design-system/Flex'; import { Divider } from '@strapi/design-system/Divider'; -import { Text } from '@strapi/design-system/Text'; +import { Typography } from '@strapi/design-system/Typography'; import { GenericInput } from '@strapi/helper-plugin'; import getTrad from '../../../utils/getTrad'; import RelationTargetPicker from './RelationTargetPicker'; @@ -23,9 +23,9 @@ const RelationFormBox = ({ {isMain ? ( - + {header} - + ) : ( - {truncate(leftDisplayedValue, { length: 24 })}  - + {truncate(leftDisplayedValue, { length: 24 })}  + {formatMessage({ id: getTrad(`relation.${relationType}`) })}  - - {truncate(rightDisplayedValue, { length: 24 })} + + {truncate(rightDisplayedValue, { length: 24 })} ); diff --git a/packages/core/content-type-builder/admin/src/components/TabForm/index.js b/packages/core/content-type-builder/admin/src/components/TabForm/index.js index 7f61389c23..e3087df06a 100644 --- a/packages/core/content-type-builder/admin/src/components/TabForm/index.js +++ b/packages/core/content-type-builder/admin/src/components/TabForm/index.js @@ -11,7 +11,7 @@ import get from 'lodash/get'; import { GenericInput } from '@strapi/helper-plugin'; import { Box } from '@strapi/design-system/Box'; import { Grid, GridItem } from '@strapi/design-system/Grid'; -import { H3 } from '@strapi/design-system/Text'; +import { Typography } from '@strapi/design-system/Typography'; /* eslint-disable react/no-array-index-key */ const TabForm = ({ form, formErrors, genericInputProps, modifiedData, onChange }) => { @@ -27,7 +27,9 @@ const TabForm = ({ form, formErrors, genericInputProps, modifiedData, onChange } {section.sectionTitle && ( -

{formatMessage(section.sectionTitle)}

+ + {formatMessage(section.sectionTitle)} + )} From fc2d829c1ed2907422e81d7148fb66a4569b275f Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Thu, 18 Nov 2021 11:24:45 +0100 Subject: [PATCH 5/5] updated list view snapshot --- .../tests/__snapshots__/index.test.js.snap | 978 +++++++++--------- 1 file changed, 499 insertions(+), 479 deletions(-) diff --git a/packages/core/content-type-builder/admin/src/pages/ListView/tests/__snapshots__/index.test.js.snap b/packages/core/content-type-builder/admin/src/pages/ListView/tests/__snapshots__/index.test.js.snap index 5814eb54fa..f9ae83a619 100644 --- a/packages/core/content-type-builder/admin/src/pages/ListView/tests/__snapshots__/index.test.js.snap +++ b/packages/core/content-type-builder/admin/src/pages/ListView/tests/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` renders and matches the snapshot 1`] = ` -.c79 { +.c81 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -24,35 +24,39 @@ exports[` renders and matches the snapshot 1`] = ` padding-left: 24px; } -.c41 { +.c40 { padding-right: 0px; padding-left: 24px; } -.c44 { +.c43 { padding-top: 16px; padding-bottom: 16px; } -.c47 { +.c46 { background: #dcdce4; } -.c49 { +.c48 { padding-left: 12px; } -.c52 { +.c51 { padding-left: 40px; } -.c59 { +.c58 { padding-right: 16px; padding-left: 16px; border-radius: borderRadius; } -.c68 { +.c63 { + max-width: calc(8.75rem - 32px); +} + +.c69 { background: #d9d8ff; } @@ -366,7 +370,7 @@ exports[` renders and matches the snapshot 1`] = ` align-items: center; } -.c46 { +.c45 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -380,7 +384,7 @@ exports[` renders and matches the snapshot 1`] = ` align-items: center; } -.c38 { +.c37 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -394,21 +398,21 @@ exports[` renders and matches the snapshot 1`] = ` outline: none; } -.c38 svg { +.c37 svg { height: 12px; width: 12px; } -.c38 svg > g, -.c38 svg path { +.c37 svg > g, +.c37 svg path { fill: #ffffff; } -.c38[aria-disabled='true'] { +.c37[aria-disabled='true'] { pointer-events: none; } -.c38:after { +.c37:after { -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; @@ -423,11 +427,11 @@ exports[` renders and matches the snapshot 1`] = ` border: 2px solid transparent; } -.c38:focus-visible { +.c37:focus-visible { outline: none; } -.c38:focus-visible:after { +.c37:focus-visible:after { border-radius: 8px; content: ''; position: absolute; @@ -438,7 +442,7 @@ exports[` renders and matches the snapshot 1`] = ` border: 2px solid #4945ff; } -.c39 { +.c38 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -456,26 +460,26 @@ exports[` renders and matches the snapshot 1`] = ` border: none; } -.c39 svg > g, -.c39 svg path { +.c38 svg > g, +.c38 svg path { fill: #8e8ea9; } -.c39:hover svg > g, -.c39:hover svg path { +.c38:hover svg > g, +.c38:hover svg path { fill: #666687; } -.c39:active svg > g, -.c39:active svg path { +.c38:active svg > g, +.c38:active svg path { fill: #a5a5ba; } -.c39[aria-disabled='true'] { +.c38[aria-disabled='true'] { background-color: #eaeaef; } -.c39[aria-disabled='true'] svg path { +.c38[aria-disabled='true'] svg path { fill: #666687; } @@ -516,7 +520,7 @@ exports[` renders and matches the snapshot 1`] = ` margin-top: 16px; } -.c55 { +.c54 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -526,12 +530,12 @@ exports[` renders and matches the snapshot 1`] = ` flex-direction: column; } -.c55 > * { +.c54 > * { margin-top: 0; margin-bottom: 0; } -.c55 > * + * { +.c54 > * + * { margin-top: 4px; } @@ -553,33 +557,33 @@ exports[` renders and matches the snapshot 1`] = ` margin-left: 16px; } -.c37 > * { +.c36 > * { margin-left: 0; margin-right: 0; } -.c37 > * + * { +.c36 > * + * { margin-left: 4px; } -.c70 { +.c72 { background: #eaeaef; } -.c72 { +.c74 { background: #f0f0ff; padding: 20px; } -.c75 { +.c77 { background: #d9d8ff; } -.c77 { +.c79 { padding-left: 12px; } -.c74 { +.c76 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -593,20 +597,20 @@ exports[` renders and matches the snapshot 1`] = ` align-items: center; } -.c71 { +.c73 { height: 1px; border: none; margin: 0; } -.c78 { +.c80 { font-weight: 600; color: #4945ff; font-size: 0.75rem; line-height: 1.33; } -.c76 { +.c78 { height: 1.5rem; width: 1.5rem; border-radius: 50%; @@ -624,22 +628,75 @@ exports[` renders and matches the snapshot 1`] = ` align-items: center; } -.c76 svg { +.c78 svg { height: 0.625rem; width: 0.625rem; } -.c76 svg path { +.c78 svg path { fill: #4945ff; } -.c73 { +.c75 { border-radius: 0 0 4px 4px; display: block; width: 100%; border: none; } +.c29 { + color: #666687; + font-weight: 600; + font-size: 0.6875rem; + line-height: 1.45; + text-transform: uppercase; +} + +.c34 { + font-weight: 600; + color: #32324d; + font-size: 0.875rem; + line-height: 1.43; +} + +.c35 { + color: #32324d; + font-size: 0.875rem; + line-height: 1.43; +} + +.c49 { + font-weight: 600; + color: #666687; + font-size: 0.75rem; + line-height: 1.33; +} + +.c57 { + font-weight: 600; + color: #4945ff; + font-size: 0.875rem; + line-height: 1.43; +} + +.c64 { + font-weight: 600; + color: #32324d; + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-size: 0.75rem; + line-height: 1.33; +} + +.c71 { + font-weight: 600; + color: #4945ff; + font-size: 0.75rem; + line-height: 1.33; +} + .c5 { color: #4945ff; font-weight: 600; @@ -779,58 +836,6 @@ exports[` renders and matches the snapshot 1`] = ` line-height: 1.5; } -.c28 { - color: #666687; - font-size: 0.875rem; - line-height: 1.43; -} - -.c35 { - font-weight: 500; - font-size: 0.875rem; - line-height: 1.43; - color: #32324d; -} - -.c36 { - font-weight: 400; - font-size: 0.875rem; - line-height: 1.43; - color: #32324d; -} - -.c50 { - font-weight: 500; - font-size: 0.75rem; - line-height: 1.33; - color: #666687; -} - -.c58 { - font-weight: 500; - font-size: 0.75rem; - line-height: 1.33; - color: #4945ff; -} - -.c63 { - font-weight: 500; - font-size: 0.75rem; - line-height: 1.33; - color: #32324d; - display: inline-block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.c29 { - font-weight: 600; - font-size: 0.6875rem; - line-height: 1.45; - text-transform: uppercase; -} - .c62 { width: 2rem !important; height: 2rem !important; @@ -843,23 +848,23 @@ exports[` renders and matches the snapshot 1`] = ` fill: #8e8ea9; } -.c65 { +.c66 { position: absolute; display: none; top: 5px; right: 0.5rem; } -.c65 svg { +.c66 svg { width: 0.625rem; height: 0.625rem; } -.c65 svg path { +.c66 svg path { fill: #4945ff; } -.c60 { +.c59 { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -883,51 +888,58 @@ exports[` renders and matches the snapshot 1`] = ` align-items: center; } -.c60.active, -.c60:hover { +.c59.active, +.c59:hover { border: 1px solid #d9d8ff; background: #f0f0ff; } -.c60.active .c64, -.c60:hover .c64 { +.c59.active .c65, +.c59:hover .c65 { display: block; } -.c60.active .c61, -.c60:hover .c61 { +.c59.active .c61, +.c59:hover .c61 { background: #d9d8ff; } -.c60.active .c61 path, -.c60:hover .c61 path { +.c59.active .c61 path, +.c59:hover .c61 path { fill: #4945ff; } -.c60.active .c34, -.c60:hover .c34 { +.c59.active .c28, +.c59:hover .c28 { color: #4945ff; } -.c40.component-row, -.c40.dynamiczone-row { +.c60 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c39.component-row, +.c39.dynamiczone-row { position: relative; border-top: none !important; } -.c40.component-row table tr:first-child, -.c40.dynamiczone-row table tr:first-child { +.c39.component-row table tr:first-child, +.c39.dynamiczone-row table tr:first-child { border-top: none; } -.c40.component-row > td:first-of-type, -.c40.dynamiczone-row > td:first-of-type { +.c39.component-row > td:first-of-type, +.c39.dynamiczone-row > td:first-of-type { padding: 0 0 0 1.25rem; position: relative; } -.c40.component-row > td:first-of-type::before, -.c40.dynamiczone-row > td:first-of-type::before { +.c39.component-row > td:first-of-type::before, +.c39.dynamiczone-row > td:first-of-type::before { content: ''; width: 0.25rem; height: calc(100% - 15px); @@ -938,29 +950,29 @@ exports[` renders and matches the snapshot 1`] = ` background: #eaeaef; } -.c40.dynamiczone-row > td:first-of-type { +.c39.dynamiczone-row > td:first-of-type { padding: 0; } -.c51.component-row, -.c51.dynamiczone-row { +.c50.component-row, +.c50.dynamiczone-row { position: relative; border-top: none !important; } -.c51.component-row table tr:first-child, -.c51.dynamiczone-row table tr:first-child { +.c50.component-row table tr:first-child, +.c50.dynamiczone-row table tr:first-child { border-top: none; } -.c51.component-row > td:first-of-type, -.c51.dynamiczone-row > td:first-of-type { +.c50.component-row > td:first-of-type, +.c50.dynamiczone-row > td:first-of-type { padding: 0 0 0 1.25rem; position: relative; } -.c51.component-row > td:first-of-type::before, -.c51.dynamiczone-row > td:first-of-type::before { +.c50.component-row > td:first-of-type::before, +.c50.dynamiczone-row > td:first-of-type::before { content: ''; width: 0.25rem; height: calc(100% - 15px); @@ -971,11 +983,11 @@ exports[` renders and matches the snapshot 1`] = ` background-color: #d9d8ff; } -.c51.dynamiczone-row > td:first-of-type { +.c50.dynamiczone-row > td:first-of-type { padding: 0; } -.c57 { +.c56 { width: 2rem; height: 2rem; padding: 0.5625rem; @@ -983,11 +995,11 @@ exports[` renders and matches the snapshot 1`] = ` background: #f0f0ff; } -.c57 path { +.c56 path { fill: #4945ff; } -.c53 { +.c52 { height: 5.625rem; position: absolute; width: 100%; @@ -995,16 +1007,16 @@ exports[` renders and matches the snapshot 1`] = ` left: 0; } -.c54 { +.c53 { width: 100%; overflow-x: auto; } -.c66 { +.c67 { padding-top: 5.625rem; } -.c56 { +.c55 { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -1055,7 +1067,7 @@ exports[` renders and matches the snapshot 1`] = ` outline-offset: -4px; } -.c48 { +.c47 { height: 1.5rem; width: 1.5rem; border-radius: 50%; @@ -1073,16 +1085,16 @@ exports[` renders and matches the snapshot 1`] = ` align-items: center; } -.c48 svg { +.c47 svg { height: 0.625rem; width: 0.625rem; } -.c48 svg path { +.c47 svg path { fill: #666687; } -.c69 { +.c70 { height: 1.5rem; width: 1.5rem; border-radius: 50%; @@ -1100,16 +1112,16 @@ exports[` renders and matches the snapshot 1`] = ` align-items: center; } -.c69 svg { +.c70 svg { height: 0.625rem; width: 0.625rem; } -.c69 svg path { +.c70 svg path { fill: #4945ff; } -.c45 { +.c44 { border-radius: 0 0 4px 4px; display: block; width: 100%; @@ -1118,20 +1130,20 @@ exports[` renders and matches the snapshot 1`] = ` left: -0.25rem; } -.c42 { +.c41 { position: absolute; left: -1.125rem; top: 0px; } -.c42:before { +.c41:before { content: ''; width: 0.25rem; height: 0.75rem; display: block; } -.c43 { +.c42 { position: relative; -webkit-flex-shrink: 0; -ms-flex-negative: 0; @@ -1141,11 +1153,11 @@ exports[` renders and matches the snapshot 1`] = ` transform: translate(-0.5px,-1px); } -.c43 * { +.c42 * { fill: #eaeaef; } -.c67 { +.c68 { position: relative; -webkit-flex-shrink: 0; -ms-flex-negative: 0; @@ -1155,7 +1167,7 @@ exports[` renders and matches the snapshot 1`] = ` transform: translate(-0.5px,-1px); } -.c67 * { +.c68 * { fill: #d9d8ff; } @@ -1431,7 +1443,7 @@ exports[` renders and matches the snapshot 1`] = ` /> Postal_code @@ -1439,7 +1451,7 @@ exports[` renders and matches the snapshot 1`] = ` Text   @@ -1452,13 +1464,13 @@ exports[` renders and matches the snapshot 1`] = ` role="button" >