@hyphen/hyphen-components 2.9.0

package/src/components/Toggle/Toggle.mdx

@@ -0,0 +1,51 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import { Toggle } from './Toggle';
+import * as Stories from './Toggle.stories';
+
+<Meta of={Stories} />
+
+# Toggle
+
+A `Toggle` switch is like a digital on/off switch. They prompt users to choose between two mutually exclusive options and always have a default value.
+Toggles should provide immediate results and should not require the user to Save or Submit to apply the new state.
+
+<Canvas of={Stories.Overview} />
+
+## Props
+
+<ArgTypes of={Toggle} />
+
+### Basic Example
+
+<Canvas of={Stories.Basic} />
+
+### Help Text
+
+Use the `helpText` prop to add clarifying text beneath the toggle label.
+
+<Canvas of={Stories.HelpText} />
+
+### Hidden Label
+
+Use the `hideLabel` prop to not render the label, however a `label` is still required for accessability purposes.
+
+<Canvas of={Stories.HiddenLabel} />
+
+### Sizes
+
+Set the size of the `toggle` to `sm`, `md` or `lg`. `md` is the default size.
+The `size` prop is also a `ResponsiveProp`, so it can be sized differently at each [breakpoint](?path=/docs/design-tokens-design-tokens--page#breakpoints) by passing an object.
+
+<Canvas of={Stories.Sizes} />
+
+### Disabled
+
+Disable the toggle by setting the `isDisabled` prop.
+
+<Canvas of={Stories.Disabled} />
+
+## Error
+
+Use the `error` prop to mark the input as invalid. `error` accepts a `boolean`, `string`, or `node`. If either a `string` or `node` is passed, a validation message is displayed below it.
+
+<Canvas of={Stories.Error} />

package/src/components/Toggle/Toggle.module.scss

@@ -0,0 +1,294 @@
+@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+
+@mixin thumb-size-sm {
+  width: calc(var(--size-spacing-2xl) - 4px);
+  height: calc(var(--size-spacing-2xl) - 4px);
+}
+
+%thumb-size-sm {
+  @include thumb-size-sm;
+}
+
+.thumb-size-sm {
+  @extend %thumb-size-sm;
+}
+
+@mixin thumb-size-md {
+  width: calc(var(--size-spacing-3xl) - 4px);
+  height: calc(var(--size-spacing-3xl) - 4px);
+}
+
+%thumb-size-md {
+  @include thumb-size-md;
+}
+
+.thumb-size-md {
+  @extend %thumb-size-md;
+}
+
+@mixin thumb-size-lg {
+  width: calc(var(--size-spacing-4xl) - 4px);
+  height: calc(var(--size-spacing-4xl) - 4px);
+}
+
+%thumb-size-lg {
+  @include thumb-size-lg;
+}
+
+.thumb-size-lg {
+  @extend %thumb-size-lg;
+}
+
+@mixin track-size-sm {
+  min-width: 2rem;
+  width: 2rem;
+  height: var(--size-spacing-2xl);
+}
+
+%track-size-sm {
+  @include track-size-sm;
+}
+
+.track-size-sm {
+  @extend %track-size-sm;
+}
+
+@mixin track-size-md {
+  min-width: 2.5rem;
+  width: 2.5rem;
+  height: var(--size-spacing-3xl);
+}
+
+%track-size-md {
+  @include track-size-md;
+}
+
+.track-size-md {
+  @extend %track-size-md;
+}
+
+@mixin track-size-lg {
+  min-width: 3.5rem;
+  width: 3.5rem;
+  height: var(--size-spacing-4xl);
+}
+
+%track-size-lg {
+  @include track-size-lg;
+}
+
+.track-size-lg {
+  @extend %track-size-lg;
+}
+
+@media (min-width: $size-breakpoint-tablet) {
+  .thumb-size-sm-tablet {
+    @include thumb-size-sm;
+  }
+
+  .thumb-size-md-tablet {
+    @include thumb-size-md;
+  }
+
+  .thumb-size-lg-tablet {
+    @include thumb-size-lg;
+  }
+
+  .track-size-sm-tablet {
+    @include track-size-sm;
+  }
+
+  .track-size-md-tablet {
+    @include track-size-md;
+  }
+
+  .track-size-lg-tablet {
+    @include track-size-lg;
+  }
+}
+
+@media (min-width: $size-breakpoint-desktop) {
+  .thumb-size-sm-desktop {
+    @include thumb-size-sm;
+  }
+
+  .thumb-size-md-desktop {
+    @include thumb-size-md;
+  }
+
+  .thumb-size-lg-desktop {
+    @include thumb-size-lg;
+  }
+
+  .track-size-sm-desktop {
+    @include track-size-sm;
+  }
+
+  .track-size-md-desktop {
+    @include track-size-md;
+  }
+
+  .track-size-lg-desktop {
+    @include track-size-lg;
+  }
+}
+
+@media (min-width: $size-breakpoint-hd) {
+  .thumb-size-sm-hd {
+    @include thumb-size-sm;
+  }
+
+  .thumb-size-md-hd {
+    @include thumb-size-md;
+  }
+
+  .thumb-size-lg-hd {
+    @include thumb-size-lg;
+  }
+
+  .track-size-sm-hd {
+    @include track-size-sm;
+  }
+
+  .track-size-md-hd {
+    @include track-size-md;
+  }
+
+  .track-size-lg-hd {
+    @include track-size-lg;
+  }
+}
+
+.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.toggle-thumb {
+  display: block;
+  transition: transform 0.25s ease;
+  border-radius: 50%;
+  box-shadow: 0 0 2px rgb(0 0 0 / 45%);
+  background-color: var(--color-base-white);
+}
+
+.toggle-track {
+  display: block;
+  transition: background-color 0.25s ease;
+  border-radius: 9999em;
+  background-color: var(--toggle-background-color, var(--color-base-grey-200));
+  cursor: pointer;
+  padding: 2px;
+
+  &.error {
+    background-color: var(
+      --toggle-background-color-error,
+      var(--color-base-red-500)
+    );
+  }
+}
+
+//Hide the checkbox input (only needed for `:checked` property)
+.toggle-input {
+  position: absolute;
+  clip: rect(0, 0, 0, 0);
+  margin: -1px;
+  border: 0;
+  padding: 0;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+
+  &:checked + .toggle-track {
+    background-color: var(
+      --toggle-background-color-checked,
+      var(--color-base-green-500)
+    );
+  }
+
+  &:checked + .toggle-track.error {
+    background-color: var(
+      --toggle-background-color-error,
+      var(--color-base-red-500)
+    );
+  }
+
+  &:checked + .toggle-track .toggle-thumb.thumb-size-sm {
+    transform: translateX(0.75rem);
+  }
+
+  &:checked + .toggle-track .toggle-thumb.thumb-size-md {
+    transform: translateX(1rem);
+  }
+
+  &:checked + .toggle-track .toggle-thumb.thumb-size-lg {
+    transform: translateX(1.5rem);
+  }
+
+  @media (min-width: $size-breakpoint-tablet) {
+    &:checked + .toggle-track .toggle-thumb.thumb-size-sm-tablet {
+      transform: translateX(0.5rem);
+    }
+
+    &:checked + .toggle-track .toggle-thumb.thumb-size-md-tablet {
+      transform: translateX(1rem);
+    }
+
+    &:checked + .toggle-track .toggle-thumb.thumb-size-lg-tablet {
+      transform: translateX(1.5rem);
+    }
+  }
+
+  @media (min-width: $size-breakpoint-desktop) {
+    &:checked + .toggle-track .toggle-thumb.thumb-size-sm-desktop {
+      transform: translateX(0.5rem);
+    }
+
+    &:checked + .toggle-track .toggle-thumb.thumb-size-md-desktop {
+      transform: translateX(1rem);
+    }
+
+    &:checked + .toggle-track .toggle-thumb.thumb-size-lg-desktop {
+      transform: translateX(1.5rem);
+    }
+  }
+
+  @media (min-width: $size-breakpoint-hd) {
+    &:checked + .toggle-track .toggle-thumb.thumb-size-sm-hd {
+      transform: translateX(0.5rem);
+    }
+
+    &:checked + .toggle-track .toggle-thumb.thumb-size-md-hd {
+      transform: translateX(1rem);
+    }
+
+    &:checked + .toggle-track .toggle-thumb.thumb-size-lg-hd {
+      transform: translateX(1.5rem);
+    }
+  }
+
+  &:focus + .toggle-track {
+    outline: 0;
+    box-shadow: var(
+      --form-control-box-shadow-focus,
+      var(--INTERNAL_form-control-box-shadow-focus)
+    );
+  }
+
+  // Show focus styles on keyboard focus.
+  &:focus-visible + .toggle-track {
+    outline: 0;
+    box-shadow: var(
+      --form-control-box-shadow-focus,
+      var(--INTERNAL_form-control-box-shadow-focus)
+    );
+  }
+
+  // Hide focus styles if they are not needed, for example,
+  // when an element receives focus via the mouse.
+  &:focus:not(:focus-visible) + .toggle-track {
+    outline: 0;
+    box-shadow: none;
+  }
+}

package/src/components/Toggle/Toggle.stories.tsx

@@ -0,0 +1,128 @@
+import React, { useState } from 'react';
+
+import { Box } from '../Box/Box';
+import type { Meta } from '@storybook/react';
+import { Toggle } from './Toggle';
+
+const meta: Meta<typeof Toggle> = {
+  title: 'Components/Toggle',
+  component: Toggle,
+};
+
+export default meta;
+
+export const Overview = () => (
+  <Toggle id="example" label="toggle label" isChecked onChange={() => {}} />
+);
+
+export const Basic = () => {
+  const [value, setValue] = useState(false);
+  return (
+    <Toggle
+      id="defaultStateIsUnchecked"
+      label="toggle label"
+      onChange={(event) => setValue(event.target.checked)}
+      isChecked={value}
+    />
+  );
+};
+
+export const HelpText = () => {
+  const [value, setValue] = useState(false);
+  return (
+    <Toggle
+      id="helpText"
+      label="toggle label"
+      helpText="descriptive help text"
+      onChange={(event) => setValue(event.target.checked)}
+      isChecked={value}
+    />
+  );
+};
+
+export const HiddenLabel = () => {
+  const [value, setValue] = useState(false);
+  return (
+    <Toggle
+      id="hiddenLabelToggle"
+      label="Hidden Label"
+      helpText="hidden help text too"
+      hideLabel
+      onChange={(event) => setValue(event.target.checked)}
+      isChecked={value}
+    />
+  );
+};
+
+export const Sizes = () => {
+  const [value, setValue] = useState(true);
+  return (
+    <Box gap="md">
+      <Toggle
+        id="smToggle"
+        label="small toggle"
+        onChange={(event) => setValue(event.target.checked)}
+        isChecked={value}
+        size="sm"
+      />
+      <Toggle
+        id="mediumToggle"
+        label="medium toggle"
+        onChange={(event) => setValue(event.target.checked)}
+        isChecked={value}
+        size="md"
+      />
+      <Toggle
+        id="largeToggle"
+        label="large toggle"
+        onChange={(event) => setValue(event.target.checked)}
+        isChecked={value}
+        size="lg"
+      />
+      <Toggle
+        id="responsiveToggle"
+        label="responsive toggle"
+        onChange={(event) => setValue(event.target.checked)}
+        isChecked={value}
+        size={{ base: 'sm', tablet: 'md', desktop: 'lg', hd: 'sm' }}
+      />
+    </Box>
+  );
+};
+
+export const Disabled = () => {
+  const [value, setValue] = useState(false);
+  return (
+    <Toggle
+      id="disabledToggle"
+      label="Label"
+      onChange={(event) => setValue(event.target.checked)}
+      isChecked={value}
+      isDisabled
+    />
+  );
+};
+
+export const Error = () => {
+  const [value, setValue] = useState(false);
+  const [value2, setValue2] = useState(true);
+  return (
+    <Box gap="md">
+      <Toggle
+        id="invalidToggle"
+        label="Agree to Terms and Conditions"
+        isChecked={value}
+        onChange={(event) => setValue(event.target.checked)}
+        isRequired
+        error="You must accept the Terms and Conditions"
+      />
+      <Toggle
+        id="invalidToggle2"
+        label="Roof Replacement"
+        isChecked={value2}
+        onChange={(event) => setValue2(event.target.checked)}
+        error="Site Improvements can not be present with PPA"
+      />
+    </Box>
+  );
+};