-
Notifications
You must be signed in to change notification settings - Fork 130
/
Statuses.tsx
81 lines (73 loc) · 2.19 KB
/
Statuses.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
/**
* Copyright 2019, SumUp Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import type { ReactNode } from 'react';
import { Unstyled } from '@storybook/addon-docs';
import LinkTo from '@storybook/addon-links/react';
import { css, ThemeProvider } from '@emotion/react';
import { light } from '@sumup/design-tokens';
import { Badge, BadgeProps, Body, cx, spacing } from '@sumup/circuit-ui';
type Variant =
| 'stable'
| 'under-review'
| 'experimental'
| 'legacy'
| 'deprecated';
interface StatusProps {
variant: Variant;
children?: ReactNode;
}
const descriptionStyles = css`
p {
display: inline;
}
`;
const variantMap: Record<
Variant,
{ variant: BadgeProps['variant']; label: string }
> = {
'stable': { variant: 'success', label: 'Stable' },
'experimental': { variant: 'promo', label: 'Experimental' },
'under-review': { variant: 'warning', label: 'Under Review' },
'legacy': { variant: 'warning', label: 'Legacy' },
'deprecated': { variant: 'danger', label: 'Deprecated' },
};
export default function Status({
variant: status = 'stable',
children,
...props
}: StatusProps) {
const { variant, label } = variantMap[status];
const kind = 'Introduction/Component-Lifecycle';
const name = 'Docs';
return (
<ThemeProvider theme={light}>
<Unstyled {...props}>
<LinkTo {...props} kind={kind} name={name}>
<Badge variant={variant}>{label}</Badge>
</LinkTo>
{children && (
<Body
size="two"
as="span"
css={cx(spacing({ left: 'byte' }), descriptionStyles)}
variant="subtle"
>
{children}
</Body>
)}
</Unstyled>
</ThemeProvider>
);
}