@primer/gatsby-theme-doctocat 4.2.1 → 4.2.2
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
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @primer/gatsby-theme-doctocat
|
|
2
2
|
|
|
3
|
+
## 4.2.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`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
|
|
8
|
+
|
|
3
9
|
## 4.2.1
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
package/package.json
CHANGED
|
@@ -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, size, short}) {
|
|
6
|
+
return (
|
|
7
|
+
<>
|
|
8
|
+
{a11yReviewed ? (
|
|
9
|
+
<Label
|
|
10
|
+
size={size}
|
|
11
|
+
sx={{
|
|
12
|
+
display: 'flex',
|
|
13
|
+
alignItems: 'center',
|
|
14
|
+
gap: 1,
|
|
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={size}
|
|
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 size="large" status={status} />
|
|
116
|
+
</li>
|
|
117
|
+
<li>
|
|
118
|
+
<AccessibilityLabel size="large" a11yReviewed={a11yReviewed} />
|
|
119
|
+
</li>
|
|
133
120
|
</Box>
|
|
134
121
|
) : null}
|
|
135
122
|
{source || storybook || lookbook || figma || rails || react ? (
|