vcc-ui/lib/components/tab-nav-item/stories.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

"use strict";

var _react = _interopRequireDefault(require("react"));

var _react2 = require("@storybook/react");

var _addonBackgrounds = require("@storybook/addon-backgrounds");

var _index = require("../../index");

var _render = require("../../../stories/render");

var _react3 = require("@storybook/addon-knobs/react");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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; }

var listOfLightBackgrounds = [{
  name: "white",
  value: "#fff",
  default: true
}, {
  name: "gray",
  value: "#ccc"
}];
(0, _react2.storiesOf)("TabNavItem", module).addDecorator(_render.render).addDecorator((0, _addonBackgrounds.withBackgrounds)(listOfLightBackgrounds)).addDecorator(_react3.withKnobs).addWithJSX("basic", function () {
  return _react.default.createElement(_index.TabNavItem, null, "Build & Price");
}).addWithJSX("isActive", function () {
  return _react.default.createElement(_index.TabNavItem, {
    isActive: true
  }, "Build & Price");
}).addWithJSX("variant=dark", function () {
  return _react.default.createElement(_index.TabNavItem, {
    variant: "dark"
  }, "Build & Price");
}).addWithJSX("variant=dark isActive", function () {
  return _react.default.createElement(_index.TabNavItem, {
    variant: "dark",
    isActive: true
  }, "Build & Price");
}).addWithJSX("in subnav", function () {
  return _react.default.createElement(_index.TabNav, {
    sticky: true
  }, _react.default.createElement(_index.Block, {
    extend: {
      justifyContent: "flex-start",
      overflowX: "auto",
      position: "relative",
      overflowY: "hidden",
      whiteSpace: "nowrap",
      width: "100%",
      padding: "0 20px",
      boxSizing: "border-box"
    }
  }, _react.default.createElement(_index.TabNavItem, null, "Crossover/Wagon"), _react.default.createElement(_index.TabNavItem, null, "Sedan"), _react.default.createElement(_index.TabNavItem, {
    dropdown: true
  }, "Hybrid")));
}).addWithJSX("with theme", function () {
  var defaultThemeConfig = (0, _react3.object)("Theme config", // label
  {
    navItem: _defineProperty({
      color: "#fefefe",
      backgroundColor: "pink",
      padding: "10px"
    }, _index.BREAKPOINTS.fromM, {
      padding: "20px"
    })
  }, "Theme" // group id
  );
  return _react.default.createElement(_index.ThemeProvider, {
    theme: defaultThemeConfig
  }, _react.default.createElement(_index.TabNavItem, {
    dropdown: true,
    isActive: true
  }, "Help"));
});