Skip to content

Commit 2abf344

Browse files
shaneezashaneeza
authored
LG-4058: add badges to CanvasHeader (#176)
* add badges to canvasheader * changeset * ids * one line example * one line again * use color tokens * forgot to save * bump dependencies * add storybook dep * break out stories * remove multiple action story * feedback
1 parent ee1af09 commit 2abf344

File tree

10 files changed

+176
-144
lines changed

10 files changed

+176
-144
lines changed

‎README.md‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -46,16 +46,23 @@ import { BackLink } from '@leafygreen-ui/typography';
4646
Invite user
4747
</Button>
4848
}
49+
badges={
50+
<>
51+
<Badge variant="green">Enabled</Badge>
52+
<Badge variant="blue">In Dev Mode</Badge>
53+
</>
54+
}
4955
/>
5056
```
5157

5258
## Properties
5359

54-
| Prop | Type | Description | Default |
55-
| -------------- | ----------------- | -------------------------------------------------------------------- | ------- |
56-
| `darkMode` | `boolean` | Determines if the component renders in dark mode | `false` |
57-
| `pageTitle` | `React.ReactNode` | Required page title | |
58-
| `resourceName` | `string` | Opitional resource name that will copy to the clipboard when clicked | |
59-
| `resourceIcon` | `React.ReachNode` | Optional icon that will render to the left of the resource name | |
60-
| `actions` | `React.ReachNode` | Optional button that will render to the right of the resource name | |
61-
| `backLink` | `React.ReactNode` | Optional link that will render above the page title. | |
60+
| Prop | Type | Description | Default |
61+
| -------------- | ----------------- | ----------------------------------------------------------------------------- | ------- |
62+
| `darkMode` | `boolean` | Determines if the component renders in dark mode | `false` |
63+
| `pageTitle` | `React.ReactNode` | Required page title | |
64+
| `resourceName` | `string` | Opitional resource name that will copy to the clipboard when clicked | |
65+
| `resourceIcon` | `React.ReachNode` | Optional icon that will render to the left of the resource name | |
66+
| `badges` | `React.ReachNode` | Optional badges that will render to the right of the resource name | |
67+
| `actions` | `React.ReachNode` | Optional buttons that will render to the right of the badges or resource name | |
68+
| `backLink` | `React.ReactNode` | Optional link that will render above the page title. | |

‎package.json‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,21 @@
1616
"registry":"https://artifactory.corp.mongodb.com/artifactory/api/npm/leafygreen-ui/"
1717
},
1818
"dependencies": {
19-
"@leafygreen-ui/emotion": "^4.0.7",
20-
"@leafygreen-ui/icon": "^11.29.0",
21-
"@leafygreen-ui/lib": "^13.2.1",
22-
"@leafygreen-ui/palette": "^4.0.8",
23-
"@leafygreen-ui/tokens": "^2.5.0",
24-
"@leafygreen-ui/tooltip": "^11.0.0",
25-
"@leafygreen-ui/typography": "^18.2.1"
19+
"@leafygreen-ui/emotion": "^4.0.8",
20+
"@leafygreen-ui/icon": "^12.5.4",
21+
"@leafygreen-ui/lib": "^13.6.0",
22+
"@leafygreen-ui/palette": "^4.1.0",
23+
"@leafygreen-ui/tokens": "^2.9.0",
24+
"@leafygreen-ui/tooltip": "^11.1.0",
25+
"@leafygreen-ui/typography": "^19.2.0"
2626
},
2727
"peerDependencies": {
28-
"@leafygreen-ui/leafygreen-provider": "^3.1.11"
28+
"@leafygreen-ui/leafygreen-provider": "^3.1.12"
2929
},
3030
"devDependencies": {
31-
"@leafygreen-ui/button": "^21.0.12"
31+
"@leafygreen-ui/badge": "^8.1.3",
32+
"@leafygreen-ui/button": "^21.2.1",
33+
"@lg-tools/storybook-utils":"^0.1.1"
3234
},
3335
"homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/canvas-header",
3436
"repository": {

‎src/CanvasHeader.stories.tsx‎

Lines changed: 55 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import React from 'react';
2+
import { StoryMetaType, StoryType } from '@lg-tools/storybook-utils';
23
import { StoryFn } from '@storybook/react';
34

5+
import Badge from '@leafygreen-ui/badge';
46
import Button from '@leafygreen-ui/button';
57
import { css } from '@leafygreen-ui/emotion';
68
import Icon from '@leafygreen-ui/icon';
7-
import { StoryMetaType, StoryType } from '@leafygreen-ui/lib';
89
import { BackLink } from '@leafygreen-ui/typography';
910

1011
import { CanvasHeader } from '.';
@@ -15,10 +16,10 @@ const meta: StoryMetaType<typeof CanvasHeader> = {
1516
parameters: {
1617
default: 'LiveExample',
1718
controls: {
18-
exclude: ['resourceIcon', 'actions', 'backLink'],
19+
exclude: ['resourceIcon', 'actions', 'backLink', 'badges'],
1920
},
2021
generate: {
21-
storyNames: ['DarkMode', 'LightMode', 'Truncate'],
22+
storyNames: ['DarkMode', 'LightMode', 'Truncate', 'Interactions'],
2223
decorator: Instance => {
2324
return (
2425
<div
@@ -33,9 +34,6 @@ const meta: StoryMetaType<typeof CanvasHeader> = {
3334
},
3435
args: { pageTitle: 'Page Title' },
3536
combineArgs: {
36-
// @ts-ignore - data-hover is not a prop
37-
'data-hover': [false, true],
38-
'data-focus': [false, true],
3937
backLink: [
4038
<BackLink href="/home" key="1">
4139
Back to Cluster
@@ -50,31 +48,23 @@ const meta: StoryMetaType<typeof CanvasHeader> = {
5048
resourceIcon: [<Icon key="1" glyph={'ShardedCluster'} />, undefined],
5149
actions: [
5250
<>
51+
<Button leftGlyph={<Icon glyph={'InviteUser'} />}>
52+
Invite user
53+
</Button>
5354
<Button variant="primary" leftGlyph={<Icon glyph={'InviteUser'} />}>
5455
Invite user
5556
</Button>
5657
</>,
5758
undefined,
5859
],
59-
},
60-
excludeCombinations: [
61-
[
62-
// @ts-ignore
63-
'data-focus',
64-
// @ts-ignore
65-
{
66-
resourceName: undefined,
67-
},
68-
],
69-
[
70-
// @ts-ignore
71-
'data-hover',
72-
// @ts-ignore
73-
{
74-
resourceName: undefined,
75-
},
60+
badges: [
61+
<>
62+
<Badge variant="green">Enabled</Badge>
63+
<Badge variant="blue">In Dev Mode</Badge>
64+
</>,
65+
undefined,
7666
],
77-
],
67+
},
7868
},
7969
},
8070
args: {
@@ -89,6 +79,12 @@ const meta: StoryMetaType<typeof CanvasHeader> = {
8979
Invite user
9080
</Button>
9181
),
82+
badges: (
83+
<>
84+
<Badge variant="green">Enabled</Badge>
85+
<Badge variant="blue">In Dev Mode</Badge>
86+
</>
87+
),
9288
},
9389
argTypes: {
9490
darkMode: {
@@ -109,19 +105,10 @@ const Template: StoryFn<typeof CanvasHeader> = props => (
109105
);
110106

111107
export const LiveExample = Template.bind({});
112-
113-
export const MultipleActions = Template.bind({});
114-
MultipleActions.args = {
115-
actions: (
116-
<>
117-
<Button leftGlyph={<Icon glyph={'InviteUser'} />}>Invite user</Button>
118-
<Button leftGlyph={<Icon glyph={'InviteUser'} />}>Invite user</Button>
119-
<Button variant="primary" leftGlyph={<Icon glyph={'InviteUser'} />}>
120-
Invite user
121-
</Button>
122-
</>
123-
),
124-
pageTitle: 'A relatively long page title name that triggers truncation',
108+
LiveExample.parameters = {
109+
chromatic: {
110+
disableSnapshot: true,
111+
},
125112
};
126113

127114
export const DarkMode: StoryType<typeof CanvasHeader> = () => <></>;
@@ -140,15 +127,37 @@ Truncate.parameters = {
140127
generate: {
141128
args: {
142129
pageTitle: 'A relatively long page title name that triggers truncation',
143-
actions: (
144-
<>
145-
<Button leftGlyph={<Icon glyph={'InviteUser'} />}>Invite user</Button>
146-
<Button leftGlyph={<Icon glyph={'InviteUser'} />}>Invite user</Button>
147-
<Button variant="primary" leftGlyph={<Icon glyph={'InviteUser'} />}>
148-
Invite user
149-
</Button>
150-
</>
151-
),
130+
// @ts-ignore
131+
'data-hover': false,
132+
'data-focus': false,
133+
},
134+
},
135+
};
136+
137+
export const Interactions: StoryType<typeof CanvasHeader> = () => <></>;
138+
Interactions.parameters = {
139+
generate: {
140+
args: {
141+
actions: undefined,
142+
badges: undefined,
143+
backLink: undefined,
152144
},
145+
combineArgs: {
146+
darkMode: [true, false],
147+
// @ts-ignore
148+
'data-hover': [false, true],
149+
'data-focus': [false, true],
150+
resourceName: [
151+
'ac_iqttxwn_shard-00-01.hvcuthh.mongodb.net:27017_324892384903284902384903284903284902384903284832908_long_name',
152+
'normal not long short_name',
153+
],
154+
},
155+
excludeCombinations: [
156+
{
157+
// @ts-ignore
158+
'data-hover': false,
159+
'data-focus': false,
160+
},
161+
],
153162
},
154163
};

‎src/CanvasHeader/CanvasHeader.spec.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import { render } from '@testing-library/react';
33
import { axe } from 'jest-axe';
44

5+
import Badge from '@leafygreen-ui/badge';
56
import Button from '@leafygreen-ui/button';
67
import Icon from '@leafygreen-ui/icon';
78
import { Link } from '@leafygreen-ui/typography';
@@ -36,6 +37,11 @@ const renderCanvasHeader = ({ ...props }: PartialCanvasHeaderProps) => {
3637
Invite user
3738
</Button>
3839
}
40+
badges={
41+
<Badge data-testid="lg-canvas_header-badge" variant="green">
42+
Enabled
43+
</Badge>
44+
}
3945
{...props}
4046
/>,
4147
);
@@ -44,6 +50,7 @@ const renderCanvasHeader = ({ ...props }: PartialCanvasHeaderProps) => {
4450
const backLink = utils.getByTestId('lg-canvas_header-back_link');
4551
const resourceName = utils.getByTestId('lg-canvas_header-resource_name');
4652
const actionBtn = utils.getByTestId('lg-canvas_header-button');
53+
const badge = utils.getByTestId('lg-canvas_header-badge');
4754
const resourceIcon = utils.getByLabelText('Sharded Cluster Icon');
4855

4956
return {
@@ -53,6 +60,7 @@ const renderCanvasHeader = ({ ...props }: PartialCanvasHeaderProps) => {
5360
resourceIcon,
5461
resourceName,
5562
actionBtn,
63+
badge,
5664
};
5765
};
5866

@@ -91,6 +99,11 @@ describe('packages/canvas-header', () => {
9199
expect(actionBtn.textContent).toBe('Invite user');
92100
});
93101

102+
test('badge', () => {
103+
const { badge } = renderCanvasHeader({});
104+
expect(badge.textContent).toBe('Enabled');
105+
});
106+
94107
test('does not render resourceIcon without a resourceName', () => {
95108
const { queryByText } = render(
96109
<CanvasHeader
@@ -132,6 +145,11 @@ describe('packages/canvas-header', () => {
132145
Invite user
133146
</Button>
134147
}
148+
badges={
149+
<Badge data-testid="lg-canvas_header-badge" variant="green">
150+
Enabled
151+
</Badge>
152+
}
135153
/>
136154
{/* @ts-expect-error Property 'children' does not exist */}
137155
<CanvasHeader pageTitle="quack">hi</CanvasHeader>

‎src/CanvasHeader/CanvasHeader.styles.ts‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { css } from '@leafygreen-ui/emotion';
22
import { createUniqueClassName, Theme } from '@leafygreen-ui/lib';
3-
import { palette } from '@leafygreen-ui/palette';
4-
import { spacing } from '@leafygreen-ui/tokens';
3+
import { color, spacing } from '@leafygreen-ui/tokens';
54

65
export const canvasHeaderClassname = createUniqueClassName('canvas-header');
76

@@ -15,25 +14,16 @@ export const canvasHeaderBaseStyles = css`
1514
export const titleWrapperStyles = css`
1615
display: flex;
1716
align-items: center;
18-
gap: 24px;
19-
justify-content: space-between;
17+
gap: ${spacing[300]}px;
2018
`;
2119

22-
export const titleBaseStyles = css`
20+
export const getTitleStyles = (theme: Theme) => css`
2321
overflow: hidden;
2422
white-space: nowrap;
2523
text-overflow: ellipsis;
24+
color: ${color[theme].text.primary?.default};
2625
`;
2726

28-
export const titleThemeStyles: Record<Theme, string> = {
29-
[Theme.Light]: css`
30-
color: ${palette.black};
31-
`,
32-
[Theme.Dark]: css`
33-
color: ${palette.gray.light2};
34-
`,
35-
};
36-
3727
export const backLinkStyles = css`
3828
display: flex;
3929
`;
@@ -43,4 +33,22 @@ export const actionsStyles = css`
4333
flex-wrap: nowrap;
4434
flex-shrink: 0;
4535
gap: ${spacing[200]}px;
36+
justify-content: end;
37+
flex-grow: 1;
38+
padding-inline-start: ${spacing[300]}px;
39+
40+
button {
41+
white-space: nowrap;
42+
}
43+
`;
44+
45+
export const badgesStyles = css`
46+
display: flex;
47+
flex-wrap: nowrap;
48+
gap: ${spacing[200]}px;
49+
flex-shrink: 0;
50+
51+
position: relative;
52+
// Badges are not vertically aligned with the title
53+
top: 3px;
4654
`;

0 commit comments

Comments
 (0)