"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MixinsStackee = exports.MixinsSpacing = exports.Disabled = exports.Default = exports["default"] = void 0;

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

var _reactIntl = require("react-intl");

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

var _clickableList = require("./clickable-list.component");

var _icon = require("../../icon");

var _marginChecker = require("../../../mixins/spacing/story-support/margin-checker");

var _paddingChecker = require("../../../mixins/spacing/story-support/padding-checker");

var _stackeeChecker = require("../../../mixins/stackee/story-support/stackee-checker");

var _clickableList2 = _interopRequireDefault(require("./clickable-list.mdx"));

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

var _default = {
  component: _clickableList.ClickableList,
  title: 'Forms/ClickableList',
  parameters: {
    docs: {
      page: _clickableList2["default"]
    }
  }
};
exports["default"] = _default;
var options = [{
  id: 'employed',
  text: 'Employed'
}, {
  id: 'self-employed',
  text: 'Self-employed'
}, {
  id: 'retired',
  text: 'Retired'
}, {
  id: 'disabled',
  text: 'Disabled',
  disabled: true
}, {
  id: 'with-image',
  text: 'With Image',
  icon: {
    imgSrc: 'https://s3.amazonaws.com/bank-verification-ui/institution-logos/scotiabank.png',
    altText: 'scotiabank logo'
  }
}, {
  id: 'with-icon',
  text: 'With Icon',
  icon: {
    imgSrc: /*#__PURE__*/_react["default"].createElement(_icon.SearchIcon, null),
    altText: 'search',
    backgroundColor: 'greyscale-light'
  }
}, {
  id: 'translated',
  text: /*#__PURE__*/_react["default"].createElement(_reactIntl.FormattedMessage, {
    id: "test"
  })
}];

var Default = function Default() {
  return /*#__PURE__*/_react["default"].createElement(_clickableList.ClickableList, {
    label: "Choose one",
    options: options,
    onClick: (0, _addonActions.action)('onClick')
  });
};

exports.Default = Default;

var Disabled = function Disabled() {
  return /*#__PURE__*/_react["default"].createElement(_clickableList.ClickableList, {
    label: "Choose one",
    options: options,
    onClick: (0, _addonActions.action)('onClick'),
    disabled: true
  });
};

exports.Disabled = Disabled;

var MixinsSpacing = function MixinsSpacing() {
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_marginChecker.MarginChecker, {
    Component: _clickableList.ClickableList,
    label: "Choose one",
    options: options.slice(0, 2),
    onClick: (0, _addonActions.action)('onClick')
  }), /*#__PURE__*/_react["default"].createElement(_paddingChecker.PaddingChecker, {
    Component: _clickableList.ClickableList,
    label: "Choose one",
    options: options.slice(0, 2),
    onClick: (0, _addonActions.action)('onClick')
  }));
};

exports.MixinsSpacing = MixinsSpacing;

var MixinsStackee = function MixinsStackee() {
  return /*#__PURE__*/_react["default"].createElement(_stackeeChecker.StackeeChecker, {
    Component: _clickableList.ClickableList,
    label: "Choose one",
    options: [{
      id: '1',
      text: 'One'
    }, {
      id: '2',
      text: 'Two'
    }],
    onClick: (0, _addonActions.action)('onClick')
  });
};

exports.MixinsStackee = MixinsStackee;