@teamsnap/teamsnap-ui/dist/js/components/Panel/Panel.stories.js

a CSS component library for TeamSnap

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var react_1 = require("@storybook/react");
var Panel_1 = __importDefault(require("./Panel"));
var PanelHeader_1 = require("../PanelHeader");
var PanelBody_1 = require("../PanelBody");
var PanelFooter_1 = require("../PanelFooter");
var PanelRow_1 = require("../PanelRow");
var PanelCell_1 = require("../PanelCell");
var stories = (0, react_1.storiesOf)("Panel", module);
exports.default = {
    title: 'Panel',
    component: Panel_1.default,
};
stories.add("Defaults", function () { return (React.createElement(Panel_1.default, null,
    React.createElement(PanelHeader_1.PanelHeader, { title: "Panel with Header, Body, Rows, Cells, and Footer" }),
    React.createElement(PanelBody_1.PanelBody, null,
        React.createElement(PanelRow_1.PanelRow, null,
            React.createElement(PanelCell_1.PanelCell, null, "Panel Cell Content"),
            React.createElement(PanelCell_1.PanelCell, null, "Panel Cell Content")),
        React.createElement(PanelRow_1.PanelRow, null, "Second Panel Row Content")),
    React.createElement(PanelFooter_1.PanelFooter, null, "Panel Footer Content"))); });
stories.add("Full Panel", function () { return (React.createElement(Panel_1.default, null,
    React.createElement(PanelHeader_1.PanelHeader, { title: "Full Panel, with Nested Child Elements" }),
    React.createElement(PanelBody_1.PanelBody, null,
        React.createElement(PanelRow_1.PanelRow, { isWithCells: true },
            React.createElement(PanelCell_1.PanelCell, { mods: "u-size4of24 u-flexGrow0", isTitle: true, isHeader: true }, "Bill Murray Bio"),
            React.createElement(PanelCell_1.PanelCell, { mods: "u-size12of24" }, "Bill Murray is an American actor, comedian, and writer. The fifth of nine children, he was born William James Murray in Wilmette, Illinois, to Lucille (Collins), a mailroom clerk, and Edward Joseph Murray II, who sold lumber. He is of Irish descent. Among his siblings are actors Brian Doyle-Murray, Joel Murray, and John Murray. He and most of his siblings worked as caddies, which paid his tuition to Loyola Academy, a Jesuit school. He played sports and did some acting while in that school, but in his words, mostly \"screwed off.\" He enrolled at Regis College in Denver to study pre-med but dropped out after being arrested for marijuana possession. He then joined the National Lampoon Radio Hour with fellow members Dan Aykroyd, Gilda Radner, and John Belushi."),
            React.createElement(PanelCell_1.PanelCell, { mods: "u-size8of24" },
                React.createElement("img", { src: "https://www.fillmurray.com/640/360" }))),
        React.createElement(PanelRow_1.PanelRow, { isWithCells: true },
            React.createElement(PanelCell_1.PanelCell, { mods: "u-size4of24 u-flexGrow0", isTitle: true, isHeader: true }, "Bill Murray Movies"),
            React.createElement(PanelCell_1.PanelCell, { mods: "u-size4of24" }, "Meatballs (1979), Caddyshack (1980), Stripes (1981), Tootsie (1982), Ghostbusters (1984), Ghostbusters II (1989), Scrooged (1988), What About Bob? (1991), and Groundhog Day (1993)."))),
    React.createElement(PanelFooter_1.PanelFooter, null,
        React.createElement("span", { className: "Button Button--negative" }, "Cancel Button Placeholder"),
        React.createElement("span", { className: "Button Button--primary u-spaceLeftSm" }, "Confirm Button Placeholder")))); });
stories.add("Image Header Panel", function () { return (React.createElement(Panel_1.default, { mods: "u-lg-size4of12 u-md-size8of12" },
    React.createElement(PanelHeader_1.PanelHeader, { headerImage: {
            Source: "https://www.fillmurray.com/640/360",
            Placeholder: "https://www.fillmurray.com/640/360"
        }, title: "Panel with Image Header" }),
    React.createElement(PanelBody_1.PanelBody, null,
        React.createElement(PanelRow_1.PanelRow, null,
            React.createElement("p", null, "Select different panel images to place in the space above. You may also adjust the size of the image too, to ensure it scales properly to the space."))),
    React.createElement(PanelFooter_1.PanelFooter, null,
        React.createElement("span", { className: "Button Button--primary u-size1of1 u-textCenter" }, "Action Button Placeholder")))); });