feat: unable pseudo-classes from style on button-link react

BREAKING CHANGE: deprecated pseudo properties - `focusStyle` - `focusVisibleStyle` - `hoverStyle` - `visitedStyle`
nl-design-system · Aug 11, 2022 · bb802bd · bb802bd
1 parent 9d48b9d
commit bb802bd
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 52 deletions.
diff --git 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
@@ -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}