14 |
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/src/components/Heading/types.ts:
--------------------------------------------------------------------------------
1 | export const tags = {
2 | H1: "h1",
3 | H2: "h2",
4 | H3: "h3",
5 | H4: "h4",
6 | H5: "h5",
7 | H6: "h6",
8 | };
9 |
10 | export const sizes = {
11 | MD: "md",
12 | LG: "lg",
13 | XL: "xl",
14 | XXL: "xxl",
15 | };
16 |
17 | export type Tags = typeof tags[keyof typeof tags];
18 | export type Sizes = typeof sizes[keyof typeof sizes];
19 |
20 | export interface HeadingProps {
21 | as?: Tags;
22 | size?: Sizes;
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/Svg/Icons/Minus.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Svg from "../Svg";
3 | import { SvgProps } from "../types";
4 |
5 | const Icon: React.FC{JSON.stringify(state, null, 2)}
15 |
14 |
16 |
17 |
19 |
20 | );
21 | };
22 |
--------------------------------------------------------------------------------
/src/__tests__/components/tag.test.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { renderWithTheme } from "../../testHelpers";
3 | import Tag from "../../components/Tag/Tag";
4 |
5 | it("renders correctly", () => {
6 | const { asFragment } = renderWithTheme(
12 | Core
13 |
14 |
12 | flex
13 |
14 |
13 | pancake
14 |
15 | 13 | Title 14 |
15 |
12 |
16 |
17 |
12 |
19 |
13 | target
14 |
15 |
18 |
14 |
19 |
22 |
23 |
15 | You can apply any flexbox properties on the Flex component.
16 |
17 | List of applicable props
18 |
19 |
20 | Left
21 | right
22 |
23 |
24 | center
25 |
26 |
27 | );
28 | };
29 |
--------------------------------------------------------------------------------
/src/widgets/Menu/icons/Info.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Svg from "../../../components/Svg/Svg";
3 | import { SvgProps } from "../../../components/Svg/types";
4 |
5 | const Icon: React.FC
12 | basic layout
13 |
14 |
25 | cards layout
26 |
27 |
13 | Default
14 | Size md
15 | Size lg
16 | Size xl
17 | Size xxl
18 |
19 | );
20 | };
21 |
22 | export const tags: React.FC = () => {
23 | return (
24 |
25 | Default
26 | Tag h1
27 | Tag h2
28 | Tag h3
29 | Tag h4
30 | Tag h5
31 | Tag h6
32 |
33 | );
34 | };
35 |
--------------------------------------------------------------------------------
/src/components/Text/Text.tsx:
--------------------------------------------------------------------------------
1 | import styled, { DefaultTheme } from "styled-components";
2 | import { space } from "styled-system";
3 | import getThemeValue from "../../util/getThemeValue";
4 | import { TextProps } from "./types";
5 |
6 | interface ThemedProps extends TextProps {
7 | theme: DefaultTheme;
8 | }
9 |
10 | const getColor = ({ color, theme }: ThemedProps) => {
11 | return getThemeValue(`colors.${color}`, color)(theme);
12 | };
13 |
14 | const getFontSize = ({ fontSize, small }: TextProps) => {
15 | return small ? "14px" : fontSize || "16px";
16 | };
17 |
18 | const Text = styled.div
18 |
34 |
21 | Header
22 |
23 |
26 | Body
27 |
28 |
31 | Footer
32 |
33 |
20 |
26 |
32 |
33 |
15 | Hover}>
16 | {[...Array(30)].map(() => (
17 |
20 |
21 | );
22 | };
23 |
24 | export const Top: React.FC = () => {
25 | return (
26 | Content
18 | ))}
19 | Content
30 | ))}
31 | Content
35 | ))}
36 |
17 | {account ? (
18 |
27 | ) : (
28 |
36 | )}
37 |
38 | );
39 | };
40 |
41 | export default UserBlock;
42 |
--------------------------------------------------------------------------------
/src/components/Link/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { PancakesIcon } from "../Svg";
3 | import { Link, LinkExternal } from "./index";
4 |
5 | export default {
6 | title: "Components/Link",
7 | component: Link,
8 | argTypes: {
9 | fontSize: {
10 | name: "fontSize",
11 | table: {
12 | type: { summary: "string", detail: "Fontsize in px or em" },
13 | defaultValue: { summary: "16px" },
14 | },
15 | control: {
16 | type: null,
17 | },
18 | },
19 | },
20 | };
21 |
22 | export const Default: React.FC = () => {
23 | return (
24 |
25 |
48 | );
49 | };
50 |
--------------------------------------------------------------------------------
/src/components/Radio/index.stories.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import Radio from "./Radio";
3 |
4 | export default {
5 | title: "Components/Radio",
6 | component: Radio,
7 | argTypes: {},
8 | };
9 |
10 | export const Default: React.FC = () => {
11 | const [radio, setRadio] = useState("one");
12 | const [radioSm, setRadioSm] = useState("one");
13 |
14 | const handleChange = (evt) => {
15 | // eslint-disable-next-line
16 | console.info("fired");
17 | const { value } = evt.target;
18 | setRadio(value);
19 | };
20 |
21 | const handleChangeSm = (evt) => {
22 | const { value } = evt.target;
23 | setRadioSm(value);
24 | };
25 |
26 | return (
27 | <>
28 |
26 | Default
27 |
28 |
29 |
30 | Custom color
31 |
32 |
33 |
34 |
35 | External
36 |
37 |
38 |
39 |
40 | With icon
41 |
44 |
45 | LinkExternal
46 |
47 |
29 |
32 |
33 |
36 |
37 | );
38 | };
39 |
--------------------------------------------------------------------------------
/src/components/ButtonMenu/ButtonMenuItem.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styled from "styled-components";
3 | import Button from "../Button/Button";
4 | import { sizes, variants } from "../Button/types";
5 | import { ButtonMenuItemProps } from "./types";
6 |
7 | type InactiveButtonProps = {
8 | colorKey: "primary" | "textSubtle";
9 | } & ButtonMenuItemProps;
10 |
11 | const InactiveButton = styled(Button)
27 | {Object.keys(scales).map((key) => (
28 | <>
29 | {key}
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 | ))}
39 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/src/__tests__/components/skeleton.test.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { renderWithTheme } from "../../testHelpers";
3 | import Skeleton from "../../components/Skeleton/Skeleton";
4 |
5 | it("renders correctly", () => {
6 | const { asFragment } = renderWithTheme(
34 | {" "}
35 |
37 | );
38 | };
39 |
40 | export const Text: React.FC = (args) => {
41 | const [loading, setLoading] = useState(true);
42 |
43 | useEffect(() => {
44 | const timer = setTimeout(() => {
45 | setLoading(false);
46 | }, 2000);
47 | return () => clearTimeout(timer);
48 | }, []);
49 |
50 | return {loading ?
;
51 | };
52 |
--------------------------------------------------------------------------------
/src/theme/types.ts:
--------------------------------------------------------------------------------
1 | export type Breakpoints = string[];
2 |
3 | export type MediaQueries = {
4 | xs: string;
5 | sm: string;
6 | md: string;
7 | lg: string;
8 | xl: string;
9 | nav: string;
10 | };
11 |
12 | export type Spacing = number[];
13 |
14 | export type Radii = {
15 | small: string;
16 | default: string;
17 | card: string;
18 | circle: string;
19 | };
20 |
21 | export type Shadows = {
22 | level1: string;
23 | active: string;
24 | success: string;
25 | warning: string;
26 | focus: string;
27 | inset: string;
28 | };
29 |
30 | export type Gradients = {
31 | bubblegum: string;
32 | };
33 |
34 | export type Colors = {
35 | primary: string;
36 | primaryBright: string;
37 | primaryDark: string;
38 | secondary: string;
39 | tertiary: string;
40 | success: string;
41 | failure: string;
42 | warning: string;
43 | contrast: string;
44 | invertedContrast: string;
45 | input: string;
46 | background: string;
47 | backgroundDisabled: string;
48 | text: string;
49 | textDisabled: string;
50 | textSubtle: string;
51 | borderColor: string;
52 | card: string;
53 |
54 | // Gradients
55 | gradients: Gradients;
56 |
57 | // Brand colors
58 | binance: string;
59 | };
60 |
61 | export type ZIndices = {
62 | dropdown: number;
63 | modal: number;
64 | };
65 |
--------------------------------------------------------------------------------
/src/components/Spinner/Spinner.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styled, { keyframes } from "styled-components";
3 | import PanIcon from "./PanIcon";
4 | import PancakeIcon from "./PancakeIcon";
5 | import { SpinnerProps } from "./types";
6 |
7 | const rotate = keyframes`
8 | from {
9 | transform: rotate(0deg);
10 | }
11 | to {
12 | transform: rotate(360deg);
13 | }
14 | `;
15 |
16 | const float = keyframes`
17 | 0% {
18 | transform: translatey(0px);
19 | }
20 | 50% {
21 | transform: translatey(10px);
22 | }
23 | 100% {
24 | transform: translatey(0px);
25 | }
26 | `;
27 |
28 | const Container = styled.div`
29 | position: relative;
30 | `;
31 |
32 | const RotatingPancakeIcon = styled(PancakeIcon)`
33 | position: absolute;
34 | top: 0;
35 | left: 0;
36 | animation: ${rotate} 2s linear infinite;
37 | transform: translate3d(0, 0, 0);
38 | `;
39 |
40 | const FloatingPanIcon = styled(PanIcon)`
41 | animation: ${float} 6s ease-in-out infinite;
42 | transform: translate3d(0, 0, 0);
43 | `;
44 |
45 | const Spinner: React.FC
44 | Default
45 | Bold text
46 | Small text
47 | Custom fontsize
48 | Custom color
49 | Custom color from theme
50 |
51 | with text transform
52 |
53 |
54 | );
55 | };
56 |
--------------------------------------------------------------------------------
/src/widgets/Menu/icons/Telegram.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Svg from "../../../components/Svg/Svg";
3 | import { SvgProps } from "../../../components/Svg/types";
4 |
5 | const Icon: React.FC{text}
54 |
13 |
45 |
16 |
27 |
28 |
31 |
44 |
35 | Alert title
36 |
37 | 41 | Description 42 |
43 || {cell.render()} | 30 | ))} 31 |
54 |
56 | );
57 | };
58 |
--------------------------------------------------------------------------------
/src/widgets/Menu/Avatar.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styled from "styled-components";
3 | import { Link } from "react-router-dom";
4 | import { Profile } from "./types";
5 | import NoProfileAvatar from "../../components/Svg/Icons/NoProfileAvatar";
6 |
7 | interface AvatarProps {
8 | profile: Profile;
9 | }
10 |
11 | const StyledAvatar = styled.div`
12 | margin-left: 8px;
13 | position: relative;
14 |
15 | img {
16 | border-radius: 50%;
17 | }
18 | `;
19 |
20 | const Pip = styled.div`
21 | background-color: ${({ theme }) => theme.colors.failure};
22 | border-radius: 50%;
23 | pointer-events: none;
24 | height: 8px;
25 | position: absolute;
26 | right: 0;
27 | top: 0;
28 | width: 8px;
29 | `;
30 |
31 | const Avatar: React.FC
22 |
23 |
24 | This is a description
25 |
26 |
27 |
28 |
29 | This is a description
30 |
31 |
32 |
33 |
34 | This is a description
35 |
36 |
37 |
38 |
39 | This is a description
40 |
41 |
42 |
43 | );
44 | };
45 |
46 | const handleClick = noop;
47 |
48 | export const WithHandler: React.FC = () => {
49 | return (
50 |
51 |
52 |
54 |
55 |
56 | A description of the success alert
57 |
58 |
59 |
60 |
62 |
63 |
65 |
66 | );
67 | };
68 |
--------------------------------------------------------------------------------
/src/widgets/Menu/MenuEntry.tsx:
--------------------------------------------------------------------------------
1 | import styled, { keyframes, DefaultTheme } from "styled-components";
2 | import { MENU_ENTRY_HEIGHT } from "./config";
3 |
4 | export interface Props {
5 | secondary?: boolean;
6 | isActive?: boolean;
7 | theme: DefaultTheme;
8 | }
9 |
10 | const rainbowAnimation = keyframes`
11 | 0%,
12 | 100% {
13 | background-position: 0 0;
14 | }
15 | 50% {
16 | background-position: 100% 0;
17 | }
18 | `;
19 |
20 | const LinkLabel = styled.div<{ isPushed: boolean }>`
21 | color: ${({ isPushed, theme }) => (isPushed ? theme.colors.textSubtle : "transparent")};
22 | transition: color 0.4s;
23 | flex-grow: 1;
24 | `;
25 |
26 | const MenuEntry = styled.div
17 |
54 |
20 |
48 |
23 |
30 |
47 | 27 | Title 28 |
29 |
51 | body
52 |
53 |
29 |
30 |
31 |
32 | );
33 | };
34 |
35 | export const DisableOverlayClick: React.FC = () => {
36 | const [onPresent1] = useModal(
40 |
41 |
42 | );
43 | };
44 |
45 | interface BackButtonModalProps extends InjectedProps {
46 | title: string;
47 | }
48 |
49 | const BackButtonModal: React.FC
15 | 
16 |
18 | );
19 | };
20 |
21 | export const ImageResponsive: React.FC = () => {
22 | return (
23 | Image
17 |
24 |
25 |
27 | );
28 | };
29 |
30 | export const Background: React.FC = () => {
31 | return (
32 | Image
26 |
33 |
36 | );
37 | };
38 |
39 | export const BackgroundResponsive: React.FC = () => {
40 | return (
41 | Background Image
35 |
42 |
45 | );
46 | };
47 |
48 | export const LazyImages: React.FC = () => {
49 | return (
50 | Background Image
44 |