@wix/design-system/dist/cjs/TopBanner/TopBanner.story.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = exports.WithCustomContent = exports.InPage = exports.InModal = exports.Basic = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _TopBanner = _interopRequireDefault(require("./TopBanner"));
var _Page = _interopRequireDefault(require("../Page"));
var _Button = _interopRequireDefault(require("../Button"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _ = require("..");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/TopBanner/TopBanner.story.tsx";
var meta = {
  title: 'TopBanner',
  component: _TopBanner.default
};
var _default = exports.default = meta;
var commonProps = {
  dismissible: true,
  dismissLabel: 'dismiss-label',
  position: 'sticky',
  dataHook: 'top-banner',
  action: /*#__PURE__*/_react.default.createElement(_TopBanner.default.ActionButton, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 22,
      columnNumber: 11
    }
  }, "Upgrade"),
  children: 'Upgrade your site to start accepting payments.'
};
var Basic = () => /*#__PURE__*/_react.default.createElement(_TopBanner.default, (0, _extends2.default)({}, commonProps, {
  __self: void 0,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 26,
    columnNumber: 35
  }
}));
exports.Basic = Basic;
var InPage = () => /*#__PURE__*/_react.default.createElement("div", {
  style: {
    height: '800px',
    overflow: 'scroll',
    position: 'relative'
  },
  __self: void 0,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 29,
    columnNumber: 3
  }
}, /*#__PURE__*/_react.default.createElement(_TopBanner.default, (0, _extends2.default)({}, commonProps, {
  __self: void 0,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 30,
    columnNumber: 5
  }
})), /*#__PURE__*/_react.default.createElement(_Page.default, {
  height: "1600px",
  __self: void 0,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 31,
    columnNumber: 5
  }
}, /*#__PURE__*/_react.default.createElement(_Page.default.Header, {
  title: "Page Title",
  breadcrumbs: /*#__PURE__*/_react.default.createElement(_.Breadcrumbs, {
    items: [{
      id: 0,
      value: 'Page Name'
    }, {
      id: 1,
      value: 'Page title'
    }],
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 35,
      columnNumber: 11
    }
  }),
  subtitle: "I\u2019m a relatively long subtitle to fill this space in.",
  actionsBar: /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      gap: 6
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 44,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_.IconButton, {
    style: {
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center'
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 45,
      columnNumber: 13
    }
  }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.More, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 52,
      columnNumber: 15
    }
  })), /*#__PURE__*/_react.default.createElement(_Button.default, {
    skin: "light",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 54,
      columnNumber: 13
    }
  }, "Button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    skin: "standard",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 55,
      columnNumber: 13
    }
  }, "Button")),
  __self: void 0,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 32,
    columnNumber: 7
  }
}), /*#__PURE__*/_react.default.createElement(_Page.default.Content, {
  __self: void 0,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 59,
    columnNumber: 7
  }
}, /*#__PURE__*/_react.default.createElement(_.Text, {
  __self: void 0,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 60,
    columnNumber: 9
  }
}, "This is text"))));
exports.InPage = InPage;
var InModal = () => {
  return /*#__PURE__*/_react.default.createElement(_.Modal, {
    isOpen: true,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 68,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_.Card, {
    stretchVertically: true,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 69,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_.Card.Header, {
    suffix: /*#__PURE__*/_react.default.createElement(_.CloseButton, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 71,
        columnNumber: 19
      }
    }),
    title: "Title",
    subtitle: "I\u2019m a relatively long subtitle to fill this space in.",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 70,
      columnNumber: 9
    }
  }), /*#__PURE__*/_react.default.createElement(_.Card.Content, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 75,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      overflow: 'scroll',
      height: '400px'
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 76,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_.Text, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 77,
      columnNumber: 13
    }
  }, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt modi a atque illum deleniti veniam, quibusdam ad dignissimos excepturi ex itaque incidunt corrupti earum! Laboriosam laborum eos asperiores mollitia dicta?"), /*#__PURE__*/_react.default.createElement(_TopBanner.default, (0, _extends2.default)({}, commonProps, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 83,
      columnNumber: 13
    }
  })), /*#__PURE__*/_react.default.createElement(_.Text, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 84,
      columnNumber: 13
    }
  }, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt modi a atque illum deleniti veniam, quibusdam ad dignissimos excepturi ex itaque incidunt corrupti earum! Laboriosam laborum eos asperiores mollitia dicta?"), /*#__PURE__*/_react.default.createElement(_.Text, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 90,
      columnNumber: 13
    }
  }, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt modi a atque illum deleniti veniam, quibusdam ad dignissimos excepturi ex itaque incidunt corrupti earum! Laboriosam laborum eos asperiores mollitia dicta?"), /*#__PURE__*/_react.default.createElement(_.Text, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 96,
      columnNumber: 13
    }
  }, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt modi a atque illum deleniti veniam, quibusdam ad dignissimos excepturi ex itaque incidunt corrupti earum! Laboriosam laborum eos asperiores mollitia dicta?"), /*#__PURE__*/_react.default.createElement(_.Text, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 102,
      columnNumber: 13
    }
  }, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt modi a atque illum deleniti veniam, quibusdam ad dignissimos excepturi ex itaque incidunt corrupti earum! Laboriosam laborum eos asperiores mollitia dicta?"), /*#__PURE__*/_react.default.createElement(_.Text, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 108,
      columnNumber: 13
    }
  }, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt modi a atque illum deleniti veniam, quibusdam ad dignissimos excepturi ex itaque incidunt corrupti earum! Laboriosam laborum eos asperiores mollitia dicta?"), /*#__PURE__*/_react.default.createElement(_.Text, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 114,
      columnNumber: 13
    }
  }, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt modi a atque illum deleniti veniam, quibusdam ad dignissimos excepturi ex itaque incidunt corrupti earum! Laboriosam laborum eos asperiores mollitia dicta?"), /*#__PURE__*/_react.default.createElement(_.Text, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 120,
      columnNumber: 13
    }
  }, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt modi a atque illum deleniti veniam, quibusdam ad dignissimos excepturi ex itaque incidunt corrupti earum! Laboriosam laborum eos asperiores mollitia dicta?"), /*#__PURE__*/_react.default.createElement(_.Text, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 126,
      columnNumber: 13
    }
  }, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt modi a atque illum deleniti veniam, quibusdam ad dignissimos excepturi ex itaque incidunt corrupti earum! Laboriosam laborum eos asperiores mollitia dicta?"), /*#__PURE__*/_react.default.createElement(_.Text, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 132,
      columnNumber: 13
    }
  }, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt modi a atque illum deleniti veniam, quibusdam ad dignissimos excepturi ex itaque incidunt corrupti earum! Laboriosam laborum eos asperiores mollitia dicta?")))));
};
exports.InModal = InModal;
var WithCustomContent = () => {
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      backgroundColor: 'red',
      alignItems: 'center',
      justifyContent: 'center'
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 147,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_TopBanner.default, (0, _extends2.default)({}, commonProps, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 156,
      columnNumber: 7
    }
  }), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      gap: '6px',
      width: '100%'
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 157,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      backgroundColor: 'purple',
      width: '70%',
      padding: '3px',
      borderRadius: '3px',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center'
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 158,
      columnNumber: 11
    }
  }, "Lorem ipsum dolor, sit amet consectetur adipisicing elit."), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      backgroundColor: 'pink',
      width: '30%',
      padding: '3px',
      borderRadius: '3px'
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 171,
      columnNumber: 11
    }
  }, "Lorem ipsum dolor, sit amet consectetur adipisicing elit."))));
};
exports.WithCustomContent = WithCustomContent;
//# sourceMappingURL=TopBanner.story.js.map