Unverified Commit 638b7417 authored by Andrey Azov's avatar Andrey Azov Committed by GitHub
Browse files

Add spinning loader (#23)

parent 2609cd11
Pipeline #15793 failed with stage
in 2 minutes and 54 seconds
@import 'src/styles/common';
.circleLoader {
display: inline-block;
border: 3px solid $ens-light-grey;
border-top-color: $ens-red;
width: 40px;
height: 40px;
border-radius: 100%;
animation: loader-spin 1.3s linear infinite;
}
@keyframes loader-spin {
to {
transform: rotate(360deg);
}
}
import React from 'react';
import classNames from 'classnames';
import styles from './Loader.scss';
type Props = {
className?: string;
};
export const CircleLoader = (props: Props) => {
const className = classNames(styles.circleLoader, props.className);
return <div className={className} />;
};
...@@ -106,9 +106,13 @@ $ens-blue: #33adff; // blue on black ...@@ -106,9 +106,13 @@ $ens-blue: #33adff; // blue on black
$ens-dark-blue: #0099ff; // blue on white $ens-dark-blue: #0099ff; // blue on white
$ens-light-grey: #f1f2f4; $ens-light-grey: #f1f2f4;
$ens-medium-light-grey: #d4d9de;
$ens-grey: #b7c0c8; $ens-grey: #b7c0c8;
$ens-medium-dark-grey: #9aa7b1;
$ens-dark-grey: #6f8190; $ens-dark-grey: #6f8190;
$ens-red: #d90000;
$ens-white: #fff; $ens-white: #fff;
/* stylelint-disable */ /* stylelint-disable */
...@@ -117,8 +121,11 @@ $ens-white: #fff; ...@@ -117,8 +121,11 @@ $ens-white: #fff;
ens-blue: $ens-blue; ens-blue: $ens-blue;
ens-light-blue: $ens-light-blue; ens-light-blue: $ens-light-blue;
ens-dark-blue: $ens-dark-blue; ens-dark-blue: $ens-dark-blue;
ens-red: $ens-red;
ens-dark-grey: $ens-dark-grey; ens-dark-grey: $ens-dark-grey;
ens-medium-dark-grey: $ens-medium-dark-grey;
ens-grey: $ens-grey; ens-grey: $ens-grey;
ens-medium-light-grey: $ens-medium-light-grey;
ens-light-grey: $ens-light-grey; ens-light-grey: $ens-light-grey;
ens-white: $ens-white; ens-white: $ens-white;
} }
......
...@@ -25,16 +25,31 @@ const colours = [ ...@@ -25,16 +25,31 @@ const colours = [
variableName: '$ens-light-blue', variableName: '$ens-light-blue',
value: variables['ens-light-blue'] value: variables['ens-light-blue']
}, },
{
name: 'Ensembl red',
variableName: '$ens-red',
value: variables['ens-red']
},
{ {
name: 'Ensembl grey', name: 'Ensembl grey',
variableName: '$ens-grey', variableName: '$ens-grey',
value: variables['ens-grey'] value: variables['ens-grey']
}, },
{
name: 'Ensembl medium dark grey',
variableName: '$ens-medium-dark-grey',
value: variables['ens-medium-dark-grey']
},
{ {
name: 'Ensembl dark grey', name: 'Ensembl dark grey',
variableName: '$ens-dark-grey', variableName: '$ens-dark-grey',
value: variables['ens-dark-grey'] value: variables['ens-dark-grey']
}, },
{
name: 'Ensembl medium light grey',
variableName: '$ens-medium-light-grey',
value: variables['ens-medium-light-grey']
},
{ {
name: 'Ensembl light grey', name: 'Ensembl light grey',
variableName: '$ens-light-grey', variableName: '$ens-light-grey',
...@@ -51,8 +66,8 @@ storiesOf('Design Primitives|Colours', module).add( ...@@ -51,8 +66,8 @@ storiesOf('Design Primitives|Colours', module).add(
'colour palette', 'colour palette',
() => ( () => (
<> <>
{colours.map((colourData) => ( {colours.map((colourData, index) => (
<ColourCard {...colourData} /> <ColourCard key={index} {...colourData} />
))} ))}
</> </>
), ),
......
...@@ -4,3 +4,4 @@ import './dropdown/Dropdown.stories'; ...@@ -4,3 +4,4 @@ import './dropdown/Dropdown.stories';
import './input/Input.stories'; import './input/Input.stories';
import './search-field/SearchField.stories'; import './search-field/SearchField.stories';
import './autosuggest-search-field/AutosuggestSearchField.stories'; import './autosuggest-search-field/AutosuggestSearchField.stories';
import './loader/Loader.stories';
.fullPageWrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
import React, { useState } from 'react';
import { storiesOf } from '@storybook/react';
import { CircleLoader } from 'src/shared/loader/Loader';
import styles from './Loader.stories.scss';
storiesOf('Components|Shared Components/Loader', module).add(
'full-page',
() => (
<div className={styles.fullPageWrapper}>
<CircleLoader />
</div>
)
);
@import 'src/styles/common';
.searchFieldWrapper { .searchFieldWrapper {
padding: 40px; padding: 40px;
} }
...@@ -7,3 +9,11 @@ ...@@ -7,3 +9,11 @@
width: 300px; width: 300px;
align-items: center; align-items: center;
} }
.circleLoader {
height: 20px;
width: 20px;
border-width: 1px;
border-color: $ens-medium-light-grey;
border-top-color: $ens-red;
}
...@@ -4,6 +4,7 @@ import { action } from '@storybook/addon-actions'; ...@@ -4,6 +4,7 @@ import { action } from '@storybook/addon-actions';
import SearchField from 'src/shared/search-field/SearchField'; import SearchField from 'src/shared/search-field/SearchField';
import QuestionButton from 'src/shared/question-button/QuestionButton'; import QuestionButton from 'src/shared/question-button/QuestionButton';
import { CircleLoader } from 'src/shared/loader/Loader';
import styles from './SearchField.stories.scss'; import styles from './SearchField.stories.scss';
...@@ -18,13 +19,18 @@ const Wrapper = (props: any) => { ...@@ -18,13 +19,18 @@ const Wrapper = (props: any) => {
); );
}; };
storiesOf('Components|Shared Components/SearchField', module).add( storiesOf('Components|Shared Components/SearchField', module)
'default', .add('default', () => (
() => (
<Wrapper <Wrapper
searchField={SearchField} searchField={SearchField}
className={styles.searchField} className={styles.searchField}
rightCorner={<QuestionButton onHover={action('question-button-hover')} />} rightCorner={<QuestionButton onHover={action('question-button-hover')} />}
/> />
) ))
); .add('with loader', () => (
<Wrapper
searchField={SearchField}
className={styles.searchField}
rightCorner={<CircleLoader className={styles.circleLoader} />}
/>
));
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment