-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
150 lines (129 loc) · 10.4 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z$2 = ".storybook-button {\n font-family: \"Nunito Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n font-weight: 700;\n border: 0;\n border-radius: 3em;\n cursor: pointer;\n display: inline-block;\n line-height: 1;\n}\n.storybook-button--primary {\n color: white;\n background-color: #1ea7fd;\n}\n.storybook-button--secondary {\n color: #333;\n background-color: transparent;\n box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\n}\n.storybook-button--small {\n font-size: 12px;\n padding: 10px 16px;\n}\n.storybook-button--medium {\n font-size: 14px;\n padding: 11px 20px;\n}\n.storybook-button--large {\n font-size: 16px;\n padding: 12px 24px;\n}\n";
styleInject(css_248z$2);
/**
* Primary UI component for user interaction
*/
var Button = function (_a) {
var _b = _a.primary, primary = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c, backgroundColor = _a.backgroundColor, label = _a.label, props = __rest(_a, ["primary", "size", "backgroundColor", "label"]);
var mode = primary
? "storybook-button--primary"
: "storybook-button--secondary";
return (React__default['default'].createElement("button", __assign({ type: "button", className: ["storybook-button", "storybook-button--" + size, mode].join(" "), style: { backgroundColor: backgroundColor } }, props), label));
};
var css_248z$1 = ".wrapper {\n font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n padding: 15px 20px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\nsvg {\n display: inline-block;\n vertical-align: top;\n}\n\nh1 {\n font-weight: 900;\n font-size: 20px;\n line-height: 1;\n margin: 6px 0 6px 10px;\n display: inline-block;\n vertical-align: top;\n}\n\nbutton + button {\n margin-left: 10px;\n}\n";
styleInject(css_248z$1);
var Header = function (_a) {
var user = _a.user, onLogin = _a.onLogin, onLogout = _a.onLogout, onCreateAccount = _a.onCreateAccount;
return (React__default['default'].createElement("header", null,
React__default['default'].createElement("div", { className: "wrapper" },
React__default['default'].createElement("div", null,
React__default['default'].createElement("svg", { width: "32", height: "32", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg" },
React__default['default'].createElement("g", { fill: "none", fillRule: "evenodd" },
React__default['default'].createElement("path", { d: "M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z", fill: "#FFF" }),
React__default['default'].createElement("path", { d: "M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z", fill: "#555AB9" }),
React__default['default'].createElement("path", { d: "M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z", fill: "#91BAF8" }))),
React__default['default'].createElement("h1", null, "Acme")),
React__default['default'].createElement("div", null, user ? (React__default['default'].createElement(Button, { size: "small", onClick: onLogout, label: "Log out" })) : (React__default['default'].createElement(React__default['default'].Fragment, null,
React__default['default'].createElement(Button, { size: "small", onClick: onLogin, label: "Log in" }),
React__default['default'].createElement(Button, { primary: true, size: "small", onClick: onCreateAccount, label: "Sign up" })))))));
};
var css_248z = "section {\n font-family: \"Nunito Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n font-size: 14px;\n line-height: 24px;\n padding: 48px 20px;\n margin: 0 auto;\n max-width: 600px;\n color: #333;\n}\n\nh2 {\n font-weight: 900;\n font-size: 32px;\n line-height: 1;\n margin: 0 0 4px;\n display: inline-block;\n vertical-align: top;\n}\n\np {\n margin: 1em 0;\n}\n\na {\n text-decoration: none;\n color: #1ea7fd;\n}\n\nul {\n padding-left: 30px;\n margin: 1em 0;\n}\n\nli {\n margin-bottom: 8px;\n}\n\n.tip {\n display: inline-block;\n border-radius: 1em;\n font-size: 11px;\n line-height: 12px;\n font-weight: 700;\n background: #e7fdd8;\n color: #66bf3c;\n padding: 4px 12px;\n margin-right: 10px;\n vertical-align: top;\n}\n\n.tip-wrapper {\n font-size: 13px;\n line-height: 20px;\n margin-top: 40px;\n margin-bottom: 40px;\n}\n\n.tip-wrapper svg {\n display: inline-block;\n height: 12px;\n width: 12px;\n margin-right: 4px;\n vertical-align: top;\n margin-top: 3px;\n}\n\n.tip-wrapper svg path {\n fill: #1ea7fd;\n}\n";
styleInject(css_248z);
var Page = function (_a) {
var user = _a.user, onLogin = _a.onLogin, onLogout = _a.onLogout, onCreateAccount = _a.onCreateAccount;
return (React__default['default'].createElement("article", null,
React__default['default'].createElement(Header, { user: user, onLogin: onLogin, onLogout: onLogout, onCreateAccount: onCreateAccount }),
React__default['default'].createElement("section", null,
React__default['default'].createElement("h2", null, "Pages in Storybook"),
React__default['default'].createElement("p", null,
"We recommend building UIs with a",
" ",
React__default['default'].createElement("a", { href: "https://componentdriven.org", target: "_blank", rel: "noopener noreferrer" },
React__default['default'].createElement("strong", null, "component-driven")),
" ",
"process starting with atomic components and ending with pages."),
React__default['default'].createElement("p", null, "Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook:"),
React__default['default'].createElement("ul", null,
React__default['default'].createElement("li", null, "Use a higher-level connected component. Storybook helps you compose such data from the \"args\" of child component stories"),
React__default['default'].createElement("li", null, "Assemble data in the page component from your services. You can mock these services out using Storybook.")),
React__default['default'].createElement("p", null,
"Get a guided tutorial on component-driven development at",
" ",
React__default['default'].createElement("a", { href: "https://storybook.js.org/tutorials/", target: "_blank", rel: "noopener noreferrer" }, "Storybook tutorials"),
". Read more in the",
" ",
React__default['default'].createElement("a", { href: "https://storybook.js.org/docs", target: "_blank", rel: "noopener noreferrer" }, "docs"),
"."),
React__default['default'].createElement("div", { className: "tip-wrapper" },
React__default['default'].createElement("span", { className: "tip" }, "Tip"),
" Adjust the width of the canvas with the",
" ",
React__default['default'].createElement("svg", { width: "10", height: "10", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" },
React__default['default'].createElement("g", { fill: "none", fillRule: "evenodd" },
React__default['default'].createElement("path", { d: "M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z", id: "a", fill: "#999" }))),
"Viewports addon in the toolbar"))));
};
exports.Button = Button;
exports.Header = Header;
exports.Page = Page;
//# sourceMappingURL=index.js.map