feat(thumbnail): add the thumbnail package

adobe · Feb 24, 2021 · 56935d5 · 56935d5
1 parent ee44978
commit 56935d5
Show file tree

Hide file tree

Showing 20 changed files with 811 additions and 0 deletions.
diff --git a/packages/bundle/elements.ts b/packages/bundle/elements.ts
@@ -65,6 +65,7 @@ import '@spectrum-web-components/tags/sp-tags.js';
 import '@spectrum-web-components/textfield/sp-textfield.js';
 import '@spectrum-web-components/theme/sp-theme.js';
 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/underlay/sp-underlay.js';
diff --git a/packages/bundle/package.json b/packages/bundle/package.json
@@ -93,6 +93,7 @@
         "@spectrum-web-components/tags": "^0.5.3",
         "@spectrum-web-components/textfield": "^0.7.3",
         "@spectrum-web-components/theme": "^0.7.4",
+        "@spectrum-web-components/thumbnail": "^0.0.1",
         "@spectrum-web-components/toast": "^0.7.3",
         "@spectrum-web-components/tooltip": "^0.7.3",
         "@spectrum-web-components/underlay": "^0.5.1",

diff --git a/packages/bundle/src/index.ts b/packages/bundle/src/index.ts
@@ -55,6 +55,7 @@ export * from '@spectrum-web-components/tabs';
 export * from '@spectrum-web-components/tags';
 export * from '@spectrum-web-components/textfield';
 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/underlay';
diff --git a/packages/bundle/tsconfig.json b/packages/bundle/tsconfig.json
@@ -52,6 +52,7 @@
         { "path": "../tags" },
         { "path": "../textfield" },
         { "path": "../theme" },
+        { "path": "../thumbnail" },
         { "path": "../toast" },
         { "path": "../tooltip" },
         { "path": "../underlay" }

diff --git a/packages/thumbnail/README.md b/packages/thumbnail/README.md
@@ -0,0 +1,141 @@
+## Description
+
+An `sp-thumbnail` can be used in a variety of locations as a way to display a preview of an image, layer, or effect. `sp-thumbnail` elements are not keyboard-focusable since they're intended to be used inside of a component that a user sets focus to (such as select lists or tree items).
+
+### Usage
+
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/thumbnail?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/thumbnail)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/thumbnail?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/thumbnail)
+
+```
+yarn add @spectrum-web-components/thumbnail
+```
+
+Import the side effectful registration of `<sp-thumbnail>` via:
+
+```
+import '@spectrum-web-components/thumbnail/sp-thumbnail.js';
+```
+
+When looking to leverage the `Thumbnail` base class as a type and/or for extension purposes, do so via:
+
+```
+import { Thumbnail } from '@spectrum-web-components/thumbnail';
+```
+
+## Sizes
+
+<sp-tabs selected="m">
+    <sp-tab value="s">Small</sp-tab>
+    <sp-tab value="m">Medium</sp-tab>
+    <sp-tab value="l">Large</sp-tab>
+    <sp-tab value="xl">Extra Large</sp-tab>
+</sp-tabs>
+
+<div class="tabs--s">
+
+```html
+<sp-thumbnail size="s">
+    <img src="https://placedog.net/100/100" alt="Demo Image" />
+</sp-thumbnail>
+```
+
+</div>
+
+<div class="tabs--m">
+
+```html
+<sp-thumbnail size="m">
+    <img src="https://placedog.net/100/100" alt="Demo Image" />
+</sp-thumbnail>
+```
+
+</div>
+
+<div class="tabs--l">
+
+```html
+<sp-thumbnail size="l">
+    <img src="https://placedog.net/100/100" alt="Demo Image" />
+</sp-thumbnail>
+```
+
+</div>
+
+<div class="tabs--xl">
+
+```html
+<sp-thumbnail size="xl">
+    <img src="https://placedog.net/100/100" alt="Demo Image" />
+</sp-thumbnail>
+```
+
+</div>
+
+## Focused or selected
+
+When `focused` or `selected` the `sp-thumbnail` element will be displayed as follows:
+
+```html
+<div style="display: flex; gap: var(--spectrum-global-dimension-size-100);">
+    <sp-thumbnail focused>
+        <img src="https://placedog.net/100/100" alt="Demo Image" />
+    </sp-thumbnail>
+    <sp-thumbnail selected>
+        <img src="https://placedog.net/100/100" alt="Demo Image" />
+    </sp-thumbnail>
+</div>
+```
+
+## Representing non-square content
+
+By default, an `sp-thumbnail` will ensure that the entirety of the content that it respresents is visible by letterboxing that content with a checkerboard background when its aspect ratio is not square.
+
+```html
+<div style="display: flex; gap: var(--spectrum-global-dimension-size-100);">
+    <sp-thumbnail>
+        <img src="https://placedog.net/300/400" alt="Eiffel Tower at night" />
+    </sp-thumbnail>
+
+    <sp-thumbnail>
+        <img
+            src="https://placedog.net/500/100"
+            alt="Landscape with mountains and lake"
+        />
+    </sp-thumbnail>
+</div>
+```
+
+The `background` attribute takes a string value of the CSS "background" property in order to customize the letterboxing.
+
+```html
+<div style="display: flex; gap: var(--spectrum-global-dimension-size-100);">
+    <sp-thumbnail background="red">
+        <img src="https://placedog.net/300/400" alt="Eiffel Tower at night" />
+    </sp-thumbnail>
+
+    <sp-thumbnail background="#00ff00">
+        <img
+            src="https://placedog.net/500/100"
+            alt="Landscape with mountains and lake"
+        />
+    </sp-thumbnail>
+</div>
+```
+
+The `cover` attribute will cause the content to fill the space provided by the `sp-thumbnail` element:
+
+```html
+<div style="display: flex; gap: var(--spectrum-global-dimension-size-100);">
+    <sp-thumbnail cover>
+        <img src="https://placedog.net/300/400" alt="Eiffel Tower at night" />
+    </sp-thumbnail>
+
+    <sp-thumbnail cover>
+        <img
+            src="https://placedog.net/500/100"
+            alt="Landscape with mountains and lake"
+        />
+    </sp-thumbnail>
+</div>
+```
diff --git a/packages/thumbnail/package.json b/packages/thumbnail/package.json
@@ -0,0 +1,58 @@
+{
+    "name": "@spectrum-web-components/thumbnail",
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/thumbnail"
+    },
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "homepage": "https://adobe.github.io/spectrum-web-components/components/thumbnail",
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
+    ],
+    "version": "0.0.1",
+    "description": "",
+    "main": "src/index.js",
+    "module": "src/index.js",
+    "type": "module",
+    "types": "./src/index.d.ts",
+    "exports": {
+        ".": "./src/index.js",
+        "./src/*": "./src/*",
+        "./custom-elements.json": "./custom-elements.json",
+        "./package.json": "./package.json",
+        "./sp-thumbnail": "./sp-thumbnail.js",
+        "./sp-thumbnail.js": "./sp-thumbnail.js"
+    },
+    "files": [
+        "custom-elements.json",
+        "*.d.ts",
+        "*.js",
+        "*.js.map",
+        "/src/"
+    ],
+    "sideEffects": [
+        "./sp-*.js",
+        "./sp-*.ts"
+    ],
+    "scripts": {
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
+    },
+    "author": "",
+    "license": "Apache-2.0",
+    "devDependencies": {
+        "@spectrum-css/thumbnail": "^1.0.0"
+    },
+    "dependencies": {
+        "@spectrum-web-components/base": "^0.3.3",
+        "tslib": "^2.0.0"
+    }
+}
diff --git a/packages/thumbnail/sp-thumbnail.ts b/packages/thumbnail/sp-thumbnail.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 { Thumbnail } from './src/Thumbnail.js';
+
+customElements.define('sp-thumbnail', Thumbnail);
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-thumbnail': Thumbnail;
+    }
+}
diff --git a/packages/thumbnail/src/Thumbnail.ts b/packages/thumbnail/src/Thumbnail.ts
@@ -0,0 +1,51 @@
+/*
+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,
+    SizedMixin,
+} from '@spectrum-web-components/base';
+
+import styles from './thumbnail.css.js';
+
+/**
+ * @element sp-thumbnail
+ */
+export class Thumbnail extends SizedMixin(SpectrumElement, {
+    validSizes: ['s', 'm', 'l', 'xl', 'xxl'],
+    noDefaultSize: true,
+}) {
+    public static get styles(): CSSResultArray {
+        return [styles];
+    }
+
+    @property({ type: String, reflect: true })
+    public background = '';
+
+    protected render(): TemplateResult {
+        return html`
+            ${this.background
+                ? html`
+                      <div
+                          class="background"
+                          style="background: ${this.background}"
+                      ></div>
+                  `
+                : html``}
+            <slot></slot>
+        `;
+    }
+}
diff --git a/packages/thumbnail/src/index.ts b/packages/thumbnail/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 './Thumbnail.js';
diff --git a/packages/thumbnail/src/spectrum-config.js b/packages/thumbnail/src/spectrum-config.js
@@ -0,0 +1,75 @@
+/*
+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: 'thumbnail',
+    components: [
+        {
+            name: 'thumbnail',
+            host: {
+                selector: '.spectrum-Thumbnail',
+            },
+            attributes: [
+                {
+                    type: 'boolean',
+                    name: 'selected',
+                    selector: '.is-selected',
+                },
+                {
+                    type: 'boolean',
+                    name: 'focused',
+                    selector: '.is-focused',
+                },
+                {
+                    type: 'enum',
+                    name: 'size',
+                    values: [
+                        {
+                            name: 's',
+                            selector: '.spectrum-Thumbnail--S',
+                        },
+                        {
+                            name: 'm',
+                            selector: '.spectrum-Thumbnail--M',
+                        },
+                        {
+                            name: 'l',
+                            selector: '.spectrum-Thumbnail--L',
+                        },
+                        {
+                            name: 'xl',
+                            selector: '.spectrum-Thumbnail--XL',
+                        },
+                        {
+                            name: 'xxl',
+                            selector: '.spectrum-Thumbnail--XXL',
+                        },
+                    ],
+                },
+            ],
+            classes: [
+                {
+                    name: 'background',
+                    selector: '.spectrum-Thumbnail-background',
+                },
+            ],
+            slots: [
+                {
+                    selector: '.spectrum-Thumbnail-image',
+                    contents: '*',
+                },
+            ],
+        },
+    ],
+};
+
+export default config;