lucid-ui
Version:
A UI component library from Xandr.
143 lines • 6.53 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(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);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ComplexTitleAsChild = exports.TitleAsChild = exports.Basic = void 0;
var lodash_1 = require("lodash");
var react_1 = __importDefault(require("react"));
var d3Scale = __importStar(require("d3-scale"));
var VerticalTabs_1 = __importDefault(require("./VerticalTabs"));
var Lines_1 = __importDefault(require("../Lines/Lines"));
var SuccessIcon_1 = __importDefault(require("../Icon/SuccessIcon/SuccessIcon"));
var WarningIcon_1 = __importDefault(require("../Icon/WarningIcon/WarningIcon"));
//👇 Provide Storybook with the component name, 'section', any subcomponents and a description
exports.default = {
title: 'Navigation/VerticalTabs',
component: VerticalTabs_1.default,
parameters: {
docs: {
description: {
component: VerticalTabs_1.default.peek.description,
},
},
},
args: VerticalTabs_1.default.defaultProps,
};
//👇 Destructure any child components that we will need
var Tab = VerticalTabs_1.default.Tab, Title = VerticalTabs_1.default.Title;
//👇 Add a key prop to each child element of the array
function addKeys(children) {
return (0, lodash_1.map)(children, function (child, index) { return (__assign(__assign({}, child), { key: index })); });
}
//👇 Create a “template” of how args map to rendering
var Template = function (args) {
return (react_1.default.createElement("section", null,
react_1.default.createElement(VerticalTabs_1.default, __assign({}, args))));
};
//👇 Each story then reuses that template
/** Default: Title as Prop */
exports.Basic = Template.bind({});
exports.Basic.args = {
children: addKeys([
react_1.default.createElement(Tab, { Title: 'One' }, "One content"),
react_1.default.createElement(Tab, { Title: 'Two' }, "Two content"),
react_1.default.createElement(Tab, { Title: 'Three' }, "Three content"),
react_1.default.createElement(Tab, { Title: 'Four' }, "Four content"),
]),
};
/** Title as Child */
exports.TitleAsChild = Template.bind({});
exports.TitleAsChild.args = {
children: addKeys([
react_1.default.createElement(Tab, null,
react_1.default.createElement(Title, null, "One"),
"One content"),
react_1.default.createElement(Tab, null,
react_1.default.createElement(Title, null, "Two"),
"Two content"),
react_1.default.createElement(Tab, null,
react_1.default.createElement(Title, null, "Three"),
"Three content"),
react_1.default.createElement(Tab, null,
react_1.default.createElement(Title, null, "Four"),
"Four content"),
]),
};
/** Complex Title as Child */
exports.ComplexTitleAsChild = Template.bind({});
var dataSet = [
{ x: 'OR', y: 1 },
{ x: 'CA', y: 0 },
{ x: 'WA', y: 3 },
{ x: 'NY', y: 2 },
{ x: 'TX', y: 1 },
{ x: 'WV', y: 3 },
];
var width = 200;
var height = 50;
var xScale = d3Scale.scalePoint().domain((0, lodash_1.map)(dataSet, 'x')).range([0, width]);
var yScale = d3Scale.scaleLinear().domain([0, 4]).range([height, 0]);
var titleThree = (react_1.default.createElement("span", null,
react_1.default.createElement("h2", { style: { margin: 0 } }, "Performance"),
react_1.default.createElement("svg", { width: width, height: height },
react_1.default.createElement(Lines_1.default, { data: dataSet, xScale: xScale, yScale: yScale }))));
exports.ComplexTitleAsChild.args = {
children: addKeys([
react_1.default.createElement(VerticalTabs_1.default.Tab, null,
react_1.default.createElement(Title, null,
react_1.default.createElement("h2", { style: { margin: 0 } }, "One"),
react_1.default.createElement(SuccessIcon_1.default, null),
react_1.default.createElement("span", { style: {
fontWeight: 'normal',
marginLeft: '5px',
} }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit.")),
"One content"),
react_1.default.createElement(VerticalTabs_1.default.Tab, null,
react_1.default.createElement(VerticalTabs_1.default.Title, null,
react_1.default.createElement("h2", { style: { margin: 0 } }, "Two"),
react_1.default.createElement(WarningIcon_1.default, null),
react_1.default.createElement("span", { style: {
fontWeight: 'normal',
marginLeft: '5px',
} }, "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")),
"Two content"),
react_1.default.createElement(VerticalTabs_1.default.Tab, null,
react_1.default.createElement(VerticalTabs_1.default.Title, null, titleThree),
"Three content"),
react_1.default.createElement(VerticalTabs_1.default.Tab, null,
react_1.default.createElement(VerticalTabs_1.default.Title, null, "Four"),
"Four content"),
]),
};
//# sourceMappingURL=VerticalTabs.stories.js.map