From fa146b1ea7728fce8b2b1951f96833f83264eb0c Mon Sep 17 00:00:00 2001 From: "Guilherme L. Moraes" <42848561+guilhermelMoraes@users.noreply.github.com> Date: Thu, 18 Nov 2021 12:24:55 -0300 Subject: [PATCH] chore(content-group-pictogram): syncing stories and spacing updates (#7314) ### Related Ticket(s) [Content group pictograms] Storybooks QA #5666 --- .../__snapshots__/storyshots.test.js.snap | 429 ++++++++++++++++-- .../ContentGroupPictograms.stories.js | 20 +- .../_content-block-mixed.scss | 8 + .../_content-group-pictograms.scss | 12 + .../pictogram-item/_pictogram-item.scss | 14 +- 5 files changed, 419 insertions(+), 64 deletions(-) diff --git a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap index 9d35ccff73f..8f0a2492b60 100644 --- a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap +++ b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap @@ -36373,12 +36373,16 @@ exports[`Storyshots Components|Content group pictograms Default 1`] = ` }, "props": Object { "ContentGroupPictograms": Object { - "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", - "heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", + "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.", + "heading": "Lorem ipsum dolor sit amet", "items": Array [ Object { - "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.", - "cta": null, + "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.", + "cta": Object { + "copy": "Lorem ipsum dolor sit amet ", + "href": "https://www.example.com", + "type": "local", + }, "heading": "Aliquam condimentum interdum", "pictogram": Object { "aria-label": "Pictogram", @@ -36389,8 +36393,12 @@ exports[`Storyshots Components|Content group pictograms Default 1`] = ` }, }, Object { - "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.", - "cta": null, + "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.", + "cta": Object { + "copy": "Lorem ipsum dolor sit amet ", + "href": "https://www.example.com", + "type": "local", + }, "heading": "Aliquam condimentum interdum", "pictogram": Object { "aria-label": "Pictogram", @@ -36401,8 +36409,12 @@ exports[`Storyshots Components|Content group pictograms Default 1`] = ` }, }, Object { - "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.", - "cta": null, + "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.", + "cta": Object { + "copy": "Lorem ipsum dolor sit amet ", + "href": "https://www.example.com", + "type": "local", + }, "heading": "Aliquam condimentum interdum", "pictogram": Object { "aria-label": "Pictogram", @@ -36424,10 +36436,7 @@ exports[`Storyshots Components|Content group pictograms Default 1`] = ` "heading": "Aliquam condimentum interdum", "pictogram": Object { "aria-label": "Pictogram", - "src": Object { - "$$typeof": Symbol(react.forward_ref), - "render": [Function], - }, + "src": undefined, }, }, ], @@ -36452,13 +36461,17 @@ exports[`Storyshots Components|Content group pictograms Default 1`] = ` >
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

", + "__html": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.

", } } /> @@ -36527,8 +36548,14 @@ exports[`Storyshots Components|Content group pictograms Default 1`] = ` > - - +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.

", + "__html": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.

", } } data-autoid="dds--content-item__copy" /> + + +
@@ -36623,8 +36748,14 @@ exports[`Storyshots Components|Content group pictograms Default 1`] = ` - - +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.

", + "__html": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.

", } } data-autoid="dds--content-item__copy" /> + + +
@@ -36719,8 +36948,14 @@ exports[`Storyshots Components|Content group pictograms Default 1`] = ` - - +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.

", + "__html": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.

", } } data-autoid="dds--content-item__copy" /> + + +
diff --git a/packages/react/src/components/ContentGroupPictograms/__stories__/ContentGroupPictograms.stories.js b/packages/react/src/components/ContentGroupPictograms/__stories__/ContentGroupPictograms.stories.js index 876ede0c6d8..98804739258 100644 --- a/packages/react/src/components/ContentGroupPictograms/__stories__/ContentGroupPictograms.stories.js +++ b/packages/react/src/components/ContentGroupPictograms/__stories__/ContentGroupPictograms.stories.js @@ -5,15 +5,15 @@ * LICENSE file in the root directory of this source tree. */ -import { Desktop, Pattern, Touch } from '@carbon/pictograms-react'; import { select, text, boolean, number } from '@storybook/addon-knobs'; +import { TouchScreen, Pattern, Touch } from '@carbon/pictograms-react'; import classNames from 'classnames'; import ContentGroupPictograms from '../ContentGroupPictograms'; import React from 'react'; import readme from '../README.stories.mdx'; const pictograms = { - Desktop: 'Desktop', + TouchScreen: 'TouchScreen', Touch: 'Touch', Pattern: 'Pattern', }; @@ -26,8 +26,8 @@ const pictograms = { */ const selectPictogram = sel => { switch (sel) { - case 'Desktop': - return Desktop; + case 'TouchScreen': + return TouchScreen; case 'Pattern': return Pattern; case 'Touch': @@ -46,7 +46,7 @@ const toggleCTA = item => { return { type: 'local', href: 'https://www.example.com', - copy: 'Lorem ipsum dolor', + copy: 'Lorem ipsum dolor sit amet ', }; } else { return null; @@ -76,18 +76,18 @@ export default { ), copy: text( `Item ${i + 1} Copy (items.copy)`, - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.', + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.', groupId ), cta: toggleCTA( - boolean(`Item ${i + 1} CTA (items.cta)`, false, groupId) + boolean(`Item ${i + 1} CTA (items.cta)`, true, groupId) ), pictogram: { src: selectPictogram( select( `Item ${i + 1} Pictogram (pictogram)`, pictograms, - pictograms.Desktop, + pictograms.TouchScreen, groupId ) ), @@ -98,12 +98,12 @@ export default { return { heading: text( 'Pattern title (heading)', - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', + 'Lorem ipsum dolor sit amet', groupId ), copy: text( 'Copy (copy)', - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.', groupId ), items, diff --git a/packages/styles/scss/components/content-block-mixed/_content-block-mixed.scss b/packages/styles/scss/components/content-block-mixed/_content-block-mixed.scss index 74cca735a2d..ec1020add6d 100644 --- a/packages/styles/scss/components/content-block-mixed/_content-block-mixed.scss +++ b/packages/styles/scss/components/content-block-mixed/_content-block-mixed.scss @@ -8,6 +8,14 @@ @mixin content-block-mixed { :host(dds-content-block-mixed), .#{$prefix}--content-block-mixed { + .#{$prefix}--content-group-pictograms { + margin-left: -$carbon--spacing-05; + .#{$prefix}--pictogram-item__row { + width: calc(100% + 16px); + max-width: calc(100% + 16px); + } + } + .#{$prefix}--layout-1-3 { @include carbon--breakpoint-down('md') { .#{$prefix}--link-list__list.#{$prefix}--link-list__list--card { diff --git a/packages/styles/scss/components/content-group-pictograms/_content-group-pictograms.scss b/packages/styles/scss/components/content-group-pictograms/_content-group-pictograms.scss index 46f0f503078..60e13208aee 100644 --- a/packages/styles/scss/components/content-group-pictograms/_content-group-pictograms.scss +++ b/packages/styles/scss/components/content-group-pictograms/_content-group-pictograms.scss @@ -10,12 +10,24 @@ ::slotted(#{$dds-prefix}-content-group-copy), .#{$prefix}--content-group-pictograms .#{$prefix}--content-group__copy { margin-bottom: $spacing-05; + margin-left: $spacing-05; + margin-right: $spacing-05; @include carbon--breakpoint('md') { margin-bottom: $spacing-07; } } + div.#{$prefix}--content-group-pictograms { + padding-left: 0; + padding-right: 0; + + .#{$prefix}--content-group__title { + padding-left: $spacing-05; + padding-right: $spacing-05; + } + } + .#{$prefix}--content-group-pictograms__item:last-child { .#{$prefix}--content-item { margin-bottom: 0; diff --git a/packages/styles/scss/components/pictogram-item/_pictogram-item.scss b/packages/styles/scss/components/pictogram-item/_pictogram-item.scss index 471daf66051..bee050ceaa4 100644 --- a/packages/styles/scss/components/pictogram-item/_pictogram-item.scss +++ b/packages/styles/scss/components/pictogram-item/_pictogram-item.scss @@ -16,10 +16,11 @@ .#{$prefix}--pictogram-item__row { @include carbon--make-row; + margin-left: 0; + margin-right: 0; + max-width: 100%; - @include carbon--breakpoint('md') { - max-width: 75%; - } + @include carbon--breakpoint('lg') { max-width: 100%; } @@ -43,6 +44,10 @@ @include carbon--breakpoint('md') { @include carbon--make-col(6, 8); } + + @include carbon--breakpoint('max') { + padding-right: $carbon--spacing-11; + } } .#{$prefix}--pictogram-item__pictogram, @@ -53,9 +58,6 @@ width: 80px; } } - :host(#{$dds-prefix}-pictogram-item) { - padding-left: $carbon--spacing-05; - } } @include exports('pictogram-item') {