optimizely-oui
Version:
Optimizely's Component Library.
456 lines (442 loc) • 16.8 kB
JavaScript
function _templateObject3() {
var data = _taggedTemplateLiteral(["\n width: 1000px;\n height: 1000px;\n"]);
_templateObject3 = function _templateObject3() {
return data;
};
return data;
}
function _templateObject2() {
var data = _taggedTemplateLiteral(["\n width: 700px;\n height: 400px;\n background: lightgrey;\n margin: 100px auto;\n overflow: scroll;\n padding: 20px;\n padding-top: 300px;\n"]);
_templateObject2 = function _templateObject2() {
return data;
};
return data;
}
function _templateObject() {
var data = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n flex: 1;\n height: 100vh;\n"]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import React from "react";
import styled from "styled-components";
import { storiesOf } from "@storybook/react";
import { withKnobs, boolean as _boolean, number, select, text } from "@storybook/addon-knobs";
import { action } from "@storybook/addon-actions";
import Dropdown from "./index.js";
import Button from "../Button";
import ButtonRow from "../ButtonRow";
import Icon from "react-oui-icons";
import Link from "../Link";
var data = [{
title: "Manual",
description: "Dolcelatte cheeseburger swiss paneer cow gouda edam cheese slices"
}, {
title: "Maximize Conventions",
header: "Automation",
description: "Everyone loves cut the cheese cow squirty cheese emmental jarlsberg halloumi camembert de normandie."
}, {
title: "Faster Results",
description: "Cauliflower cheese stilton paneer hard cheese fondue."
}];
var dataLarge = [{
title: "Manual",
description: "Dolcelatte cheeseburger"
}, {
title: "Maximize Conventions",
header: "Automation",
description: "Everyone loves cut the cheese cow "
}, {
title: "Faster Results",
description: "Cauliflower cheese stilton paneer hard cheese fondue."
}, {
title: "Manual",
description: "Dolcelatte cheeseburger"
}, {
title: "Maximize Conventions",
header: "Automation",
description: "Everyone loves cut the cheese cow "
}, {
title: "Faster Results",
description: "Cauliflower cheese stilton paneer hard cheese fondue."
}, {
title: "Manual",
description: "Dolcelatte cheeseburger"
}, {
title: "Maximize Conventions",
header: "Automation",
description: "Everyone loves cut the cheese cow "
}, {
title: "Faster Results",
description: "Cauliflower cheese stilton paneer hard cheese fondue."
}, {
title: "Manual",
description: "Dolcelatte cheeseburger"
}, {
title: "Maximize Conventions",
header: "Automation",
description: "Everyone loves cut the cheese cow "
}, {
title: "Faster Results",
description: "Cauliflower cheese stilton paneer hard cheese fondue."
}];
var stories = storiesOf("Forms|Dropdown", module);
stories.addDecorator(withKnobs).addDecorator(function (story) {
return React.createElement("div", {
id: "root-preview"
}, story());
});
stories.add("Default", function () {
return React.createElement(Container, null, React.createElement(Dropdown, {
buttonContent: text("buttonContent", "Default Dropdown"),
width: number("width", 300),
arrowIcon: select("arrowIcon", {
up: "up",
down: "down",
left: "left",
right: "right",
none: "none"
}, "down")
}, React.createElement(Dropdown.Contents, null, data.map(function (item, index) {
return React.createElement(Dropdown.ListItem, {
key: index
}, React.createElement(Dropdown.BlockLink, {
onClick: action("click on complex item")
}, React.createElement(Dropdown.BlockLinkText, {
text: item.title
}), React.createElement(Dropdown.BlockLinkSecondaryText, {
secondaryText: item.description
})));
}))));
});
stories.add("Error", function () {
return React.createElement(Container, null, React.createElement(Dropdown, {
buttonContent: text("buttonContent", "Error State"),
width: number("width", 300),
displayError: true,
arrowIcon: select("arrowIcon", {
up: "up",
down: "down",
left: "left",
right: "right",
none: "none"
}, "down")
}, React.createElement(Dropdown.Contents, null, data.map(function (item, index) {
return React.createElement(Dropdown.ListItem, {
key: index
}, React.createElement(Dropdown.BlockLink, {
onClick: action("click on complex item")
}, React.createElement(Dropdown.BlockLinkText, {
text: item.title
}), React.createElement(Dropdown.BlockLinkSecondaryText, {
secondaryText: item.description
})));
}))));
});
stories.add("Icon", function () {
return React.createElement(Container, null, React.createElement(Dropdown, {
isDisabled: _boolean("isDisabled", false),
fullWidth: _boolean("fullWidth", false),
buttonContent: React.createElement("div", {
className: "flex flex-align--center"
}, "Hamburgers", " ", React.createElement("span", {
className: "push-half--left flex"
}, React.createElement(Icon, {
name: "hamburger"
}))),
width: number("width", 350)
}, React.createElement(Dropdown.Contents, null, data.map(function (item, index) {
return React.createElement(Dropdown.ListItem, {
key: index
}, React.createElement(Dropdown.BlockLink, {
onClick: action("click on complex item")
}, React.createElement(Dropdown.BlockLinkText, {
text: item.title
}), React.createElement(Dropdown.BlockLinkSecondaryText, {
secondaryText: item.description
})));
}))));
});
stories.add("With a Label", function () {
return React.createElement(Container, null, React.createElement(Dropdown, {
isDisabled: _boolean("isDisabled", false),
fullWidth: _boolean("fullWidth", false),
isLabelTight: _boolean("isLabelTight", true),
buttonContent: {
label: "Date",
content: "Anytime"
},
style: "plain",
arrowIcon: "down",
width: number("width", 350)
}, React.createElement(Dropdown.Contents, null, data.map(function (item, index) {
return React.createElement(Dropdown.ListItem, {
key: index,
role: "option"
}, React.createElement(Dropdown.BlockLink, {
onClick: action("click on complex item")
}, React.createElement(Dropdown.BlockLinkText, {
text: item.title
}), React.createElement(Dropdown.BlockLinkSecondaryText, {
secondaryText: item.description
})));
}))));
});
stories.add("Z-index", function () {
return React.createElement(Container, {
className: "background--faint"
}, React.createElement(SubContainer, null, React.createElement(ScrollContainer, null, React.createElement(Dropdown, {
isDisabled: _boolean("isDisabled", false),
buttonContent: text("buttonContent", "Dropdown"),
width: number("width", 300),
zIndex: number("zIndex", 9999)
}, React.createElement(Dropdown.Contents, null, data.map(function (item, index) {
return React.createElement(Dropdown.ListItem, {
key: index
}, React.createElement(Dropdown.BlockLink, {
onClick: action("click on complex item")
}, React.createElement(Dropdown.BlockLinkText, {
text: item.title
}), React.createElement(Dropdown.BlockLinkSecondaryText, {
secondaryText: item.description
})));
}))), React.createElement("h1", null, "This text should be behind the open dropdown"))));
});
var renderActivator = function renderActivator(_ref // eslint-disable-line
) {
var onBlur = _ref.onBlur,
onClick = _ref.onClick,
buttonRef = _ref.buttonRef;
return React.createElement(Button, {
buttonRef: buttonRef,
onClick: onClick,
onBlur: onBlur
}, "Click to activate");
};
stories.add("List", function () {
return React.createElement(Container, {
className: "background--faint"
}, React.createElement(SubContainer, null, React.createElement(Dropdown, {
isDisabled: _boolean("isDisabled", false),
renderActivator: renderActivator,
placement: "top-start",
width: number("width", 300)
}, React.createElement(Dropdown.Contents, {
minWidth: 300,
direction: "up"
}, React.createElement(Dropdown.ListItem, null, React.createElement(Dropdown.BlockLink, {
onClick: action("click dropdown block link")
}, React.createElement(Dropdown.BlockLinkText, {
text: "This is a label"
}), React.createElement(Dropdown.BlockLinkSecondaryText, {
secondaryText: "This is a smaller description"
}))), React.createElement(Dropdown.ListItem, null, React.createElement(Dropdown.BlockLink, {
onClick: action("click dropdown block link 2")
}, React.createElement(Dropdown.BlockLinkText, {
text: "This is a second label"
}), React.createElement(Dropdown.BlockLinkSecondaryText, {
secondaryText: "This is a second smaller description"
}))))), React.createElement("h1", null, "This text should be behind the open dropdown")));
});
stories.add("With faux highlighting", function () {
return React.createElement(Container, null, React.createElement(Dropdown, {
buttonContent: text("buttonContent", "Activate"),
width: number("width", 300)
}, React.createElement(Dropdown.Contents, {
minWidth: 300
}, dataLarge.map(function (item, idx) {
return React.createElement(Dropdown.ListItem, {
key: idx
}, React.createElement(Dropdown.BlockLink, {
onClick: action("click dropdown block link ".concat(idx + 1)),
hasFauxFocus: idx === dataLarge.length - 2
}, React.createElement(Dropdown.BlockLinkText, {
text: item.title
}), React.createElement(Dropdown.BlockLinkSecondaryText, {
secondaryText: item.description
})));
}))));
});
var renderHeader = function renderHeader() {
return React.createElement("div", {
className: "flex soft"
}, React.createElement("div", {
className: "flex--1 milli"
}, "Attic and Button"), React.createElement("div", null, React.createElement("a", {
href: "https://www.example.com/",
className: "milli"
}, "https://www.atticandbutton.com/")));
};
stories.add("With a header and separators", function () {
return React.createElement(Container, null, React.createElement(Dropdown, {
buttonContent: text("buttonContent", "Activate"),
width: number("width", 600)
}, React.createElement(Dropdown.Contents, {
renderHeader: renderHeader
}, React.createElement(Dropdown.ListItem, {
role: "separator",
ignoreToggle: true
}, "Large Things"), dataLarge.map(function (item, idx) {
return React.createElement(Dropdown.ListItem, {
role: "menuitem",
key: idx
}, React.createElement(Dropdown.BlockLink, {
onClick: action("click dropdown block link ".concat(idx + 1)),
hasFauxFocus: idx === 1
}, React.createElement(Dropdown.BlockLinkText, {
text: item.title
}), React.createElement(Dropdown.BlockLinkSecondaryText, {
secondaryText: item.description
})));
}), React.createElement(Dropdown.ListItem, {
role: "separator",
ignoreToggle: true
}, "Small Things"), data.map(function (item, idx) {
return React.createElement(Dropdown.ListItem, {
role: "menuitem",
key: idx
}, React.createElement(Dropdown.BlockLink, {
onClick: action("click dropdown block link ".concat(idx + 1))
}, React.createElement(Dropdown.BlockLinkText, {
text: item.title
}), React.createElement(Dropdown.BlockLinkSecondaryText, {
secondaryText: item.description
})));
}))));
});
stories.add("Warnings", function () {
var longSecondaryText = "exclamation! ".repeat(10);
return React.createElement(Container, null, React.createElement(Dropdown, {
buttonContent: text("buttonContent", "Activate"),
width: number("width", 300)
}, React.createElement(Dropdown.Contents, {
minWidth: 300
}, React.createElement(Dropdown.ListItem, {
hasFauxFocus: true
}, React.createElement(Dropdown.BlockLink, {
onClick: action("click dropdown block link 1"),
isLink: false
}, React.createElement(Dropdown.BlockLinkText, {
text: "This is a warning"
}), React.createElement(Dropdown.BlockLinkSecondaryText, {
isWarning: true,
secondaryText: "Warning: There is an exclamation mark"
}))), React.createElement(Dropdown.ListItem, null, React.createElement(Dropdown.BlockLink, {
onClick: action("click dropdown block link 2"),
isLink: false
}, React.createElement(Dropdown.BlockLinkText, {
text: "Another Warning"
}), React.createElement(Dropdown.BlockLinkSecondaryText, {
isWarning: true,
secondaryText: longSecondaryText
}))))));
});
stories.add("Multi Select", function () {
return React.createElement(Container, null, React.createElement("div", null, React.createElement("p", null, "Add ", React.createElement("code", null, "isMultiSelect = true"), "for each BlockLink that should include a checkbox, and", React.createElement("code", null, "isItemSelected = true"), " for each item that should appear as checked/selected")), React.createElement(Dropdown, {
buttonContent: {
label: "Type",
content: "Any"
},
style: "plain",
arrowIcon: "down",
shouldHideChildrenOnClick: _boolean("shouldHideChildrenOnClick", false)
}, React.createElement(Dropdown.Contents, null, data.map(function (item, index) {
return React.createElement(Dropdown.ListItem, {
key: index
}, React.createElement(Dropdown.BlockLink, {
isMultiSelect: true,
isItemSelected: item.title === "Manual",
onClick: action("click on complex item")
}, React.createElement(Dropdown.BlockLinkText, {
text: item.title
})));
}))));
});
stories.add("Custom hide function", function () {
return [React.createElement("p", {
key: "sourceLink",
className: "push--bottom"
}, "This story's children use the optional", " ", React.createElement(Link, {
href: "https://reactjs.org/docs/render-props.html",
newWindow: true
}, "render props pattern"), ".", " ", React.createElement(Link, {
href: "https://github.com/optimizely/oui/blob/devel/src/components/Dropdown/Dropdown.story.js",
newWindow: true
}, "Click here"), " ", "to see this story's source code."), React.createElement(Container, {
key: "story"
}, React.createElement(Dropdown, {
arrowIcon: select("arrowIcon", {
up: "up",
down: "down",
left: "left",
right: "right",
none: "none"
}, "down"),
buttonContent: {
label: "Date",
content: "Anytime"
},
placement: select("placement", {
top: "top",
"top-start": "top-start",
"top-end": "top-end",
bottom: "bottom",
"bottom-start": "bottom-start",
"bottom-end": "bottom-end",
right: "right",
"right-start": "right-start",
"right-end": "right-end",
left: "left",
"left-start": "left-start",
"left-end": "left-end"
}, "bottom-start"),
shouldHideChildrenOnClick: _boolean("shouldHideChildrenOnClick", false),
style: "plain",
width: number("width", 300)
}, function (_ref2) {
var handleHideChildren = _ref2.handleHideChildren;
return React.createElement("div", {
className: "soft background--white"
}, React.createElement("div", {
className: "soft--bottom"
}, "This is some initial text! Click me, nothing happens."), React.createElement(ButtonRow, {
leftGroup: [React.createElement(Button, {
key: "nothing",
onClick: action("some other action")
}, "Doesn't Hide"), React.createElement(Button, {
key: "something",
onClick: handleHideChildren
}, "Hide Dropdown")]
}));
}))];
});
stories.add("With external icon hover actions", function () {
return React.createElement(Container, null, React.createElement(Dropdown, {
buttonContent: text("buttonContent", "Default Dropdown"),
width: number("width", 300),
arrowIcon: select("arrowIcon", {
up: "up",
down: "down",
left: "left",
right: "right",
none: "none"
}, "down")
}, React.createElement(Dropdown.Contents, null, data.map(function (item, index) {
return React.createElement(Dropdown.ListItem, {
key: index
}, React.createElement(Dropdown.BlockLink, {
onClick: action("click on complex item"),
onMouseEnter: action("enter complex item"),
onMouseLeave: action("leave complex item"),
value: item.title
}, React.createElement(Dropdown.BlockLinkText, {
text: item.title,
hasExternalIcon: true
})));
}))));
});
var Container = styled.div(_templateObject());
var SubContainer = styled.div(_templateObject2());
var ScrollContainer = styled.div(_templateObject3());