Add Switch component (#377)

Co-authored-by: Evan Sosenko <[email protected]>
Co-authored-by: Seam Bot <[email protected]>

Author: 3 people

src/lib/ui/Switch/Switch.stories.tsx

@@ -0,0 +1,36 @@
+import { useArgs } from '@storybook/preview-api'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Switch from './Switch.js'
+
+const meta: Meta<typeof Switch> = {
+  title: 'Library/Switch',
+  tags: ['autodocs'],
+  component: Switch,
+}
+
+type Story = StoryObj<typeof Switch>
+
+export const Content: Story = {
+  render: (props) => {
+    const [, setArgs] = useArgs()
+
+    const onChange = (checked: boolean): void => {
+      setArgs({ checked })
+    }
+
+    return (
+      <Switch
+        enableLabel={props.enableLabel}
+        checked={props.checked}
+        onChange={onChange}
+      />
+    )
+  },
+}
+
+Content.args = {
+  checked: false,
+}
+
+export default meta

src/lib/ui/Switch/Switch.tsx

@@ -0,0 +1,38 @@
+import classNames from 'classnames'
+
+export interface SwitchProps {
+  checked: boolean
+  onChange: (checked: boolean) => void
+  enableLabel?: boolean
+}
+
+function Switch({
+  checked,
+  onChange,
+  enableLabel = false,
+}: SwitchProps): JSX.Element {
+  return (
+    <div className='seam-switch-container'>
+      {enableLabel && (
+        <label className='seam-switch-label'>{checked ? t.on : t.off}</label>
+      )}
+      <div
+        className={classNames('seam-switch', {
+          'seam-switch-checked': checked,
+        })}
+        onClick={() => {
+          onChange(!checked)
+        }}
+      >
+        <div className='seam-switch-slider' />
+      </div>
+    </div>
+  )
+}
+
+const t = {
+  on: 'On',
+  off: 'Off',
+}
+
+export default Switch

src/styles/_main.scss

@@ -20,6 +20,7 @@
 @use './thermostat';
 @use './tooltip';
 @use './seam-table';
+@use './switch';
 
 .seam-components {
   // Reset
@@ -38,6 +39,7 @@
   @include checkbox.all;
   @include radio-field.all;
   @include tooltip.all;
+  @include switch.all;
 
   // Components
   @include device-details.all;

src/styles/_switch.scss

@@ -0,0 +1,53 @@
+@use './colors';
+
+@mixin all {
+  .seam-switch-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .seam-switch-label {
+      font-style: normal;
+      font-weight: 400;
+      line-height: 118%;
+      font-size: 14px;
+      color: colors.$text-gray-2-5;
+    }
+
+    .seam-switch {
+      position: relative;
+      cursor: pointer;
+
+      .seam-switch-slider::before {
+        position: absolute;
+        content: '';
+        height: 20px;
+        width: 20px;
+        left: 0;
+        bottom: -3px;
+        background-color: colors.$bg-aa;
+        transition: 0.4s;
+        border-radius: 50%;
+        filter: drop-shadow(0 1px 4px rgb(0 0 0 / 25%));
+      }
+
+      .seam-switch-slider {
+        inset: 0;
+        width: 34px;
+        height: 14px;
+        background-color: #ccc;
+        transition: 0.4s;
+        border-radius: 20px;
+      }
+
+      &.seam-switch-checked .seam-switch-slider::before {
+        transform: translateX(14px);
+        background-color: colors.$primary;
+      }
+
+      &.seam-switch-checked .seam-switch-slider {
+        background-color: colors.$primary-dim;
+      }
+    }
+  }
+}