@spectrum-web-components/card 1.0.0 → 1.1.0-beta.0

package/README.md

@@ -9,6 +9,7 @@ image/caption pairs.
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/card?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/card)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/card?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/card)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/0lwluuJO4nR1daE9dyRw/src/index.stories.js)
 
 ```
 yarn add @spectrum-web-components/card
@@ -29,7 +30,7 @@ import { Card } from '@spectrum-web-components/card';
 ## Example
 
 ```html demo
-<sp-card heading="Card Heading" subheading="JPG">
+<sp-card heading="Card Heading" subheading="JPG Photo">
     <img
         slot="cover-photo"
         src="https://picsum.photos/200/300"
@@ -39,18 +40,44 @@ import { Card } from '@spectrum-web-components/card';
 </sp-card>
 ```
 
+```html demo
+<sp-card heading="Card Title" subheading="JPG">
+    <img slot="preview" src="https://picsum.photos/200/300" alt="Demo Image" />
+    <div slot="footer">Footer</div>
+</sp-card>
+```
+
 ## Heading
 
-By default, the heading for an `sp-card` is applied via the `heading` attribute, which is restricted to string content only. When HTML content is desired, a slot named `heading` available for applying the heading.
+By default, the heading for an `<sp-card>` is applied via the `heading` attribute, which is restricted to string content only. For HTML content, use the `heading` slot instead.
 
 ```html demo
-<sp-card subheading="JPG" style="--spectrum-card-body-header-height: auto;">
+<sp-card
+    subheading="JPG Photo"
+    style="--spectrum-card-body-header-height: auto;"
+>
     <h1 slot="heading">Card Heading</h1>
     <img alt="" slot="cover-photo" src="https://picsum.photos/200/300" />
     <div slot="footer">Footer</div>
 </sp-card>
 ```
 
+## Linking
+
+An `<sp-card>` can be provided with an `href` attribute in order for it to act as one large anchor element. When leveraging the `href` attribute, the `download`, `target` and `rel` attributes customize the card's linking behavior. Use them as follows:
+
+<!-- prettier-ignore -->
+```html
+<sp-card
+    heading="Card Title"
+    subheading="JPG"
+    href="https://opensource.adobe.com/spectrum-web-components"
+    target="_blank"
+>
+    <img slot="cover-photo" src="https://picsum.photos/200/300" alt="Demo Image" />
+</sp-card>
+```
+
 ## Variants
 
 There are multiple card variants to choose from in Spectrum. The `variant`
@@ -63,7 +90,7 @@ Normal cards can contain a heading, a subheading, a cover photo, and a footer.
 ```html
 <sp-card heading="Card Heading">
     <img alt="" slot="cover-photo" src="https://picsum.photos/200/300" />
-    <span slot="subheading">JPG</span>
+    <span slot="subheading">JPG photo</span>
     <div slot="footer">Footer</div>
 </sp-card>
 ```
@@ -73,45 +100,38 @@ Normal cards can contain a heading, a subheading, a cover photo, and a footer.
 Cards can be supplied an `actions` via a names slot.
 
 ```html
-<sp-card heading="Card Heading" subheading="JPG">
+<sp-card heading="Card Heading" subheading="JPG Photo">
     <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
+        label="More Actions"
+        slot="actions"
+        placement="bottom-end"
+        quiet
+    >
+        <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-action-menu>
 </sp-card>
 ```
 
-### Empty
+### No Preview Image
 
-An empty card will still fill space in a design.
+Cards with no preview image can contain a heading, a subheading, and a footer.
 
-```html
-<sp-card></sp-card>
+```html demo
+<sp-card heading="Card Title" subheading="No Preview Image">
+    <div slot="footer">Footer</div>
+</sp-card>
 ```
 
 ### Quiet
@@ -120,7 +140,7 @@ Quiet cards can contain a heading, a subheading, a cover photo, a description, a
 
 ```html
 <div style="width: 208px; height: 264px">
-    <sp-card variant="quiet" heading="Card Heading" subheading="JPG">
+    <sp-card variant="quiet" heading="Card Heading" subheading="JPG Photo">
         <img alt="" slot="preview" src="https://picsum.photos/200/300" />
         <div slot="description">10/15/18</div>
         <div slot="footer">Footer</div>
@@ -135,7 +155,7 @@ When leveraging the `asset` attribute, a card can be declared as representing a
     <sp-card
         variant="quiet"
         heading="Card Heading"
-        subheading="JPG"
+        subheading="JPG Photo"
         asset="file"
     >
         <img alt="" slot="preview" src="https://picsum.photos/200/300" />
@@ -150,7 +170,7 @@ Or a `folder`:
 
 ```html
 <div style="width: 208px; height: 264px">
-    <sp-card variant="quiet" subheading="JPG" asset="folder">
+    <sp-card variant="quiet" subheading="JPG Photo" asset="folder">
         <img alt="" slot="preview" src="https://picsum.photos/200/300" />
         <div slot="heading">Folder Name</div>
         <div slot="description">10/15/18</div>
@@ -163,31 +183,22 @@ Quiet cards will also accept `actions` via a named slot.
 
 ```html
 <div style="width: 208px; height: 264px">
-    <sp-card variant="quiet" heading="Card Heading" subheading="JPG">
+    <sp-card variant="quiet" heading="Card Heading" subheading="JPG Photo">
         <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
+            label="More Actions"
+            slot="actions"
+            placement="bottom-end"
+            quiet
+        >
+            <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-action-menu>
     </sp-card>
 </div>
@@ -198,8 +209,8 @@ Quiet cards will also accept `actions` via a named slot.
 Gallery cards can contain a heading, a subheading, an image preview, a description, and a footer.
 
 ```html
-<div style="width: 532px; height: 224px">
-    <sp-card variant="gallery" heading="Card Heading" subheading="JPG">
+<div style="width: 532px; max-width: 100%; height: 224px">
+    <sp-card variant="gallery" heading="Card Heading" subheading="JPG Photo">
         <img alt="" slot="preview" src="https://picsum.photos/532/192" />
         <div slot="description">10/15/18</div>
         <div slot="footer">Footer</div>
@@ -207,13 +218,13 @@ Gallery cards can contain a heading, a subheading, an image preview, a descripti
 </div>
 ```
 
-### Small
+### Size
 
-The `small` attriibute can be applied to a standard card:
+`size="s"` will delivery the `<sp-card>` element at a "small" size. It can be leveraged with a standard card:
 
 ```html demo
 <div style="width: 208px; height: 264px">
-    <sp-card small heading="Card Heading" subheading="JPG">
+    <sp-card size="s" heading="Card Heading" subheading="JPG Photo">
         <img
             slot="cover-photo"
             alt="Demo Image"
@@ -227,10 +238,8 @@ The `small` attriibute can be applied to a standard card:
 A `horizontal` card:
 
 ```html demo
-<div
-    style="color: var(--spectrum-body-text-color, var(--spectrum-alias-text-color));"
->
-    <sp-card small horizontal heading="Card Heading" subheading="JPG">
+<div style="color: var(--spectrum-neutral-content-color-default);">
+    <sp-card size="s" horizontal heading="Card Heading" subheading="JPG Photo">
         <sp-icon slot="preview" style="width: 36px; height: 36px;">
             <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -253,33 +262,29 @@ Or a `quiet` card:
 
 ```html demo
 <div
-    style="color: var(--spectrum-body-text-color, var(--spectrum-alias-text-color)); width: 110px;"
+    style="color: var(--spectrum-neutral-content-color-default); width: 110px;"
 >
-    <sp-card small heading="Card Heading" subheading="JPG" variant="quiet">
+    <sp-card
+        size="s"
+        heading="Card Heading"
+        subheading="JPG Photo"
+        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
+            label="More Actions"
+            slot="actions"
+            placement="bottom-end"
+            quiet
+        >
+            <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-action-menu>
     </sp-card>
 </div>

package/package.json

@@ -1,63 +1,79 @@
 {
     "name": "@spectrum-web-components/card",
+    "version": "1.1.0-beta.0",
     "publishConfig": {
         "access": "public"
     },
+    "description": "",
+    "license": "Apache-2.0",
     "repository": {
         "type": "git",
         "url": "https://github.com/adobe/spectrum-web-components.git",
         "directory": "packages/card"
     },
+    "author": "",
+    "homepage": "https://opensource.adobe.com/spectrum-web-components/components/card",
     "bugs": {
         "url": "https://github.com/adobe/spectrum-web-components/issues"
     },
-    "homepage": "https://adobe.github.io/spectrum-web-components/components/card",
-    "keywords": [
-        "spectrum css",
-        "web components",
-        "lit-element",
-        "lit-html"
-    ],
-    "version": "1.0.0",
-    "description": "",
-    "main": "src/index.js",
-    "module": "src/index.js",
+    "main": "./src/index.js",
+    "module": "./src/index.js",
     "type": "module",
     "exports": {
-        ".": "./src/index.js",
-        "./src/": "./src/",
-        "./custom-elements.json": "./custom-elements.json",
+        ".": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
         "./package.json": "./package.json",
-        "./sp-card": "./sp-card.js",
-        "./sp-card.js": "./sp-card.js"
+        "./src/Card.js": {
+            "development": "./src/Card.dev.js",
+            "default": "./src/Card.js"
+        },
+        "./src/card-overrides.css.js": "./src/card-overrides.css.js",
+        "./src/card.css.js": "./src/card.css.js",
+        "./src/index.js": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./sp-card.js": {
+            "development": "./sp-card.dev.js",
+            "default": "./sp-card.js"
+        }
+    },
+    "scripts": {
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
     },
     "files": [
+        "**/*.d.ts",
+        "**/*.js",
+        "**/*.js.map",
         "custom-elements.json",
-        "*.d.ts",
-        "*.js",
-        "*.js.map",
-        "/src/"
+        "!stories/",
+        "!test/"
     ],
-    "sideEffects": [
-        "./sp-*.js",
-        "./sp-*.ts"
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
     ],
-    "scripts": {
-        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
+    "dependencies": {
+        "@spectrum-web-components/asset": "^1.1.0-beta.0",
+        "@spectrum-web-components/base": "^1.1.0-beta.0",
+        "@spectrum-web-components/checkbox": "^1.1.0-beta.0",
+        "@spectrum-web-components/divider": "^1.1.0-beta.0",
+        "@spectrum-web-components/icons-workflow": "^1.1.0-beta.0",
+        "@spectrum-web-components/shared": "^1.1.0-beta.0",
+        "@spectrum-web-components/styles": "^1.1.0-beta.0"
     },
-    "author": "",
-    "license": "Apache-2.0",
     "devDependencies": {
-        "@spectrum-css/card": "^3.0.0-beta.2"
-    },
-    "dependencies": {
-        "@spectrum-web-components/asset": "^0.1.5",
-        "@spectrum-web-components/base": "^0.1.3",
-        "@spectrum-web-components/checkbox": "^0.5.4",
-        "@spectrum-web-components/icons-workflow": "^0.3.6",
-        "@spectrum-web-components/quick-actions": "^0.1.3",
-        "@spectrum-web-components/shared": "^0.7.4",
-        "tslib": "^2.0.0"
+        "@spectrum-css/card": "^10.0.0-s2-foundations.20"
     },
-    "gitHead": "c01e4f913eb8776d126b690a2ed5e009744ee114"
+    "types": "./src/index.d.ts",
+    "customElements": "custom-elements.json",
+    "sideEffects": [
+        "./sp-*.js",
+        "./**/*.dev.js"
+    ],
+    "gitHead": "8840da116b3429f0b4de70ad7f690ae3de1c9448"
 }

package/sp-card.dev.js

@@ -0,0 +1,5 @@
+"use strict";
+import { Card } from "./src/Card.dev.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
+defineElement("sp-card", Card);
+//# sourceMappingURL=sp-card.dev.js.map

package/sp-card.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-card.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { Card } from './src/Card.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-card', Card);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-card': Card;\n    }\n}\n"],
+  "mappings": ";AAYA,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAE9B,cAAc,WAAW,IAAI;",
+  "names": []
+}

package/sp-card.js

@@ -1,14 +1,2 @@
-/*
-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 { Card } from './src/Card.js';
-customElements.define('sp-card', Card);
-//# sourceMappingURL=sp-card.js.map
+"use strict";import{Card as e}from"./src/Card.js";import{defineElement as a}from"@spectrum-web-components/base/src/define-element.js";a("sp-card",e);
+//# sourceMappingURL=sp-card.js.map

package/sp-card.js.map

@@ -1 +1,7 @@
-{"version":3,"file":"sp-card.js","sourceRoot":"","sources":["sp-card.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC,cAAc,CAAC,MAAM,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { Card } from './src/Card.js';\n\ncustomElements.define('sp-card', Card);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-card': Card;\n    }\n}\n"]}
+{
+  "version": 3,
+  "sources": ["sp-card.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { Card } from './src/Card.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-card', Card);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-card': Card;\n    }\n}\n"],
+  "mappings": "aAYA,OAAS,QAAAA,MAAY,gBACrB,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,UAAWD,CAAI",
+  "names": ["Card", "defineElement"]
+}

package/src/Card.d.ts

@@ -1,8 +1,18 @@
-import { SpectrumElement, CSSResultArray, TemplateResult, PropertyValues } from '@spectrum-web-components/base';
+import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
 import '@spectrum-web-components/asset/sp-asset.js';
 import '@spectrum-web-components/checkbox/sp-checkbox.js';
-import '@spectrum-web-components/quick-actions/sp-quick-actions.js';
-declare const Card_base: typeof SpectrumElement;
+import '@spectrum-web-components/popover/sp-popover.js';
+import '@spectrum-web-components/divider/sp-divider.js';
+declare const Card_base: typeof SpectrumElement & {
+    new (...args: any[]): import("@spectrum-web-components/shared/src/observe-slot-presence.js").SlotPresenceObservingInterface;
+    prototype: import("@spectrum-web-components/shared/src/observe-slot-presence.js").SlotPresenceObservingInterface;
+} & {
+    new (...args: any[]): import("@spectrum-web-components/base").SizedElementInterface;
+    prototype: import("@spectrum-web-components/base").SizedElementInterface;
+} & {
+    new (...args: any[]): import("@spectrum-web-components/shared/src/like-anchor.js").LikeAnchorInterface;
+    prototype: import("@spectrum-web-components/shared/src/like-anchor.js").LikeAnchorInterface;
+};
 /**
  * @element sp-card
  *
@@ -19,22 +29,33 @@ export declare class Card extends Card_base {
     static get styles(): CSSResultArray;
     asset?: 'file' | 'folder';
     variant: 'standard' | 'gallery' | 'quiet';
-    selected: boolean;
+    get selected(): boolean;
+    set selected(selected: boolean);
+    private _selected;
     heading: string;
     horizontal: boolean;
-    small: boolean;
+    private likeAnchor?;
     focused: boolean;
     toggles: boolean;
+    value: string;
     subheading: string;
-    constructor();
+    protected get hasCoverPhoto(): boolean;
+    protected get hasPreview(): boolean;
+    click(): void;
     private handleFocusin;
     private handleFocusout;
     private handleKeydown;
     private handleSelectedChange;
     toggleSelected(): void;
+    private announceChange;
+    private stopPropagationOnHref;
+    private handlePointerdown;
     protected get renderHeading(): TemplateResult;
     protected get renderPreviewImage(): TemplateResult;
+    protected get renderCoverImage(): TemplateResult;
+    protected get images(): TemplateResult[];
     private renderImage;
+    private get renderSubtitleAndDescription();
     protected render(): TemplateResult;
     protected firstUpdated(changes: PropertyValues): void;
 }