feat: Switch component (#216)

packages/ocean-components/package.json

@@ -35,12 +35,12 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^14.0.0",
     "@rollup/plugin-node-resolve": "^8.4.0",
-    "@storybook/addon-a11y": "^6.0.2",
-    "@storybook/addon-backgrounds": "^6.0.4",
-    "@storybook/addon-controls": "^6.0.2",
-    "@storybook/addon-docs": "^6.0.2",
-    "@storybook/addon-viewport": "^6.0.4",
-    "@storybook/react": "^6.0.2",
+    "@storybook/addon-a11y": "^6.0.5",
+    "@storybook/addon-backgrounds": "^6.0.5",
+    "@storybook/addon-controls": "^6.0.5",
+    "@storybook/addon-docs": "^6.0.5",
+    "@storybook/addon-viewport": "^6.0.5",
+    "@storybook/react": "^6.0.5",
     "@storybook/storybook-deployer": "^2.8.6",
     "@testing-library/jest-dom": "^5.11.3",
     "@testing-library/react": "^10.4.8",
@@ -58,12 +58,12 @@
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-jest": "^23.20.0",
     "eslint-plugin-jest-dom": "^3.1.7",
-    "eslint-plugin-react": "^7.20.5",
+    "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-hooks": "^4.0.8",
     "eslint-plugin-testing-library": "^3.6.0",
     "husky": "^4.2.5",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.3.0",
+    "jest": "^26.4.0",
     "jest-sonar-reporter": "^2.0.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.5",

packages/ocean-components/src/Switch/Switch.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import './styles/switch.scss';
+
+type SwitchProps = React.ComponentPropsWithoutRef<'input'>;
+
+const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(function Switch(
+  { className, id, ...rest },
+  ref
+) {
+  return (
+    <label className="ods-switch__root" htmlFor={id}>
+      <input
+        ref={ref}
+        id={id}
+        className={classNames('ods-switch', className)}
+        {...rest}
+        type="checkbox"
+      />
+      <span className="ods-switch__slider"></span>
+    </label>
+  );
+});
+
+export default Switch;

packages/ocean-components/src/Switch/__tests__/Switch.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Switch from '../Switch';
+
+test('renders element properly', () => {
+  const { container, getByTestId } = render(
+    <Switch data-testid="switch-test" className="custom-class" />
+  );
+
+  expect(container.firstChild).toMatchInlineSnapshot(`
+    <label
+      class="ods-switch__root"
+    >
+      <input
+        class="ods-switch custom-class"
+        data-testid="switch-test"
+        type="checkbox"
+      />
+      <span
+        class="ods-switch__slider"
+      />
+    </label>
+  `);
+  expect(getByTestId('switch-test')).toHaveAttribute('type', 'checkbox');
+});

packages/ocean-components/src/Switch/index.ts

@@ -0,0 +1 @@
+export { default } from './Switch';

packages/ocean-components/src/Switch/stories/Switch.stories.mdx

@@ -0,0 +1,58 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import Switch from '../Switch';
+
+<Meta title="Components/Switch" component={Switch} />
+
+# Switch API
+
+The API documentation of the Switch React component. Learn more about the props and the CSS customization points.
+
+## Import
+
+```javascript
+import { Switch } from '@useblu/ocean-components';
+```
+
+## Usage
+
+<Canvas withSource="open" withToolbar>
+  <Story name="Usage">
+    <Switch id="switch-usage" checked readOnly />
+  </Story>
+</Canvas>
+
+## Props
+
+The ref is forwarded to the root element.
+
+Any other props supplied will be provided to the root element (native element).
+
+## CSS
+
+| Global class          | Description                           |
+| --------------------- | ------------------------------------- |
+| .ods-switch\_\_root   | Styles applied to the root element.   |
+| .ods-switch           | Styles applied to the switch element. |
+| .ods-switch\_\_slider | Styles applied to the span element.   |
+
+If that's not sufficient, you can check the [implementation of the component](https://github.com/Pagnet/ocean-ds-web/blob/master/src/Switch/Switch.tsx) for more detail.
+
+## Playground
+
+<Canvas>
+  <Story
+    name="Playground"
+    args={{
+      disabled: false,
+    }}
+    argTypes={{
+      disabled: {
+        control: 'boolean',
+      },
+    }}
+  >
+    {(props) => <Switch id="switch-playground" {...props} />}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Playground" of="." />

packages/ocean-components/src/Switch/styles/switch.scss

@@ -0,0 +1,67 @@
+@import '~@useblu/tokens/dist/web/tokens.scss';
+
+.ods-switch {
+  position: absolute;
+  opacity: 0;
+  height: 0;
+  width: 0;
+
+  &__root {
+    position: relative;
+    display: inline-block;
+    width: 44px;
+    height: 24px;
+  }
+
+  &__slider {
+    cursor: pointer;
+    border: solid $border-width-thin $color-highlight-pure;
+    border-radius: $border-radius-pill;
+    background-color: $color-interface-light-pure;
+    padding: $spacing-inset-xxs - $border-width-thin;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    box-sizing: border-box;
+    transition: all 0.2s ease;
+
+    &:before {
+      content: '';
+      display: block;
+      height: 16px;
+      width: 16px;
+      border-radius: 50%;
+      background-color: $color-highlight-pure;
+      transition: all 0.2s ease;
+    }
+  }
+
+  &:checked + &__slider:before {
+    transform: translateX(20px);
+    background-color: $color-interface-light-pure;
+  }
+
+  &:checked:not(:disabled) + &__slider {
+    background-color: $color-highlight-pure;
+  }
+
+  &:checked:disabled + &__slider {
+    background-color: $color-interface-light-deep;
+    border-color: $color-interface-light-deep;
+  }
+
+  &:disabled + &__slider {
+    cursor: not-allowed;
+  }
+
+  &:disabled:not(:checked) + &__slider {
+    background-color: $color-interface-light-pure;
+    border-color: $color-interface-light-deep;
+  }
+
+  &:disabled:not(:checked) + &__slider:before {
+    background-color: $color-interface-light-deep;
+  }
+}