react-pdf-builder
Version:
Build beautiful PDF documents in React.
141 lines (140 loc) • 5.65 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Dark = exports.Light = exports.Danger = exports.Warning = exports.Info = exports.Success = exports.Secondary = exports.Primary = exports.Black = exports.Gray900 = exports.Gray800 = exports.Gray700 = exports.Gray600 = exports.Gray500 = exports.Gray400 = exports.Gray300 = exports.Gray200 = exports.Gray100 = exports.White = exports.Cyan = exports.Teal = exports.Green = exports.Yellow = exports.Orange = exports.Red = exports.Pink = exports.Purple = exports.Indigo = exports.Blue = void 0;
const react_1 = __importDefault(require("react"));
const Table_1 = require("../../components/table/Table");
const TableCell_1 = require("../../components/table/TableCell");
const TableRow_1 = require("../../components/table/TableRow");
const Heading6_1 = require("../../components/typography/Heading6");
const PDFStory_1 = require("../parts/PDFStory");
const StoryComponent = (props) => {
return (react_1.default.createElement(PDFStory_1.PDFStory, null,
react_1.default.createElement(Table_1.Table, Object.assign({ bordered: true, inverseStriped: true, colWidths: ['30%', '50%', '20%'] }, props),
react_1.default.createElement(TableRow_1.TableRow, { swatch: props.swatch, inverseStriped: false },
react_1.default.createElement(TableCell_1.TableCell, null,
react_1.default.createElement(Heading6_1.Heading6, { className: "mb-0" }, "Col 30% ")),
react_1.default.createElement(TableCell_1.TableCell, null,
react_1.default.createElement(Heading6_1.Heading6, { className: "mb-0" }, "Column 50%")),
react_1.default.createElement(TableCell_1.TableCell, null,
react_1.default.createElement(Heading6_1.Heading6, { className: "mb-0" }, "20%"))),
react_1.default.createElement(TableRow_1.TableRow, null,
react_1.default.createElement(TableCell_1.TableCell, null, "Lorem ipsum dolor"),
react_1.default.createElement(TableCell_1.TableCell, null, "Consectetur adipiscing elit"),
react_1.default.createElement(TableCell_1.TableCell, null, "Sed do eiusmod")),
react_1.default.createElement(TableRow_1.TableRow, null,
react_1.default.createElement(TableCell_1.TableCell, null, "Lorem ipsum dolor"),
react_1.default.createElement(TableCell_1.TableCell, null, "Consectetur adipiscing elit"),
react_1.default.createElement(TableCell_1.TableCell, null, "Sed do eiusmod")),
react_1.default.createElement(TableRow_1.TableRow, null,
react_1.default.createElement(TableCell_1.TableCell, null, "Lorem ipsum dolor"),
react_1.default.createElement(TableCell_1.TableCell, null, "Consectetur adipiscing elit"),
react_1.default.createElement(TableCell_1.TableCell, null, "Sed do eiusmod")),
react_1.default.createElement(TableRow_1.TableRow, null,
react_1.default.createElement(TableCell_1.TableCell, null, "Lorem ipsum dolor"),
react_1.default.createElement(TableCell_1.TableCell, null, "Consectetur adipiscing elit"),
react_1.default.createElement(TableCell_1.TableCell, null, "Sed do eiusmod")),
react_1.default.createElement(TableRow_1.TableRow, null,
react_1.default.createElement(TableCell_1.TableCell, null, "Lorem ipsum dolor"),
react_1.default.createElement(TableCell_1.TableCell, null, "Consectetur adipiscing elit"),
react_1.default.createElement(TableCell_1.TableCell, null, "Sed do eiusmod")))));
};
// === Setup ===
const meta = {
title: 'Stories/Tables/Swatches', // <-- Set to your story title
component: StoryComponent,
parameters: {
options: { showPanel: false }, // Don't show addons panel
},
};
exports.default = meta;
// === Stories ===
exports.Blue = {
args: { swatch: 'blue' },
};
exports.Indigo = {
args: { swatch: 'indigo' },
};
exports.Purple = {
args: { swatch: 'purple' },
};
exports.Pink = {
args: { swatch: 'pink' },
};
exports.Red = {
args: { swatch: 'red' },
};
exports.Orange = {
args: { swatch: 'orange' },
};
exports.Yellow = {
args: { swatch: 'yellow' },
};
exports.Green = {
args: { swatch: 'green' },
};
exports.Teal = {
args: { swatch: 'teal' },
};
exports.Cyan = {
args: { swatch: 'cyan' },
};
exports.White = {
args: { swatch: 'white' },
};
exports.Gray100 = {
args: { swatch: 'gray100' },
};
exports.Gray200 = {
args: { swatch: 'gray200' },
};
exports.Gray300 = {
args: { swatch: 'gray300' },
};
exports.Gray400 = {
args: { swatch: 'gray400' },
};
exports.Gray500 = {
args: { swatch: 'gray500' },
};
exports.Gray600 = {
args: { swatch: 'gray600' },
};
exports.Gray700 = {
args: { swatch: 'gray700' },
};
exports.Gray800 = {
args: { swatch: 'gray800' },
};
exports.Gray900 = {
args: { swatch: 'gray900' },
};
exports.Black = {
args: { swatch: 'black' },
};
exports.Primary = {
args: { swatch: 'primary' },
};
exports.Secondary = {
args: { swatch: 'secondary' },
};
exports.Success = {
args: { swatch: 'success' },
};
exports.Info = {
args: { swatch: 'info' },
};
exports.Warning = {
args: { swatch: 'warning' },
};
exports.Danger = {
args: { swatch: 'danger' },
};
exports.Light = {
args: { swatch: 'light' },
};
exports.Dark = {
args: { swatch: 'dark' },
};