@utilitywarehouse/hearth-react-native 0.28.6 → 0.29.1
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/.storybook/preview.tsx +7 -4
- package/.turbo/turbo-build.log +1 -1
- package/.turbo/turbo-lint.log +15 -18
- package/CHANGELOG.md +59 -0
- package/build/components/Combobox/Combobox.js +1 -1
- package/build/components/Modal/Modal.d.ts +1 -1
- package/build/components/Modal/Modal.js +6 -95
- package/build/components/Modal/Modal.props.d.ts +2 -31
- package/build/components/Modal/Modal.shared.types.d.ts +22 -0
- package/build/components/Modal/Modal.web.d.ts +1 -1
- package/build/components/Modal/Modal.web.js +6 -71
- package/build/components/NavModal/NavModal.d.ts +3 -0
- package/build/components/NavModal/NavModal.js +190 -0
- package/build/components/NavModal/NavModal.props.d.ts +15 -0
- package/build/components/NavModal/NavModal.props.js +1 -0
- package/build/components/NavModal/index.d.ts +2 -0
- package/build/components/NavModal/index.js +1 -0
- package/build/components/Select/Select.js +1 -1
- package/build/components/index.d.ts +2 -1
- package/build/components/index.js +2 -1
- package/docs/changelog.mdx +34 -0
- package/docs/components/AllComponents.web.tsx +709 -689
- package/package.json +5 -3
- package/src/components/Combobox/Combobox.tsx +1 -1
- package/src/components/Modal/Modal.docs.mdx +5 -122
- package/src/components/Modal/Modal.props.ts +2 -34
- package/src/components/Modal/Modal.shared.types.ts +23 -0
- package/src/components/Modal/Modal.stories.tsx +0 -1
- package/src/components/Modal/Modal.tsx +11 -174
- package/src/components/Modal/Modal.web.tsx +29 -127
- package/src/components/NavModal/NavModal.docs.mdx +178 -0
- package/src/components/NavModal/NavModal.figma.tsx +13 -0
- package/src/components/NavModal/NavModal.props.ts +23 -0
- package/src/components/NavModal/NavModal.stories.tsx +131 -0
- package/src/components/NavModal/NavModal.tsx +375 -0
- package/src/components/NavModal/index.ts +2 -0
- package/src/components/Select/Select.tsx +1 -1
- package/src/components/index.ts +3 -1
- package/build/components/SafeAreaView/SafeAreaView.d.ts +0 -5
- package/build/components/SafeAreaView/SafeAreaView.js +0 -117
- package/build/components/SafeAreaView/SafeAreaView.props.d.ts +0 -17
- package/build/components/SafeAreaView/index.d.ts +0 -2
- package/build/components/SafeAreaView/index.js +0 -1
- package/src/components/SafeAreaView/SafeAreaView.props.ts +0 -20
- package/src/components/SafeAreaView/SafeAreaView.tsx +0 -173
- package/src/components/SafeAreaView/index.ts +0 -2
- /package/build/components/{SafeAreaView/SafeAreaView.props.js → Modal/Modal.shared.types.js} +0 -0
|
@@ -20,6 +20,7 @@ import SpotBillingDark from '@utilitywarehouse/hearth-svg-assets/lib/spot-billin
|
|
|
20
20
|
import SpotBillingLight from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-light.svg';
|
|
21
21
|
import { color } from '@utilitywarehouse/hearth-tokens';
|
|
22
22
|
import { Pressable, ScrollView, View, ViewProps } from 'react-native';
|
|
23
|
+
import { SafeAreaProvider } from 'react-native-safe-area-context';
|
|
23
24
|
import { StyleSheet } from 'react-native-unistyles';
|
|
24
25
|
import { navigateToStory } from '../../../../shared/storybook/storybookLinks';
|
|
25
26
|
import {
|
|
@@ -74,6 +75,7 @@ import {
|
|
|
74
75
|
MenuItem,
|
|
75
76
|
MenuTrigger,
|
|
76
77
|
Modal,
|
|
78
|
+
NavModal,
|
|
77
79
|
OL,
|
|
78
80
|
Pagination,
|
|
79
81
|
Pill,
|
|
@@ -196,715 +198,733 @@ const AllComponents: React.FC = () => {
|
|
|
196
198
|
const isDark = colorMode === 'dark';
|
|
197
199
|
return (
|
|
198
200
|
<div className="sb-unstyled">
|
|
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
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
</Center>
|
|
242
|
-
</ComponentWrapper>
|
|
243
|
-
<ComponentWrapper name="Body Text" link="typography-body-text">
|
|
244
|
-
<Center flex={1}>
|
|
245
|
-
<BodyText>This is some Body Text</BodyText>
|
|
246
|
-
</Center>
|
|
247
|
-
</ComponentWrapper>
|
|
248
|
-
<ComponentWrapper name="Bottom Sheet" link="components-bottom-sheet">
|
|
249
|
-
<Center flex={1}>
|
|
250
|
-
<Button onPress={handleOpenPress}>Open Bottom Sheet</Button>
|
|
251
|
-
<BottomSheet ref={bottomSheetRef} index={1}>
|
|
252
|
-
<BottomSheetView>
|
|
253
|
-
<Box gap="200">
|
|
254
|
-
<BodyText>This is a bottom sheet with content.</BodyText>
|
|
255
|
-
<Button onPress={() => bottomSheetRef.current?.close()}>
|
|
256
|
-
Close Bottom Sheet
|
|
257
|
-
</Button>
|
|
258
|
-
</Box>
|
|
259
|
-
</BottomSheetView>
|
|
260
|
-
</BottomSheet>
|
|
261
|
-
</Center>
|
|
262
|
-
</ComponentWrapper>
|
|
263
|
-
<ComponentWrapper name="Box" link="primitives-box">
|
|
264
|
-
<Center flex={1}>
|
|
265
|
-
<Box backgroundColor={color.grey[900]} padding="300" width={200} height={100}>
|
|
266
|
-
<BodyText color={isDark ? 'primary' : 'inverted'} weight="semibold">
|
|
267
|
-
This is a Box
|
|
268
|
-
</BodyText>
|
|
269
|
-
</Box>
|
|
270
|
-
</Center>
|
|
271
|
-
</ComponentWrapper>
|
|
272
|
-
<ComponentWrapper name="Button" link="components-button">
|
|
273
|
-
<Center flex={1}>
|
|
274
|
-
<Button colorScheme="highlight" variant="emphasis" onPress={() => null}>
|
|
275
|
-
Press me
|
|
276
|
-
</Button>
|
|
277
|
-
</Center>
|
|
278
|
-
</ComponentWrapper>
|
|
279
|
-
<ComponentWrapper name="Card" link="components-card">
|
|
280
|
-
<Center flex={1}>
|
|
281
|
-
<Card colorScheme="neutralStrong">
|
|
282
|
-
<Heading>I am a card</Heading>
|
|
283
|
-
<BodyText>And do card stuff.</BodyText>
|
|
284
|
-
</Card>
|
|
285
|
-
</Center>
|
|
286
|
-
</ComponentWrapper>
|
|
287
|
-
<ComponentWrapper name="Carousel" link="components-carousel">
|
|
288
|
-
<Center flex={1}>
|
|
289
|
-
<Carousel itemWidth={150} centered width={150}>
|
|
290
|
-
<CarouselItem>
|
|
291
|
-
<Box
|
|
292
|
-
backgroundColor={color.blue[700]}
|
|
293
|
-
width={150}
|
|
294
|
-
height={100}
|
|
295
|
-
px="100"
|
|
296
|
-
borderRadius="md"
|
|
297
|
-
>
|
|
298
|
-
<Center flex={1}>
|
|
299
|
-
<BodyText color="inverted" textAlign="center">
|
|
300
|
-
I'm a carousel item
|
|
301
|
-
</BodyText>
|
|
302
|
-
</Center>
|
|
303
|
-
</Box>
|
|
304
|
-
</CarouselItem>
|
|
305
|
-
<CarouselItem>
|
|
306
|
-
<Box
|
|
307
|
-
backgroundColor={color.purple[700]}
|
|
308
|
-
width={150}
|
|
309
|
-
height={100}
|
|
310
|
-
px="100"
|
|
311
|
-
borderRadius="md"
|
|
312
|
-
>
|
|
313
|
-
<Center flex={1}>
|
|
314
|
-
<BodyText color="inverted" textAlign="center">
|
|
315
|
-
I'm another carousel item
|
|
316
|
-
</BodyText>
|
|
317
|
-
</Center>
|
|
318
|
-
</Box>
|
|
319
|
-
</CarouselItem>
|
|
320
|
-
<CarouselItem>
|
|
321
|
-
<Box
|
|
322
|
-
backgroundColor={color.green[700]}
|
|
323
|
-
width={150}
|
|
324
|
-
height={100}
|
|
325
|
-
px="100"
|
|
326
|
-
borderRadius="md"
|
|
327
|
-
>
|
|
328
|
-
<Center flex={1}>
|
|
329
|
-
<BodyText color="inverted" textAlign="center">
|
|
330
|
-
I'm also a carousel item
|
|
331
|
-
</BodyText>
|
|
332
|
-
</Center>
|
|
333
|
-
</Box>
|
|
334
|
-
</CarouselItem>
|
|
335
|
-
</Carousel>
|
|
336
|
-
</Center>
|
|
337
|
-
</ComponentWrapper>
|
|
338
|
-
<ComponentWrapper name="Center" link="primitives-center">
|
|
339
|
-
<Center flex={1}>
|
|
340
|
-
<Center backgroundColor={color.red[400]} padding="300" width={200} height={100}>
|
|
341
|
-
<BodyText color={isDark ? 'primary' : 'inverted'} weight="semibold">
|
|
342
|
-
I am in the Center
|
|
343
|
-
</BodyText>
|
|
344
|
-
</Center>
|
|
345
|
-
</Center>
|
|
346
|
-
</ComponentWrapper>
|
|
347
|
-
|
|
348
|
-
<ComponentWrapper name="Checkbox" link="forms-checkbox">
|
|
349
|
-
<Center flex={1}>
|
|
350
|
-
<View>
|
|
351
|
-
<Checkbox label="I'm a Checkbox" value="" />
|
|
352
|
-
</View>
|
|
353
|
-
</Center>
|
|
354
|
-
</ComponentWrapper>
|
|
355
|
-
<ComponentWrapper name="Combobox" link="forms-combobox">
|
|
356
|
-
<Center flex={1}>
|
|
357
|
-
<BottomSheetModalProvider>
|
|
358
|
-
<Combobox
|
|
359
|
-
label="Search a country"
|
|
360
|
-
placeholder="Search for a country"
|
|
361
|
-
searchPlaceholder="Search for a country"
|
|
362
|
-
options={[
|
|
363
|
-
{ label: 'United Kingdom', value: 'uk' },
|
|
364
|
-
{ label: 'United States', value: 'us' },
|
|
365
|
-
{ label: 'Canada', value: 'ca' },
|
|
366
|
-
]}
|
|
367
|
-
value={comboboxValue}
|
|
368
|
-
onValueChange={setComboboxValue}
|
|
369
|
-
/>
|
|
370
|
-
</BottomSheetModalProvider>
|
|
371
|
-
</Center>
|
|
372
|
-
</ComponentWrapper>
|
|
373
|
-
<ComponentWrapper name="Container" link="primitives-container">
|
|
374
|
-
<Container spacing="md" backgroundColor="secondary">
|
|
375
|
-
<Box h={20} bg={color.blue[300]} />
|
|
376
|
-
<Box h={20} bg={color.blue[400]} />
|
|
377
|
-
<Box h={20} bg={color.blue[500]} />
|
|
378
|
-
</Container>
|
|
379
|
-
</ComponentWrapper>
|
|
380
|
-
<ComponentWrapper name="Currency Input" link="forms-currency-input">
|
|
381
|
-
<Center flex={1} padding="200">
|
|
382
|
-
<CurrencyInput />
|
|
383
|
-
</Center>
|
|
384
|
-
</ComponentWrapper>
|
|
385
|
-
<ComponentWrapper name="Date Input" link="forms-date-input">
|
|
386
|
-
<Center flex={1} padding="200">
|
|
387
|
-
<DateInput />
|
|
388
|
-
</Center>
|
|
389
|
-
</ComponentWrapper>
|
|
390
|
-
<ComponentWrapper name="Date Picker" link="components-date-picker">
|
|
391
|
-
<Center flex={1}>
|
|
392
|
-
<Button onPress={handleDatePickerOpenPress}>Open Date Picker</Button>
|
|
393
|
-
<BottomSheetModalProvider>
|
|
394
|
-
<DatePicker
|
|
395
|
-
ref={datePickerRef}
|
|
396
|
-
mode="single"
|
|
397
|
-
date={selected}
|
|
398
|
-
onChange={({ date }) => setSelected(date)}
|
|
399
|
-
onCancel={() => setSelected(undefined)}
|
|
201
|
+
<SafeAreaProvider>
|
|
202
|
+
<ScrollView contentContainerStyle={styles.container}>
|
|
203
|
+
<Flex direction="row" wrap="wrap" spacing="md" style={styles.grid}>
|
|
204
|
+
<ComponentWrapper name="Accordion" link="components-accordion">
|
|
205
|
+
<Center flex={1} p="200">
|
|
206
|
+
<Accordion type="single">
|
|
207
|
+
<AccordionItem title="Accordion Item 1">
|
|
208
|
+
<BodyText>Accordion Item 1 Content</BodyText>
|
|
209
|
+
</AccordionItem>
|
|
210
|
+
<AccordionItem title="Accordion Item 2">
|
|
211
|
+
<BodyText>Accordion Item 2 Content</BodyText>
|
|
212
|
+
</AccordionItem>
|
|
213
|
+
</Accordion>
|
|
214
|
+
</Center>
|
|
215
|
+
</ComponentWrapper>
|
|
216
|
+
<ComponentWrapper name="Alert" link="components-alert">
|
|
217
|
+
<Center flex={1}>
|
|
218
|
+
<Alert text="This is an alert" />
|
|
219
|
+
</Center>
|
|
220
|
+
</ComponentWrapper>
|
|
221
|
+
<ComponentWrapper name="Avatar" link="components-avatar">
|
|
222
|
+
<Center flex={1} gap="200">
|
|
223
|
+
<Avatar name="John Doe" />
|
|
224
|
+
</Center>
|
|
225
|
+
</ComponentWrapper>
|
|
226
|
+
<ComponentWrapper name="Badge" link="components-badge">
|
|
227
|
+
<Center gap="200" flex={1}>
|
|
228
|
+
<View>
|
|
229
|
+
<Badge>This is a badge</Badge>
|
|
230
|
+
</View>
|
|
231
|
+
<View>
|
|
232
|
+
<Badge colorScheme="danger">This is a red badge</Badge>
|
|
233
|
+
</View>
|
|
234
|
+
</Center>
|
|
235
|
+
</ComponentWrapper>
|
|
236
|
+
<ComponentWrapper name="Banner" link="components-banner">
|
|
237
|
+
<Center flex={1} p="200">
|
|
238
|
+
<Banner
|
|
239
|
+
icon={ElectricityMediumIcon}
|
|
240
|
+
iconContainerColor="energy"
|
|
241
|
+
heading="I'm a Banner"
|
|
242
|
+
description="This is a banner description"
|
|
400
243
|
/>
|
|
401
|
-
</
|
|
402
|
-
</
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
</
|
|
423
|
-
|
|
244
|
+
</Center>
|
|
245
|
+
</ComponentWrapper>
|
|
246
|
+
<ComponentWrapper name="Body Text" link="typography-body-text">
|
|
247
|
+
<Center flex={1}>
|
|
248
|
+
<BodyText>This is some Body Text</BodyText>
|
|
249
|
+
</Center>
|
|
250
|
+
</ComponentWrapper>
|
|
251
|
+
<ComponentWrapper name="Bottom Sheet" link="components-bottom-sheet">
|
|
252
|
+
<Center flex={1}>
|
|
253
|
+
<Button onPress={handleOpenPress}>Open Bottom Sheet</Button>
|
|
254
|
+
<BottomSheet ref={bottomSheetRef} index={1}>
|
|
255
|
+
<BottomSheetView>
|
|
256
|
+
<Box gap="200">
|
|
257
|
+
<BodyText>This is a bottom sheet with content.</BodyText>
|
|
258
|
+
<Button onPress={() => bottomSheetRef.current?.close()}>
|
|
259
|
+
Close Bottom Sheet
|
|
260
|
+
</Button>
|
|
261
|
+
</Box>
|
|
262
|
+
</BottomSheetView>
|
|
263
|
+
</BottomSheet>
|
|
264
|
+
</Center>
|
|
265
|
+
</ComponentWrapper>
|
|
266
|
+
<ComponentWrapper name="Box" link="primitives-box">
|
|
267
|
+
<Center flex={1}>
|
|
268
|
+
<Box backgroundColor={color.grey[900]} padding="300" width={200} height={100}>
|
|
269
|
+
<BodyText color={isDark ? 'primary' : 'inverted'} weight="semibold">
|
|
270
|
+
This is a Box
|
|
271
|
+
</BodyText>
|
|
272
|
+
</Box>
|
|
273
|
+
</Center>
|
|
274
|
+
</ComponentWrapper>
|
|
275
|
+
<ComponentWrapper name="Button" link="components-button">
|
|
276
|
+
<Center flex={1}>
|
|
277
|
+
<Button colorScheme="highlight" variant="emphasis" onPress={() => null}>
|
|
278
|
+
Press me
|
|
279
|
+
</Button>
|
|
280
|
+
</Center>
|
|
281
|
+
</ComponentWrapper>
|
|
282
|
+
<ComponentWrapper name="Card" link="components-card">
|
|
283
|
+
<Center flex={1}>
|
|
284
|
+
<Card colorScheme="neutralStrong">
|
|
285
|
+
<Heading>I am a card</Heading>
|
|
286
|
+
<BodyText>And do card stuff.</BodyText>
|
|
287
|
+
</Card>
|
|
288
|
+
</Center>
|
|
289
|
+
</ComponentWrapper>
|
|
290
|
+
<ComponentWrapper name="Carousel" link="components-carousel">
|
|
291
|
+
<Center flex={1}>
|
|
292
|
+
<Carousel itemWidth={150} centered width={150}>
|
|
293
|
+
<CarouselItem>
|
|
294
|
+
<Box
|
|
295
|
+
backgroundColor={color.blue[700]}
|
|
296
|
+
width={150}
|
|
297
|
+
height={100}
|
|
298
|
+
px="100"
|
|
299
|
+
borderRadius="md"
|
|
300
|
+
>
|
|
301
|
+
<Center flex={1}>
|
|
302
|
+
<BodyText color="inverted" textAlign="center">
|
|
303
|
+
I'm a carousel item
|
|
304
|
+
</BodyText>
|
|
305
|
+
</Center>
|
|
306
|
+
</Box>
|
|
307
|
+
</CarouselItem>
|
|
308
|
+
<CarouselItem>
|
|
309
|
+
<Box
|
|
310
|
+
backgroundColor={color.purple[700]}
|
|
311
|
+
width={150}
|
|
312
|
+
height={100}
|
|
313
|
+
px="100"
|
|
314
|
+
borderRadius="md"
|
|
315
|
+
>
|
|
316
|
+
<Center flex={1}>
|
|
317
|
+
<BodyText color="inverted" textAlign="center">
|
|
318
|
+
I'm another carousel item
|
|
319
|
+
</BodyText>
|
|
320
|
+
</Center>
|
|
321
|
+
</Box>
|
|
322
|
+
</CarouselItem>
|
|
323
|
+
<CarouselItem>
|
|
324
|
+
<Box
|
|
325
|
+
backgroundColor={color.green[700]}
|
|
326
|
+
width={150}
|
|
327
|
+
height={100}
|
|
328
|
+
px="100"
|
|
329
|
+
borderRadius="md"
|
|
330
|
+
>
|
|
331
|
+
<Center flex={1}>
|
|
332
|
+
<BodyText color="inverted" textAlign="center">
|
|
333
|
+
I'm also a carousel item
|
|
334
|
+
</BodyText>
|
|
335
|
+
</Center>
|
|
336
|
+
</Box>
|
|
337
|
+
</CarouselItem>
|
|
338
|
+
</Carousel>
|
|
339
|
+
</Center>
|
|
340
|
+
</ComponentWrapper>
|
|
341
|
+
<ComponentWrapper name="Center" link="primitives-center">
|
|
342
|
+
<Center flex={1}>
|
|
343
|
+
<Center backgroundColor={color.red[400]} padding="300" width={200} height={100}>
|
|
344
|
+
<BodyText color={isDark ? 'primary' : 'inverted'} weight="semibold">
|
|
345
|
+
I am in the Center
|
|
346
|
+
</BodyText>
|
|
347
|
+
</Center>
|
|
348
|
+
</Center>
|
|
349
|
+
</ComponentWrapper>
|
|
424
350
|
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
351
|
+
<ComponentWrapper name="Checkbox" link="forms-checkbox">
|
|
352
|
+
<Center flex={1}>
|
|
353
|
+
<View>
|
|
354
|
+
<Checkbox label="I'm a Checkbox" value="" />
|
|
355
|
+
</View>
|
|
356
|
+
</Center>
|
|
357
|
+
</ComponentWrapper>
|
|
358
|
+
<ComponentWrapper name="Combobox" link="forms-combobox">
|
|
359
|
+
<Center flex={1}>
|
|
360
|
+
<BottomSheetModalProvider>
|
|
361
|
+
<Combobox
|
|
362
|
+
label="Search a country"
|
|
363
|
+
placeholder="Search for a country"
|
|
364
|
+
searchPlaceholder="Search for a country"
|
|
365
|
+
options={[
|
|
366
|
+
{ label: 'United Kingdom', value: 'uk' },
|
|
367
|
+
{ label: 'United States', value: 'us' },
|
|
368
|
+
{ label: 'Canada', value: 'ca' },
|
|
369
|
+
]}
|
|
370
|
+
value={comboboxValue}
|
|
371
|
+
onValueChange={setComboboxValue}
|
|
372
|
+
/>
|
|
373
|
+
</BottomSheetModalProvider>
|
|
374
|
+
</Center>
|
|
375
|
+
</ComponentWrapper>
|
|
376
|
+
<ComponentWrapper name="Container" link="primitives-container">
|
|
377
|
+
<Container spacing="md" backgroundColor="secondary">
|
|
378
|
+
<Box h={20} bg={color.blue[300]} />
|
|
379
|
+
<Box h={20} bg={color.blue[400]} />
|
|
380
|
+
<Box h={20} bg={color.blue[500]} />
|
|
381
|
+
</Container>
|
|
382
|
+
</ComponentWrapper>
|
|
383
|
+
<ComponentWrapper name="Currency Input" link="forms-currency-input">
|
|
384
|
+
<Center flex={1} padding="200">
|
|
385
|
+
<CurrencyInput />
|
|
386
|
+
</Center>
|
|
387
|
+
</ComponentWrapper>
|
|
388
|
+
<ComponentWrapper name="Date Input" link="forms-date-input">
|
|
389
|
+
<Center flex={1} padding="200">
|
|
390
|
+
<DateInput />
|
|
391
|
+
</Center>
|
|
392
|
+
</ComponentWrapper>
|
|
393
|
+
<ComponentWrapper name="Date Picker" link="components-date-picker">
|
|
394
|
+
<Center flex={1}>
|
|
395
|
+
<Button onPress={handleDatePickerOpenPress}>Open Date Picker</Button>
|
|
396
|
+
<BottomSheetModalProvider>
|
|
397
|
+
<DatePicker
|
|
398
|
+
ref={datePickerRef}
|
|
399
|
+
mode="single"
|
|
400
|
+
date={selected}
|
|
401
|
+
onChange={({ date }) => setSelected(date)}
|
|
402
|
+
onCancel={() => setSelected(undefined)}
|
|
403
|
+
/>
|
|
404
|
+
</BottomSheetModalProvider>
|
|
405
|
+
</Center>
|
|
406
|
+
</ComponentWrapper>
|
|
407
|
+
<ComponentWrapper name="Date Picker Input" link="forms-date-picker-input">
|
|
408
|
+
<Center flex={1} padding="200">
|
|
409
|
+
<BottomSheetModalProvider>
|
|
410
|
+
<DatePickerInput placeholder="DD/MM/YYYY" />
|
|
411
|
+
</BottomSheetModalProvider>
|
|
412
|
+
</Center>
|
|
413
|
+
</ComponentWrapper>
|
|
414
|
+
<ComponentWrapper name="Description List" link="components-description-list">
|
|
415
|
+
<Center flex={1} padding="200">
|
|
416
|
+
<DescriptionList>
|
|
417
|
+
<DescriptionListItem heading="This is a" description="Description list" />
|
|
418
|
+
<DescriptionListItem heading="So is this" description="12-34-56" />
|
|
419
|
+
</DescriptionList>
|
|
420
|
+
</Center>
|
|
421
|
+
</ComponentWrapper>
|
|
422
|
+
<ComponentWrapper name="Detail Text" link="typography-detail-text">
|
|
423
|
+
<Center flex={1}>
|
|
424
|
+
<DetailText>This is some Detail Text</DetailText>
|
|
425
|
+
</Center>
|
|
426
|
+
</ComponentWrapper>
|
|
432
427
|
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
<
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
<Card>
|
|
441
|
-
<BodyText>This content expands and collapses</BodyText>
|
|
442
|
-
</Card>
|
|
443
|
-
</Expandable>
|
|
444
|
-
</Box>
|
|
445
|
-
</Center>
|
|
446
|
-
</ComponentWrapper>
|
|
428
|
+
<ComponentWrapper name="Divider" link="components-divider">
|
|
429
|
+
<Center flex={1} p="300">
|
|
430
|
+
<BodyText>This text is divided</BodyText>
|
|
431
|
+
<Divider spacing="sm" />
|
|
432
|
+
<BodyText>From this text</BodyText>
|
|
433
|
+
</Center>
|
|
434
|
+
</ComponentWrapper>
|
|
447
435
|
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
436
|
+
<ComponentWrapper name="Expandable" link="utility-components-expandable">
|
|
437
|
+
<Center flex={1} p="200">
|
|
438
|
+
<Box width={240} gap="100">
|
|
439
|
+
<Button onPress={() => setIsExpanded(!isExpanded)}>
|
|
440
|
+
{isExpanded ? 'Collapse' : 'Expand'}
|
|
441
|
+
</Button>
|
|
442
|
+
<Expandable expanded={isExpanded} accessibilityLabel="Expandable content section">
|
|
443
|
+
<Card>
|
|
444
|
+
<BodyText>This content expands and collapses</BodyText>
|
|
445
|
+
</Card>
|
|
446
|
+
</Expandable>
|
|
447
|
+
</Box>
|
|
448
|
+
</Center>
|
|
449
|
+
</ComponentWrapper>
|
|
450
|
+
|
|
451
|
+
<ComponentWrapper name="Expandable Card" link="components-expandable-card">
|
|
452
|
+
<Center flex={1} p="200">
|
|
453
|
+
<ExpandableCard
|
|
454
|
+
heading="This is an"
|
|
455
|
+
helperText="Expandable Card component"
|
|
456
|
+
leadingIcon={ElectricityMediumIcon}
|
|
457
|
+
expandedContent={
|
|
458
|
+
<>
|
|
459
|
+
<BodyText>I'm expanding</BodyText>
|
|
460
|
+
<BodyText>to show more content</BodyText>
|
|
461
|
+
</>
|
|
462
|
+
}
|
|
463
|
+
style={{ width: 240 }}
|
|
464
|
+
/>
|
|
465
|
+
</Center>
|
|
466
|
+
</ComponentWrapper>
|
|
464
467
|
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
<Box w={40} h={40} bg={color.blue[300]} />
|
|
469
|
-
<Box w={40} h={40} bg={color.blue[400]} />
|
|
470
|
-
<Box w={40} h={40} bg={color.blue[500]} />
|
|
471
|
-
<Box w={40} h={40} bg={color.blue[600]} />
|
|
472
|
-
</Flex>
|
|
473
|
-
</Center>
|
|
474
|
-
</ComponentWrapper>
|
|
475
|
-
<ComponentWrapper name="Form Field" link="forms-form-field">
|
|
476
|
-
<Center flex={1}>
|
|
477
|
-
<FormField
|
|
478
|
-
validationStatus="invalid"
|
|
479
|
-
label="This is a form field"
|
|
480
|
-
validText="Valid form field text"
|
|
481
|
-
invalidText="And an invalid error message"
|
|
482
|
-
>
|
|
483
|
-
<Input onChange={() => console.log('###')} placeholder="" />
|
|
484
|
-
</FormField>
|
|
485
|
-
</Center>
|
|
486
|
-
</ComponentWrapper>
|
|
487
|
-
<ComponentWrapper name="Grid" link="primitives-grid">
|
|
488
|
-
<Center flex={1}>
|
|
489
|
-
<Box width={100}>
|
|
490
|
-
<Grid columns={2} spacing="md">
|
|
468
|
+
<ComponentWrapper name="Flex" link="primitives-flex">
|
|
469
|
+
<Center flex={1}>
|
|
470
|
+
<Flex direction="row" spacing="md">
|
|
491
471
|
<Box w={40} h={40} bg={color.blue[300]} />
|
|
492
472
|
<Box w={40} h={40} bg={color.blue[400]} />
|
|
493
473
|
<Box w={40} h={40} bg={color.blue[500]} />
|
|
494
474
|
<Box w={40} h={40} bg={color.blue[600]} />
|
|
495
|
-
</
|
|
496
|
-
</
|
|
497
|
-
</
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
}}
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
<
|
|
523
|
-
<
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
<
|
|
528
|
-
<
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
icon={BroadbandMediumIcon}
|
|
542
|
-
size="sm"
|
|
543
|
-
variant="emphasis"
|
|
544
|
-
color="broadband"
|
|
545
|
-
/>
|
|
546
|
-
<IconContainer
|
|
547
|
-
icon={MobileMediumIcon}
|
|
548
|
-
size="sm"
|
|
549
|
-
variant="emphasis"
|
|
550
|
-
color="mobile"
|
|
551
|
-
/>
|
|
552
|
-
<IconContainer
|
|
553
|
-
icon={InsuranceMediumIcon}
|
|
554
|
-
size="sm"
|
|
555
|
-
variant="emphasis"
|
|
556
|
-
color="insurance"
|
|
557
|
-
/>
|
|
558
|
-
<IconContainer
|
|
559
|
-
icon={CashbackCardMediumIcon}
|
|
560
|
-
size="sm"
|
|
561
|
-
variant="emphasis"
|
|
562
|
-
color="cashback"
|
|
475
|
+
</Flex>
|
|
476
|
+
</Center>
|
|
477
|
+
</ComponentWrapper>
|
|
478
|
+
<ComponentWrapper name="Form Field" link="forms-form-field">
|
|
479
|
+
<Center flex={1}>
|
|
480
|
+
<FormField
|
|
481
|
+
validationStatus="invalid"
|
|
482
|
+
label="This is a form field"
|
|
483
|
+
validText="Valid form field text"
|
|
484
|
+
invalidText="And an invalid error message"
|
|
485
|
+
>
|
|
486
|
+
<Input onChange={() => console.log('###')} placeholder="" />
|
|
487
|
+
</FormField>
|
|
488
|
+
</Center>
|
|
489
|
+
</ComponentWrapper>
|
|
490
|
+
<ComponentWrapper name="Grid" link="primitives-grid">
|
|
491
|
+
<Center flex={1}>
|
|
492
|
+
<Box width={100}>
|
|
493
|
+
<Grid columns={2} spacing="md">
|
|
494
|
+
<Box w={40} h={40} bg={color.blue[300]} />
|
|
495
|
+
<Box w={40} h={40} bg={color.blue[400]} />
|
|
496
|
+
<Box w={40} h={40} bg={color.blue[500]} />
|
|
497
|
+
<Box w={40} h={40} bg={color.blue[600]} />
|
|
498
|
+
</Grid>
|
|
499
|
+
</Box>
|
|
500
|
+
</Center>
|
|
501
|
+
</ComponentWrapper>
|
|
502
|
+
<ComponentWrapper name="Heading" link="typography-heading">
|
|
503
|
+
<Center flex={1}>
|
|
504
|
+
<Heading>This is a Heading</Heading>
|
|
505
|
+
</Center>
|
|
506
|
+
</ComponentWrapper>
|
|
507
|
+
<ComponentWrapper name="Highlight Banner" link="components-highlight-banner">
|
|
508
|
+
<Center flex={1} p="200">
|
|
509
|
+
<HighlightBanner
|
|
510
|
+
heading="Featured Content"
|
|
511
|
+
headingColor="energy"
|
|
512
|
+
imageContainerHeight={40}
|
|
513
|
+
image={
|
|
514
|
+
<HighlightBannerImage
|
|
515
|
+
source={{
|
|
516
|
+
uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=800&q=80',
|
|
517
|
+
}}
|
|
518
|
+
/>
|
|
519
|
+
}
|
|
520
|
+
description="Banner description goes here."
|
|
563
521
|
/>
|
|
564
|
-
</
|
|
565
|
-
</
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
<
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
</ComponentWrapper>
|
|
597
|
-
<ComponentWrapper name="List" link="components-list">
|
|
598
|
-
<Center flex={1} p="300">
|
|
599
|
-
<List>
|
|
600
|
-
<ListItem heading="List Item 1" onPress={() => console.log('item pressed')} />
|
|
601
|
-
<ListItem heading="List Item 2" onPress={() => console.log('item pressed')} />
|
|
602
|
-
</List>
|
|
603
|
-
</Center>
|
|
604
|
-
</ComponentWrapper>
|
|
605
|
-
<ComponentWrapper name="Menu" link="components-menu">
|
|
606
|
-
<Center flex={1}>
|
|
607
|
-
<BottomSheetModalProvider>
|
|
608
|
-
<MenuTrigger onPress={handleMenuOpenPress}>
|
|
609
|
-
<Button>Open Menu</Button>
|
|
610
|
-
</MenuTrigger>
|
|
611
|
-
<Menu ref={menuRef} heading="Actions">
|
|
612
|
-
<MenuItem icon={EditSmallIcon} text="Edit" onPress={() => console.log('Edit')} />
|
|
613
|
-
<MenuItem
|
|
614
|
-
icon={ShareSmallIcon}
|
|
615
|
-
text="Share"
|
|
616
|
-
onPress={() => console.log('Share')}
|
|
522
|
+
</Center>
|
|
523
|
+
</ComponentWrapper>
|
|
524
|
+
<ComponentWrapper name="Indicator Icon Button" link="components-indicator-icon-button">
|
|
525
|
+
<Center flex={1}>
|
|
526
|
+
<IndicatorIconButton icon={BellMediumIcon} onPress={() => null} indicator={true} />
|
|
527
|
+
</Center>
|
|
528
|
+
</ComponentWrapper>
|
|
529
|
+
<ComponentWrapper name="Icon Button" link="components-icon-button">
|
|
530
|
+
<Center flex={1}>
|
|
531
|
+
<IconButton icon={ChevronRightMediumIcon} size="md" onPress={() => null} />
|
|
532
|
+
</Center>
|
|
533
|
+
</ComponentWrapper>
|
|
534
|
+
<ComponentWrapper name="Icon Container" link="components-icon-container">
|
|
535
|
+
<Center flex={1}>
|
|
536
|
+
<Flex direction="row" spacing="sm">
|
|
537
|
+
<IconContainer
|
|
538
|
+
icon={ElectricityMediumIcon}
|
|
539
|
+
size="sm"
|
|
540
|
+
variant="emphasis"
|
|
541
|
+
color="energy"
|
|
542
|
+
/>
|
|
543
|
+
<IconContainer
|
|
544
|
+
icon={BroadbandMediumIcon}
|
|
545
|
+
size="sm"
|
|
546
|
+
variant="emphasis"
|
|
547
|
+
color="broadband"
|
|
548
|
+
/>
|
|
549
|
+
<IconContainer
|
|
550
|
+
icon={MobileMediumIcon}
|
|
551
|
+
size="sm"
|
|
552
|
+
variant="emphasis"
|
|
553
|
+
color="mobile"
|
|
617
554
|
/>
|
|
618
|
-
<
|
|
619
|
-
icon={
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
555
|
+
<IconContainer
|
|
556
|
+
icon={InsuranceMediumIcon}
|
|
557
|
+
size="sm"
|
|
558
|
+
variant="emphasis"
|
|
559
|
+
color="insurance"
|
|
623
560
|
/>
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
561
|
+
<IconContainer
|
|
562
|
+
icon={CashbackCardMediumIcon}
|
|
563
|
+
size="sm"
|
|
564
|
+
variant="emphasis"
|
|
565
|
+
color="cashback"
|
|
566
|
+
/>
|
|
567
|
+
</Flex>
|
|
568
|
+
</Center>
|
|
569
|
+
</ComponentWrapper>
|
|
570
|
+
|
|
571
|
+
<ComponentWrapper name="Icons" link="components-icons">
|
|
572
|
+
<Center flex={1}>
|
|
573
|
+
<Flex direction="row" spacing="lg">
|
|
574
|
+
<Icon as={ElectricityMediumIcon} color="energyBlue700" />
|
|
575
|
+
<Icon as={MobileMediumIcon} color="mobileRose700" />
|
|
576
|
+
<Icon as={BroadbandMediumIcon} color="broadbandGreen700" />
|
|
577
|
+
<Icon as={InsuranceMediumIcon} color="insuranceOrange700" />
|
|
578
|
+
</Flex>
|
|
579
|
+
</Center>
|
|
580
|
+
</ComponentWrapper>
|
|
581
|
+
<ComponentWrapper name="Inline Link" link="utility-components-inline-link">
|
|
582
|
+
<Center flex={1}>
|
|
583
|
+
<InlineLink href="https://www.utilitywarehouse.co.uk" target="_blank">
|
|
584
|
+
This is an inline link
|
|
585
|
+
</InlineLink>
|
|
586
|
+
</Center>
|
|
587
|
+
</ComponentWrapper>
|
|
588
|
+
<ComponentWrapper name="Input" link="forms-input">
|
|
589
|
+
<Center flex={1}>
|
|
590
|
+
<Input placeholder="This is an input" />
|
|
591
|
+
</Center>
|
|
592
|
+
</ComponentWrapper>
|
|
593
|
+
<ComponentWrapper name="Link" link="components-link">
|
|
594
|
+
<Center flex={1}>
|
|
595
|
+
<Link href="https://www.utilitywarehouse.co.uk" target="_blank">
|
|
596
|
+
This is a link
|
|
597
|
+
</Link>
|
|
598
|
+
</Center>
|
|
599
|
+
</ComponentWrapper>
|
|
600
|
+
<ComponentWrapper name="List" link="components-list">
|
|
601
|
+
<Center flex={1} p="300">
|
|
602
|
+
<List>
|
|
603
|
+
<ListItem heading="List Item 1" onPress={() => console.log('item pressed')} />
|
|
604
|
+
<ListItem heading="List Item 2" onPress={() => console.log('item pressed')} />
|
|
605
|
+
</List>
|
|
606
|
+
</Center>
|
|
607
|
+
</ComponentWrapper>
|
|
608
|
+
<ComponentWrapper name="Menu" link="components-menu">
|
|
609
|
+
<Center flex={1}>
|
|
610
|
+
<BottomSheetModalProvider>
|
|
611
|
+
<MenuTrigger onPress={handleMenuOpenPress}>
|
|
612
|
+
<Button>Open Menu</Button>
|
|
613
|
+
</MenuTrigger>
|
|
614
|
+
<Menu ref={menuRef} heading="Actions">
|
|
615
|
+
<MenuItem
|
|
616
|
+
icon={EditSmallIcon}
|
|
617
|
+
text="Edit"
|
|
618
|
+
onPress={() => console.log('Edit')}
|
|
619
|
+
/>
|
|
620
|
+
<MenuItem
|
|
621
|
+
icon={ShareSmallIcon}
|
|
622
|
+
text="Share"
|
|
623
|
+
onPress={() => console.log('Share')}
|
|
624
|
+
/>
|
|
625
|
+
<MenuItem
|
|
626
|
+
icon={TrashSmallIcon}
|
|
627
|
+
text="Delete"
|
|
628
|
+
colorScheme="destructive"
|
|
629
|
+
onPress={() => console.log('Delete')}
|
|
630
|
+
/>
|
|
631
|
+
</Menu>
|
|
632
|
+
</BottomSheetModalProvider>
|
|
633
|
+
</Center>
|
|
634
|
+
</ComponentWrapper>
|
|
635
|
+
<ComponentWrapper name="Modal" link="components-modal">
|
|
636
|
+
<Center flex={1}>
|
|
637
|
+
<Button onPress={handleModalOpenPress}>Open Modal</Button>
|
|
638
|
+
<BottomSheetModalProvider>
|
|
639
|
+
<Modal
|
|
640
|
+
ref={modalRef}
|
|
641
|
+
heading="This is a Modal"
|
|
642
|
+
description="This is a modal description"
|
|
643
|
+
primaryButtonText="Primary"
|
|
644
|
+
secondaryButtonText="Close"
|
|
645
|
+
index={0}
|
|
646
|
+
/>
|
|
647
|
+
</BottomSheetModalProvider>
|
|
648
|
+
</Center>
|
|
649
|
+
</ComponentWrapper>
|
|
650
|
+
<ComponentWrapper name="NavModal" link="components-navmodal">
|
|
651
|
+
<Box style={{ width: '100%', height: 320 }}>
|
|
652
|
+
<NavModal
|
|
653
|
+
heading="This is a NavModal"
|
|
654
|
+
description="Use this inside navigation modal screens"
|
|
636
655
|
primaryButtonText="Primary"
|
|
637
656
|
secondaryButtonText="Close"
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
</Center>
|
|
642
|
-
</ComponentWrapper>
|
|
643
|
-
<ComponentWrapper name="Ordered List" link="utility-components-ul-ol-lists">
|
|
644
|
-
<Center flex={1}>
|
|
645
|
-
<OL>
|
|
646
|
-
<LI>
|
|
647
|
-
<BodyText>List Item 1</BodyText>
|
|
648
|
-
</LI>
|
|
649
|
-
<LI>
|
|
650
|
-
<BodyText>List Item 2</BodyText>
|
|
651
|
-
</LI>
|
|
652
|
-
</OL>
|
|
653
|
-
</Center>
|
|
654
|
-
</ComponentWrapper>
|
|
655
|
-
<ComponentWrapper name="Pagination" link="components-pagination">
|
|
656
|
-
<Center flex={1} p="200">
|
|
657
|
-
<Box style={{ width: 280 }}>
|
|
658
|
-
<Pagination
|
|
659
|
-
currentPage={3}
|
|
660
|
-
totalPages={10}
|
|
661
|
-
onPageChange={() => {}}
|
|
662
|
-
condensed
|
|
663
|
-
hideSkipButtons
|
|
664
|
-
/>
|
|
657
|
+
>
|
|
658
|
+
<BodyText>This preview is static because NavModal is screen-based.</BodyText>
|
|
659
|
+
</NavModal>
|
|
665
660
|
</Box>
|
|
666
|
-
</
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
<
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
<
|
|
708
|
-
<
|
|
709
|
-
<
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
661
|
+
</ComponentWrapper>
|
|
662
|
+
<ComponentWrapper name="Ordered List" link="utility-components-ul-ol-lists">
|
|
663
|
+
<Center flex={1}>
|
|
664
|
+
<OL>
|
|
665
|
+
<LI>
|
|
666
|
+
<BodyText>List Item 1</BodyText>
|
|
667
|
+
</LI>
|
|
668
|
+
<LI>
|
|
669
|
+
<BodyText>List Item 2</BodyText>
|
|
670
|
+
</LI>
|
|
671
|
+
</OL>
|
|
672
|
+
</Center>
|
|
673
|
+
</ComponentWrapper>
|
|
674
|
+
<ComponentWrapper name="Pagination" link="components-pagination">
|
|
675
|
+
<Center flex={1} p="200">
|
|
676
|
+
<Box style={{ width: 280 }}>
|
|
677
|
+
<Pagination
|
|
678
|
+
currentPage={3}
|
|
679
|
+
totalPages={10}
|
|
680
|
+
onPageChange={() => {}}
|
|
681
|
+
condensed
|
|
682
|
+
hideSkipButtons
|
|
683
|
+
/>
|
|
684
|
+
</Box>
|
|
685
|
+
</Center>
|
|
686
|
+
</ComponentWrapper>
|
|
687
|
+
<ComponentWrapper name="Pill Group" link="components-pill-group">
|
|
688
|
+
<Center flex={1} p="200">
|
|
689
|
+
<PillGroup
|
|
690
|
+
value={pillValue}
|
|
691
|
+
onChange={v => setPillValue(v as string[])}
|
|
692
|
+
wrap={false}
|
|
693
|
+
multiple
|
|
694
|
+
>
|
|
695
|
+
<Pill value="all" label="All" />
|
|
696
|
+
<Pill value="energy" label="Energy" icon={ElectricityMediumIcon} />
|
|
697
|
+
<Pill value="broadband" label="Broadband" icon={BroadbandMediumIcon} />
|
|
698
|
+
<Pill value="mobile" label="Mobile" icon={MobileMediumIcon} />
|
|
699
|
+
</PillGroup>
|
|
700
|
+
</Center>
|
|
701
|
+
</ComponentWrapper>
|
|
702
|
+
<ComponentWrapper name="Progress Bar" link="components-progress-bar">
|
|
703
|
+
<Center flex={1} px="300">
|
|
704
|
+
<ProgressBar value={58} label="Order progress" />
|
|
705
|
+
</Center>
|
|
706
|
+
</ComponentWrapper>
|
|
707
|
+
<ComponentWrapper name="Progress Stepper" link="components-progress-stepper">
|
|
708
|
+
<Center flex={1} px="300">
|
|
709
|
+
<ProgressStepper>
|
|
710
|
+
<ProgressStep id="customer-data" status="complete" />
|
|
711
|
+
<ProgressStep id="shipping-data" status="complete" />
|
|
712
|
+
<ProgressStep id="payment-data" status="active" />
|
|
713
|
+
<ProgressStep id="summary" status="incomplete" />
|
|
714
|
+
</ProgressStepper>
|
|
715
|
+
</Center>
|
|
716
|
+
</ComponentWrapper>
|
|
717
|
+
<ComponentWrapper name="Radio" link="forms-radio">
|
|
718
|
+
<Center flex={1}>
|
|
719
|
+
<RadioGroup>
|
|
720
|
+
<Radio label="I'm a Radio" value="1" />
|
|
721
|
+
<Radio label="Me too" value="2" />
|
|
722
|
+
</RadioGroup>
|
|
723
|
+
</Center>
|
|
724
|
+
</ComponentWrapper>
|
|
725
|
+
<ComponentWrapper name="Radio Card" link="components-radio-card">
|
|
726
|
+
<Center flex={1}>
|
|
727
|
+
<RadioCardGroup aria-label="Select Tariff" nativeID="RadioCard-group">
|
|
728
|
+
<RadioCard
|
|
729
|
+
value="fixed"
|
|
730
|
+
aria-label="Debit Card Payment"
|
|
731
|
+
label="I'm a Radio Card"
|
|
732
|
+
></RadioCard>
|
|
733
|
+
</RadioCardGroup>
|
|
734
|
+
</Center>
|
|
735
|
+
</ComponentWrapper>
|
|
717
736
|
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
/>
|
|
725
|
-
</Center>
|
|
726
|
-
</ComponentWrapper>
|
|
727
|
-
<ComponentWrapper name="Segmented Control" link="components-segmented-control">
|
|
728
|
-
<Center flex={1}>
|
|
729
|
-
<SegmentedControl defaultValue="day" alignSelf="center">
|
|
730
|
-
<SegmentedControlOption value="day">Day</SegmentedControlOption>
|
|
731
|
-
<SegmentedControlOption value="week">Week</SegmentedControlOption>
|
|
732
|
-
<SegmentedControlOption value="month">Month</SegmentedControlOption>
|
|
733
|
-
</SegmentedControl>
|
|
734
|
-
</Center>
|
|
735
|
-
</ComponentWrapper>
|
|
736
|
-
<ComponentWrapper name="Select" link="forms-select">
|
|
737
|
-
<Center flex={1}>
|
|
738
|
-
<BottomSheetModalProvider>
|
|
739
|
-
<Select
|
|
740
|
-
label="Choose an option"
|
|
741
|
-
placeholder="Select an option"
|
|
742
|
-
options={[
|
|
743
|
-
{ label: 'Option 1', value: '1' },
|
|
744
|
-
{ label: 'Option 2', value: '2' },
|
|
745
|
-
{ label: 'Option 3', value: '3' },
|
|
746
|
-
]}
|
|
747
|
-
value={selectValue}
|
|
748
|
-
onValueChange={setSelectValue}
|
|
737
|
+
<ComponentWrapper name="Section Header" link="components-section-header">
|
|
738
|
+
<Center flex={1} p="300">
|
|
739
|
+
<SectionHeader
|
|
740
|
+
heading="Heading"
|
|
741
|
+
helperText="Supporting text"
|
|
742
|
+
trailingContent={<Link href="#">More</Link>}
|
|
749
743
|
/>
|
|
750
|
-
</
|
|
751
|
-
</
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
744
|
+
</Center>
|
|
745
|
+
</ComponentWrapper>
|
|
746
|
+
<ComponentWrapper name="Segmented Control" link="components-segmented-control">
|
|
747
|
+
<Center flex={1}>
|
|
748
|
+
<SegmentedControl defaultValue="day" alignSelf="center">
|
|
749
|
+
<SegmentedControlOption value="day">Day</SegmentedControlOption>
|
|
750
|
+
<SegmentedControlOption value="week">Week</SegmentedControlOption>
|
|
751
|
+
<SegmentedControlOption value="month">Month</SegmentedControlOption>
|
|
752
|
+
</SegmentedControl>
|
|
753
|
+
</Center>
|
|
754
|
+
</ComponentWrapper>
|
|
755
|
+
<ComponentWrapper name="Select" link="forms-select">
|
|
756
|
+
<Center flex={1}>
|
|
757
|
+
<BottomSheetModalProvider>
|
|
758
|
+
<Select
|
|
759
|
+
label="Choose an option"
|
|
760
|
+
placeholder="Select an option"
|
|
761
|
+
options={[
|
|
762
|
+
{ label: 'Option 1', value: '1' },
|
|
763
|
+
{ label: 'Option 2', value: '2' },
|
|
764
|
+
{ label: 'Option 3', value: '3' },
|
|
765
|
+
]}
|
|
766
|
+
value={selectValue}
|
|
767
|
+
onValueChange={setSelectValue}
|
|
768
|
+
/>
|
|
769
|
+
</BottomSheetModalProvider>
|
|
770
|
+
</Center>
|
|
771
|
+
</ComponentWrapper>
|
|
772
|
+
<ComponentWrapper name="Skeleton" link="components-skeleton">
|
|
773
|
+
<Center flex={1}>
|
|
774
|
+
<Flex direction="row" spacing="sm">
|
|
775
|
+
<Skeleton width={30} height={30} />
|
|
776
|
+
<Flex spacing="sm">
|
|
777
|
+
<Skeleton width={120} height={15} />
|
|
778
|
+
<Skeleton width={100} height={15} />
|
|
779
|
+
</Flex>
|
|
760
780
|
</Flex>
|
|
761
|
-
</
|
|
762
|
-
</
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
</
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
</
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
</
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
</
|
|
799
|
-
</
|
|
800
|
-
</
|
|
801
|
-
</
|
|
802
|
-
</
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
</
|
|
821
|
-
</
|
|
822
|
-
</
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
</
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
</
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
</
|
|
844
|
-
</
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
781
|
+
</Center>
|
|
782
|
+
</ComponentWrapper>
|
|
783
|
+
<ComponentWrapper name="Spinner" link="components-spinner">
|
|
784
|
+
<Center flex={1}>
|
|
785
|
+
<Spinner size="lg" />
|
|
786
|
+
</Center>
|
|
787
|
+
</ComponentWrapper>
|
|
788
|
+
<ComponentWrapper name="Switch" link="components-switch">
|
|
789
|
+
<Center flex={1}>
|
|
790
|
+
<Switch value={switchEnabled} onValueChange={toggleSwitch} />
|
|
791
|
+
</Center>
|
|
792
|
+
</ComponentWrapper>
|
|
793
|
+
<ComponentWrapper name="Table" link="components-table">
|
|
794
|
+
<Center flex={1} px="300">
|
|
795
|
+
<Box style={{ width: 360 }}>
|
|
796
|
+
<Table container="subtle">
|
|
797
|
+
<TableHeader color="purple">
|
|
798
|
+
<TableHeaderCell
|
|
799
|
+
trailingContent={<Icon as={ExpandSmallIcon} color="#fcfbf2" />}
|
|
800
|
+
>
|
|
801
|
+
Name
|
|
802
|
+
</TableHeaderCell>
|
|
803
|
+
<TableHeaderCell
|
|
804
|
+
trailingContent={<Icon as={ExpandSmallIcon} color="#fcfbf2" />}
|
|
805
|
+
>
|
|
806
|
+
Plan
|
|
807
|
+
</TableHeaderCell>
|
|
808
|
+
</TableHeader>
|
|
809
|
+
<TableBody>
|
|
810
|
+
<TableRow>
|
|
811
|
+
<TableHeaderCell row>Alex Morgan</TableHeaderCell>
|
|
812
|
+
<TableCell>Full Fibre 900</TableCell>
|
|
813
|
+
</TableRow>
|
|
814
|
+
<TableRow>
|
|
815
|
+
<TableHeaderCell row>Priya Shah</TableHeaderCell>
|
|
816
|
+
<TableCell>Energy Saver</TableCell>
|
|
817
|
+
</TableRow>
|
|
818
|
+
</TableBody>
|
|
819
|
+
</Table>
|
|
820
|
+
</Box>
|
|
821
|
+
</Center>
|
|
822
|
+
</ComponentWrapper>
|
|
823
|
+
<ComponentWrapper name="Tabs" link="components-tabs">
|
|
824
|
+
<Center flex={1}>
|
|
825
|
+
<Tabs defaultValue="tab-1">
|
|
826
|
+
<TabsList>
|
|
827
|
+
<Tab value="tab-1">Tab 1</Tab>
|
|
828
|
+
<Tab value="tab-2">Tab 2</Tab>
|
|
829
|
+
<Tab value="tab-3">Tab 3</Tab>
|
|
830
|
+
</TabsList>
|
|
831
|
+
<TabPanel value="tab-1">
|
|
832
|
+
<BodyText>I'm the first tab's content</BodyText>
|
|
833
|
+
</TabPanel>
|
|
834
|
+
<TabPanel value="tab-2">
|
|
835
|
+
<BodyText>I'm the second tab's content</BodyText>
|
|
836
|
+
</TabPanel>
|
|
837
|
+
<TabPanel value="tab-3">
|
|
838
|
+
<BodyText>I'm the third tab's content</BodyText>
|
|
839
|
+
</TabPanel>
|
|
840
|
+
</Tabs>
|
|
841
|
+
</Center>
|
|
842
|
+
</ComponentWrapper>
|
|
843
|
+
<ComponentWrapper name="Textarea" link="forms-textarea">
|
|
844
|
+
<Center flex={1}>
|
|
845
|
+
<Textarea numberOfLines={3} placeholder="This is a textarea" />
|
|
846
|
+
</Center>
|
|
847
|
+
</ComponentWrapper>
|
|
848
|
+
<ComponentWrapper name="Themed Image" link="utility-components-themed-image">
|
|
849
|
+
<Center flex={1} p="300">
|
|
850
|
+
<ThemedImage
|
|
851
|
+
light={<SpotBillingLight width={160} height={160} />}
|
|
852
|
+
dark={<SpotBillingDark width={160} height={160} />}
|
|
853
|
+
/>
|
|
854
|
+
</Center>
|
|
855
|
+
</ComponentWrapper>
|
|
856
|
+
<ComponentWrapper name="Timeline" link="components-timeline">
|
|
857
|
+
<Center flex={1} px="300">
|
|
858
|
+
<Timeline variant="progress">
|
|
859
|
+
<TimelineItem label="Order placed" helperText="Received" state="complete" />
|
|
860
|
+
<TimelineItem label="Checking details" helperText="In progress" state="active" />
|
|
861
|
+
<TimelineItem label="Service live" helperText="Pending" state="incomplete" />
|
|
862
|
+
</Timeline>
|
|
863
|
+
</Center>
|
|
864
|
+
</ComponentWrapper>
|
|
865
|
+
<ComponentWrapper name="Time Picker" link="components-time-picker">
|
|
866
|
+
<Center flex={1}>
|
|
867
|
+
<Button onPress={handleTimePickerOpenPress}>Open Time Picker</Button>
|
|
868
|
+
<BottomSheetModalProvider>
|
|
869
|
+
<TimePicker
|
|
870
|
+
ref={timePickerRef}
|
|
871
|
+
date={selectedTime}
|
|
872
|
+
onChange={({ date }) => setSelectedTime(date)}
|
|
873
|
+
onCancel={() => setSelectedTime(undefined)}
|
|
874
|
+
/>
|
|
875
|
+
</BottomSheetModalProvider>
|
|
876
|
+
</Center>
|
|
877
|
+
</ComponentWrapper>
|
|
878
|
+
<ComponentWrapper name="Time Picker Input" link="forms-time-picker-input">
|
|
879
|
+
<Center flex={1} padding="200">
|
|
880
|
+
<BottomSheetModalProvider>
|
|
881
|
+
<TimePickerInput placeholder="HH:mm" />
|
|
882
|
+
</BottomSheetModalProvider>
|
|
883
|
+
</Center>
|
|
884
|
+
</ComponentWrapper>
|
|
885
|
+
<ComponentWrapper name="Toast" link="components-toast">
|
|
886
|
+
<Center flex={1} p="200">
|
|
887
|
+
<ToastItem
|
|
888
|
+
onClose={() => {}}
|
|
889
|
+
toast={{ id: 'tst', text: "I'm a toast", duration: 0 }}
|
|
855
890
|
/>
|
|
856
|
-
</
|
|
857
|
-
</
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
</Center>
|
|
873
|
-
</ComponentWrapper>
|
|
874
|
-
<ComponentWrapper name="Toggle Button Card" link="components-toggle-button-card">
|
|
875
|
-
<Center flex={1}>
|
|
876
|
-
<ToggleButtonCardGroup
|
|
877
|
-
aria-label="Select Tariff"
|
|
878
|
-
value={toggleButtonValue}
|
|
879
|
-
onChange={setToggleButtonValue}
|
|
880
|
-
nativeID="ToggleButtonCard-group"
|
|
881
|
-
>
|
|
882
|
-
<ToggleButtonCard value="1" label="Toggle me" gap="200">
|
|
883
|
-
<BodyText size="md">I'm a toggle button card</BodyText>
|
|
884
|
-
</ToggleButtonCard>
|
|
885
|
-
</ToggleButtonCardGroup>
|
|
886
|
-
</Center>
|
|
887
|
-
</ComponentWrapper>
|
|
891
|
+
</Center>
|
|
892
|
+
</ComponentWrapper>
|
|
893
|
+
<ComponentWrapper name="Toggle Button Card" link="components-toggle-button-card">
|
|
894
|
+
<Center flex={1}>
|
|
895
|
+
<ToggleButtonCardGroup
|
|
896
|
+
aria-label="Select Tariff"
|
|
897
|
+
value={toggleButtonValue}
|
|
898
|
+
onChange={setToggleButtonValue}
|
|
899
|
+
nativeID="ToggleButtonCard-group"
|
|
900
|
+
>
|
|
901
|
+
<ToggleButtonCard value="1" label="Toggle me" gap="200">
|
|
902
|
+
<BodyText size="md">I'm a toggle button card</BodyText>
|
|
903
|
+
</ToggleButtonCard>
|
|
904
|
+
</ToggleButtonCardGroup>
|
|
905
|
+
</Center>
|
|
906
|
+
</ComponentWrapper>
|
|
888
907
|
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
+
<ComponentWrapper name="Unordered List" link="utility-components-ul-ol-lists">
|
|
909
|
+
<Center flex={1}>
|
|
910
|
+
<UL>
|
|
911
|
+
<LI>
|
|
912
|
+
<BodyText>List Item 1</BodyText>
|
|
913
|
+
</LI>
|
|
914
|
+
<LI>
|
|
915
|
+
<BodyText>List Item 2</BodyText>
|
|
916
|
+
</LI>
|
|
917
|
+
</UL>
|
|
918
|
+
</Center>
|
|
919
|
+
</ComponentWrapper>
|
|
920
|
+
<ComponentWrapper name="Verification Input" link="forms-verificationinput">
|
|
921
|
+
<Center flex={1} padding="200">
|
|
922
|
+
<VerificationInput onChangeText={() => {}} />
|
|
923
|
+
</Center>
|
|
924
|
+
</ComponentWrapper>
|
|
925
|
+
</Flex>
|
|
926
|
+
</ScrollView>
|
|
927
|
+
</SafeAreaProvider>
|
|
908
928
|
</div>
|
|
909
929
|
);
|
|
910
930
|
};
|