@sats-group/ui-lib 77.1.0 → 78.0.0

package/eslint.config.mjs

@@ -19,13 +19,10 @@ export default [
   {
     ignores: [
       '**/.vscode',
-      '**/site/build',
       '**/dist',
       '**/docs',
       '**/node_modules',
       '**/test-results',
-      '**/site/pages/colors/dark-docs.tsx',
-      '**/site/pages/colors/light-docs.tsx',
     ],
   },
   ...compat.extends(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sats-group/ui-lib",
-  "version": "77.1.0",
+  "version": "78.0.0",
   "description": "SATS web user interface library",
   "engines": {
     "node": "^18 || ^20",

package/react/button/button.tsx

@@ -1,19 +1,23 @@
 import * as React from 'react';
 
-import { Button as Props } from './button.types';
+import type { Button as Props } from './button.types';
 
 import VisuallyButton from '../visually-button';
 
-const Button: React.FunctionComponent<Props> & {
-  sizes: typeof VisuallyButton.sizes;
-  themes: typeof VisuallyButton.themes;
-  variants: typeof VisuallyButton.variants;
-} = ({ type = 'button', ...rest }) => (
-  <VisuallyButton elementName="button" type={type} {...rest} />
+const ButtonRef = React.forwardRef<HTMLButtonElement, Props>(
+  ({ type = 'button', ...rest }, ref) => (
+    <VisuallyButton elementName="button" ref={ref} type={type} {...rest} />
+  ),
 );
 
-Button.sizes = VisuallyButton.sizes;
-Button.themes = VisuallyButton.themes;
-Button.variants = VisuallyButton.variants;
+ButtonRef.displayName = 'Button';
+
+const Button: typeof ButtonRef & {
+  sizes: typeof VisuallyButton.sizes;
+  variants: typeof VisuallyButton.variants;
+} = Object.assign(ButtonRef, {
+  sizes: VisuallyButton.sizes,
+  variants: VisuallyButton.variants,
+});
 
 export default Button;

package/react/button/button.types.ts

@@ -1,3 +1,3 @@
-import { VisuallyButtonButton } from '../visually-button/visually-button.types';
+import type { VisuallyButtonButton } from '../visually-button/visually-button.types';
 
-export type Button = VisuallyButtonButton;
+export type Button = Omit<VisuallyButtonButton, 'elementName'>;

package/react/components.ts

@@ -10,6 +10,7 @@ export const names = [
   'confirmation',
   'context-menu',
   'cropped-image',
+  'div-button',
   'dropdown-list',
   'expander',
   'filter',
@@ -51,6 +52,7 @@ export const selectors = [
   '.confirmation',
   '.context-menu',
   '.cropped-image',
+  '.div-button',
   '.dropdown-list',
   '.expander',
   '.filter',

package/react/context-menu/context-menu.tsx

@@ -90,10 +90,11 @@ const ContextMenu: React.FunctionComponent<Props> & {
         <div>
           <Button
             {...close}
-            variant={Button.variants.tertiary}
-            size={Button.sizes.small}
+            iconOnly
             leadingIcon={<Close />}
             onClick={onClose}
+            size={Button.sizes.small}
+            variant={Button.variants.tertiary}
           />
         </div>
       </div>

package/react/div-button/div-button.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import VisuallyButton from '../visually-button/visually-button';
+
+import { DivButton as Props } from './div-button.types';
+
+const DivButton: React.FunctionComponent<Props> & {
+  sizes: typeof VisuallyButton.sizes;
+  variants: typeof VisuallyButton.variants;
+} = props => <VisuallyButton elementName="div" {...props} />;
+
+DivButton.sizes = VisuallyButton.sizes;
+DivButton.variants = VisuallyButton.variants;
+
+export default DivButton;

package/react/div-button/div-button.types.ts

@@ -0,0 +1,3 @@
+import type { VisuallyButtonDiv } from '../visually-button/visually-button.types';
+
+export type DivButton = Omit<VisuallyButtonDiv, 'elementName'>;

package/react/div-button/index.ts

@@ -0,0 +1,2 @@
+import DivButton from './div-button';
+export default DivButton;

package/react/form-content/form-content.tsx

@@ -57,11 +57,12 @@ const FormContent: React.FC<Props> = ({
           </Text>
           <div className="form-content__modal-close-small">
             <Button
-              variant={Button.variants.secondary}
+              iconOnly
+              leadingIcon={<Close />}
               onClick={close}
               size={Button.sizes.small}
-              leadingIcon={<Close />}
-              ariaLabel={closeLabel}
+              text={closeLabel}
+              variant={Button.variants.secondary}
             />
           </div>
         </div>

package/react/link-button/link-button.types.ts

@@ -1,5 +1,3 @@
-import { VisuallyButtonLink } from '../visually-button/visually-button.types';
+import type { VisuallyButtonLink } from '../visually-button/visually-button.types';
 
-export type LinkButton = VisuallyButtonLink & {
-  href: string;
-};
+export type LinkButton = Omit<VisuallyButtonLink, 'elementName'>;

package/react/message-field/message-field.tsx

@@ -53,12 +53,12 @@ const MessageField: React.FunctionComponent<Props> & {
       <div>
         <Button
           {...send}
-          leadingIcon={<Send />}
           disabled={!hasTyped || isSubmitting}
-          theme={isSubmitting ? Button.themes.spinner : Button.themes.normal}
-          variant={Button.variants.complete}
+          leadingIcon={<Send />}
           onClick={onClickFunc}
           size={size === sizes.small ? Button.sizes.small : Button.sizes.basic}
+          spinning={isSubmitting}
+          variant={Button.variants.complete}
         />
       </div>
     </div>

package/react/modal/modal.tsx

@@ -61,11 +61,12 @@ const Modal: React.FC<React.PropsWithChildren<Props>> & {
             })}
           >
             <Button
-              ariaLabel={closeLabel}
               leadingIcon={<Close />}
               onClick={onClose}
               size={Button.sizes.small}
+              text={closeLabel}
               variant={Button.variants.secondary}
+              iconOnly
             />
           </div>
           {title || explanation ? (

package/react/search/search.scss

@@ -180,6 +180,11 @@
 
   &__clear-button {
     align-self: center;
+    display: none;
+
+    &--visible {
+      display: block;
+    }
   }
 
   &__close-button,

package/react/search/search.tsx

@@ -1,11 +1,13 @@
+import classNames from 'classnames';
 import React, { useRef, useState } from 'react';
 
-import Text from '../text';
-import SearchIcon from '../icons/24/search';
-import CloseIcon from '../icons/18/close';
-import useInputValidation from '../use-input-validation';
+import Button from '../button';
 import useClickOutside from '../hooks/use-click-outside';
 import { useIsMounted } from '../hooks/use-is-mounted';
+import CloseIcon from '../icons/18/close';
+import SearchIcon from '../icons/24/search';
+import Text from '../text';
+import useInputValidation from '../use-input-validation';
 
 import {
   Search as Props,
@@ -14,8 +16,6 @@ import {
   variants,
   expandDirections,
 } from './search.types';
-import classNames from 'classnames';
-import Button from '../button';
 
 const RefSearch = React.forwardRef<HTMLInputElement, Props>(
   (
@@ -28,6 +28,7 @@ const RefSearch = React.forwardRef<HTMLInputElement, Props>(
       isLabelVisible = true,
       name,
       onChangeFunc = () => {},
+      onClear = () => {},
       expandable,
       placeholder,
       required,
@@ -41,7 +42,7 @@ const RefSearch = React.forwardRef<HTMLInputElement, Props>(
     },
     ref,
   ) => {
-    const [validationOnChange, onInvalid, error] =
+    const [validationOnChange, handleInvalid, error] =
       useInputValidation(customErrorMessages);
     const searchArea = useRef<HTMLDivElement>(null);
     const [expand, setExpand] = useState(false);
@@ -51,7 +52,25 @@ const RefSearch = React.forwardRef<HTMLInputElement, Props>(
 
     const [inputValue, setInputValue] = useState(value);
 
-    const onMessageChange = (message: string) => setInputValue(message);
+    const setValue = (value: string) => {
+      onChangeFunc(value);
+      setInputValue(value);
+    };
+
+    const handleChange: React.ChangeEventHandler<HTMLInputElement> = e => {
+      setValue(e.target.value);
+      validationOnChange(e);
+    };
+
+    const handleClear = () => {
+      setValue('');
+      onClear();
+    };
+
+    const handleClose = () => {
+      handleClear();
+      setExpand(false);
+    };
 
     return (
       <div
@@ -106,14 +125,10 @@ const RefSearch = React.forwardRef<HTMLInputElement, Props>(
                   })}
                   disabled={disabled}
                   name={name}
-                  onChange={e => {
-                    onChangeFunc(e.target.value);
-                    validationOnChange(e);
-                    onMessageChange(e.target.value);
-                  }}
+                  onChange={handleChange}
                   onClick={() => setExpand(true)}
                   value={inputValue}
-                  onInvalid={e => onInvalid(e)}
+                  onInvalid={handleInvalid}
                   placeholder={placeholder}
                   ref={ref}
                   required={required}
@@ -125,27 +140,27 @@ const RefSearch = React.forwardRef<HTMLInputElement, Props>(
                   }
                 />
               </label>
-              {inputValue ? (
+              <div
+                className={classNames('search__clear-button', {
+                  'search__clear-button--visible': inputValue,
+                })}
+              >
                 <Button
                   {...clear}
-                  className="search__clear-button"
-                  onClick={() => {
-                    onChangeFunc('');
-                    setInputValue('');
-                  }}
+                  onClick={handleClear}
+                  size={
+                    inputSize === inputSizes.small
+                      ? Button.sizes.small
+                      : Button.sizes.basic
+                  }
                   type="button"
                   variant={
                     variant === variants.fixed
                       ? Button.variants.fixedTertiary
                       : Button.variants.tertiary
                   }
-                  size={
-                    inputSize === inputSizes.small
-                      ? Button.sizes.small
-                      : Button.sizes.basic
-                  }
                 />
-              ) : null}
+              </div>
               {button ? (
                 <Button
                   {...button}
@@ -167,22 +182,19 @@ const RefSearch = React.forwardRef<HTMLInputElement, Props>(
                 <Button
                   {...expandable.close}
                   className="search__close-button"
-                  variant={
-                    variant === variants.fixed
-                      ? Button.variants.fixedTertiary
-                      : Button.variants.tertiary
-                  }
+                  onClick={handleClose}
                   leadingIcon={<CloseIcon />}
-                  onClick={() => {
-                    setExpand(false);
-                    onChangeFunc('');
-                    setInputValue('');
-                  }}
                   size={
                     inputSize === inputSizes.small
                       ? Button.sizes.small
                       : Button.sizes.basic
                   }
+                  type="button"
+                  variant={
+                    variant === variants.fixed
+                      ? Button.variants.fixedTertiary
+                      : Button.variants.tertiary
+                  }
                 />
               ) : null}
             </div>

package/react/search/search.types.ts

@@ -27,17 +27,18 @@ export type Search = {
   button?: Button;
   clear: Button;
   customErrorMessages?: Messages;
-  inputSize?: ObjectValues<typeof inputSizes>; //NOTE: This is not named `size` due to InputHTMLProps having a `size` attribute that will clash
-  label: string;
-  isLabelVisible?: boolean;
-  name: string;
-  onChangeFunc?: (arg: string) => void;
   expandable?: {
     close: Button;
     direction?: ObjectValues<typeof expandDirections>;
   };
+  helpIcon?: ReactElement;
+  helpText?: string;
+  inputSize?: ObjectValues<typeof inputSizes>; //NOTE: This is not named `size` due to InputHTMLProps having a `size` attribute that will clash
+  isLabelVisible?: boolean;
+  label: string;
+  name: string;
+  onChangeFunc?: (arg: string) => void;
+  onClear?: () => void;
   theme?: ObjectValues<typeof themes>;
   variant?: ObjectValues<typeof variants>;
-  helpText?: string;
-  helpIcon?: ReactElement;
 } & InputHtmlProps;

package/react/types.ts

@@ -1,6 +1,7 @@
 import {
   AnchorHTMLAttributes,
   ButtonHTMLAttributes,
+  HTMLAttributes,
   ImgHTMLAttributes,
   InputHTMLAttributes,
   OptionHTMLAttributes,
@@ -29,6 +30,7 @@ export type ObjectValues<T> = Flatten<T[keyof T]>;
 
 // NOTE: The below types include all of the supported props for "html" react components (like `button` or `a`).
 export type ButtonHtmlProps = ButtonHTMLAttributes<HTMLButtonElement>;
+export type DivHtmlProps = HTMLAttributes<HTMLDivElement>;
 export type LinkHtmlProps = AnchorHTMLAttributes<HTMLAnchorElement>;
 export type InputHtmlProps = InputHTMLAttributes<HTMLInputElement>;
 export type ImageHtmlProps = ImgHTMLAttributes<HTMLImageElement>;

package/react/visually-button/maps.ts

@@ -0,0 +1,36 @@
+import type { ValueOf } from '../indexed-access-type';
+import { sizes as textSizes, themes as textThemes } from '../text/text.types';
+import { variants, sizes } from './visually-button.types';
+
+export const italicMap: Partial<Record<ValueOf<typeof variants>, true>> = {
+  cta: true,
+  'cta-secondary': true,
+  'cta-secondary-white': true,
+};
+
+export const sizeMap: Record<keyof typeof sizes, keyof typeof textSizes> = {
+  small: textSizes.small,
+  basic: textSizes.basic,
+  large: textSizes.large,
+};
+
+export const themeMap: Record<
+  ValueOf<typeof variants>,
+  keyof typeof textThemes
+> = {
+  complete: textThemes.emphasis,
+  cta: textThemes.headline,
+  'cta-secondary': textThemes.headline,
+  'cta-secondary-white': textThemes.headline,
+  primary: textThemes.emphasis,
+  'primary-destructive': textThemes.emphasis,
+  'primary-white': textThemes.emphasis,
+  secondary: textThemes.emphasis,
+  'secondary-white': textThemes.emphasis,
+  'secondary-destructive': textThemes.emphasis,
+  tertiary: textThemes.emphasis,
+  'tertiary-destructive': textThemes.emphasis,
+  'fixed-tertiary': textThemes.emphasis,
+  waitlist: textThemes.emphasis,
+  'waitlist-secondary': textThemes.emphasis,
+};

package/react/visually-button/visually-button.scss

@@ -102,7 +102,7 @@
     }
 
     &[disabled] {
-      &.visually-button--theme-spinner {
+      &.visually-button--spinning {
         background: light.$buttons-cta-default;
         color: transparent;
 
@@ -129,7 +129,7 @@
     }
 
     &[disabled] {
-      &.visually-button--theme-spinner {
+      &.visually-button--spinning {
         background: transparent;
         color: transparent;
         border-color: light.$buttons-secondary-default !important; //NOTE: This overrites the default "disabled" color for spinner style.
@@ -154,7 +154,7 @@
     }
 
     &[disabled] {
-      &.visually-button--theme-spinner {
+      &.visually-button--spinning {
         background: transparent;
         color: transparent;
         border-color: light.$buttons-clean-secondary-outline;
@@ -178,7 +178,7 @@
     }
 
     &[disabled] {
-      &.visually-button--theme-spinner {
+      &.visually-button--spinning {
         background: transparent;
         color: transparent;
         border-color: light.$buttons-destructive-outlined-default;
@@ -204,7 +204,7 @@
     }
 
     &[disabled] {
-      &.visually-button--theme-spinner {
+      &.visually-button--spinning {
         background: light.$buttons-primary-default;
         color: transparent;
 
@@ -229,7 +229,7 @@
     }
 
     &[disabled] {
-      &.visually-button--theme-spinner {
+      &.visually-button--spinning {
         background: light.$buttons-clean-default;
         color: light.$on-buttons-on-clean-default;
 
@@ -254,7 +254,7 @@
     }
 
     &[disabled] {
-      &.visually-button--theme-spinner {
+      &.visually-button--spinning {
         background: light.$buttons-destructive-default;
         color: light.$on-buttons-on-destructive-default;
 
@@ -289,7 +289,7 @@
     }
 
     &[disabled] {
-      &.visually-button--theme-spinner {
+      &.visually-button--spinning {
         color: transparent;
 
         .visually-button__spinner {
@@ -319,7 +319,7 @@
     }
 
     &[disabled] {
-      &.visually-button--theme-spinner {
+      &.visually-button--spinning {
         .visually-button__spinner {
           display: flex;
           color: light.$on-buttons-on-destructive-outlined-default;
@@ -346,7 +346,7 @@
     }
 
     &[disabled] {
-      &.visually-button--theme-spinner {
+      &.visually-button--spinning {
         .visually-button__spinner {
           display: flex;
           color: light.$on-buttons-on-fixed-link-default;
@@ -368,7 +368,7 @@
     }
 
     &[disabled] {
-      &.visually-button--theme-spinner {
+      &.visually-button--spinning {
         background: light.$buttons-waiting-list-default;
         color: transparent;
 
@@ -394,7 +394,7 @@
     }
 
     &[disabled] {
-      &.visually-button--theme-spinner {
+      &.visually-button--spinning {
         background: transparent;
         color: transparent;
         border-color: light.$buttons-waiting-list-outlined-default !important; //NOTE: This overrides the default "disabled" color for spinner style.
@@ -408,21 +408,17 @@
   }
 
   &__icon {
-    display: block;
+    display: grid;
     height: 19px;
+    place-items: center;
     width: 19px;
-    position: relative;
 
-    > * {
+    svg {
       display: block;
-      left: 50%;
-      position: absolute;
-      top: 50%;
-      transform: translate(-50%, -50%);
     }
 
     &[disabled] {
-      &.visually-button--spinner {
+      &.visually-button--spinning {
         .visually-button__spinner {
           display: flex;
         }

package/react/visually-button/visually-button.tsx

@@ -2,104 +2,78 @@ import cn from 'classnames';
 import * as React from 'react';
 
 import Text from '../text';
-import type { ValueOf } from '../indexed-access-type';
-import { themes as textThemes, sizes as textSizes } from '../text/text.types';
 
+import { italicMap, sizeMap, themeMap } from './maps';
 import {
   sizes,
-  themes,
   variants,
-  VisuallyButton as Props,
+  type VisuallyButton as Props,
 } from './visually-button.types';
 
-const italicMap: Partial<Record<ValueOf<typeof variants>, true>> = {
-  cta: true,
-  'cta-secondary': true,
-  'cta-secondary-white': true,
-};
-
-const sizeMap: Record<keyof typeof sizes, keyof typeof textSizes> = {
-  small: textSizes.small,
-  basic: textSizes.basic,
-  large: textSizes.large,
-};
-
-const themeMap: Record<ValueOf<typeof variants>, keyof typeof textThemes> = {
-  complete: textThemes.emphasis,
-  cta: textThemes.headline,
-  'cta-secondary': textThemes.headline,
-  'cta-secondary-white': textThemes.headline,
-  primary: textThemes.emphasis,
-  'primary-destructive': textThemes.emphasis,
-  'primary-white': textThemes.emphasis,
-  secondary: textThemes.emphasis,
-  'secondary-white': textThemes.emphasis,
-  'secondary-destructive': textThemes.emphasis,
-  tertiary: textThemes.emphasis,
-  'tertiary-destructive': textThemes.emphasis,
-  'fixed-tertiary': textThemes.emphasis,
-  waitlist: textThemes.emphasis,
-  'waitlist-secondary': textThemes.emphasis,
-};
-
-const VisuallyButton: React.FunctionComponent<Props> & {
-  sizes: typeof sizes;
-  variants: typeof variants;
-  themes: typeof themes;
-} = ({
-  ariaLabel,
-  className,
-  elementName = 'button',
-  leadingIcon,
-  trailingIcon,
-  hasStackedIcon,
-  size = sizes.basic,
-  testId,
-  text,
-  theme = themes.normal,
-  variant = variants.primary,
-  wide,
-  ...rest
-}) =>
-  React.createElement(
-    elementName,
+const VisuallyButtonRef = React.forwardRef<HTMLElement, Props>(
+  (
     {
-      'aria-label': leadingIcon && ariaLabel ? ariaLabel : undefined,
-      className: cn(
-        'visually-button',
-        {
-          'visually-button--icon': leadingIcon && !text,
-          'visually-button--icon-text': (leadingIcon || trailingIcon) && text,
-          'visually-button--icon-text--stacked': hasStackedIcon,
-          [`visually-button--size-${size}`]: size,
-          [`visually-button--variant-${variant}`]: variant,
-          'visually-button--wide': wide,
-          [`visually-button--theme-${theme}`]: theme
-            ? themes[theme]
-            : undefined,
-        },
-        className,
-      ),
-      'data-testid': testId,
-      ...rest,
+      iconOnly,
+      className,
+      elementName,
+      leadingIcon,
+      trailingIcon,
+      hasStackedIcon,
+      size = sizes.basic,
+      spinning,
+      testId,
+      text,
+      variant = variants.primary,
+      wide,
+      ...rest
     },
-    <React.Fragment>
-      {leadingIcon ? (
+    ref,
+  ) => {
+    const hasIcon = Boolean(leadingIcon || trailingIcon);
+    const renderIconOnly = Boolean(iconOnly && hasIcon);
+    const role = renderIconOnly && elementName === 'div' ? 'img' : undefined;
+
+    return React.createElement(
+      elementName,
+      {
+        'aria-label': renderIconOnly ? text : undefined,
+        className: cn(
+          'visually-button',
+          {
+            'visually-button--icon': renderIconOnly,
+            'visually-button--icon-text':
+              (leadingIcon || trailingIcon) && !iconOnly,
+            'visually-button--icon-text--stacked': hasStackedIcon,
+            [`visually-button--size-${size}`]: size,
+            'visually-button--spinning': spinning,
+            [`visually-button--variant-${variant}`]: variant,
+            'visually-button--wide': wide,
+          },
+          className,
+        ),
+        'data-testid': testId,
+        role,
+        ...rest,
+        ref,
+      },
+      leadingIcon ? (
         <div className="visually-button__icon">{leadingIcon}</div>
-      ) : null}
-      <Text
-        className="visually-button__text"
-        italic={italicMap[variant]}
-        size={sizeMap[size]}
-        theme={themeMap[variant]}
-        elementName="span"
-      >
-        {text}
-      </Text>
-      {trailingIcon ? (
+      ) : null,
+      renderIconOnly ? null : (
+        <Text
+          className="visually-button__text"
+          italic={italicMap[variant]}
+          size={sizeMap[size]}
+          theme={themeMap[variant]}
+          elementName="span"
+        >
+          {text}
+        </Text>
+      ),
+      trailingIcon ? (
         <div className="visually-button__icon">{trailingIcon}</div>
-      ) : null}
-      {theme === 'spinner' && (
+      ) : null,
+      spinning ? (
         <div className="visually-button__spinner">
           <svg
             className="visually-button__spinner-icon"
@@ -119,12 +93,19 @@ const VisuallyButton: React.FunctionComponent<Props> & {
             />
           </svg>
         </div>
-      )}
-    </React.Fragment>,
-  );
+      ) : null,
+    );
+  },
+);
+
+VisuallyButtonRef.displayName = 'VisuallyButton';
 
-VisuallyButton.sizes = sizes;
-VisuallyButton.variants = variants;
-VisuallyButton.themes = themes;
+const VisuallyButton: typeof VisuallyButtonRef & {
+  sizes: typeof sizes;
+  variants: typeof variants;
+} = Object.assign(VisuallyButtonRef, {
+  sizes,
+  variants,
+});
 
 export default VisuallyButton;

package/react/visually-button/visually-button.types.ts

@@ -1,6 +1,11 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 
-import { ButtonHtmlProps, ObjectValues, LinkHtmlProps } from '../types';
+import type {
+  ButtonHtmlProps,
+  DivHtmlProps,
+  LinkHtmlProps,
+  ObjectValues,
+} from '../types';
 
 export const sizes = {
   small: 'small',
@@ -26,46 +31,29 @@ export const variants = {
   waitlistSecondary: 'waitlist-secondary',
 } as const;
 
-export const themes = {
-  spinner: 'spinner',
-  normal: 'normal',
-} as const;
-
-type TextProp = {
-  text: string;
-  ariaLabel?: never;
-};
-
-type AriaLabelProp = {
-  ariaLabel: string;
-  text?: never;
-};
-
-type BasicProps = {
+type CommonProps<ElementName extends string> = {
   className?: string;
-  elementName?: string;
-  leadingIcon?: ReactElement;
-  trailingIcon?: ReactElement;
+  elementName: ElementName;
   hasStackedIcon?: boolean;
+  iconOnly?: boolean;
+  leadingIcon?: ReactElement;
   size?: ObjectValues<typeof sizes>;
+  spinning?: boolean;
   testId?: string;
-  theme?: ObjectValues<typeof themes>;
+  text: string;
+  trailingIcon?: ReactElement;
   variant?: ObjectValues<typeof variants>;
   wide?: boolean;
 };
 
-type CommonProps = (BasicProps & TextProp) | (BasicProps & AriaLabelProp);
+type Props<ElementProps, ElementName extends string> = ElementProps &
+  CommonProps<ElementName>;
 
-export type VisuallyButtonButton = CommonProps & ButtonHtmlProps;
-
-export type VisuallyButtonLink = CommonProps & LinkHtmlProps;
-
-// NOTE: If the element isn't `a` or `button` we don't restrict the type of the rest props
-type VisuallyButtonOther = CommonProps & {
-  [key: string]: unknown;
-};
+export type VisuallyButtonButton = Props<ButtonHtmlProps, 'button'>;
+export type VisuallyButtonDiv = Props<DivHtmlProps, 'div'>;
+export type VisuallyButtonLink = Props<LinkHtmlProps, 'a'> & { href: string };
 
 export type VisuallyButton =
-  | ({ elementName: 'button' } & VisuallyButtonButton)
-  | ({ elementName: 'a' } & VisuallyButtonLink)
-  | ({ elementName: string } & VisuallyButtonOther);
+  | VisuallyButtonButton
+  | VisuallyButtonDiv
+  | VisuallyButtonLink;