From f4964ef3908c309f0bed8cf128fa5aa20bc559c3 Mon Sep 17 00:00:00 2001 From: HichamELBSI Date: Thu, 6 Jan 2022 10:24:57 +0100 Subject: [PATCH 1/2] Add DZ description Signed-off-by: HichamELBSI --- .../DynamicZone/components/DzLabel/index.js | 28 +- .../tests/__snapshots__/index.test.js.snap | 276 +++++++++++++----- .../components/DynamicZone/index.js | 1 + .../admin/src/components/ListRow/index.js | 3 +- .../tests/__snapshots__/index.test.js.snap | 70 ++--- 5 files changed, 256 insertions(+), 122 deletions(-) diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/DzLabel/index.js b/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/DzLabel/index.js index 04a9b216eb..f6e1ccc888 100644 --- a/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/DzLabel/index.js +++ b/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/DzLabel/index.js @@ -17,7 +17,7 @@ const StyledBox = styled(Box)` border-radius: ${pxToRem(26)}; `; -const DzLabel = ({ label, labelAction, name, numberOfComponents, required }) => { +const DzLabel = ({ label, labelAction, name, numberOfComponents, required, description }) => { const { formatMessage } = useIntl(); const intlLabel = formatMessage({ id: label || name, defaultMessage: label || name }); @@ -33,12 +33,24 @@ const DzLabel = ({ label, labelAction, name, numberOfComponents, required }) => shadow="filterShadow" color="neutral500" > - - - {intlLabel} ({numberOfComponents}) - - {required && *} - {labelAction && {labelAction}} + + + + {intlLabel}  + + + ({numberOfComponents}) + + {required && *} + {labelAction && {labelAction}} + + {description && ( + + + {description} + + + )} @@ -47,12 +59,14 @@ const DzLabel = ({ label, labelAction, name, numberOfComponents, required }) => }; DzLabel.defaultProps = { + description: undefined, label: '', labelAction: undefined, required: false, }; DzLabel.propTypes = { + description: PropTypes.string, label: PropTypes.string, labelAction: PropTypes.element, name: PropTypes.string.isRequired, diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/DzLabel/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/DzLabel/tests/__snapshots__/index.test.js.snap index 393c8fdfb7..2985529a2a 100644 --- a/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/DzLabel/tests/__snapshots__/index.test.js.snap +++ b/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/DzLabel/tests/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` displays the labelAction correctly 1`] = ` -.c7 { +.c10 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -23,10 +23,14 @@ exports[` displays the labelAction correctly 1`] = ` box-shadow: 0px 1px 4px rgba(33,33,52,0.1); } -.c5 { +.c8 { padding-left: 4px; } +.c4 { + max-width: 22.25rem; +} + .c0 { display: -webkit-box; display: -webkit-flex; @@ -46,6 +50,24 @@ exports[` displays the labelAction correctly 1`] = ` } .c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -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; +} + +.c5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -59,32 +81,41 @@ exports[` displays the labelAction correctly 1`] = ` align-items: center; } -.c4 { +.c6 { font-weight: 600; - font-size: 0.6875rem; - line-height: 1.14; color: #666687; - font-size: 0.875rem; - line-height: 1.43; + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-size: 0.75rem; + line-height: 1.33; +} + +.c7 { + font-weight: 600; + color: #666687; + font-size: 0.75rem; + line-height: 1.33; } .c2 { border-radius: 1.625rem; } -.c6 { +.c9 { border: none; padding: 0; background: transparent; } -.c6 svg { +.c9 svg { width: 12px; height: 12px; fill: #8e8ea9; } -.c6 svg path { +.c9 svg path { fill: #8e8ea9; } @@ -101,55 +132,64 @@ exports[` displays the labelAction correctly 1`] = `
- - dz -  ( - 1 - ) -
- - + + dz +   + + ( + 1 + ) + +
+ + + +

displays the labelAction correctly 1`] = ` `; exports[` displays the name of the dz when the label is empty 1`] = ` -.c5 { +.c8 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -196,6 +236,10 @@ exports[` displays the name of the dz when the label is empty 1`] = ` box-shadow: 0px 1px 4px rgba(33,33,52,0.1); } +.c4 { + max-width: 22.25rem; +} + .c0 { display: -webkit-box; display: -webkit-flex; @@ -215,6 +259,24 @@ exports[` displays the name of the dz when the label is empty 1`] = ` } .c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -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; +} + +.c5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -228,13 +290,22 @@ exports[` displays the name of the dz when the label is empty 1`] = ` align-items: center; } -.c4 { +.c6 { font-weight: 600; - font-size: 0.6875rem; - line-height: 1.14; color: #666687; - font-size: 0.875rem; - line-height: 1.43; + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-size: 0.75rem; + line-height: 1.33; +} + +.c7 { + font-weight: 600; + color: #666687; + font-size: 0.75rem; + line-height: 1.33; } .c2 { @@ -254,20 +325,29 @@ exports[` displays the name of the dz when the label is empty 1`] = `

- - test -  ( - 1 - ) - + + test +   + + + ( + 1 + ) + +

displays the name of the dz when the label is empty 1`] = ` `; exports[` renders and matches the snapshot 1`] = ` -.c5 { +.c8 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -314,6 +394,10 @@ exports[` renders and matches the snapshot 1`] = ` box-shadow: 0px 1px 4px rgba(33,33,52,0.1); } +.c4 { + max-width: 22.25rem; +} + .c0 { display: -webkit-box; display: -webkit-flex; @@ -333,6 +417,24 @@ exports[` renders and matches the snapshot 1`] = ` } .c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -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; +} + +.c5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -346,13 +448,22 @@ exports[` renders and matches the snapshot 1`] = ` align-items: center; } -.c4 { +.c6 { font-weight: 600; - font-size: 0.6875rem; - line-height: 1.14; color: #666687; - font-size: 0.875rem; - line-height: 1.43; + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-size: 0.75rem; + line-height: 1.33; +} + +.c7 { + font-weight: 600; + color: #666687; + font-size: 0.75rem; + line-height: 1.33; } .c2 { @@ -372,20 +483,29 @@ exports[` renders and matches the snapshot 1`] = `

- - dz -  ( - 1 - ) - + + dz +   + + + ( + 1 + ) + +

0 && ( } - {upperFirst(name)} + {name} 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 dbb83bda25..abba82567f 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 @@ -1445,7 +1445,7 @@ exports[` renders and matches the snapshot 1`] = ` - Postal_code + postal_code

@@ -1549,7 +1549,7 @@ exports[` renders and matches the snapshot 1`] = ` - Categories + categories @@ -1663,7 +1663,7 @@ exports[` renders and matches the snapshot 1`] = ` - Cover + cover @@ -1771,7 +1771,7 @@ exports[` renders and matches the snapshot 1`] = ` - Images + images @@ -1877,7 +1877,7 @@ exports[` renders and matches the snapshot 1`] = ` - City + city @@ -1985,7 +1985,7 @@ exports[` renders and matches the snapshot 1`] = ` - Json + json @@ -2087,7 +2087,7 @@ exports[` renders and matches the snapshot 1`] = ` - Slug + slug @@ -2199,7 +2199,7 @@ exports[` renders and matches the snapshot 1`] = ` - Notrepeat_req + notrepeat_req @@ -2338,7 +2338,7 @@ exports[` renders and matches the snapshot 1`] = ` - Name + name @@ -2463,7 +2463,7 @@ exports[` renders and matches the snapshot 1`] = ` - Popo + popo @@ -2588,7 +2588,7 @@ exports[` renders and matches the snapshot 1`] = ` - Poq + poq @@ -2880,7 +2880,7 @@ exports[` renders and matches the snapshot 1`] = ` - Dede + dede @@ -3005,7 +3005,7 @@ exports[` renders and matches the snapshot 1`] = ` - Dada + dada @@ -3130,7 +3130,7 @@ exports[` renders and matches the snapshot 1`] = ` - Papi + papi @@ -3673,7 +3673,7 @@ exports[` renders and matches the snapshot 1`] = ` - Name + name @@ -3798,7 +3798,7 @@ exports[` renders and matches the snapshot 1`] = ` - Mail + mail @@ -3923,7 +3923,7 @@ exports[` renders and matches the snapshot 1`] = ` - Phone + phone @@ -4112,7 +4112,7 @@ exports[` renders and matches the snapshot 1`] = ` - Name + name @@ -4237,7 +4237,7 @@ exports[` renders and matches the snapshot 1`] = ` - Description + description @@ -4362,7 +4362,7 @@ exports[` renders and matches the snapshot 1`] = ` - Price + price @@ -4489,7 +4489,7 @@ exports[` renders and matches the snapshot 1`] = ` - Picture + picture @@ -4616,7 +4616,7 @@ exports[` renders and matches the snapshot 1`] = ` - Very_long_description + very_long_description @@ -4739,7 +4739,7 @@ exports[` renders and matches the snapshot 1`] = ` - Categories + categories @@ -4934,7 +4934,7 @@ exports[` renders and matches the snapshot 1`] = ` - Label + label @@ -5059,7 +5059,7 @@ exports[` renders and matches the snapshot 1`] = ` - Time + time @@ -5190,7 +5190,7 @@ exports[` renders and matches the snapshot 1`] = ` - Dishrep + dishrep @@ -5330,7 +5330,7 @@ exports[` renders and matches the snapshot 1`] = ` - Name + name @@ -5455,7 +5455,7 @@ exports[` renders and matches the snapshot 1`] = ` - Description + description @@ -5580,7 +5580,7 @@ exports[` renders and matches the snapshot 1`] = ` - Price + price @@ -5707,7 +5707,7 @@ exports[` renders and matches the snapshot 1`] = ` - Picture + picture @@ -5834,7 +5834,7 @@ exports[` renders and matches the snapshot 1`] = ` - Very_long_description + very_long_description @@ -5957,7 +5957,7 @@ exports[` renders and matches the snapshot 1`] = ` - Categories + categories @@ -6193,7 +6193,7 @@ exports[` renders and matches the snapshot 1`] = ` - Name + name @@ -6320,7 +6320,7 @@ exports[` renders and matches the snapshot 1`] = ` - Media + media @@ -6445,7 +6445,7 @@ exports[` renders and matches the snapshot 1`] = ` - Is_available + is_available From ef2e9a27e962bca04257b6554addbd1937ee4a80 Mon Sep 17 00:00:00 2001 From: HichamELBSI Date: Thu, 6 Jan 2022 11:59:20 +0100 Subject: [PATCH 2/2] Fix intlDescription Signed-off-by: HichamELBSI --- .../DynamicZone/components/DzLabel/index.js | 13 ++++++++----- .../components/DynamicZone/index.js | 17 ++++++----------- 2 files changed, 14 insertions(+), 16 deletions(-) diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/DzLabel/index.js b/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/DzLabel/index.js index f6e1ccc888..cfdaff39d5 100644 --- a/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/DzLabel/index.js +++ b/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/DzLabel/index.js @@ -17,7 +17,7 @@ const StyledBox = styled(Box)` border-radius: ${pxToRem(26)}; `; -const DzLabel = ({ label, labelAction, name, numberOfComponents, required, description }) => { +const DzLabel = ({ label, labelAction, name, numberOfComponents, required, intlDescription }) => { const { formatMessage } = useIntl(); const intlLabel = formatMessage({ id: label || name, defaultMessage: label || name }); @@ -44,10 +44,10 @@ const DzLabel = ({ label, labelAction, name, numberOfComponents, required, descr {required && *} {labelAction && {labelAction}} - {description && ( + {intlDescription && ( - {description} + {formatMessage(intlDescription)} )} @@ -59,14 +59,17 @@ const DzLabel = ({ label, labelAction, name, numberOfComponents, required, descr }; DzLabel.defaultProps = { - description: undefined, + intlDescription: undefined, label: '', labelAction: undefined, required: false, }; DzLabel.propTypes = { - description: PropTypes.string, + intlDescription: PropTypes.shape({ + id: PropTypes.string.isRequired, + defaultMessage: PropTypes.string.isRequired, + }), label: PropTypes.string, labelAction: PropTypes.element, name: PropTypes.string.isRequired, diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicZone/index.js b/packages/core/admin/admin/src/content-manager/components/DynamicZone/index.js index 8fb8e53ea9..2908f4a09e 100644 --- a/packages/core/admin/admin/src/content-manager/components/DynamicZone/index.js +++ b/packages/core/admin/admin/src/content-manager/components/DynamicZone/index.js @@ -39,6 +39,9 @@ const DynamicZone = ({ const [isOpen, setIsOpen] = useState(false); const [shouldOpenAddedComponent, setShouldOpenAddedComponent] = useState(false); const dynamicDisplayedComponentsLength = dynamicDisplayedComponents.length; + const intlDescription = metadatas.description + ? { id: metadatas.description, defaultMessage: metadatas.description } + : null; const [componentCollapses, setComponentsCollapses] = useState( createCollapses(dynamicDisplayedComponentsLength) @@ -159,11 +162,7 @@ const DynamicZone = ({ if (!isFieldAllowed && isCreatingEntry) { return ( 0 && (