@widergy/mobile-ui 1.17.0 → 1.18.0

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 (12) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/lib/components/UTButton/README.md +2 -1
  3. package/lib/components/UTButton/constants.js +7 -0
  4. package/lib/components/UTButton/index.js +15 -0
  5. package/lib/components/UTButton/proptypes.js +2 -1
  6. package/lib/components/UTButton/theme.js +53 -2
  7. package/lib/components/UTIcon/components/EnergyIcons/EnergyIconChartPie.svg +11 -0
  8. package/lib/components/UTIcon/components/EnergyIcons/EnergyIconGraphicCircle.svg +13 -0
  9. package/lib/components/UTIcon/components/EnergyIcons/EnergyIconHome2.svg +12 -0
  10. package/lib/components/UTIcon/components/EnergyIcons/EnergyIconHome3.svg +3 -0
  11. package/lib/components/UTIcon/constants.js +8 -0
  12. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ # [1.18.0](https://github.com/widergy/mobile-ui/compare/v1.17.1...v1.18.0) (2024-08-12)
2
+
3
+
4
+ ### Features
5
+
6
+ * button counter ([#333](https://github.com/widergy/mobile-ui/issues/333)) ([7a87e45](https://github.com/widergy/mobile-ui/commit/7a87e452d04a227bc7b18b3d5db54435ca9f1345))
7
+
8
+ ## [1.17.1](https://github.com/widergy/mobile-ui/compare/v1.17.0...v1.17.1) (2024-08-12)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * new icons ([#332](https://github.com/widergy/mobile-ui/issues/332)) ([d53fbbb](https://github.com/widergy/mobile-ui/commit/d53fbbb913752bc2f8c8c045e64070685f1bc469))
14
+
1
15
  # [1.17.0](https://github.com/widergy/mobile-ui/compare/v1.16.3...v1.17.0) (2024-08-09)
2
16
 
3
17
 
package/lib/components/UTButton/README.md CHANGED
@@ -2,13 +2,14 @@
2
2
 
3
3
  ## Description
4
4
 
5
- `UTButton` is a versatile button component that can be customized with various themes, sizes, icons, and loading states.
5
+ `UTButton` is a versatile button component that can be customized with various themes, sizes, icons, counters, and loading states.
6
6
 
7
7
  ## Props
8
8
 
9
9
  | Name | Type | Default | Description |
10
10
  | ------------- | ----------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- |
11
11
  | colorTheme | string | 'secondary' | The color theme to use. One of: `error`, `negative`, `primary`, `secondary`, `success`. |
12
+ | count | number | | The value to be shown inside the `UTBadge` component |
12
13
  | disabled | bool | false | Disables the button, making it unclickable and applying a disabled style. |
13
14
  | Icon | elementType | | Icon component to be displayed inside the button. Can be a text (name of the icon from tabler icons) or a React component (e.g., SVG). |
14
15
  | iconPlacement | string | 'left' | Position of the icon relative to the text. One of: `left`, `right`. |
package/lib/components/UTButton/constants.js CHANGED
@@ -1,5 +1,6 @@
1
1
  export const ELEVATION = 2;
2
2
  export const PRESSED_ELEVATION = 2;
3
+ export const PRIMARY = 'primary';
3
4
 
4
5
  export const SIZES = {
5
6
  SMALL: 'small',
@@ -19,3 +20,9 @@ export const COLORS_MAPPER = {
19
20
  secondary: 'neutral',
20
21
  success: 'success'
21
22
  };
23
+
24
+ export const COUNTER_THEMES = {
25
+ IDENTITY: 'identity',
26
+ IDENTITY_SECONDARY: 'identitySecondary',
27
+ NEGATIVE: 'negative'
28
+ };
package/lib/components/UTButton/index.js CHANGED
@@ -3,6 +3,7 @@ import { Pressable, View } from 'react-native';
3
3
 
4
4
  import { isUTIcon } from '../UTIcon/utils';
5
5
  import { useTheme } from '../../theming';
6
+ import UTBadge from '../UTBadge';
6
7
  import UTIcon from '../UTIcon';
7
8
  import UTLabel from '../UTLabel';
8
9
  import UTLoading from '../UTLoading';
@@ -14,6 +15,7 @@ import { retrieveStyle } from './theme';
14
15
  const UTButton = ({
15
16
  children,
16
17
  colorTheme,
18
+ count,
17
19
  disabled,
18
20
  Icon,
19
21
  iconPlacement,
@@ -27,6 +29,7 @@ const UTButton = ({
27
29
 
28
30
  const {
29
31
  buttonStyles: themeButtonStyles,
32
+ counterStyles,
30
33
  childrenContainerStyles: themeChildrenContainerStyles,
31
34
  disabledStyles,
32
35
  iconStyles: themeIconStyles,
@@ -42,6 +45,8 @@ const UTButton = ({
42
45
 
43
46
  const iconStyles = children ? themeIconStyles.icon : themeIconStyles.iconOnly;
44
47
 
48
+ const { colorTheme: counterTheme, iconLeftAndCounter, ...remainingCounterStyles } = counterStyles;
49
+
45
50
  const buttonStyles = ({ pressed }) => [
46
51
  themeButtonStyles,
47
52
  (disabled || loading) && disabledStyles,
@@ -70,6 +75,16 @@ const UTButton = ({
70
75
  const RenderedChildren = (
71
76
  <View style={themeChildrenContainerStyles}>
72
77
  {iconPlacement === ICON_PLACEMENTS.LEFT && IconToShow}
78
+ {count && count > 0 ? (
79
+ <UTBadge
80
+ colorTheme={counterTheme}
81
+ style={
82
+ iconPlacement === ICON_PLACEMENTS.LEFT && !children ? iconLeftAndCounter : remainingCounterStyles
83
+ }
84
+ >
85
+ {count}
86
+ </UTBadge>
87
+ ) : null}
73
88
  {children && (
74
89
  <UTLabel colorTheme={textStyles.colorTheme} variant={textStyles.variant} weight={textStyles.weight}>
75
90
  {children}
package/lib/components/UTButton/proptypes.js CHANGED
@@ -1,4 +1,4 @@
1
- import { bool, func, elementType, string, shape } from 'prop-types';
1
+ import { bool, func, elementType, string, shape, number } from 'prop-types';
2
2
  import { ViewPropTypes } from 'deprecated-react-native-prop-types';
3
3
 
4
4
  import { ICON_PLACEMENTS, SIZES } from './constants';
@@ -14,6 +14,7 @@ export const defaultProps = {
14
14
 
15
15
  export const propTypes = {
16
16
  colorTheme: string,
17
+ count: number,
17
18
  disabled: bool,
18
19
  Icon: elementType,
19
20
  iconPlacement: string,
package/lib/components/UTButton/theme.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { getShadow } from '../../utils/styleUtils';
2
2
  import { COLOR_THEMES } from '../UTLabel/constants';
3
3
 
4
- import { COLORS_MAPPER, ELEVATION, PRESSED_ELEVATION } from './constants';
4
+ import { COLORS_MAPPER, COUNTER_THEMES, ELEVATION, PRESSED_ELEVATION, PRIMARY } from './constants';
5
5
  import { defaultProps } from './proptypes';
6
6
 
7
7
  const baseButtonTheme = () => ({
@@ -16,6 +16,13 @@ const baseButtonTheme = () => ({
16
16
  paddingHorizontal: 12,
17
17
  paddingVertical: 8
18
18
  },
19
+ counter: {
20
+ marginRight: 8
21
+ },
22
+ iconLeftAndCounter: {
23
+ marginLeft: 8,
24
+ marginRight: 0
25
+ },
19
26
  icon: {
20
27
  fontSize: 20
21
28
  },
@@ -54,6 +61,10 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
54
61
  backgroundColor: actionTheme['05']
55
62
  }
56
63
  },
64
+ counter: {
65
+ colorTheme:
66
+ colorTheme === COLORS_MAPPER.negative ? COUNTER_THEMES.IDENTITY_SECONDARY : COUNTER_THEMES.NEGATIVE
67
+ },
57
68
  text: {
58
69
  colorTheme: colorTheme === COLORS_MAPPER.negative ? COLOR_THEMES.NEUTRAL : COLOR_THEMES.NEGATIVE
59
70
  },
@@ -71,6 +82,14 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
71
82
  backgroundColor: actionTheme['03']
72
83
  }
73
84
  },
85
+ counter: {
86
+ colorTheme:
87
+ colorTheme === COLORS_MAPPER.negative
88
+ ? colorTheme
89
+ : colorTheme === PRIMARY
90
+ ? COUNTER_THEMES.IDENTITY
91
+ : COUNTER_THEMES.IDENTITY_SECONDARY
92
+ },
74
93
  text: {
75
94
  colorTheme: colorName
76
95
  },
@@ -87,6 +106,14 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
87
106
  backgroundColor: actionTheme['02']
88
107
  }
89
108
  },
109
+ counter: {
110
+ colorTheme:
111
+ colorTheme === COLORS_MAPPER.negative
112
+ ? colorTheme
113
+ : colorTheme === PRIMARY
114
+ ? COUNTER_THEMES.IDENTITY
115
+ : COUNTER_THEMES.IDENTITY_SECONDARY
116
+ },
90
117
  text: {
91
118
  colorTheme: colorName
92
119
  },
@@ -103,6 +130,14 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
103
130
  backgroundColor: actionTheme['02']
104
131
  }
105
132
  },
133
+ counter: {
134
+ colorTheme:
135
+ colorTheme === COLORS_MAPPER.negative
136
+ ? colorTheme
137
+ : colorTheme === PRIMARY
138
+ ? COUNTER_THEMES.IDENTITY
139
+ : COUNTER_THEMES.IDENTITY_SECONDARY
140
+ },
106
141
  text: {
107
142
  colorTheme: colorName
108
143
  },
@@ -122,6 +157,14 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
122
157
  },
123
158
  notPressed: shadow
124
159
  },
160
+ counter: {
161
+ colorTheme:
162
+ colorTheme === COLORS_MAPPER.negative
163
+ ? colorTheme
164
+ : colorTheme === PRIMARY
165
+ ? COUNTER_THEMES.IDENTITY
166
+ : COUNTER_THEMES.IDENTITY_SECONDARY
167
+ },
125
168
  text: {
126
169
  colorTheme: colorName
127
170
  },
@@ -198,6 +241,14 @@ export const retrieveStyle = ({ style = {}, colorTheme, variant, theme, size, ic
198
241
  ...style.root
199
242
  };
200
243
 
244
+ const counterStyles = {
245
+ ...baseTheme.counter,
246
+ ...variantTheme.counter,
247
+ iconLeftAndCounter: {
248
+ ...baseTheme.iconLeftAndCounter
249
+ }
250
+ };
251
+
201
252
  const textStyles = {
202
253
  colorTheme: variantTheme.text.colorTheme,
203
254
  variant: sizeTheme.text?.variant || baseTheme.text?.variant,
@@ -226,5 +277,5 @@ export const retrieveStyle = ({ style = {}, colorTheme, variant, theme, size, ic
226
277
  opacity: 0.5
227
278
  };
228
279
 
229
- return { buttonStyles, textStyles, disabledStyles, iconStyles, childrenContainerStyles };
280
+ return { buttonStyles, counterStyles, textStyles, disabledStyles, iconStyles, childrenContainerStyles };
230
281
  };
package/lib/components/UTIcon/components/EnergyIcons/EnergyIconChartPie.svg ADDED
@@ -0,0 +1,11 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0_1513_1276)">
3
+ <path fill="none" d="M8.9571 3.47452C7.59289 3.96492 6.65875 4.65852 5.83287 5.44331C4.66883 6.54945 3.82194 7.94688 3.38002 9.49066C2.93811 11.0344 2.91728 12.6683 3.31968 14.2229C3.72209 15.7774 4.53308 17.196 5.66854 18.3314C6.804 19.4669 8.22257 20.2779 9.77711 20.6803C11.3316 21.0827 12.9655 21.0619 14.5093 20.6199C16.0531 20.178 17.4505 19.3311 18.5567 18.1671C19.1683 17.5234 19.6786 16.7957 20.0739 16.0092" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
4
+ <path d="M21.0526 11.5526C21.0526 7.13302 17.0872 3 12.5 3V11.5526H21.0526Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
5
+ </g>
6
+ <defs>
7
+ <clipPath id="clip0_1513_1276">
8
+ <rect width="24" height="24" fill="white"/>
9
+ </clipPath>
10
+ </defs>
11
+ </svg>
package/lib/components/UTIcon/components/EnergyIcons/EnergyIconGraphicCircle.svg ADDED
@@ -0,0 +1,13 @@
1
+ <svg width="25" height="24" viewBox="0 0 25 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0_1513_1290)">
3
+ <path fill="none" d="M6.9506 20.036C4.84979 18.3884 3.5 15.8269 3.5 12.95C3.5 7.97945 7.52944 3.95001 12.5 3.95001C17.4706 3.95001 21.5 7.97945 21.5 12.95C21.5 15.8269 20.1502 18.3884 18.0494 20.036" stroke-width="2" stroke-linecap="round"/>
4
+ <path d="M10.5 13C10.5 13.5304 10.7107 14.0391 11.0858 14.4142C11.4609 14.7893 11.9696 15 12.5 15C13.0304 15 13.5391 14.7893 13.9142 14.4142C14.2893 14.0391 14.5 13.5304 14.5 13C14.5 12.4696 14.2893 11.9609 13.9142 11.5858C13.5391 11.2107 13.0304 11 12.5 11C11.9696 11 11.4609 11.2107 11.0858 11.5858C10.7107 11.9609 10.5 12.4696 10.5 13Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
5
+ <path d="M13.95 11.55L16 9.5Z" />
6
+ <path d="M13.95 11.55L16 9.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
7
+ </g>
8
+ <defs>
9
+ <clipPath id="clip0_1513_1290">
10
+ <rect width="24" height="24" fill="white" transform="translate(0.5)"/>
11
+ </clipPath>
12
+ </defs>
13
+ </svg>
package/lib/components/UTIcon/components/EnergyIcons/EnergyIconHome2.svg ADDED
@@ -0,0 +1,12 @@
1
+ <svg width="25" height="24" viewBox="0 0 25 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0_1513_1313)">
3
+ <path d="M12.0325 3L4.00485 12V20.994H20.0934V12L12.0325 3Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
4
+ <path d="M9.0325 21C9.0325 21 9.0325 15.5304 9.0325 15C9.0325 14.4696 9.03251 13 9.03251 13L11.0325 13H13.0325H15.0325V15V21"/>
5
+ <path d="M9.0325 21C9.0325 21 9.0325 15.5304 9.0325 15C9.0325 14.4696 9.03251 13 9.03251 13L11.0325 13H13.0325H15.0325V15V21" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
6
+ </g>
7
+ <defs>
8
+ <clipPath id="clip0_1513_1313">
9
+ <rect width="24" height="24" fill="white" transform="translate(0.0325012)"/>
10
+ </clipPath>
11
+ </defs>
12
+ </svg>
package/lib/components/UTIcon/components/EnergyIcons/EnergyIconHome3.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="25" height="25" fill="none" stroke="currentColor" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M8.91017 20.1798C8.91017 22.4293 3.34671 22.4918 3.34671 20.1798V12.0575C3.34671 10.7441 3.34671 9.49547 4.9089 8.40194C6.47109 7.3084 9.06433 5.34004 9.6892 4.87138C10.3141 4.40272 10.939 3.91899 11.8138 3.90282C12.6886 3.88665 13.126 4.21526 13.9071 4.87138C14.6882 5.5275 16.7191 7.05845 18.4062 8.40194C20.0934 9.74542 20.0934 10.7444 20.0934 12.0575V20.1798C20.0934 22.4293 14.892 22.523 14.892 20.1798V16.8571C14.892 14.1398 13.3378 13.2184 11.8138 13.2713C10.348 13.3221 8.91017 14.2436 8.91017 16.8571V20.1798Z" stroke-width="2"/>
3
+ </svg>
package/lib/components/UTIcon/constants.js CHANGED
@@ -1,6 +1,10 @@
1
1
  import EnergyIconCar from './components/EnergyIcons/EnergyIconCar.svg';
2
2
  import EnergyIconCart from './components/EnergyIcons/EnergyIconCart.svg';
3
+ import EnergyIconChartPie from './components/EnergyIcons/EnergyIconChartPie.svg';
4
+ import EnergyIconGraphicCircle from './components/EnergyIcons/EnergyIconGraphicCircle.svg';
3
5
  import EnergyIconHome from './components/EnergyIcons/EnergyIconHome.svg';
6
+ import EnergyIconHome2 from './components/EnergyIcons/EnergyIconHome2.svg';
7
+ import EnergyIconHome3 from './components/EnergyIcons/EnergyIconHome3.svg';
4
8
  import EnergyIconTruck from './components/EnergyIcons/EnergyIconTruck.svg';
5
9
 
6
10
  export const SHADES = {
@@ -33,6 +37,10 @@ export const DEFAULT_INTERNAL_SHADE = SHADES.shade02;
33
37
  export const ENERGY_ICONS = {
34
38
  EnergyIconCar,
35
39
  EnergyIconCart,
40
+ EnergyIconChartPie,
41
+ EnergyIconGraphicCircle,
36
42
  EnergyIconHome,
43
+ EnergyIconHome2,
44
+ EnergyIconHome3,
37
45
  EnergyIconTruck
38
46
  };
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.17.0",
5
+ "version": "1.18.0",
6
6
  "repository": "https://github.com/widergy/mobile-ui.git",
7
7
  "main": "lib/index.js",
8
8
  "files": [