/
index.stories.tsx
47 lines (42 loc) · 1.28 KB
/
index.stories.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import * as React from 'react';
import type {StoryFn} from '@storybook/react';
import {Box} from '@twilio-paste/box';
import {CustomizationProvider} from '@twilio-paste/customization';
import {useTheme} from '@twilio-paste/theme';
import {DetailText} from '../src';
// eslint-disable-next-line import/no-default-export
export default {
title: 'Components/Detail Text',
component: DetailText,
};
export const Default: StoryFn = () => (
<Box>
<Box height="size10" width="size10" backgroundColor="colorBackgroundStrong" />
<DetailText>This is sample detail text.</DetailText>
</Box>
);
export const NoMargin: StoryFn = () => (
<Box>
<Box height="size10" width="size10" backgroundColor="colorBackgroundStrong" />
<DetailText marginTop="space0">This is sample detail text with no margin.</DetailText>
</Box>
);
export const Customized: StoryFn = () => {
const theme = useTheme();
return (
<CustomizationProvider
theme={theme}
elements={{
DETAIL_TEXT: {
color: 'colorTextNew',
marginTop: 'space60',
},
}}
>
<Box>
<Box height="size10" width="size10" backgroundColor="colorBackgroundStrong" />
<DetailText>This is customized detail text.</DetailText>
</Box>
</CustomizationProvider>
);
};