feat(pie-toggle-switch): DSW-991 toggle switch (#672)

* feat(pie-toggle-switch): DSW-990 add empty package skeleton * docs - add note to generator readme * fix linting issues in generator * add todo comments to lint disable rules * remove test commands as no tests exist yet * add basic styles, template and story * add icon and comments * feat(pie-toggle-switch): DSW-991 rename prop and method * feat(pie-toggle-switch): DSW-991 update icon style * feat(pie-toggle-switch): DSW-991 sb control update * feat(pie-toggle-switch): DSW-991 storybook checked * feat(pie-toggle-switch): DSW-991 remove has * feat(pie-toggle-switch): DSW-991 style disabled * feat(pie-toggle-switch): DSW-991 use isDisabled * feat(pie-toggle-switch): DSW-991 remove unused prop * feat(pie-toggle-switch): DSW-991 update README * feat(pie-toggle-switch): DSW-991 adds rtl settings * feat(pie-toggle-switch): DSW-991 add test * feat(pie-toggle-switch): DSW-991 add component test * feat(pie-toggle-switch): DSW-991 add visual tests * feat(pie-toggle-switch): DSW-991 add component tests * feat(pie-toggle-switch): DSW-991 add some tests to cover component * feat(pie-toggle-switch): DSW-991 remove sass comments * feat(pie-toggle-switch): DSW-991 pr comments * feat(pie-toggle-switch): DSW-991 pr comment * feat(pie-toggle-switch): DSW-991 pr comment * feat(pie-toggle-switch): DSW-991 pr comment * feat(pie-toggle-switch): DSW-991 pr comment * feat(pie-toggle-switch): DSW-991 update icon style * feat(pie-toggle-switch): DSW-991 update element * feat(pie-toggle-switch): DSW-991 remove size var * feat(pie-toggle-switch): DSW-991 add to stories * feat(pie-toggle-switch): DSW-991 move mixin * feat(pie-toggle-switch): DSW-991 lint styles * feat(pie-toggle-switch): DSW-991 import icon * feat(pie-toggle-switch): DSW-991 re-lint * feat(pie-toggle-switch): DSW-991 set checked:false * feat(pie-toggle-switch): DSW-991 revert generator changes * feat(pie-docs): DSW-991 update transitions * refactor(pie-icons-react): DSW-1007 switch to mjs to enable usage in commonjs and esm (#666) * feat(pie-toggle-switch): DSW-991 revert generator changes * feat(pie-toggle-switch): DSW-991 update transitions * feat(pie-toggle-switch): DSW-991 lint * feat(pie-toggle-switch): DSW-991 add changeset * feat(pie-toggle-switch): DSW-991 name/story update * feat(pie-toggle-switch): DSW-991 pr comment * feat(pie-toggle-switch): DSW-991 use kebab case for style --------- Co-authored-by: jamieomaguire <jamieolivermaguire@googlemail.com> Co-authored-by: FayeCarter <faye.carter@justeattakeaway.com> Co-authored-by: Mariya Radchuk <radchuk.mary@gmail.com> Co-authored-by: Ashley Watson-Nolan <ashley.watson-nolan@justeattakeaway.com>
justeattakeaway · Aug 4, 2023 · 5ff10d5 · 5ff10d5
1 parent 5df562d
commit 5ff10d5
Show file tree

Hide file tree

Showing 15 changed files with 525 additions and 35 deletions.
diff --git a/.changeset/eleven-papayas-refuse.md b/.changeset/eleven-papayas-refuse.md
@@ -0,0 +1,9 @@
+---
+"@justeattakeaway/pie-toggle-switch": minor
+---
+
+[Added] - component styles
+[Added] - component functionality
+[Added] - `isChecked` and `isDisabled` prop
+[Added] - `pie-toggle-switch` story
+[Updated] - README
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -27,6 +27,7 @@ env:
   PERCY_TOKEN_PIE_BUTTON: ${{ secrets.PERCY_TOKEN_PIE_BUTTON }}
   PERCY_TOKEN_PIE_ICON_BUTTON: ${{ secrets.PERCY_TOKEN_PIE_ICON_BUTTON }}
   PERCY_TOKEN_PIE_MODAL: ${{ secrets.PERCY_TOKEN_PIE_MODAL }}
+  PERCY_TOKEN_PIE_TOGGLE_SWITCH: ${{ secrets.PERCY_TOKEN_PIE_TOGGLE_SWITCH }}
   TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
 
 jobs:

diff --git a/apps/pie-storybook/package.json b/apps/pie-storybook/package.json
@@ -14,7 +14,8 @@
     "@justeattakeaway/pie-css": "workspace:*",
     "@justeattakeaway/pie-icon-button": "workspace:*",
     "@justeattakeaway/pie-icons-webc": "workspace:*",
-    "@justeattakeaway/pie-modal": "workspace:*"
+    "@justeattakeaway/pie-modal": "workspace:*",
+    "@justeattakeaway/pie-toggle-switch": "workspace:*"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "7.1.0",

diff --git a/apps/pie-storybook/stories/pie-toggle-switch.stories.ts b/apps/pie-storybook/stories/pie-toggle-switch.stories.ts
@@ -1,22 +1,43 @@
 import { html, TemplateResult } from 'lit';
 import type { StoryObj as Story } from '@storybook/web-components';
-import { PieToggleSwitch, ToggleSwitchProps } from '@justeattakeaway/pie-toggle-switch';
+import { PieToggleSwitch } from '@justeattakeaway/pie-toggle-switch';
+import { ToggleSwitchProps } from '@justeattakeaway/pie-toggle-switch/src/defs';
+import { IconCheck } from '@justeattakeaway/pie-icons-webc';
 import { StoryMeta } from '../types';
+import { i18nArgTypes } from '../args/commonArgsTypes';
 
-// TODO: Remove this const when other exports from PieToggleSwitch are used on Stories,
-// otherwise tree-shaking will get rid of the web component definition
-const keptReference = PieToggleSwitch;
+const keptReferences = [
+    IconCheck,
+    PieToggleSwitch,
+];
 
 type ToggleSwitchStoryMeta = StoryMeta<ToggleSwitchProps>;
 
 const defaultArgs: ToggleSwitchProps = {
+    isChecked: false,
+    isDisabled: false,
+    dir: 'ltr',
 };
 
 const toggleSwitchStoryMeta: ToggleSwitchStoryMeta = {
     title: 'Toggle Switch',
     component: 'pie-toggle-switch',
     argTypes: {
-
+        ...i18nArgTypes,
+        isChecked: {
+            description: 'Same as the HTML checked attribute - indicates whether the switch is on or off',
+            control: 'boolean',
+            defaultValue: {
+                summary: false,
+            },
+        },
+        isDisabled: {
+            description: 'Same as the HTML disabled attribute - indicates whether the switch is disabled or not',
+            control: 'boolean',
+            defaultValue: {
+                summary: false,
+            },
+        },
     },
     args: defaultArgs,
     parameters: {
@@ -29,11 +50,19 @@ const toggleSwitchStoryMeta: ToggleSwitchStoryMeta = {
 
 export default toggleSwitchStoryMeta;
 
-// TODO: remove the eslint-disable rule when props are added
-// eslint-disable-next-line no-empty-pattern
-const Template = ({}: ToggleSwitchProps): TemplateResult => html`
-        <pie-toggle-switch/>
-        `;
+const Template = (props: ToggleSwitchProps): TemplateResult => {
+    const {
+        isChecked,
+        isDisabled,
+        dir,
+    } = props;
+
+    return html`
+        <pie-toggle-switch
+            ?isChecked=${isChecked}
+            ?isDisabled=${isDisabled}
+            dir="${dir}"></pie-toggle-switch>`;
+};
 
 export const Default: Story<ToggleSwitchProps> = (args: ToggleSwitchProps) => Template(args);
 Default.args = {

diff --git a/packages/components/pie-toggle-switch/README.md b/packages/components/pie-toggle-switch/README.md
@@ -59,7 +59,8 @@ import { PieToggleSwitch } from '@justeattakeaway/pie-toggle-switch/dist/react';
 
 | Property | Type | Default | Description |
 |---|---|---|---|
-| - | - | - | - |
+| isChecked | `Boolean` | false | Indicates whether the switch is on or off |
+| isDisabled | `Boolean` | false | Indicates whether the switch is disabled or not |
 
 In your markup or JSX, you can then use these to set the properties for the `pie-toggle-switch` component:
 
@@ -103,4 +104,4 @@ Under scripts `test:visual` replace the environment variable with the below:
 
 ```bash
 PERCY_TOKEN_PIE_TOGGLE_SWITCH=abcde
-```
+```
diff --git a/packages/components/pie-toggle-switch/package.json b/packages/components/pie-toggle-switch/package.json
@@ -14,15 +14,17 @@
     "lint:style:fix": "yarn lint:style --fix",
     "watch": "run -T vite build --watch",
     "test": "echo \"Error: no test specified\" && exit 0",
-    "test:ci": "yarn test"
+    "test:ci": "yarn test",
+    "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
+    "test:browsers:ci": "yarn test:browsers",
+    "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_TOGGLE_SWITCH} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
+    "test:visual:ci": "yarn test:visual"
   },
   "author": "JustEatTakeaway.com - Design System Web Team",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@justeattakeaway/pie-components-config": "workspace:*"
-  },
-  "dependencies": {
-    "@justeattakeaway/pie-webc-core": "workspace:*"
+    "@justeattakeaway/pie-components-config": "workspace:*",
+    "@justeattakeaway/pie-icons-webc": "workspace:*"
   },
   "volta": {
     "extends": "../../../package.json"

diff --git a/packages/components/pie-toggle-switch/playwright/index.html b/packages/components/pie-toggle-switch/playwright/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preload" href="https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-ExtraBold-optimised.woff2" as="font" type="font/woff2" crossorigin>
+    <style>
+        @font-face {
+            font-family: JETSansDigital;
+            src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff2') format("woff2"),
+            url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff') format("woff");
+            font-weight: 400;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: JETSansDigital;
+            src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff2') format("woff2"),
+            url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff') format("woff");
+            font-weight: 700;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: JETSansDigital;
+            src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-ExtraBold-optimised.woff2') format("woff2"),
+            url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-ExtraBold-optimised.woff') format("woff");
+            font-weight: 800;
+            font-display: swap;
+        }
+        body {
+            font-feature-settings: "tnum"; /* Enable tabular numbers */
+        }
+        /* basic styles to center align components and give them some spacing */
+        #root {
+            padding: 1em;
+        }
+
+        #root > * {
+            display: block;
+            margin-inline: auto;
+        }
+
+        #root > * + * {
+            margin-top: 1em;
+        }
+    </style>
+    <title>Testing Page</title>
+    <link rel="stylesheet" type="text/css" href="https://unpkg.com/@justeat/pie-design-tokens/dist/jet.css" />
+    <link rel="stylesheet" type="text/css" href="https://unpkg.com/@justeat/pie-design-tokens/dist/jet-hsl-colors.css" />
+</head>
+<body>
+    <div id="root"></div>
+    <script type="module" src="./index.ts"></script>
+</body>
+</html>
diff --git a/packages/components/pie-toggle-switch/playwright/index.ts b/packages/components/pie-toggle-switch/playwright/index.ts
@@ -0,0 +1 @@
+// Import common styles here
diff --git a/packages/components/pie-toggle-switch/src/defs.ts b/packages/components/pie-toggle-switch/src/defs.ts
@@ -1,3 +1,19 @@
-// TODO - please remove the eslint disable comment below when you add props to this interface
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface ToggleSwitchProps {}
+import { RTLComponentProps } from '@justeattakeaway/pie-webc-core';
+
+export interface ToggleSwitchProps extends RTLComponentProps {
+    /**
+     * Same as the HTML checked attribute - indicates whether the switch is on or off
+     */
+    isChecked: boolean;
+    /**
+     * Same as the HTML checked attribute - indicates whether the switch disabled or not
+     */
+    isDisabled: boolean;
+}
+
+/**
+ * Event name for when the toggle switch checked state is changed.
+ *
+ * @constant
+ */
+export const EVENT_TOGGLE_SWITCH_CHANGED = 'pie-toggle-switch-changed';
diff --git a/packages/components/pie-toggle-switch/src/index.ts b/packages/components/pie-toggle-switch/src/index.ts
@@ -1,6 +1,11 @@
-import { LitElement, html, unsafeCSS } from 'lit';
+import {
+    LitElement, html, unsafeCSS, nothing,
+} from 'lit';
+import { property } from 'lit/decorators.js';
+import { RtlMixin } from '@justeattakeaway/pie-webc-core';
 import styles from './toggle-switch.scss?inline';
-import { ToggleSwitchProps } from './defs';
+import { ToggleSwitchProps, EVENT_TOGGLE_SWITCH_CHANGED } from './defs';
+import '@justeattakeaway/pie-icons-webc/dist/icons/IconCheck.js';
 
 // Valid values available to consumers
 export {
@@ -9,13 +14,51 @@ export {
 
 const componentSelector = 'pie-toggle-switch';
 
-export class PieToggleSwitch extends LitElement implements ToggleSwitchProps {
-    render () {
-        return html`<h1>Hello world!</h1>`;
-    }
+/**
+ * @event {CustomEvent} pie-toggle-switch-changed - when the toggle switch checked state is changed.
+ */
+
+export class PieToggleSwitch extends RtlMixin(LitElement) implements ToggleSwitchProps {
+    @property({ type: Boolean, reflect: true })
+    public isChecked = false;
+
+    @property({ type: Boolean, reflect: true })
+    public isDisabled = false;
 
-    // Renders a `CSSResult` generated from SCSS by Vite
     static styles = unsafeCSS(styles);
+
+    onToggleChange (event: Event) {
+        const target = event?.target as HTMLInputElement;
+        this.isChecked = target.checked;
+        this.dispatchEvent(new CustomEvent(EVENT_TOGGLE_SWITCH_CHANGED, { detail: this.isChecked }));
+    }
+
+    render () {
+        const {
+            isChecked,
+            isDisabled,
+        } = this;
+
+        return html`
+            <label
+                data-test-id="toggle-switch-component"
+                class="c-toggleSwitch"
+                ?isChecked="${isChecked}"
+                ?isDisabled=${isDisabled}>
+                <input
+                    role="switch"
+                    type="checkbox"
+                    class="c-toggleSwitch-input"
+                    .checked="${isChecked}"
+                    .disabled="${isDisabled}"
+                    @change="${this.onToggleChange}">
+
+                <div class="c-toggleSwitch-control">
+                    ${isChecked ? html`<icon-check></icon-check>` : nothing}
+                </div>
+            </label>
+        `;
+    }
 }
 
 customElements.define(componentSelector, PieToggleSwitch);