diff --git a/src/__tests__/components/spinner.test.tsx b/src/__tests__/components/spinner.test.tsx new file mode 100644 index 000000000..9eecf0152 --- /dev/null +++ b/src/__tests__/components/spinner.test.tsx @@ -0,0 +1,105 @@ +import React from "react"; +import { renderWithTheme } from "../../testHelpers"; +import { Spinner } from "../../components/Spinner"; + +it("renders correctly", () => { + const { asFragment } = renderWithTheme(); + expect(asFragment()).toMatchInlineSnapshot(` + +
+ + + + + + + + + + + + + + + + + + +
+ + `); +}); diff --git a/src/components/Spinner/PanIcon.tsx b/src/components/Spinner/PanIcon.tsx new file mode 100644 index 000000000..a39d5f9fb --- /dev/null +++ b/src/components/Spinner/PanIcon.tsx @@ -0,0 +1,68 @@ +import React from "react"; +import Svg from "../Svg/Svg"; +import { SvgProps } from "../Svg/types"; + +const Icon: React.FC = (props) => { + return ( + + + + + + + + + + + + + + ); +}; + +export default Icon; diff --git a/src/components/Spinner/PancakeIcon.tsx b/src/components/Spinner/PancakeIcon.tsx new file mode 100644 index 000000000..201b613da --- /dev/null +++ b/src/components/Spinner/PancakeIcon.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import Svg from "../Svg/Svg"; +import { SvgProps } from "../Svg/types"; + +const Icon: React.FC = (props) => { + return ( + + + + + + ); +}; + +export default Icon; diff --git a/src/components/Spinner/Spinner.tsx b/src/components/Spinner/Spinner.tsx new file mode 100644 index 000000000..e441a9aeb --- /dev/null +++ b/src/components/Spinner/Spinner.tsx @@ -0,0 +1,54 @@ +import React from "react"; +import styled, { keyframes } from "styled-components"; +import PanIcon from "./PanIcon"; +import PancakeIcon from "./PancakeIcon"; +import { SpinnerProps } from "./types"; + +const rotate = keyframes` + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +`; + +const float = keyframes` + 0% { + transform: translatey(0px); + } + 50% { + transform: translatey(-20px); + } + 100% { + transform: translatey(0px); + } +`; + +const Container = styled.div` + position: relative; +`; + +const RotatingPancakeIcon = styled(PancakeIcon)` + position: absolute; + top: 0; + left: 0; + animation: ${rotate} 2s linear infinite; + transform: translate3d(0, 0, 0); +`; + +const FloatingPanIcon = styled(PanIcon)` + animation: ${float} 6s ease-in-out infinite; + transform: translate3d(0, 0, 0); +`; + +const Spinner: React.FC = ({ size = 300 }) => { + return ( + + + + + ); +}; + +export default Spinner; diff --git a/src/components/Spinner/index.stories.tsx b/src/components/Spinner/index.stories.tsx new file mode 100644 index 000000000..ba96abcf7 --- /dev/null +++ b/src/components/Spinner/index.stories.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import Spinner from "./Spinner"; + +export default { + title: "Components/Spinner", + component: Spinner, + argTypes: {}, +}; + +export const Default: React.FC = () => { + return ; +}; diff --git a/src/components/Spinner/index.tsx b/src/components/Spinner/index.tsx new file mode 100644 index 000000000..08687fff0 --- /dev/null +++ b/src/components/Spinner/index.tsx @@ -0,0 +1,2 @@ +export { default as Spinner } from "./Spinner"; +export type { SpinnerProps } from "./types"; diff --git a/src/components/Spinner/types.ts b/src/components/Spinner/types.ts new file mode 100644 index 000000000..44ac9a2ba --- /dev/null +++ b/src/components/Spinner/types.ts @@ -0,0 +1,3 @@ +export interface SpinnerProps { + size?: number; +} diff --git a/src/index.ts b/src/index.ts index 7620aa92c..3091a0b6d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -15,6 +15,7 @@ export * from "./components/Tag"; export * from "./components/Text"; export * from "./components/Link"; export * from "./components/Progress"; +export * from "./components/Spinner"; export * from "./components/Skeleton"; export * from "./components/Toggle"; export * from "./components/Table";