@lyra/components/lib/loading/story.js

Basic UX components

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _storybook = require('part:@lyra/storybook');

var _spinner = require('part:@lyra/components/loading/spinner');

var _spinner2 = _interopRequireDefault(_spinner);

var _appLoadingScreen = require('part:@lyra/base/app-loading-screen');

var _appLoadingScreen2 = _interopRequireDefault(_appLoadingScreen);

var _knobs = require('part:@lyra/storybook/addons/knobs');

var _lyra = require('part:@lyra/storybook/addons/lyra');

var _lyra2 = _interopRequireDefault(_lyra);

var _companyLogo = require('part:@lyra/base/company-logo?');

var _companyLogo2 = _interopRequireDefault(_companyLogo);

var _lyraLogo = require('part:@lyra/base/lyra-logo');

var _lyraLogo2 = _interopRequireDefault(_lyraLogo);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

(0, _storybook.storiesOf)('Loading').addDecorator(_knobs.withKnobs).add('Spinner', () => {
  return _react2.default.createElement(
    _lyra2.default,
    { part: 'part:@lyra/components/loading/spinner', propTables: [_spinner2.default] },
    _react2.default.createElement(_spinner2.default, {
      inline: (0, _knobs.boolean)('inline (prop)', false),
      message: (0, _knobs.text)('Message (prop)', 'This is the message'),
      fullscreen: (0, _knobs.boolean)('fullscreen (prop)', false),
      center: (0, _knobs.boolean)('center (prop)', false)
    })
  );
}).add('App loading screen',
// `
//   Used when app is loading. No use of CSSModules.
// `,

() => {
  const logo = _companyLogo2.default || _lyraLogo2.default;
  return _react2.default.createElement(
    _lyra2.default,
    {
      part: 'part:@lyra/base/app-loading-screen',
      propTables: [_appLoadingScreen2.default]
    },
    _react2.default.createElement(_appLoadingScreen2.default, {
      logo: (0, _knobs.boolean)('logo') && logo,
      text: (0, _knobs.text)('text') || undefined
    })
  );
});