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

0.1.7

This commit is contained in:
Silas 2021-11-26 11:48:46 -05:00
parent f12446b631
commit f9ed3cdc3a
Signed by: silentsilas
GPG Key ID: 4199EFB7DAA34349
43 changed files with 114 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "@intended/intended-ui", "name": "@intended/intended-ui",
"version": "0.1.4", "version": "0.1.7",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@intended/intended-ui", "name": "@intended/intended-ui",
"version": "0.1.4", "version": "0.1.7",
"license": "MIT", "license": "MIT",
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.16.0", "@babel/cli": "^7.16.0",
@ -31,7 +31,7 @@
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
"react-svg": "^14.0.13", "react-svg": "^14.0.13",
"styled-components": "^5.3.1", "styled-components": "^5.3.1",
"typescript": "^4.5.2", "typescript": "^4.2.0",
"web-vitals": "^1.0.1" "web-vitals": "^1.0.1"
} }
}, },

7
package.json
View File

@ -2,13 +2,14 @@
"name": "@intended/intended-ui", "name": "@intended/intended-ui",
"description": "Storybook UI library for Intended Link", "description": "Storybook UI library for Intended Link",
"license": "MIT", "license": "MIT",
"version": "0.1.6", "version": "0.1.7",
"private": false, "private": false,
"main": "dist/index.js", "main": "dist/index.js",
"repository": "https://git.silentsilas.com/Intended/attendant.git", "repository": "https://git.silentsilas.com/Intended/attendant.git",
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",
"build": "cross-env NODE_ENV=production tsc -b", "build": "cross-env NODE_ENV=production tsc -b && tsc --declaration",
"pub": "npm version patch --force && npm publish",
"test": "react-scripts test", "test": "react-scripts test",
"eject": "react-scripts eject", "eject": "react-scripts eject",
"storybook": "start-storybook -p 6006 -s public", "storybook": "start-storybook -p 6006 -s public",
@ -65,7 +66,7 @@
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
"react-svg": "^14.0.13", "react-svg": "^14.0.13",
"styled-components": "^5.3.1", "styled-components": "^5.3.1",
"typescript": "^4.5.2", "typescript": "^4.2.0",
"web-vitals": "^1.0.1" "web-vitals": "^1.0.1"
}, },
"files": [ "files": [

28
src/App.tsx
View File

@ -1,23 +1,23 @@
import React, { useState } from "react"; import React, { useState } from "react";
import ProgressIndicator from "./stories/ProgressIndicator"; import { ProgressIndicator } from "./stories/ProgressIndicator";
import Header1 from "./stories/Header1"; import { Header1 } from "./stories/Header1";
import Header2 from "./stories/Header2"; import { Header2 } from "./stories/Header2";
import Button from "./stories/Button"; import { Button } from "./stories/Button";
import IconArrow from "./stories/IconArrow"; import { IconArrow } from "./stories/IconArrow";
import InputButtonWithIcon from "./stories/InputButtonWithIcon"; import { InputButtonWithIcon } from "./stories/InputButtonWithIcon";
import Label from "./stories/Label"; import { Label } from "./stories/Label";
import Input from "./stories/Input"; import { Input } from "./stories/Input";
import AutoResizingTextArea from "./stories/AutoResizingTextArea"; import { AutoResizingTextArea } from "./stories/AutoResizingTextArea";
import Select from "./stories/Select"; import { Select } from "./stories/Select";
import CenteredContainer from "./stories/utilities/CenteredContainer"; import { CenteredContainer } from "./stories/utilities/CenteredContainer";
import SpaceBetweenContainer from "./stories/utilities/SpaceBetweenContainer"; import { SpaceBetweenContainer } from "./stories/utilities/SpaceBetweenContainer";
import Spacer from "./stories/utilities/Spacer"; import { Spacer } from "./stories/utilities/Spacer";
import TextAlignWrapper from "./stories/utilities/TextAlignWrapper"; import { TextAlignWrapper } from "./stories/utilities/TextAlignWrapper";
function App() { function App() {
const [input1, setInput1] = useState(""); const [input1, setInput1] = useState("");

2
src/App2.tsx
View File

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import styled from "styled-components"; import styled from "styled-components";
import SplashIconHeader from "./stories/SplashIconHeader"; import { SplashIconHeader } from "./stories/SplashIconHeader";
function App2() { function App2() {
return ( return (

20
src/SecretCreationPage1.tsx
View File

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

22
src/SecretCreationPage2.tsx
View File

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

22
src/SecretCreationPage3.tsx
View File

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

20
src/SecretRevealPage.tsx
View File

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

12
src/SplashPage.tsx
View File

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

16
src/VerifyPage.tsx
View File

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

2
src/stories/AutoResizingTextArea.stories.tsx
View File

@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
import { AutoResizingTextAreaProps } from "./AutoResizingTextArea"; import { AutoResizingTextAreaProps } from "./AutoResizingTextArea";
import AutoResizingTextArea from "./AutoResizingTextArea"; import { AutoResizingTextArea } from "./AutoResizingTextArea";
export default { export default {
title: "TextAreas/AutoResizingTextArea", title: "TextAreas/AutoResizingTextArea",

2
src/stories/AutoResizingTextArea.tsx
View File

@ -60,7 +60,7 @@ const AutoResizingTextArea: FC<AutoResizingTextAreaProps> = ({
); );
}; };
export default AutoResizingTextArea; export { AutoResizingTextArea };
interface DivProps { interface DivProps {
height: string; height: string;

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

@ -3,8 +3,8 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
import { ButtonProps } from "./Button"; import { ButtonProps } from "./Button";
import Button from "./Button"; import { Button } from "./Button";
import IconArrow from "./IconArrow"; import { IconArrow } from "./IconArrow";
export default { export default {
title: "Button", title: "Button",

2
src/stories/FileInput.stories.tsx
View File

@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
import { FileInputProps } from "./FileInput"; import { FileInputProps } from "./FileInput";
import FileInput from "./FileInput"; import { FileInput } from "./FileInput";
export default { export default {
title: "FileInput", title: "FileInput",

4
src/stories/FileInput.tsx
View File

@ -1,7 +1,7 @@
import React, { ChangeEvent, FC, useRef } from "react"; import React, { ChangeEvent, FC, useRef } from "react";
import CSS from "csstype"; import CSS from "csstype";
import InputButtonWithIcon from "./InputButtonWithIcon"; import { InputButtonWithIcon } from "./InputButtonWithIcon";
export interface FileInputProps { export interface FileInputProps {
style?: CSS.Properties; style?: CSS.Properties;
@ -46,4 +46,4 @@ const FileInput: FC<FileInputProps> = ({ style, id, handleFile, value }) => {
); );
}; };
export default FileInput; export { FileInput };

2
src/stories/Header1.stories.tsx
View File

@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
import { Header1Props } from "./Header1"; import { Header1Props } from "./Header1";
import Header1 from "./Header1"; import { Header1 } from "./Header1";
export default { export default {
title: "Headers/Header1", title: "Headers/Header1",

2
src/stories/Header1.tsx
View File

@ -13,7 +13,7 @@ const Header1: FC<Header1Props> = ({ children, style }) => {
return <StyledHeader1 style={style}>{children}</StyledHeader1>; return <StyledHeader1 style={style}>{children}</StyledHeader1>;
}; };
export default Header1; export { Header1 };
const StyledHeader1 = styled.h2<Header1Props>` const StyledHeader1 = styled.h2<Header1Props>`
margin: 0.7rem auto; margin: 0.7rem auto;

2
src/stories/Header2.stories.tsx
View File

@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
import { Header2Props } from "./Header2"; import { Header2Props } from "./Header2";
import Header2 from "./Header2"; import { Header2 } from "./Header2";
export default { export default {
title: "Headers/Header2", title: "Headers/Header2",

2
src/stories/Header2.tsx
View File

@ -13,7 +13,7 @@ const Header2: FC<Header2Props> = ({ children, style }) => {
return <StyledHeader2 style={style}>{children}</StyledHeader2>; return <StyledHeader2 style={style}>{children}</StyledHeader2>;
}; };
export default Header2; export { Header2 };
const StyledHeader2 = styled.h2<Header2Props>` const StyledHeader2 = styled.h2<Header2Props>`
font-size: 3.2rem; font-size: 3.2rem;

2
src/stories/Header3.stories.tsx
View File

@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
import { Header3Props } from "./Header3"; import { Header3Props } from "./Header3";
import Header3 from "./Header3"; import { Header3 } from "./Header3";
export default { export default {
title: "Headers/Header3", title: "Headers/Header3",

2
src/stories/Header3.tsx
View File

@ -18,7 +18,7 @@ const Header3: FC<Header3Props> = ({ children, style, small }) => {
); );
}; };
export default Header3; export { Header3 };
const StyledHeader3 = styled.h3<Header3Props>` const StyledHeader3 = styled.h3<Header3Props>`
font-size: ${(props) => font-size: ${(props) =>

2
src/stories/Icon.tsx
View File

@ -88,7 +88,7 @@ const Icon: FC<IconProps> = ({ style, iconName, onClick }) => {
); );
}; };
export default Icon; export { Icon };
const StyledSpan = styled.span<IconProps>` const StyledSpan = styled.span<IconProps>`
position: absolute; position: absolute;

2
src/stories/IconArrow.tsx
View File

@ -65,4 +65,4 @@ const IconArrow: FC<IconArrowProps> = ({ arrowDirection }) => {
); );
}; };
export default IconArrow; export { IconArrow };

2
src/stories/Input.stories.tsx
View File

@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
import { InputProps } from "./Input"; import { InputProps } from "./Input";
import Input from "./Input"; import { Input } from "./Input";
export default { export default {
title: "Input", title: "Input",

2
src/stories/Input.tsx
View File

@ -48,7 +48,7 @@ const Input: FC<InputProps> = ({
); );
}; };
export default Input; export { Input };
const StyledInput = styled.input<InputProps>` const StyledInput = styled.input<InputProps>`
border-radius: ${borderRadius.medium}; border-radius: ${borderRadius.medium};

2
src/stories/InputButtonWithIcon.stories.tsx
View File

@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
import { InputButtonWithIconProps } from "./InputButtonWithIcon"; import { InputButtonWithIconProps } from "./InputButtonWithIcon";
import InputButtonWithIcon from "./InputButtonWithIcon"; import { InputButtonWithIcon } from "./InputButtonWithIcon";
export default { export default {
title: "InputButtonWithIcon", title: "InputButtonWithIcon",

4
src/stories/InputButtonWithIcon.tsx
View File

@ -2,7 +2,7 @@ import React, { FC } from "react";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import CSS from "csstype"; import CSS from "csstype";
import { rgba } from "polished"; import { rgba } from "polished";
import Icon from "./Icon"; import { Icon } from "./Icon";
import { import {
color, color,
@ -44,7 +44,7 @@ const InputButtonWithIcon: FC<InputButtonWithIconProps> = ({
); );
}; };
export default InputButtonWithIcon; export { InputButtonWithIcon };
const StyledDiv = styled.div` const StyledDiv = styled.div`
position: relative; position: relative;

2
src/stories/Label.stories.tsx
View File

@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
import { LabelProps } from "./Label"; import { LabelProps } from "./Label";
import Label from "./Label"; import { Label } from "./Label";
export default { export default {
title: "Label", title: "Label",

2
src/stories/Label.tsx
View File

@ -18,7 +18,7 @@ const Label: FC<LabelProps> = ({ children, style, htmlFor }) => {
); );
}; };
export default Label; export { Label };
const StyledLabel = styled.label<LabelProps>` const StyledLabel = styled.label<LabelProps>`
color: ${color.white}; color: ${color.white};

2
src/stories/ProgressIndicator.stories.tsx
View File

@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
import { ProgressIndicatorProps } from "./ProgressIndicator"; import { ProgressIndicatorProps } from "./ProgressIndicator";
import ProgressIndicator from "./ProgressIndicator"; import { ProgressIndicator } from "./ProgressIndicator";
export default { export default {
title: "SVGs/ProgressIndicator", title: "SVGs/ProgressIndicator",

2
src/stories/ProgressIndicator.tsx
View File

@ -31,4 +31,4 @@ const ProgressIndicator = ({
); );
}; };
export default ProgressIndicator; export { ProgressIndicator };

2
src/stories/Select.stories.tsx
View File

@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
import { SelectProps } from "./Select"; import { SelectProps } from "./Select";
import Select from "./Select"; import { Select } from "./Select";
export default { export default {
title: "Select", title: "Select",

2
src/stories/Select.tsx
View File

@ -27,7 +27,7 @@ const Select: FC<SelectProps> = ({ style, id, value = "github", onChange }) => {
); );
}; };
export default Select; export { Select };
const StyledSelect = styled.select<SelectProps>` const StyledSelect = styled.select<SelectProps>`
color: ${color.darkblue}; color: ${color.darkblue};

2
src/stories/SplashIconHeader.stories.tsx
View File

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react"; import { ComponentStory, ComponentMeta } from "@storybook/react";
import SplashIconHeader from "./SplashIconHeader"; import { SplashIconHeader } from "./SplashIconHeader";
export default { export default {
title: "SVGs/SplashIconHeader", title: "SVGs/SplashIconHeader",

2
src/stories/SplashIconHeader.tsx
View File

@ -89,4 +89,4 @@ const SplashIconHeader = () => {
); );
}; };
export default SplashIconHeader; export { SplashIconHeader };

2
src/stories/TextArea.stories.tsx
View File

@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
import { TextAreaProps } from "./TextArea"; import { TextAreaProps } from "./TextArea";
import TextArea from "./TextArea"; import { TextArea } from "./TextArea";
export default { export default {
title: "TextAreas/TextArea", title: "TextAreas/TextArea",

2
src/stories/TextArea.tsx
View File

@ -36,7 +36,7 @@ const TextArea: FC<TextAreaProps> = ({
); );
}; };
export default TextArea; export { TextArea };
const StyledTextArea = styled.textarea<TextAreaProps>` const StyledTextArea = styled.textarea<TextAreaProps>`
border-radius: ${borderRadius.medium}; border-radius: ${borderRadius.medium};

2
src/stories/TextAreaParagraph.stories.tsx
View File

@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
import { TextAreaParagraphProps } from "./TextAreaParagraph"; import { TextAreaParagraphProps } from "./TextAreaParagraph";
import TextAreaParagraph from "./TextAreaParagraph"; import { TextAreaParagraph } from "./TextAreaParagraph";
export default { export default {
title: "TextAreas/TextAreaParagraph", title: "TextAreas/TextAreaParagraph",

2
src/stories/TextAreaParagraph.tsx
View File

@ -37,7 +37,7 @@ const TextAreaParagraph: React.FC<TextAreaParagraphProps> = ({
); );
}; };
export default TextAreaParagraph; export { TextAreaParagraph };
const StyledParagraph = styled.p<TextAreaParagraphProps>` const StyledParagraph = styled.p<TextAreaParagraphProps>`
border-radius: ${borderRadius.medium}; border-radius: ${borderRadius.medium};

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

@ -24,7 +24,7 @@ const CenteredContainer: FC<CenteredContainerProps> = ({
); );
}; };
export default CenteredContainer; export { CenteredContainer };
const StyledDiv = styled.div<CenteredContainerProps>` const StyledDiv = styled.div<CenteredContainerProps>`
height: 100vh; height: 100vh;

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

@ -20,7 +20,7 @@ const SpaceBetweenContainer: FC<SpaceBetweenContainerProps> = ({
); );
}; };
export default SpaceBetweenContainer; export { SpaceBetweenContainer };
const StyledDiv = styled.div<SpaceBetweenContainerProps>` const StyledDiv = styled.div<SpaceBetweenContainerProps>`
display: flex; display: flex;

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

@ -11,7 +11,7 @@ const Spacer: FC<SpacerProps> = ({ style, space = "2rem" }) => {
return <StyledDiv style={style} space={space} />; return <StyledDiv style={style} space={space} />;
}; };
export default Spacer; export { Spacer };
const StyledDiv = styled.div<SpacerProps>` const StyledDiv = styled.div<SpacerProps>`
height: ${(props) => props.space}; height: ${(props) => props.space};

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

@ -22,7 +22,7 @@ const TextAlignWrapper: FC<TextAlignWrapperProps> = ({
); );
}; };
export default TextAlignWrapper; export { TextAlignWrapper };
const StyledDiv = styled.div<TextAlignWrapperProps>` const StyledDiv = styled.div<TextAlignWrapperProps>`
text-align: ${(props) => props.align}; text-align: ${(props) => props.align};