@up-group/react-controls
Version:
We know that there are a ton of react UI library projects to choose from. Our hope with this one is to provide the next generation of react components that you can use to bootstrap your next project, or as a reference for building a UIKit. Read on to get
39 lines • 4.06 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var react_1 = require("@storybook/react");
var _1 = require("./");
var UpNotification_1 = require("../../Display/Notification/UpNotification");
var __1 = require("../../..");
var styles_1 = require("../../../stories/styles");
var stories = react_1.storiesOf('UpBox', module);
var RootContainer = function (storyFn) { return (React.createElement(__1.UpThemeProvider, { theme: __1.UpDefaultTheme },
React.createElement("div", { style: styles_1.storybookMainBodyStyles },
React.createElement(UpNotification_1.default, null,
"Pr\u00E9sentation du composant ",
React.createElement("code", null, "UpBox")),
storyFn()))); };
stories.addDecorator(RootContainer);
stories.addWithInfo('UpBox : center', 'Alignement des éléments au centre', function () { return (React.createElement("div", { style: { margin: "30px" } },
React.createElement(_1.default, { alignItems: 'center', backgroundColor: '#369', color: 'white', pad: 'small', margin: { horizontal: 'small', vertical: 'small' } },
React.createElement("p", null, "Alignement des \u00E9l\u00E9ment au centre"),
React.createElement("p", null, "Alignement des \u00E9l\u00E9ment au centre"),
React.createElement("p", null, "Alignement des \u00E9l\u00E9ment au centre"),
React.createElement("p", null, "Alignement des \u00E9l\u00E9ment au centre")))); }).addWithInfo('UpBox : baseline', 'Alignement des éléments baseline', function () { return (React.createElement("div", { style: { margin: "30px" } },
React.createElement(_1.default, { alignItems: 'baseline', backgroundColor: '#369', color: 'white', pad: 'small', margin: { horizontal: 'small', vertical: 'small' } },
React.createElement("p", null, "Alignement des \u00E9l\u00E9ment baseline : position 1 "),
React.createElement("p", null, "Alignement des \u00E9l\u00E9ment baseline : position 2 "),
React.createElement("p", null, "Alignement des \u00E9l\u00E9ment baseline : position 3 ")))); }).addWithInfo('UpBox : flex-end', 'Alignement des éléments à droite', function () { return (React.createElement("div", { style: { margin: "30px" } },
React.createElement(_1.default, { alignItems: 'flex-end', backgroundColor: '#369', color: 'white', pad: 'small', margin: { horizontal: 'small', vertical: 'small' } },
React.createElement("p", null, "Alignement des \u00E9l\u00E9ment flex-end : position 1 "),
React.createElement("p", null, "Alignement des \u00E9l\u00E9ment flex-end : position 2 "),
React.createElement("p", null, "Alignement des \u00E9l\u00E9ment flex-end : position 3 ")))); }).addWithInfo('UpBox : flex-start', 'Alignement des éléments à gauche', function () { return (React.createElement("div", { style: { margin: "30px" } },
React.createElement(_1.default, { alignItems: 'flex-start', backgroundColor: '#369', color: 'white', pad: 'small', margin: { horizontal: 'small', vertical: 'small' } },
React.createElement("p", null, "Alignement des \u00E9l\u00E9ment flex-start : position 1 "),
React.createElement("p", null, "Alignement des \u00E9l\u00E9ment flex-start : position 2 "),
React.createElement("p", null, "Alignement des \u00E9l\u00E9ment flex-start : position 3 ")))); }).addWithInfo('UpBox : stretch', 'Alignement des éléments stretch', function () { return (React.createElement("div", { style: { margin: "30px" } },
React.createElement(_1.default, { alignItems: 'stretch', backgroundColor: '#369', color: 'white', pad: 'small', margin: { horizontal: 'small', vertical: 'small' } },
React.createElement("p", null, "Alignement des \u00E9l\u00E9ment stretch : position 1 "),
React.createElement("p", null, "Alignement des \u00E9l\u00E9ment stretch : position 2 "),
React.createElement("p", null, "Alignement des \u00E9l\u00E9ment stretch : position 3 ")))); });
//# sourceMappingURL=index.stories.js.map