/
SideBar.tsx
93 lines (86 loc) · 3.13 KB
/
SideBar.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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import * as React from 'react';
import {ThemeVariants, useThemeContrastCheck} from '@twilio-paste/core/theme';
import {Box} from '@twilio-paste/core/box';
import {MediaBody, MediaFigure, MediaObject} from '@twilio-paste/core/media-object';
import {SuccessIcon} from '@twilio-paste/icons/cjs/SuccessIcon';
import {Heading} from '@twilio-paste/core/heading';
import {ErrorIcon} from '@twilio-paste/icons/cjs/ErrorIcon';
import {SelectedThemeContext} from '../App';
import {ThemeSelector} from './ThemeSelector';
import {TokenPairRating} from './TokenPairRating';
export const SideBar: React.FC = () => {
const {selectedTheme, setSelectedTheme} = React.useContext(SelectedThemeContext);
const {textContrastRating, uiControlContrastRating, totalFailures} = useThemeContrastCheck();
const themes = Object.keys(ThemeVariants) as [keyof typeof ThemeVariants];
return (
<>
<Box paddingX="space40">
<Box
paddingY="space40"
borderStyle="solid"
borderWidth="borderWidth0"
borderBottomWidth="borderWidth10"
borderBottomColor="colorBorderLight"
>
<ThemeSelector
value={selectedTheme}
themes={themes}
onChange={(e) => {
if (setSelectedTheme != null) {
setSelectedTheme(e.currentTarget.value);
}
}}
/>
</Box>
<MediaObject verticalAlign="center">
<MediaFigure spacing="space30">
{totalFailures > 0 ? (
<ErrorIcon decorative={false} color="colorTextError" title="Not passing contrast" />
) : (
<SuccessIcon decorative={false} color="colorTextSuccess" title="Passing contrast" />
)}
</MediaFigure>
<MediaBody>
<Box padding="space40" paddingY="space80" fontSize="fontSize60" fontWeight="fontWeightBold">
{totalFailures > 0 ? `${totalFailures} Failures` : 'Everything is passing'}
</Box>
</MediaBody>
</MediaObject>
</Box>
<Box paddingX="space40">
<Heading as="h2" variant="heading40">
Text contrast pairings
</Heading>
</Box>
{textContrastRating.map((rating) => {
return (
<TokenPairRating
key={`text-${rating.background}-${rating.foreground}`}
contrast={rating.contrast}
background={rating.background}
foreground={rating.foreground}
rating={rating.aa ? 'pass' : 'fail'}
variant="text"
/>
);
})}
<Box paddingX="space40" marginTop="space70">
<Heading as="h2" variant="heading40">
UI control contrast pairings
</Heading>
</Box>
{uiControlContrastRating.map((rating) => {
return (
<TokenPairRating
key={`control-${rating.background}-${rating.foreground}`}
contrast={rating.contrast}
background={rating.background}
foreground={rating.foreground}
rating={rating.aaLarge ? 'pass' : 'fail'}
variant="control"
/>
);
})}
</>
);
};