Skip to content

Commit e415327

Browse files
llastflowersllastflowers
authored
Update Token and UnderlineNav stories to no longer use styled-components (#6585)
1 parent 4f4a8af commit e415327

File tree

4 files changed

+163
-105
lines changed

4 files changed

+163
-105
lines changed

‎packages/react/src/Token/Token.features.stories.module.css

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.TokenRow {
2+
display: flex;
3+
align-items: start;
4+
gap: var(--base-size-8);
5+
}
6+
7+
.TokenColumn {
8+
display: flex;
9+
flex-direction: column;
10+
align-items: start;
11+
gap: var(--base-size-8);
12+
}
13+
14+
.TokenWrapRow {
15+
display: flex;
16+
flex-wrap: wrap;
17+
align-items: start;
18+
gap: var(--base-size-8);
19+
}

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

Lines changed: 15 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import type {Meta} from '@storybook/react-vite'
22
import {action} from 'storybook/actions'
3-
import {get} from '../constants'
43
import {BaseStyles, ThemeProvider} from '..'
5-
import Box from '../Box'
64
import Token from './Token'
75
import {GitBranchIcon} from '@primer/octicons-react'
86
import IssueLabelToken from './IssueLabelToken'
7+
import classes from './Token.features.stories.module.css'
98

109
export default {
1110
title: 'Components/Token/Features',
@@ -25,16 +24,10 @@ export default {
2524

2625
export const InteractiveToken = () => {
2726
return (
28-
<Box
29-
display="flex"
30-
sx={{
31-
alignItems: 'start',
32-
gap: get('space.2'),
33-
}}
34-
>
27+
<div className={classes.TokenRow}>
3528
<Token as="a" href="/?path=/story/components-token-features--issue-label-token-custom-colors" text="Link" />
3629
<Token as="button" onClick={action('clicked')} text="Button" />
37-
</Box>
30+
</div>
3831
)
3932
}
4033

@@ -44,13 +37,7 @@ export const TokenWithLeadingVisual = () => {
4437

4538
export const TokenWithOnRemoveFn = ({...args}) => {
4639
return (
47-
<Box
48-
display="flex"
49-
sx={{
50-
alignItems: 'start',
51-
gap: get('space.2'),
52-
}}
53-
>
40+
<div className={classes.TokenRow}>
5441
<Token text="token" onRemove={action('remove me')} {...args} />
5542
<Token
5643
as="a"
@@ -60,7 +47,7 @@ export const TokenWithOnRemoveFn = ({...args}) => {
6047
{...args}
6148
/>
6249
<Token as="button" onClick={action('clicked')} onRemove={action('remove me')} text="Button" {...args} />
63-
</Box>
50+
</div>
6451
)
6552
}
6653

@@ -84,34 +71,22 @@ DefaultIssueLabelToken.storyName = 'Default IssueLabelToken'
8471

8572
export const InteractiveIssueLabelToken = () => {
8673
return (
87-
<Box
88-
display="flex"
89-
sx={{
90-
alignItems: 'start',
91-
gap: get('space.2'),
92-
}}
93-
>
74+
<div className={classes.TokenRow}>
9475
<IssueLabelToken
9576
as="a"
9677
href="/?path=/story/components-token-features--issue-label-token-custom-colors"
9778
text="Link"
9879
/>
9980
<IssueLabelToken as="button" onClick={action('clicked')} text="Button" />
100-
</Box>
81+
</div>
10182
)
10283
}
10384

10485
InteractiveIssueLabelToken.storyName = 'Interactive IssueLabelToken'
10586

10687
export const IssueLabelTokenWithOnRemoveFn = () => {
10788
return (
108-
<Box
109-
display="flex"
110-
sx={{
111-
alignItems: 'start',
112-
gap: get('space.2'),
113-
}}
114-
>
89+
<div className={classes.TokenRow}>
11590
<IssueLabelToken text="token" onRemove={action('remove me')} />
11691
<IssueLabelToken
11792
as="a"
@@ -120,7 +95,7 @@ export const IssueLabelTokenWithOnRemoveFn = () => {
12095
text="Link"
12196
/>
12297
<IssueLabelToken as="button" onClick={action('clicked')} onRemove={action('remove me')} text="Button" />
123-
</Box>
98+
</div>
12499
)
125100
}
126101

@@ -133,38 +108,18 @@ export const XLargeToken = () => <Token text="token" size="xlarge" />
133108

134109
export const IssueLabelTokenCustomColors = () => {
135110
return (
136-
<Box
137-
display="flex"
138-
sx={{
139-
flexDirection: 'column',
140-
alignItems: 'start',
141-
gap: get('space.2'),
142-
}}
143-
>
144-
<Box
145-
display="flex"
146-
sx={{
147-
alignItems: 'start',
148-
gap: get('space.2'),
149-
}}
150-
>
111+
<div className={classes.TokenColumn}>
112+
<div className={classes.TokenRow}>
151113
<IssueLabelToken
152114
as="a"
153115
href="/?path=/story/components-token-features--issue-label-token-custom-colors"
154116
text="Link"
155117
fillColor="#0366d6"
156118
/>
157119
<IssueLabelToken as="button" onClick={action('clicked')} text="Button" fillColor="lightpink" />
158-
</Box>
120+
</div>
159121
<h3>Color examples</h3>
160-
<Box
161-
display="flex"
162-
flexWrap="wrap"
163-
sx={{
164-
alignItems: 'start',
165-
gap: get('space.2'),
166-
}}
167-
>
122+
<div className={classes.TokenWrapRow}>
168123
<IssueLabelToken
169124
as="a"
170125
href="/?path=/story/components-token-features--issue-label-token-custom-colors"
@@ -279,7 +234,7 @@ export const IssueLabelTokenCustomColors = () => {
279234
text="💡 Light"
280235
fillColor="#E40C74"
281236
/>
282-
</Box>
283-
</Box>
237+
</div>
238+
</div>
284239
)
285240
}

‎packages/react/src/UnderlineNav/UnderlineNav.examples.stories.module.css

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
.PullRequestNavContainer {
2+
display: flex;
3+
flex-direction: column;
4+
gap: var(--base-size-16);
5+
}
6+
7+
.PullRequestTitle {
8+
font-weight: var(--base-text-weight-normal);
9+
}
10+
11+
.PullRequestNumber {
12+
color: var(--fgColor-muted);
13+
font-weight: var(--base-text-weight-light);
14+
}
15+
16+
.PullRequestInfoRow {
17+
display: flex;
18+
gap: var(--base-size-8);
19+
align-items: center;
20+
}
21+
22+
.PullRequestInfoText {
23+
font-size: var(--text-body-size-medium);
24+
color: var(--fgColor-muted);
25+
}
26+
27+
.PullRequestInfoUser {
28+
font-weight: var(--base-text-weight-semibold);
29+
}
30+
31+
.ProfileContainer {
32+
display: flex;
33+
flex-direction: row;
34+
gap: var(--base-size-16);
35+
align-items: flex-start;
36+
}
37+
38+
.ProfileSidebar {
39+
display: flex;
40+
flex-direction: column;
41+
align-items: flex-start;
42+
height: 100%;
43+
}
44+
45+
.ProfileBioInfo {
46+
padding-block: var(--base-size-16);
47+
}
48+
49+
.ProfileBioName {
50+
/* stylelint-disable-next-line primer/typography */
51+
font-size: var(--base-size-24);
52+
}
53+
54+
.ProfileBioUsername {
55+
font-size: var(--text-title-size-medium);
56+
font-weight: var(--base-text-weight-light);
57+
}
58+
59+
.ProfileEditSection {
60+
display: flex;
61+
flex-direction: column;
62+
color: var(--fgColor-onEmphasis);
63+
}
64+
65+
.ProfileFollowRow {
66+
display: flex;
67+
flex-direction: row;
68+
align-items: center;
69+
margin-top: var(--base-size-16);
70+
}
71+
72+
.ProfileFollowerIcon {
73+
margin-right: var(--base-size-4);
74+
}
75+
76+
.ProfileFollowerCount {
77+
margin-right: var(--base-size-8);
78+
}
79+
80+
.ProfileFollowingCount {
81+
margin-left: var(--base-size-8);
82+
}
83+
84+
.ProfileNav {
85+
flex-grow: 1;
86+
}
87+
88+
.ProfileReadme {
89+
border: var(--borderWidth-default) solid var(--borderColor-default);
90+
margin-top: var(--base-size-8);
91+
border-radius: var(--borderRadius-large);
92+
height: 300px;
93+
width: 80%;
94+
padding: var(--base-size-24);
95+
}

0 commit comments

Comments
 (0)