feat(accordion): add accordion pattern

packages/accordion/README.md

@@ -0,0 +1,75 @@
+## Description
+
+The `<sp-accordion>` element is a list of items that can be expanded or collapsed to reveal additional content or information associated with each item. There can be zero expanded items, exactly one expanded item, or more than one item expanded at a time, depending on the configuration.
+
+### Usage
+
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/accordion?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/accordion)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/accordion?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/accordion)
+
+```
+yarn add @spectrum-web-components/accordion
+```
+
+Import the side effectful registration of `<sp-accordion>` and `<sp-accordion-item>` via:
+
+```
+import '@spectrum-web-components/accordion/sp-accordion.js';
+import '@spectrum-web-components/accordion/sp-accordion-item.js';
+```
+
+When looking to leverage the `Accordion` and `AccordionItem` base class as a type and/or for extension purposes, do so via:
+
+```
+import { Accordion, AccordionItem } from '@spectrum-web-components/accordion';
+```
+
+## Example
+
+```html
+<sp-accordion>
+    <sp-accordion-item label="Heading 1">
+        <div>Item 1</div>
+    </sp-accordion-item>
+    <sp-accordion-item disabled label="Heading 2">
+        <div>Item 2</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 3">
+        <div>Item 3</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 4">
+        <div>Item 4</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 5">
+        <div>Item 5</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 6">
+        <div>Item 6</div>
+    </sp-accordion-item>
+</sp-accordion>
+```
+
+## Allow Multiple
+
+```html
+<sp-accordion allow-multiple>
+    <sp-accordion-item label="Heading 1">
+        <div>Item 1</div>
+    </sp-accordion-item>
+    <sp-accordion-item disabled label="Heading 2">
+        <div>Item 2</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 3">
+        <div>Item 3</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 4">
+        <div>Item 4</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 5">
+        <div>Item 5</div>
+    </sp-accordion-item>
+    <sp-accordion-item label="Heading 6">
+        <div>Item 6</div>
+    </sp-accordion-item>
+</sp-accordion>
+```

packages/accordion/package.json

@@ -0,0 +1,64 @@
+{
+    "name": "@spectrum-web-components/accordion",
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/accordion"
+    },
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "homepage": "https://adobe.github.io/spectrum-web-components/components/accordion",
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
+    ],
+    "version": "0.0.1",
+    "description": "",
+    "main": "src/index.js",
+    "module": "src/index.js",
+    "type": "module",
+    "exports": {
+        "./src/": "./src/",
+        "./custom-elements.json": "./custom-elements.json",
+        "./package.json": "./package.json",
+        "./sp-accordion": "./sp-accordion.js",
+        "./sp-accordion.js": "./sp-accordion.js",
+        "./sp-accordion-item": "./sp-accordion-item.js",
+        "./sp-accordion-item.js": "./sp-accordion-item.js"
+    },
+    "files": [
+        "custom-elements.json",
+        "*.d.ts",
+        "*.js",
+        "*.js.map",
+        "/src/"
+    ],
+    "sideEffects": [
+        "./sp-*.js",
+        "./sp-*.ts"
+    ],
+    "scripts": {
+        "test": "karma start --coverage"
+    },
+    "author": "",
+    "license": "Apache-2.0",
+    "peerDependencies": {
+        "lit-element": "^2.1.0",
+        "lit-html": "^1.0.0"
+    },
+    "devDependencies": {
+        "@spectrum-css/accordion": "^3.0.0-beta.2"
+    },
+    "dependencies": {
+        "@spectrum-web-components/base": "^0.0.1",
+        "@spectrum-web-components/icons-ui": "^0.2.0",
+        "@spectrum-web-components/shared": "^0.5.0",
+        "tslib": "^2.0.0"
+    }
+}

packages/accordion/sp-accordion-item.ts

@@ -0,0 +1,20 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { AccordionItem } from './src/AccordionItem.js';
+
+customElements.define('sp-accordion-item', AccordionItem);
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-accordion-item': AccordionItem;
+    }
+}

packages/accordion/sp-accordion.ts

@@ -0,0 +1,20 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { Accordion } from './src/Accordion.js';
+
+customElements.define('sp-accordion', Accordion);
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-accordion': Accordion;
+    }
+}

packages/accordion/src/Accordion.ts

@@ -0,0 +1,169 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import {
+    html,
+    CSSResultArray,
+    TemplateResult,
+    property,
+    PropertyValues,
+} from '@spectrum-web-components/base';
+
+import { AccordionItem } from './AccordionItem.js';
+
+import styles from './accordion.css.js';
+import { Focusable, getActiveElement } from '@spectrum-web-components/shared';
+
+/**
+ * @element sp-accordion
+ */
+export class Accordion extends Focusable {
+    public static get styles(): CSSResultArray {
+        return [styles];
+    }
+
+    public focusedItemIndex = 0;
+    public focusInItemIndex = 0;
+    protected isShiftTabbing = false;
+
+    /**
+     * Allows multiple accordion items to be opened at the same time
+     */
+    @property({ type: Boolean, reflect: true, attribute: 'allow-multiple' })
+    public allowMultiple = false;
+
+    public constructor() {
+        super();
+        this.handleKeydown = this.handleKeydown.bind(this);
+        this.startListeningToKeyboard = this.startListeningToKeyboard.bind(
+            this
+        );
+        this.stopListeningToKeyboard = this.stopListeningToKeyboard.bind(this);
+
+        this.addEventListener('focusin', this.startListeningToKeyboard);
+        this.addEventListener('focusout', this.stopListeningToKeyboard);
+        this.addEventListener('sp-accordion-item-toggle', this.onToggle);
+    }
+
+    public focus(): void {
+        if (this.focusElement.isSameNode(this)) {
+            return;
+        }
+
+        this.focusElement.focus();
+    }
+
+    public get focusElement(): Accordion | AccordionItem {
+        const items = this.querySelectorAll('sp-accordion-item');
+        if (!items.length) {
+            return this;
+        }
+        let index = 0;
+        while (index < items.length && items[index] && items[index].disabled) {
+            index += 1;
+        }
+        /* istanbul ignore else */
+        if (items[index]) {
+            return items[index];
+        }
+        /* istanbul ignore next */
+        return this;
+    }
+
+    public startListeningToKeyboard(): void {
+        const accordionItems = this.querySelectorAll('sp-accordion-item');
+        /* istanbul ignore if */
+        if (accordionItems.length === 0) {
+            return;
+        }
+        this.addEventListener('keydown', this.handleKeydown);
+    }
+
+    public stopListeningToKeyboard(): void {
+        this.removeEventListener('keydown', this.handleKeydown);
+    }
+
+    private handleKeydown(event: KeyboardEvent): void {
+        const { code } = event;
+        /* istanbul ignore if */
+        if (code !== 'ArrowDown' && code !== 'ArrowUp') {
+            return;
+        }
+        event.preventDefault();
+        const direction = code === 'ArrowDown' ? 1 : -1;
+        this.focusItemByOffset(direction);
+    }
+
+    private focusItemByOffset(direction: number): void {
+        const items = [...this.querySelectorAll('sp-accordion-item')];
+        const focused = items.indexOf(getActiveElement(this) as AccordionItem);
+        let next = focused;
+        next = (items.length + next + direction) % items.length;
+        while (items[next].disabled) {
+            next = (items.length + next + direction) % items.length;
+        }
+        items[next].focus();
+    }
+
+    protected manageShiftTab(): void {
+        this.addEventListener('keydown', (event: KeyboardEvent) => {
+            const items = [
+                ...this.querySelectorAll('sp-accordion-item'),
+            ] as AccordionItem[];
+            const firstFocusable = items.find(
+                (item) => !item.disabled
+            ) as AccordionItem;
+            if (
+                !event.defaultPrevented &&
+                event.shiftKey &&
+                event.code === 'Tab' &&
+                (event.composedPath() as AccordionItem[]).includes(
+                    firstFocusable
+                )
+            ) {
+                this.isShiftTabbing = true;
+                HTMLElement.prototype.focus.apply(this);
+                setTimeout(() => (this.isShiftTabbing = false), 0);
+            }
+        });
+    }
+
+    protected render(): TemplateResult {
+        return html`
+            <slot></slot>
+        `;
+    }
+
+    private onToggle(event: Event): void {
+        const target = event.target as AccordionItem;
+        const accordionItems = this.querySelectorAll('sp-accordion-item');
+        /* istanbul ignore if */
+        if (!accordionItems) {
+            return;
+        }
+        if (!this.allowMultiple) {
+            accordionItems.forEach((item: Element) => {
+                const accordionItem = item as AccordionItem;
+                if (accordionItem.open && accordionItem !== target) {
+                    accordionItem.open = false;
+                }
+            });
+        }
+
+        target.open = true;
+    }
+
+    protected firstUpdated(changes: PropertyValues): void {
+        super.firstUpdated(changes);
+        this.tabIndex = 0;
+    }
+}