@utilitywarehouse/hearth-react-native 0.15.3 → 0.16.1

package/src/components/DateInput/DateInput.figma.tsx

@@ -1,60 +1,72 @@
-import React from "react"
-import DateInput from "./DateInput"
-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 { DateInput } from '../';
 
 figma.connect(
   DateInput,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2277%3A14708",
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2277%3A14708',
   {
     props: {
-      // These props were automatically mapped based on your linked code:
-      hideDay: figma.boolean("Day?"),
-      hideMonth: figma.boolean("Month?"),
-      monthPlaceholder: figma.string("Month value"),
-      yearPlaceholder: figma.string("Year value"),
-      dayValue: figma.string("Day value"),
-      monthValue: figma.string("Month value"),
-      yearValue: figma.string("Year value"),
-      disabled: figma.enum("State", {
+      hideDay: figma.boolean('Day?', {
+        true: false,
+        false: true,
+      }),
+      hideMonth: figma.boolean('Month?', {
+        true: false,
+        false: true,
+      }),
+      // hideYear: figma.boolean('Year?'),
+      monthPlaceholder: figma.enum('Value type', {
+        Placeholder: figma.boolean('Month?', {
+          true: figma.string('Month value'),
+        }),
+      }),
+      yearPlaceholder: figma.enum('Value type', {
+        Placeholder: figma.string('Year value'),
+      }),
+      dayPlaceholder: figma.enum('Value type', {
+        Placeholder: figma.boolean('Day?', {
+          true: figma.string('Day value'),
+        }),
+      }),
+      dayValue: figma.enum('Value type', {
+        Filled: figma.boolean('Day?', {
+          true: figma.string('Day value'),
+        }),
+      }),
+      monthValue: figma.enum('Value type', {
+        Filled: figma.boolean('Month?', {
+          true: figma.string('Month value'),
+        }),
+      }),
+      yearValue: figma.enum('Value type', {
+        Filled: figma.string('Year value'),
+      }),
+      disabled: figma.enum('State', {
         Disabled: true,
       }),
-      readonly: figma.enum("State", {
-        "Read-only": true,
+      readonly: figma.enum('State', {
+        'Read-only': true,
+      }),
+      label: figma.string('Label'),
+      helperText: figma.string('Helper text'),
+      validText: figma.enum('State', {
+        Valid: figma.string('Validation'),
+      }),
+      invalidText: figma.enum('State', {
+        Invalid: figma.string('Validation'),
+      }),
+      validationStatus: figma.enum('State', {
+        Default: undefined,
+        Valid: 'valid',
+        Invalid: 'invalid',
       }),
-      label: figma.string("Label"),
-      helperText: figma.string("Helper text"),
-      validText: figma.string("Validation"),
-      invalidText: figma.string("Helper text"),
       // No matching props could be found for these Figma properties:
-      // "helperText": figma.boolean('Helper text?'),
-      // "label": figma.string('Label'),
-      // "validation": figma.string('Validation'),
-      // "helperText": figma.string('Helper text'),
-      // "dayValue": figma.string('Day value'),
-      // "day": figma.boolean('Day?'),
-      // "month": figma.boolean('Month?'),
-      // "monthValue": figma.string('Month value'),
-      // "yearValue": figma.string('Year value'),
-      // "optional": figma.boolean('Optional?'),
-      // "valueType": figma.enum('Value type', {
-      //   "Empty": "empty",
-      //   "Placeholder": "placeholder",
-      //   "Filled": "filled"
-      // }),
-      // "focus": figma.boolean('Focus?'),
       // "labelVariant": figma.enum('Label variant', {
       //   "Body": "body",
       //   "Heading": "heading"
       // })
     },
-    example: (props) => (
+    example: props => (
       <DateInput
         hideDay={props.hideDay}
         hideMonth={props.hideMonth}
@@ -69,7 +81,8 @@ figma.connect(
         helperText={props.helperText}
         validText={props.validText}
         invalidText={props.invalidText}
+        validationStatus={props.validationStatus}
       />
     ),
-  },
-)
+  }
+);

package/src/components/DateInput/DateInput.tsx

@@ -111,6 +111,7 @@ const styles = StyleSheet.create(theme => ({
   container: {
     flexDirection: 'row',
     gap: theme.components.input.date.gap,
+    // alignItems: 'stretch',
   },
 }));
 

package/src/components/DateInput/DateInputSegment.tsx

@@ -63,7 +63,7 @@ const styles = StyleSheet.create(theme => ({
   container: {
     flex: 1,
     gap: theme.components.input.gap,
-    maxWidth: 96,
+    // maxWidth: 96,
   },
   label: {
     variants: {
@@ -75,8 +75,7 @@ const styles = StyleSheet.create(theme => ({
     },
   },
   input: {
-    flex: 1,
-    maxWidth: 96,
+    // maxWidth: 96,
   },
 }));
 

package/src/components/DatePicker/DatePicker.figma.tsx

@@ -0,0 +1,47 @@
+import figma from '@figma/code-connect';
+import { DatePicker } from '../';
+
+const selectedDate = '';
+const handlePickerChange = () => {
+  // Placeholder for onChange handler
+};
+const handleCancel = () => {
+  // Placeholder for onCancel handler
+};
+
+const pickerRef = () => null;
+
+figma.connect(
+  DatePicker,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3797-6383&m=dev',
+  {
+    props: {
+      // "grabber": figma.boolean('Grabber?'),
+      header: figma.boolean('Header?', {
+        true: false,
+        false: true,
+      }),
+      footer: figma.boolean('Footer?', {
+        true: false,
+        false: true,
+      }),
+      initialView: figma.enum('Type', {
+        Day: undefined,
+        Month: 'month',
+        Year: 'year',
+      }),
+    },
+    example: props => (
+      <DatePicker
+        ref={pickerRef}
+        mode="single"
+        date={selectedDate}
+        hideFooter={props.footer}
+        hideHeader={props.header}
+        initialView={props.initialView}
+        onChange={handlePickerChange}
+        onCancel={handleCancel}
+      />
+    ),
+  }
+);

package/src/components/DatePicker/DatePicker.tsx

@@ -52,6 +52,7 @@ export interface DatePickerMultipleProps extends DatePickerBaseProps {
 const DateTimePicker = (
   props: DatePickerSingleProps | DatePickerRangeProps | DatePickerMultipleProps
 ) => {
+  // eslint-disable-next-line @typescript-eslint/prefer-as-const
   const numerals: 'latn' = 'latn';
   const {
     mode = 'single',
@@ -216,26 +217,29 @@ const DateTimePicker = (
           ...prevState,
           currentYear: action.payload,
         };
-      case CalendarActionKind.CHANGE_SELECTED_DATE:
+      case CalendarActionKind.CHANGE_SELECTED_DATE: {
         const { date: selectedDate } = action.payload;
         return {
           ...prevState,
           date: selectedDate,
           currentDate: selectedDate,
         };
-      case CalendarActionKind.CHANGE_SELECTED_RANGE:
+      }
+      case CalendarActionKind.CHANGE_SELECTED_RANGE: {
         const { startDate: start, endDate: end } = action.payload;
         return {
           ...prevState,
           startDate: start,
           endDate: end,
         };
-      case CalendarActionKind.CHANGE_SELECTED_MULTIPLE:
+      }
+      case CalendarActionKind.CHANGE_SELECTED_MULTIPLE: {
         const { dates: selectedDates } = action.payload;
         return {
           ...prevState,
           dates: selectedDates,
         };
+      }
       case CalendarActionKind.RESET_STATE:
         return action.payload;
       default:
@@ -363,7 +367,7 @@ const DateTimePicker = (
           });
         } else if (mode === 'range') {
           // set time to 00:00:00
-          let start = removeTime(stateRef.current.startDate, timeZone);
+          const start = removeTime(stateRef.current.startDate, timeZone);
           let end = removeTime(stateRef.current.endDate, timeZone);
           const selected = removeTime(selectedDate, timeZone);
           let isStart: boolean = true;

package/src/components/DatePicker/DatePickerHeader/DatePickerHeader.props.ts

@@ -6,5 +6,3 @@ export type HeaderProps = {
   NextIcon?: React.ReactNode;
   navigationPosition?: NavigationPosition;
 };
-
-export type NavigationProps = {};

package/src/components/DatePicker/DatePickerHeader/index.tsx

@@ -1,12 +1,12 @@
 import { memo } from 'react';
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import type { HeaderProps, NavigationProps } from './DatePickerHeader.props';
+import type { HeaderProps } from './DatePickerHeader.props';
 import NextButton from './DatePickerNextButton';
 import PrevButton from './DatePickerPrevButton';
 import Selectors from './DatePickerSelectors';
 
-const NavigationButtons = ({}: NavigationProps) => (
+const NavigationButtons = () => (
   <View style={styles.navigation}>
     <PrevButton />
     <NextButton />

package/src/components/DatePicker/index.ts

@@ -1,6 +1,8 @@
 import 'dayjs/locale/en';
 import './polyfill';
 
+export type { BottomSheetMethods as DatePickerMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+
 export type {
   CalendarDay,
   CalendarMode,

package/src/components/DatePicker/polyfill.ts

@@ -1,6 +1,6 @@
-// @ts-ignore
+// @ts-expect-error - Polyfill for Date.toLocaleString to support timeZone option in React Native environment.
 Date.prototype._toLocaleString = Date.prototype.toLocaleString;
-// @ts-ignore
+// @ts-expect-error - Polyfill for Date.toLocaleString to support timeZone option in React Native environment.
 Date.prototype.toLocaleString = function (a, b) {
   if (b && Object.keys(b).length === 1 && 'timeZone' in b && a === 'en-US') {
     return Intl.DateTimeFormat('en-us', {
@@ -16,6 +16,6 @@ Date.prototype.toLocaleString = function (a, b) {
       .format(this)
       .replace(/(\d{2})\/(\d{2})\/(\d{4}),/g, '$3-$1-$2');
   }
-  // @ts-ignore
+  // @ts-expect-error - Polyfill for Date.toLocaleString to support timeZone option in React Native environment.
   return this._toLocaleString(a, b);
 };

package/src/components/DatePicker/time-picker/wheel-web.tsx

@@ -121,7 +121,6 @@ const WheelWeb = ({ value, setValue = () => {}, items }: WheelProps) => {
         return (
           <Animated.View
             key={`${displayValue?.text}-${index}`}
-            // eslint-disable-next-line react-native/no-inline-styles
             style={{
               position: 'absolute',
               height: ITEM_HEIGHT - 10,

package/src/components/DatePickerInput/DatePickerInput.docs.mdx

@@ -78,6 +78,12 @@ When used inside `FormField`, validation, disabled, and required states are inhe
 | `disabled`          | `boolean`                                                              | `false`              | Disables both typing and the calendar trigger button.                                                                                                                       |
 | `readonly`          | `boolean`                                                              | `false`              | Prevents manual typing while keeping the picker available.                                                                                                                  |
 | `focused`           | `boolean`                                                              | `false`              | Forces the focused state styling.                                                                                                                                           |
+| `label`             | `string`                                                               | `-`                  | The label for the input. When used inside `FormField`, this is inherited from the context.                                                                                  |
+| `labelVariant`      | `'heading' \| 'body'`                                                  | `'body'`             | The variant of the label text.                                                                                                                                              |
+| `helperText`        | `string`                                                               | `-`                  | Helper text to display below the input. When used inside `FormField`, this is inherited from the context.                                                                   |
+| `helperIcon`        | `ComponentType`                                                        | `-`                  | Icon to display alongside the helper                                                                                                                                        |
+| `validText`         | `string`                                                               | `-`                  | Text to display when validation status is 'valid'. When used inside `FormField`, this is inherited from the context.                                                        |
+| `invalidText`       | `string`                                                               | `-`                  | Text to display when validation status is 'invalid'. When used inside `FormField`, this is inherited from the context.                                                      |
 | `inBottomSheet`     | `boolean`                                                              | `false`              | Uses `BottomSheetTextInput` when rendering inside a bottom sheet.                                                                                                           |
 | `format`            | `string`                                                               | `'DD/MM/YYYY'`       | Day.js format string used to render selected dates and parse manual input. Leaving it as `'DD/MM/YYYY'` automatically inserts `/` separators and requests a numeric keypad. |
 | `openButtonLabel`   | `string`                                                               | `'Open date picker'` | Accessible label read by screen readers for the calendar trigger button.                                                                                                    |
@@ -152,6 +158,22 @@ Selection through the calendar always returns a JavaScript `Date` that is reform
 
 ## Examples
 
+## With Label and Helper Text
+
+The `DatePickerInput` component can display a label and helper text by passing the appropriate props.
+
+<UsageWrap>
+  <BottomSheetModalProvider>
+    <Center>
+      <DatePickerInput label="Travel date" helperText="Choose a departure day" onClear={() => {}} />
+    </Center>
+  </BottomSheetModalProvider>
+</UsageWrap>
+
+```tsx
+<DatePickerInput label="Travel date" helperText="Choose a departure day" onClear={() => {}} />
+```
+
 ### With `FormField`
 
 <UsageWrap>

package/src/components/DatePickerInput/DatePickerInput.figma.tsx

@@ -1,62 +1,34 @@
 import figma from '@figma/code-connect';
-import DatePickerInput from './DatePickerInput';
-
-/**
- * -- 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 { DatePickerInput } from '../';
 
 figma.connect(
   DatePickerInput,
   'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3917%3A7057',
   {
     props: {
-      // These props were automatically mapped based on your linked code:
       disabled: figma.enum('Variant', {
         Disabled: true,
       }),
-      readonly: figma.enum('Variant', {
-        'Read-only': true,
+      validationStatus: figma.enum('Variant', {
+        Default: undefined,
+        Valid: 'valid',
+        Invalid: 'invalid',
       }),
-      focused: figma.boolean('Focus?'),
-      placeholder: figma.string('Label'),
-      autoFocus: figma.boolean('Focus?'),
-      defaultValue: figma.string('Value'),
-      readOnly: figma.enum('Variant', {
-        'Read-only': true,
+      readonly: figma.enum('Variant', { Readonly: true }),
+      label: figma.string('Label'),
+      validText: figma.enum('Variant', {
+        Valid: figma.string('Validation'),
       }),
-      focusable: figma.boolean('Focus?'),
-      hasTVPreferredFocus: figma.boolean('Focus?'),
-      'aria-disabled': figma.enum('Variant', {
-        Disabled: true,
+      invalidText: figma.enum('Variant', {
+        Invalid: figma.string('Validation'),
+      }),
+      placeholder: figma.enum('Value type', {
+        Placeholder: figma.string('Value'),
+      }),
+      value: figma.enum('Value type', {
+        Filled: figma.string('Value'),
       }),
-      // No matching props could be found for these Figma properties:
-      // "helperText": figma.boolean('Helper  text?'),
-      // "label": figma.string('Label'),
-      // "validation": figma.string('Validation'),
-      // "helperText": figma.string('Helper text'),
-      // "value": figma.string('Value'),
-      // "icon": figma.boolean('Icon?'),
-      // "calendar": figma.boolean('Calendar?'),
-      // "valueType": figma.enum('Value type', {
-      //   "Empty": "empty",
-      //   "Placeholder": "placeholder",
-      //   "Filled": "filled"
-      // })
     },
-    example: props => (
-      <DatePickerInput
-        disabled={props.disabled}
-        readonly={props.readonly}
-        focused={props.focused}
-        placeholder={props.placeholder}
-        autoFocus={props.autoFocus}
-        defaultValue={props.defaultValue}
-        readOnly={props.readOnly}
-        focusable={props.focusable}
-      />
-    ),
+    example: props => <DatePickerInput {...props} />,
   }
 );

package/src/components/DatePickerInput/DatePickerInput.props.ts

@@ -7,6 +7,12 @@ export interface DatePickerInputBaseProps {
   validationStatus?: 'initial' | 'valid' | 'invalid';
   readonly?: boolean;
   focused?: boolean;
+  label?: string;
+  labelVariant?: 'heading' | 'body';
+  helperText?: string;
+  helperIcon?: React.ComponentType;
+  validText?: string;
+  invalidText?: string;
   placeholder?: string;
   inBottomSheet?: boolean;
   required?: boolean;

package/src/components/DatePickerInput/DatePickerInput.tsx

@@ -36,6 +36,13 @@ const DatePickerInput = ({
   format = DEFAULT_FORMAT,
   openButtonLabel = 'Open date picker',
   autoCloseOnSelect = true,
+  label,
+  labelVariant,
+  helperText,
+  helperIcon,
+  validText,
+  invalidText,
+  required = true,
   onChange,
   onChangeText,
   onBlur,
@@ -46,7 +53,6 @@ const DatePickerInput = ({
   ...rest
 }: DatePickerInputProps) => {
   const formFieldContext = useFormFieldContext();
-  const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
   const isDisabled = formFieldContext?.disabled ?? disabled;
   const isReadonly = formFieldContext?.readonly ?? readonly;
 
@@ -161,7 +167,6 @@ const DatePickerInput = ({
     accessibilityHint: accessibilityHintProp,
     accessibilityLabel: accessibilityLabelProp,
     accessible: accessibleProp,
-    accessibilityRole: accessibilityRoleProp,
     importantForAccessibility: importantForAccessibilityProp,
     ...textInputProps
   } = rest;
@@ -183,10 +188,17 @@ const DatePickerInput = ({
   return (
     <>
       <Input
-        validationStatus={validationStatusFromContext}
-        disabled={isDisabled}
-        readonly={isReadonly}
+        validationStatus={validationStatus}
+        disabled={disabled}
+        readonly={readonly}
         focused={focused}
+        label={label}
+        labelVariant={labelVariant}
+        helperText={helperText}
+        helperIcon={helperIcon}
+        validText={validText}
+        invalidText={invalidText}
+        required={required}
         style={styles.wrap}
         accessible={false}
       >

package/src/components/DescriptionList/DescriptionList.docs.mdx

@@ -58,23 +58,25 @@ import { DescriptionList, DescriptionListItem } from '@utilitywarehouse/hearth-r
 
 ### DescriptionList
 
-| Prop                    | Type                | Description                                      | Default     |
-| ----------------------- | ------------------- | ------------------------------------------------ | ----------- |
-| `direction`             | `'row' \| 'column'` | Layout orientation                               | `column`    |
-| `itemHeadingWidth`      | `number`            | Override heading column width in row layout      | token value |
-| `heading`               | `string`            | Optional overall heading (renders SectionHeader) | -           |
-| `helperText`            | `string`            | Supporting text under heading                    | -           |
-| `headerTrailingContent` | `ReactNode`         | Custom trailing content for heading (e.g. Link)  | -           |
+| Prop                    | Type                | Default     | Description                                      |
+| ----------------------- | ------------------- | ----------- | ------------------------------------------------ |
+| `direction`             | `'row' \| 'column'` | `column`    | Layout orientation                               |
+| `itemHeadingWidth`      | `number`            | token value | Override heading column width in row layout      |
+| `heading`               | `string`            | -           | Optional overall heading (renders SectionHeader) |
+| `helperText`            | `string`            | -           | Supporting text under heading                    |
+| `headerTrailingContent` | `ReactNode`         | -           | Custom trailing content for heading (e.g. Link)  |
+| `invalidText`           | `string`            | -           | Text to show under section header                |
 
 ### DescriptionListItem
 
-| Prop              | Type        | Description                                      | Default    |
-| ----------------- | ----------- | ------------------------------------------------ | ---------- |
-| `heading`         | `ReactNode` | Heading (label) content                          | (required) |
-| `description`     | `ReactNode` | Description (value) content                      | (required) |
-| `headingWidth`    | `number`    | Per-item heading width override (row layout)     | inherits   |
-| `trailingContent` | `ReactNode` | Optional trailing content (e.g. Link, Button)    | -          |
-| `invalidText`     | `string`    | Text to show under description for invalid value | -          |
+| Prop              | Type        | Default    | Description                                      |
+| ----------------- | ----------- | ---------- | ------------------------------------------------ |
+| `heading`         | `ReactNode` | (required) | Heading (label) content                          |
+| `description`     | `ReactNode` | (required) | Description (value) content                      |
+| `numericValue`    | `string`    | -          | Optional numeric value                           |
+| `headingWidth`    | `number`    | inherits   | Per-item heading width override (row layout)     |
+| `trailingContent` | `ReactNode` | -          | Optional trailing content (e.g. Link, Button)    |
+| `invalidText`     | `string`    | -          | Text to show under description for invalid value |
 
 > Uses `theme.components.descriptionList` tokens for spacing & column width.
 

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

@@ -1,23 +1,47 @@
-import React from "react"
-import DescriptionList from "./DescriptionList"
-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 { DescriptionList } from '../';
 
 figma.connect(
   DescriptionList,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7247%3A4636",
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7247%3A4636',
   {
     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'),
+            }),
+          }),
+        }),
+      }),
+      items: figma.children('Item'),
+      direction: figma.nestedProps('Item', {
+        direction: figma.enum('Direction', {
+          Row: 'row',
+          Column: 'column',
+        }),
+      }),
     },
-    example: (props) => <DescriptionList />,
-  },
-)
+    example: props => (
+      <DescriptionList
+        heading={props.sectionHeader?.heading}
+        helperText={props.sectionHeader?.helperText}
+        direction={props.direction?.direction}
+        headerTrailingContent={props.sectionHeader?.trailingContent?.headerTrailingContent}
+        invalidText={props.sectionHeader?.invalidText?.invalidText}
+      >
+        {props.items}
+      </DescriptionList>
+    ),
+  }
+);

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

@@ -8,6 +8,7 @@ export interface DescriptionListProps extends ViewProps {
   heading?: string;
   helperText?: string;
   headerTrailingContent?: React.ReactNode;
+  invalidText?: string;
 }
 
 export default DescriptionListProps;

package/src/components/DescriptionList/DescriptionList.stories.tsx

@@ -146,3 +146,27 @@ export const WithLinks: Story = {
     </DescriptionList>
   ),
 };
+
+export const WithNumericValues: Story = {
+  parameters: { controls: { include: ['direction', 'itemHeadingWidth'] } },
+  args: { direction: 'row' },
+  render: args => (
+    <DescriptionList {...args}>
+      <DescriptionListItem
+        heading="Account Balance"
+        description="Current balance"
+        numericValue="£5,432.10"
+      />
+      <DescriptionListItem
+        heading="Available Credit"
+        description="Credit limit minus current balance"
+        numericValue="£1,234.56"
+      />
+      <DescriptionListItem
+        heading="Minimum Payment"
+        description="Amount due by next statement date"
+        numericValue="£123.45"
+      />
+    </DescriptionList>
+  ),
+};

package/src/components/DescriptionList/DescriptionList.tsx

@@ -13,6 +13,7 @@ const DescriptionList = ({
   headerTrailingContent,
   children,
   style,
+  invalidText,
   ...props
 }: DescriptionListProps) => {
   styles.useVariants({ direction });
@@ -26,6 +27,7 @@ const DescriptionList = ({
             heading={heading}
             helperText={helperText}
             trailingContent={headerTrailingContent}
+            invalidText={invalidText}
           />
         ) : null}
         {children}