fix: add Grid pattern

.storybook/main.js

@@ -1,7 +1,10 @@
 const rollupJson = require('@rollup/plugin-json');
 
 module.exports = {
-    stories: ['../packages/*/stories/*.stories.js'],
+    stories: [
+        '../packages/*/stories/*.stories.js',
+        '../tools/*/stories/*.stories.js',
+    ],
     nodeResolve: {
         exportConditions: ['browser', 'development'],
     },

.storybook/tsconfig.json

@@ -8,11 +8,13 @@
     "include": [
         "../global.d.ts",
         "../packages/*/stories/**/*.ts",
+        "../tools/*/stories/**/*.ts",
         "../test/lit-helpers.ts"
     ],
     "exclude": [
         "../packages/*/src/**/*.ts",
         "../packages/*/icons/**/*.ts",
-        "../packages/*/node_modules/**/*.ts"
+        "../packages/*/node_modules/**/*.ts",
+        "../tools/*/node_modules/**/*.ts"
     ]
 }

package.json

@@ -145,7 +145,7 @@
         "gunzip-maybe": "^1.4.2",
         "husky": "^7.0.4",
         "lerna": "^4.0.0",
-        "lit": "^2.0.0",
+        "lit": "^2.1.2",
         "lit-analyzer": "^1.2.1",
         "mocha-junit-reporter": "^2.0.2",
         "netlify-cli": "^9.7.0",

packages/base/package.json

@@ -52,7 +52,7 @@
         "lit-html"
     ],
     "dependencies": {
-        "lit": "^2.0.0",
+        "lit": "^2.1.2",
         "tslib": "^2.0.0"
     },
     "types": "./src/index.d.ts",

packages/card/src/Card.ts

@@ -69,7 +69,16 @@ export class Card extends LikeAnchor(
     public variant: 'standard' | 'gallery' | 'quiet' = 'standard';
 
     @property({ type: Boolean, reflect: true })
-    public selected = false;
+    get selected(): boolean {
+        return this._selected;
+    }
+    set selected(selected: boolean) {
+        if (selected === this.selected) return;
+        this._selected = selected;
+        this.requestUpdate('selected', !this._selected);
+    }
+
+    private _selected = false;
 
     @property()
     public heading = '';
@@ -86,6 +95,9 @@ export class Card extends LikeAnchor(
     @property({ type: Boolean, reflect: true })
     public toggles = false;
 
+    @property()
+    public value = '';
+
     @property()
     public subheading = '';
 
@@ -125,6 +137,7 @@ export class Card extends LikeAnchor(
             case 'Space':
                 this.toggleSelected();
                 if (this.toggles) {
+                    event.preventDefault();
                     break;
                 }
             case 'Enter':
@@ -158,6 +171,8 @@ export class Card extends LikeAnchor(
         const applyDefault = this.dispatchEvent(
             new Event('change', {
                 cancelable: true,
+                bubbles: true,
+                composed: true,
             })
         );
         if (!applyDefault) {
@@ -290,6 +305,7 @@ export class Card extends LikeAnchor(
                               class="checkbox"
                               @change=${this.handleSelectedChange}
                               ?checked=${this.selected}
+                              tabindex=${this.toggles ? '-1' : '0'}
                           ></sp-checkbox>
                       </sp-quick-actions>
                   `

projects/example-project-webpack/package.json

@@ -18,7 +18,7 @@
         "@spectrum-web-components/menu": "^0.12.1",
         "@spectrum-web-components/picker": "^0.10.2",
         "@spectrum-web-components/styles": "^0.11.4",
-        "lit": "^2.0.0"
+        "lit": "^2.1.2"
     },
     "devDependencies": {
         "clean-webpack-plugin": "^4.0.0",

tasks/build-css.js

@@ -41,6 +41,9 @@ const buildCSS = async () => {
     for (const cssPath of await fg(`./packages/*/src/*.css`)) {
         processCSS(cssPath);
     }
+    for (const cssPath of await fg(`./tools/*/src/*.css`)) {
+        processCSS(cssPath);
+    }
 };
 
 buildCSS();

tasks/watch-css.js

@@ -20,7 +20,7 @@ const debounceProcessCSS = debounce.debounce(processCSS, 200);
 
 // One-liner for current directory
 chokidar
-    .watch('./packages/*/src/*.css')
+    .watch(['./packages/*/src/*.css', './tools/*/src/*.css'])
     .on('change', debounceProcessCSS)
     .on('add', debounceProcessCSS);
 

tools/grid/.npmignore

@@ -0,0 +1,2 @@
+stories
+test

tools/grid/README.md

@@ -0,0 +1,75 @@
+## Description
+
+An `<sp-grid>` element displays a virtualized grid of elements built from its `items`, a normalized array of javascript objects, applied to a supplied `renderItem`, a `TemplateResult` returning method. `sp-grid` is a class extension of [`lit-virtualizer`](https://www.npmjs.com/package/@lit-labs/virtualizer/v/0.7.0-pre.2) and as such surfaces all of its underlying methods and events.
+
+Elements displayed in the grid can be focused via the [roving tabindex](https://www.w3.org/TR/wai-aria-practices-1.2/#kbd_roving_tabindex) that allows the grid to be entered via the `Tab` key and then subsequent elements to be focused via the arrow keys. To inform the `<sp-grid>` element what part of the DOM created by the `renderItem` method can be focused, supply a value to `focusableSelector`. Focus will always enter the element list at index 0 of ALL available elements, not just those currently realized to the page.
+
+Elements rendered via `renderItem` can have their width and height customized by supplying a value for `itemSize` that accepts an object: `{ width: number, height: number }`. You can customize the space between these elements via the `gap` property that accepts a value of `0` or `${number}px`.
+
+### Usage
+
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/grid?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/grid)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/grid?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/grid)
+
+```
+yarn add @spectrum-web-components/grid
+```
+
+Import the side effectful registration of `<sp-grid>` via:
+
+```
+import '@spectrum-web-components/grid/sp-grid.js';
+```
+
+When looking to leverage the `Grid` base class as a type and/or for extension purposes, do so via:
+
+```
+import { Grid } from '@spectrum-web-components/grid';
+```
+
+## Example
+
+```js
+const items = generateItems(1000);
+
+const renderItem = (
+    item: Item,
+    index: number,
+    selected: boolean
+): TemplateResult => {
+    return html`
+        <sp-card
+            toggles
+            variant="quiet"
+            heading="Card Heading ${item.id}"
+            subheading="JPG Photo"
+            style="contain: strict; padding: 1px;"
+            value="card-${item.id}"
+            .selected=${selected}
+            key=${index}
+        >
+            <img
+                alt=""
+                slot="preview"
+                src="https://picsum.photos/id/${item.id}/200/300"
+                decoding="async"
+            />
+            <div slot="description">10/15/18</div>
+            <div slot="footer">Footer</div>
+        </sp-card>
+    `;
+};
+
+// ...
+
+<sp-grid
+    .items=${items}
+    .focusableSelector=${'sp-card'}
+    .renderItem=${renderItem}
+    .itemSize=${{
+        width: 200,
+        height: 300,
+    }}
+    .gap=${'10px'}
+></sp-grid>
+```

tools/grid/package.json

@@ -0,0 +1,58 @@
+{
+    "name": "@spectrum-web-components/grid",
+    "version": "0.0.1",
+    "publishConfig": {
+        "access": "public"
+    },
+    "description": "Web component implementation of a Spectrum design Grid",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/grid"
+    },
+    "author": "",
+    "homepage": "https://adobe.github.io/spectrum-web-components/components/grid",
+    "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-grid": "./sp-grid.js",
+        "./sp-grid.js": "./sp-grid.js"
+    },
+    "scripts": {
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
+    },
+    "files": [
+        "**/*.d.ts",
+        "**/*.js",
+        "**/*.js.map",
+        "custom-elements.json",
+        "!stories/",
+        "!test/"
+    ],
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
+    ],
+    "dependencies": {
+        "@lit-labs/observers": "^1.0.1",
+        "@lit-labs/virtualizer": "0.7.0-pre.2",
+        "@spectrum-web-components/base": "^0.5.1",
+        "@spectrum-web-components/reactive-controllers": "^0.2.0",
+        "tslib": "^2.0.0"
+    },
+    "types": "./src/index.d.ts",
+    "customElements": "custom-elements.json",
+    "sideEffects": [
+        "./sp-*.js"
+    ]
+}

tools/grid/sp-grid.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 { Grid } from './src/Grid.js';
+
+customElements.define('sp-grid', Grid);
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-grid': Grid;
+    }
+}