From f53ae70e6f49f73c71480809021e21d2ff9bcd85 Mon Sep 17 00:00:00 2001 From: Westbrook Johnson Date: Thu, 2 Apr 2020 18:28:15 -0400 Subject: [PATCH] feat(coachmark): add coachmark pattern --- packages/bundle/package.json | 1 + packages/bundle/src/index.ts | 1 + packages/bundle/tsconfig.json | 1 + packages/coachmark/README.md | 29 +++ packages/coachmark/package.json | 46 ++++ packages/coachmark/src/coachmark.css | 17 ++ packages/coachmark/src/coachmark.ts | 44 ++++ packages/coachmark/src/index.ts | 26 ++ packages/coachmark/src/spectrum-coachmark.css | 226 ++++++++++++++++++ packages/coachmark/src/spectrum-config.js | 44 ++++ .../coachmark/stories/coachmark.stories.ts | 36 +++ .../coachmark/test/benchmark/basic-test.ts | 19 ++ packages/coachmark/test/coachmark.test.ts | 31 +++ packages/coachmark/tsconfig.json | 9 + yarn.lock | 5 + 15 files changed, 535 insertions(+) create mode 100644 packages/coachmark/README.md create mode 100644 packages/coachmark/package.json create mode 100644 packages/coachmark/src/coachmark.css create mode 100644 packages/coachmark/src/coachmark.ts create mode 100644 packages/coachmark/src/index.ts create mode 100644 packages/coachmark/src/spectrum-coachmark.css create mode 100644 packages/coachmark/src/spectrum-config.js create mode 100644 packages/coachmark/stories/coachmark.stories.ts create mode 100644 packages/coachmark/test/benchmark/basic-test.ts create mode 100644 packages/coachmark/test/coachmark.test.ts create mode 100644 packages/coachmark/tsconfig.json diff --git a/packages/bundle/package.json b/packages/bundle/package.json index dea0fd805e..2602aeecbd 100644 --- a/packages/bundle/package.json +++ b/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", diff --git a/packages/bundle/src/index.ts b/packages/bundle/src/index.ts index e667b2de88..9df589ceb8 100644 --- a/packages/bundle/src/index.ts +++ b/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'; diff --git a/packages/bundle/tsconfig.json b/packages/bundle/tsconfig.json index 875729d6c0..c5e4e5f34a 100644 --- a/packages/bundle/tsconfig.json +++ b/packages/bundle/tsconfig.json @@ -15,6 +15,7 @@ { "path": "../card" }, { "path": "../checkbox" }, { "path": "../circleloader" }, + { "path": "../coachmark" }, { "path": "../dropdown" }, { "path": "../dropzone" }, { "path": "../icon" }, diff --git a/packages/coachmark/README.md b/packages/coachmark/README.md new file mode 100644 index 0000000000..2a426bc5d0 --- /dev/null +++ b/packages/coachmark/README.md @@ -0,0 +1,29 @@ +## Description + +An `` 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 + + + +``` + +## Quiet + +```html + + + +``` diff --git a/packages/coachmark/package.json b/packages/coachmark/package.json new file mode 100644 index 0000000000..566c54662d --- /dev/null +++ b/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" + } +} diff --git a/packages/coachmark/src/coachmark.css b/packages/coachmark/src/coachmark.css new file mode 100644 index 0000000000..7869128031 --- /dev/null +++ b/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; +} diff --git a/packages/coachmark/src/coachmark.ts b/packages/coachmark/src/coachmark.ts new file mode 100644 index 0000000000..5686d3da53 --- /dev/null +++ b/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` +
+
+
+ `; + } +} diff --git a/packages/coachmark/src/index.ts b/packages/coachmark/src/index.ts new file mode 100644 index 0000000000..7a45826587 --- /dev/null +++ b/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; + } +} diff --git a/packages/coachmark/src/spectrum-coachmark.css b/packages/coachmark/src/spectrum-coachmark.css new file mode 100644 index 0000000000..aa884fb4d4 --- /dev/null +++ b/packages/coachmark/src/spectrum-coachmark.css @@ -0,0 +1,226 @@ +/* stylelint-disable */ /* +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. + +THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +@keyframes pulse { + 0% { + -webkit-transform: scale( + var(--spectrum-coachmark-animation-indicator-keyframe-0-scale, 1) + ); + opacity: var( + --spectrum-coachmark-animation-indicator-keyframe-0-opacity, + 0 + ); + } + 50% { + -webkit-transform: scale( + var(--spectrum-coachmark-animation-indicator-keyframe-50-scale, 1.5) + ); + opacity: var( + --spectrum-coachmark-animation-indicator-keyframe-50-opacity, + 1 + ); + } + to { + -webkit-transform: scale( + var(--spectrum-coachmark-animation-indicator-keyframe-100-scale, 2) + ); + opacity: var( + --spectrum-coachmark-animation-indicator-keyframe-100-opacity, + 0 + ); + } +} +@keyframes pulse--quiet { + 0% { + -webkit-transform: scale( + var( + --spectrum-coachmark-quiet-animation-indicator-keyframe-0-scale, + 0.8 + ) + ); + opacity: var( + --spectrum-coachmark-animation-indicator-keyframe-0-opacity, + 0 + ); + } + 50% { + -webkit-transform: scale( + var(--spectrum-coachmark-animation-indicator-keyframe-50-scale, 1.5) + ); + opacity: var( + --spectrum-coachmark-animation-indicator-keyframe-50-opacity, + 1 + ); + } + to { + -webkit-transform: scale( + var(--spectrum-coachmark-animation-indicator-keyframe-100-scale, 2) + ); + opacity: var( + --spectrum-coachmark-animation-indicator-keyframe-100-opacity, + 0 + ); + } +} +:host { + /* .spectrum-CoachMarkIndicator */ + position: relative; + margin: var( + --spectrum-coachmark-indicator-gap, + var(--spectrum-global-dimension-size-75) + ); /* .spectrum-CoachMarkIndicator */ + min-width: calc( + var( + --spectrum-coachmark-indicator-ring-diameter, + var(--spectrum-global-dimension-size-200) + ) * 3 + ); + min-height: calc( + var( + --spectrum-coachmark-indicator-ring-diameter, + var(--spectrum-global-dimension-size-200) + ) * 3 + ); +} +.ring { + /* .spectrum-CoachMarkIndicator-ring */ + display: block; + position: absolute; + border-style: solid; + border-width: var( + --spectrum-coachmark-indicator-ring-border-size, + var(--spectrum-global-dimension-static-size-25) + ); + border-radius: 50%; /* .spectrum-CoachMarkIndicator-ring */ + top: calc( + var( + --spectrum-coachmark-indicator-ring-diameter, + var(--spectrum-global-dimension-size-200) + ) * 0.75 + ); + left: calc( + var( + --spectrum-coachmark-indicator-ring-diameter, + var(--spectrum-global-dimension-size-200) + ) * 0.75 + ); + width: var( + --spectrum-coachmark-indicator-ring-diameter, + var(--spectrum-global-dimension-size-200) + ); + height: var( + --spectrum-coachmark-indicator-ring-diameter, + var(--spectrum-global-dimension-size-200) + ); + animation: pulse + var(--spectrum-coachmark-animation-indicator-ring-duration, 3s) linear + infinite; /* .spectrum-CoachMarkIndicator-ring */ + border-color: var( + --spectrum-coachmark-indicator-ring-default-color, + var(--spectrum-alias-focus-color) + ); +} +.ring:nth-child(2) { + /* .spectrum-CoachMarkIndicator-ring:nth-child(2) */ + animation-delay: calc( + var(--spectrum-coachmark-animation-indicator-ring-duration, 3s) * + var( + --spectrum-coachmark-animation-inticator-ring-center-delay-multiple, + -0.66 + ) + ); +} +.ring:nth-child(3) { + /* .spectrum-CoachMarkIndicator-ring:nth-child(3) */ + animation-delay: calc( + var(--spectrum-coachmark-animation-indicator-ring-duration, 3s) * + var( + --spectrum-coachmark-animation-inticator-ring-outer-delay-multiple, + -1 + ) + ); +} +.ring:first-child { + /* .spectrum-CoachMarkIndicator-ring:first-child */ + animation-delay: calc( + var(--spectrum-coachmark-animation-indicator-ring-duration, 3s) * + var( + --spectrum-coachmark-animation-inticator-ring-inner-delay-multiple, + -0.5 + ) + ); +} +:host([quiet]) { + /* .spectrum-CoachMarkIndicator--quiet */ + min-width: calc( + var( + --spectrum-coachmark-quiet-indicator-ring-diameter, + var(--spectrum-global-dimension-size-100) + ) * 2.75 + ); + min-height: calc( + var( + --spectrum-coachmark-quiet-indicator-ring-diameter, + var(--spectrum-global-dimension-size-100) + ) * 2.75 + ); +} +:host([quiet]) .ring { + /* .spectrum-CoachMarkIndicator--quiet .spectrum-CoachMarkIndicator-ring */ + top: calc( + var( + --spectrum-coachmark-quiet-indicator-ring-diameter, + var(--spectrum-global-dimension-size-100) + ) * 0.75 + ); + left: calc( + var( + --spectrum-coachmark-quiet-indicator-ring-diameter, + var(--spectrum-global-dimension-size-100) + ) * 0.75 + ); + width: var( + --spectrum-coachmark-quiet-indicator-ring-diameter, + var(--spectrum-global-dimension-size-100) + ); + height: var( + --spectrum-coachmark-quiet-indicator-ring-diameter, + var(--spectrum-global-dimension-size-100) + ); + animation: pulse--quiet + var(--spectrum-coachmark-animation-indicator-ring-duration, 3s) linear + infinite; +} +:host([quiet]) .ring:first-child { + /* .spectrum-CoachMarkIndicator--quiet .spectrum-CoachMarkIndicator-ring:first-child */ + animation-delay: calc( + var(--spectrum-coachmark-animation-indicator-ring-duration, 3s) * + var( + --spectrum-coachmark-quiet-animation-inticator-ring-inner-delay-multiple, + -0.33 + ) + ); +} +:host([variant='light']) .ring { + /* .spectrum-CoachMarkIndicator--light .spectrum-CoachMarkIndicator-ring */ + border-color: var( + --spectrum-coachmark-indicator-ring-low-contrast-color, + var(--spectrum-global-color-gray-50) + ); +} +:host([variant='dark']) .ring { + /* .spectrum-CoachMarkIndicator--dark .spectrum-CoachMarkIndicator-ring */ + border-color: var( + --spectrum-coachmark-indicator-ring-high-contrast-color, + var(--spectrum-global-color-gray-900) + ); +} diff --git a/packages/coachmark/src/spectrum-config.js b/packages/coachmark/src/spectrum-config.js new file mode 100644 index 0000000000..04106776f1 --- /dev/null +++ b/packages/coachmark/src/spectrum-config.js @@ -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. +*/ + +module.exports = { + spectrum: 'coachmark', + components: [ + { + name: 'coachmark', + host: { + selector: '.spectrum-CoachMarkIndicator', + }, + classes: [ + { + selector: '.spectrum-CoachMarkIndicator-ring', + name: 'ring', + }, + ], + attributes: [ + { + type: 'boolean', + selector: '.spectrum-CoachMarkIndicator--quiet', + name: 'quiet', + }, + { + type: 'enum', + name: 'variant', + values: [ + '.spectrum-CoachMarkIndicator--dark', + '.spectrum-CoachMarkIndicator--light', + ], + }, + ], + }, + ], +}; diff --git a/packages/coachmark/stories/coachmark.stories.ts b/packages/coachmark/stories/coachmark.stories.ts new file mode 100644 index 0000000000..98a09ffa7e --- /dev/null +++ b/packages/coachmark/stories/coachmark.stories.ts @@ -0,0 +1,36 @@ +/* +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, TemplateResult } from 'lit-html'; + +import '../'; + +export default { + title: 'Coachmark', + component: 'sp-coachmark', +}; + +export const Default = (): TemplateResult => { + return html` + + + + `; +}; + +export const quiet = (): TemplateResult => { + return html` + + + + `; +}; diff --git a/packages/coachmark/test/benchmark/basic-test.ts b/packages/coachmark/test/benchmark/basic-test.ts new file mode 100644 index 0000000000..29a75cf82f --- /dev/null +++ b/packages/coachmark/test/benchmark/basic-test.ts @@ -0,0 +1,19 @@ +/* +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 '../../'; +import { html } from 'lit-html'; +import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; + +measureFixtureCreation(html` + +`); diff --git a/packages/coachmark/test/coachmark.test.ts b/packages/coachmark/test/coachmark.test.ts new file mode 100644 index 0000000000..b31febb868 --- /dev/null +++ b/packages/coachmark/test/coachmark.test.ts @@ -0,0 +1,31 @@ +/* +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 } from 'lit-element'; +import { fixture, elementUpdated, expect } from '@open-wc/testing'; + +import '..'; +import { Coachmark } from '..'; + +describe('Coachmark', () => { + it('loads default coachmark accessibly', async () => { + const el = await fixture( + html` + + ` + ); + + await elementUpdated(el); + + expect(el).to.be.accessible(); + }); +}); diff --git a/packages/coachmark/tsconfig.json b/packages/coachmark/tsconfig.json new file mode 100644 index 0000000000..0ba9bb6124 --- /dev/null +++ b/packages/coachmark/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "composite": true, + "outDir": "./lib", + "rootDir": "./src" + }, + "include": ["src/*.ts"] +} diff --git a/yarn.lock b/yarn.lock index 5d13eb0422..4d993ec2a2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2601,6 +2601,11 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/circleloader/-/circleloader-2.0.5.tgz#7d4d248d1cf1257819b1ecc9b04e1a851f0ca459" integrity sha512-LrQn+S7ZwTUfOLi3wDuZQDoh3doQK/oIqMxcIrmSD/A4QAKKsetbv+GVjCYelci+EJrYLG9P4215eOftsooVNA== +"@spectrum-css/coachmark@^2.0.0": + version "2.0.5" + resolved "https://registry.yarnpkg.com/@spectrum-css/coachmark/-/coachmark-2.0.5.tgz#a8d175c2398146ec9ce8e2e6ce31795774b03267" + integrity sha512-jINN4U+XSVnfD0AbHGJ8I3kZYkb/EnR3smdMYZIwAOMQTuh7e86fH8iseErtqy4sfyLxGE6XG0Y8slAX7R0eYw== + "@spectrum-css/commons@^2.1.0": version "2.1.0" resolved "https://registry.yarnpkg.com/@spectrum-css/commons/-/commons-2.1.0.tgz#d50726a31631e10fad0d697ac7c0a918b005ec6f"