From 380f454d5a1b29c2ed69aacec9d1a76fbac96846 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Mon, 16 Dec 2024 22:27:42 +0000 Subject: [PATCH 01/36] Adds scaffolding files for uui-copy npm run new-package --- package-lock.json | 12 +++++++ packages/uui-copy/README.md | 31 ++++++++++++++++ packages/uui-copy/lib/index.ts | 1 + packages/uui-copy/lib/uui-copy.element.ts | 28 +++++++++++++++ packages/uui-copy/lib/uui-copy.story.ts | 24 +++++++++++++ packages/uui-copy/lib/uui-copy.test.ts | 20 +++++++++++ packages/uui-copy/package.json | 44 +++++++++++++++++++++++ packages/uui-copy/rollup.config.js | 5 +++ packages/uui-copy/tsconfig.json | 17 +++++++++ packages/uui/lib/index.ts | 2 ++ 10 files changed, 184 insertions(+) create mode 100644 packages/uui-copy/README.md create mode 100644 packages/uui-copy/lib/index.ts create mode 100644 packages/uui-copy/lib/uui-copy.element.ts create mode 100644 packages/uui-copy/lib/uui-copy.story.ts create mode 100644 packages/uui-copy/lib/uui-copy.test.ts create mode 100644 packages/uui-copy/package.json create mode 100644 packages/uui-copy/rollup.config.js create mode 100644 packages/uui-copy/tsconfig.json diff --git a/package-lock.json b/package-lock.json index 72bb9d4e4..268855ff8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4964,6 +4964,10 @@ "resolved": "packages/uui-combobox-list", "link": true }, + "node_modules/@umbraco-ui/uui-copy": { + "resolved": "packages/uui-copy", + "link": true + }, "node_modules/@umbraco-ui/uui-css": { "resolved": "packages/uui-css", "link": true @@ -24129,6 +24133,14 @@ "@umbraco-ui/uui-base": "1.12.2" } }, + "packages/uui-copy": { + "name": "@umbraco-ui/uui-copy", + "version": "0.0.0", + "license": "MIT", + "dependencies": { + "@umbraco-ui/uui-base": "1.12.2" + } + }, "packages/uui-css": { "name": "@umbraco-ui/uui-css", "version": "1.12.1", diff --git a/packages/uui-copy/README.md b/packages/uui-copy/README.md new file mode 100644 index 000000000..d8d052dc7 --- /dev/null +++ b/packages/uui-copy/README.md @@ -0,0 +1,31 @@ +# uui-copy + +![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-copy?logoColor=%231B264F) + +Umbraco style copy component. + +## Installation + +### ES imports + +```zsh +npm i @umbraco-ui/uui-copy +``` + +Import the registration of `` via: + +```javascript +import '@umbraco-ui/uui-copy'; +``` + +When looking to leverage the `UUICopyElement` base class as a type and/or for extension purposes, do so via: + +```javascript +import { UUICopyElement } from '@umbraco-ui/uui-copy'; +``` + +## Usage + +```html + +``` diff --git a/packages/uui-copy/lib/index.ts b/packages/uui-copy/lib/index.ts new file mode 100644 index 000000000..abf8d0993 --- /dev/null +++ b/packages/uui-copy/lib/index.ts @@ -0,0 +1 @@ +export * from './uui-copy.element'; diff --git a/packages/uui-copy/lib/uui-copy.element.ts b/packages/uui-copy/lib/uui-copy.element.ts new file mode 100644 index 000000000..d33800714 --- /dev/null +++ b/packages/uui-copy/lib/uui-copy.element.ts @@ -0,0 +1,28 @@ +import { defineElement } from '@umbraco-ui/uui-base/lib/registration'; +import { css, html, LitElement } from 'lit'; + +/** + * @element uui-copy + */ +@defineElement('uui-copy') +export class UUICopyElement extends LitElement { + static styles = [ + css` + :host { + /* Styles goes here */ + } + `, + ]; + + render(){ + return html` + Markup goes here + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'uui-copy': UUICopyElement; + } +} diff --git a/packages/uui-copy/lib/uui-copy.story.ts b/packages/uui-copy/lib/uui-copy.story.ts new file mode 100644 index 000000000..d8598b1ad --- /dev/null +++ b/packages/uui-copy/lib/uui-copy.story.ts @@ -0,0 +1,24 @@ +import type { Meta, StoryObj } from '@storybook/web-components'; + +import './uui-copy.element'; +import type { UUICopyElement } from './uui-copy.element'; +import readme from '../README.md?raw'; + +const meta: Meta = { + id: 'uui-copy', + title: 'Copy', + component: 'uui-copy', + parameters: { + readme: { markdown: readme }, + docs: { + source: { + code: ``, + }, + }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Overview: Story = {}; diff --git a/packages/uui-copy/lib/uui-copy.test.ts b/packages/uui-copy/lib/uui-copy.test.ts new file mode 100644 index 000000000..cd83c94de --- /dev/null +++ b/packages/uui-copy/lib/uui-copy.test.ts @@ -0,0 +1,20 @@ +import { html, fixture, expect } from '@open-wc/testing'; +import { UUICopyElement } from './uui-copy.element'; + +describe('UUICopyElement', () => { + let element: UUICopyElement; + + beforeEach(async () => { + element = await fixture( + html` ` + ); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UUICopyElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(); + }); +}); \ No newline at end of file diff --git a/packages/uui-copy/package.json b/packages/uui-copy/package.json new file mode 100644 index 000000000..c6ab21ceb --- /dev/null +++ b/packages/uui-copy/package.json @@ -0,0 +1,44 @@ +{ + "name": "@umbraco-ui/uui-copy", + "version": "0.0.0", + "license": "MIT", + "keywords": [ + "Umbraco", + "Custom elements", + "Web components", + "UI", + "Lit", + "Copy" + ], + "description": "Umbraco UI copy component", + "repository": { + "type": "git", + "url": "https://github.com/umbraco/Umbraco.UI.git", + "directory": "packages/uui-copy" + }, + "bugs": { + "url": "https://github.com/umbraco/Umbraco.UI/issues" + }, + "main": "./lib/index.js", + "module": "./lib/index.js", + "types": "./lib/index.d.ts", + "type": "module", + "customElements": "custom-elements.json", + "files": [ + "lib/**/*.d.ts", + "lib/**/*.js", + "custom-elements.json" + ], + "dependencies": { + "@umbraco-ui/uui-base": "1.12.2" + }, + "scripts": { + "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js", + "clean": "tsc --build --clean && rimraf -g dist lib/*.js lib/**/*.js *.tgz lib/**/*.d.ts custom-elements.json", + "analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json" + }, + "publishConfig": { + "access": "public" + }, + "homepage": "https://uui.umbraco.com/?path=/story/uui-copy" +} diff --git a/packages/uui-copy/rollup.config.js b/packages/uui-copy/rollup.config.js new file mode 100644 index 000000000..12891d16a --- /dev/null +++ b/packages/uui-copy/rollup.config.js @@ -0,0 +1,5 @@ +import { UUIProdConfig } from '../rollup-package.config.mjs'; + +export default UUIProdConfig({ + entryPoints: ['index'] +}); diff --git a/packages/uui-copy/tsconfig.json b/packages/uui-copy/tsconfig.json new file mode 100644 index 000000000..40d176776 --- /dev/null +++ b/packages/uui-copy/tsconfig.json @@ -0,0 +1,17 @@ +// Don't edit this file directly. It is generated by /scripts/generate-ts-config.js + +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "./lib", + "rootDir": "./lib", + "composite": true + }, + "include": ["./**/*.ts"], + "exclude": ["./**/*.test.ts", "./**/*.story.ts"], + "references": [ + { + "path": "../uui-base" + } + ] +} diff --git a/packages/uui/lib/index.ts b/packages/uui/lib/index.ts index 7a6290236..e4b10581d 100644 --- a/packages/uui/lib/index.ts +++ b/packages/uui/lib/index.ts @@ -80,3 +80,5 @@ export * from '@umbraco-ui/uui-toast-notification-layout/lib'; export * from '@umbraco-ui/uui-toast-notification/lib'; export * from '@umbraco-ui/uui-toggle/lib'; export * from '@umbraco-ui/uui-visually-hidden/lib'; + +export * from '@umbraco-ui/uui-copy/lib/index.js'; \ No newline at end of file From 9620a66602c73a6a158318c906ad703b8d4ad4a7 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Mon, 23 Dec 2024 23:16:09 +0000 Subject: [PATCH 02/36] Adds first attempt at uui-copy --- packages/uui-copy/README.md | 2 +- packages/uui-copy/lib/UUICopyEvent.ts | 14 ++ packages/uui-copy/lib/uui-copy.element.ts | 146 ++++++++++++++++-- packages/uui-copy/lib/uui-copy.story.ts | 175 +++++++++++++++++++++- packages/uui-copy/lib/uui-copy.test.ts | 6 +- 5 files changed, 323 insertions(+), 20 deletions(-) create mode 100644 packages/uui-copy/lib/UUICopyEvent.ts diff --git a/packages/uui-copy/README.md b/packages/uui-copy/README.md index d8d052dc7..e85f16830 100644 --- a/packages/uui-copy/README.md +++ b/packages/uui-copy/README.md @@ -27,5 +27,5 @@ import { UUICopyElement } from '@umbraco-ui/uui-copy'; ## Usage ```html - + ``` diff --git a/packages/uui-copy/lib/UUICopyEvent.ts b/packages/uui-copy/lib/UUICopyEvent.ts new file mode 100644 index 000000000..7fc82da5e --- /dev/null +++ b/packages/uui-copy/lib/UUICopyEvent.ts @@ -0,0 +1,14 @@ +import { UUIEvent } from '@umbraco-ui/uui-base/lib/events'; +import { UUICopyElement } from './uui-copy.element'; + +export class UUICopyEvent extends UUIEvent<{ text: string }, UUICopyElement> { + public static readonly COPIED: string = 'copied'; + public static readonly COPYING: string = 'copying'; + + constructor(evName: string, eventInit: any | null = {}) { + super(evName, { + ...{ bubbles: true }, + ...eventInit, + }); + } +} diff --git a/packages/uui-copy/lib/uui-copy.element.ts b/packages/uui-copy/lib/uui-copy.element.ts index d33800714..304b478c4 100644 --- a/packages/uui-copy/lib/uui-copy.element.ts +++ b/packages/uui-copy/lib/uui-copy.element.ts @@ -1,24 +1,152 @@ import { defineElement } from '@umbraco-ui/uui-base/lib/registration'; import { css, html, LitElement } from 'lit'; +import { property } from 'lit/decorators.js'; +import { UUIButtonElement } from '@umbraco-ui/uui-button/lib'; +import { UUICopyEvent } from './UUICopyEvent'; /** + * @summary A button to trigger text content to be copied to the clipboard + * Inspired by shoelace.style copy button * @element uui-copy + * @dependency uui-button + * @dependancy uui-icon + * @fires {UUICopyEvent} copying - Fires before the content is about to copied to the clipboard and can be used to transform or modify the data before its added to the clipboard + * @fires {UUICopyEvent} copied - Fires when the content is copied to the clipboard + * @slot - Use to replace the default content of 'Copy' and the copy icon */ @defineElement('uui-copy') export class UUICopyElement extends LitElement { - static styles = [ + /** + * Set a string you wish to copy to the clipboard + * @type {string} + * @default '' + */ + @property({ type: String }) + value = ''; + + /** + * Disables the button + * @type {boolean} + * @attr + * @default false + */ + @property({ type: Boolean, reflect: true }) + disabled = false; + + /** + * Copies the text content from another element by specifying the ID of the element + * The ID of the element does not need to start with # like a CSS selector + * If this property is set, the value property is ignored + * @type {string} + * @attr + * @default '' + * @example copy-from="element-id" + */ + @property({ type: String, reflect: true, attribute: 'copy-from' }) + copyFrom = ''; + + /** + * Changes the look of the button to one of the predefined, symbolic looks. + * @type {"default" | "primary" | "secondary" | "outline" | "placeholder"} + * @attr + * @default "default" + */ + @property({ reflect: true }) + look: 'default' | 'primary' | 'secondary' | 'outline' | 'placeholder' = + 'default'; + + /** + * Changes the color of the button to one of the predefined, symbolic colors. + * @type {"default" | "positive" | "warning" | "danger"} + * @attr + * @default "default" + */ + @property({ reflect: true }) + color: 'default' | 'positive' | 'warning' | 'danger' = 'default'; + + /** + * Makes the left and right padding of the button narrower. + * @type {boolean} + * @attr + * @default false + */ + @property({ type: Boolean, reflect: true }) + compact = false; + + // Used to store the value that will be copied to the clipboard + #valueToCopy = ''; + + #onClick = async (e: Event) => { + const button = e.target as UUIButtonElement; + button.state = 'waiting'; + + // By default use the value property + this.#valueToCopy = this.value; + + // If copy-from is set use that instead + if (this.copyFrom) { + // Try & find an element with the ID + const el = document.getElementById(this.copyFrom); + if (el) { + console.log('Element found to copy from', el); + this.#valueToCopy = el.textContent || el.innerText || ''; + + // Overrude the value to copy ,if the element has a value property + // Such as uui-input or uui-textarea or native inout elements + if ('value' in el) { + console.log('This element has a value property', el); + this.#valueToCopy = (el as any).value; + } + } else { + console.error(`Element ID ${this.copyFrom} not found to copy from`); + button.state = 'failed'; + return; + } + } + + const beforeCopyEv = new UUICopyEvent(UUICopyEvent.COPYING, { + detail: { text: this.#valueToCopy }, + }); + this.dispatchEvent(beforeCopyEv); + + if (beforeCopyEv.detail.text != null) { + this.#valueToCopy = beforeCopyEv.detail.text; + } + + await navigator.clipboard + .writeText(this.#valueToCopy) + .then(() => { + button.state = 'success'; + this.dispatchEvent( + new UUICopyEvent(UUICopyEvent.COPIED, { + detail: { text: this.#valueToCopy }, + }), + ); + }) + .catch(err => { + button.state = 'failed'; + console.error('Error copying to clipboard', err); + }); + }; + + render() { + return html` + Copy + `; + } + + static styles = [ css` - :host { - /* Styles goes here */ + slot { + pointer-events: none; } `, ]; - - render(){ - return html` - Markup goes here - `; - } } declare global { diff --git a/packages/uui-copy/lib/uui-copy.story.ts b/packages/uui-copy/lib/uui-copy.story.ts index d8598b1ad..421c09fc1 100644 --- a/packages/uui-copy/lib/uui-copy.story.ts +++ b/packages/uui-copy/lib/uui-copy.story.ts @@ -1,24 +1,187 @@ import type { Meta, StoryObj } from '@storybook/web-components'; - import './uui-copy.element'; import type { UUICopyElement } from './uui-copy.element'; import readme from '../README.md?raw'; +import { html } from 'lit'; +import { UUICopyEvent } from './UUICopyEvent'; const meta: Meta = { id: 'uui-copy', - title: 'Copy', + title: 'Inputs/Copy', component: 'uui-copy', parameters: { readme: { markdown: readme }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Overview: Story = { + name: 'Simple Copy', + args: { + value: 'Hey stop copying me 🥸', + disabled: false, + }, + parameters: { docs: { source: { - code: ``, + code: ``, }, }, }, }; -export default meta; -type Story = StoryObj; +export const Disabled: Story = { + name: 'Disabled State', + args: { + value: 'You cannot copy this', + disabled: true, + }, + parameters: { + docs: { + source: { + code: ``, + }, + }, + }, +}; + +export const CustomSlotContent: Story = { + name: 'Custom Slot Content', + args: { + value: 'Custom slot content', + }, + render: args => html` + Custom Copy Text + `, + parameters: { + docs: { + source: { + code: `Custom Copy Text`, + }, + }, + }, +}; -export const Overview: Story = {}; +export const ColorAndLook: Story = { + name: 'Color and Look', + args: { + value: 'Copy this text', + color: 'positive', + look: 'primary', + }, + render: args => html` + + Copy + + `, + parameters: { + docs: { + source: { + code: ` + + `, + }, + }, + }, +}; + +export const CopiedEvent: Story = { + name: 'Copied Event', + args: { + value: 'Copy this text', + }, + render: args => html` + { + alert(`Copied text: ${event.detail.text}`); + }}> + `, + parameters: { + docs: { + source: { + code: ` + + + `, + }, + }, + }, +}; + +export const ModifyClipboardContent: Story = { + name: 'Modify Clipboard Content', + args: { + value: 'Original text', + }, + render: args => html` + { + event.detail.text += ' - Modified before copying'; + }}> + Copy + + `, + parameters: { + docs: { + source: { + code: ` + + + `, + }, + }, + }, +}; + +export const EmptyValueErrorState: Story = { + name: 'Empty Value - shows an Error State', + args: { + value: '', + }, + render: args => html` `, + parameters: { + docs: { + source: { + code: ` + + `, + }, + }, + }, +}; + +export const CopyFromInput: Story = { + name: 'Copy From uui-input', + render: () => html` + + + + + + `, + parameters: { + docs: { + source: { + code: ` + + + + + + `, + }, + }, + }, +}; diff --git a/packages/uui-copy/lib/uui-copy.test.ts b/packages/uui-copy/lib/uui-copy.test.ts index cd83c94de..93b6008f6 100644 --- a/packages/uui-copy/lib/uui-copy.test.ts +++ b/packages/uui-copy/lib/uui-copy.test.ts @@ -5,9 +5,7 @@ describe('UUICopyElement', () => { let element: UUICopyElement; beforeEach(async () => { - element = await fixture( - html` ` - ); + element = await fixture(html` `); }); it('is defined with its own instance', () => { @@ -17,4 +15,4 @@ describe('UUICopyElement', () => { it('passes the a11y audit', async () => { await expect(element).shadowDom.to.be.accessible(); }); -}); \ No newline at end of file +}); From 8bffab296d9e7f3227acb0ee2eac9a2518bfb856 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Tue, 24 Dec 2024 00:03:52 +0000 Subject: [PATCH 03/36] Make eslint happy --- packages/uui/lib/index.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/uui/lib/index.ts b/packages/uui/lib/index.ts index e4b10581d..a19cbabd2 100644 --- a/packages/uui/lib/index.ts +++ b/packages/uui/lib/index.ts @@ -24,6 +24,7 @@ export * from '@umbraco-ui/uui-color-swatch/lib'; export * from '@umbraco-ui/uui-color-swatches/lib'; export * from '@umbraco-ui/uui-combobox-list/lib'; export * from '@umbraco-ui/uui-combobox/lib'; +export * from '@umbraco-ui/uui-copy/lib/index.js'; export * from '@umbraco-ui/uui-dialog-layout/lib'; export * from '@umbraco-ui/uui-dialog/lib'; export * from '@umbraco-ui/uui-file-dropzone/lib'; @@ -80,5 +81,3 @@ export * from '@umbraco-ui/uui-toast-notification-layout/lib'; export * from '@umbraco-ui/uui-toast-notification/lib'; export * from '@umbraco-ui/uui-toggle/lib'; export * from '@umbraco-ui/uui-visually-hidden/lib'; - -export * from '@umbraco-ui/uui-copy/lib/index.js'; \ No newline at end of file From 0901ebe13622e8a0f975566c1cbcb4f3030cdf99 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Thu, 2 Jan 2025 09:45:15 +0000 Subject: [PATCH 04/36] WIP: To add useful tests --- packages/uui-copy/lib/uui-copy.test.ts | 51 +++++++++++++++++++++++++- 1 file changed, 50 insertions(+), 1 deletion(-) diff --git a/packages/uui-copy/lib/uui-copy.test.ts b/packages/uui-copy/lib/uui-copy.test.ts index 93b6008f6..e2790547b 100644 --- a/packages/uui-copy/lib/uui-copy.test.ts +++ b/packages/uui-copy/lib/uui-copy.test.ts @@ -5,7 +5,7 @@ describe('UUICopyElement', () => { let element: UUICopyElement; beforeEach(async () => { - element = await fixture(html` `); + element = await fixture(html``); }); it('is defined with its own instance', () => { @@ -15,4 +15,53 @@ describe('UUICopyElement', () => { it('passes the a11y audit', async () => { await expect(element).shadowDom.to.be.accessible(); }); + + it('renders correctly', async () => { + expect(element).shadowDom.to.equal(` + + + Copy + + + `); + }); + + it('copies the value property to clipboard when button is clicked', async () => { + const button = element.shadowRoot?.querySelector('uui-button'); + // // Mock the clipboard API + // navigator.clipboard = { + // writeText: async text => { + // expect(text).to.equal('Test Text'); + // return Promise.resolve(); + // }, + // }; + + button?.click(); + }); + + it('fires copying and copied events', async () => { + const button = element.shadowRoot?.querySelector('uui-button'); + // // Mock the clipboard API + // navigator.clipboard = { + // writeText: async text => { + // return Promise.resolve(); + // }, + // }; + + let copyingEventFired = false; + let copiedEventFired = false; + + element.addEventListener('copying', () => { + copyingEventFired = true; + }); + + element.addEventListener('copied', () => { + copiedEventFired = true; + }); + + button?.click(); + + expect(copyingEventFired).to.be.true; + expect(copiedEventFired).to.be.true; + }); }); From 75aeaa18be1319555c990db68999c1a055366dab Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Tue, 7 Jan 2025 10:29:25 +0000 Subject: [PATCH 05/36] Update packages/uui-copy/lib/uui-copy.element.ts Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> --- packages/uui-copy/lib/uui-copy.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/uui-copy/lib/uui-copy.element.ts b/packages/uui-copy/lib/uui-copy.element.ts index 304b478c4..aa3fd7166 100644 --- a/packages/uui-copy/lib/uui-copy.element.ts +++ b/packages/uui-copy/lib/uui-copy.element.ts @@ -9,7 +9,7 @@ import { UUICopyEvent } from './UUICopyEvent'; * Inspired by shoelace.style copy button * @element uui-copy * @dependency uui-button - * @dependancy uui-icon + * @dependency uui-icon * @fires {UUICopyEvent} copying - Fires before the content is about to copied to the clipboard and can be used to transform or modify the data before its added to the clipboard * @fires {UUICopyEvent} copied - Fires when the content is copied to the clipboard * @slot - Use to replace the default content of 'Copy' and the copy icon From 54943f768460765c26247931a7a93059a099c603 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Tue, 7 Jan 2025 10:29:43 +0000 Subject: [PATCH 06/36] Update packages/uui-copy/lib/uui-copy.element.ts Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> --- packages/uui-copy/lib/uui-copy.element.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/uui-copy/lib/uui-copy.element.ts b/packages/uui-copy/lib/uui-copy.element.ts index aa3fd7166..e82b68384 100644 --- a/packages/uui-copy/lib/uui-copy.element.ts +++ b/packages/uui-copy/lib/uui-copy.element.ts @@ -6,7 +6,6 @@ import { UUICopyEvent } from './UUICopyEvent'; /** * @summary A button to trigger text content to be copied to the clipboard - * Inspired by shoelace.style copy button * @element uui-copy * @dependency uui-button * @dependency uui-icon From 474a35207c31a8892f5850491414951c4050b2b4 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Tue, 7 Jan 2025 12:07:57 +0000 Subject: [PATCH 07/36] Remove the reflect on the props as PR suggestion --- packages/uui-copy/lib/uui-copy.element.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/uui-copy/lib/uui-copy.element.ts b/packages/uui-copy/lib/uui-copy.element.ts index 304b478c4..67320ec48 100644 --- a/packages/uui-copy/lib/uui-copy.element.ts +++ b/packages/uui-copy/lib/uui-copy.element.ts @@ -42,7 +42,7 @@ export class UUICopyElement extends LitElement { * @default '' * @example copy-from="element-id" */ - @property({ type: String, reflect: true, attribute: 'copy-from' }) + @property({ type: String, attribute: 'copy-from' }) copyFrom = ''; /** @@ -51,7 +51,7 @@ export class UUICopyElement extends LitElement { * @attr * @default "default" */ - @property({ reflect: true }) + @property() look: 'default' | 'primary' | 'secondary' | 'outline' | 'placeholder' = 'default'; @@ -61,7 +61,7 @@ export class UUICopyElement extends LitElement { * @attr * @default "default" */ - @property({ reflect: true }) + @property() color: 'default' | 'positive' | 'warning' | 'danger' = 'default'; /** @@ -70,7 +70,7 @@ export class UUICopyElement extends LitElement { * @attr * @default false */ - @property({ type: Boolean, reflect: true }) + @property({ type: Boolean }) compact = false; // Used to store the value that will be copied to the clipboard From a2911999fd1bc52788ac22d1e9c5031903cfe628 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Tue, 7 Jan 2025 12:21:24 +0000 Subject: [PATCH 08/36] Adds in the util func demandCustomElement in ctor as suggested by Jacob --- packages/uui-copy/lib/uui-copy.element.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/uui-copy/lib/uui-copy.element.ts b/packages/uui-copy/lib/uui-copy.element.ts index 802b6b2b9..f98164b25 100644 --- a/packages/uui-copy/lib/uui-copy.element.ts +++ b/packages/uui-copy/lib/uui-copy.element.ts @@ -3,6 +3,7 @@ import { css, html, LitElement } from 'lit'; import { property } from 'lit/decorators.js'; import { UUIButtonElement } from '@umbraco-ui/uui-button/lib'; import { UUICopyEvent } from './UUICopyEvent'; +import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils'; /** * @summary A button to trigger text content to be copied to the clipboard @@ -72,6 +73,12 @@ export class UUICopyElement extends LitElement { @property({ type: Boolean }) compact = false; + constructor() { + super(); + demandCustomElement(this, 'uui-button'); + demandCustomElement(this, 'uui-icon'); + } + // Used to store the value that will be copied to the clipboard #valueToCopy = ''; From e46e459c6ccd7bb48f0d9efb4ce0a706403f03fb Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Tue, 7 Jan 2025 12:23:28 +0000 Subject: [PATCH 09/36] Fix typo --- packages/uui-copy/lib/uui-copy.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/uui-copy/lib/uui-copy.element.ts b/packages/uui-copy/lib/uui-copy.element.ts index f98164b25..37bbae51d 100644 --- a/packages/uui-copy/lib/uui-copy.element.ts +++ b/packages/uui-copy/lib/uui-copy.element.ts @@ -97,7 +97,7 @@ export class UUICopyElement extends LitElement { console.log('Element found to copy from', el); this.#valueToCopy = el.textContent || el.innerText || ''; - // Overrude the value to copy ,if the element has a value property + // Override the value to copy ,if the element has a value property // Such as uui-input or uui-textarea or native inout elements if ('value' in el) { console.log('This element has a value property', el); From de55e9bbd591eadbbf131df835fc30387e048c82 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Tue, 7 Jan 2025 13:20:29 +0000 Subject: [PATCH 10/36] Remove the tests for the clipboard API - agreed with Jacob to keep the tests minimal due to the permisions problem with the clipboard API running headless --- packages/uui-copy/lib/uui-copy.test.ts | 39 -------------------------- 1 file changed, 39 deletions(-) diff --git a/packages/uui-copy/lib/uui-copy.test.ts b/packages/uui-copy/lib/uui-copy.test.ts index e2790547b..7ee14ed1a 100644 --- a/packages/uui-copy/lib/uui-copy.test.ts +++ b/packages/uui-copy/lib/uui-copy.test.ts @@ -25,43 +25,4 @@ describe('UUICopyElement', () => { `); }); - - it('copies the value property to clipboard when button is clicked', async () => { - const button = element.shadowRoot?.querySelector('uui-button'); - // // Mock the clipboard API - // navigator.clipboard = { - // writeText: async text => { - // expect(text).to.equal('Test Text'); - // return Promise.resolve(); - // }, - // }; - - button?.click(); - }); - - it('fires copying and copied events', async () => { - const button = element.shadowRoot?.querySelector('uui-button'); - // // Mock the clipboard API - // navigator.clipboard = { - // writeText: async text => { - // return Promise.resolve(); - // }, - // }; - - let copyingEventFired = false; - let copiedEventFired = false; - - element.addEventListener('copying', () => { - copyingEventFired = true; - }); - - element.addEventListener('copied', () => { - copiedEventFired = true; - }); - - button?.click(); - - expect(copyingEventFired).to.be.true; - expect(copiedEventFired).to.be.true; - }); }); From 9ca79f36bb60261d717eeee28ecac514fe1cdedf Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Tue, 7 Jan 2025 14:23:54 +0000 Subject: [PATCH 11/36] Waits 2 seconds before setting uuiButton state to success --- packages/uui-copy/lib/uui-copy.element.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/uui-copy/lib/uui-copy.element.ts b/packages/uui-copy/lib/uui-copy.element.ts index 37bbae51d..cba1cc14c 100644 --- a/packages/uui-copy/lib/uui-copy.element.ts +++ b/packages/uui-copy/lib/uui-copy.element.ts @@ -122,12 +122,15 @@ export class UUICopyElement extends LitElement { await navigator.clipboard .writeText(this.#valueToCopy) .then(() => { - button.state = 'success'; + //button.state = 'success'; this.dispatchEvent( new UUICopyEvent(UUICopyEvent.COPIED, { detail: { text: this.#valueToCopy }, }), ); + setTimeout(() => { + button.state = 'success'; + }, 2000); }) .catch(err => { button.state = 'failed'; From 3c1fc103fa39a4a74b550ea2bcd0bcaa87e73f6d Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Tue, 7 Jan 2025 14:43:03 +0000 Subject: [PATCH 12/36] Fix the problem with the story, as you needed to browse to uui-button before this would work properly as it had not registered the webcoponents that it depends upon --- packages/uui-copy/lib/uui-copy.story.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/uui-copy/lib/uui-copy.story.ts b/packages/uui-copy/lib/uui-copy.story.ts index 421c09fc1..6c38ca13b 100644 --- a/packages/uui-copy/lib/uui-copy.story.ts +++ b/packages/uui-copy/lib/uui-copy.story.ts @@ -4,6 +4,9 @@ import type { UUICopyElement } from './uui-copy.element'; import readme from '../README.md?raw'; import { html } from 'lit'; import { UUICopyEvent } from './UUICopyEvent'; +import '@umbraco-ui/uui-button/lib'; +import '@umbraco-ui/uui-icon/lib'; +import '@umbraco-ui/uui-loader-circle/lib'; const meta: Meta = { id: 'uui-copy', From 65a4e60de0c14f5121729acdb7370a59858ae71d Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Tue, 7 Jan 2025 15:05:05 +0000 Subject: [PATCH 13/36] Adds the LabelMixin to add the prop. Flows the label prop down into the UUI-button for the aria-label for the uui-button used inside uui-copy --- packages/uui-copy/lib/uui-copy.element.ts | 6 ++++-- packages/uui-copy/lib/uui-copy.story.ts | 16 ++++++++++++++++ 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/packages/uui-copy/lib/uui-copy.element.ts b/packages/uui-copy/lib/uui-copy.element.ts index cba1cc14c..89ee6c57c 100644 --- a/packages/uui-copy/lib/uui-copy.element.ts +++ b/packages/uui-copy/lib/uui-copy.element.ts @@ -4,6 +4,7 @@ import { property } from 'lit/decorators.js'; import { UUIButtonElement } from '@umbraco-ui/uui-button/lib'; import { UUICopyEvent } from './UUICopyEvent'; import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils'; +import { LabelMixin } from '@umbraco-ui/uui-base'; /** * @summary A button to trigger text content to be copied to the clipboard @@ -15,7 +16,7 @@ import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils'; * @slot - Use to replace the default content of 'Copy' and the copy icon */ @defineElement('uui-copy') -export class UUICopyElement extends LitElement { +export class UUICopyElement extends LabelMixin('', LitElement) { /** * Set a string you wish to copy to the clipboard * @type {string} @@ -30,7 +31,7 @@ export class UUICopyElement extends LitElement { * @attr * @default false */ - @property({ type: Boolean, reflect: true }) + @property({ type: Boolean }) disabled = false; /** @@ -144,6 +145,7 @@ export class UUICopyElement extends LitElement { .look=${this.look} .disabled=${this.disabled} .compact=${this.compact} + .label=${this.label} @click=${this.#onClick}> Copy `; diff --git a/packages/uui-copy/lib/uui-copy.story.ts b/packages/uui-copy/lib/uui-copy.story.ts index 6c38ca13b..467042b27 100644 --- a/packages/uui-copy/lib/uui-copy.story.ts +++ b/packages/uui-copy/lib/uui-copy.story.ts @@ -35,6 +35,22 @@ export const Overview: Story = { }, }; +export const WithLabelSet: Story = { + name: 'Simple Copy with an A11y Label set', + args: { + value: 'Hey stop copying me 🥸', + disabled: false, + label: 'This is my A11y label I want', + }, + parameters: { + docs: { + source: { + code: ``, + }, + }, + }, +}; + export const Disabled: Story = { name: 'Disabled State', args: { From c72d0b7ea750b1f172c8105a3f047b3c6e09c210 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Tue, 7 Jan 2025 16:19:59 +0000 Subject: [PATCH 14/36] Make the sonar code quality thing a bit happier --- packages/uui-copy/lib/UUICopyEvent.ts | 6 +++++- packages/uui-copy/lib/uui-copy.element.ts | 7 +++---- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/uui-copy/lib/UUICopyEvent.ts b/packages/uui-copy/lib/UUICopyEvent.ts index 7fc82da5e..ebc6b9d6e 100644 --- a/packages/uui-copy/lib/UUICopyEvent.ts +++ b/packages/uui-copy/lib/UUICopyEvent.ts @@ -1,11 +1,15 @@ import { UUIEvent } from '@umbraco-ui/uui-base/lib/events'; import { UUICopyElement } from './uui-copy.element'; +interface UUICopyEventInit extends EventInit { + detail?: { text: string }; +} + export class UUICopyEvent extends UUIEvent<{ text: string }, UUICopyElement> { public static readonly COPIED: string = 'copied'; public static readonly COPYING: string = 'copying'; - constructor(evName: string, eventInit: any | null = {}) { + constructor(evName: string, eventInit: UUICopyEventInit = {}) { super(evName, { ...{ bubbles: true }, ...eventInit, diff --git a/packages/uui-copy/lib/uui-copy.element.ts b/packages/uui-copy/lib/uui-copy.element.ts index 89ee6c57c..e5b340fad 100644 --- a/packages/uui-copy/lib/uui-copy.element.ts +++ b/packages/uui-copy/lib/uui-copy.element.ts @@ -83,7 +83,7 @@ export class UUICopyElement extends LabelMixin('', LitElement) { // Used to store the value that will be copied to the clipboard #valueToCopy = ''; - #onClick = async (e: Event) => { + readonly #onClick = async (e: Event) => { const button = e.target as UUIButtonElement; button.state = 'waiting'; @@ -96,7 +96,7 @@ export class UUICopyElement extends LabelMixin('', LitElement) { const el = document.getElementById(this.copyFrom); if (el) { console.log('Element found to copy from', el); - this.#valueToCopy = el.textContent || el.innerText || ''; + this.#valueToCopy = el.textContent ?? el.innerText ?? ''; // Override the value to copy ,if the element has a value property // Such as uui-input or uui-textarea or native inout elements @@ -123,7 +123,6 @@ export class UUICopyElement extends LabelMixin('', LitElement) { await navigator.clipboard .writeText(this.#valueToCopy) .then(() => { - //button.state = 'success'; this.dispatchEvent( new UUICopyEvent(UUICopyEvent.COPIED, { detail: { text: this.#valueToCopy }, @@ -151,7 +150,7 @@ export class UUICopyElement extends LabelMixin('', LitElement) { `; } - static styles = [ + static readonly styles = [ css` slot { pointer-events: none; From c371aa8ce457e172b497f58cbc00327f85ad93f1 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Tue, 7 Jan 2025 16:24:05 +0000 Subject: [PATCH 15/36] Add a prop & story for the timeout delay for the animation/state of the button --- packages/uui-copy/lib/uui-copy.element.ts | 11 ++++++++++- packages/uui-copy/lib/uui-copy.story.ts | 15 +++++++++++++++ 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/packages/uui-copy/lib/uui-copy.element.ts b/packages/uui-copy/lib/uui-copy.element.ts index e5b340fad..10e67d2e7 100644 --- a/packages/uui-copy/lib/uui-copy.element.ts +++ b/packages/uui-copy/lib/uui-copy.element.ts @@ -74,6 +74,15 @@ export class UUICopyElement extends LabelMixin('', LitElement) { @property({ type: Boolean }) compact = false; + /** + * The delay in milliseconds before the button returns to its default state after a successful copy + * @type {number} + * @attr + * @default 250 + */ + @property({ type: Number, attribute: 'animation-state-delay' }) + animationStateDelay = 250; + constructor() { super(); demandCustomElement(this, 'uui-button'); @@ -130,7 +139,7 @@ export class UUICopyElement extends LabelMixin('', LitElement) { ); setTimeout(() => { button.state = 'success'; - }, 2000); + }, this.animationStateDelay); }) .catch(err => { button.state = 'failed'; diff --git a/packages/uui-copy/lib/uui-copy.story.ts b/packages/uui-copy/lib/uui-copy.story.ts index 467042b27..304393946 100644 --- a/packages/uui-copy/lib/uui-copy.story.ts +++ b/packages/uui-copy/lib/uui-copy.story.ts @@ -204,3 +204,18 @@ export const CopyFromInput: Story = { }, }, }; + +export const AnimationDelay: Story = { + name: 'Animation Delay', + args: { + value: 'A long 3 second delay', + animationStateDelay: 3000, + }, + parameters: { + docs: { + source: { + code: ``, + }, + }, + }, +}; From dffdef44c6b0776a732c433affc2eef6d53d47e9 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Tue, 7 Jan 2025 16:38:00 +0000 Subject: [PATCH 16/36] An explicit story to help with docs to show how to use a different icon --- packages/uui-copy/lib/uui-copy.story.ts | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/packages/uui-copy/lib/uui-copy.story.ts b/packages/uui-copy/lib/uui-copy.story.ts index 304393946..9da4ad355 100644 --- a/packages/uui-copy/lib/uui-copy.story.ts +++ b/packages/uui-copy/lib/uui-copy.story.ts @@ -219,3 +219,25 @@ export const AnimationDelay: Story = { }, }, }; + +export const WithDifferentIcon: Story = { + name: 'Different Icon', + args: { + value: 'I have used a different icon', + }, + render: args => html` + + Copy to Clipboard + + `, + parameters: { + docs: { + source: { + code: ` + + Copy to Clipboard +`, + }, + }, + }, +}; From bf86ac44eb8b0d5f37fae834d07fb62a8a6d05b4 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Tue, 7 Jan 2025 16:45:00 +0000 Subject: [PATCH 17/36] Fix test failing on CI only - not locally --- packages/uui-copy/lib/uui-copy.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/uui-copy/lib/uui-copy.element.ts b/packages/uui-copy/lib/uui-copy.element.ts index 10e67d2e7..bf4a057ed 100644 --- a/packages/uui-copy/lib/uui-copy.element.ts +++ b/packages/uui-copy/lib/uui-copy.element.ts @@ -4,7 +4,7 @@ import { property } from 'lit/decorators.js'; import { UUIButtonElement } from '@umbraco-ui/uui-button/lib'; import { UUICopyEvent } from './UUICopyEvent'; import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils'; -import { LabelMixin } from '@umbraco-ui/uui-base'; +import { LabelMixin } from '@umbraco-ui/uui-base/lib/mixins'; /** * @summary A button to trigger text content to be copied to the clipboard From 8e2bb329ea0d1e0e49e44c216e4da45ef66cd20a Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Fri, 10 Jan 2025 23:34:37 +0000 Subject: [PATCH 18/36] Rename from uui-copy to more explicit uui-text-copy-button --- package-lock.json | 24 +++--- packages/uui-copy/README.md | 31 ------- packages/uui-copy/lib/UUICopyEvent.ts | 18 ----- packages/uui-copy/lib/index.ts | 1 - packages/uui-text-copy-button/README.md | 32 ++++++++ .../lib/UUITextCopyButtonEvent.ts | 21 +++++ packages/uui-text-copy-button/lib/index.ts | 2 + .../lib/uui-text-copy-button.element.ts} | 21 ++--- .../lib/uui-text-copy-button.story.ts} | 80 ++++++++++--------- .../lib/uui-text-copy-button.test.ts} | 10 ++- .../package.json | 8 +- .../rollup.config.js | 2 +- .../tsconfig.json | 0 packages/uui/lib/index.ts | 2 +- 14 files changed, 134 insertions(+), 118 deletions(-) delete mode 100644 packages/uui-copy/README.md delete mode 100644 packages/uui-copy/lib/UUICopyEvent.ts delete mode 100644 packages/uui-copy/lib/index.ts create mode 100644 packages/uui-text-copy-button/README.md create mode 100644 packages/uui-text-copy-button/lib/UUITextCopyButtonEvent.ts create mode 100644 packages/uui-text-copy-button/lib/index.ts rename packages/{uui-copy/lib/uui-copy.element.ts => uui-text-copy-button/lib/uui-text-copy-button.element.ts} (90%) rename packages/{uui-copy/lib/uui-copy.story.ts => uui-text-copy-button/lib/uui-text-copy-button.story.ts} (60%) rename packages/{uui-copy/lib/uui-copy.test.ts => uui-text-copy-button/lib/uui-text-copy-button.test.ts} (63%) rename packages/{uui-copy => uui-text-copy-button}/package.json (81%) rename packages/{uui-copy => uui-text-copy-button}/rollup.config.js (79%) rename packages/{uui-copy => uui-text-copy-button}/tsconfig.json (100%) diff --git a/package-lock.json b/package-lock.json index 268855ff8..1ec5dcb4d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4964,10 +4964,6 @@ "resolved": "packages/uui-combobox-list", "link": true }, - "node_modules/@umbraco-ui/uui-copy": { - "resolved": "packages/uui-copy", - "link": true - }, "node_modules/@umbraco-ui/uui-css": { "resolved": "packages/uui-css", "link": true @@ -5172,6 +5168,10 @@ "resolved": "packages/uui-tag", "link": true }, + "node_modules/@umbraco-ui/uui-text-copy-button": { + "resolved": "packages/uui-text-copy-button", + "link": true + }, "node_modules/@umbraco-ui/uui-textarea": { "resolved": "packages/uui-textarea", "link": true @@ -24133,14 +24133,6 @@ "@umbraco-ui/uui-base": "1.12.2" } }, - "packages/uui-copy": { - "name": "@umbraco-ui/uui-copy", - "version": "0.0.0", - "license": "MIT", - "dependencies": { - "@umbraco-ui/uui-base": "1.12.2" - } - }, "packages/uui-css": { "name": "@umbraco-ui/uui-css", "version": "1.12.1", @@ -24582,6 +24574,14 @@ "@umbraco-ui/uui-base": "1.12.2" } }, + "packages/uui-text-copy-button": { + "name": "@umbraco-ui/uui-text-copy-button", + "version": "0.0.0", + "license": "MIT", + "dependencies": { + "@umbraco-ui/uui-base": "1.12.2" + } + }, "packages/uui-textarea": { "name": "@umbraco-ui/uui-textarea", "version": "1.12.2", diff --git a/packages/uui-copy/README.md b/packages/uui-copy/README.md deleted file mode 100644 index e85f16830..000000000 --- a/packages/uui-copy/README.md +++ /dev/null @@ -1,31 +0,0 @@ -# uui-copy - -![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-copy?logoColor=%231B264F) - -Umbraco style copy component. - -## Installation - -### ES imports - -```zsh -npm i @umbraco-ui/uui-copy -``` - -Import the registration of `` via: - -```javascript -import '@umbraco-ui/uui-copy'; -``` - -When looking to leverage the `UUICopyElement` base class as a type and/or for extension purposes, do so via: - -```javascript -import { UUICopyElement } from '@umbraco-ui/uui-copy'; -``` - -## Usage - -```html - -``` diff --git a/packages/uui-copy/lib/UUICopyEvent.ts b/packages/uui-copy/lib/UUICopyEvent.ts deleted file mode 100644 index ebc6b9d6e..000000000 --- a/packages/uui-copy/lib/UUICopyEvent.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { UUIEvent } from '@umbraco-ui/uui-base/lib/events'; -import { UUICopyElement } from './uui-copy.element'; - -interface UUICopyEventInit extends EventInit { - detail?: { text: string }; -} - -export class UUICopyEvent extends UUIEvent<{ text: string }, UUICopyElement> { - public static readonly COPIED: string = 'copied'; - public static readonly COPYING: string = 'copying'; - - constructor(evName: string, eventInit: UUICopyEventInit = {}) { - super(evName, { - ...{ bubbles: true }, - ...eventInit, - }); - } -} diff --git a/packages/uui-copy/lib/index.ts b/packages/uui-copy/lib/index.ts deleted file mode 100644 index abf8d0993..000000000 --- a/packages/uui-copy/lib/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './uui-copy.element'; diff --git a/packages/uui-text-copy-button/README.md b/packages/uui-text-copy-button/README.md new file mode 100644 index 000000000..e32508676 --- /dev/null +++ b/packages/uui-text-copy-button/README.md @@ -0,0 +1,32 @@ +# uuui-text-copy-button + +![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-text-copy-button?logoColor=%231B264F) + +Umbraco style copy component. + +## Installation + +### ES imports + +```zsh +npm i @umbraco-ui/uui-text-copy-button +``` + +Import the registration of `` via: + +```javascript +import '@umbraco-ui/uui-text-copy-button'; +``` + +When looking to leverage the `UUITextCopyButtonElement` base class as a type and/or for extension purposes, do so via: + +```javascript +import { UUITextCopyButtonElement } from '@umbraco-ui/uui-text-copy-button'; +``` + +## Usage + +```html + +``` diff --git a/packages/uui-text-copy-button/lib/UUITextCopyButtonEvent.ts b/packages/uui-text-copy-button/lib/UUITextCopyButtonEvent.ts new file mode 100644 index 000000000..83fc18778 --- /dev/null +++ b/packages/uui-text-copy-button/lib/UUITextCopyButtonEvent.ts @@ -0,0 +1,21 @@ +import { UUIEvent } from '@umbraco-ui/uui-base/lib/events'; +import { UUITextCopyButtonElement } from './uui-text-copy-button.element'; + +interface UUITextCopyButtonEventInit extends EventInit { + detail?: { text: string }; +} + +export class UUITextCopyButtonEvent extends UUIEvent< + { text: string }, + UUITextCopyButtonElement +> { + public static readonly COPIED: string = 'copied'; + public static readonly COPYING: string = 'copying'; + + constructor(evName: string, eventInit: UUITextCopyButtonEventInit = {}) { + super(evName, { + ...{ bubbles: true }, + ...eventInit, + }); + } +} diff --git a/packages/uui-text-copy-button/lib/index.ts b/packages/uui-text-copy-button/lib/index.ts new file mode 100644 index 000000000..8dc458038 --- /dev/null +++ b/packages/uui-text-copy-button/lib/index.ts @@ -0,0 +1,2 @@ +export * from './uui-text-copy-button.element'; +export * from './UUITextCopyButtonEvent'; diff --git a/packages/uui-copy/lib/uui-copy.element.ts b/packages/uui-text-copy-button/lib/uui-text-copy-button.element.ts similarity index 90% rename from packages/uui-copy/lib/uui-copy.element.ts rename to packages/uui-text-copy-button/lib/uui-text-copy-button.element.ts index bf4a057ed..6b8fe95ed 100644 --- a/packages/uui-copy/lib/uui-copy.element.ts +++ b/packages/uui-text-copy-button/lib/uui-text-copy-button.element.ts @@ -2,21 +2,21 @@ import { defineElement } from '@umbraco-ui/uui-base/lib/registration'; import { css, html, LitElement } from 'lit'; import { property } from 'lit/decorators.js'; import { UUIButtonElement } from '@umbraco-ui/uui-button/lib'; -import { UUICopyEvent } from './UUICopyEvent'; +import { UUITextCopyButtonEvent } from './UUITextCopyButtonEvent'; import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils'; import { LabelMixin } from '@umbraco-ui/uui-base/lib/mixins'; /** * @summary A button to trigger text content to be copied to the clipboard - * @element uui-copy + * @element uui-text-copy-button * @dependency uui-button * @dependency uui-icon * @fires {UUICopyEvent} copying - Fires before the content is about to copied to the clipboard and can be used to transform or modify the data before its added to the clipboard * @fires {UUICopyEvent} copied - Fires when the content is copied to the clipboard * @slot - Use to replace the default content of 'Copy' and the copy icon */ -@defineElement('uui-copy') -export class UUICopyElement extends LabelMixin('', LitElement) { +@defineElement('uui-text-copy-button') +export class UUITextCopyButtonElement extends LabelMixin('', LitElement) { /** * Set a string you wish to copy to the clipboard * @type {string} @@ -120,9 +120,12 @@ export class UUICopyElement extends LabelMixin('', LitElement) { } } - const beforeCopyEv = new UUICopyEvent(UUICopyEvent.COPYING, { - detail: { text: this.#valueToCopy }, - }); + const beforeCopyEv = new UUITextCopyButtonEvent( + UUITextCopyButtonEvent.COPYING, + { + detail: { text: this.#valueToCopy }, + }, + ); this.dispatchEvent(beforeCopyEv); if (beforeCopyEv.detail.text != null) { @@ -133,7 +136,7 @@ export class UUICopyElement extends LabelMixin('', LitElement) { .writeText(this.#valueToCopy) .then(() => { this.dispatchEvent( - new UUICopyEvent(UUICopyEvent.COPIED, { + new UUITextCopyButtonEvent(UUITextCopyButtonEvent.COPIED, { detail: { text: this.#valueToCopy }, }), ); @@ -170,6 +173,6 @@ export class UUICopyElement extends LabelMixin('', LitElement) { declare global { interface HTMLElementTagNameMap { - 'uui-copy': UUICopyElement; + 'uui-text-copy-button': UUITextCopyButtonElement; } } diff --git a/packages/uui-copy/lib/uui-copy.story.ts b/packages/uui-text-copy-button/lib/uui-text-copy-button.story.ts similarity index 60% rename from packages/uui-copy/lib/uui-copy.story.ts rename to packages/uui-text-copy-button/lib/uui-text-copy-button.story.ts index 9da4ad355..05e68cd2d 100644 --- a/packages/uui-copy/lib/uui-copy.story.ts +++ b/packages/uui-text-copy-button/lib/uui-text-copy-button.story.ts @@ -1,24 +1,23 @@ import type { Meta, StoryObj } from '@storybook/web-components'; -import './uui-copy.element'; -import type { UUICopyElement } from './uui-copy.element'; +import type { UUITextCopyButtonElement } from './uui-text-copy-button.element'; import readme from '../README.md?raw'; import { html } from 'lit'; -import { UUICopyEvent } from './UUICopyEvent'; +import { UUITextCopyButtonEvent } from './UUITextCopyButtonEvent'; import '@umbraco-ui/uui-button/lib'; import '@umbraco-ui/uui-icon/lib'; import '@umbraco-ui/uui-loader-circle/lib'; -const meta: Meta = { - id: 'uui-copy', - title: 'Inputs/Copy', - component: 'uui-copy', +const meta: Meta = { + id: 'uui-text-copy-button', + title: 'Inputs/Text Copy Button', + component: 'uui-text-copy-button', parameters: { readme: { markdown: readme }, }, }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Overview: Story = { name: 'Simple Copy', @@ -29,7 +28,7 @@ export const Overview: Story = { parameters: { docs: { source: { - code: ``, + code: ``, }, }, }, @@ -45,7 +44,7 @@ export const WithLabelSet: Story = { parameters: { docs: { source: { - code: ``, + code: ``, }, }, }, @@ -60,7 +59,7 @@ export const Disabled: Story = { parameters: { docs: { source: { - code: ``, + code: ``, }, }, }, @@ -72,12 +71,14 @@ export const CustomSlotContent: Story = { value: 'Custom slot content', }, render: args => html` - Custom Copy Text + + Custom Copy Text + `, parameters: { docs: { source: { - code: `Custom Copy Text`, + code: `Custom Copy Text`, }, }, }, @@ -91,15 +92,18 @@ export const ColorAndLook: Story = { look: 'primary', }, render: args => html` - + Copy - + `, parameters: { docs: { source: { code: ` - + `, }, }, @@ -112,19 +116,19 @@ export const CopiedEvent: Story = { value: 'Copy this text', }, render: args => html` - { + @copied=${(event: UUITextCopyButtonEvent) => { alert(`Copied text: ${event.detail.text}`); - }}> + }}> `, parameters: { docs: { source: { code: ` - + @@ -140,21 +144,21 @@ export const ModifyClipboardContent: Story = { value: 'Original text', }, render: args => html` - { + @copying=${(event: UUITextCopyButtonEvent) => { event.detail.text += ' - Modified before copying'; }}> Copy - + `, parameters: { docs: { source: { code: ` - + @@ -169,12 +173,14 @@ export const EmptyValueErrorState: Story = { args: { value: '', }, - render: args => html` `, + render: args => html` + + `, parameters: { docs: { source: { code: ` - + `, }, }, @@ -185,9 +191,9 @@ export const CopyFromInput: Story = { name: 'Copy From uui-input', render: () => html` - + - + `, parameters: { @@ -195,9 +201,9 @@ export const CopyFromInput: Story = { source: { code: ` - + - + `, }, @@ -214,7 +220,7 @@ export const AnimationDelay: Story = { parameters: { docs: { source: { - code: ``, + code: ``, }, }, }, @@ -226,17 +232,17 @@ export const WithDifferentIcon: Story = { value: 'I have used a different icon', }, render: args => html` - + Copy to Clipboard - + `, parameters: { docs: { source: { code: ` - + Copy to Clipboard -`, +`, }, }, }, diff --git a/packages/uui-copy/lib/uui-copy.test.ts b/packages/uui-text-copy-button/lib/uui-text-copy-button.test.ts similarity index 63% rename from packages/uui-copy/lib/uui-copy.test.ts rename to packages/uui-text-copy-button/lib/uui-text-copy-button.test.ts index 7ee14ed1a..99726fcd1 100644 --- a/packages/uui-copy/lib/uui-copy.test.ts +++ b/packages/uui-text-copy-button/lib/uui-text-copy-button.test.ts @@ -1,15 +1,17 @@ import { html, fixture, expect } from '@open-wc/testing'; -import { UUICopyElement } from './uui-copy.element'; +import { UUITextCopyButtonElement } from './uui-text-copy-button.element'; describe('UUICopyElement', () => { - let element: UUICopyElement; + let element: UUITextCopyButtonElement; beforeEach(async () => { - element = await fixture(html``); + element = await fixture( + html``, + ); }); it('is defined with its own instance', () => { - expect(element).to.be.instanceOf(UUICopyElement); + expect(element).to.be.instanceOf(UUITextCopyButtonElement); }); it('passes the a11y audit', async () => { diff --git a/packages/uui-copy/package.json b/packages/uui-text-copy-button/package.json similarity index 81% rename from packages/uui-copy/package.json rename to packages/uui-text-copy-button/package.json index c6ab21ceb..5a6e2cc65 100644 --- a/packages/uui-copy/package.json +++ b/packages/uui-text-copy-button/package.json @@ -1,5 +1,5 @@ { - "name": "@umbraco-ui/uui-copy", + "name": "@umbraco-ui/uui-text-copy-button", "version": "0.0.0", "license": "MIT", "keywords": [ @@ -10,11 +10,11 @@ "Lit", "Copy" ], - "description": "Umbraco UI copy component", + "description": "Umbraco UI text copy button component", "repository": { "type": "git", "url": "https://github.com/umbraco/Umbraco.UI.git", - "directory": "packages/uui-copy" + "directory": "packages/uui-text-copy-button" }, "bugs": { "url": "https://github.com/umbraco/Umbraco.UI/issues" @@ -40,5 +40,5 @@ "publishConfig": { "access": "public" }, - "homepage": "https://uui.umbraco.com/?path=/story/uui-copy" + "homepage": "https://uui.umbraco.com/?path=/story/uui-text-copy-button" } diff --git a/packages/uui-copy/rollup.config.js b/packages/uui-text-copy-button/rollup.config.js similarity index 79% rename from packages/uui-copy/rollup.config.js rename to packages/uui-text-copy-button/rollup.config.js index 12891d16a..34524a90d 100644 --- a/packages/uui-copy/rollup.config.js +++ b/packages/uui-text-copy-button/rollup.config.js @@ -1,5 +1,5 @@ import { UUIProdConfig } from '../rollup-package.config.mjs'; export default UUIProdConfig({ - entryPoints: ['index'] + entryPoints: ['index'], }); diff --git a/packages/uui-copy/tsconfig.json b/packages/uui-text-copy-button/tsconfig.json similarity index 100% rename from packages/uui-copy/tsconfig.json rename to packages/uui-text-copy-button/tsconfig.json diff --git a/packages/uui/lib/index.ts b/packages/uui/lib/index.ts index a19cbabd2..4a378627e 100644 --- a/packages/uui/lib/index.ts +++ b/packages/uui/lib/index.ts @@ -24,7 +24,6 @@ export * from '@umbraco-ui/uui-color-swatch/lib'; export * from '@umbraco-ui/uui-color-swatches/lib'; export * from '@umbraco-ui/uui-combobox-list/lib'; export * from '@umbraco-ui/uui-combobox/lib'; -export * from '@umbraco-ui/uui-copy/lib/index.js'; export * from '@umbraco-ui/uui-dialog-layout/lib'; export * from '@umbraco-ui/uui-dialog/lib'; export * from '@umbraco-ui/uui-file-dropzone/lib'; @@ -75,6 +74,7 @@ export * from '@umbraco-ui/uui-symbol-sort/lib'; export * from '@umbraco-ui/uui-table/lib'; export * from '@umbraco-ui/uui-tabs/lib'; export * from '@umbraco-ui/uui-tag/lib'; +export * from '@umbraco-ui/uui-text-copy-button/lib'; export * from '@umbraco-ui/uui-textarea/lib'; export * from '@umbraco-ui/uui-toast-notification-container/lib'; export * from '@umbraco-ui/uui-toast-notification-layout/lib'; From 5e6134faf6d3ef834f437b76ea06e8fe8b44b856 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Sun, 12 Jan 2025 20:52:06 +0000 Subject: [PATCH 19/36] =?UTF-8?q?Renaming=20files=20&=20folders=20was=20be?= =?UTF-8?q?in=20a=20PITA=20and=20things=20not=20working=20=F0=9F=A4=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit So had to stub it out again with npm run new-package --- package-lock.json | 8 +- packages/uui-text-copy-button/README.md | 32 ----- packages/uui-text-copy-button/lib/index.ts | 2 - packages/uui-text-copy/README.md | 31 +++++ .../lib/UUITextCopyEvent.ts} | 10 +- packages/uui-text-copy/lib/index.ts | 2 + .../lib/uui-text-copy.element.ts} | 44 +++---- .../lib/uui-text-copy.story.ts} | 110 ++++++++++-------- .../lib/uui-text-copy.test.ts} | 10 +- .../package.json | 10 +- .../rollup.config.js | 0 .../tsconfig.json | 0 packages/uui/lib/index.ts | 2 +- 13 files changed, 138 insertions(+), 123 deletions(-) delete mode 100644 packages/uui-text-copy-button/README.md delete mode 100644 packages/uui-text-copy-button/lib/index.ts create mode 100644 packages/uui-text-copy/README.md rename packages/{uui-text-copy-button/lib/UUITextCopyButtonEvent.ts => uui-text-copy/lib/UUITextCopyEvent.ts} (51%) create mode 100644 packages/uui-text-copy/lib/index.ts rename packages/{uui-text-copy-button/lib/uui-text-copy-button.element.ts => uui-text-copy/lib/uui-text-copy.element.ts} (79%) rename packages/{uui-text-copy-button/lib/uui-text-copy-button.story.ts => uui-text-copy/lib/uui-text-copy.story.ts} (57%) rename packages/{uui-text-copy-button/lib/uui-text-copy-button.test.ts => uui-text-copy/lib/uui-text-copy.test.ts} (63%) rename packages/{uui-text-copy-button => uui-text-copy}/package.json (85%) rename packages/{uui-text-copy-button => uui-text-copy}/rollup.config.js (100%) rename packages/{uui-text-copy-button => uui-text-copy}/tsconfig.json (100%) diff --git a/package-lock.json b/package-lock.json index 1ec5dcb4d..0589fcb2c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5168,8 +5168,8 @@ "resolved": "packages/uui-tag", "link": true }, - "node_modules/@umbraco-ui/uui-text-copy-button": { - "resolved": "packages/uui-text-copy-button", + "node_modules/@umbraco-ui/uui-text-copy": { + "resolved": "packages/uui-text-copy", "link": true }, "node_modules/@umbraco-ui/uui-textarea": { @@ -24574,8 +24574,8 @@ "@umbraco-ui/uui-base": "1.12.2" } }, - "packages/uui-text-copy-button": { - "name": "@umbraco-ui/uui-text-copy-button", + "packages/uui-text-copy": { + "name": "@umbraco-ui/uui-text-copy", "version": "0.0.0", "license": "MIT", "dependencies": { diff --git a/packages/uui-text-copy-button/README.md b/packages/uui-text-copy-button/README.md deleted file mode 100644 index e32508676..000000000 --- a/packages/uui-text-copy-button/README.md +++ /dev/null @@ -1,32 +0,0 @@ -# uuui-text-copy-button - -![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-text-copy-button?logoColor=%231B264F) - -Umbraco style copy component. - -## Installation - -### ES imports - -```zsh -npm i @umbraco-ui/uui-text-copy-button -``` - -Import the registration of `` via: - -```javascript -import '@umbraco-ui/uui-text-copy-button'; -``` - -When looking to leverage the `UUITextCopyButtonElement` base class as a type and/or for extension purposes, do so via: - -```javascript -import { UUITextCopyButtonElement } from '@umbraco-ui/uui-text-copy-button'; -``` - -## Usage - -```html - -``` diff --git a/packages/uui-text-copy-button/lib/index.ts b/packages/uui-text-copy-button/lib/index.ts deleted file mode 100644 index 8dc458038..000000000 --- a/packages/uui-text-copy-button/lib/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './uui-text-copy-button.element'; -export * from './UUITextCopyButtonEvent'; diff --git a/packages/uui-text-copy/README.md b/packages/uui-text-copy/README.md new file mode 100644 index 000000000..dc0226b89 --- /dev/null +++ b/packages/uui-text-copy/README.md @@ -0,0 +1,31 @@ +# uui-text-copy + +![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-text-copy?logoColor=%231B264F) + +Umbraco style text-copy component. + +## Installation + +### ES imports + +```zsh +npm i @umbraco-ui/uui-text-copy +``` + +Import the registration of `` via: + +```javascript +import '@umbraco-ui/uui-text-copy'; +``` + +When looking to leverage the `UUITextCopyElement` base class as a type and/or for extension purposes, do so via: + +```javascript +import { UUITextCopyElement } from '@umbraco-ui/uui-text-copy'; +``` + +## Usage + +```html + +``` diff --git a/packages/uui-text-copy-button/lib/UUITextCopyButtonEvent.ts b/packages/uui-text-copy/lib/UUITextCopyEvent.ts similarity index 51% rename from packages/uui-text-copy-button/lib/UUITextCopyButtonEvent.ts rename to packages/uui-text-copy/lib/UUITextCopyEvent.ts index 83fc18778..332b81e3f 100644 --- a/packages/uui-text-copy-button/lib/UUITextCopyButtonEvent.ts +++ b/packages/uui-text-copy/lib/UUITextCopyEvent.ts @@ -1,18 +1,18 @@ import { UUIEvent } from '@umbraco-ui/uui-base/lib/events'; -import { UUITextCopyButtonElement } from './uui-text-copy-button.element'; +import { UUITextCopyElement } from './uui-text-copy.element'; -interface UUITextCopyButtonEventInit extends EventInit { +interface UUITextCopyEventInit extends EventInit { detail?: { text: string }; } -export class UUITextCopyButtonEvent extends UUIEvent< +export class UUITextCopyEvent extends UUIEvent< { text: string }, - UUITextCopyButtonElement + UUITextCopyElement > { public static readonly COPIED: string = 'copied'; public static readonly COPYING: string = 'copying'; - constructor(evName: string, eventInit: UUITextCopyButtonEventInit = {}) { + constructor(evName: string, eventInit: UUITextCopyEventInit = {}) { super(evName, { ...{ bubbles: true }, ...eventInit, diff --git a/packages/uui-text-copy/lib/index.ts b/packages/uui-text-copy/lib/index.ts new file mode 100644 index 000000000..62e5ff0fb --- /dev/null +++ b/packages/uui-text-copy/lib/index.ts @@ -0,0 +1,2 @@ +export * from './uui-text-copy.element'; +export * from './UUITextCopyEvent'; diff --git a/packages/uui-text-copy-button/lib/uui-text-copy-button.element.ts b/packages/uui-text-copy/lib/uui-text-copy.element.ts similarity index 79% rename from packages/uui-text-copy-button/lib/uui-text-copy-button.element.ts rename to packages/uui-text-copy/lib/uui-text-copy.element.ts index 6b8fe95ed..c68d971c3 100644 --- a/packages/uui-text-copy-button/lib/uui-text-copy-button.element.ts +++ b/packages/uui-text-copy/lib/uui-text-copy.element.ts @@ -1,22 +1,26 @@ -import { defineElement } from '@umbraco-ui/uui-base/lib/registration'; import { css, html, LitElement } from 'lit'; import { property } from 'lit/decorators.js'; -import { UUIButtonElement } from '@umbraco-ui/uui-button/lib'; -import { UUITextCopyButtonEvent } from './UUITextCopyButtonEvent'; +import { defineElement } from '@umbraco-ui/uui-base/lib/registration'; import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils'; -import { LabelMixin } from '@umbraco-ui/uui-base/lib/mixins'; +import { UUIButtonElement } from '@umbraco-ui/uui-button/lib'; +import { + LabelMixin, + UUIInterfaceColor, + UUIInterfaceLook, +} from '@umbraco-ui/uui-base'; +import { UUITextCopyEvent } from './UUITextCopyEvent'; /** * @summary A button to trigger text content to be copied to the clipboard - * @element uui-text-copy-button + * @element uui-text-copy * @dependency uui-button * @dependency uui-icon - * @fires {UUICopyEvent} copying - Fires before the content is about to copied to the clipboard and can be used to transform or modify the data before its added to the clipboard - * @fires {UUICopyEvent} copied - Fires when the content is copied to the clipboard + * @fires {UUITextCopyEvent} copying - Fires before the content is about to copied to the clipboard and can be used to transform or modify the data before its added to the clipboard + * @fires {UUITextCopyEvent} copied - Fires when the content is copied to the clipboard * @slot - Use to replace the default content of 'Copy' and the copy icon */ -@defineElement('uui-text-copy-button') -export class UUITextCopyButtonElement extends LabelMixin('', LitElement) { +@defineElement('uui-text-copy') +export class UUITextCopyElement extends LabelMixin('', LitElement) { /** * Set a string you wish to copy to the clipboard * @type {string} @@ -53,17 +57,16 @@ export class UUITextCopyButtonElement extends LabelMixin('', LitElement) { * @default "default" */ @property() - look: 'default' | 'primary' | 'secondary' | 'outline' | 'placeholder' = - 'default'; + look: UUIInterfaceLook = 'default'; /** - * Changes the color of the button to one of the predefined, symbolic colors. + * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green "confirm" button. * @type {"default" | "positive" | "warning" | "danger"} * @attr * @default "default" */ - @property() - color: 'default' | 'positive' | 'warning' | 'danger' = 'default'; + @property({ reflect: true }) + color: UUIInterfaceColor = 'default'; /** * Makes the left and right padding of the button narrower. @@ -120,12 +123,9 @@ export class UUITextCopyButtonElement extends LabelMixin('', LitElement) { } } - const beforeCopyEv = new UUITextCopyButtonEvent( - UUITextCopyButtonEvent.COPYING, - { - detail: { text: this.#valueToCopy }, - }, - ); + const beforeCopyEv = new UUITextCopyEvent(UUITextCopyEvent.COPYING, { + detail: { text: this.#valueToCopy }, + }); this.dispatchEvent(beforeCopyEv); if (beforeCopyEv.detail.text != null) { @@ -136,7 +136,7 @@ export class UUITextCopyButtonElement extends LabelMixin('', LitElement) { .writeText(this.#valueToCopy) .then(() => { this.dispatchEvent( - new UUITextCopyButtonEvent(UUITextCopyButtonEvent.COPIED, { + new UUITextCopyEvent(UUITextCopyEvent.COPIED, { detail: { text: this.#valueToCopy }, }), ); @@ -173,6 +173,6 @@ export class UUITextCopyButtonElement extends LabelMixin('', LitElement) { declare global { interface HTMLElementTagNameMap { - 'uui-text-copy-button': UUITextCopyButtonElement; + 'uui-text-copy': UUITextCopyElement; } } diff --git a/packages/uui-text-copy-button/lib/uui-text-copy-button.story.ts b/packages/uui-text-copy/lib/uui-text-copy.story.ts similarity index 57% rename from packages/uui-text-copy-button/lib/uui-text-copy-button.story.ts rename to packages/uui-text-copy/lib/uui-text-copy.story.ts index 05e68cd2d..fff1a8b5d 100644 --- a/packages/uui-text-copy-button/lib/uui-text-copy-button.story.ts +++ b/packages/uui-text-copy/lib/uui-text-copy.story.ts @@ -1,34 +1,54 @@ import type { Meta, StoryObj } from '@storybook/web-components'; -import type { UUITextCopyButtonElement } from './uui-text-copy-button.element'; -import readme from '../README.md?raw'; import { html } from 'lit'; -import { UUITextCopyButtonEvent } from './UUITextCopyButtonEvent'; + +import './uui-text-copy.element'; +import type { UUITextCopyElement } from './uui-text-copy.element'; +import readme from '../README.md?raw'; + +// For the story to show the example of using inside an uui-input +import '@umbraco-ui/uui-input/lib'; + import '@umbraco-ui/uui-button/lib'; -import '@umbraco-ui/uui-icon/lib'; import '@umbraco-ui/uui-loader-circle/lib'; -const meta: Meta = { - id: 'uui-text-copy-button', - title: 'Inputs/Text Copy Button', - component: 'uui-text-copy-button', +import { UUITextCopyEvent } from './UUITextCopyEvent'; + +const meta: Meta = { + id: 'uui-text-copy', + title: 'Buttons/Text Copy', + component: 'uui-text-copy', parameters: { readme: { markdown: readme }, }, + args: { + value: 'Hey stop copying me 🥸', + color: 'default', + look: 'default', + }, + argTypes: { + look: { + options: ['default', 'primary', 'secondary', 'outline', 'placeholder'], + control: 'select', + }, + color: { + options: ['default', 'positive', 'warning', 'danger'], + control: 'select', + }, + }, }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Overview: Story = { name: 'Simple Copy', args: { value: 'Hey stop copying me 🥸', - disabled: false, }, parameters: { docs: { source: { - code: ``, + code: ``, }, }, }, @@ -44,7 +64,7 @@ export const WithLabelSet: Story = { parameters: { docs: { source: { - code: ``, + code: ``, }, }, }, @@ -59,7 +79,7 @@ export const Disabled: Story = { parameters: { docs: { source: { - code: ``, + code: ``, }, }, }, @@ -71,14 +91,12 @@ export const CustomSlotContent: Story = { value: 'Custom slot content', }, render: args => html` - - Custom Copy Text - + Custom Copy Text `, parameters: { docs: { source: { - code: `Custom Copy Text`, + code: `Custom Copy Text`, }, }, }, @@ -92,18 +110,18 @@ export const ColorAndLook: Story = { look: 'primary', }, render: args => html` - + .color=${args.color || 'default'} + .look=${args.look || 'default'}> Copy - + `, parameters: { docs: { source: { code: ` - + `, }, }, @@ -116,19 +134,19 @@ export const CopiedEvent: Story = { value: 'Copy this text', }, render: args => html` - { + @copied=${(event: UUITextCopyEvent) => { alert(`Copied text: ${event.detail.text}`); - }}> + }}> `, parameters: { docs: { source: { code: ` - + @@ -144,21 +162,19 @@ export const ModifyClipboardContent: Story = { value: 'Original text', }, render: args => html` - { + @copying=${(event: UUITextCopyEvent) => { event.detail.text += ' - Modified before copying'; - }}> - Copy - + }}> `, parameters: { docs: { source: { code: ` - + @@ -169,18 +185,18 @@ export const ModifyClipboardContent: Story = { }; export const EmptyValueErrorState: Story = { - name: 'Empty Value - shows an Error State', + name: 'Not Found Element set in Copy From - shows an Error State', args: { - value: '', + copyFrom: 'idSelectorDoesNotExist', }, render: args => html` - + `, parameters: { docs: { source: { code: ` - + `, }, }, @@ -191,9 +207,9 @@ export const CopyFromInput: Story = { name: 'Copy From uui-input', render: () => html` - + - + `, parameters: { @@ -201,9 +217,9 @@ export const CopyFromInput: Story = { source: { code: ` - + - + `, }, @@ -220,7 +236,7 @@ export const AnimationDelay: Story = { parameters: { docs: { source: { - code: ``, + code: ``, }, }, }, @@ -232,17 +248,17 @@ export const WithDifferentIcon: Story = { value: 'I have used a different icon', }, render: args => html` - + Copy to Clipboard - + `, parameters: { docs: { source: { code: ` - + Copy to Clipboard -`, +`, }, }, }, diff --git a/packages/uui-text-copy-button/lib/uui-text-copy-button.test.ts b/packages/uui-text-copy/lib/uui-text-copy.test.ts similarity index 63% rename from packages/uui-text-copy-button/lib/uui-text-copy-button.test.ts rename to packages/uui-text-copy/lib/uui-text-copy.test.ts index 99726fcd1..f91e25e43 100644 --- a/packages/uui-text-copy-button/lib/uui-text-copy-button.test.ts +++ b/packages/uui-text-copy/lib/uui-text-copy.test.ts @@ -1,17 +1,17 @@ import { html, fixture, expect } from '@open-wc/testing'; -import { UUITextCopyButtonElement } from './uui-text-copy-button.element'; +import { UUITextCopyElement } from './uui-text-copy.element'; -describe('UUICopyElement', () => { - let element: UUITextCopyButtonElement; +describe('UUITextCopyElement', () => { + let element: UUITextCopyElement; beforeEach(async () => { element = await fixture( - html``, + html``, ); }); it('is defined with its own instance', () => { - expect(element).to.be.instanceOf(UUITextCopyButtonElement); + expect(element).to.be.instanceOf(UUITextCopyElement); }); it('passes the a11y audit', async () => { diff --git a/packages/uui-text-copy-button/package.json b/packages/uui-text-copy/package.json similarity index 85% rename from packages/uui-text-copy-button/package.json rename to packages/uui-text-copy/package.json index 5a6e2cc65..8ce050d1a 100644 --- a/packages/uui-text-copy-button/package.json +++ b/packages/uui-text-copy/package.json @@ -1,5 +1,5 @@ { - "name": "@umbraco-ui/uui-text-copy-button", + "name": "@umbraco-ui/uui-text-copy", "version": "0.0.0", "license": "MIT", "keywords": [ @@ -8,13 +8,13 @@ "Web components", "UI", "Lit", - "Copy" + "Text Copy" ], - "description": "Umbraco UI text copy button component", + "description": "Umbraco UI text-copy component", "repository": { "type": "git", "url": "https://github.com/umbraco/Umbraco.UI.git", - "directory": "packages/uui-text-copy-button" + "directory": "packages/uui-text-copy" }, "bugs": { "url": "https://github.com/umbraco/Umbraco.UI/issues" @@ -40,5 +40,5 @@ "publishConfig": { "access": "public" }, - "homepage": "https://uui.umbraco.com/?path=/story/uui-text-copy-button" + "homepage": "https://uui.umbraco.com/?path=/story/uui-text-copy" } diff --git a/packages/uui-text-copy-button/rollup.config.js b/packages/uui-text-copy/rollup.config.js similarity index 100% rename from packages/uui-text-copy-button/rollup.config.js rename to packages/uui-text-copy/rollup.config.js diff --git a/packages/uui-text-copy-button/tsconfig.json b/packages/uui-text-copy/tsconfig.json similarity index 100% rename from packages/uui-text-copy-button/tsconfig.json rename to packages/uui-text-copy/tsconfig.json diff --git a/packages/uui/lib/index.ts b/packages/uui/lib/index.ts index 4a378627e..db377e0a0 100644 --- a/packages/uui/lib/index.ts +++ b/packages/uui/lib/index.ts @@ -74,10 +74,10 @@ export * from '@umbraco-ui/uui-symbol-sort/lib'; export * from '@umbraco-ui/uui-table/lib'; export * from '@umbraco-ui/uui-tabs/lib'; export * from '@umbraco-ui/uui-tag/lib'; -export * from '@umbraco-ui/uui-text-copy-button/lib'; export * from '@umbraco-ui/uui-textarea/lib'; export * from '@umbraco-ui/uui-toast-notification-container/lib'; export * from '@umbraco-ui/uui-toast-notification-layout/lib'; export * from '@umbraco-ui/uui-toast-notification/lib'; export * from '@umbraco-ui/uui-toggle/lib'; export * from '@umbraco-ui/uui-visually-hidden/lib'; +export * from '@umbraco-ui/uui-text-copy/lib/'; From 9a4ed422773539d35ab824af3a5b5d149a8e0d01 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Mon, 13 Jan 2025 16:18:34 +0000 Subject: [PATCH 20/36] FIx problem from test --- packages/uui-text-copy/lib/uui-text-copy.element.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/uui-text-copy/lib/uui-text-copy.element.ts b/packages/uui-text-copy/lib/uui-text-copy.element.ts index c68d971c3..2d4e93ea7 100644 --- a/packages/uui-text-copy/lib/uui-text-copy.element.ts +++ b/packages/uui-text-copy/lib/uui-text-copy.element.ts @@ -3,11 +3,8 @@ import { property } from 'lit/decorators.js'; import { defineElement } from '@umbraco-ui/uui-base/lib/registration'; import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils'; import { UUIButtonElement } from '@umbraco-ui/uui-button/lib'; -import { - LabelMixin, - UUIInterfaceColor, - UUIInterfaceLook, -} from '@umbraco-ui/uui-base'; +import { UUIInterfaceColor, UUIInterfaceLook } from '@umbraco-ui/uui-base'; +import { LabelMixin } from '@umbraco-ui/uui-base/lib/mixins'; import { UUITextCopyEvent } from './UUITextCopyEvent'; /** From 2a8db775d09c1a291e5cd7112c7d18708fc44438 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Wed, 15 Jan 2025 20:33:57 +0000 Subject: [PATCH 21/36] Remove console.log --- packages/uui-text-copy/lib/uui-text-copy.element.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/uui-text-copy/lib/uui-text-copy.element.ts b/packages/uui-text-copy/lib/uui-text-copy.element.ts index 2d4e93ea7..eca81c849 100644 --- a/packages/uui-text-copy/lib/uui-text-copy.element.ts +++ b/packages/uui-text-copy/lib/uui-text-copy.element.ts @@ -104,13 +104,11 @@ export class UUITextCopyElement extends LabelMixin('', LitElement) { // Try & find an element with the ID const el = document.getElementById(this.copyFrom); if (el) { - console.log('Element found to copy from', el); this.#valueToCopy = el.textContent ?? el.innerText ?? ''; // Override the value to copy ,if the element has a value property // Such as uui-input or uui-textarea or native inout elements if ('value' in el) { - console.log('This element has a value property', el); this.#valueToCopy = (el as any).value; } } else { From ac50a35c413a9843bf223cf695a7fbb82e571716 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Wed, 15 Jan 2025 20:51:31 +0000 Subject: [PATCH 22/36] Wrap with try/catch & drop the uneeded .then() --- .../lib/uui-text-copy.element.ts | 30 +++++++++---------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/packages/uui-text-copy/lib/uui-text-copy.element.ts b/packages/uui-text-copy/lib/uui-text-copy.element.ts index eca81c849..67fa9983f 100644 --- a/packages/uui-text-copy/lib/uui-text-copy.element.ts +++ b/packages/uui-text-copy/lib/uui-text-copy.element.ts @@ -127,22 +127,20 @@ export class UUITextCopyElement extends LabelMixin('', LitElement) { this.#valueToCopy = beforeCopyEv.detail.text; } - await navigator.clipboard - .writeText(this.#valueToCopy) - .then(() => { - this.dispatchEvent( - new UUITextCopyEvent(UUITextCopyEvent.COPIED, { - detail: { text: this.#valueToCopy }, - }), - ); - setTimeout(() => { - button.state = 'success'; - }, this.animationStateDelay); - }) - .catch(err => { - button.state = 'failed'; - console.error('Error copying to clipboard', err); - }); + try { + await navigator.clipboard.writeText(this.#valueToCopy); + this.dispatchEvent( + new UUITextCopyEvent(UUITextCopyEvent.COPIED, { + detail: { text: this.#valueToCopy }, + }), + ); + setTimeout(() => { + button.state = 'success'; + }, this.animationStateDelay); + } catch (err) { + button.state = 'failed'; + console.error('Error copying to clipboard', err); + } }; render() { From 5276fc762da8c61921ddd0240e949efebd2d0fd5 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Sat, 8 Feb 2025 20:45:01 +0000 Subject: [PATCH 23/36] Removes the event from bubbling, not sure there is a valid reason to --- packages/uui-text-copy/lib/UUITextCopyEvent.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/uui-text-copy/lib/UUITextCopyEvent.ts b/packages/uui-text-copy/lib/UUITextCopyEvent.ts index 332b81e3f..a6c362ca6 100644 --- a/packages/uui-text-copy/lib/UUITextCopyEvent.ts +++ b/packages/uui-text-copy/lib/UUITextCopyEvent.ts @@ -14,7 +14,6 @@ export class UUITextCopyEvent extends UUIEvent< constructor(evName: string, eventInit: UUITextCopyEventInit = {}) { super(evName, { - ...{ bubbles: true }, ...eventInit, }); } From f9087d84a2b2b0099bf9ee4fdf62b1303d97a248 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 4 Mar 2025 11:54:50 +0100 Subject: [PATCH 24/36] feat: rename element to `uui-button-copy-text` --- ...UITextCopyEvent.ts => UUICopyTextEvent.ts} | 10 ++-- packages/uui-text-copy/lib/index.ts | 4 +- ...ent.ts => uui-button-copy-text.element.ts} | 14 ++--- ...story.ts => uui-button-copy-text.story.ts} | 54 ++++++++----------- .../lib/uui-button-copy-text.test.ts | 26 +++++++++ .../uui-text-copy/lib/uui-text-copy.test.ts | 30 ----------- 6 files changed, 62 insertions(+), 76 deletions(-) rename packages/uui-text-copy/lib/{UUITextCopyEvent.ts => UUICopyTextEvent.ts} (51%) rename packages/uui-text-copy/lib/{uui-text-copy.element.ts => uui-button-copy-text.element.ts} (92%) rename packages/uui-text-copy/lib/{uui-text-copy.story.ts => uui-button-copy-text.story.ts} (75%) create mode 100644 packages/uui-text-copy/lib/uui-button-copy-text.test.ts delete mode 100644 packages/uui-text-copy/lib/uui-text-copy.test.ts diff --git a/packages/uui-text-copy/lib/UUITextCopyEvent.ts b/packages/uui-text-copy/lib/UUICopyTextEvent.ts similarity index 51% rename from packages/uui-text-copy/lib/UUITextCopyEvent.ts rename to packages/uui-text-copy/lib/UUICopyTextEvent.ts index a6c362ca6..4a98bf22f 100644 --- a/packages/uui-text-copy/lib/UUITextCopyEvent.ts +++ b/packages/uui-text-copy/lib/UUICopyTextEvent.ts @@ -1,18 +1,18 @@ import { UUIEvent } from '@umbraco-ui/uui-base/lib/events'; -import { UUITextCopyElement } from './uui-text-copy.element'; +import { UUIButtonCopyTextElement } from './uui-button-copy-text.element'; -interface UUITextCopyEventInit extends EventInit { +interface UUICopyTextEventInit extends EventInit { detail?: { text: string }; } -export class UUITextCopyEvent extends UUIEvent< +export class UUICopyTextEvent extends UUIEvent< { text: string }, - UUITextCopyElement + UUIButtonCopyTextElement > { public static readonly COPIED: string = 'copied'; public static readonly COPYING: string = 'copying'; - constructor(evName: string, eventInit: UUITextCopyEventInit = {}) { + constructor(evName: string, eventInit: UUICopyTextEventInit = {}) { super(evName, { ...eventInit, }); diff --git a/packages/uui-text-copy/lib/index.ts b/packages/uui-text-copy/lib/index.ts index 62e5ff0fb..2d163cbf5 100644 --- a/packages/uui-text-copy/lib/index.ts +++ b/packages/uui-text-copy/lib/index.ts @@ -1,2 +1,2 @@ -export * from './uui-text-copy.element'; -export * from './UUITextCopyEvent'; +export * from './uui-button-copy-text.element'; +export * from './UUICopyTextEvent'; diff --git a/packages/uui-text-copy/lib/uui-text-copy.element.ts b/packages/uui-text-copy/lib/uui-button-copy-text.element.ts similarity index 92% rename from packages/uui-text-copy/lib/uui-text-copy.element.ts rename to packages/uui-text-copy/lib/uui-button-copy-text.element.ts index 67fa9983f..6a2c62fd6 100644 --- a/packages/uui-text-copy/lib/uui-text-copy.element.ts +++ b/packages/uui-text-copy/lib/uui-button-copy-text.element.ts @@ -5,19 +5,19 @@ import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils'; import { UUIButtonElement } from '@umbraco-ui/uui-button/lib'; import { UUIInterfaceColor, UUIInterfaceLook } from '@umbraco-ui/uui-base'; import { LabelMixin } from '@umbraco-ui/uui-base/lib/mixins'; -import { UUITextCopyEvent } from './UUITextCopyEvent'; +import { UUICopyTextEvent } from './UUICopyTextEvent'; /** * @summary A button to trigger text content to be copied to the clipboard - * @element uui-text-copy + * @element uui-button-copy-text * @dependency uui-button * @dependency uui-icon * @fires {UUITextCopyEvent} copying - Fires before the content is about to copied to the clipboard and can be used to transform or modify the data before its added to the clipboard * @fires {UUITextCopyEvent} copied - Fires when the content is copied to the clipboard * @slot - Use to replace the default content of 'Copy' and the copy icon */ -@defineElement('uui-text-copy') -export class UUITextCopyElement extends LabelMixin('', LitElement) { +@defineElement('uui-button-copy-text') +export class UUIButtonCopyTextElement extends LabelMixin('', LitElement) { /** * Set a string you wish to copy to the clipboard * @type {string} @@ -118,7 +118,7 @@ export class UUITextCopyElement extends LabelMixin('', LitElement) { } } - const beforeCopyEv = new UUITextCopyEvent(UUITextCopyEvent.COPYING, { + const beforeCopyEv = new UUICopyTextEvent(UUICopyTextEvent.COPYING, { detail: { text: this.#valueToCopy }, }); this.dispatchEvent(beforeCopyEv); @@ -130,7 +130,7 @@ export class UUITextCopyElement extends LabelMixin('', LitElement) { try { await navigator.clipboard.writeText(this.#valueToCopy); this.dispatchEvent( - new UUITextCopyEvent(UUITextCopyEvent.COPIED, { + new UUICopyTextEvent(UUICopyTextEvent.COPIED, { detail: { text: this.#valueToCopy }, }), ); @@ -166,6 +166,6 @@ export class UUITextCopyElement extends LabelMixin('', LitElement) { declare global { interface HTMLElementTagNameMap { - 'uui-text-copy': UUITextCopyElement; + 'uui-button-copy-text': UUIButtonCopyTextElement; } } diff --git a/packages/uui-text-copy/lib/uui-text-copy.story.ts b/packages/uui-text-copy/lib/uui-button-copy-text.story.ts similarity index 75% rename from packages/uui-text-copy/lib/uui-text-copy.story.ts rename to packages/uui-text-copy/lib/uui-button-copy-text.story.ts index fff1a8b5d..d5d55d1b7 100644 --- a/packages/uui-text-copy/lib/uui-text-copy.story.ts +++ b/packages/uui-text-copy/lib/uui-button-copy-text.story.ts @@ -1,8 +1,9 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { html } from 'lit'; -import './uui-text-copy.element'; -import type { UUITextCopyElement } from './uui-text-copy.element'; +import './uui-text-copy.element.js'; +import { UUICopyTextEvent } from './UUICopyTextEvent'; +import type { UUIButtonCopyTextElement } from './uui-button-copy-text.element.js'; import readme from '../README.md?raw'; // For the story to show the example of using inside an uui-input @@ -11,12 +12,10 @@ import '@umbraco-ui/uui-input/lib'; import '@umbraco-ui/uui-button/lib'; import '@umbraco-ui/uui-loader-circle/lib'; -import { UUITextCopyEvent } from './UUITextCopyEvent'; - -const meta: Meta = { - id: 'uui-text-copy', - title: 'Buttons/Text Copy', - component: 'uui-text-copy', +const meta: Meta = { + id: 'uui-button-copy-text', + title: 'Buttons/Copy text', + component: 'uui-button-copy-text', parameters: { readme: { markdown: readme }, }, @@ -38,7 +37,7 @@ const meta: Meta = { }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Overview: Story = { name: 'Simple Copy', @@ -48,7 +47,7 @@ export const Overview: Story = { parameters: { docs: { source: { - code: ``, + code: ``, }, }, }, @@ -64,7 +63,7 @@ export const WithLabelSet: Story = { parameters: { docs: { source: { - code: ``, + code: ``, }, }, }, @@ -79,7 +78,7 @@ export const Disabled: Story = { parameters: { docs: { source: { - code: ``, + code: ``, }, }, }, @@ -91,12 +90,14 @@ export const CustomSlotContent: Story = { value: 'Custom slot content', }, render: args => html` - Custom Copy Text + + Custom Copy Text + `, parameters: { docs: { source: { - code: `Custom Copy Text`, + code: `Custom Copy Text`, }, }, }, @@ -109,19 +110,11 @@ export const ColorAndLook: Story = { color: 'positive', look: 'primary', }, - render: args => html` - - Copy - - `, parameters: { docs: { source: { code: ` - + `, }, }, @@ -134,19 +127,19 @@ export const CopiedEvent: Story = { value: 'Copy this text', }, render: args => html` - { + @copied=${(event: UUICopyTextEvent) => { alert(`Copied text: ${event.detail.text}`); - }}> + }}> `, parameters: { docs: { source: { code: ` - + @@ -164,7 +157,7 @@ export const ModifyClipboardContent: Story = { render: args => html` { + @copying=${(event: UUICopyTextEvent) => { event.detail.text += ' - Modified before copying'; }}> `, @@ -189,9 +182,6 @@ export const EmptyValueErrorState: Story = { args: { copyFrom: 'idSelectorDoesNotExist', }, - render: args => html` - - `, parameters: { docs: { source: { diff --git a/packages/uui-text-copy/lib/uui-button-copy-text.test.ts b/packages/uui-text-copy/lib/uui-button-copy-text.test.ts new file mode 100644 index 000000000..a0ed14fcb --- /dev/null +++ b/packages/uui-text-copy/lib/uui-button-copy-text.test.ts @@ -0,0 +1,26 @@ +import { html, fixture, expect } from '@open-wc/testing'; +import { UUIButtonCopyTextElement } from './uui-button-copy-text.element'; + +describe('UUIButtonCopyTextElement', () => { + let element: UUIButtonCopyTextElement; + + beforeEach(async () => { + element = await fixture( + html``, + ); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UUIButtonCopyTextElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(); + }); + + it('renders correctly', async () => { + expect(element).shadowDom.to.contain( + ' Copy', + ); + }); +}); diff --git a/packages/uui-text-copy/lib/uui-text-copy.test.ts b/packages/uui-text-copy/lib/uui-text-copy.test.ts deleted file mode 100644 index f91e25e43..000000000 --- a/packages/uui-text-copy/lib/uui-text-copy.test.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { html, fixture, expect } from '@open-wc/testing'; -import { UUITextCopyElement } from './uui-text-copy.element'; - -describe('UUITextCopyElement', () => { - let element: UUITextCopyElement; - - beforeEach(async () => { - element = await fixture( - html``, - ); - }); - - it('is defined with its own instance', () => { - expect(element).to.be.instanceOf(UUITextCopyElement); - }); - - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(); - }); - - it('renders correctly', async () => { - expect(element).shadowDom.to.equal(` - - - Copy - - - `); - }); -}); From f9631b48848c4aa87c72578cac2ef33dfbc0f38a Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 4 Mar 2025 13:38:30 +0100 Subject: [PATCH 25/36] feat: rename to uui-button-copy-text and add dependencies --- packages/uui-text-copy/package.json | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/uui-text-copy/package.json b/packages/uui-text-copy/package.json index 8ce050d1a..c1d6beaa9 100644 --- a/packages/uui-text-copy/package.json +++ b/packages/uui-text-copy/package.json @@ -1,5 +1,5 @@ { - "name": "@umbraco-ui/uui-text-copy", + "name": "@umbraco-ui/uui-button-copy-text", "version": "0.0.0", "license": "MIT", "keywords": [ @@ -10,11 +10,11 @@ "Lit", "Text Copy" ], - "description": "Umbraco UI text-copy component", + "description": "Umbraco UI button text-copy component", "repository": { "type": "git", "url": "https://github.com/umbraco/Umbraco.UI.git", - "directory": "packages/uui-text-copy" + "directory": "packages/uui-button-copy-text" }, "bugs": { "url": "https://github.com/umbraco/Umbraco.UI/issues" @@ -30,7 +30,9 @@ "custom-elements.json" ], "dependencies": { - "@umbraco-ui/uui-base": "1.12.2" + "@umbraco-ui/uui-base": "1.12.2", + "@umbraco-ui/uui-button": "1.12.2", + "@umbraco-ui/uui-icon": "1.12.2" }, "scripts": { "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js", @@ -40,5 +42,5 @@ "publishConfig": { "access": "public" }, - "homepage": "https://uui.umbraco.com/?path=/story/uui-text-copy" + "homepage": "https://uui.umbraco.com/?path=/story/uui-button-copy-text" } From 2535b1f4003613032dfc0c9781040d688565360b Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 4 Mar 2025 13:39:52 +0100 Subject: [PATCH 26/36] feat: rename to uui-button-copy-text and add dependencies --- package-lock.json | 14 ++++++++------ packages/uui-text-copy/tsconfig.json | 6 ++++++ packages/uui/lib/index.ts | 2 +- 3 files changed, 15 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 10b62adc4..2e0ede1bd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4545,6 +4545,10 @@ "resolved": "packages/uui-button", "link": true }, + "node_modules/@umbraco-ui/uui-button-copy-text": { + "resolved": "packages/uui-text-copy", + "link": true + }, "node_modules/@umbraco-ui/uui-button-group": { "resolved": "packages/uui-button-group", "link": true @@ -4813,10 +4817,6 @@ "resolved": "packages/uui-tag", "link": true }, - "node_modules/@umbraco-ui/uui-text-copy": { - "resolved": "packages/uui-text-copy", - "link": true - }, "node_modules/@umbraco-ui/uui-textarea": { "resolved": "packages/uui-textarea", "link": true @@ -24358,11 +24358,13 @@ } }, "packages/uui-text-copy": { - "name": "@umbraco-ui/uui-text-copy", + "name": "@umbraco-ui/uui-button-copy-text", "version": "0.0.0", "license": "MIT", "dependencies": { - "@umbraco-ui/uui-base": "1.12.2" + "@umbraco-ui/uui-base": "1.12.2", + "@umbraco-ui/uui-button": "1.12.2", + "@umbraco-ui/uui-icon": "1.12.2" } }, "packages/uui-textarea": { diff --git a/packages/uui-text-copy/tsconfig.json b/packages/uui-text-copy/tsconfig.json index 40d176776..0e7ddda7c 100644 --- a/packages/uui-text-copy/tsconfig.json +++ b/packages/uui-text-copy/tsconfig.json @@ -12,6 +12,12 @@ "references": [ { "path": "../uui-base" + }, + { + "path": "../uui-button" + }, + { + "path": "../uui-icon" } ] } diff --git a/packages/uui/lib/index.ts b/packages/uui/lib/index.ts index db377e0a0..aa3f630c3 100644 --- a/packages/uui/lib/index.ts +++ b/packages/uui/lib/index.ts @@ -9,6 +9,7 @@ export * from '@umbraco-ui/uui-box/lib'; export * from '@umbraco-ui/uui-breadcrumbs/lib'; export * from '@umbraco-ui/uui-button-group/lib'; export * from '@umbraco-ui/uui-button-inline-create/lib'; +export * from '@umbraco-ui/uui-button-copy-text/lib'; export * from '@umbraco-ui/uui-button/lib'; export * from '@umbraco-ui/uui-card-block-type/lib'; export * from '@umbraco-ui/uui-card-content-node/lib'; @@ -80,4 +81,3 @@ export * from '@umbraco-ui/uui-toast-notification-layout/lib'; export * from '@umbraco-ui/uui-toast-notification/lib'; export * from '@umbraco-ui/uui-toggle/lib'; export * from '@umbraco-ui/uui-visually-hidden/lib'; -export * from '@umbraco-ui/uui-text-copy/lib/'; From e7ddf6d8fd45088c1c62b1a24a131e0e1ffd2539 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 4 Mar 2025 14:24:28 +0100 Subject: [PATCH 27/36] feat: uui-icon package is optional --- package-lock.json | 3 +-- packages/uui-text-copy/package.json | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2e0ede1bd..ab14c8a84 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24363,8 +24363,7 @@ "license": "MIT", "dependencies": { "@umbraco-ui/uui-base": "1.12.2", - "@umbraco-ui/uui-button": "1.12.2", - "@umbraco-ui/uui-icon": "1.12.2" + "@umbraco-ui/uui-button": "1.12.2" } }, "packages/uui-textarea": { diff --git a/packages/uui-text-copy/package.json b/packages/uui-text-copy/package.json index c1d6beaa9..f96031df1 100644 --- a/packages/uui-text-copy/package.json +++ b/packages/uui-text-copy/package.json @@ -31,8 +31,7 @@ ], "dependencies": { "@umbraco-ui/uui-base": "1.12.2", - "@umbraco-ui/uui-button": "1.12.2", - "@umbraco-ui/uui-icon": "1.12.2" + "@umbraco-ui/uui-button": "1.12.2" }, "scripts": { "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js", From 69b7b0345ce4e93732290ad59769c8a4f01e9885 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 4 Mar 2025 14:24:39 +0100 Subject: [PATCH 28/36] feat: uui-icon package is optional --- packages/uui-text-copy/tsconfig.json | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/uui-text-copy/tsconfig.json b/packages/uui-text-copy/tsconfig.json index 0e7ddda7c..8d932a063 100644 --- a/packages/uui-text-copy/tsconfig.json +++ b/packages/uui-text-copy/tsconfig.json @@ -15,9 +15,6 @@ }, { "path": "../uui-button" - }, - { - "path": "../uui-icon" } ] } From 11479a8b6b14fe7ca753314467cc1e0fa9fefbda Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 4 Mar 2025 14:25:05 +0100 Subject: [PATCH 29/36] feat: extend from uui-button and rename `value` to `text` --- .../lib/uui-button-copy-text.element.ts | 100 +++++------------- .../lib/uui-button-copy-text.story.ts | 77 +++++++------- .../lib/uui-button-copy-text.test.ts | 9 +- 3 files changed, 70 insertions(+), 116 deletions(-) diff --git a/packages/uui-text-copy/lib/uui-button-copy-text.element.ts b/packages/uui-text-copy/lib/uui-button-copy-text.element.ts index 6a2c62fd6..402421710 100644 --- a/packages/uui-text-copy/lib/uui-button-copy-text.element.ts +++ b/packages/uui-text-copy/lib/uui-button-copy-text.element.ts @@ -1,39 +1,28 @@ -import { css, html, LitElement } from 'lit'; +import { html } from 'lit'; import { property } from 'lit/decorators.js'; import { defineElement } from '@umbraco-ui/uui-base/lib/registration'; import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils'; import { UUIButtonElement } from '@umbraco-ui/uui-button/lib'; -import { UUIInterfaceColor, UUIInterfaceLook } from '@umbraco-ui/uui-base'; -import { LabelMixin } from '@umbraco-ui/uui-base/lib/mixins'; -import { UUICopyTextEvent } from './UUICopyTextEvent'; +import { UUICopyTextEvent } from './UUICopyTextEvent.js'; /** * @summary A button to trigger text content to be copied to the clipboard * @element uui-button-copy-text * @dependency uui-button * @dependency uui-icon - * @fires {UUITextCopyEvent} copying - Fires before the content is about to copied to the clipboard and can be used to transform or modify the data before its added to the clipboard - * @fires {UUITextCopyEvent} copied - Fires when the content is copied to the clipboard - * @slot - Use to replace the default content of 'Copy' and the copy icon + * @fires {UUICopyTextEvent} copying - Fires before the content is about to copied to the clipboard and can be used to transform or modify the data before its added to the clipboard + * @fires {UUICopyTextEvent} copied - Fires when the content is copied to the clipboard + * @slot - Use to replace the default content of the copy icon */ @defineElement('uui-button-copy-text') -export class UUIButtonCopyTextElement extends LabelMixin('', LitElement) { +export class UUIButtonCopyTextElement extends UUIButtonElement { /** * Set a string you wish to copy to the clipboard * @type {string} * @default '' */ @property({ type: String }) - value = ''; - - /** - * Disables the button - * @type {boolean} - * @attr - * @default false - */ - @property({ type: Boolean }) - disabled = false; + text: string = ''; /** * Copies the text content from another element by specifying the ID of the element @@ -45,34 +34,7 @@ export class UUIButtonCopyTextElement extends LabelMixin('', LitElement) { * @example copy-from="element-id" */ @property({ type: String, attribute: 'copy-from' }) - copyFrom = ''; - - /** - * Changes the look of the button to one of the predefined, symbolic looks. - * @type {"default" | "primary" | "secondary" | "outline" | "placeholder"} - * @attr - * @default "default" - */ - @property() - look: UUIInterfaceLook = 'default'; - - /** - * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green "confirm" button. - * @type {"default" | "positive" | "warning" | "danger"} - * @attr - * @default "default" - */ - @property({ reflect: true }) - color: UUIInterfaceColor = 'default'; - - /** - * Makes the left and right padding of the button narrower. - * @type {boolean} - * @attr - * @default false - */ - @property({ type: Boolean }) - compact = false; + copyFrom: string = ''; /** * The delay in milliseconds before the button returns to its default state after a successful copy @@ -81,35 +43,33 @@ export class UUIButtonCopyTextElement extends LabelMixin('', LitElement) { * @default 250 */ @property({ type: Number, attribute: 'animation-state-delay' }) - animationStateDelay = 250; + animationStateDelay: number = 250; constructor() { super(); - demandCustomElement(this, 'uui-button'); demandCustomElement(this, 'uui-icon'); - } - // Used to store the value that will be copied to the clipboard - #valueToCopy = ''; + this.addEventListener('click', this.#onClick); + } readonly #onClick = async (e: Event) => { const button = e.target as UUIButtonElement; button.state = 'waiting'; // By default use the value property - this.#valueToCopy = this.value; + let valueToCopy = this.text; // If copy-from is set use that instead if (this.copyFrom) { // Try & find an element with the ID const el = document.getElementById(this.copyFrom); if (el) { - this.#valueToCopy = el.textContent ?? el.innerText ?? ''; + valueToCopy = el.textContent ?? el.innerText ?? ''; // Override the value to copy ,if the element has a value property // Such as uui-input or uui-textarea or native inout elements if ('value' in el) { - this.#valueToCopy = (el as any).value; + valueToCopy = (el as any).value; } } else { console.error(`Element ID ${this.copyFrom} not found to copy from`); @@ -119,19 +79,19 @@ export class UUIButtonCopyTextElement extends LabelMixin('', LitElement) { } const beforeCopyEv = new UUICopyTextEvent(UUICopyTextEvent.COPYING, { - detail: { text: this.#valueToCopy }, + detail: { text: valueToCopy }, }); this.dispatchEvent(beforeCopyEv); if (beforeCopyEv.detail.text != null) { - this.#valueToCopy = beforeCopyEv.detail.text; + valueToCopy = beforeCopyEv.detail.text; } try { - await navigator.clipboard.writeText(this.#valueToCopy); + await navigator.clipboard.writeText(valueToCopy); this.dispatchEvent( new UUICopyTextEvent(UUICopyTextEvent.COPIED, { - detail: { text: this.#valueToCopy }, + detail: { text: valueToCopy }, }), ); setTimeout(() => { @@ -143,25 +103,15 @@ export class UUIButtonCopyTextElement extends LabelMixin('', LitElement) { } }; - render() { - return html` - Copy - `; + protected override renderLabel() { + return html` + + + + `; } - static readonly styles = [ - css` - slot { - pointer-events: none; - } - `, - ]; + static override readonly styles = UUIButtonElement.styles; } declare global { diff --git a/packages/uui-text-copy/lib/uui-button-copy-text.story.ts b/packages/uui-text-copy/lib/uui-button-copy-text.story.ts index d5d55d1b7..33ff622a1 100644 --- a/packages/uui-text-copy/lib/uui-button-copy-text.story.ts +++ b/packages/uui-text-copy/lib/uui-button-copy-text.story.ts @@ -1,10 +1,11 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { html } from 'lit'; -import './uui-text-copy.element.js'; +import './uui-button-copy-text.element.js'; import { UUICopyTextEvent } from './UUICopyTextEvent'; import type { UUIButtonCopyTextElement } from './uui-button-copy-text.element.js'; import readme from '../README.md?raw'; +import { renderSlots, spread } from '../../../storyhelpers/index.js'; // For the story to show the example of using inside an uui-input import '@umbraco-ui/uui-input/lib'; @@ -20,9 +21,9 @@ const meta: Meta = { readme: { markdown: readme }, }, args: { - value: 'Hey stop copying me 🥸', + text: 'Hey stop copying me 🥸', color: 'default', - look: 'default', + look: 'secondary', }, argTypes: { look: { @@ -34,6 +35,11 @@ const meta: Meta = { control: 'select', }, }, + render: args => { + return html`${renderSlots(args)}`; + }, }; export default meta; @@ -42,12 +48,12 @@ type Story = StoryObj; export const Overview: Story = { name: 'Simple Copy', args: { - value: 'Hey stop copying me 🥸', + text: 'Hey stop copying me 🥸', }, parameters: { docs: { source: { - code: ``, + code: ``, }, }, }, @@ -56,14 +62,14 @@ export const Overview: Story = { export const WithLabelSet: Story = { name: 'Simple Copy with an A11y Label set', args: { - value: 'Hey stop copying me 🥸', + text: 'Hey stop copying me 🥸', disabled: false, label: 'This is my A11y label I want', }, parameters: { docs: { source: { - code: ``, + code: ``, }, }, }, @@ -78,7 +84,7 @@ export const Disabled: Story = { parameters: { docs: { source: { - code: ``, + code: ``, }, }, }, @@ -87,17 +93,12 @@ export const Disabled: Story = { export const CustomSlotContent: Story = { name: 'Custom Slot Content', args: { - value: 'Custom slot content', + text: 'Custom slot content', }, - render: args => html` - - Custom Copy Text - - `, parameters: { docs: { source: { - code: `Custom Copy Text`, + code: `Custom Slot Content`, }, }, }, @@ -106,7 +107,7 @@ export const CustomSlotContent: Story = { export const ColorAndLook: Story = { name: 'Color and Look', args: { - value: 'Copy this text', + text: 'Copy this text', color: 'positive', look: 'primary', }, @@ -124,11 +125,11 @@ export const ColorAndLook: Story = { export const CopiedEvent: Story = { name: 'Copied Event', args: { - value: 'Copy this text', + text: 'Copy this text', }, render: args => html` { alert(`Copied text: ${event.detail.text}`); }}> @@ -137,7 +138,7 @@ export const CopiedEvent: Story = { docs: { source: { code: ` - + @@ -186,7 +187,7 @@ export const EmptyValueErrorState: Story = { docs: { source: { code: ` - + `, }, }, @@ -197,9 +198,9 @@ export const CopyFromInput: Story = { name: 'Copy From uui-input', render: () => html` - + - + `, parameters: { @@ -207,9 +208,9 @@ export const CopyFromInput: Story = { source: { code: ` - + - + `, }, @@ -226,7 +227,7 @@ export const AnimationDelay: Story = { parameters: { docs: { source: { - code: ``, + code: ``, }, }, }, @@ -235,20 +236,20 @@ export const AnimationDelay: Story = { export const WithDifferentIcon: Story = { name: 'Different Icon', args: { - value: 'I have used a different icon', + text: 'I have used a different icon', }, render: args => html` - - Copy to Clipboard - + + Copy to Clipboard + `, parameters: { docs: { source: { code: ` - - Copy to Clipboard -`, + + Copy to Clipboard +`, }, }, }, diff --git a/packages/uui-text-copy/lib/uui-button-copy-text.test.ts b/packages/uui-text-copy/lib/uui-button-copy-text.test.ts index a0ed14fcb..b51158818 100644 --- a/packages/uui-text-copy/lib/uui-button-copy-text.test.ts +++ b/packages/uui-text-copy/lib/uui-button-copy-text.test.ts @@ -1,12 +1,15 @@ import { html, fixture, expect } from '@open-wc/testing'; import { UUIButtonCopyTextElement } from './uui-button-copy-text.element'; +import '@umbraco-ui/uui-icon/lib'; describe('UUIButtonCopyTextElement', () => { let element: UUIButtonCopyTextElement; beforeEach(async () => { element = await fixture( - html``, + html``, ); }); @@ -19,8 +22,8 @@ describe('UUIButtonCopyTextElement', () => { }); it('renders correctly', async () => { - expect(element).shadowDom.to.contain( - ' Copy', + expect(element.shadowRoot?.innerHTML).to.contain( + '', ); }); }); From 67d6eef17e817e13271d3969d51f86fa6ef5bdc1 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 4 Mar 2025 14:29:20 +0100 Subject: [PATCH 30/36] feat: copy only from other element if there is no 'value' field --- packages/uui-text-copy/lib/uui-button-copy-text.element.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/uui-text-copy/lib/uui-button-copy-text.element.ts b/packages/uui-text-copy/lib/uui-button-copy-text.element.ts index 402421710..f12b8a629 100644 --- a/packages/uui-text-copy/lib/uui-button-copy-text.element.ts +++ b/packages/uui-text-copy/lib/uui-button-copy-text.element.ts @@ -64,12 +64,12 @@ export class UUIButtonCopyTextElement extends UUIButtonElement { // Try & find an element with the ID const el = document.getElementById(this.copyFrom); if (el) { - valueToCopy = el.textContent ?? el.innerText ?? ''; - - // Override the value to copy ,if the element has a value property + // Override the value to copy, if the element has a value property // Such as uui-input or uui-textarea or native inout elements if ('value' in el) { valueToCopy = (el as any).value; + } else { + valueToCopy = el.textContent ?? el.innerText ?? ''; } } else { console.error(`Element ID ${this.copyFrom} not found to copy from`); From 87e2c025bde0761a8b0be4672b592e44cd06a81f Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 4 Mar 2025 14:39:43 +0100 Subject: [PATCH 31/36] feat: use real class property to hold copied value --- .../uui-text-copy/lib/UUICopyTextEvent.ts | 13 ++++--------- .../lib/uui-button-copy-text.element.ts | 19 +++++++------------ .../lib/uui-button-copy-text.story.ts | 8 ++++---- 3 files changed, 15 insertions(+), 25 deletions(-) diff --git a/packages/uui-text-copy/lib/UUICopyTextEvent.ts b/packages/uui-text-copy/lib/UUICopyTextEvent.ts index 4a98bf22f..57ef704d5 100644 --- a/packages/uui-text-copy/lib/UUICopyTextEvent.ts +++ b/packages/uui-text-copy/lib/UUICopyTextEvent.ts @@ -1,10 +1,6 @@ import { UUIEvent } from '@umbraco-ui/uui-base/lib/events'; import { UUIButtonCopyTextElement } from './uui-button-copy-text.element'; -interface UUICopyTextEventInit extends EventInit { - detail?: { text: string }; -} - export class UUICopyTextEvent extends UUIEvent< { text: string }, UUIButtonCopyTextElement @@ -12,9 +8,8 @@ export class UUICopyTextEvent extends UUIEvent< public static readonly COPIED: string = 'copied'; public static readonly COPYING: string = 'copying'; - constructor(evName: string, eventInit: UUICopyTextEventInit = {}) { - super(evName, { - ...eventInit, - }); - } + /** + * The text content that is about to be copied to the clipboard + */ + public text: string | null = null; } diff --git a/packages/uui-text-copy/lib/uui-button-copy-text.element.ts b/packages/uui-text-copy/lib/uui-button-copy-text.element.ts index f12b8a629..de17e0398 100644 --- a/packages/uui-text-copy/lib/uui-button-copy-text.element.ts +++ b/packages/uui-text-copy/lib/uui-button-copy-text.element.ts @@ -78,24 +78,19 @@ export class UUIButtonCopyTextElement extends UUIButtonElement { } } - const beforeCopyEv = new UUICopyTextEvent(UUICopyTextEvent.COPYING, { - detail: { text: valueToCopy }, - }); + const beforeCopyEv = new UUICopyTextEvent(UUICopyTextEvent.COPYING); + beforeCopyEv.text = valueToCopy; this.dispatchEvent(beforeCopyEv); - if (beforeCopyEv.detail.text != null) { - valueToCopy = beforeCopyEv.detail.text; + if (beforeCopyEv.text != null) { + valueToCopy = beforeCopyEv.text; } try { await navigator.clipboard.writeText(valueToCopy); - this.dispatchEvent( - new UUICopyTextEvent(UUICopyTextEvent.COPIED, { - detail: { text: valueToCopy }, - }), - ); - setTimeout(() => { - button.state = 'success'; + const copiedEv = new UUICopyTextEvent(UUICopyTextEvent.COPIED); + copiedEv.text = valueToCopy; + this.dispatchEvent(copiedEv); }, this.animationStateDelay); } catch (err) { button.state = 'failed'; diff --git a/packages/uui-text-copy/lib/uui-button-copy-text.story.ts b/packages/uui-text-copy/lib/uui-button-copy-text.story.ts index 33ff622a1..f0e26bdf1 100644 --- a/packages/uui-text-copy/lib/uui-button-copy-text.story.ts +++ b/packages/uui-text-copy/lib/uui-button-copy-text.story.ts @@ -131,7 +131,7 @@ export const CopiedEvent: Story = { { - alert(`Copied text: ${event.detail.text}`); + alert(`Copied text: ${event.text}`); }}> `, parameters: { @@ -141,7 +141,7 @@ export const CopiedEvent: Story = { `, @@ -159,7 +159,7 @@ export const ModifyClipboardContent: Story = { { - event.detail.text += ' - Modified before copying'; + event.text += ' - Modified before copying'; }}> `, parameters: { @@ -169,7 +169,7 @@ export const ModifyClipboardContent: Story = { `, From 96143807b65759255e8b41de8249fd559c505cdb Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 4 Mar 2025 14:40:04 +0100 Subject: [PATCH 32/36] feat: clear animation timer if element disconnects --- .../lib/uui-button-copy-text.element.ts | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/uui-text-copy/lib/uui-button-copy-text.element.ts b/packages/uui-text-copy/lib/uui-button-copy-text.element.ts index de17e0398..f8dc21307 100644 --- a/packages/uui-text-copy/lib/uui-button-copy-text.element.ts +++ b/packages/uui-text-copy/lib/uui-button-copy-text.element.ts @@ -45,6 +45,8 @@ export class UUIButtonCopyTextElement extends UUIButtonElement { @property({ type: Number, attribute: 'animation-state-delay' }) animationStateDelay: number = 250; + #animationTimer?: any; + constructor() { super(); demandCustomElement(this, 'uui-icon'); @@ -52,9 +54,15 @@ export class UUIButtonCopyTextElement extends UUIButtonElement { this.addEventListener('click', this.#onClick); } - readonly #onClick = async (e: Event) => { - const button = e.target as UUIButtonElement; - button.state = 'waiting'; + disconnectedCallback(): void { + super.disconnectedCallback(); + if (this.#animationTimer) { + clearTimeout(this.#animationTimer); + } + } + + readonly #onClick = async () => { + this.state = 'waiting'; // By default use the value property let valueToCopy = this.text; @@ -73,7 +81,7 @@ export class UUIButtonCopyTextElement extends UUIButtonElement { } } else { console.error(`Element ID ${this.copyFrom} not found to copy from`); - button.state = 'failed'; + this.state = 'failed'; return; } } @@ -91,9 +99,11 @@ export class UUIButtonCopyTextElement extends UUIButtonElement { const copiedEv = new UUICopyTextEvent(UUICopyTextEvent.COPIED); copiedEv.text = valueToCopy; this.dispatchEvent(copiedEv); + this.#animationTimer = setTimeout(() => { + this.state = 'success'; }, this.animationStateDelay); } catch (err) { - button.state = 'failed'; + this.state = 'failed'; console.error('Error copying to clipboard', err); } }; From 6f4de34c8a3bfd08fb2d25cff6d3c13d392b9c8a Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 4 Mar 2025 14:42:55 +0100 Subject: [PATCH 33/36] feat: rename base folder --- package-lock.json | 12 ++++++++++- .../README.md | 0 .../lib/UUICopyTextEvent.ts | 0 .../lib/index.ts | 0 .../lib/uui-button-copy-text.element.ts | 0 .../lib/uui-button-copy-text.story.ts | 2 +- .../lib/uui-button-copy-text.test.ts | 0 .../package.json | 0 .../rollup.config.js | 0 packages/uui-button-copy-text/tsconfig.json | 20 +++++++++++++++++++ packages/uui-text-copy/tsconfig.json | 11 ++++++---- 11 files changed, 39 insertions(+), 6 deletions(-) rename packages/{uui-text-copy => uui-button-copy-text}/README.md (100%) rename packages/{uui-text-copy => uui-button-copy-text}/lib/UUICopyTextEvent.ts (100%) rename packages/{uui-text-copy => uui-button-copy-text}/lib/index.ts (100%) rename packages/{uui-text-copy => uui-button-copy-text}/lib/uui-button-copy-text.element.ts (100%) rename packages/{uui-text-copy => uui-button-copy-text}/lib/uui-button-copy-text.story.ts (99%) rename packages/{uui-text-copy => uui-button-copy-text}/lib/uui-button-copy-text.test.ts (100%) rename packages/{uui-text-copy => uui-button-copy-text}/package.json (100%) rename packages/{uui-text-copy => uui-button-copy-text}/rollup.config.js (100%) create mode 100644 packages/uui-button-copy-text/tsconfig.json diff --git a/package-lock.json b/package-lock.json index ab14c8a84..9336b11aa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4546,7 +4546,7 @@ "link": true }, "node_modules/@umbraco-ui/uui-button-copy-text": { - "resolved": "packages/uui-text-copy", + "resolved": "packages/uui-button-copy-text", "link": true }, "node_modules/@umbraco-ui/uui-button-group": { @@ -23766,6 +23766,15 @@ "@umbraco-ui/uui-icon-registry-essential": "1.12.2" } }, + "packages/uui-button-copy-text": { + "name": "@umbraco-ui/uui-button-copy-text", + "version": "0.0.0", + "license": "MIT", + "dependencies": { + "@umbraco-ui/uui-base": "1.12.2", + "@umbraco-ui/uui-button": "1.12.2" + } + }, "packages/uui-button-group": { "name": "@umbraco-ui/uui-button-group", "version": "1.12.2", @@ -24360,6 +24369,7 @@ "packages/uui-text-copy": { "name": "@umbraco-ui/uui-button-copy-text", "version": "0.0.0", + "extraneous": true, "license": "MIT", "dependencies": { "@umbraco-ui/uui-base": "1.12.2", diff --git a/packages/uui-text-copy/README.md b/packages/uui-button-copy-text/README.md similarity index 100% rename from packages/uui-text-copy/README.md rename to packages/uui-button-copy-text/README.md diff --git a/packages/uui-text-copy/lib/UUICopyTextEvent.ts b/packages/uui-button-copy-text/lib/UUICopyTextEvent.ts similarity index 100% rename from packages/uui-text-copy/lib/UUICopyTextEvent.ts rename to packages/uui-button-copy-text/lib/UUICopyTextEvent.ts diff --git a/packages/uui-text-copy/lib/index.ts b/packages/uui-button-copy-text/lib/index.ts similarity index 100% rename from packages/uui-text-copy/lib/index.ts rename to packages/uui-button-copy-text/lib/index.ts diff --git a/packages/uui-text-copy/lib/uui-button-copy-text.element.ts b/packages/uui-button-copy-text/lib/uui-button-copy-text.element.ts similarity index 100% rename from packages/uui-text-copy/lib/uui-button-copy-text.element.ts rename to packages/uui-button-copy-text/lib/uui-button-copy-text.element.ts diff --git a/packages/uui-text-copy/lib/uui-button-copy-text.story.ts b/packages/uui-button-copy-text/lib/uui-button-copy-text.story.ts similarity index 99% rename from packages/uui-text-copy/lib/uui-button-copy-text.story.ts rename to packages/uui-button-copy-text/lib/uui-button-copy-text.story.ts index f0e26bdf1..f55bbb447 100644 --- a/packages/uui-text-copy/lib/uui-button-copy-text.story.ts +++ b/packages/uui-button-copy-text/lib/uui-button-copy-text.story.ts @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { html } from 'lit'; import './uui-button-copy-text.element.js'; -import { UUICopyTextEvent } from './UUICopyTextEvent'; +import { UUICopyTextEvent } from './UUICopyTextEvent.js'; import type { UUIButtonCopyTextElement } from './uui-button-copy-text.element.js'; import readme from '../README.md?raw'; import { renderSlots, spread } from '../../../storyhelpers/index.js'; diff --git a/packages/uui-text-copy/lib/uui-button-copy-text.test.ts b/packages/uui-button-copy-text/lib/uui-button-copy-text.test.ts similarity index 100% rename from packages/uui-text-copy/lib/uui-button-copy-text.test.ts rename to packages/uui-button-copy-text/lib/uui-button-copy-text.test.ts diff --git a/packages/uui-text-copy/package.json b/packages/uui-button-copy-text/package.json similarity index 100% rename from packages/uui-text-copy/package.json rename to packages/uui-button-copy-text/package.json diff --git a/packages/uui-text-copy/rollup.config.js b/packages/uui-button-copy-text/rollup.config.js similarity index 100% rename from packages/uui-text-copy/rollup.config.js rename to packages/uui-button-copy-text/rollup.config.js diff --git a/packages/uui-button-copy-text/tsconfig.json b/packages/uui-button-copy-text/tsconfig.json new file mode 100644 index 000000000..8d932a063 --- /dev/null +++ b/packages/uui-button-copy-text/tsconfig.json @@ -0,0 +1,20 @@ +// Don't edit this file directly. It is generated by /scripts/generate-ts-config.js + +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "./lib", + "rootDir": "./lib", + "composite": true + }, + "include": ["./**/*.ts"], + "exclude": ["./**/*.test.ts", "./**/*.story.ts"], + "references": [ + { + "path": "../uui-base" + }, + { + "path": "../uui-button" + } + ] +} diff --git a/packages/uui-text-copy/tsconfig.json b/packages/uui-text-copy/tsconfig.json index 8d932a063..7cb8a51b5 100644 --- a/packages/uui-text-copy/tsconfig.json +++ b/packages/uui-text-copy/tsconfig.json @@ -3,12 +3,15 @@ { "extends": "../../tsconfig.json", "compilerOptions": { - "outDir": "./lib", - "rootDir": "./lib", + "outDir": "../uui-button-copy-text/lib", + "rootDir": "../uui-button-copy-text/lib", "composite": true }, - "include": ["./**/*.ts"], - "exclude": ["./**/*.test.ts", "./**/*.story.ts"], + "include": ["../uui-button-copy-text/**/*.ts"], + "exclude": [ + "../uui-button-copy-text/**/*.test.ts", + "../uui-button-copy-text/**/*.story.ts" + ], "references": [ { "path": "../uui-base" From a09260fc13d12210a37f91c1e5679949bd915239 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 4 Mar 2025 14:51:01 +0100 Subject: [PATCH 34/36] chore: format lint --- packages/uui-menu-item/lib/uui-menu-item.story.ts | 2 +- packages/uui-range-slider/lib/uui-range-slider.element.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/uui-menu-item/lib/uui-menu-item.story.ts b/packages/uui-menu-item/lib/uui-menu-item.story.ts index 3c08cc08b..18f4ad269 100644 --- a/packages/uui-menu-item/lib/uui-menu-item.story.ts +++ b/packages/uui-menu-item/lib/uui-menu-item.story.ts @@ -128,7 +128,7 @@ export const Nested: Story = { export const Active: Story = { render: () => { - const [activeIndex, setActiveIndex] = useState(1); + const [activeIndex, setActiveIndex] = useState(1); const onClick = (index: number) => { setActiveIndex(index); diff --git a/packages/uui-range-slider/lib/uui-range-slider.element.ts b/packages/uui-range-slider/lib/uui-range-slider.element.ts index e7ecd15c0..d843e7747 100644 --- a/packages/uui-range-slider/lib/uui-range-slider.element.ts +++ b/packages/uui-range-slider/lib/uui-range-slider.element.ts @@ -41,7 +41,7 @@ export class UUIRangeSliderElement extends UUIFormControlMixin(LitElement, '') { * @attr */ @property({ type: String }) - label!: String; + label!: string; /** * Disables the input. From 31614d3a196bf44ec3dc6e723d477629f8983032 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 4 Mar 2025 15:05:41 +0100 Subject: [PATCH 35/36] docs: update README --- packages/uui-button-copy-text/README.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/uui-button-copy-text/README.md b/packages/uui-button-copy-text/README.md index dc0226b89..8bb6d6808 100644 --- a/packages/uui-button-copy-text/README.md +++ b/packages/uui-button-copy-text/README.md @@ -1,6 +1,6 @@ -# uui-text-copy +# uui-button-copy-text -![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-text-copy?logoColor=%231B264F) +![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-button-copy-text?logoColor=%231B264F) Umbraco style text-copy component. @@ -9,23 +9,23 @@ Umbraco style text-copy component. ### ES imports ```zsh -npm i @umbraco-ui/uui-text-copy +npm i @umbraco-ui/uui-button-copy-text ``` -Import the registration of `` via: +Import the registration of `` via: ```javascript -import '@umbraco-ui/uui-text-copy'; +import '@umbraco-ui/uui-button-copy-text'; ``` -When looking to leverage the `UUITextCopyElement` base class as a type and/or for extension purposes, do so via: +When looking to leverage the `UUIButtonCopyTextElement` base class as a type and/or for extension purposes, do so via: ```javascript -import { UUITextCopyElement } from '@umbraco-ui/uui-text-copy'; +import { UUIButtonCopyTextElement } from '@umbraco-ui/uui-button-copy-text'; ``` ## Usage ```html - + ``` From 147fed95f753a3fbcc0e74445bd326366f1039e3 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 4 Mar 2025 15:06:22 +0100 Subject: [PATCH 36/36] chore: cleanup old files --- packages/uui-text-copy/tsconfig.json | 23 ----------------------- 1 file changed, 23 deletions(-) delete mode 100644 packages/uui-text-copy/tsconfig.json diff --git a/packages/uui-text-copy/tsconfig.json b/packages/uui-text-copy/tsconfig.json deleted file mode 100644 index 7cb8a51b5..000000000 --- a/packages/uui-text-copy/tsconfig.json +++ /dev/null @@ -1,23 +0,0 @@ -// Don't edit this file directly. It is generated by /scripts/generate-ts-config.js - -{ - "extends": "../../tsconfig.json", - "compilerOptions": { - "outDir": "../uui-button-copy-text/lib", - "rootDir": "../uui-button-copy-text/lib", - "composite": true - }, - "include": ["../uui-button-copy-text/**/*.ts"], - "exclude": [ - "../uui-button-copy-text/**/*.test.ts", - "../uui-button-copy-text/**/*.story.ts" - ], - "references": [ - { - "path": "../uui-base" - }, - { - "path": "../uui-button" - } - ] -}