@widergy/mobile-ui 1.31.0 → 1.31.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.31.2](https://github.com/widergy/mobile-ui/compare/v1.31.1...v1.31.2) (2024-11-05)
+
+
+### Bug Fixes
+
+* [EVE-4331] UTStatusMessage ([#383](https://github.com/widergy/mobile-ui/issues/383)) ([8e35027](https://github.com/widergy/mobile-ui/commit/8e350272bb402c2a80ed649a66d6654c52dc35d8))
+
+## [1.31.1](https://github.com/widergy/mobile-ui/compare/v1.31.0...v1.31.1) (2024-11-04)
+
+
+### Bug Fixes
+
+* utmenu fixes ([#374](https://github.com/widergy/mobile-ui/issues/374)) ([44258cb](https://github.com/widergy/mobile-ui/commit/44258cb1bb0ac7c837741f43ec4cbbc280e2d2a8))
+
 # [1.31.0](https://github.com/widergy/mobile-ui/compare/v1.30.2...v1.31.0) (2024-11-04)
 
 

package/lib/components/UTMenu/index.js

@@ -154,50 +154,50 @@ const UTMenu = ({
           <View style={styles.overlay} />
         </TouchableOpacity>
         <Surface
-          onLayout={handleMenuLayout}
-          ref={menuRef}
           style={[styles.menu, position, fullWidth && { width: anchorMeasure?.width }, propStyles?.menu]}
         >
-          <KeyboardAvoidingView behavior="height">
-            {withAutocomplete && (
-              <View style={[styles.searchContainer, propStyles?.searchContainer]}>
-                <UTTextInput
-                  inputRef={searchTextInputRef}
-                  onChange={handleQueryChange}
-                  onSubmitEditing={
-                    query && filteredOptions[0]
-                      ? () => handleOptionPress(() => onPress(filteredOptions[0]))
-                      : closeMenu
-                  }
-                  placeholder={autoCompletePlaceholder}
-                  value={query}
-                />
-              </View>
-            )}
-            <ListView
-              filteredOptions={filteredOptions}
-              handleOptionPress={handleOptionPress}
-              isMultiple={isMultiple}
-              ItemSeparatorComponent={ItemSeparatorComponent}
-              ListEmptyComponent={ListEmptyComponent}
-              maxHeight={maxHeight}
-              MenuOptionComponent={MenuOptionComponent}
-              onPress={onPress}
-              propStyles={propStyles}
-              query={query}
-              selectedOption={selectedOption}
-              usableWindowHeight={usableWindowHeight}
-              windowHeight={windowHeight}
-            />
-            {withGoogleAttribution && (
-              <View style={styles.attribution}>
-                <UTLabel colorTheme="gray" variant="small">
-                  {ATTRIBUTION}
-                </UTLabel>
-                <Image source={GoogleLogo} />
-              </View>
-            )}
-          </KeyboardAvoidingView>
+          <View onLayout={handleMenuLayout} ref={menuRef}>
+            <KeyboardAvoidingView behavior="height">
+              {withAutocomplete && (
+                <View style={[styles.searchContainer, propStyles?.searchContainer]}>
+                  <UTTextInput
+                    inputRef={searchTextInputRef}
+                    onChange={handleQueryChange}
+                    onSubmitEditing={
+                      query && filteredOptions[0]
+                        ? () => handleOptionPress(() => onPress(filteredOptions[0]))
+                        : closeMenu
+                    }
+                    placeholder={autoCompletePlaceholder}
+                    value={query}
+                  />
+                </View>
+              )}
+              <ListView
+                filteredOptions={filteredOptions}
+                handleOptionPress={handleOptionPress}
+                isMultiple={isMultiple}
+                ItemSeparatorComponent={ItemSeparatorComponent}
+                ListEmptyComponent={ListEmptyComponent}
+                maxHeight={maxHeight}
+                MenuOptionComponent={MenuOptionComponent}
+                onPress={onPress}
+                propStyles={propStyles}
+                query={query}
+                selectedOption={selectedOption}
+                usableWindowHeight={usableWindowHeight}
+                windowHeight={windowHeight}
+              />
+              {withGoogleAttribution && (
+                <View style={styles.attribution}>
+                  <UTLabel colorTheme="gray" variant="small">
+                    {ATTRIBUTION}
+                  </UTLabel>
+                  <Image source={GoogleLogo} />
+                </View>
+              )}
+            </KeyboardAvoidingView>
+          </View>
         </Surface>
       </Modal>
     </Fragment>

package/lib/components/UTMenu/styles.js

@@ -11,7 +11,6 @@ export default StyleSheet.create({
     backgroundColor: 'white',
     borderRadius: 8,
     left: 0,
-    paddingVertical: 4,
     position: 'absolute',
     zIndex: 1000
   },

package/lib/components/UTStatusMessage/README.md

@@ -0,0 +1,46 @@
+# UTStatusMessage
+
+The purpose of this component, as its name indicates, is to communicate a message about the status of the view or component in which it is contextually situated.
+
+## Props
+
+| Name                  | Type      | Default | Description                                                                                               |
+| --------------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------  |
+| children              | element   |         | The content to be rendered inside the component.                                                          |
+| style                 | object    |         | Custom styles for styling the component.                                                             |
+| colorTheme            | string    | default | Defines the color theme for the component.                                                                |
+| description           | string    |         | Description text providing additional context or information.                                             |
+| descriptionProps      | object    |         | Props to be applied to the description UTLabel.                                                           |
+| helpText              | string    |         | Help text displayed to guide the user.                                                                    |
+| helpTextProps         | object    |         | Props to be applied to the help text UTLabel.                                                             |
+| icon                  | string    |         | Icon to be displayed in the header.                                                                       |
+| iconProps             | object    |         | Props to be applied to the UTIcon                                                                          |
+| image                 | string    |         | URL of an image to be displayed in the header, replacing the icon.                                        |
+| loading               | bool      | false   | Indicates whether the component is in a loading state. Replaces the header.                               |
+| primaryAction         | func      |         | Callback function for the primary action.                                                                 |
+| primaryActionProps    | object    |         | Props to be applied to the primary action UTButton.                                                       |
+| primaryActionText     | string    |         | Text for the primary action UTButton.                                                                     |
+| secondaryAction       | func      |         | Callback function for the secondary action.                                                               |
+| secondaryActionProps  | object    |         | Props to be applied to the secondary action UTButton.                                                     |
+| secondaryActionText   | string    |         | Text for the secondary action UTButton.                                                                   |
+| showHeader            | bool      | true    | Indicates whether to display the header section of the component.                                         |
+| title                 | string    |         | Title for the component, providing context to the user.                                                   |
+| titleProps            | object    |         | Props to be applied to the title  UTLabel.                                                                |
+
+### colorTheme
+
+The value of `colorTheme` must be one of the following:
+
+- `accent`
+- `default`
+- `error`
+- `gradient`
+- `gray`
+- `identity1`
+- `identity2`
+- `identity3`
+- `identity4`
+- `info`
+- `negative`
+- `success`
+- `warning`

package/lib/components/UTStatusMessage/constants.js

@@ -0,0 +1,31 @@
+export const COLOR_THEMES = {
+  ACCENT: 'accent',
+  DEFAULT: 'default',
+  ERROR: 'error',
+  GRADIENT: 'gradient',
+  GRAY: 'gray',
+  IDENTITY_1: 'identity1',
+  IDENTITY_2: 'identity2',
+  IDENTITY_3: 'identity3',
+  IDENTITY_4: 'identity4',
+  INFO: 'info',
+  NEGATIVE: 'negative',
+  SUCCESS: 'success',
+  WARNING: 'warning'
+};
+
+export const ICON_COLOR_THEMES = {
+  [COLOR_THEMES.ACCENT]: 'accent',
+  [COLOR_THEMES.DEFAULT]: 'dark',
+  [COLOR_THEMES.ERROR]: 'error',
+  [COLOR_THEMES.GRADIENT]: 'light',
+  [COLOR_THEMES.GRAY]: 'gray',
+  [COLOR_THEMES.IDENTITY_1]: 'light',
+  [COLOR_THEMES.IDENTITY_2]: 'light',
+  [COLOR_THEMES.IDENTITY_3]: 'light',
+  [COLOR_THEMES.IDENTITY_4]: 'light',
+  [COLOR_THEMES.INFO]: 'information',
+  [COLOR_THEMES.NEGATIVE]: 'dark',
+  [COLOR_THEMES.SUCCESS]: 'success',
+  [COLOR_THEMES.WARNING]: 'warning'
+};

package/lib/components/UTStatusMessage/index.js

@@ -0,0 +1,133 @@
+import { bool, element, func, object, string } from 'prop-types';
+import React from 'react';
+import { View } from 'react-native';
+import { LinearGradient } from 'react-native-linear-gradient';
+
+import UTButton from '../UTButton';
+import UTIcon from '../UTIcon';
+import UTLabel from '../UTLabel';
+import UTLoading from '../UTLoading';
+import UTImage from '../UTImage';
+import { withTheme } from '../../theming';
+
+import { ICON_COLOR_THEMES, COLOR_THEMES } from './constants';
+import ownStyles from './styles';
+
+const UTStatusMessage = ({
+  children,
+  colorTheme = COLOR_THEMES.DEFAULT,
+  description,
+  descriptionProps,
+  helpText,
+  helpTextProps,
+  icon = 'IconInfoCircle',
+  iconProps = {},
+  image,
+  loading,
+  primaryAction,
+  primaryActionProps,
+  primaryActionText,
+  secondaryAction,
+  secondaryActionProps,
+  secondaryActionText,
+  showBanner = true,
+  showHeader = true,
+  style = {},
+  theme,
+  title,
+  titleProps
+}) => {
+  const Banner = colorTheme === COLOR_THEMES.GRADIENT && showBanner ? LinearGradient : View;
+  const IconContainer = colorTheme === COLOR_THEMES.GRADIENT && !showBanner ? LinearGradient : View;
+  return (
+    <View style={[ownStyles.container, style.container]}>
+      {loading ? (
+        <UTLoading loading text={null} />
+      ) : showHeader ? (
+        <Banner
+          angle={45}
+          colors={[theme.Palette?.identityGradient?.['01'], theme.Palette?.identityGradient?.['02']]}
+          end={{ x: 1, y: 0.5 }}
+          start={{ x: 0, y: 0.5 }}
+          style={[ownStyles.banner(theme, colorTheme, showBanner), style.banner]}
+          useAngle
+        >
+          {image ? (
+            <UTImage source={image} style={{ ...style.image }} />
+          ) : (
+            <IconContainer
+              angle={45}
+              colors={[theme.Palette?.identityGradient?.['01'], theme.Palette?.identityGradient?.['02']]}
+              end={{ x: 1, y: 0.5 }}
+              start={{ x: 0, y: 0.5 }}
+              style={ownStyles.iconContainer(theme, colorTheme)}
+              useAngle
+            >
+              <UTIcon colorTheme={ICON_COLOR_THEMES[colorTheme]} name={icon} {...iconProps} />
+            </IconContainer>
+          )}
+        </Banner>
+      ) : null}
+      {(title || description || helpText) && (
+        <View style={ownStyles.section}>
+          {title && (
+            <UTLabel style={ownStyles.label} variant="title3" weight="medium" {...titleProps}>
+              {title}
+            </UTLabel>
+          )}
+          {description && (
+            <UTLabel style={ownStyles.label} colorTheme="gray" variant="body" {...descriptionProps}>
+              {description}
+            </UTLabel>
+          )}
+          {helpText && (
+            <UTLabel style={ownStyles.label} colorTheme="gray" variant="small" {...helpTextProps}>
+              {helpText}
+            </UTLabel>
+          )}
+        </View>
+      )}
+      {children}
+      {(primaryAction || secondaryAction) && (
+        <View style={ownStyles.section}>
+          {primaryAction && (
+            <UTButton onClick={primaryAction} {...primaryActionProps}>
+              {primaryActionText}
+            </UTButton>
+          )}
+          {secondaryAction && (
+            <UTButton onClick={secondaryAction} variant="text" {...secondaryActionProps}>
+              {secondaryActionText}
+            </UTButton>
+          )}
+        </View>
+      )}
+    </View>
+  );
+};
+
+UTStatusMessage.propTypes = {
+  children: element,
+  colorTheme: string,
+  description: string,
+  descriptionProps: object,
+  helpText: string,
+  helpTextProps: object,
+  icon: string,
+  iconProps: object,
+  image: string,
+  loading: bool,
+  primaryAction: func,
+  primaryActionProps: object,
+  primaryActionText: string,
+  secondaryAction: func,
+  secondaryActionProps: object,
+  secondaryActionText: string,
+  showBanner: bool,
+  showHeader: bool,
+  style: object,
+  title: string,
+  titleProps: object
+};
+
+export default withTheme(UTStatusMessage);

package/lib/components/UTStatusMessage/styles.js

@@ -0,0 +1,68 @@
+import { StyleSheet } from 'react-native';
+
+import { COLOR_THEMES } from './constants';
+
+const getIconBackgroundColor = (colorTheme, theme) =>
+  ({
+    [COLOR_THEMES.ACCENT]: theme.Palette?.accent['01'],
+    [COLOR_THEMES.DEFAULT]: theme.Palette?.light['03'],
+    [COLOR_THEMES.ERROR]: theme.Palette?.error['01'],
+    [COLOR_THEMES.GRADIENT]: 'light',
+    [COLOR_THEMES.GRAY]: theme.Palette?.light['03'],
+    [COLOR_THEMES.IDENTITY_1]: theme.Palette?.identitySolid?.['01'],
+    [COLOR_THEMES.IDENTITY_2]: theme.Palette?.identitySolid?.['02'],
+    [COLOR_THEMES.IDENTITY_3]: theme.Palette?.identitySolid?.['03'],
+    [COLOR_THEMES.IDENTITY_4]: theme.Palette?.identitySolid?.['04'],
+    [COLOR_THEMES.INFO]: theme.Palette?.information['01'],
+    [COLOR_THEMES.NEGATIVE]: theme.Palette?.light['01'],
+    [COLOR_THEMES.SUCCESS]: theme.Palette?.success['01'],
+    [COLOR_THEMES.WARNING]: theme.Palette?.warning['01']
+  })[colorTheme];
+
+const getBannerBackgroundColor = (colorTheme, theme) =>
+  ({
+    [COLOR_THEMES.ACCENT]: theme.Palette?.accent['03'],
+    [COLOR_THEMES.DEFAULT]: theme.Palette?.gray['05'],
+    [COLOR_THEMES.ERROR]: theme.Palette?.error['03'],
+    [COLOR_THEMES.GRADIENT]: null,
+    [COLOR_THEMES.GRAY]: theme.Palette?.gray['03'],
+    [COLOR_THEMES.IDENTITY_1]: theme.Palette?.identitySolid?.['01'],
+    [COLOR_THEMES.IDENTITY_2]: theme.Palette?.identitySolid?.['02'],
+    [COLOR_THEMES.IDENTITY_3]: theme.Palette?.identitySolid?.['03'],
+    [COLOR_THEMES.IDENTITY_4]: theme.Palette?.identitySolid?.['04'],
+    [COLOR_THEMES.INFO]: theme.Palette?.information['03'],
+    [COLOR_THEMES.NEGATIVE]: theme.Palette?.light['01'],
+    [COLOR_THEMES.SUCCESS]: theme.Palette?.success['03'],
+    [COLOR_THEMES.WARNING]: theme.Palette?.warning['03']
+  })[colorTheme];
+
+export default StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    display: 'flex',
+    gap: 24,
+    width: '100%'
+  },
+  section: {
+    alignItems: 'center',
+    display: 'flex',
+    gap: 8
+  },
+  iconContainer: (theme, colorTheme) => ({
+    alignItems: 'center',
+    backgroundColor: getIconBackgroundColor(colorTheme, theme),
+    borderRadius: 100,
+    display: 'flex',
+    height: 56,
+    justifyContent: 'center',
+    width: 56
+  }),
+  banner: (theme, colorTheme, showBanner) => ({
+    alignItems: 'center',
+    backgroundColor: showBanner ? getBannerBackgroundColor(colorTheme, theme) : 'transparent',
+    display: 'flex',
+    justifyContent: 'center',
+    padding: 12,
+    width: '100%'
+  })
+});

package/lib/index.js

@@ -38,6 +38,7 @@ export { default as TransitionView } from './components/TransitionView';
 export { default as UTActionCard } from './components/UTActionCard';
 export { default as UTAutocomplete } from './components/UTAutocomplete';
 export { default as UTBadge } from './components/UTBadge';
+export { default as UTBanner } from './components/UTBanner';
 export { default as UTBottomSheet } from './components/UTBottomSheet';
 export { default as UTButton } from './components/UTButton';
 export { default as UTButtonGroup } from './components/UTButtonGroup';
@@ -60,6 +61,7 @@ export { default as UTRoundView } from './components/UTRoundView';
 export { default as UTSearchField } from './components/UTSearchField';
 export { default as UTSelect } from './components/UTSelect';
 export { default as UTSelectableCard } from './components/UTSelectableCard';
+export { default as UTStatusMessage } from './components/UTStatusMessage';
 export { default as UTStepFeedback } from './components/UTStepFeedback';
 export { default as UTSwitch } from './components/UTSwitch';
 export { default as UTTextArea } from './components/UTTextArea';
@@ -68,7 +70,6 @@ export { default as UTTooltip } from './components/UTTooltip';
 export { default as UTTracker } from './components/UTTracker';
 export { default as UTValidation } from './components/UTValidation';
 export { default as UTWorkflowContainer } from './components/UTWorkflowContainer';
-export { default as UTBanner } from './components/UTBanner';
 
 // Theming
 export * from './theming';

package/lib/theming/DefaultTheme.js

@@ -216,6 +216,17 @@ const DefaultTheme = {
       '03': colors.actionNegative03,
       '04': colors.actionNegative04,
       '05': colors.actionNegative05
+    },
+    identitySolid: {
+      '01': '#5E3BEB',
+      '02': '#20BBFC',
+      '03': '#25E0A6',
+      '04': '#A9FA5C',
+      '05': '#285AFF'
+    },
+    identityGradient: {
+      '01': '#25E0A6',
+      '02': '#20BBFC'
     }
   }
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.31.0",
+  "version": "1.31.2",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [
@@ -29,6 +29,7 @@
     "react-native": "*",
     "react-native-document-picker": "^9.0.1",
     "react-native-image-picker": "^5.0.0",
+    "react-native-linear-gradient": "^2.8.3",
     "react-native-pager-view": "^6.2.0",
     "react-native-svg": "^13.0.0",
     "react-native-vector-icons": "^10.0.0"
@@ -43,11 +44,12 @@
     "numeral": "^2.0.6",
     "pdf-lib": "^1.17.1",
     "react-native-collapsible": "^1.6.1",
+    "react-native-linear-gradient": "^2.8.3",
     "react-native-markdown-display": "^7.0.0-alpha.2",
     "react-native-modal": "^13.0.1",
     "react-native-pager-view": "^6.2.1",
-    "react-native-svg": "^13.13.0",
-    "react-native-safe-area-context": "^4.5.0"
+    "react-native-safe-area-context": "^4.5.0",
+    "react-native-svg": "^13.13.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.10",