-
Notifications
You must be signed in to change notification settings - Fork 77
/
index.tsx
125 lines (118 loc) · 3.24 KB
/
index.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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import React from 'react';
import { mutuallyExclusiveTrueProps } from 'airbnb-prop-types';
import useStyles from '../../hooks/useStyles';
import { styleSheet } from './styles';
export type Props = {
/** Render the text inline instead of block. */
baseline?: boolean;
/** Apply bold emphasis. */
bold?: boolean;
/** Align the text to the center. */
centerAlign?: boolean;
/** The text to render. */
children?: React.ReactNode;
/** Mark the text as disabled. */
disabled?: boolean;
/** Align the text to the end. */
endAlign?: boolean;
/** Render the text inline-block instead of block. */
inline?: boolean;
/** Invert text colors. */
inverted?: boolean;
/** Increase font size to large. */
large?: boolean;
/** Apply light emphasis. */
light?: boolean;
/** Decrease font size to small. */
micro?: boolean;
/** Mark the text as muted. */
muted?: boolean;
/** Disable text and white space wrapping. */
noWrap?: boolean;
/** Preserve whitespace at the beginning and end of children. */
preserveWhitespace?: boolean;
/** Decrease font size to small. */
small?: boolean;
/** Align the text to the start. */
startAlign?: boolean;
/** Truncate the text with an ellipsis. */
truncated?: boolean;
/** Uppercase all text. */
uppercased?: boolean;
};
/** Display a string of text with pre-defined sizing, emphasis, and state styling. */
function Text({
baseline,
bold,
centerAlign,
children,
disabled,
endAlign,
inline,
inverted,
large,
light,
micro,
muted,
noWrap,
preserveWhitespace,
small,
startAlign,
truncated,
uppercased,
}: Props) {
const [styles, cx] = useStyles(styleSheet);
let Tag: 'div' | 'span' | 'small' | 'h4' = 'div';
if (inline) {
Tag = 'span';
} else if (micro) {
Tag = 'small';
} else if (large) {
Tag = 'h4';
}
return (
<Tag
className={cx(
styles.text,
bold && styles.text_bold,
disabled && styles.text_disabled,
inline && styles.text_inline,
baseline && styles.text_baseline,
inverted && styles.text_inverted,
large && styles.text_large,
light && styles.text_light,
micro && styles.text_micro,
muted && styles.text_muted,
preserveWhitespace && styles.text_preserveWhitespace,
small && styles.text_small,
truncated && styles.text_truncated,
uppercased && styles.text_uppercased,
micro && uppercased && styles.text_uppercased_micro,
centerAlign && styles.text_center,
endAlign && styles.text_end,
startAlign && styles.text_start,
noWrap && styles.text_noWrap,
)}
>
{children}
</Tag>
);
}
const sizingProp = mutuallyExclusiveTrueProps('micro', 'small', 'large');
const emphasisProp = mutuallyExclusiveTrueProps('bold', 'light');
const stateProp = mutuallyExclusiveTrueProps('disabled', 'muted', 'inverted');
const alignProp = mutuallyExclusiveTrueProps('centerAlign', 'endAlign', 'startAlign');
Text.propTypes = {
bold: emphasisProp,
centerAlign: alignProp,
disabled: stateProp,
endAlign: alignProp,
inverted: stateProp,
large: sizingProp,
light: emphasisProp,
micro: sizingProp,
muted: stateProp,
small: sizingProp,
startAlign: alignProp,
};
export default Text;