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

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 { loremIpsum } from '../../../stories/fixtures';
import { Nav } from './';
import { Flex } from '../flex';
import { NavItem } from '../nav-item';
import { Block } from '../block';
import { Logo } from '../logo';
storiesOf('Navigation/Nav', module).addWithJSX('Default', function () {
  return React.createElement(Block, null, React.createElement(Nav, null, React.createElement(Flex, {
    extend: function extend(_ref) {
      var theme = _ref.theme;
      return _defineProperty({}, theme.breakpoints.fromL, {
        flexDirection: 'row'
      });
    }
  }, React.createElement(NavItem, null, "This is Volvo"), React.createElement(NavItem, {
    isActive: true
  }, "Build & Price"), React.createElement(NavItem, {
    isDropdown: true
  }, "Cars"), React.createElement(NavItem, {
    isDropdown: true,
    isActive: true
  }, "Bicycles"))), React.createElement(Block, {
    extend: {
      marginTop: '20px',
      fontSize: '48px',
      width: '320px'
    }
  }, loremIpsum));
}).addWithJSX('Sticky', function () {
  return React.createElement(Block, null, React.createElement(Nav, {
    sticky: true
  }, React.createElement(Block, {
    extend: {
      padding: '20px'
    }
  }, React.createElement(Logo, {
    type: "square"
  }))), React.createElement(Block, {
    extend: {
      marginTop: '100px',
      fontSize: '48px',
      width: '320px'
    }
  }, loremIpsum));
}).addWithJSX('Hide on scroll', function () {
  return React.createElement(Block, null, React.createElement(Nav, {
    sticky: true,
    hideOnScroll: true
  }, React.createElement(Block, {
    extend: {
      padding: '20px'
    }
  }, React.createElement(Logo, {
    type: "square"
  }))), React.createElement(Block, {
    extend: {
      marginTop: '100px',
      fontSize: '48px',
      width: '320px'
    }
  }, loremIpsum));
});