Add Spinner story

frontend/src/component/ui/Spinner.tsx

@@ -1,19 +1,19 @@
 import React, { Component } from 'react';
 
-import './Spinner.scss';
+import styles from './Spinner.module.scss';
 
 export class Spinner extends Component {
  render() {
  return (
- <div className={'spinner'}>
- <div className={'solar-system'}>
- <div className={'earth-orbit orbit'}>
- <div className={'planet earth'} />
- <div className={'venus-orbit orbit'}>
- <div className={'planet venus'} />
- <div className={'mercury-orbit orbit'}>
- <div className={'planet mercury'} />
- <div className={'sun'} />
+ <div className={styles.spinner}>
+ <div className={styles['solar-system']}>
+ <div className={`${styles['earth-orbit']} ${styles['orbit']}`}>
+ <div className={`${styles['planet']} ${styles['earth']}`} />
+ <div className={`${styles['venus-orbit']} ${styles['orbit']}`}>
+ <div className={`${styles['planet']} ${styles['venus']}`} />
+ <div className={`${styles['mercury-orbit']} ${styles['orbit']}`}>
+ <div className={`${styles['planet']} ${styles['mercury']}`} />
+ <div className={styles['sun']} />
  </div>
  </div>
  </div>

story/src/4-Spinner.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Spinner } from '../../frontend/src/component/ui/Spinner';
+
+export default {
+ title: 'UI/Spinner',
+ component: Spinner
+};
+
+export const spinner = () => {
+ return (
+ <div
+ style={{
+ backgroundColor: '#000'
+ }}
+ >
+ <Spinner />
+ </div>
+ );
+};