@widergy/mobile-ui 0.40.1 → 0.41.1

package/lib/components/UTWorkflowContainer/versions/V1/components/BottomActions/styles.js

@@ -0,0 +1,75 @@
+import { StyleSheet } from 'react-native';
+
+export const ICON_SIZE = 24;
+
+export default StyleSheet.create({
+  actionsChild: {
+    marginRight: 16
+  },
+  actionsContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+    justifyContent: 'space-between',
+    padding: 16,
+    width: '100%'
+  },
+  bottomNav: {
+    backgroundColor: 'white',
+    elevation: 10
+  },
+  message: {
+    alignItems: 'center',
+    backgroundColor: 'blue',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 4
+  },
+  messageChild: {
+    marginRight: 8
+  },
+  messageError: {
+    backgroundColor: 'red'
+  },
+  messageSuccess: {
+    backgroundColor: 'green'
+  },
+  messageWarning: {
+    backgroundColor: 'darkorange'
+  },
+  summary: {
+    alignItems: 'center',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    display: 'flex',
+    elevation: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: 16
+  },
+  summaryActionButton: {
+    marginHorizontal: 8
+  },
+  summaryActionContainer: {
+    minWidth: 0
+  },
+  summaryActions: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row'
+  },
+  summaryActionsChild: {
+    marginRight: 16
+  },
+  summaryCheckbox: {
+    flexDirection: 'column'
+  },
+  summaryTitles: {
+    display: 'flex'
+  },
+  summaryTitlesChild: {
+    marginBottom: 8
+  }
+});

package/lib/components/UTWorkflowContainer/versions/V1/index.js

@@ -0,0 +1,94 @@
+import React, { useEffect } from 'react';
+import { View, ScrollView } from 'react-native';
+import { number, func, shape, bool, string, element } from 'prop-types';
+
+import { useTheme } from '../../../../theming';
+import UTHeader from '../../../UTHeader';
+import UTTopbar from '../../../UTTopbar';
+import { StagesPropTypes } from '../../../UTStepper/types';
+import { TopbarPropTypes } from '../../../UTTopbar/types';
+
+import ownStyles from './styles';
+import BottomActions from './components/BottomActions';
+import ActionButtonPropTypes from './components/BottomActions/components/ActionButton/types';
+import { MessagePropTypes, SummaryPropTypes } from './types';
+
+const UTWorkflowContainer = ({
+  banner,
+  children,
+  currentStage,
+  currentStep,
+  helpText,
+  message,
+  nextButton,
+  onExit,
+  requiredFieldInfo,
+  returnButton,
+  stages,
+  stepsCount,
+  subtitle,
+  summary,
+  tagline,
+  title,
+  topbar,
+  useMarkdown
+}) => {
+  useEffect(() => () => onExit?.(), []);
+  const theme = useTheme();
+
+  return (
+    <View style={ownStyles.container}>
+      {topbar && <UTTopbar {...{ currentStage, currentStep, stages, stepsCount, theme, topbar }} />}
+      <ScrollView contentContainerStyle={ownStyles.content}>
+        {title && (
+          <UTHeader
+            {...{
+              banner,
+              helpText,
+              requiredFieldInfo,
+              subtitle,
+              tagline,
+              title,
+              useMarkdown
+            }}
+          />
+        )}
+        {children}
+      </ScrollView>
+      {((nextButton && !nextButton?.hidden) || (returnButton && !returnButton?.hidden)) && (
+        <BottomActions
+          {...{
+            message,
+            nextButton,
+            returnButton,
+            summary,
+            theme
+          }}
+        />
+      )}
+    </View>
+  );
+};
+UTWorkflowContainer.propTypes = {
+  banner: shape({
+    Icon: element,
+    text: string
+  }),
+  currentStage: number,
+  currentStep: number.isRequired,
+  helpText: string,
+  message: MessagePropTypes,
+  nextButton: ActionButtonPropTypes,
+  onExit: func,
+  requiredFieldInfo: string,
+  returnButton: ActionButtonPropTypes,
+  stages: StagesPropTypes,
+  stepsCount: number.isRequired,
+  subtitle: string,
+  summary: SummaryPropTypes,
+  tagline: string,
+  title: string,
+  topbar: TopbarPropTypes,
+  useMarkdown: bool
+};
+export default UTWorkflowContainer;

package/lib/components/UTWorkflowContainer/versions/V1/styles.js

@@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    backgroundColor: 'white',
+    flex: 1,
+    flexDirection: 'column',
+    width: '100%'
+  },
+  content: {
+    paddingBottom: 16,
+    paddingHorizontal: 16
+  }
+});

package/lib/components/UTWorkflowContainer/versions/V1/types.js

@@ -0,0 +1,24 @@
+import { arrayOf, func, shape, string } from 'prop-types';
+
+export const SummaryPropTypes = shape({
+  actions: arrayOf(
+    shape({
+      icon: shape({
+        name: string,
+        type: string
+      }),
+      onPress: func,
+      title: string
+    })
+  ),
+  mainInfo: string,
+  title: string
+});
+
+export const MessagePropTypes = shape({
+  icon: shape({
+    name: string,
+    type: string
+  }),
+  title: string
+});

package/package.json

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