vcc-ui/lib/components/nav/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 _fixtures = require("../../../stories/fixtures");

var _ = require("./");

var _flex = require("../flex");

var _navItem = require("../nav-item");

var _block = require("../block");

var _logo = require("../logo");

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

(0, _react2.storiesOf)('Navigation/Nav', module).addWithJSX('Default', function () {
  return _react.default.createElement(_block.Block, null, _react.default.createElement(_.Nav, null, _react.default.createElement(_flex.Flex, {
    extend: function extend(_ref) {
      var theme = _ref.theme;
      return _defineProperty({}, theme.breakpoints.fromL, {
        flexDirection: 'row'
      });
    }
  }, _react.default.createElement(_navItem.NavItem, null, "This is Volvo"), _react.default.createElement(_navItem.NavItem, {
    isActive: true
  }, "Build & Price"), _react.default.createElement(_navItem.NavItem, {
    isDropdown: true
  }, "Cars"), _react.default.createElement(_navItem.NavItem, {
    isDropdown: true,
    isActive: true
  }, "Bicycles"))), _react.default.createElement(_block.Block, {
    extend: {
      marginTop: '20px',
      fontSize: '48px',
      width: '320px'
    }
  }, _fixtures.loremIpsum));
}).addWithJSX('Sticky', function () {
  return _react.default.createElement(_block.Block, null, _react.default.createElement(_.Nav, {
    sticky: true
  }, _react.default.createElement(_block.Block, {
    extend: {
      padding: '20px'
    }
  }, _react.default.createElement(_logo.Logo, {
    type: "square"
  }))), _react.default.createElement(_block.Block, {
    extend: {
      marginTop: '100px',
      fontSize: '48px',
      width: '320px'
    }
  }, _fixtures.loremIpsum));
}).addWithJSX('Hide on scroll', function () {
  return _react.default.createElement(_block.Block, null, _react.default.createElement(_.Nav, {
    sticky: true,
    hideOnScroll: true
  }, _react.default.createElement(_block.Block, {
    extend: {
      padding: '20px'
    }
  }, _react.default.createElement(_logo.Logo, {
    type: "square"
  }))), _react.default.createElement(_block.Block, {
    extend: {
      marginTop: '100px',
      fontSize: '48px',
      width: '320px'
    }
  }, _fixtures.loremIpsum));
});