From 36167197b122862c62a11a1a52e20919d3cf6e48 Mon Sep 17 00:00:00 2001 From: Valentin-Sorin-Nicolae <141405307+Valentin-Sorin-Nicolae@users.noreply.github.com> Date: Sat, 7 Dec 2024 00:37:37 +0200 Subject: [PATCH] Card group item inverse color scheme (#12138) ### Related Ticket(s) Closes [#12080](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12080) ### Description [Figma Specs for inverse cards](https://www.figma.com/design/oip4K9G1z0v7tLNBbDZzdr/Card-specs-v2?node-id=20-4662&t=ANH9LQPEcxOGajfN-4) Expected: 378000813-1c06f292-1c05-4500-a1a9-891e86774515 Actual: 378000836-5cccfcaa-5c6b-43ac-b3dd-7fb0b0fb2be6 Component(s) impacted c4d-card-group-item, potentially other card elements ### Changelog Inverse color-scheme knob added to storybook. --- .../styles/scss/components/card/_card.scss | 7 +- .../__stories__/card-group.stories.ts | 192 ++++++++++++------ 2 files changed, 135 insertions(+), 64 deletions(-) diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss index 0f0cafc7eca..bc1fbf4ec73 100644 --- a/packages/styles/scss/components/card/_card.scss +++ b/packages/styles/scss/components/card/_card.scss @@ -555,14 +555,15 @@ } :host(#{$c4d-prefix}-card)[color-scheme='inverse']:not([disabled]), - :host(#{$c4d-prefix}-card-group-item)[color-scheme='inverse']:not([disabled]) - .#{$prefix}--card { + :host(#{$c4d-prefix}-card-group-item)[color-scheme='inverse']:not( + [disabled] + ) { .#{$prefix}--tile { border-color: $background-inverse; background-color: $background-inverse; &:hover { - #{$c4d-prefix}-image, + .#{$c4d-prefix}-image, ::slotted(#{$c4d-prefix}-image), ::slotted(#{$c4d-prefix}-card-cta-image) { filter: brightness(108%); diff --git a/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts b/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts index e10e3023044..c995926af32 100644 --- a/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts +++ b/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts @@ -23,6 +23,7 @@ import { GRID_MODE } from '../defs'; import styles from './card-group.stories.scss'; import readme from './README.stories.mdx'; +import { BASIC_COLOR_SCHEME } from '../../../globals/defs'; let count = 0; const phraseArray = [ @@ -33,6 +34,11 @@ const phraseArray = [ 'Disputando lorem covallis', ]; +const colorSchemeMap = { + Regular: BASIC_COLOR_SCHEME.REGULAR, + Inverse: BASIC_COLOR_SCHEME.INVERSE, +}; + const gridModes = { [`Condensed (1px)`]: GRID_MODE.CONDENSED, [`Narrow (16px)`]: GRID_MODE.NARROW, @@ -64,11 +70,19 @@ const imageContent = html` default-src="${imgXlg4x3}"> `; -const cardsDiffLengthPhrase = (index, tagGroup, media, cardType, addCta) => { +const cardsDiffLengthPhrase = ( + index, + tagGroup, + media, + cardType, + addCta, + colorScheme +) => { const defaultCardGroupItem = html` + href=${cardType === 'Card static' ? '' : 'https://example.com'} + color-scheme=${colorSchemeMap[colorScheme]}> ${media ? imageContent : ''} Topic { `; const videoCardGroupItem = (videoId = '1_9h94wo6b') => html` - + Topic ${tagGroup ? tagGroupContent : ''} @@ -107,11 +124,18 @@ const cardsDiffLengthPhrase = (index, tagGroup, media, cardType, addCta) => { : defaultCardGroupItem; }; -const longHeadingCardGroupItem = (tagGroup, media, cardType, addCta) => { +const longHeadingCardGroupItem = ( + tagGroup, + media, + cardType, + addCta, + colorScheme +) => { return html` + href=${cardType === 'Card static' ? '' : 'https://example.com'} + color-scheme=${colorSchemeMap[colorScheme]}> ${media ? imageContent : ''} Topic { `; }; -const pictogramCard = () => html` - - Aerospace and defence -

- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud - exercitation. -

- - - - -`; +const pictogramCard = (colorScheme) => { + return html` + + Aerospace and defence +

+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi + ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis + nostrud exercitation. +

+ + + + + `; +}; -const cardLink = html` - - IBM Developer -

Learn, code and connect with your community

- - -`; +const cardLink = (colorScheme) => { + return html` + + IBM Developer +

Learn, code and connect with your community

+ + + `; +}; -const cardInCardItems = (i, tagGroup, media) => { +const cardInCardItems = (i, tagGroup, media, colorScheme) => { if (media) { return i % 2 === 0 ? html` - + ${imageContent} Label { ` : html` - + Topic ${tagGroup ? tagGroupContent : ''} @@ -200,7 +239,10 @@ const cardInCardItems = (i, tagGroup, media) => { `; } return html` - + Label The United Nations Environment Program works with IBM to reduce marine @@ -213,22 +255,35 @@ const cardInCardItems = (i, tagGroup, media) => { }; export const Default = (args) => { - const { cards, cardType, media, tagGroup, gridMode, cta, addCta } = - args?.CardGroup ?? {}; + const { + cards, + cardType, + media, + tagGroup, + gridMode, + cta, + addCta, + colorScheme, + } = args?.CardGroup ?? {}; const allCards: object[] = []; if (cardType === 'Card - default') { - allCards.push(longHeadingCardGroupItem(tagGroup, media, cardType, addCta)); + allCards.push( + longHeadingCardGroupItem(tagGroup, media, cardType, addCta, colorScheme) + ); for (let i = 1; i < cards; i++) { allCards.push( - cardsDiffLengthPhrase(i, tagGroup, media, cardType, addCta) + cardsDiffLengthPhrase(i, tagGroup, media, cardType, addCta, colorScheme) ); } if (cta) { allCards.push( html` - + Top level card link @@ -239,21 +294,26 @@ export const Default = (args) => { if (cardType === 'Card - pictogram') { for (let i = 0; i < cards; i++) { - allCards.push(pictogramCard()); + allCards.push(pictogramCard(colorScheme)); } } if (cardType === 'Card static') { - allCards.push(longHeadingCardGroupItem(tagGroup, media, cardType, addCta)); + allCards.push( + longHeadingCardGroupItem(tagGroup, media, cardType, addCta, colorScheme) + ); for (let i = 1; i < cards; i++) { allCards.push( - cardsDiffLengthPhrase(i, tagGroup, media, cardType, addCta) + cardsDiffLengthPhrase(i, tagGroup, media, cardType, addCta, colorScheme) ); } if (cta) { allCards.push( html` - + Top level card link @@ -264,7 +324,7 @@ export const Default = (args) => { if (cardType === 'Card link') { for (let i = 0; i < cards; i++) { - allCards.push(cardLink); + allCards.push(cardLink(colorScheme)); } } @@ -278,10 +338,11 @@ export const Default = (args) => { }; export const withCardInCard = (args) => { - const { cards, tagGroup, media, gridMode } = args?.CardGroup ?? {}; + const { cards, tagGroup, media, gridMode, colorScheme } = + args?.CardGroup ?? {}; const allCards: object[] = []; for (let i = 0; i < cards; i++) { - allCards.push(cardInCardItems(i, tagGroup, media)); + allCards.push(cardInCardItems(i, tagGroup, media, colorScheme)); } return html` @@ -328,6 +389,7 @@ withCardInCard.story = { tagGroup: boolean('Add tags:', false), gridMode: select('Grid mode:', gridModes, GRID_MODE.NARROW), cards: number('Number of cards', 5, { min: 2, max: 6 }), + colorScheme: select('Color scheme:', ['Regular', 'Inverse'], 'Regular'), }), }, propsSet: { @@ -337,6 +399,7 @@ withCardInCard.story = { tagGroup: false, gridMode: 'narrow', cards: 5, + colorScheme: BASIC_COLOR_SCHEME.REGULAR, }, }, }, @@ -392,6 +455,11 @@ export default { ) : select('Grid mode:', gridModes, gridModes['Default (32px)']); const cta = media ? '' : boolean('Add CTA card:', false); + const colorScheme = select( + 'Color scheme:', + ['Regular', 'Inverse'], + 'Regular' + ); return { cardType, media, @@ -400,6 +468,7 @@ export default { cards, gridMode, cta, + colorScheme, }; }, }, @@ -413,6 +482,7 @@ export default { cards: 5, gridMode: 'collapsed', cta: false, + colorScheme: BASIC_COLOR_SCHEME.REGULAR, }, }, },