feat: add types to Copy and CopyButton (carbon-design-system#15213)

* feat: add types to Copy and CopyButton

* refactor: update index files to ts

* refactor: extend Carbon Button rather than native button

* refactor: use IconButtun instead of manually created TypedButton

---------

Co-authored-by: Andrea N. Cardona <[email protected]>
Co-authored-by: TJ Egan <[email protected]>

packages/react/src/components/Copy/Copy.js → packages/react/src/components/Copy/Copy.tsx

@@ -6,14 +6,64 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { useState, useEffect, useCallback } from 'react';
+import React, {
+  useState,
+  useEffect,
+  useCallback,
+  AnimationEventHandler,
+  MouseEventHandler,
+  PropsWithChildren,
+} from 'react';
 import debounce from 'lodash.debounce';
 import classnames from 'classnames';
 import { composeEventHandlers } from '../../tools/events';
 import { usePrefix } from '../../internal/usePrefix';
 import { IconButton } from '../IconButton';
 import { noopFn } from '../../internal/noopFn';
 
+interface CopyProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Specify how the trigger should align with the tooltip
+   */
+  align?:
+    | 'top'
+    | 'top-left'
+    | 'top-right'
+    | 'bottom'
+    | 'bottom-left'
+    | 'bottom-right'
+    | 'left'
+    | 'right';
+
+  /**
+   * Specify an optional className to be applied to the underlying `<button>`
+   */
+  className?: string;
+
+  /**
+   * Specify the string that is displayed when the button is clicked and the
+   * content is copied
+   */
+  feedback?: string;
+
+  /**
+   * Specify the time it takes for the feedback message to timeout
+   */
+  feedbackTimeout?: number;
+
+  /**
+   * Specify an optional `onAnimationEnd` handler that is called when the underlying
+   * animation ends
+   */
+  onAnimationEnd?: AnimationEventHandler<HTMLButtonElement>;
+
+  /**
+   * Specify an optional `onClick` handler that is called when the underlying
+   * `<button>` is clicked
+   */
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+
 export default function Copy({
   align = 'bottom',
   children,
@@ -23,7 +73,7 @@ export default function Copy({
   onAnimationEnd,
   onClick = noopFn,
   ...other
-}) {
+}: PropsWithChildren<CopyProps>) {
   const [animation, setAnimation] = useState('');
   const prefix = usePrefix();
   const classNames = classnames(className, `${prefix}--copy`, {
@@ -71,7 +121,7 @@ export default function Copy({
       ])}
       {...other}
       aria-label={
-        (!children && (animation ? feedback : other['aria-label'])) || null
+        (!children && (animation ? feedback : other['aria-label'])) || undefined
       }>
       {children}
     </IconButton>

packages/react/src/components/CopyButton/CopyButton.js → packages/react/src/components/CopyButton/CopyButton.tsx

@@ -6,13 +6,57 @@
  */
 
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { MouseEventHandler } from 'react';
 import classnames from 'classnames';
 import { Copy as CopyIcon } from '@carbon/icons-react';
+import { ButtonProps } from '../Button';
 import Copy from '../Copy';
 import { LayoutConstraint } from '../Layout';
 import { usePrefix } from '../../internal/usePrefix';
 import { noopFn } from '../../internal/noopFn';
+
+export interface CopyButtonProps extends ButtonProps<'button'> {
+  /**
+   * Specify how the trigger should align with the tooltip
+   */
+  align?:
+    | 'top'
+    | 'top-left'
+    | 'top-right'
+    | 'bottom'
+    | 'bottom-left'
+    | 'bottom-right'
+    | 'left'
+    | 'right';
+
+  /**
+   * Specify an optional className to be applied to the underlying `<button>`
+   */
+  className?: string;
+
+  /**
+   * Specify the string that is displayed when the button is clicked and the
+   * content is copied
+   */
+  feedback?: string;
+
+  /**
+   * Specify the time it takes for the feedback message to timeout
+   */
+  feedbackTimeout?: number;
+
+  /**
+   * Provide a description for the icon representing the copy action that can
+   * be read by screen readers
+   */
+  iconDescription?: string;
+
+  /**
+   * Specify an optional `onClick` handler that is called when the underlying
+   * `<button>` is clicked
+   */
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+}
 export default function CopyButton({
   align = 'bottom',
   feedback = 'Copied!',
@@ -21,7 +65,7 @@ export default function CopyButton({
   className,
   onClick = noopFn,
   ...other
-}) {
+}: CopyButtonProps) {
   const prefix = usePrefix();
   return (
     <LayoutConstraint size={{ default: 'md', max: 'lg' }}>