Add TextArea component

src/stories/TextArea.tsx

@@ -0,0 +1,80 @@
+import React, { FC } from "react";
+import styled, { css } from "styled-components";
+import CSS from "csstype";
+import { rgba } from "polished";
+
+import {
+  color,
+  opacity,
+  typography,
+  borderRadius,
+  fontSize,
+  padding,
+} from "../shared/styles";
+
+export interface TextAreaProps {
+  style?: CSS.Properties;
+  disabled?: boolean;
+  name: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  placeholder?: string;
+}
+
+const TextArea: FC<TextAreaProps> = ({
+  style,
+  name,
+  value,
+  onChange,
+  disabled = false,
+  placeholder = "",
+}) => {
+  return (
+    <StyledTextArea
+      style={style}
+      name={name}
+      value={value}
+      onChange={onChange}
+      disabled={disabled}
+      placeholder={placeholder}
+    />
+  );
+};
+
+export default TextArea;
+
+const StyledTextArea = styled.textarea<TextAreaProps>`
+  border-radius: ${borderRadius.medium};
+  border: none;
+  padding: ${padding.medium};
+  width: 100%;
+  height: 21.6rem;
+
+  font-size: ${fontSize.medium};
+  font-family: ${typography.primary};
+  font-weight: ${typography.weight.regular};
+
+  appearance: none;
+  &:focus-visible {
+    outline: none;
+  }
+
+  &::placeholder {
+    color: ${color.black};
+  }
+
+  ${(props) =>
+    props.disabled &&
+    css`
+      cursor: not-allowed;
+      height: 0;
+      min-height: 12.5rem;
+
+      color: white;
+      background-color: ${rgba(color.white, opacity.medium)};
+
+      &::placeholder {
+        color: ${color.white};
+      }
+    `}
+`;

src/stories/utilities/CenteredContainer.tsx

@@ -0,0 +1,59 @@
+import React, { FC, ReactNode } from "react";
+import styled, { css } from "styled-components";
+import CSS from "csstype";
+
+import { color } from "../../shared/styles";
+
+interface CenteredContainerProps {
+  children: ReactNode | null;
+  style?: CSS.Properties;
+  fullscreen?: boolean;
+  wide?: boolean;
+}
+
+const CenteredContainer: FC<CenteredContainerProps> = ({
+  children,
+  style,
+  fullscreen = false,
+  wide = false,
+}) => {
+  return (
+    <StyledDiv style={style} fullscreen={fullscreen} wide={wide}>
+      {children}
+    </StyledDiv>
+  );
+};
+
+export default CenteredContainer;
+
+const StyledDiv = styled.div<CenteredContainerProps>`
+  height: 100vh;
+  text-align: center;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  ${(props) =>
+    props.fullscreen &&
+    css`
+      width: 100vw;
+      background-color: ${color.background};
+    `}
+
+  ${(props) =>
+    !props.fullscreen &&
+    css`
+      max-width: 600px;
+      width: 100%;
+      padding: 0 30px;
+    `}
+
+    ${(props) =>
+    !props.fullscreen &&
+    props.wide &&
+    css`
+      max-width: 1200px;
+    `}
+`;

src/stories/utilities/SpaceBetweenContainer.tsx

@@ -0,0 +1,33 @@
+import React, { FC, ReactNode } from "react";
+import styled, { css } from "styled-components";
+import CSS from "csstype";
+
+interface SpaceBetweenContainerProps {
+  children: ReactNode | null;
+  style?: CSS.Properties;
+  width100pct?: boolean;
+}
+
+const SpaceBetweenContainer: FC<SpaceBetweenContainerProps> = ({
+  children,
+  style,
+  width100pct = true,
+}) => {
+  return (
+    <StyledDiv style={style} width100pct={width100pct}>
+      {children}
+    </StyledDiv>
+  );
+};
+
+export default SpaceBetweenContainer;
+
+const StyledDiv = styled.div<SpaceBetweenContainerProps>`
+  display: flex;
+  justify-content: space-between;
+  ${(props) =>
+    props.width100pct &&
+    css`
+      width: 100%;
+    `}
+`;

src/stories/utilities/Spacer.tsx

@@ -0,0 +1,18 @@
+import React, { FC } from "react";
+import styled from "styled-components";
+import CSS from "csstype";
+
+interface SpacerProps {
+  style?: CSS.Properties;
+  space?: string;
+}
+
+const Spacer: FC<SpacerProps> = ({ style, space = "20px" }) => {
+  return <StyledDiv style={style} space={space} />;
+};
+
+export default Spacer;
+
+const StyledDiv = styled.div<SpacerProps>`
+  height: ${(props) => props.space};
+`;

src/stories/utilities/TextAlignWrapper.tsx

@@ -0,0 +1,36 @@
+import React, { FC, ReactNode } from "react";
+import styled, { css } from "styled-components";
+import CSS from "csstype";
+
+interface TextAlignWrapperProps {
+  children: ReactNode | null;
+  style?: CSS.Properties;
+  align: "left" | "center" | "right";
+  marginBottom?: boolean;
+}
+
+const TextAlignWrapper: FC<TextAlignWrapperProps> = ({
+  children,
+  style,
+  align = "left",
+  marginBottom = true,
+}) => {
+  return (
+    <StyledDiv style={style} align={align} marginBottom={marginBottom}>
+      {children}
+    </StyledDiv>
+  );
+};
+
+export default TextAlignWrapper;
+
+const StyledDiv = styled.div<TextAlignWrapperProps>`
+  text-align: ${(props) => props.align};
+  width: 100%;
+
+  ${(props) =>
+    props.marginBottom &&
+    css`
+      margin-bottom: 0.7rem;
+    `}
+`;