@widergy/mobile-ui 1.3.2 → 1.3.4

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 (6) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/lib/components/UTHeader/index.js +52 -25
  3. package/lib/components/UTWorkflowContainer/versions/V1/components/BottomActions/components/ActionButton/index.js +2 -2
  4. package/lib/components/UTWorkflowContainer/versions/V1/components/BottomActions/index.js +32 -15
  5. package/lib/components/UTWorkflowContainer/versions/V1/index.js +8 -4
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ ## [1.3.4](https://github.com/widergy/mobile-ui/compare/v1.3.3...v1.3.4) (2024-03-19)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * themed styles and tagline fix ([#270](https://github.com/widergy/mobile-ui/issues/270)) ([6b5b325](https://github.com/widergy/mobile-ui/commit/6b5b32599b39dc1ee07f5af3dc2020fbab9219cf))
7
+
8
+ ## [1.3.3](https://github.com/widergy/mobile-ui/compare/v1.3.2...v1.3.3) (2024-03-15)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * custom components in utheader ([#269](https://github.com/widergy/mobile-ui/issues/269)) ([4400fce](https://github.com/widergy/mobile-ui/commit/4400fce3977d35080ebd766a253dba6d0da0c753))
14
+
1
15
  ## [1.3.2](https://github.com/widergy/mobile-ui/compare/v1.3.1...v1.3.2) (2024-03-14)
2
16
 
3
17
 
package/lib/components/UTHeader/index.js CHANGED
@@ -1,41 +1,68 @@
1
1
  import React from 'react';
2
2
  import { View } from 'react-native';
3
3
  import { string, bool, shape } from 'prop-types';
4
+ import merge from 'lodash/merge';
4
5
 
5
6
  import Label from '../Label';
6
7
  import UTBanner from '../UTBanner';
8
+ import { useTheme } from '../../theming';
7
9
 
8
10
  import ownStyles from './styles';
9
11
 
10
- const UTHeader = ({ tagline, title, subtitle, requiredFieldInfo, helpText, useMarkdown, banner }) => {
12
+ const UTHeader = ({ tagline, title, subtitle, requiredFieldInfo, helpText, useMarkdown, banner, style }) => {
13
+ const theme = useTheme();
14
+ const themedStyles = merge({}, ownStyles, theme?.UTHeader, style);
15
+
16
+ const renderComponent = (prop, standardComponent) =>
17
+ React.isValidElement(prop) ? prop : standardComponent;
18
+
19
+ const Tagline = renderComponent(
20
+ tagline,
21
+ <Label disabled bold useMarkdown={useMarkdown} style={themedStyles.child}>
22
+ {tagline?.toUpperCase?.()}
23
+ </Label>
24
+ );
25
+
26
+ const Title = renderComponent(
27
+ title,
28
+ <Label big bold style={themedStyles.title} useMarkdown={useMarkdown}>
29
+ {title}
30
+ </Label>
31
+ );
32
+
33
+ const Subtitle = renderComponent(
34
+ subtitle,
35
+ <Label disabled useMarkdown={useMarkdown} style={themedStyles.child}>
36
+ {subtitle}
37
+ </Label>
38
+ );
39
+
40
+ const RequiredFieldInfo = renderComponent(
41
+ requiredFieldInfo,
42
+ <Label disabled useMarkdown={useMarkdown} style={themedStyles.child}>
43
+ {requiredFieldInfo}
44
+ </Label>
45
+ );
46
+
47
+ const HelpText = renderComponent(
48
+ helpText,
49
+ <Label disabled useMarkdown={useMarkdown} style={themedStyles.child}>
50
+ {helpText}
51
+ </Label>
52
+ );
53
+
11
54
  return (
12
- <View style={ownStyles.header}>
13
- {tagline && (
14
- <Label disabled bold useMarkdown={useMarkdown} style={ownStyles.child}>
15
- {tagline.toUpperCase()}
16
- </Label>
17
- )}
55
+ <View style={themedStyles.header}>
56
+ {!!tagline && Tagline}
18
57
  <View>
19
- <Label big bold style={ownStyles.title} useMarkdown={useMarkdown}>
20
- {title}
21
- </Label>
22
- {subtitle && (
23
- <Label disabled useMarkdown={useMarkdown} style={ownStyles.child}>
24
- {subtitle}
25
- </Label>
26
- )}
58
+ {Title}
59
+ {!!subtitle && Subtitle}
27
60
  </View>
28
- {requiredFieldInfo && (
29
- <Label disabled useMarkdown={useMarkdown} style={ownStyles.child}>
30
- {requiredFieldInfo}
31
- </Label>
32
- )}
33
- {helpText && (
34
- <Label disabled useMarkdown={useMarkdown} style={ownStyles.child}>
35
- {helpText}
36
- </Label>
61
+ {!!requiredFieldInfo && RequiredFieldInfo}
62
+ {!!helpText && HelpText}
63
+ {banner?.text && (
64
+ <UTBanner text={banner.text} icon={banner.icon} style={{ banner: themedStyles.child }} />
37
65
  )}
38
- {banner?.text && <UTBanner text={banner.text} icon={banner.icon} style={{ banner: ownStyles.child }} />}
39
66
  </View>
40
67
  );
41
68
  };
package/lib/components/UTWorkflowContainer/versions/V1/components/BottomActions/components/ActionButton/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { string, func, bool } from 'prop-types';
3
3
  import { View } from 'react-native';
4
- import _ from 'lodash';
4
+ import merge from 'lodash/merge';
5
5
 
6
6
  import Button from '../../../../../../../Button';
7
7
  import { useTheme } from '../../../../../../../../theming';
@@ -10,7 +10,7 @@ import ownStyles from './styles';
10
10
 
11
11
  const ActionButton = ({ hidden, disabled, onPress, label, mode, style }) => {
12
12
  const theme = useTheme();
13
- const themedStyles = _.merge({}, ownStyles, theme?.UTWorkflowContainer?.actionButton, style);
13
+ const themedStyles = merge({}, ownStyles, theme?.UTWorkflowContainer?.actionButton, style);
14
14
 
15
15
  return (
16
16
  <View style={themedStyles.actionButton}>
package/lib/components/UTWorkflowContainer/versions/V1/components/BottomActions/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { View } from 'react-native';
3
- import _ from 'lodash';
3
+ import merge from 'lodash/merge';
4
4
 
5
5
  import Label from '../../../../../Label';
6
6
  import Button from '../../../../../Button';
@@ -13,31 +13,31 @@ import ActionButtonPropTypes from './components/ActionButton/types';
13
13
  import ownStyles, { ICON_SIZE } from './styles';
14
14
  import { NEXT, RETURN } from './constants';
15
15
 
16
- const BottomActions = ({ nextButton, returnButton, summary, message, theme }) => {
16
+ const BottomActions = ({ nextButton, returnButton, summary, message, style }) => {
17
17
  const messageIcon = message?.icon;
18
18
  const MESSAGE_ICON_SIZE = 16;
19
19
  const checkboxProps = summary?.checkbox;
20
20
 
21
- const themedStyles = _.merge({}, ownStyles, theme?.UTWorkflowContainer);
21
+ const themedStyles = merge({}, ownStyles, style);
22
22
  const nextButtonEnabled = nextButton && !nextButton.hidden;
23
23
  const returnButtonEnabled = returnButton && !returnButton.hidden;
24
24
 
25
25
  return (
26
- <View style={ownStyles.bottomNav}>
26
+ <View style={themedStyles.bottomNav}>
27
27
  {summary && (
28
- <View style={[ownStyles.summary, checkboxProps && ownStyles.summaryCheckbox]}>
28
+ <View style={[themedStyles.summary, checkboxProps && themedStyles.summaryCheckbox]}>
29
29
  {checkboxProps ? (
30
30
  <Checkbox {...checkboxProps} />
31
31
  ) : (
32
- <View style={ownStyles.summaryTitles}>
33
- <Label disabled medium style={ownStyles.summaryTitlesChild}>
32
+ <View style={themedStyles.summaryTitles}>
33
+ <Label disabled medium style={themedStyles.summaryTitlesChild}>
34
34
  {summary.title}
35
35
  </Label>
36
36
  <Label>{summary.mainInfo}</Label>
37
37
  </View>
38
38
  )}
39
39
  {summary.actions && !checkboxProps && (
40
- <View style={ownStyles.summaryActions}>
40
+ <View style={themedStyles.summaryActions}>
41
41
  {summary.actions.map((action, index) => (
42
42
  <Button
43
43
  key={action.name}
@@ -53,10 +53,12 @@ const BottomActions = ({ nextButton, returnButton, summary, message, theme }) =>
53
53
  }
54
54
  title={action.title}
55
55
  labelColor={themedStyles.summaryActions?.labelColor || 'blue'}
56
- containerStyle={ownStyles.summaryActionContainer}
57
- contentStyle={!action.title && ownStyles.summaryActionButton}
56
+ containerStyle={themedStyles.summaryActionContainer}
57
+ contentStyle={!action.title && themedStyles.summaryActionButton}
58
58
  onPress={action.onPress}
59
- outerContainerStyles={index !== summary.actions.length - 1 && ownStyles.summaryActionsChild}
59
+ outerContainerStyles={
60
+ index !== summary.actions.length - 1 && themedStyles.summaryActionsChild
61
+ }
60
62
  />
61
63
  ))}
62
64
  </View>
@@ -70,7 +72,7 @@ const BottomActions = ({ nextButton, returnButton, summary, message, theme }) =>
70
72
  themedStyles[`message${message.variant?.charAt(0).toUpperCase()}${message.variant?.slice(1)}`]
71
73
  ]}
72
74
  >
73
- <Label white style={ownStyles.messageChild}>
75
+ <Label white style={themedStyles.messageChild}>
74
76
  {message.title}
75
77
  </Label>
76
78
  {messageIcon && (
@@ -85,16 +87,31 @@ const BottomActions = ({ nextButton, returnButton, summary, message, theme }) =>
85
87
  )}
86
88
  </View>
87
89
  )}
88
- <View style={ownStyles.actionsContainer}>
90
+ <View style={themedStyles.actionsContainer}>
89
91
  {returnButtonEnabled && (
90
92
  <ActionButton
91
93
  mode="text"
92
94
  label={returnButton.label || RETURN}
93
- style={nextButtonEnabled && { actionButton: ownStyles.actionsChild }}
95
+ style={{
96
+ actionButton: {
97
+ ...themedStyles.returnActionButton,
98
+ ...(nextButtonEnabled ? themedStyles.actionsChild : {})
99
+ },
100
+ buttonContainer: themedStyles.returnButtonContainer
101
+ }}
94
102
  {...returnButton}
95
103
  />
96
104
  )}
97
- {nextButtonEnabled && <ActionButton label={nextButton.label || NEXT} {...nextButton} />}
105
+ {nextButtonEnabled && (
106
+ <ActionButton
107
+ label={nextButton.label || NEXT}
108
+ style={{
109
+ actionButton: themedStyles.nextActionButton,
110
+ buttonContainer: themedStyles.nextButtonContainer
111
+ }}
112
+ {...nextButton}
113
+ />
114
+ )}
98
115
  </View>
99
116
  </View>
100
117
  );
package/lib/components/UTWorkflowContainer/versions/V1/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import React, { useEffect } from 'react';
2
2
  import { View, ScrollView } from 'react-native';
3
3
  import { number, func, shape, bool, string, element } from 'prop-types';
4
+ import { merge } from 'lodash';
4
5
 
5
6
  import { useTheme } from '../../../../theming';
6
7
  import UTHeader from '../../../UTHeader';
@@ -26,6 +27,7 @@ const UTWorkflowContainer = ({
26
27
  returnButton,
27
28
  stages,
28
29
  stepsCount,
30
+ style,
29
31
  subtitle,
30
32
  summary,
31
33
  tagline,
@@ -35,17 +37,19 @@ const UTWorkflowContainer = ({
35
37
  }) => {
36
38
  useEffect(() => () => onExit?.(), []);
37
39
  const theme = useTheme();
40
+ const themedStyles = merge({}, ownStyles, theme?.UTWorkflowContainer, style);
38
41
 
39
42
  return (
40
- <View style={ownStyles.container}>
43
+ <View style={themedStyles.container}>
41
44
  {topbar && <UTTopbar {...{ currentStage, currentStep, stages, stepsCount, theme, topbar }} />}
42
- <ScrollView contentContainerStyle={ownStyles.content}>
45
+ <ScrollView contentContainerStyle={themedStyles.content}>
43
46
  {title && (
44
47
  <UTHeader
45
48
  {...{
46
49
  banner,
47
50
  helpText,
48
51
  requiredFieldInfo,
52
+ style: themedStyles,
49
53
  subtitle,
50
54
  tagline,
51
55
  title,
@@ -61,8 +65,8 @@ const UTWorkflowContainer = ({
61
65
  message,
62
66
  nextButton,
63
67
  returnButton,
64
- summary,
65
- theme
68
+ style: themedStyles,
69
+ summary
66
70
  }}
67
71
  />
68
72
  )}
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.3.2",
5
+ "version": "1.3.4",
6
6
  "repository": "https://github.com/widergy/mobile-ui.git",
7
7
  "main": "lib/index.js",
8
8
  "files": [