feat(color-loupe): add color-loupe pattern

adobe · Mar 5, 2021 · e2f0d15 · e2f0d15
1 parent 625f6fe
commit e2f0d15
Show file tree

Hide file tree

Showing 12 changed files with 396 additions and 0 deletions.
diff --git a/packages/color-loupe/README.md b/packages/color-loupe/README.md
@@ -0,0 +1,30 @@
+## Description
+
+An `<sp-color-loupe>` shows the output color that would otherwise be covered by a cursor, stylus, or finger during color selection.
+
+### Usage
+
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/color-loupe?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/color-loupe)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/color-loupe?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/color-loupe)
+
+```
+yarn add @spectrum-web-components/color-loupe
+```
+
+Import the side effectful registration of `<sp-color-loupe>` via:
+
+```
+import '@spectrum-web-components/color-loupe/sp-color-loupe.js';
+```
+
+When looking to leverage the `ColorLoupe` base class as a type and/or for extension purposes, do so via:
+
+```
+import { ColorLoupe } from '@spectrum-web-components/color-loupe';
+```
+
+## Example
+
+```html
+<sp-color-loupe open style="position: relative"></sp-color-loupe>
+```
diff --git a/packages/color-loupe/package.json b/packages/color-loupe/package.json
@@ -0,0 +1,56 @@
+{
+    "name": "@spectrum-web-components/color-loupe",
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/color-loupe"
+    },
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "homepage": "https://adobe.github.io/spectrum-web-components/components/color-loupe",
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
+    ],
+    "version": "0.0.1",
+    "description": "",
+    "main": "src/index.js",
+    "module": "src/index.js",
+    "type": "module",
+    "exports": {
+        "./src/": "./src/",
+        "./custom-elements.json": "./custom-elements.json",
+        "./package.json": "./package.json",
+        "./sp-color-loupe": "./sp-color-loupe.js",
+        "./sp-color-loupe.js": "./sp-color-loupe.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/colorloupe": "^1.0.0-beta.3"
+    },
+    "dependencies": {
+        "@spectrum-web-components/base": "^0.3.0",
+        "tslib": "^2.0.0"
+    }
+}
diff --git a/packages/color-loupe/sp-color-loupe.ts b/packages/color-loupe/sp-color-loupe.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 { ColorLoupe } from './src/ColorLoupe.js';
+
+customElements.define('sp-color-loupe', ColorLoupe);
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-color-loupe': ColorLoupe;
+    }
+}
diff --git a/packages/color-loupe/src/ColorLoupe.ts b/packages/color-loupe/src/ColorLoupe.ts
@@ -0,0 +1,54 @@
+/*
+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,
+} from '@spectrum-web-components/base';
+
+import styles from './color-loupe.css.js';
+
+/**
+ * @element sp-color-loupe
+ */
+export class ColorLoupe extends SpectrumElement {
+    public static get styles(): CSSResultArray {
+        return [styles];
+    }
+
+    @property({ type: Boolean, reflect: true })
+    public open = false;
+
+    @property({ type: String })
+    public color = 'rgba(255, 0, 0, 0.5)';
+
+    protected render(): TemplateResult {
+        return html`
+            <svg>
+                <g transform="translate(1 1)">
+                    <path
+                        class="inner"
+                        d="M24,0A24,24,0,0,1,48,24c0,16.255-24,40-24,40S0,40.255,0,24A24,24,0,0,1,24,0Z"
+                        fill=${this.color}
+                    />
+                    <path
+                        class="outer"
+                        d="M24,2A21.98,21.98,0,0,0,2,24c0,6.2,4,14.794,11.568,24.853A144.233,144.233,0,0,0,24,61.132,144.085,144.085,0,0,0,34.4,48.893C41.99,38.816,46,30.209,46,24A21.98,21.98,0,0,0,24,2m0-2A24,24,0,0,1,48,24c0,16.255-24,40-24,40S0,40.255,0,24A24,24,0,0,1,24,0Z"
+                    />
+                </g>
+            </svg>
+        `;
+    }
+}
diff --git a/packages/color-loupe/src/color-loupe.css b/packages/color-loupe/src/color-loupe.css
@@ -0,0 +1,18 @@
+/*
+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-color-loupe.css';
+
+svg {
+    width: inherit;
+    height: inherit;
+}
diff --git a/packages/color-loupe/src/index.ts b/packages/color-loupe/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 './ColorLoupe.js';
diff --git a/packages/color-loupe/src/spectrum-color-loupe.css b/packages/color-loupe/src/spectrum-color-loupe.css
@@ -0,0 +1,77 @@
+/* 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 */
+:host {
+    /* .spectrum-ColorLoupe */
+    width: calc(
+        var(
+                --spectrum-colorloupe-width,
+                var(--spectrum-global-dimension-static-size-600)
+            ) +
+            var(
+                --spectrum-colorhandle-inner-border-size,
+                var(--spectrum-global-dimension-static-size-25)
+            ) * 2
+    );
+    height: calc(
+        var(
+                --spectrum-colorloupe-height,
+                var(--spectrum-global-dimension-static-size-800)
+            ) +
+            var(
+                --spectrum-colorhandle-inner-border-size,
+                var(--spectrum-global-dimension-static-size-25)
+            ) * 2
+    );
+    position: absolute;
+    transform: translateY(
+        var(--spectrum-global-dimension-static-size-100, 8px)
+    );
+    opacity: 0;
+    transform-origin: bottom center;
+    bottom: calc(50% + var(--spectrum-global-dimension-static-size-200, 16px));
+    left: calc(
+        50% -
+            (
+                var(
+                        --spectrum-colorloupe-width,
+                        var(--spectrum-global-dimension-static-size-600)
+                    ) +
+                    var(
+                        --spectrum-colorhandle-inner-border-size,
+                        var(--spectrum-global-dimension-static-size-25)
+                    ) * 2
+            ) / 2
+    );
+    transition: transform 0.1s ease-in-out, opacity 125ms ease-in-out;
+    pointer-events: none;
+}
+:host([open]) {
+    /* .spectrum-ColorLoupe.is-open */
+    transform: translate(0);
+    opacity: 1;
+}
+.outer {
+    /* .spectrum-ColorLoupe-outer */
+    stroke-width: var(
+        --spectrum-colorloupe-outer-border-size,
+        var(--spectrum-global-dimension-static-size-10)
+    );
+    fill: var(
+        --spectrum-colorloupe-inner-border-color,
+        var(--spectrum-global-color-static-white)
+    );
+    stroke: var(
+        --spectrum-colorloupe-outer-border-color,
+        rgba(50, 50, 50, 0.1)
+    );
+}
diff --git a/packages/color-loupe/src/spectrum-config.js b/packages/color-loupe/src/spectrum-config.js
@@ -0,0 +1,42 @@
+/*
+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: 'colorloupe',
+    components: [
+        {
+            name: 'color-loupe',
+            host: {
+                selector: '.spectrum-ColorLoupe',
+            },
+            attributes: [
+                {
+                    type: 'boolean',
+                    name: 'open',
+                    selector: '.is-open',
+                },
+            ],
+            classes: [
+                {
+                    selector: '.spectrum-ColorLoupe-outer',
+                    name: 'outer',
+                },
+                {
+                    selector: '.spectrum-ColorLoupe-inner',
+                    name: 'inner',
+                },
+            ],
+        },
+    ],
+};
+
+export default config;
diff --git a/packages/color-loupe/stories/color-loupe.stories.ts b/packages/color-loupe/stories/color-loupe.stories.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.
+*/
+
+import { html, TemplateResult } from '@spectrum-web-components/base';
+
+import '../sp-color-loupe.js';
+
+export default {
+    title: 'Color/Loupe',
+    component: 'sp-color-loupe',
+};
+
+export const open = (): TemplateResult => {
+    return html`
+        <sp-color-loupe open></sp-color-loupe>
+    `;
+};
diff --git a/packages/color-loupe/test/benchmark/basic-test.ts b/packages/color-loupe/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 '@spectrum-web-components/color-loupe/sp-color-loupe.js';
+import { html } from '@spectrum-web-components/base';
+import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+
+measureFixtureCreation(html`
+    <sp-color-loupe open></sp-color-loupe>
+`);
diff --git a/packages/color-loupe/test/color-loupe.test.ts b/packages/color-loupe/test/color-loupe.test.ts
@@ -0,0 +1,30 @@
+/*
+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 { fixture, elementUpdated, expect, html } from '@open-wc/testing';
+
+import '../sp-color-loupe.js';
+import { ColorLoupe } from '..';
+
+describe('ColorLoupe', () => {
+    it('loads default color-loupe accessibly', async () => {
+        const el = await fixture<ColorLoupe>(
+            html`
+                <sp-color-loupe></sp-color-loupe>
+            `
+        );
+
+        await elementUpdated(el);
+
+        await expect(el).to.be.accessible();
+    });
+});