vcc-ui/es/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.

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, NavItem, Nav, Logo } 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("NavItem", module).addDecorator(render).addDecorator(withBackgrounds(listOfLightBackgrounds)).addDecorator(withKnobs).addWithJSX("basic", function () {
  return React.createElement(NavItem, null, "Build & Price");
}).addWithJSX("isActive", function () {
  return React.createElement(NavItem, {
    isActive: true
  }, "Build & Price");
}).addWithJSX("with dropdown", function () {
  return React.createElement(NavItem, {
    dropdown: true
  }, "Cars");
}).addWithJSX("with dropdown isActive", function () {
  return React.createElement(NavItem, {
    dropdown: true,
    isActive: true
  }, "Cars");
}).addWithJSX("in nav", function () {
  var _ref, _ref2, _ref4;

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