@utilitywarehouse/hearth-react-native 0.34.4 → 0.35.0

package/{src/components/IconContainer/IconContainer.docs.mdx → public/llms/components/icon-container.md}

@@ -1,20 +1,3 @@
-import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
-import {
-  BroadbandMediumIcon,
-  CashbackCardMediumIcon,
-  ElectricityMediumIcon,
-  EmailMediumIcon,
-  InsuranceMediumIcon,
-  MobileMediumIcon,
-} from '@utilitywarehouse/hearth-react-native-icons';
-import { Center, Flex, IconContainer } from '../../';
-import { BackToTopButton, UsageWrap } from '../../../docs/components';
-import * as Stories from './IconContainer.stories';
-
-<BackToTopButton />
-
-<Meta title="Components / Icon Container" />
-
 # Icon Container
 
 The `IconContainer` component provides a consistent background and sizing (via component tokens) for any standalone icon, with semantic colour families and subtle/emphasis variants.
@@ -26,28 +9,17 @@ The `IconContainer` component provides a consistent background and sizing (via c
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<IconContainer {...args} />
+```
 
 ## Usage
 
 Wrap an icon with the `IconContainer` to apply sizing + background styles without repeating layout code.
 
-<UsageWrap>
-  <Center>
-    <Flex direction="row" spacing="lg" alignItems="center">
-      <IconContainer icon={ElectricityMediumIcon} size="md" variant="emphasis" color="energy" />
-      <IconContainer icon={BroadbandMediumIcon} size="md" variant="emphasis" color="broadband" />
-      <IconContainer icon={MobileMediumIcon} size="md" variant="emphasis" color="mobile" />
-      <IconContainer icon={InsuranceMediumIcon} size="md" variant="emphasis" color="insurance" />
-      <IconContainer icon={CashbackCardMediumIcon} size="md" variant="emphasis" color="cashback" />
-      <IconContainer icon={EmailMediumIcon} size="md" variant="emphasis" color="pig" />
-    </Flex>
-  </Center>
-</UsageWrap>
-
 ```jsx
+// Example usage
 import { IconContainer } from '@utilitywarehouse/hearth-react-native';
 import {
   ElectricityMediumIcon,
@@ -55,7 +27,7 @@ import {
   MobileMediumIcon,
   InsuranceMediumIcon,
   CashbackCardMediumIcon,
-  ,
+  EmailMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
 
 const MyComponent = () => (
@@ -87,4 +59,41 @@ const MyComponent = () => (
 
 Use the matrix below to compare every combination of size, variant, and color.
 
-<Canvas of={Stories.KitchenSink} />
+```tsx
+// Example usage
+<Flex direction="column" spacing="lg">
+  {sizes.map(size => (
+    <Box key={size} gap="300">
+      <VariantTitle title={`Size: ${size.toUpperCase()} / Subtle`}>
+        <Flex direction="row" wrap="wrap" spacing="md">
+          {colors.map(color => (
+            <IconContainer
+              key={`${size}-subtle-${color}`}
+              icon={icon}
+              size={size}
+              variant="subtle"
+              color={color}
+            />
+          ))}
+        </Flex>
+      </VariantTitle>
+      <VariantTitle title={`Size: ${size.toUpperCase()} / Emphasis`}>
+        <Flex direction="row" wrap="wrap" spacing="md">
+          {colors.map(
+            color =>
+              color !== 'highlight' && (
+                <IconContainer
+                  key={`${size}-emphasis-${color}`}
+                  icon={icon}
+                  size={size}
+                  variant="emphasis"
+                  color={color}
+                />
+              )
+          )}
+        </Flex>
+      </VariantTitle>
+    </Box>
+  ))}
+</Flex>
+```

package/{src/components/Icon/Icon.docs.mdx → public/llms/components/icon.md}

@@ -1,19 +1,3 @@
-import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
-import {
-  BroadbandMediumIcon,
-  ElectricityMediumIcon,
-  InsuranceMediumIcon,
-  MobileMediumIcon,
-} from '@utilitywarehouse/hearth-react-native-icons';
-import { Center, createIcon, Flex, Icon, Pressable } from '../../';
-import { BackToTopButton, UsageWrap } from '../../../docs/components';
-import { lightTheme } from '../../core/themes';
-import * as Stories from './Icon.stories';
-
-<BackToTopButton />
-
-<Meta title="Components / Icons" />
-
 # Icons
 
 Icons are often used to enhance the usability and accessibility of digital products by providing users with clear and intuitive visual cues. It serves as an intuitive and easily recognizable way to communicate with users.
@@ -25,9 +9,10 @@ Icons are often used to enhance the usability and accessibility of digital produ
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<Icon as={as} color={color} />
+```
 
 ## Usage
 
@@ -38,18 +23,8 @@ We recommend that you use the `Icon` component to ensure that the icons are styl
 The `Icon` component also provides additional functionality such as handling different color modes and sizes as well as automatically applying
 light and dark mode colors from the theme.
 
-<UsageWrap>
-  <Center>
-    <Flex spacing="lg" direction="row" alignItems="center">
-      <ElectricityMediumIcon color={lightTheme.color.energyBlue['700']} />
-      <MobileMediumIcon color={lightTheme.color.mobileRose['700']} />
-      <BroadbandMediumIcon color={lightTheme.color.broadbandGreen['700']} />
-      <InsuranceMediumIcon color={lightTheme.color.insuranceOrange['700']} />
-    </Flex>
-  </Center>
-</UsageWrap>
-
 ```jsx
+// Example usage
 import { Flex, Icon, color } from '@utilitywarehouse/hearth-react-native';
 import {
   ElectricityMediumIcon,
@@ -74,6 +49,7 @@ const MyComponent = () => {
 Or you can use the icons directly from the `@utilitywarehouse/hearth-react-native-icons` package. Make sure you handle the color prop correctly, including light and dark modes.
 
 ```jsx
+// Example usage
 import { Flex, Icon, color } from '@utilitywarehouse/hearth-react-native';
 import {
   ElectricityMediumIcon,

package/public/llms/components/indicator-icon-button.md

@@ -0,0 +1,138 @@
+# Indicator Icon Button
+
+The `IndicatorIconButton` component is used to trigger an action or event, such as opening a dialog or navigating to other screen. It extends the regular `UnstyledIconButton` with an optional red dot indicator in the top-right corner, useful for showing notifications or unread status.
+
+- [Playground](#playground)
+- [Usage](#usage)
+- [Props](#props)
+- [Examples](#examples)
+
+## Playground
+
+```tsx
+// Example usage
+<IndicatorIconButton {...args} icon={icon} />
+```
+
+## Usage
+
+```tsx
+// Example usage
+import { IndicatorIconButton } from '@utilitywarehouse/hearth-react-native';
+import { BellMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+
+const MyComponent = () => {
+  const handlePress = () => {
+    console.log('Button pressed');
+  };
+  return <IndicatorIconButton icon={BellMediumIcon} onPress={handlePress} indicator={true} />;
+};
+```
+
+## Props
+
+| Property    | Type         | Description                                                | Default |
+| ----------- | ------------ | ---------------------------------------------------------- | ------- |
+| `onPress`   | `() => void` | Callback function to be called when the button is pressed. | -       |
+| `pressed`   | `boolean`    | Changes the button to a pressed state.                     | `false` |
+| `indicator` | `boolean`    | Shows a red dot indicator in the top-right corner.         | `false` |
+
+### Variants
+
+```tsx
+// Example usage
+<Flex direction="column" spacing="xl">
+  <Flex direction="row" spacing="lg">
+    <Box>
+      <VariantTitle title="Without Indicator" invert={args.inverted}>
+        <IndicatorIconButton {...args} icon={icon} indicator={false} />
+      </VariantTitle>
+    </Box>
+    <Box>
+      <VariantTitle title="With Indicator" invert={args.inverted}>
+        <IndicatorIconButton {...args} icon={icon} indicator={true} />
+      </VariantTitle>
+    </Box>
+  </Flex>
+  <Flex direction="row" spacing="lg">
+    <Box style={{ backgroundColor: 'purple', padding: 10, borderRadius: 8 }}>
+      <VariantTitle title="Inverted" invert={!args.inverted}>
+        <IndicatorIconButton {...args} icon={icon} inverted={true} />
+      </VariantTitle>
+    </Box>
+  </Flex>
+</Flex>
+```
+
+### Colour icons
+
+You can pass color as the iconStyle props:
+
+```javascript
+// Example usage
+const { color } = useTheme();
+
+return <IndicatorIconButton {...props} iconStyle={{ color: color.energyBlue[300] }} />;
+```
+
+It does not work on Storybook on web, only mobile.
+
+```tsx
+// Example usage
+<Flex direction="column" spacing="xl">
+  <Flex direction="row" spacing="lg">
+    <Box>
+      <IndicatorIconButton
+        {...args}
+        icon={icon}
+        iconStyle={{ color: theme.color.energyBlue[300] }}
+      />
+    </Box>
+    <Box>
+      <IndicatorIconButton
+        {...args}
+        icon={icon}
+        iconStyle={{ color: theme.color.cashbackLilac[500] }}
+      />
+    </Box>
+  </Flex>
+</Flex>
+```
+
+### Adding accessibility label
+
+```tsx
+// Example usage
+<Flex direction="column" spacing="xl">
+  <Box>
+    <VariantTitle title="Notification label" invert={args.inverted}>
+      <IndicatorIconButton
+        {...args}
+        icon={Icons.BellMediumIcon}
+        indicator={true}
+        accessibilityLabel="New notifications available"
+      />
+    </VariantTitle>
+  </Box>
+  <Box>
+    <VariantTitle title="No new actions, cashback section" invert={args.inverted}>
+      <IndicatorIconButton
+        {...args}
+        icon={Icons.CashbackCardMediumIcon}
+        indicator={false}
+        accessibilityLabel="Cashback section"
+      />
+    </VariantTitle>
+  </Box>
+  <Box>
+    <VariantTitle title="New action, cashback section" invert={args.inverted}>
+      <IndicatorIconButton
+        {...args}
+        icon={Icons.CashbackCardMediumIcon}
+        indicator={true}
+        accessibilityLabel="Cashback section, new transactions"
+      />
+    </VariantTitle>
+  </Box>
+</Flex>
+```

package/{src/components/InlineLink/InlineLink.docs.mdx → public/llms/components/inline-link.md}

@@ -1,14 +1,3 @@
-import { Meta, Canvas, Story, Controls, Primary } from '@storybook/addon-docs/blocks';
-import * as Stories from './InlineLink.stories';
-import { Center, Pressable, InlineLink, BodyText } from '../../';
-import { UsageWrap, BackToTopButton, ViewFigmaButton } from '../../../docs/components';
-
-<Meta title="Utility Components / Inline Link" />
-
-<BackToTopButton />
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components?node-id=1-154" />
-
 # Inline Link
 
 An `InlineLink` is a hyperlink embedded directly within a sentence or paragraph of text.
@@ -21,25 +10,17 @@ An Inline text should follow the typography style on the body of copy is sits wi
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<InlineLink href="https://www.uw.co.uk" target="_blank">
+  embedded link
+</InlineLink>
+```
 
 ## Usage
 
-<UsageWrap>
-  <Center>
-    <BodyText>
-      {'This is the body text style, and it contains an '}
-      <InlineLink href="https://www.uw.co.uk" target="_blank">
-        {'embedded link'}
-      </InlineLink>
-      {' within this text. This works on white backgrounds'}
-    </BodyText>
-  </Center>
-</UsageWrap>
-
 ```jsx
+// Example usage
 import { BodyText, InlineLink } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (

package/{src/components/Input/Input.docs.mdx → public/llms/components/input.md}

@@ -1,21 +1,3 @@
-import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
-import { EmailMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { Center, FormField, Input, InputField, InputIcon, InputSlot, Pressable } from '../../';
-import StorybookLink from '../../../../../shared/storybook/StorybookLink';
-import {
-  AdvancedInputExample,
-  BackToTopButton,
-  UsageWrap,
-  ViewFigmaButton,
-} from '../../../docs/components';
-import * as Stories from './Input.stories';
-
-<Meta title="Forms / Input" />
-
-<BackToTopButton />
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components-%26-Tokens?node-id=1-152" />
-
 # Input
 
 The input component is a text field that allows users to enter text, numbers, or other data. It is commonly used in forms and search fields.
@@ -37,24 +19,21 @@ The input component is a text field that allows users to enter text, numbers, or
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<Input
+  {...args}
+  leadingIcon={leadingIcon}
+  trailingIcon={trailingIcon}
+  label="First Name"
+  helperText="Only enter your first name, not your full name"
+/>
+```
 
 ## Usage
 
-<UsageWrap>
-  <Center>
-    <Input>
-      <InputSlot>
-        <InputIcon as={EmailMediumIcon} />
-      </InputSlot>
-      <InputField placeholder="Placeholder" onChangeText={() => console.log('###')} />
-    </Input>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Input } from '@utilitywarehouse/hearth-react-native';
 import { EmailMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
@@ -74,8 +53,6 @@ const MyComponent = () => {
 };
 ```
 
-## Props
-
 ### `Input`
 
 When using the component with basic usage the `Input` inherits all of the React Native [`TextInput` props](https://reactnative.dev/docs/textinput).
@@ -141,13 +118,8 @@ The `InputField` inherits all of the React Native [`TextInput` props](https://re
 
 The `Input` component can be used with the `InputField`, `InputSlot` and `InputIcon` components to create a custom input field.
 
-<UsageWrap>
-  <Center>
-    <AdvancedInputExample />
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import {
   Input,
   InputField,
@@ -198,26 +170,70 @@ export default AdvancedExample;
 
 The `Input` component has the following variants:
 
-<Canvas of={Stories.Variants} />
-
-## Examples
+```tsx
+// Example usage
+<Flex direction="column" spacing="lg">
+  <VariantTitle title="Default">
+    <Input />
+  </VariantTitle>
+  <VariantTitle title="With icon">
+    <Input leadingIcon={EmailMediumIcon} />
+  </VariantTitle>
+  <VariantTitle title="With placeholder">
+    <Input placeholder="Input placeholder" />
+  </VariantTitle>
+  <VariantTitle title="With value">
+    <Input placeholder="Input placeholder" value="filling the value" />
+  </VariantTitle>
+  <VariantTitle title="Focused">
+    <Input focused placeholder="Input placeholder" value="filling the value" />
+  </VariantTitle>
+  <VariantTitle title="Type password">
+    <Input placeholder="Input placeholder" value="filling the value" type="password" />
+  </VariantTitle>
+  <VariantTitle title="Type search">
+    <Input placeholder="Input placeholder" type="search" />
+  </VariantTitle>
+  <VariantTitle title="Type search - clearable">
+    <Input
+      placeholder="Input placeholder"
+      type="search"
+      value={clearableSearchValue}
+      clearable
+      onChange={handleClearableSearchChange}
+      onClear={handleClearableSearchClear}
+    />
+  </VariantTitle>
+  <VariantTitle title="Type search - loading">
+    <Input placeholder="Input placeholder" type="search" loading />
+  </VariantTitle>
+  <VariantTitle title="Valid">
+    <Input validationStatus="valid" placeholder="Input placeholder" />
+  </VariantTitle>
+  <VariantTitle title="Valid focused">
+    <Input validationStatus="valid" focused placeholder="Input placeholder" />
+  </VariantTitle>
+  <VariantTitle title="Invalid">
+    <Input validationStatus="invalid" placeholder="Input placeholder" />
+  </VariantTitle>
+  <VariantTitle title="Invalid focused">
+    <Input validationStatus="invalid" focused placeholder="Input placeholder" />
+  </VariantTitle>
+  <VariantTitle title="Disabled">
+    <Input disabled placeholder="Input placeholder" />
+  </VariantTitle>
+  <VariantTitle title="Readonly">
+    <Input readonly placeholder="Input placeholder" readOnly />
+  </VariantTitle>
+</Flex>
+```
 
 ## With Label and Helper Text
 
 The `Input` component can be used with a label and helper text by passing the `label` and `helperText` props.
 
-<UsageWrap>
-  <Center>
-    <Input
-      label="Label"
-      helperText="Helper text"
-      onChangeText={() => console.log('###')}
-      placeholder="Placeholder"
-    />
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Input } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
@@ -241,19 +257,8 @@ const MyComponent = () => {
 
 The `Input` component can be customised with `prefix` and `suffix` props to add content before or after the input field.
 
-<UsageWrap>
-  <Center>
-    <Input
-      label="Amount"
-      prefix="£"
-      suffix="GBP"
-      onChangeText={() => console.log('###')}
-      placeholder="0.00"
-    />
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Input } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
@@ -277,17 +282,10 @@ const MyComponent = () => {
 ### With `FormField`
 
 The `Input` component can be used with the `FormField` component to create a custom input field.
-For more information on the `FormField` component view the <StorybookLink to="forms-form-field">`FormField` documentation</StorybookLink>.
-
-<UsageWrap>
-  <Center>
-    <FormField label="Label" helperText="Helper text" helperPosition="bottom">
-      <Input onChangeText={() => console.log('###')} placeholder="Placeholder" />
-    </FormField>
-  </Center>
-</UsageWrap>
+For more information on the `FormField` component view the `FormField` documentation.
 
 ```tsx
+// Example usage
 import { FormField, Input } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {

package/{src/components/Link/Link.docs.mdx → public/llms/components/link.md}

@@ -1,14 +1,3 @@
-import { Meta, Canvas, Story, Controls, Primary } from '@storybook/addon-docs/blocks';
-import * as Stories from './Link.stories';
-import { Center, Pressable, Link, Box } from '../../';
-import { UsageWrap, BackToTopButton, ViewFigmaButton } from '../../../docs/components';
-
-<Meta title="Components / Link" />
-
-<BackToTopButton />
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components?node-id=1-154" />
-
 # Link
 
 Links are used to navigate a user to another screen or website, another place on the same page, or to open a link in a new tab.
@@ -19,19 +8,15 @@ Links are used to navigate a user to another screen or website, another place on
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<Link {...args} icon={icon} />
+```
 
 ## Usage
 
-<UsageWrap>
-  <Center>
-    <Link href="http://uw.co.uk">Visit Utility Warehouse</Link>
-  </Center>
-</UsageWrap>
-
 ```jsx
+// Example usage
 import { Link } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => <Link>Welcome to Utility Warehouse</Link>;