@utilitywarehouse/hearth-react-native 0.34.4 → 0.35.0

package/{src/components/Heading/Heading.docs.mdx → public/llms/components/heading.md}

@@ -1,14 +1,3 @@
-import { Canvas, Controls, Meta, Primary, Story } from '@storybook/addon-docs/blocks';
-import { Box, Center, Heading, Pressable } from '../../';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './Heading.stories';
-
-<Meta title="Typography / Heading" />
-
-<BackToTopButton />
-
-<ViewFigmaButton url="https://www.figma.com/design/9kCLtrMGwNFTscSEIbrXEl/Hearth-Design-Tokens?node-id=43-709" />
-
 # Heading
 
 The `Heading` component gives you the ability to create headings for your screen with different sizes.
@@ -21,19 +10,17 @@ The `Heading` component gives you the ability to create headings for your screen
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<Heading size="md" textDecorationColor="grey1000">
+  Hello there, I'm a heading!
+</Heading>
+```
 
 ## Usage
 
-<UsageWrap>
-  <Center>
-    <Heading>Welcome to Utility Warehouse</Heading>
-  </Center>
-</UsageWrap>
-
 ```jsx
+// Example usage
 import { Heading } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => <Heading>Welcome to Utility Warehouse</Heading>;
@@ -60,7 +47,31 @@ const MyComponent = () => <Heading>Welcome to Utility Warehouse</Heading>;
 
 The `Heading` component has different sizes to style the text.
 
-<Canvas of={Stories.KitchenSink} />
+```tsx
+// Example usage
+<Box gap="200">
+  <VariantTitle title="SM">
+    <Heading {...args} size="sm">
+      Hello there, I'm a heading!
+    </Heading>
+  </VariantTitle>
+  <VariantTitle title="MD">
+    <Heading {...args} size="md">
+      Hello there, I'm a heading!
+    </Heading>
+  </VariantTitle>
+  <VariantTitle title="LG">
+    <Heading {...args} size="lg">
+      Hello there, I'm a heading!
+    </Heading>
+  </VariantTitle>
+  <VariantTitle title="XL">
+    <Heading {...args} size="xl">
+      Hello there, I'm a heading!
+    </Heading>
+  </VariantTitle>
+</Box>
+```
 
 ## Accessibility
 

package/{src/components/HighlightBanner/HighlightBanner.docs.mdx → public/llms/components/highlight-banner.md}

@@ -1,15 +1,3 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import { Button, Center, HighlightBanner, HighlightBannerImage, Link } from '../../';
-import StorybookLink from '../../../../../shared/storybook/StorybookLink';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './HighlightBanner.stories';
-
-<Meta title="Components / Highlight Banner" />
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=8306-4665&t=qkAoIRb6rKiYkSIE-4" />
-
-<BackToTopButton />
-
 # Highlight Banner
 
 A `HighlightBanner` component is a specialised card layout designed for highlighting featured content with an image. It combines a colored heading banner, an optional image, and descriptive text with optional action buttons or links. Perfect for promotional content, featured articles, or important announcements.
@@ -29,30 +17,17 @@ A `HighlightBanner` component is a specialised card layout designed for highligh
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<View style={{ width: 400 }}>
+  <HighlightBanner {...args} />
+</View>
+```
 
 ## Usage
 
-<UsageWrap>
-  <Center>
-    <HighlightBanner
-      heading="Featured Content"
-      headingColor="energy"
-      image={
-        <HighlightBannerImage
-          source={{
-            uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=800&q=80',
-          }}
-        />
-      }
-      description="This is a description of the featured content that appears below the image."
-    />
-  </Center>
-</UsageWrap>
-
 ```jsx
+// Example usage
 import { HighlightBanner } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
@@ -97,7 +72,7 @@ The `HighlightBannerImage` component can be used to display an image within the
 | `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>.
+For more details about the ThemedImage component used internally, refer to the `ThemedImage` documentation.
 
 ## Variants
 
@@ -106,15 +81,22 @@ The HighlightBanner supports two visual variants:
 - **emphasis** (default) - Strong borders for clear visual separation
 - **subtle** - Softer borders for a more understated appearance
 
-## Examples
-
 ### With Button
 
 Add a Button component to provide a clear call-to-action:
 
-<Canvas of={Stories.WithButton} />
+```tsx
+// Example usage
+<View style={{ width: 400 }}>
+  <HighlightBanner
+    {...args}
+    button={<Button onPress={() => console.log('Button pressed')}>Learn More</Button>}
+  />
+</View>
+```
 
 ```jsx
+// Example usage
 import {
   HighlightBanner,
   Button,
@@ -142,9 +124,18 @@ const MyComponent = () => (
 
 Use a Link component for a lighter-weight action:
 
-<Canvas of={Stories.WithLink} />
+```tsx
+// Example usage
+<View style={{ width: 400 }}>
+  <HighlightBanner
+    {...args}
+    link={<Link onPress={() => console.log('Link pressed')}>View details</Link>}
+  />
+</View>
+```
 
 ```jsx
+// Example usage
 import { HighlightBanner, Link, HighlightBannerImage } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
@@ -168,9 +159,21 @@ const MyComponent = () => (
 
 Display the HighlightBanner without an image by omitting the `image` prop:
 
-<Canvas of={Stories.WithoutImage} />
+```tsx
+// Example usage
+<View style={{ width: 400 }}>
+  <HighlightBanner
+    {...args}
+    image={undefined}
+    heading="Content Without Image"
+    description="This HighlightBanner does not have an image, focusing solely on the text content."
+    button={<Button onPress={() => console.log('pressed')}>Discover More</Button>}
+  />
+</View>
+```
 
 ```jsx
+// Example usage
 import {
   HighlightBanner,
   Button,
@@ -190,9 +193,111 @@ const MyComponent = () => (
 
 The component supports seven semantic color schemes that automatically apply the appropriate subtle background colors:
 
-<Canvas of={Stories.ColorVariants} />
+```tsx
+// Example usage
+<View style={{ width: 400 }}>
+  <Flex spacing="lg" direction="column" align="stretch">
+    <HighlightBanner
+      {...args}
+      heading="Energy Blue"
+      headingColor="energy"
+      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>}
+    />
+    <HighlightBanner
+      {...args}
+      heading="Broadband Green"
+      headingColor="broadband"
+      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={
+        <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>}
+    />
+    <HighlightBanner
+      {...args}
+      heading="Cashback Lilac"
+      headingColor="cashback"
+      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>}
+    />
+    <HighlightBanner
+      {...args}
+      heading="Pig Pink"
+      headingColor="pig"
+      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>}
+    />
+    <HighlightBanner
+      {...args}
+      heading="Mobile Rose"
+      headingColor="mobile"
+      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={
+        <HighlightBannerImage
+          source={{
+            uri: 'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=800&q=80',
+          }}
+        />
+      }
+      description="Featured content with highlight yellow heading"
+    />
+  </Flex>
+</View>
+```
 
 ```jsx
+// Example usage
 import { HighlightBanner, HighlightBannerImage } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
@@ -260,9 +365,15 @@ const MyComponent = () => (
 
 Use the subtle variant for a softer, less prominent appearance:
 
-<Canvas of={Stories.SubtleCard} />
+```tsx
+// Example usage
+<View style={{ width: 400 }}>
+  <HighlightBanner {...args} />
+</View>
+```
 
 ```jsx
+// Example usage
 import { HighlightBanner, HighlightBannerImage } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
@@ -286,13 +397,65 @@ const MyComponent = () => (
 
 The component works well with various types of imagery:
 
-<Canvas of={Stories.DifferentImages} />
+```tsx
+// Example usage
+<Flex spacing="lg" direction="column">
+  <View style={{ width: 400 }}>
+    <HighlightBanner
+      {...args}
+      heading="Nature Landscape"
+      headingColor="broadband"
+      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>}
+    />
+  </View>
+  <View style={{ width: 400 }}>
+    <HighlightBanner
+      {...args}
+      heading="Urban Architecture"
+      headingColor="highlight"
+      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>}
+    />
+  </View>
+  <View style={{ width: 400 }}>
+    <HighlightBanner
+      {...args}
+      heading="Ocean Waves"
+      headingColor="energy"
+      image={
+        <HighlightBannerImage
+          source={{
+            uri: 'https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=800&q=80',
+          }}
+        />
+      }
+      description="Stunning ocean views and coastal beauty"
+    />
+  </View>
+</Flex>
+```
 
 ### Custom Image Height
 
 Control the image container height to suit your content needs:
 
 ```jsx
+// Example usage
 import { HighlightBanner, HighlightBannerImage } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (

package/{src/components/HTMLElements/Lists.docs.mdx → public/llms/components/html-elements/lists.md}

@@ -1,12 +1,3 @@
-import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
-import { BodyText, Center, LI, OL, UL } from '../..';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as UnorderedListStory from './UnorderedList.stories';
-
-<Meta title="Utility Components / UL & OL (Lists)" />
-
-<BackToTopButton />
-
 # UL & OL (Lists)
 
 The `UL` (Unordered List) and `OL` (Ordered List) components are used to display lists of items. `UL` displays a bulleted list, and `OL` displays a numbered list. The `LI` (List Item) component is used to define each item within these lists.
@@ -17,25 +8,11 @@ The `UL` (Unordered List) and `OL` (Ordered List) components are used to display
   - [Customising List Styles](#customising-list-styles)
 - [Components](#components)
 
-## Usage
-
 ### Unordered List (UL)
 
-<UsageWrap>
-  <Center>
-    <UL>
-      <LI>First item</LI>
-      <LI>Second item</LI>
-      <LI>
-        <BodyText>Third item with </BodyText>
-        <BodyText weight="bold">bold text</BodyText>
-      </LI>
-    </UL>
-  </Center>
-</UsageWrap>
-
 ```tsx
-import { UL, LI } from '@utilitywarehouse/native-ui';
+// Example usage
+import { UL, LI } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
   return (
@@ -50,21 +27,9 @@ const MyComponent = () => {
 
 ### Ordered List (OL)
 
-<UsageWrap>
-  <Center>
-    <OL>
-      <LI>First step</LI>
-      <LI>Second step</LI>
-      <LI>
-        <BodyText>Third item with </BodyText>
-        <BodyText weight="bold">bold text</BodyText>
-      </LI>
-    </OL>
-  </Center>
-</UsageWrap>
-
 ```tsx
-import { OL, LI } from '@utilitywarehouse/native-ui';
+// Example usage
+import { OL, LI } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
   return (
@@ -81,10 +46,24 @@ const MyComponent = () => {
 
 You can customise the appearance of list markers using props like `listStyleIcon`, `listStyleImage`, `listStyleColour`, and dimensions. These props can be applied to the `UL`/`OL` container to affect all items, or on individual `LI` components to override them.
 
-<Canvas of={UnorderedListStory.WithCustomIcon} />
+```tsx
+// Example usage
+<UnorderedList
+  {...args}
+  listStyleIcon={TickMediumIcon}
+  listStyleColour="feedbackDangerSurfaceDefault"
+>
+  <ListItem>List item 1 with icon</ListItem>
+  <ListItem>List item 2 with icon</ListItem>
+  <ListItem>
+    List item 3 with icon is a long example to test alignment, lorem ipsum dolor sit amet
+  </ListItem>
+</UnorderedList>
+```
 
 ```tsx
-import { UL, LI } from '@utilitywarehouse/native-ui';
+// Example usage
+import { UL, LI } from '@utilitywarehouse/hearth-react-native';
 import { TickMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { Image } from 'react-native';
 
@@ -106,8 +85,6 @@ const MyComponent = () => {
 };
 ```
 
-## Components
-
 ### `UL`
 
 The `UL` component is a container for unordered list items. It inherits all the properties of React Native's [`View` component](https://reactnative.dev/docs/view).

package/{src/components/IconButton/IconButton.docs.mdx → public/llms/components/icon-button.md}

@@ -1,19 +1,3 @@
-import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
-import {
-  AddSmallIcon,
-  ChevronRightMediumIcon,
-  ChevronRightSmallIcon,
-} from '@utilitywarehouse/hearth-react-native-icons';
-import { Box, Button, ButtonIcon, ButtonText, Center, IconButton } from '../../';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './IconButton.stories';
-
-<Meta title="Components / Icon Button" />
-
-<BackToTopButton />
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components?node-id=1-162" />
-
 # Icon Button
 
 The `IconButton` component is used to trigger an action or event, such as opening a dialog, canceling an action, or performing a delete operation.
@@ -26,24 +10,15 @@ The `IconButton` component is used to trigger an action or event, such as openin
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<IconButton {...args} icon={icon} />
+```
 
 ## Usage
 
-<UsageWrap>
-  <Center>
-    <IconButton
-      icon={ChevronRightMediumIcon}
-      size="sm"
-      onPress={() => console.log('Button pressed')}
-      colorScheme="affirmative"
-    />
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { IconButton } from '@utilitywarehouse/hearth-react-native';
 import { ChevronRightMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
@@ -79,7 +54,89 @@ const MyComponent = () => {
 
 ## Variants
 
-<Canvas of={Stories.KitchenSink} />
+```tsx
+// Example usage
+<Flex direction="row" spacing="lg" wrap="wrap">
+  {schemes.map(scheme => (
+    <Flex direction="column" spacing="lg" key={scheme}>
+      {variants
+        .filter(variant => {
+          if (inverted) {
+            if (scheme === 'highlight') {
+              return variant === 'emphasis' || variant === 'solid';
+            }
+            if (scheme === 'functional') {
+              return variant === 'outline' || variant === 'ghost';
+            } else return false;
+          }
+          if (scheme === 'highlight') {
+            return variant === 'emphasis' || variant === 'solid';
+          }
+          if (scheme === 'functional') {
+            return variant === 'outline' || variant === 'ghost';
+          } else {
+            return variant === 'solid' || variant === 'ghost' || variant === 'outline';
+          }
+        })
+        .map(variant => (
+          <Box key={variant} mb="100">
+            <Box mb="100">
+              <DetailText size="lg" color={inverted ? 'warmWhite50' : 'grey1000'}>
+                {scheme} - {variant}
+              </DetailText>
+            </Box>
+            <Flex direction="column" spacing="lg">
+              <VariantTitle title="Default" invert={inverted}>
+                {/* @ts-expect-error - story loop types don't match */}
+                <IconButton
+                  variant={variant}
+                  colorScheme={scheme}
+                  size={size}
+                  inverted={inverted}
+                  icon={icon}
+                />
+              </VariantTitle>
+              <VariantTitle title="Pressed" invert={inverted}>
+                {/* @ts-expect-error - story loop types don't match */}
+                <IconButton
+                  pressed
+                  variant={variant}
+                  colorScheme={scheme}
+                  size={size}
+                  inverted={inverted}
+                  icon={icon}
+                />
+              </VariantTitle>
+              <VariantTitle title="Disabled" invert={inverted}>
+                {/* @ts-expect-error - story loop types don't match */}
+                <IconButton
+                  disabled
+                  variant={variant}
+                  colorScheme={scheme}
+                  size={size}
+                  inverted={inverted}
+                  icon={icon}
+                />
+              </VariantTitle>
+              <VariantTitle title="Loading" invert={inverted}>
+                {/* @ts-expect-error - story loop types don't match */}
+                <IconButton
+                  loading
+                  variant={variant}
+                  colorScheme={scheme}
+                  disabled
+                  size={size}
+                  inverted={inverted}
+                  icon={icon}
+                />
+              </VariantTitle>
+            </Flex>
+          </Box>
+        ))}
+    </Flex>
+  ))}
+</Flex>
+```
 
 ## Custom Color Overrides
 
@@ -91,9 +148,54 @@ For most use cases, you should use the standard `colorScheme` and `variant` prop
 
 ### Example: Service Icon Buttons
 
-<Canvas of={Stories.ServiceIconButtons} />
+```tsx
+// Example usage
+<ButtonGroup spacing="md">
+  <IconButton
+    icon={ElectricityMediumIcon}
+    backgroundColor="energyBlue200"
+    activeBackgroundColor="energyBlue300"
+    variant="emphasis"
+    shadowColor="energyBlue300"
+    onPress={() => console.log('Pressed')}
+  />
+  <IconButton
+    icon={BroadbandMediumIcon}
+    backgroundColor="broadbandGreen200"
+    activeBackgroundColor="broadbandGreen300"
+    variant="emphasis"
+    shadowColor="broadbandGreen300"
+    onPress={() => console.log('Pressed')}
+  />
+  <IconButton
+    icon={MobileMediumIcon}
+    backgroundColor="mobileRose200"
+    activeBackgroundColor="mobileRose300"
+    variant="emphasis"
+    shadowColor="mobileRose400"
+    onPress={() => console.log('Pressed')}
+  />
+  <IconButton
+    icon={InsuranceMediumIcon}
+    backgroundColor="insuranceOrange300"
+    activeBackgroundColor="insuranceOrange400"
+    variant="emphasis"
+    shadowColor="insuranceOrange400"
+    onPress={() => console.log('Pressed')}
+  />
+  <IconButton
+    icon={CashbackCardMediumIcon}
+    backgroundColor="cashbackLilac300"
+    activeBackgroundColor="cashbackLilac400"
+    variant="emphasis"
+    shadowColor="cashbackLilac500"
+    onPress={() => console.log('Pressed')}
+  />
+</ButtonGroup>
+```
 
 ```tsx
+// Example usage
 import { IconButton } from '@utilitywarehouse/hearth-react-native';
 import {
   ElectricityMediumIcon,