feat(nhsuk-frontend-react): update possible sizes for form element la…

…bels
rowellx68 · Sep 27, 2024 · 22a52e3 · 22a52e3
1 parent 9a8e995
commit 22a52e3
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 13 deletions.
diff --git a/packages/nhsuk-frontend-react/src/components/core/label/Label.tsx b/packages/nhsuk-frontend-react/src/components/core/label/Label.tsx
@@ -9,19 +9,19 @@ export type LabelProps = (
       variant?: undefined;
     }
   | {
-      size: Size;
+      size: Exclude<Size, 'xl'>;
       variant?: undefined;
     }
   | {
       variant: 'page-heading';
-      size: Size;
+      size: Exclude<Size, 'xl'>;
     }
 ) &
   ElementProps<'label', 'size' | 'as'>;
 
 const Label = ({ className, size, variant, ...props }: LabelProps) => {
   const component =
-    variant === 'page-heading' || size === 'xl' ? 'h1' : React.Fragment;
+    variant === 'page-heading' || size === 'l' ? 'h1' : React.Fragment;
 
   const baseProps =
     component === 'h1' ? { className: 'nhsuk-label-wrapper' } : {};
@@ -32,7 +32,7 @@ const Label = ({ className, size, variant, ...props }: LabelProps) => {
         className={clsx(
           'nhsuk-label',
           {
-            'nhsuk-label--xl': variant === 'page-heading' && !size,
+            'nhsuk-label--l': variant === 'page-heading' && !size,
             [`nhsuk-label--${size}`]: size,
           },
           className,

diff --git a/packages/nhsuk-frontend-react/src/components/form-elements/fieldset/Fieldset.tsx b/packages/nhsuk-frontend-react/src/components/form-elements/fieldset/Fieldset.tsx
@@ -82,12 +82,12 @@ export type FieldsetLegendProps = (
       variant?: undefined;
     }
   | {
-      size: Size;
+      size: Exclude<Size, 'xl'>;
       variant?: undefined;
     }
   | {
       variant: 'page-heading';
-      size?: Size;
+      size?: Exclude<Size, 'xl'>;
     }
 ) &
   ElementProps<'legend', 'size' | 'as'> &
@@ -102,7 +102,7 @@ const FieldsetLegend = ({
   ...props
 }: FieldsetLegendProps & AsElementProps) => {
   const _component =
-    variant === 'page-heading' || size === 'xl'
+    variant === 'page-heading' || size === 'l'
       ? component || 'h1'
       : React.Fragment;
 
@@ -121,7 +121,7 @@ const FieldsetLegend = ({
       className={clsx(
         'nhsuk-fieldset__legend',
         {
-          'nhsuk-fieldset__legend--xl': variant === 'page-heading' && !size,
+          'nhsuk-fieldset__legend--l': variant === 'page-heading' && !size,
           [`nhsuk-fieldset__legend--${size}`]: size,
         },
         className,

diff --git a/packages/nhsuk-frontend-react/src/components/styles/typography/heading/Heading.tsx b/packages/nhsuk-frontend-react/src/components/styles/typography/heading/Heading.tsx
@@ -4,13 +4,16 @@ import {
   PolymorphicFactory,
   polymorphicFactory,
 } from '@/internal/factory/polymorphic-factory';
-import { AsElementProps, ElementProps, HeadingLevel } from '@/types/shared';
+import {
+  AsElementProps,
+  ElementProps,
+  HeadingLevel,
+  Size,
+} from '@/types/shared';
 import clsx from 'clsx';
 
-export type HeadingSize = 'xl' | 'l' | 'm' | 's' | 'xs';
-
 export type HeadingProps = {
-  size?: HeadingSize;
+  size?: Size;
   variant?: 'caption-bottom';
 } & BaseProps &
   AsElementProps<HeadingLevel> &

diff --git a/packages/nhsuk-frontend-react/src/types/shared.ts b/packages/nhsuk-frontend-react/src/types/shared.ts
@@ -31,6 +31,6 @@ export type ColumnWidth =
   | 'one-quarter'
   | 'three-quarters';
 
-export type Size = 's' | 'm' | 'l' | 'xl';
+export type Size = 'xs' | 's' | 'm' | 'l' | 'xl';
 
 export type InputWidth = '2' | '3' | '4' | '5' | '10' | '20' | '30';