Add small button support

Author: colinrotherham

src/components/form-elements/button/Button.tsx

@@ -20,6 +20,7 @@ export interface ButtonProps extends AsElementLink<HTMLButtonElement> {
   reverse?: boolean;
   warning?: boolean;
   login?: boolean;
+  small?: boolean;
   as?: 'button';
   preventDoubleClick?: boolean;
 }
@@ -31,6 +32,7 @@ export interface ButtonLinkProps extends AsElementLink<HTMLAnchorElement> {
   reverse?: boolean;
   warning?: boolean;
   login?: boolean;
+  small?: boolean;
   as?: 'a';
   preventDoubleClick?: boolean;
 }
@@ -44,6 +46,7 @@ const ButtonComponent = forwardRef<HTMLButtonElement, ButtonProps>((props, forwa
     reverse,
     warning,
     login,
+    small,
     type = 'submit',
     preventDoubleClick,
     onClick,
@@ -79,6 +82,7 @@ const ButtonComponent = forwardRef<HTMLButtonElement, ButtonProps>((props, forwa
         { 'nhsuk-button--reverse': reverse },
         { 'nhsuk-button--warning': warning },
         { 'nhsuk-button--login': login },
+        { 'nhsuk-button--small': small },
         className,
       )}
       data-module="nhsuk-button"
@@ -109,6 +113,7 @@ const ButtonLinkComponent = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
       reverse,
       warning,
       login,
+      small,
       preventDoubleClick,
       onClick,
       ...rest
@@ -143,6 +148,7 @@ const ButtonLinkComponent = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
           { 'nhsuk-button--reverse': reverse },
           { 'nhsuk-button--warning': warning },
           { 'nhsuk-button--login': login },
+          { 'nhsuk-button--small': small },
           className,
         )}
         data-module="nhsuk-button"

stories/Form Elements/Button.stories.tsx

@@ -54,34 +54,73 @@ export const Primary: Story = {
   },
 };
 
+export const SmallPrimary: Story = {
+  args: {
+    small: true,
+    children: 'Save and continue',
+  },
+};
+
 export const Secondary: Story = {
   args: {
     secondary: true,
     children: 'Find my location',
   },
 };
 
+export const SmallSecondary: Story = {
+  args: {
+    secondary: true,
+    small: true,
+    children: 'Find my location',
+  },
+};
+
 export const Warning: Story = {
   args: {
     warning: true,
     children: 'Yes, delete this vaccine',
   },
 };
 
+export const SmallWarning: Story = {
+  args: {
+    warning: true,
+    small: true,
+    children: 'Yes, delete this vaccine',
+  },
+};
+
 export const Login: Story = {
   args: {
     login: true,
     children: 'Continue to NHS login',
   },
 };
 
+export const SmallLogin: Story = {
+  args: {
+    login: true,
+    small: true,
+    children: 'Continue to NHS login',
+  },
+};
+
 export const Reverse: Story = {
   args: {
     reverse: true,
     children: 'Log out',
   },
 };
 
+export const SmallReverse: Story = {
+  args: {
+    reverse: true,
+    small: true,
+    children: 'Log out',
+  },
+};
+
 /**
  *
  * Disabled buttons have poor contrast and can confuse some users. Only use them if user research shows it makes things easier for users to understand.