-
Notifications
You must be signed in to change notification settings - Fork 66
/
button.js
237 lines (232 loc) · 7.27 KB
/
button.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
import * as core from '@pluralsight/ps-design-system-core'
import Button from '@pluralsight/ps-design-system-button'
import {CheckIcon, ChannelIcon, PlayIcon, UserIcon, PencilIcon} from '@pluralsight/ps-design-system-icon'
import React from 'react'
import * as Text from '@pluralsight/ps-design-system-text'
import {
Chrome,
Code,
Content,
Example,
Link,
P,
PageHeading,
PropTypes,
SectionHeading,
TextLink,
ThemeToggle
} from '../../src/ui/index.js'
export default _ => (
<Chrome>
<Content title="Button">
<PageHeading packageName="button">Button</PageHeading>
<P>Install the component dependency:</P>
<Code language="bash">
npm install @pluralsight/ps-design-system-button
</Code>
<P>Include a React component in your project:</P>
<Code language="javascript">
import Button from '@pluralsight/ps-design-system-button'
</Code>
<PropTypes
props={[
PropTypes.row([
'appearance',
PropTypes.union(Button.appearances),
null,
<code>primary</code>,
<span>
visual style (from <code>Button.appearances</code>)
</span>
]),
PropTypes.row([
'disabled',
'boolean',
null,
<code>false</code>,
'standard input disable flag'
]),
PropTypes.row([
'href',
'string',
null,
null,
'url of resource (renders as anchor)'
]),
PropTypes.row([
'icon',
<code>*Icon</code>,
null,
null,
'Icon component'
]),
PropTypes.row([
'iconAlign',
PropTypes.union(Button.iconAligns),
null,
<code>left</code>,
<span>
horizontal icon placement (from <code>Button.iconAligns</code>)
</span>
]),
PropTypes.row([
'loading',
'boolean',
null,
<code>false</code>,
'disables button and shows spinner'
]),
PropTypes.row([
'size',
PropTypes.union(Button.sizes),
null,
<code>medium</code>,
<span>
button size (from <code>Button.sizes</code>)
</span>
])
]}
/>
<SectionHeading>Appearance</SectionHeading>
<P>Buttons come in three standard visual styles.</P>
<Example.React
themeToggle
includes={{ Button }}
codes={Object.keys(Button.appearances).map(
a => `<Button appearance={Button.appearances.${a}}>Click me</Button>`
)}
/>
<SectionHeading>Size</SectionHeading>
<P>Buttons come in four standard sizes. The default size is 'medium'.</P>
<Example.React
themeToggle
includes={{ Button }}
codes={Object.keys(Button.sizes).map(
s => `<Button size={Button.sizes.${s}}>Click me</Button>`
)}
/>
<SectionHeading>Icon </SectionHeading>
<P>
Buttons may include an icon to the left or right of the label. Read more{' '}
<Link href="/components/icon">icon docs</Link>.
</P>
<Example.React
themeToggle
includes={{ Button, CheckIcon, ChannelIcon, PlayIcon }}
codes={[
`<Button icon={<CheckIcon />}>With Icon</Button>`,
`<Button icon={<ChannelIcon />} appearance={Button.appearances.stroke}>With Icon</Button>`,
`<Button icon={<PlayIcon />} iconAlign={Button.iconAligns.right} appearance={Button.appearances.flat}>Aligned to Right</Button>`
]}
/>
<SectionHeading>Icon only</SectionHeading>
<P>
Buttons may include an icon without a label. Please provide a{' '}
<Text.Code>title</Text.Code> prop to display the native tooltip as well
as to support assistive technology(i.e. screen readers).
</P>
<P>
Read more <Link href="/components/icon">icon docs</Link>.
</P>
<Example.React
themeToggle
includes={{ Button, UserIcon }}
codes={[
`<Button icon={<UserIcon />} title="Profile" />`,
`
<Button
icon={<UserIcon />}
appearance={Button.appearances.flat}
title="Profile"
/>`
]}
/>
<SectionHeading>Disabled</SectionHeading>
<P>
Each button may be displayed as disabled. Do not use disabled treatment
for non-disabled buttons.
</P>
<Example.React
themeToggle
includes={{ Button, PencilIcon }}
codes={[
`<Button disabled>Disabled</Button>`,
`<Button disabled appearance={Button.appearances.stroke}>Disabled</Button>`,
`<Button disabled appearance={Button.appearances.flat}>Disabled</Button>`,
`<Button disabled icon={<PencilIcon />}>Disabled</Button>`
]}
/>
<SectionHeading>As Link</SectionHeading>
<P>
Elements that are visually equivalent to buttons but change the URL and
link to a new experience should be rendered as HTML anchor tags. Provide
an <Text.Code>href</Text.Code> prop, and the button will render as an
anchor tag.
</P>
<Example.React
themeToggle
includes={{ Button, PencilIcon }}
codes={[
`<Button href="https://duckduckgo.com?q=pluralsight" target="_blank">Link</Button>`,
`<Button href="https://duckduckgo.com?q=pluralsight%20icons" target="_blank" icon={<PencilIcon />}>Link with icon</Button>`
]}
/>
<SectionHeading>With react-router</SectionHeading>
<P>
Many users of this component are using it in conjunction with{' '}
<TextLink href="https://github.com/ReactTraining/react-router/issues/1176">
<Text.Code>react-router</Text.Code>
</TextLink>
. If you'd like to do the same and use <Text.Code>Button</Text.Code> to
trigger react-router links, you can follow this pattern.
</P>
<ThemeToggle.Container>
<div
style={{
padding: core.layout.spacingLarge
}}
>
<Button>React-router link</Button>
</div>
</ThemeToggle.Container>
<Code
lang="javascript"
collapsible
>{`import Button from "@pluralsight/ps-design-system-button"
import { withRouter } from "react-router-dom"
// #1 Define your react-router-specific ButtonLink
const ButtonLink = withRouter(props => (
<Button
{...props}
onClick={evt => {
evt.preventDefault();
props.onClick && props.onClick(evt);
props.history.push(props.to);
}}
href={props.to}
/>
))
// #2 Invoke it like you'd usually use Link
<ButtonLink to="/other">React-router Link as DS button</ButtonLink>`}</Code>
<SectionHeading>Loading</SectionHeading>
<P>
To show a spinner, pass a <Text.Code>loading</Text.Code> flag to your
button. By default, it replaces your icon. If no icon is present, it
replaces your text.
</P>
<Example.React
themeToggle
orient="vertical"
includes={{ Button, UserIcon }}
codes={[
`
<Button
icon={<UserIcon />}
loading
>Loading...</Button>
`
]}
/>
</Content>
</Chrome>
)