@widergy/mobile-ui 1.23.2 → 1.24.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.24.1](https://github.com/widergy/mobile-ui/compare/v1.24.0...v1.24.1) (2024-09-17)
+
+
+### Bug Fixes
+
+* rounded progress utworkflow ([#357](https://github.com/widergy/mobile-ui/issues/357)) ([2518e3e](https://github.com/widergy/mobile-ui/commit/2518e3ea23a39652662c1c069592c5e4a55d4198))
+
+# [1.24.0](https://github.com/widergy/mobile-ui/compare/v1.23.2...v1.24.0) (2024-09-17)
+
+
+### Features
+
+* ut button group ([#356](https://github.com/widergy/mobile-ui/issues/356)) ([ebdb6a2](https://github.com/widergy/mobile-ui/commit/ebdb6a2d69ee182f2a1794aa7bb55eea6ce8e261))
+
 ## [1.23.2](https://github.com/widergy/mobile-ui/compare/v1.23.1...v1.23.2) (2024-09-12)
 
 

package/lib/components/UTButtonGroup/README.md

@@ -0,0 +1,11 @@
+# UTButton
+
+## Props
+
+
+| Name       | Type            | Default   | Description                                                                            |
+| ------------ | :---------------- | ----------- | ---------------------------------------------------------------------------------------- |
+| actions    | array           |           | Array of actions to render. Each action must include:`Icon`, `id` and `onPress` props. |
+| colorTheme | string          | 'primary' | The color theme to use. One of:`primary`, `secondary`, `negative`.                     |
+| type       | string          | 'square'  | Type of the button. One of:`square`, `circle`.                                         |
+| selected   | string / number |           | Id of the active button.                                                               |

package/lib/components/UTButtonGroup/constants.js

@@ -0,0 +1,18 @@
+export const BACKGROUND_COLOR_MAPPER = theme => {
+  const negativeTheme = theme.Palette.negative;
+  const lightTheme = theme.Palette.light;
+
+  const lightBackground = { backgroundColor: lightTheme['03'] };
+  const negativeBackground = { backgroundColor: negativeTheme['02'] };
+
+  return {
+    primary: lightBackground,
+    negative: negativeBackground,
+    neutral: lightBackground
+  };
+};
+
+export const CIRCLE_TYPE = 'circle';
+export const SQUARE_TYPE = 'square';
+export const DEFAULT_TYPE = SQUARE_TYPE;
+export const DEFAULT_COLOR_THEME = 'primary';

package/lib/components/UTButtonGroup/index.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { View } from 'react-native';
+import { arrayOf, element, func, number, oneOfType, shape, string } from 'prop-types';
+
+import { useTheme } from '../../theming';
+import { mergeMultipleStyles } from '../../utils/styleUtils';
+import UTButton from '../UTButton';
+
+import { BACKGROUND_COLOR_MAPPER, DEFAULT_COLOR_THEME, DEFAULT_TYPE } from './constants';
+import { getTypeStyles, ownStyles } from './styles';
+
+const UTButtonGroup = ({ actions, colorTheme = DEFAULT_COLOR_THEME, selected, type = DEFAULT_TYPE }) => {
+  const theme = useTheme();
+  const backgroundColor =
+    BACKGROUND_COLOR_MAPPER(theme)[colorTheme] || BACKGROUND_COLOR_MAPPER(theme).primary;
+  const themedStyles = mergeMultipleStyles(ownStyles, getTypeStyles(type), theme?.UTButtonGroup);
+
+  return (
+    <View style={[themedStyles.container, backgroundColor]}>
+      {actions.map(({ Icon, id, onPress }, index) => (
+        <UTButton
+          colorTheme={colorTheme}
+          Icon={Icon}
+          key={id}
+          onPress={onPress}
+          size="large"
+          style={{
+            root: {
+              ...themedStyles.buttonRoot,
+              ...(index === 0 ? themedStyles.firstButton : {}),
+              ...(index === actions.length - 1 ? themedStyles.lastButton : {}),
+              ...themedStyles.button
+            }
+          }}
+          variant={selected === id ? 'filled' : 'text'}
+        />
+      ))}
+    </View>
+  );
+};
+
+UTButtonGroup.propTypes = {
+  actions: arrayOf(
+    shape({
+      Icon: oneOfType([string, element]),
+      id: oneOfType([number, string]),
+      onClick: func
+    })
+  ).isRequired,
+  colorTheme: string,
+  selected: oneOfType([number, string]).isRequired,
+  type: string
+};
+
+export default UTButtonGroup;

package/lib/components/UTButtonGroup/styles.js

@@ -0,0 +1,41 @@
+import { StyleSheet } from 'react-native';
+
+import { CIRCLE_TYPE, SQUARE_TYPE } from './constants';
+
+const BORDER_RADIUS_DEFAULT = 8;
+const BORDER_RADIUS_SQUARE = BORDER_RADIUS_DEFAULT - 1;
+const BORDER_RADIUS_ROUNDED = 100;
+
+export const getTypeStyles = type =>
+  ({
+    [CIRCLE_TYPE]: {
+      container: {
+        borderRadius: BORDER_RADIUS_ROUNDED
+      },
+      button: {
+        borderRadius: BORDER_RADIUS_ROUNDED
+      }
+    },
+    [SQUARE_TYPE]: {
+      container: {
+        borderRadius: BORDER_RADIUS_DEFAULT
+      },
+      firstButton: {
+        borderTopLeftRadius: BORDER_RADIUS_SQUARE,
+        borderBottomLeftRadius: BORDER_RADIUS_SQUARE
+      },
+      lastButton: {
+        borderTopRightRadius: BORDER_RADIUS_SQUARE,
+        borderBottomRightRadius: BORDER_RADIUS_SQUARE
+      }
+    }
+  })[type];
+
+export const ownStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row'
+  },
+  buttonRoot: {
+    borderRadius: 0
+  }
+});

package/lib/components/UTTopbar/index.js

@@ -61,6 +61,10 @@ const UTTopbar = ({
           styles={{
             barContainer: {
               height: BAR_HEIGHT
+            },
+            progressBar: {
+              borderTopRightRadius: currentStep === stepsCount ? 0 : 4,
+              borderBottomRightRadius: currentStep === stepsCount ? 0 : 4
             }
           }}
         />

package/lib/index.js

@@ -39,6 +39,7 @@ export { default as UTAutocomplete } from './components/UTAutocomplete';
 export { default as UTBadge } from './components/UTBadge';
 export { default as UTBottomSheet } from './components/UTBottomSheet';
 export { default as UTButton } from './components/UTButton';
+export { default as UTButtonGroup } from './components/UTButtonGroup';
 export { default as UTCBUInput } from './components/UTCBUInput';
 export { default as UTCheckBox } from './components/UTCheckBox';
 export { default as UTCheckList } from './components/UTCheckList';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.23.2",
+  "version": "1.24.1",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [