feat(Link): Add link and nav button

package.json

@@ -15,6 +15,8 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-feather": "^2.0.9",
+    "react-router": "*",
+    "react-router-dom": "*",
     "styletron-engine-atomic": "^1.4.8",
     "styletron-react": "^6.0.2"
   },

src/button-group/button-group.stories.tsx

@@ -1,6 +1,7 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { SIZE } from "baseui/button";
 import React from "react";
+import { MemoryRouter } from "react-router";
 import { ButtonAppearance, ButtonRadius } from "../button/button";
 import ButtonGroup from "./button-group";
 
@@ -29,7 +30,9 @@ export default {
 } as ComponentMeta<typeof ButtonGroup>;
 
 const Template: ComponentStory<typeof ButtonGroup> = (args) => (
-  <ButtonGroup {...args} />
+  <MemoryRouter>
+    <ButtonGroup {...args} />
+  </MemoryRouter>
 );
 
 export const Default = Template.bind({});
@@ -62,3 +65,12 @@ Long.args = {
     { children: "Button 3" },
   ],
 };
+
+export const WithLinks = Template.bind({});
+WithLinks.args = {
+  buttons: [
+    { children: "Button" },
+    { children: "Button 2", to: "#" },
+    { children: "Button 3" },
+  ],
+};

src/button-group/button-group.tsx

@@ -5,10 +5,11 @@ import Button, {
   ButtonProps,
   ButtonRadius,
 } from "../button/button";
+import LinkButton from "../link/link-button";
 import { borderRadius } from "../utils/css";
 
 export default function ButtonGroup(props: {
-  buttons: Array<ButtonProps>;
+  buttons: Array<ButtonProps & { to?: string; target?: "_blank" }>;
   radius?: ButtonRadius;
   appearance?: ButtonAppearance;
   size?: SIZE[keyof SIZE];
@@ -56,6 +57,23 @@ export default function ButtonGroup(props: {
   return (
     <>
       {props.buttons.map((prop, i) => {
+        if (prop.to) {
+          return (
+            <LinkButton
+              {...prop}
+              to={prop.to}
+              target={prop.target}
+              appearance={props.appearance}
+              size={props.size}
+              style={{
+                ...prop.style,
+                ...getBorderRadius(i),
+                ...getBorderWidth(i),
+              }}
+            />
+          );
+        }
+
         return (
           <Button
             {...prop}

src/index.ts

@@ -2,5 +2,6 @@ export * from "./button";
 export * from "./button-group";
 export * from "./checkbox";
 export * from "./field";
+export * from "./link";
 export * from "./themes";
 export * from "./utils/css";

src/link/index.ts

@@ -0,0 +1,4 @@
+export * from "./link-button";
+export { default as LinkButton } from "./link-button";
+export * from "./nav-button";
+export { default as NavButton } from "./nav-button";

src/link/link-button.stories.tsx

@@ -0,0 +1,54 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { SIZE } from "baseui/button";
+import React from "react";
+import { PlusCircle } from "react-feather";
+import { MemoryRouter } from "react-router";
+import { ButtonAppearance, ButtonRadius } from "../button/button";
+import LinkButton from "./link-button";
+
+export default {
+  title: "Atoms/LinkButton",
+  component: LinkButton,
+  argTypes: {
+    size: {
+      options: [SIZE.compact, SIZE.default, SIZE.large, SIZE.mini],
+      control: { type: "radio" },
+    },
+    appearance: {
+      options: [
+        ButtonAppearance.minimal,
+        ButtonAppearance.outline,
+        ButtonAppearance.primary,
+        ButtonAppearance.secondary,
+      ],
+      control: { type: "radio" },
+    },
+    radius: {
+      options: [ButtonRadius.round, ButtonRadius.square],
+      control: { type: "radio" },
+    },
+  },
+} as ComponentMeta<typeof LinkButton>;
+
+const Template: ComponentStory<typeof LinkButton> = (args) => (
+  <MemoryRouter>
+    <LinkButton {...args} />
+  </MemoryRouter>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  children: "Button",
+  disabled: false,
+  isLoading: true,
+  to: "#",
+};
+
+export const Icon = Template.bind({});
+Icon.args = {
+  children: "Button",
+  icon: <PlusCircle />,
+  disabled: false,
+  isLoading: false,
+  to: "#",
+};