vcc-ui
Version:
VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.
110 lines • 4.46 kB
JavaScript
import React from "react";
import { storiesOf } from "@storybook/react";
import { withBackgrounds } from "@storybook/addon-backgrounds";
import { object, withKnobs } from "@storybook/addon-knobs";
import { TabNav, TabNavItem, Block } from "../../index";
import { render } from "../../../stories/render";
import { ThemeProvider } from "../../theme-provider";
var listOfLightBackgrounds = [{
name: "white",
value: "#fff",
default: true
}, {
name: "gray",
value: "#ccc"
}];
storiesOf("TabNav", module).addDecorator(render).addDecorator(withBackgrounds(listOfLightBackgrounds)).addDecorator(withKnobs).addWithJSX("default (textAlign: center)", function () {
return React.createElement(Block, null, React.createElement(TabNav, null, React.createElement(TabNavItem, {
isActive: true
}, "Crossover/Wagon"), React.createElement(TabNavItem, null, "Sedan"), React.createElement(TabNavItem, null, "Hybrid")));
}).addWithJSX("default as links (textAlign: center)", function () {
return React.createElement(Block, null, React.createElement(TabNav, null, React.createElement(TabNavItem, {
isActive: true,
href: "somelink"
}, "Crossover/Wagon"), React.createElement(TabNavItem, {
href: "somelink"
}, "Sedan"), React.createElement(TabNavItem, {
href: "somelink"
}, "Hybrid")));
}).addWithJSX("default: (textAlign: center) with back link", function () {
return React.createElement(Block, null, React.createElement(TabNav, {
backButton: {
text: "Go back",
href: "/href"
},
showBackButtonOn: ["s", "m", "l"]
}, React.createElement(TabNavItem, {
isActive: true
}, "Crossover/Wagon"), React.createElement(TabNavItem, null, "Sedan"), React.createElement(TabNavItem, null, "Hybrid")));
}).addWithJSX("default: (textAlign: center) with back button", function () {
return React.createElement(Block, null, React.createElement(TabNav, {
backButton: {
text: "Go back",
clickHandler: function clickHandler(e) {
e.preventDefault();
}
},
showBackButtonOn: ["s", "m", "l"]
}, React.createElement(TabNavItem, {
isActive: true
}, "Crossover/Wagon"), React.createElement(TabNavItem, null, "Sedan"), React.createElement(TabNavItem, null, "Hybrid")));
}).addWithJSX("dark variant", function () {
return React.createElement(Block, null, React.createElement(TabNav, {
variant: "dark"
}, React.createElement(TabNavItem, {
variant: "dark",
isActive: true
}, "Crossover/Wagon"), React.createElement(TabNavItem, {
variant: "dark"
}, "Sedan"), React.createElement(TabNavItem, {
variant: "dark"
}, "Hybrid")));
}).addWithJSX("dark variant with back button", function () {
return React.createElement(Block, null, React.createElement(TabNav, {
variant: "dark",
backButton: {
text: "Go back",
href: "/href",
clickHandler: function clickHandler(e) {
e.preventDefault();
}
}
}, React.createElement(TabNavItem, {
variant: "dark",
isActive: true
}, "Crossover/Wagon"), React.createElement(TabNavItem, {
variant: "dark"
}, "Sedan"), React.createElement(TabNavItem, {
variant: "dark"
}, "Hybrid")));
}).addWithJSX("textAlign: left", function () {
return React.createElement(Block, null, React.createElement(TabNav, {
textAlign: "left"
}, React.createElement(TabNavItem, {
isActive: true
}, "Crossover/Wagon"), React.createElement(TabNavItem, null, "Sedan"), React.createElement(TabNavItem, null, "Hybrid")));
}).addWithJSX("left-aligned with back button", function () {
return React.createElement(Block, null, React.createElement(TabNav, {
textAlign: "left",
backButton: {
text: "Go back",
href: "/href"
}
}, React.createElement(TabNavItem, {
isActive: true
}, "Crossover/Wagon"), React.createElement(TabNavItem, null, "Sedan"), React.createElement(TabNavItem, null, "Hybrid")));
}).addWithJSX("with theme", function () {
var label = "Custom theme";
var defaultValue = {
nav: {
backgroundColor: "pink",
color: "#000"
}
};
var defaultThemePropsConfig = object(label, defaultValue);
return React.createElement(ThemeProvider, {
theme: defaultThemePropsConfig
}, React.createElement(Block, null, React.createElement(TabNav, null, React.createElement(TabNavItem, {
isActive: true
}, "Crossover/Wagon"), React.createElement(TabNavItem, null, "Sedan"), React.createElement(TabNavItem, null, "Hybrid"))));
});