package.json

@@ -2,7 +2,7 @@
   "name": "@intended/intended-ui",
   "description": "Storybook UI library for Intended Link",
   "license": "MIT",
-  "version": "0.1.16",
+  "version": "0.1.15",
   "private": false,
   "main": "dist/index.js",
   "repository": "https://git.silentsilas.com/Intended/attendant.git",
@@ -45,7 +45,12 @@
   },
   "dependencies": {
     "polished": "^4.1.3",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3",
+    "react-svg": "^14.0.13",
+    "web-vitals": "^1.0.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.16.0",
@@ -57,13 +62,14 @@
     "@storybook/react": "^6.3.8",
     "@types/styled-components": "^5.1.14",
     "cross-env": "^7.0.3",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.21",
     "@types/react-dom": "^17.0.0",
-    "typescript": "^4.2.0",
+    "typescript": "^4.2.0"
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3"
   },
   "files": [
     "dist",

src/App.tsx

@@ -0,0 +1,95 @@
+import React, { useState } from "react";
+
+import { ProgressIndicator } from "./stories/ProgressIndicator";
+
+import { Header1 } from "./stories/Header1";
+import { Header2 } from "./stories/Header2";
+
+import { Button } from "./stories/Button";
+import { IconArrow } from "./stories/IconArrow";
+import { InputButtonWithIcon } from "./stories/InputButtonWithIcon";
+
+import { Label } from "./stories/Label";
+import { Input } from "./stories/Input";
+import { AutoResizingTextArea } from "./stories/AutoResizingTextArea";
+import { Select } from "./stories/Select";
+
+import { CenteredContainer } from "./stories/utilities/CenteredContainer";
+import { SpaceBetweenContainer } from "./stories/utilities/SpaceBetweenContainer";
+import { Spacer } from "./stories/utilities/Spacer";
+import { TextAlignWrapper } from "./stories/utilities/TextAlignWrapper";
+
+function App() {
+  const [input1, setInput1] = useState("");
+  const [input2, setInput2] = useState("");
+  const [select, setSelect] = useState("github");
+
+  const handleInputChange1 = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInput1(e.target.value);
+  };
+
+  const handleInputChange2 = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setInput2(e.target.value);
+  };
+
+  const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelect(e.target.value);
+  };
+
+  return (
+    <CenteredContainer fullscreen>
+      <CenteredContainer>
+        <ProgressIndicator currentProgress={3} />
+        {/* <Header1>Securely Share Your Secrets</Header1> */}
+        <Spacer />
+        <Header2>Tell someone</Header2>
+        <Spacer />
+        <TextAlignWrapper align="left">
+          <Label htmlFor="testInput">Testing label</Label>
+        </TextAlignWrapper>
+        <Input
+          variant="primary"
+          id="testInput"
+          value={input1}
+          onChange={handleInputChange1}
+          placeholder="testing 1 2 3"
+        />
+        <Spacer />
+        <InputButtonWithIcon
+          id="testinputbutton"
+          value="https://wanderinginn.com"
+          variant="download"
+          onClick={() => {}}
+        />
+        <Spacer />
+        <Select
+          id="selectService"
+          value={select}
+          onChange={handleSelectChange}
+        />
+        <Spacer />
+        <SpaceBetweenContainer>
+          <Label htmlFor="testInput2">Testing label left</Label>
+          <Label htmlFor="testInput2">Testing label right</Label>
+        </SpaceBetweenContainer>
+        <AutoResizingTextArea
+          id="testTextArea"
+          value={input2}
+          onChange={handleInputChange2}
+          placeholder="Tell me your secrets"
+        />
+        <Spacer />
+        <SpaceBetweenContainer>
+          <Button variant="primary" onClick={() => {}}>
+            <IconArrow arrowDirection="left" />
+          </Button>
+          <Button variant="secondary" onClick={() => {}}>
+            <IconArrow arrowDirection="right" />
+          </Button>
+        </SpaceBetweenContainer>
+      </CenteredContainer>
+    </CenteredContainer>
+  );
+}
+
+export default App;

src/App2.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import styled from "styled-components";
+
+import { SplashIconHeader } from "./stories/SplashIconHeader";
+
+function App2() {
+  return (
+    <StyledDiv>
+      <SplashIconHeader />
+    </StyledDiv>
+  );
+}
+
+export default App2;
+
+const StyledDiv = styled.div`
+  min-height: 100vh;
+  width: 100%;
+  background-color: #091132;
+  padding: 40px;
+`;

src/SecretCreationPage1.tsx

@@ -1,19 +1,19 @@
 import React, { useState } from "react";
 
-import { ProgressIndicator } from "../ProgressIndicator";
+import { ProgressIndicator } from "./stories/ProgressIndicator";
 
-import { Header2 } from"../Header2";
+import { Header2 } from "./stories/Header2";
 
-import { Button } from"../Button";
+import { Button } from "./stories/Button";
-import { IconArrow } from"../IconArrow";
+import { IconArrow } from "./stories/IconArrow";
 
-import { Label } from"../Label";
+import { Label } from "./stories/Label";
-import { FileInput } from"../FileInput";
+import { FileInput } from "./stories/FileInput";
-import { TextArea } from"../TextArea";
+import { TextArea } from "./stories/TextArea";
 
-import { CenteredContainer } from"../utilities/CenteredContainer";
+import { CenteredContainer } from "./stories/utilities/CenteredContainer";
-import { Spacer } from"../utilities/Spacer";
+import { Spacer } from "./stories/utilities/Spacer";
-import { TextAlignWrapper } from"../utilities/TextAlignWrapper";
+import { TextAlignWrapper } from "./stories/utilities/TextAlignWrapper";
 
 const SecretCreationPage1 = () => {
   const [secretInput, setSecretInput] = useState("");

src/SecretCreationPage2.tsx

@@ -1,20 +1,20 @@
 import React, { useState } from "react";
 
-import { ProgressIndicator } from"../ProgressIndicator";
+import { ProgressIndicator } from "./stories/ProgressIndicator";
 
-import { Header2 } from"../Header2";
+import { Header2 } from "./stories/Header2";
 
-import { Button } from"../Button";
+import { Button } from "./stories/Button";
-import { IconArrow } from"../IconArrow";
+import { IconArrow } from "./stories/IconArrow";
 
-import { Label } from"../Label";
+import { Label } from "./stories/Label";
-import { Input } from"../Input";
+import { Input } from "./stories/Input";
-import { Select } from"../Select";
+import { Select } from "./stories/Select";
 
-import { CenteredContainer } from"../utilities/CenteredContainer";
+import { CenteredContainer } from "./stories/utilities/CenteredContainer";
-import { SpaceBetweenContainer } from"../utilities/SpaceBetweenContainer";
+import { SpaceBetweenContainer } from "./stories/utilities/SpaceBetweenContainer";
-import { Spacer } from"../utilities/Spacer";
+import { Spacer } from "./stories/utilities/Spacer";
-import { TextAlignWrapper } from"../utilities/TextAlignWrapper";
+import { TextAlignWrapper } from "./stories/utilities/TextAlignWrapper";
 
 const SecretCreationPage2 = () => {
   const [recipientInput, setRecipientInput] = useState("");

src/SecretCreationPage3.tsx

@@ -1,20 +1,20 @@
 import React from "react";
 
-import { ProgressIndicator } from"../ProgressIndicator";
+import { ProgressIndicator } from "./stories/ProgressIndicator";
 
-import { Header2 } from"../Header2";
+import { Header2 } from "./stories/Header2";
 
-import { Button } from"../Button";
+import { Button } from "./stories/Button";
-import { IconArrow } from"../IconArrow";
+import { IconArrow } from "./stories/IconArrow";
-import { InputButtonWithIcon } from"../InputButtonWithIcon";
+import { InputButtonWithIcon } from "./stories/InputButtonWithIcon";
 
-import { Label } from"../Label";
+import { Label } from "./stories/Label";
-import { Input } from"../Input";
+import { Input } from "./stories/Input";
 
-import { CenteredContainer } from"../utilities/CenteredContainer";
+import { CenteredContainer } from "./stories/utilities/CenteredContainer";
-import { SpaceBetweenContainer } from"../utilities/SpaceBetweenContainer";
+import { SpaceBetweenContainer } from "./stories/utilities/SpaceBetweenContainer";
-import { Spacer } from"../utilities/Spacer";
+import { Spacer } from "./stories/utilities/Spacer";
-import { TextAlignWrapper } from"../utilities/TextAlignWrapper";
+import { TextAlignWrapper } from "./stories/utilities/TextAlignWrapper";
 
 const SecretCreationPage3 = () => {
   return (

src/SecretRevealPage.tsx

@@ -1,19 +1,19 @@
 import React from "react";
 
-import { Header2 } from"../Header2";
+import { Header2 } from "./stories/Header2";
-import { Header3 } from"../Header3";
+import { Header3 } from "./stories/Header3";
 
-import { Button } from"../Button";
+import { Button } from "./stories/Button";
 
-import { Label } from"../Label";
+import { Label } from "./stories/Label";
-import { InputButtonWithIcon } from"../InputButtonWithIcon";
+import { InputButtonWithIcon } from "./stories/InputButtonWithIcon";
 
-import { TextAreaParagraph } from"../TextAreaParagraph";
+import { TextAreaParagraph } from "./stories/TextAreaParagraph";
 
-import { CenteredContainer } from"../utilities/CenteredContainer";
+import { CenteredContainer } from "./stories/utilities/CenteredContainer";
-import { SpaceBetweenContainer } from"../utilities/SpaceBetweenContainer";
+import { SpaceBetweenContainer } from "./stories/utilities/SpaceBetweenContainer";
-import { Spacer } from"../utilities/Spacer";
+import { Spacer } from "./stories/utilities/Spacer";
-import { TextAlignWrapper } from"../utilities/TextAlignWrapper";
+import { TextAlignWrapper } from "./stories/utilities/TextAlignWrapper";
 
 const SecretRevealPage = () => {
   return (

src/SplashPage.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 
-import { SplashIconHeader } from"../SplashIconHeader";
+import { SplashIconHeader } from "./stories/SplashIconHeader";
 
-import { Header1 } from"../Header1";
+import { Header1 } from "./stories/Header1";
-import { Header3 } from"../Header3";
+import { Header3 } from "./stories/Header3";
 
-import { Button } from"../Button";
+import { Button } from "./stories/Button";
 
-import { CenteredContainer } from"../utilities/CenteredContainer";
+import { CenteredContainer } from "./stories/utilities/CenteredContainer";
-import { Spacer } from"../utilities/Spacer";
+import { Spacer } from "./stories/utilities/Spacer";
 
 const SplashPage = () => {
   return (

src/VerifyPage.tsx

@@ -1,16 +1,16 @@
 import React from "react";
 
-import { Header2 } from"../Header2";
+import { Header2 } from "./stories/Header2";
-import { Header3 } from"../Header3";
+import { Header3 } from "./stories/Header3";
 
-import { Button } from"../Button";
+import { Button } from "./stories/Button";
 
-import { Label } from"../Label";
+import { Label } from "./stories/Label";
-import { Input } from"../Input";
+import { Input } from "./stories/Input";
 
-import { CenteredContainer } from"../utilities/CenteredContainer";
+import { CenteredContainer } from "./stories/utilities/CenteredContainer";
-import { Spacer } from"../utilities/Spacer";
+import { Spacer } from "./stories/utilities/Spacer";
-import { TextAlignWrapper } from"../utilities/TextAlignWrapper";
+import { TextAlignWrapper } from "./stories/utilities/TextAlignWrapper";
 
 const VerifyPage = () => {
   return (