"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Showcase = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _ = _interopRequireDefault(require("../.."));
var _Display = require("../../../../common/Display");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = {
  title: 'Molecules / Badge / Nested',
  parameters: {
    component: _.default.Nested
  }
};
var StyledHoverShowcase = _styledComponents.default.div.withConfig({
  displayName: "NestedBadgestories__StyledHoverShowcase",
  componentId: "sc-716fie-0"
})(["display:flex;flex-wrap:wrap;gap:8px;:hover{cursor:pointer;background-color:", ";}"], function (_ref) {
  var theme = _ref.theme;
  return theme.colorTokens.neutral.background_hover;
});
var HoverLogoShowcase = function HoverLogoShowcase() {
  return _react.default.createElement(StyledHoverShowcase, null, _react.default.createElement(_.default.Nested, {
    badgeSize: "xl",
    logoUrl: "/logo/nordnet.png",
    country: "SE"
  }));
};
var HoverFallbackShowcase = function HoverFallbackShowcase() {
  return _react.default.createElement(StyledHoverShowcase, null, _react.default.createElement(_.default.Nested, {
    badgeSize: "xl",
    fallback: "Nordnet",
    country: "SE"
  }));
};
var Showcase = exports.Showcase = {
  render: function render() {
    return _react.default.createElement(_Display.Display, {
      items: [{
        title: 'Extra large logo with flag (36x40 px)',
        component: _react.default.createElement(_.default.Nested, {
          badgeSize: "xl",
          fallback: "Nordnet",
          logoUrl: "/logo/nordnet.png",
          country: "SE"
        })
      }, {
        title: 'Large (default) logo with flag (28x32 px)',
        component: _react.default.createElement(_.default.Nested, {
          fallback: "Nordnet",
          logoUrl: "/logo/nordnet.png",
          country: "SE"
        })
      }, {
        title: 'Medium logo with flag (26x28 px)',
        component: _react.default.createElement(_.default.Nested, {
          badgeSize: "m",
          fallback: "Nordnet",
          logoUrl: "/logo/nordnet.png",
          country: "SE"
        })
      }, {
        title: 'Extra large logo',
        component: _react.default.createElement(_.default.Nested, {
          badgeSize: "xl",
          fallback: "Nordnet",
          logoUrl: "/logo/nordnet.png"
        })
      }, {
        title: 'Large (default) logo',
        component: _react.default.createElement(_.default.Nested, {
          fallback: "Nordnet",
          logoUrl: "/logo/nordnet.png"
        })
      }, {
        title: 'Medium logo',
        component: _react.default.createElement(_.default.Nested, {
          badgeSize: "m",
          fallback: "Nordnet",
          logoUrl: "/logo/nordnet.png"
        })
      }, {
        title: 'Extra large fallback with flag',
        component: _react.default.createElement(_.default.Nested, {
          badgeSize: "xl",
          fallback: "Nordnet",
          country: "SE"
        })
      }, {
        title: 'Large fallback with flag',
        component: _react.default.createElement(_.default.Nested, {
          fallback: "Nordnet",
          country: "SE"
        })
      }, {
        title: 'Medium fallback with flag',
        component: _react.default.createElement(_.default.Nested, {
          badgeSize: "m",
          fallback: "Nordnet",
          country: "SE"
        })
      }, {
        title: 'Extra large fallback',
        component: _react.default.createElement(_.default.Nested, {
          badgeSize: "xl",
          fallback: "Nordnet"
        })
      }, {
        title: 'Large fallback',
        component: _react.default.createElement(_.default.Nested, {
          fallback: "Nordnet"
        })
      }, {
        title: 'Medium fallback',
        component: _react.default.createElement(_.default.Nested, {
          badgeSize: "m",
          fallback: "Nordnet"
        })
      }, {
        title: 'Extra large without fallback',
        component: _react.default.createElement(_.default.Nested, {
          badgeSize: "xl"
        })
      }, {
        title: 'Large without fallback',
        component: _react.default.createElement(_.default.Nested, null)
      }, {
        title: 'Medium without fallback',
        component: _react.default.createElement(_.default.Nested, {
          badgeSize: "m"
        })
      }, {
        title: 'Hover logo showcase',
        component: _react.default.createElement(HoverLogoShowcase, null)
      }, {
        title: 'Hover fallback showcase',
        component: _react.default.createElement(HoverFallbackShowcase, null)
      }]
    });
  }
};