Merge pull request #2 from adobe/andrew/card-component

Andrew/card component
adobe · Jan 9, 2019 · 1d8f757 · 1d8f757
2 parents 0e23357 + 986ebb9
commit 1d8f757
Show file tree

Hide file tree

Showing 17 changed files with 738 additions and 3 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,4 +2,6 @@ src/components/**/*.js
 src/components/**/*.js.map
 dist
 node_modules
-npm-debug.log
+npm-debug.log
+.nvmrc
+.DS_STORE
diff --git a/scripts/split-spectrum.js b/scripts/split-spectrum.js
@@ -122,7 +122,7 @@ const scales = ['medium' /* 'large' */];
 const cores = ['global'];
 
 // the components we should copy over
-const components = ['banner', 'button'];
+const components = ['banner', 'button', 'card'];
 
 const processes = [];
 

diff --git a/src/components/card/card-base.css b/src/components/card/card-base.css
@@ -0,0 +1,121 @@
+/*
+Copyright 2018 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.
+*/
+:host {
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    min-width: var(--spectrum-card-min-width);
+    border: var(--spectrum-card-border-size) solid transparent;
+    border-radius: var(--spectrum-card-border-radius);
+    background-color: var(--spectrum-card-background-color);
+}
+
+:host(:focus) {
+    outline: none;
+}
+
+:host(:hover) {
+    border-color: var(--spectrum-card-border-color-hover);
+}
+
+:host(:focus) .quick-actions,
+:host(:focus) .actions,
+:host(:hover) .quick-actions,
+:host(:hover) .actions,
+:host([selected]) .quick-actions,
+:host([selected]) .actions {
+    visibility: visible;
+    opacity: 1;
+    pointer-events: all;
+}
+
+:host(:focus),
+:host([selected]) {
+    border-color: var(--spectrum-card-border-color-key-focus);
+    box-shadow: 0 0 0 1px var(--spectrum-card-border-color-key-focus);
+}
+
+:host([drop-target]) {
+    border-color: var(--spectrum-card-border-color-key-focus);
+    box-shadow: 0 0 0 1px var(--spectrum-card-border-color-key-focus);
+    background-color: var(--spectrum-alias-highlight-selected);
+}
+
+#title {
+    font-size: var(--spectrum-card-title-text-size);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-right: var(--spectrum-card-title-padding-right);
+    color: var(--spectrum-card-quiet-title-text-color);
+}
+
+#subtitle {
+    font-size: var(--spectrum-card-subtitle-text-size);
+    letter-spacing: var(--spectrum-card-subtitle-letter-spacing);
+    text-transform: uppercase;
+    padding-right: var(--spectrum-card-subtitle-padding-right);
+    color: var(--spectrum-card-quiet-subtitle-text-color);
+}
+
+#header {
+    display: flex;
+    align-items: baseline;
+    height: var(--spectrum-card-body-header-height);
+}
+
+#body {
+    padding-top: var(--spectrum-card-body-padding-top);
+    padding-right: var(--spectrum-card-body-padding-right);
+    padding-bottom: var(--spectrum-card-body-padding-bottom);
+    padding-left: var(--spectrum-card-body-padding-left);
+}
+
+#body:last-child {
+    border-radius: 0 0 var(--spectrum-card-border-radius)
+        var(--spectrum-card-border-radius);
+}
+
+#content {
+    display: flex;
+    height: var(--spectrum-card-body-content-height);
+    margin-top: var(--spectrum-card-body-content-margin-top);
+}
+
+#actions {
+    position: absolute;
+    right: var(--spectrum-card-actions-margin);
+    top: var(--spectrum-card-actions-margin);
+    height: var(--spectrum-quickactions-height);
+    visibility: hidden;
+}
+
+#quick-actions {
+    position: absolute;
+    left: var(--spectrum-card-checkbox-margin);
+    top: var(--spectrum-card-checkbox-margin);
+    width: var(--spectrum-quickactions-height);
+    height: var(--spectrum-quickactions-height);
+    visibility: hidden;
+}
+
+#quick-actions .spectrum-Checkbox {
+    margin: 0;
+}
+
+#action-button {
+    flex: 1;
+    align-self: center;
+    display: flex;
+    justify-content: flex-end;
+}
diff --git a/src/components/card/card-gallery.css b/src/components/card/card-gallery.css
@@ -0,0 +1,20 @@
+/*
+Copyright 2018 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.
+*/
+
+:host {
+    min-width: 0;
+}
+
+slot[name='preview']::slotted(*) {
+    padding: 0;
+    border-radius: 0;
+}
diff --git a/src/components/card/card-gallery.ts b/src/components/card/card-gallery.ts
@@ -0,0 +1,88 @@
+/*
+Copyright 2018 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.
+*/
+
+// @ts-ignore - css generated at build time
+import cardBaseStyles from './card-base.css.js';
+// @ts-ignore - css generated at build time
+import cardGalleryStyles from './card-gallery.css.js';
+// @ts-ignore - css generated at build time
+import cardQuietStyles from './card-quiet.css.js';
+
+export class SpectrumGalleryCard extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        if (!this.shadowRoot) {
+            throw new Error('Failed to attach ShadowRoot!');
+        }
+        this.shadowRoot.innerHTML = this.render();
+    }
+
+    /**
+     * Getter for type attribute
+     */
+    public get title(): string {
+        return this.getAttribute('title') || '';
+    }
+
+    /**
+     * Setter for type attribute
+     */
+    public set title(value: string) {
+        if (value) {
+            this.setAttribute('title', value);
+        } else {
+            this.removeAttribute('title');
+        }
+    }
+
+    /**
+     * Getter for type attribute
+     */
+    public get subtitle(): string {
+        return this.getAttribute('subtitle') || '';
+    }
+
+    /**
+     * Setter for type attribute
+     */
+    public set subtitle(value: string) {
+        if (value) {
+            this.setAttribute('subtitle', value);
+        } else {
+            this.removeAttribute('subtitle');
+        }
+    }
+
+    private render() {
+        return `
+            <style>
+                ${cardBaseStyles}
+                ${cardQuietStyles}
+                ${cardGalleryStyles}
+            </style>
+            <slot name="cover-photo"></slot>
+            <slot name="preview"></slot>
+            <div id="body">
+                <div id="header">
+                    <div id="title">${this.title}</div>
+                    <div id="subtitle">${this.subtitle}</div>
+                    <slot name="description"></slot>
+                </div>
+            </div>
+        `;
+    }
+}
+
+if (!customElements.get('spectrum-card-gallery')) {
+    customElements.define('spectrum-card-gallery', SpectrumGalleryCard);
+}
diff --git a/src/components/card/card-quiet.css b/src/components/card/card-quiet.css
@@ -0,0 +1,120 @@
+/*
+Copyright 2018 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.
+*/
+
+:host {
+    width: 100%;
+    height: 100%;
+    min-width: var(--spectrum-card-quiet-min-size);
+    border-width: 0;
+    border-radius: 0;
+    overflow: visible;
+    border-color: transparent;
+    background-color: transparent;
+}
+
+:host(:hover) {
+    border-color: transparent;
+}
+
+:host(:focus),
+:host([selected]) {
+    border-color: transparent;
+    box-shadow: none;
+}
+
+:host([drop-target]) {
+    border-color: transparent;
+    background-color: transparent;
+    box-shadow: none;
+}
+
+#subtitle {
+    font-size: var(--spectrum-card-subtitle-text-size);
+    letter-spacing: var(--spectrum-card-subtitle-letter-spacing);
+    text-transform: uppercase;
+    padding-right: var(--spectrum-card-subtitle-padding-right);
+    color: var(--spectrum-card-quiet-subtitle-text-color);
+}
+
+slot[name='description']::slotted(*) {
+    font-size: var(--spectrum-card-subtitle-text-size);
+    color: var(--spectrum-card-description-text-color);
+}
+
+#subtitle + slot[name='description']::before {
+    content: '•';
+    padding-right: var(--spectrum-card-subtitle-padding-right);
+}
+
+slot[name='preview']::slotted(*) {
+    width: 100%;
+    flex: 1;
+    min-height: var(--spectrum-card-quiet-min-size);
+    padding: var(--spectrum-card-quiet-preview-padding);
+    margin: 0 auto;
+    box-sizing: border-box;
+    border-radius: var(--spectrum-card-quiet-border-radius);
+    position: relative;
+    transition: background-color var(--spectrum-transition-time);
+    background-color: var(--spectrum-card-quiet-preview-background-color);
+    overflow: hidden;
+}
+
+slot[name='preview']::slotted(*)::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    border-radius: inherit;
+    border: var(--spectrum-card-quiet-border-size) solid transparent;
+}
+
+#header {
+    height: var(--spectrum-card-quiet-body-header-height);
+    margin-top: var(--spectrum-card-quiet-body-header-margin-top);
+}
+
+#body {
+    padding: 0;
+}
+
+:host(:hover) slot[name='preview']::slotted(*) {
+    background-color: var(--spectrum-card-quiet-preview-background-color-hover);
+}
+
+:host(:focus) slot[name='preview']::slotted(*),
+:host([selected]) slot[name='preview']::slotted(*) {
+    background-color: var(--spectrum-card-quiet-preview-background-color);
+}
+
+:host([drop-target]) slot[name='preview']::slotted(*) {
+    transition: none;
+    background-color: var(--spectrum-alias-highlight-selected);
+}
+
+:host([drop-target]) slot[name='preview']::slotted(*)::before {
+    border-color: var(--spectrum-card-quiet-border-color-selected);
+    box-shadow: 0 0 0 1px var(--spectrum-card-quiet-border-color-selected);
+}
+
+:host([drop-target]) #folder-background,
+:host([drop-target]) #file-background {
+    fill: var(--spectrum-alias-highlight-selected);
+}
+
+:host([drop-target]) #folder-outline,
+:host([drop-target]) #file-outline {
+    fill: var(--spectrum-card-quiet-border-color-selected);
+}