"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.DifferentVariant = exports.DefaultUsage = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _ = require("../..");
var _Display = require("../../common/Display");
var _example_image_96px = _interopRequireDefault(require("./images/example_image_96px.jpg"));
var _example_image_64px = _interopRequireDefault(require("./images/example_image_64px.jpg"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var StyledBackground = _styledComponents.default.div.withConfig({
  displayName: "PromotionBannerstories__StyledBackground",
  componentId: "sc-h74ryt-0"
})(["background-color:", ";"], function (p) {
  return p.theme.color.background;
});
var meta = {
  component: _.PromotionBanner,
  title: 'Molecules / PromotionBanner'
};
var _default = exports.default = meta;
var DefaultUsage = exports.DefaultUsage = {
  render: function render() {
    return _react.default.createElement(StyledBackground, null, _react.default.createElement(_.PromotionBanner, {
      title: "Save with Nordnet One",
      description: "Everything you need for a low fee, compare and choose the fund that suits you best in Nordnet one.",
      badgeContent: _react.default.createElement(_.Illustration.Robot64, {
        color: function color(t) {
          return t.color.menuAccent2;
        }
      }),
      mobileBadgeContent: _react.default.createElement(_.Icon.Robot32, {
        color: function color(t) {
          return t.color.menuAccent2;
        }
      }),
      scope: "page",
      dismissible: true
    }, _react.default.createElement(_.Button.Pill, {
      size: "m"
    }, "Compare fund")), _react.default.createElement(_.PageWrapper, {
      background: function background(t) {
        return t.color.background;
      }
    }, _react.default.createElement(_.Box, {
      py: 4,
      pb: 10
    }, _react.default.createElement(_.CssGrid.Container, {
      areas: [['account'], ['values'], ['wnl'], ['rightCol']],
      templateRows: ['auto', 'auto', 'auto', 'auto'],
      md: {
        templateColumns: [4, 8],
        templateRows: ['auto', 'auto', 'auto'],
        areas: [['account', 'values'], ['account', 'wnl'], ['account', 'rightCol']]
      },
      lg: {
        templateColumns: [4, 4, 4],
        templateRows: ['auto', '1fr'],
        areas: [['account', 'values', 'rightCol'], ['account', 'wnl', 'rightCol']]
      }
    }, _react.default.createElement(_.CssGrid.Item, {
      area: "account"
    }, _react.default.createElement(_.PromotionBanner, {
      dismissible: true,
      title: "Save with Nordnet One",
      description: "Everything you need for a low fee, compare and choose the fund that suits you best in Nordnet One.",
      badgeContent: _react.default.createElement(_.Illustration.Robot64, {
        color: function color(t) {
          return t.color.menuAccent2;
        }
      }),
      mobileBadgeContent: _react.default.createElement(_.Icon.Robot32, {
        color: function color(t) {
          return t.color.menuAccent2;
        }
      })
    })), _react.default.createElement(_.CssGrid.Item, {
      area: "values"
    }, _react.default.createElement("div", {
      style: {
        background: 'green',
        height: '100px'
      }
    }, "content")), _react.default.createElement(_.CssGrid.Item, {
      area: "wnl"
    }, _react.default.createElement("div", {
      style: {
        background: 'green',
        height: '100px'
      }
    }, "content")), _react.default.createElement(_.CssGrid.Item, {
      area: "rightCol"
    }, _react.default.createElement(_.PromotionBanner, {
      title: "Save with Nordnet One",
      description: "Everything you need for a low fee, compare and choose the fund that suits you best in Nordnet One.",
      badgeContent: _react.default.createElement(_.Illustration.Robot64, {
        color: function color(t) {
          return t.color.menuAccent2;
        }
      }),
      mobileBadgeContent: _react.default.createElement(_.Icon.Robot32, {
        color: function color(t) {
          return t.color.menuAccent2;
        }
      }),
      dismissible: true
    }))))));
  }
};
var DifferentVariant = exports.DifferentVariant = {
  render: function render() {
    return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Display.Display, {
      horizontal: true,
      items: [{
        title: 'Full width banner scope="page"',
        component: _react.default.createElement(StyledBackground, null, _react.default.createElement(_.PromotionBanner, {
          scope: "page",
          title: "Save with Nordnet One",
          description: "Everything you need for a low fee, compare and choose the fund that suits you best in Nordnet One.",
          badgeContent: _react.default.createElement(_.Illustration.Robot64, {
            color: function color(t) {
              return t.color.menuAccent2;
            }
          }),
          mobileBadgeContent: _react.default.createElement(_.Icon.Robot32, {
            color: function color(t) {
              return t.color.menuAccent2;
            }
          }),
          dismissible: true,
          onClose: function onClose() {
            return alert('Close Promotion Banner');
          }
        }))
      }]
    }), _react.default.createElement(_Display.Display, {
      items: [{
        title: 'With title, description and icon, not dismissible',
        component: _react.default.createElement(StyledBackground, null, _react.default.createElement(_.PromotionBanner, {
          title: "Save with Nordnet One",
          description: "Everything you need for a low fee, compare and choose the fund that suits you best in Nordnet One.",
          badgeContent: _react.default.createElement(_.Illustration.Robot64, {
            color: function color(t) {
              return t.color.menuAccent2;
            }
          }),
          mobileBadgeContent: _react.default.createElement(_.Icon.Robot32, {
            color: function color(t) {
              return t.color.menuAccent2;
            }
          })
        }, _react.default.createElement(_.Button.Pill, {
          iconPlacement: "left",
          onClick: function onClick() {},
          variant: "primary"
        }, "Compare funds")))
      }]
    }), _react.default.createElement(_Display.Display, {
      items: [{
        title: 'Background color Blue, Green, White. You can also pass custom color',
        component: _react.default.createElement(StyledBackground, null, _react.default.createElement(_.PromotionBanner, {
          title: "Save with Nordnet One",
          description: "Everything you need for a low fee, compare and choose the fund that suits you best in Nordnet One.",
          badgeContent: _react.default.createElement(_.Illustration.Robot64, {
            color: function color(t) {
              return t.color.menuAccent2;
            }
          }),
          mobileBadgeContent: _react.default.createElement(_.Icon.Robot32, {
            color: function color(t) {
              return t.color.menuAccent2;
            }
          }),
          dismissible: true
        }), _react.default.createElement(_.PromotionBanner, {
          title: "Save with Nordnet One",
          description: "Everything you need for a low fee, compare and choose the fund that suits you best in Nordnet One.",
          badgeContent: _react.default.createElement(_.Illustration.Robot64, {
            color: function color(t) {
              return t.color.menuAccent2;
            }
          }),
          backgroundColor: "green",
          mobileBadgeContent: _react.default.createElement(_.Icon.Robot32, {
            color: function color(t) {
              return t.color.menuAccent2;
            }
          }),
          dismissible: true
        }), _react.default.createElement(_.PromotionBanner, {
          title: "Save with Nordnet One",
          description: "Everything you need for a low fee, compare and choose the fund that suits you best in Nordnet One.",
          badgeContent: _react.default.createElement(_.Illustration.Robot64, {
            color: function color(t) {
              return t.color.menuAccent2;
            }
          }),
          backgroundColor: "white",
          mobileBadgeContent: _react.default.createElement(_.Icon.Robot32, {
            color: function color(t) {
              return t.color.menuAccent2;
            }
          }),
          dismissible: true
        }), _react.default.createElement(_.PromotionBanner, {
          title: "Save with Nordnet One",
          description: "Everything you need for a low fee, compare and choose the fund that suits you best in Nordnet One.",
          badgeContent: _react.default.createElement(_.Illustration.Robot64, {
            color: function color(t) {
              return t.color.menuAccent2;
            }
          }),
          backgroundColor: function backgroundColor(t) {
            return t.color.menuAccent2;
          },
          mobileBadgeContent: _react.default.createElement(_.Icon.Robot32, {
            color: function color(t) {
              return t.color.menuAccent2;
            }
          }),
          dismissible: true
        }))
      }]
    }), _react.default.createElement(_Display.Display, {
      items: [{
        title: 'Image badge banner',
        component: _react.default.createElement(StyledBackground, null, _react.default.createElement(_.PromotionBanner, {
          title: "Save with Nordnet One",
          description: "Everything you need for a low fee, compare and choose the fund that suits you best in Nordnet One.",
          badgeContent: _react.default.createElement("img", {
            src: _example_image_96px.default,
            alt: "hello",
            style: {
              height: 'inherit'
            }
          }),
          mobileBadgeContent: _react.default.createElement("img", {
            src: _example_image_64px.default,
            alt: "hello",
            style: {
              height: 'inherit'
            }
          }),
          dismissible: true
        }, _react.default.createElement(_.Button.Pill, {
          iconPlacement: "left",
          onClick: function onClick() {},
          variant: "primary"
        }, "Compare funds")))
      }]
    }));
  }
};