"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.OtherVariants = exports.InsideButton = exports.Default = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _addonActions = require("@storybook/addon-actions");
var _ = require("../../../..");
var _AccountBadgeStack = require("./AccountBadgeStack");
var _Display = require("../../../../common/Display");
var _Button = _interopRequireDefault(require("../../../Button"));
var _ChevronDown = _interopRequireDefault(require("../../../../Atoms/Icon/action/chevronDown/ChevronDown8"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = {
  title: 'Molecules / Badge / Account / Stack',
  parameters: {
    component: _AccountBadgeStack.AccountBadgeStack
  }
};
var DisplayContainer = _styledComponents.default.div.withConfig({
  displayName: "AccountBadgeStackstories__DisplayContainer",
  componentId: "sc-qyyd3i-0"
})(["> div:nth-child(3n + 1){padding-left:20px;padding-top:12px;}"]);
var singleArray = [{
  label: 'TJP'
}];
var threeArray = [{
  label: 'KF'
}, {
  label: 'AF'
}, {
  label: 'ISK'
}];
var fiveArray = [{
  label: 'KF'
}, {
  label: 'AF'
}, {
  label: 'ISK'
}, {
  label: 'ISK'
}, {
  label: 'ISK'
}];
var tenArray = [].concat(fiveArray, fiveArray);
var Default = exports.Default = {
  render: function render() {
    return _react.default.createElement(DisplayContainer, null, _react.default.createElement(_Display.Display, {
      title: "Size s",
      items: [{
        component: _react.default.createElement(_.Badge.Account.Stack, {
          items: threeArray,
          truncated: false
        }),
        title: '3 badges'
      }, {
        component: _react.default.createElement(_.Badge.Account.Stack, {
          items: threeArray
        }),
        title: '3 badges, with truncation'
      }, {
        component: _react.default.createElement(_.Badge.Account.Stack, {
          items: fiveArray
        }),
        title: '3 badges, with more truncation'
      }, {
        component: _react.default.createElement(_.Badge.Account.Stack, {
          items: tenArray,
          truncated: false
        }),
        title: '10 badges'
      }, {
        component: _react.default.createElement(_.Badge.Account.Stack, {
          items: singleArray
        }),
        title: '1 badge'
      }]
    }), _react.default.createElement(_Display.Display, {
      title: "Size m",
      items: [{
        component: _react.default.createElement(_.Badge.Account.Stack, {
          items: threeArray,
          badgeSize: "m",
          truncated: false
        }),
        title: '3 badges'
      }, {
        component: _react.default.createElement(_.Badge.Account.Stack, {
          items: threeArray,
          badgeSize: "m"
        }),
        title: '3 badges, with truncation'
      }, {
        component: _react.default.createElement(_.Badge.Account.Stack, {
          items: fiveArray,
          badgeSize: "m"
        }),
        title: '3 badges, with more truncation'
      }, {
        component: _react.default.createElement(_.Badge.Account.Stack, {
          items: tenArray,
          badgeSize: "m",
          truncated: false
        }),
        title: '10 badges'
      }, {
        component: _react.default.createElement(_.Badge.Account.Stack, {
          items: singleArray,
          badgeSize: "m"
        }),
        title: '1 badge'
      }]
    }), _react.default.createElement(_Display.Display, {
      title: "Size l",
      items: [{
        component: _react.default.createElement(_.Badge.Account.Stack, {
          items: threeArray,
          badgeSize: "l",
          truncated: false
        }),
        title: '3 badges'
      }, {
        component: _react.default.createElement(_.Badge.Account.Stack, {
          items: threeArray,
          badgeSize: "l"
        }),
        title: '3 badges, with truncation'
      }, {
        component: _react.default.createElement(_.Badge.Account.Stack, {
          items: fiveArray,
          badgeSize: "l"
        }),
        title: '3 badges, with more truncation'
      }, {
        component: _react.default.createElement(_.Badge.Account.Stack, {
          items: tenArray,
          badgeSize: "l",
          truncated: false
        }),
        title: '10 badges'
      }, {
        component: _react.default.createElement(_.Badge.Account.Stack, {
          items: singleArray,
          badgeSize: "l"
        }),
        title: '1 badge'
      }]
    }), _react.default.createElement(_Display.Display, {
      title: "custom size 40",
      items: [{
        component: _react.default.createElement(_.Badge.Account.Stack, {
          items: threeArray,
          badgeSize: 40,
          truncated: false
        }),
        title: '3 badges'
      }, {
        component: _react.default.createElement(_.Badge.Account.Stack, {
          items: threeArray,
          badgeSize: 40
        }),
        title: '3 badges, with truncation'
      }, {
        component: _react.default.createElement(_.Badge.Account.Stack, {
          items: fiveArray,
          badgeSize: 40
        }),
        title: '3 badges, with more truncation'
      }, {
        component: _react.default.createElement(_.Badge.Account.Stack, {
          items: tenArray,
          badgeSize: 40,
          truncated: false
        }),
        title: '10 badges'
      }, {
        component: _react.default.createElement(_.Badge.Account.Stack, {
          items: singleArray,
          badgeSize: 40
        }),
        title: '1 badge'
      }]
    }));
  }
};
var InsideButton = exports.InsideButton = {
  render: function render() {
    return _react.default.createElement(DisplayContainer, null, _react.default.createElement(_Display.Display, {
      title: "Size s",
      items: [{
        component: _react.default.createElement(_Button.default.Pill, {
          size: "m",
          variant: "primary"
        }, _react.default.createElement(_.Badge.Account.Stack, {
          items: [].concat(singleArray, singleArray)
        })),
        title: '2 badges'
      }, {
        component: _react.default.createElement(_Button.default.Pill, {
          size: "m"
        }, _react.default.createElement(_.Badge.Account.Stack, {
          items: fiveArray,
          maxElementsInStack: 3
        })),
        title: '3 badges, with truncation'
      }, {
        component: _react.default.createElement("div", {
          style: {
            background: 'white',
            padding: '12px'
          }
        }, _react.default.createElement(_Button.default.Pill, {
          onClick: (0, _addonActions.action)('Ouch'),
          size: "m",
          variant: "secondary",
          icon: _react.default.createElement(_ChevronDown.default, {
            color: "currentColor"
          }),
          iconPlacement: "right"
        }, _react.default.createElement(_.Badge.Account.Stack, {
          items: [].concat(singleArray, singleArray)
        }))),
        title: '2 badges in secondary button'
      }, {
        component: _react.default.createElement(_Button.default.Pill, {
          size: "m",
          variant: "primary",
          disabled: true
        }, _react.default.createElement(_.Badge.Account.Stack, {
          items: [].concat(singleArray, singleArray),
          useCurrentColor: true
        })),
        title: '2 badges with current color inherited'
      }]
    }));
  },
  name: 'Inside a button'
};
var OtherVariants = exports.OtherVariants = {
  render: function render() {
    return _react.default.createElement(DisplayContainer, null, _react.default.createElement(_Display.Display, {
      title: "With different colors",
      items: [{
        component: _react.default.createElement(_.Badge.Account.Stack, {
          badgeSize: "m",
          items: [{
            label: 'SEB',
            badgeColor: function badgeColor(t) {
              return t.color.positive;
            }
          }, {
            label: 'HB',
            badgeColor: function badgeColor(t) {
              return t.color.badgeBackground;
            }
          }, {
            label: 'AVA',
            badgeColor: function badgeColor(t) {
              return t.color.negative;
            }
          }, {
            label: 'NN',
            badgeColor: function badgeColor(t) {
              return t.color.cta;
            }
          }]
        }),
        title: 'Other banks'
      }, {
        component: _react.default.createElement(_.Badge.Account.Stack, {
          badgeSize: "m",
          items: [{
            label: _react.default.createElement(_.Typography, {
              weight: "bold",
              type: "caption",
              color: function color(t) {
                return t.color.positive;
              }
            }, "TJP")
          }, {
            label: _react.default.createElement(_.Typography, {
              weight: "bold",
              type: "caption",
              color: function color(t) {
                return t.color.negativeBlackBackground;
              }
            }, "TJP")
          }, {
            label: _react.default.createElement(_.Typography, {
              weight: "bold",
              type: "tertiary",
              color: function color(t) {
                return t.color.bubbleBackground;
              }
            }, "TJP")
          }, {
            label: _react.default.createElement(_.Typography, {
              weight: "bold",
              type: "secondary",
              color: function color(t) {
                return t.color.buyHover;
              }
            }, "TJP")
          }]
        }),
        title: 'Custom label'
      }, {
        component: _react.default.createElement(_.Badge.Account.Stack, {
          badgeSize: "m",
          maxElementsInStack: 2,
          truncationWrapper: function truncationWrapper(_ref) {
            var truncatedItems = _ref.truncatedItems;
            return _react.default.createElement(_.Typography, {
              weight: "bold",
              type: "primary",
              color: function color(t) {
                return t.color.negative;
              }
            }, truncatedItems.length, "!");
          },
          items: threeArray
        }),
        title: 'Custom truncation item'
      }]
    }));
  },
  name: 'Other variants'
};