HDS-4447 Handle empty string and zero values, add examples to show case and tests

Author: KristinLBradley

packages/components/src/modifiers/hds-clipboard.ts

@@ -37,7 +37,7 @@ export const getTextToCopy = (text: TextToCopy): string => {
       textToCopy = text.toString();
     } else {
       assert(
-        `\`hds-clipboard\` modifier - \`text\` argument must be a string - provided: ${typeof text}`
+        `\`hds-clipboard\` modifier - \`text\` argument must be a string or number - provided: ${typeof text}`
       );
     }
   }
@@ -109,7 +109,7 @@ export const writeTextToClipboard = async (
 ): Promise<boolean> => {
   // finally copy the text to the clipboard using the Clipboard API
   // https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API
-  if (textToCopy) {
+  if (textToCopy || textToCopy === '') {
     try {
       // notice: the "clipboard-write" permission is granted automatically to pages when they are in the active tab
       // https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/write
@@ -151,7 +151,11 @@ export const copyToClipboard = async (
 ): Promise<boolean> => {
   let textToCopy: string = '';
 
-  if (text) {
+  if (text === '') {
+    textToCopy = '';
+  } else if (text === 0) {
+    textToCopy = '0';
+  } else if (text) {
     textToCopy = getTextToCopy(text);
   } else if (target) {
     const targetElement = getTargetElement(target);

showcase/app/templates/components/copy/button.hbs

@@ -142,6 +142,17 @@
     </SF.Item>
   </Shw::Flex>
 
+  <Shw::Text::H4>Edge cases</Shw::Text::H4>
+
+  <Shw::Flex as |SF|>
+    <SF.Item>
+      <Hds::Copy::Button @text="Copy an empty string" @textToCopy="" />
+    </SF.Item>
+    <SF.Item>
+      <Hds::Copy::Button @text="Copy the number '0'" @textToCopy={{0}} />
+    </SF.Item>
+  </Shw::Flex>
+
   <Shw::Divider @level={{2}} />
 
   <Shw::Text::H3>With <code>target</code> element</Shw::Text::H3>

showcase/tests/integration/components/hds/copy/button/index-test.js

@@ -46,6 +46,22 @@ module('Integration | Component | hds/copy/button/index', function (hooks) {
     assert.true(this.success);
   });
 
+  test('it should copy an empty string value passed in', async function (assert) {
+    await render(
+      hbs`<Hds::Copy::Button id="test-copy-button" @text="Copy empty string"  @textToCopy="" @onSuccess={{this.onSuccess}} @onError={{this.onError}} />`
+    );
+    await click('button#test-copy-button');
+    assert.true(this.success);
+  });
+
+  test('it should copy a zero number value passed in', async function (assert) {
+    await render(
+      hbs`<Hds::Copy::Button id="test-copy-button" @text="Copy zero number value"  @textToCopy={{0}} @onSuccess={{this.onSuccess}} @onError={{this.onError}} />`
+    );
+    await click('button#test-copy-button');
+    assert.true(this.success);
+  });
+
   // @TARGET ARGUMENT
 
   test('it should allow to target an element using a `string` selector for the `@target` argument', async function (assert) {