add style to splash icon header props and classname to centered container

package.json

@@ -2,7 +2,7 @@
   "name": "@intended/intended-ui",
   "description": "Storybook UI library for Intended Link",
   "license": "MIT",
-  "version": "0.1.15",
+  "version": "0.1.26",
   "private": false,
   "main": "dist/index.js",
   "repository": "https://git.silentsilas.com/Intended/attendant.git",
@@ -47,10 +47,7 @@
     "polished": "^4.1.3",
     "styled-components": "^5.3.1",
     "react": "^17.0.2",
-    "react-dom": "^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",
@@ -62,14 +59,11 @@
     "@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-scripts": "4.0.3"
   },
   "files": [
     "dist",

src/App.tsx

@@ -1,95 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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/index.tsx

@@ -11,6 +11,7 @@ export * from './stories/Header2';
 export * from './stories/Header3';
 export * from './stories/SplashIconHeader';
 export * from './stories/Icon';
+export * from './stories/IconArrow';
 export * from './stories/Input';
 export * from './stories/InputButtonWithIcon';
 export * from './stories/Label';

src/stories/Select.stories.tsx

@@ -16,4 +16,10 @@ const Template: ComponentStory<typeof Select> = (args: SelectProps) => (
 );
 
 export const Default = Template.bind({});
-Default.args = { id: "testId" };
+Default.args = { 
+  children: [
+    "<option value='github'>Github</option>",
+    "<option value='facebook'>Facebook</option>"
+  ],
+  id: "testId" 
+};

src/stories/Select.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import React, { FC, ReactNode } from "react";
 import styled from "styled-components";
 import CSS from "csstype";
 
@@ -11,18 +11,17 @@ import {
 } from "../shared/styles";
 
 export interface SelectProps {
+  children: ReactNode | null;
   style?: CSS.Properties;
   id: string;
   value?: string;
   onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
 }
 
-const Select: FC<SelectProps> = ({ style, id, value = "github", onChange }) => {
+const Select: FC<SelectProps> = ({ children, style, id, value = "github", onChange }) => {
   return (
     <StyledSelect style={style} id={id} value={value} onChange={onChange}>
-      <option value="github">Github</option>
+      { children }
-      <option value="facebook">Facebook</option>
-      <option value="Google">Google</option>
     </StyledSelect>
   );
 };

src/stories/SplashIconHeader.tsx

@@ -1,9 +1,13 @@
-import React from "react";
+import React, { FC } from "react";
 import { rgba } from "polished";
-
+import CSS from "csstype";
 import { color, opacity } from "../shared/styles";
 
-const SplashIconHeader = () => {
+export interface SplashIconHeaderProps {
+  style?: CSS.Properties;
+}
+
+const SplashIconHeader: FC<SplashIconHeaderProps> = ({ style }) => {
   const bgCircleColor = rgba(color.white, opacity.light);
 
   const dotColor = "#ffffff";
@@ -13,7 +17,7 @@ const SplashIconHeader = () => {
   const r = "60";
 
   return (
-    <svg width="44rem" viewBox="0 0 440 120">
+    <svg width="44rem" viewBox="0 0 440 120" style={style}>
       <circle r={r} cx="60" cy={cy} fill={bgCircleColor} />
       <svg width="51" height="60" viewBox="0 0 51 60" fill="none" x="35" y="30">
         <path

src/stories/pages/SecretCreationPage1.tsx

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

src/stories/pages/SecretCreationPage2.tsx

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

src/stories/pages/SecretCreationPage3.tsx

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

src/stories/pages/SecretRevealPage.tsx

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

src/stories/pages/SplashPage.tsx

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

src/stories/pages/VerifyPage.tsx

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

src/stories/utilities/CenteredContainer.tsx

@@ -7,6 +7,7 @@ import { color } from "../../shared/styles";
 interface CenteredContainerProps {
   children: ReactNode | null;
   style?: CSS.Properties;
+  className?: string | undefined;
   fullscreen?: boolean;
   wide?: boolean;
 }
@@ -14,11 +15,12 @@ interface CenteredContainerProps {
 const CenteredContainer: FC<CenteredContainerProps> = ({
   children,
   style,
+  className,
   fullscreen = false,
   wide = false,
 }) => {
   return (
-    <StyledDiv style={style} fullscreen={fullscreen} wide={wide}>
+    <StyledDiv style={style} fullscreen={fullscreen} wide={wide} className={className}>
       {children}
     </StyledDiv>
   );
@@ -27,7 +29,7 @@ const CenteredContainer: FC<CenteredContainerProps> = ({
 export { CenteredContainer };
 
 const StyledDiv = styled.div<CenteredContainerProps>`
-  height: 100vh;
+  height: 100%;
   text-align: center;
 
   display: flex;
@@ -38,7 +40,7 @@ const StyledDiv = styled.div<CenteredContainerProps>`
   ${(props) =>
     props.fullscreen &&
     css`
-      width: 100vw;
+      width: 100%;
       background: linear-gradient(180deg, #060b2e 0%, #051745 100%);
     `}