CodeEditor and CodeBlock: add ability to customize the copy button text (#2696)

Co-authored-by: Dylan Hyun <dylan.hyun@hashicorp.com>

Author: shleewhite

.changeset/orange-chefs-learn.md

@@ -0,0 +1,7 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+`CodeBlock` - Added `@copyButtonText` argument to `CodeBlock` and `@text` argument to the `CodeBlock::CopyButton` subcomponent to customize the `aria-label` of the Copy Button. The default label is still "Copy".
+
+`CodeEditor` - Added `@copyButtonText` argument to customize the `aria-label` of the Copy Button. The default label is still "Copy".

packages/components/src/components/hds/code-block/copy-button.hbs

@@ -5,7 +5,7 @@
 
 <Hds::Copy::Button
   class="hds-code-block__copy-button"
-  @text="Copy"
+  @text={{this.text}}
   @isIconOnly={{true}}
   @size="small"
   @targetToCopy={{@targetToCopy}}

packages/components/src/components/hds/code-block/copy-button.ts

@@ -3,20 +3,23 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import templateOnlyComponent from '@ember/component/template-only';
+import Component from '@glimmer/component';
+
 import type { HdsCopyButtonSignature } from '../copy/button';
 
 export interface HdsCodeBlockCopyButtonSignature {
   Args: {
     targetToCopy?: HdsCopyButtonSignature['Args']['targetToCopy'];
+    text?: HdsCopyButtonSignature['Args']['text'];
   };
   Blocks: {
     default: [];
   };
   Element: HdsCopyButtonSignature['Element'];
 }
 
-const HdsCodeBlockCopyButton =
-  templateOnlyComponent<HdsCodeBlockCopyButtonSignature>();
-
-export default HdsCodeBlockCopyButton;
+export default class HdsCodeBlockCopyButton extends Component<HdsCodeBlockCopyButtonSignature> {
+  get text(): HdsCopyButtonSignature['Args']['text'] {
+    return this.args.text ? this.args.text : 'Copy';
+  }
+}

packages/components/src/components/hds/code-block/index.hbs

@@ -22,7 +22,11 @@
       </code></pre>
 
     {{#if @hasCopyButton}}
-      <Hds::CodeBlock::CopyButton @targetToCopy="#{{this._preCodeId}}" aria-describedby={{this._preCodeId}} />
+      <Hds::CodeBlock::CopyButton
+        @targetToCopy="#{{this._preCodeId}}"
+        aria-describedby={{this._preCodeId}}
+        @text={{this.copyButtonText}}
+      />
     {{/if}}
   </div>
 </div>

packages/components/src/components/hds/code-block/index.ts

@@ -20,6 +20,7 @@ import type { HdsCodeBlockTitleSignature } from './title';
 import type { HdsCodeBlockDescriptionSignature } from './description';
 import { HdsCodeBlockLanguageValues } from './types.ts';
 import type { HdsCodeBlockLanguages } from './types.ts';
+import type { HdsCopyButtonSignature } from '../copy/button/index.ts';
 
 import 'prismjs/plugins/line-numbers/prism-line-numbers';
 import 'prismjs/plugins/line-highlight/prism-line-highlight';
@@ -52,6 +53,7 @@ export interface HdsCodeBlockSignature {
     language?: HdsCodeBlockLanguages;
     maxHeight?: string;
     value: string;
+    copyButtonText?: HdsCopyButtonSignature['Args']['text'];
   };
   Blocks: {
     default: [
@@ -134,6 +136,10 @@ export default class HdsCodeBlock extends Component<HdsCodeBlockSignature> {
     return this.args.hasLineWrapping ?? false;
   }
 
+  get copyButtonText(): HdsCopyButtonSignature['Args']['text'] {
+    return this.args.copyButtonText ? this.args.copyButtonText : 'Copy';
+  }
+
   @action
   setPrismCode(element: HTMLElement): void {
     const code = this.code;

packages/components/src/components/hds/code-editor/index.hbs

@@ -33,7 +33,7 @@
               class="hds-code-editor__button hds-code-editor__copy-button"
               @isIconOnly={{true}}
               @size="small"
-              @text="Copy"
+              @text={{this.copyButtonText}}
               @textToCopy={{this._value}}
             />
           {{/if}}

packages/components/src/components/hds/code-editor/index.ts

@@ -15,12 +15,14 @@ import type { HdsCodeEditorTitleSignature } from './title';
 import type { HdsCodeEditorGenericSignature } from './generic';
 import type { EditorView } from '@codemirror/view';
 import { guidFor } from '@ember/object/internals';
+import type { HdsCopyButtonSignature } from '../copy/button/index.ts';
 
 export interface HdsCodeEditorSignature {
   Args: {
     hasCopyButton?: boolean;
     hasFullScreenButton?: boolean;
     isStandalone?: boolean;
+    copyButtonText?: HdsCopyButtonSignature['Args']['text'];
   } & HdsCodeEditorModifierSignature['Args']['Named'];
   Blocks: {
     default: [
@@ -103,6 +105,10 @@ export default class HdsCodeEditor extends Component<HdsCodeEditorSignature> {
     return classes.join(' ');
   }
 
+  get copyButtonText(): HdsCopyButtonSignature['Args']['text'] {
+    return this.args.copyButtonText ? this.args.copyButtonText : 'Copy';
+  }
+
   @action
   registerTitleElement(element: HdsCodeEditorTitleSignature['Element']): void {
     this._titleId = element.id;

showcase/tests/integration/components/hds/code-block/index-test.js

@@ -140,7 +140,19 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
     await render(hbs`
       <Hds::CodeBlock @value="console.log('Hello world');" @hasCopyButton={{true}} />
     `);
-    assert.dom('.hds-code-block__copy-button').exists();
+
+    assert
+      .dom('.hds-code-block__copy-button')
+      .exists()
+      .hasAria('label', 'Copy');
+  });
+
+  test('it renders a Copy button with custom text', async function (assert) {
+    await render(hbs`
+      <Hds::CodeBlock @value="console.log('Hello world');" @hasCopyButton={{true}} @copyButtonText="Foo" />
+    `);
+
+    assert.dom('.hds-code-block__copy-button').exists().hasAria('label', 'Foo');
   });
 
   // hasLineNumbers

showcase/tests/integration/components/hds/code-editor/index-test.js

@@ -87,12 +87,24 @@ module('Integration | Component | hds/code-editor/index', function (hooks) {
     await setupCodeEditor(
       hbs`<Hds::CodeEditor @ariaLabel="code editor" @hasCopyButton={{true}} />`
     );
-    assert.dom('.hds-code-editor__copy-button').exists();
+    assert
+      .dom('.hds-code-editor__copy-button')
+      .exists()
+      .hasAria('label', 'Copy');
   });
   test('it should not render a copy button when the `@hasCopyButton` argument is not provided', async function (assert) {
     await setupCodeEditor(hbs`<Hds::CodeEditor @ariaLabel="code editor" />`);
     assert.dom('.hds-code-editor__copy-button').doesNotExist();
   });
+  test('it renders a copy button with custom text', async function (assert) {
+    await setupCodeEditor(
+      hbs`<Hds::CodeEditor @ariaLabel="code editor" @hasCopyButton={{true}} @copyButtonText="Foo" />`
+    );
+    assert
+      .dom('.hds-code-editor__copy-button')
+      .exists()
+      .hasAria('label', 'Foo');
+  });
   // @isStandalone
   test('it should render the component with a standalone style when the `@isStandalone` argument is true and when the argument is ommitted', async function (assert) {
     this.set('isStandalone', true);

website/docs/components/code-block/partials/code/component-api.md

@@ -22,6 +22,9 @@ This component uses [prism.js](https://prismjs.com/) under the hood.
   </C.Property>
   <C.Property @name="hasCopyButton" @type="boolean" @default="false">
     Used to control whether a copy button for copying the code/text content will be displayed.
+  </C.Property>
+    <C.Property @name="copyButtonText" @type="string" @default="'Copy'">
+    Override this value to provide a meaningful `aria-label` for the [`Copy::Button`](/components/copy/button) component.
   </C.Property>
   <C.Property @name="hasLineNumbers" @type="boolean" @default="true">
     Used to control display of line numbers. Note that due to technical limitations, if the `@value` changes dynamically the line numbers will fail to update.

website/docs/components/code-block/partials/code/how-to-use.md

@@ -81,12 +81,13 @@ func main() {
 
 ### Copy button
 
-Set `hasCopyButton` to `true` to display a button for users to copy `CodeBlock` content to their computer clipboard.
+Set `hasCopyButton` to `true` to display a button for users to copy `CodeBlock` content to their computer clipboard. Use `copyButtonText` to provide a meaningful and unique label for the copy button.
 
 ```handlebars
 <Hds::CodeBlock
   @language="javascript"
   @hasCopyButton={{true}}
+  @copyButtonText="Copy javascript code"
   @value="let codeLang=`JavaScript`;
 console.log(`I am ${codeLang} code`);"
 />

website/docs/components/code-editor/partials/code/component-api.md

@@ -23,6 +23,9 @@ This component uses [CodeMirror 6](https://codemirror.net/) under the hood.
   <C.Property @name="hasCopyButton" @type="boolean" @default="false">
     Used to control whether a copy button for copying the code/text content will be displayed.
   </C.Property>
+  <C.Property @name="copyButtonText" @type="string" @default="'Copy'">
+    Override this value to provide a meaningful `aria-label` for the [`Copy::Button`](/components/copy/button) component.
+  </C.Property>
   <C.Property @name="hasFullScreenButton" @type="boolean" @default="false">
     Used to control whether a toggle button for toggling full-screen mode will be displayed.
   </C.Property>

website/docs/components/code-editor/partials/code/how-to-use.md

@@ -71,10 +71,15 @@ The `language` argument sets the syntax highlighting used. We support the follow
 
 ### Copy button
 
-Set `hasCopyButton` to `true` to display a button for users to copy Code Editor content to their computer clipboard.
+Set `hasCopyButton` to `true` to display a button for users to copy Code Editor content to their computer clipboard. Use `copyButtonText` to provide a meaningful and unique label for the copy button.
 
 ```handlebars
-<Hds::CodeEditor @ariaLabel="copy button" @hasCopyButton={{true}} @value={{this.loremIpsum}} />
+<Hds::CodeEditor
+  @ariaLabel="copy button"
+  @hasCopyButton={{true}}
+  @copyButtonText="Copy lorem ipsum code"
+  @value={{this.loremIpsum}}
+/>
 ```