Skip to content
This repository has been archived by the owner on Oct 17, 2020. It is now read-only.

Add Spinner story #1006

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Add Spinner story #1006

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
62ae301
Add Spinner story
Coteh Aug 27, 2020
1a08315
Apply suggestions from code review
Coteh Aug 28, 2020
8fe198b
Merge branch 'master' into spinner-story
Coteh Sep 4, 2020
e4122f0
Wrap Spinner component in story & rename
Coteh Sep 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 frontend/src/component/ui/Spinner.scss → ...tend/src/component/ui/Spinner.module.scss
View file
Open in desktop
File renamed without changes.
20 changes: 10 additions & 10 deletions frontend/src/component/ui/Spinner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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']}>
Coteh marked this conversation as resolved.
Show resolved Hide resolved
<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>
Expand Down
11 changes: 11 additions & 0 deletions story/src/2-Spinner.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from 'react';
import { Spinner } from '../../frontend/src/component/ui/Spinner';

export default {
title: 'UI/Spinner',
component: Spinner
};

export const spinner = () => {
return <Spinner />;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we wrap the spanner with a background? It's too to see the orbitals and planet on storybook.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll see what I can do with Storybook Backgrounds. I'll wrap the component with background as fallback in case that doesn't work out.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here's how it looks now, using the dark color that comes with Storybook Backgrounds addon

image

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One caveat, if you switch background color, it'll always stay that color, even when selecting Spinner story. I'm going to fallback to wrapping.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

};