feat(card): upgrade to Spectrum CSS v3.0.0

adobe · Aug 29, 2020 · 84cf1a9 · 84cf1a9
1 parent 3664b51
commit 84cf1a9
Show file tree

Hide file tree

Showing 17 changed files with 1,093 additions and 259 deletions.
diff --git a/documentation/src/components/code-example.ts b/documentation/src/components/code-example.ts
@@ -26,6 +26,7 @@ import DarkThemeStyles from 'prismjs/themes/prism-okaidia.css';
 import LightThemeStyles from 'prismjs/themes/prism.css';
 import Styles from './code-example.css';
 import { stripIndent } from 'common-tags';
+import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared';
 
 class Code extends LitElement {
     @property()
@@ -75,7 +76,7 @@ export class LightCode extends Code {
 }
 
 @customElement('code-example')
-export class CodeExample extends LitElement {
+export class CodeExample extends FocusVisiblePolyfillMixin(LitElement) {
     @query('#markup')
     private markup?: HTMLDivElement;
 

diff --git a/packages/action-menu/src/action-menu.css b/packages/action-menu/src/action-menu.css
@@ -10,6 +10,10 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
+:host([quiet]) {
+    min-width: 0;
+}
+
 #button {
     width: auto;
 }

diff --git a/packages/base/src/Base.ts b/packages/base/src/Base.ts
@@ -22,9 +22,13 @@ type Constructor<T = Record<string, unknown>> = {
     prototype: T;
 };
 
+export interface SpectrumInterface {
+    shadowRoot: ShadowRoot;
+}
+
 export function SpectrumMixin<T extends Constructor<UpdatingElement>>(
     constructor: T
-): T & Constructor<UpdatingElement> {
+): T & Constructor<SpectrumInterface> {
     return class SlotTextObservingElement extends constructor {
         public shadowRoot!: ShadowRoot;
 

diff --git a/packages/button/src/ActionButton.ts b/packages/button/src/ActionButton.ts
@@ -14,6 +14,11 @@ import { CSSResultArray, property, PropertyValues } from 'lit-element';
 import { ButtonBase } from './ButtonBase.js';
 import buttonStyles from './action-button.css.js';
 
+/**
+ * @element sp-card
+ *
+ * @fires change - Announces a change in the `selected` property of an action button
+ */
 export class ActionButton extends ButtonBase {
     public static get styles(): CSSResultArray {
         return [...super.styles, buttonStyles];
@@ -41,6 +46,14 @@ export class ActionButton extends ButtonBase {
             return;
         }
         this.selected = !this.selected;
+        const applyDefault = this.dispatchEvent(
+            new Event('change', {
+                cancelable: true,
+            })
+        );
+        if (!applyDefault) {
+            this.selected = !this.selected;
+        }
     };
 
     protected updated(changes: PropertyValues): void {

diff --git a/packages/button/test/action-button.test.ts b/packages/button/test/action-button.test.ts
@@ -48,5 +48,13 @@ describe('Button', () => {
         expect(el.toggles).to.be.true;
         expect(el.selected).to.be.true;
         expect(button.getAttribute('aria-pressed')).to.equal('true');
+
+        el.addEventListener('change', (event: Event) => event.preventDefault());
+        el.click();
+        await elementUpdated(el);
+
+        expect(el.toggles).to.be.true;
+        expect(el.selected).to.be.true;
+        expect(button.getAttribute('aria-pressed')).to.equal('true');
     });
 });
diff --git a/packages/card/README.md b/packages/card/README.md
@@ -4,7 +4,6 @@ An `<sp-card>` represents a rectangular card that contains
 a variety of text and image layouts. Cards are typically used
 to encapsulate units of a data set, such as a gallery of
 image/caption pairs.
-Spectrum has several card variations for different uses.
 
 ### Usage
 
@@ -30,8 +29,12 @@ import { Card } from '@spectrum-web-components/card';
 ## Example
 
 ```html demo
-<sp-card title="Card title" subtitle="JPG">
-    <img alt="" slot="cover-photo" src="https://picsum.photos/200/300" />
+<sp-card title="Card Title" subtitle="JPG">
+    <img
+        slot="cover-photo"
+        src="https://picsum.photos/200/300"
+        alt="Demo Image"
+    />
     <div slot="footer">Footer</div>
 </sp-card>
 ```
@@ -41,7 +44,7 @@ import { Card } from '@spectrum-web-components/card';
 By default, the title for an `sp-card` is applied via the `title` attribute, which is restricted to string content only. When HTML content is desired, a slot named `title` available for applying the title.
 
 ```html demo
-<sp-card subtitle="JPG">
+<sp-card subtitle="JPG" style="--spectrum-card-body-header-height: auto;">
     <h1 slot="title">Card title</h1>
     <img alt="" slot="cover-photo" src="https://picsum.photos/200/300" />
     <div slot="footer">Footer</div>
@@ -58,12 +61,59 @@ attribute controls the main variant of the card.
 Normal cards can contain a title, a subtitle, a cover photo, and a footer.
 
 ```html
-<sp-card title="Card title" subtitle="JPG">
+<sp-card title="Card title">
     <img alt="" slot="cover-photo" src="https://picsum.photos/200/300" />
+    <span slot="subtitle">JPG</span>
     <div slot="footer">Footer</div>
 </sp-card>
 ```
 
+### Actions
+
+Cards can be supplied an `actions` via a names slot.
+
+```html
+<sp-card title="Card Title" subtitle="JPG">
+    <img
+        slot="cover-photo"
+        src="https://picsum.photos/200/300"
+        alt="Demo Image"
+    />
+    <div slot="footer">Footer</div>
+    <sp-action-menu slot="actions" placement="bottom-end">
+        <sp-menu>
+            <sp-menu-item>
+                Deselect
+            </sp-menu-item>
+            <sp-menu-item>
+                Select Inverse
+            </sp-menu-item>
+            <sp-menu-item>
+                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-action-menu>
+</sp-card>
+```
+
+### Empty
+
+An empty card will still fill space in a design.
+
+```html
+<sp-card></sp-card>
+```
+
 ### Quiet
 
 Quiet cards can contain a title, a subtitle, a cover photo, a description, and a footer.
@@ -78,21 +128,154 @@ Quiet cards can contain a title, a subtitle, a cover photo, a description, and a
 </div>
 ```
 
+When leveraging the `asset` attribute, a card can be declared as representing a `file`:
+
+```html
+<div style="width: 208px; height: 264px">
+    <sp-card variant="quiet" title="Card title" subtitle="JPG" asset="file">
+        <img alt="" slot="preview" src="https://picsum.photos/200/300" />
+        <div slot="title">File Name</div>
+        <div slot="description">10/15/18</div>
+        <div slot="footer">Footer</div>
+    </sp-card>
+</div>
+```
+
+Or a `folder`:
+
+```html
+<div style="width: 208px; height: 264px">
+    <sp-card variant="quiet" subtitle="JPG" asset="folder">
+        <img alt="" slot="preview" src="https://picsum.photos/200/300" />
+        <div slot="title">Folder Name</div>
+        <div slot="description">10/15/18</div>
+        <div slot="footer">Footer</div>
+    </sp-card>
+</div>
+```
+
+Quiet cards will also accept `actions` via a named slot.
+
+```html
+<div style="width: 208px; height: 264px">
+    <sp-card variant="quiet" title="Card title" subtitle="JPG">
+        <img alt="" slot="preview" src="https://picsum.photos/200/300" />
+        <div slot="description">10/15/18</div>
+        <sp-action-menu slot="actions" placement="bottom-end">
+            <sp-menu>
+                <sp-menu-item>
+                    Deselect
+                </sp-menu-item>
+                <sp-menu-item>
+                    Select Inverse
+                </sp-menu-item>
+                <sp-menu-item>
+                    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-action-menu>
+    </sp-card>
+</div>
+```
+
 ### Gallery
 
 Gallery cards can contain a title, a subtitle, an image preview, a description, and a footer.
 
 ```html
 <div style="width: 532px; height: 224px">
     <sp-card variant="gallery" title="Card title" subtitle="JPG">
+        <img alt="" slot="preview" src="https://picsum.photos/532/192" />
+        <div slot="description">10/15/18</div>
+        <div slot="footer">Footer</div>
+    </sp-card>
+</div>
+```
+
+### Small
+
+The `small` attriibute can be applied to a standard card:
+
+```html demo
+<div style="width: 208px; height: 264px">
+    <sp-card small title="Card Title" subtitle="JPG">
         <img
-            alt=""
-            slot="preview"
-            src="https://picsum.photos/532/192"
-            style="object-fit: cover"
+            slot="cover-photo"
+            alt="Demo Image"
+            src="https://picsum.photos/110"
         />
-        <div slot="description">10/15/18</div>
         <div slot="footer">Footer</div>
     </sp-card>
 </div>
 ```
+
+A `horizontal` card:
+
+```html demo
+<div
+    style="color: var(--spectrum-body-text-color, var(--spectrum-alias-text-color));"
+>
+    <sp-card small horizontal title="Card Title" subtitle="JPG">
+        <sp-icon slot="preview" style="width: 36px; height: 36px;">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 36 36"
+                aria-hidden="true"
+                role="img"
+                fill="currentColor"
+            >
+                <path d="M20 2v10h10L20 2z" />
+                <path
+                    d="M19 14a1 1 0 01-1-1V2H7a1 1 0 00-1 1v30a1 1 0 001 1h22a1 1 0 001-1V14zm7 15.5a.5.5 0 01-.5.5h-15a.5.5 0 01-.5-.5v-1a.5.5 0 01.5-.5h15a.5.5 0 01.5.5zm0-4a.5.5 0 01-.5.5h-15a.5.5 0 01-.5-.5v-1a.5.5 0 01.5-.5h15a.5.5 0 01.5.5zm0-4a.5.5 0 01-.5.5h-15a.5.5 0 01-.5-.5v-1a.5.5 0 01.5-.5h15a.5.5 0 01.5.5z"
+                />
+            </svg>
+        </sp-icon>
+    </sp-card>
+</div>
+```
+
+Or a `quiet` card:
+
+```html demo
+<div
+    style="color: var(--spectrum-body-text-color, var(--spectrum-alias-text-color)); width: 110px;"
+>
+    <sp-card small title="Card Title" subtitle="JPG" variant="quiet">
+        <img src="https://picsum.photos/110" alt="Demo Image" slot="preview" />
+        <div slot="footer">Footer</div>
+        <sp-action-menu slot="actions" placement="bottom-end">
+            <sp-menu>
+                <sp-menu-item>
+                    Deselect
+                </sp-menu-item>
+                <sp-menu-item>
+                    Select Inverse
+                </sp-menu-item>
+                <sp-menu-item>
+                    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-action-menu>
+    </sp-card>
+</div>
+```
diff --git a/packages/card/package.json b/packages/card/package.json
@@ -47,13 +47,14 @@
     "author": "",
     "license": "Apache-2.0",
     "devDependencies": {
-        "@spectrum-css/card": "^2.0.6"
+        "@spectrum-css/card": "^3.0.0-beta.2"
     },
     "dependencies": {
         "@spectrum-web-components/asset": "^0.1.1",
+        "@spectrum-web-components/base": "^0.0.1",
+        "@spectrum-web-components/icons-workflow": "^0.3.2",
+        "@spectrum-web-components/quick-actions": "^0.0.1",
         "@spectrum-web-components/shared": "^0.6.0",
-        "lit-element": "^2.1.0",
-        "lit-html": "^1.0.0",
         "tslib": "^2.0.0"
     }
 }