Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add Tag styles for PageDescription and ResourceCard #1513

Merged
merged 2 commits into from
Sep 12, 2024
Merged

feat: add Tag styles for PageDescription and ResourceCard #1513

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ac160ac
feat: add Tag styles for PageDescription and ResourceCard
alisonjoseph Sep 12, 2024
feb5065
chore: lockfile
alisonjoseph Sep 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions packages/example/src/pages/components/PageDescription.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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>
Expand Down
63 changes: 44 additions & 19 deletions packages/example/src/pages/components/ResourceCard.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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 |
Expand Down
6 changes: 6 additions & 0 deletions packages/gatsby-theme-carbon/src/components/PageDescription/PageDescription.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
1 change: 1 addition & 0 deletions packages/gatsby-theme-carbon/src/components/ResourceCard/resource-card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@
min-width: 32px;
min-height: 32px;
display: flex;
gap: $spacing-05;
align-items: flex-end;
}

Expand Down
4 changes: 2 additions & 2 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10595,7 +10595,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
Expand Down Expand Up @@ -11905,7 +11905,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:
Expand Down
Loading