fixup! Feat(web-react): Add Message and Link for ToastBar #DS-1213

packages/web-react/src/components/Toast/ToastBarLink.tsx

@@ -1,20 +1,50 @@
-import React from 'react';
-import { ChildrenProps, SpiritButtonProps, SpiritLinkProps } from '../../types';
+import React, { ElementType, ForwardedRef, forwardRef } from 'react';
+import { ChildrenProps, SpiritButtonLinkProps, SpiritButtonProps, SpiritLinkProps } from '../../types';
 import { Link } from '../Link';
-import { Button } from '../Button';
+import { Button, useButtonLinkAriaProps, useButtonLinkStyleProps } from '../Button';
+import { useStyleProps } from '../../hooks';
+import classNames from 'classnames';
 
-type ToastBarLinkProps<T extends React.ElementType = typeof Link> = {
-  elementType?: T;
-} & ChildrenProps &
-  SpiritLinkProps &
-  SpiritButtonProps<typeof Button>;
+const defaultProps: Partial<SpiritButtonLinkProps> = {
+  color: 'primary',
+  elementType: 'a',
+  isBlock: false,
+  isDisabled: false,
+  isLoading: false,
+  isSquare: false,
+  size: 'medium',
+};
+
+/* We need an exception for components exported with forwardRef */
+/* eslint no-underscore-dangle: ['error', { allow: ['_ButtonLink'] }] */
+const _ToastBarLink = <T extends ElementType = 'a', C = void, S = void>(
+  props: SpiritLinkProps,
+  ref: ForwardedRef<HTMLAnchorElement>,
+) => {
+  const propsWithDefaults = { ...defaultProps, ...props };
+  const {
+    elementType: ElementTag = defaultProps.elementType as ElementType,
+    children,
+    ...restProps
+  } = propsWithDefaults;
 
-export const ToastBarLink = <T extends React.ElementType = typeof Link | typeof Button>(
-  props: ToastBarLinkProps<T>,
-): JSX.Element => {
-  const { elementType: ElementTag = Link, children, ...restProps } = props;
+  const { linkProps } = useButtonLinkAriaProps(restProps);
+  const { classProps, props: modifiedProps } = useButtonLinkStyleProps(restProps);
+  const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
 
-  return <ElementTag {...restProps}>{children}</ElementTag>;
+  return (
+    <ElementTag
+      {...otherProps}
+      {...linkProps}
+      ref={ref}
+      className={classNames(classProps, styleProps.className)}
+      style={styleProps.style}
+    >
+      {children}
+    </ElementTag>
+  );
 };
 
-export default ToastBarLink;
+export const ButtonLink = forwardRef<HTMLAnchorElement, SpiritButtonLinkProps<ElementType>>(_ToastBarLink);
+
+export default ButtonLink;