@khanacademy/wonder-blocks-clickable 2.3.1 → 2.3.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 +13 -0
- package/dist/es/index.js +1 -2
- package/dist/index.js +1 -2
- package/docs.md +4 -6
- package/package.json +2 -2
- package/src/components/__tests__/clickable-behavior.test.js +312 -374
- package/src/components/__tests__/clickable.test.js +113 -103
- package/src/components/clickable.js +0 -2
- package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap +0 -426
- package/src/__tests__/generated-snapshot.test.js +0 -176
- package/src/components/clickable.md +0 -203
|
@@ -1,203 +0,0 @@
|
|
|
1
|
-
### Creating a Clickable component
|
|
2
|
-
|
|
3
|
-
You can make custom components `Clickable` by returning them in a function of the
|
|
4
|
-
`Clickable` child. The eventState parameter the function takes allows access to states
|
|
5
|
-
pressed, hovered and clicked, which you may use to create custom styles.
|
|
6
|
-
|
|
7
|
-
Clickable has a default focus ring style built-in. If you are creating your own
|
|
8
|
-
custom focus ring it should be disabled using by setting `hideDefaultFocusRing={true}`
|
|
9
|
-
in the props passed to `Clickable`.
|
|
10
|
-
|
|
11
|
-
```jsx
|
|
12
|
-
import {StyleSheet} from "aphrodite";
|
|
13
|
-
import Clickable from "@khanacademy/wonder-blocks-clickable";
|
|
14
|
-
import {View} from "@khanacademy/wonder-blocks-core";
|
|
15
|
-
import Color from "@khanacademy/wonder-blocks-color";
|
|
16
|
-
import {Body} from "@khanacademy/wonder-blocks-typography";
|
|
17
|
-
|
|
18
|
-
const styles = StyleSheet.create({
|
|
19
|
-
hovered: {
|
|
20
|
-
textDecoration: "underline",
|
|
21
|
-
backgroundColor: Color.teal,
|
|
22
|
-
},
|
|
23
|
-
pressed: {
|
|
24
|
-
color: Color.blue,
|
|
25
|
-
},
|
|
26
|
-
focused: {
|
|
27
|
-
outline: `solid 4px ${Color.offBlack64}`,
|
|
28
|
-
},
|
|
29
|
-
});
|
|
30
|
-
|
|
31
|
-
<View>
|
|
32
|
-
<Clickable
|
|
33
|
-
onClick={() => alert("You clicked some text!")}
|
|
34
|
-
hideDefaultFocusRing={true}
|
|
35
|
-
role="tab"
|
|
36
|
-
>
|
|
37
|
-
{
|
|
38
|
-
({hovered, focused, pressed}) =>
|
|
39
|
-
<View style={[
|
|
40
|
-
hovered && styles.hovered,
|
|
41
|
-
focused && styles.focused,
|
|
42
|
-
pressed && styles.pressed,
|
|
43
|
-
]}>
|
|
44
|
-
<Body>
|
|
45
|
-
This text is clickable!
|
|
46
|
-
</Body>
|
|
47
|
-
</View>
|
|
48
|
-
}
|
|
49
|
-
</Clickable>
|
|
50
|
-
</View>
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
Clickable has a `light` prop which changes the default focus ring color to fit a dark background.
|
|
54
|
-
|
|
55
|
-
```jsx
|
|
56
|
-
import {StyleSheet} from "aphrodite";
|
|
57
|
-
import Clickable from "@khanacademy/wonder-blocks-clickable";
|
|
58
|
-
import {View} from "@khanacademy/wonder-blocks-core";
|
|
59
|
-
import Color from "@khanacademy/wonder-blocks-color";
|
|
60
|
-
import Spacing from "@khanacademy/wonder-blocks-spacing";
|
|
61
|
-
import {Body} from "@khanacademy/wonder-blocks-typography";
|
|
62
|
-
|
|
63
|
-
const styles = StyleSheet.create({
|
|
64
|
-
background: {
|
|
65
|
-
backgroundColor: Color.darkBlue,
|
|
66
|
-
color: Color.white,
|
|
67
|
-
padding: Spacing.small_12,
|
|
68
|
-
},
|
|
69
|
-
hovered: {
|
|
70
|
-
textDecoration: "underline",
|
|
71
|
-
backgroundColor: Color.purple,
|
|
72
|
-
},
|
|
73
|
-
pressed: {
|
|
74
|
-
color: Color.blue,
|
|
75
|
-
},
|
|
76
|
-
});
|
|
77
|
-
|
|
78
|
-
<View style={styles.background}>
|
|
79
|
-
<Clickable
|
|
80
|
-
onClick={() => alert("You clicked some text!")}
|
|
81
|
-
role="tab"
|
|
82
|
-
light={true}
|
|
83
|
-
>
|
|
84
|
-
{
|
|
85
|
-
({hovered, focused, pressed}) =>
|
|
86
|
-
<View style={[
|
|
87
|
-
hovered && styles.hovered,
|
|
88
|
-
pressed && styles.pressed,
|
|
89
|
-
]}>
|
|
90
|
-
<Body>
|
|
91
|
-
This text is clickable!
|
|
92
|
-
</Body>
|
|
93
|
-
</View>
|
|
94
|
-
}
|
|
95
|
-
</Clickable>
|
|
96
|
-
</View>
|
|
97
|
-
```
|
|
98
|
-
|
|
99
|
-
### Client-Side routing with Clickable
|
|
100
|
-
|
|
101
|
-
If your Clickable component is within a React-Router enviroment, your component will automatically default to client-side routing with the `href` prop is set. This behavior can be toggeled by passing the `skipClientNav` prop. In this example we see two Clickable h1 tags, one which employs client-side routing, and the other uses skipClientNav to avoid this default behavior.
|
|
102
|
-
|
|
103
|
-
```jsx
|
|
104
|
-
import {StyleSheet} from "aphrodite";
|
|
105
|
-
import Clickable from "@khanacademy/wonder-blocks-clickable";
|
|
106
|
-
import {View} from "@khanacademy/wonder-blocks-core";
|
|
107
|
-
import Spacing from "@khanacademy/wonder-blocks-spacing";
|
|
108
|
-
import {MemoryRouter, Route, Switch} from "react-router-dom";
|
|
109
|
-
|
|
110
|
-
const styles = StyleSheet.create({
|
|
111
|
-
row: {
|
|
112
|
-
flexDirection: "row",
|
|
113
|
-
alignItems: "center",
|
|
114
|
-
},
|
|
115
|
-
h1: {
|
|
116
|
-
marginRight: Spacing.large_24,
|
|
117
|
-
}
|
|
118
|
-
});
|
|
119
|
-
|
|
120
|
-
// NOTE: In actual code you would use BrowserRouter instead
|
|
121
|
-
<MemoryRouter>
|
|
122
|
-
<View style={styles.row}>
|
|
123
|
-
<Clickable href="/foo" style={styles.h1} onClick={() => console.log("I'm still on the same page!")}>
|
|
124
|
-
{
|
|
125
|
-
eventState =>
|
|
126
|
-
<h1>
|
|
127
|
-
Uses Client-side Nav
|
|
128
|
-
</h1>
|
|
129
|
-
}
|
|
130
|
-
</Clickable>
|
|
131
|
-
<Clickable href="/foo" style={styles.h1} skipClientNav>
|
|
132
|
-
{
|
|
133
|
-
eventState =>
|
|
134
|
-
<h1>
|
|
135
|
-
Avoids Client-side Nav
|
|
136
|
-
</h1>
|
|
137
|
-
}
|
|
138
|
-
</Clickable>
|
|
139
|
-
<Switch>
|
|
140
|
-
<Route path="/foo">
|
|
141
|
-
<View id="foo">Hello, world!</View>
|
|
142
|
-
</Route>
|
|
143
|
-
</Switch>
|
|
144
|
-
</View>
|
|
145
|
-
</MemoryRouter>
|
|
146
|
-
```
|
|
147
|
-
|
|
148
|
-
### Running callbacks on navigation
|
|
149
|
-
|
|
150
|
-
When using the `href` prop, the `onClick`, `beforeNav`, and `safeWithNav` props
|
|
151
|
-
can be used to run callbacks when navigating to the new URL. Which prop to use
|
|
152
|
-
depends on the use case. See the [Button](#section-button) documentation for
|
|
153
|
-
details.
|
|
154
|
-
|
|
155
|
-
### Navigating with the Keyboard
|
|
156
|
-
|
|
157
|
-
Clickable adds support to keyboard navigation. This way, your components are
|
|
158
|
-
accessible and emulate better the browser's behavior.
|
|
159
|
-
|
|
160
|
-
*NOTE:* If you want to navigate to an external URL and/or reload the window, make
|
|
161
|
-
sure to use `href` and `skipClientNav={true}`.
|
|
162
|
-
|
|
163
|
-
```jsx
|
|
164
|
-
import {StyleSheet} from "aphrodite";
|
|
165
|
-
import Clickable from "@khanacademy/wonder-blocks-clickable";
|
|
166
|
-
import {View} from "@khanacademy/wonder-blocks-core";
|
|
167
|
-
import Color from "@khanacademy/wonder-blocks-color";
|
|
168
|
-
import {Body} from "@khanacademy/wonder-blocks-typography";
|
|
169
|
-
|
|
170
|
-
const styles = StyleSheet.create({
|
|
171
|
-
hovered: {
|
|
172
|
-
textDecoration: "underline",
|
|
173
|
-
backgroundColor: Color.teal,
|
|
174
|
-
},
|
|
175
|
-
pressed: {
|
|
176
|
-
color: Color.blue,
|
|
177
|
-
},
|
|
178
|
-
focused: {
|
|
179
|
-
outline: `solid 4px ${Color.lightBlue}`,
|
|
180
|
-
},
|
|
181
|
-
});
|
|
182
|
-
|
|
183
|
-
<View>
|
|
184
|
-
<Clickable
|
|
185
|
-
href="https://www.khanacademy.org/about/tos"
|
|
186
|
-
skipClientNav={true}
|
|
187
|
-
hideDefaultFocusRing={true}
|
|
188
|
-
>
|
|
189
|
-
{
|
|
190
|
-
({hovered, focused, pressed}) =>
|
|
191
|
-
<View style={[
|
|
192
|
-
hovered && styles.hovered,
|
|
193
|
-
focused && styles.focused,
|
|
194
|
-
pressed && styles.pressed,
|
|
195
|
-
]}>
|
|
196
|
-
<Body>
|
|
197
|
-
This text should navigate using the keyboard
|
|
198
|
-
</Body>
|
|
199
|
-
</View>
|
|
200
|
-
}
|
|
201
|
-
</Clickable>
|
|
202
|
-
</View>
|
|
203
|
-
```
|