From fee3b3c4ea8984836d7e96574907d1f603552321 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20=C4=8Curda?= <jakub.curda@almacareer.com>
Date: Mon, 20 May 2024 11:09:36 +0200
Subject: [PATCH] fixup! Feat(web-react): Add Message and Link for ToastBar
 #DS-1213

---
 .../src/components/Toast/ToastBarLink.tsx     | 28 ++++++++-----------
 .../Toast/__tests__/ToastBarLink.test.tsx     | 23 ++++++++++-----
 .../src/components/Toast/demo/ToastColors.tsx |  2 +-
 3 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/packages/web-react/src/components/Toast/ToastBarLink.tsx b/packages/web-react/src/components/Toast/ToastBarLink.tsx
index 45776f5a9c..afa0c5933e 100644
--- a/packages/web-react/src/components/Toast/ToastBarLink.tsx
+++ b/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;
diff --git a/packages/web-react/src/components/Toast/__tests__/ToastBarLink.test.tsx b/packages/web-react/src/components/Toast/__tests__/ToastBarLink.test.tsx
index 182e7fefb4..39ab71bcf8 100644
--- a/packages/web-react/src/components/Toast/__tests__/ToastBarLink.test.tsx
+++ b/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');
   });
 });
diff --git a/packages/web-react/src/components/Toast/demo/ToastColors.tsx b/packages/web-react/src/components/Toast/demo/ToastColors.tsx
index d1ce47f71d..ae47de0e64 100644
--- a/packages/web-react/src/components/Toast/demo/ToastColors.tsx
+++ b/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>