vcc-ui/lib/components/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)("NavItem", module).addDecorator(_render.render).addDecorator((0, _addonBackgrounds.withBackgrounds)(listOfLightBackgrounds)).addDecorator(_react3.withKnobs).addWithJSX("basic", function () {
  return _react.default.createElement(_index.NavItem, null, "Build & Price");
}).addWithJSX("isActive", function () {
  return _react.default.createElement(_index.NavItem, {
    isActive: true
  }, "Build & Price");
}).addWithJSX("with dropdown", function () {
  return _react.default.createElement(_index.NavItem, {
    dropdown: true
  }, "Cars");
}).addWithJSX("with dropdown isActive", function () {
  return _react.default.createElement(_index.NavItem, {
    dropdown: true,
    isActive: true
  }, "Cars");
}).addWithJSX("in nav", function () {
  var _ref, _ref2, _ref4;

  return _react.default.createElement(_index.Nav, {
    sticky: true
  }, _react.default.createElement(_index.Block, {
    extend: (_ref = {
      display: "flex"
    }, _defineProperty(_ref, _index.BREAKPOINTS.untilL, {
      flexDirection: "column",
      position: "fixed",
      width: "100%",
      bottom: "0",
      background: "#fff",
      top: "0"
    }), _defineProperty(_ref, _index.BREAKPOINTS.onL, {
      alignItems: "center",
      padding: "0 20px"
    }), _ref)
  }, _react.default.createElement(_index.Block, {
    extend: (_ref2 = {}, _defineProperty(_ref2, _index.BREAKPOINTS.untilL, {
      padding: "0 20px"
    }), _defineProperty(_ref2, _index.BREAKPOINTS.onL, {
      display: "flex",
      flex: 1,
      alignItems: "center"
    }), _ref2)
  }, _react.default.createElement(_index.NavItem, {
    dropdown: true
  }, "Cars"), _react.default.createElement(_index.NavItem, {
    dropdown: true,
    isActive: true
  }, "Shopping Tools"), _react.default.createElement(_index.NavItem, {
    dropdown: true
  }, "Own")), _react.default.createElement(_index.Block, {
    extend: _defineProperty({}, _index.BREAKPOINTS.untilL, {
      padding: "12px",
      borderBottom: "1px solid #e9e9e9",
      order: "-1",
      textAlign: "center",
      height: "50px"
    })
  }, _react.default.createElement(_index.Logo, null)), _react.default.createElement(_index.Block, {
    extend: (_ref4 = {}, _defineProperty(_ref4, _index.BREAKPOINTS.untilL, {
      padding: "0 20px"
    }), _defineProperty(_ref4, _index.BREAKPOINTS.onL, {
      flex: 1,
      display: "flex",
      alignItems: "center",
      justifyContent: "flex-end"
    }), _ref4)
  }, _react.default.createElement(_index.NavItem, {
    href: "#1"
  }, "Inventory"), _react.default.createElement(_index.NavItem, {
    isActive: true,
    href: "#2"
  }, "Build & Price"), _react.default.createElement(_index.NavItem, {
    href: "#3"
  }, "Find A Dealer"))));
}).addWithJSX("with theme", function () {
  var defaultThemeConfig = (0, _react3.object)("Theme config", // label
  {
    navItemArrow: {
      color: "#fff666",
      size: "20"
    },
    navItem: _defineProperty({
      color: "#fefefe",
      backgroundColor: "#000",
      padding: "10px"
    }, _index.BREAKPOINTS.onL, {
      padding: "20px"
    })
  }, "Theme" // group id
  );
  return _react.default.createElement(_index.ThemeProvider, {
    theme: defaultThemeConfig
  }, _react.default.createElement(_index.NavItem, {
    dropdown: true,
    isActive: true
  }, "Help"));
});