refactor(components): rewrite Button and ButtonLink components

Both:
* move styles to Sass placeholders

Button:
* add `isPressed` prop to Button
* add `isLoading` prop to Button (to differentiate state from
disabled)

ButtonLink:
* replace `external` prop with `isExternal` prop
* replace `href` prop with `to` prop

1 files changed, 129 insertions, 0 deletions

diff --git a/src/components/atoms/buttons/button-link/button-link.test.tsx b/src/components/atoms/buttons/button-link/button-link.test.tsx
new file mode 100644
index 0000000..d18120b
--- /dev/null
+++ b/src/components/atoms/buttons/button-link/button-link.test.tsx
@@ -0,0 +1,129 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '@testing-library/react';
+import { ButtonLink } from './button-link';
+
+describe('ButtonLink', () => {
+  it('renders a link with anchor and href', () => {
+    const target = 'eum';
+    const body = 'est eaque nostrum';
+
+    render(<ButtonLink to={target}>{body}</ButtonLink>);
+
+    expect(rtlScreen.getByRole('link', { name: body })).toHaveAttribute(
+      'href',
+      target
+    );
+  });
+
+  it('renders an external link', () => {
+    const target = 'voluptatem';
+    const body = 'impedit';
+
+    render(
+      <ButtonLink isExternal to={target}>
+        {body}
+      </ButtonLink>
+    );
+
+    expect(rtlScreen.getByRole('link', { name: body })).toHaveAttribute(
+      'rel',
+      expect.stringContaining('external')
+    );
+  });
+
+  it('renders a primary button', () => {
+    const target = 'vero';
+    const body = 'iure';
+
+    render(
+      // eslint-disable-next-line react/jsx-no-literals -- Ignore kind.
+      <ButtonLink kind="primary" to={target}>
+        {body}
+      </ButtonLink>
+    );
+
+    expect(rtlScreen.getByRole('link', { name: body })).toHaveClass(
+      'btn--primary'
+    );
+  });
+
+  it('renders a secondary button', () => {
+    const target = 'voluptatem';
+    const body = 'et';
+
+    render(
+      // eslint-disable-next-line react/jsx-no-literals -- Ignore kind.
+      <ButtonLink kind="secondary" to={target}>
+        {body}
+      </ButtonLink>
+    );
+
+    expect(rtlScreen.getByRole('link', { name: body })).toHaveClass(
+      'btn--secondary'
+    );
+  });
+
+  it('renders a tertiary button', () => {
+    const target = 'vitae';
+    const body = 'quo';
+
+    render(
+      // eslint-disable-next-line react/jsx-no-literals -- Ignore kind.
+      <ButtonLink kind="tertiary" to={target}>
+        {body}
+      </ButtonLink>
+    );
+
+    expect(rtlScreen.getByRole('link', { name: body })).toHaveClass(
+      'btn--tertiary'
+    );
+  });
+
+  it('renders a circle button', () => {
+    const target = 'praesentium';
+    const body = 'laudantium';
+
+    render(
+      // eslint-disable-next-line react/jsx-no-literals -- Ignore kind.
+      <ButtonLink shape="circle" to={target}>
+        {body}
+      </ButtonLink>
+    );
+
+    expect(rtlScreen.getByRole('link', { name: body })).toHaveClass(
+      'btn--circle'
+    );
+  });
+
+  it('renders a rectangle button', () => {
+    const target = 'tempora';
+    const body = 'ut';
+
+    render(
+      // eslint-disable-next-line react/jsx-no-literals -- Ignore kind.
+      <ButtonLink shape="rectangle" to={target}>
+        {body}
+      </ButtonLink>
+    );
+
+    expect(rtlScreen.getByRole('link', { name: body })).toHaveClass(
+      'btn--rectangle'
+    );
+  });
+
+  it('renders a square button', () => {
+    const target = 'quia';
+    const body = 'non';
+
+    render(
+      // eslint-disable-next-line react/jsx-no-literals -- Ignore kind.
+      <ButtonLink shape="square" to={target}>
+        {body}
+      </ButtonLink>
+    );
+
+    expect(rtlScreen.getByRole('link', { name: body })).toHaveClass(
+      'btn--square'
+    );
+  });
+});