feat: Add more states to buttons (#36)

pancakeswap · Oct 29, 2020 · d0d307e · d0d307e
1 parent f09c44e
commit d0d307e
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 1 deletion.
diff --git a/src/components/Button/StyledButton.tsx b/src/components/Button/StyledButton.tsx
@@ -32,6 +32,7 @@ const StyledButton = styled.button<ButtonProps>`
   font-family: inherit;
   font-size: 16px;
   font-weight: 600;
+  width: ${({ fullWidth }) => (fullWidth ? "100%" : "auto")};
   height: ${({ size }) => (size === "sm" ? "32px" : "48px")};
   letter-spacing: 0.03em;
   justify-content: center;
@@ -61,4 +62,9 @@ const StyledButton = styled.button<ButtonProps>`
   }
 `;
 
+StyledButton.defaultProps = {
+  fullWidth: false,
+  as: "button",
+};
+
 export default StyledButton;
diff --git a/src/components/Button/index.stories.tsx b/src/components/Button/index.stories.tsx
@@ -7,7 +7,8 @@ import Button from "./index";
 const Row = styled.div`
   margin-bottom: 32px;
 
-  & > button + button {
+  & > button + button,
+  & > a + a {
     margin-left: 16px;
   }
 `;
@@ -57,6 +58,65 @@ export const Default: React.FC = () => {
   );
 };
 
+export const ButtonLink: React.FC = () => {
+  return (
+    <>
+      <Row>
+        <Button as="a">Primary</Button>
+        <Button as="a" disabled>
+          Disabled
+        </Button>
+        <Button as="a" size="sm">
+          Small
+        </Button>
+      </Row>
+      <Row>
+        <Button as="a" variant="secondary">
+          Secondary
+        </Button>
+        <Button as="a" variant="secondary" disabled>
+          Disabled
+        </Button>
+        <Button as="a" variant="secondary" size="sm">
+          Small
+        </Button>
+      </Row>
+      <Row>
+        <Button as="a" variant="tertiary">
+          Tertiary
+        </Button>
+        <Button as="a" variant="tertiary" disabled>
+          Disabled
+        </Button>
+        <Button as="a" variant="tertiary" size="sm">
+          Small
+        </Button>
+      </Row>
+      <Row>
+        <Button as="a" variant="text">
+          Text
+        </Button>
+        <Button as="a" variant="text" disabled>
+          Disabled
+        </Button>
+        <Button as="a" variant="text" size="sm">
+          Small
+        </Button>
+      </Row>
+    </>
+  );
+};
+
+export const WithProps: React.FC = () => {
+  return (
+    <>
+      <Row>
+        <Button fullWidth>Full size</Button>
+      </Row>
+    </>
+  );
+};
+
 const StartIcon = () => (
   <span role="img" aria-label="cake" style={{ display: "inline-block", width: "100%", textAlign: "center" }}>
     🥞

diff --git a/src/components/Button/types.ts b/src/components/Button/types.ts
@@ -20,6 +20,9 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   size?: Sizes;
   startIcon?: ReactNode;
   endIcon?: ReactNode;
+  fullWidth?: boolean;
+  as?: "a" | "button";
+  href?: string;
 }
 
 export type ButtonThemeVariant = {