import React from 'react';
import MD from 'react-markdown';
import { Display } from '../../common/Display';
import docs from './Spinner.md';
import { Icon, Spinner, Typography } from '../..';
export default {
  title: 'Atoms / Spinner',
  parameters: {
    component: Spinner
  }
};
export var Documentation = function Documentation() {
  return React.createElement(Typography, null, React.createElement(MD, null, docs), React.createElement("div", null, React.createElement(Spinner, {
    id: "defaultSpinner"
  })), React.createElement("div", null, React.createElement(Spinner, {
    size: 8,
    id: "largerSpinner"
  })));
};
export var SpinnerDefault = {
  render: function render() {
    return React.createElement(Spinner, {
      id: "mySpinner"
    });
  },
  name: 'Spinner default'
};
export var SpinnerBig = {
  render: function render() {
    return React.createElement(Spinner, {
      size: 16,
      id: "mySpinner"
    });
  },
  name: 'Spinner big'
};
export var SpinnerWithFallback = {
  render: function render() {
    return React.createElement("div", {
      style: {
        height: '32px'
      }
    }, React.createElement(Spinner, {
      size: 8,
      id: "mySpinnerFallback",
      fallback: React.createElement(Icon.Account32, null)
    }));
  },
  name: 'Spinner with fallback during the timeout delay instead of null'
};
export var SpinnerWithoutDefaultDelay = {
  render: function render() {
    return React.createElement(Spinner, {
      size: 16,
      id: "mySpinner",
      delay: false
    });
  },
  name: 'Spinner without default delay'
};
export var SpinnerWithCustom2SecDelay = {
  render: function render() {
    return React.createElement(Spinner, {
      size: 16,
      id: "mySpinner",
      delay: 2000
    });
  },
  name: 'Spinner with custom 2 sec delay'
};
export var Colors = function Colors() {
  return React.createElement(Display, {
    items: [{
      title: 'Default',
      component: React.createElement(Spinner, {
        id: "defaultSpinner"
      })
    }, {
      title: 'Color: text',
      component: React.createElement(Spinner, {
        color: function color(t) {
          return t.color.text;
        },
        id: "defaultSpinnerText"
      })
    }, {
      title: 'Color: positive',
      component: React.createElement(Spinner, {
        color: function color(t) {
          return t.color.positive;
        },
        id: "defaultSpinnerPositive"
      })
    }, {
      title: 'Color: negative',
      component: React.createElement(Spinner, {
        color: function color(t) {
          return t.color.negative;
        },
        id: "defaultSpinnerNegative"
      })
    }, {
      title: 'Color: warning',
      component: React.createElement(Spinner, {
        color: function color(t) {
          return t.color.warning;
        },
        id: "defaultSpinnerWarning"
      })
    }, {
      title: 'Color: label',
      component: React.createElement(Spinner, {
        color: function color(t) {
          return t.color.label;
        },
        id: "defaultSpinnerLabel"
      })
    }]
  });
};
export var Regression2SpinnersWithSameColorAndSizeAffectsEachOtherInChrome = {
  render: function render() {
    return React.createElement(React.Fragment, null, React.createElement(Typography, {
      type: "primary"
    }, "Only the one with green border should be shown. The bug before was that if two spinners had the same size and color, both were hidden."), React.createElement("div", {
      style: {
        display: 'none',
        border: '1px red solid'
      }
    }, React.createElement(Spinner, {
      size: 8,
      id: "firstSpinner"
    })), React.createElement("div", {
      style: {
        border: '1px green solid'
      }
    }, React.createElement(Spinner, {
      size: 8,
      id: "secondSpinner"
    })));
  },
  name: 'Regression: 2 spinners with same color and size affects each other in Chrome'
};