Investec Design System Coding Challenge - Toggle Button

This project implements the "Toggle Button" component from the provided Figma design as part of an application for the Design System Engineer role at Investec.

Project Overview

links

• Figma Design: Link to Figma file
• Live Demo: Link to Chromatic

Technical Decisions

• Framework: Next.js was chosen for its performance optimizations, server-side rendering capabilities, and strong typing support with TypeScript. These features are beneficial for building scalable and maintainable design systems.
• Component Design: The ToggleSwitch component is designed for reusability and theming. It accepts props to control its state and appearance, allowing for easy integration within a larger design system.
• TypeScript: TypeScript ensures type safety and improves code maintainability.
• Accessibility: The component adheres to accessibility best practices, including keyboard navigation and ARIA attributes, to ensure it is usable by everyone.

ToggleSwitch Component

The ToggleSwitch component is a customizable UI element that provides a toggleable switch control with various styling and functionality options.

Accessibility Features

ARIA Attributes

• role="switch": Identifies the component as a toggle switch
• aria-checked: Reflects the current state
• aria-label: Provides accessible name
• aria-describedby: Links to description element
• aria-controls: Indicates what element this switch controls

Keyboard Navigation

• Added onKeyDown handler for Enter and Space keys
• Proper tabIndex management

Focus Management

• Disabled elements are removed from tab order (tabIndex={-1})
• Default tabIndex={0} for enabled elements

Documentation

This component includes comprehensive documentation covering:

• Basic usage
• Available props
• Different variants and options

Getting Started

Running the Project

1. Clone the repository:

git clone [repository URL]

2. Install dependencies:

yarn install

3. Start the development server:

yarn dev

4. View the component in Storybook:

yarn storybook

Code Example

// Simplified example of the component
function ToggleSwitch(props: ToggleSwitchProps): React.ReactElement {
  return (
    <button 
      className={getToggleClasses(options, isChecked ?? false) + " " + toggleClasses.outerSize[options.size ?? "sm"]}
      onClick={handleClick}
      disabled={options.disabled}
    >
      {(options.iconOnly || options.leadingIcon) && renderIcon()} 
      {!options.iconOnly && (
        <span className={[
          toggleClasses.innerSize[options.size ?? "sm"],
          options.leadingIcon && "ml-2", 
          options.trailingIcon && "mr-2", 
        ].filter(Boolean).join(" ")}>
          {options.label} 
        </span>
      )}
      {options.trailingIcon && renderIcon()} 
    </button>
  );
}

Usage Example

<div className="flex flex-row gap-8 row-start-2 items-center sm:items-center">
  <ToggleSwitch iconOnly />
  <ToggleSwitch label="Create" trailingIcon isChevron size="sm" />
  <ToggleSwitch label="Filter" trailingIcon isChevron size="md" />
  <ToggleSwitch label="Export" trailingIcon isChevron size="lg" />
  <ToggleSwitch label="Sort" leadingIcon isChevron disabled={true} />
  <ToggleSwitch
    appearance="subtle"
    label="Subtle"
    trailingIcon
    isChevron
  />
</div>

Development Scripts

Run Solution Locally

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Run Storybook Instance

npm run storybook
# or
yarn storybook
# or
pnpm storybook
# or
bun storybook