kitten-components/dist/javascripts/kitten/components/expandable/expand-board.stories.js

Front-end components library

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _react3 = require('@storybook/react');

var _addonInfo = require('@storybook/addon-info');

var _react4 = require('@storybook/addon-knobs/react');

var _radium = require('radium');

var _expandBoard = require('kitten/components/expandable/expand-board');

var _grid = require('kitten/components/grid/grid');

var _expandBoard2 = require('kitten/components/expandable/expand-board.examples');

var _colorsConfig = require('kitten/constants/colors-config');

var _colorsConfig2 = _interopRequireDefault(_colorsConfig);

var _typography = require('kitten/helpers/utils/typography');

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

(0, _react3.storiesOf)('Expandable', module).addDecorator(_react4.withKnobs).add('ExpandBoard', (0, _addonInfo.withInfo)('The ExpandBoard is a container that can expand on click. It can accept any content.')(function () {
  return _react2.default.createElement(
    _radium.StyleRoot,
    null,
    _react2.default.createElement(
      'div',
      { style: styles.container },
      _react2.default.createElement(
        _grid.Grid,
        null,
        _react2.default.createElement(
          _grid.GridCol,
          { offset: '1', col: '10' },
          _react2.default.createElement(
            _expandBoard.ExpandBoard,
            { withAnimation: (0, _react4.boolean)('withAnimation', true) },
            _react2.default.createElement(
              _expandBoard.ExpandBoard.Button,
              {
                expandChildren: (0, _react4.text)('Expanded button text', 'Lancez votre projet')
              },
              (0, _react4.text)('Button text', 'KissKissBankBank & Co')
            ),
            _react2.default.createElement(
              _expandBoard.ExpandBoard.Content,
              null,
              _react2.default.createElement(
                'div',
                { style: styles.expandBoard.defaultContent },
                (0, _react4.text)('Board content', 'KissKissBankBank et 1 483 037 KissBankers vous aident \xE0\n                        r\xE9aliser vos projets cr\xE9atifs, associatifs et\n                        entrepreneuriaux. Participez \xE0 la naissance de projets\n                        inspirants.')
              )
            )
          )
        )
      )
    )
  );
})).add('ExpandBoard with a List of ButtonItem', (0, _addonInfo.withInfo)('This is an example of ExpandBoard composition with a list of buttons as content.')(function () {
  return _react2.default.createElement(
    _radium.StyleRoot,
    null,
    _react2.default.createElement(
      'div',
      { style: styles.container },
      _react2.default.createElement(
        _grid.Grid,
        null,
        _react2.default.createElement(
          _grid.GridCol,
          { offset: '1', col: '10' },
          _react2.default.createElement(_expandBoard2.ExpandBoardWithButtonItemList, {
            expandedButtonText: (0, _react4.text)('Expanded button text', 'Précisez votre choix'),
            buttonText: (0, _react4.text)('Button text', 'Je soutiens'),
            withAnimation: (0, _react4.boolean)('With animation', true)
          })
        )
      )
    )
  );
}));

var styles = {
  container: {
    margin: (0, _typography.pxToRem)(30),
    paddingBottom: (0, _typography.pxToRem)(30),
    borderBottom: '2px solid ' + _colorsConfig2.default.line2
  },
  expandBoard: {
    defaultContent: {
      padding: '1.5em',
      borderLeft: _colorsConfig2.default.line1 + ' 0.125rem solid',
      borderRight: _colorsConfig2.default.line1 + ' 0.125rem solid',
      borderBottom: _colorsConfig2.default.line1 + ' 0.125rem solid'
    }
  }
};