Intended
/
attendant
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Draw the rest of the UI library

This commit is contained in:
Lindsey 2021-09-25 02:12:50 -04:00
parent a8e3774bc8
commit c94ae8960f
58 changed files with 1423 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.storybook/preview.js
View File

@ -6,7 +6,17 @@ export const decorators = [
(Story) => (
<>
<GlobalStyle />
<Story />
<div
style={{
padding: "20px",
background: "linear-gradient(180deg, #060b2e 0%, #051745 100%)",
height: "100vh",
display: "flex",
justifyContent: "center",
}}
>
<Story />
</div>
</>
),
];

23
src/App.tsx
View File

@ -6,12 +6,12 @@ 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 FileInput from "./stories/FileInput";
import TextArea from "./stories/TextArea";
import AutoResizingTextArea from "./stories/AutoResizingTextArea";
import Select from "./stories/Select";
import CenteredContainer from "./stories/utilities/CenteredContainer";
@ -39,7 +39,7 @@ function App() {
return (
<CenteredContainer fullscreen>
<CenteredContainer>
<ProgressIndicator current={3} />
<ProgressIndicator currentProgress={3} />
{/* <Header1>Securely Share Your Secrets</Header1> */}
<Spacer />
<Header2>Tell someone</Header2>
@ -48,8 +48,8 @@ function App() {
<Label htmlFor="testInput">Testing label</Label>
</TextAlignWrapper>
<Input
variant="disabled-light"
name="testInput"
variant="primary"
id="testInput"
value={input1}
onChange={handleInputChange1}
placeholder="testing 1 2 3"
@ -62,10 +62,8 @@ function App() {
onClick={() => {}}
/>
<Spacer />
<FileInput id="fileInput" />
<Spacer />
<Select
name="selectService"
id="selectService"
value={select}
onChange={handleSelectChange}
/>
@ -74,20 +72,19 @@ function App() {
<Label htmlFor="testInput2">Testing label left</Label>
<Label htmlFor="testInput2">Testing label right</Label>
</SpaceBetweenContainer>
<TextArea
name="testTextArea"
<AutoResizingTextArea
id="testTextArea"
value={input2}
onChange={handleInputChange2}
placeholder="Tell me your secrets"
disabled
/>
<Spacer />
<SpaceBetweenContainer>
<Button variant="primary" onClick={() => {}}>
Hello World
<IconArrow arrowDirection="left" />
</Button>
<Button variant="secondary" onClick={() => {}}>
Hello World
<IconArrow arrowDirection="right" />
</Button>
</SpaceBetweenContainer>
</CenteredContainer>

20
src/App2.tsx
View File

@ -1,23 +1,12 @@
import React from "react";
import styled from "styled-components";
import InputButtonWithIcon from "./stories/InputButtonWithIcon";
import Icon from "./stories/Icon";
import { ReactComponent as CopyIcon } from "./stories/assets/copy.svg";
import SplashIconHeader from "./stories/SplashIconHeader";
function App2() {
return (
<StyledDiv>
<InputButtonWithIcon
id="inputtest"
variant="download"
onClick={() => {}}
value="https://wanderinginn.com"
/>
<div style={{ margin: "50px" }}></div>
<Icon iconName="download" onClick={() => {}} />
<CopyIcon />
<SplashIconHeader />
</StyledDiv>
);
}
@ -25,7 +14,8 @@ function App2() {
export default App2;
const StyledDiv = styled.div`
height: 80vh;
background-color: black;
min-height: 100vh;
width: 100%;
background-color: #091132;
padding: 40px;
`;

16
src/SecretCreationPage1.stories.tsx Normal file
View File

@ -0,0 +1,16 @@
import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import SecretCreationPage1 from "./SecretCreationPage1";
export default {
title: "Pages/SecretCreationPage1",
component: SecretCreationPage1,
argTypes: {},
} as ComponentMeta<typeof SecretCreationPage1>;
const Template: ComponentStory<typeof SecretCreationPage1> = () => (
<SecretCreationPage1 />
);
export const Default = Template.bind({});

66
src/SecretCreationPage1.tsx Normal file
View File

@ -0,0 +1,66 @@
import React, { useState } from "react";
import ProgressIndicator from "./stories/ProgressIndicator";
import Header2 from "./stories/Header2";
import Button from "./stories/Button";
import IconArrow from "./stories/IconArrow";
import Label from "./stories/Label";
import FileInput from "./stories/FileInput";
import TextArea from "./stories/TextArea";
import CenteredContainer from "./stories/utilities/CenteredContainer";
import Spacer from "./stories/utilities/Spacer";
import TextAlignWrapper from "./stories/utilities/TextAlignWrapper";
const SecretCreationPage1 = () => {
const [secretInput, setSecretInput] = useState("");
const [fileInput, setFileInput] = useState<File | null>(null);
const [fileName, setFileName] = useState("");
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
setSecretInput(e.target.value);
};
const handleFile = (file: File) => {
setFileInput(file);
setFileName(file.name);
};
return (
<CenteredContainer fullscreen>
<CenteredContainer>
<ProgressIndicator currentProgress={1} />
<Header2>Create a secret</Header2>
<TextAlignWrapper align="left">
<Label htmlFor="secretInput">Enter your secret here</Label>
</TextAlignWrapper>
<TextArea
id="secretInput"
value={secretInput}
onChange={handleChange}
placeholder="Tell me your secrets"
/>
<Spacer space="2rem" />
<TextAlignWrapper align="center">
<Label htmlFor="fileInput">OR</Label>
</TextAlignWrapper>
<Spacer space="1.6rem" />
<FileInput id="fileInput" value={fileName} handleFile={handleFile} />
<Spacer space="4rem" />
<div
style={{ display: "flex", justifyContent: "flex-end", width: "100%" }}
>
<Button variant="secondary" onClick={() => {}}>
<IconArrow arrowDirection="right" />
</Button>
</div>
</CenteredContainer>
</CenteredContainer>
);
};
export default SecretCreationPage1;

16
src/SecretCreationPage2.stories.tsx Normal file
View File

@ -0,0 +1,16 @@
import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import SecretCreationPage2 from "./SecretCreationPage2";
export default {
title: "Pages/SecretCreationPage2",
component: SecretCreationPage2,
argTypes: {},
} as ComponentMeta<typeof SecretCreationPage2>;
const Template: ComponentStory<typeof SecretCreationPage2> = () => (
<SecretCreationPage2 />
);
export const Default = Template.bind({});

72
src/SecretCreationPage2.tsx Normal file
View File

@ -0,0 +1,72 @@
import React, { useState } from "react";
import ProgressIndicator from "./stories/ProgressIndicator";
import Header2 from "./stories/Header2";
import Button from "./stories/Button";
import IconArrow from "./stories/IconArrow";
import Label from "./stories/Label";
import Input from "./stories/Input";
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";
const SecretCreationPage2 = () => {
const [recipientInput, setRecipientInput] = useState("");
const [serviceSelect, setServiceSelect] = useState("");
const handleRecipientInputChange = (
e: React.ChangeEvent<HTMLInputElement>
) => {
setRecipientInput(e.target.value);
};
const handleServiceChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
setServiceSelect(e.target.value);
};
return (
<CenteredContainer fullscreen>
<CenteredContainer>
<ProgressIndicator currentProgress={2} />
<Header2>Tell Someone</Header2>
<SpaceBetweenContainer>
<Label htmlFor="recipientInput">Who gets to know the secret?</Label>
<Label htmlFor="recipientInput">Required*</Label>
</SpaceBetweenContainer>
<Input
variant="primary"
id="recipientInput"
value={recipientInput}
onChange={handleRecipientInputChange}
placeholder="Username or Email"
/>
<Spacer space="2.5rem" />
<TextAlignWrapper align="left">
<Label htmlFor="serviceSelector">
What type of account is the above username or email associated with?
</Label>
</TextAlignWrapper>
<Select
id="serviceSelector"
onChange={handleServiceChange}
value={serviceSelect}
/>
<Spacer space="3rem" />
<SpaceBetweenContainer>
<Button variant="secondary" onClick={() => {}}>
<IconArrow arrowDirection="left" />
</Button>
<Button onClick={() => {}}>Generate Secret Code</Button>
</SpaceBetweenContainer>
</CenteredContainer>
</CenteredContainer>
);
};
export default SecretCreationPage2;

16
src/SecretCreationPage3.stories.tsx Normal file
View File

@ -0,0 +1,16 @@
import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import SecretCreationPage3 from "./SecretCreationPage3";
export default {
title: "Pages/SecretCreationPage3",
component: SecretCreationPage3,
argTypes: {},
} as ComponentMeta<typeof SecretCreationPage3>;
const Template: ComponentStory<typeof SecretCreationPage3> = () => (
<SecretCreationPage3 />
);
export const Default = Template.bind({});

61
src/SecretCreationPage3.tsx Normal file
View File

@ -0,0 +1,61 @@
import React from "react";
import ProgressIndicator from "./stories/ProgressIndicator";
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 CenteredContainer from "./stories/utilities/CenteredContainer";
import SpaceBetweenContainer from "./stories/utilities/SpaceBetweenContainer";
import Spacer from "./stories/utilities/Spacer";
import TextAlignWrapper from "./stories/utilities/TextAlignWrapper";
const SecretCreationPage3 = () => {
return (
<CenteredContainer fullscreen>
<CenteredContainer>
<ProgressIndicator currentProgress={3} />
<Header2>Share the secret</Header2>
<SpaceBetweenContainer>
<Label htmlFor="shareLink">Secret message url</Label>
<Label htmlFor="shareLink">
Share this link with the intended recepient
</Label>
</SpaceBetweenContainer>
<InputButtonWithIcon
id="shareLink"
onClick={() => {}}
value="https://intended.link/for/you/MWUzZjg4YmEtZmNmNy00M..."
variant="copy"
/>
<Spacer space="2rem" />
<TextAlignWrapper align="left">
<Label htmlFor="encodedSecret">
This is what your message looks like on our server. Pretty secure
looking eh?:
</Label>
</TextAlignWrapper>
<Input
variant="disabled-light"
id="encodedSecret"
value="\4š€RÏŠ”Çm’ÄyÆFՑ¬Ð$CÑӀÃyۄ"
/>
<Spacer space="3rem" />
<SpaceBetweenContainer>
<Button variant="secondary" onClick={() => {}}>
<IconArrow arrowDirection="left" />
</Button>
<Button onClick={() => {}}>Generate Secret Code</Button>
</SpaceBetweenContainer>
</CenteredContainer>
</CenteredContainer>
);
};
export default SecretCreationPage3;

16
src/SecretRevealPage.stories.tsx Normal file
View File

@ -0,0 +1,16 @@
import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import SecretRevealPage from "./SecretRevealPage";
export default {
title: "Pages/SecretRevealPage",
component: SecretRevealPage,
argTypes: {},
} as ComponentMeta<typeof SecretRevealPage>;
const Template: ComponentStory<typeof SecretRevealPage> = () => (
<SecretRevealPage />
);
export const Default = Template.bind({});

55
src/SecretRevealPage.tsx Normal file
View File

@ -0,0 +1,55 @@
import React from "react";
import Header2 from "./stories/Header2";
import Header3 from "./stories/Header3";
import Button from "./stories/Button";
import Label from "./stories/Label";
import InputButtonWithIcon from "./stories/InputButtonWithIcon";
import TextAreaParagraph from "./stories/TextAreaParagraph";
import CenteredContainer from "./stories/utilities/CenteredContainer";
import SpaceBetweenContainer from "./stories/utilities/SpaceBetweenContainer";
import Spacer from "./stories/utilities/Spacer";
import TextAlignWrapper from "./stories/utilities/TextAlignWrapper";
const SecretRevealPage = () => {
return (
<CenteredContainer fullscreen>
<CenteredContainer>
<Header2 style={{ margin: ".4rem" }}>Someone sent you a secret</Header2>
<Header3 small>
Please verify your identity to reveal this message.
</Header3>
<Spacer space="3rem" />
<SpaceBetweenContainer>
<Label htmlFor="secretMessage">Secret message</Label>
<Label htmlFor="secretMessage">Sent 8/24/21 @ 1:27pm</Label>
</SpaceBetweenContainer>
<TextAreaParagraph id="secretMessage">
"Sup. What are you doing for lunch?"
</TextAreaParagraph>
<Spacer space="3rem" />
<TextAlignWrapper align="left">
<Label htmlFor="service">Secret File</Label>
</TextAlignWrapper>
<InputButtonWithIcon
variant="download"
id="downloadfile"
value="1780983.jpg"
onClick={() => {}}
/>
<Spacer space="3rem" />
<Button variant="secondary" wide onClick={() => {}}>
Send a secret
</Button>
</CenteredContainer>
</CenteredContainer>
);
};
export default SecretRevealPage;

14
src/SplashPage.stories.tsx Normal file
View File

@ -0,0 +1,14 @@
import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import SplashPage from "./SplashPage";
export default {
title: "Pages/SplashPage",
component: SplashPage,
argTypes: {},
} as ComponentMeta<typeof SplashPage>;
const Template: ComponentStory<typeof SplashPage> = () => <SplashPage />;
export const Default = Template.bind({});

32
src/SplashPage.tsx Normal file
View File

@ -0,0 +1,32 @@
import React from "react";
import SplashIconHeader from "./stories/SplashIconHeader";
import Header1 from "./stories/Header1";
import Header3 from "./stories/Header3";
import Button from "./stories/Button";
import CenteredContainer from "./stories/utilities/CenteredContainer";
import Spacer from "./stories/utilities/Spacer";
const SplashPage = () => {
return (
<CenteredContainer fullscreen>
<CenteredContainer wide>
<SplashIconHeader />
<Header1>Securely Share Your Secrets</Header1>
<Header3>
With Intended Link you can easily share messages and files securely
and secretly.
</Header3>
<Spacer />
<Button variant="secondary" boldFont onClick={() => {}}>
START SHARING
</Button>
</CenteredContainer>
</CenteredContainer>
);
};
export default SplashPage;

14
src/VerifyPage.stories.tsx Normal file
View File

@ -0,0 +1,14 @@
import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import VerifyPage from "./VerifyPage";
export default {
title: "Pages/VerifyPage",
component: VerifyPage,
argTypes: {},
} as ComponentMeta<typeof VerifyPage>;
const Template: ComponentStory<typeof VerifyPage> = () => <VerifyPage />;
export const Default = Template.bind({});

46
src/VerifyPage.tsx Normal file
View File

@ -0,0 +1,46 @@
import React from "react";
import Header2 from "./stories/Header2";
import Header3 from "./stories/Header3";
import Button from "./stories/Button";
import Label from "./stories/Label";
import Input from "./stories/Input";
import CenteredContainer from "./stories/utilities/CenteredContainer";
import Spacer from "./stories/utilities/Spacer";
import TextAlignWrapper from "./stories/utilities/TextAlignWrapper";
const VerifyPage = () => {
return (
<CenteredContainer fullscreen>
<CenteredContainer>
<Header2 style={{ margin: ".4rem" }}>Someone sent you a secret</Header2>
<Header3 small>
Please verify your identity to reveal this message.
</Header3>
<Spacer space="3rem" />
<TextAlignWrapper align="left">
<Label htmlFor="usernameEmail">Username / Email</Label>
</TextAlignWrapper>
<Input
variant="disabled-medium"
id="usernameEmail"
value="adam@level2d.com"
/>
<Spacer space="3rem" />
<TextAlignWrapper align="left">
<Label htmlFor="service">Service</Label>
</TextAlignWrapper>
<Input variant="disabled-medium" id="service" value="Gmail" />
<Spacer space="3rem" />
<Button variant="primary" wide onClick={() => {}}>
Verify
</Button>
</CenteredContainer>
</CenteredContainer>
);
};
export default VerifyPage;

16
src/index.tsx
View File

@ -1,14 +1,26 @@
import React from "react";
import ReactDOM from "react-dom";
import { GlobalStyle } from "../src/shared/global";
import App from "./App";
import App2 from "./App2";
import { GlobalStyle } from "../src/shared/global";
import SplashPage from "./SplashPage";
import SecretCreationPage1 from "./SecretCreationPage1";
import SecretCreationPage2 from "./SecretCreationPage2";
import SecretCreationPage3 from "./SecretCreationPage3";
import VerifyPage from "./VerifyPage";
import SecretRevealPage from "./SecretRevealPage";
ReactDOM.render(
<React.StrictMode>
<GlobalStyle />
{/* <App /> */}
<App2 />
{/* <App2 /> */}
{/* <SplashPage /> */}
{/* <SecretCreationPage1 /> */}
{/* <SecretCreationPage2 /> */}
{/* <SecretCreationPage3 /> */}
{/* <VerifyPage /> */}
<SecretRevealPage />
</React.StrictMode>,
document.getElementById("root")
);

19
src/shared/styles.js
View File

@ -3,22 +3,30 @@ export const color = {
secondary: "#32EFE7",
white: "#FFFFFF",
black: "#000000",
background: "#091132",
darkblue: "#091132",
};
export const opacity = {
light: 0.1,
medium: 0.2,
dark: 0.3,
};
export const typography = {
heading: "'IBM Plex Mono', monospace",
primary: "'Roboto', sans-serif",
family: {
heading: "'IBM Plex Mono', monospace",
primary: "'Roboto', sans-serif",
},
weight: {
regular: 400,
heavy: 500,
bold: 700,
},
size: {
small: "1.4rem",
medium: "1.6rem",
large: "1.8rem",
},
};
export const padding = {
@ -27,8 +35,9 @@ export const padding = {
export const borderRadius = {
medium: "12px",
large: "25px",
};
export const fontSize = {
medium: "1.6rem",
export const outline = {
regular: `3px solid ${color.primary}`,
};

21
src/stories/AutoResizingTextArea.stories.tsx Normal file
View File

@ -0,0 +1,21 @@
import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import { AutoResizingTextAreaProps } from "./AutoResizingTextArea";
import AutoResizingTextArea from "./AutoResizingTextArea";
export default {
title: "TextAreas/AutoResizingTextArea",
component: AutoResizingTextArea,
argTypes: {},
} as ComponentMeta<typeof AutoResizingTextArea>;
const Template: ComponentStory<typeof AutoResizingTextArea> = (
args: AutoResizingTextAreaProps
) => <AutoResizingTextArea {...args} />;
export const Default = Template.bind({});
Default.args = {
id: "testId",
};

96
src/stories/AutoResizingTextArea.tsx Normal file
View File

@ -0,0 +1,96 @@
import React, { FC, useState, useRef } from "react";
import styled from "styled-components";
import CSS from "csstype";
import {
color,
outline,
typography,
borderRadius,
padding,
} from "../shared/styles";
export interface AutoResizingTextAreaProps {
style?: CSS.Properties;
id: string;
value: string;
onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
placeholder?: string;
minHeight?: string;
maxHeight?: string;
}
const AutoResizingTextArea: FC<AutoResizingTextAreaProps> = ({
style,
id,
value,
onChange,
placeholder = "Tell me your secrets",
minHeight = "21.6rem",
maxHeight = "60rem",
}) => {
const textAreaRef = useRef<HTMLTextAreaElement>(null);
const [divHeight, setDivHeight] = useState(minHeight);
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
const newOrMaxHeight =
textAreaRef.current!.scrollHeight < parseInt(maxHeight)
? `${textAreaRef.current!.scrollHeight}px`
: maxHeight;
setDivHeight(newOrMaxHeight);
if (onChange) {
onChange(e);
}
};
return (
<StyledDiv height={divHeight}>
<StyledTextArea
style={style}
id={id}
ref={textAreaRef}
value={value}
onChange={handleChange}
placeholder={placeholder}
/>
</StyledDiv>
);
};
export default AutoResizingTextArea;
interface DivProps {
height: string;
}
const StyledDiv = styled.div<DivProps>`
height: ${(props) => props.height};
width: 100%;
`;
const StyledTextArea = styled.textarea<AutoResizingTextAreaProps>`
border-radius: ${borderRadius.medium};
border: none;
padding: ${padding.medium};
width: 100%;
height: 100%;
color: ${color.darkblue};
font-size: ${typography.size.medium};
font-family: ${typography.family.primary};
font-weight: ${typography.weight.regular};
appearance: none;
&::placeholder {
color: ${color.darkblue};
}
&:focus,
&:focus-visible {
outline: ${outline.regular};
}
`;

40
src/stories/Button.stories.tsx
View File

@ -4,6 +4,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
import { ButtonProps } from "./Button";
import Button from "./Button";
import IconArrow from "./IconArrow";
export default {
title: "Button",
@ -15,20 +16,39 @@ const Template: ComponentStory<typeof Button> = (args: ButtonProps) => (
<Button {...args} />
);
export const Primary = Template.bind({});
Primary.args = {
export const PrimaryColor = Template.bind({});
PrimaryColor.args = {
children: "Primary",
variant: "primary",
};
export const Secondary = Template.bind({});
Secondary.args = {
export const SecondaryColor = Template.bind({});
SecondaryColor.args = {
children: "Secondary",
variant: "secondary",
};
/*
export const Narrow = Template.bind({});
Narrow.args = {
label: ">",
export const WithLeftArrowIcon = Template.bind({});
WithLeftArrowIcon.args = {
children: <IconArrow arrowDirection="left" />,
variant: "secondary",
};
export const WithRightArrowIcon = Template.bind({});
WithRightArrowIcon.args = {
children: <IconArrow arrowDirection="right" />,
variant: "secondary",
};
export const WithBoldFont = Template.bind({});
WithBoldFont.args = {
children: "START SHARING",
variant: "secondary",
};
export const WithWide = Template.bind({});
WithWide.args = {
children: "Verify",
variant: "primary",
narrow: true,
}; */
wide: true,
};

41
src/stories/Button.tsx
View File

@ -1,14 +1,16 @@
import React, { FC, ReactNode } from "react";
import styled, { css } from "styled-components";
import CSS from "csstype";
import { darken } from "polished";
import { darken, lighten } from "polished";
import { color, typography } from "../shared/styles";
import { borderRadius, color, typography } from "../shared/styles";
export interface ButtonProps {
children: ReactNode | null;
style?: CSS.Properties;
variant?: "primary" | "secondary";
boldFont?: boolean;
wide?: boolean;
onClick: () => void;
}
@ -16,10 +18,18 @@ const Button: FC<ButtonProps> = ({
children,
style,
variant = "primary",
boldFont = false,
wide = false,
onClick,
}) => {
return (
<StyledButton variant={variant} style={style} onClick={onClick}>
<StyledButton
variant={variant}
boldFont={boldFont}
wide={wide}
style={style}
onClick={onClick}
>
{children}
</StyledButton>
);
@ -29,23 +39,30 @@ export default Button;
const StyledButton = styled.button<ButtonProps>`
border: 0;
border-radius: 25px;
border-radius: ${borderRadius.large};
cursor: pointer;
padding: 1rem 2rem;
min-width: 10rem;
padding: 1rem 3rem;
height: 5rem;
min-width: ${(props) => (props.wide ? "18rem" : "8rem")};
font-size: 1.4rem;
font-family: ${typography.primary};
font-weight: ${typography.weight.heavy};
font-size: ${typography.size.small};
font-family: ${typography.family.primary};
font-weight: ${(props) =>
props.boldFont ? typography.weight.bold : typography.weight.heavy};
transition: all 150ms ease-out;
transform: translate3d(0, 0, 0);
&:hover {
&:hover,
&:focus {
transform: translateY(-2px);
}
&:active {
transform: translateY(0);
}
${(props) =>
props.variant === "primary" &&
css`
@ -60,11 +77,11 @@ const StyledButton = styled.button<ButtonProps>`
${(props) =>
props.variant === "secondary" &&
css`
color: ${color.black};
color: ${color.darkblue};
background-color: ${color.secondary};
&:hover {
background-color: ${darken(0.1, color.secondary)};
background-color: ${lighten(0.1, color.secondary)};
}
`}
`;

19
src/stories/FileInput.stories.tsx Normal file
View File

@ -0,0 +1,19 @@
import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import { FileInputProps } from "./FileInput";
import FileInput from "./FileInput";
export default {
title: "FileInput",
component: FileInput,
argTypes: {},
} as ComponentMeta<typeof FileInput>;
const Template: ComponentStory<typeof FileInput> = (args: FileInputProps) => (
<FileInput {...args} />
);
export const Primary = Template.bind({});
Primary.args = { id: "fileinput", value: "Input file" };

79
src/stories/FileInput.tsx
View File

@ -1,56 +1,49 @@
import React, { FC } from "react";
import styled, { css } from "styled-components";
import React, { ChangeEvent, FC, useRef } from "react";
import CSS from "csstype";
import { rgba } from "polished";
import {
color,
opacity,
typography,
borderRadius,
fontSize,
padding,
} from "../shared/styles";
import InputButtonWithIcon from "./InputButtonWithIcon";
export interface FileInputProps {
style?: CSS.Properties;
variant?: "primary" | "disabled-light" | "disabled-medium";
id: string;
/* onChange: (e: React.ChangeEvent<HTMLInputElement>) => void; */
placeholder?: string;
handleFile: (arg0: File) => void;
value: string | undefined;
}
const FileInput: FC<FileInputProps> = ({
style,
variant = "primary",
id,
placeholder = "",
}) => {
const FileInput: FC<FileInputProps> = ({ style, id, handleFile, value }) => {
const hiddenFileInput = useRef<HTMLInputElement>(null);
const handleClick = () => {
if (hiddenFileInput.current !== null) {
hiddenFileInput.current.click();
}
};
const handleChange = (event: ChangeEvent) => {
const target = event.target as HTMLInputElement;
const file: File = (target.files as FileList)[0];
handleFile(file);
};
const displayValue = value ? value : "Upload a secret file";
return (
<StyledInput
style={style}
variant={variant}
id={id}
placeholder={placeholder}
type="file"
/>
<>
<InputButtonWithIcon
variant="fileinput"
id={id}
value={displayValue}
onClick={handleClick}
/>
<input
type="file"
ref={hiddenFileInput}
onChange={handleChange}
style={{ display: "none" }}
/>
</>
);
};
export default FileInput;
const StyledInput = styled.input<FileInputProps>`
border-radius: ${borderRadius.medium};
border: 5px dotted black;
padding: ${padding.medium};
width: 100%;
font-size: ${fontSize.medium};
font-family: ${typography.primary};
font-weight: ${typography.weight.regular};
appearance: none;
&:focus-visible {
outline: none;
}
`;

19
src/stories/Header1.stories.tsx Normal file
View File

@ -0,0 +1,19 @@
import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import { Header1Props } from "./Header1";
import Header1 from "./Header1";
export default {
title: "Headers/Header1",
component: Header1,
argTypes: {},
} as ComponentMeta<typeof Header1>;
const Template: ComponentStory<typeof Header1> = (args: Header1Props) => (
<Header1 {...args} />
);
export const Default = Template.bind({});
Default.args = { children: "Securely Share Your Secrets" };

7
src/stories/Header1.tsx
View File

@ -16,9 +16,10 @@ const Header1: FC<Header1Props> = ({ children, style }) => {
export default Header1;
const StyledHeader1 = styled.h2<Header1Props>`
font-size: 6.4rem;
font-family: ${typography.heading};
font-weight: ${typography.weight.regular};
margin: 0.7rem auto;
color: ${color.white};
font-size: 6.4rem;
font-family: ${typography.family.heading};
font-weight: ${typography.weight.regular};
`;

19
src/stories/Header2.stories.tsx Normal file
View File

@ -0,0 +1,19 @@
import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import { Header2Props } from "./Header2";
import Header2 from "./Header2";
export default {
title: "Headers/Header2",
component: Header2,
argTypes: {},
} as ComponentMeta<typeof Header2>;
const Template: ComponentStory<typeof Header2> = (args: Header2Props) => (
<Header2 {...args} />
);
export const Default = Template.bind({});
Default.args = { children: "Create a secret" };

2
src/stories/Header2.tsx
View File

@ -17,7 +17,7 @@ export default Header2;
const StyledHeader2 = styled.h2<Header2Props>`
font-size: 3.2rem;
font-family: ${typography.heading};
font-family: ${typography.family.heading};
font-weight: ${typography.weight.regular};
color: ${color.white};

28
src/stories/Header3.stories.tsx Normal file
View File

@ -0,0 +1,28 @@
import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import { Header3Props } from "./Header3";
import Header3 from "./Header3";
export default {
title: "Headers/Header3",
component: Header3,
argTypes: {},
} as ComponentMeta<typeof Header3>;
const Template: ComponentStory<typeof Header3> = (args: Header3Props) => (
<Header3 {...args} />
);
export const Default = Template.bind({});
Default.args = {
children:
"With Intended Link you can easily share messages and files securely and secretly.",
};
export const WithSmall = Template.bind({});
WithSmall.args = {
children: "Please verify your identity to reveal this message.",
small: true,
};

30
src/stories/Header3.tsx Normal file
View File

@ -0,0 +1,30 @@
import React, { FC, ReactNode } from "react";
import styled from "styled-components";
import CSS from "csstype";
import { color, typography } from "../shared/styles";
export interface Header3Props {
children: ReactNode | null;
style?: CSS.Properties;
small?: boolean;
}
const Header3: FC<Header3Props> = ({ children, style, small }) => {
return (
<StyledHeader3 style={style} small={small}>
{children}
</StyledHeader3>
);
};
export default Header3;
const StyledHeader3 = styled.h3<Header3Props>`
font-size: ${(props) =>
props.small ? typography.size.medium : typography.size.large};
font-family: ${typography.family.primary};
font-weight: ${typography.weight.regular};
color: ${color.white};
`;

75
src/stories/Icon.tsx
View File

@ -1,9 +1,8 @@
import React, { FC } from "react";
import styled, { css } from "styled-components";
import CSS from "csstype";
import { ReactSVG } from "react-svg";
type IconNames = "copy" | "download";
type IconNames = "copy" | "download" | "fileinput";
export interface IconProps {
style?: CSS.Properties;
@ -16,17 +15,23 @@ const Icon: FC<IconProps> = ({ style, iconName, onClick }) => {
if (iconName === "download") {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="2rem"
height="2rem"
viewBox="0 0 16 14"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
height="3rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
fill-rule="evenodd"
clip-rule="evenodd"
d="M15.5 6H14.5C14.2 6 14 6.2 14 6.5V12H2V6.5C2 6.2 1.8 6 1.5 6H0.5C0.2 6 0 6.2 0 6.5V13C0 13.6 0.4 14 1 14H15C15.6 14 16 13.6 16 13V6.5C16 6.2 15.8 6 15.5 6Z"
fill="white"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M7.70015 9.8C7.90015 10 8.20015 10 8.30015 9.8L10.9001 6.5C11.1001 6.3 11.0001 6 10.7001 6H9.00015V0.5C9.00015 0.2 8.80015 0 8.50015 0H7.50015C7.20015 0 7.00015 0.2 7.00015 0.5V6H5.30015C5.00015 6 4.90015 6.3 5.10015 6.5L7.70015 9.8Z"
fill="white"
/>
</svg>
);
@ -35,21 +40,45 @@ const Icon: FC<IconProps> = ({ style, iconName, onClick }) => {
if (iconName === "copy") {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="2rem"
height="2rem"
viewBox="0 0 14 16"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
height="3rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"
fill-rule="evenodd"
clip-rule="evenodd"
d="M13.6 3.6L10.3 0.3C10.2 0.2 9.8 0 9.5 0H1C0.4 0 0 0.4 0 1V15C0 15.6 0.4 16 1 16H13C13.6 16 14 15.6 14 15V4.5C14 4.2 13.8 3.8 13.6 3.6ZM12 14H2V2H8V5.5C8 5.8 8.2 6 8.5 6H12V14Z"
fill="#091132"
/>
</svg>
);
}
if (iconName === "fileinput") {
return (
<svg
width="2rem"
height="2rem"
viewBox="0 0 17 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0)">
<path
d="M5.3 15.6C4 15.6 2.6 15 1.6 14C0.6 13 0 11.6 0 10.2C0 8.79998 0.6 7.39998 1.6 6.39998L6.9 1.09998C8.4 -0.400024 10.8 -0.400024 12.3 1.09998C13.8 2.59998 13.8 4.99998 12.3 6.49998L7 11.9C6.1 12.8 4.6 12.8 3.7 11.9C2.8 11 2.8 9.49998 3.7 8.59998L9 3.19998C9.3 2.89998 9.9 2.89998 10.2 3.19998C10.5 3.49998 10.5 4.09998 10.2 4.39998L4.9 9.79998C4.6 10.1 4.6 10.5 4.9 10.7C5.2 11 5.6 11 5.8 10.7L11.1 5.39998C11.9 4.59998 11.9 3.19998 11.1 2.39998C10.3 1.59998 8.9 1.59998 8.1 2.39998L2.8 7.59998C2.1 8.29998 1.7 9.19998 1.7 10.2C1.7 11.2 2.1 12.1 2.8 12.8C4.2 14.2 6.5 14.2 8 12.8L15.4 5.39998C15.7 5.09998 16.3 5.09998 16.6 5.39998C16.9 5.69998 16.9 6.29998 16.6 6.59998L8.8 14.4C7.8 15.2 6.6 15.6 5.3 15.6Z"
fill="#091132"
/>
</g>
<defs>
<clipPath id="clip0">
<rect width="16.8" height="15.6" fill="white" />
</clipPath>
</defs>
</svg>
);
}
};
return (
@ -63,8 +92,8 @@ export default Icon;
const StyledSpan = styled.span<IconProps>`
position: absolute;
top: calc(50% - 1.5rem);
right: 2rem;
top: calc(50% - 1rem);
right: 1.5rem;
z-index: 100;
width: 3rem;
@ -73,11 +102,7 @@ const StyledSpan = styled.span<IconProps>`
cursor: pointer;
${(props) =>
props.iconName === "copy" &&
css`
color: black;
`}
color: black;
${(props) =>
props.iconName === "download" &&

68
src/stories/IconArrow.tsx Normal file
View File

@ -0,0 +1,68 @@
import React, { FC } from "react";
import styled, { css } from "styled-components";
interface IconArrowProps {
arrowDirection: "left" | "right";
}
/* const StyledSpan = styled.span<IconArrowProps>`
${(props) =>
props.arrowDirection === "left" &&
css`
transform: scale(-1, 1);
`}
`;
*/
const IconArrow: FC<IconArrowProps> = ({ arrowDirection }) => {
if (arrowDirection === "left") {
return (
<svg
style={{ transform: "scale(-1,1)" }}
width="10"
height="8"
viewBox="0 0 10 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0)">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M4 4.99996H0.5C0.3 4.99996 0 4.79996 0 4.49996V3.49996C0 3.19996 0.3 2.99996 0.5 2.99996H4V0.699961C4 -3.9041e-05 4.4 -0.200039 4.9 0.199961L9.6 3.39996C10.1 3.69996 10.1 4.29996 9.6 4.59996L4.9 7.79996C4.5 8.19996 4 7.99996 4 7.29996V4.99996Z"
fill="#091132"
/>
</g>
<defs>
<clipPath id="clip0">
<rect width="10" height="8" fill="white" />
</clipPath>
</defs>
</svg>
);
}
return (
<svg
width="10"
height="8"
viewBox="0 0 10 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0)">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M4 4.99996H0.5C0.3 4.99996 0 4.79996 0 4.49996V3.49996C0 3.19996 0.3 2.99996 0.5 2.99996H4V0.699961C4 -3.9041e-05 4.4 -0.200039 4.9 0.199961L9.6 3.39996C10.1 3.69996 10.1 4.29996 9.6 4.59996L4.9 7.79996C4.5 8.19996 4 7.99996 4 7.29996V4.99996Z"
fill="#091132"
/>
</g>
<defs>
<clipPath id="clip0">
<rect width="10" height="8" fill="white" />
</clipPath>
</defs>
</svg>
);
};
export default IconArrow;

39
src/stories/Input.stories.tsx Normal file
View File

@ -0,0 +1,39 @@
import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import { InputProps } from "./Input";
import Input from "./Input";
export default {
title: "Input",
component: Input,
argTypes: {},
} as ComponentMeta<typeof Input>;
const Template: ComponentStory<typeof Input> = (args: InputProps) => (
<Input {...args} />
);
const defaultArgs = {
id: "inputId",
placeholder: "This is a placeholder",
};
export const Primary = Template.bind({});
Primary.args = {
...defaultArgs,
variant: "primary",
};
export const DisabledLight = Template.bind({});
DisabledLight.args = {
...defaultArgs,
variant: "disabled-light",
};
export const DisabledMedium = Template.bind({});
DisabledMedium.args = {
...defaultArgs,
variant: "disabled-medium",
};

24
src/stories/Input.tsx
View File

@ -8,24 +8,23 @@ import {
opacity,
typography,
borderRadius,
fontSize,
padding,
outline,
} from "../shared/styles";
export interface InputProps {
style?: CSS.Properties;
variant?: "primary" | "disabled-light" | "disabled-medium";
name: string;
id: string;
value: string;
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
placeholder?: string;
// disabled = false,
}
const Input: FC<InputProps> = ({
style,
variant = "primary",
name,
id,
value,
onChange,
placeholder = "",
@ -39,7 +38,7 @@ const Input: FC<InputProps> = ({
<StyledInput
style={style}
variant={variant}
name={name}
id={id}
value={value}
onChange={onChange}
placeholder={placeholder}
@ -56,14 +55,21 @@ const StyledInput = styled.input<InputProps>`
border: none;
padding: ${padding.medium};
width: 100%;
height: 6rem;
font-size: ${fontSize.medium};
font-family: ${typography.primary};
color: ${color.darkblue};
font-size: ${typography.size.medium};
font-family: ${typography.family.primary};
font-weight: ${typography.weight.regular};
&::placeholder {
color: ${color.darkblue};
}
appearance: none;
&:focus,
&:focus-visible {
outline: none;
outline: ${outline.regular};
}
${(props) =>

41
src/stories/InputButtonWithIcon.stories.tsx Normal file
View File

@ -0,0 +1,41 @@
import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import { InputButtonWithIconProps } from "./InputButtonWithIcon";
import InputButtonWithIcon from "./InputButtonWithIcon";
export default {
title: "InputButtonWithIcon",
component: InputButtonWithIcon,
argTypes: {},
} as ComponentMeta<typeof InputButtonWithIcon>;
const Template: ComponentStory<typeof InputButtonWithIcon> = (
args: InputButtonWithIconProps
) => <InputButtonWithIcon {...args} />;
const defaultArgs = {
id: "testId",
};
export const Copy = Template.bind({});
Copy.args = {
...defaultArgs,
variant: "copy",
value: "https://intended.link/for/you/MWUzZjg4YmEtZmNmNy00MDM1LWE2Ym",
};
export const Download = Template.bind({});
Download.args = {
...defaultArgs,
variant: "download",
value: "1780983.jpg",
};
export const Fileinput = Template.bind({});
Fileinput.args = {
...defaultArgs,
variant: "fileinput",
value: "Upload a secret file",
};

32
src/stories/InputButtonWithIcon.tsx
View File

@ -1,4 +1,4 @@
import React, { FC, ReactNode } from "react";
import React, { FC } from "react";
import styled, { css } from "styled-components";
import CSS from "csstype";
import { rgba } from "polished";
@ -9,14 +9,14 @@ import {
padding,
borderRadius,
typography,
fontSize,
opacity,
outline,
} from "../shared/styles";
export interface InputButtonWithIconProps {
style?: CSS.Properties;
id: string;
variant: "copy" | "download";
variant: "copy" | "download" | "fileinput";
value: string;
onClick: () => void;
}
@ -36,6 +36,7 @@ const InputButtonWithIcon: FC<InputButtonWithIconProps> = ({
variant={variant}
value={value}
onClick={onClick}
type="button"
/>
<Icon iconName={variant} onClick={onClick} />
@ -48,6 +49,7 @@ export default InputButtonWithIcon;
const StyledDiv = styled.div`
position: relative;
width: 100%;
height: 6rem;
`;
const StyledInput = styled.input<InputButtonWithIconProps>`
@ -58,24 +60,38 @@ const StyledInput = styled.input<InputButtonWithIconProps>`
padding: ${padding.medium};
padding-right: 6rem;
width: 100%;
height: 6rem;
overflow: hidden;
font-size: ${fontSize.medium};
font-family: ${typography.primary};
font-weight: ${typography.weight.heavy};
font-size: ${typography.size.medium};
font-family: ${typography.family.primary};
font-weight: ${typography.weight.regular};
text-align: left;
&:focus,
&:focus-visible {
outline: ${outline.regular};
}
${(props) =>
props.variant === "copy" &&
css`
background-color: ${color.white};
color: ${color.black};
color: ${color.darkblue};
`}
${(props) =>
props.variant === "download" &&
css`
background-color: ${rgba(color.white, opacity.medium)};
background-color: ${rgba(color.white, opacity.dark)};
color: ${color.white};
`}
${(props) =>
props.variant === "fileinput" &&
css`
background-color: ${color.white};
color: ${color.darkblue};
border: 2px dashed ${rgba(color.darkblue, opacity.medium)};
`}
`;

22
src/stories/Label.stories.tsx Normal file
View File

@ -0,0 +1,22 @@
import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import { LabelProps } from "./Label";
import Label from "./Label";
export default {
title: "Label",
component: Label,
argTypes: {},
} as ComponentMeta<typeof Label>;
const Template: ComponentStory<typeof Label> = (args: LabelProps) => (
<Label {...args} />
);
export const Default = Template.bind({});
Default.args = {
children: "Read the wandering inn",
htmlFor: "thewanderinginn",
};

7
src/stories/Label.tsx
View File

@ -2,7 +2,7 @@ import React, { FC, ReactNode } from "react";
import styled from "styled-components";
import CSS from "csstype";
import { typography } from "../shared/styles";
import { typography, color } from "../shared/styles";
export interface LabelProps {
children: ReactNode | null;
@ -21,8 +21,9 @@ const Label: FC<LabelProps> = ({ children, style, htmlFor }) => {
export default Label;
const StyledLabel = styled.label<LabelProps>`
font-size: 1.4rem;
font-family: ${typography.primary};
color: ${color.white};
font-size: ${typography.size.small};
font-family: ${typography.family.primary};
font-weight: ${typography.weight.heavy};
margin-bottom: 0.7rem;

25
src/stories/ProgressIndicator.stories.tsx Normal file
View File

@ -0,0 +1,25 @@
import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import { ProgressIndicatorProps } from "./ProgressIndicator";
import ProgressIndicator from "./ProgressIndicator";
export default {
title: "SVGs/ProgressIndicator",
component: ProgressIndicator,
argTypes: {},
} as ComponentMeta<typeof ProgressIndicator>;
const Template: ComponentStory<typeof ProgressIndicator> = (
args: ProgressIndicatorProps
) => <ProgressIndicator {...args} />;
export const StepOneOfThree = Template.bind({});
StepOneOfThree.args = { currentProgress: 1 };
export const StepTwoOfThree = Template.bind({});
StepTwoOfThree.args = { currentProgress: 2 };
export const StepThreeOfThree = Template.bind({});
StepThreeOfThree.args = { currentProgress: 3 };

9
src/stories/ProgressIndicator.tsx
View File

@ -1,12 +1,12 @@
import React from "react";
interface ProgressIndicatorProps {
current: 1 | 2 | 3;
export interface ProgressIndicatorProps {
currentProgress: 1 | 2 | 3;
size?: string;
}
const ProgressIndicator = ({
current,
currentProgress,
size = "148",
}: ProgressIndicatorProps) => {
const color = "#6B6B6B";
@ -15,7 +15,8 @@ const ProgressIndicator = ({
const cx2 = 72;
const cx3 = 132;
const currentCircleCX = current === 1 ? cx1 : current === 2 ? cx2 : cx3;
const currentCircleCX =
currentProgress === 1 ? cx1 : currentProgress === 2 ? cx2 : cx3;
return (
<div>

19
src/stories/Select.stories.tsx Normal file
View File

@ -0,0 +1,19 @@
import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import { SelectProps } from "./Select";
import Select from "./Select";
export default {
title: "Select",
component: Select,
argTypes: {},
} as ComponentMeta<typeof Select>;
const Template: ComponentStory<typeof Select> = (args: SelectProps) => (
<Select {...args} />
);
export const Default = Template.bind({});
Default.args = { id: "testId" };

52
src/stories/Select.tsx
View File

@ -1,19 +1,25 @@
import React, { FC } from "react";
import styled, { css } from "styled-components";
import styled from "styled-components";
import CSS from "csstype";
import { typography, borderRadius, fontSize, padding } from "../shared/styles";
import {
color,
typography,
borderRadius,
padding,
outline,
} from "../shared/styles";
export interface SelectProps {
style?: CSS.Properties;
name: string;
value: string;
id: string;
value?: string;
onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
}
const Select: FC<SelectProps> = ({ style, name, value, onChange }) => {
const Select: FC<SelectProps> = ({ style, id, value = "github", onChange }) => {
return (
<StyledSelect style={style} name={name} value={value} onChange={onChange}>
<StyledSelect style={style} id={id} value={value} onChange={onChange}>
<option value="github">Github</option>
<option value="facebook">Facebook</option>
<option value="Google">Google</option>
@ -24,12 +30,16 @@ const Select: FC<SelectProps> = ({ style, name, value, onChange }) => {
export default Select;
const StyledSelect = styled.select<SelectProps>`
font-size: ${fontSize.medium};
font-family: ${typography.primary};
color: ${color.darkblue};
font-size: ${typography.size.medium};
font-family: ${typography.family.primary};
font-weight: ${typography.weight.regular};
padding: ${padding.medium};
width: 100%;
height: 6rem;
cursor: pointer;
border: none;
box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
@ -41,32 +51,12 @@ const StyledSelect = styled.select<SelectProps>`
background-repeat: no-repeat, repeat;
/* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
/* background-position: right 1.2rem top 50%, 0 0 */
background-position: right 1.4rem top 50%;
background-position: right 1.9rem top 50%;
/* icon size, then gradient */
/* background-size: 3rem auto, 100%; */
background-size: 2rem auto;
&:focus,
&:focus-visible {
outline: none;
outline: ${outline.regular};
}
`;
/*
const StyledSelect = styled.select<SelectProps>`
border-radius: ${borderRadius.medium};
border: none;
padding: ${padding.medium};
width: 100%;
margin: 0.7rem auto;
font-size: ${fontSize.medium};
font-family: ${typography.primary};
font-weight: ${typography.weight.regular};
cursor: pointer;
&:focus-visible {
outline: none;
}
`;
*/

16
src/stories/SplashIconHeader.stories.tsx Normal file
View File

@ -0,0 +1,16 @@
import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import SplashIconHeader from "./SplashIconHeader";
export default {
title: "SVGs/SplashIconHeader",
component: SplashIconHeader,
argTypes: {},
} as ComponentMeta<typeof SplashIconHeader>;
const Template: ComponentStory<typeof SplashIconHeader> = () => (
<SplashIconHeader />
);
export const Default = Template.bind({});

92
src/stories/SplashIconHeader.tsx Normal file
View File

@ -0,0 +1,92 @@
import React from "react";
import { rgba } from "polished";
import { color, opacity } from "../shared/styles";
const SplashIconHeader = () => {
const bgCircleColor = rgba(color.white, opacity.light);
const dotColor = "#ffffff";
const dotR = "1.5";
const cy = "60";
const r = "60";
return (
<svg width="44rem" viewBox="0 0 440 120">
<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
d="M50.393 31.4764V9.55254C50.393 8.78694 50.045 8.09095 49.4186 7.53415C48.7922 6.97735 48.0266 6.76855 47.261 6.83815C46.217 6.97735 45.0338 7.04695 43.9898 7.04695C34.0371 7.04695 27.5643 0.852594 27.4947 0.782995C26.4507 -0.260998 24.7803 -0.260998 23.7363 0.782995C23.7363 0.852594 17.3332 7.04695 7.24126 7.04695C6.19727 7.04695 5.01407 6.97735 3.97008 6.83815C3.13489 6.76855 2.43889 6.97735 1.8125 7.53415C1.1861 8.09095 0.838102 8.71734 0.838102 9.55254V31.4764C0.768502 33.286 0.559705 49.5723 24.6411 59.3162C24.9891 59.4554 25.3371 59.525 25.6851 59.525C26.0331 59.525 26.3811 59.4554 26.7291 59.3162C50.741 49.5027 50.5322 33.286 50.393 31.4764ZM37.6563 40.2459C37.6563 43.1691 34.9419 45.5355 31.5315 45.5355H19.6996C16.2892 45.5355 13.5748 43.1691 13.5748 40.2459V25.4908C13.5748 22.9852 15.5236 20.9669 18.238 20.3405V17.1389C18.238 13.1021 21.5788 9.76133 25.6155 9.76133C29.6523 9.76133 32.9931 13.1021 32.9931 17.1389V20.3405C35.6379 20.8973 37.6563 22.9852 37.6563 25.4908V40.2459Z"
fill="white"
/>
<path
d="M30.7659 17.1389C30.7659 14.2853 28.4691 11.9885 25.6155 11.9885C22.762 11.9885 20.4652 14.2853 20.4652 17.1389V20.2013H30.8355L30.7659 17.1389Z"
fill="white"
/>
<path
d="M25.6155 37.81C28.2294 37.81 30.3483 35.6911 30.3483 33.0773C30.3483 30.4634 28.2294 28.3445 25.6155 28.3445C23.0017 28.3445 20.8828 30.4634 20.8828 33.0773C20.8828 35.6911 23.0017 37.81 25.6155 37.81Z"
fill="#32EFE7"
/>
<path
d="M25.6155 40.8028C21.37 40.8028 17.542 38.506 15.5236 34.8172C14.9668 33.8428 14.9668 32.3812 15.5236 31.4068C17.542 27.718 21.4396 25.4213 25.6155 25.4213C29.8611 25.4213 33.6891 27.718 35.7075 31.4068C36.2643 32.3812 36.2643 33.8428 35.7075 34.8172C33.6891 38.506 29.8611 40.8028 25.6155 40.8028ZM25.6155 27.0917C21.9964 27.0917 18.7252 29.0404 16.9852 32.242C16.7068 32.7292 16.7068 33.634 16.9852 34.1212C18.7252 37.2532 21.9964 39.2716 25.6155 39.2716C29.2347 39.2716 32.5059 37.3228 34.2459 34.1212C34.5243 33.634 34.5243 32.7292 34.2459 32.242C32.5059 29.0404 29.2347 27.0917 25.6155 27.0917Z"
fill="#32EFE7"
/>
</svg>
<circle r={dotR} cx="133" cy={cy} fill={dotColor} />
<circle r={dotR} cx="140" cy={cy} fill={dotColor} />
<circle r={dotR} cx="147" cy={cy} fill={dotColor} />
<circle r={r} cx="220" cy={cy} fill={bgCircleColor} />
<svg
width="51"
height="50"
viewBox="0 0 51 50"
fill="none"
x="195"
y="37"
>
<path
d="M1.08552 20.8377L48.6193 0.141884C50.0643 -0.485262 51.5094 1.0826 50.8249 2.57207L31.8114 43.8853C31.355 44.9044 30.1382 45.218 29.2255 44.5909L24.206 40.9064L16.5245 48.8241C15.764 49.608 14.8513 50 13.8626 50C13.4063 50 13.026 49.9216 12.5697 49.7648C11.2007 49.2945 10.212 48.0402 10.0599 46.4723L8.2346 29.3826L0.70525 23.9734C-0.359509 23.1895 -0.207401 21.3865 1.08552 20.8377ZM21.3159 38.8682L17.9695 36.438L15.9161 44.3557L21.3159 38.8682ZM13.026 41.7687L14.8513 34.7133C14.9274 34.3997 15.0795 34.0862 15.3076 33.9294L29.5297 19.6618C29.834 19.3482 29.4537 18.8779 29.0734 19.1131L12.7978 31.4992C12.2655 31.8912 12.0373 32.5183 12.1134 33.1454L13.026 41.7687Z"
fill="white"
/>
</svg>
<circle r={dotR} cx="293" cy={cy} fill={dotColor} />
<circle r={dotR} cx="300" cy={cy} fill={dotColor} />
<circle r={dotR} cx="307" cy={cy} fill={dotColor} />
<circle r={r} cx="380" cy={cy} fill={bgCircleColor} />
<svg
width="53"
height="60"
viewBox="0 0 53 60"
fill="none"
x="354"
y="31"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M39.9435 48.8551C39.1616 49.6262 37.8823 49.6262 37.0294 48.8551L34.3286 46.1916H30.3485C28.0031 46.1916 26.013 44.2991 26.013 41.9159V33.9953C26.013 31.6822 27.932 29.7196 30.3485 29.7196H45.7715V6.02804C45.7715 2.73365 43.0707 0 39.6592 0H13.0065C9.66603 0 6.89415 2.66355 6.89415 6.02804V8.90187H22.3172C24.6626 8.90187 26.6527 10.7944 26.6527 13.1776V22.0794C26.6527 24.3925 24.7337 26.3551 22.3172 26.3551H18.337L15.6362 28.8785C14.8544 29.6495 13.5751 29.6495 12.7222 28.8785L10.0214 26.215H6.89415V53.972C6.89415 57.2664 9.59495 60 13.0065 60H39.7302C43.0707 60 45.8426 57.3364 45.8426 53.972V46.1916H42.6443L39.9435 48.8551Z"
fill="white"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M11.585 24.5327L13.6462 26.5654C13.9305 26.8457 14.4991 26.8457 14.7833 26.5654L16.8445 24.5327C17.1999 24.1822 17.7684 23.9719 18.266 23.9719H22.3172C23.4543 23.9719 24.3783 23.0607 24.3783 21.9392V13.1074C24.3783 11.9859 23.4543 11.0747 22.3172 11.0747H2.06114C0.923959 11.0747 0 11.9859 0 13.1074V22.0093C0 23.1308 0.923959 24.042 2.06114 24.042H10.1636C10.6611 23.9719 11.1586 24.1822 11.585 24.5327ZM15.1387 16.8925C15.423 16.6121 15.9916 16.6121 16.347 16.8925C16.418 16.9626 16.418 16.9626 16.418 17.0327C16.4891 17.1027 16.4891 17.1027 16.4891 17.1728C16.4891 17.2429 16.5602 17.2429 16.5602 17.313C16.5602 17.3831 16.5602 17.3831 16.5602 17.4532C16.5602 17.6635 16.4891 17.8738 16.2759 18.014C16.1337 18.1541 15.9205 18.2943 15.7073 18.2943C15.5652 18.2943 15.4941 18.2943 15.3519 18.2242C15.2098 18.1541 15.1387 18.1541 15.0676 18.014C14.9255 17.8738 14.7833 17.6635 14.7833 17.4532C14.8544 17.2429 14.9255 17.0327 15.1387 16.8925ZM11.3007 17.313C11.3007 17.2429 11.3007 17.1728 11.3718 17.1728C11.3718 17.1027 11.4429 17.1027 11.4429 17.0327C11.4429 16.9626 11.514 16.9626 11.514 16.8925C11.514 16.8224 11.585 16.8224 11.6561 16.8224C11.7272 16.8224 11.7272 16.7523 11.7982 16.7523C11.8693 16.7523 11.8693 16.7523 11.9404 16.6822C12.2247 16.6121 12.509 16.6822 12.7222 16.8925C12.8644 17.0327 13.0065 17.2429 13.0065 17.5233C13.0065 17.7336 12.9354 17.9439 12.7222 18.0841C12.5801 18.2242 12.3668 18.3644 12.1536 18.3644C12.0115 18.3644 11.9404 18.3644 11.7982 18.2943C11.6561 18.2242 11.585 18.2242 11.514 18.0841C11.3718 17.9439 11.3007 17.7336 11.3007 17.5233C11.3007 17.4532 11.3007 17.3831 11.3007 17.313ZM9.38174 17.8037C9.31067 17.8738 9.31067 18.014 9.16852 18.0841C9.02637 18.2242 8.81315 18.3644 8.59993 18.3644C8.38671 18.3644 8.17349 18.2943 7.96026 18.0841C7.88919 18.014 7.81812 17.9439 7.74704 17.8037C7.67597 17.7336 7.67597 17.5934 7.67597 17.4532C7.67597 17.2429 7.74704 17.0327 7.88919 16.8224C8.17349 16.542 8.74208 16.542 9.09745 16.8224C9.23959 16.9626 9.38174 17.1728 9.38174 17.4532C9.45281 17.5934 9.45281 17.7336 9.38174 17.8037Z"
fill="#32EFE7"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M50.6756 31.9626H30.4196C29.2824 31.9626 28.3584 32.8739 28.3584 33.9954V41.986C28.3584 43.1075 29.2824 44.0187 30.4196 44.0187H34.4708C35.0394 44.0187 35.5369 44.229 35.8923 44.5795L37.9534 46.6122C38.2377 46.8926 38.8063 46.8926 39.0906 46.6122L41.1517 44.5795C41.5071 44.229 42.0757 44.0187 42.5732 44.0187H50.6756C51.8128 44.0187 52.7368 43.1075 52.7368 41.986V33.9954C52.6657 32.8739 51.7417 31.9626 50.6756 31.9626ZM37.7402 38.2711C37.6691 38.3412 37.6691 38.4813 37.527 38.5514C37.3848 38.6916 37.1716 38.8318 36.9584 38.8318C36.7452 38.8318 36.5319 38.7617 36.3187 38.5514C36.2476 38.4813 36.1766 38.4112 36.1055 38.2711C36.0344 38.201 36.0344 38.0608 36.0344 37.9206C36.0344 37.7103 36.1055 37.5 36.2476 37.2898C36.5319 37.0094 37.1005 37.0094 37.4559 37.2898C37.598 37.4299 37.7402 37.6402 37.7402 37.9206C37.8113 38.0608 37.8113 38.201 37.7402 38.2711ZM41.1517 38.5514C41.0096 38.6916 40.7964 38.8318 40.5831 38.8318C40.441 38.8318 40.3699 38.8318 40.2278 38.7617C40.0856 38.6916 40.0145 38.6916 39.9435 38.5514C39.8013 38.4112 39.7303 38.201 39.7303 37.9907C39.7303 37.9206 39.7303 37.8505 39.7303 37.8505C39.7303 37.7804 39.7303 37.7103 39.8013 37.7103C39.8013 37.6402 39.8724 37.6402 39.8724 37.5701C39.8724 37.5 39.9435 37.5 39.9435 37.4299C39.9435 37.3598 40.0145 37.3598 40.0856 37.3598C40.1567 37.3598 40.1567 37.2898 40.2278 37.2898C40.2988 37.2898 40.2988 37.2898 40.3699 37.2197C40.6542 37.1496 40.9385 37.2197 41.1517 37.4299C41.2939 37.5701 41.436 37.7804 41.436 38.0608C41.3649 38.201 41.2939 38.4112 41.1517 38.5514ZM44.7054 38.5514C44.5633 38.6916 44.35 38.8318 44.1368 38.8318C43.9947 38.8318 43.9236 38.8318 43.7815 38.7617C43.6393 38.6916 43.5682 38.6916 43.4972 38.5514C43.355 38.4112 43.2129 38.201 43.2129 37.9907C43.2129 37.7804 43.2839 37.5701 43.4972 37.3598C43.7815 37.0795 44.35 37.0795 44.7054 37.3598C44.7765 37.4299 44.7765 37.4299 44.7765 37.5C44.8476 37.5701 44.8476 37.5701 44.8476 37.6402C44.8476 37.7103 44.9186 37.7103 44.9186 37.7804C44.9186 37.8505 44.9186 37.8505 44.9186 37.9206C44.9186 38.201 44.8476 38.4112 44.7054 38.5514Z"
fill="#A849CF"
/>
</svg>
</svg>
);
};
export default SplashIconHeader;

22
src/stories/TextArea.stories.tsx Normal file
View File

@ -0,0 +1,22 @@
import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import { TextAreaProps } from "./TextArea";
import TextArea from "./TextArea";
export default {
title: "TextAreas/TextArea",
component: TextArea,
argTypes: {},
} as ComponentMeta<typeof TextArea>;
const Template: ComponentStory<typeof TextArea> = (args: TextAreaProps) => (
<TextArea {...args} />
);
export const Default = Template.bind({});
Default.args = {
id: "testId",
placeholder: "Tell me your secrets",
};

39
src/stories/TextArea.tsx
View File

@ -1,21 +1,18 @@
import React, { FC } from "react";
import styled, { css } from "styled-components";
import styled from "styled-components";
import CSS from "csstype";
import { rgba } from "polished";
import {
color,
opacity,
typography,
borderRadius,
fontSize,
outline,
padding,
} from "../shared/styles";
export interface TextAreaProps {
style?: CSS.Properties;
disabled?: boolean;
name: string;
id: string;
value: string;
onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
placeholder?: string;
@ -23,19 +20,17 @@ export interface TextAreaProps {
const TextArea: FC<TextAreaProps> = ({
style,
name,
id,
value,
onChange,
disabled = false,
placeholder = "",
}) => {
return (
<StyledTextArea
style={style}
name={name}
id={id}
value={value}
onChange={onChange}
disabled={disabled}
placeholder={placeholder}
/>
);
@ -50,31 +45,17 @@ const StyledTextArea = styled.textarea<TextAreaProps>`
width: 100%;
height: 21.6rem;
font-size: ${fontSize.medium};
font-family: ${typography.primary};
color: ${color.darkblue};
font-size: ${typography.size.medium};
font-family: ${typography.family.primary};
font-weight: ${typography.weight.regular};
appearance: none;
&:focus-visible {
outline: none;
outline: ${outline.regular};
}
&::placeholder {
color: ${color.black};
color: ${color.darkblue};
}
${(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};
}
`}
`;

27
src/stories/TextAreaParagraph.stories.tsx Normal file
View File

@ -0,0 +1,27 @@
import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import { TextAreaParagraphProps } from "./TextAreaParagraph";
import TextAreaParagraph from "./TextAreaParagraph";
export default {
title: "TextAreas/TextAreaParagraph",
component: TextAreaParagraph,
argTypes: {},
} as ComponentMeta<typeof TextAreaParagraph>;
const Template: ComponentStory<typeof TextAreaParagraph> = (
args: TextAreaParagraphProps
) => <TextAreaParagraph {...args} />;
const lorem =
"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum, velit provident! Earum esse eum iure, aut repellat distinctio accusamus facilis quia! Officia, obcaecati. Neque, tempore. Modi harum consequatur dicta at? Accusantium ipsum nam vel doloremque eum fuga repellendus consectetur voluptatum amet cumque temporibus atque, iure dolor aliquid esse quaerat nulla repellat, dolore eaque exercitationem accusamus maiores obcaecati! Animi, quos facere! Qui esse soluta maiores expedita, vero mollitia dolorum ducimus impedit quis, rem beatae dolore quod tempore adipisci quaerat quos veniam recusandae voluptatum corrupti sint explicabo dolorem cumque? Reiciendis, odit in!";
export const Default = Template.bind({});
Default.args = {
children: lorem,
id: "testId",
minHeight: "12.5rem",
maxHeight: "30rem",
};

65
src/stories/TextAreaParagraph.tsx Normal file
View File

@ -0,0 +1,65 @@
import React, { ReactNode } from "react";
import styled from "styled-components";
import CSS from "csstype";
import { rgba } from "polished";
import {
typography,
borderRadius,
padding,
color,
opacity,
} from "../shared/styles";
export interface TextAreaParagraphProps {
children: ReactNode | null;
style?: CSS.Properties;
id: string;
minHeight?: string;
maxHeight?: string;
}
const TextAreaParagraph: React.FC<TextAreaParagraphProps> = ({
children,
style,
id,
minHeight = "12.5rem",
maxHeight = "30rem",
}) => {
return (
<StyledParagraph
id={id}
minHeight={minHeight}
maxHeight={maxHeight}
style={style}
>
{children}
</StyledParagraph>
);
};
export default TextAreaParagraph;
const StyledParagraph = styled.p<TextAreaParagraphProps>`
border-radius: ${borderRadius.medium};
border: none;
margin-block-start: 0;
margin-block-end: 0;
padding: ${padding.medium};
width: 100%;
min-height: ${(props) => props.minHeight};
max-height: ${(props) => props.maxHeight};
overflow-y: auto;
text-align: left;
font-size: ${typography.size.medium};
font-family: ${typography.family.primary};
font-weight: ${typography.weight.regular};
color: white;
background-color: ${rgba(color.white, opacity.dark)};
&::placeholder {
color: ${color.white};
}
`;

10
src/stories/assets/arrow-right.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 4.99996H0.5C0.3 4.99996 0 4.79996 0 4.49996V3.49996C0 3.19996 0.3 2.99996 0.5 2.99996H4V0.699961C4 -3.9041e-05 4.4 -0.200039 4.9 0.199961L9.6 3.39996C10.1 3.69996 10.1 4.29996 9.6 4.59996L4.9 7.79996C4.5 8.19996 4 7.99996 4 7.29996V4.99996Z" fill="#091132"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="10" height="8" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 537 B

3
src/stories/assets/copy.svg
View File

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 341 B

7
src/stories/assets/download.svg
View File

@ -1,3 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" " fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5 6H14.5C14.2 6 14 6.2 14 6.5V12H2V6.5C2 6.2 1.8 6 1.5 6H0.5C0.2 6 0 6.2 0 6.5V13C0 13.6 0.4 14 1 14H15C15.6 14 16 13.6 16 13V6.5C16 6.2 15.8 6 15.5 6Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.70015 9.8C7.90015 10 8.20015 10 8.30015 9.8L10.9001 6.5C11.1001 6.3 11.0001 6 10.7001 6H9.00015V0.5C9.00015 0.2 8.80015 0 8.50015 0H7.50015C7.20015 0 7.00015 0.2 7.00015 0.5V6H5.30015C5.00015 6 4.90015 6.3 5.10015 6.5L7.70015 9.8Z" fill="white"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 245 B

After

Width:  |  Height:  |  Size: 623 B

3
src/stories/assets/file.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6 3.6L10.3 0.3C10.2 0.2 9.8 0 9.5 0H1C0.4 0 0 0.4 0 1V15C0 15.6 0.4 16 1 16H13C13.6 16 14 15.6 14 15V4.5C14 4.2 13.8 3.8 13.6 3.6ZM12 14H2V2H8V5.5C8 5.8 8.2 6 8.5 6H12V14Z" fill="#091132"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 346 B

5
src/stories/assets/hamburger-menu.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 2H13C13.6 2 14 1.6 14 1C14 0.4 13.6 0 13 0H1C0.4 0 0 0.4 0 1C0 1.6 0.4 2 1 2Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13 4H1C0.4 4 0 4.4 0 5C0 5.6 0.4 6 1 6H13C13.6 6 14 5.6 14 5C14 4.4 13.6 4 13 4Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13 8H1C0.4 8 0 8.4 0 9C0 9.6 0.4 10 1 10H13C13.6 10 14 9.6 14 9C14 8.4 13.6 8 13 8Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 546 B

6
src/stories/assets/icon-1.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="51" height="60" viewBox="0 0 51 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M50.393 31.4764V9.55254C50.393 8.78694 50.045 8.09095 49.4186 7.53415C48.7922 6.97735 48.0266 6.76855 47.261 6.83815C46.217 6.97735 45.0338 7.04695 43.9898 7.04695C34.0371 7.04695 27.5643 0.852594 27.4947 0.782995C26.4507 -0.260998 24.7803 -0.260998 23.7363 0.782995C23.7363 0.852594 17.3332 7.04695 7.24126 7.04695C6.19727 7.04695 5.01407 6.97735 3.97008 6.83815C3.13489 6.76855 2.43889 6.97735 1.8125 7.53415C1.1861 8.09095 0.838102 8.71734 0.838102 9.55254V31.4764C0.768502 33.286 0.559705 49.5723 24.6411 59.3162C24.9891 59.4554 25.3371 59.525 25.6851 59.525C26.0331 59.525 26.3811 59.4554 26.7291 59.3162C50.741 49.5027 50.5322 33.286 50.393 31.4764ZM37.6563 40.2459C37.6563 43.1691 34.9419 45.5355 31.5315 45.5355H19.6996C16.2892 45.5355 13.5748 43.1691 13.5748 40.2459V25.4908C13.5748 22.9852 15.5236 20.9669 18.238 20.3405V17.1389C18.238 13.1021 21.5788 9.76133 25.6155 9.76133C29.6523 9.76133 32.9931 13.1021 32.9931 17.1389V20.3405C35.6379 20.8973 37.6563 22.9852 37.6563 25.4908V40.2459Z" fill="white"/>
<path d="M30.7659 17.1389C30.7659 14.2853 28.4691 11.9885 25.6155 11.9885C22.762 11.9885 20.4652 14.2853 20.4652 17.1389V20.2013H30.8355L30.7659 17.1389Z" fill="white"/>
<path d="M25.6155 37.81C28.2294 37.81 30.3483 35.6911 30.3483 33.0773C30.3483 30.4634 28.2294 28.3445 25.6155 28.3445C23.0017 28.3445 20.8828 30.4634 20.8828 33.0773C20.8828 35.6911 23.0017 37.81 25.6155 37.81Z" fill="#32EFE7"/>
<path d="M25.6155 40.8028C21.37 40.8028 17.542 38.506 15.5236 34.8172C14.9668 33.8428 14.9668 32.3812 15.5236 31.4068C17.542 27.718 21.4396 25.4213 25.6155 25.4213C29.8611 25.4213 33.6891 27.718 35.7075 31.4068C36.2643 32.3812 36.2643 33.8428 35.7075 34.8172C33.6891 38.506 29.8611 40.8028 25.6155 40.8028ZM25.6155 27.0917C21.9964 27.0917 18.7252 29.0404 16.9852 32.242C16.7068 32.7292 16.7068 33.634 16.9852 34.1212C18.7252 37.2532 21.9964 39.2716 25.6155 39.2716C29.2347 39.2716 32.5059 37.3228 34.2459 34.1212C34.5243 33.634 34.5243 32.7292 34.2459 32.242C32.5059 29.0404 29.2347 27.0917 25.6155 27.0917Z" fill="#32EFE7"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

3
src/stories/assets/icon-2.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="51" height="50" viewBox="0 0 51 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.08552 20.8377L48.6193 0.141884C50.0643 -0.485262 51.5094 1.0826 50.8249 2.57207L31.8114 43.8853C31.355 44.9044 30.1382 45.218 29.2255 44.5909L24.206 40.9064L16.5245 48.8241C15.764 49.608 14.8513 50 13.8626 50C13.4063 50 13.026 49.9216 12.5697 49.7648C11.2007 49.2945 10.212 48.0402 10.0599 46.4723L8.2346 29.3826L0.70525 23.9734C-0.359509 23.1895 -0.207401 21.3865 1.08552 20.8377ZM21.3159 38.8682L17.9695 36.438L15.9161 44.3557L21.3159 38.8682ZM13.026 41.7687L14.8513 34.7133C14.9274 34.3997 15.0795 34.0862 15.3076 33.9294L29.5297 19.6618C29.834 19.3482 29.4537 18.8779 29.0734 19.1131L12.7978 31.4992C12.2655 31.8912 12.0373 32.5183 12.1134 33.1454L13.026 41.7687Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 799 B

5
src/stories/assets/icon-3.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="53" height="60" viewBox="0 0 53 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M39.9435 48.8551C39.1616 49.6262 37.8823 49.6262 37.0294 48.8551L34.3286 46.1916H30.3485C28.0031 46.1916 26.013 44.2991 26.013 41.9159V33.9953C26.013 31.6822 27.932 29.7196 30.3485 29.7196H45.7715V6.02804C45.7715 2.73365 43.0707 0 39.6592 0H13.0065C9.66603 0 6.89415 2.66355 6.89415 6.02804V8.90187H22.3172C24.6626 8.90187 26.6527 10.7944 26.6527 13.1776V22.0794C26.6527 24.3925 24.7337 26.3551 22.3172 26.3551H18.337L15.6362 28.8785C14.8544 29.6495 13.5751 29.6495 12.7222 28.8785L10.0214 26.215H6.89415V53.972C6.89415 57.2664 9.59495 60 13.0065 60H39.7302C43.0707 60 45.8426 57.3364 45.8426 53.972V46.1916H42.6443L39.9435 48.8551Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.585 24.5327L13.6462 26.5654C13.9305 26.8457 14.4991 26.8457 14.7833 26.5654L16.8445 24.5327C17.1999 24.1822 17.7684 23.9719 18.266 23.9719H22.3172C23.4543 23.9719 24.3783 23.0607 24.3783 21.9392V13.1074C24.3783 11.9859 23.4543 11.0747 22.3172 11.0747H2.06114C0.923959 11.0747 0 11.9859 0 13.1074V22.0093C0 23.1308 0.923959 24.042 2.06114 24.042H10.1636C10.6611 23.9719 11.1586 24.1822 11.585 24.5327ZM15.1387 16.8925C15.423 16.6121 15.9916 16.6121 16.347 16.8925C16.418 16.9626 16.418 16.9626 16.418 17.0327C16.4891 17.1027 16.4891 17.1027 16.4891 17.1728C16.4891 17.2429 16.5602 17.2429 16.5602 17.313C16.5602 17.3831 16.5602 17.3831 16.5602 17.4532C16.5602 17.6635 16.4891 17.8738 16.2759 18.014C16.1337 18.1541 15.9205 18.2943 15.7073 18.2943C15.5652 18.2943 15.4941 18.2943 15.3519 18.2242C15.2098 18.1541 15.1387 18.1541 15.0676 18.014C14.9255 17.8738 14.7833 17.6635 14.7833 17.4532C14.8544 17.2429 14.9255 17.0327 15.1387 16.8925ZM11.3007 17.313C11.3007 17.2429 11.3007 17.1728 11.3718 17.1728C11.3718 17.1027 11.4429 17.1027 11.4429 17.0327C11.4429 16.9626 11.514 16.9626 11.514 16.8925C11.514 16.8224 11.585 16.8224 11.6561 16.8224C11.7272 16.8224 11.7272 16.7523 11.7982 16.7523C11.8693 16.7523 11.8693 16.7523 11.9404 16.6822C12.2247 16.6121 12.509 16.6822 12.7222 16.8925C12.8644 17.0327 13.0065 17.2429 13.0065 17.5233C13.0065 17.7336 12.9354 17.9439 12.7222 18.0841C12.5801 18.2242 12.3668 18.3644 12.1536 18.3644C12.0115 18.3644 11.9404 18.3644 11.7982 18.2943C11.6561 18.2242 11.585 18.2242 11.514 18.0841C11.3718 17.9439 11.3007 17.7336 11.3007 17.5233C11.3007 17.4532 11.3007 17.3831 11.3007 17.313ZM9.38174 17.8037C9.31067 17.8738 9.31067 18.014 9.16852 18.0841C9.02637 18.2242 8.81315 18.3644 8.59993 18.3644C8.38671 18.3644 8.17349 18.2943 7.96026 18.0841C7.88919 18.014 7.81812 17.9439 7.74704 17.8037C7.67597 17.7336 7.67597 17.5934 7.67597 17.4532C7.67597 17.2429 7.74704 17.0327 7.88919 16.8224C8.17349 16.542 8.74208 16.542 9.09745 16.8224C9.23959 16.9626 9.38174 17.1728 9.38174 17.4532C9.45281 17.5934 9.45281 17.7336 9.38174 17.8037Z" fill="#32EFE7"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M50.6756 31.9626H30.4196C29.2824 31.9626 28.3584 32.8739 28.3584 33.9954V41.986C28.3584 43.1075 29.2824 44.0187 30.4196 44.0187H34.4708C35.0394 44.0187 35.5369 44.229 35.8923 44.5795L37.9534 46.6122C38.2377 46.8926 38.8063 46.8926 39.0906 46.6122L41.1517 44.5795C41.5071 44.229 42.0757 44.0187 42.5732 44.0187H50.6756C51.8128 44.0187 52.7368 43.1075 52.7368 41.986V33.9954C52.6657 32.8739 51.7417 31.9626 50.6756 31.9626ZM37.7402 38.2711C37.6691 38.3412 37.6691 38.4813 37.527 38.5514C37.3848 38.6916 37.1716 38.8318 36.9584 38.8318C36.7452 38.8318 36.5319 38.7617 36.3187 38.5514C36.2476 38.4813 36.1766 38.4112 36.1055 38.2711C36.0344 38.201 36.0344 38.0608 36.0344 37.9206C36.0344 37.7103 36.1055 37.5 36.2476 37.2898C36.5319 37.0094 37.1005 37.0094 37.4559 37.2898C37.598 37.4299 37.7402 37.6402 37.7402 37.9206C37.8113 38.0608 37.8113 38.201 37.7402 38.2711ZM41.1517 38.5514C41.0096 38.6916 40.7964 38.8318 40.5831 38.8318C40.441 38.8318 40.3699 38.8318 40.2278 38.7617C40.0856 38.6916 40.0145 38.6916 39.9435 38.5514C39.8013 38.4112 39.7303 38.201 39.7303 37.9907C39.7303 37.9206 39.7303 37.8505 39.7303 37.8505C39.7303 37.7804 39.7303 37.7103 39.8013 37.7103C39.8013 37.6402 39.8724 37.6402 39.8724 37.5701C39.8724 37.5 39.9435 37.5 39.9435 37.4299C39.9435 37.3598 40.0145 37.3598 40.0856 37.3598C40.1567 37.3598 40.1567 37.2898 40.2278 37.2898C40.2988 37.2898 40.2988 37.2898 40.3699 37.2197C40.6542 37.1496 40.9385 37.2197 41.1517 37.4299C41.2939 37.5701 41.436 37.7804 41.436 38.0608C41.3649 38.201 41.2939 38.4112 41.1517 38.5514ZM44.7054 38.5514C44.5633 38.6916 44.35 38.8318 44.1368 38.8318C43.9947 38.8318 43.9236 38.8318 43.7815 38.7617C43.6393 38.6916 43.5682 38.6916 43.4972 38.5514C43.355 38.4112 43.2129 38.201 43.2129 37.9907C43.2129 37.7804 43.2839 37.5701 43.4972 37.3598C43.7815 37.0795 44.35 37.0795 44.7054 37.3598C44.7765 37.4299 44.7765 37.4299 44.7765 37.5C44.8476 37.5701 44.8476 37.5701 44.8476 37.6402C44.8476 37.7103 44.9186 37.7103 44.9186 37.7804C44.9186 37.8505 44.9186 37.8505 44.9186 37.9206C44.9186 38.201 44.8476 38.4112 44.7054 38.5514Z" fill="#A849CF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

10
src/stories/assets/paperclip.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M5.3 15.6C4 15.6 2.6 15 1.6 14C0.6 13 0 11.6 0 10.2C0 8.79998 0.6 7.39998 1.6 6.39998L6.9 1.09998C8.4 -0.400024 10.8 -0.400024 12.3 1.09998C13.8 2.59998 13.8 4.99998 12.3 6.49998L7 11.9C6.1 12.8 4.6 12.8 3.7 11.9C2.8 11 2.8 9.49998 3.7 8.59998L9 3.19998C9.3 2.89998 9.9 2.89998 10.2 3.19998C10.5 3.49998 10.5 4.09998 10.2 4.39998L4.9 9.79998C4.6 10.1 4.6 10.5 4.9 10.7C5.2 11 5.6 11 5.8 10.7L11.1 5.39998C11.9 4.59998 11.9 3.19998 11.1 2.39998C10.3 1.59998 8.9 1.59998 8.1 2.39998L2.8 7.59998C2.1 8.29998 1.7 9.19998 1.7 10.2C1.7 11.2 2.1 12.1 2.8 12.8C4.2 14.2 6.5 14.2 8 12.8L15.4 5.39998C15.7 5.09998 16.3 5.09998 16.6 5.39998C16.9 5.69998 16.9 6.29998 16.6 6.59998L8.8 14.4C7.8 15.2 6.6 15.6 5.3 15.6Z" fill="#091132"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="16.8" height="15.6" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 966 B

2
src/stories/utilities/CenteredContainer.tsx
View File

@ -39,7 +39,7 @@ const StyledDiv = styled.div<CenteredContainerProps>`
props.fullscreen &&
css`
width: 100vw;
background-color: ${color.background};
background: linear-gradient(180deg, #060b2e 0%, #051745 100%);
`}
${(props) =>

2
src/stories/utilities/Spacer.tsx
View File

@ -7,7 +7,7 @@ interface SpacerProps {
space?: string;
}
const Spacer: FC<SpacerProps> = ({ style, space = "20px" }) => {
const Spacer: FC<SpacerProps> = ({ style, space = "2rem" }) => {
return <StyledDiv style={style} space={space} />;
};