react-pdf-builder
Version:
Build beautiful PDF documents in React.
47 lines (46 loc) • 2.36 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FullPageWithGap = exports.FullPageWithoutGap = void 0;
const react_1 = __importDefault(require("react"));
const Box_1 = require("../../components/layout/Box");
const PDFStory_1 = require("../parts/PDFStory");
const Paragraph_1 = require("../../components/typography/Paragraph");
const Heading5_1 = require("../../components/typography/Heading5");
const StoryComponent = (props) => {
return (react_1.default.createElement(PDFStory_1.PDFStory, { pageProps: { style: { padding: 0 } } },
react_1.default.createElement(Box_1.Box, Object.assign({}, props),
react_1.default.createElement(Box_1.Box, { grow: true, className: "p-3 justify-content-center align-items-center bg-faded-blue" },
react_1.default.createElement(Paragraph_1.Paragraph, { className: "mb-0" }, "Grow")),
react_1.default.createElement(Box_1.Box, { className: "p-3 justify-content-center align-items-center bg-faded-pink" },
react_1.default.createElement(Paragraph_1.Paragraph, { className: "mb-0" }, "Shrink")),
react_1.default.createElement(Box_1.Box, { dir: "y", className: "p-3 justify-content-center text-justify bg-faded-teal w-50" },
react_1.default.createElement(Heading5_1.Heading5, null, "Lorem ipsum dolor"),
react_1.default.createElement(Paragraph_1.Paragraph, null, "Width 300. Specify a width to allow text wrapping."),
react_1.default.createElement(Paragraph_1.Paragraph, { className: "mb-0" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")))));
};
// === Setup ===
const meta = {
title: 'Stories/Box/Horizontal', // <-- Set to your story title
component: StoryComponent,
parameters: {
options: { showPanel: false }, // Don't show addons panel
},
};
exports.default = meta;
// === Stories ===
exports.FullPageWithoutGap = {
args: {
dir: 'row',
style: { height: '100%' },
},
};
exports.FullPageWithGap = {
args: {
gap: 10,
dir: 'row',
style: { height: '100%' },
},
};