feat(Buttons): Leading + trailing icons

Adds standardized leading and trailing icons to our Fill, Stroke, and TextButtons.

packages/gamut/src/Button/CTAButton.tsx

@@ -1,5 +1,5 @@
-import { createButtonComponent } from './shared';
-import { ctaButtonVariants } from './variants';
+import { createButtonComponent } from './shared/styles';
+import { ctaButtonVariants } from './shared/variants';
 
 export const CTAButton = createButtonComponent<{ variant?: 'primary' }>(
   ctaButtonVariants

packages/gamut/src/Button/FillButton.tsx

@@ -1,7 +1,20 @@
-import { createButtonComponent } from './shared';
-import { fillButtonVariants, sizeVariants } from './variants';
+import { forwardRef } from 'react';
 
-export const FillButton = createButtonComponent(
+import { ButtonBaseElements } from '../ButtonBase/ButtonBase';
+import {
+  createButtonComponent,
+  fillButtonVariants,
+  InlineIconButton,
+  InlineIconButtonProps,
   sizeVariants,
-  fillButtonVariants
+} from './shared';
+
+const FillButtonBase = createButtonComponent(sizeVariants, fillButtonVariants);
+
+export type FillButtonProps = InlineIconButtonProps<typeof FillButtonBase>;
+
+export const FillButton = forwardRef<ButtonBaseElements, FillButtonProps>(
+  ({ ...props }, ref) => {
+    return <InlineIconButton button={FillButtonBase} {...props} ref={ref} />;
+  }
 );

packages/gamut/src/Button/IconButton.tsx

@@ -1,24 +1,27 @@
-import { GamutIconProps } from '@codecademy/gamut-icons';
 import { ComponentProps, forwardRef } from 'react';
 
 import { ButtonBaseElements } from '../ButtonBase/ButtonBase';
-import { createButtonComponent } from './shared';
-import { iconSizeVariants, textButtonVariants } from './variants';
+import {
+  createButtonComponent,
+  IconComponentType,
+  iconSizeVariants,
+  textButtonVariants,
+} from './shared';
 
-const IconButtonInner = createButtonComponent(
+const IconButtonBase = createButtonComponent(
   iconSizeVariants,
   textButtonVariants
 );
 
-export type IconButtonProps = ComponentProps<typeof IconButtonInner> & {
-  'aria-label': string;
-  icon: React.ComponentType<GamutIconProps>;
-};
+export type IconButtonProps = ComponentProps<typeof IconButtonBase> &
+  IconComponentType & {
+    'aria-label': string;
+  };
 
 export const IconButton = forwardRef<ButtonBaseElements, IconButtonProps>(
   ({ children, icon: Icon, variant = 'secondary', ...props }, ref) => {
     return (
-      <IconButtonInner {...props} variant={variant} ref={ref}>
+      <IconButtonBase {...props} variant={variant} ref={ref}>
         {Icon && (
           <Icon
             width="calc(100% - 14px)"
@@ -27,7 +30,7 @@ export const IconButton = forwardRef<ButtonBaseElements, IconButtonProps>(
           />
         )}
         {children}
-      </IconButtonInner>
+      </IconButtonBase>
     );
   }
 );

packages/gamut/src/Button/StrokeButton.tsx

@@ -1,7 +1,23 @@
-import { createButtonComponent } from './shared';
-import { sizeVariants, strokeButtonVariants } from './variants';
+import { forwardRef } from 'react';
 
-export const StrokeButton = createButtonComponent(
+import { ButtonBaseElements } from '../ButtonBase/ButtonBase';
+import {
+  createButtonComponent,
+  InlineIconButton,
+  InlineIconButtonProps,
+  sizeVariants,
+  strokeButtonVariants,
+} from './shared';
+
+const StrokeButtonBase = createButtonComponent(
   sizeVariants,
   strokeButtonVariants
 );
+
+export type StrokeButtonProps = InlineIconButtonProps<typeof StrokeButtonBase>;
+
+export const StrokeButton = forwardRef<ButtonBaseElements, StrokeButtonProps>(
+  ({ ...props }, ref) => {
+    return <InlineIconButton button={StrokeButtonBase} {...props} ref={ref} />;
+  }
+);

packages/gamut/src/Button/TextButton.tsx

@@ -1,7 +1,20 @@
-import { createButtonComponent } from './shared';
-import { sizeVariants, textButtonVariants } from './variants';
+import { forwardRef } from 'react';
 
-export const TextButton = createButtonComponent(
+import { ButtonBaseElements } from '../ButtonBase/ButtonBase';
+import {
+  createButtonComponent,
+  InlineIconButton,
+  InlineIconButtonProps,
+  sizeVariants,
   textButtonVariants,
-  sizeVariants
+} from './shared';
+
+const TextButtonBase = createButtonComponent(textButtonVariants, sizeVariants);
+
+export type TextButtonProps = InlineIconButtonProps<typeof TextButtonBase>;
+
+export const TextButton = forwardRef<ButtonBaseElements, TextButtonProps>(
+  ({ ...props }, ref) => {
+    return <InlineIconButton button={TextButtonBase} {...props} ref={ref} />;
+  }
 );

packages/gamut/src/Button/__tests__/TextButton.test.tsx

@@ -0,0 +1,34 @@
+import { StarIcon } from '@codecademy/gamut-icons';
+import { fireEvent } from '@testing-library/react';
+import { setupRtl } from 'component-test-setup';
+
+import { TextButton } from '../TextButton';
+
+const onClick = jest.fn();
+
+const renderView = setupRtl(TextButton, {
+  children: 'Click me!',
+  onClick,
+});
+
+describe('TextButton', () => {
+  it('renders a clickable button', () => {
+    const { view } = renderView();
+
+    const cta = view.getByRole('button', { name: 'Click me!' });
+
+    fireEvent.click(cta);
+
+    expect(onClick).toHaveBeenCalled();
+  });
+  it('renders an leading icon when an icon is provided', () => {
+    const { view } = renderView({ icon: StarIcon });
+
+    view.getByTitle('Star Icon');
+  });
+  it('renders an icon when an icon is provided', () => {
+    const { view } = renderView({ icon: StarIcon });
+
+    view.getByTitle('Star Icon');
+  });
+});

packages/gamut/src/Button/shared/InlineIconButton.tsx

@@ -0,0 +1,65 @@
+import { forwardRef } from 'react';
+
+import { FlexBox } from '../../Box';
+import { ButtonBaseElements } from '../../ButtonBase/ButtonBase';
+import { FillButtonProps } from '../FillButton';
+import { StrokeButtonProps } from '../StrokeButton';
+import { TextButtonProps } from '../TextButton';
+
+type InlineIconButtonComponents =
+  | FillButtonProps
+  | StrokeButtonProps
+  | TextButtonProps;
+
+type InlineIconButtonType = InlineIconButtonComponents & {
+  button: React.ComponentType<InlineIconButtonComponents>;
+};
+
+const getButtonContent = ({
+  iconPosition,
+  icon: Icon,
+  children,
+}: Pick<InlineIconButtonType, 'iconPosition' | 'icon' | 'children'>) => {
+  const iconSpacing = iconPosition === 'left' ? 'mr' : 'ml';
+  const iconPositioning = iconPosition === 'left' ? 0 : 1;
+
+  const iconProps = {
+    'aria-hidden': true,
+    size: 12,
+    [iconSpacing]: 8,
+    order: iconPositioning,
+  } as const;
+
+  return !Icon ? (
+    <>{children}</>
+  ) : (
+    <FlexBox center height="100%">
+      {Icon && <Icon {...iconProps} />}
+      {children}
+    </FlexBox>
+  );
+};
+
+export const InlineIconButton = forwardRef<
+  ButtonBaseElements,
+  InlineIconButtonType
+>(
+  (
+    {
+      children,
+      button: Button,
+      icon,
+      iconPosition = 'left',
+      variant,
+      ...props
+    },
+    ref
+  ) => {
+    const content = getButtonContent({ iconPosition, icon, children });
+    return (
+      <Button {...props} variant={variant} ref={ref}>
+        {content}
+      </Button>
+    );
+  }
+);

packages/gamut/src/Button/shared/index.ts

@@ -0,0 +1,4 @@
+export * from './InlineIconButton';
+export * from './styles';
+export * from './types';
+export * from './variants';

packages/gamut/src/Button/shared.ts → packages/gamut/src/Button/shared/styles.ts

@@ -1,26 +1,15 @@
 import {
-  ColorModes,
   fontSmoothPixel,
   modeColorProps,
   styledOptions,
   system,
   transitionConcat,
 } from '@codecademy/gamut-styles';
-import {
-  CSSObject,
-  StyleProps,
-  ThemeProps,
-  variance,
-} from '@codecademy/variance';
+import { CSSObject, ThemeProps, variance } from '@codecademy/variance';
 import styled from '@emotion/styled';
-import { ComponentProps, HTMLProps } from 'react';
 
-import { ButtonBase, ButtonSelectors } from '../ButtonBase/ButtonBase';
-import { CTAButton } from './CTAButton';
-import { FillButton } from './FillButton';
-import { IconButton } from './IconButton';
-import { StrokeButton } from './StrokeButton';
-import { TextButton } from './TextButton';
+import { ButtonBase, ButtonSelectors } from '../../ButtonBase/ButtonBase';
+import { ButtonBaseProps } from './types';
 
 export const config = styledOptions<'button', 'size'>(['size']);
 
@@ -104,16 +93,6 @@ export const buttonStyles = system.css({
   },
 });
 
-export interface ButtonBaseProps extends StyleProps<typeof buttonProps> {
-  onClick?: HTMLProps<HTMLButtonElement>['onClick'];
-  variant?: typeof buttonVariants[number];
-  size?: 'normal' | 'small' | 'large';
-  as?: never;
-  mode?: ColorModes;
-}
-
-export type ButtonProps = ButtonBaseProps & ComponentProps<typeof ButtonBase>;
-
 export const createButtonComponent = <P>(
   ...args: (<T extends ThemeProps>(props: T) => CSSObject)[]
 ) =>
@@ -124,10 +103,3 @@ export const createButtonComponent = <P>(
     ...args,
     buttonProps
   );
-
-export type ButtonTypes =
-  | typeof CTAButton
-  | typeof FillButton
-  | typeof IconButton
-  | typeof StrokeButton
-  | typeof TextButton;

packages/gamut/src/Button/shared/types.ts

@@ -0,0 +1,39 @@
+import { GamutIconProps } from '@codecademy/gamut-icons';
+import { ColorModes } from '@codecademy/gamut-styles';
+import { StyleProps } from '@codecademy/variance';
+import { ComponentProps, HTMLProps } from 'react';
+
+import { ButtonBase } from '../../ButtonBase';
+import { CTAButton } from '../CTAButton';
+import { FillButton } from '../FillButton';
+import { IconButton } from '../IconButton';
+import { StrokeButton } from '../StrokeButton';
+import { TextButton } from '../TextButton';
+import { buttonProps, buttonVariants } from './styles';
+
+export interface ButtonBaseProps extends StyleProps<typeof buttonProps> {
+  onClick?: HTMLProps<HTMLButtonElement>['onClick'];
+  variant?: typeof buttonVariants[number];
+  size?: 'normal' | 'small' | 'large';
+  as?: never;
+  mode?: ColorModes;
+}
+
+export type ButtonProps = ButtonBaseProps & ComponentProps<typeof ButtonBase>;
+export type IconComponentType = { icon: React.ComponentType<GamutIconProps> };
+
+export type InlineIconButtonProps<
+  BaseButtonType extends
+    | keyof JSX.IntrinsicElements
+    | React.JSXElementConstructor<any>
+> = ComponentProps<BaseButtonType> &
+  Partial<IconComponentType> & {
+    iconPosition?: 'right' | 'left';
+  };
+
+export type ButtonTypes =
+  | typeof CTAButton
+  | typeof FillButton
+  | typeof IconButton
+  | typeof StrokeButton
+  | typeof TextButton;

packages/gamut/src/Button/variants.ts → packages/gamut/src/Button/shared/variants.ts

@@ -1,7 +1,7 @@
 import { theme, variant } from '@codecademy/gamut-styles';
 
-import { ButtonSelectors } from '../ButtonBase/ButtonBase';
-import { buttonVariants, templateVariants } from './shared';
+import { ButtonSelectors } from '../../ButtonBase/ButtonBase';
+import { buttonVariants, templateVariants } from './styles';
 
 export const fillButtonVariants = templateVariants(
   buttonVariants,

packages/gamut/src/GridForm/GridForm.tsx

@@ -7,7 +7,7 @@ import {
   UnpackNestedValue,
 } from 'react-hook-form';
 
-import { ButtonProps } from '../Button/shared';
+import { ButtonProps } from '../Button';
 import { ConnectedForm, FormContextProps } from '../ConnectedForm';
 import { FormValues } from '../Form/types';
 import { LayoutGrid, LayoutGridProps } from '../Layout';

packages/gamut/src/GridForm/GridFormButtons/index.tsx

@@ -3,8 +3,7 @@ import { ComponentProps } from 'react';
 import * as React from 'react';
 
 import { GridBox } from '../../Box';
-import { CTAButton, FillButton, TextButton } from '../../Button';
-import { ButtonProps } from '../../Button/shared';
+import { ButtonProps, CTAButton, FillButton, TextButton } from '../../Button';
 import { SubmitButton, SubmitButtonProps } from '../../ConnectedForm';
 import { Column } from '../../Layout';
 

packages/gamut/src/Pagination/styles.tsx

@@ -1,6 +1,6 @@
 import { states, theme, transitionConcat } from '@codecademy/gamut-styles';
 
-import { templateVariants } from '../Button/shared';
+import { templateVariants } from '../Button/shared/styles';
 import { ButtonSelectors } from '../ButtonBase/ButtonBase';
 
 const paginationBaseStyles = {