@widergy/mobile-ui 1.14.5 → 1.14.6

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.
Files changed (5) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/lib/components/UTSelectableCard/index.js +41 -48
  3. package/lib/components/UTSelectableCard/styles.js +6 -1
  4. package/lib/components/UTWorkflowContainer/versions/V1/components/BottomActions/styles.js +1 -1
  5. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ ## [1.14.6](https://github.com/widergy/mobile-ui/compare/v1.14.5...v1.14.6) (2024-07-26)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * utselectablecard image icon and standarization ([#322](https://github.com/widergy/mobile-ui/issues/322)) ([9ad22ac](https://github.com/widergy/mobile-ui/commit/9ad22acdcdd4263e74469cb4a7ce645161b7f6d5))
7
+
1
8
  ## [1.14.5](https://github.com/widergy/mobile-ui/compare/v1.14.4...v1.14.5) (2024-07-26)
2
9
 
3
10
 
package/lib/components/UTSelectableCard/index.js CHANGED
@@ -1,17 +1,17 @@
1
1
  import React from 'react';
2
- import { bool, func, shape, string } from 'prop-types';
3
- import { View } from 'react-native';
2
+ import { bool, func, number, shape, string } from 'prop-types';
3
+ import { Image, View } from 'react-native';
4
4
  import merge from 'lodash/merge';
5
5
  import { isEmpty } from 'lodash';
6
6
 
7
7
  import Touchable from '../Touchable';
8
8
  import Surface from '../Surface';
9
9
  import UTTooltip from '../UTTooltip';
10
- import Label from '../Label';
11
10
  import { useTheme } from '../../theming';
12
- import Icon from '../Icon';
11
+ import UTIcon from '../UTIcon';
12
+ import UTLabel from '../UTLabel';
13
13
 
14
- import { getUTSelectableCardStyles, ICON_SIZE } from './styles';
14
+ import { getColorTheme, getUTSelectableCardStyles, ICON_SIZE } from './styles';
15
15
 
16
16
  const UTSelectableCard = ({
17
17
  additionalInfo = {},
@@ -19,7 +19,7 @@ const UTSelectableCard = ({
19
19
  checkIcon = true,
20
20
  description,
21
21
  disabled = false,
22
- icon,
22
+ Icon,
23
23
  onPress,
24
24
  selected = false,
25
25
  size = 'medium',
@@ -34,8 +34,7 @@ const UTSelectableCard = ({
34
34
  theme?.UTSelectableCard,
35
35
  style
36
36
  );
37
-
38
- const { selectedColor = 'royalblue', disabledColor = 'gray', baseColor = 'black' } = themedStyles;
37
+ const colorTheme = getColorTheme(selected, disabled);
39
38
 
40
39
  return (
41
40
  <Surface style={themedStyles.outerContainer}>
@@ -50,72 +49,66 @@ const UTSelectableCard = ({
50
49
  ]}
51
50
  >
52
51
  <View style={themedStyles.container}>
53
- {!isEmpty(icon) && (
54
- <Icon
55
- color={selected ? selectedColor : disabled ? disabledColor : baseColor}
56
- height={ICON_SIZE}
57
- name={icon.name}
58
- size={ICON_SIZE}
59
- style={themedStyles.icon}
60
- type={icon.type}
61
- width={ICON_SIZE}
62
- />
63
- )}
52
+ {!isEmpty(Icon) &&
53
+ (Icon.url ? (
54
+ <Image
55
+ source={{ uri: Icon.url }}
56
+ width={Icon.size || ICON_SIZE}
57
+ height={Icon.size || ICON_SIZE}
58
+ style={[themedStyles.image, themedStyles.icon]}
59
+ />
60
+ ) : (
61
+ <UTIcon
62
+ name={Icon.name}
63
+ colorTheme={colorTheme}
64
+ shade={Icon.shade}
65
+ size={Icon.size || ICON_SIZE}
66
+ style={themedStyles.icon}
67
+ />
68
+ ))}
64
69
  <View style={themedStyles.textContainer}>
65
70
  <View style={themedStyles.column}>
66
71
  <View style={[themedStyles.titleAndTooltip, selected && themedStyles.selectedTitleAndTooltip]}>
67
- <Label
68
- color={selected ? selectedColor : disabled ? disabledColor : baseColor}
72
+ <UTLabel
73
+ colorTheme={colorTheme}
74
+ weight="medium"
75
+ variant="subtitle1"
69
76
  style={tooltip && themedStyles.titleMargin}
70
77
  >
71
78
  {titleText}
72
- </Label>
79
+ </UTLabel>
73
80
  {tooltip && (
74
- <UTTooltip content={<Label>{tooltip}</Label>} position="top">
75
- <Icon
76
- color={selected ? selectedColor : disabled ? disabledColor : baseColor}
77
- name="help-outline"
78
- />
81
+ <UTTooltip content={<UTLabel>{tooltip}</UTLabel>} position="top">
82
+ <UTIcon colorTheme={colorTheme} name="IconHelp" />
79
83
  </UTTooltip>
80
84
  )}
81
85
  </View>
82
86
  {description && (
83
- <Label
84
- color={selected ? selectedColor : disabled ? disabledColor : baseColor}
85
- medium
86
- style={themedStyles.description}
87
- >
87
+ <UTLabel colorTheme={selected ? 'accent' : 'gray'} style={themedStyles.description}>
88
88
  {description}
89
- </Label>
89
+ </UTLabel>
90
90
  )}
91
91
  </View>
92
92
  {!isEmpty(additionalInfo) && (
93
93
  <View style={themedStyles.column}>
94
94
  {!!additionalInfo.title && (
95
- <Label
96
- bold
97
- color={selected ? selectedColor : disabled ? disabledColor : baseColor}
98
- medium
99
- right
100
- >
95
+ <UTLabel colorTheme={colorTheme} style={themedStyles.additionalInfo}>
101
96
  {additionalInfo.title}
102
- </Label>
97
+ </UTLabel>
103
98
  )}
104
99
  {!!additionalInfo.description && (
105
- <Label
106
- color={selected ? selectedColor : disabled ? disabledColor : baseColor}
107
- medium
108
- right
109
- style={themedStyles.description}
100
+ <UTLabel
101
+ colorTheme={colorTheme}
102
+ style={[themedStyles.description, themedStyles.additionalInfo]}
110
103
  >
111
104
  {additionalInfo.description}
112
- </Label>
105
+ </UTLabel>
113
106
  )}
114
107
  </View>
115
108
  )}
116
109
  </View>
117
110
  {checkIcon && selected && (
118
- <Icon color={selectedColor} name="check" style={themedStyles.checkIcon} />
111
+ <UTIcon colorTheme="accent" name="IconCheck" style={themedStyles.checkIcon} />
119
112
  )}
120
113
  </View>
121
114
  </Touchable>
@@ -129,7 +122,7 @@ UTSelectableCard.propTypes = {
129
122
  checkIcon: bool,
130
123
  description: string,
131
124
  disabled: bool,
132
- icon: shape({ name: string, type: string }),
125
+ Icon: shape({ name: string, shade: string, size: number }),
133
126
  onPress: func,
134
127
  selected: bool,
135
128
  size: string,
package/lib/components/UTSelectableCard/styles.js CHANGED
@@ -1,9 +1,12 @@
1
1
  import { StyleSheet } from 'react-native';
2
2
 
3
- export const ICON_SIZE = 36;
3
+ export const ICON_SIZE = 40;
4
4
 
5
5
  export const getUTSelectableCardStyles = (theme = {}) =>
6
6
  StyleSheet.create({
7
+ additionalInfo: {
8
+ textAlign: 'right'
9
+ },
7
10
  checkIcon: {
8
11
  marginLeft: 16
9
12
  },
@@ -82,3 +85,5 @@ export const getUTSelectableCardStyles = (theme = {}) =>
82
85
  borderWidth: 2
83
86
  }
84
87
  });
88
+
89
+ export const getColorTheme = (selected, disabled) => (selected ? 'accent' : disabled ? 'gray' : 'dark');
package/lib/components/UTWorkflowContainer/versions/V1/components/BottomActions/styles.js CHANGED
@@ -13,7 +13,7 @@ export default StyleSheet.create({
13
13
  width: '100%'
14
14
  },
15
15
  bottomSafeArea: safeArea => ({
16
- paddingBottom: safeArea + 16
16
+ paddingBottom: safeArea
17
17
  }),
18
18
  bottomNav: {
19
19
  backgroundColor: 'white'
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.14.5",
5
+ "version": "1.14.6",
6
6
  "repository": "https://github.com/widergy/mobile-ui.git",
7
7
  "main": "lib/index.js",
8
8
  "files": [