optimizely-oui
Version:
Optimizely's Component Library.
184 lines (183 loc) • 7.19 kB
JavaScript
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); }
import React from "react";
import { storiesOf } from "@storybook/react";
import { boolean as _boolean, text } from "@storybook/addon-knobs";
import { action } from "@storybook/addon-actions";
import { LayoutGrid, LayoutGridCell, LayoutGridContainer } from "./layout-grid";
import { Grid, GridCell, GridContainer } from "../Grid/grid";
import NavBar from "../NavBar";
import Code from "../Code";
import Button from "../Button";
var openLogoUrl = "https://app.optimizely.com/dist/static/img/rebrand/logo-f64d2aed989db744b609666199d7d2a2.svg";
var storiesForRow = storiesOf("Layout|LayoutGrid", module);
storiesForRow.addDecorator(function (story) {
return React.createElement("div", {
id: "root-preview"
}, story());
});
var borderStyleProp = {
style: {
border: "1px solid black"
}
};
storiesForRow.add("Legacy Epi layout", function () {
return React.createElement(LayoutGridContainer, null, React.createElement(LayoutGrid, {
style: {
height: "100vh",
columnGap: "8px",
rowGap: "8px"
}
}, React.createElement(LayoutGridCell, _extends({
large: 12
}, {
style: {
border: "1px solid black",
height: "40px"
}
}), "Navigation"), React.createElement(LayoutGridCell, _extends({
large: 2
}, borderStyleProp), "Work Item Navigation"), React.createElement(LayoutGridCell, {
large: 8
}, React.createElement("div", {
style: {
border: "1px solid black",
height: "40px"
}
}, "Toolbar"), React.createElement(GridContainer, {
style: {
border: "1px solid black",
height: "calc(100% - 48px)",
marginTop: "8px"
}
}, React.createElement(Grid, null, React.createElement(GridCell, {
large: 12
}, "Workspace")))), React.createElement(LayoutGridCell, _extends({
large: 2
}, borderStyleProp), "Contextual Toolbar")));
}).add("Legacy Opti layout", function () {
return React.createElement(LayoutGridContainer, {
style: {
height: "100vh"
}
}, React.createElement(LayoutGrid, null, React.createElement(LayoutGridCell, _extends({
large: 3
}, borderStyleProp), React.createElement(NavBar, {
isOpen: true,
logoUrl: openLogoUrl,
title: "Test Project",
badgeText: "WEB",
homeUrl: "http://optimizely.com",
trialContent: React.createElement("div", {
className: "push-double--bottom push-double--left truncate"
}, _boolean("isOpen", true) && "5 days left in your trial")
}, React.createElement(NavBar.PrimaryLink, {
iconName: "projects",
type: "pushstate",
linkLabel: "Projects",
testSection: "projects"
}), React.createElement(NavBar.PrimaryLink, {
iconName: "experiment",
type: "link",
linkLabel: "Experiment",
testSection: "experiment",
isActive: true
}), React.createElement(NavBar.PrimaryLink, {
iconName: "rollouts",
type: "link",
linkLabel: "Features",
testSection: "features"
}), React.createElement(NavBar.PrimaryLink, {
iconName: "audiences",
type: "link",
linkLabel: "Audiences",
testSection: "audiences"
}), React.createElement(NavBar.PrimaryLink, {
iconName: "events",
type: "button",
linkLabel: "Events",
testSection: "events"
}), React.createElement(NavBar.PrimaryLink, {
iconName: "settings",
type: "link",
linkLabel: "Settings",
testSection: "settings"
}), React.createElement(NavBar.PrimaryLink, {
iconName: "getting-started",
type: "pushstate",
linkLabel: "Getting Started",
testSection: "getting-started",
hasSeparator: true
}), React.createElement(NavBar.SecondaryLink, {
iconName: "program-management",
type: "button",
linkLabel: "Program Management",
testSection: "program-management"
}), React.createElement(NavBar.SecondaryLink, {
iconName: "help",
type: "link",
linkLabel: "Help",
testSection: "help"
}), React.createElement(NavBar.SecondaryLink, {
iconName: "feedback",
type: "link",
linkLabel: "Feedback",
testSection: "feedback"
}), React.createElement(NavBar.CurrentUserMenu, {
showEmulate: _boolean("showEmulate", true),
onEmulateClick: 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: action("accountSwitcherHandler"),
userName: "Hassan Khalid",
accountSettingsUrl: "#",
profileUrl: "#",
logoutUrl: "#",
profileAvatarUrl: text("profileAvatarUrl", "https://optimizely-profile-images-devel.s3.amazonaws.com/img/user/hassan.khalid%40optimizely.com/c57517e7ee4941d0a5e71f3d89df0c0d.jpg")
}))), React.createElement(LayoutGridCell, _extends({
large: 3
}, borderStyleProp), "Tabs/Header"), React.createElement(LayoutGridCell, _extends({
large: 6
}, borderStyleProp), "Stage")));
}).add("Responsive Showcase", function () {
return React.createElement(LayoutGridContainer, {
style: {
height: "100vh"
}
}, React.createElement(LayoutGrid, null, React.createElement(LayoutGridCell, _extends({
large: 12
}, borderStyleProp), React.createElement("div", null, React.createElement("h2", null, "Features"), React.createElement("p", {
className: "lead"
}, "Manage your app\u2019s feature flags"))), React.createElement(LayoutGridCell, _extends({
large: 6
}, borderStyleProp), React.createElement("img", {
src: "https://s3-us-west-1.amazonaws.com/zach-designs/flagly/thing.svg"
})), React.createElement(LayoutGridCell, _extends({
large: 6
}, borderStyleProp), React.createElement(LayoutGrid, null, React.createElement(LayoutGridCell, {
large: 12
}, React.createElement("h6", null, "What\u2019s a Feature Flag?"), React.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.createElement("h6", null, "Try it for yourself"), React.createElement(Code, {
type: "block"
}, "var enabled = optimizely.isFeatureEnabled(”chat_window”, userId);" + "\nif(enabled)\n{\n // Feature is enabled\n}" + "\nelse {\n // Feature is disabled\n}")), React.createElement(LayoutGridCell, {
large: 6
}, React.createElement(Button, {
width: "full"
}, "View Docs")), React.createElement(LayoutGridCell, {
large: 6
}, React.createElement(Button, {
width: "full"
}, "Create Feature"))))));
});