Add input component w/ disabled variant. Add onClick to button.

package-lock.json

@@ -15447,7 +15447,6 @@
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/polished/-/polished-4.1.3.tgz",
       "integrity": "sha512-ocPAcVBUOryJEKe0z2KLd1l9EBa1r5mSwlKpExmrLzsnIzJo4axsoU9O2BjOTkDGDT4mZ0WFE5XKTlR3nLnZOA==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.14.0"
       }

package.json

@@ -10,6 +10,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.21",
     "@types/react-dom": "^17.0.0",
+    "polished": "^4.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",

src/App.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 
 import ProgressIndicator from "./stories/ProgressIndicator";
 
@@ -8,6 +8,7 @@ import Header2 from "./stories/Header2";
 import Button from "./stories/Button";
 
 import Label from "./stories/Label";
+import Input from "./stories/Input";
 
 import CenteredContainer from "./stories/CenteredContainer";
 import SpaceBetweenContainer from "./stories/SpaceBetweenContainer";
@@ -15,6 +16,12 @@ import Spacer from "./stories/Spacer";
 import TextAlignWrapper from "./stories/TextAlignWrapper";
 
 function App() {
+  const [input1, setInput1] = useState("");
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInput1(e.target.value);
+  };
+
   return (
     <CenteredContainer fullscreen>
       <CenteredContainer>
@@ -26,7 +33,13 @@ function App() {
         <TextAlignWrapper align="left">
           <Label htmlFor="testInput">Testing label</Label>
         </TextAlignWrapper>
-        <input type="text" name="testInput" style={{ width: "100%" }} />
+        <Input
+          variant="disabled-medium"
+          name="testInput"
+          value={input1}
+          onChange={handleInputChange}
+          placeholder="testing 1 2 3"
+        />
         <Spacer />
         <SpaceBetweenContainer>
           <Label htmlFor="testInput2">Testing label left</Label>
@@ -35,8 +48,12 @@ function App() {
         <input type="text" name="testInput2" style={{ width: "100%" }} />
         <Spacer />
         <SpaceBetweenContainer>
-          <Button variant="secondary">Hello World</Button>
-          <Button variant="secondary">Hello World</Button>
+          <Button variant="secondary" onClick={() => {}}>
+            Hello World
+          </Button>
+          <Button variant="secondary" onClick={() => {}}>
+            Hello World
+          </Button>
         </SpaceBetweenContainer>
       </CenteredContainer>
     </CenteredContainer>

src/shared/global.js

@@ -1,4 +1,4 @@
-import { createGlobalStyle /* , css */ } from "styled-components";
+import { createGlobalStyle } from "styled-components";
 
 // import { color, typography } from "./styles";
 

src/shared/styles.js

@@ -6,12 +6,21 @@ export const color = {
   background: "#091132",
 };
 
+export const opacity = {
+  light: 0.1,
+  medium: 0.2,
+};
+
 export const typography = {
   heading: "'IBM Plex Mono', monospace",
-  regular: "'Roboto', sans-serif",
+  primary: "'Roboto', sans-serif",
   weight: {
     regular: 400,
     heavy: 500,
     bold: 700,
   },
 };
+
+export const input = {
+  padding: "2rem",
+};

src/stories/Button.tsx

@@ -5,14 +5,20 @@ import CSS from "csstype";
 import { color, typography } from "../shared/styles";
 
 export interface ButtonProps {
-  variant?: "primary" | "secondary";
   children: ReactNode | null;
   style?: CSS.Properties;
+  variant?: "primary" | "secondary";
+  onClick: () => void;
 }
 
-const Button: FC<ButtonProps> = ({ children, variant = "primary", style }) => {
+const Button: FC<ButtonProps> = ({
+  children,
+  style,
+  variant = "primary",
+  onClick,
+}) => {
   return (
-    <StyledButton variant={variant} style={style}>
+    <StyledButton variant={variant} style={style} onClick={onClick}>
       {children}
     </StyledButton>
   );
@@ -29,7 +35,7 @@ const StyledButton = styled.button<ButtonProps>`
   min-width: 10rem;
 
   font-size: 1.4rem;
-  font-family: ${typography.regular};
+  font-family: ${typography.primary};
   font-weight: ${typography.weight.heavy};
 
   transition: all 150ms ease-out;

src/stories/Input.tsx

@@ -0,0 +1,85 @@
+import React, { FC } from "react";
+import styled, { css } from "styled-components";
+import CSS from "csstype";
+import { rgba } from "polished";
+
+import { color, opacity, typography, input } from "../shared/styles";
+
+export interface InputProps {
+  style?: CSS.Properties;
+  variant?: "primary" | "disabled-light" | "disabled-medium";
+  name: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  placeholder?: string;
+  // disabled = false,
+}
+
+const Input: FC<InputProps> = ({
+  style,
+  variant = "primary",
+  name,
+  value,
+  onChange,
+  placeholder = "",
+}) => {
+  const disabled =
+    variant === "disabled-light" || variant === "disabled-medium"
+      ? true
+      : false;
+
+  return (
+    <StyledInput
+      style={style}
+      variant={variant}
+      name={name}
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      type="text"
+      disabled={disabled}
+    />
+  );
+};
+
+export default Input;
+
+const StyledInput = styled.input<InputProps>`
+  border-radius: 12px;
+  border: none;
+  padding: ${input.padding};
+  width: 100%;
+
+  font-size: 1.6rem;
+  font-family: ${typography.primary};
+  font-weight: ${typography.weight.regular};
+
+  appearance: none;
+  &:focus-visible {
+    outline: none;
+  }
+
+  ${(props) =>
+    (props.variant === "disabled-light" ||
+      props.variant === "disabled-medium") &&
+    css`
+      color: ${color.white};
+      cursor: not-allowed;
+
+      &::placeholder {
+        color: ${color.white};
+      }
+    `}
+
+  ${(props) =>
+    props.variant === "disabled-light" &&
+    css`
+      background-color: ${rgba(color.white, opacity.light)};
+    `}
+
+  ${(props) =>
+    props.variant === "disabled-medium" &&
+    css`
+      background-color: ${rgba(color.white, opacity.medium)};
+    `}
+`;

src/stories/Label.tsx

@@ -22,7 +22,7 @@ export default Label;
 
 const StyledLabel = styled.label<LabelProps>`
   font-size: 1.4rem;
-  font-family: ${typography.regular};
+  font-family: ${typography.primary};
   font-weight: ${typography.weight.heavy};
 
   margin-bottom: 0.7rem;