@salesforce/design-system-react/module/components/spinner/__docs__/storybook-stories.js

Salesforce Lightning Design System for React

/* eslint-disable indent */
import React from 'react';
import { storiesOf } from '@storybook/react';
import IconSettings from '../../icon-settings';
import { SPINNER } from '../../../utilities/constants';
import Spinner from '../../spinner';
import Default from '../__examples__/default';

var getSpinner = function getSpinner(props) {
  return (
    /*#__PURE__*/
    React.createElement(Spinner, props)
  );
};

var inverseContainerStyle = {
  backgroundColor: '#16325c',
  position: 'absolute',
  width: '100%',
  height: '100%'
};

var inverseContainer = function inverseContainer(getStory) {
  return (
    /*#__PURE__*/
    React.createElement("div", {
      style: inverseContainerStyle
    }, getStory())
  );
};

var inlineContainerStyle = {
  height: '4rem'
};

var inlineContainer = function inlineContainer(getStory) {
  return (
    /*#__PURE__*/
    React.createElement("div", {
      className: "slds-align_absolute-center",
      style: inlineContainerStyle
    }, getStory())
  );
};

storiesOf(SPINNER, module).addDecorator(function (getStory) {
  return (
    /*#__PURE__*/
    React.createElement("div", {
      className: "slds-p-around_medium"
    },
    /*#__PURE__*/
    React.createElement(IconSettings, {
      iconPath: "/assets/icons"
    }, getStory()))
  );
}).add('Xx-Small', function () {
  return getSpinner({
    size: 'xx-small',
    variant: 'base',
    assistiveText: {
      label: 'Main Frame Loading...'
    }
  });
}).add('X-Small', function () {
  return getSpinner({
    size: 'x-small',
    variant: 'base',
    assistiveText: {
      label: 'Main Frame Loading...'
    }
  });
}).add('Small', function () {
  return getSpinner({
    size: 'small',
    variant: 'base',
    assistiveText: {
      label: 'Main Frame Loading...'
    }
  });
}).add('Medium', function () {
  return getSpinner({
    size: 'medium',
    variant: 'base'
  });
}).add('Large', function () {
  return getSpinner({
    size: 'large',
    variant: 'base'
  });
}).add('Brand Xx-Small', function () {
  return getSpinner({
    size: 'xx-small',
    variant: 'brand'
  });
}).add('Brand X-Small', function () {
  return getSpinner({
    size: 'x-small',
    variant: 'brand'
  });
}).add('Brand Small', function () {
  return getSpinner({
    size: 'small',
    variant: 'brand'
  });
}).add('Brand Medium', function () {
  return getSpinner({
    size: 'medium',
    variant: 'brand'
  });
}).add('Brand Large', function () {
  return getSpinner({
    size: 'large',
    variant: 'brand',
    containerClassName: 'my-custom-classname'
  });
}).add('Large with 300ms delay', function () {
  return getSpinner({
    size: 'large',
    variant: 'base',
    isDelayed: true
  });
}).add('Inverse Xx-Small', function () {
  return getSpinner({
    size: 'xx-small',
    variant: 'inverse'
  });
}, {
  decorators: [inverseContainer]
}).add('Inverse X-Small', function () {
  return getSpinner({
    size: 'x-small',
    variant: 'inverse'
  });
}, {
  decorators: [inverseContainer]
}).add('Inverse Small', function () {
  return getSpinner({
    size: 'small',
    variant: 'inverse'
  });
}, {
  decorators: [inverseContainer]
}).add('Inverse Medium', function () {
  return getSpinner({
    size: 'medium',
    variant: 'inverse'
  });
}, {
  decorators: [inverseContainer]
}).add('Inverse Large', function () {
  return getSpinner({
    size: 'large',
    variant: 'inverse'
  });
}, {
  decorators: [inverseContainer]
}).add('Inline', function () {
  return getSpinner({
    isInline: true,
    hasContainer: false
  });
}, {
  decorators: [inlineContainer]
}).add('No Container', function () {
  return getSpinner({
    hasContainer: false
  });
}, {
  decorators: [inlineContainer]
}).add('Docs site Default', function () {
  return (
    /*#__PURE__*/
    React.createElement(Default, null)
  );
});
//# sourceMappingURL=storybook-stories.js.map