Reduce duplicate button code

Author: colinrotherham

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

@@ -14,29 +14,38 @@ import {
 
 import { type AsElementLink } from '#util/types/LinkTypes.js';
 
-export interface ButtonProps extends AsElementLink<HTMLButtonElement> {
+export interface ButtonProps extends ButtonBaseProps, AsElementLink<HTMLButtonElement> {
   href?: never;
-  secondary?: boolean;
-  reverse?: boolean;
-  warning?: boolean;
-  login?: boolean;
-  small?: boolean;
   as?: 'button';
-  preventDoubleClick?: boolean;
 }
 
-export interface ButtonLinkProps extends AsElementLink<HTMLAnchorElement> {
+export interface ButtonLinkProps extends ButtonBaseProps, AsElementLink<HTMLAnchorElement> {
   href: string;
   type?: never;
+  as?: 'a';
+}
+
+interface ButtonBaseProps {
   secondary?: boolean;
   reverse?: boolean;
   warning?: boolean;
   login?: boolean;
   small?: boolean;
-  as?: 'a';
   preventDoubleClick?: boolean;
 }
 
+function getButtonClassNames(props: ButtonProps | ButtonLinkProps) {
+  return classNames(
+    'nhsuk-button',
+    { 'nhsuk-button--secondary': props.secondary },
+    { 'nhsuk-button--reverse': props.reverse },
+    { 'nhsuk-button--warning': props.warning },
+    { 'nhsuk-button--login': props.login },
+    { 'nhsuk-button--small': props.small },
+    props.className,
+  );
+}
+
 const ButtonComponent = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {
   const {
     className,
@@ -76,15 +85,7 @@ const ButtonComponent = forwardRef<HTMLButtonElement, ButtonProps>((props, forwa
 
   return (
     <Element
-      className={classNames(
-        'nhsuk-button',
-        { 'nhsuk-button--secondary': secondary },
-        { 'nhsuk-button--reverse': reverse },
-        { 'nhsuk-button--warning': warning },
-        { 'nhsuk-button--login': login },
-        { 'nhsuk-button--small': small },
-        className,
-      )}
+      className={getButtonClassNames(props)}
       data-module="nhsuk-button"
       data-prevent-double-click={preventDoubleClick === true ? 'true' : undefined}
       disabled={disabled}
@@ -142,15 +143,7 @@ const ButtonLinkComponent = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
 
     return (
       <Element
-        className={classNames(
-          'nhsuk-button',
-          { 'nhsuk-button--secondary': secondary },
-          { 'nhsuk-button--reverse': reverse },
-          { 'nhsuk-button--warning': warning },
-          { 'nhsuk-button--login': login },
-          { 'nhsuk-button--small': small },
-          className,
-        )}
+        className={getButtonClassNames(props)}
         data-module="nhsuk-button"
         data-prevent-double-click={preventDoubleClick === true ? 'true' : undefined}
         role="button"