Separate styles from logic

kafka-ui-react-app/src/components/common/Button/Button.styled.ts

@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+
+export interface Props {
+  buttonType: 'primary' | 'secondary';
+  buttonSize: 'S' | 'M' | 'L';
+  isInverted?: boolean;
+}
+
+const StyledButton = styled('button')<Props>`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 0px 12px;
+  border: none;
+  border-radius: 4px;
+  white-space: nowrap;
+  margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
+
+  background: ${(props) =>
+    props.isInverted
+      ? 'transparent'
+      : props.theme.buttonStyles[props.buttonType].backgroundColor.normal};
+  color: ${(props) =>
+    props.isInverted
+      ? props.theme.buttonStyles[props.buttonType].invertedColors.normal
+      : props.theme.buttonStyles[props.buttonType].color};
+  font-size: ${(props) => props.theme.buttonStyles.fontSize[props.buttonSize]};
+  height: ${(props) => props.theme.buttonStyles.height[props.buttonSize]};
+
+  &:hover:enabled {
+    background: ${(props) =>
+      props.isInverted
+        ? 'transparent'
+        : props.theme.buttonStyles[props.buttonType].backgroundColor.hover};
+    color: ${(props) =>
+      props.isInverted
+        ? props.theme.buttonStyles[props.buttonType].invertedColors.hover
+        : props.theme.buttonStyles[props.buttonType].color};
+    cursor: pointer;
+  }
+  &:active:enabled {
+    background: ${(props) =>
+      props.isInverted
+        ? 'transparent'
+        : props.theme.buttonStyles[props.buttonType].backgroundColor.active};
+    color: ${(props) =>
+      props.isInverted
+        ? props.theme.buttonStyles[props.buttonType].invertedColors.active
+        : props.theme.buttonStyles[props.buttonType].color};
+  }
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+
+export default StyledButton;

kafka-ui-react-app/src/components/common/Button/Button.tsx

@@ -1,59 +1,11 @@
-import styled from 'styled-components';
+import StyledButton, {
+  Props as ButtonProps,
+} from 'components/common/Button/Button.styled';
+import React from 'react';
 
-interface Props {
-  buttonType: 'primary' | 'secondary';
-  buttonSize: 'S' | 'M' | 'L';
-  isInverted?: boolean;
-}
+type Props = ButtonProps;
 
-const Button = styled('button')<Props>`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  padding: 0px 12px;
-  border: none;
-  border-radius: 4px;
-  white-space: nowrap;
-  margin-right: 0.5rem;
-  margin-bottom: 0.5rem;
-
-  background: ${(props) =>
-    props.isInverted
-      ? 'transparent'
-      : props.theme.buttonStyles[props.buttonType].backgroundColor.normal};
-  color: ${(props) =>
-    props.isInverted
-      ? props.theme.buttonStyles[props.buttonType].invertedColors.normal
-      : props.theme.buttonStyles[props.buttonType].color};
-  font-size: ${(props) => props.theme.buttonStyles.fontSize[props.buttonSize]};
-  height: ${(props) => props.theme.buttonStyles.height[props.buttonSize]};
-
-  &:hover:enabled {
-    background: ${(props) =>
-      props.isInverted
-        ? 'transparent'
-        : props.theme.buttonStyles[props.buttonType].backgroundColor.hover};
-    color: ${(props) =>
-      props.isInverted
-        ? props.theme.buttonStyles[props.buttonType].invertedColors.hover
-        : props.theme.buttonStyles[props.buttonType].color};
-    cursor: pointer;
-  }
-  &:active:enabled {
-    background: ${(props) =>
-      props.isInverted
-        ? 'transparent'
-        : props.theme.buttonStyles[props.buttonType].backgroundColor.active};
-    color: ${(props) =>
-      props.isInverted
-        ? props.theme.buttonStyles[props.buttonType].invertedColors.active
-        : props.theme.buttonStyles[props.buttonType].color};
-  }
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-`;
-
-export default Button;
+export const Button: React.FC<Props> = (props) => {
+  // Later we can add other logic here
+  return <StyledButton {...props} />;
+};