@flexis/ui/components/FormGroup/FormGroup.stories.js

Styleless React Components

"use strict";

var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");

var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");

_Object$defineProperty(exports, "__esModule", {
  value: true
});

exports.default = exports.events = exports.stylableApi = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));

var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));

var _react = _interopRequireDefault(require("react"));

var _addonActions = require("@storybook/addon-actions");

var _react2 = require("@storybook/addon-knobs/react");

var _stories = require("../../helpers/stories");

var _types = require("../common/types");

var _Input = _interopRequireDefault(require("../Input"));

var _Textarea = _interopRequireDefault(require("../Textarea"));

var _ = _interopRequireDefault(require("./"));

var _context;

var _createElement = _react.default.createElement;
var _global = global,
    TestIcon = _global.TestIcon;
var stylableApi = (0, _concat.default)(_context = "\nStylable API\n---\n- :withIcon\n- ::label\n- ::input\n\t- :flex\n".concat((0, _stories.buildInfo)([{
  values: _types.AlignSideValues,
  prefix: ':',
  postfix: 'icon',
  indent: 1
}]), "\n- ::description\n- ::icon\n")).call(_context, (0, _stories.buildInfo)([{
  values: _types.AlignSideValues,
  prefix: ':',
  postfix: 'align',
  indent: 1
}]), "\n");
exports.stylableApi = stylableApi;
var events = {
  onChange: (0, _addonActions.action)('change'),
  onFocus: (0, _addonActions.action)('focus'),
  onBlur: (0, _addonActions.action)('blur')
};
exports.events = events;

var _ref = /*#__PURE__*/_createElement(TestIcon, null);

var _ref2 = /*#__PURE__*/_createElement(TestIcon, null);

var _default = (0, _stories.storiesOf)('FormGroup', module).addParameters({
  info: stylableApi
}).add('with input', function () {
  return _createElement(_.default, {
    id: "input-id",
    flex: (0, _react2.boolean)('Flex', true),
    label: (0, _react2.text)('Label', 'Text label')
  }, _createElement(_Input.default, (0, _extends2.default)({}, events, {
    defaultValue: ""
  })));
}).add('with textarea', function () {
  return _createElement(_.default, {
    id: "input-id",
    flex: (0, _react2.boolean)('Flex', true),
    label: (0, _react2.text)('Label', 'Text label')
  }, _createElement(_Textarea.default, (0, _extends2.default)({}, events, {
    defaultValue: ""
  })));
}).add('with input and text description', function () {
  return _createElement(_.default, {
    id: "input-id",
    flex: (0, _react2.boolean)('Flex', true),
    label: (0, _react2.text)('Label', 'Text label'),
    description: (0, _react2.text)('Description', 'Description label')
  }, _createElement(_Input.default, (0, _extends2.default)({}, events, {
    defaultValue: ""
  })));
}).add('with required state', function () {
  return _createElement(_.default, {
    id: "input-id",
    label: (0, _react2.text)('Label', 'Text label'),
    description: (0, _react2.text)('Description', 'Description label')
  }, _createElement(_Input.default, (0, _extends2.default)({}, events, {
    required: (0, _react2.boolean)('Required', true),
    defaultValue: ""
  })));
}).add('with input and icon', function () {
  return _createElement(_.default, {
    id: "input-id",
    flex: (0, _react2.boolean)('Flex', true),
    label: (0, _react2.text)('Label', 'Text label'),
    description: (0, _react2.text)('Description', 'Description label'),
    icon: _ref,
    alignIcon: (0, _react2.select)('Align icon', _types.AlignSideValues, 'left')
  }, _createElement(_Input.default, (0, _extends2.default)({}, events, {
    required: (0, _react2.boolean)('Required', false),
    defaultValue: ""
  })));
}).add('with textarea and icon', function () {
  return _createElement(_.default, {
    id: "input-id",
    label: (0, _react2.text)('Label', 'Text label'),
    icon: _ref2,
    alignIcon: (0, _react2.select)('Align icon', _types.AlignSideValues, 'left')
  }, _createElement(_Textarea.default, (0, _extends2.default)({}, events, {
    defaultValue: ""
  })));
}).add('with custom label', function () {
  return _createElement(_.default, {
    id: "input-id",
    label: _createElement("b", null, (0, _react2.text)('Label', 'Custom label'))
  }, _createElement(_Input.default, (0, _extends2.default)({}, events, {
    defaultValue: ""
  })));
});

exports.default = _default;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0Zvcm1Hcm91cC9Gb3JtR3JvdXAuc3Rvcmllcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7OztBQUFBOztBQUNBOztBQUdBOztBQUtBOztBQUlBOztBQUdBOztBQUNBOztBQUNBOzs7OztjQUlJLE07SUFESCxRLFdBQUEsUTtBQUdNLElBQU0sV0FBVyxnSEFPdEIsd0JBQVUsQ0FDWDtBQUNDLEVBQUEsTUFBTSxFQUFHLHNCQURWO0FBRUMsRUFBQSxNQUFNLEVBQUcsR0FGVjtBQUdDLEVBQUEsT0FBTyxFQUFFLE1BSFY7QUFJQyxFQUFBLE1BQU0sRUFBRztBQUpWLENBRFcsQ0FBVixDQVBzQixtREFpQnRCLHdCQUFVLENBQ1g7QUFDQyxFQUFBLE1BQU0sRUFBRyxzQkFEVjtBQUVDLEVBQUEsTUFBTSxFQUFHLEdBRlY7QUFHQyxFQUFBLE9BQU8sRUFBRSxPQUhWO0FBSUMsRUFBQSxNQUFNLEVBQUc7QUFKVixDQURXLENBQVYsQ0FqQnNCLE9BQWpCOztBQTJCQSxJQUFNLE1BQU0sR0FBRztBQUNyQixFQUFBLFFBQVEsRUFBRSwwQkFBTyxRQUFQLENBRFc7QUFFckIsRUFBQSxPQUFPLEVBQUcsMEJBQU8sT0FBUCxDQUZXO0FBR3JCLEVBQUEsTUFBTSxFQUFJLDBCQUFPLE1BQVA7QUFIVyxDQUFmOzs7d0JBZ0ZHLGVBQUMsUUFBRCxPOzt5QkFpQkEsZUFBQyxRQUFELE87O2VBM0ZLLHdCQUFVLFdBQVYsRUFBdUIsTUFBdkIsRUFDYixhQURhLENBQ0M7QUFDZCxFQUFBLElBQUksRUFBRTtBQURRLENBREQsRUFJYixHQUphLENBS2IsWUFMYSxFQU1iO0FBQUEsU0FDQyxlQUFDLFNBQUQ7QUFDQyxJQUFBLEVBQUUsRUFBQyxVQURKO0FBRUMsSUFBQSxJQUFJLEVBQUUscUJBQVEsTUFBUixFQUFnQixJQUFoQixDQUZQO0FBR0MsSUFBQSxLQUFLLEVBQUUsa0JBQUssT0FBTCxFQUFjLFlBQWQ7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