optimizely-oui
Version:
Optimizely's Component Library.
197 lines (185 loc) • 8.47 kB
JavaScript
"use strict";
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@storybook/react");
var _addonKnobs = require("@storybook/addon-knobs");
var _addonActions = require("@storybook/addon-actions");
var _layoutGrid = require("./layout-grid");
var _grid = require("../Grid/grid");
var _NavBar = _interopRequireDefault(require("../NavBar"));
var _Code = _interopRequireDefault(require("../Code"));
var _Button = _interopRequireDefault(require("../Button"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var openLogoUrl = "https://app.optimizely.com/dist/static/img/rebrand/logo-f64d2aed989db744b609666199d7d2a2.svg";
var storiesForRow = (0, _react2.storiesOf)("Layout|LayoutGrid", module);
storiesForRow.addDecorator(function (story) {
return _react["default"].createElement("div", {
id: "root-preview"
}, story());
});
var borderStyleProp = {
style: {
border: "1px solid black"
}
};
storiesForRow.add("Legacy Epi layout", function () {
return _react["default"].createElement(_layoutGrid.LayoutGridContainer, null, _react["default"].createElement(_layoutGrid.LayoutGrid, {
style: {
height: "100vh",
columnGap: "8px",
rowGap: "8px"
}
}, _react["default"].createElement(_layoutGrid.LayoutGridCell, _extends({
large: 12
}, {
style: {
border: "1px solid black",
height: "40px"
}
}), "Navigation"), _react["default"].createElement(_layoutGrid.LayoutGridCell, _extends({
large: 2
}, borderStyleProp), "Work Item Navigation"), _react["default"].createElement(_layoutGrid.LayoutGridCell, {
large: 8
}, _react["default"].createElement("div", {
style: {
border: "1px solid black",
height: "40px"
}
}, "Toolbar"), _react["default"].createElement(_grid.GridContainer, {
style: {
border: "1px solid black",
height: "calc(100% - 48px)",
marginTop: "8px"
}
}, _react["default"].createElement(_grid.Grid, null, _react["default"].createElement(_grid.GridCell, {
large: 12
}, "Workspace")))), _react["default"].createElement(_layoutGrid.LayoutGridCell, _extends({
large: 2
}, borderStyleProp), "Contextual Toolbar")));
}).add("Legacy Opti layout", function () {
return _react["default"].createElement(_layoutGrid.LayoutGridContainer, {
style: {
height: "100vh"
}
}, _react["default"].createElement(_layoutGrid.LayoutGrid, null, _react["default"].createElement(_layoutGrid.LayoutGridCell, _extends({
large: 3
}, borderStyleProp), _react["default"].createElement(_NavBar["default"], {
isOpen: true,
logoUrl: openLogoUrl,
title: "Test Project",
badgeText: "WEB",
homeUrl: "http://optimizely.com",
trialContent: _react["default"].createElement("div", {
className: "push-double--bottom push-double--left truncate"
}, (0, _addonKnobs["boolean"])("isOpen", true) && "5 days left in your trial")
}, _react["default"].createElement(_NavBar["default"].PrimaryLink, {
iconName: "projects",
type: "pushstate",
linkLabel: "Projects",
testSection: "projects"
}), _react["default"].createElement(_NavBar["default"].PrimaryLink, {
iconName: "experiment",
type: "link",
linkLabel: "Experiment",
testSection: "experiment",
isActive: true
}), _react["default"].createElement(_NavBar["default"].PrimaryLink, {
iconName: "rollouts",
type: "link",
linkLabel: "Features",
testSection: "features"
}), _react["default"].createElement(_NavBar["default"].PrimaryLink, {
iconName: "audiences",
type: "link",
linkLabel: "Audiences",
testSection: "audiences"
}), _react["default"].createElement(_NavBar["default"].PrimaryLink, {
iconName: "events",
type: "button",
linkLabel: "Events",
testSection: "events"
}), _react["default"].createElement(_NavBar["default"].PrimaryLink, {
iconName: "settings",
type: "link",
linkLabel: "Settings",
testSection: "settings"
}), _react["default"].createElement(_NavBar["default"].PrimaryLink, {
iconName: "getting-started",
type: "pushstate",
linkLabel: "Getting Started",
testSection: "getting-started",
hasSeparator: true
}), _react["default"].createElement(_NavBar["default"].SecondaryLink, {
iconName: "program-management",
type: "button",
linkLabel: "Program Management",
testSection: "program-management"
}), _react["default"].createElement(_NavBar["default"].SecondaryLink, {
iconName: "help",
type: "link",
linkLabel: "Help",
testSection: "help"
}), _react["default"].createElement(_NavBar["default"].SecondaryLink, {
iconName: "feedback",
type: "link",
linkLabel: "Feedback",
testSection: "feedback"
}), _react["default"].createElement(_NavBar["default"].CurrentUserMenu, {
showEmulate: (0, _addonKnobs["boolean"])("showEmulate", true),
onEmulateClick: (0, _addonActions.action)("onEmulateClick"),
accountSwitcherItems: [{
text: "Account 1",
url: "#",
description: "Account 1 Description",
isCurrent: false
}, {
text: "Account 3",
url: "#",
description: "Account 3 Description",
isCurrent: false
}, {
text: "Account 2",
url: "#",
description: "Account 2 Description",
isCurrent: true
}],
accountSwitcherHandler: (0, _addonActions.action)("accountSwitcherHandler"),
userName: "Hassan Khalid",
accountSettingsUrl: "#",
profileUrl: "#",
logoutUrl: "#",
profileAvatarUrl: (0, _addonKnobs.text)("profileAvatarUrl", "https://optimizely-profile-images-devel.s3.amazonaws.com/img/user/hassan.khalid%40optimizely.com/c57517e7ee4941d0a5e71f3d89df0c0d.jpg")
}))), _react["default"].createElement(_layoutGrid.LayoutGridCell, _extends({
large: 3
}, borderStyleProp), "Tabs/Header"), _react["default"].createElement(_layoutGrid.LayoutGridCell, _extends({
large: 6
}, borderStyleProp), "Stage")));
}).add("Responsive Showcase", function () {
return _react["default"].createElement(_layoutGrid.LayoutGridContainer, {
style: {
height: "100vh"
}
}, _react["default"].createElement(_layoutGrid.LayoutGrid, null, _react["default"].createElement(_layoutGrid.LayoutGridCell, _extends({
large: 12
}, borderStyleProp), _react["default"].createElement("div", null, _react["default"].createElement("h2", null, "Features"), _react["default"].createElement("p", {
className: "lead"
}, "Manage your app\u2019s feature flags"))), _react["default"].createElement(_layoutGrid.LayoutGridCell, _extends({
large: 6
}, borderStyleProp), _react["default"].createElement("img", {
src: "https://s3-us-west-1.amazonaws.com/zach-designs/flagly/thing.svg"
})), _react["default"].createElement(_layoutGrid.LayoutGridCell, _extends({
large: 6
}, borderStyleProp), _react["default"].createElement(_layoutGrid.LayoutGrid, null, _react["default"].createElement(_layoutGrid.LayoutGridCell, {
large: 12
}, _react["default"].createElement("h6", null, "What\u2019s a Feature Flag?"), _react["default"].createElement("p", null, "Feature flags, also known as feature toggles, are a software development technique that lets you turn certain functionality on and off without deploying new code. This allows for better control and more experimentation over the full lifecycle of features. You can toggle a feature off to release code quickly without exposing it to users."), _react["default"].createElement("h6", null, "Try it for yourself"), _react["default"].createElement(_Code["default"], {
type: "block"
}, "var enabled = optimizely.isFeatureEnabled(”chat_window”, userId);" + "\nif(enabled)\n{\n // Feature is enabled\n}" + "\nelse {\n // Feature is disabled\n}")), _react["default"].createElement(_layoutGrid.LayoutGridCell, {
large: 6
}, _react["default"].createElement(_Button["default"], {
width: "full"
}, "View Docs")), _react["default"].createElement(_layoutGrid.LayoutGridCell, {
large: 6
}, _react["default"].createElement(_Button["default"], {
width: "full"
}, "Create Feature"))))));
});