@widergy/mobile-ui 1.2.1 → 1.3.1
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 +14 -0
- package/lib/components/UTHeader/index.js +3 -3
- package/lib/components/UTSelectableCard/index.js +136 -0
- package/lib/components/UTSelectableCard/styles.js +80 -0
- package/lib/components/UTWorkflowContainer/versions/V1/components/BottomActions/components/ActionButton/index.js +3 -1
- package/lib/components/UTWorkflowContainer/versions/V1/components/BottomActions/components/ActionButton/styles.js +0 -3
- package/lib/index.js +1 -0
- package/package.json +2 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
## [1.3.1](https://github.com/widergy/mobile-ui/compare/v1.3.0...v1.3.1) (2024-03-13)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* action button styles ([#267](https://github.com/widergy/mobile-ui/issues/267)) ([133048b](https://github.com/widergy/mobile-ui/commit/133048b8f8adeeef25eb86179a4588d8ed048d37))
|
|
7
|
+
|
|
8
|
+
# [1.3.0](https://github.com/widergy/mobile-ui/compare/v1.2.1...v1.3.0) (2024-03-11)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
* added UTSelectableCard ([#265](https://github.com/widergy/mobile-ui/issues/265)) ([5510bd9](https://github.com/widergy/mobile-ui/commit/5510bd917c691bf6febbbede46b3896008f2a1b8))
|
|
14
|
+
|
|
1
15
|
## [1.2.1](https://github.com/widergy/mobile-ui/compare/v1.2.0...v1.2.1) (2024-03-08)
|
|
2
16
|
|
|
3
17
|
|
|
@@ -7,7 +7,7 @@ import UTBanner from '../UTBanner';
|
|
|
7
7
|
|
|
8
8
|
import ownStyles from './styles';
|
|
9
9
|
|
|
10
|
-
const
|
|
10
|
+
const UTHeader = ({ tagline, title, subtitle, requiredFieldInfo, helpText, useMarkdown, banner }) => {
|
|
11
11
|
return (
|
|
12
12
|
<View style={ownStyles.header}>
|
|
13
13
|
{tagline && (
|
|
@@ -40,7 +40,7 @@ const Header = ({ tagline, title, subtitle, requiredFieldInfo, helpText, useMark
|
|
|
40
40
|
);
|
|
41
41
|
};
|
|
42
42
|
|
|
43
|
-
|
|
43
|
+
UTHeader.propTypes = {
|
|
44
44
|
banner: shape({
|
|
45
45
|
icon: shape({ name: string, type: string }),
|
|
46
46
|
text: string
|
|
@@ -53,4 +53,4 @@ Header.propTypes = {
|
|
|
53
53
|
useMarkdown: bool
|
|
54
54
|
};
|
|
55
55
|
|
|
56
|
-
export default
|
|
56
|
+
export default UTHeader;
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { bool, func, shape, string } from 'prop-types';
|
|
3
|
+
import { View } from 'react-native';
|
|
4
|
+
import merge from 'lodash/merge';
|
|
5
|
+
import { isEmpty } from 'lodash';
|
|
6
|
+
|
|
7
|
+
import Touchable from '../Touchable';
|
|
8
|
+
import UTTooltip from '../UTTooltip';
|
|
9
|
+
import Label from '../Label';
|
|
10
|
+
import { useTheme } from '../../theming';
|
|
11
|
+
import Icon from '../Icon';
|
|
12
|
+
|
|
13
|
+
import { getUTSelectableCardStyles, ICON_SIZE } from './styles';
|
|
14
|
+
|
|
15
|
+
const UTSelectableCard = ({
|
|
16
|
+
additionalInfo = {},
|
|
17
|
+
appearance = 'white',
|
|
18
|
+
checkIcon = true,
|
|
19
|
+
description,
|
|
20
|
+
disabled = false,
|
|
21
|
+
icon,
|
|
22
|
+
onPress,
|
|
23
|
+
selected = false,
|
|
24
|
+
size = 'medium',
|
|
25
|
+
style,
|
|
26
|
+
titleText,
|
|
27
|
+
tooltip
|
|
28
|
+
}) => {
|
|
29
|
+
const theme = useTheme();
|
|
30
|
+
const themedStyles = merge(
|
|
31
|
+
{},
|
|
32
|
+
getUTSelectableCardStyles(theme?.UTSelectableCard),
|
|
33
|
+
theme?.UTSelectableCard,
|
|
34
|
+
style
|
|
35
|
+
);
|
|
36
|
+
|
|
37
|
+
const { selectedColor = 'royalblue', disabledColor = 'gray', baseColor = 'black' } = themedStyles;
|
|
38
|
+
|
|
39
|
+
return (
|
|
40
|
+
<Touchable
|
|
41
|
+
disabled={disabled}
|
|
42
|
+
onPress={() => onPress?.()}
|
|
43
|
+
style={[
|
|
44
|
+
themedStyles.outerContainer,
|
|
45
|
+
themedStyles[`${appearance}Appearance`],
|
|
46
|
+
selected && themedStyles[`${appearance}SelectedContainer`],
|
|
47
|
+
disabled && themedStyles[`${appearance}DisabledContainer`],
|
|
48
|
+
themedStyles[`${size}Size`]
|
|
49
|
+
]}
|
|
50
|
+
>
|
|
51
|
+
<View style={themedStyles.container}>
|
|
52
|
+
{!isEmpty(icon) && (
|
|
53
|
+
<Icon
|
|
54
|
+
name={icon.name}
|
|
55
|
+
type={icon.type}
|
|
56
|
+
size={ICON_SIZE}
|
|
57
|
+
width={ICON_SIZE}
|
|
58
|
+
height={ICON_SIZE}
|
|
59
|
+
color={selected ? selectedColor : disabled ? disabledColor : baseColor}
|
|
60
|
+
style={themedStyles.icon}
|
|
61
|
+
/>
|
|
62
|
+
)}
|
|
63
|
+
<View style={themedStyles.textContainer}>
|
|
64
|
+
<View style={themedStyles.column}>
|
|
65
|
+
<View style={themedStyles.titleAndTooltip}>
|
|
66
|
+
<Label
|
|
67
|
+
color={selected ? selectedColor : disabled ? disabledColor : baseColor}
|
|
68
|
+
style={themedStyles.title}
|
|
69
|
+
>
|
|
70
|
+
{titleText}
|
|
71
|
+
</Label>
|
|
72
|
+
{tooltip && (
|
|
73
|
+
<UTTooltip position="top" content={<Label>{tooltip}</Label>}>
|
|
74
|
+
<Icon
|
|
75
|
+
name="help-outline"
|
|
76
|
+
color={selected ? selectedColor : disabled ? disabledColor : baseColor}
|
|
77
|
+
/>
|
|
78
|
+
</UTTooltip>
|
|
79
|
+
)}
|
|
80
|
+
</View>
|
|
81
|
+
{description && (
|
|
82
|
+
<Label
|
|
83
|
+
medium
|
|
84
|
+
style={themedStyles.description}
|
|
85
|
+
color={selected ? selectedColor : disabled ? disabledColor : baseColor}
|
|
86
|
+
>
|
|
87
|
+
{description}
|
|
88
|
+
</Label>
|
|
89
|
+
)}
|
|
90
|
+
</View>
|
|
91
|
+
{!isEmpty(additionalInfo) && (
|
|
92
|
+
<View style={themedStyles.column}>
|
|
93
|
+
{!!additionalInfo.title && (
|
|
94
|
+
<Label
|
|
95
|
+
right
|
|
96
|
+
medium
|
|
97
|
+
bold
|
|
98
|
+
color={selected ? selectedColor : disabled ? disabledColor : baseColor}
|
|
99
|
+
>
|
|
100
|
+
{additionalInfo.title}
|
|
101
|
+
</Label>
|
|
102
|
+
)}
|
|
103
|
+
{!!additionalInfo.description && (
|
|
104
|
+
<Label
|
|
105
|
+
right
|
|
106
|
+
medium
|
|
107
|
+
style={themedStyles.description}
|
|
108
|
+
color={selected ? selectedColor : disabled ? disabledColor : baseColor}
|
|
109
|
+
>
|
|
110
|
+
{additionalInfo.description}
|
|
111
|
+
</Label>
|
|
112
|
+
)}
|
|
113
|
+
</View>
|
|
114
|
+
)}
|
|
115
|
+
</View>
|
|
116
|
+
{checkIcon && selected && <Icon name="check" color={selectedColor} style={themedStyles.checkIcon} />}
|
|
117
|
+
</View>
|
|
118
|
+
</Touchable>
|
|
119
|
+
);
|
|
120
|
+
};
|
|
121
|
+
|
|
122
|
+
UTSelectableCard.propTypes = {
|
|
123
|
+
additionalInfo: shape({ description: string, title: string }),
|
|
124
|
+
appearance: string,
|
|
125
|
+
checkIcon: bool,
|
|
126
|
+
description: string,
|
|
127
|
+
disabled: bool,
|
|
128
|
+
icon: shape({ name: string, type: string }),
|
|
129
|
+
onPress: func,
|
|
130
|
+
selected: bool,
|
|
131
|
+
size: string,
|
|
132
|
+
titleText: string,
|
|
133
|
+
tooltip: string
|
|
134
|
+
};
|
|
135
|
+
|
|
136
|
+
export default UTSelectableCard;
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { StyleSheet } from 'react-native';
|
|
2
|
+
|
|
3
|
+
export const ICON_SIZE = 36;
|
|
4
|
+
|
|
5
|
+
export const getUTSelectableCardStyles = (theme = {}) =>
|
|
6
|
+
StyleSheet.create({
|
|
7
|
+
checkIcon: {
|
|
8
|
+
marginLeft: 16
|
|
9
|
+
},
|
|
10
|
+
column: {
|
|
11
|
+
alignSelf: 'center'
|
|
12
|
+
},
|
|
13
|
+
container: {
|
|
14
|
+
alignItems: 'center',
|
|
15
|
+
display: 'flex',
|
|
16
|
+
flexDirection: 'row'
|
|
17
|
+
},
|
|
18
|
+
description: {
|
|
19
|
+
marginTop: 4
|
|
20
|
+
},
|
|
21
|
+
icon: {
|
|
22
|
+
marginRight: 16
|
|
23
|
+
},
|
|
24
|
+
outerContainer: {
|
|
25
|
+
borderRadius: 4
|
|
26
|
+
},
|
|
27
|
+
textContainer: {
|
|
28
|
+
display: 'flex',
|
|
29
|
+
flexDirection: 'row',
|
|
30
|
+
flexGrow: 1,
|
|
31
|
+
justifyContent: 'space-between'
|
|
32
|
+
},
|
|
33
|
+
title: {
|
|
34
|
+
marginRight: 8
|
|
35
|
+
},
|
|
36
|
+
titleAndTooltip: {
|
|
37
|
+
alignItems: 'center',
|
|
38
|
+
display: 'flex',
|
|
39
|
+
flexDirection: 'row'
|
|
40
|
+
},
|
|
41
|
+
|
|
42
|
+
// Sizes
|
|
43
|
+
mediumSize: {
|
|
44
|
+
padding: 24
|
|
45
|
+
},
|
|
46
|
+
smallSize: {
|
|
47
|
+
padding: 16
|
|
48
|
+
},
|
|
49
|
+
|
|
50
|
+
// White
|
|
51
|
+
whiteAppearance: {
|
|
52
|
+
backgroundColor: theme.whiteBackground || 'white',
|
|
53
|
+
elevation: 4
|
|
54
|
+
},
|
|
55
|
+
whiteDisabledContainer: {
|
|
56
|
+
backgroundColor: theme.whiteDisabledBackground || 'lightgray',
|
|
57
|
+
elevation: 0
|
|
58
|
+
},
|
|
59
|
+
whiteSelectedContainer: {
|
|
60
|
+
borderColor: theme.whiteSelectedBorder || 'royalblue',
|
|
61
|
+
borderWidth: 2,
|
|
62
|
+
elevation: 0
|
|
63
|
+
},
|
|
64
|
+
|
|
65
|
+
// Gray
|
|
66
|
+
grayAppearance: {
|
|
67
|
+
backgroundColor: theme.grayBackground || 'gainsboro',
|
|
68
|
+
borderColor: theme.grayBorder || 'gray',
|
|
69
|
+
borderWidth: 1
|
|
70
|
+
},
|
|
71
|
+
grayDisabledContainer: {
|
|
72
|
+
borderColor: theme.grayDisabledBorder || 'gray',
|
|
73
|
+
borderWidth: 2
|
|
74
|
+
},
|
|
75
|
+
graySelectedContainer: {
|
|
76
|
+
backgroundColor: theme.graySelectedBackground || 'aliceblue',
|
|
77
|
+
borderColor: theme.graySelectedBorder || 'royalblue',
|
|
78
|
+
borderWidth: 2
|
|
79
|
+
}
|
|
80
|
+
});
|
|
@@ -4,11 +4,13 @@ import { View } from 'react-native';
|
|
|
4
4
|
import _ from 'lodash';
|
|
5
5
|
|
|
6
6
|
import Button from '../../../../../../../Button';
|
|
7
|
+
import { useTheme } from '../../../../../../../../theming';
|
|
7
8
|
|
|
8
9
|
import ownStyles from './styles';
|
|
9
10
|
|
|
10
11
|
const ActionButton = ({ hidden, disabled, onPress, label, mode, style }) => {
|
|
11
|
-
const
|
|
12
|
+
const theme = useTheme();
|
|
13
|
+
const themedStyles = _.merge({}, ownStyles, theme?.UTWorkflowContainer?.actionButton, style);
|
|
12
14
|
|
|
13
15
|
return (
|
|
14
16
|
<View style={themedStyles.actionButton}>
|
package/lib/index.js
CHANGED
|
@@ -39,6 +39,7 @@ export { default as IconBadge } from './components/IconBadge';
|
|
|
39
39
|
export { default as UTDetailDrawer } from './components/UTDetailDrawer';
|
|
40
40
|
export { default as UTImage } from './components/UTImage';
|
|
41
41
|
export { default as UTWorkflowContainer } from './components/UTWorkflowContainer';
|
|
42
|
+
export { default as UTSelectableCard } from './components/UTSelectableCard';
|
|
42
43
|
export { default as UTProgressBar } from './components/UTProgressBar';
|
|
43
44
|
export { default as UTOnBoarding } from './components/UTOnBoarding';
|
|
44
45
|
export { default as UTRoundView } from './components/UTRoundView';
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@widergy/mobile-ui",
|
|
3
3
|
"description": "Widergy Mobile Components",
|
|
4
4
|
"author": "widergy",
|
|
5
|
-
"version": "1.
|
|
5
|
+
"version": "1.3.1",
|
|
6
6
|
"repository": "https://github.com/widergy/mobile-ui.git",
|
|
7
7
|
"main": "lib/index.js",
|
|
8
8
|
"files": [
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
"test": "jest",
|
|
18
18
|
"prepublish": "npm run build",
|
|
19
19
|
"android": "cd example && yarn android",
|
|
20
|
+
"android:clean": "cd example/android && ./gradlew clean",
|
|
20
21
|
"ios": "cd example && yarn ios",
|
|
21
22
|
"start": "cd example && yarn start",
|
|
22
23
|
"prepare": "husky install"
|