feat(atoms): add loader

src/atoms/Loader/Loader.js

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { createStyledTag, createTheme } from '../../utils';
+import LoaderIcon from './Loader.svg';
+
+type LoaderProps = {|
+  size?: 'sm' | 'md' | 'lg',
+|};
+
+const name = 'loader';
+
+const theme = createTheme(name, {
+  modifiers: {
+    size: {
+      sm: {
+        width: '4rem',
+        height: '4rem',
+      },
+      md: {
+        width: '6rem',
+        height: '6rem',
+      },
+      lg: {
+        width: '8rem',
+        height: '8rem',
+      },
+    },
+  },
+  defaults: {
+    size: 'md',
+  },
+});
+
+const StyledTag = createStyledTag(name, () => ({}));
+
+const WrapperTag = createStyledTag(`${name}Wrapper`, () => ({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flex: 1,
+  width: '100%',
+  height: '100%',
+}));
+
+function Loader(props: LoaderProps) {
+  if (props.stretch) {
+    return <WrapperTag><StyledTag { ...props } tagName={ LoaderIcon } /></WrapperTag>;
+  }
+
+  return <StyledTag { ...props } tagName={ LoaderIcon } />;
+}
+
+Loader.defaultProps = {
+  stretch: false,
+};
+
+export { Loader, theme };

src/atoms/Loader/Loader.stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default (asStory) => {
+  asStory('ATOMS/Loader', module, (story, { Loader }) => {
+    story
+      .add('with various size', () => (
+        <React.Fragment>
+          <Loader size="sm" />
+          <Loader size="md" />
+          <Loader size="lg" />
+        </React.Fragment>
+      ))
+      .add('with stretch', () => (
+        <React.Fragment>
+          <Loader stretch />
+        </React.Fragment>
+      ));
+  });
+};
+

src/atoms/Loader/index.js

@@ -0,0 +1 @@
+export { Loader, theme } from './Loader';

src/atoms/atoms.js

@@ -33,3 +33,4 @@ export { Tabs } from './Tabs';
 export { Text } from './typography/Text';
 export { TextArea } from './dataEntry/TextArea';
 export { TextAreaField } from './dataEntry/TextAreaField';
+export { Loader } from './Loader';

src/atoms/theme.js

@@ -29,6 +29,7 @@ import { theme as starsTheme } from './Stars';
 import { theme as textAreaFieldTheme } from './dataEntry/TextAreaField';
 import { theme as textAreaTheme } from './dataEntry/TextArea';
 import { theme as textTheme } from './typography/Text';
+import { theme as loaderTheme } from './Loader';
 
 export const theme = {
   ...avatarTheme,
@@ -60,4 +61,5 @@ export const theme = {
   ...textAreaFieldTheme,
   ...textAreaTheme,
   ...textTheme,
+  ...loaderTheme,
 };