Allow TextButton to act as a link

Similar to the `Button` component, we can now do `<TextButton as="a"
href="...">...</TextButton>` to render a link.

Also, fixes a bug around the font-size of the `TextButton` component.
The `size: "s"` prop applied via `.attrs` wasn't being forwarded to the
underlined `Heading` component so, instead, we now extend from just
`button` and apply the needed font properties directly in the css body.

packages/components/button/__spec__/text_button.spec.tsx

@@ -0,0 +1,23 @@
+import { TextButton } from "../src";
+import { render, screen } from "../test_utils";
+
+describe("<TextButton />", () => {
+  it("renders a button by default", () => {
+    render(<TextButton>Click me</TextButton>);
+
+    expect(
+      screen.getByText("Click me", { selector: "button" })
+    ).toBeInTheDocument();
+  });
+
+  it("renders an anchor element", () => {
+    const href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
+    render(
+      <TextButton as="a" href={href}>
+        Link
+      </TextButton>
+    );
+
+    expect(screen.getByText("Link").closest("a")).toHaveAttribute("href", href);
+  });
+});

packages/components/button/src/text_button.tsx

@@ -1,23 +1,20 @@
 import styled from "styled-components";
-import { Heading, HeadingProps } from "@buoysoftware/anchor-typography";
 
-interface OwnProps {
-  children?: React.ReactNode;
-}
-
-type TextButtonProps = OwnProps &
-  React.ButtonHTMLAttributes<HTMLButtonElement> &
-  Omit<HeadingProps, "as" | "size" | "background" | "color">;
-
-export const TextButton = styled(Heading).attrs(() => ({
+export const TextButton = styled.button.attrs((props) => ({
   as: "button",
-  size: "s",
-}))<TextButtonProps>`
+  ...props,
+}))`
+  align-items: center;
   background: transparent;
   border: none;
   height: 28px;
   color: ${({ theme }) => theme.colors.interactive.default};
   cursor: pointer;
+  display: inline-flex;
+  font-size: ${({ theme }) => theme.fontSizes["font-size-100"]};
+  font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+  font-weight: ${({ theme }) => theme.fontWeights["600"]};
+  line-height: ${({ theme }) => theme.fontSizes["font-size-200"]};
   padding: ${({ theme }) => theme.space.xxs};
 
   &:hover {

packages/components/button/stories/text_button.stories.mdx

@@ -46,3 +46,18 @@ export const Template = (args) => {
   </Story>
 </Canvas>
 
+## As link
+
+<Canvas>
+  <Story
+    name="Text Button as link"
+    args={{
+      as: "a",
+      href: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+      target: "_blank",
+      children: "Button",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>