@widergy/mobile-ui 1.16.1 → 1.16.2

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 (10) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/lib/components/UTProductItem/components/AdditionalInfo/index.js +7 -3
  3. package/lib/components/UTProductItem/components/Amount/index.js +6 -2
  4. package/lib/components/UTProductItem/components/Discount/index.js +4 -4
  5. package/lib/components/UTProductItem/components/QuantitySelector/index.js +26 -26
  6. package/lib/components/UTProductItem/components/Title/index.js +3 -3
  7. package/lib/components/UTProductItem/index.js +3 -3
  8. package/lib/components/UTProductItem/styles.js +12 -17
  9. package/lib/components/UTWorkflowContainer/versions/V1/components/BottomActions/index.js +2 -1
  10. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ ## [1.16.2](https://github.com/widergy/mobile-ui/compare/v1.16.1...v1.16.2) (2024-08-08)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * standarize utproductitem ([#330](https://github.com/widergy/mobile-ui/issues/330)) ([b0ac7e2](https://github.com/widergy/mobile-ui/commit/b0ac7e210e89bf48d6470b2761379d7bafe27b79))
7
+
1
8
  ## [1.16.1](https://github.com/widergy/mobile-ui/compare/v1.16.0...v1.16.1) (2024-07-31)
2
9
 
3
10
 
package/lib/components/UTProductItem/components/AdditionalInfo/index.js CHANGED
@@ -2,12 +2,16 @@ import { ViewPropTypes } from 'deprecated-react-native-prop-types';
2
2
  import { bool, string } from 'prop-types';
3
3
  import React from 'react';
4
4
 
5
- import Label from '../../../Label';
5
+ import UTLabel from '../../../UTLabel';
6
6
 
7
7
  const AdditionalInfo = ({ additionalInfo, shouldUseGap, themedStyles }) => (
8
- <Label small style={[themedStyles.additionalInfo, shouldUseGap ? themedStyles.gap : '']}>
8
+ <UTLabel
9
+ variant="xsmall"
10
+ colorTheme="gray"
11
+ style={[themedStyles.additionalInfo, shouldUseGap ? themedStyles.gap : '']}
12
+ >
9
13
  {additionalInfo}
10
- </Label>
14
+ </UTLabel>
11
15
  );
12
16
 
13
17
  AdditionalInfo.propTypes = {
package/lib/components/UTProductItem/components/Amount/index.js CHANGED
@@ -2,10 +2,14 @@ import { ViewPropTypes } from 'deprecated-react-native-prop-types';
2
2
  import { bool, number } from 'prop-types';
3
3
  import React from 'react';
4
4
 
5
- import Label from '../../../Label';
5
+ import UTLabel from '../../../UTLabel';
6
6
 
7
7
  const Amount = ({ amount, shouldUseGap, themedStyles }) => (
8
- <Label style={[themedStyles.amount, shouldUseGap ? themedStyles.gap : '']}>{`$ ${amount}`}</Label>
8
+ <UTLabel
9
+ weight="medium"
10
+ variant="subtitle1"
11
+ style={[themedStyles.amount, shouldUseGap ? themedStyles.gap : '']}
12
+ >{`$ ${amount}`}</UTLabel>
9
13
  );
10
14
 
11
15
  Amount.propTypes = {
package/lib/components/UTProductItem/components/Discount/index.js CHANGED
@@ -3,17 +3,17 @@ import { bool, number } from 'prop-types';
3
3
  import React from 'react';
4
4
  import { View } from 'react-native';
5
5
 
6
- import Label from '../../../Label';
6
+ import UTLabel from '../../../UTLabel';
7
7
 
8
8
  const Discount = ({ previousAmount, shouldUseGap, discount, themedStyles }) => (
9
9
  <View style={[themedStyles.amountContainer, shouldUseGap ? themedStyles.gap : '']}>
10
10
  <View style={themedStyles.discountChip}>
11
- <Label small style={themedStyles.discount}>
11
+ <UTLabel colorTheme="negative" variant="xsmall" style={themedStyles.discount}>
12
12
  {discount}
13
- </Label>
13
+ </UTLabel>
14
14
  </View>
15
15
  {previousAmount && (
16
- <Label small color="gray" style={themedStyles.previousAmount}>{`$ ${previousAmount}`}</Label>
16
+ <UTLabel colorTheme="gray" style={themedStyles.previousAmount}>{`$ ${previousAmount}`}</UTLabel>
17
17
  )}
18
18
  </View>
19
19
  );
package/lib/components/UTProductItem/components/QuantitySelector/index.js CHANGED
@@ -5,45 +5,45 @@ import { ViewPropTypes } from 'deprecated-react-native-prop-types';
5
5
  import isEmpty from 'lodash/isEmpty';
6
6
  import isNil from 'lodash/isNil';
7
7
 
8
- import IconButton from '../../../IconButton';
9
- import Label from '../../../Label';
8
+ import UTButton from '../../../UTButton';
10
9
  import { ActionPropTypes } from '../../propTypes';
11
- import ImageButton from '../../../ImageButton';
12
- import { useTheme } from '../../../../theming';
10
+ import UTLabel from '../../../UTLabel';
13
11
 
14
12
  const QuantitySelector = ({ action, secondaryAction, selectedQuantity, themedStyles }) => {
15
- const { UTProductItem } = useTheme();
16
- const ICON_SIZE = 24;
17
-
18
- const renderAction = ({ color, image, name, size, type, styles, onPress }) =>
19
- image ? (
20
- <ImageButton image={image} size={size || ICON_SIZE} containerStyle={styles.image} onPress={onPress} />
21
- ) : (
22
- <IconButton
23
- color={color || UTProductItem?.actionIconColor || '#091E42'}
24
- height={size || ICON_SIZE}
25
- iconMargin={8}
26
- name={name}
27
- onPress={onPress}
28
- size={size || ICON_SIZE}
29
- style={styles.icon}
30
- type={type}
31
- width={size || ICON_SIZE}
32
- />
33
- );
13
+ const renderAction = ({
14
+ Icon,
15
+ colorTheme,
16
+ variant = 'semitransparent',
17
+ size = 'small',
18
+ onPress,
19
+ styles
20
+ }) => (
21
+ <UTButton
22
+ colorTheme={colorTheme}
23
+ variant={variant}
24
+ size={size}
25
+ onPress={onPress}
26
+ Icon={Icon}
27
+ style={{ root: { ...themedStyles.action, ...styles } }}
28
+ />
29
+ );
34
30
 
35
31
  return (
36
32
  <View style={themedStyles.actionsContainer}>
37
33
  {!isEmpty(secondaryAction) &&
38
34
  renderAction({
39
35
  ...secondaryAction,
40
- styles: { icon: themedStyles.secondaryActionIcon, image: themedStyles.secondaryActionImage }
36
+ styles: themedStyles.secondaryActionIcon
41
37
  })}
42
- {!isNil(selectedQuantity) && <Label style={themedStyles.selectedQuantity}>{selectedQuantity}</Label>}
38
+ {!isNil(selectedQuantity) && (
39
+ <UTLabel weight="medium" style={themedStyles.selectedQuantity}>
40
+ {selectedQuantity}
41
+ </UTLabel>
42
+ )}
43
43
  {!isEmpty(action) &&
44
44
  renderAction({
45
45
  ...action,
46
- styles: { icon: themedStyles.actionIcon, image: themedStyles.actionImage }
46
+ styles: themedStyles.actionIcon
47
47
  })}
48
48
  </View>
49
49
  );
package/lib/components/UTProductItem/components/Title/index.js CHANGED
@@ -2,12 +2,12 @@ import { ViewPropTypes } from 'deprecated-react-native-prop-types';
2
2
  import { bool, string } from 'prop-types';
3
3
  import React from 'react';
4
4
 
5
- import Label from '../../../Label';
5
+ import UTLabel from '../../../UTLabel';
6
6
 
7
7
  const Title = ({ shouldUseGap, themedStyles, title }) => (
8
- <Label medium style={[themedStyles.title, shouldUseGap ? themedStyles.gap : '']}>
8
+ <UTLabel weight="medium" style={[themedStyles.title, shouldUseGap ? themedStyles.gap : '']}>
9
9
  {title}
10
- </Label>
10
+ </UTLabel>
11
11
  );
12
12
 
13
13
  Title.propTypes = {
package/lib/components/UTProductItem/index.js CHANGED
@@ -32,7 +32,7 @@ const UTProductItem = ({
32
32
  title
33
33
  }) => {
34
34
  const theme = useTheme();
35
- const themedStyles = merge({}, getUTProductItemStyles(theme?.UTProductItem), theme?.UTProductItem, style);
35
+ const themedStyles = merge({}, getUTProductItemStyles(theme), theme?.UTProductItem, style);
36
36
 
37
37
  const IMAGE_SIZE = 70;
38
38
 
@@ -57,14 +57,14 @@ const UTProductItem = ({
57
57
  {!isEmpty(counter) && (
58
58
  <UTLabel
59
59
  variant="small"
60
- className={themedStyles.counter}
60
+ style={themedStyles.counter}
61
61
  {...counterLabelProps}
62
62
  >{`${counter.current}/${counter.limit}`}</UTLabel>
63
63
  )}
64
64
  <View style={themedStyles.quantitiesContainer}>
65
65
  {quantity && (
66
66
  <View style={themedStyles.quantityContainer}>
67
- <UTLabel colorTheme="light" variant="subtitle1" {...quantityLabelProps}>
67
+ <UTLabel weight="medium" colorTheme="light" variant="subtitle1" {...quantityLabelProps}>
68
68
  {quantity}
69
69
  </UTLabel>
70
70
  </View>
package/lib/components/UTProductItem/styles.js CHANGED
@@ -2,23 +2,23 @@ import { StyleSheet } from 'react-native';
2
2
 
3
3
  export const getUTProductItemStyles = (theme = {}) =>
4
4
  StyleSheet.create({
5
+ action: {
6
+ paddingHorizontal: 4
7
+ },
5
8
  actionsContainer: {
6
9
  alignItems: 'center',
7
- backgroundColor: theme.actionsBackground || '#E4E6EA',
10
+ backgroundColor: theme.Palette.neutral['01'],
8
11
  borderRadius: 8,
9
12
  display: 'flex',
10
13
  flexDirection: 'row'
11
14
  },
12
- additionalInfo: {
13
- color: theme.additionalInfoColor || 'gray'
14
- },
15
15
  amountContainer: {
16
16
  alignItems: 'center',
17
17
  display: 'flex',
18
18
  flexDirection: 'row'
19
19
  },
20
20
  container: {
21
- borderBottomColor: theme.separatorColor || 'gray',
21
+ borderBottomColor: theme.Palette.light['04'],
22
22
  borderBottomWidth: 1,
23
23
  display: 'flex',
24
24
  flexDirection: 'row',
@@ -26,18 +26,16 @@ export const getUTProductItemStyles = (theme = {}) =>
26
26
  paddingVertical: 24
27
27
  },
28
28
  counter: {
29
- backgroundColor: theme.counterBackground || '#EBF8FD',
29
+ backgroundColor: theme.Palette.information['01'],
30
30
  overflow: 'hidden',
31
31
  borderRadius: 4,
32
- color: theme.counterColor || '#035B83',
32
+ color: theme.Palette.information['05'],
33
33
  paddingHorizontal: 8,
34
- paddingVertical: 4
35
- },
36
- discount: {
37
- color: theme.discountColor || 'white'
34
+ paddingVertical: 4,
35
+ marginBottom: 8
38
36
  },
39
37
  discountChip: {
40
- backgroundColor: theme.discountBackground || '#285AFF',
38
+ backgroundColor: theme.Palette.accent['04'],
41
39
  borderRadius: 4,
42
40
  marginRight: 8,
43
41
  paddingHorizontal: 8,
@@ -51,6 +49,7 @@ export const getUTProductItemStyles = (theme = {}) =>
51
49
  marginRight: 16
52
50
  },
53
51
  leftSection: {
52
+ paddingRight: 8,
54
53
  alignItems: 'center',
55
54
  flexGrow: 1,
56
55
  flexDirection: 'row'
@@ -60,7 +59,6 @@ export const getUTProductItemStyles = (theme = {}) =>
60
59
  flexBasis: 160
61
60
  },
62
61
  previousAmount: {
63
- color: theme.previousAmountColor || 'gray',
64
62
  textDecorationLine: 'line-through',
65
63
  textDecorationStyle: 'solid'
66
64
  },
@@ -69,7 +67,7 @@ export const getUTProductItemStyles = (theme = {}) =>
69
67
  alignItems: 'center'
70
68
  },
71
69
  quantityContainer: {
72
- backgroundColor: theme.quantityBackground || 'darkblue',
70
+ backgroundColor: theme.Palette.neutral['04'],
73
71
  paddingHorizontal: 8,
74
72
  paddingVertical: 4,
75
73
  borderRadius: 4,
@@ -80,9 +78,6 @@ export const getUTProductItemStyles = (theme = {}) =>
80
78
  display: 'flex',
81
79
  justifyContent: 'center'
82
80
  },
83
- secondaryActionImage: {
84
- marginHorizontal: 4
85
- },
86
81
  selectedQuantity: {
87
82
  paddingHorizontal: 8
88
83
  },
package/lib/components/UTWorkflowContainer/versions/V1/components/BottomActions/index.js CHANGED
@@ -40,8 +40,9 @@ const BottomActions = ({ bottomSafeArea, message, nextButton, returnButton, summ
40
40
  )}
41
41
  {summary.actions && !checkboxProps && (
42
42
  <View style={themedStyles.summaryActions}>
43
- {summary.actions.map(({ Icon: actionIcon, title, onPress }, index) => (
43
+ {summary.actions.map(({ Icon: actionIcon, title, onPress, disabled }, index) => (
44
44
  <UTButton
45
+ disabled={disabled}
45
46
  Icon={actionIcon}
46
47
  key={actionIcon}
47
48
  onPress={onPress}
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.16.1",
5
+ "version": "1.16.2",
6
6
  "repository": "https://github.com/widergy/mobile-ui.git",
7
7
  "main": "lib/index.js",
8
8
  "files": [