@wireapp/react-ui-kit 8.5.3 → 8.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +33 -0
- package/package.json +2 -2
- package/src/Form/Button.d.ts +1 -0
- package/src/Form/Button.js +19 -4
- package/src/Form/Button.js.map +1 -1
- package/src/Form/Checkbox.js +55 -51
- package/src/Form/Checkbox.js.map +1 -1
- package/src/Form/Checkbox.md +1 -1
- package/src/Form/Input.d.ts +1 -0
- package/src/Form/Input.js +11 -6
- package/src/Form/Input.js.map +1 -1
- package/src/Form/InputLabel.js +9 -7
- package/src/Form/InputLabel.js.map +1 -1
- package/src/Form/Select.d.js +0 -4
- package/src/Form/Select.d.ts +8 -7
- package/src/Form/Select.js +83 -60
- package/src/Form/Select.js.map +1 -1
- package/src/Form/Select.md +11 -5
- package/src/Layout/StyledApp.d.js +4 -0
- package/src/Layout/StyledApp.d.ts +13 -10
- package/src/Layout/StyledApp.js +6 -5
- package/src/Layout/StyledApp.js.map +1 -1
- package/src/Layout/Theme.d.ts +18 -1
- package/src/Layout/Theme.js +41 -7
- package/src/Layout/Theme.js.map +1 -1
- package/src/Text/Text.js +1 -1
- package/src/Text/Text.js.map +1 -1
package/src/Layout/StyledApp.js
CHANGED
|
@@ -21,7 +21,7 @@ var _util = require("../util");
|
|
|
21
21
|
|
|
22
22
|
var _Theme = require("./Theme");
|
|
23
23
|
|
|
24
|
-
var _excluded = ["themeId", "children"];
|
|
24
|
+
var _excluded = ["themeId", "theme", "children"];
|
|
25
25
|
|
|
26
26
|
var styledAppContainerStyle = function styledAppContainerStyle(theme, _ref) {
|
|
27
27
|
var _ref$backgroundColor = _ref.backgroundColor,
|
|
@@ -32,8 +32,8 @@ var styledAppContainerStyle = function styledAppContainerStyle(theme, _ref) {
|
|
|
32
32
|
};
|
|
33
33
|
};
|
|
34
34
|
|
|
35
|
-
var
|
|
36
|
-
return (0, _util.filterProps)(props, ['backgroundColor', 'themeId']);
|
|
35
|
+
var filterStyledAppProps = function filterStyledAppProps(props) {
|
|
36
|
+
return (0, _util.filterProps)(props, ['backgroundColor', 'themeId', 'theme']);
|
|
37
37
|
};
|
|
38
38
|
|
|
39
39
|
var StyledAppContainer = function StyledAppContainer(props) {
|
|
@@ -41,16 +41,17 @@ var StyledAppContainer = function StyledAppContainer(props) {
|
|
|
41
41
|
css: function css(theme) {
|
|
42
42
|
return styledAppContainerStyle(theme, props);
|
|
43
43
|
}
|
|
44
|
-
},
|
|
44
|
+
}, filterStyledAppProps(props)));
|
|
45
45
|
};
|
|
46
46
|
|
|
47
47
|
var StyledApp = function StyledApp(_ref2) {
|
|
48
48
|
var _ref2$themeId = _ref2.themeId,
|
|
49
49
|
themeId = _ref2$themeId === void 0 ? _Theme.THEME_ID.LIGHT : _ref2$themeId,
|
|
50
|
+
theme = _ref2.theme,
|
|
50
51
|
children = _ref2.children,
|
|
51
52
|
props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
|
|
52
53
|
return (0, _react2.jsx)(_Theme.ThemeProvider, {
|
|
53
|
-
|
|
54
|
+
theme: theme ? theme : _Theme.themes[themeId]
|
|
54
55
|
}, (0, _react2.jsx)(StyledAppContainer, props, (0, _react2.jsx)(_GlobalStyle.GlobalStyle, null), children));
|
|
55
56
|
};
|
|
56
57
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["StyledApp.tsx"],"names":["styledAppContainerStyle","theme","backgroundColor","general","background","transition","
|
|
1
|
+
{"version":3,"sources":["StyledApp.tsx"],"names":["styledAppContainerStyle","theme","backgroundColor","general","background","transition","filterStyledAppProps","props","StyledAppContainer","StyledApp","themeId","THEME_ID","LIGHT","children","themes"],"mappings":";;;;;;;;;;;;;AAoBA;;AACA;;AAEA;;AACA;;AACA;;;;AAkBA,IAAMA,uBAGQ,GAAG,SAHXA,uBAGW,CAACC,KAAD;AAAA,kCAASC,eAAT;AAAA,MAASA,eAAT,qCAA2BD,KAAK,CAACE,OAAN,CAAcD,eAAzC;AAAA,SAA+D;AAC9EE,IAAAA,UAAU,EAAEF,eADkE;AAE9EG,IAAAA,UAAU,EAAE;AAFkE,GAA/D;AAAA,CAHjB;;AAQA,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,KAAD;AAAA,SAC3B,uBAAYA,KAAZ,EAAmB,CAAC,iBAAD,EAAoB,SAApB,EAA+B,OAA/B,CAAnB,CAD2B;AAAA,CAA7B;;AAGA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACD,KAAD;AAAA,SACzB;AAAK,IAAA,GAAG,EAAE,aAACN,KAAD;AAAA,aAAkBD,uBAAuB,CAACC,KAAD,EAAQM,KAAR,CAAzC;AAAA;AAAV,KAAuED,oBAAoB,CAACC,KAAD,CAA3F,EADyB;AAAA,CAA3B;;AAIO,IAAME,SAAmC,GAAG,SAAtCA,SAAsC;AAAA,4BAAEC,OAAF;AAAA,MAAEA,OAAF,8BAAYC,gBAASC,KAArB;AAAA,MAA4BX,KAA5B,SAA4BA,KAA5B;AAAA,MAAmCY,QAAnC,SAAmCA,QAAnC;AAAA,MAAgDN,KAAhD;AAAA,SACjD,iBAAC,oBAAD;AAAe,IAAA,KAAK,EAAEN,KAAK,GAAGA,KAAH,GAAWa,cAAOJ,OAAP;AAAtC,KACE,iBAAC,kBAAD,EAAwBH,KAAxB,EACE,iBAAC,wBAAD,OADF,EAEGM,QAFH,CADF,CADiD;AAAA,CAA5C","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport React from 'react';\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {GlobalStyle} from '../GlobalStyle';\nimport {filterProps} from '../util';\nimport {THEME_ID, Theme, ThemeProvider, themes} from './Theme';\n\ntype StyledAppContainerProps =\n | {\n themeId: THEME_ID;\n theme?: never;\n }\n | {\n theme: Theme;\n themeId?: never;\n };\n\ntype BackgroundColorProps = {\n backgroundColor?: string;\n};\n\nexport type StyledAppProps = React.HTMLProps<HTMLDivElement> & StyledAppContainerProps & BackgroundColorProps;\n\nconst styledAppContainerStyle: (\n theme: Theme,\n props: React.HTMLProps<HTMLDivElement> & BackgroundColorProps,\n) => CSSObject = (theme, {backgroundColor = theme.general.backgroundColor}) => ({\n background: backgroundColor,\n transition: 'background 0.15s',\n});\n\nconst filterStyledAppProps = (props: Partial<StyledAppProps>) =>\n filterProps(props, ['backgroundColor', 'themeId', 'theme']);\n\nconst StyledAppContainer = (props: React.HTMLProps<HTMLDivElement> & BackgroundColorProps) => (\n <div css={(theme: Theme) => styledAppContainerStyle(theme, props)} {...filterStyledAppProps(props)} />\n);\n\nexport const StyledApp: React.FC<StyledAppProps> = ({themeId = THEME_ID.LIGHT, theme, children, ...props}) => (\n <ThemeProvider theme={theme ? theme : themes[themeId]}>\n <StyledAppContainer {...props}>\n <GlobalStyle />\n {children}\n </StyledAppContainer>\n </ThemeProvider>\n);\n"],"file":"StyledApp.js"}
|
package/src/Layout/Theme.d.ts
CHANGED
|
@@ -9,17 +9,34 @@ export interface Theme {
|
|
|
9
9
|
general: {
|
|
10
10
|
backgroundColor: string;
|
|
11
11
|
color: string;
|
|
12
|
+
dangerColor?: string;
|
|
13
|
+
primaryColor?: string;
|
|
12
14
|
};
|
|
13
15
|
Input: {
|
|
14
16
|
backgroundColor: string;
|
|
15
17
|
backgroundColorDisabled: string;
|
|
16
18
|
placeholderColor: string;
|
|
19
|
+
labelColor: string;
|
|
20
|
+
};
|
|
21
|
+
select: {
|
|
22
|
+
disabledColor?: string;
|
|
23
|
+
contrastTextColor?: string;
|
|
24
|
+
borderColor?: string;
|
|
25
|
+
};
|
|
26
|
+
checkbox: {
|
|
27
|
+
background?: string;
|
|
28
|
+
border?: string;
|
|
29
|
+
borderFocused?: string;
|
|
30
|
+
disableBgColor?: string;
|
|
31
|
+
disableBorderColor?: string;
|
|
32
|
+
disablecheckedBgColor?: string;
|
|
33
|
+
invalidBorderColor?: string;
|
|
17
34
|
};
|
|
18
35
|
}
|
|
19
36
|
export declare const themes: {
|
|
20
37
|
[themeId in THEME_ID]: Theme;
|
|
21
38
|
};
|
|
22
39
|
export interface ThemeProps<T = HTMLDivElement> extends React.HTMLProps<T> {
|
|
23
|
-
|
|
40
|
+
theme?: Theme;
|
|
24
41
|
}
|
|
25
42
|
export declare const ThemeProvider: (props: ThemeProps) => jsx.JSX.Element;
|
package/src/Layout/Theme.js
CHANGED
|
@@ -35,32 +35,66 @@ var themes = (_themes = {}, (0, _defineProperty2["default"])(_themes, THEME_ID.L
|
|
|
35
35
|
Input: {
|
|
36
36
|
backgroundColor: _colors.COLOR.WHITE,
|
|
37
37
|
backgroundColorDisabled: _colorsV.COLOR_V2.GRAY_20,
|
|
38
|
-
placeholderColor: _colors.COLOR.GRAY_DARKEN_24
|
|
38
|
+
placeholderColor: _colors.COLOR.GRAY_DARKEN_24,
|
|
39
|
+
labelColor: _colorsV.COLOR_V2.GRAY_80
|
|
39
40
|
},
|
|
40
41
|
general: {
|
|
41
42
|
backgroundColor: _colors.COLOR.GRAY_LIGHTEN_88,
|
|
42
|
-
color: _colors.COLOR.TEXT
|
|
43
|
+
color: _colors.COLOR.TEXT,
|
|
44
|
+
primaryColor: _colorsV.COLOR_V2.BLUE,
|
|
45
|
+
dangerColor: _colorsV.COLOR_V2.RED
|
|
46
|
+
},
|
|
47
|
+
select: {
|
|
48
|
+
disabledColor: _colorsV.COLOR_V2.GRAY_70,
|
|
49
|
+
contrastTextColor: _colors.COLOR.WHITE,
|
|
50
|
+
borderColor: _colorsV.COLOR_V2.GRAY_40
|
|
51
|
+
},
|
|
52
|
+
checkbox: {
|
|
53
|
+
background: _colorsV.COLOR_V2.GRAY_20,
|
|
54
|
+
border: _colorsV.COLOR_V2.GRAY_20,
|
|
55
|
+
borderFocused: _colorsV.BASE_LIGHT_COLOR.BLUE,
|
|
56
|
+
disableBgColor: _colorsV.COLOR_V2.GRAY_20,
|
|
57
|
+
disableBorderColor: _colorsV.COLOR_V2.GRAY_60,
|
|
58
|
+
disablecheckedBgColor: _colorsV.COLOR_V2.GRAY_20,
|
|
59
|
+
invalidBorderColor: _colorsV.BASE_LIGHT_COLOR.RED
|
|
43
60
|
}
|
|
44
61
|
}), (0, _defineProperty2["default"])(_themes, THEME_ID.DARK, {
|
|
45
62
|
Input: {
|
|
46
63
|
backgroundColor: _colors.COLOR.BLACK_LIGHTEN_24,
|
|
47
|
-
backgroundColorDisabled: _colors.COLOR.
|
|
48
|
-
placeholderColor: _colors.COLOR.GRAY_LIGHTEN_88
|
|
64
|
+
backgroundColorDisabled: _colors.COLOR.GRAY_100,
|
|
65
|
+
placeholderColor: _colors.COLOR.GRAY_LIGHTEN_88,
|
|
66
|
+
labelColor: _colorsV.COLOR_V2.GRAY_40
|
|
49
67
|
},
|
|
50
68
|
general: {
|
|
51
69
|
backgroundColor: _colors.COLOR.BLACK,
|
|
52
|
-
color: _colors.COLOR.WHITE
|
|
70
|
+
color: _colors.COLOR.WHITE,
|
|
71
|
+
primaryColor: _colorsV.COLOR_V2.BLUE,
|
|
72
|
+
dangerColor: _colorsV.COLOR_V2.RED
|
|
73
|
+
},
|
|
74
|
+
select: {
|
|
75
|
+
disabledColor: _colorsV.COLOR_V2.GRAY_60,
|
|
76
|
+
contrastTextColor: _colors.COLOR.BLACK,
|
|
77
|
+
borderColor: _colorsV.COLOR_V2.GRAY_90
|
|
78
|
+
},
|
|
79
|
+
checkbox: {
|
|
80
|
+
background: _colorsV.COLOR_V2.GRAY_20,
|
|
81
|
+
border: _colorsV.COLOR_V2.GRAY_80,
|
|
82
|
+
borderFocused: _colorsV.BASE_DARK_COLOR.BLUE,
|
|
83
|
+
disableBgColor: _colorsV.COLOR_V2.GRAY_10,
|
|
84
|
+
disableBorderColor: _colorsV.COLOR_V2.GRAY_70,
|
|
85
|
+
disablecheckedBgColor: _colorsV.COLOR_V2.GRAY_60,
|
|
86
|
+
invalidBorderColor: _colorsV.BASE_DARK_COLOR.RED
|
|
53
87
|
}
|
|
54
88
|
}), _themes);
|
|
55
89
|
exports.themes = themes;
|
|
56
90
|
|
|
57
91
|
var filterThemeProps = function filterThemeProps(props) {
|
|
58
|
-
return (0, _util.filterProps)(props, ['
|
|
92
|
+
return (0, _util.filterProps)(props, ['theme']);
|
|
59
93
|
};
|
|
60
94
|
|
|
61
95
|
var ThemeProvider = function ThemeProvider(props) {
|
|
62
96
|
return (0, _react.jsx)(_react.ThemeProvider, (0, _extends2["default"])({
|
|
63
|
-
theme:
|
|
97
|
+
theme: props.theme
|
|
64
98
|
}, filterThemeProps(props)));
|
|
65
99
|
};
|
|
66
100
|
|
package/src/Layout/Theme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Theme.tsx"],"names":["THEME_ID","themes","LIGHT","Input","backgroundColor","COLOR","WHITE","backgroundColorDisabled","COLOR_V2","GRAY_20","placeholderColor","GRAY_DARKEN_24","general","GRAY_LIGHTEN_88","color","TEXT","DARK","BLACK_LIGHTEN_24","
|
|
1
|
+
{"version":3,"sources":["Theme.tsx"],"names":["THEME_ID","themes","LIGHT","Input","backgroundColor","COLOR","WHITE","backgroundColorDisabled","COLOR_V2","GRAY_20","placeholderColor","GRAY_DARKEN_24","labelColor","GRAY_80","general","GRAY_LIGHTEN_88","color","TEXT","primaryColor","BLUE","dangerColor","RED","select","disabledColor","GRAY_70","contrastTextColor","borderColor","GRAY_40","checkbox","background","border","borderFocused","BASE_LIGHT_COLOR","disableBgColor","disableBorderColor","GRAY_60","disablecheckedBgColor","invalidBorderColor","DARK","BLACK_LIGHTEN_24","GRAY_100","BLACK","GRAY_90","BASE_DARK_COLOR","GRAY_10","filterThemeProps","props","ThemeProvider","theme"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2019 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {jsx, ThemeProvider as EmotionThemeProvider} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR} from '../Identity/colors';\nimport {COLOR_V2, BASE_DARK_COLOR, BASE_LIGHT_COLOR} from '../Identity/colors-v2';\nimport {filterProps} from '../util';\n\nexport enum THEME_ID {\n DARK = 'THEME_DARK',\n LIGHT = 'THEME_LIGHT',\n}\n\nexport interface Theme {\n general: {\n backgroundColor: string;\n color: string;\n dangerColor?: string;\n primaryColor?: string;\n };\n Input: {\n backgroundColor: string;\n backgroundColorDisabled: string;\n placeholderColor: string;\n labelColor: string;\n };\n select: {\n disabledColor?: string;\n contrastTextColor?: string;\n borderColor?: string;\n };\n checkbox: {\n background?: string;\n border?: string;\n borderFocused?: string;\n disableBgColor?: string;\n disableBorderColor?: string;\n disablecheckedBgColor?: string;\n invalidBorderColor?: string;\n };\n}\n\nexport const themes: {[themeId in THEME_ID]: Theme} = {\n [THEME_ID.LIGHT]: {\n Input: {\n backgroundColor: COLOR.WHITE,\n backgroundColorDisabled: COLOR_V2.GRAY_20,\n placeholderColor: COLOR.GRAY_DARKEN_24,\n labelColor: COLOR_V2.GRAY_80,\n },\n general: {\n backgroundColor: COLOR.GRAY_LIGHTEN_88,\n color: COLOR.TEXT,\n primaryColor: COLOR_V2.BLUE,\n dangerColor: COLOR_V2.RED,\n },\n select: {\n disabledColor: COLOR_V2.GRAY_70,\n contrastTextColor: COLOR.WHITE,\n borderColor: COLOR_V2.GRAY_40,\n },\n checkbox: {\n background: COLOR_V2.GRAY_20,\n border: COLOR_V2.GRAY_20,\n borderFocused: BASE_LIGHT_COLOR.BLUE,\n disableBgColor: COLOR_V2.GRAY_20,\n disableBorderColor: COLOR_V2.GRAY_60,\n disablecheckedBgColor: COLOR_V2.GRAY_20,\n invalidBorderColor: BASE_LIGHT_COLOR.RED,\n },\n },\n [THEME_ID.DARK]: {\n Input: {\n backgroundColor: COLOR.BLACK_LIGHTEN_24,\n backgroundColorDisabled: COLOR.GRAY_100,\n placeholderColor: COLOR.GRAY_LIGHTEN_88,\n labelColor: COLOR_V2.GRAY_40,\n },\n general: {\n backgroundColor: COLOR.BLACK,\n color: COLOR.WHITE,\n primaryColor: COLOR_V2.BLUE,\n dangerColor: COLOR_V2.RED,\n },\n select: {\n disabledColor: COLOR_V2.GRAY_60,\n contrastTextColor: COLOR.BLACK,\n borderColor: COLOR_V2.GRAY_90,\n },\n checkbox: {\n background: COLOR_V2.GRAY_20,\n border: COLOR_V2.GRAY_80,\n borderFocused: BASE_DARK_COLOR.BLUE,\n disableBgColor: COLOR_V2.GRAY_10,\n disableBorderColor: COLOR_V2.GRAY_70,\n disablecheckedBgColor: COLOR_V2.GRAY_60,\n invalidBorderColor: BASE_DARK_COLOR.RED,\n },\n },\n};\n\nexport interface ThemeProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n theme?: Theme;\n}\n\nconst filterThemeProps = (props: ThemeProps) => filterProps(props, ['theme']);\n\nexport const ThemeProvider = (props: ThemeProps) => (\n <EmotionThemeProvider theme={props.theme} {...filterThemeProps(props)} />\n);\n"],"file":"Theme.js"}
|
package/src/Text/Text.js
CHANGED
|
@@ -65,7 +65,7 @@ var textStyle = function textStyle(theme, _ref) {
|
|
|
65
65
|
_ref$truncate = _ref.truncate,
|
|
66
66
|
truncate = _ref$truncate === void 0 ? false : _ref$truncate;
|
|
67
67
|
return {
|
|
68
|
-
color: muted ? _Identity.COLOR.GRAY : color,
|
|
68
|
+
color: muted ? _Identity.COLOR.GRAY : theme.general.color,
|
|
69
69
|
display: block ? 'block' : 'inline',
|
|
70
70
|
fontSize: fontSize,
|
|
71
71
|
fontWeight: bold ? 600 : light ? 200 : 300,
|
package/src/Text/Text.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Text.tsx"],"names":["filterTextProps","props","textStyle","theme","block","bold","center","color","general","fontSize","light","muted","noWrap","textTransform","truncate","COLOR","GRAY","display","fontWeight","overflow","undefined","textAlign","textOverflow","whiteSpace","Text","React","forwardRef","ref","Bold","Small","Muted","Uppercase","Large"],"mappings":";;;;;;;;;;;AAoBA;;AACA;;AAIA;;AACA;;AA1BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAsBO,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,KAAD,EAAsB;AACnD,SAAO,uBAAYA,KAAZ,EAAmB,CACxB,OADwB,EAExB,MAFwB,EAGxB,QAHwB,EAIxB,OAJwB,EAKxB,UALwB,EAMxB,OANwB,EAOxB,OAPwB,EAQxB,QARwB,EASxB,eATwB,EAUxB,UAVwB,CAAnB,CAAP;AAYD,CAbM;;;;AAeA,IAAMC,SAA8D,GAAG,SAAjEA,SAAiE,CAC5EC,KAD4E;AAAA,wBAG1EC,KAH0E;AAAA,MAG1EA,KAH0E,2BAGlE,KAHkE;AAAA,uBAI1EC,IAJ0E;AAAA,MAI1EA,IAJ0E,0BAInE,KAJmE;AAAA,yBAK1EC,MAL0E;AAAA,MAK1EA,MAL0E,4BAKjE,KALiE;AAAA,wBAM1EC,KAN0E;AAAA,MAM1EA,KAN0E,2BAMlEJ,KAAK,CAACK,OAAN,CAAcD,KANoD;AAAA,2BAO1EE,QAP0E;AAAA,MAO1EA,QAP0E,8BAO/D,MAP+D;AAAA,wBAQ1EC,KAR0E;AAAA,MAQ1EA,KAR0E,2BAQlE,KARkE;AAAA,wBAS1EC,KAT0E;AAAA,MAS1EA,KAT0E,2BASlE,KATkE;AAAA,yBAU1EC,MAV0E;AAAA,MAU1EA,MAV0E,4BAUjE,KAViE;AAAA,gCAW1EC,aAX0E;AAAA,MAW1EA,aAX0E,mCAW1D,MAX0D;AAAA,2BAY1EC,QAZ0E;AAAA,MAY1EA,QAZ0E,8BAY/D,KAZ+D;AAAA,SAcxE;AACJP,IAAAA,KAAK,EAAEI,KAAK,GAAGI,gBAAMC,IAAT,
|
|
1
|
+
{"version":3,"sources":["Text.tsx"],"names":["filterTextProps","props","textStyle","theme","block","bold","center","color","general","fontSize","light","muted","noWrap","textTransform","truncate","COLOR","GRAY","display","fontWeight","overflow","undefined","textAlign","textOverflow","whiteSpace","Text","React","forwardRef","ref","Bold","Small","Muted","Uppercase","Large"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport React from 'react';\nimport type {Property} from 'csstype';\n\nimport type {Theme} from '../Layout';\nimport {filterProps} from '../util';\nimport {COLOR} from '../Identity';\n\nexport interface TextProps<T = HTMLSpanElement> extends React.PropsWithRef<React.HTMLProps<T>> {\n block?: boolean;\n bold?: boolean;\n center?: boolean;\n color?: string;\n fontSize?: string;\n light?: boolean;\n muted?: boolean;\n noWrap?: boolean;\n textTransform?: Property.TextTransform;\n truncate?: boolean;\n}\n\nexport const filterTextProps = (props: TextProps) => {\n return filterProps(props, [\n 'block',\n 'bold',\n 'center',\n 'color',\n 'fontSize',\n 'light',\n 'muted',\n 'noWrap',\n 'textTransform',\n 'truncate',\n ]);\n};\n\nexport const textStyle: <T>(theme: Theme, props: TextProps<T>) => CSSObject = (\n theme,\n {\n block = false,\n bold = false,\n center = false,\n color = theme.general.color,\n fontSize = '16px',\n light = false,\n muted = false,\n noWrap = false,\n textTransform = 'none',\n truncate = false,\n },\n) => ({\n color: muted ? COLOR.GRAY : theme.general.color,\n display: block ? 'block' : 'inline',\n fontSize: fontSize,\n fontWeight: bold ? 600 : light ? 200 : 300,\n overflow: truncate ? 'hidden' : undefined,\n textAlign: center ? 'center' : 'left',\n textOverflow: truncate ? 'ellipsis' : undefined,\n textTransform: textTransform,\n whiteSpace: noWrap ? 'nowrap' : undefined,\n});\n\nexport const Text = React.forwardRef<HTMLSpanElement, TextProps<HTMLSpanElement>>((props, ref) => (\n <span ref={ref} css={(theme: Theme) => textStyle(theme, props)} {...filterTextProps(props)} />\n));\n\nexport const Bold = React.forwardRef<HTMLSpanElement, TextProps<HTMLSpanElement>>((props, ref) => (\n <Text ref={ref} bold {...props} />\n));\nexport const Small = React.forwardRef<HTMLSpanElement, TextProps<HTMLSpanElement>>((props, ref) => (\n <Text ref={ref} fontSize={'12px'} {...props} />\n));\nexport const Muted = React.forwardRef<HTMLSpanElement, TextProps<HTMLSpanElement>>((props, ref) => (\n <Text ref={ref} muted {...props} />\n));\nexport const Uppercase = React.forwardRef<HTMLSpanElement, TextProps<HTMLSpanElement>>((props, ref) => (\n <Text ref={ref} textTransform={'uppercase'} {...props} />\n));\nexport const Large = React.forwardRef<HTMLSpanElement, TextProps<HTMLSpanElement>>((props, ref) => (\n <Text ref={ref} fontSize={'48px'} light {...props} />\n));\n"],"file":"Text.js"}
|