Skip to content

Commit c3f79b1

Browse files
radglobradglob
authored
Merge branch 'main' into fix-actionlist-semantics
2 parents 5572566 + faa7667 commit c3f79b1

File tree

10 files changed

+419
-28
lines changed

10 files changed

+419
-28
lines changed

‎generated/components.json

Lines changed: 83 additions & 13 deletions
Large diffs are not rendered by default.

‎src/Blankslate/Blankslate.docs.json

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
{
2+
"id": "blankslate",
3+
"name": "Blankslate",
4+
"status": "alpha",
5+
"a11yReviewed": false,
6+
"stories": [],
7+
"props": [
8+
{
9+
"name": "border",
10+
"type": "boolean",
11+
"description": ""
12+
},
13+
{
14+
"name": "narrow",
15+
"type": "boolean",
16+
"description": ""
17+
},
18+
{
19+
"name": "spacious",
20+
"type": "boolean",
21+
"description": ""
22+
}
23+
],
24+
"subcomponents": [
25+
{
26+
"name": "Blankslate.Visual",
27+
"props": []
28+
},
29+
{
30+
"name": "Blankslate.Heading",
31+
"props": [
32+
{
33+
"name": "as",
34+
"type": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'"
35+
}
36+
]
37+
},
38+
{
39+
"name": "Blankslate.Description",
40+
"props": []
41+
},
42+
{
43+
"name": "Blankslate.PrimaryAction",
44+
"props": [
45+
{
46+
"name": "href",
47+
"type": "string"
48+
}
49+
]
50+
},
51+
{
52+
"name": "Blankslate.SecondaryAction",
53+
"props": [
54+
{
55+
"name": "href",
56+
"type": "string"
57+
}
58+
]
59+
}
60+
]
61+
}

‎src/Blankslate/Blankslate.features.stories.tsx

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import {BookIcon} from '@primer/octicons-react'
2+
import React from 'react'
3+
import {Blankslate} from '../Blankslate'
4+
5+
export default {
6+
title: 'Drafts/Components/Blankslate/Features',
7+
component: Blankslate,
8+
subcomponents: {
9+
'Blankslate.Visual': Blankslate.Visual,
10+
'Blankslate.Heading': Blankslate.Heading,
11+
'Blankslate.Description': Blankslate.Description,
12+
'Blankslate.PrimaryAction': Blankslate.PrimaryAction,
13+
'Blankslate.SecondaryAction': Blankslate.SecondaryAction,
14+
},
15+
}
16+
17+
export const WithVisual = () => (
18+
<Blankslate>
19+
<Blankslate.Visual>
20+
<BookIcon size="medium" />
21+
</Blankslate.Visual>
22+
<Blankslate.Heading>Blankslate heading</Blankslate.Heading>
23+
<Blankslate.Description>Use it to provide information when no dynamic content exists.</Blankslate.Description>
24+
</Blankslate>
25+
)
26+
27+
export const WithPrimaryAction = () => (
28+
<Blankslate>
29+
<Blankslate.Visual>
30+
<BookIcon size="medium" />
31+
</Blankslate.Visual>
32+
<Blankslate.Heading>Blankslate heading</Blankslate.Heading>
33+
<Blankslate.Description>Use it to provide information when no dynamic content exists.</Blankslate.Description>
34+
<Blankslate.PrimaryAction href="#">Primary action</Blankslate.PrimaryAction>
35+
</Blankslate>
36+
)
37+
38+
export const WithSecondaryAction = () => (
39+
<Blankslate>
40+
<Blankslate.Visual>
41+
<BookIcon size="medium" />
42+
</Blankslate.Visual>
43+
<Blankslate.Heading>Blankslate heading</Blankslate.Heading>
44+
<Blankslate.Description>Use it to provide information when no dynamic content exists.</Blankslate.Description>
45+
<Blankslate.SecondaryAction href="#">Secondary action</Blankslate.SecondaryAction>
46+
</Blankslate>
47+
)
48+
49+
export const WithBorder = () => (
50+
<Blankslate border>
51+
<Blankslate.Visual>
52+
<BookIcon size="medium" />
53+
</Blankslate.Visual>
54+
<Blankslate.Heading>Blankslate heading</Blankslate.Heading>
55+
<Blankslate.Description>Use it to provide information when no dynamic content exists.</Blankslate.Description>
56+
</Blankslate>
57+
)
58+
59+
export const Narrow = () => (
60+
<Blankslate narrow>
61+
<Blankslate.Visual>
62+
<BookIcon size="medium" />
63+
</Blankslate.Visual>
64+
<Blankslate.Heading>Blankslate heading</Blankslate.Heading>
65+
<Blankslate.Description>Use it to provide information when no dynamic content exists.</Blankslate.Description>
66+
</Blankslate>
67+
)
68+
69+
export const Spacious = () => (
70+
<Blankslate spacious>
71+
<Blankslate.Visual>
72+
<BookIcon size="medium" />
73+
</Blankslate.Visual>
74+
<Blankslate.Heading>Blankslate heading</Blankslate.Heading>
75+
<Blankslate.Description>Use it to provide information when no dynamic content exists.</Blankslate.Description>
76+
</Blankslate>
77+
)

‎src/Blankslate/Blankslate.stories.tsx

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import {BookIcon} from '@primer/octicons-react'
2+
import {Meta, Story} from '@storybook/react'
3+
import React from 'react'
4+
import {Blankslate} from '../Blankslate'
5+
import {ComponentProps} from '../utils/types'
6+
7+
export default {
8+
title: 'Drafts/Components/Blankslate',
9+
component: Blankslate,
10+
subcomponents: {
11+
'Blankslate.Visual': Blankslate.Visual,
12+
'Blankslate.Heading': Blankslate.Heading,
13+
'Blankslate.Description': Blankslate.Description,
14+
'Blankslate.PrimaryAction': Blankslate.PrimaryAction,
15+
'Blankslate.SecondaryAction': Blankslate.SecondaryAction,
16+
},
17+
} as Meta<typeof Blankslate>
18+
19+
export const Default = () => (
20+
<Blankslate>
21+
<Blankslate.Visual>
22+
<BookIcon size="medium" />
23+
</Blankslate.Visual>
24+
<Blankslate.Heading>Welcome to the mona wiki!</Blankslate.Heading>
25+
<Blankslate.Description>
26+
Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and
27+
document software better, together.
28+
</Blankslate.Description>
29+
<Blankslate.PrimaryAction href="#">Create the first page</Blankslate.PrimaryAction>
30+
<Blankslate.SecondaryAction href="#">Learn more about wikis</Blankslate.SecondaryAction>
31+
</Blankslate>
32+
)
33+
34+
export const Playground: Story<ComponentProps<typeof Blankslate>> = args => (
35+
<Blankslate {...args}>
36+
<Blankslate.Visual>
37+
<BookIcon size="medium" />
38+
</Blankslate.Visual>
39+
<Blankslate.Heading>Welcome to the mona wiki!</Blankslate.Heading>
40+
<Blankslate.Description>
41+
Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and
42+
document software better, together.
43+
</Blankslate.Description>
44+
<Blankslate.PrimaryAction href="#">Create the first page</Blankslate.PrimaryAction>
45+
<Blankslate.SecondaryAction href="#">Learn more about wikis</Blankslate.SecondaryAction>
46+
</Blankslate>
47+
)
48+
49+
Playground.args = {
50+
border: false,
51+
narrow: false,
52+
spacious: false,
53+
}

‎src/Blankslate/Blankslate.tsx

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
import React from 'react'
2+
import styled from 'styled-components'
3+
import Box from '../Box'
4+
import {Button} from '../Button'
5+
import {get} from '../constants'
6+
import Link from '../Link'
7+
8+
const StyledBlankslate = styled.div`
9+
display: grid;
10+
justify-items: center;
11+
padding: ${get('space.5')};
12+
13+
&[data-border='true'] {
14+
border: ${get('borderWidths.1')} solid ${get('colors.border.default')};
15+
border-radius: ${get('radii.2')};
16+
}
17+
18+
&[data-narrow='true'] {
19+
margin: 0 auto;
20+
max-width: 485px;
21+
}
22+
23+
&[data-spacious='true'] {
24+
padding: ${get('space.9')} ${get('space.6')};
25+
}
26+
27+
.BlankSlateAction {
28+
margin-top: ${get('space.3')};
29+
}
30+
31+
.BlankSlateAction:first-of-type {
32+
margin-top: ${get('space.4')};
33+
}
34+
35+
.BlankSlateAction:last-of-type {
36+
margin-bottom: ${get('space.2')};
37+
}
38+
`
39+
40+
export type BlankslateProps = React.PropsWithChildren<{
41+
/**
42+
* Add a border around this component
43+
*/
44+
border?: boolean
45+
46+
/**
47+
* Constrain the maximum width of this component
48+
*/
49+
narrow?: boolean
50+
51+
/**
52+
* Increase the padding of this component
53+
*/
54+
spacious?: boolean
55+
}>
56+
57+
function Blankslate({border, children, narrow, spacious}: BlankslateProps) {
58+
return (
59+
<StyledBlankslate data-border={border} data-narrow={narrow} data-spacious={spacious}>
60+
{children}
61+
</StyledBlankslate>
62+
)
63+
}
64+
65+
export type VisualProps = React.PropsWithChildren
66+
67+
function Visual({children}: VisualProps) {
68+
return <Box sx={{color: 'fg.muted', mb: 3}}>{children}</Box>
69+
}
70+
71+
export type HeadingProps = React.PropsWithChildren<{
72+
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
73+
}>
74+
75+
function Heading({as = 'h2', children}: HeadingProps) {
76+
return (
77+
<Box as={as} sx={{m: 0, mb: 2}}>
78+
{children}
79+
</Box>
80+
)
81+
}
82+
83+
export type DescriptionProps = React.PropsWithChildren
84+
85+
function Description({children}: DescriptionProps) {
86+
return (
87+
<Box as="p" sx={{color: 'fg.muted', m: 0, mb: 2}}>
88+
{children}
89+
</Box>
90+
)
91+
}
92+
93+
export type PrimaryActionProps = React.PropsWithChildren<{
94+
href: string
95+
}>
96+
97+
function PrimaryAction({children, href}: PrimaryActionProps) {
98+
return (
99+
<div className="BlankSlateAction">
100+
<Button as="a" href={href} variant="primary">
101+
{children}
102+
</Button>
103+
</div>
104+
)
105+
}
106+
107+
export type SecondaryActionProps = React.PropsWithChildren<{
108+
href: string
109+
}>
110+
111+
function SecondaryAction({children, href}: SecondaryActionProps) {
112+
return (
113+
<div className="BlankSlateAction">
114+
<Link href={href}>{children}</Link>
115+
</div>
116+
)
117+
}
118+
119+
export default Object.assign(Blankslate, {
120+
Visual,
121+
Heading,
122+
Description,
123+
PrimaryAction,
124+
SecondaryAction,
125+
})

‎src/Blankslate/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export {default as Blankslate} from './Blankslate'

0 commit comments

Comments
 (0)