react-pdf-builder
Version:
Build beautiful PDF documents in React.
46 lines (45 loc) • 2.33 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.WithGap = exports.WithoutGap = 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, null,
react_1.default.createElement(Heading5_1.Heading5, { className: "text-center" }, "Horizontal box containing 3 nested boxes"),
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 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 50%. 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.WithoutGap = {
args: {
dir: 'row',
},
};
exports.WithGap = {
args: {
gap: 10,
dir: 'row',
},
};