@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.0

package/{src/components/Accordion/Accordion.docs.mdx → public/llms/components/accordion.md}

@@ -1,25 +1,3 @@
-import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
-import {
-  Accordion,
-  AccordionContent,
-  AccordionContentText,
-  AccordionHeader,
-  AccordionIcon,
-  AccordionItem,
-  AccordionTitleText,
-  AccordionTrigger,
-  Badge,
-} from '../';
-import { Alert, BodyText, Box, Card, Center, Flex, List, ListItem } from '../../';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './Accordion.stories';
-
-<Meta title="Components / Accordion" />
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=1-140" />
-
-<BackToTopButton />
-
 # Accordion
 
 The Accordion component is a vertically stacked set of interactive headers that each reveal a section of content.
@@ -35,29 +13,68 @@ It is commonly used to condense large amounts of information into a more managea
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<Accordion {...args}>
+  <AccordionItem title="How do I place an order?">
+    <AccordionHeader>
+      <AccordionTrigger>
+        {({ isExpanded }: { isExpanded: boolean }) => {
+          return (
+            <>
+              <AccordionTitleText>How do I place an order?</AccordionTitleText>
+              {isExpanded ? (
+                <AccordionIcon as={ChevronUpSmallIcon} />
+              ) : (
+                <AccordionIcon as={ChevronDownSmallIcon} />
+              )}
+            </>
+          );
+        }}
+      </AccordionTrigger>
+    </AccordionHeader>
+    <AccordionContent>
+      <AccordionContentText>
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+      </AccordionContentText>
+    </AccordionContent>
+  </AccordionItem>
+
+  <AccordionItem>
+    <AccordionHeader>
+      <AccordionTrigger>
+        {({ isExpanded }: { isExpanded: boolean }) => {
+          return (
+            <>
+              <AccordionTitleText>What payment methods do you accept?</AccordionTitleText>
+              {isExpanded ? (
+                <AccordionIcon as={ChevronUpSmallIcon} />
+              ) : (
+                <AccordionIcon as={ChevronDownSmallIcon} />
+              )}
+            </>
+          );
+        }}
+      </AccordionTrigger>
+    </AccordionHeader>
+    <AccordionContent>
+      <AccordionContentText>
+        We accept all major credit cards, PayPal, and bank transfers.
+      </AccordionContentText>
+    </AccordionContent>
+  </AccordionItem>
+  <AccordionItem title="What is your return policy?">
+    <BodyText>
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam, voluptatibus.
+    </BodyText>
+  </AccordionItem>
+</Accordion>
+```
 
 # Usage
 
-<UsageWrap>
-  <Center>
-    <Accordion>
-      <AccordionItem title="Item 1">
-        <BodyText>Content for Item 1</BodyText>
-      </AccordionItem>
-      <AccordionItem title="Item 2">
-        <BodyText>Content for Item 2</BodyText>
-      </AccordionItem>
-      <AccordionItem title="Item 3">
-        <BodyText>Content for Item 3</BodyText>
-      </AccordionItem>
-    </Accordion>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { BodyText, Accordion, AccordionItem } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
@@ -108,25 +125,8 @@ const MyComponent = () => {
 The Accordion component can be used in more complex scenarios, such as when you need to control the expanded
 state of the items or when you want to customise the header and content.
 
-<UsageWrap>
-  <Center>
-    <Accordion
-      type="multiple"
-      defaultValue={['item-1']}
-      heading="Frequently Asked Questions"
-      helperText="Click to expand"
-    >
-      <AccordionItem title="How do I place an order?" value="item-1">
-        <BodyText> Lorem ipsum dolor sit amet consectetur, adipisicing elit.</BodyText>
-      </AccordionItem>
-      <AccordionItem title="What payment methods do you accept?" value="item-2">
-        <BodyText>We accept all major credit cards, PayPal, and bank transfers.</BodyText>
-      </AccordionItem>
-    </Accordion>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import {
   Accordion,
   AccordionContent,
@@ -137,7 +137,7 @@ import {
   AccordionTitleText,
   AccordionTrigger,
   SectionHeader,
-} from '@utilitywarehouse/native-ui';
+} from '@utilitywarehouse/hearth-react-native';
 import {
   ChevronDownSmallIcon,
   ChevronUpSmallIcon,
@@ -199,31 +199,12 @@ const MyComponent = () => {
 };
 ```
 
-## Examples
-
 ### With heading text and helper text
 
 You can add a heading and helper text to the accordion to provide context for the user.
 
-<UsageWrap>
-  <Center>
-    <Accordion
-      type="multiple"
-      defaultValue={['item-1']}
-      heading="Frequently Asked Questions"
-      helperText="Click to expand"
-    >
-      <AccordionItem title="How do I place an order?" value="item-1">
-        <BodyText> Lorem ipsum dolor sit amet consectetur, adipisicing elit.</BodyText>
-      </AccordionItem>
-      <AccordionItem title="What payment methods do you accept?" value="item-2">
-        <BodyText>We accept all major credit cards, PayPal, and bank transfers.</BodyText>
-      </AccordionItem>
-    </Accordion>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Accordion, AccordionItem, BodyText } from '@utilitywarehouse/hearth-react-native';
 import {
   ChevronDownSmallIcon,
@@ -253,24 +234,8 @@ const MyComponent = () => {
 
 You can use custom content for the trigger of the accordion item, such as an icon or badge.
 
-<UsageWrap>
-  <Center>
-    <Accordion type="multiple" defaultValue={['item-1']}>
-      <AccordionItem
-        title="How do I place an order?"
-        value="item-1"
-        triggerContent={<Badge>New Content</Badge>}
-      >
-        <BodyText> Lorem ipsum dolor sit amet consectetur, adipisicing elit.</BodyText>
-      </AccordionItem>
-      <AccordionItem title="What payment methods do you accept?" value="item-2">
-        <BodyText>We accept all major credit cards, PayPal, and bank transfers.</BodyText>
-      </AccordionItem>
-    </Accordion>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Accordion, AccordionItem, Badge, BodyText } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {

package/{src/components/Alert/Alert.docs.mdx → public/llms/components/alert.md}

@@ -1,25 +1,3 @@
-import { Canvas, Controls, Meta, Primary, Story } from '@storybook/addon-docs/blocks';
-import {
-  Alert,
-  AlertCloseButton,
-  AlertContent,
-  AlertIcon,
-  AlertIconButton,
-  AlertLink,
-  AlertText,
-  AlertTitle,
-  Center,
-} from '../../';
-import * as Stories from './Alert.stories';
-
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-
-<Meta title="Components / Alert" />
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=1-141" />
-
-<BackToTopButton />
-
 # Alert
 
 The `Alert` component displays a short, important message in a way that attracts the user's attention without interrupting the user's task.
@@ -34,22 +12,24 @@ The Alert offers different colour schemes, the colour scheme is mapped to an ico
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<Alert
+  colorScheme="info"
+  title="Information"
+  text="Unlock the power of knowledge with the following information."
+  link="Learn more"
+  onPress={() => alert('Alert pressed')}
+  onClose={() => alert('Alert closed')}
+  onPressIconButton={() => alert('Icon button pressed')}
+/>
+```
 
 ## Usage
 
-<UsageWrap>
-  <Alert
-    colorScheme="info"
-    title="Information"
-    text="Unlock the power of knowledge with the following information."
-  />
-</UsageWrap>
-
 ```tsx
-import { Alert } from '@utilitywarehouse/native-ui';
+// Example usage
+import { Alert } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
   return (
@@ -81,26 +61,43 @@ const MyComponent = () => {
 
 The `Alert` component has four colour schemes: info, positive, warning and danger. Each colour scheme is mapped to an icon.
 
-<Canvas of={Stories.Variants} />
+```tsx
+// Example usage
+<Flex spacing="sm">
+  <VariantTitle title="Info - Blue">
+    <Alert
+      colorScheme="info"
+      text="Unlock the power of knowledge with the following information."
+    />
+  </VariantTitle>
+  <VariantTitle title="Success - positive">
+    <Alert
+      colorScheme="positive"
+      text="Boom! You did it! Please take a moment to pat yourself on the back. You've earned it!"
+    />
+  </VariantTitle>
+  <VariantTitle title="Error - Red">
+    <Alert
+      colorScheme="danger"
+      text="Uh-oh! It looks like the matrix has glitched. Our team of tech ninjas are already on the
+      case. Please hold tight while we fix the issue"
+    />
+  </VariantTitle>
+  <VariantTitle title="Warning - warning">
+    <Alert
+      colorScheme="warning"
+      text="Warning: Reading the following content may cause spontaneous outbursts of 'aha!' moments"
+    />
+  </VariantTitle>
+</Flex>
+```
 
 ## Advanced Usage
 
 If you need to use the Alert component in a more advanced way, you can use the parts of the component directly.
 
-<UsageWrap>
-  <Alert colorScheme="info">
-    <AlertIcon />
-    <AlertContent>
-      <AlertTitle>Information</AlertTitle>
-      <AlertText>Unlock the power of knowledge with the following information.</AlertText>
-      <AlertLink onPress={() => console.log('Link clicked')}>Learn more</AlertLink>
-    </AlertContent>
-    <AlertIconButton onPress={() => console.log('Icon button clicked')} />
-    <AlertCloseButton onClose={() => console.log('Close button clicked')} />
-  </Alert>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import {
   Alert,
   AlertIcon,
@@ -111,7 +108,7 @@ import {
   AlertIconButton,
   AlertCloseButton,
   AlertContent,
-} from '@utilitywarehouse/native-ui';
+} from '@utilitywarehouse/hearth-react-native';
 import { InfoMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
 const MyComponent = () => {

package/{src/components/Avatar/Avatar.docs.mdx → public/llms/components/avatar.md}

@@ -1,14 +1,3 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import { Avatar, Box, Center } from '../..';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './Avatar.stories';
-
-<Meta title="Components / Avatar" />
-
-<BackToTopButton />
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components-%26-Tokens?node-id=1%3A148" />
-
 # Avatar
 
 Avatars help humanise the product experience by connecting users with the product and to each other.
@@ -20,25 +9,21 @@ Avatars help humanise the product experience by connecting users with the produc
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
-
-## Usage
+```tsx
+// Example usage
+<Avatar
+  size="md"
+  name="Jane Doe"
+  src={{ uri: 'https://ca.slack-edge.com/T0HR00WDA-U05SHRATW7Q-3ad4ae7c75b8-512' }}
+/>
+```
 
 ### Icon
 
 The icon variant is the default `Avatar` type. It ensures UI remains balanced and visually complete, even with limited data.
 
-<UsageWrap>
-  <Center>
-    <Box>
-      <Avatar />
-    </Box>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Avatar } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => <Avatar />;
@@ -48,15 +33,8 @@ const MyComponent = () => <Avatar />;
 
 The initials variant can be used when a profile image is not available, but you have the user's name.
 
-<UsageWrap>
-  <Center>
-    <Box>
-      <Avatar name="Jane Doe" />
-    </Box>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Avatar } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => <Avatar name="Jane Doe" />;
@@ -66,18 +44,8 @@ const MyComponent = () => <Avatar name="Jane Doe" />;
 
 The image variant is available to use in journeys where a user is able to upload their own profile picture.
 
-<UsageWrap>
-  <Center>
-    <Box>
-      <Avatar
-        name="Jane Doe"
-        src={{ uri: 'https://ca.slack-edge.com/T0HR00WDA-U05SHRATW7Q-3ad4ae7c75b8-512' }}
-      />
-    </Box>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Avatar } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
@@ -90,13 +58,13 @@ const MyComponent = () => (
 
 ## Props
 
-| Property                | Type                                                       | Description                                                                          | Default |
-| ----------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------ | ------- |
-| `src`                   | `ImageSourcePropType`                                      | The image source to display.                                                         |         |
-| `name`                  | `string`                                                   | The name associated with the avatar, used for creating initials and accessibility.   |         |
-| `size`                  | `'sm' \| 'md'`                                             | Sets the avatar size.                                                                | `md`    |
-| `delayMs`               | `number`                                                   | Delay in milliseconds before the image is rendered to avoid flickering.              | `0`     |
-| `onLoadingStatusChange` | `(status: 'idle' \| 'loading' \| 'loaded' \| 'error') => void` | Callback fired when the loading status of the image changes.                         |         |
+| Property                | Type                                                           | Description                                                                        | Default |
+| ----------------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------- |
+| `src`                   | `ImageSourcePropType`                                          | The image source to display.                                                       |         |
+| `name`                  | `string`                                                       | The name associated with the avatar, used for creating initials and accessibility. |         |
+| `size`                  | `'sm' \| 'md'`                                                 | Sets the avatar size.                                                              | `md`    |
+| `delayMs`               | `number`                                                       | Delay in milliseconds before the image is rendered to avoid flickering.            | `0`     |
+| `onLoadingStatusChange` | `(status: 'idle' \| 'loading' \| 'loaded' \| 'error') => void` | Callback fired when the loading status of the image changes.                       |         |
 
 ## Accessibility
 

package/{src/components/Badge/Badge.docs.mdx → public/llms/components/badge.md}

@@ -1,16 +1,3 @@
-import { Canvas, Controls, Meta, Primary, Story } from '@storybook/addon-docs/blocks';
-import { AddSmallIcon, TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { color } from '@utilitywarehouse/hearth-tokens/js';
-import { Badge, BadgeIcon, BadgeText, Box, Center, Pressable } from '../..';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './Badge.stories';
-
-<Meta title="Components / Badge" />
-
-<BackToTopButton />
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components?node-id=1-148" />
-
 # Badge
 
 Use the `Badge` component to draw attention to another interface element or to provide additional context (such as status).
@@ -23,9 +10,10 @@ Use the `Badge` component to draw attention to another interface element or to p
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<Badge {...args} icon={icon} />
+```
 
 ## Usage
 
@@ -35,17 +23,8 @@ Badge is a stateless component, e.g. it has no Pressed, Disabled, Active states.
 - Assigning a piece of content to a group (tagging)
 - Performing an action
 
-<UsageWrap>
-  <Center>
-    <Box>
-      <Badge colorScheme="danger" icon={TickSmallIcon}>
-        {"I'm a badge"}
-      </Badge>
-    </Box>
-  </Center>
-</UsageWrap>
-
 ```jsx
+// Example usage
 import { Badge, Center } from '@utilitywarehouse/hearth-react-native';
 import { color } from '@utilitywarehouse/hearth-tokens';
 import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
@@ -73,24 +52,63 @@ const MyComponent = () => (
 
 The `Badge` component has different sizes to style the spinner.
 
-<Canvas of={Stories.KitchenSink} />
+```tsx
+// Example usage
+<Flex direction="column" spacing="lg" style={{ width: '100%' }}>
+  {colorSchemes.map(cs => {
+    // Determine allowed variants per color scheme based on design constraints:
+    // - Remove 'outline' for energy, broadband, mobile, insurance, cashback, pig, highlight
+    // - For highlight only show 'subtle'
+    const noOutlineSchemes: Array<BadgeProps['colorScheme']> = [
+      'energy',
+      'broadband',
+      'mobile',
+      'insurance',
+      'cashback',
+      'pig',
+      'highlight',
+    ];
+    let variantsForScheme: Array<BadgeProps['variant']> = ['subtle', 'emphasis', 'outline'];
+
+    if (noOutlineSchemes.includes(cs)) {
+      variantsForScheme = ['subtle', 'emphasis'];
+    }
+    if (cs === 'highlight') {
+      variantsForScheme = ['subtle'];
+    }
+
+    return (
+      <Box key={cs} gap="200">
+        <VariantTitle title={cs.charAt(0).toUpperCase() + cs.slice(1)}>
+          <Flex direction="column" spacing="sm">
+            {sizes.map(sz => (
+              <Flex key={sz} direction="row" align="center" spacing="md">
+                {variantsForScheme.map(variant => (
+                  <Badge
+                    key={`${cs}-${sz}-${variant}`}
+                    colorScheme={cs}
+                    size={sz}
+                    variant={variant}
+                  >
+                    {`${variant} ${sz}`}
+                  </Badge>
+                ))}
+              </Flex>
+            ))}
+          </Flex>
+        </VariantTitle>
+      </Box>
+    );
+  })}
+</Flex>
+```
 
 ## Advanced Usage
 
 Although not recommended, the `Badge` component can be used to create more complex UI with the internal parts of the badge.
 
-<UsageWrap>
-  <Center>
-    <Box>
-      <Badge colorScheme="positive" variant="outline">
-        <BadgeIcon as={AddSmallIcon} />
-        <BadgeText>Plus</BadgeText>
-      </Badge>
-    </Box>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Badge, BadgeText, BadgeIcon } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (