@widergy/mobile-ui 1.15.0 → 1.16.0

package/lib/components/UTCheckBox/index.js

@@ -1,45 +1,45 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import { View, Pressable } from 'react-native';
 
 import { useTheme } from '../../theming';
-import UTIcon from '../UTIcon';
 import UTFieldLabel from '../UTFieldLabel';
+import UTIcon from '../UTIcon';
 
 import { CHECKED_ICON, INDETERMINATE_ICON } from './constants';
+import { propTypes, defaultProps } from './proptypes';
 import { retrieveStyle } from './theme';
-import propTypes, { DEFAULT_PROPS } from './proptypes';
+import styles from './styles';
 
 const UTCheckBox = ({
   checked,
   disabled,
+  isSimple,
   indeterminate,
   label,
   onPress,
   required,
   reversed,
   spacing,
-  style
+  style,
+  variant
 }) => {
   const theme = useTheme();
   const [pressed, setPressed] = useState(false);
 
-  const { containerStyles, iconContainerStyles, touchableStyles } = useMemo(
+  const { containerStyles, iconContainerStyles, boxStyles, pressableStyles } = useMemo(
     () =>
       retrieveStyle({
         checked,
         disabled,
         indeterminate,
+        pressed,
         reversed,
         spacing,
         style,
-        theme
+        theme,
+        variant
       }),
-    [checked, disabled, indeterminate, reversed, spacing, style, theme]
-  );
-
-  const combinedTouchableStyles = useMemo(
-    () => [touchableStyles.root, pressed && touchableStyles.pressed],
-    [pressed, touchableStyles]
+    [checked, disabled, indeterminate, reversed, spacing, style, theme, variant, pressed]
   );
 
   const iconName = useMemo(
@@ -47,25 +47,36 @@ const UTCheckBox = ({
     [indeterminate, checked]
   );
 
-  const handlePressIn = () => setPressed(true);
-  const handlePressOut = () => setPressed(false);
+  const handlePressIn = useCallback(() => setPressed(true), []);
+  const handlePressOut = useCallback(() => setPressed(false), []);
 
   return (
-    <Pressable disabled={disabled} onPress={onPress} onPressIn={handlePressIn} onPressOut={handlePressOut}>
+    <Pressable
+      style={pressableStyles}
+      disabled={disabled}
+      onPress={onPress}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+    >
       <View style={containerStyles}>
-        <View style={combinedTouchableStyles}>
-          <View style={iconContainerStyles}>
-            <UTIcon colorTheme="light" name={iconName} size={16} />
+        {isSimple ? (
+          <UTIcon name="IconCheck" shade="04" colorTheme="accent" style={!checked && styles.hidden} />
+        ) : (
+          <View style={boxStyles}>
+            <View style={iconContainerStyles}>
+              <UTIcon colorTheme="light" name={iconName} size={16} />
+            </View>
           </View>
-        </View>
-        <UTFieldLabel required={required}>{label}</UTFieldLabel>
+        )}
+        <UTFieldLabel required={required} colorTheme={checked && 'accent'} shade={checked && '05'}>
+          {label}
+        </UTFieldLabel>
       </View>
     </Pressable>
   );
 };
 
-UTCheckBox.defaultProps = DEFAULT_PROPS;
-
+UTCheckBox.defaultProps = defaultProps;
 UTCheckBox.propTypes = propTypes;
 
 export default UTCheckBox;

package/lib/components/UTCheckBox/proptypes.js

@@ -1,18 +1,27 @@
 import { bool, func, string } from 'prop-types';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
-export const DEFAULT_PROPS = {
+import { SPACING } from './constants';
+
+export const defaultProps = {
+  /**
+   * @deprecated The "isSimple" prop is deprecated and will be removed in a future release. Please do not use it.
+   */
+  isSimple: false,
+  spacing: SPACING.LARGE,
   style: {}
 };
 
-export default {
+export const propTypes = {
   checked: bool,
   disabled: bool,
   indeterminate: bool,
+  isSimple: bool,
   label: string,
   onPress: func,
   required: bool,
   reversed: bool,
   spacing: string,
-  style: ViewPropTypes.style
+  style: ViewPropTypes.style,
+  variant: string
 };

package/lib/components/UTCheckBox/styles.js

@@ -0,0 +1,7 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  hidden: {
+    opacity: 0
+  }
+});

package/lib/components/UTCheckBox/theme.js

@@ -1,4 +1,6 @@
-import { SMALL } from './constants';
+import { BUTTON_VARIANT } from '../UTCheckList/constants';
+
+import { SPACING } from './constants';
 
 const NORMAL_SPACING = 16;
 const SMALL_SPACING = 8;
@@ -15,69 +17,111 @@ const baseCheckBoxTheme = theme => ({
     height: 20,
     width: 20
   },
-  touchable: {
-    root: {
-      borderRadius: 25,
-      padding: 6
-    },
-    pressed: {
-      backgroundColor: theme.Palette.accent['02'],
-      borderColor: theme.Palette.accent['03'],
-      borderWidth: 1,
-      padding: 5
-    }
+  box: {
+    borderRadius: 25,
+    overflow: 'hidden',
+    padding: 6
   }
 });
 
-const conditionalContainerStyle = (disabled, reversed) => ({
-  ...(reversed && {
-    flexDirection: 'row-reverse',
-    justifyContent: 'space-between'
-  }),
-  ...(disabled && {
-    opacity: 0.5
-  })
-});
+const conditionalStyles = ({
+  checked,
+  disabled,
+  indeterminate,
+  reversed,
+  spacing,
+  variant,
+  pressed,
+  theme
+}) => {
+  const spacingValue = spacing === SPACING.SMALL ? SMALL_SPACING : NORMAL_SPACING;
 
-const conditionalIconContainerStyle = (checked, indeterminate, theme) => ({
-  ...((checked || indeterminate) && {
-    backgroundColor: theme.Palette.accent['04'],
-    borderColor: theme.Palette.accent['04']
-  })
-});
+  const pressable =
+    variant === BUTTON_VARIANT
+      ? {
+          borderRadius: 8,
+          paddingHorizontal: 16,
+          paddingVertical: 12,
+          ...(pressed && {
+            backgroundColor: theme.Palette.light['04']
+          })
+        }
+      : {};
 
-const conditionalTouchableStyle = (reversed, spacing) => {
-  const spacingValue = spacing === SMALL ? SMALL_SPACING : NORMAL_SPACING;
   return {
-    marginRight: spacingValue,
-    ...(reversed && {
-      marginLeft: spacingValue,
-      marginRight: 0
-    })
+    container: {
+      ...(reversed && {
+        flexDirection: 'row-reverse',
+        justifyContent: 'space-between'
+      }),
+      ...(disabled && {
+        opacity: 0.5
+      })
+    },
+    iconContainer: {
+      ...((checked || indeterminate) && {
+        backgroundColor: theme.Palette.accent['04'],
+        borderColor: theme.Palette.accent['04']
+      })
+    },
+    box: {
+      ...(reversed
+        ? {
+            marginLeft: spacingValue,
+            marginRight: 0
+          }
+        : { marginRight: spacingValue }),
+      ...(pressed &&
+        variant !== BUTTON_VARIANT && {
+          backgroundColor: theme.Palette.accent['02'],
+          borderColor: theme.Palette.accent['03'],
+          borderWidth: 1,
+          overflow: 'hidden',
+          padding: 5
+        })
+    },
+    pressable
   };
 };
 
-export const retrieveStyle = ({ checked, disabled, indeterminate, reversed, spacing, style, theme }) => {
-  const baseTheme = baseCheckBoxTheme(theme);
+export const retrieveStyle = ({
+  checked,
+  disabled,
+  indeterminate,
+  reversed,
+  spacing,
+  style,
+  theme,
+  variant,
+  pressed
+}) => {
+  const baseThemeStyles = baseCheckBoxTheme(theme);
 
-  const containerStyles = {
-    ...baseTheme.container,
-    ...conditionalContainerStyle(disabled, reversed),
-    ...style
-  };
+  const { container, iconContainer, box, pressable } = conditionalStyles({
+    checked,
+    disabled,
+    indeterminate,
+    reversed,
+    spacing,
+    variant,
+    pressed,
+    theme
+  });
 
-  const iconContainerStyles = {
-    ...baseTheme.iconContainer,
-    ...conditionalIconContainerStyle(checked, indeterminate, theme)
-  };
-
-  const touchableStyles = {
-    pressed: baseTheme.touchable.pressed,
-    root: {
-      ...baseTheme.touchable.root,
-      ...conditionalTouchableStyle(reversed, spacing)
-    }
+  return {
+    containerStyles: {
+      ...baseThemeStyles.container,
+      ...container,
+      ...style
+    },
+    iconContainerStyles: {
+      ...baseThemeStyles.iconContainer,
+      ...iconContainer
+    },
+    boxStyles: {
+      ...baseThemeStyles.box,
+      ...box
+    },
+    pressableStyles: pressable
   };
-
-  return { containerStyles, iconContainerStyles, touchableStyles };
 };

package/lib/components/UTCheckList/README.MD

@@ -6,16 +6,20 @@
 
 ## Props
 
-| Name           | Type   | Default | Description                                                                                                            |
-| -------------- | ------ | ------- | ---------------------------------------------------------------------------------------------------------------------- |
-| error          | string |         | Error message to display.                                                                                              |
-| input          | shape  |         | Input configuration object containing `value` and `onChange`.                                                          |
-| label          | string |         | Label for the checklist.                                                                                               |
-| options        | array  |         | Array of options to be displayed as checkboxes. Each option is an object with `label` and `value`.                     |
-| required       | bool   | false   | Indicates if the checklist is required.                                                                                |
-| reversed       | bool   | false   | If true, reverses the order of label and checkbox.                                                                     |
-| selectAllLabel | string |         | Label for the "Select All" checkbox.                                                                                   |
-| style          | shape  | {}      | Custom styles to apply to the checklist. Can contain `root`, `header`, `checkboxesContainer`, `item`, and `selectAll`. |
+| Name              | Type   | Default | Description                                                                                                            |
+| ----------------- | ------ | ------- | ---------------------------------------------------------------------------------------------------------------------- |
+| error             | string |         | Error message to display.                                                                                              |
+| input             | shape  |         | Input configuration object containing `value` and `onChange`.                                                          |
+| label             | string |         | Label for the checklist.                                                                                               |
+| options           | array  |         | Array of options to be displayed as checkboxes. Each option is an object with `label` and `value`.                     |
+| required          | bool   | false   | Indicates if the checklist is required.                                                                                |
+| reversed          | bool   | false   | If true, reverses the order of label and checkbox.                                                                     |
+| selectAllLabel    | string |         | Label for the "Select All" checkbox.                                                                                   |
+| showSelectAll     | bool   | true    | Determines whether to show the "Select All" checkbox.                                                                  |
+| style             | shape  | {}      | Custom styles to apply to the checklist. Can contain `root`, `header`, `checkboxesContainer`, `item`, and `selectAll`. |
+| variant           | string |         | Variant style for the checklist.                                                                                       |
+| horizontalSpacing | string | large   | Spacing between the checkbox and the label horizontally.                                                               |
+| verticalSpacing   | string | large   | Spacing between the checkbox items vertically.                                                                         |
 
 ### Input Object
 

package/lib/components/UTCheckList/constants.js

@@ -1 +1,6 @@
-export const SMALL = 'small';
+export const SPACING = {
+  SMALL: 'small',
+  LARGE: 'large'
+};
+
+export const BUTTON_VARIANT = 'button';

package/lib/components/UTCheckList/index.js

@@ -1,22 +1,21 @@
 import React, { useEffect, useCallback, useMemo } from 'react';
-import { arrayOf, bool, func, shape, string } from 'prop-types';
-import { isEmpty } from '@widergy/web-utils/lib/array';
 import { View } from 'react-native';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
 import { formatErrorToValidation } from '../UTValidation/utils';
 import UTCheckBox from '../UTCheckBox';
 import UTFieldLabel from '../UTFieldLabel';
 import UTValidation from '../UTValidation';
 
-import { keyExtractor, isChecked, convertIfIsString } from './utils';
+import { keyExtractor, isChecked, convertIfIsString, getPropValueBasedOnVariant } from './utils';
 import styles from './styles';
-import { SMALL } from './constants';
+import { defaultProps, propTypes } from './proptypes';
+import { BUTTON_VARIANT, SPACING } from './constants';
 
 const UTCheckList = ({
   error,
   horizontalSpacing,
   input,
+  isSimple,
   label,
   options,
   required,
@@ -24,52 +23,59 @@ const UTCheckList = ({
   selectAllLabel,
   showSelectAll,
   style,
+  variant,
   verticalSpacing
 }) => {
+  const { value, onChange } = input;
+
+  const reversedBasedOnVariant = getPropValueBasedOnVariant(variant, reversed, true);
+  const verticalSpacingBasedOnVariant = getPropValueBasedOnVariant(variant, verticalSpacing, SPACING.SMALL);
+
   const validationData = useMemo(() => error && formatErrorToValidation(error, { withIcon: false }), [error]);
 
   useEffect(() => {
-    if (input && input.value) {
-      const convertedValue = convertIfIsString(input.value);
-      if (JSON.stringify(convertedValue) !== JSON.stringify(input.value)) {
-        input.onChange(convertedValue);
+    if (value) {
+      const convertedValue = convertIfIsString(value);
+      if (JSON.stringify(convertedValue) !== JSON.stringify(value)) {
+        onChange(convertedValue);
       }
     }
-  }, [input]);
+  }, [value, onChange]);
 
   const enabledOptions = useMemo(() => options.filter(option => !option.disabled), [options]);
 
   const areAllSelected = useMemo(
-    () => enabledOptions.every(option => input.value?.includes(option.value)),
-    [enabledOptions, input.value]
+    () => enabledOptions.every(option => value?.includes(option.value)),
+    [enabledOptions, value]
   );
 
   const isIndeterminate = useMemo(
-    () => enabledOptions.some(option => input.value?.includes(option.value)) && !areAllSelected,
-    [enabledOptions, input.value, areAllSelected]
+    () => enabledOptions.some(option => value?.includes(option.value)) && !areAllSelected,
+    [enabledOptions, value, areAllSelected]
   );
 
   const handleChange = useCallback(
     receivedValue => () => {
-      const { onChange, value } = input;
-      const newValues = !value?.includes(receivedValue)
-        ? [...(value || []), receivedValue]
-        : value.filter(elem => elem !== receivedValue);
-      onChange(isEmpty(newValues) ? [] : newValues);
+      if (isSimple) {
+        onChange([receivedValue]);
+      } else {
+        const newValues = !value?.includes(receivedValue)
+          ? [...(value || []), receivedValue]
+          : value.filter(elem => elem !== receivedValue);
+        onChange(newValues);
+      }
     },
-    [input]
+    [value, onChange, isSimple]
   );
 
   const handleCheckAll = useCallback(() => {
-    if (!areAllSelected && options) {
-      input.onChange(enabledOptions.map(item => item.value));
-    } else {
-      input.onChange([]);
-    }
-  }, [areAllSelected, enabledOptions, input, options]);
+    onChange(areAllSelected ? [] : enabledOptions.map(item => item.value));
+  }, [areAllSelected, enabledOptions, onChange]);
 
   return (
-    <View style={[styles.container, verticalSpacing === SMALL && styles.smallVerticalSpacing, style.root]}>
+    <View
+      style={[styles.container, verticalSpacing === SPACING.SMALL && styles.smallVerticalSpacing, style.root]}
+    >
       <View style={[styles.headerContainer, style.header]}>
         {label && <UTFieldLabel required={required}>{label}</UTFieldLabel>}
         {validationData && <UTValidation validationData={validationData} />}
@@ -77,31 +83,35 @@ const UTCheckList = ({
       <View
         style={[
           styles.checkboxesContainer,
-          verticalSpacing === SMALL && styles.smallVerticalSpacing,
+          verticalSpacingBasedOnVariant === SPACING.SMALL && styles.smallVerticalSpacing,
+          variant === BUTTON_VARIANT && styles.buttonVariant,
           style.checkboxesContainer
         ]}
       >
-        {showSelectAll && (
+        {showSelectAll && !isSimple && (
           <UTCheckBox
             checked={areAllSelected}
             indeterminate={isIndeterminate}
             label={selectAllLabel}
             onPress={handleCheckAll}
-            reversed={reversed}
+            reversed={reversedBasedOnVariant}
             spacing={horizontalSpacing}
             style={style.selectAll}
+            variant={variant}
           />
         )}
         {options?.map((item, index) => (
           <UTCheckBox
-            checked={isChecked(item, input.value)}
+            isSimple={isSimple}
+            checked={isChecked(item, value)}
             disabled={item.disabled}
             key={keyExtractor(item, index)}
             label={item.label}
             onPress={handleChange(item.value)}
-            reversed={reversed}
+            reversed={reversedBasedOnVariant}
             spacing={horizontalSpacing}
             style={style.item}
+            variant={variant}
           />
         ))}
       </View>
@@ -109,39 +119,7 @@ const UTCheckList = ({
   );
 };
 
-UTCheckList.defaultProps = {
-  showSelectAll: true,
-  style: {}
-};
-
-UTCheckList.propTypes = {
-  error: string,
-  horizontalSpacing: string,
-  input: shape({
-    value: arrayOf(string),
-    onChange: func
-  }),
-  label: string,
-  options: arrayOf(
-    shape({
-      checked: bool,
-      disabled: bool,
-      label: string,
-      value: string
-    })
-  ),
-  required: bool,
-  reversed: bool,
-  selectAllLabel: string,
-  showSelectAll: bool,
-  style: shape({
-    checkboxesContainer: ViewPropTypes.style,
-    header: ViewPropTypes.style,
-    item: ViewPropTypes.style,
-    root: ViewPropTypes.style,
-    selectAll: ViewPropTypes.style
-  }),
-  verticalSpacing: string
-};
+UTCheckList.defaultProps = defaultProps;
+UTCheckList.propTypes = propTypes;
 
 export default UTCheckList;

package/lib/components/UTCheckList/proptypes.js

@@ -0,0 +1,48 @@
+import { arrayOf, bool, func, shape, string } from 'prop-types';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+
+import { SPACING } from './constants';
+
+export const defaultProps = {
+  horizontalSpacing: SPACING.LARGE,
+  input: {
+    value: [],
+    onChange: () => {}
+  },
+  isSimple: false,
+  showSelectAll: true,
+  style: {},
+  verticalSpacing: SPACING.LARGE
+};
+
+export const propTypes = {
+  error: string,
+  horizontalSpacing: string,
+  input: shape({
+    value: arrayOf(string),
+    onChange: func
+  }),
+  isSimple: bool,
+  label: string,
+  options: arrayOf(
+    shape({
+      checked: bool,
+      disabled: bool,
+      label: string,
+      value: string
+    })
+  ),
+  required: bool,
+  reversed: bool,
+  selectAllLabel: string,
+  showSelectAll: bool,
+  style: shape({
+    checkboxesContainer: ViewPropTypes.style,
+    header: ViewPropTypes.style,
+    item: ViewPropTypes.style,
+    root: ViewPropTypes.style,
+    selectAll: ViewPropTypes.style
+  }),
+  variant: string,
+  verticalSpacing: string
+};

package/lib/components/UTCheckList/styles.js

@@ -1,20 +1,25 @@
 import { StyleSheet } from 'react-native';
 
-const NORMAL_SPACING = 16;
-const SMALL_SPACING = 8;
+const SPACING = {
+  LARGE: 16,
+  SMALL: 8
+};
 
 export default StyleSheet.create({
+  buttonVariant: {
+    width: '100%'
+  },
   checkboxesContainer: {
     alignSelf: 'flex-start',
-    rowGap: NORMAL_SPACING
+    rowGap: SPACING.LARGE
   },
   container: {
-    rowGap: NORMAL_SPACING
+    rowGap: SPACING.LARGE
   },
   headerContainer: {
     rowGap: 8
   },
   smallVerticalSpacing: {
-    rowGap: SMALL_SPACING
+    rowGap: SPACING.SMALL
   }
 });

package/lib/components/UTCheckList/utils.js

@@ -1,5 +1,7 @@
 import { isString } from 'lodash';
 
+import { BUTTON_VARIANT } from './constants';
+
 export const keyExtractor = (_, index) => `CB-${index}`;
 
 export const isChecked = (item, inputValue) =>
@@ -7,3 +9,6 @@ export const isChecked = (item, inputValue) =>
 
 export const convertIfIsString = value =>
   isString(value) ? (value.length === 0 ? [] : JSON.parse(value.replace(/'/g, '"'))) : value;
+
+export const getPropValueBasedOnVariant = (variant, prop, defaultValue) =>
+  variant === BUTTON_VARIANT ? (prop ?? defaultValue) : prop;

package/lib/components/UTFieldLabel/index.js

@@ -7,14 +7,14 @@ import UTLabel from '../UTLabel';
 import { REQUIRED_LABEL } from './constants';
 import styles from './styles';
 
-const UTFieldLabel = ({ children, colorTheme, required, variant }) => {
+const UTFieldLabel = ({ children, colorTheme, required, variant, weight }) => {
   return (
     <View style={styles.label}>
       <UTLabel colorTheme={colorTheme} variant={variant}>
         {children}
       </UTLabel>
       {required && (
-        <UTLabel colorTheme="error" shade="04" variant={variant}>
+        <UTLabel colorTheme="error" shade="04" variant={variant} weight={weight}>
           {REQUIRED_LABEL}
         </UTLabel>
       )}
@@ -25,7 +25,8 @@ const UTFieldLabel = ({ children, colorTheme, required, variant }) => {
 UTFieldLabel.propTypes = {
   colorTheme: string,
   required: bool,
-  variant: string
+  variant: string,
+  weight: string
 };
 
 export default UTFieldLabel;