{"size": 1620, "ext": "js", "max_stars_repo_path": "src/stories/Spinner.stories.js", "max_stars_repo_name": "Abdilar/react-button", "max_stars_repo_stars_event_min_datetime": "2021-03-29T19:59:53.000Z", "max_stars_repo_stars_event_max_datetime": "2021-11-18T12:00:45.000Z", "max_issues_repo_path": "src/stories/Spinner.stories.js", "max_issues_repo_name": "Abdilar/react-button", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/stories/Spinner.stories.js", "max_forks_repo_name": "Abdilar/react-button", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 5, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 30.0, "max_line_length": 92, "alphanum_fraction": 0.6524691358}
import React, {useState} from 'react';
import Button from '../';

export default {
  title: 'Spinner Prop',
  component: Button
}

export const isLoading = () => {
  const [isLoading, setIsLoading] = useState(false);
  return (
    <div>
      <div className="wrapper">
        <Button isLoading={isLoading}>Contained</Button>
        <Button variant="outlined" isLoading={isLoading}>Outlined</Button>
        <Button variant="text" isLoading={isLoading}>Text</Button>
      </div>
      <div className="wrapper">
        <button onClick={() => setIsLoading(!isLoading)}>{isLoading ? 'Off' : 'On'}</button>
      </div>
    </div>
  )
};

export const spinnerName = () => (
  <div className="wrapper">
    <Button isLoading={true} spinnerName="uikit">UIkit</Button>
    <Button isLoading={true} spinnerName="three-dots">Three Dots</Button>
    <Button isLoading={true} spinnerName="tail-spin">Tail Spin</Button>
    <Button isLoading={true} spinnerName="rings">Rings</Button>
    <Button isLoading={true} spinnerName="puff">Puff</Button>
    <Button isLoading={true} spinnerName="oval">Oval</Button>
    <Button isLoading={true} spinnerName="grid">Grid</Button>
    <Button isLoading={true} spinnerName="ball-triangle">Ball Triangle</Button>
  </div>
);

export const spinnerRatio = () => (
  <Button isLoading={true} spinnerRatio={0.7}>UIkit</Button>
);

export const spinnerClasses = () => {
  const customClass = {
    wrapper: 'color-lighten-red',
    spinner: 'color-dark-red'
  };

  return (
    <div className="grid">
      <Button isLoading={true} spinnerClasses={customClass}>UIkit</Button>
    </div>
  );
};
