Merge pull request #67 from MacPaw/feat/switch-component

feat: ⚡ add new Switch component to ui-kit

README.md

@@ -1,30 +1,44 @@
 # macpaw-ui
 
+## Installation
+
+Install with npm:
+
+```bash
+npm install --save @macpaw/macpaw-ui
+```
+
+or with yarn:
+
+```bash
+    yarn add @macpaw/macpaw-ui
+```
+
 ## Adding new Component
 
-* Add Component's JSX and styles to [src/%ComponentName%](/src) directory
-* Import Component's JS, styles to [ui.js](/src/ui.js) and [ui.scss](/src/ui.scss) correspondingly
-* Add document page in `/pages/%component-name%.mdx`
+- Add Component's JSX and styles to [src/%ComponentName%](/src) directory
+- Import Component's JS, styles to [ui.js](/src/ui.js) and [ui.scss](/src/ui.scss) correspondingly
+- Add document page in `/pages/%component-name%.mdx`
 
 ## Adding new Icons
 
-* All common icons should have size 24x24px and dynamic (not hard-coded) `fill` attribute (so it can be changed / overridden later is CSS or React component)
-* Add new SVG file icon to `src/Icons/svg/%name%_icon.svg`
-* Run `yarn icons` CLI command
+- All common icons should have size 24x24px and dynamic (not hard-coded) `fill` attribute (so it can be changed / overridden later is CSS or React component)
+- Add new SVG file icon to `src/Icons/svg/%name%_icon.svg`
+- Run `yarn icons` CLI command
 
 ## Requirements
 
-* Node 16+
-* npm 7+ (lock file v2)
+- Node 16+
+- npm 7+ (lock file v2)
 
 ## Release
 
 Package published with Github Actions:
 
-* Update version in [package.json](package.json) file
-* Create new release at Github
+- Update version in [package.json](package.json) file
+- Create new release at Github
 
 ## Host
 
-* run `yarn build`
-* serve `out` directory as public
+- run `yarn build`
+- serve `out` directory as public

internal/Navigation/Navigation.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Link from 'next/link'
+import Link from 'next/link';
 import styles from './Navigation.module.css';
 
 const pages = [
@@ -23,12 +23,13 @@ const pages = [
   'payment',
   'radio',
   'select',
+  'switch',
   'tag',
   'tag-input',
   'table',
   'tooltip',
   'typography',
-]
+];
 
 const Navigation = () => (
   <div className={styles.navigation}>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macpaw/macpaw-ui",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "main": "lib/ui.js",
   "scripts": {
     "dev": "next -p 1234",

pages/switch.mdx

@@ -0,0 +1,55 @@
+import { Switch, FormRow } from '../src/ui';
+
+# Switch
+
+<FormRow variety>
+  <h3>Default</h3>
+  <Switch />
+</FormRow>
+
+<FormRow variety>
+  <h3>Disabled</h3>
+  <Switch disabled />
+</FormRow>
+
+<FormRow variety>
+  <h3>Error</h3>
+  <Switch error>Some label</Switch>
+</FormRow>
+
+<FormRow variety>
+  <h3>With handler</h3>
+  <Switch onChange={() => alert('Value is change')} />
+</FormRow>
+
+<FormRow variety>
+  <h3>With Label</h3>
+  <Switch>change settings</Switch>
+</FormRow>
+
+```
+<FormRow variety>
+  <h3>Default</h3>
+  <Switch />
+</FormRow>
+
+<FormRow variety>
+  <h3>Disabled</h3>
+  <Switch disabled />
+</FormRow>
+
+<FormRow variety>
+  <h3>Error</h3>
+  <Switch error />
+</FormRow>
+
+<FormRow variety>
+  <h3>With handler</h3>
+  <Switch onChange={() => alert('Value is change')} />
+</FormRow>
+
+<FormRow variety>
+  <h3>With Label</h3>
+  <Switch>change settings</Switch>
+</FormRow>
+```

src/Input/Input.tsx

@@ -62,7 +62,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
   const inputClassNames = cx(className, {
     '-with-action': action,
     '-with-currency': currency,
-    '-with-icon': icon
+    '-with-icon': icon,
   });
 
   const componentProps: any = {

src/Switch/Switch.scss

@@ -0,0 +1,72 @@
+.switch {
+  display: inline-flex;
+  position: relative;
+  user-select: none;
+  align-items: center;
+
+  &.-error {
+    color: var(--color-error);
+
+    .switch-track {
+      box-shadow: 0 0 0 2px var(--color-error);
+    }
+  }
+
+  input {
+    position: absolute;
+    opacity: 0;
+    z-index: 1;
+    cursor: pointer;
+    width: 106%;
+    height: 106%;
+    margin: 0;
+    left: -3%;
+    top: -3%;
+
+    &:checked + .switch-track {
+      background-color: var(--color-primary);
+    }
+
+    &:checked + .switch-track .switch-thumb {
+      transform: translateX(16px);
+    }
+
+    &:focus + .switch-track {
+      border-color: var(--color-secondary);
+      box-shadow: 0 0 0 3px var(--color-outline);
+    }
+
+    &[disabled] {
+      cursor: not-allowed;
+    }
+
+    &[disabled] + .switch-track {
+      background-color: var(--color-black-16);
+    }
+  }
+
+  .switch-track {
+    width: 32px;
+    height: 16px;
+    border-radius: 10px;
+    background-color: var(--color-black-16);
+    position: relative;
+    display: inline-flex;
+    transition: 0.1s background-color ease-in-out;
+
+    & + * {
+      margin-left: 8px;
+    }
+  }
+
+  .switch-thumb {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: var(--color-white);
+    display: inline-flex;
+    margin: 2px;
+    transform: translateX(0);
+    transition: 0.1s transform ease-in-out;
+  }
+}

src/Switch/Switch.tsx

@@ -0,0 +1,22 @@
+import React, { FC, InputHTMLAttributes, PropsWithChildren } from 'react';
+import cx from 'clsx';
+
+export interface SwitchProps extends InputHTMLAttributes<HTMLInputElement> {
+  error?: boolean;
+}
+
+const Switch: FC<PropsWithChildren<SwitchProps>> = (props) => {
+  const { className, style, children, error, ...other } = props;
+
+  return (
+    <span className={cx('switch', className, error && '-error')} style={style}>
+      <input type="checkbox" {...other} />
+      <span className="switch-track">
+        <span className="switch-thumb" />
+      </span>
+      {!!children && <span>{children}</span>}
+    </span>
+  );
+};
+
+export default Switch;

src/Tag/Tag.tsx

@@ -20,7 +20,7 @@ const Tag: FC<React.PropsWithChildren<TagProps>> = ({
 }) => {
   const tagClassNames = cx('tag', className, {
     [`-${color}`]: color,
-    'tag-action': onRemove
+    'tag-action': onRemove,
   });
 
   return (

src/TagInput/TagInput.tsx

@@ -62,7 +62,7 @@ const TagInput: React.FC<React.PropsWithChildren<TagInput>> = ({
 
   const tagInputClassNames = cx('tag-input', className, {
     '-readonly': isReadOnly,
-    '-error': showError
+    '-error': showError,
   });
 
   const checkIsUniqueTag = (tag: string, list: TagInputListItem[]) => {
@@ -161,7 +161,7 @@ const TagInput: React.FC<React.PropsWithChildren<TagInput>> = ({
             as: 'span',
             color,
             borderRadius: 24,
-            ...(!isReadOnly && { onRemove: () => handleRemoveTag(id) })
+            ...(!isReadOnly && { onRemove: () => handleRemoveTag(id) }),
           };
 
           return (<Tag key={id} {...tagProps}>{formatter?.(value) ?? value}</Tag>);

src/ui.js

@@ -37,3 +37,4 @@ export { default as Table } from './Table/Table';
 export { default as Tooltip } from './Tooltip/Tooltip';
 export { default as TableRow } from './TableRow/TableRow';
 export { default as TagInput, TagInputListItem } from './TagInput/TagInput';
+export { default as Switch } from './Switch/Switch';

src/ui.scss

@@ -36,3 +36,4 @@
 @import './Tooltip/Tooltip.scss';
 @import './Typography/Typography.scss';
 @import './TagInput/TagInput.scss';
+@import './Switch/Switch.scss';