Switch component

lib/src/components/Switch/README.md

@@ -0,0 +1,48 @@
+# Documentation
+
+# Switch
+
+### Quick start
+
+Here's a quick start guide to get started with the button component
+
+| Attributes |                     Values                      | Optional ? |
+| :--------- | :---------------------------------------------: | ---------: |
+| status     |                    `boolean`                    |         No |
+| onChange   | `React.Dispatch<React.SetStateAction<boolean>>` |         No |
+| isDisabled |                    `boolean`                    |        Yes |
+
+### Code Snippets and Examples
+
+##### Toggle switch
+
+```html
+<div className="App">
+  <Switch status={stateVariable} onChange={setStateVariable} />
+</div>
+```
+
+##### Toggle switch off state
+
+![Switch](https://i.imgur.com/jeJP03s.png)
+
+##### Toggle switch on state
+
+![Switch](https://i.imgur.com/vFgYBym.png)
+
+---
+
+##### Disabled switch
+
+```html
+<div className="App">
+  <Switch status={stateVariable} onChange={setStateVariable} isDisabled={true}/>
+</div>
+```
+##### Disabled switch off state
+
+![Switch](https://i.imgur.com/XNRGr2e.png)
+
+##### Disabled switch on state
+
+![Switch](https://i.imgur.com/Ffyalpo.png)

lib/src/components/Switch/Switch.tsx

@@ -0,0 +1,22 @@
+import { slider, switchInputStyle, switchLayout } from "./switch.css";
+import { ISwitchProps } from "./switch.types";
+import "./switch-global-styles.css";
+
+export const Switch = ({
+  status,
+  onChange,
+  isDisabled = false,
+}: ISwitchProps) => {
+  return (
+    <label className={switchLayout}>
+      <input
+        className={switchInputStyle}
+        type="checkbox"
+        checked={status}
+        onChange={(e) => onChange(e.target.checked)}
+        disabled={isDisabled}
+      />
+      <span className={slider} />
+    </label>
+  );
+};

lib/src/components/Switch/index.ts

@@ -0,0 +1,2 @@
+export * from "./Switch"
+export * from "./switch.css"

lib/src/components/Switch/switch-global-styles.css.ts

@@ -0,0 +1,21 @@
+import { globalStyle } from "@vanilla-extract/css";
+import { switchInputStyle, slider } from "src/components/Switch";
+
+globalStyle(`${switchInputStyle}:checked + ${slider}`, {
+  background: "#1AB5EB",
+  border: `1px solid #1AB5EB`,
+});
+
+globalStyle(`${switchInputStyle}:checked + ${slider}:before`, {
+  backgroundColor: "white",
+  transform: "translateX(24px)",
+});
+
+globalStyle(`${switchInputStyle}:disabled + ${slider}`, {
+  backgroundColor: "#eee",
+  border: `1px solid #ddd`,
+});
+
+globalStyle(`${switchInputStyle}:disabled + ${slider}:before`, {
+  backgroundColor: "#ddd",
+});

lib/src/components/Switch/switch.css.ts

@@ -0,0 +1,39 @@
+import { style } from "@vanilla-extract/css";
+
+export const switchLayout = style({
+  position: "relative",
+  display: "inline-block",
+  width: "52px",
+  height: "28px",
+});
+
+export const switchInputStyle = style({
+  width: 0,
+  height: 0,
+  opacity: 0,
+});
+
+export const slider = style({
+  position: "absolute",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  border: `1px solid #DDD`,
+  borderRadius: "34px",
+  transition: "0.3s",
+  cursor: "pointer",
+  selectors: {
+    "&:before": {
+      content: "",
+      borderRadius: "50%",
+      position: "absolute",
+      height: "24px",
+      width: "24px",
+      left: "1px",
+      bottom: "1px",
+      transition: "0.3s",
+      backgroundColor: "#DDD",
+    },
+  },
+});

lib/src/components/Switch/switch.types.ts

@@ -0,0 +1,5 @@
+export interface ISwitchProps {
+  status: boolean;
+  onChange: React.Dispatch<React.SetStateAction<boolean>>;
+  isDisabled?: boolean;
+}