feat: rename element to uui-button-copy-text

Author: iOvergaard

…es/uui-text-copy/lib/UUITextCopyEvent.ts …es/uui-text-copy/lib/UUICopyTextEvent.tspackages/uui-text-copy/lib/UUITextCopyEvent.ts renamed to packages/uui-text-copy/lib/UUICopyTextEvent.ts packages/uui-text-copy/lib/UUITextCopyEvent.ts renamed to 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,
     });

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';

…i-text-copy/lib/uui-text-copy.element.ts …copy/lib/uui-button-copy-text.element.tspackages/uui-text-copy/lib/uui-text-copy.element.ts renamed to packages/uui-text-copy/lib/uui-button-copy-text.element.ts packages/uui-text-copy/lib/uui-text-copy.element.ts renamed to 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;
   }
 }

…uui-text-copy/lib/uui-text-copy.story.ts …t-copy/lib/uui-button-copy-text.story.tspackages/uui-text-copy/lib/uui-text-copy.story.ts renamed to packages/uui-text-copy/lib/uui-button-copy-text.story.ts packages/uui-text-copy/lib/uui-text-copy.story.ts renamed to 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<UUITextCopyElement> = {
-  id: 'uui-text-copy',
-  title: 'Buttons/Text Copy',
-  component: 'uui-text-copy',
+const meta: Meta<UUIButtonCopyTextElement> = {
+  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<UUITextCopyElement> = {
 };
 
 export default meta;
-type Story = StoryObj<UUITextCopyElement>;
+type Story = StoryObj<UUIButtonCopyTextElement>;
 
 export const Overview: Story = {
   name: 'Simple Copy',
@@ -48,7 +47,7 @@ export const Overview: Story = {
   parameters: {
     docs: {
       source: {
-        code: `<uui-text-copy value="Hey stop copying me 🥸"></uui-text-copy>`,
+        code: `<uui-button-copy-text value="Hey stop copying me 🥸"></uui-button-copy-text>`,
       },
     },
   },
@@ -64,7 +63,7 @@ export const WithLabelSet: Story = {
   parameters: {
     docs: {
       source: {
-        code: `<uui-text-copy value="Hey stop copying me 🥸" label="This is my A11y label I want"></uui-text-copy>`,
+        code: `<uui-button-copy-text value="Hey stop copying me 🥸" label="This is my A11y label I want"></uui-button-copy-text>`,
       },
     },
   },
@@ -79,7 +78,7 @@ export const Disabled: Story = {
   parameters: {
     docs: {
       source: {
-        code: `<uui-text-copy value="You cannot copy this" disabled></uui-text-copy>`,
+        code: `<uui-button-copy-text value="You cannot copy this" disabled></uui-button-copy-text>`,
       },
     },
   },
@@ -91,12 +90,14 @@ export const CustomSlotContent: Story = {
     value: 'Custom slot content',
   },
   render: args => html`
-    <uui-text-copy .value=${args.value}> Custom Copy Text </uui-text-copy>
+    <uui-button-copy-text .value=${args.value}>
+      Custom Copy Text
+    </uui-button-copy-text>
   `,
   parameters: {
     docs: {
       source: {
-        code: `<uui-text-copy value="Custom slot content">Custom Copy Text</uui-text-copy>`,
+        code: `<uui-button-copy-text value="Custom slot content">Custom Copy Text</uui-button-copy-text>`,
       },
     },
   },
@@ -109,19 +110,11 @@ export const ColorAndLook: Story = {
     color: 'positive',
     look: 'primary',
   },
-  render: args => html`
-    <uui-text-copy
-      .value=${args.value}
-      .color=${args.color || 'default'}
-      .look=${args.look || 'default'}>
-      <uui-icon name="copy"></uui-icon> Copy
-    </uui-text-copy>
-  `,
   parameters: {
     docs: {
       source: {
         code: `
-<uui-text-copy value="I have the same look and color props as UUI-Button" color="positive" look="primary"></uui-text-copy>
+<uui-button-copy-text value="I have the same look and color props as UUI-Button" color="positive" look="primary"></uui-button-copy-text>
         `,
       },
     },
@@ -134,19 +127,19 @@ export const CopiedEvent: Story = {
     value: 'Copy this text',
   },
   render: args => html`
-    <uui-text-copy
+    <uui-button-copy-text
       .value=${args.value}
-      @copied=${(event: UUITextCopyEvent) => {
+      @copied=${(event: UUICopyTextEvent) => {
         alert(`Copied text: ${event.detail.text}`);
-      }}></uui-text-copy>
+      }}></uui-button-copy-text>
   `,
   parameters: {
     docs: {
       source: {
         code: `
-<uui-text-copy value="Copy this text"></uui-text-copy>
+<uui-button-copy-text value="Copy this text"></uui-button-copy-text>
 <script>
-  document.querySelector('uui-text-copy').addEventListener('copied', (event) => {
+  document.querySelector('uui-button-copy-text').addEventListener('copied', (event) => {
     alert(\`Copied text: \${event.detail.text}\`);
   });
 </script>
@@ -164,7 +157,7 @@ export const ModifyClipboardContent: Story = {
   render: args => html`
     <uui-text-copy
       .value=${args.value}
-      @copying=${(event: UUITextCopyEvent) => {
+      @copying=${(event: UUICopyTextEvent) => {
         event.detail.text += ' - Modified before copying';
       }}></uui-text-copy>
   `,
@@ -189,9 +182,6 @@ export const EmptyValueErrorState: Story = {
   args: {
     copyFrom: 'idSelectorDoesNotExist',
   },
-  render: args => html`
-    <uui-text-copy .copyFrom=${args.copyFrom}></uui-text-copy>
-  `,
   parameters: {
     docs: {
       source: {

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`<uui-button-copy-text value="Oh hi there"></uui-button-copy-text>`,
+    );
+  });
+
+  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(
+      '<uui-icon name="copy"></uui-icon> Copy',
+    );
+  });
+});