@cdek-it/react-native-ui-kit 0.6.7 → 0.6.9
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/dist/components/List/Base/ListBase.js +10 -4
- package/dist/components/MenuItem/Template/MenuItemTemplate.js +1 -1
- package/dist/components/Typography/Body.js +1 -1
- package/dist/components/Typography/Caption.js +3 -2
- package/dist/components/Typography/Subtitle.js +1 -1
- package/dist/components/Typography/Title.js +1 -1
- package/package.json +1 -1
|
@@ -19,7 +19,7 @@ export const ListBase = memo(({ iconAlignment = 'top', text: title, title: subti
|
|
|
19
19
|
const fullDivider = divider === 'full' ? styles.divider : {};
|
|
20
20
|
const contentDivider = divider === 'content' ? styles.divider : {};
|
|
21
21
|
const accessibilityLabel = useMemo(() => [subtitle, title].join(' '), [subtitle, title]);
|
|
22
|
-
return (<Pressable accessibilityLabel={accessibilityLabel} accessibilityRole='button' accessibilityValue={{ text: caption }} disabled={disabled} testID={testID ||
|
|
22
|
+
return (<Pressable accessibilityLabel={accessibilityLabel} accessibilityRole='button' accessibilityValue={{ text: caption }} disabled={disabled} testID={testID || ListBaseTestId.root} onPress={onPress} {...rest}>
|
|
23
23
|
{({ pressed }) => (<View style={[
|
|
24
24
|
style,
|
|
25
25
|
styles.container,
|
|
@@ -28,24 +28,30 @@ export const ListBase = memo(({ iconAlignment = 'top', text: title, title: subti
|
|
|
28
28
|
pressed && styles.pressed,
|
|
29
29
|
]} {...rest}>
|
|
30
30
|
{LeftIcon ? (<View style={leftIconStyle}>
|
|
31
|
-
<SvgUniversal source={LeftIcon} {...styles.icon} color={leftIconColor}/>
|
|
31
|
+
<SvgUniversal source={LeftIcon} testID={ListBaseTestId.leftIcon} {...styles.icon} color={leftIconColor}/>
|
|
32
32
|
</View>) : null}
|
|
33
33
|
<View style={[styles.content, contentDivider]}>
|
|
34
34
|
<View style={styles.labelContainer}>
|
|
35
35
|
{subtitle ? (<Subtitle color='primary'>{subtitle}</Subtitle>) : null}
|
|
36
36
|
<View style={styles.titleContainer}>
|
|
37
|
-
<Body>{title}</Body>
|
|
37
|
+
<Body testID={ListBaseTestId.title}>{title}</Body>
|
|
38
38
|
{caption ? (<Caption color='secondary'>{caption}</Caption>) : null}
|
|
39
39
|
</View>
|
|
40
40
|
</View>
|
|
41
41
|
<View style={styles.rightSection}>
|
|
42
42
|
{extra ? (<View style={styles.extraContainer}>{extra}</View>) : null}
|
|
43
|
-
{RightIcon ? (<SvgUniversal source={RightIcon} {...styles.icon} color={rightIconColor}/>) : null}
|
|
43
|
+
{RightIcon ? (<SvgUniversal source={RightIcon} testID={ListBaseTestId.rightIcon} {...styles.icon} color={rightIconColor}/>) : null}
|
|
44
44
|
</View>
|
|
45
45
|
</View>
|
|
46
46
|
</View>)}
|
|
47
47
|
</Pressable>);
|
|
48
48
|
});
|
|
49
|
+
const ListBaseTestId = {
|
|
50
|
+
root: 'ListBase',
|
|
51
|
+
leftIcon: 'LeftIcon',
|
|
52
|
+
rightIcon: 'RightIcon',
|
|
53
|
+
title: 'Title',
|
|
54
|
+
};
|
|
49
55
|
const useStyles = makeStyles(({ spacing, typography, theme, background }) => ({
|
|
50
56
|
container: {
|
|
51
57
|
flexDirection: 'row',
|
|
@@ -75,5 +75,5 @@ const useStyles = makeStyles(({ theme, spacing, typography, border }) => ({
|
|
|
75
75
|
height: typography.Size['text-xl'],
|
|
76
76
|
color: theme.Menu.Item.menuitemIconColor,
|
|
77
77
|
},
|
|
78
|
-
textContainer: { gap: spacing.Gap['gap-1'] },
|
|
78
|
+
textContainer: { gap: spacing.Gap['gap-1'], flex: 1 },
|
|
79
79
|
}));
|
|
@@ -10,7 +10,7 @@ export const Body = ({ base, color = 'default', disabled, paragraph, weight = 'r
|
|
|
10
10
|
paragraph && (base ? styles.paragraphBase : styles.paragraph),
|
|
11
11
|
disabled && styles.disabled,
|
|
12
12
|
style,
|
|
13
|
-
]} {...other}/>);
|
|
13
|
+
]} testID='Body' {...other}/>);
|
|
14
14
|
};
|
|
15
15
|
const useStyles = makeStyles(({ theme, typography, fonts }) => ({
|
|
16
16
|
text: {
|
|
@@ -9,15 +9,16 @@ export const Caption = ({ color = 'default', disabled, style, Icon, ...other })
|
|
|
9
9
|
disabled && styles.disabled,
|
|
10
10
|
Icon && styles.textWithIcon,
|
|
11
11
|
style,
|
|
12
|
-
]} {...other}/>);
|
|
12
|
+
]} testID={CaptionTestId.text} {...other}/>);
|
|
13
13
|
if (Icon) {
|
|
14
14
|
return (<View style={styles.withIconContainer}>
|
|
15
|
-
<SvgUniversal source={Icon} {...styles[color]} {...styles.icon}/>
|
|
15
|
+
<SvgUniversal source={Icon} testID={CaptionTestId.icon} {...styles[color]} {...styles.icon}/>
|
|
16
16
|
{text}
|
|
17
17
|
</View>);
|
|
18
18
|
}
|
|
19
19
|
return text;
|
|
20
20
|
};
|
|
21
|
+
const CaptionTestId = { text: 'CaptionText', icon: 'CaptionIcon' };
|
|
21
22
|
const useStyles = makeStyles(({ theme, spacing, typography, fonts }) => ({
|
|
22
23
|
text: {
|
|
23
24
|
fontSize: typography.Size['text-sm'],
|
|
@@ -7,7 +7,7 @@ import { makeStyles } from '../../utils/makeStyles';
|
|
|
7
7
|
*/
|
|
8
8
|
export const Subtitle = memo(({ base = false, color = 'default', style, ...other }) => {
|
|
9
9
|
const styles = useStyles();
|
|
10
|
-
return (<Text style={[styles.text, styles[color], base && styles.base, style]} {...other}/>);
|
|
10
|
+
return (<Text style={[styles.text, styles[color], base && styles.base, style]} testID='Subtitle' {...other}/>);
|
|
11
11
|
});
|
|
12
12
|
const useStyles = makeStyles(({ theme, typography, fonts }) => ({
|
|
13
13
|
text: {
|
|
@@ -2,7 +2,7 @@ import { Text } from 'react-native';
|
|
|
2
2
|
import { makeStyles } from '../../utils/makeStyles';
|
|
3
3
|
export const Title = ({ level, style, ...other }) => {
|
|
4
4
|
const styles = useStyles();
|
|
5
|
-
return <Text style={[styles.text, styles[level], style]} {...other}
|
|
5
|
+
return (<Text style={[styles.text, styles[level], style]} testID='Title' {...other}/>);
|
|
6
6
|
};
|
|
7
7
|
const useStyles = makeStyles(({ theme, typography, fonts }) => ({
|
|
8
8
|
text: {
|
package/package.json
CHANGED