Add a bunch of spacing components and h1/h2 components

src/stories/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/Header1.tsx

@@ -0,0 +1,24 @@
+import React, { FC, ReactNode } from "react";
+import styled from "styled-components";
+import CSS from "csstype";
+
+import { color, typography } from "../shared/styles";
+
+export interface Header1Props {
+  children: ReactNode | null;
+  style?: CSS.Properties;
+}
+
+const Header1: FC<Header1Props> = ({ children, style }) => {
+  return <StyledHeader1 style={style}>{children}</StyledHeader1>;
+};
+
+export default Header1;
+
+const StyledHeader1 = styled.h2<Header1Props>`
+  font-size: 6.4rem;
+  font-family: ${typography.heading};
+  font-weight: ${typography.weight.regular};
+
+  color: ${color.white};
+`;

src/stories/Header2.tsx

@@ -0,0 +1,24 @@
+import React, { FC, ReactNode } from "react";
+import styled from "styled-components";
+import CSS from "csstype";
+
+import { color, typography } from "../shared/styles";
+
+export interface Header2Props {
+  children: ReactNode | null;
+  style?: CSS.Properties;
+}
+
+const Header2: FC<Header2Props> = ({ children, style }) => {
+  return <StyledHeader2 style={style}>{children}</StyledHeader2>;
+};
+
+export default Header2;
+
+const StyledHeader2 = styled.h2<Header2Props>`
+  font-size: 3.2rem;
+  font-family: ${typography.heading};
+  font-weight: ${typography.weight.regular};
+
+  color: ${color.white};
+`;

src/stories/ProgressIndicator.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+interface ProgressIndicatorProps {
+  current: 1 | 2 | 3;
+  size?: string;
+}
+
+const ProgressIndicator = ({
+  current,
+  size = "148",
+}: ProgressIndicatorProps) => {
+  const color = "#6B6B6B";
+
+  const cx1 = 12;
+  const cx2 = 72;
+  const cx3 = 132;
+
+  const currentCircleCX = current === 1 ? cx1 : current === 2 ? cx2 : cx3;
+
+  return (
+    <div>
+      <svg width={size} viewBox="0 0 144 24">
+        <line x1="6" y1="12" x2="144" y2="12" stroke={color} strokeWidth="2" />
+        <circle r="12" cx={cx1} cy="12" fill={color} />
+        <circle r="12" cx={cx2} cy="12" fill={color} />
+        <circle r="12" cx={cx3} cy="12" fill={color} />
+        <circle r="7" cx={currentCircleCX} cy="12" fill="white" />
+      </svg>
+    </div>
+  );
+};
+
+export default ProgressIndicator;

src/stories/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,
+}) => {
+  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/Spacer.tsx

@@ -0,0 +1,18 @@
+import React, { FC, ReactNode } 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};
+`;