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.
68 lines (67 loc) • 2.37 kB
JavaScript
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
import React from "react";
import { storiesOf } from "@storybook/react";
import { withBackgrounds } from "@storybook/addon-backgrounds";
import { BREAKPOINTS, Block, TabNavItem, TabNav } from "../../index";
import { render } from "../../../stories/render";
import { object, withKnobs } from "@storybook/addon-knobs/react";
import { ThemeProvider } from "../../index";
var listOfLightBackgrounds = [{
name: "white",
value: "#fff",
default: true
}, {
name: "gray",
value: "#ccc"
}];
storiesOf("TabNavItem", module).addDecorator(render).addDecorator(withBackgrounds(listOfLightBackgrounds)).addDecorator(withKnobs).addWithJSX("basic", function () {
return React.createElement(TabNavItem, null, "Build & Price");
}).addWithJSX("isActive", function () {
return React.createElement(TabNavItem, {
isActive: true
}, "Build & Price");
}).addWithJSX("variant=dark", function () {
return React.createElement(TabNavItem, {
variant: "dark"
}, "Build & Price");
}).addWithJSX("variant=dark isActive", function () {
return React.createElement(TabNavItem, {
variant: "dark",
isActive: true
}, "Build & Price");
}).addWithJSX("in subnav", function () {
return React.createElement(TabNav, {
sticky: true
}, React.createElement(Block, {
extend: {
justifyContent: "flex-start",
overflowX: "auto",
position: "relative",
overflowY: "hidden",
whiteSpace: "nowrap",
width: "100%",
padding: "0 20px",
boxSizing: "border-box"
}
}, React.createElement(TabNavItem, null, "Crossover/Wagon"), React.createElement(TabNavItem, null, "Sedan"), React.createElement(TabNavItem, {
dropdown: true
}, "Hybrid")));
}).addWithJSX("with theme", function () {
var defaultThemeConfig = object("Theme config", // label
{
navItem: _defineProperty({
color: "#fefefe",
backgroundColor: "pink",
padding: "10px"
}, BREAKPOINTS.fromM, {
padding: "20px"
})
}, "Theme" // group id
);
return React.createElement(ThemeProvider, {
theme: defaultThemeConfig
}, React.createElement(TabNavItem, {
dropdown: true,
isActive: true
}, "Help"));
});