feat: add Tag styles for PageDescription and ResourceCard

carbon-design-system · Sep 12, 2024 · ac160ac · ac160ac
1 parent eed15bc
commit ac160ac
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 19 deletions.
diff --git a/packages/example/src/pages/components/PageDescription.mdx b/packages/example/src/pages/components/PageDescription.mdx
@@ -3,8 +3,12 @@ title: PageDescription
 description: Usage instructions for the PageDescription component
 ---
 
+import { Tag } from '@carbon/react';
+
 <PageDescription>
 
+<Tag type="green">Optional Tag</Tag>
+
 This is a `<PageDescription>` component. It is generally used for intro text at
 the top of the page using the
 [type token](https://www.carbondesignsystem.com/guidelines/typography/expressive)
@@ -26,6 +30,21 @@ should be consice – one sentence, or maybe two short ones at most.
 ```markup path=components/PageDescription/PageDescription.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/main/packages/gatsby-theme-carbon/src/components/PageDescription
 <PageDescription>
 
+
+Lorem ipsum dolor sit amet, **consectetur adipiscing elit**, sed do eiusmod tempor _incididunt_ ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+</PageDescription>
+```
+
+#### With optional Carbon Tag
+
+```markup path=components/PageDescription/PageDescription.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/main/packages/gatsby-theme-carbon/src/components/PageDescription
+import { Tag } from '@carbon/react';
+
+<PageDescription>
+
+<Tag type="green">Optional Tag</Tag>
+
 Lorem ipsum dolor sit amet, **consectetur adipiscing elit**, sed do eiusmod tempor _incididunt_ ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
 </PageDescription>

diff --git a/packages/example/src/pages/components/ResourceCard.mdx b/packages/example/src/pages/components/ResourceCard.mdx
@@ -3,6 +3,8 @@ title: ResourceCard
 description: Usage instructions for the ResourceCard component
 ---
 
+import { Tag } from '@carbon/react';
+
 <PageDescription>
 
 The `<ResourceCard>` component should be wrapped with a `<Column>` inside of
@@ -149,6 +151,33 @@ placement between a group of cards spanning 2 or 3 across.
 </Column>
 </Row>
 
+### With Tag
+
+<Row className="resource-card-group">
+<Column colMd={4} colLg={4} noGutterSm>
+    <ResourceCard
+       title="With Tag"
+       href="https://gatsby.carbondesignsystem.com"
+      >
+
+![Adobe Acrobat icon](/images/adobe-icon.svg)
+
+<Tag type="blue">Feature flag</Tag>
+
+  </ResourceCard>
+</Column>
+<Column colMd={4} colLg={4} noGutterSm>
+    <ResourceCard
+       title="With Tag"
+       href="https://gatsby.carbondesignsystem.com"
+      >
+
+<Tag type="blue">Feature flag</Tag>
+
+  </ResourceCard>
+</Column>
+</Row>
+
 ## Code
 
 <Title>Group two across</Title>
@@ -222,37 +251,33 @@ placement between a group of cards spanning 2 or 3 across.
 </Row>
 ```
 
-<Title>With title</Title>
+<Title>With Tag</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">
 <Column colMd={4} colLg={4} noGutterSm>
-  <ResourceCard
-    subTitle="With subtitle"
-    title="Title"
-    aspectRatio="2:1"
-    actionIcon="arrowRight"
-    href="https://gatsby.carbondesignsystem.com">
+    <ResourceCard
+       title="With Tag"
+       href="https://gatsby.carbondesignsystem.com"
+      >
 
 ![Adobe Acrobat icon](/images/adobe-icon.svg)
 
+<Tag type="blue">Feature flag</Tag>
+
   </ResourceCard>
 </Column>
-```
-
-<Title>Only subtitle</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
 <Column colMd={4} colLg={4} noGutterSm>
-  <ResourceCard
-    subTitle="Only subtitle"
-    actionIcon="download"
-    aspectRatio="2:1"
-    href="https://gatsby.carbondesignsystem.com">
+    <ResourceCard
+       title="With Tag"
+       href="https://gatsby.carbondesignsystem.com"
+      >
 
-![Mural icon](/images/mural-icon.png)
+<Tag type="blue">Feature flag</Tag>
 
   </ResourceCard>
 </Column>
+</Row>
 ```
 
 <Title>Dark</Title>
@@ -290,7 +315,7 @@ placement between a group of cards spanning 2 or 3 across.
 
 | property    | propType | required | default  | description                                                                                                            |
 | ----------- | -------- | -------- | -------- | ---------------------------------------------------------------------------------------------------------------------- |
-| children    | node     |          |          | Use 32x32 image as child, will display in bottom left of card                                                          |
+| children    | node     |          |          | Reccomend 32x32 image and/or Tag as child, will display in bottom left of card                                         |
 | href        | string   |          |          | Set url for card                                                                                                       |
 | subTitle    | string   |          |          | Smaller title                                                                                                          |
 | title       | string   |          |          | Large title                                                                                                            |

diff --git a/packages/gatsby-theme-carbon/src/components/PageDescription/PageDescription.module.scss b/packages/gatsby-theme-carbon/src/components/PageDescription/PageDescription.module.scss
@@ -16,3 +16,9 @@
   font-size: 0.75em;
   line-height: 1.25;
 }
+
+// with tag
+.page-description :global(.cds--tag) {
+  position: absolute;
+  margin-top: -$spacing-09;
+}
diff --git a/packages/gatsby-theme-carbon/src/components/ResourceCard/resource-card.scss b/packages/gatsby-theme-carbon/src/components/ResourceCard/resource-card.scss
@@ -49,6 +49,7 @@
   min-width: 32px;
   min-height: 32px;
   display: flex;
+  gap: $spacing-05;
   align-items: flex-end;
 }