@planningcenter/chat-react-native 1.6.2-rc.1 → 1.6.2-rc.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/build/components/display/badge.d.ts +58 -0
- package/build/components/display/badge.d.ts.map +1 -0
- package/build/components/display/badge.js +186 -0
- package/build/components/display/badge.js.map +1 -0
- package/build/components/display/button_color_utils.d.ts +1 -1
- package/build/components/display/index.d.ts +2 -0
- package/build/components/display/index.d.ts.map +1 -1
- package/build/components/display/index.js +2 -0
- package/build/components/display/index.js.map +1 -1
- package/build/components/display/switch.d.ts +4 -0
- package/build/components/display/switch.d.ts.map +1 -0
- package/build/components/display/switch.js +14 -0
- package/build/components/display/switch.js.map +1 -0
- package/build/screens/design_system_screen.d.ts.map +1 -1
- package/build/screens/design_system_screen.js +408 -332
- package/build/screens/design_system_screen.js.map +1 -1
- package/build/utils/theme.d.ts +19 -0
- package/build/utils/theme.d.ts.map +1 -1
- package/build/utils/theme.js +37 -0
- package/build/utils/theme.js.map +1 -1
- package/build/vendor/tapestry/tokens.d.ts +30 -0
- package/build/vendor/tapestry/tokens.d.ts.map +1 -1
- package/build/vendor/tapestry/tokens.js +30 -0
- package/build/vendor/tapestry/tokens.js.map +1 -1
- package/package.json +2 -2
- package/src/components/display/badge.tsx +323 -0
- package/src/components/display/index.ts +2 -0
- package/src/components/display/switch.tsx +23 -0
- package/src/screens/design_system_screen.tsx +714 -571
- package/src/utils/theme.ts +56 -0
- package/src/vendor/tapestry/tokens.ts +30 -0
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
2
|
import { Alert, Pressable, ScrollView, StyleSheet, View } from 'react-native';
|
|
3
3
|
import { useTheme } from '../hooks';
|
|
4
|
-
import { Avatar, AvatarGroup, Button, Heading, Icon, IconButton, Image, Spinner, Text, TextButton, TextInlineButton, } from '../components/display';
|
|
4
|
+
import { Avatar, AvatarGroup, Badge, Button, Heading, Icon, IconButton, Image, Spinner, Switch, Text, TextButton, TextInlineButton, } from '../components/display';
|
|
5
5
|
import { space, MAX_FONT_SIZE_MULTIPLIER, platformPressedOpacityStyle, platformFontWeightMedium, } from '../utils';
|
|
6
|
+
// =================================
|
|
7
|
+
// ====== Docs Utils ===============
|
|
8
|
+
// =================================
|
|
6
9
|
const URL = {
|
|
7
10
|
image: 'https://picsum.photos/seed/picsum/200',
|
|
8
11
|
broken: 'https://broken.url',
|
|
@@ -22,343 +25,413 @@ const URL = {
|
|
|
22
25
|
],
|
|
23
26
|
};
|
|
24
27
|
const buttonPress = () => Alert.alert('Button clicked');
|
|
28
|
+
// =================================
|
|
29
|
+
// ====== Component ================
|
|
30
|
+
// =================================
|
|
25
31
|
export function DesignSystemScreen() {
|
|
26
32
|
const styles = useStyles();
|
|
27
|
-
const { colors } = useTheme();
|
|
28
33
|
return (<ScrollView contentContainerStyle={styles.container} style={styles.scrollView}>
|
|
29
|
-
<
|
|
30
|
-
<Row>
|
|
31
|
-
<Text>🚧 Coming soon! 🚧</Text>
|
|
32
|
-
</Row>
|
|
33
|
-
</CollapsableSection>
|
|
34
|
-
<CollapsableSection title="Atoms">
|
|
35
|
-
<Group title="Spinner" description="Loading indicators that can be used within or close to atomic components. Not intended for full-screen loading.">
|
|
36
|
-
<Row style={styles.spinnerContainer}>
|
|
37
|
-
<Spinner size={24}/>
|
|
38
|
-
</Row>
|
|
39
|
-
</Group>
|
|
40
|
-
<Group title="Image" description="Foundational way of displaying images. Loading or broken images will fallback to show a spinner. Hide decortive images from screen readers with `alt=''`.">
|
|
41
|
-
<Row>
|
|
42
|
-
<Image source={{ uri: URL.broken }} style={styles.image} alt="Mountain sunrise"/>
|
|
43
|
-
<Image source={{ uri: URL.image }} style={styles.image} alt="Mountain sunrise"/>
|
|
44
|
-
<Image source={{ uri: URL.image }} style={styles.image} alt=""/>
|
|
45
|
-
</Row>
|
|
46
|
-
</Group>
|
|
47
|
-
<Group title="Avatar" description='Displays the profile image for a user in different sizes and has a loading fallback. Can optionally show an online/offline "presence" indicator.'>
|
|
48
|
-
<Row>
|
|
49
|
-
<Avatar sourceUri={URL.broken}/>
|
|
50
|
-
<Avatar size="md" sourceUri={URL.avatar_fallback}/>
|
|
51
|
-
<Avatar sourceUri={URL.avatar}/>
|
|
52
|
-
</Row>
|
|
53
|
-
<Row>
|
|
54
|
-
<Avatar presence="offline" sourceUri={URL.broken}/>
|
|
55
|
-
<Avatar presence="online" size="md" sourceUri={URL.avatar_fallback}/>
|
|
56
|
-
<Avatar presence="offline" sourceUri={URL.avatar}/>
|
|
57
|
-
</Row>
|
|
58
|
-
</Group>
|
|
59
|
-
<Group title="AvatarGroup" description="Shows 1-4 images in a grid at different sizes. Loading fallback shows until all images successfully load.">
|
|
60
|
-
<Row>
|
|
61
|
-
<AvatarGroup sourceUris={[URL.broken]}/>
|
|
62
|
-
<AvatarGroup sourceUris={[URL.broken, URL.broken, ...URL.two_avatars]}/>
|
|
63
|
-
<AvatarGroup sourceUris={[URL.avatar]}/>
|
|
64
|
-
<AvatarGroup sourceUris={URL.two_avatars}/>
|
|
65
|
-
<AvatarGroup sourceUris={URL.three_avatars}/>
|
|
66
|
-
<AvatarGroup sourceUris={URL.four_avatars}/>
|
|
67
|
-
</Row>
|
|
68
|
-
</Group>
|
|
69
|
-
<Group title="Icon" description="Displays any icon from @planningcenter/icons. Missing icons will fallback to a grey circle. Styling with `fontSize` will allow it to scale with the device's text a11y size.">
|
|
70
|
-
<Row>
|
|
71
|
-
<Icon name="missingIcon" size={20}/>
|
|
72
|
-
<Icon name="general.textMessage" size={20}/>
|
|
73
|
-
<Icon name="general.bell" size={20} color={colors.needsDesignPass}/>
|
|
74
|
-
<Icon name="churchCenter.sort" style={styles.icon}/>
|
|
75
|
-
</Row>
|
|
76
|
-
</Group>
|
|
77
|
-
<Group title="Button" description="Feature fill and outline variants for primary and danger usecases, along with disabled & loading states. Optionally shows icons to the left and right of the text.">
|
|
78
|
-
<Row>
|
|
79
|
-
<Button onPress={buttonPress} title="Default" size="sm"/>
|
|
80
|
-
<Button onPress={buttonPress} title="Default" size="md"/>
|
|
81
|
-
<Button onPress={buttonPress} title="Danger" appearance="danger" size="lg"/>
|
|
82
|
-
</Row>
|
|
83
|
-
<Row>
|
|
84
|
-
<Button disabled onPress={buttonPress} title="Disabled" size="sm"/>
|
|
85
|
-
<Button disabled onPress={buttonPress} title="Disabled" size="md"/>
|
|
86
|
-
<Button disabled onPress={buttonPress} title="Disabled" appearance="danger" size="lg"/>
|
|
87
|
-
</Row>
|
|
88
|
-
<Row>
|
|
89
|
-
<Button onPress={buttonPress} title="Default" size="sm" iconNameLeft="general.plus" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
|
|
90
|
-
<Button onPress={buttonPress} title="Default" size="md" iconNameRight="churchCenter.sort" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
|
|
91
|
-
<Button onPress={buttonPress} title="Danger" appearance="danger" size="lg" iconNameLeft="groups.cards" iconNameRight="general.downChevron" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
|
|
92
|
-
</Row>
|
|
93
|
-
<Row>
|
|
94
|
-
<Button loading onPress={buttonPress} title="Default" size="sm"/>
|
|
95
|
-
<Button loading onPress={buttonPress} title="Default" size="md"/>
|
|
96
|
-
<Button loading onPress={buttonPress} title="Danger" appearance="danger" size="lg"/>
|
|
97
|
-
</Row>
|
|
98
|
-
<Row>
|
|
99
|
-
<Button onPress={buttonPress} title="Default" size="sm" variant="outline"/>
|
|
100
|
-
<Button onPress={buttonPress} title="Default" size="md" variant="outline"/>
|
|
101
|
-
<Button onPress={buttonPress} title="Danger" appearance="danger" size="lg" variant="outline"/>
|
|
102
|
-
</Row>
|
|
103
|
-
<Row>
|
|
104
|
-
<Button onPress={buttonPress} title="Default" size="sm" variant="outline" iconNameLeft="general.plus" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
|
|
105
|
-
<Button onPress={buttonPress} title="Default" size="md" variant="outline" iconNameRight="churchCenter.sort" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
|
|
106
|
-
<Button onPress={buttonPress} title="Danger" appearance="danger" size="lg" variant="outline" iconNameLeft="groups.cards" iconNameRight="general.downChevron" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
|
|
107
|
-
</Row>
|
|
108
|
-
<Row>
|
|
109
|
-
<Button disabled onPress={buttonPress} title="Disabled" size="sm" variant="outline" iconNameLeft="general.plus" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
|
|
110
|
-
<Button disabled onPress={buttonPress} title="Disabled" size="md" variant="outline" iconNameRight="churchCenter.sort" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
|
|
111
|
-
<Button disabled onPress={buttonPress} title="Disabled" appearance="danger" size="lg" variant="outline" iconNameLeft="groups.cards" iconNameRight="general.downChevron" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
|
|
112
|
-
</Row>
|
|
113
|
-
<Row>
|
|
114
|
-
<Button loading onPress={buttonPress} title="Default" size="sm" variant="outline" iconNameLeft="general.plus" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
|
|
115
|
-
<Button loading onPress={buttonPress} title="Default" size="md" variant="outline" iconNameRight="churchCenter.sort" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
|
|
116
|
-
<Button loading onPress={buttonPress} title="Danger" appearance="danger" size="lg" variant="outline" iconNameLeft="groups.cards" iconNameRight="general.downChevron" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
|
|
117
|
-
</Row>
|
|
118
|
-
</Group>
|
|
119
|
-
<Group title="IconButton" description="Supports different appearances, sizes, along with loading & disabled states. Use `iconStyle` for custom colors and font sizes. Requires `accessibilityLabel` as icon's don't provide context to screen readers.">
|
|
120
|
-
<Row>
|
|
121
|
-
<IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" size="md"/>
|
|
122
|
-
<IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" appearance="danger" size="lg"/>
|
|
123
|
-
<IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" appearance="interaction" size="xl"/>
|
|
124
|
-
<IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" iconStyle={styles.customIconButtonColor} size="xxl"/>
|
|
125
|
-
<IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" size="xxxl"/>
|
|
126
|
-
</Row>
|
|
127
|
-
<Row>
|
|
128
|
-
<IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" size="md" disabled/>
|
|
129
|
-
<IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" appearance="danger" size="lg" disabled/>
|
|
130
|
-
<IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" appearance="interaction" size="xl" disabled/>
|
|
131
|
-
<IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" iconStyle={styles.customIconButtonColor} size="xxl" disabled/>
|
|
132
|
-
<IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" size="xxxl" disabled/>
|
|
133
|
-
</Row>
|
|
134
|
-
<Row>
|
|
135
|
-
<IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" size="md" loading/>
|
|
136
|
-
<IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" appearance="danger" size="lg" loading/>
|
|
137
|
-
<IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" appearance="interaction" size="xl" loading/>
|
|
138
|
-
<IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" iconStyle={styles.customIconButtonColor} size="xxl" loading/>
|
|
139
|
-
<IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" size="xxxl" loading/>
|
|
140
|
-
</Row>
|
|
141
|
-
</Group>
|
|
142
|
-
<Group title="TextButton" description="Pressable text with default & danger appearance options. Can be disabled and accept `Text` variance props.">
|
|
143
|
-
<Row>
|
|
144
|
-
<TextButton onPress={buttonPress}>Default</TextButton>
|
|
145
|
-
<TextButton onPress={buttonPress} variant="secondary">
|
|
146
|
-
Default
|
|
147
|
-
</TextButton>
|
|
148
|
-
<TextButton onPress={buttonPress} variant="tertiary">
|
|
149
|
-
Default
|
|
150
|
-
</TextButton>
|
|
151
|
-
<TextButton onPress={buttonPress} variant="footnote">
|
|
152
|
-
Default
|
|
153
|
-
</TextButton>
|
|
154
|
-
</Row>
|
|
155
|
-
<Row>
|
|
156
|
-
<TextButton onPress={buttonPress} appearance="danger">
|
|
157
|
-
Danger
|
|
158
|
-
</TextButton>
|
|
159
|
-
<TextButton onPress={buttonPress} variant="secondary" appearance="danger">
|
|
160
|
-
Danger
|
|
161
|
-
</TextButton>
|
|
162
|
-
<TextButton onPress={buttonPress} variant="tertiary" appearance="danger">
|
|
163
|
-
Danger
|
|
164
|
-
</TextButton>
|
|
165
|
-
<TextButton onPress={buttonPress} variant="footnote" appearance="danger">
|
|
166
|
-
Danger
|
|
167
|
-
</TextButton>
|
|
168
|
-
</Row>
|
|
169
|
-
<Row>
|
|
170
|
-
<TextButton onPress={buttonPress} disabled>
|
|
171
|
-
Disabled
|
|
172
|
-
</TextButton>
|
|
173
|
-
<TextButton onPress={buttonPress} variant="secondary" disabled>
|
|
174
|
-
Disabled
|
|
175
|
-
</TextButton>
|
|
176
|
-
<TextButton onPress={buttonPress} variant="tertiary" disabled>
|
|
177
|
-
Disabled
|
|
178
|
-
</TextButton>
|
|
179
|
-
<TextButton onPress={buttonPress} variant="footnote" disabled>
|
|
180
|
-
Disabled
|
|
181
|
-
</TextButton>
|
|
182
|
-
</Row>
|
|
183
|
-
</Group>
|
|
184
|
-
<Group title="TextInlineButton" description="Supports nesting within `Text`. Temporary component until React Native fixes a layout bug in `Pressable` which used in `TextButton`.">
|
|
185
|
-
<Row style={styles.alignRowLeft}>
|
|
186
|
-
<Text>
|
|
187
|
-
This text is next to{' '}
|
|
188
|
-
<TextInlineButton onPress={buttonPress}>default button text</TextInlineButton> Lorem
|
|
189
|
-
ipsum dolor{' '}
|
|
190
|
-
<TextInlineButton onPress={buttonPress} appearance="danger">
|
|
191
|
-
danger button text
|
|
192
|
-
</TextInlineButton>{' '}
|
|
193
|
-
consectetur{' '}
|
|
194
|
-
<TextInlineButton onPress={buttonPress} disabled>
|
|
195
|
-
disabled button text
|
|
196
|
-
</TextInlineButton>{' '}
|
|
197
|
-
elit.
|
|
198
|
-
</Text>
|
|
199
|
-
<Text variant="secondary">
|
|
200
|
-
This text is next to{' '}
|
|
201
|
-
<TextInlineButton variant="secondary" onPress={buttonPress}>
|
|
202
|
-
default button text
|
|
203
|
-
</TextInlineButton>{' '}
|
|
204
|
-
Lorem ipsum dolor{' '}
|
|
205
|
-
<TextInlineButton variant="secondary" onPress={buttonPress} appearance="danger">
|
|
206
|
-
danger button text
|
|
207
|
-
</TextInlineButton>{' '}
|
|
208
|
-
consectetur{' '}
|
|
209
|
-
<TextInlineButton variant="secondary" onPress={buttonPress} disabled>
|
|
210
|
-
disabled button text
|
|
211
|
-
</TextInlineButton>{' '}
|
|
212
|
-
elit.
|
|
213
|
-
</Text>
|
|
214
|
-
<Text variant="tertiary">
|
|
215
|
-
This text is next to{' '}
|
|
216
|
-
<TextInlineButton variant="tertiary" onPress={buttonPress}>
|
|
217
|
-
default button text
|
|
218
|
-
</TextInlineButton>{' '}
|
|
219
|
-
Lorem ipsum dolor{' '}
|
|
220
|
-
<TextInlineButton variant="tertiary" onPress={buttonPress} appearance="danger">
|
|
221
|
-
danger button text
|
|
222
|
-
</TextInlineButton>{' '}
|
|
223
|
-
consectetur{' '}
|
|
224
|
-
<TextInlineButton variant="tertiary" onPress={buttonPress} disabled>
|
|
225
|
-
disabled button text
|
|
226
|
-
</TextInlineButton>{' '}
|
|
227
|
-
elit.
|
|
228
|
-
</Text>
|
|
229
|
-
<Text variant="footnote">
|
|
230
|
-
This text is next to{' '}
|
|
231
|
-
<TextInlineButton variant="footnote" onPress={buttonPress}>
|
|
232
|
-
default button text
|
|
233
|
-
</TextInlineButton>{' '}
|
|
234
|
-
Lorem ipsum dolor{' '}
|
|
235
|
-
<TextInlineButton variant="footnote" onPress={buttonPress} appearance="danger">
|
|
236
|
-
danger button text
|
|
237
|
-
</TextInlineButton>{' '}
|
|
238
|
-
consectetur{' '}
|
|
239
|
-
<TextInlineButton variant="footnote" onPress={buttonPress} disabled>
|
|
240
|
-
disabled button text
|
|
241
|
-
</TextInlineButton>{' '}
|
|
242
|
-
elit.
|
|
243
|
-
</Text>
|
|
244
|
-
</Row>
|
|
245
|
-
</Group>
|
|
246
|
-
<Group title="Heading" description="Use for headings & titles as it includes the a11y 'header' role. Change the size and style with the h1-h4 variants.">
|
|
247
|
-
<Row>
|
|
248
|
-
<Heading>Heading 1</Heading>
|
|
249
|
-
<Heading variant="h2">Heading 2</Heading>
|
|
250
|
-
<Heading variant="h3">Heading 3</Heading>
|
|
251
|
-
<Heading variant="h4">Heading 4</Heading>
|
|
252
|
-
</Row>
|
|
253
|
-
</Group>
|
|
254
|
-
<Group title="Text" description="Use for body copy and supporting text.">
|
|
255
|
-
<Row>
|
|
256
|
-
<Text>Plain text</Text>
|
|
257
|
-
<Text variant="secondary">Secondary</Text>
|
|
258
|
-
<Text variant="tertiary">Tertiary</Text>
|
|
259
|
-
<Text variant="footnote">Footnote</Text>
|
|
260
|
-
</Row>
|
|
261
|
-
</Group>
|
|
262
|
-
</CollapsableSection>
|
|
263
|
-
<CollapsableSection title="Theme" isLast>
|
|
264
|
-
<TextGroup>
|
|
265
|
-
<Text>There are four main parts to our theming system…</Text>
|
|
266
|
-
<TextRow>
|
|
267
|
-
<Heading variant="h3">Default theme</Heading>
|
|
268
|
-
<Text>
|
|
269
|
-
Start at `src/utils/theme` when adding new theme values. The file has more
|
|
270
|
-
instructions and examples.
|
|
271
|
-
</Text>
|
|
272
|
-
<Text>At a high level, it provides…</Text>
|
|
273
|
-
<TextListItem label="1.">
|
|
274
|
-
Access to consuming app targets of what theme values that they can be customized.
|
|
275
|
-
</TextListItem>
|
|
276
|
-
<TextListItem label="2.">
|
|
277
|
-
Fallback values for our components to use if the values weren't overriden.
|
|
278
|
-
</TextListItem>
|
|
279
|
-
</TextRow>
|
|
280
|
-
<TextRow>
|
|
281
|
-
<Heading variant="h3">Customizing the theme</Heading>
|
|
282
|
-
<Text>
|
|
283
|
-
Apps can override any default theme value by passing a `theme` object to our
|
|
284
|
-
`ChatProvider` that holds a `theme` and a `colorScheme`.
|
|
285
|
-
</Text>
|
|
286
|
-
<Text>
|
|
287
|
-
Currently types can be enforced by setting the parent theme object to
|
|
288
|
-
`CreateChatThemeProps`.
|
|
289
|
-
</Text>
|
|
290
|
-
<Text variant="footnote">
|
|
291
|
-
Example setup: `apps/mobile/src/context/chat_context_provider.tsx`
|
|
292
|
-
</Text>
|
|
293
|
-
</TextRow>
|
|
294
|
-
<TextRow>
|
|
295
|
-
<Heading variant="h3">Merged theme</Heading>
|
|
296
|
-
<Text>
|
|
297
|
-
In `src/contexts/chat_context.tsx` we merge the default theme and any custom values
|
|
298
|
-
coming from a product target with the `useCreateChatTheme` hook. It creates a single
|
|
299
|
-
`ChatTheme` type.
|
|
300
|
-
</Text>
|
|
301
|
-
</TextRow>
|
|
302
|
-
<TextRow>
|
|
303
|
-
<Heading variant="h3">Using theme values</Heading>
|
|
304
|
-
<Text>
|
|
305
|
-
Inside of our own `chat-react-native` components we can access the merged `ChatTheme`
|
|
306
|
-
object via our own `useTheme` hook.
|
|
307
|
-
</Text>
|
|
308
|
-
<Text variant="footnote">Example setup: `src/components/display/button.tsx`</Text>
|
|
309
|
-
</TextRow>
|
|
310
|
-
</TextGroup>
|
|
311
|
-
</CollapsableSection>
|
|
34
|
+
<ThemeSection />
|
|
312
35
|
{/* TODO: Enable & update when we install @planningcenter/tapestry */}
|
|
313
|
-
{/* <
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
</Text>
|
|
321
|
-
</TextRow>
|
|
322
|
-
<TextRow>
|
|
323
|
-
<Heading variant="h3">Where do they come from?</Heading>
|
|
324
|
-
<Text>
|
|
325
|
-
Tokens primarily come from our internal `@planningcenter/tapestry` package. However,
|
|
326
|
-
at this time the package only support light mode colors, so Chat uses a workaround.
|
|
327
|
-
</Text>
|
|
328
|
-
<Text>
|
|
329
|
-
Color-based tokens are infused into our theming system with two local files…
|
|
330
|
-
</Text>
|
|
331
|
-
<TextListItem label="1. `src/vendor/tapestry/tokens`:">
|
|
332
|
-
Primitive color values are stored* here. Primitives capture light or dark mode values,
|
|
333
|
-
but don't take into account the devices's colors scheme.
|
|
334
|
-
</TextListItem>
|
|
335
|
-
<TextListItem label="2. `src/vendor/tapestry/alias_tokens_color_map`:">
|
|
336
|
-
Alias tokens reference the primitive color values token file* in light and dark mode
|
|
337
|
-
specfic objects. Our theming system then selects the right color to use based on the
|
|
338
|
-
device's color scheme.
|
|
339
|
-
</TextListItem>
|
|
340
|
-
<Text variant="footnote">
|
|
341
|
-
*If available, reference the color from the Tapestry package instead.
|
|
342
|
-
</Text>
|
|
343
|
-
</TextRow>
|
|
344
|
-
<TextRow>
|
|
345
|
-
<Heading variant="h3">How do we use them?</Heading>
|
|
346
|
-
<Text>There are two places to reference tokens at this time…</Text>
|
|
347
|
-
<TextListItem label="• Color tokens:">
|
|
348
|
-
Reference them from our internal `useTheme` hook to ensure the correct light or dark
|
|
349
|
-
mode color token is used.
|
|
350
|
-
</TextListItem>
|
|
351
|
-
<TextListItem label="• All other tokens:">
|
|
352
|
-
Use the `computedToken` function from `@planningcenter/tapestry` by passing it a
|
|
353
|
-
string with the token's name. This function provides Typescript support and maps to
|
|
354
|
-
the token's raw CSS value. There is another function called `token`, but it maps to
|
|
355
|
-
CSS custom properties which React Native doesn't support.
|
|
356
|
-
</TextListItem>
|
|
357
|
-
</TextRow>
|
|
358
|
-
</TextGroup>
|
|
359
|
-
</CollapsableSection> */}
|
|
36
|
+
{/* <TokensSection /> */}
|
|
37
|
+
<IndicatorsSection />
|
|
38
|
+
<HeadingTextSection />
|
|
39
|
+
<PressablesSection />
|
|
40
|
+
<ImageIconsSection />
|
|
41
|
+
<FormControlsSection />
|
|
42
|
+
<StatusComponentsSection isLast/>
|
|
360
43
|
</ScrollView>);
|
|
361
44
|
}
|
|
45
|
+
function ThemeSection({ isLast }) {
|
|
46
|
+
return (<CollapsableSection title="Theme" isLast={isLast}>
|
|
47
|
+
<TextGroup>
|
|
48
|
+
<Text>There are four main parts to our theming system…</Text>
|
|
49
|
+
<TextRow>
|
|
50
|
+
<Heading variant="h3">Default theme</Heading>
|
|
51
|
+
<Text>
|
|
52
|
+
Start at `src/utils/theme` when adding new theme values or checking what target apps
|
|
53
|
+
have access to. The file has more instructions and examples.
|
|
54
|
+
</Text>
|
|
55
|
+
<Text>At a high level, it provides…</Text>
|
|
56
|
+
<TextListItem label="1.">
|
|
57
|
+
Access to consuming app targets of what theme values that they can be customized.
|
|
58
|
+
</TextListItem>
|
|
59
|
+
<TextListItem label="2.">
|
|
60
|
+
Fallback values for our components to use if the values weren't overriden.
|
|
61
|
+
</TextListItem>
|
|
62
|
+
</TextRow>
|
|
63
|
+
<TextRow>
|
|
64
|
+
<Heading variant="h3">Customizing the theme</Heading>
|
|
65
|
+
<Text>
|
|
66
|
+
Apps can override any default theme value by passing a `theme` object to our
|
|
67
|
+
`ChatProvider` that holds a `theme` and a `colorScheme`.
|
|
68
|
+
</Text>
|
|
69
|
+
<Text>
|
|
70
|
+
Currently types can be enforced by setting the parent theme object to
|
|
71
|
+
`CreateChatThemeProps`.
|
|
72
|
+
</Text>
|
|
73
|
+
<Text variant="footnote">
|
|
74
|
+
Example setup: `apps/mobile/src/context/chat_context_provider.tsx`
|
|
75
|
+
</Text>
|
|
76
|
+
</TextRow>
|
|
77
|
+
<TextRow>
|
|
78
|
+
<Heading variant="h3">Merged theme</Heading>
|
|
79
|
+
<Text>
|
|
80
|
+
In `src/contexts/chat_context.tsx` we merge the default theme and any custom values
|
|
81
|
+
coming from a product target with the `useCreateChatTheme` hook. It creates a single
|
|
82
|
+
`ChatTheme` type.
|
|
83
|
+
</Text>
|
|
84
|
+
</TextRow>
|
|
85
|
+
<TextRow>
|
|
86
|
+
<Heading variant="h3">Using theme values</Heading>
|
|
87
|
+
<Text>
|
|
88
|
+
Inside of our own `chat-react-native` components we can access the merged `ChatTheme`
|
|
89
|
+
object via our own `useTheme` hook.
|
|
90
|
+
</Text>
|
|
91
|
+
<Text variant="footnote">Example setup: `src/components/display/button.tsx`</Text>
|
|
92
|
+
</TextRow>
|
|
93
|
+
</TextGroup>
|
|
94
|
+
</CollapsableSection>);
|
|
95
|
+
}
|
|
96
|
+
// function TokensSection({ isLast }: SectionProps) {
|
|
97
|
+
// return (
|
|
98
|
+
// <CollapsableSection title="Tokens" isLast={isLast}>
|
|
99
|
+
// <TextGroup>
|
|
100
|
+
// <TextRow>
|
|
101
|
+
// <Heading variant="h3">What are they?</Heading>
|
|
102
|
+
// <Text>
|
|
103
|
+
// Tokens are UX approved CSS values that we can use to style our UI in a consistent way.
|
|
104
|
+
// (e.g. colors, spacing amounts, and font weights.)
|
|
105
|
+
// </Text>
|
|
106
|
+
// </TextRow>
|
|
107
|
+
// <TextRow>
|
|
108
|
+
// <Heading variant="h3">Where do they come from?</Heading>
|
|
109
|
+
// <Text>
|
|
110
|
+
// Tokens primarily come from our internal `@planningcenter/tapestry` package. However, at
|
|
111
|
+
// this time the package only support light mode colors, so Chat uses a workaround.
|
|
112
|
+
// </Text>
|
|
113
|
+
// <Text>Color-based tokens are infused into our theming system with two local files…</Text>
|
|
114
|
+
// <TextListItem label="1. `src/vendor/tapestry/tokens`:">
|
|
115
|
+
// Primitive color values are stored* here. Primitives capture light or dark mode values,
|
|
116
|
+
// but don't take into account the devices's colors scheme.
|
|
117
|
+
// </TextListItem>
|
|
118
|
+
// <TextListItem label="2. `src/vendor/tapestry/alias_tokens_color_map`:">
|
|
119
|
+
// Alias tokens reference the primitive color values token file* in light and dark mode
|
|
120
|
+
// specfic objects. Our theming system then selects the right color to use based on the
|
|
121
|
+
// device's color scheme.
|
|
122
|
+
// </TextListItem>
|
|
123
|
+
// <Text variant="footnote">
|
|
124
|
+
// *If available, reference the color from the Tapestry package instead.
|
|
125
|
+
// </Text>
|
|
126
|
+
// </TextRow>
|
|
127
|
+
// <TextRow>
|
|
128
|
+
// <Heading variant="h3">How do we use them?</Heading>
|
|
129
|
+
// <Text>There are two places to reference tokens at this time…</Text>
|
|
130
|
+
// <TextListItem label="• Color tokens:">
|
|
131
|
+
// Reference them from our internal `useTheme` hook to ensure the correct light or dark
|
|
132
|
+
// mode color token is used.
|
|
133
|
+
// </TextListItem>
|
|
134
|
+
// <TextListItem label="• All other tokens:">
|
|
135
|
+
// Use the `computedToken` function from `@planningcenter/tapestry` by passing it a string
|
|
136
|
+
// with the token's name. This function provides Typescript support and maps to the token's
|
|
137
|
+
// raw CSS value. There is another function called `token`, but it maps to CSS custom
|
|
138
|
+
// properties which React Native doesn't support.
|
|
139
|
+
// </TextListItem>
|
|
140
|
+
// </TextRow>
|
|
141
|
+
// </TextGroup>
|
|
142
|
+
// </CollapsableSection>
|
|
143
|
+
// )
|
|
144
|
+
// }
|
|
145
|
+
function IndicatorsSection({ isLast }) {
|
|
146
|
+
const styles = useStyles();
|
|
147
|
+
return (<CollapsableSection title="Indicators" isLast={isLast}>
|
|
148
|
+
<Group title="Spinner" description="Loading indicators that can be used within or close to atomic components. Not intended for full-screen loading.">
|
|
149
|
+
<Row style={styles.spinnerContainer}>
|
|
150
|
+
<Spinner size={24}/>
|
|
151
|
+
</Row>
|
|
152
|
+
</Group>
|
|
153
|
+
</CollapsableSection>);
|
|
154
|
+
}
|
|
155
|
+
function HeadingTextSection({ isLast }) {
|
|
156
|
+
return (<CollapsableSection title="Heading & Text" isLast={isLast}>
|
|
157
|
+
<Group title="Heading" description="Use for headings & titles as it includes the a11y 'header' role. Change the size and style with the h1-h4 variants.">
|
|
158
|
+
<Row>
|
|
159
|
+
<Heading>Heading 1</Heading>
|
|
160
|
+
<Heading variant="h2">Heading 2</Heading>
|
|
161
|
+
<Heading variant="h3">Heading 3</Heading>
|
|
162
|
+
<Heading variant="h4">Heading 4</Heading>
|
|
163
|
+
</Row>
|
|
164
|
+
</Group>
|
|
165
|
+
<Group title="Text" description="Use for body copy and supporting text.">
|
|
166
|
+
<Row>
|
|
167
|
+
<Text>Plain text</Text>
|
|
168
|
+
<Text variant="secondary">Secondary</Text>
|
|
169
|
+
<Text variant="tertiary">Tertiary</Text>
|
|
170
|
+
<Text variant="footnote">Footnote</Text>
|
|
171
|
+
</Row>
|
|
172
|
+
</Group>
|
|
173
|
+
</CollapsableSection>);
|
|
174
|
+
}
|
|
175
|
+
function PressablesSection({ isLast }) {
|
|
176
|
+
const styles = useStyles();
|
|
177
|
+
return (<CollapsableSection title="Pressables" isLast={isLast}>
|
|
178
|
+
<Group title="Button" description="Feature fill and outline variants for primary and danger usecases, along with disabled & loading states. Optionally shows icons to the left and right of the text.">
|
|
179
|
+
<Row>
|
|
180
|
+
<Button onPress={buttonPress} title="Default" size="sm"/>
|
|
181
|
+
<Button onPress={buttonPress} title="Default" size="md"/>
|
|
182
|
+
<Button onPress={buttonPress} title="Danger" appearance="danger" size="lg"/>
|
|
183
|
+
</Row>
|
|
184
|
+
<Row>
|
|
185
|
+
<Button disabled onPress={buttonPress} title="Disabled" size="sm"/>
|
|
186
|
+
<Button disabled onPress={buttonPress} title="Disabled" size="md"/>
|
|
187
|
+
<Button disabled onPress={buttonPress} title="Disabled" appearance="danger" size="lg"/>
|
|
188
|
+
</Row>
|
|
189
|
+
<Row>
|
|
190
|
+
<Button onPress={buttonPress} title="Default" size="sm" iconNameLeft="general.plus" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
|
|
191
|
+
<Button onPress={buttonPress} title="Default" size="md" iconNameRight="churchCenter.sort" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
|
|
192
|
+
<Button onPress={buttonPress} title="Danger" appearance="danger" size="lg" iconNameLeft="groups.cards" iconNameRight="general.downChevron" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
|
|
193
|
+
</Row>
|
|
194
|
+
<Row>
|
|
195
|
+
<Button loading onPress={buttonPress} title="Default" size="sm"/>
|
|
196
|
+
<Button loading onPress={buttonPress} title="Default" size="md"/>
|
|
197
|
+
<Button loading onPress={buttonPress} title="Danger" appearance="danger" size="lg"/>
|
|
198
|
+
</Row>
|
|
199
|
+
<Row>
|
|
200
|
+
<Button onPress={buttonPress} title="Default" size="sm" variant="outline"/>
|
|
201
|
+
<Button onPress={buttonPress} title="Default" size="md" variant="outline"/>
|
|
202
|
+
<Button onPress={buttonPress} title="Danger" appearance="danger" size="lg" variant="outline"/>
|
|
203
|
+
</Row>
|
|
204
|
+
<Row>
|
|
205
|
+
<Button onPress={buttonPress} title="Default" size="sm" variant="outline" iconNameLeft="general.plus" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
|
|
206
|
+
<Button onPress={buttonPress} title="Default" size="md" variant="outline" iconNameRight="churchCenter.sort" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
|
|
207
|
+
<Button onPress={buttonPress} title="Danger" appearance="danger" size="lg" variant="outline" iconNameLeft="groups.cards" iconNameRight="general.downChevron" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
|
|
208
|
+
</Row>
|
|
209
|
+
<Row>
|
|
210
|
+
<Button disabled onPress={buttonPress} title="Disabled" size="sm" variant="outline" iconNameLeft="general.plus" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
|
|
211
|
+
<Button disabled onPress={buttonPress} title="Disabled" size="md" variant="outline" iconNameRight="churchCenter.sort" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
|
|
212
|
+
<Button disabled onPress={buttonPress} title="Disabled" appearance="danger" size="lg" variant="outline" iconNameLeft="groups.cards" iconNameRight="general.downChevron" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
|
|
213
|
+
</Row>
|
|
214
|
+
<Row>
|
|
215
|
+
<Button loading onPress={buttonPress} title="Default" size="sm" variant="outline" iconNameLeft="general.plus" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
|
|
216
|
+
<Button loading onPress={buttonPress} title="Default" size="md" variant="outline" iconNameRight="churchCenter.sort" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
|
|
217
|
+
<Button loading onPress={buttonPress} title="Danger" appearance="danger" size="lg" variant="outline" iconNameLeft="groups.cards" iconNameRight="general.downChevron" maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}/>
|
|
218
|
+
</Row>
|
|
219
|
+
</Group>
|
|
220
|
+
<Group title="IconButton" description="Supports different appearances, sizes, along with loading & disabled states. Use `iconStyle` for custom colors and font sizes. Requires `accessibilityLabel` as icon's don't provide context to screen readers.">
|
|
221
|
+
<Row>
|
|
222
|
+
<IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" size="md"/>
|
|
223
|
+
<IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" appearance="danger" size="lg"/>
|
|
224
|
+
<IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" appearance="interaction" size="xl"/>
|
|
225
|
+
<IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" iconStyle={styles.customIconButtonColor} size="xxl"/>
|
|
226
|
+
<IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" size="xxxl"/>
|
|
227
|
+
</Row>
|
|
228
|
+
<Row>
|
|
229
|
+
<IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" size="md" disabled/>
|
|
230
|
+
<IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" appearance="danger" size="lg" disabled/>
|
|
231
|
+
<IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" appearance="interaction" size="xl" disabled/>
|
|
232
|
+
<IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" iconStyle={styles.customIconButtonColor} size="xxl" disabled/>
|
|
233
|
+
<IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" size="xxxl" disabled/>
|
|
234
|
+
</Row>
|
|
235
|
+
<Row>
|
|
236
|
+
<IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" size="md" loading/>
|
|
237
|
+
<IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" appearance="danger" size="lg" loading/>
|
|
238
|
+
<IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" appearance="interaction" size="xl" loading/>
|
|
239
|
+
<IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" iconStyle={styles.customIconButtonColor} size="xxl" loading/>
|
|
240
|
+
<IconButton onPress={buttonPress} name="general.paperclip" accessibilityLabel="Add attachment" accessibilityHint="Opens your device's image gallary" size="xxxl" loading/>
|
|
241
|
+
</Row>
|
|
242
|
+
</Group>
|
|
243
|
+
<Group title="TextButton" description="Pressable text with default & danger appearance options. Can be disabled and accept `Text` variance props.">
|
|
244
|
+
<Row>
|
|
245
|
+
<TextButton onPress={buttonPress}>Default</TextButton>
|
|
246
|
+
<TextButton onPress={buttonPress} variant="secondary">
|
|
247
|
+
Default
|
|
248
|
+
</TextButton>
|
|
249
|
+
<TextButton onPress={buttonPress} variant="tertiary">
|
|
250
|
+
Default
|
|
251
|
+
</TextButton>
|
|
252
|
+
<TextButton onPress={buttonPress} variant="footnote">
|
|
253
|
+
Default
|
|
254
|
+
</TextButton>
|
|
255
|
+
</Row>
|
|
256
|
+
<Row>
|
|
257
|
+
<TextButton onPress={buttonPress} appearance="danger">
|
|
258
|
+
Danger
|
|
259
|
+
</TextButton>
|
|
260
|
+
<TextButton onPress={buttonPress} variant="secondary" appearance="danger">
|
|
261
|
+
Danger
|
|
262
|
+
</TextButton>
|
|
263
|
+
<TextButton onPress={buttonPress} variant="tertiary" appearance="danger">
|
|
264
|
+
Danger
|
|
265
|
+
</TextButton>
|
|
266
|
+
<TextButton onPress={buttonPress} variant="footnote" appearance="danger">
|
|
267
|
+
Danger
|
|
268
|
+
</TextButton>
|
|
269
|
+
</Row>
|
|
270
|
+
<Row>
|
|
271
|
+
<TextButton onPress={buttonPress} disabled>
|
|
272
|
+
Disabled
|
|
273
|
+
</TextButton>
|
|
274
|
+
<TextButton onPress={buttonPress} variant="secondary" disabled>
|
|
275
|
+
Disabled
|
|
276
|
+
</TextButton>
|
|
277
|
+
<TextButton onPress={buttonPress} variant="tertiary" disabled>
|
|
278
|
+
Disabled
|
|
279
|
+
</TextButton>
|
|
280
|
+
<TextButton onPress={buttonPress} variant="footnote" disabled>
|
|
281
|
+
Disabled
|
|
282
|
+
</TextButton>
|
|
283
|
+
</Row>
|
|
284
|
+
</Group>
|
|
285
|
+
<Group title="TextInlineButton" description="Supports nesting within `Text`. Temporary component until React Native fixes a layout bug in `Pressable` which used in `TextButton`.">
|
|
286
|
+
<Row style={styles.alignRowLeft}>
|
|
287
|
+
<Text>
|
|
288
|
+
This text is next to{' '}
|
|
289
|
+
<TextInlineButton onPress={buttonPress}>default button text</TextInlineButton> Lorem
|
|
290
|
+
ipsum dolor{' '}
|
|
291
|
+
<TextInlineButton onPress={buttonPress} appearance="danger">
|
|
292
|
+
danger button text
|
|
293
|
+
</TextInlineButton>{' '}
|
|
294
|
+
consectetur{' '}
|
|
295
|
+
<TextInlineButton onPress={buttonPress} disabled>
|
|
296
|
+
disabled button text
|
|
297
|
+
</TextInlineButton>{' '}
|
|
298
|
+
elit.
|
|
299
|
+
</Text>
|
|
300
|
+
<Text variant="secondary">
|
|
301
|
+
This text is next to{' '}
|
|
302
|
+
<TextInlineButton variant="secondary" onPress={buttonPress}>
|
|
303
|
+
default button text
|
|
304
|
+
</TextInlineButton>{' '}
|
|
305
|
+
Lorem ipsum dolor{' '}
|
|
306
|
+
<TextInlineButton variant="secondary" onPress={buttonPress} appearance="danger">
|
|
307
|
+
danger button text
|
|
308
|
+
</TextInlineButton>{' '}
|
|
309
|
+
consectetur{' '}
|
|
310
|
+
<TextInlineButton variant="secondary" onPress={buttonPress} disabled>
|
|
311
|
+
disabled button text
|
|
312
|
+
</TextInlineButton>{' '}
|
|
313
|
+
elit.
|
|
314
|
+
</Text>
|
|
315
|
+
<Text variant="tertiary">
|
|
316
|
+
This text is next to{' '}
|
|
317
|
+
<TextInlineButton variant="tertiary" onPress={buttonPress}>
|
|
318
|
+
default button text
|
|
319
|
+
</TextInlineButton>{' '}
|
|
320
|
+
Lorem ipsum dolor{' '}
|
|
321
|
+
<TextInlineButton variant="tertiary" onPress={buttonPress} appearance="danger">
|
|
322
|
+
danger button text
|
|
323
|
+
</TextInlineButton>{' '}
|
|
324
|
+
consectetur{' '}
|
|
325
|
+
<TextInlineButton variant="tertiary" onPress={buttonPress} disabled>
|
|
326
|
+
disabled button text
|
|
327
|
+
</TextInlineButton>{' '}
|
|
328
|
+
elit.
|
|
329
|
+
</Text>
|
|
330
|
+
<Text variant="footnote">
|
|
331
|
+
This text is next to{' '}
|
|
332
|
+
<TextInlineButton variant="footnote" onPress={buttonPress}>
|
|
333
|
+
default button text
|
|
334
|
+
</TextInlineButton>{' '}
|
|
335
|
+
Lorem ipsum dolor{' '}
|
|
336
|
+
<TextInlineButton variant="footnote" onPress={buttonPress} appearance="danger">
|
|
337
|
+
danger button text
|
|
338
|
+
</TextInlineButton>{' '}
|
|
339
|
+
consectetur{' '}
|
|
340
|
+
<TextInlineButton variant="footnote" onPress={buttonPress} disabled>
|
|
341
|
+
disabled button text
|
|
342
|
+
</TextInlineButton>{' '}
|
|
343
|
+
elit.
|
|
344
|
+
</Text>
|
|
345
|
+
</Row>
|
|
346
|
+
</Group>
|
|
347
|
+
</CollapsableSection>);
|
|
348
|
+
}
|
|
349
|
+
function ImageIconsSection({ isLast }) {
|
|
350
|
+
const styles = useStyles();
|
|
351
|
+
const { colors } = useTheme();
|
|
352
|
+
return (<CollapsableSection title="Images & Icons" isLast={isLast}>
|
|
353
|
+
<Group title="Image" description="Foundational way of displaying images. Loading or broken images will fallback to show a spinner. Hide decortive images from screen readers with `alt=''`.">
|
|
354
|
+
<Row>
|
|
355
|
+
<Image source={{ uri: URL.broken }} style={styles.image} alt="Mountain sunrise"/>
|
|
356
|
+
<Image source={{ uri: URL.image }} style={styles.image} alt="Mountain sunrise"/>
|
|
357
|
+
<Image source={{ uri: URL.image }} style={styles.image} alt=""/>
|
|
358
|
+
</Row>
|
|
359
|
+
</Group>
|
|
360
|
+
<Group title="Avatar" description='Displays the profile image for a user in different sizes and has a loading fallback. Can optionally show an online/offline "presence" indicator.'>
|
|
361
|
+
<Row>
|
|
362
|
+
<Avatar sourceUri={URL.broken}/>
|
|
363
|
+
<Avatar size="md" sourceUri={URL.avatar_fallback}/>
|
|
364
|
+
<Avatar sourceUri={URL.avatar}/>
|
|
365
|
+
</Row>
|
|
366
|
+
<Row>
|
|
367
|
+
<Avatar presence="offline" sourceUri={URL.broken}/>
|
|
368
|
+
<Avatar presence="online" size="md" sourceUri={URL.avatar_fallback}/>
|
|
369
|
+
<Avatar presence="offline" sourceUri={URL.avatar}/>
|
|
370
|
+
</Row>
|
|
371
|
+
</Group>
|
|
372
|
+
<Group title="AvatarGroup" description="Shows 1-4 images in a grid at different sizes. Loading fallback shows until all images successfully load.">
|
|
373
|
+
<Row>
|
|
374
|
+
<AvatarGroup sourceUris={[URL.broken]}/>
|
|
375
|
+
<AvatarGroup sourceUris={[URL.broken, URL.broken, ...URL.two_avatars]}/>
|
|
376
|
+
<AvatarGroup sourceUris={[URL.avatar]}/>
|
|
377
|
+
<AvatarGroup sourceUris={URL.two_avatars}/>
|
|
378
|
+
<AvatarGroup sourceUris={URL.three_avatars}/>
|
|
379
|
+
<AvatarGroup sourceUris={URL.four_avatars}/>
|
|
380
|
+
</Row>
|
|
381
|
+
</Group>
|
|
382
|
+
<Group title="Icon" description="Displays any icon from @planningcenter/icons. Missing icons will fallback to a grey circle. Styling with `fontSize` will allow it to scale with the device's text a11y size.">
|
|
383
|
+
<Row>
|
|
384
|
+
<Icon name="missingIcon" size={20}/>
|
|
385
|
+
<Icon name="general.textMessage" size={20}/>
|
|
386
|
+
<Icon name="general.bell" size={20} color={colors.needsDesignPass}/>
|
|
387
|
+
<Icon name="churchCenter.sort" style={styles.icon}/>
|
|
388
|
+
</Row>
|
|
389
|
+
</Group>
|
|
390
|
+
</CollapsableSection>);
|
|
391
|
+
}
|
|
392
|
+
function FormControlsSection({ isLast }) {
|
|
393
|
+
const [switchEnabled, setSwitchEnabled] = useState(false);
|
|
394
|
+
return (<CollapsableSection title="Form Controls" isLast={isLast}>
|
|
395
|
+
<Group title="Switch" description="Use to toggle a boolean value for some sort of contained setting. (ie. Muting a conversation) This is a light wrapper that takes into account themed colors.">
|
|
396
|
+
<Row>
|
|
397
|
+
<Switch value={switchEnabled} onValueChange={value => setSwitchEnabled(value)}/>
|
|
398
|
+
<Switch disabled/>
|
|
399
|
+
</Row>
|
|
400
|
+
</Group>
|
|
401
|
+
</CollapsableSection>);
|
|
402
|
+
}
|
|
403
|
+
function StatusComponentsSection({ isLast }) {
|
|
404
|
+
return (<CollapsableSection title="Status components" isLast={isLast}>
|
|
405
|
+
<Group title="Badge" description="Badge that can convey a status and show an icon. It also supports a meta label and product logo for the conversation list and conversation header. Target products can change colors and hide the logo via theming.">
|
|
406
|
+
<Row>
|
|
407
|
+
<Badge label="Neutral" appearance="neutral"/>
|
|
408
|
+
<Badge label="Error" appearance="error"/>
|
|
409
|
+
<Badge label="Info" appearance="info"/>
|
|
410
|
+
<Badge label="Success" appearance="success"/>
|
|
411
|
+
<Badge label="Warning" appearance="warning"/>
|
|
412
|
+
</Row>
|
|
413
|
+
<Row>
|
|
414
|
+
<Badge label="Neutral" appearance="neutral" iconName="general.star"/>
|
|
415
|
+
<Badge label="Error" appearance="error" iconName="general.exclamationTriangle"/>
|
|
416
|
+
<Badge label="Info" appearance="info" iconName="general.outlinedInfoCircle"/>
|
|
417
|
+
<Badge label="Success" appearance="success" iconName="general.check"/>
|
|
418
|
+
<Badge label="Warning" appearance="warning" iconName="general.shieldExclamation"/>
|
|
419
|
+
</Row>
|
|
420
|
+
<Row>
|
|
421
|
+
<Badge variant="meta" productLogoName="groups" label="Group" metaLabel="Worlds longest group name that will probably overflow if it gets very much longer"/>
|
|
422
|
+
<Badge variant="meta" productLogoName="groups" label="Group" metaLabel="Young adults"/>
|
|
423
|
+
<Badge variant="meta" productLogoName="services" label="Plan" metaLabel="June 19, 2025"/>
|
|
424
|
+
<Badge variant="meta" productLogoName="services" label="Team"/>
|
|
425
|
+
</Row>
|
|
426
|
+
<Row>
|
|
427
|
+
<Badge variant="metaSubtle" productLogoName="groups" label="Group" metaLabel="Worlds longest group name that will probably overflow if it gets very much longer"/>
|
|
428
|
+
<Badge variant="metaSubtle" productLogoName="groups" label="Group" metaLabel="Young adults"/>
|
|
429
|
+
<Badge variant="metaSubtle" productLogoName="services" label="Plan" metaLabel="June 19, 2025"/>
|
|
430
|
+
<Badge variant="metaSubtle" productLogoName="services" label="Team"/>
|
|
431
|
+
</Row>
|
|
432
|
+
</Group>
|
|
433
|
+
</CollapsableSection>);
|
|
434
|
+
}
|
|
362
435
|
function CollapsableSection({ children, title, isLast = false }) {
|
|
363
436
|
const styles = useStyles();
|
|
364
437
|
const { colors } = useTheme();
|
|
@@ -402,6 +475,9 @@ function TextListItem({ label, children }) {
|
|
|
402
475
|
{children}
|
|
403
476
|
</Text>);
|
|
404
477
|
}
|
|
478
|
+
// =================================
|
|
479
|
+
// ====== Styles ===================
|
|
480
|
+
// =================================
|
|
405
481
|
const useStyles = () => {
|
|
406
482
|
const { colors } = useTheme();
|
|
407
483
|
return StyleSheet.create({
|