From bb802bd7aed0ea91f1ef40285efb302ec812500e Mon Sep 17 00:00:00 2001
From: Ali Amori Kadhim <ali@frameless.io>
Date: Tue, 9 Aug 2022 16:45:26 +0200
Subject: [PATCH] feat: unable pseudo-classes from style on button-link react

BREAKING CHANGE: deprecated pseudo properties

- `focusStyle`
- `focusVisibleStyle`
- `hoverStyle`
- `visitedStyle`
---
 .../src/ButtonLink.test.tsx                   | 32 -------------------
 .../src/ButtonLink.tsx                        | 24 +++-----------
 2 files changed, 4 insertions(+), 52 deletions(-)

diff --git a/packages/component-library-react/src/ButtonLink.test.tsx b/packages/component-library-react/src/ButtonLink.test.tsx
index a93f184328..3a5da42c2f 100644
--- a/packages/component-library-react/src/ButtonLink.test.tsx
+++ b/packages/component-library-react/src/ButtonLink.test.tsx
@@ -217,36 +217,4 @@ describe('Link that looks like a button', () => {
       expect(link?.getAttribute('rel')).toContain('external');
     });
   });
-
-  describe('with simulated state', () => {
-    describe('focus variant', () => {
-      it('renders a design system BEM class name', () => {
-        const { container } = render(<ButtonLink focusStyle />);
-
-        const link = container.querySelector(':only-child');
-
-        expect(link).toHaveClass('utrecht-button-link--focus');
-      });
-    });
-
-    describe('focus-visible variant', () => {
-      it('renders a design system BEM class name', () => {
-        const { container } = render(<ButtonLink focusVisibleStyle />);
-
-        const link = container.querySelector(':only-child');
-
-        expect(link).toHaveClass('utrecht-button-link--focus-visible');
-      });
-    });
-
-    describe('hover variant', () => {
-      it('renders a design system BEM class name', () => {
-        const { container } = render(<ButtonLink hoverStyle />);
-
-        const link = container.querySelector(':only-child');
-
-        expect(link).toHaveClass('utrecht-button-link--hover');
-      });
-    });
-  });
 });
diff --git a/packages/component-library-react/src/ButtonLink.tsx b/packages/component-library-react/src/ButtonLink.tsx
index 757a70336a..257d38075a 100644
--- a/packages/component-library-react/src/ButtonLink.tsx
+++ b/packages/component-library-react/src/ButtonLink.tsx
@@ -9,11 +9,8 @@ import { AnchorHTMLAttributes, ForwardedRef, forwardRef, KeyboardEvent, PropsWit
 
 interface ButtonLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   external?: boolean;
-  focusStyle?: boolean;
-  focusVisibleStyle?: boolean;
-  hoverStyle?: boolean;
-  visitedStyle?: boolean;
 }
+
 const onKeyDown = (evt: KeyboardEvent<HTMLAnchorElement>) => {
   if (evt.key === ' ' && typeof (evt.target as HTMLElement)?.click === 'function') {
     // Prevent other side-effects, such as scrolling
@@ -26,16 +23,7 @@ const onKeyDown = (evt: KeyboardEvent<HTMLAnchorElement>) => {
 
 export const ButtonLink = forwardRef(
   (
-    {
-      children,
-      className,
-      external,
-      focusStyle,
-      focusVisibleStyle,
-      hoverStyle,
-      role,
-      ...restProps
-    }: PropsWithChildren<ButtonLinkProps>,
+    { children, className, external, role, ...restProps }: PropsWithChildren<ButtonLinkProps>,
     ref: ForwardedRef<HTMLAnchorElement>,
   ) => {
     let props = restProps;
@@ -58,12 +46,8 @@ export const ButtonLink = forwardRef(
         role={role}
         className={clsx(
           'utrecht-button-link',
-          {
-            'utrecht-button-link--external': external,
-            'utrecht-button-link--focus': focusStyle,
-            'utrecht-button-link--focus-visible': focusVisibleStyle,
-            'utrecht-button-link--hover': hoverStyle,
-          },
+          'utrecht-button-link--html-button',
+          { 'utrecht-button-link--external': external },
           className,
         )}
         rel={external ? 'external noopener noreferrer' : undefined}