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 <tay1orjones@users.noreply.github.com>
carbon-design-system · Dec 11, 2023 · 97a458b · 97a458b · vercel · Dec 11, 2023
1 parent c91d8aa
commit 97a458b
Show file tree

Hide file tree

Showing 3 changed files with 200 additions and 5 deletions.
diff --git 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
 <PageDescription>
 
 The `<ResourceCard>` component should be wrapped with a `<Column>` inside of
-`<Row className="resource-card-group">`. This allows the correct border
-placement between a group of cards.
+`<Row className="resource-card-group">` or
+`<Row className="resource-card-group-3-across">`. This allows the correct border
+placement between a group of cards spanning 2 or 3 across.
 
 </PageDescription>
 
 ## Example
 
+### Group two across
+
 <Row className="resource-card-group">
 <Column colMd={4} colLg={4} noGutterSm>
     <ResourceCard
@@ -67,9 +70,88 @@ placement between a group of cards.
 </Column>
 </Row>
 
+### Group three across
+
+<Row className="resource-card-group-3-across">
+<Column colMd={4} colLg={4} noGutterSm>
+    <ResourceCard
+      subTitle="With subtitle"
+      title="Title"
+      aspectRatio="2:1"
+      actionIcon="arrowRight"
+      href="https://gatsby.carbondesignsystem.com"
+      >
+
+![Adobe Acrobat icon](/images/adobe-icon.svg)
+
+  </ResourceCard>
+</Column>
+<Column colMd={4} colLg={4} noGutterSm>
+    <ResourceCard
+      subTitle="Only subtitle"
+      actionIcon="download"
+      aspectRatio="2:1"
+      href="https://gatsby.carbondesignsystem.com"
+      >
+
+![Mural icon](/images/mural-icon.png)
+
+  </ResourceCard>
+</Column>
+<Column colMd={4} colLg={4} noGutterSm>
+    <ResourceCard
+      subTitle="Only subtitle"
+      aspectRatio="2:1"
+      actionIcon="email"
+      href="https://gatsby.carbondesignsystem.com"
+      >
+
+![Sketch icon](/images/sketch-icon.png)
+
+  </ResourceCard>
+</Column>
+<Column colMd={4} colLg={4} noGutterSm>
+    <ResourceCard
+      title="Disabled card"
+      aspectRatio="2:1"
+      disabled
+      href="https://gatsby.carbondesignsystem.com"
+      >
+
+![Sketch icon](/images/sketch-icon.png)
+
+  </ResourceCard>
+</Column>
+<Column colMd={4} colLg={4} noGutterSm>
+    <ResourceCard
+      subTitle="With subtitle"
+      title="Title"
+      aspectRatio="2:1"
+      actionIcon="arrowRight"
+      href="https://gatsby.carbondesignsystem.com"
+      >
+
+![Adobe Acrobat icon](/images/adobe-icon.svg)
+
+  </ResourceCard>
+</Column>
+<Column colMd={4} colLg={4} noGutterSm>
+    <ResourceCard
+      subTitle="Only subtitle"
+      actionIcon="download"
+      aspectRatio="2:1"
+      href="https://gatsby.carbondesignsystem.com"
+      >
+
+![Mural icon](/images/mural-icon.png)
+
+  </ResourceCard>
+</Column>
+</Row>
+
 ## Code
 
-<Title>Group</Title>
+<Title>Group two across</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
 <Row className="resource-card-group">
@@ -96,6 +178,50 @@ placement between a group of cards.
 </Row>
 ```
 
+<Title>Group three across</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
+<Row className="resource-card-group-3-across">
+<Column colMd={4} colLg={4} noGutterSm>
+    <ResourceCard
+      subTitle="With subtitle"
+      title="Title"
+      aspectRatio="2:1"
+      actionIcon="arrowRight"
+      href="https://gatsby.carbondesignsystem.com"
+      >
+
+![Adobe Acrobat icon](/images/adobe-icon.svg)
+
+  </ResourceCard>
+</Column>
+<Column colMd={4} colLg={4} noGutterSm>
+    <ResourceCard
+      subTitle="Only subtitle"
+      actionIcon="download"
+      aspectRatio="2:1"
+      href="https://gatsby.carbondesignsystem.com"
+      >
+
+![Mural icon](/images/mural-icon.png)
+
+  </ResourceCard>
+</Column>
+<Column colMd={4} colLg={4} noGutterSm>
+    <ResourceCard
+      subTitle="Only subtitle"
+      aspectRatio="2:1"
+      actionIcon="email"
+      href="https://gatsby.carbondesignsystem.com"
+      >
+
+![Sketch icon](/images/sketch-icon.png)
+
+  </ResourceCard>
+</Column>
+</Row>
+```
+
 <Title>With title</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
@@ -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
@@ -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: