@primer/gatsby-theme-doctocat 4.2.2 → 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 +9 -0
- package/index.js +1 -0
- package/package.json +2 -2
- package/src/components/accessibility-label.js +4 -4
- package/src/components/figma-link.js +1 -1
- package/src/components/layout.js +4 -4
- 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 -9
- package/src/components/storybook-link.js +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
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
|
+
|
|
3
12
|
## 4.2.2
|
|
4
13
|
|
|
5
14
|
### 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",
|
|
@@ -2,16 +2,16 @@ import {Label, StyledOcticon} from '@primer/react'
|
|
|
2
2
|
import {AccessibilityInsetIcon} from '@primer/octicons-react'
|
|
3
3
|
import React from 'react'
|
|
4
4
|
|
|
5
|
-
function AccessibilityLabel({a11yReviewed,
|
|
5
|
+
function AccessibilityLabel({a11yReviewed, short}) {
|
|
6
6
|
return (
|
|
7
7
|
<>
|
|
8
8
|
{a11yReviewed ? (
|
|
9
9
|
<Label
|
|
10
|
-
size=
|
|
10
|
+
size="large"
|
|
11
11
|
sx={{
|
|
12
12
|
display: 'flex',
|
|
13
13
|
alignItems: 'center',
|
|
14
|
-
gap:
|
|
14
|
+
gap: 2,
|
|
15
15
|
backgroundColor: 'done.subtle',
|
|
16
16
|
fontWeight: 'normal',
|
|
17
17
|
borderColor: 'transparent'
|
|
@@ -22,7 +22,7 @@ function AccessibilityLabel({a11yReviewed, size, short}) {
|
|
|
22
22
|
</Label>
|
|
23
23
|
) : (
|
|
24
24
|
<Label
|
|
25
|
-
size=
|
|
25
|
+
size="large"
|
|
26
26
|
sx={{
|
|
27
27
|
backgroundColor: 'neutral.subtle',
|
|
28
28
|
fontWeight: 'normal',
|
package/src/components/layout.js
CHANGED
|
@@ -112,10 +112,10 @@ function Layout({children, pageContext}) {
|
|
|
112
112
|
}}
|
|
113
113
|
>
|
|
114
114
|
<li>
|
|
115
|
-
<StatusLabel
|
|
115
|
+
<StatusLabel status={status} />
|
|
116
116
|
</li>
|
|
117
117
|
<li>
|
|
118
|
-
<AccessibilityLabel
|
|
118
|
+
<AccessibilityLabel a11yReviewed={a11yReviewed} />
|
|
119
119
|
</li>
|
|
120
120
|
</Box>
|
|
121
121
|
) : null}
|
|
@@ -125,7 +125,7 @@ function Layout({children, pageContext}) {
|
|
|
125
125
|
sx={{
|
|
126
126
|
display: 'flex',
|
|
127
127
|
flexWrap: 'wrap',
|
|
128
|
-
gap:
|
|
128
|
+
gap: 4,
|
|
129
129
|
alignItems: 'center',
|
|
130
130
|
m: 0,
|
|
131
131
|
p: 0,
|
|
@@ -136,9 +136,9 @@ function Layout({children, pageContext}) {
|
|
|
136
136
|
{source ? <SourceLink href={source} /> : null}
|
|
137
137
|
{lookbook ? <LookbookLink href={lookbook} /> : null}
|
|
138
138
|
{storybook ? <StorybookLink href={storybook} /> : null}
|
|
139
|
-
{figma ? <FigmaLink href={figma} /> : null}
|
|
140
139
|
{react ? <ReactLink href={react} /> : null}
|
|
141
140
|
{rails ? <RailsLink href={rails} /> : null}
|
|
141
|
+
{figma ? <FigmaLink href={figma} /> : null}
|
|
142
142
|
</Box>
|
|
143
143
|
) : null}
|
|
144
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,12 +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
|
-
size=
|
|
30
|
+
size="large"
|
|
32
31
|
sx={{
|
|
33
32
|
display: 'inline-flex',
|
|
34
33
|
alignItems: 'center',
|
|
@@ -38,10 +37,7 @@ function StatusLabel({status, size}) {
|
|
|
38
37
|
fontWeight: 'normal'
|
|
39
38
|
}}
|
|
40
39
|
>
|
|
41
|
-
<
|
|
42
|
-
aria-hidden="true"
|
|
43
|
-
sx={{height: circleSize, width: circleSize, backgroundColor: getStatusColor(status), borderRadius: 99}}
|
|
44
|
-
/>
|
|
40
|
+
<StyledOcticon icon={DotFillIcon} sx={{color: getStatusColor(status)}} />
|
|
45
41
|
{status}
|
|
46
42
|
</Label>
|
|
47
43
|
)
|