feat(status-light): add status-light component

packages/bundle/src/index.ts

@@ -33,6 +33,7 @@ export * from '@spectrum-web-components/radio-group';
 export * from '@spectrum-web-components/search';
 export * from '@spectrum-web-components/sidenav';
 export * from '@spectrum-web-components/slider';
+export * from '@spectrum-web-components/status-light';
 export * from '@spectrum-web-components/switch';
 export * from '@spectrum-web-components/tab';
 export * from '@spectrum-web-components/tab-list';

packages/bundle/tsconfig.json

@@ -32,6 +32,7 @@
         { "path": "../search" },
         { "path": "../sidenav" },
         { "path": "../slider" },
+        { "path": "../status-light" },
         { "path": "../switch" },
         { "path": "../tab" },
         { "path": "../tab-list" },

packages/status-light/README.md

@@ -0,0 +1,27 @@
+## Overview
+
+An **sp-status-light** is a great way to convey semantic meaning, such as statuses and categories.
+
+## Example
+
+```html
+<sp-status-light variant="positive">approved</sp-status-light>
+```
+
+### Variants
+
+There are many variants to choose from in Spectrum. The `variant`
+attribute controls the main variant of the status light, and `positive` being the default. Following are the supported variants:
+
+-   positive
+-   negative
+-   notice
+-   info
+-   neutral
+-   yellow
+-   fuchsia
+-   indigo
+-   seafoam
+-   chartreuse
+-   magenta
+-   purple

packages/status-light/package.json

@@ -0,0 +1,41 @@
+{
+    "name": "@spectrum-web-components/status-light",
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/status-light"
+    },
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "homepage": "https://adobe.github.io/spectrum-web-components/components/status-light",
+    "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"
+    },
+    "dependencies": {
+        "tslib": "^1.10.0"
+    }
+}

packages/status-light/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 './status-light.js';
+
+import { StatusLight } from './status-light.js';
+
+/* istanbul ignore else */
+if (!customElements.get('sp-status-light')) {
+    customElements.define('sp-status-light', StatusLight);
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-status-light': StatusLight;
+    }
+}

packages/status-light/src/spectrum-config.js

@@ -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.
+*/
+
+module.exports = {
+    spectrum: 'statuslight',
+    components: [
+        {
+            name: 'status-light',
+            host: {
+                selector: '.spectrum-StatusLight',
+                shadowSelector: '#root',
+            },
+            attributes: [
+                {
+                    type: 'boolean',
+                    selector: '.is-disabled',
+                    name: 'disabled',
+                },
+                {
+                    type: 'enum',
+                    name: 'variant',
+                    values: [
+                        '.spectrum-StatusLight--negative',
+                        '.spectrum-StatusLight--notice',
+                        '.spectrum-StatusLight--positive',
+                        '.spectrum-StatusLight--info',
+                        '.spectrum-StatusLight--neutral',
+                        '.spectrum-StatusLight--yellow',
+                        '.spectrum-StatusLight--fuchsia',
+                        '.spectrum-StatusLight--indigo',
+                        '.spectrum-StatusLight--seafoam',
+                        '.spectrum-StatusLight--chartreuse',
+                        '.spectrum-StatusLight--magenta',
+                        '.spectrum-StatusLight--purple',
+                    ],
+                },
+            ],
+        },
+    ],
+};

packages/status-light/src/spectrum-status-light.css

@@ -0,0 +1,182 @@
+/* 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 */
+#root {
+    /* .spectrum-StatusLight */
+    min-height: var(
+        --spectrum-statuslight-height,
+        var(--spectrum-global-dimension-size-400)
+    );
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    -ms-flex-align: start;
+    align-items: flex-start;
+
+    padding: var(--spectrum-global-dimension-size-75) 0px;
+    box-sizing: border-box;
+
+    font-size: var(
+        --spectrum-statuslight-text-size,
+        var(--spectrum-global-dimension-font-size-100)
+    );
+    font-weight: var(--spectrum-statuslight-text-font-weight, 400);
+    /* .spectrum-StatusLight */
+    color: var(
+        --spectrum-statuslight-text-color,
+        var(--spectrum-global-color-gray-800)
+    );
+}
+#root::before {
+    /* .spectrum-StatusLight::before */
+    content: '';
+    -ms-flex-positive: 0;
+    flex-grow: 0;
+    -ms-flex-negative: 0;
+    flex-shrink: 0;
+    display: inline-block;
+    width: var(
+        --spectrum-statuslight-dot-size,
+        var(--spectrum-global-dimension-size-100)
+    );
+    height: var(
+        --spectrum-statuslight-dot-size,
+        var(--spectrum-global-dimension-size-100)
+    );
+    border-radius: 50%;
+    margin: var(--spectrum-global-dimension-size-75)
+        var(
+            --spectrum-statuslight-text-gap,
+            var(--spectrum-global-dimension-size-150)
+        );
+}
+:host([variant='neutral']) #root {
+    /* .spectrum-StatusLight--neutral */
+    font-style: italic;
+    /* .spectrum-StatusLight--neutral */
+    color: var(
+        --spectrum-statuslight-neutral-text-color,
+        var(--spectrum-global-color-gray-700)
+    );
+}
+#root[disabled],
+:host([disabled]) #root {
+    /* .spectrum-StatusLight[disabled],
+   * .spectrum-StatusLight.is-disabled */
+    color: var(
+        --spectrum-statuslight-text-color-disabled,
+        var(--spectrum-global-color-gray-500)
+    );
+}
+#root[disabled]::before,
+:host([disabled]) #root::before {
+    /* .spectrum-StatusLight[disabled]::before,
+   * .spectrum-StatusLight.is-disabled::before */
+    background-color: var(
+        --spectrum-statuslight-dot-color-disabled,
+        var(--spectrum-global-color-gray-400)
+    );
+}
+:host([variant='negative']) #root::before {
+    /* .spectrum-StatusLight--negative::before */
+    background-color: var(
+        --spectrum-statuslight-negative-dot-color,
+        var(--spectrum-global-color-red-400)
+    );
+}
+:host([variant='notice']) #root::before {
+    /* .spectrum-StatusLight--notice::before */
+    background-color: var(
+        --spectrum-statuslight-notice-dot-color,
+        var(--spectrum-global-color-orange-400)
+    );
+}
+:host([variant='positive']) #root::before {
+    /* .spectrum-StatusLight--positive::before */
+    background-color: var(
+        --spectrum-statuslight-positive-dot-color,
+        var(--spectrum-global-color-green-400)
+    );
+}
+:host([variant='info']) #root::before,
+.spectrum-StatusLight--active::before {
+    /* .spectrum-StatusLight--info::before,
+   * .spectrum-StatusLight--active::before */
+    background-color: var(
+        --spectrum-statuslight-info-dot-color,
+        var(--spectrum-global-color-blue-400)
+    );
+}
+:host([variant='neutral']) #root::before {
+    /* .spectrum-StatusLight--neutral::before */
+    background-color: var(
+        --spectrum-statuslight-neutral-dot-color,
+        var(--spectrum-global-color-gray-500)
+    );
+}
+.spectrum-StatusLight--celery::before {
+    /* .spectrum-StatusLight--celery::before */
+    background-color: var(
+        --spectrum-statuslight-dot-color-label-celery,
+        var(--spectrum-global-color-celery-400)
+    );
+}
+:host([variant='yellow']) #root::before {
+    /* .spectrum-StatusLight--yellow::before */
+    background-color: var(
+        --spectrum-statuslight-dot-color-label-yellow,
+        var(--spectrum-global-color-yellow-400)
+    );
+}
+:host([variant='fuchsia']) #root::before {
+    /* .spectrum-StatusLight--fuchsia::before */
+    background-color: var(
+        --spectrum-statuslight-dot-color-label-fuchsia,
+        var(--spectrum-global-color-fuchsia-400)
+    );
+}
+:host([variant='indigo']) #root::before {
+    /* .spectrum-StatusLight--indigo::before */
+    background-color: var(
+        --spectrum-statuslight-dot-color-label-indigo,
+        var(--spectrum-global-color-indigo-400)
+    );
+}
+:host([variant='seafoam']) #root::before {
+    /* .spectrum-StatusLight--seafoam::before */
+    background-color: var(
+        --spectrum-statuslight-dot-color-label-seafoam,
+        var(--spectrum-global-color-seafoam-400)
+    );
+}
+:host([variant='chartreuse']) #root::before {
+    /* .spectrum-StatusLight--chartreuse::before */
+    background-color: var(
+        --spectrum-statuslight-dot-color-label-chartreuse,
+        var(--spectrum-global-color-chartreuse-400)
+    );
+}
+:host([variant='magenta']) #root::before {
+    /* .spectrum-StatusLight--magenta::before */
+    background-color: var(
+        --spectrum-statuslight-dot-color-label-magenta,
+        var(--spectrum-global-color-magenta-400)
+    );
+}
+:host([variant='purple']) #root::before {
+    /* .spectrum-StatusLight--purple::before */
+    background-color: var(
+        --spectrum-statuslight-dot-color-label-purple,
+        var(--spectrum-global-color-purple-400)
+    );
+}

packages/status-light/src/status-light.css

@@ -0,0 +1,13 @@
+/*
+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-status-light.css';