@widergy/mobile-ui 1.1.0 → 1.2.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.2.1](https://github.com/widergy/mobile-ui/compare/v1.2.0...v1.2.1) (2024-03-08)
+
+
+### Bug Fixes
+
+* added utworkflowcontainer readmes ([#262](https://github.com/widergy/mobile-ui/issues/262)) ([47204d6](https://github.com/widergy/mobile-ui/commit/47204d6bfc4e54a605d4007090622450c004e063))
+
+# [1.2.0](https://github.com/widergy/mobile-ui/compare/v1.1.0...v1.2.0) (2024-03-01)
+
+
+### Features
+
+* added left icon placement for button and fixed button icons ([#260](https://github.com/widergy/mobile-ui/issues/260)) ([a4bd297](https://github.com/widergy/mobile-ui/commit/a4bd297a2a49bfac3bbf7efb1af53b9506b06bf9))
+
 # [1.1.0](https://github.com/widergy/mobile-ui/compare/v1.0.0...v1.1.0) (2024-02-26)
 
 

package/lib/components/Button/constants.js

@@ -4,3 +4,8 @@ export const CONTAINED_ELEVATION = 2;
 export const CONTAINED = 'contained';
 export const OUTLINED = 'outlined';
 export const TEXT = 'text';
+
+export const ICON_PLACEMENTS = {
+  left: 'left',
+  right: 'right'
+};

package/lib/components/Button/index.js

@@ -9,7 +9,7 @@ import { withTheme } from '../../theming';
 
 import propTypes, { buttonDefaultProps } from './propTypes';
 import styles, { getThemeStyles, getButtonModeStyles, getEffectColor } from './styles';
-import { NO_ELEVATION, OUTLINED, TEXT } from './constants';
+import { ICON_PLACEMENTS, NO_ELEVATION, OUTLINED, TEXT } from './constants';
 
 const Button = ({
   color,
@@ -20,6 +20,7 @@ const Button = ({
   elevation,
   icon,
   iconStyle,
+  iconPlacement,
   labelColor,
   testID,
   labelProps,
@@ -59,7 +60,7 @@ const Button = ({
           effectColor={getEffectColor(textColor, theme, effectColor)}
         >
           <View style={[styles.button, contentStyle]}>
-            {icon && (
+            {icon && iconPlacement !== ICON_PLACEMENTS.right && (
               <Icon
                 color={textColor}
                 name={icon.name}
@@ -75,6 +76,17 @@ const Button = ({
                 {lowerCase ? title : title.toUpperCase()}
               </Label>
             )}
+            {icon && iconPlacement === ICON_PLACEMENTS.right && (
+              <Icon
+                color={textColor}
+                name={icon.name}
+                type={icon.type}
+                style={[title && styles.rightIcon, iconStyle]}
+                size={icon.size || themeStyles.fontSize}
+                width={icon.width}
+                height={icon.height}
+              />
+            )}
           </View>
         </Touchable>
       </Surface>

package/lib/components/Button/styles.js

@@ -82,11 +82,14 @@ export default StyleSheet.create({
     overflow: 'hidden'
   },
   leftIcon: {
-    paddingRight: portraitHorizontalScale(8)
+    marginRight: portraitHorizontalScale(8)
   },
   outerContainer: {
     alignItems: 'center'
   },
+  rightIcon: {
+    marginLeft: portraitHorizontalScale(8)
+  },
   touchable: {
     alignItems: 'center',
     justifyContent: 'center'

package/lib/components/UTBanner/README.md

@@ -0,0 +1,19 @@
+# UTBanner
+
+### Description
+
+This component displays a banner with information
+
+## Props
+
+| Name  | Type      | Default | Description |
+| ----- | --------- | ------- | ----------- |
+| icon  | iconType  |         | Icon to be displayed at the left side of the banner. | 
+| style | ViewStyle |         | Custom optional styles to be applied to the banner. |
+| text  | string    |         | Text that will be displayed inside the banner. |
+
+### Custom Types
+
+| Type        | Shape |
+| ----------- | ----- |
+| iconType    | `{ name: string, type: string }` |

package/lib/components/UTHeader/README.md

@@ -0,0 +1,24 @@
+# UTHeader
+
+### Description
+
+This component displays a series of texts in different variants. It also handles a dropdown menu for actions in the top right corner
+
+## Props
+
+| Name               | Type        | Default | Description |
+| ------------------ | ----------- | ------- | ----------- |
+| banner             | bannerType  |         | Renders a banner at the bottom of the header. |
+| helpText           | string      |         | Text that will be rendered at the bottom of the header. |       
+| requiredFieldInfo  | string      |         | Text to display as a helper for required fields, it will be rendered below the description. |
+| subtitle           | string      |         | Text that will be rendered below the title. |
+| tagline            | string      |         | Text that will be rendered in uppercase on top of the title. |
+| title              | string      |         | Main text rendered in the middle of the header. |
+| useMarkdown        | bool        |         | Defines whether to use markdown in the components |
+
+### Custom Types
+
+| Type        | Shape |
+| ----------- | ----- |
+| bannerType  | `{ text: string, icon: iconType }` |
+| iconType    | `{ name: string, type: string }` |

package/lib/components/UTHeader/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
-import { string, bool, shape, element } from 'prop-types';
+import { string, bool, shape } from 'prop-types';
 
 import Label from '../Label';
 import UTBanner from '../UTBanner';
@@ -42,7 +42,7 @@ const Header = ({ tagline, title, subtitle, requiredFieldInfo, helpText, useMark
 
 Header.propTypes = {
   banner: shape({
-    Icon: element,
+    icon: shape({ name: string, type: string }),
     text: string
   }),
   helpText: string,

package/lib/components/UTStepper/README.md

@@ -0,0 +1,18 @@
+# UTStepper
+
+### Description
+
+This components displays a chain of rounded icons which can be gradually completed and represent progress through a series of steps
+
+## Props
+
+| Name               | Type        | Default | Description |
+| ------------------ | ----------- | ------- | ----------- |
+| currentStage       | number      |         | Receives a number that represents which stage id will be active. |
+| stages             | stageType   |         | Defines the structure of the stepper indicator. It is required for each element inside the array given to have a property `id`, the indicator will be ordered by id. |
+
+### Custom Types
+
+| Type        | Shape |
+| ----------- | ----- |
+| stageType   | arrayOf( `{ id: number }` ) |

package/lib/components/UTTopbar/README.md

@@ -0,0 +1,23 @@
+# UTTopbar
+
+### Description
+
+This components replaces the native topbar when needed more complex behaviour
+
+## Props
+
+| Name               | Type        | Default | Description |
+| ------------------ | ----------- | ------- | ----------- |
+| currentStage       | number      |         | Receives a number that represents which stage id will be active. |
+| currentStep        | number      |         | Receives a number that will fill up the progress bar proportionally to the number of steps given. |
+| stages             | stageType   |         | Defines the structure of the stepper indicator. It is required for each element inside the array given to have a property `id`, the indicator will be ordered by id. |
+| stepsCount         | number      |         | Receives a number that represent the total amount of steps. Its only purpose is for properly rendering the progressBar. |
+| topbar             | topbarType  | `{ colorTheme: 'light', variant: 'secondary' }`      | Defines the rendering of the topbar that will replace the native topbar |
+
+### Custom Types
+
+| Type        | Shape |
+| ----------- | ----- |
+| iconType    | `{ name: string, type: string, size: number, height: number, width: number }` |
+| stageType   | arrayOf( `{ id: number }` ) |
+| topbarType  | `{ colorTheme: 'light' \| 'dark', goBack: func, title: string, variant: 'primary' \| 'secondary', icon: iconType }` |

package/lib/components/UTWorkflowContainer/versions/V1/README.md

@@ -0,0 +1,41 @@
+# UTWorkflowContainer
+
+### Description
+
+This component serves as a wrapper for each step of a workflow
+
+## Props
+
+| Name               | Type        | Default | Description |
+| ------------------ | ----------- | ------- | ----------- |
+| banner             | bannerType  |         | Renders a banner at the bottom of the header. |
+| children           | element     |         | The contents that will be rendered inside the component.
+| currentStage       | number      |         | Receives a number that represents which stage id will be active. It is up to the parent component to update this number accordingly. |
+| currentStep        | number      |         | Receives a number that will fill up the progress bar proportionally to the number of steps given. |
+| helpText           | string      |         | Text that will be rendered at the bottom of the header. |       
+| message            | messageType |         | If present, renders a message above the navigation actions. |
+| nextButton         | buttonType  |         | Defines behaviour and/or rendering of the button on the right corner. |
+| onExit             | func        |         | Cleanup function. |     
+| requiredFieldInfo  | string      |         | Text to display as a helper for required fields, it will be rendered below the description. |
+| returnButton       | buttonType  |         | Defines behaviour and/or rendering of the button on the left corner. |
+| stages             | stageType   |         | Defines the structure of the stepper indicator rendered inside the topbar. It is required for each element inside the array given to have a property `id`, the indicator will be ordered by id. |
+| stepsCount         | number      |         | Receives a number that represent the total amount of steps. Its only purpose is for properly rendering the progressBar. |
+| subtitle           | string      |         | Text that will be rendered below the title. |
+| summary            | summaryType |         | If present, renders a rounded tab above the navigation actions with additional information and actions |
+| tagline            | string      |         | Text that will be rendered in uppercase on top of the title. |
+| title              | string      |         | Text that will be rendered between the topbar and the content. It is required in order to show any other text header elements. |
+| topbar             | topbarType  |         | Defines the rendering of the topbar that will replace the native topbar |
+| useMarkdown        | bool        |         | Defines whether to use markdown in the header components |
+
+### Custom Types
+
+| Type        | Shape |
+| ----------- | ----- |
+| actionType  | `{ name: string, icon: iconType, title: string, onPress: func }` |
+| bannerType  | `{ text: string, icon: iconType }` |
+| buttonType  | `{ hidden: bool, disabled: bool, label: string, onPress: func, mode: 'contained' \| 'outlined' \| 'text' }` |
+| iconType    | `{ name: string, type: string, size: number, height: number, width: number }` |
+| messageType | `{ icon: iconType, variant: string , title: string }` |
+| stageType   | arrayOf( `{ id: number }` ) |
+| summaryType | `{ checkbox: objectOf( UTCheckbox props ), title: string, mainInfo: string, actions: actionType }` |
+| topbarType  | `{ colorTheme: 'light' \| 'dark', goBack: func, title: string, variant: 'primary' \| 'secondary', icon: iconType }` |

package/package.json

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