react-pdf-builder
Version:
Build beautiful PDF documents in React.
52 lines (51 loc) • 3.16 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CustomHeader = void 0;
const react_1 = __importDefault(require("react"));
const Button_1 = require("../../components/button/Button");
const Card_1 = require("../../components/card/Card");
const CardBody_1 = require("../../components/card/CardBody");
const CardHeader_1 = require("../../components/card/CardHeader");
const Box_1 = require("../../components/layout/Box");
const ListItem_1 = require("../../components/lists/ListItem");
const OrderedList_1 = require("../../components/lists/OrderedList");
const Heading3_1 = require("../../components/typography/Heading3");
const Heading5_1 = require("../../components/typography/Heading5");
const Heading6_1 = require("../../components/typography/Heading6");
const Paragraph_1 = require("../../components/typography/Paragraph");
const PDFStory_1 = require("../parts/PDFStory");
const ThemedText_1 = require("../../components/basics/ThemedText");
const StoryComponent = () => {
return (react_1.default.createElement(PDFStory_1.PDFStory, null,
react_1.default.createElement(Card_1.Card, null,
react_1.default.createElement(CardHeader_1.CardHeader, null,
react_1.default.createElement(Box_1.Box, { className: "p-2 align-items-center justify-content-between w-100" },
react_1.default.createElement(Box_1.Box, { dir: "y" },
react_1.default.createElement(Heading5_1.Heading5, null, "Custom card header (H5)"),
react_1.default.createElement(ThemedText_1.ThemedText, { className: "mb-0" }, "Custom header with text (ThemedText)")),
react_1.default.createElement(Button_1.Button, { pill: true, swatch: "success" },
react_1.default.createElement(Heading3_1.Heading3, { className: "mb-0" }, "42%")))),
react_1.default.createElement(CardBody_1.CardBody, null,
react_1.default.createElement(Heading6_1.Heading6, null, "Card body"),
react_1.default.createElement(Paragraph_1.Paragraph, null, "This has a custom header with a horizontal box that aligns items center and justifies content as space-between."),
react_1.default.createElement(Paragraph_1.Paragraph, null, "Inside the horizontal box is:"),
react_1.default.createElement(OrderedList_1.OrderedList, { className: "mb-0" },
react_1.default.createElement(ListItem_1.ListItem, null, "A vertical box with a Heading5 and a ThemedText"),
react_1.default.createElement(ListItem_1.ListItem, null, "A pill Button containing a Heading3 with no bottom margin and the text 42%"))))));
};
// === Setup ===
const meta = {
title: 'Stories/Card', // <-- Set to your story title
component: StoryComponent,
parameters: {
options: { showPanel: false }, // Don't show addons panel
},
};
exports.default = meta;
// === Stories ===
exports.CustomHeader = {
args: {},
};