Reorganize components

edkf · Apr 11, 2019 · 3ed50f8 · 3ed50f8
1 parent 06ac9ba
commit 3ed50f8
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 39 deletions.
diff --git a/design-system/src/components/Button.tsx b/design-system/src/components/Button.tsx
@@ -2,6 +2,7 @@ import * as React from "react"
 import { theme } from "../theme"
 import styled from "styled-components"
 
+// Types
 export type Props = {
   /** Optional string that can be used to set the button value */
   text?: string
@@ -16,6 +17,24 @@ export type Props = {
   kind?: "default" | "primary" | "danger"
 }
 
+// Component
+export const Button: React.FC<Props> = ({
+  text,
+  fluid,
+  disabled,
+  children,
+  kind
+}) => (
+  <StyledButton
+    className={`${fluid ? "fluid" : ""} ${disabled ? "disabled" : ""} ${
+      kind ? kind : ""
+    }`}
+  >
+    {text || children}
+  </StyledButton>
+)
+
+// Styles
 const StyledButton = styled.button`
   background: ${theme.color.paneBg};
   border-radius: 4px;
@@ -85,19 +104,3 @@ const StyledButton = styled.button`
       inset 0px 0px 0px 1px hsla(0, 0%, 0%, 0.05);
   }
 `
-
-export const Button: React.FC<Props> = ({
-  text,
-  fluid,
-  disabled,
-  children,
-  kind
-}) => (
-  <StyledButton
-    className={`${fluid ? "fluid" : ""} ${disabled ? "disabled" : ""} ${
-      kind ? kind : ""
-    }`}
-  >
-    {text || children}
-  </StyledButton>
-)
diff --git a/design-system/src/components/Input.tsx b/design-system/src/components/Input.tsx
@@ -2,6 +2,7 @@ import * as React from "react"
 import { theme } from "../theme"
 import styled from "styled-components"
 
+// Types
 export type Props = {
   /** Input text */
   value?: string
@@ -19,6 +20,24 @@ export type Props = {
   onChange?: any
 }
 
+// Component
+export const Input: React.FC<Props> = ({
+  value,
+  placeholder,
+  error,
+  disabled,
+  onChange
+}) => (
+  <StyledInput
+    type="text"
+    value={value}
+    placeholder={placeholder}
+    className={`${error ? "error" : ""} ${disabled ? "disabled" : ""}`}
+    onChange={onChange}
+  />
+)
+
+// Styles
 const StyledInput = styled.input`
   background: ${theme.color.paneBgDark};
   border-radius: 4px;
@@ -64,19 +83,3 @@ const StyledInput = styled.input`
     opacity: 0.5;
   }
 `
-
-export const Input: React.FC<Props> = ({
-  value,
-  placeholder,
-  error,
-  disabled,
-  onChange
-}) => (
-  <StyledInput
-    type="text"
-    value={value}
-    placeholder={placeholder}
-    className={`${error ? "error" : ""} ${disabled ? "disabled" : ""}`}
-    onChange={onChange}
-  />
-)
diff --git a/design-system/src/components/Toggle.tsx b/design-system/src/components/Toggle.tsx
@@ -2,6 +2,7 @@ import * as React from "react"
 import { theme } from "../theme"
 import styled from "styled-components"
 
+// Types
 export type Props = {
   /** Disable Toggle */
   disabled?: boolean
@@ -13,6 +14,15 @@ export type Props = {
   onClick?: React.MouseEventHandler<HTMLDivElement>
 }
 
+// Component
+export const Toggle: React.FC<Props> = ({ disabled, active, onClick }) => (
+  <StyledToggle
+    className={`${disabled ? "disabled" : ""} ${active ? "active" : ""}`}
+    onClick={onClick}
+  />
+)
+
+// Styling
 const StyledToggle = styled.span`
   background: ${theme.color.paneBgDark};
   border-radius: 100px;
@@ -54,10 +64,3 @@ const StyledToggle = styled.span`
     opacity: 0.5;
   }
 `
-
-export const Toggle: React.FC<Props> = ({ disabled, active, onClick }) => (
-  <StyledToggle
-    className={`${disabled ? "disabled" : ""} ${active ? "active" : ""}`}
-    onClick={onClick}
-  />
-)