From f47037f8e2ad1782b2f27d0a5f50983137848db0 Mon Sep 17 00:00:00 2001 From: Rowell Heria Date: Fri, 13 Sep 2024 18:25:46 +0100 Subject: [PATCH 1/2] docs(nhsuk-frontend-react): add links to mantine and their polymophic component docs --- README.md | 6 ++++-- packages/nhsuk-frontend-react/README.md | 6 ++++-- .../src/components/form-elements/input/Input.stories.tsx | 2 ++ 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index e0754989..cad70910 100644 --- a/README.md +++ b/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
Click to expand diff --git a/packages/nhsuk-frontend-react/README.md b/packages/nhsuk-frontend-react/README.md index e0754989..cad70910 100644 --- a/packages/nhsuk-frontend-react/README.md +++ b/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
Click to expand diff --git a/packages/nhsuk-frontend-react/src/components/form-elements/input/Input.stories.tsx b/packages/nhsuk-frontend-react/src/components/form-elements/input/Input.stories.tsx index 0aa3bdb9..d87c4e58 100644 --- a/packages/nhsuk-frontend-react/src/components/form-elements/input/Input.stories.tsx +++ b/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) => ( <> + From b7587bd3a888294f49eb26d1020dba26c2e8cb9f Mon Sep 17 00:00:00 2001 From: Rowell Heria Date: Fri, 13 Sep 2024 18:27:24 +0100 Subject: [PATCH 2/2] chore: generate changeset --- .changeset/chatty-files-lay.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/chatty-files-lay.md diff --git a/.changeset/chatty-files-lay.md b/.changeset/chatty-files-lay.md new file mode 100644 index 00000000..d04bf833 --- /dev/null +++ b/.changeset/chatty-files-lay.md @@ -0,0 +1,5 @@ +--- +"nhsuk-frontend-react": patch +--- + +docs(nhsuk-frontend-react): add links to mantine and their polymophic component docs