@utilitywarehouse/hearth-react-native 0.11.0 → 0.13.0

package/src/components/Banner/Banner.props.ts

@@ -1,7 +1,5 @@
-import type { ComponentType, ReactElement } from 'react';
-import { ImageProps } from 'react-native';
+import type { ComponentType, ReactElement, ReactNode } from 'react';
 import type CardProps from '../Card/Card.props';
-import { ThemedImageProps } from '../ThemedImage';
 
 export type BannerDirection = 'horizontal' | 'vertical';
 
@@ -51,12 +49,12 @@ export interface BannerProps
    * Illustration to display in the banner
    * Mutually exclusive with icon and image
    */
-  illustration?: ThemedImageProps | ImageProps;
+  illustration?: ReactNode;
   /**
    * Image to display in the banner
    * Mutually exclusive with icon and illustration
    */
-  image?: ThemedImageProps | ImageProps;
+  image?: ReactNode;
   /**
    * Heading text
    */

package/src/components/Banner/Banner.stories.tsx

@@ -13,6 +13,8 @@ import { Button } from '../Button';
 import { Flex } from '../Flex';
 import { Link } from '../Link';
 import Banner from './Banner';
+import BannerIllustration from './BannerIllustration';
+import BannerImage from './BannerImage';
 
 const meta = {
   title: 'Stories / Banner',
@@ -128,23 +130,35 @@ export const WithIllustration: Story = {
       <View style={{ width: 400 }}>
         <Flex space="lg" direction="column">
           <Banner
-            illustration={{
-              // @ts-ignore
-              light: <SpotBillingLight width={80} height={80} />,
-              // @ts-ignore
-              dark: <SpotBillingDark width={80} height={80} />,
-            }}
+            illustration={
+              <BannerIllustration
+                light={
+                  // @ts-ignore
+                  <SpotBillingLight width={80} height={80} />
+                }
+                dark={
+                  // @ts-ignore
+                  <SpotBillingDark width={80} height={80} />
+                }
+              />
+            }
             heading="Featured Content"
             description="Discover amazing content curated just for you."
           />
           <Banner
             direction="vertical"
-            illustration={{
-              // @ts-ignore
-              light: <SpotBillingLight width={120} height={120} />,
-              // @ts-ignore
-              dark: <SpotBillingDark width={120} height={120} />,
-            }}
+            illustration={
+              <BannerIllustration
+                light={
+                  // @ts-ignore
+                  <SpotBillingLight width={120} height={120} />
+                }
+                dark={
+                  // @ts-ignore
+                  <SpotBillingDark width={120} height={120} />
+                }
+              />
+            }
             heading="Special Offer"
             description="Limited time offer on selected services."
           />
@@ -160,27 +174,31 @@ export const WithImage: Story = {
       <View style={{ width: 400 }}>
         <Flex space="lg" direction="column">
           <Banner
-            image={{
-              light: {
-                uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
-              },
-              dark: {
-                uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
-              },
-            }}
+            image={
+              <BannerImage
+                light={{
+                  uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
+                }}
+                dark={{
+                  uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
+                }}
+              />
+            }
             heading="Featured Content"
             description="Discover amazing content curated just for you."
           />
           <Banner
             direction="vertical"
-            image={{
-              light: {
-                uri: 'https://images.unsplash.com/photo-1473186578172-c141e6798cf4?w=200&q=80',
-              },
-              dark: {
-                uri: 'https://images.unsplash.com/photo-1473186578172-c141e6798cf4?w=200&q=80',
-              },
-            }}
+            image={
+              <BannerImage
+                light={{
+                  uri: 'https://images.unsplash.com/photo-1473186578172-c141e6798cf4?w=200&q=80',
+                }}
+                dark={{
+                  uri: 'https://images.unsplash.com/photo-1473186578172-c141e6798cf4?w=200&q=80',
+                }}
+              />
+            }
             heading="Special Offer"
             description="Limited time offer on selected services."
           />
@@ -262,14 +280,16 @@ export const Pressable: Story = {
             onPress={() => console.log('Banner pressed')}
           />
           <Banner
-            image={{
-              light: {
-                uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
-              },
-              dark: {
-                uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
-              },
-            }}
+            image={
+              <BannerImage
+                light={{
+                  uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
+                }}
+                dark={{
+                  uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
+                }}
+              />
+            }
             heading="Account Settings"
             description="Manage your account preferences."
             onPress={() => console.log('Banner pressed')}
@@ -325,11 +345,16 @@ export const VerticalLayout: Story = {
           />
           <Banner
             variant="emphasis"
-            image={{
-              source: {
-                uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
-              },
-            }}
+            image={
+              <BannerImage
+                light={{
+                  uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
+                }}
+                dark={{
+                  uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
+                }}
+              />
+            }
             heading="Featured Content"
             description="Discover amazing content curated just for you."
             shadowColor="brand"
@@ -443,14 +468,16 @@ export const EmphasisVariant: Story = {
             variant="emphasis"
           />
           <Banner
-            image={{
-              light: {
-                uri: 'https://images.unsplash.com/photo-1473186578172-c141e6798cf4?w=200&q=80',
-              },
-              dark: {
-                uri: 'https://images.unsplash.com/photo-1473186578172-c141e6798cf4?w=200&q=80',
-              },
-            }}
+            image={
+              <BannerImage
+                light={{
+                  uri: 'https://images.unsplash.com/photo-1473186578172-c141e6798cf4?w=200&q=80',
+                }}
+                dark={{
+                  uri: 'https://images.unsplash.com/photo-1473186578172-c141e6798cf4?w=200&q=80',
+                }}
+              />
+            }
             heading="Featured Offer"
             description="Limited time deal on premium services."
             variant="emphasis"
@@ -486,14 +513,16 @@ export const ComplexExample: Story = {
             onPress={() => console.log('Banner pressed')}
           />
           <Banner
-            image={{
-              light: {
-                uri: 'https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=200&q=80',
-              },
-              dark: {
-                uri: 'https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=200&q=80',
-              },
-            }}
+            image={
+              <BannerImage
+                light={{
+                  uri: 'https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=200&q=80',
+                }}
+                dark={{
+                  uri: 'https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=200&q=80',
+                }}
+              />
+            }
             heading="Exclusive Member Benefit"
             description="As a valued member, you now have access to premium features at no extra cost."
             variant="emphasis"

package/src/components/Banner/Banner.tsx

@@ -1,18 +1,15 @@
 import { ChevronRightSmallIcon, CloseSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { Image, ImageProps, Pressable, View } from 'react-native';
+import { useMemo } from 'react';
+import { Pressable, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { Card } from '../Card';
 import { Heading } from '../Heading';
 import { IconContainer } from '../IconContainer';
-import { ThemedImage, ThemedImageProps } from '../ThemedImage';
 import { UnstyledIconButton } from '../UnstyledIconButton';
+import BannerContext from './Banner.context';
 import type BannerProps from './Banner.props';
 
-const isThemedImageProps = (props: ThemedImageProps | ImageProps): props is ThemedImageProps => {
-  return 'light' in props && 'dark' in props;
-};
-
 const Banner = ({
   icon,
   iconContainerVariant = 'subtle',
@@ -35,6 +32,13 @@ const Banner = ({
   const hasIllustration = Boolean(illustration);
   styles.useVariants({ direction, hasIllustration });
 
+  const context = useMemo(
+    () => ({
+      direction,
+    }),
+    [direction]
+  );
+
   const renderIconOrImage = () => {
     if (icon) {
       return (
@@ -48,36 +52,10 @@ const Banner = ({
       );
     }
     if (illustration) {
-      if (isThemedImageProps(illustration)) {
-        return (
-          <ThemedImage
-            {...illustration}
-            resizeMode="cover"
-            style={[styles.media, styles.imageWrapper, illustration.style]}
-          />
-        );
-      }
-      return (
-        <Image
-          {...illustration}
-          resizeMode="cover"
-          style={[styles.media, styles.imageWrapper, illustration.style]}
-        />
-      );
+      return illustration;
     }
     if (image) {
-      if (isThemedImageProps(image)) {
-        return (
-          <View style={[styles.media, styles.imageWrapper]}>
-            <ThemedImage {...image} style={[styles.image, image.style]} />
-          </View>
-        );
-      }
-      return (
-        <View style={[styles.media, styles.imageWrapper]}>
-          <Image {...image} style={[styles.image, image.style]} />
-        </View>
-      );
+      return image;
     }
     return null;
   };
@@ -149,18 +127,22 @@ const Banner = ({
 
   if (onPress) {
     return (
-      <Card variant={variant} style={[styles.card, style]} {...props}>
-        <Pressable onPress={onPress} accessibilityRole="button" style={styles.pressable}>
-          {content}
-        </Pressable>
-      </Card>
+      <BannerContext.Provider value={context}>
+        <Card variant={variant} style={[styles.card, style]} {...props}>
+          <Pressable onPress={onPress} accessibilityRole="button" style={styles.pressable}>
+            {content}
+          </Pressable>
+        </Card>
+      </BannerContext.Provider>
     );
   }
 
   return (
-    <Card variant={variant} style={[styles.card, style]} {...props}>
-      {content}
-    </Card>
+    <BannerContext.Provider value={context}>
+      <Card variant={variant} style={[styles.card, style]} {...props}>
+        {content}
+      </Card>
+    </BannerContext.Provider>
   );
 };
 
@@ -218,31 +200,6 @@ const styles = StyleSheet.create(theme => ({
       },
     },
   },
-  imageWrapper: {
-    flexDirection: 'row',
-    variants: {
-      direction: {
-        horizontal: {},
-        vertical: {
-          width: '100%',
-        },
-      },
-    },
-  },
-  image: {
-    borderRadius: theme.borderRadius.md,
-    borderColor: theme.color.border.strong,
-    borderWidth: theme.borderWidth[1],
-    variants: {
-      direction: {
-        horizontal: { width: 160, height: 95 },
-        vertical: {
-          width: '100%',
-          height: 160,
-        },
-      },
-    },
-  },
   contentContainer: {
     alignItems: 'flex-start',
     justifyContent: 'space-between',

package/src/components/Banner/BannerIllustration.figma.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+import BannerIllustration from "./BannerIllustration"
+import figma from "@figma/code-connect"
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * None of your props could be automatically mapped to Figma properties.
+ * You should update the `props` object to include a mapping from your
+ * code props to Figma properties, and update the `example` function to
+ * return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  BannerIllustration,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=10145%3A4877",
+  {
+    props: {
+      // No matching props could be found for these Figma properties:
+      // "illustration": figma.instance('Illustration'),
+      // "size": figma.enum('Size', {
+      //   "XL-120": "xl-120",
+      //   "LG-100": "lg-100",
+      //   "MD-80": "md-80",
+      //   "SM-60": "sm-60",
+      //   "XS-40": "xs-40"
+      // })
+    },
+    example: (props) => <BannerIllustration />,
+  },
+)

package/src/components/Banner/BannerIllustration.tsx

@@ -0,0 +1,63 @@
+import { Image, ImageProps, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { isThemedImageProps } from '../../utils';
+import { ThemedImage, ThemedImageProps } from '../ThemedImage';
+import { useBannerContext } from './Banner.context';
+
+const BannerIllustration = (props: ImageProps | ThemedImageProps) => {
+  const { direction } = useBannerContext();
+  styles.useVariants({ direction });
+  if (isThemedImageProps(props)) {
+    return (
+      <View style={[styles.media, styles.imageWrapper]}>
+        <ThemedImage {...props} style={[styles.image, props.style]} />
+      </View>
+    );
+  }
+  return (
+    <View style={[styles.media, styles.imageWrapper]}>
+      <Image {...props} style={[styles.image, props.style]} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  media: {
+    flexShrink: 0,
+    variants: {
+      direction: {
+        horizontal: {},
+        vertical: {
+          alignSelf: 'flex-start',
+        },
+      },
+    },
+  },
+  imageWrapper: {
+    flexDirection: 'row',
+    variants: {
+      direction: {
+        horizontal: {},
+        vertical: {
+          width: '100%',
+        },
+      },
+    },
+  },
+  image: {
+    borderRadius: theme.borderRadius.md,
+    borderColor: theme.color.border.strong,
+    borderWidth: theme.borderWidth[1],
+    variants: {
+      direction: {
+        horizontal: { width: 160, height: 95 },
+        vertical: {
+          width: '100%',
+          height: 160,
+        },
+      },
+    },
+  },
+}));
+
+export default BannerIllustration;

package/src/components/Banner/BannerImage.tsx

@@ -0,0 +1,63 @@
+import { Image, ImageProps, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { isThemedImageProps } from '../../utils';
+import { ThemedImage, ThemedImageProps } from '../ThemedImage';
+import { useBannerContext } from './Banner.context';
+
+const BannerImage = (props: ImageProps | ThemedImageProps) => {
+  const { direction } = useBannerContext();
+  styles.useVariants({ direction });
+  if (isThemedImageProps(props)) {
+    return (
+      <View style={[styles.media, styles.imageWrapper]}>
+        <ThemedImage {...props} style={[styles.image, props.style]} />
+      </View>
+    );
+  }
+  return (
+    <View style={[styles.media, styles.imageWrapper]}>
+      <Image {...props} style={[styles.image, props.style]} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  media: {
+    flexShrink: 0,
+    variants: {
+      direction: {
+        horizontal: {},
+        vertical: {
+          alignSelf: 'flex-start',
+        },
+      },
+    },
+  },
+  imageWrapper: {
+    flexDirection: 'row',
+    variants: {
+      direction: {
+        horizontal: {},
+        vertical: {
+          width: '100%',
+        },
+      },
+    },
+  },
+  image: {
+    borderRadius: theme.borderRadius.md,
+    borderColor: theme.color.border.strong,
+    borderWidth: theme.borderWidth[1],
+    variants: {
+      direction: {
+        horizontal: { width: 160, height: 95 },
+        vertical: {
+          width: '100%',
+          height: 160,
+        },
+      },
+    },
+  },
+}));
+
+export default BannerImage;

package/src/components/Banner/index.ts

@@ -1,2 +1,4 @@
 export { default as Banner } from './Banner';
 export type { default as BannerProps } from './Banner.props';
+export { default as BannerIllustration } from './BannerIllustration';
+export { default as BannerImage } from './BannerImage';

package/src/components/BottomSheet/BottomSheetModal.figma.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+import BottomSheetModal from "./BottomSheetModal"
+import figma from "@figma/code-connect"
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * None of your props could be automatically mapped to Figma properties.
+ * You should update the `props` object to include a mapping from your
+ * code props to Figma properties, and update the `example` function to
+ * return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  BottomSheetModal,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=4084%3A33378",
+  {
+    props: {},
+    example: (props) => <BottomSheetModal />,
+  },
+)