@planningcenter/chat-react-native 1.6.2-rc.1 → 1.6.2-rc.3
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/build/components/display/badge.d.ts +58 -0
- package/build/components/display/badge.d.ts.map +1 -0
- package/build/components/display/badge.js +186 -0
- package/build/components/display/badge.js.map +1 -0
- package/build/components/display/button_color_utils.d.ts +1 -1
- package/build/components/display/index.d.ts +2 -0
- package/build/components/display/index.d.ts.map +1 -1
- package/build/components/display/index.js +2 -0
- package/build/components/display/index.js.map +1 -1
- package/build/components/display/switch.d.ts +4 -0
- package/build/components/display/switch.d.ts.map +1 -0
- package/build/components/display/switch.js +14 -0
- package/build/components/display/switch.js.map +1 -0
- package/build/screens/design_system_screen.d.ts.map +1 -1
- package/build/screens/design_system_screen.js +408 -332
- package/build/screens/design_system_screen.js.map +1 -1
- package/build/utils/theme.d.ts +19 -0
- package/build/utils/theme.d.ts.map +1 -1
- package/build/utils/theme.js +37 -0
- package/build/utils/theme.js.map +1 -1
- package/build/vendor/tapestry/tokens.d.ts +30 -0
- package/build/vendor/tapestry/tokens.d.ts.map +1 -1
- package/build/vendor/tapestry/tokens.js +30 -0
- package/build/vendor/tapestry/tokens.js.map +1 -1
- package/package.json +2 -2
- package/src/components/display/badge.tsx +323 -0
- package/src/components/display/index.ts +2 -0
- package/src/components/display/switch.tsx +23 -0
- package/src/screens/design_system_screen.tsx +714 -571
- package/src/utils/theme.ts +56 -0
- package/src/vendor/tapestry/tokens.ts +30 -0
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ViewStyle } from 'react-native';
|
|
3
|
+
declare const APPEARANCES: {
|
|
4
|
+
readonly error: "error";
|
|
5
|
+
readonly info: "info";
|
|
6
|
+
readonly neutral: "neutral";
|
|
7
|
+
readonly success: "success";
|
|
8
|
+
readonly warning: "warning";
|
|
9
|
+
};
|
|
10
|
+
type AppearanceUnion = (typeof APPEARANCES)[keyof typeof APPEARANCES];
|
|
11
|
+
declare const VARIANTS: {
|
|
12
|
+
readonly default: "default";
|
|
13
|
+
readonly meta: "meta";
|
|
14
|
+
readonly metaSubtle: "metaSubtle";
|
|
15
|
+
};
|
|
16
|
+
type VariantUnion = (typeof VARIANTS)[keyof typeof VARIANTS];
|
|
17
|
+
declare const LOGO_NAMES: {
|
|
18
|
+
readonly groups: "groups";
|
|
19
|
+
readonly services: "services";
|
|
20
|
+
};
|
|
21
|
+
type PoductLogoNameUnion = (typeof LOGO_NAMES)[keyof typeof LOGO_NAMES];
|
|
22
|
+
interface BadgeProps {
|
|
23
|
+
/**
|
|
24
|
+
* Renders the main text.
|
|
25
|
+
*/
|
|
26
|
+
label: string;
|
|
27
|
+
/**
|
|
28
|
+
* Renders secondary meta text to the right of the label.
|
|
29
|
+
*/
|
|
30
|
+
metaLabel?: string;
|
|
31
|
+
/**
|
|
32
|
+
* Changes the status color for the badge and icon.
|
|
33
|
+
*/
|
|
34
|
+
appearance?: AppearanceUnion;
|
|
35
|
+
/**
|
|
36
|
+
* Changes form of the logo to support a meta label and badge
|
|
37
|
+
*/
|
|
38
|
+
variant?: VariantUnion;
|
|
39
|
+
/**
|
|
40
|
+
* Adds a product logo to the left of the text.
|
|
41
|
+
*/
|
|
42
|
+
productLogoName?: PoductLogoNameUnion;
|
|
43
|
+
/**
|
|
44
|
+
* Shows an icon of the user choice to the left of the text.
|
|
45
|
+
*/
|
|
46
|
+
iconName?: string;
|
|
47
|
+
/**
|
|
48
|
+
* Styles badge wrapper.
|
|
49
|
+
*/
|
|
50
|
+
style?: ViewStyle;
|
|
51
|
+
/**
|
|
52
|
+
* Specifies the maximum size a font can reach when allowFontScaling is enabled.
|
|
53
|
+
*/
|
|
54
|
+
maxFontSizeMultiplier?: number;
|
|
55
|
+
}
|
|
56
|
+
export declare function Badge({ appearance, metaLabel, style, iconName, label, productLogoName, variant, maxFontSizeMultiplier, }: BadgeProps): React.JSX.Element;
|
|
57
|
+
export {};
|
|
58
|
+
//# sourceMappingURL=badge.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/display/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,SAAS,EAAa,MAAM,cAAc,CAAA;AAYxD,QAAA,MAAM,WAAW;;;;;;CAMP,CAAA;AAEV,KAAK,eAAe,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAA;AAWrE,QAAA,MAAM,QAAQ;;;;CAIJ,CAAA;AAEV,KAAK,YAAY,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAA;AAiB5D,QAAA,MAAM,UAAU;;;CAGN,CAAA;AAEV,KAAK,mBAAmB,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,OAAO,UAAU,CAAC,CAAA;AAWvE,UAAU,UAAU;IAClB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,eAAe,CAAA;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB;;OAEG;IACH,eAAe,CAAC,EAAE,mBAAmB,CAAA;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;CAC/B;AAED,wBAAgB,KAAK,CAAC,EACpB,UAAsB,EACtB,SAAS,EACT,KAAK,EACL,QAAQ,EACR,KAAK,EACL,eAAe,EACf,OAAmB,EACnB,qBAAqB,GACtB,EAAE,UAAU,qBA4BZ"}
|
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { StyleSheet, View } from 'react-native';
|
|
3
|
+
import Svg, { Path, Defs, LinearGradient, Stop } from 'react-native-svg';
|
|
4
|
+
import { useFontScale, useTheme } from '../../hooks';
|
|
5
|
+
import { Icon } from './icon';
|
|
6
|
+
import { Text } from './text';
|
|
7
|
+
import { platformFontWeightMedium, space } from '../../utils';
|
|
8
|
+
import { tokens } from '../../vendor/tapestry/tokens';
|
|
9
|
+
// =================================
|
|
10
|
+
// ====== Constants ================
|
|
11
|
+
// =================================
|
|
12
|
+
const APPEARANCES = {
|
|
13
|
+
error: 'error',
|
|
14
|
+
info: 'info',
|
|
15
|
+
neutral: 'neutral',
|
|
16
|
+
success: 'success',
|
|
17
|
+
warning: 'warning',
|
|
18
|
+
};
|
|
19
|
+
const VARIANTS = {
|
|
20
|
+
default: 'default',
|
|
21
|
+
meta: 'meta',
|
|
22
|
+
metaSubtle: 'metaSubtle',
|
|
23
|
+
};
|
|
24
|
+
const LOGO_NAMES = {
|
|
25
|
+
groups: 'groups',
|
|
26
|
+
services: 'services',
|
|
27
|
+
};
|
|
28
|
+
const PRODUCT_LOGO_COMPONENT_MAP = {
|
|
29
|
+
groups: GroupsLogo,
|
|
30
|
+
services: ServicesIcon,
|
|
31
|
+
};
|
|
32
|
+
export function Badge({ appearance = 'neutral', metaLabel, style, iconName, label, productLogoName, variant = 'default', maxFontSizeMultiplier, }) {
|
|
33
|
+
const styles = useStyles({ appearance, maxFontSizeMultiplier, variant });
|
|
34
|
+
const { showBadgeLogo } = useTheme();
|
|
35
|
+
const isMetaSubtle = variant === 'metaSubtle';
|
|
36
|
+
const isMeta = variant === 'meta';
|
|
37
|
+
const hasMetaLabel = Boolean(metaLabel);
|
|
38
|
+
const showLogo = showBadgeLogo && productLogoName && isMeta;
|
|
39
|
+
const ProductLogoSvg = showLogo && PRODUCT_LOGO_COMPONENT_MAP[productLogoName];
|
|
40
|
+
const badgeLabel = isMetaSubtle && hasMetaLabel ? `${label}:` : label;
|
|
41
|
+
return (<View style={[styles.badgeWrapper, style]}>
|
|
42
|
+
<View style={styles.badge}>
|
|
43
|
+
{showLogo && ProductLogoSvg && <ProductLogoSvg logoSize={styles.logo.fontSize}/>}
|
|
44
|
+
{iconName && <Icon name={iconName} style={styles.icon}/>}
|
|
45
|
+
<Text variant="footnote" style={styles.label}>
|
|
46
|
+
{badgeLabel}
|
|
47
|
+
</Text>
|
|
48
|
+
</View>
|
|
49
|
+
{hasMetaLabel && (<Text variant="footnote" style={styles.metaLabel} numberOfLines={1}>
|
|
50
|
+
{metaLabel}
|
|
51
|
+
</Text>)}
|
|
52
|
+
</View>);
|
|
53
|
+
}
|
|
54
|
+
// =================================
|
|
55
|
+
// ====== Styles ===================
|
|
56
|
+
// =================================
|
|
57
|
+
const useStyles = ({ appearance = 'neutral', maxFontSizeMultiplier, variant = 'default', }) => {
|
|
58
|
+
const { colors } = useTheme();
|
|
59
|
+
const fontScale = useFontScale({ maxFontSizeMultiplier });
|
|
60
|
+
const apparenceColorMap = {
|
|
61
|
+
error: {
|
|
62
|
+
background: colors.statusErrorBackground,
|
|
63
|
+
text: colors.statusErrorText,
|
|
64
|
+
icon: colors.statusErrorIcon,
|
|
65
|
+
},
|
|
66
|
+
info: {
|
|
67
|
+
background: colors.statusInfoBackground,
|
|
68
|
+
text: colors.statusInfoText,
|
|
69
|
+
icon: colors.statusInfoIcon,
|
|
70
|
+
},
|
|
71
|
+
neutral: {
|
|
72
|
+
background: colors.statusNeutralBackground,
|
|
73
|
+
text: colors.statusNeutralText,
|
|
74
|
+
icon: colors.statusNeutralIcon,
|
|
75
|
+
},
|
|
76
|
+
success: {
|
|
77
|
+
background: colors.statusSuccessBackground,
|
|
78
|
+
text: colors.statusSuccessText,
|
|
79
|
+
icon: colors.statusSuccessIcon,
|
|
80
|
+
},
|
|
81
|
+
warning: {
|
|
82
|
+
background: colors.statusWarningBackground,
|
|
83
|
+
text: colors.statusWarningText,
|
|
84
|
+
icon: colors.statusWarningIcon,
|
|
85
|
+
},
|
|
86
|
+
};
|
|
87
|
+
const badgePaddingHorizontal = space(1) * fontScale;
|
|
88
|
+
const badgePaddingVertical = space(0.5) * fontScale;
|
|
89
|
+
const badgeGap = space(0.5) * fontScale;
|
|
90
|
+
const badgeFontSize = 12;
|
|
91
|
+
const variantStylesMap = {
|
|
92
|
+
default: {
|
|
93
|
+
gap: badgeGap,
|
|
94
|
+
backgroundColor: apparenceColorMap[appearance].background,
|
|
95
|
+
metaLabelPaddingLeft: badgePaddingHorizontal,
|
|
96
|
+
paddingHorizontal: badgePaddingHorizontal,
|
|
97
|
+
paddingVertical: badgePaddingVertical,
|
|
98
|
+
borderWidth: tokens.borderSizeDefault * fontScale,
|
|
99
|
+
borderRadius: tokens.borderRadiusMd,
|
|
100
|
+
textColor: apparenceColorMap[appearance].text,
|
|
101
|
+
fontWeight: 'normal',
|
|
102
|
+
},
|
|
103
|
+
meta: {
|
|
104
|
+
gap: badgeGap,
|
|
105
|
+
backgroundColor: apparenceColorMap[appearance].background,
|
|
106
|
+
metaLabelPaddingLeft: badgePaddingHorizontal,
|
|
107
|
+
paddingHorizontal: badgePaddingHorizontal,
|
|
108
|
+
paddingVertical: badgePaddingVertical,
|
|
109
|
+
borderWidth: tokens.borderSizeDefault * fontScale,
|
|
110
|
+
borderRadius: tokens.borderRadiusMd,
|
|
111
|
+
textColor: apparenceColorMap[appearance].text,
|
|
112
|
+
fontWeight: platformFontWeightMedium,
|
|
113
|
+
},
|
|
114
|
+
metaSubtle: {
|
|
115
|
+
gap: badgeGap,
|
|
116
|
+
backgroundColor: 'transparent',
|
|
117
|
+
metaLabelPaddingLeft: badgeGap,
|
|
118
|
+
paddingHorizontal: 0,
|
|
119
|
+
paddingVertical: 0,
|
|
120
|
+
borderWidth: 0,
|
|
121
|
+
borderRadius: 0,
|
|
122
|
+
textColor: colors.textColorDefaultSecondary,
|
|
123
|
+
fontWeight: platformFontWeightMedium,
|
|
124
|
+
},
|
|
125
|
+
};
|
|
126
|
+
return StyleSheet.create({
|
|
127
|
+
badgeWrapper: {
|
|
128
|
+
flexDirection: 'row',
|
|
129
|
+
alignItems: 'center',
|
|
130
|
+
justifyContent: 'center',
|
|
131
|
+
borderRadius: variantStylesMap[variant].borderRadius,
|
|
132
|
+
borderWidth: variantStylesMap[variant].borderWidth,
|
|
133
|
+
borderColor: apparenceColorMap[appearance].background,
|
|
134
|
+
},
|
|
135
|
+
badge: {
|
|
136
|
+
flexDirection: 'row',
|
|
137
|
+
alignItems: 'center',
|
|
138
|
+
gap: variantStylesMap[variant].gap,
|
|
139
|
+
paddingVertical: variantStylesMap[variant].paddingVertical,
|
|
140
|
+
paddingHorizontal: variantStylesMap[variant].paddingHorizontal,
|
|
141
|
+
backgroundColor: variantStylesMap[variant].backgroundColor,
|
|
142
|
+
borderRadius: variantStylesMap[variant].borderRadius - 2,
|
|
143
|
+
},
|
|
144
|
+
icon: {
|
|
145
|
+
color: apparenceColorMap[appearance].icon,
|
|
146
|
+
fontSize: badgeFontSize,
|
|
147
|
+
},
|
|
148
|
+
logo: {
|
|
149
|
+
fontSize: badgeFontSize * fontScale,
|
|
150
|
+
},
|
|
151
|
+
label: {
|
|
152
|
+
color: variantStylesMap[variant].textColor,
|
|
153
|
+
fontWeight: variantStylesMap[variant].fontWeight,
|
|
154
|
+
fontSize: badgeFontSize,
|
|
155
|
+
},
|
|
156
|
+
metaLabel: {
|
|
157
|
+
paddingHorizontal: variantStylesMap[variant].paddingHorizontal,
|
|
158
|
+
fontSize: badgeFontSize,
|
|
159
|
+
flexShrink: 1,
|
|
160
|
+
paddingLeft: variantStylesMap[variant].metaLabelPaddingLeft,
|
|
161
|
+
},
|
|
162
|
+
});
|
|
163
|
+
};
|
|
164
|
+
function GroupsLogo({ logoSize }) {
|
|
165
|
+
return (<Svg width={logoSize} height={logoSize} viewBox="0 0 16 16" fill="none">
|
|
166
|
+
<Path d="M9.06 6.14H6.94c-.152.36-.438.646-.797.798v2.12c.359.152.645.438.797.797h2.117c.152-.359.437-.645.796-.797V6.94a1.502 1.502 0 01-.793-.8zM8 0C1.6 0 0 1.595 0 8s1.6 8 8 8 8-1.595 8-8-1.595-8-8-8zm3.939 10.44a1.5 1.5 0 01-2.882.585H6.94a1.5 1.5 0 11-1.963-1.963v-2.12A1.501 1.501 0 116.94 4.98h2.12a1.5 1.5 0 111.963 1.968v2.11a1.501 1.501 0 01.916 1.383z" fill="url(#paint0_linear_2632_26363)"/>
|
|
167
|
+
<Defs>
|
|
168
|
+
<LinearGradient id="paint0_linear_2632_26363" x1={-5.6338} y1={5.6338} x2={5.6338} y2={16.9014} gradientUnits="userSpaceOnUse">
|
|
169
|
+
<Stop stopColor="#FF962D"/>
|
|
170
|
+
<Stop offset={1} stopColor="#FC7638"/>
|
|
171
|
+
</LinearGradient>
|
|
172
|
+
</Defs>
|
|
173
|
+
</Svg>);
|
|
174
|
+
}
|
|
175
|
+
function ServicesIcon({ logoSize }) {
|
|
176
|
+
return (<Svg width={logoSize} height={logoSize} viewBox="0 0 16 16" fill="none">
|
|
177
|
+
<Path fillRule="evenodd" clipRule="evenodd" d="M.116 8c0-6.4 1.6-8 8-8s8 1.6 8 8-1.6 8-8 8-8-1.6-8-8zm4.123 3.464a.848.848 0 10.943-1.41.848.848 0 00-.943 1.41zm.001-2.76a.848.848 0 10.948-1.408.848.848 0 00-.948 1.407zm0-2.759a.849.849 0 10.948-1.408.849.849 0 00-.948 1.408zm8.1 5.34a.388.388 0 00.03-.149v-.755a.39.39 0 00-.39-.39H6.87a.39.39 0 00-.39.39v.755a.39.39 0 00.39.39h5.11a.39.39 0 00.36-.24zm0-2.758a.388.388 0 00.03-.149v-.757a.387.387 0 00-.39-.388H6.87a.388.388 0 00-.39.388v.757a.388.388 0 00.39.388h5.11a.388.388 0 00.36-.24zm0-2.76a.388.388 0 00.03-.148v-.754a.39.39 0 00-.39-.389H6.87a.39.39 0 00-.39.387v.756a.39.39 0 00.39.39h5.11a.389.389 0 00.36-.241z" fill="url(#paint0_linear_2632_56586)"/>
|
|
178
|
+
<Defs>
|
|
179
|
+
<LinearGradient id="paint0_linear_2632_56586" x1={-5.51759} y1={5.6338} x2={5.75001} y2={16.9014} gradientUnits="userSpaceOnUse">
|
|
180
|
+
<Stop stopColor="#6BB23D"/>
|
|
181
|
+
<Stop offset={1} stopColor="#659630"/>
|
|
182
|
+
</LinearGradient>
|
|
183
|
+
</Defs>
|
|
184
|
+
</Svg>);
|
|
185
|
+
}
|
|
186
|
+
//# sourceMappingURL=badge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/display/badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport type { ViewStyle, TextStyle } from 'react-native'\nimport Svg, { Path, Defs, LinearGradient, Stop } from 'react-native-svg'\nimport { useFontScale, useTheme } from '../../hooks'\nimport { Icon } from './icon'\nimport { Text } from './text'\nimport { platformFontWeightMedium, space } from '../../utils'\nimport { tokens } from '../../vendor/tapestry/tokens'\n\n// =================================\n// ====== Constants ================\n// =================================\n\nconst APPEARANCES = {\n error: 'error',\n info: 'info',\n neutral: 'neutral',\n success: 'success',\n warning: 'warning',\n} as const\n\ntype AppearanceUnion = (typeof APPEARANCES)[keyof typeof APPEARANCES]\n\ntype AppearanceColors = Record<\n AppearanceUnion,\n {\n background: string\n text: string\n icon: string\n }\n>\n\nconst VARIANTS = {\n default: 'default',\n meta: 'meta',\n metaSubtle: 'metaSubtle',\n} as const\n\ntype VariantUnion = (typeof VARIANTS)[keyof typeof VARIANTS]\n\ntype VariantStyles = Record<\n VariantUnion,\n {\n backgroundColor: string\n paddingHorizontal: number\n paddingVertical: number\n borderWidth: number\n borderRadius: number\n textColor: string\n gap: number\n metaLabelPaddingLeft: number\n fontWeight: TextStyle['fontWeight']\n }\n>\n\nconst LOGO_NAMES = {\n groups: 'groups',\n services: 'services',\n} as const\n\ntype PoductLogoNameUnion = (typeof LOGO_NAMES)[keyof typeof LOGO_NAMES]\n\nconst PRODUCT_LOGO_COMPONENT_MAP = {\n groups: GroupsLogo,\n services: ServicesIcon,\n} as const\n\n// =================================\n// ====== Component ================\n// =================================\n\ninterface BadgeProps {\n /**\n * Renders the main text.\n */\n label: string\n /**\n * Renders secondary meta text to the right of the label.\n */\n metaLabel?: string\n /**\n * Changes the status color for the badge and icon.\n */\n appearance?: AppearanceUnion\n /**\n * Changes form of the logo to support a meta label and badge\n */\n variant?: VariantUnion\n /**\n * Adds a product logo to the left of the text.\n */\n productLogoName?: PoductLogoNameUnion\n /**\n * Shows an icon of the user choice to the left of the text.\n */\n iconName?: string\n /**\n * Styles badge wrapper.\n */\n style?: ViewStyle\n /**\n * Specifies the maximum size a font can reach when allowFontScaling is enabled.\n */\n maxFontSizeMultiplier?: number\n}\n\nexport function Badge({\n appearance = 'neutral',\n metaLabel,\n style,\n iconName,\n label,\n productLogoName,\n variant = 'default',\n maxFontSizeMultiplier,\n}: BadgeProps) {\n const styles = useStyles({ appearance, maxFontSizeMultiplier, variant })\n const { showBadgeLogo } = useTheme()\n\n const isMetaSubtle = variant === 'metaSubtle'\n const isMeta = variant === 'meta'\n const hasMetaLabel = Boolean(metaLabel)\n\n const showLogo = showBadgeLogo && productLogoName && isMeta\n const ProductLogoSvg = showLogo && PRODUCT_LOGO_COMPONENT_MAP[productLogoName]\n const badgeLabel = isMetaSubtle && hasMetaLabel ? `${label}:` : label\n\n return (\n <View style={[styles.badgeWrapper, style]}>\n <View style={styles.badge}>\n {showLogo && ProductLogoSvg && <ProductLogoSvg logoSize={styles.logo.fontSize} />}\n {iconName && <Icon name={iconName} style={styles.icon} />}\n <Text variant=\"footnote\" style={styles.label}>\n {badgeLabel}\n </Text>\n </View>\n {hasMetaLabel && (\n <Text variant=\"footnote\" style={styles.metaLabel} numberOfLines={1}>\n {metaLabel}\n </Text>\n )}\n </View>\n )\n}\n\n// =================================\n// ====== Styles ===================\n// =================================\n\nconst useStyles = ({\n appearance = 'neutral',\n maxFontSizeMultiplier,\n variant = 'default',\n}: Partial<BadgeProps>) => {\n const { colors } = useTheme()\n const fontScale = useFontScale({ maxFontSizeMultiplier })\n\n const apparenceColorMap: AppearanceColors = {\n error: {\n background: colors.statusErrorBackground,\n text: colors.statusErrorText,\n icon: colors.statusErrorIcon,\n },\n info: {\n background: colors.statusInfoBackground,\n text: colors.statusInfoText,\n icon: colors.statusInfoIcon,\n },\n neutral: {\n background: colors.statusNeutralBackground,\n text: colors.statusNeutralText,\n icon: colors.statusNeutralIcon,\n },\n success: {\n background: colors.statusSuccessBackground,\n text: colors.statusSuccessText,\n icon: colors.statusSuccessIcon,\n },\n warning: {\n background: colors.statusWarningBackground,\n text: colors.statusWarningText,\n icon: colors.statusWarningIcon,\n },\n }\n\n const badgePaddingHorizontal = space(1) * fontScale\n const badgePaddingVertical = space(0.5) * fontScale\n const badgeGap = space(0.5) * fontScale\n const badgeFontSize = 12\n\n const variantStylesMap: VariantStyles = {\n default: {\n gap: badgeGap,\n backgroundColor: apparenceColorMap[appearance].background,\n metaLabelPaddingLeft: badgePaddingHorizontal,\n paddingHorizontal: badgePaddingHorizontal,\n paddingVertical: badgePaddingVertical,\n borderWidth: tokens.borderSizeDefault * fontScale,\n borderRadius: tokens.borderRadiusMd,\n textColor: apparenceColorMap[appearance].text,\n fontWeight: 'normal',\n },\n meta: {\n gap: badgeGap,\n backgroundColor: apparenceColorMap[appearance].background,\n metaLabelPaddingLeft: badgePaddingHorizontal,\n paddingHorizontal: badgePaddingHorizontal,\n paddingVertical: badgePaddingVertical,\n borderWidth: tokens.borderSizeDefault * fontScale,\n borderRadius: tokens.borderRadiusMd,\n textColor: apparenceColorMap[appearance].text,\n fontWeight: platformFontWeightMedium,\n },\n metaSubtle: {\n gap: badgeGap,\n backgroundColor: 'transparent',\n metaLabelPaddingLeft: badgeGap,\n paddingHorizontal: 0,\n paddingVertical: 0,\n borderWidth: 0,\n borderRadius: 0,\n textColor: colors.textColorDefaultSecondary,\n fontWeight: platformFontWeightMedium,\n },\n }\n\n return StyleSheet.create({\n badgeWrapper: {\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n borderRadius: variantStylesMap[variant].borderRadius,\n borderWidth: variantStylesMap[variant].borderWidth,\n borderColor: apparenceColorMap[appearance].background,\n },\n badge: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: variantStylesMap[variant].gap,\n paddingVertical: variantStylesMap[variant].paddingVertical,\n paddingHorizontal: variantStylesMap[variant].paddingHorizontal,\n backgroundColor: variantStylesMap[variant].backgroundColor,\n borderRadius: variantStylesMap[variant].borderRadius - 2,\n },\n icon: {\n color: apparenceColorMap[appearance].icon,\n fontSize: badgeFontSize,\n },\n logo: {\n fontSize: badgeFontSize * fontScale,\n },\n label: {\n color: variantStylesMap[variant].textColor,\n fontWeight: variantStylesMap[variant].fontWeight,\n fontSize: badgeFontSize,\n },\n metaLabel: {\n paddingHorizontal: variantStylesMap[variant].paddingHorizontal,\n fontSize: badgeFontSize,\n flexShrink: 1,\n paddingLeft: variantStylesMap[variant].metaLabelPaddingLeft,\n },\n })\n}\n\n// =================================\n// ====== Product Logos ============\n// =================================\n\ninterface ProductLogoProps {\n logoSize: number\n}\n\nfunction GroupsLogo({ logoSize }: ProductLogoProps) {\n return (\n <Svg width={logoSize} height={logoSize} viewBox=\"0 0 16 16\" fill=\"none\">\n <Path\n d=\"M9.06 6.14H6.94c-.152.36-.438.646-.797.798v2.12c.359.152.645.438.797.797h2.117c.152-.359.437-.645.796-.797V6.94a1.502 1.502 0 01-.793-.8zM8 0C1.6 0 0 1.595 0 8s1.6 8 8 8 8-1.595 8-8-1.595-8-8-8zm3.939 10.44a1.5 1.5 0 01-2.882.585H6.94a1.5 1.5 0 11-1.963-1.963v-2.12A1.501 1.501 0 116.94 4.98h2.12a1.5 1.5 0 111.963 1.968v2.11a1.501 1.501 0 01.916 1.383z\"\n fill=\"url(#paint0_linear_2632_26363)\"\n />\n <Defs>\n <LinearGradient\n id=\"paint0_linear_2632_26363\"\n x1={-5.6338}\n y1={5.6338}\n x2={5.6338}\n y2={16.9014}\n gradientUnits=\"userSpaceOnUse\"\n >\n <Stop stopColor=\"#FF962D\" />\n <Stop offset={1} stopColor=\"#FC7638\" />\n </LinearGradient>\n </Defs>\n </Svg>\n )\n}\n\nfunction ServicesIcon({ logoSize }: ProductLogoProps) {\n return (\n <Svg width={logoSize} height={logoSize} viewBox=\"0 0 16 16\" fill=\"none\">\n <Path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M.116 8c0-6.4 1.6-8 8-8s8 1.6 8 8-1.6 8-8 8-8-1.6-8-8zm4.123 3.464a.848.848 0 10.943-1.41.848.848 0 00-.943 1.41zm.001-2.76a.848.848 0 10.948-1.408.848.848 0 00-.948 1.407zm0-2.759a.849.849 0 10.948-1.408.849.849 0 00-.948 1.408zm8.1 5.34a.388.388 0 00.03-.149v-.755a.39.39 0 00-.39-.39H6.87a.39.39 0 00-.39.39v.755a.39.39 0 00.39.39h5.11a.39.39 0 00.36-.24zm0-2.758a.388.388 0 00.03-.149v-.757a.387.387 0 00-.39-.388H6.87a.388.388 0 00-.39.388v.757a.388.388 0 00.39.388h5.11a.388.388 0 00.36-.24zm0-2.76a.388.388 0 00.03-.148v-.754a.39.39 0 00-.39-.389H6.87a.39.39 0 00-.39.387v.756a.39.39 0 00.39.39h5.11a.389.389 0 00.36-.241z\"\n fill=\"url(#paint0_linear_2632_56586)\"\n />\n <Defs>\n <LinearGradient\n id=\"paint0_linear_2632_56586\"\n x1={-5.51759}\n y1={5.6338}\n x2={5.75001}\n y2={16.9014}\n gradientUnits=\"userSpaceOnUse\"\n >\n <Stop stopColor=\"#6BB23D\" />\n <Stop offset={1} stopColor=\"#659630\" />\n </LinearGradient>\n </Defs>\n </Svg>\n )\n}\n"]}
|
|
@@ -35,5 +35,5 @@ interface GetColorKeyArgs {
|
|
|
35
35
|
loading?: boolean;
|
|
36
36
|
appearance: ButtonAppearanceUnion | IconButtonAppearanceUnion;
|
|
37
37
|
}
|
|
38
|
-
declare function getColorKey({ disabled, loading, appearance }: GetColorKeyArgs): "
|
|
38
|
+
declare function getColorKey({ disabled, loading, appearance }: GetColorKeyArgs): "neutral" | "danger" | "interaction" | "disabled";
|
|
39
39
|
//# sourceMappingURL=button_color_utils.d.ts.map
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
export * from './avatar';
|
|
2
2
|
export * from './avatar_group';
|
|
3
|
+
export * from './badge';
|
|
3
4
|
export * from './button';
|
|
4
5
|
export * from './heading';
|
|
5
6
|
export * from './icon';
|
|
6
7
|
export * from './icon_button';
|
|
7
8
|
export * from './image';
|
|
8
9
|
export * from './spinner';
|
|
10
|
+
export * from './switch';
|
|
9
11
|
export * from './text';
|
|
10
12
|
export * from './text_button';
|
|
11
13
|
export * from './text_inline_button';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA"}
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
export * from './avatar';
|
|
2
2
|
export * from './avatar_group';
|
|
3
|
+
export * from './badge';
|
|
3
4
|
export * from './button';
|
|
4
5
|
export * from './heading';
|
|
5
6
|
export * from './icon';
|
|
6
7
|
export * from './icon_button';
|
|
7
8
|
export * from './image';
|
|
8
9
|
export * from './spinner';
|
|
10
|
+
export * from './switch';
|
|
9
11
|
export * from './text';
|
|
10
12
|
export * from './text_button';
|
|
11
13
|
export * from './text_inline_button';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA","sourcesContent":["export * from './avatar'\nexport * from './avatar_group'\nexport * from './button'\nexport * from './heading'\nexport * from './icon'\nexport * from './icon_button'\nexport * from './image'\nexport * from './spinner'\nexport * from './text'\nexport * from './text_button'\nexport * from './text_inline_button'\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA","sourcesContent":["export * from './avatar'\nexport * from './avatar_group'\nexport * from './badge'\nexport * from './button'\nexport * from './heading'\nexport * from './icon'\nexport * from './icon_button'\nexport * from './image'\nexport * from './spinner'\nexport * from './switch'\nexport * from './text'\nexport * from './text_button'\nexport * from './text_inline_button'\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/components/display/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAO/C,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,qBAazD"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Switch as ReactNativeSwitch } from 'react-native';
|
|
3
|
+
import { useTheme } from '../../hooks';
|
|
4
|
+
// =================================
|
|
5
|
+
// ====== Component ================
|
|
6
|
+
// =================================
|
|
7
|
+
export function Switch({ disabled, ...props }) {
|
|
8
|
+
const { colors } = useTheme();
|
|
9
|
+
return (<ReactNativeSwitch {...props} trackColor={{
|
|
10
|
+
true: colors.switchTrackTrue,
|
|
11
|
+
false: colors.switchTrackFalse,
|
|
12
|
+
}} thumbColor={disabled ? undefined : colors.switchThumbColor}/>);
|
|
13
|
+
}
|
|
14
|
+
//# sourceMappingURL=switch.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/display/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAE1D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AAEpC,MAAM,UAAU,MAAM,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAe;IACxD,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,CACL,CAAC,iBAAiB,CAChB,IAAI,KAAK,CAAC,CACV,UAAU,CAAC,CAAC;YACV,IAAI,EAAE,MAAM,CAAC,eAAe;YAC5B,KAAK,EAAE,MAAM,CAAC,gBAAgB;SAC/B,CAAC,CACF,UAAU,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAC3D,CACH,CAAA;AACH,CAAC","sourcesContent":["import React from 'react'\nimport { Switch as ReactNativeSwitch } from 'react-native'\nimport type { SwitchProps } from 'react-native'\nimport { useTheme } from '../../hooks'\n\n// =================================\n// ====== Component ================\n// =================================\n\nexport function Switch({ disabled, ...props }: SwitchProps) {\n const { colors } = useTheme()\n\n return (\n <ReactNativeSwitch\n {...props}\n trackColor={{\n true: colors.switchTrackTrue,\n false: colors.switchTrackFalse,\n }}\n thumbColor={disabled ? undefined : colors.switchThumbColor}\n />\n )\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"design_system_screen.d.ts","sourceRoot":"","sources":["../../src/screens/design_system_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"design_system_screen.d.ts","sourceRoot":"","sources":["../../src/screens/design_system_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAuDvC,wBAAgB,kBAAkB,sBAgBjC"}
|