From 97a458b158b1f4200834939dac3e7a5496a7492b Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Mon, 11 Dec 2023 09:32:40 -0600 Subject: [PATCH] feat: add option for 3 across ResourceCard group (#1376) * feat: add option for 3 across ResourceCard group * chore: yarn * chore: fix border * chore: yarn lock --------- Co-authored-by: Taylor Jones --- .../src/pages/components/ResourceCard.mdx | 132 +++++++++++++++++- .../ResourceCard/resource-card-group.scss | 69 +++++++++ yarn.lock | 4 +- 3 files changed, 200 insertions(+), 5 deletions(-) diff --git a/packages/example/src/pages/components/ResourceCard.mdx b/packages/example/src/pages/components/ResourceCard.mdx index 57f7450fd..6b74f87b4 100644 --- a/packages/example/src/pages/components/ResourceCard.mdx +++ b/packages/example/src/pages/components/ResourceCard.mdx @@ -6,13 +6,16 @@ description: Usage instructions for the ResourceCard component The `` component should be wrapped with a `` inside of -``. This allows the correct border -placement between a group of cards. +`` or +``. This allows the correct border +placement between a group of cards spanning 2 or 3 across. ## Example +### Group two across + +### Group three across + + + + + +![Adobe Acrobat icon](/images/adobe-icon.svg) + + + + + + +![Mural icon](/images/mural-icon.png) + + + + + + +![Sketch icon](/images/sketch-icon.png) + + + + + + +![Sketch icon](/images/sketch-icon.png) + + + + + + +![Adobe Acrobat icon](/images/adobe-icon.svg) + + + + + + +![Mural icon](/images/mural-icon.png) + + + + + ## Code -Group +Group two across ```mdx path=components/ResourceCard/ResourceCard.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/main/packages/gatsby-theme-carbon/src/components/ResourceCard @@ -96,6 +178,50 @@ placement between a group of cards. ``` +Group three across + +```mdx path=components/ResourceCard/ResourceCard.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/main/packages/gatsby-theme-carbon/src/components/ResourceCard + + + + +![Adobe Acrobat icon](/images/adobe-icon.svg) + + + + + + +![Mural icon](/images/mural-icon.png) + + + + + + +![Sketch icon](/images/sketch-icon.png) + + + + +``` + With title ```mdx path=components/ResourceCard/ResourceCard.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/main/packages/gatsby-theme-carbon/src/components/ResourceCard diff --git a/packages/gatsby-theme-carbon/src/components/ResourceCard/resource-card-group.scss b/packages/gatsby-theme-carbon/src/components/ResourceCard/resource-card-group.scss index 78d976037..1ae850e10 100644 --- a/packages/gatsby-theme-carbon/src/components/ResourceCard/resource-card-group.scss +++ b/packages/gatsby-theme-carbon/src/components/ResourceCard/resource-card-group.scss @@ -9,6 +9,8 @@ // #906: We need to use the attribute selector here b.c. we don't control the column, // it's provided by the developers through MDX and we don't want to force an extra prop + +// Default 2 across .resource-card-group [class*='--column'] { --space: 0; } @@ -61,3 +63,70 @@ margin-right: 33%; } } + +// 3 across +.resource-card-group-3-across [class*='--column'] { + --space: 0; +} + +// set border between cards +.resource-card-group-3-across .cds--resource-card { + border-top: 1px solid $ui-03; +} + +.resource-card-group-3-across .cds--resource-card--dark { + border-color: transparent !important; +} + +.resource-card-group-3-across .cds--col-lg-4:nth-child(2) .cds--resource-card { + @include breakpoint('md') { + border-top: 0px solid transparent; + } +} + +.resource-card-group-3-across .cds--col-lg-4:nth-child(3) .cds--resource-card { + @include breakpoint('lg') { + border-top: 0px solid transparent; + } +} + +.resource-card-group-3-across .cds--col-lg-4:first-child .cds--resource-card { + border-top: 0px solid transparent; +} + +.resource-card-group-3-across + .cds--col-lg-4:nth-child(odd) + .cds--resource-card { + @include breakpoint('md') { + border-left: 1px solid transparent; + } +} + +.resource-card-group-3-across + .cds--col-lg-4:nth-child(even) + .cds--resource-card { + @include breakpoint('md') { + border-left: 1px solid $ui-03; + } +} + +.resource-card-group-3-across .cds--col-lg-4:nth-child(3n) .cds--resource-card, +.resource-card-group-3-across + .cds--col-lg-4:nth-child(3n-1) + .cds--resource-card { + @include breakpoint('lg') { + border-left: 1px solid $ui-03; + } +} + +.resource-card-group-3-across .cds--col-lg-4 .cds--resource-card--dark { + border-left-color: $ui-background; +} + +.resource-card-group-3-across + .cds--col-lg-4:nth-child(3n + 1) + .cds--resource-card { + @include breakpoint('lg') { + border-left: 1px solid transparent; + } +} diff --git a/yarn.lock b/yarn.lock index 3a7f02f38..9d6491a56 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9729,7 +9729,7 @@ __metadata: resolution: "example@workspace:packages/example" dependencies: gatsby: ^4.25.7 - gatsby-theme-carbon: ^3.1.36 + gatsby-theme-carbon: ^3.1.37 react: ^17.0.2 react-dom: ^17.0.2 languageName: unknown @@ -11167,7 +11167,7 @@ __metadata: languageName: unknown linkType: soft -"gatsby-theme-carbon@^3.1.36, gatsby-theme-carbon@workspace:packages/gatsby-theme-carbon": +"gatsby-theme-carbon@^3.1.37, gatsby-theme-carbon@workspace:packages/gatsby-theme-carbon": version: 0.0.0-use.local resolution: "gatsby-theme-carbon@workspace:packages/gatsby-theme-carbon" dependencies: