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

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

@@ -1,24 +1,20 @@
 import React, { ElementType, ForwardedRef, forwardRef } from 'react';
-import { ChildrenProps, SpiritButtonLinkProps, SpiritButtonProps, SpiritLinkProps } from '../../types';
-import { Link } from '../Link';
-import { Button, useButtonLinkAriaProps, useButtonLinkStyleProps } from '../Button';
-import { useStyleProps } from '../../hooks';
 import classNames from 'classnames';
+import { SpiritLinkProps } from '../../types';
+import { useStyleProps } from '../../hooks';
+import { useLinkStyleProps } from '../Link';
 
-const defaultProps: Partial<SpiritButtonLinkProps> = {
+const defaultProps: Partial<SpiritLinkProps> = {
   color: 'primary',
   elementType: 'a',
-  isBlock: false,
+  isUnderlined: 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,
+/* eslint no-underscore-dangle: ['error', { allow: ['_ToastBarLink'] }] */
+const _ToastBarLink = <E extends ElementType = 'a', C = void>(
+  props: SpiritLinkProps<E, C>,
   ref: ForwardedRef<HTMLAnchorElement>,
 ) => {
   const propsWithDefaults = { ...defaultProps, ...props };
@@ -28,14 +24,12 @@ const _ToastBarLink = <T extends ElementType = 'a', C = void, S = void>(
     ...restProps
   } = propsWithDefaults;
 
-  const { linkProps } = useButtonLinkAriaProps(restProps);
-  const { classProps, props: modifiedProps } = useButtonLinkStyleProps(restProps);
+  const { classProps, props: modifiedProps } = useLinkStyleProps(restProps);
   const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
 
   return (
     <ElementTag
       {...otherProps}
-      {...linkProps}
       ref={ref}
       className={classNames(classProps, styleProps.className)}
       style={styleProps.style}
@@ -45,6 +39,6 @@ const _ToastBarLink = <T extends ElementType = 'a', C = void, S = void>(
   );
 };
 
-export const ButtonLink = forwardRef<HTMLAnchorElement, SpiritButtonLinkProps<ElementType>>(_ToastBarLink);
+export const ToastBarLink = forwardRef<HTMLAnchorElement, SpiritLinkProps<ElementType>>(_ToastBarLink);
 
-export default ButtonLink;
+export default ToastBarLink;

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

@@ -3,29 +3,38 @@ import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
 import ToastBarLink from '../ToastBarLink';
+import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
 
 describe('ToastBarLink', () => {
   restPropsTest((props) => <ToastBarLink {...props} id="test" />, 'a');
 
+  stylePropsTest(ToastBarLink);
+
+  restPropsTest(ToastBarLink, 'a');
+
   beforeEach(() => {
     render(
-      <ToastBarLink href="www.example.com" color="inverted" isUnderlined>
-        Action
+      <ToastBarLink href="example-href" color="inverted" isUnderlined>
+        Example action
       </ToastBarLink>,
     );
   });
 
-  it('should render as link', () => {
+  it('should render with correct href', () => {
     const element = screen.getByRole('link');
 
     expect(element).toBeInTheDocument();
-    expect(element).toHaveAttribute('href', 'www.example.com');
-    expect(element).toHaveClass('link-inverted link-underlined');
+    expect(element).toHaveAttribute('href', 'example-href');
   });
 
   it('should render children', () => {
-    const element = screen.getByText('Action');
+    expect(screen.getByText('Example action')).toBeInTheDocument();
+  });
 
-    expect(element).toBeInTheDocument();
+  it('should render with correct classnames', () => {
+    const element = screen.getByRole('link');
+
+    expect(element).toHaveClass('link-inverted');
+    expect(element).toHaveClass('link-underlined');
   });
 });

packages/web-react/src/components/Toast/demo/ToastColors.tsx

@@ -9,7 +9,7 @@ const ToastColors = () => {
     <>
       <ToastBar id="inverted" onClose={() => {}} color="inverted" hasIcon isDismissible>
         <ToastBarMessage>Inverted</ToastBarMessage>
-        <ToastBarLink elementType={Link} href="#" color="inverted" isUnderlined>
+        <ToastBarLink href="#" color="inverted" isUnderlined>
           Action
         </ToastBarLink>
       </ToastBar>