@dabapps/roe
Version:
A Collection of React Components for Project Development
556 lines (540 loc) • 929 kB
JavaScript
(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var ts_1 = require("../../../src/ts");
var Alerts = function () { return (React.createElement(ts_1.Section, null,
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h2", null,
React.createElement(ts_1.Anchor, null, "Alerts")),
React.createElement(ts_1.Alert, null,
React.createElement(ts_1.DabIpsum, { count: 2 })),
React.createElement(ts_1.Alert, { className: "info" },
React.createElement(ts_1.DabIpsum, { count: 2 })),
React.createElement(ts_1.Alert, { className: "success" },
React.createElement(ts_1.DabIpsum, { count: 2 })),
React.createElement(ts_1.Alert, { className: "warning" },
React.createElement(ts_1.DabIpsum, { count: 2 })),
React.createElement(ts_1.Alert, { className: "error" },
React.createElement(ts_1.DabIpsum, { count: 2 })))),
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h3", null, "Code"),
React.createElement(ts_1.CodeBlock, { language: "javascript", name: "JSX" }, "\n <Alert>\n <DabIpsum count={2} />\n </Alert>\n <Alert className=\"info\">\n <DabIpsum count={2} />\n </Alert>\n <Alert className=\"success\">\n <DabIpsum count={2} />\n </Alert>\n <Alert className=\"warning\">\n <DabIpsum count={2} />\n </Alert>\n <Alert className=\"error\">\n <DabIpsum count={2} />\n </Alert>\n "))))); };
exports.default = Alerts;
},{"../../../src/ts":235,"react":223}],2:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var ts_1 = require("../../../src/ts");
var AtomicFloats = function () { return (React.createElement(ts_1.Section, null,
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h2", null,
React.createElement(ts_1.Anchor, null, "Atomic Float Classes")))),
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, { className: "display-columns" },
React.createElement("h3", null, "Demo"),
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, { xs: 6, className: "xs-float-right sm-float-left md-float-right" }, "float-right sm-float-left md-float-right"),
React.createElement(ts_1.Column, { xs: 6, className: "xs-float-left sm-float-right md-float-left" }, "float-left sm-float-right md-float-left")),
React.createElement("p", null, "Note: float-left is an alias for xs-float-left, and float-right an alias for xs-float-right"))),
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h3", null, "Code"),
React.createElement(ts_1.CodeBlock, { language: "javascript", name: "JSX" }, "\n <Row>\n <Column xs={6} className=\"xs-float-right sm-float-left md-float-right\">\n float-right sm-float-left md-float-right\n </Column>\n <Column xs={6} className=\"xs-float-left sm-float-right md-float-left\">\n float-left sm-float-right md-float-left\n </Column>\n </Row>\n "))))); };
exports.default = AtomicFloats;
},{"../../../src/ts":235,"react":223}],3:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var ts_1 = require("../../../src/ts");
var AtomicHides = function () { return (React.createElement(ts_1.Section, null,
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h2", null,
React.createElement(ts_1.Anchor, null, "Atomic Hide & Display Classes")))),
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, { className: "display-columns" },
React.createElement("h3", null, "Demo"),
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, { xs: 6, className: "xs-display-none sm-display-block md-display-none" }, "xs-display-none sm-display-block md-display-none"),
React.createElement(ts_1.Column, { xs: 6, className: "xs-display-block sm-display-none md-display-block" }, "xs-display-block sm-display-none md-display-block")),
React.createElement("p", null, "Available display types are: none, block, inline, inline-block"),
React.createElement("p", null, "Note: display-none is an alias for xs-display-none, and display-block an alias for xs-display-block, etc"))),
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h3", null, "Code"),
React.createElement(ts_1.CodeBlock, { language: "javascript", name: "JSX" }, "\n <Row>\n <Column xs={6} className=\"xs-display-none sm-display-block md-display-none\">\n xs-display-none sm-display-block md-display-none\n </Column>\n <Column xs={6} className=\"xs-display-block sm-display-none md-display-block\">\n xs-display-block sm-display-none md-display-block\n </Column>\n </Row>\n "))))); };
exports.default = AtomicHides;
},{"../../../src/ts":235,"react":223}],4:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var ts_1 = require("../../../src/ts");
var AtomicSpacing = function () { return (React.createElement(ts_1.Section, null,
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h2", null,
React.createElement(ts_1.Anchor, null, "Atomic Padding & Margin Classes")))),
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h3", null, "Demo"),
React.createElement("div", { className: "padding-base" }, "Padding all around"),
React.createElement("div", { className: "md-padding-left-large" }, "Large padding left on medium screens and above"),
React.createElement("div", { className: "margin-left-base md-margin-left-none" }, "Margin left only only small screens"),
React.createElement("div", { className: "margin-vertical-small" }, "Small vertical margin"),
React.createElement("div", { className: "margin-horizontal-large" }, "Large horizontal margin"),
React.createElement("p", null, "Note: padding-base is an alias for xs-padding-base, and margin-right-small an alias for xs-margin-right-small, etc"))),
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h3", null, "Code"),
React.createElement(ts_1.CodeBlock, { language: "javascript", name: "JSX" }, "\n <div className=\"padding-base\">\n Padding all around\n </div>\n <div className=\"md-padding-left-large\">\n Large padding left on medium screens and above\n </div>\n <div className=\"margin-left-base md-margin-left-none\">\n Margin left only only small screens\n </div>\n <div className=\"margin-vertical-small\">\n Small vertical margin\n </div>\n <div className=\"margin-horizontal-large\">\n Large horizontal margin\n </div>\n "))))); };
exports.default = AtomicSpacing;
},{"../../../src/ts":235,"react":223}],5:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var ts_1 = require("../../../src/ts");
var AtomicTextAlign = function () { return (React.createElement(ts_1.Section, null,
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h2", null,
React.createElement(ts_1.Anchor, null, "Atomic Text Align Classes")))),
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, { className: "display-columns" },
React.createElement("h3", null, "Demo"),
React.createElement("p", { className: "text-align-left" }, "Left"),
React.createElement("p", { className: "text-align-center" }, "Center"),
React.createElement("p", { className: "text-align-right" }, "Right"),
React.createElement("p", { className: "xs-text-align-center sm-text-align-left" }, "Centered on mobile"),
React.createElement("p", null, "Note: text-align-left is an alias for xs-text-align-left, same with right and center"))),
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h3", null, "Code"),
React.createElement(ts_1.CodeBlock, { language: "javascript", name: "JSX" }, "\n <p className=\"text-align-left\">\n Left\n </p>\n <p className=\"text-align-center\">\n Center\n </p>\n <p className=\"text-align-right\">\n Right\n </p>\n <p className=\"xs-text-align-center sm-text-align-left\">\n Centered on mobile\n </p>\n "))))); };
exports.default = AtomicTextAlign;
},{"../../../src/ts":235,"react":223}],6:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var ts_1 = require("../../../src/ts");
var AtomicText = function () { return (React.createElement(ts_1.Section, null,
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h2", null,
React.createElement(ts_1.Anchor, null, "Atomic Text Classes")))),
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h3", null, "Demo"),
React.createElement("p", { className: "font-size-h1" }, "Paragraph with header size"),
React.createElement("h3", { className: "font-size-base" }, "Header with base font size (small & large also available)"),
React.createElement("p", null,
React.createElement("span", { className: "bold" }, "Bold"),
" ",
React.createElement("span", { className: "italic" }, "Italic"),
" ",
React.createElement("span", { className: "bold italic" }, "Bold Italic")),
React.createElement("p", { className: "primary" },
React.createElement(ts_1.DabIpsum, { component: "text" })),
React.createElement("p", { className: "secondary" },
React.createElement(ts_1.DabIpsum, { component: "text" })),
React.createElement("p", { className: "tertiary" },
React.createElement(ts_1.DabIpsum, { component: "text" })),
React.createElement("p", { className: "info" },
React.createElement(ts_1.DabIpsum, { component: "text" })),
React.createElement("p", { className: "success" },
React.createElement(ts_1.DabIpsum, { component: "text" })),
React.createElement("p", { className: "warning" },
React.createElement(ts_1.DabIpsum, { component: "text" })),
React.createElement("p", { className: "error" },
React.createElement(ts_1.DabIpsum, { component: "text" })))),
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h3", null, "Code"),
React.createElement(ts_1.CodeBlock, { language: "javascript", name: "JSX" }, "\n <p className=\"font-size-h1\">\n Paragraph with header size\n </p>\n\n <h3 className=\"font-size-base\">\n Header with base font size (small & large also available)\n </h3>\n\n <p>\n <span className=\"bold\">\n Bold\n </span> <span className=\"italic\">\n Italic\n </span> <span className=\"bold italic\">\n Bold Italic\n </span>\n </p>\n\n <p className=\"primary\">\n <DabIpsum component=\"text\" />\n </p>\n <p className=\"secondary\">\n <DabIpsum component=\"text\" />\n </p>\n <p className=\"tertiary\">\n <DabIpsum component=\"text\" />\n </p>\n <p className=\"info\">\n <DabIpsum component=\"text\" />\n </p>\n <p className=\"success\">\n <DabIpsum component=\"text\" />\n </p>\n <p className=\"warning\">\n <DabIpsum component=\"text\" />\n </p>\n <p className=\"error\">\n <DabIpsum component=\"text\" />\n </p>\n "))))); };
exports.default = AtomicText;
},{"../../../src/ts":235,"react":223}],7:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var ts_1 = require("../../../src/ts");
var Buttons = function () { return (React.createElement(ts_1.Section, null,
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h2", null,
React.createElement(ts_1.Anchor, null, "Buttons")))),
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h3", null, "Demo"),
React.createElement("p", null,
React.createElement(ts_1.SpacedGroup, { className: "margin-vertical-base" },
React.createElement(ts_1.Button, null, "Default"),
React.createElement(ts_1.Button, { disabled: true }, "Disabled"),
React.createElement(ts_1.Button, { className: "primary" }, "Primary"),
React.createElement(ts_1.Button, { className: "secondary" }, "Secondary"),
React.createElement(ts_1.Button, { className: "tertiary" }, "Tertiary"),
React.createElement(ts_1.Button, { className: "info" }, "Info"),
React.createElement(ts_1.Button, { className: "success" }, "Success"),
React.createElement(ts_1.Button, { className: "warning" }, "Warning"),
React.createElement(ts_1.Button, { className: "error" }, "Error"))),
React.createElement("p", null,
React.createElement(ts_1.Button, { block: true }, "Block"),
React.createElement(ts_1.Button, { block: true, className: "primary" }, "Block Primary")),
React.createElement("p", null,
React.createElement(ts_1.Button, { small: true }, "Small")),
React.createElement("p", null,
React.createElement(ts_1.Button, { large: true }, "Large")),
React.createElement("p", null,
React.createElement(ts_1.SpacedGroup, { className: "margin-vertical-base" },
React.createElement("a", { href: "#", className: "button" }, "Link as button"),
React.createElement("a", { href: "#", className: "button primary" }, "Link as primary button"),
React.createElement("a", { href: "#", className: "button error" }, "Link as error button"))),
React.createElement("p", null,
React.createElement(ts_1.SpacedGroup, { className: "margin-vertical-base" },
React.createElement("input", { className: "button", type: "button", value: "Input as button" }),
React.createElement("input", { className: "button primary", type: "button", value: "Input as primary button" }),
React.createElement("input", { className: "button error", type: "button", value: "Input as error button" }))))),
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h3", null, "Code"),
React.createElement(ts_1.CodeBlock, { language: "javascript", name: "JSX" }, "\n <p>\n <SpacedGroup className=\"margin-vertical-base\">\n <Button>\n Default\n </Button>\n <Button disabled>\n Disabled\n </Button>\n <Button className=\"primary\">\n Primary\n </Button>\n <Button className=\"secondary\">\n Secondary\n </Button>\n <Button className=\"tertiary\">\n Tertiary\n </Button>\n <Button className=\"info\">\n Info\n </Button>\n <Button className=\"success\">\n Success\n </Button>\n <Button className=\"warning\">\n Warning\n </Button>\n <Button className=\"error\">\n Error\n </Button>\n </SpacedGroup>\n </p>\n\n <p>\n <Button block>\n Block\n </Button>\n <Button block className=\"primary\">\n Block Primary\n </Button>\n </p>\n\n <p>\n <Button small>\n Small\n </Button>\n </p>\n\n <p>\n <Button large>\n Large\n </Button>\n </p>\n\n <p>\n <SpacedGroup className=\"margin-vertical-base\">\n <a href=\"#\" className=\"button\">\n Link as button\n </a>\n <a href=\"#\" className=\"button primary\">\n Link as primary button\n </a>\n <a href=\"#\" className=\"button error\">\n Link as error button\n </a>\n </SpacedGroup>\n </p>\n\n <p>\n <SpacedGroup className=\"margin-vertical-base\">\n <input className=\"button\" type=\"button\" value=\"Input as button\" />\n <input className=\"button primary\" type=\"button\" value=\"Input as primary button\" />\n <input className=\"button error\" type=\"button\" value=\"Input as error button\" />\n </SpacedGroup>\n </p>\n "),
React.createElement("p", null, "You can create custom buttons using the create button mixin e.g."),
React.createElement(ts_1.CodeBlock, { language: "less", name: "Custom button less" }, "\n .button {\n .create-button(custom, @background-color, @text-color);\n }\n "),
React.createElement("p", null, "And then use these with custom types e.g."),
React.createElement(ts_1.CodeBlock, { language: "javascript", name: "Custom button JSX" }, "\n <Button className=\"custom\" />\n "))))); };
exports.default = Buttons;
},{"../../../src/ts":235,"react":223}],8:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var ts_1 = require("../../../src/ts");
var CodeBlocks = function () { return (React.createElement(ts_1.Section, null,
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h2", null,
React.createElement(ts_1.Anchor, null, "Code Blocks")))),
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h3", null, "Demo"),
React.createElement(ts_1.CodeBlock, { language: "javascript", name: "Example" }, "\n const foo = 'bar';\n\n console.log(foo);\n "),
React.createElement("p", null, "If name is not supplied the code block will be rendered like the one below."),
React.createElement("p", null, "If a language is supplied (recommended) it will display to the right of the name."))),
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h3", null, "Code"),
React.createElement(ts_1.CodeBlock, { language: "javascript" }, "\n <CodeBlock language=\"javascript\" name=\"Example\">\n {`\n const foo = 'bar';\n\n console.log(foo);\n `}\n </CodeBlock>\n "))))); };
exports.default = CodeBlocks;
},{"../../../src/ts":235,"react":223}],9:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var ts_1 = require("../../../src/ts");
var ContentBoxes = function () { return (React.createElement(ts_1.Section, null,
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h2", null,
React.createElement(ts_1.Anchor, null, "Content Box")))),
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h3", null, "Demo"),
React.createElement(ts_1.ContentBox, null,
React.createElement(ts_1.ContentBoxHeader, null,
React.createElement("h5", null, "Header")),
React.createElement("p", null, "Content"),
React.createElement(ts_1.ContentBoxFooter, null,
React.createElement("p", null, "Footer"))))),
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h3", null, "Code"),
React.createElement(ts_1.CodeBlock, { language: "javascript", name: "JSX" }, "\n <ContentBox>\n <ContentBoxHeader>\n <h5>\n Header\n </h5>\n </ContentBoxHeader>\n <p>\n Content\n </p>\n <ContentBoxFooter>\n <p>\n Footer\n </p>\n </ContentBoxFooter>\n </ContentBox>\n "))))); };
exports.default = ContentBoxes;
},{"../../../src/ts":235,"react":223}],10:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var ts_1 = require("../../../src/ts");
var Grid = function () { return (React.createElement(ts_1.Section, null,
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h2", null,
React.createElement(ts_1.Anchor, null, "Grid")))),
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, { className: "display-columns" },
React.createElement("h3", null, "Demo"),
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, { xs: 12, sm: 6, md: 3 }, "Column 1"),
React.createElement(ts_1.Column, { xs: 12, sm: 6, md: 3 }, "Column 2"),
React.createElement(ts_1.Column, { xs: 12, sm: 6, md: 3 }, "Column 3")),
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, { xs: 6, xsPush: 6 }, "Column 4"),
React.createElement(ts_1.Column, { xs: 6, xsPull: 6 }, "Column 5")),
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, { xs: 6, xsOffset: 3, xsFill: 3 }, "Column 6"),
React.createElement(ts_1.Column, { xs: 6, xsOffset: 3, xsFill: 3 }, "Column 7")))),
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h3", null, "Code"),
React.createElement(ts_1.CodeBlock, { language: "javascript", name: "JSX" }, "\n <Container>\n <Row>\n <Column xs={12} sm={6} md={3}>\n Column 1\n </Column>\n <Column xs={12} sm={6} md={3}>\n Column 2\n </Column>\n <Column xs={12} sm={6} md={3}>\n Column 3\n </Column>\n </Row>\n <Row>\n <Column xs={6} xsPush={6}>\n Column 4\n </Column>\n <Column xs={6} xsPull={6}>\n Column 5\n </Column>\n </Row>\n <Row>\n <Column xs={6} xsOffset={3} xsFill={3}>\n Column 6\n </Column>\n <Column xs={6} xsOffset={3} xsFill={3}>\n Column 7\n </Column>\n </Row>\n </Container>\n "),
React.createElement("p", null, "Container may also take a `fluid` prop that makes it fill the screen at all sizes"),
React.createElement(ts_1.CodeBlock, { language: "javascript", name: "JSX" }, "\n <Container fluid />\n "),
React.createElement("p", null, "You can configure the @container-background if the container is set to solid"),
React.createElement(ts_1.CodeBlock, { language: "javascript", name: "JSX" }, "\n <Container solid />\n "))))); };
exports.default = Grid;
},{"../../../src/ts":235,"react":223}],11:[function(require,module,exports){
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var path = require("path");
var React = require("react");
var ReactDOM = require("react-dom");
require("./livereload");
var ts_1 = require("../../../src/ts");
var alerts_1 = require("./alerts");
var atomic_floats_1 = require("./atomic-floats");
var atomic_hides_1 = require("./atomic-hides");
var atomic_spacing_1 = require("./atomic-spacing");
var atomic_text_1 = require("./atomic-text");
var atomic_text_align_1 = require("./atomic-text-align");
var buttons_1 = require("./buttons");
var code_blocks_1 = require("./code-blocks");
var content_boxes_1 = require("./content-boxes");
var grid_1 = require("./grid");
var inputs_1 = require("./inputs");
var ipsum_1 = require("./ipsum");
var modals_1 = require("./modals");
var sections_1 = require("./sections");
var spaced_groups_1 = require("./spaced-groups");
var tables_1 = require("./tables");
var tabs_1 = require("./tabs");
var wells_1 = require("./wells");
var variables = "/* @group Colors */\n\n/* Base colors */\n@primary: #EF592B;\n@secondary: #7B2240;\n@tertiary: #2E253F;\n@info: #2D87A3;\n@success: #2FA34F;\n@warning: #D6982F;\n@error: #CD3B3B;\n\n/* Light colors */\n@primary-light: lighten(@primary, 30%);\n@secondary-light: lighten(@secondary, 55%);\n@tertiary-light: lighten(@tertiary, 55%);\n@info-light: lighten(@info, 30%);\n@success-light: lighten(@success, 30%);\n@warning-light: lighten(@warning, 25%);\n@error-light: lighten(@error, 30%);\n\n/* Lighter colors */\n@primary-lighter: lighten(@primary, 35%);\n@secondary-lighter: lighten(@secondary, 60%);\n@tertiary-lighter: lighten(@tertiary, 60%);\n@info-lighter: lighten(@info, 50%);\n@success-lighter: lighten(@success, 50%);\n@warning-lighter: lighten(@warning, 40%);\n@error-lighter: lighten(@error, 40%);\n\n/* Lighest colors */\n@primary-lightest: lighten(@primary, 40%);\n@secondary-lightest: lighten(@secondary, 65%);\n@tertiary-lightest: lighten(@tertiary, 70%);\n@info-lightest: lighten(@info, 60%);\n@success-lightest: lighten(@success, 60%);\n@warning-lightest: lighten(@warning, 50%);\n@error-lightest: lighten(@error, 50%);\n\n/* Greys */\n@black: #000000;\n@grey-dark: #333333;\n@grey-medium: #555555;\n@grey-light: #AAAAAA;\n@grey-lighter: #E8E8E8;\n@grey-lightest: #F8F8F8;\n@white: #FFFFFF;\n\n/* Misc colors */\n@body-background: @white;\n\n/* @end Colors */\n\n/* @group Component styles */\n\n@container-background: @white;\n\n@button-text-color-dark: @grey-dark;\n@button-text-color-light: @grey-lighter;\n@button-background-default: @grey-lighter;\n\n@table-stripe: @grey-lightest;\n@table-hover: darken(@grey-lightest, 3%);\n@table-border: @border-base;\n\n@content-box-background: @white;\n@content-box-header-background: @primary-lightest;\n@content-box-header-border: 1px solid @primary-lighter;\n@content-box-footer-background: @content-box-header-background;\n@content-box-footer-border: @content-box-header-border;\n\n@modal-background: @content-box-background;\n@modal-header-background: @content-box-header-background;\n@modal-header-border: @content-box-header-border;\n\n@modal-footer-background: @modal-header-background;\n@modal-footer-border: @modal-header-border;\n\n@well-background: @grey-lightest;\n@well-border: @border-base;\n\n@tab-background: @grey-lightest;\n@tab-active-background: @white;\n@tab-border: @border-base;\n\n@code-block-background: @grey-lightest;\n@code-block-name-background: contrast(@code-block-background, darken(@code-block-background, 5%), lighten(@code-block-background, 5%)); // lesshint maxCharPerLine: false\n@code-block-border: @border-base;\n\n@input-width: 200px;\n@input-height: 32px;\n\n@textarea-width: @input-width;\n@textarea-height: @input-height * 2;\n\n@checkbox-size: 16px;\n@checkbox-background: @white;\n@checkbox-border: @border-base;\n@checkbox-active-background: @primary;\n@checkbox-icon-background: @checkbox-background;\n@checkbox-icon-border: 2px solid @checkbox-icon-background;\n@checkbox-shadow: inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.1);\n\n/* @end Component styles */\n\n/* @group Shadows */\n\n@shadow-none: 0 0 0 0 rgba(0, 0, 0, 0);\n@shadow-inset-subtle: inset 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n@shadow-inset-hard: inset 0 1px 5px 0 rgba(0, 0, 0, 0.2);\n@shadow-subtle: 0 0 3px 0 rgba(0, 0, 0, 0.1);\n@shadow-hard: 0 0 5px 0 rgba(0, 0, 0, 0.2);\n\n/* @end Shadows */\n\n/* @group Borders */\n\n@border-radius-base: 2px;\n@border-base: 1px solid @grey-lighter;\n@border-none: 0;\n\n/* @end Borders */\n\n/* @group Fonts */\n\n@font-size-base: 14px;\n@font-size-small: floor(@font-size-base * 0.9);\n@font-size-large: floor(@font-size-base * 1.4);\n\n@font-size-h1: floor(@font-size-base * 3);\n@font-size-h2: floor(@font-size-base * 2.5);\n@font-size-h3: floor(@font-size-base * 2.2);\n@font-size-h4: floor(@font-size-base * 2);\n@font-size-h5: floor(@font-size-base * 1.8);\n@font-size-h6: floor(@font-size-base * 1.4);\n\n@font-color-base: @grey-dark;\n@header-color-base: @font-color-base;\n\n@font-family-base: arial, helvetica, sans-serif;\n\n/* @end Fonts */\n\n/* @group Font Weights */\n\n@font-weight-light: lighter;\n@font-weight-normal: normal;\n@font-weight-bold: bold;\n\n/* @end Font Weights */\n\n/* @group Spacing */\n\n@padding-base: 10px;\n@padding-small: floor(@padding-base * 0.5);\n@padding-large: floor(@padding-base * 1.5);\n\n@margin-base: 10px;\n@margin-small: floor(@margin-base * 0.5);\n@margin-large: floor(@margin-base * 1.5);\n\n/* @end Spacing */\n\n/* @group Grid */\n\n@grid-divisions: 12;\n@gutter-width: 30px;\n\n/* @end Grid */\n\n/* @group Screen sizes */\n\n@screen-sm: 480px;\n@screen-md: 768px;\n@screen-lg: 992px;\n@screen-xl: 1200px;\n\n/* @end Screen sizes */\n";
var packageJson = require('../../../package.json'); // tslint:disable-line:no-var-requires
var App = (function (_super) {
__extends(App, _super);
function App() {
return _super !== null && _super.apply(this, arguments) || this;
}
App.prototype.render = function () {
return (React.createElement(ts_1.Container, { solid: true },
React.createElement(ts_1.Section, { className: "padding-vertical-none" },
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h1", null,
React.createElement("img", { src: "images/roe-logo-medium.png", alt: "Roe", style: { width: 150, display: 'block' } })),
React.createElement("p", { className: "secondary" },
React.createElement("strong", null,
"DabApps' Project Development Kit (v",
packageJson.version,
")"))))),
React.createElement(atomic_floats_1.default, null),
React.createElement(atomic_hides_1.default, null),
React.createElement(atomic_spacing_1.default, null),
React.createElement(atomic_text_1.default, null),
React.createElement(atomic_text_align_1.default, null),
React.createElement(alerts_1.default, null),
React.createElement(buttons_1.default, null),
React.createElement(code_blocks_1.default, null),
React.createElement(content_boxes_1.default, null),
React.createElement(grid_1.default, null),
React.createElement(inputs_1.default, null),
React.createElement(ipsum_1.default, null),
React.createElement(modals_1.default, null),
React.createElement(sections_1.default, null),
React.createElement(spaced_groups_1.default, null),
React.createElement(tabs_1.default, null),
React.createElement(tables_1.default, null),
React.createElement(wells_1.default, null),
React.createElement(ts_1.Section, null,
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h2", null,
React.createElement(ts_1.Anchor, null, "Less variables")),
React.createElement(ts_1.CodeBlock, { language: "less", name: "Less variables" }, variables))))));
};
return App;
}(React.Component));
ReactDOM.render(React.createElement(App, null), document.getElementById('app'));
},{"../../../package.json":225,"../../../src/ts":235,"./alerts":1,"./atomic-floats":2,"./atomic-hides":3,"./atomic-spacing":4,"./atomic-text":6,"./atomic-text-align":5,"./buttons":7,"./code-blocks":8,"./content-boxes":9,"./grid":10,"./inputs":12,"./ipsum":13,"./livereload":14,"./modals":15,"./sections":16,"./spaced-groups":17,"./tables":18,"./tabs":19,"./wells":20,"path":54,"react":223,"react-dom":63}],12:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var ts_1 = require("../../../src/ts");
var Inputs = function () { return (React.createElement(ts_1.Section, null,
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h2", null,
React.createElement(ts_1.Anchor, null, "Inputs")))),
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h3", null, "Demo"),
React.createElement("p", null, "Textarea"),
React.createElement("textarea", null),
React.createElement("p", null, "Input"),
React.createElement("input", { type: "text", placeholder: "Placeholder" }),
React.createElement("input", { type: "text", placeholder: "Placeholder", disabled: true }),
React.createElement("input", { type: "text", className: "error", placeholder: "Placeholder" }),
React.createElement("input", { type: "text", className: "error", placeholder: "Placeholder", disabled: true }),
React.createElement("p", null, "Checkbox"),
React.createElement("input", { type: "checkbox" }),
React.createElement("input", { type: "checkbox", disabled: true }),
React.createElement("input", { type: "checkbox", className: "error" }),
React.createElement("input", { type: "checkbox", className: "error", disabled: true }),
React.createElement("p", null, "Select"),
React.createElement("select", null,
React.createElement("option", null, "Option")),
React.createElement("select", { disabled: true },
React.createElement("option", null, "Option")),
React.createElement("select", { className: "error" },
React.createElement("option", null, "Option")),
React.createElement("select", { className: "error", disabled: true },
React.createElement("option", null, "Option")),
React.createElement("p", null, "Form Group Inline"),
React.createElement(ts_1.FormGroup, null,
React.createElement("label", null, "Label"),
React.createElement("input", { type: "text" })),
React.createElement("p", null, "Form Group Inline Checkbox"),
React.createElement(ts_1.FormGroup, null,
React.createElement("label", null, "Label"),
React.createElement("input", { type: "checkbox" })),
React.createElement("p", null, "Form Group Inline Radio"),
React.createElement(ts_1.FormGroup, null,
React.createElement("label", null, "Label"),
React.createElement("input", { type: "radio" })),
React.createElement("p", null, "Form Group Inline Checkbox / Radio Alternative"),
React.createElement(ts_1.FormGroup, null,
React.createElement("input", { type: "checkbox" }),
React.createElement("label", null, "Label")),
React.createElement("p", null, "Form Group Block"),
React.createElement(ts_1.FormGroup, { block: true },
React.createElement("label", null, "Label"),
React.createElement("input", { type: "text" })),
React.createElement("p", null, "Form Group Block Checkbox"),
React.createElement(ts_1.FormGroup, { block: true },
React.createElement("label", null, "Label"),
React.createElement("input", { type: "checkbox" })),
React.createElement("p", null, "Form Group Block Radio"),
React.createElement(ts_1.FormGroup, { block: true },
React.createElement("label", null, "Label"),
React.createElement("input", { type: "radio" })),
React.createElement("p", null, "Form Group Inline"),
React.createElement(ts_1.FormGroup, null,
React.createElement("label", null, "Label"),
React.createElement("textarea", null)),
React.createElement("p", null, "Form Group Block"),
React.createElement(ts_1.FormGroup, { block: true },
React.createElement("label", null, "Label"),
React.createElement("textarea", null)),
React.createElement("p", null, "Input Group with Input Group Addons"),
React.createElement(ts_1.FormGroup, null,
React.createElement("label", null, "Label"),
React.createElement(ts_1.InputGroup, null,
React.createElement(ts_1.InputGroupAddon, null, "$"),
React.createElement("input", { type: "number" }),
React.createElement(ts_1.InputGroupAddon, null, ".00"))),
React.createElement(ts_1.FormGroup, null,
React.createElement("label", null, "Label"),
React.createElement(ts_1.InputGroup, null,
React.createElement(ts_1.InputGroupAddon, null, "$"),
React.createElement("input", { type: "number" }))),
React.createElement(ts_1.FormGroup, { block: true },
React.createElement("label", null, "Label"),
React.createElement(ts_1.InputGroup, null,
React.createElement("input", { type: "number" }),
React.createElement(ts_1.InputGroupAddon, null, ".00"))))),
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h3", null, "Code"),
React.createElement(ts_1.CodeBlock, { language: "javascript", name: "JSX" }, "\n <p>\n Form Group Inline\n </p>\n <FormGroup>\n <label>\n Label\n </label>\n <input type=\"text\" />\n </FormGroup>\n\n <p>\n Form Group Inline Checkbox\n </p>\n <FormGroup>\n <label>\n Label\n </label>\n <input type=\"checkbox\" />\n </FormGroup>\n\n <p>\n Form Group Inline Radio\n </p>\n <FormGroup>\n <label>\n Label\n </label>\n <input type=\"radio\" />\n </FormGroup>\n\n <p>\n Form Group Inline Checkbox / Radio Alternative\n </p>\n <FormGroup>\n <input type=\"checkbox\" />\n <label>\n Label\n </label>\n </FormGroup>\n\n <p>\n Form Group Block\n </p>\n <FormGroup block>\n <label>\n Label\n </label>\n <input type=\"text\" />\n </FormGroup>\n\n <p>\n Form Group Block Checkbox\n </p>\n <FormGroup block>\n <label>\n Label\n </label>\n <input type=\"checkbox\" />\n </FormGroup>\n\n <p>\n Form Group Block Radio\n </p>\n <FormGroup block>\n <label>\n Label\n </label>\n <input type=\"radio\" />\n </FormGroup>\n\n <p>\n Form Group Inline\n </p>\n <FormGroup>\n <label>\n Label\n </label>\n <textarea />\n </FormGroup>\n\n <p>\n Form Group Block\n </p>\n <FormGroup block>\n <label>\n Label\n </label>\n <textarea />\n </FormGroup>\n\n <p>\n Input Group with Input Group Addons\n </p>\n <FormGroup>\n <label>\n Label\n </label>\n <InputGroup>\n <InputGroupAddon>\n $\n </InputGroupAddon>\n <input type=\"number\" />\n <InputGroupAddon>\n .00\n </InputGroupAddon>\n </InputGroup>\n </FormGroup>\n\n <FormGroup>\n <label>\n Label\n </label>\n <InputGroup>\n <InputGroupAddon>\n $\n </InputGroupAddon>\n <input type=\"number\" />\n </InputGroup>\n </FormGroup>\n\n <FormGroup block>\n <label>\n Label\n </label>\n <InputGroup>\n <input type=\"number\" />\n <InputGroupAddon>\n .00\n </InputGroupAddon>\n </InputGroup>\n </FormGroup>\n "))))); };
exports.default = Inputs;
},{"../../../src/ts":235,"react":223}],13:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var ts_1 = require("../../../src/ts");
var Ipsum = function () { return (React.createElement(ts_1.Section, null,
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h2", null,
React.createElement(ts_1.Anchor, null, "Ipsum")))),
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h3", null, "Demo"),
React.createElement("p", null,
React.createElement("strong", null,
React.createElement(ts_1.DabIpsum, { component: "text" }))),
React.createElement(ts_1.DabIpsum, { component: "p", count: 5 }),
React.createElement(ts_1.DabIpsum, { component: "ul", count: 3 }),
React.createElement(ts_1.DabIpsum, { component: "ol", count: 3 }))),
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h3", null, "Code"),
React.createElement(ts_1.CodeBlock, { language: "javascript", name: "JSX" }, "\n <p>\n <strong>\n <DabIpsum component=\"text\" />\n </strong>\n </p>\n <DabIpsum component=\"p\" count={5} /> // Default\n <DabIpsum component=\"ul\" count={3} />\n <DabIpsum component=\"ol\" count={3} />\n "))))); };
exports.default = Ipsum;
},{"../../../src/ts":235,"react":223}],14:[function(require,module,exports){
(function (process){
var LIVERELOAD_URL = 'http://localhost:35729/livereload.js?snipver=1';
var setupLivereload = function () {
var element = document.createElement('script');
element.type = 'text/javascript';
element.src = LIVERELOAD_URL;
document.body.appendChild(element);
};
if (process.env.LIVERELOAD === 'true') {
setupLivereload();
}
}).call(this,require('_process'))
},{"_process":55}],15:[function(require,module,exports){
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var ts_1 = require("../../../src/ts");
var Modals = (function (_super) {
__extends(Modals, _super);
function Modals(props) {
var _this = _super.call(this, props) || this;
_this.state = {
modals: []
};
_this.onClickOpenModal = _this.onClickOpenModal.bind(_this);
_this.onClickCloseModal = _this.onClickCloseModal.bind(_this);
return _this;
}
Modals.prototype.render = function () {
var modals = this.state.modals;
return (React.createElement(ts_1.Section, null,
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h2", null,
React.createElement(ts_1.Anchor, null, "Modals")))),
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h3", null, "Demo"),
React.createElement(ts_1.ModalRenderer, { modals: modals }),
React.createElement(ts_1.Button, { className: "primary", onClick: this.onClickOpenModal }, "Open modal"))),
React.createElement(ts_1.Row, null,
React.createElement(ts_1.Column, null,
React.createElement("h3", null, "Code"),
React.createElement("p", null, "Store a list of Modals that can be rendered using the ModalRenderer."),
React.createElement("p", null, "Note: ModalCloseIcon should be the first element inside the ModalHeader."),
React.createElement(ts_1.CodeBlock, { language: "javascript", name: "Opening and closing modals" }, "\n public onClickCloseModal () {\n const modals = [...this.state.modals];\n modals.pop();\n\n this.setState({\n modals\n });\n }\n\n