@utilitywarehouse/hearth-react-native 0.15.3 → 0.16.1

package/src/components/DescriptionList/DescriptionListItem.figma.tsx

@@ -0,0 +1,42 @@
+import figma from '@figma/code-connect';
+import { DescriptionListItem } from '../';
+
+figma.connect(
+  DescriptionListItem,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=7247-5209&t=3uUSBVdxldgG5uz3-4',
+  {
+    props: {
+      heading: figma.string('Heading'),
+      direction: figma.enum('Direction', {
+        Row: 'row',
+        Column: 'column',
+      }),
+      description: figma.boolean('Description?', {
+        true: figma.string('Description'),
+      }),
+      trailingContent: figma.boolean('Trailing content?', {
+        true: figma.nestedProps('Trailing content', {
+          trailingContent: figma.instance('Variant'),
+        }),
+      }),
+      invalidText: figma.enum('State', {
+        Invalid: figma.nestedProps('Validation Text', {
+          invalidText: figma.string('Text'),
+        }),
+      }),
+      numericValue: figma.boolean('Numerical value?', {
+        true: figma.string('Numerical value'),
+      }),
+    },
+    example: props => (
+      <DescriptionListItem
+        heading={props.heading}
+        description={props.description}
+        direction={props.direction}
+        trailingContent={props.trailingContent?.trailingContent}
+        invalidText={props.invalidText?.invalidText}
+        numericValue={props.numericValue}
+      />
+    ),
+  }
+);

package/src/components/DescriptionList/DescriptionListItem.props.ts

@@ -9,6 +9,7 @@ export interface DescriptionListItemProps extends ViewProps {
   headingWidth?: number;
   trailingContent?: ReactNode;
   invalidText?: string;
+  numericValue?: string;
 }
 
 export default DescriptionListItemProps;

package/src/components/DescriptionList/DescriptionListItem.tsx

@@ -3,6 +3,7 @@ import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { BodyText } from '../BodyText';
+import { DetailText } from '../DetailText';
 import Helper from '../Helper/Helper';
 import { useDescriptionListContext } from './DescriptionList.context';
 import type DescriptionListItemProps from './DescriptionListItem.props';
@@ -13,6 +14,7 @@ const DescriptionListItem = ({
   headingWidth,
   trailingContent,
   invalidText,
+  numericValue,
   style,
   ...props
 }: DescriptionListItemProps) => {
@@ -51,6 +53,11 @@ const DescriptionListItem = ({
             />
           )}
         </View>
+        {numericValue ? (
+          <View style={styles.descriptionWrapper}>
+            <DetailText size="lg">{numericValue}</DetailText>
+          </View>
+        ) : null}
       </View>
       {trailingContent ? trailingContent : null}
     </View>

package/src/components/Divider/Divider.figma.tsx

@@ -1,25 +1,12 @@
-import React from "react"
-import Divider from "./Divider"
-import figma from "@figma/code-connect"
+import figma from '@figma/code-connect';
+import Divider from './Divider';
 
-/**
- * -- 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
- */
-
-figma.connect(
-  Divider,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2421%3A1687",
-  {
-    props: {
-      // These props were automatically mapped based on your linked code:
-      orientation: figma.enum("Orientation", {
-        Horizontal: "horizontal",
-        Vertical: "vertical",
-      }),
-    },
-    example: (props) => <Divider orientation={props.orientation} />,
+figma.connect(Divider, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2421%3A1687', {
+  props: {
+    orientation: figma.enum('Orientation', {
+      Horizontal: 'horizontal',
+      Vertical: 'vertical',
+    }),
   },
-)
+  example: props => <Divider orientation={props.orientation} />,
+});

package/src/components/FormField/FormField.context.ts

@@ -1,6 +1,11 @@
 import { createContext, useContext } from 'react';
 import { FormFieldBaseProps } from './FormField.props';
 
-export const FormFieldContext = createContext<FormFieldBaseProps>({});
+export const FormFieldContext = createContext<
+  FormFieldBaseProps & {
+    setShouldHandleAccessibility?: (value: boolean) => void;
+    shouldHandleAccessibility?: boolean;
+  }
+>({});
 
 export const useFormFieldContext = () => useContext(FormFieldContext);

package/src/components/FormField/FormField.docs.mdx

@@ -1,32 +1,28 @@
-import { Meta, Controls, Story, Canvas } from '@storybook/addon-docs/blocks';
-import * as Stories from './FormField.stories';
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
+import { EmailMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import {
-  Input,
-  InputField,
+  Center,
   FormField,
   FormFieldHelper,
   FormFieldHelperText,
-  FormFieldLabel,
-  FormFieldLabelText,
-  FormFieldInvalidIcon,
   FormFieldInvalid,
+  FormFieldInvalidIcon,
   FormFieldInvalidText,
-  FormFieldValidIcon,
+  FormFieldLabel,
+  FormFieldLabelText,
+  FormFieldTextContent,
   FormFieldValid,
+  FormFieldValidIcon,
   FormFieldValidText,
-  FormFieldTextContent,
-  Center,
-  RadioGroup,
+  Input,
+  InputField,
   Radio,
+  RadioGroup,
   RadioIndicator,
   RadioLabel,
-  // Checkbox,
-  // CheckboxIndicator,
-  // CheckboxIcon,
-  // CheckboxLabel,
 } from '../../';
-import { EmailMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { ViewFigmaButton, BackToTopButton, UsageWrap } from '../../../docs/components';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './FormField.stories';
 
 <Meta title="Forms / Form Field" />
 
@@ -116,19 +112,23 @@ const MyComponent = () => {
 
 ## Props
 
-| Name                 | Type                                | Default     | Description                                                      |
-| -------------------- | ----------------------------------- | ----------- | ---------------------------------------------------------------- |
-| `validationStatus`   | `'initial' \| 'valid' \| 'invalid'` | `'initial'` | The validation status of the field.                              |
-| `disabled`           | `boolean`                           | `false`     | Whether the field is disabled.                                   |
-| `readonly`           | `boolean`                           | `false`     | Whether the field is readonly.                                   |
-| `label`              | `string`                            | `-`         | The label for the field.                                         |
-| `helperText`         | `string`                            | `-`         | The helper text for the field.                                   |
-| `helperIcon`         | `React.ComponentType`               | `-`         | The icon for the helper text.                                    |
-| `helperPosition`     | `'top' \| 'bottom'`                 | `'top'`     | The position of the helper text.                                 |
-| `validText`          | `string`                            | `-`         | The valid text for the field.                                    |
-| `invalidText`        | `string`                            | `-`         | The invalid text for the field.                                  |
-| `showValidationIcon` | `boolean`                           | `false`     | Whether to show the validation icon next to the validation text. |
-| `required`           | `boolean`                           | `true`      | Whether the field is required.                                   |
+| Name                               | Type                                | Default     | Description                                                                                          |
+| ---------------------------------- | ----------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------- |
+| `validationStatus`                 | `'initial' \| 'valid' \| 'invalid'` | `'initial'` | The validation status of the field.                                                                  |
+| `disabled`                         | `boolean`                           | `false`     | Whether the field is disabled.                                                                       |
+| `readonly`                         | `boolean`                           | `false`     | Whether the field is readonly.                                                                       |
+| `label`                            | `string`                            | `-`         | The label for the field.                                                                             |
+| `labelVariant`                     | `'heading' \| 'body'`               | `'body'`    | The variant of the label text.                                                                       |
+| `helperText`                       | `string`                            | `-`         | The helper text for the field.                                                                       |
+| `helperIcon`                       | `React.ComponentType`               | `-`         | The icon for the helper text.                                                                        |
+| `helperPosition`                   | `'top' \| 'bottom'`                 | `'top'`     | The position of the helper text.                                                                     |
+| `validText`                        | `string`                            | `-`         | The valid text for the field.                                                                        |
+| `invalidText`                      | `string`                            | `-`         | The invalid text for the field.                                                                      |
+| `showValidationIcon`               | `boolean`                           | `false`     | Whether to show the validation icon next to the validation text.                                     |
+| `required`                         | `boolean`                           | `true`      | Whether the field is required.                                                                       |
+| `accessibilityHandledByChildren`\* | `boolean`                           | `false`     | Whether accessibility is handled by child components. (Hides accessibility for the FormField itself) |
+
+- This prop is useful when the child component (e.g., Input) manages its own accessibility attributes, preventing screen readers from reading the FormField's label and helper text multiple times.
 
 ## Components
 

package/src/components/FormField/FormField.props.ts

@@ -6,11 +6,13 @@ export interface FormFieldBaseProps {
   disabled?: boolean;
   readonly?: boolean;
   label?: string;
+  labelVariant?: 'heading' | 'body';
   helperText?: string;
   helperIcon?: ComponentType;
   validText?: string;
   invalidText?: string;
   required?: boolean;
+  accessibilityHandledByChildren?: boolean;
 }
 
 interface FormFieldProps extends FormFieldBaseProps, ViewProps {}

package/src/components/FormField/FormField.stories.tsx

@@ -28,6 +28,12 @@ const meta = {
       description: 'The label of the Input component',
       defaultValue: 'Label',
     },
+    labelVariant: {
+      control: 'radio',
+      options: ['heading', 'body'],
+      description: 'The label variant of the Input component',
+      defaultValue: 'body',
+    },
     helperText: {
       control: 'text',
       description: 'The helper text of the Input component',
@@ -37,7 +43,7 @@ const meta = {
       control: 'select',
       options: ['none', ...Object.keys(Icons).filter(icon => icon.includes('Medium'))],
       description: 'The helper text icon of the Input component',
-      defaultValue: 'Helper text icon',
+      defaultValue: 'none',
     },
 
     validText: {
@@ -55,9 +61,9 @@ const meta = {
     validationStatus: 'initial',
     disabled: false,
     label: 'Label',
+    labelVariant: 'body',
     helperText: 'Helper text',
     helperIcon: undefined,
-
     validText: 'Valid text',
     invalidText: 'Invalid error text',
   },

package/src/components/FormField/FormField.tsx

@@ -1,5 +1,5 @@
 import { createFormControl } from '@gluestack-ui/form-control';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { View } from 'react-native';
 import { HelperIcon, HelperText } from '../Helper';
 import { FormFieldContext } from './FormField.context';
@@ -46,16 +46,40 @@ const FormField = ({
   validText,
   invalidText,
   required = true,
+  labelVariant = 'body',
+  accessibilityHandledByChildren = false,
   ...props
 }: FormFieldProps) => {
+  const [shouldHandleAccessibility, setShouldHandleAccessibility] = useState<boolean>(
+    accessibilityHandledByChildren
+  );
   const value = useMemo(
     () => ({
       validationStatus,
       disabled,
       readonly,
       required,
+      label,
+      helperText,
+      helperIcon,
+      validText,
+      invalidText,
+      setShouldHandleAccessibility,
+      shouldHandleAccessibility,
     }),
-    [validationStatus, disabled, readonly, required]
+    [
+      validationStatus,
+      disabled,
+      readonly,
+      required,
+      label,
+      helperText,
+      helperIcon,
+      validText,
+      invalidText,
+      setShouldHandleAccessibility,
+      shouldHandleAccessibility,
+    ]
   );
 
   return (
@@ -64,13 +88,23 @@ const FormField = ({
         {(!!label || !!helperText) && (
           <FormFieldTextContent>
             {!!label && (
-              <FormFieldLabelText>
+              <FormFieldLabelText
+                variant={labelVariant}
+                importantForAccessibility={shouldHandleAccessibility ? 'no' : undefined}
+                accessibilityElementsHidden={shouldHandleAccessibility}
+              >
                 {label}
                 {!required ? ` (Optional)` : ''}
               </FormFieldLabelText>
             )}
             {!!helperText && (
-              <FormFieldHelper text={helperText} icon={helperIcon} showIcon={!!helperIcon} />
+              <FormFieldHelper
+                text={helperText}
+                icon={helperIcon}
+                showIcon={!!helperIcon}
+                importantForAccessibility={shouldHandleAccessibility ? 'no' : undefined}
+                accessibilityElementsHidden={shouldHandleAccessibility}
+              />
             )}
           </FormFieldTextContent>
         )}

package/src/components/FormField/FormFieldLabel.tsx

@@ -1,10 +1,14 @@
-import { useFormFieldContext } from './FormField.context';
 import { Label } from '../Label';
 import LabelProps from '../Label/Label.props';
+import { useFormFieldContext } from './FormField.context';
 
-const FormFieldLabel = ({ children }: Omit<LabelProps, 'disabled'>) => {
+const FormFieldLabel = ({ children, ...props }: Omit<LabelProps, 'disabled'>) => {
   const { disabled } = useFormFieldContext();
-  return <Label disabled={disabled}>{children}</Label>;
+  return (
+    <Label disabled={disabled} {...props}>
+      {children}
+    </Label>
+  );
 };
 
 FormFieldLabel.displayName = 'FormFieldLabel';

package/src/components/FormField/FormFieldValid.tsx

@@ -1,7 +1,7 @@
-import { useFormFieldContext } from './FormField.context';
+import { TickCircleSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { Helper } from '../Helper';
 import HelperProps from '../Helper/Helper.props';
-import { TickCircleSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { useFormFieldContext } from './FormField.context';
 
 const FormFieldValid = ({
   children,

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

@@ -83,18 +83,25 @@ all of the React Native [`View` props](https://reactnative.dev/docs/view).
 | ---------------- | ---------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | type             | `'text' \| 'password'`             | `'text'`    | The type of the input.                                                                                                                                                  |
 | validationStatus | `'initial' \| 'valid' \| 'invalid` | `'initial'` | The validation status of the input.                                                                                                                                     |
-| disabled         | boolean                            | `false`     | Disables the input.                                                                                                                                                     |
-| readonly         | boolean                            | `false`     | Makes the input read-only.                                                                                                                                              |
-| focused          | boolean                            | `false`     | Sets focus on the input.                                                                                                                                                |
-| 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)**                                                                                      |
-| 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)** |
-| 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)**                                                                                  |
-| required         | boolean                            | `true`      | Indicates that the input is required. **(Only to be used if the input has no children)**                                                                                |
-| inBottomSheet    | boolean                            | `false`     | Indicates if the input is within a bottom sheet.                                                                                                                        |
+| disabled         | `boolean`                          | `false`     | Disables the input.                                                                                                                                                     |
+| readonly         | `boolean`                          | `false`     | Makes the input read-only.                                                                                                                                              |
+| focused          | `boolean`                          | `false`     | Sets focus on the input.                                                                                                                                                |
+| label            | `string`                           | `-`         | The label for the input. **(Only to be used if the input has no children)**                                                                                             |
+| labelVariant     | `'heading' \| 'body'`              | `'body'`    | The variant of the label text. **(Only to be used if the input has no children)**                                                                                       |
+| helperText       | `string`                           | `-`         | Helper text to display below the input. **(Only to be used if the input has no children)**                                                                              |
+| helperIcon       | `React.ComponentType`              | `-`         | Icon to display alongside the helper text. **(Only to be used if the input has no children)**                                                                           |
+| validText        | `string`                           | `-`         | Text to display when validation status is 'valid'. **(Only to be used if the input has no children)**                                                                   |
+| invalidText      | `string`                           | `-`         | Text to display when validation status is 'invalid'. **(Only to be used if the input has no children)**                                                                 |
+| 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)**                                                                                      |
+| 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)** |
+| 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)**                                                                                  |
+| required         | `boolean`                          | `true`      | Indicates that the input is required. **(Only to be used if the input has no children)**                                                                                |
+| inBottomSheet    | `boolean`                          | `false`     | Indicates if the input is within a bottom sheet.                                                                                                                        |
 
 If the `leadingIcon` or `trailingIcon` props are used, the `Input` component should not have any children.
 
@@ -105,19 +112,19 @@ The `InputField` inherits all of the React Native [`TextInput` props](https://re
 | Prop          | Type                   | Default  | Description                                                       |
 | ------------- | ---------------------- | -------- | ----------------------------------------------------------------- |
 | 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. |
-| 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.                               |
-| required      | boolean                | `true`   | Indicates that the input is required.                             |
-| inBottomSheet | boolean                | `false`  | Indicates if the input is within a bottom sheet.                  |
+| value         | `string`               | `-`      | The value of the input.                                           |
+| onChange      | `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.                               |
+| required      | `boolean`              | `true`   | Indicates that the input is required.                             |
+| inBottomSheet | `boolean`              | `false`  | Indicates if the input is within a bottom sheet.                  |
 
 ### `InputIcon`
 
-| Prop | Type   | Default | Description         |
-| ---- | ------ | ------- | ------------------- |
-| as   | string |         | The icon component. |
+| Prop | Type     | Default | Description         |
+| ---- | -------- | ------- | ------------------- |
+| as   | `string` |         | The icon component. |
 
 ### `InputSlot`
 
@@ -191,6 +198,41 @@ The `Input` component has the following variants:
 
 ## Examples
 
+## 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"
+      onChange={() => console.log('###')}
+      placeholder="Placeholder"
+    />
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Input } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  const [value, setValue] = useState('');
+  const handleChange = e => {
+    setValue(e.target.value);
+  };
+  return (
+    <Input
+      label="Label"
+      helperText="Helper text"
+      onChange={handleChange}
+      value={value}
+      placeholder="Placeholder"
+    />
+  );
+};
+```
+
 ### With `FormField`
 
 The `Input` component can be used with the `FormField` component to create a custom input field.
@@ -230,6 +272,9 @@ We have outlined the various features that ensure the Input component is accessi
 
 ### Screen Reader
 
+- When setting the label prop, it is associated with the Input using aria-label.
+- When setting the helperText prop, it is associated with the Input using aria-describedby.
+- The required prop to indicate if the Input is required or optional and is read out by screen readers.
 - Compatible with screen readers such as VoiceOver and Talk-back.
 - The accessible and aria-label props to provide descriptive information about the Input
 - Setting aria-traits and aria-hint to provide contextual information about the various states of the Input, such as "double tap to edit".

package/src/components/Input/Input.props.ts

@@ -27,6 +27,13 @@ export interface InputBaseProps {
   focused?: boolean;
   placeholder?: string;
   inBottomSheet?: boolean;
+  label?: string;
+  labelVariant?: 'heading' | 'body';
+  helperText?: string;
+  helperIcon?: ComponentType;
+  validText?: string;
+  invalidText?: string;
+  required?: boolean;
 }
 
 // For inputs that have children
@@ -40,7 +47,6 @@ export interface InputWithChildrenProps extends InputBaseProps, ViewProps {
   onClear?: never;
   leadingIcon?: never;
   trailingIcon?: never;
-  required?: never;
 }
 
 // Base for inputs without children

package/src/components/Input/Input.stories.tsx

@@ -82,7 +82,15 @@ export const Playground: Story = {
     const leadingIcon = leading === 'none' ? undefined : Icons[leading];
     // @ts-expect-error - This is a playground
     const trailingIcon = trailing === 'none' ? undefined : Icons[trailing];
-    return <Input {...args} leadingIcon={leadingIcon} trailingIcon={trailingIcon} />;
+    return (
+      <Input
+        {...args}
+        leadingIcon={leadingIcon}
+        trailingIcon={trailingIcon}
+        label="First Name"
+        helperText="Only enter your first name, not your full name"
+      />
+    );
   },
 };