@utilitywarehouse/hearth-react-native 0.16.1 → 0.17.0

package/src/components/ExpandableCard/ExpandableCard.figma.tsx

@@ -1,54 +1,49 @@
-import React from "react"
-import ExpandableCard from "./ExpandableCard"
-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
- */
+import figma from '@figma/code-connect';
+import { ExpandableCard } from '../';
+import { IconContainer } from '../IconContainer';
 
 figma.connect(
   ExpandableCard,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7222%3A5935",
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7222%3A5935',
   {
     props: {
-      // These props were automatically mapped based on your linked code:
-      expanded: figma.boolean("Expand?"),
-      heading: figma.string("Heading"),
-      helperText: figma.string("Helper text"),
-      expandedContent: figma.enum("Expand?", {
-        False: false,
-        True: true,
+      expanded: figma.boolean('Expand?'),
+      heading: figma.string('Heading'),
+      helperText: figma.string('Helper text'),
+      leadingContent: figma.boolean('Leading content?', {
+        true: figma.nestedProps('Leading content', {
+          variant: figma.enum('Variant', {
+            Icon: figma.instance('Icon-24'),
+            'Icon Container': <IconContainer icon={figma.instance('Icon-24')} />,
+          }),
+        }),
       }),
-      disabled: figma.enum("State", {
+      disabled: figma.enum('State', {
         Active: true,
       }),
-      collapsable: figma.boolean("Expand?"),
-      focusable: figma.enum("State", {
+      collapsable: figma.boolean('Expand?'),
+      focusable: figma.enum('State', {
         Focus: true,
       }),
-      // No matching props could be found for these Figma properties:
-      // "customContent": figma.instance('Custom content'),
-      // "heading": figma.string('Heading'),
-      // "helperText": figma.string('Helper text'),
-      // "helperText": figma.boolean('Helper text?'),
-      // "numericalValue": figma.boolean('Numerical value?'),
-      // "numericalValue": figma.string('Numerical value'),
-      // "leadingContent": figma.boolean('Leading content?'),
-      // "badge": figma.boolean('Badge?')
+      content: figma.instance('Custom content'),
+      numericalValue: figma.boolean('Numerical value?', {
+        true: figma.string('Numerical value'),
+      }),
+      badge: figma.boolean('Badge?', {
+        true: figma.instance('Badge'),
+      }),
     },
-    example: (props) => (
+    example: props => (
       <ExpandableCard
         expanded={props.expanded}
         heading={props.heading}
         helperText={props.helperText}
-        expandedContent={props.expandedContent}
-        disabled={props.disabled}
-        collapsable={props.collapsable}
-        focusable={props.focusable}
-      />
+        leadingContent={props.leadingContent?.variant}
+        numericValue={props.numericalValue}
+        badge={props.badge}
+      >
+        {props.content}
+      </ExpandableCard>
     ),
-  },
-)
+  }
+);

package/src/components/ExpandableCard/ExpandableCardGroup.figma.tsx

@@ -1,23 +1,40 @@
-import React from "react"
-import ExpandableCardGroup from "./ExpandableCardGroup"
-import figma from "@figma/code-connect"
-
-/**
- * -- This file was auto-generated by Code Connect --
- * None of your props could be automatically mapped to Figma properties.
- * You should update the `props` object to include a mapping from your
- * code props to Figma properties, and update the `example` function to
- * return the code example you'd like to see in Figma
- */
+import figma from '@figma/code-connect';
+import { ExpandableCardGroup } from '../';
 
 figma.connect(
   ExpandableCardGroup,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7222%3A7221",
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=7222-7221&m=dev',
   {
     props: {
-      // No matching props could be found for these Figma properties:
-      // "sectionHeader": figma.boolean('Section header?')
+      sectionHeader: figma.boolean('Section header?', {
+        true: figma.nestedProps('Section Header', {
+          heading: figma.string('Heading'),
+          helperText: figma.boolean('Helper text?', {
+            true: figma.string('Helper text'),
+          }),
+          trailingContent: figma.boolean('Trailing content?', {
+            true: figma.nestedProps('Trailing content', {
+              headerTrailingContent: figma.instance('Variant'),
+            }),
+          }),
+          invalidText: figma.enum('State', {
+            Invalid: figma.nestedProps('Validation Text', {
+              invalidText: figma.string('Text'),
+            }),
+          }),
+        }),
+      }),
+      cards: figma.children('Expandable Card'),
     },
-    example: (props) => <ExpandableCardGroup />,
-  },
-)
+    example: props => (
+      <ExpandableCardGroup
+        heading={props.sectionHeader?.heading}
+        helperText={props.sectionHeader?.helperText}
+        headerTrailingContent={props.sectionHeader?.trailingContent?.headerTrailingContent}
+        invalidText={props.sectionHeader?.invalidText?.invalidText}
+      >
+        {props.cards}
+      </ExpandableCardGroup>
+    ),
+  }
+);

package/src/components/ExpandableCard/ExpandableCardGroup.props.ts

@@ -26,6 +26,11 @@ export interface ExpandableCardGroupProps extends ViewProps {
    * Test ID for testing
    */
   testID?: string;
+
+  /**
+   * Validation text displayed below the helper text when in an invalid state
+   */
+  invalidText?: string;
 }
 
 export default ExpandableCardGroupProps;

package/src/components/ExpandableCard/ExpandableCardGroup.tsx

@@ -10,6 +10,7 @@ const ExpandableCardGroup = ({
   children,
   style,
   testID = 'expandable-card-group',
+  invalidText,
   ...props
 }: ExpandableCardGroupProps) => {
   return (
@@ -19,6 +20,7 @@ const ExpandableCardGroup = ({
           heading={heading}
           helperText={helperText}
           trailingContent={headerTrailingContent}
+          invalidText={invalidText}
         />
       ) : null}
       <View style={styles.cardsContainer}>{children}</View>

package/src/components/HighlightBanner/HighlightBanner.figma.tsx

@@ -0,0 +1,46 @@
+import figma from '@figma/code-connect';
+import { HighlightBanner, Image } from '..';
+
+figma.connect(
+  HighlightBanner,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=8306-4665&t=3uUSBVdxldgG5uz3-4',
+  {
+    props: {
+      heading: figma.string('Heading'),
+      description: figma.string('Description'),
+      image: figma.boolean('Image?', {
+        true: <Image source={{ uri: '' }} />,
+      }),
+      headingColor: figma.enum('Heading color', {
+        Highlight: 'highlight',
+        Pig: 'pig',
+        Energy: 'energy',
+        Broadband: 'broadband',
+        Insurance: 'insurance',
+        Cashback: 'cashback',
+        Mobile: 'mobile',
+      }),
+      link: figma.boolean('Link?', {
+        true: figma.children('Link'),
+      }),
+      button: figma.boolean('Button?', {
+        true: figma.children('Button'),
+      }),
+    },
+    example: props => {
+      return (
+        // HighlightBanner doesn't need to be wrapped in a Card
+        // it's a standalone component in code please see the HighlightBanner docs
+        // https://hearth.prod.uw.systems/react-native/?path=/docs/components-highlightbanner--docs
+        <HighlightBanner
+          heading={props.heading}
+          description={props.description}
+          image={props.image}
+          headingColor={props.headingColor}
+          link={props.link}
+          button={props.button}
+        />
+      );
+    },
+  }
+);

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

@@ -1,16 +1,8 @@
 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
- */
+import { IconButton } from '../';
 
 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,
     }),
@@ -18,38 +10,36 @@ figma.connect(IconButton, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?n
       'SM-32': 'sm',
       'MD-48': 'md',
     }),
+    colorScheme: figma.enum('Color Scheme', {
+      Affirmative: 'affirmative',
+      Destructive: 'destructive',
+      Functional: 'functional',
+      Highlight: 'highlight',
+    }),
     loading: figma.enum('State', {
       Loading: true,
     }),
-    focusable: figma.enum('State', {
-      Focus: true,
-    }),
-    'aria-disabled': figma.enum('State', {
-      Disabled: true,
+    icon: figma.enum('Size', {
+      'SM-32': figma.instance('Icon-20'),
+      'MD-48': figma.instance('Icon-24'),
     }),
-    colorScheme: figma.enum('Color Scheme', {
-      Affirmative: 'affirmative',
-      Destructive: 'destructive',
+    variant: figma.enum('Variant', {
+      Emphasis: 'emphasis',
+      Solid: 'solid',
+      Outline: 'outline',
+      Ghost: 'ghost',
     }),
-    // 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?')
+    inverted: figma.boolean('Inverted?'),
   },
   example: props => (
     <IconButton
       disabled={props.disabled}
       size={props.size}
-      icon={null}
-      loading={props.loading}
-      focusable={props.focusable}
+      variant={props.variant}
+      inverted={props.inverted}
       colorScheme={props.colorScheme}
+      loading={props.loading}
+      icon={props.icon}
     />
   ),
 });

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

@@ -1,19 +1,11 @@
 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
- */
+import { IconContainer } from '../';
 
 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',
@@ -33,13 +25,15 @@ figma.connect(
         Cashback: 'cashback',
         Highlight: 'highlight',
       }),
-      // No matching props could be found for these Figma properties:
-      // "icon20": figma.instance('Icon-20'),
-      // "icon24": figma.instance('Icon-24')
+      icon: figma.enum('Size', {
+        'SM-32': figma.instance('Icon-20'),
+        'MD-48': figma.instance('Icon-24'),
+        'LG-64': figma.instance('Icon-24'),
+      }),
     },
     example: props => (
       <IconContainer
-        icon={null}
+        icon={props.icon}
         size={props.size}
         radiusNone={props.radiusNone}
         variant={props.variant}

package/src/components/IndicatorIconButton/IndicatorIconButton.figma.tsx

@@ -0,0 +1,16 @@
+import figma from '@figma/code-connect';
+import { IndicatorIconButton } from '..';
+
+figma.connect(
+  IndicatorIconButton,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6778-10672&t=3uUSBVdxldgG5uz3-4',
+  {
+    props: {
+      indicator: figma.boolean('Indicator?'),
+      icon: figma.nestedProps('Icon Button/Unstyled', {
+        icon: figma.instance('Icon-24'),
+      }),
+    },
+    example: props => <IndicatorIconButton icon={props.icon.icon} indicator={props.indicator} />,
+  }
+);

package/src/components/Input/Input.docs.mdx

@@ -29,6 +29,8 @@ The input component is a text field that allows users to enter text, numbers, or
 - [Advanced Usage](#advanced-usage)
 - [Variants](#variants)
 - [Examples](#examples)
+  - [With Label and Helper Text](#with-label-and-helper-text)
+  - [With `prefix` and `suffix`](#with-prefix-and-suffix)
   - [With `FormField`](#with-formfield)
 - [Accessibility](#accessibility)
 
@@ -46,7 +48,7 @@ The input component is a text field that allows users to enter text, numbers, or
       <InputSlot>
         <InputIcon as={EmailMediumIcon} />
       </InputSlot>
-      <InputField placeholder="Placeholder" onChange={() => console.log('###')} />
+      <InputField placeholder="Placeholder" onChangeText={() => console.log('###')} />
     </Input>
   </Center>
 </UsageWrap>
@@ -95,8 +97,10 @@ all of the React Native [`View` props](https://reactnative.dev/docs/view).
 | required         | `boolean`                          | `true`      | Indicates that the input is required. **(Only to be used if the input has no children)**                                                                                |
 | leadingIcon      | `React.ComponentType`              | `-`         | The leading icon of the input. **(Only to be used if the input has no children)**                                                                                       |
 | trailingIcon     | `React.ComponentType`              | `-`         | The trailing icon of the input. **(Only to be used if the input has no children)**                                                                                      |
+| prefix           | `string \| React.ReactNode`        | `-`         | Content to display before the input field. **(Only to be used if the input has no children)**                                                                           |
+| suffix           | `string \| React.ReactNode`        | `-`         | Content to display after the input field. **(Only to be used if the input has no children)**                                                                            |
 | value            | `string`                           | `-`         | The value of the input. **(Only to be used if the input has no children)**                                                                                              |
-| onChange         | `function`                         | `-`         | Callback function that is triggered when the input value changes. **(Only to be used if the input has no children)** **(Only to be used if the input has no children)** |
+| onChangeText     | `function`                         | `-`         | Callback function that is triggered when the input value changes. **(Only to be used if the input has no children)** **(Only to be used if the input has no children)** |
 | onBlur           | `function`                         | `-`         | Callback function that is triggered when the input loses focus. **(Only to be used if the input has no children)**                                                      |
 | onFocus          | `function`                         | `-`         | Callback function that is triggered when the input gains focus. **(Only to be used if the input has no children)**                                                      |
 | placeholder      | `string`                           | `-`         | The placeholder text for the input. **(Only to be used if the input has no children)**                                                                                  |
@@ -113,7 +117,7 @@ The `InputField` inherits all of the React Native [`TextInput` props](https://re
 | ------------- | ---------------------- | -------- | ----------------------------------------------------------------- |
 | type          | `'text' \| 'password'` | `'text'` | The type of the input.                                            |
 | value         | `string`               | `-`      | The value of the input.                                           |
-| onChange      | `function`             | `-`      | Callback function that is triggered when the input value changes. |
+| onChangeText  | `function`             | `-`      | Callback function that is triggered when the input value changes. |
 | onBlur        | `function`             | `-`      | Callback function that is triggered when the input loses focus.   |
 | onFocus       | `function`             | `-`      | Callback function that is triggered when the input gains focus.   |
 | placeholder   | `string`               | `-`      | The placeholder text for the input.                               |
@@ -156,13 +160,12 @@ import {
   EyeOffMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
 import { useState } from 'react';
-import { NativeSyntheticEvent, TextInputChangeEventData } from 'react-native';
 
 const AdvancedExample = () => {
   const [value, setValue] = useState<string>('');
   const [fieldType, setFieldType] = useState<'password' | 'text'>('password');
-  const handleChange = (e: NativeSyntheticEvent<TextInputChangeEventData>) => {
-    setValue(e.nativeEvent.text);
+  const handleChange = (text: string) => {
+    setValue(text);
   };
   const handleToggleFieldType = () => {
     setFieldType(fieldType === 'password' ? 'text' : 'password');
@@ -173,7 +176,7 @@ const AdvancedExample = () => {
         <InputIcon as={EmailMediumIcon} />
       </InputSlot>
       <InputField
-        onChange={handleChange}
+        onChangeText={handleChange}
         type={fieldType}
         value={value}
         placeholder="Secret email address"
@@ -207,7 +210,7 @@ The `Input` component can be used with a label and helper text by passing the `l
     <Input
       label="Label"
       helperText="Helper text"
-      onChange={() => console.log('###')}
+      onChangeText={() => console.log('###')}
       placeholder="Placeholder"
     />
   </Center>
@@ -218,14 +221,14 @@ import { Input } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
   const [value, setValue] = useState('');
-  const handleChange = e => {
-    setValue(e.target.value);
+  const handleChange = text => {
+    setValue(text);
   };
   return (
     <Input
       label="Label"
       helperText="Helper text"
-      onChange={handleChange}
+      onChangeText={handleChange}
       value={value}
       placeholder="Placeholder"
     />
@@ -233,6 +236,43 @@ const MyComponent = () => {
 };
 ```
 
+## With `prefix` and `suffix`
+
+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
+import { Input } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  const [value, setValue] = useState('');
+  const handleChange = text => {
+    setValue(text);
+  };
+  return (
+    <Input
+      label="Amount"
+      prefix="£"
+      suffix="GBP"
+      onChangeText={handleChange}
+      value={value}
+      placeholder="0.00"
+    />
+  );
+};
+```
+
 ### With `FormField`
 
 The `Input` component can be used with the `FormField` component to create a custom input field.
@@ -241,7 +281,7 @@ For more information on the `FormField` componment view the [docs here](/docs/co
 <UsageWrap>
   <Center>
     <FormField label="Label" helperText="Helper text" helperPosition="bottom">
-      <Input onChange={() => console.log('###')} placeholder="Placeholder" />
+      <Input onChangeText={() => console.log('###')} placeholder="Placeholder" />
     </FormField>
   </Center>
 </UsageWrap>
@@ -251,12 +291,12 @@ import { FormField, Input } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
   const [value, setValue] = useState('');
-  const handleChange = e => {
-    setValue(e.target.value);
+  const handleChange = text => {
+    setValue(text);
   };
   return (
     <FormField label="Label" helperText="Helper text" helperPosition="bottom">
-      <Input onChange={handleChange} value={value} placeholder="Placeholder" />
+      <Input onChangeText={handleChange} value={value} placeholder="Placeholder" />
     </FormField>
   );
 };