feat(coachmark): add coachmark pattern

packages/bundle/package.json

@@ -46,6 +46,7 @@
         "@spectrum-web-components/card": "^0.3.1",
         "@spectrum-web-components/checkbox": "^0.2.10",
         "@spectrum-web-components/circleloader": "^0.1.3",
+        "@spectrum-web-components/coachmark": "^0.0.1",
         "@spectrum-web-components/dropdown": "^0.4.2",
         "@spectrum-web-components/dropzone": "^0.2.4",
         "@spectrum-web-components/icon": "^0.4.4",

packages/bundle/src/index.ts

@@ -17,6 +17,7 @@ export * from '@spectrum-web-components/button';
 export * from '@spectrum-web-components/card';
 export * from '@spectrum-web-components/checkbox';
 export * from '@spectrum-web-components/circleloader';
+export * from '@spectrum-web-components/coachmark';
 export * from '@spectrum-web-components/dropdown';
 export * from '@spectrum-web-components/dropzone';
 export * from '@spectrum-web-components/icon';

packages/bundle/tsconfig.json

@@ -15,6 +15,7 @@
         { "path": "../card" },
         { "path": "../checkbox" },
         { "path": "../circleloader" },
+        { "path": "../coachmark" },
         { "path": "../dropdown" },
         { "path": "../dropzone" },
         { "path": "../icon" },

packages/coachmark/README.md

@@ -0,0 +1,29 @@
+## Description
+
+An `<sp-coachmark>` element can be used to bring added attention to specific parts of your page.
+
+### Installation
+
+```
+npm install @spectrum-web-components/coachmark
+
+# or
+
+yarn add @spectrum-web-components/coachmark
+```
+
+## Standard
+
+```html
+<sp-coachmark></sp-coachmark>
+<sp-coachmark variant="dark"></sp-coachmark>
+<sp-coachmark variant="light"></sp-coachmark>
+```
+
+## Quiet
+
+```html
+<sp-coachmark quiet></sp-coachmark>
+<sp-coachmark quiet variant="dark"></sp-coachmark>
+<sp-coachmark quiet variant="light"></sp-coachmark>
+```

packages/coachmark/package.json

@@ -0,0 +1,46 @@
+{
+    "name": "@spectrum-web-components/coachmark",
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/coachmark"
+    },
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "homepage": "https://adobe.github.io/spectrum-web-components/components/coachmark",
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
+    ],
+    "version": "0.0.1",
+    "description": "",
+    "main": "lib/index.js",
+    "module": "lib/index.js",
+    "type": "module",
+    "files": [
+        "custom-elements.json",
+        "/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/coachmark": "^2.0.0"
+    },
+    "dependencies": {
+        "tslib": "^1.10.0"
+    }
+}

packages/coachmark/src/coachmark.css

@@ -0,0 +1,17 @@
+/*
+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 './spectrum-coachmark.css';
+
+:host {
+    display: inline-block;
+}

packages/coachmark/src/coachmark.ts

@@ -0,0 +1,44 @@
+/*
+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,
+    LitElement,
+    CSSResultArray,
+    TemplateResult,
+    property,
+} from 'lit-element';
+
+import styles from './coachmark.css';
+
+/**
+ * @element sp-coachmark
+ */
+export class Coachmark extends LitElement {
+    public static get styles(): CSSResultArray {
+        return [styles];
+    }
+
+    @property({ type: Boolean, reflect: true })
+    public quiet = false;
+
+    @property({ reflect: true })
+    public variant: 'dark' | 'light' | '' = '';
+
+    protected render(): TemplateResult {
+        return html`
+            <div class="ring"></div>
+            <div class="ring"></div>
+            <div class="ring"></div>
+        `;
+    }
+}

packages/coachmark/src/index.ts

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