@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.0

package/{src/components/Banner/Banner.docs.mdx → public/llms/components/banner.md}

@@ -1,14 +1,3 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import { ElectricityMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { Banner, Button, Center, Link } from '../../';
-import StorybookLink from '../../../../../shared/storybook/StorybookLink';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './Banner.stories';
-
-<Meta title="Components / Banner" />
-
-<BackToTopButton />
-
 # Banner
 
 The `Banner` component is a versatile card-based component for displaying informational content with an icon or image. It supports various layouts, interactive features like pressable states and close buttons, and optional action elements like buttons or links.
@@ -31,24 +20,15 @@ The `Banner` component is a versatile card-based component for displaying inform
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<Banner {...args} icon={ElectricityMediumIcon} />
+```
 
 ## Usage
 
-<UsageWrap>
-  <Center>
-    <Banner
-      icon={ElectricityMediumIcon}
-      iconContainerColor="energy"
-      heading="Energy Services"
-      description="Manage your energy account and view your usage."
-    />
-  </Center>
-</UsageWrap>
-
 ```jsx
+// Example usage
 import { Banner } from '@utilitywarehouse/hearth-react-native';
 import { ElectricityMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
@@ -96,15 +76,14 @@ The `BannerImage` & `BannerIllustration` component can be used to display an ima
 | `dark`    | `ImageSourcePropType` | The source of the image to display in dark mode (use instead of source)  |
 | `...rest` | `ImageProps`          | Additional props to pass to the underlying Image component               |
 
-For more details about the ThemedImage component used internally, refer to the <StorybookLink to="utility-components-themed-image">`ThemedImage` documentation</StorybookLink>.
-
-## Layout Options
+For more details about the ThemedImage component used internally, refer to the `ThemedImage` documentation.
 
 ### Horizontal Layout (Default)
 
 The default horizontal layout places the icon or image to the left of the content, creating a compact side-by-side arrangement.
 
 ```jsx
+// Example usage
 <Banner
   icon={ElectricityMediumIcon}
   heading="Horizontal Layout"
@@ -118,6 +97,7 @@ The default horizontal layout places the icon or image to the left of the conten
 The vertical layout stacks the icon or image above the content, useful for centered or full-width presentations.
 
 ```jsx
+// Example usage
 <Banner
   icon={ElectricityMediumIcon}
   heading="Vertical Layout"
@@ -126,15 +106,40 @@ The vertical layout stacks the icon or image above the content, useful for cente
 />
 ```
 
-## Examples
-
 ### With Icon
 
 Use an icon with `IconContainer` styling options:
 
-<Canvas of={Stories.WithIcon} />
+```tsx
+// Example usage
+<View style={{ width: 400 }}>
+  <Flex spacing="lg" direction="column">
+    <Banner
+      icon={ElectricityMediumIcon}
+      iconContainerColor="energy"
+      heading="Energy Services"
+      description="Manage your energy account and view your usage."
+    />
+    <Banner
+      icon={BroadbandMediumIcon}
+      iconContainerColor="broadband"
+      iconContainerVariant="emphasis"
+      heading="Broadband Plans"
+      description="Upgrade your broadband to faster speeds."
+    />
+    <Banner
+      icon={MobileMediumIcon}
+      iconContainerColor="mobile"
+      iconContainerSize="lg"
+      heading="Mobile Deals"
+      description="Check out our latest mobile offers."
+    />
+  </Flex>
+</View>
+```
 
 ```jsx
+// Example usage
 import { Banner } from '@utilitywarehouse/hearth-react-native';
 import {
   ElectricityMediumIcon,
@@ -165,9 +170,45 @@ const MyComponent = () => (
 
 Display a themed image that automatically switches between light and dark modes:
 
-<Canvas of={Stories.WithImage} />
+```tsx
+// Example usage
+<View style={{ width: 400 }}>
+  <Flex spacing="lg" direction="column">
+    <Banner
+      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={
+        <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."
+    />
+  </Flex>
+</View>
+```
 
 ```jsx
+// Example usage
 import { Banner, BannerImage } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
@@ -201,9 +242,49 @@ const MyComponent = () => (
 
 Display a themed illustration that adapts to layout changes:
 
-<Canvas of={Stories.WithIllustration} />
+```tsx
+// Example usage
+<View>
+  <Flex spacing="lg" direction="column">
+    <Banner
+      illustration={
+        <BannerIllustration
+          light={
+            // @ts-expect-error - Illustration SVG import
+            <SpotBillingLight width={80} height={80} />
+          }
+          dark={
+            // @ts-expect-error - Illustration SVG import
+            <SpotBillingDark width={80} height={80} />
+          }
+        />
+      }
+      heading="Featured Content"
+      description="Discover amazing content curated just for you."
+    />
+    <Banner
+      direction="vertical"
+      illustration={
+        <BannerIllustration
+          light={
+            // @ts-expect-error - Illustration SVG import
+            <SpotBillingLight width={120} height={120} />
+          }
+          dark={
+            // @ts-expect-error - Illustration SVG import
+            <SpotBillingDark width={120} height={120} />
+          }
+        />
+      }
+      heading="Special Offer"
+      description="Limited time offer on selected services."
+    />
+  </Flex>
+</View>
+```
 
 ```jsx
+// Example usage
 import { Banner, BannerIllustration } from '@utilitywarehouse/hearth-react-native';
 import SpotBillingDark from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-dark.svg';
 import SpotBillingLight from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-light.svg';
@@ -223,9 +304,39 @@ const MyComponent = () => (
 
 Add a button for clear call-to-action:
 
-<Canvas of={Stories.WithButton} />
+```tsx
+// Example usage
+<View style={{ width: 400 }}>
+  <Flex spacing="lg" direction="column">
+    <Banner
+      icon={InsuranceMediumIcon}
+      iconContainerColor="insurance"
+      heading="Home Insurance"
+      description="Protect your home with our comprehensive insurance."
+      button={
+        <Button size="sm" onPress={() => console.log('Get Quote pressed')}>
+          Get Quote
+        </Button>
+      }
+    />
+    <Banner
+      icon={CashbackCardMediumIcon}
+      iconContainerColor="cashback"
+      heading="Cashback Rewards"
+      description="Earn cashback on every purchase."
+      colorScheme="neutralSubtle"
+      button={
+        <Button size="sm" onPress={() => console.log('Learn More pressed')}>
+          Learn More
+        </Button>
+      }
+    />
+  </Flex>
+</View>
+```
 
 ```jsx
+// Example usage
 import { Banner } from '@utilitywarehouse/hearth-react-native';
 import { InsuranceMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
@@ -248,9 +359,30 @@ const MyComponent = () => (
 
 Use a link for lighter-weight actions:
 
-<Canvas of={Stories.WithLink} />
+```tsx
+// Example usage
+<View style={{ width: 400 }}>
+  <Flex spacing="lg" direction="column">
+    <Banner
+      icon={ElectricityMediumIcon}
+      iconContainerColor="energy"
+      heading="Energy Saving Tips"
+      description="Learn how to reduce your energy consumption."
+      link={<Link href="#">View tips</Link>}
+    />
+    <Banner
+      icon={BroadbandMediumIcon}
+      iconContainerColor="broadband"
+      heading="Network Status"
+      description="Check the status of your broadband connection."
+      link={<Link href="#">Check status</Link>}
+    />
+  </Flex>
+</View>
+```
 
 ```jsx
+// Example usage
 import { Banner } from '@utilitywarehouse/hearth-react-native';
 import { ElectricityMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
@@ -269,9 +401,74 @@ const MyComponent = () => (
 
 Make the entire banner pressable with a chevron indicator:
 
-<Canvas of={Stories.Pressable} />
+```tsx
+// Example usage
+<View style={{ width: 400 }}>
+  <Flex spacing="lg" direction="column">
+    <Banner
+      variant="emphasis"
+      colorScheme="neutralStrong"
+      testID="next-best-action-card"
+      onPress={() => console.log('Banner pressed')}
+      heading="Add your appointment outcome"
+      description="Save the outcome of Don Instantino (Traditional Thai Cuisine)'s appointment"
+      alignChevron="start"
+      button={
+        <Button
+          variant="outline"
+          colorScheme="functional"
+          size="sm"
+          onPress={() => console.log('View to-do list pressed')}
+          testID="view-to-do-list"
+        >
+          View to-do list
+        </Button>
+      }
+    />
+    <Banner
+      icon={ElectricityMediumIcon}
+      iconContainerColor="energy"
+      heading="Energy Dashboard"
+      description="View your energy usage and bills."
+      onPress={() => console.log('Banner pressed')}
+    />
+    <Banner
+      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')}
+    />
+    <Banner
+      direction="vertical"
+      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')}
+    />
+  </Flex>
+</View>
+```
 
 ```jsx
+// Example usage
 import { Banner } from '@utilitywarehouse/hearth-react-native';
 import { ElectricityMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
@@ -290,9 +487,36 @@ const MyComponent = () => (
 
 Add a close button for dismissible banners:
 
-<Canvas of={Stories.WithClose} />
+```tsx
+// Example usage
+<View style={{ width: 400 }}>
+  <Flex spacing="lg" direction="column">
+    <Banner
+      icon={ElectricityMediumIcon}
+      iconContainerColor="energy"
+      heading="Special Announcement"
+      description="We have some exciting news to share with you."
+      onClose={() => console.log('Close pressed')}
+    />
+    <Banner
+      icon={MobileMediumIcon}
+      iconContainerColor="mobile"
+      direction="vertical"
+      heading="New Feature"
+      description="Check out our latest feature update."
+      button={
+        <Button size="sm" onPress={() => console.log('Explore pressed')}>
+          Explore
+        </Button>
+      }
+      onClose={() => console.log('Close pressed')}
+    />
+  </Flex>
+</View>
+```
 
 ```jsx
+// Example usage
 import { Banner } from '@utilitywarehouse/hearth-react-native';
 import { ElectricityMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
@@ -311,9 +535,45 @@ const MyComponent = () => (
 
 Stack the icon or image above the content:
 
-<Canvas of={Stories.VerticalLayout} />
+```tsx
+// Example usage
+<View style={{ width: 400 }}>
+  <Flex spacing="lg" direction="column">
+    <Banner
+      icon={ElectricityMediumIcon}
+      iconContainerColor="energy"
+      heading="Energy Services"
+      description="Manage your energy account and view your usage."
+      direction="vertical"
+    />
+    <Banner
+      variant="emphasis"
+      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"
+      direction="vertical"
+      button={
+        <Button size="sm" onPress={() => console.log('Learn More pressed')}>
+          Learn More
+        </Button>
+      }
+    />
+  </Flex>
+</View>
+```
 
 ```jsx
+// Example usage
 import { Banner } from '@utilitywarehouse/hearth-react-native';
 import { ElectricityMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
@@ -332,9 +592,158 @@ const MyComponent = () => (
 
 The component supports semantic color schemes for buttons and theming:
 
-<Canvas of={Stories.ColorSchemes} />
+```tsx
+// Example usage
+<View style={{ width: 400 }}>
+  <Flex spacing="lg" direction="column">
+    <Banner
+      icon={HomeMediumIcon}
+      iconContainerColor="highlight"
+      colorScheme="neutralStrong"
+      variant="subtle"
+      heading="Neutral Strong"
+      description="Banner with neutral strong color scheme and subtle variant."
+      button={
+        <Button size="sm" onPress={() => console.log('Action pressed')}>
+          Action
+        </Button>
+      }
+    />
+    <Banner
+      icon={HomeMediumIcon}
+      iconContainerColor="highlight"
+      colorScheme="neutralStrong"
+      variant="emphasis"
+      heading="Neutral Strong"
+      description="Banner with neutral strong color scheme and emphasis variant."
+      button={
+        <Button size="sm" onPress={() => console.log('Action pressed')}>
+          Action
+        </Button>
+      }
+    />
+    <Banner
+      icon={HomeMediumIcon}
+      iconContainerColor="highlight"
+      colorScheme="neutralSubtle"
+      heading="Neutral Subtle"
+      description="Banner with neutral subtle color scheme and subtle variant."
+      button={
+        <Button size="sm" onPress={() => console.log('Action pressed')}>
+          Action
+        </Button>
+      }
+    />
+    <Banner
+      icon={HomeMediumIcon}
+      iconContainerColor="highlight"
+      colorScheme="neutralSubtle"
+      variant="emphasis"
+      heading="Neutral Subtle"
+      description="Banner with neutral subtle color scheme and emphasis variant."
+      button={
+        <Button size="sm" onPress={() => console.log('Action pressed')}>
+          Action
+        </Button>
+      }
+    />
+    <Banner
+      icon={ElectricityMediumIcon}
+      iconContainerColor="pig"
+      iconContainerVariant="emphasis"
+      colorScheme="pig"
+      heading="Pig Pink"
+      description="Banner with pig color scheme."
+      button={
+        <Button size="sm" onPress={() => console.log('Action pressed')}>
+          Action
+        </Button>
+      }
+    />
+    <Banner
+      icon={ElectricityMediumIcon}
+      iconContainerColor="energy"
+      iconContainerVariant="emphasis"
+      colorScheme="energy"
+      heading="Energy Blue"
+      description="Banner with energy color scheme."
+      button={
+        <Button size="sm" onPress={() => console.log('Action pressed')}>
+          Action
+        </Button>
+      }
+    />
+    <Banner
+      icon={BroadbandMediumIcon}
+      iconContainerColor="broadband"
+      iconContainerVariant="emphasis"
+      colorScheme="broadband"
+      heading="Broadband Green"
+      description="Banner with broadband color scheme."
+      button={
+        <Button size="sm" onPress={() => console.log('Action pressed')}>
+          Action
+        </Button>
+      }
+    />
+    <Banner
+      icon={MobileMediumIcon}
+      iconContainerColor="mobile"
+      iconContainerVariant="emphasis"
+      colorScheme="mobile"
+      heading="Mobile Rose"
+      description="Banner with mobile color scheme."
+      button={
+        <Button size="sm" onPress={() => console.log('Action pressed')}>
+          Action
+        </Button>
+      }
+    />
+    <Banner
+      icon={InsuranceMediumIcon}
+      iconContainerColor="insurance"
+      iconContainerVariant="emphasis"
+      colorScheme="insurance"
+      heading="Insurance Orange"
+      description="Banner with insurance color scheme."
+      button={
+        <Button size="sm" onPress={() => console.log('Action pressed')}>
+          Action
+        </Button>
+      }
+    />
+    <Banner
+      icon={CashbackCardMediumIcon}
+      iconContainerColor="cashback"
+      iconContainerVariant="emphasis"
+      colorScheme="cashback"
+      heading="Cashback Lilac"
+      description="Banner with cashback color scheme."
+      button={
+        <Button size="sm" onPress={() => console.log('Action pressed')}>
+          Action
+        </Button>
+      }
+    />
+    <Banner
+      icon={HomeMediumIcon}
+      iconContainerColor="highlight"
+      iconContainerVariant="emphasis"
+      colorScheme="highlight"
+      heading="Highlight Yellow"
+      description="Banner with highlight color scheme."
+      button={
+        <Button size="sm" onPress={() => console.log('Action pressed')}>
+          Action
+        </Button>
+      }
+    />
+  </Flex>
+</View>
+```
 
 ```jsx
+// Example usage
 import { Banner } from '@utilitywarehouse/hearth-react-native';
 import { ElectricityMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
@@ -373,9 +782,47 @@ const MyComponent = () => (
 
 Combine multiple features for rich interactive banners:
 
-<Canvas of={Stories.ComplexExample} />
+```tsx
+// Example usage
+<View style={{ width: 400 }}>
+  <Flex spacing="lg" direction="column">
+    <Banner
+      icon={InsuranceMediumIcon}
+      iconContainerColor="insurance"
+      iconContainerVariant="emphasis"
+      colorScheme="neutralStrong"
+      heading="Home Insurance Alert"
+      description="Your policy renewal is coming up. Review your coverage and make any necessary changes."
+      button={
+        <Button size="sm" onPress={() => console.log('Review pressed')}>
+          Review Policy
+        </Button>
+      }
+      onPress={() => console.log('Banner pressed')}
+    />
+    <Banner
+      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"
+      link={<Link href="#">Explore benefits</Link>}
+      onClose={() => console.log('Close pressed')}
+    />
+  </Flex>
+</View>
+```
 
 ```jsx
+// Example usage
 import { Banner, BannerImage } from '@utilitywarehouse/hearth-react-native';
 import { InsuranceMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';