-
Notifications
You must be signed in to change notification settings - Fork 512
/
Dummy.tsx
41 lines (36 loc) · 959 Bytes
/
Dummy.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
import React, {ReactNode} from 'react';
import styled from 'styled-components';
const DummyContainer = styled.div<{size: number; type: Type}>`
font-size: ${({size}) => size}px;
line-height: ${({size}) => size + 5}px;
color: ${({type}) => (type === 'primary' ? 'blue' : 'green')};
font-weight: 400;
`;
type Type = 'primary' | 'secondary';
type DummyProps = {
/**
* Defines the type of the Dummy component
*/
type?: Type;
/**
* Defines the size of the Dummy component, in pixels
*/
size?: number;
/**
* The handler called when clicking the component
*/
onClick?: () => void;
children?: ReactNode;
};
/**
* This is a nice Dummy component to bootstrap Storybook
*/
const Dummy = ({size = 12, type = 'primary', onClick, children}: DummyProps) => {
return (
<DummyContainer size={size} onClick={onClick} type={type}>
{children}
</DummyContainer>
);
};
export {Dummy};
export type {DummyProps, Type};