@primer/gatsby-theme-doctocat 4.2.1 → 4.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -0
- package/index.js +1 -0
- package/package.json +2 -2
- package/src/components/accessibility-label.js +39 -0
- package/src/components/figma-link.js +1 -1
- package/src/components/layout.js +26 -39
- package/src/components/lookbook-link.js +1 -1
- package/src/components/rails-link.js +3 -21
- package/src/components/react-link.js +1 -1
- package/src/components/source-link.js +1 -1
- package/src/components/status-label.js +5 -10
- package/src/components/storybook-link.js +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @primer/gatsby-theme-doctocat
|
|
2
2
|
|
|
3
|
+
## 4.2.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`f9ce48f`](https://github.com/primer/doctocat/commit/f9ce48f9133dbc01193a0f76c1b8323ff1af2d97) [#512](https://github.com/primer/doctocat/pull/512) Thanks [@josepmartins](https://github.com/josepmartins)! - - Use `rails` and `dotfilled` for rails-link and status-label component. cc @ashygee
|
|
8
|
+
- Adjust spacing between status labels and source links in layout
|
|
9
|
+
|
|
10
|
+
* [`a43a1d3`](https://github.com/primer/doctocat/commit/a43a1d3913a4edb554194c751a2d33f47dd73545) [#514](https://github.com/primer/doctocat/pull/514) Thanks [@josepmartins](https://github.com/josepmartins)! - Bump component-metadata to v0.5.1
|
|
11
|
+
|
|
12
|
+
## 4.2.2
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [`da5c046`](https://github.com/primer/doctocat/commit/da5c04600843876e6b905fa439d8cd8ee73bdf91) [#501](https://github.com/primer/doctocat/pull/501) Thanks [@josepmartins](https://github.com/josepmartins)! - Adjust accessibilty labels content
|
|
17
|
+
|
|
3
18
|
## 4.2.1
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
package/index.js
CHANGED
|
@@ -10,4 +10,5 @@ export {default as Note} from './src/components/note'
|
|
|
10
10
|
export {default as HeroLayout} from './src/components/hero-layout'
|
|
11
11
|
export {default as Sidebar} from './src/components/sidebar'
|
|
12
12
|
export {default as StatusLabel} from './src/components/status-label'
|
|
13
|
+
export {default as AccessibilityLabel} from './src/components/accessibility-label'
|
|
13
14
|
export {default as ImageContainer} from './src/components/image-container'
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/gatsby-theme-doctocat",
|
|
3
|
-
"version": "4.2.
|
|
3
|
+
"version": "4.2.3",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"scripts": {
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"@babel/preset-react": "^7.0.0",
|
|
33
33
|
"@mdx-js/mdx": "^1.0.21",
|
|
34
34
|
"@mdx-js/react": "^1.0.21",
|
|
35
|
-
"@primer/component-metadata": "^0.
|
|
35
|
+
"@primer/component-metadata": "^0.5.1",
|
|
36
36
|
"@primer/octicons-react": "^17.5.0",
|
|
37
37
|
"@primer/react": "^35.2.2",
|
|
38
38
|
"@styled-system/theme-get": "^5.0.12",
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import {Label, StyledOcticon} from '@primer/react'
|
|
2
|
+
import {AccessibilityInsetIcon} from '@primer/octicons-react'
|
|
3
|
+
import React from 'react'
|
|
4
|
+
|
|
5
|
+
function AccessibilityLabel({a11yReviewed, short}) {
|
|
6
|
+
return (
|
|
7
|
+
<>
|
|
8
|
+
{a11yReviewed ? (
|
|
9
|
+
<Label
|
|
10
|
+
size="large"
|
|
11
|
+
sx={{
|
|
12
|
+
display: 'flex',
|
|
13
|
+
alignItems: 'center',
|
|
14
|
+
gap: 2,
|
|
15
|
+
backgroundColor: 'done.subtle',
|
|
16
|
+
fontWeight: 'normal',
|
|
17
|
+
borderColor: 'transparent'
|
|
18
|
+
}}
|
|
19
|
+
>
|
|
20
|
+
<StyledOcticon icon={AccessibilityInsetIcon} sx={{fill: 'done.fg'}} />
|
|
21
|
+
{short ? 'Reviewed' : 'Reviewed for accessibility'}
|
|
22
|
+
</Label>
|
|
23
|
+
) : (
|
|
24
|
+
<Label
|
|
25
|
+
size="large"
|
|
26
|
+
sx={{
|
|
27
|
+
backgroundColor: 'neutral.subtle',
|
|
28
|
+
fontWeight: 'normal',
|
|
29
|
+
borderColor: 'transparent'
|
|
30
|
+
}}
|
|
31
|
+
>
|
|
32
|
+
{short ? 'Not reviewed' : 'Not reviewed for accessibility'}
|
|
33
|
+
</Label>
|
|
34
|
+
)}
|
|
35
|
+
</>
|
|
36
|
+
)
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
export default AccessibilityLabel
|
package/src/components/layout.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import componentMetadata from '@primer/component-metadata'
|
|
2
|
-
import {Box, Heading, Text
|
|
3
|
-
import {AccessibilityInsetIcon} from '@primer/octicons-react'
|
|
2
|
+
import {Box, Heading, Text} from '@primer/react'
|
|
4
3
|
import React from 'react'
|
|
5
4
|
import Head from './head'
|
|
6
5
|
import Header, {HEADER_HEIGHT} from './header'
|
|
@@ -10,6 +9,7 @@ import SourceLink from './source-link'
|
|
|
10
9
|
import RailsLink from './rails-link'
|
|
11
10
|
import ReactLink from './react-link'
|
|
12
11
|
import StatusLabel from './status-label'
|
|
12
|
+
import AccessibilityLabel from './accessibility-label'
|
|
13
13
|
import LookbookLink from './lookbook-link'
|
|
14
14
|
import StorybookLink from './storybook-link'
|
|
15
15
|
import FigmaLink from './figma-link'
|
|
@@ -81,11 +81,9 @@ function Layout({children, pageContext}) {
|
|
|
81
81
|
</Box>
|
|
82
82
|
) : null}
|
|
83
83
|
<Box sx={{width: '100%', maxWidth: '960px'}}>
|
|
84
|
-
<Box sx={{mb:
|
|
84
|
+
<Box sx={{mb: 4}}>
|
|
85
85
|
<Box sx={{alignItems: 'center', display: 'flex'}}>
|
|
86
|
-
<Heading as="h1"
|
|
87
|
-
{title}
|
|
88
|
-
</Heading>{' '}
|
|
86
|
+
<Heading as="h1">{title}</Heading>{' '}
|
|
89
87
|
</Box>
|
|
90
88
|
{description ? <Box sx={{fontSize: 3, mb: 3}}>{description}</Box> : null}
|
|
91
89
|
<Box
|
|
@@ -93,43 +91,32 @@ function Layout({children, pageContext}) {
|
|
|
93
91
|
display: 'flex',
|
|
94
92
|
flexWrap: 'wrap',
|
|
95
93
|
columnGap: 3,
|
|
94
|
+
mb: 7,
|
|
95
|
+
mt: 2,
|
|
96
96
|
rowGap: 3,
|
|
97
97
|
alignItems: 'center',
|
|
98
98
|
fontSize: 1
|
|
99
99
|
}}
|
|
100
100
|
>
|
|
101
101
|
{status ? (
|
|
102
|
-
<Box
|
|
103
|
-
|
|
104
|
-
{
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
) : (
|
|
121
|
-
<Label
|
|
122
|
-
size="large"
|
|
123
|
-
as={'li'}
|
|
124
|
-
sx={{
|
|
125
|
-
backgroundColor: 'neutral.subtle',
|
|
126
|
-
fontWeight: 'normal',
|
|
127
|
-
borderColor: 'transparent'
|
|
128
|
-
}}
|
|
129
|
-
>
|
|
130
|
-
Review pending by accessibility team
|
|
131
|
-
</Label>
|
|
132
|
-
)}
|
|
102
|
+
<Box
|
|
103
|
+
as={'ul'}
|
|
104
|
+
sx={{
|
|
105
|
+
display: 'flex',
|
|
106
|
+
gap: 1,
|
|
107
|
+
alignItems: 'center',
|
|
108
|
+
m: 0,
|
|
109
|
+
p: 0,
|
|
110
|
+
paddingInline: 0,
|
|
111
|
+
listStyle: 'none'
|
|
112
|
+
}}
|
|
113
|
+
>
|
|
114
|
+
<li>
|
|
115
|
+
<StatusLabel status={status} />
|
|
116
|
+
</li>
|
|
117
|
+
<li>
|
|
118
|
+
<AccessibilityLabel a11yReviewed={a11yReviewed} />
|
|
119
|
+
</li>
|
|
133
120
|
</Box>
|
|
134
121
|
) : null}
|
|
135
122
|
{source || storybook || lookbook || figma || rails || react ? (
|
|
@@ -138,7 +125,7 @@ function Layout({children, pageContext}) {
|
|
|
138
125
|
sx={{
|
|
139
126
|
display: 'flex',
|
|
140
127
|
flexWrap: 'wrap',
|
|
141
|
-
gap:
|
|
128
|
+
gap: 4,
|
|
142
129
|
alignItems: 'center',
|
|
143
130
|
m: 0,
|
|
144
131
|
p: 0,
|
|
@@ -149,9 +136,9 @@ function Layout({children, pageContext}) {
|
|
|
149
136
|
{source ? <SourceLink href={source} /> : null}
|
|
150
137
|
{lookbook ? <LookbookLink href={lookbook} /> : null}
|
|
151
138
|
{storybook ? <StorybookLink href={storybook} /> : null}
|
|
152
|
-
{figma ? <FigmaLink href={figma} /> : null}
|
|
153
139
|
{react ? <ReactLink href={react} /> : null}
|
|
154
140
|
{rails ? <RailsLink href={rails} /> : null}
|
|
141
|
+
{figma ? <FigmaLink href={figma} /> : null}
|
|
155
142
|
</Box>
|
|
156
143
|
) : null}
|
|
157
144
|
</Box>
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import {Link, Text, Box} from '@primer/react'
|
|
2
|
+
import {RubyIcon} from '@primer/octicons-react'
|
|
2
3
|
import React from 'react'
|
|
3
4
|
|
|
4
5
|
function SourceLink({href}) {
|
|
5
6
|
return (
|
|
6
7
|
<li>
|
|
7
8
|
<Link href={href} target="_blank">
|
|
8
|
-
<Box sx={{display: 'flex', gap:
|
|
9
|
-
<
|
|
9
|
+
<Box sx={{display: 'flex', gap: 2, alignItems: 'center'}}>
|
|
10
|
+
<RubyIcon />
|
|
10
11
|
<Text>Rails</Text>
|
|
11
12
|
</Box>
|
|
12
13
|
</Link>
|
|
@@ -14,23 +15,4 @@ function SourceLink({href}) {
|
|
|
14
15
|
)
|
|
15
16
|
}
|
|
16
17
|
|
|
17
|
-
function RailsLogo() {
|
|
18
|
-
return (
|
|
19
|
-
<svg
|
|
20
|
-
viewBox="0 0 16 16"
|
|
21
|
-
aria-hidden="true"
|
|
22
|
-
width={16}
|
|
23
|
-
height={16}
|
|
24
|
-
fill="currentColor"
|
|
25
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
26
|
-
>
|
|
27
|
-
<path
|
|
28
|
-
fillRule="evenodd"
|
|
29
|
-
clipRule="evenodd"
|
|
30
|
-
d="M3.92 1a1 1 0 0 0-.764.355L.236 4.812a1 1 0 0 0-.012 1.275l6.975 8.596a1 1 0 0 0 1.553 0l.972-1.197h.002l.002-.005 6-7.394a1 1 0 0 0-.013-1.275l-2.92-3.457A1 1 0 0 0 12.03 1H3.92Zm6.7 9 3.044-3.75h-2.082L10.62 10Zm.966-5.25h2.113l-1.9-2.25h-.776l.563 2.25ZM9.476 2.5l.563 2.25H5.961l.562-2.25h2.954Zm.557 3.75-1.677 6.54-.38.47-.31-.381-1.7-6.629h4.067Zm-7.781-1.5 1.9-2.25h.825l-.562 2.25H2.252Zm.035 1.5h2.131l.985 3.84-3.116-3.84Z"
|
|
31
|
-
/>
|
|
32
|
-
</svg>
|
|
33
|
-
)
|
|
34
|
-
}
|
|
35
|
-
|
|
36
18
|
export default SourceLink
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {Label,
|
|
1
|
+
import {Label, StyledOcticon} from '@primer/react'
|
|
2
|
+
import {DotFillIcon} from '@primer/octicons-react'
|
|
2
3
|
import React from 'react'
|
|
3
4
|
|
|
4
5
|
const STATUS_COLORS = {
|
|
@@ -23,13 +24,10 @@ function getStatusBackgroundColor(status) {
|
|
|
23
24
|
return STATUS_BACKGROUND[status.toLowerCase()] || 'neutral.subtle'
|
|
24
25
|
}
|
|
25
26
|
|
|
26
|
-
function StatusLabel({status
|
|
27
|
-
const circleSize = size === 'large' ? 8 : 6
|
|
28
|
-
|
|
27
|
+
function StatusLabel({status}) {
|
|
29
28
|
return (
|
|
30
29
|
<Label
|
|
31
|
-
|
|
32
|
-
size={size || 'small'}
|
|
30
|
+
size="large"
|
|
33
31
|
sx={{
|
|
34
32
|
display: 'inline-flex',
|
|
35
33
|
alignItems: 'center',
|
|
@@ -39,10 +37,7 @@ function StatusLabel({status, size}) {
|
|
|
39
37
|
fontWeight: 'normal'
|
|
40
38
|
}}
|
|
41
39
|
>
|
|
42
|
-
<
|
|
43
|
-
aria-hidden="true"
|
|
44
|
-
sx={{height: circleSize, width: circleSize, backgroundColor: getStatusColor(status), borderRadius: 99}}
|
|
45
|
-
/>
|
|
40
|
+
<StyledOcticon icon={DotFillIcon} sx={{color: getStatusColor(status)}} />
|
|
46
41
|
{status}
|
|
47
42
|
</Label>
|
|
48
43
|
)
|