@hyphen/hyphen-components 4.13.0 → 5.1.0

package/src/components/Switch/Switch.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;
+}
+
+.switch-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);
+}
+
+.switch-track {
+  display: block;
+  transition: background-color 0.25s ease;
+  border-radius: 9999em;
+  background-color: var(--switch-background-color, var(--color-base-grey-200));
+  cursor: pointer;
+  padding: 2px;
+
+  &.error {
+    background-color: var(
+      --switch-background-color-error,
+      var(--color-base-red-500)
+    );
+  }
+}
+
+//Hide the checkbox input (only needed for `:checked` property)
+.switch-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 + .switch-track {
+    background-color: var(
+      --switch-background-color-checked,
+      var(--color-base-green-500)
+    );
+  }
+
+  &:checked + .switch-track.error {
+    background-color: var(
+      --switch-background-color-error,
+      var(--color-base-red-500)
+    );
+  }
+
+  &:checked + .switch-track .switch-thumb.thumb-size-sm {
+    transform: translateX(0.75rem);
+  }
+
+  &:checked + .switch-track .switch-thumb.thumb-size-md {
+    transform: translateX(1rem);
+  }
+
+  &:checked + .switch-track .switch-thumb.thumb-size-lg {
+    transform: translateX(1.5rem);
+  }
+
+  @media (min-width: $size-breakpoint-tablet) {
+    &:checked + .switch-track .switch-thumb.thumb-size-sm-tablet {
+      transform: translateX(0.5rem);
+    }
+
+    &:checked + .switch-track .switch-thumb.thumb-size-md-tablet {
+      transform: translateX(1rem);
+    }
+
+    &:checked + .switch-track .switch-thumb.thumb-size-lg-tablet {
+      transform: translateX(1.5rem);
+    }
+  }
+
+  @media (min-width: $size-breakpoint-desktop) {
+    &:checked + .switch-track .switch-thumb.thumb-size-sm-desktop {
+      transform: translateX(0.5rem);
+    }
+
+    &:checked + .switch-track .switch-thumb.thumb-size-md-desktop {
+      transform: translateX(1rem);
+    }
+
+    &:checked + .switch-track .switch-thumb.thumb-size-lg-desktop {
+      transform: translateX(1.5rem);
+    }
+  }
+
+  @media (min-width: $size-breakpoint-hd) {
+    &:checked + .switch-track .switch-thumb.thumb-size-sm-hd {
+      transform: translateX(0.5rem);
+    }
+
+    &:checked + .switch-track .switch-thumb.thumb-size-md-hd {
+      transform: translateX(1rem);
+    }
+
+    &:checked + .switch-track .switch-thumb.thumb-size-lg-hd {
+      transform: translateX(1.5rem);
+    }
+  }
+
+  &:focus + .switch-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 + .switch-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) + .switch-track {
+    outline: 0;
+    box-shadow: none;
+  }
+}

package/src/components/Switch/Switch.stories.tsx

@@ -0,0 +1,128 @@
+import React, { useState } from 'react';
+
+import { Box } from '../Box/Box';
+import type { Meta } from '@storybook/react';
+import { Switch } from './Switch';
+
+const meta: Meta<typeof Switch> = {
+  title: 'Components/Switch',
+  component: Switch,
+};
+
+export default meta;
+
+export const Overview = () => (
+  <Switch id="example" label="Switch label" isChecked onChange={() => {}} />
+);
+
+export const Basic = () => {
+  const [value, setValue] = useState(false);
+  return (
+    <Switch
+      id="defaultStateIsUnchecked"
+      label="Switch label"
+      onChange={(event) => setValue(event.target.checked)}
+      isChecked={value}
+    />
+  );
+};
+
+export const HelpText = () => {
+  const [value, setValue] = useState(false);
+  return (
+    <Switch
+      id="helpText"
+      label="Switch label"
+      helpText="descriptive help text"
+      onChange={(event) => setValue(event.target.checked)}
+      isChecked={value}
+    />
+  );
+};
+
+export const HiddenLabel = () => {
+  const [value, setValue] = useState(false);
+  return (
+    <Switch
+      id="hiddenLabelSwitch"
+      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">
+      <Switch
+        id="smSwitch"
+        label="small Switch"
+        onChange={(event) => setValue(event.target.checked)}
+        isChecked={value}
+        size="sm"
+      />
+      <Switch
+        id="mediumSwitch"
+        label="medium Switch"
+        onChange={(event) => setValue(event.target.checked)}
+        isChecked={value}
+        size="md"
+      />
+      <Switch
+        id="largeSwitch"
+        label="large Switch"
+        onChange={(event) => setValue(event.target.checked)}
+        isChecked={value}
+        size="lg"
+      />
+      <Switch
+        id="responsiveSwitch"
+        label="responsive Switch"
+        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 (
+    <Switch
+      id="disabledSwitch"
+      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">
+      <Switch
+        id="invalidSwitch"
+        label="Agree to Terms and Conditions"
+        isChecked={value}
+        onChange={(event) => setValue(event.target.checked)}
+        isRequired
+        error="You must accept the Terms and Conditions"
+      />
+      <Switch
+        id="invalidSwitch2"
+        label="Roof Replacement"
+        isChecked={value2}
+        onChange={(event) => setValue2(event.target.checked)}
+        error="Site Improvements can not be present with PPA"
+      />
+    </Box>
+  );
+};