docs(nhsuk-frontend-react): add links to mantine and their polymophic…

… component docs

README.md

@@ -20,7 +20,9 @@ This implementation supports the latest version of the NHS.UK Frontend library a
 
 ## Polymorphic Components
 
-A few components in this library are polymorphic, meaning they can accept a different component as a prop. This is particularly useful when you want to use a custom component, say a `Link` component from a routing library, instead of the default `a` tag.
+A few components in this library are polymorphic, meaning they can accept a different component as a prop and render as that component. This is particularly useful when you want to use a custom component, say a `Link` component from a routing library, instead of the default `a` tag.
+
+This feature is was taken from [Mantine](https://github.com/mantinedev/mantine), have a look at their [polymorphic components documentation](https://mantine.dev/guides/polymorphic/) for more information.
 
 Here is an example of how you can use a custom `Link` component with the `Header.Logo` component:
 
@@ -43,7 +45,7 @@ export const AppHeader = () => (
 );
 ```
 
-### Full List of Polymorphic Components
+## Full List of Polymorphic Components
 
 <details>
 <summary>Click to expand</summary>

packages/nhsuk-frontend-react/README.md

@@ -20,7 +20,9 @@ This implementation supports the latest version of the NHS.UK Frontend library a
 
 ## Polymorphic Components
 
-A few components in this library are polymorphic, meaning they can accept a different component as a prop. This is particularly useful when you want to use a custom component, say a `Link` component from a routing library, instead of the default `a` tag.
+A few components in this library are polymorphic, meaning they can accept a different component as a prop and render as that component. This is particularly useful when you want to use a custom component, say a `Link` component from a routing library, instead of the default `a` tag.
+
+This feature is was taken from [Mantine](https://github.com/mantinedev/mantine), have a look at their [polymorphic components documentation](https://mantine.dev/guides/polymorphic/) for more information.
 
 Here is an example of how you can use a custom `Link` component with the `Header.Logo` component:
 
@@ -43,7 +45,7 @@ export const AppHeader = () => (
 );
 ```
 
-### Full List of Polymorphic Components
+## Full List of Polymorphic Components
 
 <details>
 <summary>Click to expand</summary>

packages/nhsuk-frontend-react/src/components/form-elements/input/Input.stories.tsx

@@ -22,6 +22,7 @@ const meta: Meta = {
         '5',
         '10',
         '20',
+        '30',
         'full',
         'one-half',
         'one-third',
@@ -47,6 +48,7 @@ export const Default: Story = {
 export const WithFixedWidth: Story = {
   render: (args) => (
     <>
+      <Input {...args} label="30 character width" width="30" />
       <Input {...args} label="20 character width" width="20" />
       <Input {...args} label="10 character width" width="10" />
       <Input {...args} label="5 character width" width="5" />