diff --git a/packages/example/src/pages/components/PageDescription.mdx b/packages/example/src/pages/components/PageDescription.mdx index f4664e424..4b0678fb3 100644 --- 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'; + +Optional Tag + This is a `` 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 + +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. + + +``` + +#### 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'; + + + +Optional 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. diff --git a/packages/example/src/pages/components/ResourceCard.mdx b/packages/example/src/pages/components/ResourceCard.mdx index 6b74f87b4..6af8957e8 100644 --- 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'; + The `` component should be wrapped with a `` inside of @@ -149,6 +151,33 @@ placement between a group of cards spanning 2 or 3 across. +### With Tag + + + + + +![Adobe Acrobat icon](/images/adobe-icon.svg) + +Feature flag + + + + + + +Feature flag + + + + + ## Code Group two across @@ -222,37 +251,33 @@ placement between a group of cards spanning 2 or 3 across. ``` -With title +With Tag ```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) +Feature flag + -``` - -Only subtitle - -```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 - + -![Mural icon](/images/mural-icon.png) +Feature flag + ``` Dark @@ -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 index 226a312e2..9f471034d 100644 --- 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 index df360923b..b41052308 100644 --- 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; } diff --git a/yarn.lock b/yarn.lock index 02e1b8f7b..cf36bdb96 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10586,7 +10586,7 @@ __metadata: dependencies: "@carbon/icons-react": "npm:^11.43.0" gatsby: "npm:^5.13.6" - gatsby-theme-carbon: "npm:^4.0.10" + gatsby-theme-carbon: "npm:^4.0.11" react: "npm:^18.3.1" react-dom: "npm:^18.3.1" languageName: unknown @@ -11887,7 +11887,7 @@ __metadata: languageName: unknown linkType: soft -"gatsby-theme-carbon@npm:^4.0.10, gatsby-theme-carbon@workspace:packages/gatsby-theme-carbon": +"gatsby-theme-carbon@npm:^4.0.11, gatsby-theme-carbon@workspace:packages/gatsby-theme-carbon": version: 0.0.0-use.local resolution: "gatsby-theme-carbon@workspace:packages/gatsby-theme-carbon" dependencies: