fix(tray): add tray pattern

packages/bundle/elements.ts

@@ -75,4 +75,5 @@ import '@spectrum-web-components/theme/src/themes.js';
 import '@spectrum-web-components/thumbnail/sp-thumbnail.js';
 import '@spectrum-web-components/toast/sp-toast.js';
 import '@spectrum-web-components/tooltip/sp-tooltip.js';
+import '@spectrum-web-components/tray/sp-tray.js';
 import '@spectrum-web-components/underlay/sp-underlay.js';

packages/bundle/package.json

@@ -98,6 +98,7 @@
         "@spectrum-web-components/thumbnail": "^0.1.5",
         "@spectrum-web-components/toast": "^0.8.7",
         "@spectrum-web-components/tooltip": "^0.8.7",
+        "@spectrum-web-components/tray": "^0.0.1",
         "@spectrum-web-components/underlay": "^0.6.5",
         "tslib": "^2.0.0"
     },

packages/bundle/src/index.ts

@@ -60,4 +60,5 @@ export * from '@spectrum-web-components/theme';
 export * from '@spectrum-web-components/thumbnail';
 export * from '@spectrum-web-components/toast';
 export * from '@spectrum-web-components/tooltip';
+export * from '@spectrum-web-components/tray';
 export * from '@spectrum-web-components/underlay';

packages/bundle/tsconfig.json

@@ -61,6 +61,7 @@
         { "path": "../thumbnail" },
         { "path": "../toast" },
         { "path": "../tooltip" },
+        { "path": "../tray" },
         { "path": "../underlay" }
     ]
 }

packages/tray/README.md

@@ -0,0 +1,97 @@
+## Description
+
+`<sp-tray>` elements are typically used to portray information on mobile device or smaller screens.
+
+### Usage
+
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/tray?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/tray)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/tray?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/tray)
+
+```
+yarn add @spectrum-web-components/tray
+```
+
+Import the side effectful registration of `<sp-tray>` via:
+
+```
+import '@spectrum-web-components/tray/sp-tray.js';
+```
+
+When looking to leverage the `Tray` base class as a type and/or for extension purposes, do so via:
+
+```
+import { Tray } from '@spectrum-web-components/tray';
+```
+
+## Dialog
+
+```html
+<sp-button
+    variant="secondary"
+    onclick="
+    const trigger = this;
+    const interaction = 'modal';
+    const content = this.nextElementSibling;
+    const options = {
+        offset: 0,
+        placement: 'none',
+        receivesFocus: 'auto',
+    };
+    Overlay.open(
+        trigger, 
+        interaction,
+        content,
+        options
+    );
+"
+>
+    Toggle tray
+</sp-button>
+<sp-tray>
+    <sp-dialog size="small" dismissable>
+        <h2 slot="heading">New Messages</h2>
+        You have 5 new messages.
+    </sp-dialog>
+</sp-tray>
+```
+
+## Menu
+
+```html
+<sp-button
+    variant="secondary"
+    onclick="
+    const trigger = this;
+    const interaction = 'modal';
+    const content = this.nextElementSibling;
+    const options = {
+        offset: 0,
+        placement: 'none',
+        receivesFocus: 'auto',
+    };
+    Overlay.open(
+        trigger, 
+        interaction,
+        content,
+        options
+    );
+"
+>
+    Toggle menu
+</sp-button>
+<sp-tray>
+    <sp-menu style="width: 100%">
+        <sp-menu-item selected>Deselect</sp-menu-item>
+        <sp-menu-item>Select Inverse</sp-menu-item>
+        <sp-menu-item focused>Feather...</sp-menu-item>
+        <sp-menu-item>Select and Mask...</sp-menu-item>
+        <sp-menu-divider></sp-menu-divider>
+        <sp-menu-item>Save Selection</sp-menu-item>
+        <sp-menu-item disabled>Make Work Path</sp-menu-item>
+    </sp-menu>
+</sp-tray>
+```
+
+## Accessibility
+
+`<sp-tray>` presents a page blocking experience and should be opened with the `Overlay` API using the `modal` interaction to ensure that the content appropriately manages the presence of other content in the tab order of the page and the availability of that content for a screen reader.

packages/tray/package.json

@@ -0,0 +1,60 @@
+{
+    "name": "@spectrum-web-components/tray",
+    "version": "0.0.1",
+    "publishConfig": {
+        "access": "public"
+    },
+    "description": "Web component implementation of a Spectrum design Tray",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/tray"
+    },
+    "author": "",
+    "homepage": "https://adobe.github.io/spectrum-web-components/components/tray",
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "main": "src/index.js",
+    "module": "src/index.js",
+    "type": "module",
+    "exports": {
+        ".": "./src/index.js",
+        "./src/*": "./src/*.js",
+        "./package.json": "./package.json",
+        "./sp-tray": "./sp-tray.js",
+        "./sp-tray.js": "./sp-tray.js"
+    },
+    "scripts": {
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
+    },
+    "files": [
+        "*.d.ts",
+        "*.js",
+        "*.js.map",
+        "/src/",
+        "custom-elements.json"
+    ],
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
+    ],
+    "dependencies": {
+        "@spectrum-web-components/base": "^0.4.3",
+        "@spectrum-web-components/modal": "^0.3.5",
+        "@spectrum-web-components/underlay": "^0.6.5",
+        "tslib": "^2.0.0"
+    },
+    "devDependencies": {
+        "@spectrum-css/tray": "^1.0.3"
+    },
+    "types": "./src/index.d.ts",
+    "customElementsManifest": "custom-elements.json",
+    "sideEffects": [
+        "./sp-*.js",
+        "./sp-*.ts"
+    ]
+}

packages/tray/sp-tray.ts

@@ -0,0 +1,21 @@
+/*
+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 { Tray } from './src/Tray.js';
+
+customElements.define('sp-tray', Tray);
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-tray': Tray;
+    }
+}

packages/tray/src/Tray.ts

@@ -0,0 +1,70 @@
+/*
+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,
+    SpectrumElement,
+    CSSResultArray,
+    TemplateResult,
+    property,
+    query,
+} from '@spectrum-web-components/base';
+import '@spectrum-web-components/underlay/sp-underlay.js';
+
+import modalStyles from '@spectrum-web-components/modal/src/modal.css.js';
+import styles from './tray.css.js';
+
+/**
+ * @element sp-tray
+ */
+export class Tray extends SpectrumElement {
+    public static get styles(): CSSResultArray {
+        return [modalStyles, styles];
+    }
+
+    @property({ type: Boolean, reflect: true })
+    public open = false;
+
+    @query('.tray')
+    private tray!: HTMLDivElement;
+
+    public focus(): void {
+        const firstFocusable = this.querySelector(
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [focusable]'
+        ) as HTMLElement;
+        if (firstFocusable) {
+            firstFocusable.focus();
+        } else if (this.children.length === 1) {
+            this.tray.focus();
+        } else {
+            super.focus();
+        }
+    }
+
+    public close(): void {
+        this.open = false;
+        this.dispatchEvent(
+            new Event('close', {
+                bubbles: true,
+            })
+        );
+    }
+
+    protected render(): TemplateResult {
+        return html`
+            <sp-underlay ?open=${this.open} @click=${this.close}></sp-underlay>
+            <div class="tray modal" tabindex="-1">
+                <slot></slot>
+            </div>
+        `;
+    }
+}

packages/tray/src/index.ts

@@ -0,0 +1,13 @@
+/*
+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.
+*/
+
+export * from './Tray.js';

packages/tray/src/spectrum-config.js

@@ -0,0 +1,33 @@
+/*
+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.
+*/
+
+const config = {
+    spectrum: 'tray',
+    components: [
+        {
+            name: 'tray',
+            host: {
+                selector: '.spectrum-Tray',
+                shadowSelector: '.tray',
+            },
+            attributes: [
+                {
+                    type: 'boolean',
+                    name: 'open',
+                    selector: '.is-open',
+                },
+            ],
+        },
+    ],
+};
+
+export default config;