@utilitywarehouse/hearth-react-native 0.11.0 → 0.13.0

package/src/components/HighlightBanner/HighlightBanner.stories.tsx

@@ -4,6 +4,7 @@ import { Button } from '../Button';
 import { Flex } from '../Flex';
 import { Link } from '../Link';
 import HighlightBanner from './HighlightBanner';
+import HighlightBannerImage from './HighlightBannerImage';
 
 const meta = {
   title: 'Stories / HighlightBanner',
@@ -49,11 +50,13 @@ const meta = {
     heading: 'Featured Content',
     headingColor: 'highlight',
     description: 'This is a description of the featured content that appears below the image.',
-    image: {
-      source: {
-        uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=800&q=80',
-      },
-    },
+    image: (
+      <HighlightBannerImage
+        source={{
+          uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=800&q=80',
+        }}
+      />
+    ),
   },
 } satisfies Meta<typeof HighlightBanner>;
 
@@ -105,11 +108,13 @@ export const ColorVariants: Story = {
             {...args}
             heading="Energy Blue"
             headingColor="energy"
-            image={{
-              source: {
-                uri: 'https://images.unsplash.com/photo-1473186578172-c141e6798cf4?w=800&q=80',
-              },
-            }}
+            image={
+              <HighlightBannerImage
+                source={{
+                  uri: 'https://images.unsplash.com/photo-1473186578172-c141e6798cf4?w=800&q=80',
+                }}
+              />
+            }
             description="Featured content with energy blue heading"
             link={<Link onPress={() => console.log('pressed')}>Learn more</Link>}
           />
@@ -117,22 +122,26 @@ export const ColorVariants: Story = {
             {...args}
             heading="Broadband Green"
             headingColor="broadband"
-            image={{
-              source: {
-                uri: 'https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=800&q=80',
-              },
-            }}
+            image={
+              <HighlightBannerImage
+                source={{
+                  uri: 'https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=800&q=80',
+                }}
+              />
+            }
             description="Featured content with broadband green heading"
           />
           <HighlightBanner
             {...args}
             heading="Insurance Orange"
             headingColor="insurance"
-            image={{
-              source: {
-                uri: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800&q=80',
-              },
-            }}
+            image={
+              <HighlightBannerImage
+                source={{
+                  uri: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800&q=80',
+                }}
+              />
+            }
             description="Featured content with insurance orange heading"
             button={<Button onPress={() => console.log('pressed')}>Get Started</Button>}
           />
@@ -140,11 +149,13 @@ export const ColorVariants: Story = {
             {...args}
             heading="Cashback Lilac"
             headingColor="cashback"
-            image={{
-              source: {
-                uri: 'https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?w=800&q=80',
-              },
-            }}
+            image={
+              <HighlightBannerImage
+                source={{
+                  uri: 'https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?w=800&q=80',
+                }}
+              />
+            }
             description="Featured content with cashback lilac heading"
             button={<Button onPress={() => console.log('pressed')}>Get Started</Button>}
           />
@@ -152,11 +163,13 @@ export const ColorVariants: Story = {
             {...args}
             heading="Pig Pink"
             headingColor="pig"
-            image={{
-              source: {
-                uri: 'https://images.unsplash.com/photo-1494526585095-c41746248156?w=800&q=80',
-              },
-            }}
+            image={
+              <HighlightBannerImage
+                source={{
+                  uri: 'https://images.unsplash.com/photo-1494526585095-c41746248156?w=800&q=80',
+                }}
+              />
+            }
             description="Featured content with pig pink heading"
             link={<Link onPress={() => console.log('pressed')}>Learn more</Link>}
           />
@@ -164,22 +177,26 @@ export const ColorVariants: Story = {
             {...args}
             heading="Mobile Rose"
             headingColor="mobile"
-            image={{
-              source: {
-                uri: 'https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?w=800&q=80',
-              },
-            }}
+            image={
+              <HighlightBannerImage
+                source={{
+                  uri: 'https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?w=800&q=80',
+                }}
+              />
+            }
             description="Featured content with mobile rose heading"
           />
           <HighlightBanner
             {...args}
             heading="Highlight Yellow"
             headingColor="highlight"
-            image={{
-              source: {
-                uri: 'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=800&q=80',
-              },
-            }}
+            image={
+              <HighlightBannerImage
+                source={{
+                  uri: 'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=800&q=80',
+                }}
+              />
+            }
             description="Featured content with highlight yellow heading"
           />
         </Flex>
@@ -226,11 +243,13 @@ export const DifferentImages: Story = {
             {...args}
             heading="Nature Landscape"
             headingColor="broadband"
-            image={{
-              source: {
-                uri: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80',
-              },
-            }}
+            image={
+              <HighlightBannerImage
+                source={{
+                  uri: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80',
+                }}
+              />
+            }
             description="Beautiful mountain landscape with clear blue sky"
             link={<Link onPress={() => console.log('pressed')}>View gallery</Link>}
           />
@@ -240,11 +259,13 @@ export const DifferentImages: Story = {
             {...args}
             heading="Urban Architecture"
             headingColor="highlight"
-            image={{
-              source: {
-                uri: 'https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?w=800&q=80',
-              },
-            }}
+            image={
+              <HighlightBannerImage
+                source={{
+                  uri: 'https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?w=800&q=80',
+                }}
+              />
+            }
             description="Modern city buildings and urban design"
             button={<Button onPress={() => console.log('pressed')}>Explore Cities</Button>}
           />
@@ -254,11 +275,13 @@ export const DifferentImages: Story = {
             {...args}
             heading="Ocean Waves"
             headingColor="energy"
-            image={{
-              source: {
-                uri: 'https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=800&q=80',
-              },
-            }}
+            image={
+              <HighlightBannerImage
+                source={{
+                  uri: 'https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=800&q=80',
+                }}
+              />
+            }
             description="Stunning ocean views and coastal beauty"
           />
         </View>
@@ -275,11 +298,13 @@ export const LongContent: Story = {
           {...args}
           heading="Extended Information Card"
           headingColor="energy"
-          image={{
-            source: {
-              uri: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800&q=80',
-            },
-          }}
+          image={
+            <HighlightBannerImage
+              source={{
+                uri: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800&q=80',
+              }}
+            />
+          }
           description="This is a much longer description that demonstrates how the component handles extended text content. It includes multiple sentences and provides more detailed information about the featured content, ensuring the layout remains clean and readable even with more text."
           button={<Button onPress={() => console.log('pressed')}>Read Full Article</Button>}
         />

package/src/components/HighlightBanner/HighlightBanner.tsx

@@ -1,4 +1,4 @@
-import { Image, View } from 'react-native';
+import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { Card } from '../Card';
@@ -26,11 +26,7 @@ const HighlightBanner = ({
             {heading}
           </BodyText>
         </View>
-        {!!image && (
-          <View style={styles.imageContainer(imageContainerHeight)}>
-            <Image resizeMode="cover" {...image} style={[styles.image, image?.style]} />
-          </View>
-        )}
+        {!!image && <View style={styles.imageContainer(imageContainerHeight)}>{image}</View>}
         <View style={styles.footer}>
           <BodyText size="md" textAlign="center">
             {description}
@@ -99,10 +95,7 @@ const styles = StyleSheet.create(theme => ({
     width: '100%',
     height,
   }),
-  image: {
-    width: '100%',
-    height: '100%',
-  },
+
   footer: {
     padding: theme.components.banner.highlight.padding,
     gap: theme.components.banner.highlight.content.gap,

package/src/components/HighlightBanner/HighlightBannerImage.tsx

@@ -0,0 +1,20 @@
+import { Image, ImageProps } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { isThemedImageProps } from '../../utils';
+import { ThemedImage, ThemedImageProps } from '../ThemedImage';
+
+const HighlightBannerImage = (props: ImageProps | ThemedImageProps) => {
+  if (isThemedImageProps(props)) {
+    return <ThemedImage {...props} style={[styles.image, props.style]} />;
+  }
+  return <Image resizeMode="cover" {...props} style={[styles.image, props.style]} />;
+};
+
+const styles = StyleSheet.create({
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+});
+
+export default HighlightBannerImage;

package/src/components/HighlightBanner/index.ts

@@ -1,2 +1,3 @@
 export { default as HighlightBanner } from './HighlightBanner';
 export type { default as HighlightBannerProps } from './HighlightBanner.props';
+export { default as HighlightBannerImage } from './HighlightBannerImage';

package/src/components/IconButton/IconButton.figma.tsx

@@ -1,161 +1,55 @@
-//
-// import { IconButton } from './';
-// import figma from '@figma/code-connect';
-
-// const props = {
-//   iconxsmall: figma.instance('icon x-small'),
-//   icon: figma.instance('icon'),
-//   colorScheme: figma.enum('colorScheme', {
-//     cyan: 'cyan',
-//     red: 'red',
-//     green: 'green',
-//     gold: 'gold',
-//     grey: 'functional',
-//   }),
-//   size: figma.enum('size', {
-//     'medium - 48': 'medium',
-//     'small - 32': 'small',
-//     'x-small - 24': 'x-small',
-//   }),
-//   disabled: figma.enum('state', {
-//     disabled: true,
-//   }),
-//   loading: figma.enum('state', {
-//     loading: true,
-//   }),
-//   inverted: figma.boolean('inverted'),
-// };
-
-// // Solid Button
-// figma.connect(
-//   IconButton,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=6678-6454&m=dev',
-//   {
-//     props,
-
-//     example: ({ inverted, icon, colorScheme, size, disabled, loading }) => (
-//       <IconButton
-//         variant="solid"
-//         colorScheme={colorScheme}
-//         size={size}
-//         onPress={() => console.log('buttonPressed')}
-//         disabled={disabled}
-//         icon={icon}
-//         loading={loading}
-//         inverted={inverted}
-//       />
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   IconButton,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=6678-6454&m=dev',
-//   {
-//     props,
-//     variant: {
-//       size: 'x-small - 24',
-//     },
-//     example: ({ inverted, iconxsmall, colorScheme, size, disabled, loading }) => (
-//       <IconButton
-//         variant="solid"
-//         colorScheme={colorScheme}
-//         size={size}
-//         onPress={() => console.log('buttonPressed')}
-//         disabled={disabled}
-//         icon={iconxsmall}
-//         loading={loading}
-//         inverted={inverted}
-//       />
-//     ),
-//   }
-// );
-
-// // Outline Button
-
-// figma.connect(
-//   IconButton,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=6679-7713&m=dev',
-//   {
-//     props,
-//     example: ({ inverted, icon, colorScheme, size, disabled, loading }) => (
-//       <IconButton
-//         variant="outline"
-//         colorScheme={colorScheme}
-//         size={size}
-//         onPress={() => console.log('buttonPressed')}
-//         disabled={disabled}
-//         icon={icon}
-//         loading={loading}
-//         inverted={inverted}
-//       />
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   IconButton,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=6679-7713&m=dev',
-//   {
-//     props,
-//     variant: {
-//       size: 'x-small - 24',
-//     },
-//     example: ({ inverted, iconxsmall, colorScheme, size, disabled, loading }) => (
-//       <IconButton
-//         variant="outline"
-//         colorScheme={colorScheme}
-//         size={size}
-//         onPress={() => console.log('buttonPressed')}
-//         disabled={disabled}
-//         icon={iconxsmall}
-//         loading={loading}
-//         inverted={inverted}
-//       />
-//     ),
-//   }
-// );
-
-// // Ghost Button
-// figma.connect(
-//   IconButton,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=6682-8623&m=dev',
-//   {
-//     props,
-//     example: ({ inverted, icon, colorScheme, size, disabled, loading }) => (
-//       <IconButton
-//         variant="ghost"
-//         colorScheme={colorScheme}
-//         size={size}
-//         onPress={() => console.log('buttonPressed')}
-//         disabled={disabled}
-//         icon={icon}
-//         loading={loading}
-//         inverted={inverted}
-//       />
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   IconButton,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=6682-8623&m=dev',
-//   {
-//     props,
-//     variant: {
-//       size: 'x-small - 24',
-//     },
-//     example: ({ inverted, iconxsmall, colorScheme, size, disabled, loading }) => (
-//       <IconButton
-//         variant="ghost"
-//         colorScheme={colorScheme}
-//         size={size}
-//         onPress={() => console.log('buttonPressed')}
-//         disabled={disabled}
-//         icon={iconxsmall}
-//         loading={loading}
-//         inverted={inverted}
-//       />
-//     ),
-//   }
-// );
+import figma from '@figma/code-connect';
+import IconButton from './IconButton';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from your code props to Figma properties.
+ * You should check this is correct, and update the `example` function
+ * to return the code example you'd like to see in Figma
+ */
+
+figma.connect(IconButton, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=90%3A1455', {
+  props: {
+    // These props were automatically mapped based on your linked code:
+    disabled: figma.enum('State', {
+      Disabled: true,
+    }),
+    size: figma.enum('Size', {
+      'SM-32': 'sm',
+      'MD-48': 'md',
+    }),
+    loading: figma.enum('State', {
+      Loading: true,
+    }),
+    focusable: figma.enum('State', {
+      Focus: true,
+    }),
+    'aria-disabled': figma.enum('State', {
+      Disabled: true,
+    }),
+    colorScheme: figma.enum('Color Scheme', {
+      Affirmative: 'affirmative',
+      Destructive: 'destructive',
+    }),
+    // No matching props could be found for these Figma properties:
+    // "icon24": figma.instance('Icon-24'),
+    // "icon20": figma.instance('Icon-20'),
+    // "variant": figma.enum('Variant', {
+    //   "Emphasis": "emphasis",
+    //   "Solid": "solid",
+    //   "Outline": "outline",
+    //   "Ghost": "ghost"
+    // }),
+    // "inverted": figma.boolean('Inverted?')
+  },
+  example: props => (
+    <IconButton
+      disabled={props.disabled}
+      size={props.size}
+      icon={null}
+      loading={props.loading}
+      focusable={props.focusable}
+      colorScheme={props.colorScheme}
+    />
+  ),
+});

package/src/components/IconContainer/IconContainer.figma.tsx

@@ -0,0 +1,50 @@
+import figma from '@figma/code-connect';
+import IconContainer from './IconContainer';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from your code props to Figma properties.
+ * You should check this is correct, and update the `example` function
+ * to return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  IconContainer,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=5462%3A9728',
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      size: figma.enum('Size', {
+        'SM-32': 'sm',
+        'MD-48': 'md',
+        'LG-64': 'lg',
+      }),
+      radiusNone: figma.boolean('Radius None?'),
+      variant: figma.enum('Variant', {
+        Subtle: 'subtle',
+        Emphasis: 'emphasis',
+      }),
+      color: figma.enum('Color', {
+        Pig: 'pig',
+        Energy: 'energy',
+        Broadband: 'broadband',
+        Mobile: 'mobile',
+        Insurance: 'insurance',
+        Cashback: 'cashback',
+        Highlight: 'highlight',
+      }),
+      // No matching props could be found for these Figma properties:
+      // "icon20": figma.instance('Icon-20'),
+      // "icon24": figma.instance('Icon-24')
+    },
+    example: props => (
+      <IconContainer
+        icon={null}
+        size={props.size}
+        radiusNone={props.radiusNone}
+        variant={props.variant}
+        color={props.color}
+      />
+    ),
+  }
+);

package/src/components/InlineLink/InlineLink.figma.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+import InlineLink from "./InlineLink"
+import figma from "@figma/code-connect"
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from your code props to Figma properties.
+ * You should check this is correct, and update the `example` function
+ * to return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  InlineLink,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7051%3A25641",
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      inverted: figma.boolean("Inverted?"),
+      disabled: figma.enum("State", {
+        Active: true,
+      }),
+      // No matching props could be found for these Figma properties:
+      // "iconLeft": figma.boolean('Icon left?'),
+      // "iconRight": figma.boolean('Icon right?'),
+      // "iconRight": figma.instance('Icon Right'),
+      // "iconLeft": figma.instance('Icon Left'),
+      // "text": figma.string('Text')
+    },
+    example: (props) => (
+      <InlineLink inverted={props.inverted} disabled={props.disabled} />
+    ),
+  },
+)