feat(avatar): add avatar component

karma.conf.js

@@ -44,7 +44,7 @@ module.exports = (config) => {
                     global: {
                         statements: 95,
                         branches: 85,
-                        functions: 96,
+                        functions: 97,
                         lines: 95,
                     },
                 },

packages/avatar/README.md

@@ -0,0 +1,13 @@
+## Overview
+
+An **sp-avatar** is a great way to feature a visual representation of a user.
+
+## Example
+
+```html
+<sp-avatar label="Dog the User" src="https://placedog.net/500/500"></sp-avatar>
+```
+
+## Accessibility
+
+The `label` attribute of the `<sp-avatar>` will be passed into the `<img>` element as the `alt` tag for use in defining a textual representation of the image displayed.

packages/avatar/package.json

@@ -0,0 +1,44 @@
+{
+    "name": "@spectrum-web-components/avatar",
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/avatar"
+    },
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "homepage": "https://adobe.github.io/spectrum-web-components/components/avatar",
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
+    ],
+    "version": "0.0.1",
+    "description": "",
+    "main": "lib/index.js",
+    "module": "lib/index.js",
+    "files": [
+        "/lib/",
+        "/src/"
+    ],
+    "scripts": {
+        "test": "karma start --coverage"
+    },
+    "author": "",
+    "license": "Apache-2.0",
+    "peerDependencies": {
+        "lit-element": "^2.1.0",
+        "lit-html": "^1.0.0"
+    },
+    "devDependencies": {
+        "@spectrum-css/avatar": "^2.0.0"
+    },
+    "dependencies": {
+        "tslib": "^1.10.0"
+    }
+}

packages/avatar/src/avatar.css

@@ -0,0 +1,33 @@
+/*
+Copyright 2019 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 './spectrum-avatar.css';
+
+/*
+Opacity settings correct bugs in @spectrum-css/avatar
+Remove after https://github.com/adobe/spectrum-css/issues/340 is fixed.
+*/
+:host {
+    opacity: 1;
+    display: block;
+    overflow: hidden;
+}
+
+:host([disabled]) {
+    opacity: 0.5;
+}
+
+img {
+    width: 100%;
+    height: auto;
+    vertical-align: top;
+}

packages/avatar/src/avatar.ts

@@ -0,0 +1,43 @@
+/*
+Copyright 2019 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,
+    LitElement,
+    property,
+    CSSResultArray,
+    TemplateResult,
+} from 'lit-element';
+import { ifDefined } from 'lit-html/directives/if-defined';
+
+import avatarStyles from './avatar.css.js';
+
+/**
+ * Avatar component
+ */
+export class Avatar extends LitElement {
+    public static get styles(): CSSResultArray {
+        return [avatarStyles];
+    }
+
+    @property()
+    public label = '';
+
+    @property()
+    public src = '';
+
+    protected render(): TemplateResult {
+        return html`
+            <img alt=${ifDefined(this.label || undefined)} src=${this.src} />
+        `;
+    }
+}

packages/avatar/src/index.ts

@@ -0,0 +1,25 @@
+/*
+Copyright 2019 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 './avatar.js';
+
+import { Avatar } from './avatar.js';
+
+/* istanbul ignore else */
+if (!customElements.get('sp-avatar')) {
+    customElements.define('sp-avatar', Avatar);
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-avatar': Avatar;
+    }
+}

packages/avatar/src/spectrum-avatar.css

@@ -0,0 +1,34 @@
+/* stylelint-disable */ /* 
+Copyright 2019 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.
+
+THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
+:host {
+    /* .spectrum-Avatar */
+    width: var(
+        --spectrum-avatar-small-width,
+        var(--spectrum-global-dimension-size-200)
+    );
+    height: var(
+        --spectrum-avatar-small-height,
+        var(--spectrum-global-dimension-size-200)
+    );
+    border-radius: var(--spectrum-avatar-small-border-radius, 50%);
+    border-style: none;
+    -webkit-user-drag: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    opacity: NaN;
+}
+:host([disabled]) {
+    /* .spectrum-Avatar.is-disabled */
+    opacity: NaN;
+}

packages/avatar/src/spectrum-config.js

@@ -0,0 +1,30 @@
+/*
+Copyright 2019 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.
+*/
+
+module.exports = {
+    spectrum: 'avatar',
+    components: [
+        {
+            name: 'avatar',
+            host: {
+                selector: '.spectrum-Avatar',
+            },
+            attributes: [
+                {
+                    type: 'boolean',
+                    selector: '.is-disabled',
+                    name: 'disabled',
+                },
+            ],
+        },
+    ],
+};

packages/avatar/stories/avatar.stories.ts

@@ -0,0 +1,24 @@
+/*
+Copyright 2019 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 { storiesOf } from '@storybook/polymer';
+import { text } from '@storybook/addon-knobs';
+import { html } from 'lit-html';
+
+import '../';
+
+storiesOf('Avatar', module).add('Default', () => {
+    const label = text('Label', 'Place Dog', 'Element');
+    const src = text('Image Source', 'https://placedog.net/50/50', 'Element');
+    return html`
+        <sp-avatar label=${label} src=${src}></sp-avatar>
+    `;
+});

packages/avatar/test/avatar.test.ts

@@ -0,0 +1,48 @@
+/*
+Copyright 2019 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 '../';
+import { Avatar } from '../';
+import { fixture, html, expect, elementUpdated } from '@open-wc/testing';
+
+describe('Avatar', () => {
+    it('loads with everything set', async () => {
+        const el = await fixture<Avatar>(
+            html`
+                <sp-avatar
+                    label="Shantanu Narayen"
+                    src="https://placedog.net/500/500"
+                ></sp-avatar>
+            `
+        );
+
+        await elementUpdated(el);
+        expect(el).to.not.be.undefined;
+        const imageEl = el.shadowRoot
+            ? (el.shadowRoot.querySelector('img') as HTMLImageElement)
+            : (el.querySelector('img') as HTMLImageElement);
+        expect(imageEl.hasAttribute('alt')).to.be.true;
+        expect(imageEl.getAttribute('alt')).to.equal('Shantanu Narayen');
+    });
+    it('loads with no label', async () => {
+        const el = await fixture<Avatar>(
+            html`
+                <sp-avatar src="https://placedog.net/500/500"></sp-avatar>
+            `
+        );
+
+        await elementUpdated(el);
+        expect(el).to.not.be.undefined;
+        const imageEl = el.shadowRoot
+            ? (el.shadowRoot.querySelector('img') as HTMLImageElement)
+            : (el.querySelector('img') as HTMLImageElement);
+        expect(imageEl.hasAttribute('alt')).to.be.false;
+    });
+});