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

Basic UX components

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

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

var _default = require('part:@lyra/components/fieldsets/default');

var _default2 = _interopRequireDefault(_default);

var _default3 = require('part:@lyra/components/textfields/default');

var _default4 = _interopRequireDefault(_default3);

var _chance = require('chance');

var _chance2 = _interopRequireDefault(_chance);

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

var _lyra2 = _interopRequireDefault(_lyra);

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

const chance = new _chance2.default();


(0, _storybook.storiesOf)('Fieldsets').addDecorator(_knobs.withKnobs).add('Default',
// `
//   The default fieldset is used to gather a collection of fields.
// `,
() => {
  return _react2.default.createElement(
    _lyra2.default,
    {
      part: 'part:@lyra/components/fieldsets/default',
      propTables: [_default2.default]
    },
    _react2.default.createElement(
      _default2.default,
      {
        legend: (0, _knobs.text)('legend (prop)', 'This is the legend'),
        description: (0, _knobs.text)('description (prop)', 'This is the description'),
        level: (0, _knobs.number)('level (prop)', 1),
        transparent: (0, _knobs.boolean)('transparent (prop)', false),
        tabIndex: (0, _knobs.boolean)('tabIndex', false) ? 0 : false
      },
      (0, _knobs.text)('children (prop)', 'Put content here')
    )
  );
}).add('Nested (demo)', () => {
  return _react2.default.createElement(
    _lyra2.default,
    {
      part: 'part:@lyra/components/fieldsets/default',
      propTables: [_default2.default]
    },
    _react2.default.createElement(
      _default2.default,
      {
        legend: 'This is the legend',
        description: 'Fieldsets supports beeing inside itselfs, and get new styling!',
        level: 1
      },
      _react2.default.createElement(
        _default2.default,
        {
          legend: 'This is the legend in a nested fieldset',
          description: chance.paragraph(),
          level: 2
        },
        'A nested fieldset'
      )
    )
  );
}).add('Crazy nested (demo)',
// `
//   Fieldsets supports beeing inside itselfs, and get new styling!
// `,
() => {
  return _react2.default.createElement(
    _lyra2.default,
    {
      part: 'part:@lyra/components/fieldsets/default',
      propTables: [_default2.default]
    },
    _react2.default.createElement(
      _default2.default,
      {
        legend: 'Dude, I heard you like fieldsets\u2026',
        description: chance.paragraph(),
        level: 1,
        tabIndex: '0'
      },
      _react2.default.createElement(
        _default2.default,
        {
          legend: 'So I put a fieldset in a fieldset\u2026',
          description: chance.paragraph(),
          level: 2,
          tabIndex: '0'
        },
        _react2.default.createElement(
          _default2.default,
          {
            legend: 'In a fieldset\u2026',
            description: chance.paragraph(),
            level: 3,
            tabIndex: '0'
          },
          _react2.default.createElement(
            _default2.default,
            {
              legend: 'In a fieldset!',
              description: chance.paragraph(),
              level: 4,
              tabIndex: '0'
            },
            _react2.default.createElement(
              _default2.default,
              {
                legend: 'In a fieldset!',
                description: chance.paragraph(),
                level: 5,
                tabIndex: '0'
              },
              'Content'
            )
          )
        )
      )
    )
  );
}).add('Collapsible (demo)', () => {
  const level = (0, _knobs.number)('start level', 1);
  const isCollapsible = (0, _knobs.boolean)('isCollapsible', true);
  return _react2.default.createElement(
    _lyra2.default,
    {
      part: 'part:@lyra/components/fieldsets/default',
      propTables: [_default2.default]
    },
    _react2.default.createElement(
      'div',
      null,
      _react2.default.createElement(
        _default2.default,
        {
          isCollapsible: isCollapsible,
          legend: 'Noooo, pick me, pick me!',
          description: chance.sentence(),
          level: level
        },
        _react2.default.createElement(_default4.default, { label: 'Content', level: level + 1 }),
        _react2.default.createElement(_default4.default, {
          label: 'Content',
          level: level + 1,
          description: 'Test this one'
        }),
        _react2.default.createElement(_default4.default, { label: 'Content', level: level + 1 }),
        _react2.default.createElement(_default4.default, { label: 'Content', level: level + 1 })
      ),
      _react2.default.createElement(
        _default2.default,
        {
          legend: 'Fieldsets can be collapsed',
          description: chance.sentence(),
          level: level
        },
        _react2.default.createElement(
          _default2.default,
          {
            isCollapsible: isCollapsible,
            legend: 'Open me',
            description: chance.sentence(),
            level: level + 1
          },
          _react2.default.createElement(_default4.default, { label: 'Content', level: level + 2 }),
          _react2.default.createElement(_default4.default, {
            label: 'Content',
            level: level + 2,
            description: 'Test this one'
          }),
          _react2.default.createElement(_default4.default, { label: 'Content', level: level + 2 }),
          _react2.default.createElement(_default4.default, { label: 'Content', level: level + 2 })
        ),
        _react2.default.createElement(
          _default2.default,
          {
            isCollapsible: isCollapsible,
            legend: 'No, open me!',
            description: chance.sentence(),
            level: level + 1
          },
          _react2.default.createElement(_default4.default, { label: 'Content', level: level + 2 }),
          _react2.default.createElement(_default4.default, {
            label: 'Content',
            level: level + 2,
            description: 'Test this one'
          }),
          _react2.default.createElement(_default4.default, { label: 'Content', level: level + 2 }),
          _react2.default.createElement(_default4.default, { label: 'Content', level: level + 2 })
        ),
        _react2.default.createElement(
          _default2.default,
          {
            isCollapsible: isCollapsible,
            legend: 'Noooo, pick me, pick me!',
            description: chance.sentence(),
            level: level + 1
          },
          _react2.default.createElement(_default4.default, { label: 'Content', level: level + 2 }),
          _react2.default.createElement(_default4.default, {
            label: 'Content',
            level: level + 2,
            description: 'Test this one'
          }),
          _react2.default.createElement(_default4.default, { label: 'Content', level: level + 2 }),
          _react2.default.createElement(_default4.default, { label: 'Content', level: level + 2 })
        )
      )
    )
  );
}).add('Columns (demo)', () => {
  const columns = (0, _knobs.number)('columns', 3);
  const level = (0, _knobs.number)('start level', 1);
  return _react2.default.createElement(
    _lyra2.default,
    {
      part: 'part:@lyra/components/fieldsets/default',
      propTables: [_default2.default]
    },
    _react2.default.createElement(
      _default2.default,
      {
        legend: `${columns}columns`,
        columns: columns,
        description: chance.paragraph(),
        level: level
      },
      _react2.default.createElement(_default2.default, {
        legend: 'Test',
        description: chance.paragraph(),
        level: level + 1
      }),
      _react2.default.createElement(_default2.default, {
        legend: 'Test 2',
        description: chance.paragraph(),
        level: level + 1
      }),
      _react2.default.createElement(_default2.default, {
        legend: 'Test 3',
        description: chance.paragraph(),
        level: level + 1
      })
    )
  );
}).add('Spacing test', () => {
  return _react2.default.createElement(
    'div',
    { style: { margin: '1rem' } },
    _react2.default.createElement(
      _default2.default,
      { legend: 'Test', description: chance.paragraph() },
      _react2.default.createElement(_default4.default, { label: 'Label', placeholder: 'Placeholder' }),
      _react2.default.createElement(_default4.default, { label: 'Label', placeholder: 'Placeholder' })
    ),
    _react2.default.createElement(
      _default2.default,
      { legend: 'Test 2', description: chance.paragraph() },
      _react2.default.createElement(_default4.default, { label: 'Label', placeholder: 'Placeholder' })
    ),
    _react2.default.createElement(_default2.default, { legend: 'Test 3', description: chance.paragraph() })
  );
});