1
1
import React from 'react'
2
2
import {
3
3
IconProps ,
4
- EyeIcon ,
5
4
CodeIcon ,
6
5
IssueOpenedIcon ,
7
6
GitPullRequestIcon ,
@@ -10,65 +9,58 @@ import {
10
9
ProjectIcon ,
11
10
GraphIcon ,
12
11
ShieldLockIcon ,
13
- GearIcon
12
+ GearIcon ,
13
+ CommitIcon ,
14
+ ChecklistIcon ,
15
+ FileDiffIcon ,
16
+ BookIcon ,
17
+ RepoIcon ,
18
+ PackageIcon ,
19
+ StarIcon ,
20
+ ThreeBarsIcon ,
21
+ PeopleIcon
14
22
} from '@primer/octicons-react'
15
23
import { Meta } from '@storybook/react'
16
24
import { UnderlineNav } from './index'
17
- import { BaseStyles , ThemeProvider } from '..'
25
+ import { Avatar , StyledOcticon , Button , Box , Heading , Link , Text , StateLabel , BranchName } from '..'
18
26
19
27
export default {
20
- title : 'Components/UnderlineNav' ,
21
- decorators : [
22
- Story => {
23
- return (
24
- < ThemeProvider >
25
- < BaseStyles >
26
- < Story />
27
- </ BaseStyles >
28
- </ ThemeProvider >
29
- )
30
- }
31
- ]
28
+ title : 'Drafts/Components/UnderlineNav/Examples'
32
29
} as Meta
33
30
34
- export const DefaultNav = ( ) => {
31
+ export const PullRequestPage = ( ) => {
35
32
return (
36
- < UnderlineNav aria-label = "Repository" >
37
- < UnderlineNav . Item selected > Code</ UnderlineNav . Item >
38
- < UnderlineNav . Item > Issues</ UnderlineNav . Item >
39
- < UnderlineNav . Item > Pull Requests</ UnderlineNav . Item >
40
- </ UnderlineNav >
41
- )
42
- }
43
-
44
- export const withIcons = ( ) => {
45
- return (
46
- < UnderlineNav aria-label = "Repository with icons" >
47
- < UnderlineNav . Item icon = { CodeIcon } > Code</ UnderlineNav . Item >
48
- < UnderlineNav . Item icon = { EyeIcon } counter = { 6 } >
49
- Issues
50
- </ UnderlineNav . Item >
51
- < UnderlineNav . Item selected icon = { GitPullRequestIcon } >
52
- Pull Requests
53
- </ UnderlineNav . Item >
54
- < UnderlineNav . Item icon = { CommentDiscussionIcon } counter = { 7 } >
55
- Discussions
56
- </ UnderlineNav . Item >
57
- < UnderlineNav . Item icon = { ProjectIcon } > Projects</ UnderlineNav . Item >
58
- </ UnderlineNav >
59
- )
60
- }
61
-
62
- export const withCounterLabels = ( ) => {
63
- return (
64
- < UnderlineNav aria-label = "Repository with counters" >
65
- < UnderlineNav . Item selected icon = { CodeIcon } >
66
- Code
67
- </ UnderlineNav . Item >
68
- < UnderlineNav . Item icon = { IssueOpenedIcon } counter = { 12 } >
69
- Issues
70
- </ UnderlineNav . Item >
71
- </ UnderlineNav >
33
+ < Box sx = { { display : 'flex' , flexDirection : 'column' , gap : 3 } } >
34
+ < Box >
35
+ < Heading as = "h1" sx = { { fontWeight : 'normal' } } >
36
+ Switch to new UnderlineNav < Text sx = { { color : 'fg.muted' , fontWeight : 'light' } } > #1111</ Text >
37
+ </ Heading >
38
+ < Box sx = { { display : 'flex' , gap : 2 , alignItems : 'center' } } >
39
+ < StateLabel status = "pullOpened" > Open</ StateLabel >
40
+ < Text sx = { { fontSize : 1 , color : 'fg.muted' } } >
41
+ < Link href = "#" muted sx = { { fontWeight : 'bold' } } >
42
+ broccolinisoup
43
+ </ Link > { ' ' }
44
+ wants to merge 3 commits into < BranchName href = "#" > main</ BranchName > from{ ' ' }
45
+ < BranchName href = "#" > broccolinisoup/switch-to-new-underlineNav</ BranchName >
46
+ </ Text >
47
+ </ Box >
48
+ </ Box >
49
+ < UnderlineNav aria-label = "Pull Request" >
50
+ < UnderlineNav . Item icon = { CommentDiscussionIcon } counter = "0" selected >
51
+ Conversation
52
+ </ UnderlineNav . Item >
53
+ < UnderlineNav . Item counter = { 3 } icon = { CommitIcon } >
54
+ Commits
55
+ </ UnderlineNav . Item >
56
+ < UnderlineNav . Item counter = { 7 } icon = { ChecklistIcon } >
57
+ Checks
58
+ </ UnderlineNav . Item >
59
+ < UnderlineNav . Item counter = { 4 } icon = { FileDiffIcon } >
60
+ Files Changes
61
+ </ UnderlineNav . Item >
62
+ </ UnderlineNav >
63
+ </ Box >
72
64
)
73
65
}
74
66
@@ -84,7 +76,7 @@ const items: {navigation: string; icon: React.FC<IconProps>; counter?: number |
84
76
{ navigation : 'Security' , icon : ShieldLockIcon , href : '#security' }
85
77
]
86
78
87
- export const InternalResponsiveNav = ( ) => {
79
+ export const ReposPage = ( ) => {
88
80
const [ selectedIndex , setSelectedIndex ] = React . useState < number | null > ( 1 )
89
81
90
82
return (
@@ -94,7 +86,10 @@ export const InternalResponsiveNav = () => {
94
86
key = { item . navigation }
95
87
icon = { item . icon }
96
88
selected = { index === selectedIndex }
97
- onSelect = { ( ) => setSelectedIndex ( index ) }
89
+ onSelect = { event => {
90
+ event . preventDefault ( )
91
+ setSelectedIndex ( index )
92
+ } }
98
93
counter = { item . counter }
99
94
href = { item . href }
100
95
>
@@ -105,22 +100,81 @@ export const InternalResponsiveNav = () => {
105
100
)
106
101
}
107
102
108
- export const CountersLoadingState = ( ) => {
109
- const [ selectedIndex , setSelectedIndex ] = React . useState < number | null > ( 1 )
103
+ const profileItems : { navigation : string ; icon : React . FC < IconProps > ; counter ?: number | string ; href ?: string } [ ] = [
104
+ { navigation : 'Overview' , icon : BookIcon , href : '#overview' } ,
105
+ { navigation : 'Repositories' , icon : RepoIcon , counter : '12' , href : '#repositories' } ,
106
+ { navigation : 'Projects' , icon : ProjectIcon , counter : 3 , href : '#projects' } ,
107
+ { navigation : 'Packages' , icon : PackageIcon , counter : '0' , href : '#packages' } ,
108
+ { navigation : 'Stars' , icon : StarIcon , counter : '0' , href : '#stars' } ,
109
+ { navigation : 'Activity' , icon : ThreeBarsIcon , counter : 67 , href : '#activity' }
110
+ ]
110
111
112
+ export const ProfilePage = ( ) => {
113
+ const [ selectedIndex , setSelectedIndex ] = React . useState < number | null > ( 1 )
111
114
return (
112
- < UnderlineNav aria-label = "Repository with loading counters" loadingCounters = { true } >
113
- { items . map ( ( item , index ) => (
114
- < UnderlineNav . Item
115
- key = { item . navigation }
116
- icon = { item . icon }
117
- selected = { index === selectedIndex }
118
- onSelect = { ( ) => setSelectedIndex ( index ) }
119
- counter = { item . counter }
115
+ < Box sx = { { display : 'flex' , flexDirection : 'row' , gap : 3 , alignItems : 'flex-start' } } >
116
+ < Box sx = { { display : 'flex' , flexDirection : 'column' , alignItems : 'flex-start' , height : '100%' } } >
117
+ < Avatar size = { 256 } src = "https://avatars.githubusercontent.com/u/92997159?v=4" alt = "mona user avatar" />
118
+ < Box >
119
+ { /* Initial bio info */ }
120
+ < Box sx = { { paddingY : 3 } } >
121
+ < Heading as = "h1" sx = { { fontSize : 24 } } >
122
+ Monalisa Octocat
123
+ </ Heading >
124
+ < Heading as = "h1" sx = { { fontSize : 20 , fontWeight : 300 , color : 'fg.subtle' } } >
125
+ mona
126
+ </ Heading >
127
+ </ Box >
128
+
129
+ { /* Edit Profile / Profile details */ }
130
+ < Box sx = { { display : 'flex' , flexDirection : 'column' , color : 'fg.onEmphasis' } } >
131
+ < Button sx = { { width : '100%' } } > Edit Profile</ Button >
132
+
133
+ < Box sx = { { display : 'flex' , flexDirection : 'row' , alignItems : 'center' , marginTop : 3 } } >
134
+ < StyledOcticon icon = { PeopleIcon } size = { 16 } color = "fg.subtle" sx = { { marginRight : 1 } } />
135
+ < Link href = "https://github.com" muted sx = { { marginRight : 2 } } >
136
+ 47 Followers
137
+ </ Link >
138
+ < span > · </ span >
139
+ < Link href = "https://github.com" muted sx = { { marginLeft : 2 } } >
140
+ 54 Following
141
+ </ Link >
142
+ </ Box >
143
+ </ Box >
144
+ </ Box >
145
+ </ Box >
146
+ < Box sx = { { flexGrow : 1 } } >
147
+ < UnderlineNav aria-label = "Repository" >
148
+ { profileItems . map ( ( item , index ) => (
149
+ < UnderlineNav . Item
150
+ key = { item . navigation }
151
+ icon = { item . icon }
152
+ selected = { index === selectedIndex }
153
+ onSelect = { event => {
154
+ event . preventDefault ( )
155
+ setSelectedIndex ( index )
156
+ } }
157
+ counter = { item . counter }
158
+ href = { item . href }
159
+ >
160
+ { item . navigation }
161
+ </ UnderlineNav . Item >
162
+ ) ) }
163
+ </ UnderlineNav >
164
+ < Box
165
+ sx = { {
166
+ border : '1px solid' ,
167
+ marginTop : 2 ,
168
+ borderColor : 'border.default' ,
169
+ borderRadius : '12px' ,
170
+ height : '300px' ,
171
+ width : '80%' ,
172
+ padding : 4
173
+ } }
120
174
>
121
- { item . navigation }
122
- </ UnderlineNav . Item >
123
- ) ) }
124
- </ UnderlineNav >
175
+ < Text color = "fg.subtle" > mona/README.md </ Text >
176
+ </ Box >
177
+ </ Box >
178
+ </ Box >
125
179
)
126
180
}
0 commit comments