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

Add a bunch of spacing components and h1/h2 components

This commit is contained in:
Lindsey 2021-09-19 22:26:42 -04:00
parent 2480b5200d
commit 2442a6b9bc
10 changed files with 222 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.storybook/preview-head.html
View File

@ -4,5 +4,5 @@
/> />
<link <link
rel="stylesheet" rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,700,800,900" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
/> />

9
public/index.html
View File

@ -24,6 +24,15 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
/>
<title>React App</title> <title>React App</title>
</head> </head>
<body> <body>

23
src/App.tsx
View File

@ -1,12 +1,29 @@
import React from "react"; import React from "react";
import ProgressIndicator from "./stories/ProgressIndicator";
import Header1 from "./stories/Header1";
import Header2 from "./stories/Header2";
import Button from "./stories/Button"; import Button from "./stories/Button";
import CenteredContainer from "./stories/CenteredContainer";
import SpaceBetweenContainer from "./stories/SpaceBetweenContainer";
import Spacer from "./stories/Spacer";
function App() { function App() {
return ( return (
<div className="App"> <CenteredContainer fullscreen>
<Button>Hello World</Button> <CenteredContainer wide>
</div> <ProgressIndicator current={3} />
<Header1>Securely Share Your Secrets</Header1>
<Spacer />
<Header2>Tell someone</Header2>
<Spacer />
<SpaceBetweenContainer width100pct>
<Button variant="secondary">Hello World</Button>
<Button variant="secondary">Hello World</Button>
</SpaceBetweenContainer>
</CenteredContainer>
</CenteredContainer>
); );
} }

1
src/shared/styles.js
View File

@ -3,6 +3,7 @@ export const color = {
secondary: "#32EFE7", secondary: "#32EFE7",
white: "#FFFFFF", white: "#FFFFFF",
black: "#000000", black: "#000000",
background: "#091132",
}; };
export const typography = { export const typography = {

59
src/stories/CenteredContainer.tsx Normal file
View File

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

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

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

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

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

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

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

33
src/stories/SpaceBetweenContainer.tsx Normal file
View File

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

18
src/stories/Spacer.tsx Normal file
View File

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