feat(button): Icon button (#69)

src/components/Button/Button.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import StyledButton from "./StyledButton";
+import { ButtonProps, variants, sizes } from "./types";
+
+const Button: React.FC<ButtonProps> = ({ startIcon, endIcon, children, ...props }) => (
+  <StyledButton {...props}>
+    {React.isValidElement(startIcon) &&
+      React.cloneElement(startIcon, {
+        mr: "0.5rem",
+      })}
+    {children}
+    {React.isValidElement(endIcon) &&
+      React.cloneElement(endIcon, {
+        ml: "0.5rem",
+      })}
+  </StyledButton>
+);
+
+Button.defaultProps = {
+  variant: variants.PRIMARY,
+  size: sizes.MD,
+};
+
+export default Button;

src/components/Button/IconButton.tsx

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+import Button from "./Button";
+import { ButtonProps } from "./types";
+
+const IconButton = styled(Button)<ButtonProps>`
+  padding: 0;
+  width: ${({ size }) => (size === "sm" ? "32px" : "48px")};
+`;
+
+export default IconButton;

src/components/Button/index.stories.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import styled from "styled-components";
-import { LogoIcon } from "../Svg";
-import Button from "./index";
+import { LogoIcon, AddIcon } from "../Svg";
+import Button from "./Button";
+import IconButton from "./IconButton";
 
 const Row = styled.div`
   margin-bottom: 32px;
@@ -125,3 +126,26 @@ export const WithIcon: React.FC = () => {
     </Row>
   );
 };
+
+export const Icons: React.FC = () => {
+  return (
+    <>
+      <Row>
+        <IconButton>
+          <LogoIcon />
+        </IconButton>
+        <IconButton>
+          <AddIcon />
+        </IconButton>
+      </Row>
+      <Row>
+        <IconButton size="sm">
+          <LogoIcon />
+        </IconButton>
+        <IconButton size="sm">
+          <AddIcon />
+        </IconButton>
+      </Row>
+    </>
+  );
+};

src/components/Button/index.tsx

@@ -1,24 +1,2 @@
-import React from "react";
-import StyledButton from "./StyledButton";
-import { ButtonProps, variants, sizes } from "./types";
-
-const Button: React.FC<ButtonProps> = ({ startIcon, endIcon, children, ...props }) => (
-  <StyledButton {...props}>
-    {React.isValidElement(startIcon) &&
-      React.cloneElement(startIcon, {
-        mr: "0.5rem",
-      })}
-    {children}
-    {React.isValidElement(endIcon) &&
-      React.cloneElement(endIcon, {
-        ml: "0.5rem",
-      })}
-  </StyledButton>
-);
-
-Button.defaultProps = {
-  variant: variants.PRIMARY,
-  size: sizes.MD,
-};
-
-export default Button;
+export { default as Button } from "./Button";
+export { default as IconButton } from "./IconButton";

src/components/ButtonMenu/ButtonMenuItem.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Button from "../Button";
+import Button from "../Button/Button";
 import { sizes } from "../Button/types";
 import { ButtonMenuItemProps } from "./types";
 

src/index.ts

@@ -1,4 +1,4 @@
-export { default as Button } from "./components/Button";
+export * from "./components/Button";
 export { default as ButtonMenu } from "./components/ButtonMenu";
 export { default as ButtonMenuItem } from "./components/ButtonMenu/ButtonMenuItem";
 export { default as Checkbox } from "./components/Checkbox";

src/widgets/Modal/Modal.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import Heading from "../../components/Heading";
-import Button from "../../components/Button";
+import Button from "../../components/Button/Button";
 import Flex from "../../components/Flex";
 import { CloseIcon } from "../../components/Svg";
 

src/widgets/Nav/Buttons.tsx

@@ -1,7 +1,7 @@
 import React, { AnchorHTMLAttributes } from "react";
 import styled from "styled-components";
 import { NavLink } from "react-router-dom";
-import Button from "../../components/Button";
+import Button from "../../components/Button/Button";
 
 const MenuButton = styled(Button)`
   padding: 0 8px;

src/widgets/Nav/Panel.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { CloseIcon, ChevronDownIcon } from "../../components/Svg";
-import Button from "../../components/Button";
+import Button from "../../components/Button/Button";
 import Dropdown from "../../components/Dropdown";
 import MenuDropdwn from "./MenuDropdwn";
 import Language from "./icons/Language";

src/widgets/Nav/UserBlock.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import Button from "../../components/Button";
+import Button from "../../components/Button/Button";
 import useWalletModal from "../WalletModal";
 import { Login } from "../WalletModal/types";
 

src/widgets/WalletModal/AccountModal.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Button from "../../components/Button";
+import Button from "../../components/Button/Button";
 import Text from "../../components/Text";
 import { Link } from "../../components/Link";
 import Flex from "../../components/Flex";

src/widgets/WalletModal/WalletCard.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Button from "../../components/Button";
+import Button from "../../components/Button/Button";
 import Text from "../../components/Text";
 import { localStorageKey } from "./config";
 import { Login, Config } from "./types";