From a4252832470cfbdbdbeb94d653847220f3b1b56b Mon Sep 17 00:00:00 2001 From: Maxime Bertrand Date: Wed, 20 Nov 2019 11:52:50 +0100 Subject: [PATCH 1/3] feat: add Loader component --- src/Atoms/Loader/Loader.jsx | 67 +++++++++++++++++++++++++++++ src/Atoms/Loader/Loader.stories.jsx | 21 +++++++++ src/Atoms/Loader/README.md | 1 + src/Atoms/Loader/index.js | 3 ++ src/Atoms/index.js | 1 + src/index.js | 1 + 6 files changed, 94 insertions(+) create mode 100644 src/Atoms/Loader/Loader.jsx create mode 100644 src/Atoms/Loader/Loader.stories.jsx create mode 100644 src/Atoms/Loader/README.md create mode 100644 src/Atoms/Loader/index.js diff --git a/src/Atoms/Loader/Loader.jsx b/src/Atoms/Loader/Loader.jsx new file mode 100644 index 0000000..66012cb --- /dev/null +++ b/src/Atoms/Loader/Loader.jsx @@ -0,0 +1,67 @@ +import React from 'react' +import styled from 'styled-components' + + +const Container = styled.div` + width: 75px; + height: 15px; + margin: 20px auto; + + & > * { + animation: opacity 1s infinite; + width: 15px; + height: 15px; + margin: 0 5px; + -webkit-border-radius: 100%; + -moz-border-radius: 100%; + border-radius: 100%; + background-color: ${({ theme }) => theme.colors.primary}; + float: left; + } + + @keyframes opacity { + 0%, 100% { opacity: 1; } + 60% { opacity: 0; } + } + + @-webkit-keyframes opacity { + 0%, 100% { opacity: 1; } + 60% { opacity: 0; } + } + + @-moz-keyframes opacity { + 0%, 100% { opacity: 1; } + 60% { opacity: 0; } + } + + @-ms-keyframes opacity { + 0%, 100% { opacity: 1; } + 60% { opacity: 0; } + } + + @-o-keyframes opacity { + 0%, 100% { opacity: 1; } + 60% { opacity: 0; } + } +` + + +const BallOne = styled.div` + animation-delay: 0.1s; +` +const BallTwo = styled.div` + animation-delay: 0.3s; +` +const BallThree = styled.div` + animation-delay: 0.5s; +` + +const Loader = ({ children }) => ( + + + + + +) + +export default Loader diff --git a/src/Atoms/Loader/Loader.stories.jsx b/src/Atoms/Loader/Loader.stories.jsx new file mode 100644 index 0000000..cef672f --- /dev/null +++ b/src/Atoms/Loader/Loader.stories.jsx @@ -0,0 +1,21 @@ +import React from 'react' +import { action } from '@storybook/addon-actions' + +import Loader from './index' + +import markdown from './README.md' + +export default { + title: 'Atoms/Loader', +} + +export const loader = () => ( + +) + +loader.story = { + parameters: { + notes: { markdown }, + jest: [], + }, +} diff --git a/src/Atoms/Loader/README.md b/src/Atoms/Loader/README.md new file mode 100644 index 0000000..0a25607 --- /dev/null +++ b/src/Atoms/Loader/README.md @@ -0,0 +1 @@ +## Loader diff --git a/src/Atoms/Loader/index.js b/src/Atoms/Loader/index.js new file mode 100644 index 0000000..eb0b743 --- /dev/null +++ b/src/Atoms/Loader/index.js @@ -0,0 +1,3 @@ +import Loader from './Loader' + +export default Loader diff --git a/src/Atoms/index.js b/src/Atoms/index.js index feb9bde..e2dee15 100644 --- a/src/Atoms/index.js +++ b/src/Atoms/index.js @@ -7,3 +7,4 @@ export { default as Typo } from './Typo' export { default as Banner } from './Banner' export { default as Tooltip } from './Tooltip' export { default as Byte } from './Byte' +export { default as Loader } from './Loader' diff --git a/src/index.js b/src/index.js index 0030d36..8b2a91a 100644 --- a/src/index.js +++ b/src/index.js @@ -8,3 +8,4 @@ export { Typo } from './Atoms' export { Banner } from './Atoms' export { Tooltip } from './Atoms' export { Byte } from './Atoms' +export { Loader } from './Atoms' From c7fbae234050a40f08d61c0a49657668aa58c23a Mon Sep 17 00:00:00 2001 From: Maxime Bertrand Date: Wed, 20 Nov 2019 13:24:41 +0100 Subject: [PATCH 2/3] style: remove multi lf --- src/Atoms/Loader/Loader.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/Atoms/Loader/Loader.jsx b/src/Atoms/Loader/Loader.jsx index 66012cb..fa4fb2a 100644 --- a/src/Atoms/Loader/Loader.jsx +++ b/src/Atoms/Loader/Loader.jsx @@ -1,7 +1,6 @@ import React from 'react' import styled from 'styled-components' - const Container = styled.div` width: 75px; height: 15px; @@ -45,7 +44,6 @@ const Container = styled.div` } ` - const BallOne = styled.div` animation-delay: 0.1s; ` From eca7b287dbba673bc1aa01e191c030d7f8a64865 Mon Sep 17 00:00:00 2001 From: Maxime Bertrand Date: Mon, 25 Nov 2019 13:25:05 +0100 Subject: [PATCH 3/3] fix: remove vendor prefixed style instructions --- src/Atoms/Loader/Loader.jsx | 20 -------------------- 1 file changed, 20 deletions(-) diff --git a/src/Atoms/Loader/Loader.jsx b/src/Atoms/Loader/Loader.jsx index fa4fb2a..eadc11a 100644 --- a/src/Atoms/Loader/Loader.jsx +++ b/src/Atoms/Loader/Loader.jsx @@ -22,26 +22,6 @@ const Container = styled.div` 0%, 100% { opacity: 1; } 60% { opacity: 0; } } - - @-webkit-keyframes opacity { - 0%, 100% { opacity: 1; } - 60% { opacity: 0; } - } - - @-moz-keyframes opacity { - 0%, 100% { opacity: 1; } - 60% { opacity: 0; } - } - - @-ms-keyframes opacity { - 0%, 100% { opacity: 1; } - 60% { opacity: 0; } - } - - @-o-keyframes opacity { - 0%, 100% { opacity: 1; } - 60% { opacity: 0; } - } ` const BallOne = styled.div`