Skip to content

Commit 9e46d68

Browse files
joshfarrantjoshfarrant
committed
wip
1 parent 9447a66 commit 9e46d68

30 files changed

+82
-370
lines changed

‎apps/docs/content/components/Card/react.mdx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ You can add an `icon` to enhance the visual context. We recommend using an [Octi
8383

8484
```jsx live
8585
<Card href="https://github.com">
86-
<Card.Icon icon={<CopilotIcon />} color="purple" hasBackground />
86+
<Card.Icon icon={CopilotIcon} color="purple" hasBackground />
8787
<Card.Heading>Code search & code view</Card.Heading>
8888
<Card.Description>
8989
Enables you to rapidly search, navigate, and understand code, right from
@@ -113,7 +113,7 @@ Combine `Icon` and `Label` when you need to add more metadata or context to the
113113

114114
```jsx live
115115
<Card href="https://github.com">
116-
<Card.Icon icon={<CopilotIcon />} color="green" hasBackground />
116+
<Card.Icon icon={CopilotIcon} color="green" hasBackground />
117117
<Card.Label color="blue-purple">Beta</Card.Label>
118118
<Card.Heading>Code search & code view</Card.Heading>
119119
<Card.Description>
@@ -153,7 +153,7 @@ The color of the lit area corrosponds to the nearest active, primary accent colo
153153
<Box padding="spacious" backgroundColor="default">
154154
<Stack direction="horizontal" padding="none">
155155
<Card href="https://github.com">
156-
<Card.Icon icon={<CopilotIcon />} color="pink" hasBackground />
156+
<Card.Icon icon={CopilotIcon} color="pink" hasBackground />
157157
<Card.Heading>Code search & code view</Card.Heading>
158158
<Card.Description>
159159
Enables you to rapidly search, navigate, and understand code, right
@@ -166,7 +166,7 @@ The color of the lit area corrosponds to the nearest active, primary accent colo
166166
['--brand-color-accent-primary']: 'var(--base-color-scale-lime-2)',
167167
}}
168168
>
169-
<Card.Icon icon={<ZapIcon />} color="lime" hasBackground />
169+
<Card.Icon icon={ZapIcon} color="lime" hasBackground />
170170
<Card.Heading>Code search & code view</Card.Heading>
171171
<Card.Description>
172172
Enables you to rapidly search, navigate, and understand code, right
@@ -209,21 +209,21 @@ Use the `Stack` component to stack multiple cards horizontally or vertically.
209209
gap="normal"
210210
>
211211
<Card href="https://github.com">
212-
<Card.Icon icon={<CopilotIcon />} color="indigo" hasBackground />
212+
<Card.Icon icon={CopilotIcon} color="indigo" hasBackground />
213213
<Card.Heading>Heading</Card.Heading>
214214
<Card.Description>
215215
Everything you need to know about getting started with GitHub Actions.
216216
</Card.Description>
217217
</Card>
218218
<Card href="https://github.com">
219-
<Card.Icon icon={<RocketIcon />} color="purple" hasBackground />
219+
<Card.Icon icon={RocketIcon} color="purple" hasBackground />
220220
<Card.Heading>Heading</Card.Heading>
221221
<Card.Description>
222222
Everything you need to know about getting started with GitHub Actions.
223223
</Card.Description>
224224
</Card>
225225
<Card href="https://github.com">
226-
<Card.Icon icon={<GitBranchIcon />} color="teal" hasBackground />
226+
<Card.Icon icon={GitBranchIcon} color="teal" hasBackground />
227227
<Card.Heading>Heading</Card.Heading>
228228
<Card.Description>
229229
Everything you need to know about getting started with GitHub Actions.

‎apps/docs/content/getting-started/animation.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ Alternatively, use `delay` to stagger animations on adjacent elements if this fe
178178
>
179179
<Animate animate="scale-in-up">
180180
<Card href="https://github.com">
181-
<Card.Icon icon={<CopilotIcon />} color="indigo" hasBackground />
181+
<Card.Icon icon={CopilotIcon} color="indigo" hasBackground />
182182
<Card.Label>Limited</Card.Label>
183183
<Card.Heading>
184184
Collaboration is the key to DevOps success
@@ -198,7 +198,7 @@ Alternatively, use `delay` to stagger animations on adjacent elements if this fe
198198
>
199199
<Animate animate="scale-in-up">
200200
<Card href="https://github.com">
201-
<Card.Icon icon={<RocketIcon />} hasBackground color="blue" />
201+
<Card.Icon icon={RocketIcon} hasBackground color="blue" />
202202
<Card.Label>Limited</Card.Label>
203203
<Card.Heading>GitHub Actions cheat sheet and more</Card.Heading>
204204
<Card.Description>

‎packages/design-tokens/src/tokens/functional/components/card/colors.json

Lines changed: 0 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -5,124 +5,6 @@
55
"value": "var(--brand-color-canvas-default)",
66
"dark": "var(--brand-color-canvas-subtle)"
77
}
8-
},
9-
"icon": {
10-
"background": {
11-
"default": {
12-
"value": "var(--base-color-scale-gray-0)",
13-
"dark": "var(--base-color-scale-gray-6)"
14-
},
15-
"blue": {
16-
"value": "var(--base-color-scale-blue-0)",
17-
"dark": "var(--base-color-scale-blue-8)"
18-
},
19-
"coral": {
20-
"value": "var(--base-color-scale-coral-0)",
21-
"dark": "var(--base-color-scale-coral-8)"
22-
},
23-
"green": {
24-
"value": "var(--base-color-scale-green-0)",
25-
"dark": "var(--base-color-scale-green-8)"
26-
},
27-
"gray": {
28-
"value": "var(--base-color-scale-gray-0)",
29-
"dark": "var(--base-color-scale-gray-6)"
30-
},
31-
"indigo": {
32-
"value": "var(--base-color-scale-indigo-0)",
33-
"dark": "var(--base-color-scale-indigo-8)"
34-
},
35-
"lemon": {
36-
"value": "var(--base-color-scale-lemon-0)",
37-
"dark": "var(--base-color-scale-lemon-8)"
38-
},
39-
"lime": {
40-
"value": "var(--base-color-scale-lime-0)",
41-
"dark": "var(--base-color-scale-lime-8)"
42-
},
43-
"orange": {
44-
"value": "var(--base-color-scale-orange-0)",
45-
"dark": "var(--base-color-scale-orange-8)"
46-
},
47-
"pink": {
48-
"value": "var(--base-color-scale-pink-0)",
49-
"dark": "var(--base-color-scale-pink-8)"
50-
},
51-
"purple": {
52-
"value": "var(--base-color-scale-purple-0)",
53-
"dark": "var(--base-color-scale-purple-8)"
54-
},
55-
"red": {
56-
"value": "var(--base-color-scale-red-0)",
57-
"dark": "var(--base-color-scale-red-8)"
58-
},
59-
"teal": {
60-
"value": "var(--base-color-scale-teal-0)",
61-
"dark": "var(--base-color-scale-teal-8)"
62-
},
63-
"yellow": {
64-
"value": "var(--base-color-scale-yellow-0)",
65-
"dark": "var(--base-color-scale-yellow-8)"
66-
}
67-
},
68-
"color": {
69-
"default": {
70-
"value": "var(--brand-color-scale-gray-5)",
71-
"dark": "var(--brand-color-scale-gray-2)"
72-
},
73-
"blue": {
74-
"value": "var(--base-color-scale-blue-5)",
75-
"dark": "var(--base-color-scale-blue-2)"
76-
},
77-
"coral": {
78-
"value": "var(--base-color-scale-coral-5)",
79-
"dark": "var(--base-color-scale-coral-2)"
80-
},
81-
"green": {
82-
"value": "var(--base-color-scale-green-5)",
83-
"dark": "var(--base-color-scale-green-2)"
84-
},
85-
"gray": {
86-
"value": "var(--base-color-scale-gray-6)",
87-
"dark": "var(--base-color-scale-gray-2)"
88-
},
89-
"indigo": {
90-
"value": "var(--base-color-scale-indigo-5)",
91-
"dark": "var(--base-color-scale-indigo-2)"
92-
},
93-
"lemon": {
94-
"value": "var(--base-color-scale-lemon-5)",
95-
"dark": "var(--base-color-scale-lemon-2)"
96-
},
97-
"lime": {
98-
"value": "var(--base-color-scale-lime-5)",
99-
"dark": "var(--base-color-scale-lime-2)"
100-
},
101-
"orange": {
102-
"value": "var(--base-color-scale-orange-5)",
103-
"dark": "var(--base-color-scale-orange-2)"
104-
},
105-
"pink": {
106-
"value": "var(--base-color-scale-pink-5)",
107-
"dark": "var(--base-color-scale-pink-2)"
108-
},
109-
"purple": {
110-
"value": "var(--base-color-scale-purple-5)",
111-
"dark": "var(--base-color-scale-purple-2)"
112-
},
113-
"red": {
114-
"value": "var(--base-color-scale-red-5)",
115-
"dark": "var(--base-color-scale-red-2)"
116-
},
117-
"teal": {
118-
"value": "var(--base-color-scale-teal-5)",
119-
"dark": "var(--base-color-scale-teal-2)"
120-
},
121-
"yellow": {
122-
"value": "var(--base-color-scale-yellow-5)",
123-
"dark": "var(--base-color-scale-yellow-2)"
124-
}
125-
}
1268
}
1279
}
12810
}

‎packages/react/src/Bento/Bento.stories.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import React from 'react'
22
import {Meta} from '@storybook/react'
3-
import {Bento} from '.'
4-
import {Link} from '../Link'
5-
63
import {CopilotIcon} from '@primer/octicons-react'
7-
import {Icon} from '../Icon'
4+
import {Bento} from '.'
5+
import {Icon, Link} from '../'
86

97
export default {
108
title: 'Components/Bento',

‎packages/react/src/Bento/Bento.visual.spec.ts-snapshots/Visual-Comparison-Bento-Bento-Default-1-linux.png

-41 Bytes
Loading

‎packages/react/src/BreakoutBanner/BreakoutBanner.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, {forwardRef, ReactElement, useCallback, useMemo, type Ref} from 'react'
22
import clsx from 'clsx'
3-
import {Icon} from '@primer/octicons-react'
43

54
import type {BaseProps} from '../component-helpers'
65
import {Heading, HeadingProps, Text, Stack, Link, LinkProps, StackProps} from '../'
@@ -48,7 +47,7 @@ export type BreakoutBannerProps = BaseProps<HTMLDivElement> &
4847
/**
4948
* An optional leading visual that appears before the heading
5049
*/
51-
leadingVisual?: ReactElement | Icon
50+
leadingVisual?: ReactElement
5251
}
5352

5453
const Root = forwardRef(

‎packages/react/src/Card/Card.features.stories.tsx

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22
import {StoryFn, Meta} from '@storybook/react'
33
import {Card, CardIconColors} from '.'
4-
import {Stack, LabelColors, Grid, ThemeProvider, Box} from '..'
4+
import {Stack, LabelColors, Grid, ThemeProvider, Box, type IconProps} from '..'
55
import placeholderImage from '../fixtures/images/placeholder-600x400.png'
66
import {CopilotIcon, ZapIcon, RocketIcon, GitBranchIcon, HeartIcon} from '@primer/octicons-react'
77

@@ -78,7 +78,7 @@ export const Label: StoryFn<typeof Card> = () => {
7878
export const Icon: StoryFn<typeof Card> = () => {
7979
return (
8080
<Card href="https://github.com">
81-
<Card.Icon icon={<RocketIcon />} />
81+
<Card.Icon icon={RocketIcon} />
8282
<Card.Heading>Code search & code view</Card.Heading>
8383
<Card.Description>
8484
Enables you to rapidly search, navigate, and understand code, right from GitHub.com.
@@ -90,7 +90,7 @@ export const Icon: StoryFn<typeof Card> = () => {
9090
export const Border: StoryFn<typeof Card> = () => {
9191
return (
9292
<Card href="https://github.com" hasBorder>
93-
<Card.Icon icon={<RocketIcon />} />
93+
<Card.Icon icon={RocketIcon} />
9494
<Card.Heading>Code search & code view</Card.Heading>
9595
<Card.Description>
9696
Enables you to rapidly search, navigate, and understand code, right from GitHub.com.
@@ -105,7 +105,7 @@ export const IconColors: StoryFn<typeof Card> = () => {
105105
{CardIconColors.map((color, id) => {
106106
return (
107107
<Card key={id} href="https://github.com">
108-
<Card.Icon icon={<CopilotIcon />} hasBackground color={color} />
108+
<Card.Icon icon={CopilotIcon} hasBackground color={color} />
109109
<Card.Heading>Collaboration is the key to DevOps success</Card.Heading>
110110
<Card.Description>
111111
This Card uses the <b>{color}</b> icon color
@@ -120,7 +120,7 @@ export const IconColors: StoryFn<typeof Card> = () => {
120120
export const WithIconSVG = () => (
121121
<Card href="https://github.com">
122122
<Card.Icon
123-
icon={
123+
icon={() => (
124124
<svg
125125
xmlns="http://www.w3.org/2000/svg"
126126
viewBox="0 0 16 16"
@@ -133,7 +133,7 @@ export const WithIconSVG = () => (
133133
fill="currentColor"
134134
></path>
135135
</svg>
136-
}
136+
)}
137137
hasBackground
138138
color="purple"
139139
/>
@@ -148,7 +148,7 @@ WithIconSVG.storyName = 'Icon (native)'
148148
export const IconAndLabel: StoryFn<typeof Card> = () => {
149149
return (
150150
<Card href="https://github.com">
151-
<Card.Icon icon={<GitBranchIcon />} color="purple" hasBackground />
151+
<Card.Icon icon={GitBranchIcon} color="purple" hasBackground />
152152
<Card.Heading>Code search & code view</Card.Heading>
153153
<Card.Label color="blue-purple">Beta</Card.Label>
154154
<Card.Description>
@@ -198,14 +198,14 @@ export const ImageUsingPictureElement: StoryFn<typeof Card> = () => {
198198
const fixtureData: FixtureData = [
199199
{
200200
href: 'https://github.com',
201-
icon: <CopilotIcon />,
201+
icon: CopilotIcon,
202202
iconColor: 'indigo',
203203
heading: 'Collaboration is the key to DevOps success',
204204
description: 'Everything you need to know about getting started with GitHub Actions.',
205205
},
206206
{
207207
href: 'https://github.com',
208-
icon: <RocketIcon />,
208+
icon: RocketIcon,
209209
iconColor: 'purple',
210210
heading: 'GitHub Actions cheat sheet and more',
211211
description: (
@@ -216,7 +216,7 @@ const fixtureData: FixtureData = [
216216
},
217217
{
218218
href: 'https://github.com',
219-
icon: <GitBranchIcon />,
219+
icon: GitBranchIcon,
220220
iconColor: 'teal',
221221
heading: 'How healthy teams build better software',
222222
description: (
@@ -225,7 +225,7 @@ const fixtureData: FixtureData = [
225225
},
226226
{
227227
href: 'https://github.com',
228-
icon: <HeartIcon />,
228+
icon: HeartIcon,
229229
iconColor: 'pink',
230230
heading: 'GitHub sponsors',
231231
description:
@@ -235,7 +235,7 @@ const fixtureData: FixtureData = [
235235

236236
type FixtureData = {
237237
href: string
238-
icon?: React.ReactNode
238+
icon: IconProps['icon']
239239
iconColor?: (typeof CardIconColors)[number]
240240
label?: string
241241
labelColor?: (typeof LabelColors)[number]
@@ -272,15 +272,15 @@ export const DarkColorModeEffect = () => {
272272
gap={36}
273273
>
274274
<Card href="https://github.com">
275-
<Card.Icon icon={<ZapIcon />} hasBackground />
275+
<Card.Icon icon={ZapIcon} hasBackground />
276276
<Card.Heading>Collaboration is the key to DevOps success</Card.Heading>
277277
<Card.Description>Everything you need to know about getting started with GitHub Actions.</Card.Description>
278278
</Card>
279279
<Card
280280
href="https://github.com"
281281
style={{['--brand-color-accent-primary' as string]: 'var(--base-color-scale-indigo-2)'}}
282282
>
283-
<Card.Icon icon={<CopilotIcon />} hasBackground color="indigo" />
283+
<Card.Icon icon={CopilotIcon} hasBackground color="indigo" />
284284
<Card.Heading>Collaboration is the key to DevOps success</Card.Heading>
285285
<Card.Description>Everything you need to know about getting started with GitHub Actions.</Card.Description>
286286
</Card>
@@ -289,7 +289,7 @@ export const DarkColorModeEffect = () => {
289289
href="https://github.com"
290290
style={{['--brand-color-accent-primary' as string]: 'var(--base-color-scale-yellow-2)'}}
291291
>
292-
<Card.Icon icon={<GitBranchIcon />} hasBackground color="yellow" />
292+
<Card.Icon icon={GitBranchIcon} hasBackground color="yellow" />
293293
<Card.Heading>Collaboration is the key to DevOps success</Card.Heading>
294294
<Card.Description>Everything you need to know about getting started with GitHub Actions.</Card.Description>
295295
</Card>
@@ -305,7 +305,7 @@ export const DarkColorModeEffect = () => {
305305
href="https://github.com"
306306
style={{['--brand-color-accent-primary' as string]: 'var(--base-color-scale-red-2)'}}
307307
>
308-
<Card.Icon icon={<HeartIcon />} hasBackground color="red" />
308+
<Card.Icon icon={HeartIcon} hasBackground color="red" />
309309
<Card.Heading>Collaboration is the key to DevOps success</Card.Heading>
310310
<Card.Description>Everything you need to know about getting started with GitHub Actions.</Card.Description>
311311
</Card>
@@ -314,15 +314,15 @@ export const DarkColorModeEffect = () => {
314314
href="https://github.com"
315315
style={{['--brand-color-accent-primary' as string]: 'var(--base-color-scale-orange-2)'}}
316316
>
317-
<Card.Icon icon={<ZapIcon />} hasBackground color="orange" />
317+
<Card.Icon icon={ZapIcon} hasBackground color="orange" />
318318
<Card.Heading>Collaboration is the key to DevOps success</Card.Heading>
319319
<Card.Description>Everything you need to know about getting started with GitHub Actions.</Card.Description>
320320
</Card>
321321
<Card
322322
href="https://github.com"
323323
style={{['--brand-color-accent-primary' as string]: 'var(--base-color-scale-lime-2)'}}
324324
>
325-
<Card.Icon icon={<RocketIcon />} hasBackground color="lime" />
325+
<Card.Icon icon={RocketIcon} hasBackground color="lime" />
326326
<Card.Heading>Collaboration is the key to DevOps success</Card.Heading>
327327
<Card.Description>Everything you need to know about getting started with GitHub Actions.</Card.Description>
328328
</Card>

0 commit comments

Comments
 (0)