@widergy/mobile-ui 1.33.4 → 1.34.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.34.0](https://github.com/widergy/mobile-ui/compare/v1.33.4...v1.34.0) (2025-01-27)
+
+
+### Features
+
+* [EVENSA-66] selectable card children ([#408](https://github.com/widergy/mobile-ui/issues/408)) ([427cf76](https://github.com/widergy/mobile-ui/commit/427cf761a98979cfcdf11528ad15d89717004394))
+
 ## [1.33.4](https://github.com/widergy/mobile-ui/compare/v1.33.3...v1.33.4) (2025-01-20)
 
 

package/lib/components/UTBottomSheet/README.md

@@ -8,26 +8,27 @@
 
 | Name                      | Type     | Default     | Description                                                                 |
 | ------------------------- | -------- | ----------- | --------------------------------------------------------------------------- |
-| `adjustableHeight`         | `bool`   | `false`     | If true the height of the component adjusts to the content.                 |
+| `actionAlignment`         | `string` |             | Aligns the actions.                                                         |
+| `adjustableHeight`        | `bool`   | `false`     | If true the height of the component adjusts to the content.                 |
 | `buttonText`              | `string` |             | Text for the button that appears in the top right corner of the header.     |
 | `description`             | `string` |             | Description that appears below the title in the header.                     |
 | `onClose`                 | `func`   |             | Function called when the bottom sheet is closed.                            |
-| `required`                | `bool`   |             | Indicates if the field is required, showing an asterisk in the title.       |
-| `title`                   | `string` |             | Title that appears in the bottom sheet header.                              |
-| `titleProps`              | `object` |             | Props for the title label                                                   |
-| `visible`                 | `bool`   |             | Controls the visibility of the bottom sheet.                                |
-| `scrolleable`             | `bool`   | `false`     | Determines if the content inside the bottom sheet should be scrollable.     |
-| `actionAlignment`         | `string` |             | Aligns the actions.                                                         |
 | `onCloseProps`            | `object` |             | Additional props passed to the `onClose` function (optional).               |
 | `primaryAction`           | `func`   |             | Callback for the primary action button.                                     |
 | `primaryActionProps`      | `object` |             | Props for the primary action button.                                        |
 | `primaryActionText`       | `string` |             | Text for the primary action button.                                         |
+| `required`                | `bool`   |             | Indicates if the field is required, showing an asterisk in the title.       |
+| `scrolleable`             | `bool`   | `false`     | Determines if the content inside the bottom sheet should be scrollable.     |
 | `secondaryAction`         | `func`   |             | Callback for the secondary action button.                                   |
 | `secondaryActionProps`    | `object` |             | Props for the secondary action button.                                      |
 | `secondaryActionText`     | `string` |             | Text for the secondary action button.                                       |
 | `tertiaryAction`          | `func`   |             | Callback for the tertiary action button.                                    |
 | `tertiaryActionProps`     | `object` |             | Props for the tertiary action button .                                      |
 | `tertiaryActionText`      | `string` |             | Text for the tertiary action button.                                        |
+| `title`                   | `string` |             | Title that appears in the bottom sheet header.                              |
+| `titleProps`              | `object` |             | Props for the title label                                                   |
+| `visible`                 | `bool`   |             | Controls the visibility of the bottom sheet.                                |
+| `withBodyPadding`         | `bool`   | `true`      | Controls the visibility of the bottom sheet.                                |
 
 ### actionAlignment
 

package/lib/components/UTBottomSheet/index.js

@@ -15,8 +15,8 @@ import { ACTION_ALIGNMENTS } from './constants';
 const screenHeight = Dimensions.get('window').height;
 
 const UTBottomSheet = ({
-  adjustableHeight = false,
   actionAlignment: actionAlignment_,
+  adjustableHeight = false,
   buttonText,
   children,
   description,
@@ -35,7 +35,8 @@ const UTBottomSheet = ({
   tertiaryActionText,
   title,
   titleProps = {},
-  visible
+  visible,
+  withBodyPadding = true
 }) => {
   const [height, setHeight] = useState('70%');
   const [modalHeight, setModalHeight] = useState(height);
@@ -94,12 +95,12 @@ const UTBottomSheet = ({
       style={styles.modal}
       swipeDirection="down"
     >
-      <Animated.View style={[styles.animatedContainer, { height: modalHeight }, pan.getLayout()]}>
-        <SafeAreaView onLayout={onLayout}>
+      <Animated.View style={[styles.animatedContainer(theme), { height: modalHeight }, pan.getLayout()]}>
+        <SafeAreaView onLayout={onLayout} style={styles.content(adjustableHeight)}>
           <View style={styles.dragHandle}>
             <View style={styles.handleIndicator(theme)} />
           </View>
-          <View style={styles.content}>
+          <View style={styles.content(adjustableHeight)}>
             <View style={styles.header}>
               <View style={styles.headerTopRow}>
                 <UTFieldLabel
@@ -128,46 +129,49 @@ const UTBottomSheet = ({
                 </UTLabel>
               )}
             </View>
-            <ChildrenContainer keyboardShouldPersistTaps="handled" style={styles.childrenContainer}>
+            <ChildrenContainer
+              keyboardShouldPersistTaps="handled"
+              style={styles.childrenContainer(adjustableHeight, withBodyPadding)}
+            >
               {children}
             </ChildrenContainer>
-          </View>
-          <View style={styles.actions(actionAlignment)}>
-            {[
-              {
-                key: 'primaryAction',
-                onPress: primaryAction,
-                text: primaryActionText,
-                ...primaryActionProps
-              },
-              {
-                key: 'secondaryAction',
-                onPress: secondaryAction,
-                text: secondaryActionText,
-                variant: 'semitransparent',
-                ...secondaryActionProps
-              },
-              {
-                key: 'tertiaryAction',
-                onPress: tertiaryAction,
-                text: tertiaryActionText,
-                variant: 'text',
-                ...tertiaryActionProps
-              }
-            ].map(
-              ({ text, key, onPress, ...actionProps }) =>
-                onPress && (
-                  <UTButton
-                    key={key}
-                    onPress={onPress}
-                    size="large"
-                    style={styles.action(actionAlignment)}
-                    {...actionProps}
-                  >
-                    {text}
-                  </UTButton>
-                )
-            )}
+            <View style={styles.actions(actionAlignment)}>
+              {[
+                {
+                  key: 'primaryAction',
+                  variant: 'semitransparent',
+                  onPress: primaryAction,
+                  text: primaryActionText,
+                  ...primaryActionProps
+                },
+                {
+                  key: 'secondaryAction',
+                  onPress: secondaryAction,
+                  text: secondaryActionText,
+                  ...secondaryActionProps
+                },
+                {
+                  key: 'tertiaryAction',
+                  onPress: tertiaryAction,
+                  text: tertiaryActionText,
+                  variant: 'text',
+                  ...tertiaryActionProps
+                }
+              ].map(
+                ({ text, key, onPress, ...actionProps }) =>
+                  onPress && (
+                    <UTButton
+                      key={key}
+                      onPress={onPress}
+                      size="large"
+                      style={styles.action(actionAlignment)}
+                      {...actionProps}
+                    >
+                      {text}
+                    </UTButton>
+                  )
+              )}
+            </View>
           </View>
         </SafeAreaView>
       </Animated.View>
@@ -180,8 +184,8 @@ UTBottomSheet.defaultProps = {
 };
 
 UTBottomSheet.propTypes = {
-  adjustableHeight: bool,
   actionAlignment: string,
+  adjustableHeight: bool,
   buttonText: string,
   description: string,
   onClose: func,
@@ -199,7 +203,8 @@ UTBottomSheet.propTypes = {
   tertiaryActionText: string,
   title: string,
   titleProps: object,
-  visible: bool
+  visible: bool,
+  withBodyPadding: bool
 };
 
 export default UTBottomSheet;

package/lib/components/UTBottomSheet/styles.js

@@ -3,31 +3,59 @@ import { StyleSheet } from 'react-native';
 import { ACTION_ALIGNMENTS } from './constants';
 
 const styles = StyleSheet.create({
-  animatedContainer: {
-    backgroundColor: 'white', // When the component is standardized, should change to palette color
+  action: actionAlignment => ({
+    root: {
+      display: 'flex',
+      alignItems: 'center',
+      flex: 1,
+      flexGrow: 1,
+      borderRadius: {
+        [ACTION_ALIGNMENTS.VERTICAL]: 4,
+        [ACTION_ALIGNMENTS.HORIZONTAL]: 0
+      }[actionAlignment]
+    }
+  }),
+  actions: actionAlignment => ({
+    display: 'flex',
+    ...{
+      [ACTION_ALIGNMENTS.VERTICAL]: {
+        flexDirection: 'coloumn',
+        paddingHorizontal: 16,
+        gap: 8,
+        paddingBottom: 16
+      },
+      [ACTION_ALIGNMENTS.HORIZONTAL]: {
+        flexDirection: 'row'
+      }
+    }[actionAlignment]
+  }),
+  animatedContainer: theme => ({
+    backgroundColor: theme.Palette.light['01'],
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
     overflow: 'hidden'
-  },
-  childrenContainer: {
-    flexShrink: 1
-  },
-  content: {
-    padding: 16,
-    rowGap: 16
-  },
+  }),
+  childrenContainer: (adjustableHeight, withBodyPadding) => ({
+    flex: adjustableHeight ? 0 : 1,
+    paddingHorizontal: withBodyPadding ? 16 : 0
+  }),
+  content: adjustableHeight => ({
+    flexGrow: adjustableHeight ? 0 : 1
+  }),
   dragHandle: {
     alignItems: 'center',
     backgroundColor: 'transparent',
     padding: 16
   },
   handleIndicator: theme => ({
-    backgroundColor: theme.Palette.light['04'], // When the component is standardized, should change to palette color: light 04
+    backgroundColor: theme.Palette.light['04'],
     borderRadius: 2.5,
     height: 5,
     width: 40
   }),
   header: {
+    paddingBottom: 16,
+    paddingHorizontal: 16,
     rowGap: 8
   },
   headerTopRow: {
@@ -42,32 +70,7 @@ const styles = StyleSheet.create({
   },
   title: {
     flex: 1
-  },
-  action: actionAlignment => ({
-    root: {
-      display: 'flex',
-      alignItems: 'center',
-      flexGrow: 1,
-      borderRadius: {
-        [ACTION_ALIGNMENTS.VERTICAL]: 4,
-        [ACTION_ALIGNMENTS.HORIZONTAL]: 0
-      }[actionAlignment]
-    }
-  }),
-  actions: actionAlignment => ({
-    display: 'flex',
-    ...{
-      [ACTION_ALIGNMENTS.VERTICAL]: {
-        flexDirection: 'coloumn',
-        paddingHorizontal: 16,
-        gap: 8,
-        paddingBottom: 16
-      },
-      [ACTION_ALIGNMENTS.HORIZONTAL]: {
-        flexDirection: 'row'
-      }
-    }[actionAlignment]
-  })
+  }
 });
 
 export default styles;

package/lib/components/UTSelectableCard/index.js

@@ -17,6 +17,7 @@ const UTSelectableCard = ({
   additionalInfo = {},
   appearance = 'white',
   checkIcon = true,
+  children,
   description,
   disabled = false,
   Icon,
@@ -117,6 +118,7 @@ const UTSelectableCard = ({
               </View>
             )}
           </View>
+          {children}
           {checkIcon && selected && (
             <UTIcon colorTheme="accent" name="IconCheck" style={themedStyles.checkIcon} />
           )}

package/package.json

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