@utilitywarehouse/hearth-react-native 0.1.0 → 0.3.0

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

@@ -1,10 +1,11 @@
-import { Input } from '.';
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { VariantTitle } from '../../../docs/components';
 import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
-import { Flex } from '../Flex';
 import { EmailMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { useState } from 'react';
 import { NativeSyntheticEvent, TextInputChangeEventData } from 'react-native';
+import { Input } from '.';
+import { VariantTitle } from '../../../docs/components';
+import { Flex } from '../Flex';
 
 const meta = {
   title: 'Stories / Input',
@@ -86,7 +87,7 @@ export const Variants: Story = {
     controls: { include: [] },
   },
   render: () => {
-    const [clearableSearchValue, setClearableSearchValue] = React.useState('clearble search');
+    const [clearableSearchValue, setClearableSearchValue] = useState('clearble search');
     const handleClearableSearchChange = (e: NativeSyntheticEvent<TextInputChangeEventData>) => {
       setClearableSearchValue(e.nativeEvent.text);
     };
@@ -129,12 +130,6 @@ export const Variants: Story = {
         <VariantTitle title="Type search - loading">
           <Input placeholder="Input placeholder" type="search" loading />
         </VariantTitle>
-        <VariantTitle title="Type currency">
-          <Input type="currency" />
-        </VariantTitle>
-        <VariantTitle title="Type date">
-          <Input type="date" />
-        </VariantTitle>
         <VariantTitle title="Valid">
           <Input validationStatus="valid" placeholder="Input placeholder" />
         </VariantTitle>

package/src/components/Input/Input.tsx

@@ -1,25 +1,22 @@
-import { ComponentType, useState } from 'react';
 import { createInput } from '@gluestack-ui/input';
+import { ComponentType, useState } from 'react';
 import type InputProps from './Input.props';
 
-import InputRoot from './InputRoot';
-import InputSlotComponent from './InputSlot';
-import InputIconComponent from './InputIcon';
-import InputFieldComponent from './InputField';
-import { useFormFieldContext } from '../FormField';
 import {
-  CalendarMediumIcon,
   CloseSmallIcon,
-  EyeSmallIcon,
   EyeOffSmallIcon,
+  EyeSmallIcon,
   SearchMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
-import { InputWithoutChildrenProps } from './Input.props';
-import { UnstyledIconButton } from '../UnstyledIconButton';
-import { Spinner } from '../Spinner';
 import { useTheme } from '../../hooks';
-import { DetailText } from '../DetailText';
-import { Platform } from 'react-native';
+import { useFormFieldContext } from '../FormField';
+import { Spinner } from '../Spinner';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+import { InputWithoutChildrenProps } from './Input.props';
+import InputFieldComponent from './InputField';
+import InputIconComponent from './InputIcon';
+import InputRoot from './InputRoot';
+import InputSlotComponent from './InputSlot';
 
 export const InputComponent = createInput({
   Icon: InputIconComponent,
@@ -47,6 +44,7 @@ const Input = ({
   loading,
   clearable = false,
   required,
+  inBottomSheet = false,
   ...props
 }: InputProps) => {
   const formFieldContext = useFormFieldContext();
@@ -56,27 +54,7 @@ const Input = ({
   const [fieldType, setFieldType] = useState<'password' | 'text'>(
     type === 'password' ? 'password' : 'text'
   );
-  const { components } = useTheme();
-
-  const defaultFornat = (() => {
-    if (type === 'currency') {
-      return '0.00';
-    }
-    if (type === 'date') {
-      return 'DD/MM/YYYY';
-    }
-    return;
-  })();
-
-  const getPlaceholder = (() => {
-    if (type === 'currency') {
-      return props.placeholder ?? format ?? defaultFornat;
-    }
-    if (type === 'date') {
-      return props.placeholder ?? format ?? defaultFornat;
-    }
-    return props.placeholder;
-  })();
+  const { color } = useTheme();
 
   const shouldShowPasswordToggle = type === 'password' && showPasswordToggle;
   const shouldShowClear = clearable && !!(props as InputWithoutChildrenProps)?.value;
@@ -92,17 +70,7 @@ const Input = ({
     return leadingIcon;
   })();
 
-  const trailingIconComponent = ((): ComponentType | undefined => {
-    if (type === 'date') {
-      return CalendarMediumIcon;
-    }
-    return trailingIcon;
-  })();
-
   const getInputMode = (() => {
-    if (type === 'currency') {
-      return 'decimal';
-    }
     if (type === 'search') {
       return 'search';
     }
@@ -129,24 +97,11 @@ const Input = ({
               <InputIcon as={leadingIconComponent} />
             </InputSlot>
           )}
-          {type === 'currency' && (
-            <InputSlot>
-              <DetailText
-                size="4xl"
-                style={{
-                  // todo: fix this
-                  ...(Platform.OS === 'ios' && { lineHeight: 46 }),
-                }}
-              >
-                £
-              </DetailText>
-            </InputSlot>
-          )}
           <InputField
             type={fieldType}
             inputMode={getInputMode}
+            inBottomSheet={inBottomSheet}
             {...props}
-            placeholder={getPlaceholder}
           />
           {shouldShowClear && (
             <InputSlot>
@@ -155,7 +110,7 @@ const Input = ({
           )}
           {loading && (
             <InputSlot>
-              <Spinner size="xs" color={components.icon.color} />
+              <Spinner size="xs" color={color.icon.primary} />
             </InputSlot>
           )}
           {shouldShowPasswordToggle && (
@@ -166,9 +121,9 @@ const Input = ({
               />
             </InputSlot>
           )}
-          {!!trailingIconComponent && (
+          {!!trailingIcon && (
             <InputSlot>
-              <InputIcon as={trailingIconComponent} />
+              <InputIcon as={trailingIcon} />
             </InputSlot>
           )}
         </>

package/src/components/Input/InputField.tsx

@@ -1,68 +1,41 @@
-import { useBottomSheetInternal } from '@gorhom/bottom-sheet';
-import { useCallback, useEffect } from 'react';
-import {
-  NativeSyntheticEvent,
-  TextInput as RNTextInput,
-  TextInputFocusEventData,
-  TextInputProps,
-} from 'react-native';
+import { BottomSheetTextInput } from '@gorhom/bottom-sheet';
+import { TextInput as RNTextInput, TextInputProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { useInputContext } from './Input.context';
 
-const InputField = ({ style, onFocus, onBlur, ...props }: TextInputProps) => {
+const InputField = ({
+  style,
+  onFocus,
+  onBlur,
+  inBottomSheet = false,
+  ...props
+}: TextInputProps & { inBottomSheet?: boolean }) => {
   const { disabled, focused = false, type } = useInputContext();
   styles.useVariants({ focused, type });
-  const { components, color } = useTheme();
+  const { color } = useTheme();
 
-  // Copied from @gorhom/bottom-sheet BottomSheetTextInput
-  const bottomSheetContext = useBottomSheetInternal(true);
-
-  const handleOnFocus = useCallback(
-    (args: NativeSyntheticEvent<TextInputFocusEventData>) => {
-      if (bottomSheetContext) {
-        bottomSheetContext.shouldHandleKeyboardEvents.value = true;
-      }
-      if (onFocus) {
-        onFocus(args);
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [onFocus, bottomSheetContext?.shouldHandleKeyboardEvents]
-  );
-  const handleOnBlur = useCallback(
-    (args: NativeSyntheticEvent<TextInputFocusEventData>) => {
-      if (bottomSheetContext) {
-        bottomSheetContext.shouldHandleKeyboardEvents.value = false;
-      }
-      if (onBlur) {
-        onBlur(args);
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [onBlur, bottomSheetContext?.shouldHandleKeyboardEvents]
-  );
-
-  useEffect(() => {
-    return () => {
-      // Reset the flag on unmount
-      if (bottomSheetContext) {
-        bottomSheetContext.shouldHandleKeyboardEvents.value = false;
-      }
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [bottomSheetContext?.shouldHandleKeyboardEvents]);
-  // End of copied code
+  if (inBottomSheet) {
+    return (
+      <BottomSheetTextInput
+        placeholderTextColor={color.text.secondary}
+        selectionColor={color.purple[700]}
+        cursorColor={color.purple[700]}
+        verticalAlign="middle"
+        aria-disabled={disabled}
+        {...props}
+        style={[styles.input, style]}
+      />
+    );
+  }
 
   return (
     <RNTextInput
-      placeholderTextColor={components.input.placeholderColor}
+      placeholderTextColor={color.text.secondary}
       selectionColor={color.purple[700]}
       cursorColor={color.purple[700]}
       verticalAlign="middle"
       aria-disabled={disabled}
-      onFocus={handleOnFocus}
-      onBlur={handleOnBlur}
       {...props}
       style={[styles.input, style]}
     />
@@ -78,7 +51,7 @@ const styles = StyleSheet.create(theme => ({
     width: 'auto',
     justifyContent: 'center',
     alignItems: 'center',
-    color: theme.components.text.color,
+    color: theme.color.text.primary,
     fontSize: theme.typography.mobile.bodyText.md.fontSize,
     fontFamily: theme.typography.mobile.bodyText.fontFamily,
     fontWeight: theme.typography.mobile.bodyText.fontWeight,
@@ -91,13 +64,6 @@ const styles = StyleSheet.create(theme => ({
         text: {},
         password: {},
         search: {},
-        currency: {
-          fontSize: theme.typography.mobile.detailText['4xl'].fontSize,
-          fontFamily: theme.typography.mobile.detailText.fontFamily,
-          fontWeight: theme.typography.mobile.detailText.fontWeight,
-          paddingTop: 0,
-          paddingBottom: 0,
-        },
         date: {},
       },
     },

package/src/components/Input/InputIcon.tsx

@@ -22,7 +22,7 @@ InputIcon.displayName = 'InputIcon';
 
 const styles = StyleSheet.create(theme => ({
   icon: {
-    color: theme.components.icon.color,
+    color: theme.color.icon.primary,
   },
 }));
 

package/src/components/Input/InputRoot.tsx

@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
-import { StyleSheet } from 'react-native-unistyles';
 import { View } from 'react-native';
-import InputProps from './Input.props';
+import { StyleSheet } from 'react-native-unistyles';
 import { InputContext } from './Input.context';
+import InputProps from './Input.props';
 
 const InputRoot = ({
   children,
@@ -33,18 +33,18 @@ InputRoot.displayName = 'InputRoot';
 
 const styles = StyleSheet.create(theme => ({
   container: {
-    borderColor: theme.components.input.borderColor,
+    borderColor: theme.color.border.strong,
     height: theme.components.input.height,
     borderRadius: theme.components.input.borderRadius,
     flexDirection: 'row',
     overflow: 'hidden',
     alignContent: 'center',
     paddingHorizontal: theme.components.input.paddingHorizontal,
-    backgroundColor: theme.components.input.backgroundColor,
+    backgroundColor: theme.color.surface.neutral.strong,
     gap: theme.components.input.gap,
     outlineStyle: 'solid',
     outlineWidth: theme.components.input.borderWidth,
-    outlineColor: theme.components.input.borderColor,
+    outlineColor: theme.color.border.strong,
     variants: {
       focus: {
         true: {
@@ -53,12 +53,12 @@ const styles = StyleSheet.create(theme => ({
       },
       validationStatus: {
         invalid: {
-          borderColor: theme.components.input.borderColorInvalid,
-          outlineColor: theme.components.input.borderColorInvalid,
+          borderColor: theme.color.feedback.danger.border,
+          outlineColor: theme.color.feedback.danger.border,
         },
         valid: {
-          borderColor: theme.components.input.borderColorValid,
-          outlineColor: theme.components.input.borderColorValid,
+          borderColor: theme.color.feedback.positive.border,
+          outlineColor: theme.color.feedback.positive.border,
         },
         initial: {},
       },
@@ -69,7 +69,7 @@ const styles = StyleSheet.create(theme => ({
       },
       readonly: {
         true: {
-          borderColor: theme.components.input.borderColorReadOnly,
+          borderColor: theme.color.border.subtle,
         },
       },
       type: {

package/src/components/Label/Label.tsx

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
-import LabelProps from './Label.props';
 import { BodyText } from '../BodyText';
+import LabelProps from './Label.props';
 
 const Label = ({ children, nested, disabled, style, ...props }: LabelProps) => {
   styles.useVariants({ disabled });
@@ -20,7 +20,7 @@ Label.displayName = 'Label';
 
 const styles = StyleSheet.create(theme => ({
   text: {
-    color: theme.components.text.color,
+    color: theme.color.text.primary,
     variants: {
       disabled: {
         true: {

package/src/components/Link/LinkRoot.tsx

@@ -35,7 +35,7 @@ const styles = StyleSheet.create(theme => ({
         borderRadius: theme.borderRadius.xs,
         outlineStyle: 'solid',
         outlineWidth: 2,
-        outlineColor: theme.components.focus.border,
+        outlineColor: theme.color.focus.primary,
         outlineOffset: 1,
         boxShadow: 'none',
       },
@@ -50,7 +50,7 @@ const styles = StyleSheet.create(theme => ({
         true: {
           _web: {
             '_focus-visible': {
-              outlineColor: theme.components.focus.borderInverted,
+              outlineColor: theme.color.focus.inverted,
             },
           },
         },

package/src/components/List/List.docs.mdx

@@ -1,32 +1,32 @@
-import { Meta, Canvas, Story, Controls } from '@storybook/addon-docs/blocks';
-import * as Stories from './List.stories';
-import { ViewFigmaButton, BackToTopButton, UsageWrap, BadgeList } from '../../../docs/components';
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
+import {
+  BillMediumIcon,
+  ChevronRightSmallIcon,
+  ElectricityMediumIcon,
+  GasMediumIcon,
+  HomeFilledMediumIcon,
+  PaymentMediumIcon,
+  UserMediumIcon,
+} from '@utilitywarehouse/hearth-react-native-icons';
 import {
+  Badge,
+  BadgeText,
+  Box,
+  FlatList,
+  Image,
   List,
-  ListHeading,
+  SectionHeader,
   ListItem,
+  ListItemContent,
+  ListItemHelperText,
   ListItemIcon,
   ListItemLeadingContent,
-  ListItemHelperText,
   ListItemText,
   ListItemTrailingContent,
   ListItemTrailingIcon,
-  ListItemContent,
-  Box,
-  Badge,
-  BadgeText,
-  FlatList,
-  Image,
 } from '../../';
-import {
-  BillMediumIcon,
-  ChevronRightSmallIcon,
-  PaymentMediumIcon,
-  HomeFilledMediumIcon,
-  UserMediumIcon,
-  ElectricityMediumIcon,
-  GasMediumIcon,
-} from '@utilitywarehouse/hearth-react-native-icons';
+import { BackToTopButton, BadgeList, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './List.stories';
 
 <Meta title="Components / List" />
 
@@ -44,7 +44,6 @@ List item is the main building block of list. Each item has its own set of prope
 - [Usage](#usage)
 - [Props](#props)
   - [`List`](#list-1)
-  - [`ListHeading`](#listheading)
   - [`ListItem`](#listitem)
 - [Advanced Usage](#advanced-usage)
 - [Variants](#variants)
@@ -65,7 +64,7 @@ List item is the main building block of list. Each item has its own set of prope
 ## Usage
 
 <UsageWrap>
-  <List headingText="Heading" headingHelperText="Supporting text" divider>
+  <List heading="Heading" helperText="Supporting text" divider>
     <ListItem text="List Item 1" onPress={() => console.log('item pressed')} />
     <ListItem text="List Item 2" onPress={() => console.log('item pressed')} />
     <ListItem text="List Item 3" onPress={() => console.log('item pressed')} />
@@ -91,39 +90,19 @@ const MyComponent = () => (
 | Name                    | Type                                                                                              | Default   | Description                                                |
 | ----------------------- | ------------------------------------------------------------------------------------------------- | --------- | ---------------------------------------------------------- |
 | container               | `'none' \| 'subtleWhite' \| 'emphasisWhite' \|` <br /> `'subtleWarmWhite' \| 'emphasisWarmWhite'` | `'none'`  | The container style of the list.                           |
-| headingText             | `string`                                                                                          |           | The text to display in the heading of the list.            |
-| headingHelperText       | `string`                                                                                          |           | The supporting text to display in the heading of the list. |
-| headingLinkText         | `string`                                                                                          |           | The text for the link in the heading.                      |
-| headingLinkHref         | `string`                                                                                          |           | The href for the link in the heading.                      |
-| headingLinkOnPress      | `() => void`                                                                                      |           | Callback function when the heading link is pressed.        |
-| headingLinkTarget       | `'_blank' \| '_self' \| '_parent' \| '_top'`                                                      |           | Target for the link in the heading.                        |
-| headingLinkDisabled     | `boolean`                                                                                         | `false`   | Whether the heading link is disabled.                      |
-| headingLinkIcon         | `ComponentType`                                                                                   |           | Icon for the heading link.                                 |
-| headingLinkIconPosition | `'left' \| 'right'`                                                                               | `'right'` | Position of the icon in the heading link.                  |
-| headingLinkShowIcon     | `boolean`                                                                                         | `true`    | Whether to show the icon in the heading link.              |
+| heading                 | `string`                                                                                          |           | The text to display in the heading of the list.            |
+| helperText              | `string`                                                                                          |           | The supporting text to display in the heading of the list. |
+| linkText                | `string`                                                                                          |           | The text for the link in the heading.                      |
+| linkHref                | `string`                                                                                          |           | The href for the link in the heading.                      |
+| linkOnPress             | `() => void`                                                                                      |           | Callback function when the heading link is pressed.        |
+| linkTarget              | `'_blank' \| '_self' \| '_parent' \| '_top'`                                                      |           | Target for the link in the heading.                        |                   |
+| linkIcon                | `ComponentType`                                                                                   |           | Icon for the heading link.                                 |
+| linkIconPosition        | `'left' \| 'right'`                                                                               | `'right'` | Position of the icon in the heading link.                  |
+| linkShowIcon            | `boolean`                                                                                         | `true`    | Whether to show the icon in the heading link.              |
 | divider                 | `boolean`                                                                                         | `false`   | Whether to display a divider below the list items.         |
 | loading                 | `boolean`                                                                                         | `false`   | Whether to show the list items in loading state.           |
 | disabled                | `boolean`                                                                                         | `false`   | Whether to disable the list.                               |
 
-### `ListHeading`
-
-| Name             | Type                                         | Default    | Description                                                |
-| ---------------- | -------------------------------------------- | ---------- | ---------------------------------------------------------- |
-| text             | `string`                                     |            | The text to display in the heading of the list.            |
-| helperText       | `string`                                     |            | The supporting text to display in the heading of the list. |
-| linkText         | `string`                                     |            | The text for the link in the heading.                      |
-| linkHref         | `string`                                     |            | The href for the link in the heading.                      |
-| linkOnPress      | `() => void`                                 |            | Callback function when the link is pressed.                |
-| linkTarget       | `'_blank' \| '_self' \| '_parent' \| '_top'` | `'_blank'` | Target for the link in the heading.                        |
-| linkDisabled     | `boolean`                                    | `false`    | Whether the link is disabled.                              |
-| linkIcon         | `ComponentType`                              |            | Icon for the link.                                         |
-| linkIconPosition | `'left' \| 'right'`                          | `'right'`  | Position of the icon in the link.                          |
-| linkShowIcon     | `boolean`                                    | `true`     | Whether to show the icon in the link.                      |
-
-#### - `ListHeadingText`
-
-#### - `ListHeadingHelperText`
-
 ### `ListItem`
 
 | Name            | Type                     | Default | Description                                                     |
@@ -166,7 +145,7 @@ If you need to use the List component in a more advanced way, you can use the pa
 
 <UsageWrap>
   <List>
-    <ListHeading text="Your account" helperText="Tap the links below to view your account" />
+    <SectionHeader heading="Your account" helperText="Tap the links below to view your account" />
     <ListItem onPress={() => console.log('pressed')}>
       <ListItemLeadingContent>
         <ListItemIcon as={BillMediumIcon} />
@@ -221,7 +200,7 @@ If you need to use the List component in a more advanced way, you can use the pa
 ```tsx
 import {
   List,
-  ListHeading,
+  SectionHeader,
   ListItem,
   ListItemIcon,
   ListItemLeadingContent,
@@ -241,7 +220,7 @@ import {
 
 const MyComponent = () => (
   <List>
-    <ListHeading text="Your account" helperText="Tap the links below to view your account" />
+    <SectionHeader heading="Your account" helperText="Tap the links below to view your account" />
     <ListItem onPress={() => console.log('pressed')}>
       <ListItemLeadingContent>
         <ListItemIcon as={BillMediumIcon} />
@@ -404,7 +383,7 @@ const BadgeList = () => {
         </ListItemLeadingContent>
         <ListItemContent>
           <ListItemText>Electricity</ListItemText>
-          <Badge colorScheme="blue">
+          <Badge colorScheme="info">
             <BadgeText>Text</BadgeText>
           </Badge>
           <ListItemHelperText>Last reading 23/03/24</ListItemHelperText>
@@ -422,7 +401,7 @@ const BadgeList = () => {
         <ListItemContent>
           <Flex direction="row" style={{ justifyContent: 'space-between' }}>
             <ListItemText>Gas</ListItemText>
-            <Badge colorScheme="green">
+            <Badge colorScheme="positive">
               <BadgeText>Smart meter</BadgeText>
             </Badge>
           </Flex>

package/src/components/List/List.props.ts

@@ -3,16 +3,15 @@ import { ComponentType } from 'react';
 
 interface ListProps extends ViewProps {
   container?: 'none' | 'subtleWhite' | 'emphasisWhite' | 'subtleWarmWhite' | 'emphasisWarmWhite';
-  headingText?: string;
-  headingHelperText?: string;
-  headingLinkText?: string;
-  headingLinkHref?: string;
-  headingLinkOnPress?: () => void;
-  headingLinkTarget?: '_blank' | '_self' | '_parent' | '_top';
-  headingLinkDisabled?: boolean;
-  headingLinkIcon?: ComponentType;
-  headingLinkIconPosition?: 'left' | 'right';
-  headingLinkShowIcon?: boolean;
+  heading?: string;
+  helperText?: string;
+  linkText?: string;
+  linkHref?: string;
+  linkIcon?: ComponentType;
+  linkIconPosition?: 'left' | 'right';
+  linkOnPress?: () => void;
+  linkTarget?: '_blank' | '_self' | '_parent' | '_top';
+  linkShowIcon?: boolean;
   disabled?: boolean;
   loading?: boolean;
   divider?: boolean;

package/src/components/List/List.stories.tsx

@@ -17,15 +17,15 @@ const meta = {
       control: 'select',
       description: 'The container variant to be displayed on the list.',
     },
-    headingText: {
+    heading: {
       control: 'text',
       description:
-        'The heading text to be displayed on the list. \n _Note: This is a playground prop, use title on the ListHeading component._',
+        'The heading text to be displayed on the list. \n _Note: This is a playground prop, use heading on the SectionHeader component._',
     },
-    headingHelperText: {
+    helperText: {
       control: 'text',
       description:
-        'The heading supporting text to be displayed on the list. \n _Note: This is a playground prop, use _listItemHelperText on the ListHeading component._',
+        'The heading supporting text to be displayed on the list. \n _Note: This is a playground prop, use helperText on the SectionHeader component._',
     },
     divider: {
       control: 'boolean',
@@ -43,8 +43,8 @@ const meta = {
   },
   args: {
     container: 'none',
-    headingText: 'This is the list heading',
-    headingHelperText: 'Supporting text',
+    heading: 'This is the list heading',
+    helperText: 'Supporting text',
     divider: true,
     disabled: false,
     loading: false,
@@ -86,7 +86,7 @@ export const KitchenSink: Story = {
     return (
       <Flex space="sm" direction="column" style={{ width: '100%' }}>
         <VariantTitle title="List with title and supporting text">
-          <List headingText="List Heading" headingHelperText="Supporting Text">
+          <List heading="List Heading" helperText="Supporting Text">
             {list.map((item, index) => (
               <ListItem key={index} text={item.text} helperText={item.helperText} />
             ))}
@@ -165,7 +165,7 @@ export const KitchenSink: Story = {
           </List>
         </VariantTitle>
         <VariantTitle title="List with heading link">
-          <List headingText="Heading" headingLinkText="View all" headingLinkHref="http://uw.co.uk">
+          <List heading="Heading" linkText="View all" linkHref="http://uw.co.uk">
             {list.map((item, index) => (
               <ListItem
                 key={index}