-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3 from RealWagmi/refactor-10-11-23
Refactor 10 11 23
- Loading branch information
Showing
132 changed files
with
1,750 additions
and
3,451 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| <!-- .storybook/preview-head.html --> | ||
|
|
||
| <!-- Pull in static files served from your Static directory or the internet --> | ||
| <!-- Example: `main.js|ts` is configured with staticDirs: ['../public'] and your font is located in the `fonts` directory inside your `public` directory --> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | ||
| <link | ||
| href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" | ||
| rel="stylesheet" | ||
| /> | ||
|
|
||
| <style> | ||
| * { | ||
| font-family: Lexend Deca, sans-serif; | ||
| } | ||
| </style> | ||
| <!-- Or you can load custom head-tag JavaScript: --> | ||
|
|
||
| <!--<script src="https://use.typekit.net/xxxyyy.js"></script>--> | ||
| <!--<script>--> | ||
| <!-- try {--> | ||
| <!-- Typekit.load();--> | ||
| <!-- } catch (e) {}--> | ||
| <!--</script>--> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,176 @@ | ||
| import React, { useEffect, useState } from "react"; | ||
| import AppBtnComponent from "./index"; | ||
| import { BrowserRouter } from "react-router-dom"; | ||
| import { Box, Grid } from "../Box"; | ||
| import Text from "../Text"; | ||
| import { InfoIcon, QuestionIcon } from "../Svg"; | ||
| import Tooltip from "../Tooltip"; | ||
|
|
||
| export default { | ||
| title: "Components/Buttons", | ||
| component: AppBtnComponent, | ||
| argTypes: {}, | ||
| }; | ||
|
|
||
| export const Buttons = () => { | ||
| const [loading, setLoading] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| if (loading) { | ||
| setTimeout(() => { | ||
| setLoading(false); | ||
| }, 1500); | ||
| } | ||
| }, [loading]); | ||
|
|
||
| return ( | ||
| <BrowserRouter> | ||
| <Text variant={"h5"} m="10px 0 20px"> | ||
| Default | ||
| </Text> | ||
| <Grid gridTemplateColumns="repeat(3, 1fr)" gridGap="20px"> | ||
| <Text>Primary</Text> | ||
| <Text>Outlined</Text> | ||
| <Text>Text</Text> | ||
| <Box> | ||
| <AppBtnComponent>Button</AppBtnComponent> | ||
| </Box> | ||
| <Box> | ||
| <AppBtnComponent variant={"outlined"}>Button</AppBtnComponent> | ||
| </Box> | ||
| <Box> | ||
| <AppBtnComponent variant={"text"}>Button</AppBtnComponent> | ||
| </Box> | ||
| <Box> | ||
| <AppBtnComponent disabled={true}>Button</AppBtnComponent> | ||
| </Box> | ||
| <Box> | ||
| <AppBtnComponent variant={"outlined"} disabled={true}> | ||
| Button | ||
| </AppBtnComponent> | ||
| </Box> | ||
| <Box> | ||
| <AppBtnComponent variant={"text"} disabled={true}> | ||
| Button | ||
| </AppBtnComponent> | ||
| </Box> | ||
| </Grid> | ||
| <Text variant={"h5"} m="40px 0 20px"> | ||
| Small | ||
| </Text> | ||
| <Grid gridTemplateColumns="repeat(3, 1fr)" gridGap="20px"> | ||
| <Text>Primary</Text> | ||
| <Text>Outlined</Text> | ||
| <Text>Text</Text> | ||
| <Box> | ||
| <AppBtnComponent scale={"small"}>Button</AppBtnComponent> | ||
| </Box> | ||
| <Box> | ||
| <AppBtnComponent scale={"small"} variant={"outlined"}> | ||
| Button | ||
| </AppBtnComponent> | ||
| </Box> | ||
| <Box> | ||
| <AppBtnComponent scale={"small"} variant={"text"}> | ||
| Button | ||
| </AppBtnComponent> | ||
| </Box> | ||
| <Box> | ||
| <AppBtnComponent scale={"small"} disabled={true}> | ||
| Button | ||
| </AppBtnComponent> | ||
| </Box> | ||
| <Box> | ||
| <AppBtnComponent scale={"small"} variant={"outlined"} disabled={true}> | ||
| Button | ||
| </AppBtnComponent> | ||
| </Box> | ||
| <Box> | ||
| <AppBtnComponent scale={"small"} variant={"text"} disabled={true}> | ||
| Button | ||
| </AppBtnComponent> | ||
| </Box> | ||
| </Grid> | ||
| <Text variant={"h5"} m="40px 0 20px"> | ||
| Error Button | ||
| </Text> | ||
| <Grid gridTemplateColumns="repeat(3, 1fr)" gridGap="20px"> | ||
| <Box> | ||
| <AppBtnComponent color={"error"}>Button</AppBtnComponent> | ||
| </Box> | ||
| <Box> | ||
| <AppBtnComponent color={"error"} variant={"outlined"}> | ||
| Button | ||
| </AppBtnComponent> | ||
| </Box> | ||
| <Box> | ||
| <AppBtnComponent color={"error"} variant={"text"}> | ||
| Button | ||
| </AppBtnComponent> | ||
| </Box> | ||
| </Grid> | ||
| <Text variant={"h5"} m="40px 0 20px"> | ||
| Link Button | ||
| </Text> | ||
| <Box> | ||
| <AppBtnComponent to={"https://docs.popsicle.finance/"} target={"_blank"} width={"50%"}> | ||
| Button | ||
| </AppBtnComponent> | ||
| </Box> | ||
| <Text variant={"h5"} m="40px 0 20px"> | ||
| With Start/End components | ||
| </Text> | ||
| <Grid gridTemplateColumns="repeat(3, 1fr)" gridGap="20px"> | ||
| <AppBtnComponent startIcon={<InfoIcon size={"16px"} />}>Button</AppBtnComponent> | ||
| <AppBtnComponent endIcon={<QuestionIcon size={"16px"} />} variant={"outlined"}> | ||
| Button | ||
| </AppBtnComponent> | ||
| <AppBtnComponent | ||
| color={"error"} | ||
| disabled={true} | ||
| variant={"text"} | ||
| startIcon={ | ||
| <Tooltip content={"Simple text"}> | ||
| <InfoIcon size={"16px"} /> | ||
| </Tooltip> | ||
| } | ||
| endIcon={ | ||
| <Tooltip | ||
| content={ | ||
| <> | ||
| Simple Text | ||
| <br /> | ||
| Simple Text | ||
| <br /> | ||
| Simple Text | ||
| <br /> | ||
| Simple Text | ||
| <br /> | ||
| </> | ||
| } | ||
| > | ||
| <QuestionIcon size={"16px"} /> | ||
| </Tooltip> | ||
| } | ||
| > | ||
| With Tooltips | ||
| </AppBtnComponent> | ||
| </Grid> | ||
|
|
||
| <Text variant={"h5"} m="40px 0 20px"> | ||
| With Loader | ||
| </Text> | ||
|
|
||
| <AppBtnComponent | ||
| width={"50%"} | ||
| onClick={() => { | ||
| setLoading(true); | ||
| }} | ||
| loading={loading} | ||
| variant={"outlined"} | ||
| > | ||
| Click here | ||
| </AppBtnComponent> | ||
| </BrowserRouter> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| import styled from "styled-components"; | ||
| import { variant } from "styled-system"; | ||
| import { variantVariants, scaleVariants } from "./theme"; | ||
| import { AppBtnProps } from "./types"; | ||
| import LoadingSpinner from "../Loaders/LoadingSpinner"; | ||
|
|
||
| const AppBtnWrap = styled.button<AppBtnProps>` | ||
| ${({ theme, color }) => | ||
| variant({ | ||
| prop: "variant", | ||
| variants: variantVariants(theme, color), | ||
| })} | ||
| ${variant({ | ||
| prop: "scale", | ||
| variants: scaleVariants, | ||
| })} | ||
| position: relative; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| box-sizing: border-box; | ||
| border: none; | ||
| cursor: pointer; | ||
| text-decoration: none; | ||
| width: ${({ width }) => width || "100%"}; | ||
| &:disabled { | ||
| cursor: default; | ||
| opacity: 0.5; | ||
| } | ||
| `; | ||
|
|
||
| const AppBtnContainer = styled.span<{ isLoading?: boolean }>` | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| opacity: ${({ isLoading }) => (isLoading ? 0.3 : 1)}; | ||
| transition: opacity 0.15s; | ||
| `; | ||
| const AppBtnLoader = styled.span<{ isLoading?: boolean }>` | ||
| position: absolute; | ||
| display: flex; | ||
| opacity: ${({ isLoading }) => (isLoading ? 1 : 0)}; | ||
| pointer-events: none; | ||
| transition: opacity 0.15s; | ||
| `; | ||
|
|
||
| const AppBtnContent = styled.span` | ||
| margin: 0 8px; | ||
| `; | ||
|
|
||
| AppBtnWrap.defaultProps = { | ||
| variant: "default", | ||
| scale: "default", | ||
| color: "primary", | ||
| as: "button", | ||
| }; | ||
|
|
||
| export default function AppBtn({ loading, ...props }: AppBtnProps & { loading?: boolean }) { | ||
| return ( | ||
| <AppBtnWrap {...props} as={props.to ? "a" : "button"} href={props.to}> | ||
| <AppBtnContainer isLoading={loading}> | ||
| {props.startIcon} | ||
| <AppBtnContent>{props.children}</AppBtnContent> | ||
| {props.endIcon} | ||
| </AppBtnContainer> | ||
| <AppBtnLoader isLoading={loading}> | ||
| <LoadingSpinner duration={"0.4s"} /> | ||
| </AppBtnLoader> | ||
| </AppBtnWrap> | ||
| ); | ||
| } |
Oops, something went wrong.