optimizely-oui
Version:
Optimizely's Component Library.
318 lines (302 loc) • 17.9 kB
JavaScript
"use strict";
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@storybook/react");
var _addonActions = require("@storybook/addon-actions");
var _addonKnobs = require("@storybook/addon-knobs");
var _index = _interopRequireDefault(require("./index"));
var _Col = _interopRequireDefault(require("../Layout/Col"));
var _Row = _interopRequireDefault(require("../Layout/Row"));
var _Container = _interopRequireDefault(require("../Layout/Container"));
var _Dropdown = _interopRequireDefault(require("../Dropdown"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var stories = (0, _react2.storiesOf)("Informational|Tile", module);
var dropdownItems = [_react["default"].createElement(_Dropdown["default"].ListItem, {
key: 0,
role: "separator"
}, "Percentage Rollout"), _react["default"].createElement(_Dropdown["default"].ListItem, {
key: 1
}, _react["default"].createElement(_Dropdown["default"].BlockLink, {
onClick: (0, _addonActions.action)("onClick move to top"),
testSection: "dropdown-block-link-move"
}, _react["default"].createElement(_Dropdown["default"].BlockLinkText, {
text: "Move to top"
}))), _react["default"].createElement(_Dropdown["default"].ListItem, {
key: 2,
removeBorderTop: true
}, _react["default"].createElement(_Dropdown["default"].BlockLink, {
onClick: (0, _addonActions.action)("onClick duplicate"),
testSection: "dropdown-block-link-duplicate"
}, _react["default"].createElement(_Dropdown["default"].BlockLinkText, {
text: "Duplicate"
}))), _react["default"].createElement(_Dropdown["default"].ListItem, {
key: 3,
removeBorderTop: true
}, _react["default"].createElement(_Dropdown["default"].BlockLink, {
onClick: (0, _addonActions.action)("onClick archive"),
testSection: "dropdown-block-link-archive"
}, _react["default"].createElement(_Dropdown["default"].BlockLinkText, {
text: "Archive"
}))), _react["default"].createElement(_Dropdown["default"].ListItem, {
key: 4
}, _react["default"].createElement(_Dropdown["default"].BlockLink, {
onClick: (0, _addonActions.action)("onClick delete"),
testSection: "dropdown-block-link-delete"
}, _react["default"].createElement(_Dropdown["default"].BlockLinkText, {
text: "Delete...",
isDestructive: true
})))];
stories.addDecorator(_addonKnobs.withKnobs).addDecorator(function (story) {
return _react["default"].createElement("div", {
id: "root-preview"
}, story());
});
stories.add("Interactive (content is a Button)", function () {
var shouldShowWarning = (0, _addonKnobs["boolean"])("Show warningTitleAndBodyContent={[string, any]} (not actually a boolean prop, see story or component)", false);
return _react["default"].createElement(_Container["default"], null, _react["default"].createElement(_Row["default"], null, _react["default"].createElement(_Col["default"], {
small: 6
}, _react["default"].createElement(_index["default"], {
name: "Alpha",
description: "ID: 123456",
onTileClick: (0, _addonActions.action)("onTileClick - Alpha"),
isSelected: (0, _addonKnobs["boolean"])("isSelected", false),
isDraggable: (0, _addonKnobs["boolean"])("isDraggable", false),
warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", _react["default"].createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
})), _react["default"].createElement(_Col["default"], {
small: 6
}, _react["default"].createElement(_index["default"], {
name: "Beta: We are buttons",
description: "You can click us!",
onTileClick: (0, _addonActions.action)("onTileClick - Beta"),
isSelected: (0, _addonKnobs["boolean"])("isSelected", false),
isDraggable: (0, _addonKnobs["boolean"])("isDraggable", false),
warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", _react["default"].createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
}))));
}).add("Static (content is not a Button)", function () {
var shouldShowWarning = (0, _addonKnobs["boolean"])("Show warningTitleAndBodyContent={[string, any]} (not actually a boolean prop, see story or component)", false);
return _react["default"].createElement(_index["default"], {
name: "Alpha: I am not a button",
description: "Clicking me will do nothing",
isSelected: (0, _addonKnobs["boolean"])("isSelected", false),
isDraggable: (0, _addonKnobs["boolean"])("isDraggable", false),
warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", _react["default"].createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
});
}).add("With Monospace Name", function () {
var shouldShowWarning = (0, _addonKnobs["boolean"])("Show warningTitleAndBodyContent={[string, any]} (not actually a boolean prop, see story or component)", false);
return _react["default"].createElement(_index["default"], {
name: "amount",
description: "double",
usesMonospaceName: (0, _addonKnobs["boolean"])("usesMonospaceName", true),
onTileClick: (0, _addonActions.action)("onTileClick"),
isSelected: (0, _addonKnobs["boolean"])("isSelected", false),
isDraggable: (0, _addonKnobs["boolean"])("isDraggable", false),
warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", _react["default"].createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
,
onCopy: (0, _addonActions.action)("onCopy called")
});
}).add("With a warning and unsaved changes (warning overrides unsaved changes indicator)", function () {
var shouldShowWarning = (0, _addonKnobs["boolean"])("Show warningTitleAndBodyContent={[string, any]} (not actually a boolean prop, see story or component)", true);
return _react["default"].createElement(_index["default"], {
name: "Alpha",
description: "ID:12345678",
onTileClick: (0, _addonActions.action)("onTileClick"),
isSelected: (0, _addonKnobs["boolean"])("isSelected", false),
isDraggable: (0, _addonKnobs["boolean"])("isDraggable", true),
testSection: "with-warning",
unsavedChangesText: (0, _addonKnobs.text)("unsavedChangesText", "This rule has unsaved changes"),
warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", _react["default"].createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
});
}).add("Draggable, with a warning", function () {
var shouldShowWarning = (0, _addonKnobs["boolean"])("Show warningTitleAndBodyContent={[string, any]} (not actually a boolean prop, see story or component)", true);
return _react["default"].createElement(_index["default"], {
name: "Alpha",
description: "ID:12345678",
onTileClick: (0, _addonActions.action)("onTileClick"),
isSelected: (0, _addonKnobs["boolean"])("isSelected", false),
isDraggable: (0, _addonKnobs["boolean"])("isDraggable", true),
warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", _react["default"].createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
,
testSection: "with-warning"
});
}).add("With unsaved changes", function () {
var shouldShowWarning = (0, _addonKnobs["boolean"])("Show warningTitleAndBodyContent={[string, any]} (not actually a boolean prop, see story or component)", false);
return _react["default"].createElement(_index["default"], {
name: "Alpha",
description: "ID:12345678",
onTileClick: (0, _addonActions.action)("onTileClick"),
isSelected: (0, _addonKnobs["boolean"])("isSelected", false),
isDraggable: (0, _addonKnobs["boolean"])("isDraggable", true),
testSection: "with-warning",
unsavedChangesText: (0, _addonKnobs.text)("unsavedChangesText", "This rule has unsaved changes"),
warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", _react["default"].createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
});
}).add("With Action Items on the right", function () {
var shouldShowWarning = (0, _addonKnobs["boolean"])("Show warningTitleAndBodyContent={[string, any]} (not actually a boolean prop, see story or component)", false);
return _react["default"].createElement(_Container["default"], null, _react["default"].createElement(_Row["default"], null, _react["default"].createElement(_Col["default"], {
small: 6
}, _react["default"].createElement(_index["default"], {
name: "Alpha",
testSection: "alpha-tile",
description: "ID:12345678",
onTileClick: (0, _addonActions.action)("onTileClick"),
isSelected: (0, _addonKnobs["boolean"])("isSelected", false),
isDraggable: (0, _addonKnobs["boolean"])("isDraggable", false),
warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", _react["default"].createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
,
onDismiss: (0, _addonActions.action)("onDismiss called")
}))), _react["default"].createElement(_Row["default"], null, _react["default"].createElement(_Col["default"], {
small: 6
}, _react["default"].createElement(_index["default"], {
name: "Beta",
testSection: "beta-tile",
description: "isSelected is true here",
onTileClick: (0, _addonActions.action)("onTileClick"),
isSelected: true,
isDraggable: (0, _addonKnobs["boolean"])("isDraggable", false),
warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", _react["default"].createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
,
status: "Archived",
onDismiss: (0, _addonActions.action)("onDismiss called")
}))), _react["default"].createElement(_Row["default"], null, _react["default"].createElement(_Col["default"], {
small: 6
}, _react["default"].createElement(_index["default"], {
name: "Charlie",
testSection: "charlie-tile",
description: "ID:1357",
onTileClick: (0, _addonActions.action)("onTileClick"),
isSelected: (0, _addonKnobs["boolean"])("isSelected", false),
isDraggable: (0, _addonKnobs["boolean"])("isDraggable", false),
warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", _react["default"].createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
,
onDismiss: (0, _addonActions.action)("onDismiss called"),
onEdit: (0, _addonActions.action)("onEdit called")
}))), _react["default"].createElement(_Row["default"], null, _react["default"].createElement(_Col["default"], {
small: 6
}, _react["default"].createElement(_index["default"], {
name: "Delta",
testSection: "delta-tile",
description: "ID:2468",
onTileClick: (0, _addonActions.action)("onTileClick"),
isSelected: (0, _addonKnobs["boolean"])("isSelected", false),
isDraggable: (0, _addonKnobs["boolean"])("isDraggable", false),
warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", _react["default"].createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
,
status: "Running",
dropdownItems: dropdownItems
}))), _react["default"].createElement(_Row["default"], null, _react["default"].createElement(_Col["default"], {
small: 6
}, _react["default"].createElement(_index["default"], {
name: "Echo",
testSection: "echo-tile",
description: "Increase in unique conversions per visitor for Recurring deposit complete event",
onTileClick: (0, _addonActions.action)("onTileClick"),
isSelected: (0, _addonKnobs["boolean"])("isSelected", false),
isDraggable: (0, _addonKnobs["boolean"])("isDraggable", false),
warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", _react["default"].createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
,
onCopy: (0, _addonActions.action)("onCopy called"),
dropdownItems: dropdownItems
}))), _react["default"].createElement(_Row["default"], null, _react["default"].createElement(_Col["default"], {
small: 6
}, _react["default"].createElement(_index["default"], {
name: _react["default"].createElement("em", null, "Foxtrot"),
testSection: "foxtrot-tile",
description: "All possibilities, as an example. Don't actually do this, please",
onTileClick: (0, _addonActions.action)("onTileClick"),
isSelected: (0, _addonKnobs["boolean"])("isSelected", false),
isDraggable: (0, _addonKnobs["boolean"])("isDraggable", true),
warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", _react["default"].createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
,
status: "Active",
onCopy: (0, _addonActions.action)("onCopy called"),
onDismiss: (0, _addonActions.action)("onDismiss called"),
onEdit: (0, _addonActions.action)("onEdit called"),
dropdownItems: dropdownItems,
resultsLink: (0, _addonKnobs.text)("resultsLink", "http://google.com")
}))));
}).add("With Ordering", function () {
var shouldShowWarning = (0, _addonKnobs["boolean"])("Show warningTitleAndBodyContent={[string, any]} (not actually a boolean prop, see story or component)", false);
return _react["default"].createElement(_Container["default"], null, _react["default"].createElement(_Row["default"], null, _react["default"].createElement(_Col["default"], {
small: 6
}, _react["default"].createElement(_index["default"], {
name: "Alpha",
testSection: "alpha-tile",
description: "ID:12345678",
order: 1,
onTileClick: (0, _addonActions.action)("onTileClick"),
isSelected: (0, _addonKnobs["boolean"])("isSelected", false),
isDraggable: (0, _addonKnobs["boolean"])("isDraggable", true),
warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", _react["default"].createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
,
onDismiss: (0, _addonActions.action)("onDismiss called")
}))), _react["default"].createElement(_Row["default"], null, _react["default"].createElement(_Col["default"], {
small: 6
}, _react["default"].createElement(_index["default"], {
name: "Beta",
testSection: "beta-tile",
description: "isSelected is true here",
order: 2,
onTileClick: (0, _addonActions.action)("onTileClick"),
isSelected: true,
isDraggable: (0, _addonKnobs["boolean"])("isDraggable", true),
warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", _react["default"].createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
,
status: "Archived",
onDismiss: (0, _addonActions.action)("onDismiss called")
}))), _react["default"].createElement(_Row["default"], null, _react["default"].createElement(_Col["default"], {
small: 6
}, _react["default"].createElement(_index["default"], {
name: "Charlie",
testSection: "charlie-tile",
description: "ID:1357",
order: 3,
onTileClick: (0, _addonActions.action)("onTileClick"),
isSelected: (0, _addonKnobs["boolean"])("isSelected", false),
isDraggable: (0, _addonKnobs["boolean"])("isDraggable", true),
warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", _react["default"].createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
,
onDismiss: (0, _addonActions.action)("onDismiss called"),
onEdit: (0, _addonActions.action)("onEdit called")
}))), _react["default"].createElement(_Row["default"], null, _react["default"].createElement(_Col["default"], {
small: 6
}, _react["default"].createElement(_index["default"], {
name: "Delta",
testSection: "delta-tile",
description: "ID:2468",
order: 4,
onTileClick: (0, _addonActions.action)("onTileClick"),
isSelected: (0, _addonKnobs["boolean"])("isSelected", false),
isDraggable: (0, _addonKnobs["boolean"])("isDraggable", true),
warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", _react["default"].createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
,
status: "Running",
dropdownItems: dropdownItems
}))), _react["default"].createElement(_Row["default"], null, _react["default"].createElement(_Col["default"], {
small: 6
}, _react["default"].createElement(_index["default"], {
name: _react["default"].createElement("em", null, "Zeta"),
testSection: "zeta-tile",
description: "Increase in unique conversions per visitor for Recurring deposit complete event",
order: 98,
onTileClick: (0, _addonActions.action)("onTileClick"),
isSelected: (0, _addonKnobs["boolean"])("isSelected", false),
isDraggable: (0, _addonKnobs["boolean"])("isDraggable", true),
warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", _react["default"].createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
,
onCopy: (0, _addonActions.action)("onCopy called"),
dropdownItems: dropdownItems
}))), _react["default"].createElement(_Row["default"], null, _react["default"].createElement(_Col["default"], {
small: 6
}, _react["default"].createElement(_index["default"], {
name: "",
testSection: "empty-name-tile",
description: "Increase in unique conversions per visitor for Recurring deposit complete event",
order: 99,
onTileClick: (0, _addonActions.action)("onTileClick"),
isSelected: (0, _addonKnobs["boolean"])("isSelected", false),
isDraggable: (0, _addonKnobs["boolean"])("isDraggable", true),
warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", _react["default"].createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
,
onCopy: (0, _addonActions.action)("onCopy called"),
dropdownItems: dropdownItems
}))));
});