grommet
Version:
focus on the essential experience
40 lines (39 loc) • 2.48 kB
JavaScript
;
exports.__esModule = true;
exports["default"] = exports.GlobalHeaderFooter = void 0;
var _react = _interopRequireDefault(require("react"));
var _grommet = require("grommet");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var GlobalHeaderFooter = exports.GlobalHeaderFooter = function GlobalHeaderFooter() {
return (
/*#__PURE__*/
// Uncomment <Grommet> lines when using outside of storybook
// <Grommet theme={...}>
_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_grommet.Header, {
pad: "small"
}, "Global Header"), /*#__PURE__*/_react["default"].createElement(_grommet.Page, {
background: "background-front",
kind: "narrow"
}, /*#__PURE__*/_react["default"].createElement(_grommet.PageContent, null, /*#__PURE__*/_react["default"].createElement(_grommet.Heading, null, "Narrow Page"), /*#__PURE__*/_react["default"].createElement(_grommet.Paragraph, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo gravida tincidunt. Nunc fringilla blandit tortor, id accumsan nisi dictum quis. Aenean porttitor at mi id semper. Donec mattis bibendum leo, interdum ullamcorper lectus ultrices vel. Fusce nec enim faucibus nunc porta egestas. Fusce dapibus lobortis tincidunt."), /*#__PURE__*/_react["default"].createElement(_grommet.Grid, {
rows: "small",
columns: {
count: 'fit',
size: 'small'
},
gap: "small"
}, /*#__PURE__*/_react["default"].createElement(_grommet.Card, {
background: "white",
pad: "large"
}, "Card"), /*#__PURE__*/_react["default"].createElement(_grommet.Card, {
background: "white",
pad: "large"
}, "Card")), /*#__PURE__*/_react["default"].createElement(_grommet.Paragraph, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo gravida tincidunt. Nunc fringilla blandit tortor, id accumsan nisi dictum quis. Aenean porttitor at mi id semper. Donec mattis bibendum leo, interdum ullamcorper lectus ultrices vel. Fusce nec enim faucibus nunc porta egestas. Fusce dapibus lobortis tincidunt."))), /*#__PURE__*/_react["default"].createElement(_grommet.Footer, {
pad: "small"
}, "Global Footer"))
// </Grommet>
);
};
GlobalHeaderFooter.storyName = 'Global Header and Footer';
var _default = exports["default"] = {
title: 'Layout/Page/Global Header and Footer'
};