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

import React from 'react';
import { storiesOf } from '@storybook/react';
import { boolean, select, number, text } from '@storybook/addon-knobs';
import { TabNav } from './';
import { TabNavItem } from '../tab-nav-item';
import { Block } from '../block';
storiesOf('Navigation/TabNav', module).addWithJSX('Default', function () {
  return React.createElement(Block, null, React.createElement(TabNav, {
    textAlign: select('textAlign', ['center', 'left'], 'center'),
    enableLineTransition: boolean('enableLineTransition', false),
    duration: number('duration', 160)
  }, React.createElement(TabNavItem, {
    isActive: true
  }, "Crossover/Wagon"), React.createElement(TabNavItem, null, "Sedan"), React.createElement(TabNavItem, null, "Hybrid")));
}).addWithJSX('TabNavItems as link', function () {
  return React.createElement(Block, null, React.createElement(TabNav, {
    textAlign: select('textAlign', ['center', 'left'], 'center'),
    enableLineTransition: boolean('enableLineTransition', false),
    duration: number('duration', 160)
  }, React.createElement(TabNavItem, {
    isActive: true,
    href: "somelink"
  }, "Crossover/Wagon"), React.createElement(TabNavItem, {
    href: "somelink"
  }, "Sedan"), React.createElement(TabNavItem, {
    href: "somelink"
  }, "Hybrid")));
}).addWithJSX('With Back link', function () {
  return React.createElement(Block, null, React.createElement(TabNav, {
    textAlign: select('textAlign', ['center', 'left'], 'center'),
    enableLineTransition: boolean('enableLineTransition', false),
    duration: number('duration', 160),
    backButton: {
      text: text('BackButton text', 'Go back'),
      href: '/href'
    },
    showBackButtonOn: ['s', 'm', 'l']
  }, React.createElement(TabNavItem, {
    isActive: true
  }, "Crossover/Wagon"), React.createElement(TabNavItem, null, "Sedan"), React.createElement(TabNavItem, null, "Hybrid")));
}).addWithJSX('With Back button', function () {
  return React.createElement(Block, null, React.createElement(TabNav, {
    textAlign: select('textAlign', ['center', 'left'], 'center'),
    enableLineTransition: boolean('enableLineTransition', false),
    duration: number('duration', 160),
    backButton: {
      text: text('BackButton text', 'Go back'),
      clickHandler: function clickHandler(e) {
        e.preventDefault();
      }
    },
    showBackButtonOn: ['s', 'm', 'l']
  }, React.createElement(TabNavItem, {
    isActive: true
  }, "Crossover/Wagon"), React.createElement(TabNavItem, null, "Sedan"), React.createElement(TabNavItem, null, "Hybrid")));
}).addWithJSX('With sticky children (left)', function () {
  return React.createElement(TabNav, {
    textAlign: select('textAlign', ['center', 'left'], 'center'),
    enableLineTransition: boolean('enableLineTransition', false),
    duration: number('duration', 160),
    stickyChildrenLeft: React.createElement(TabNavItem, {
      extend: {
        marginLeft: 20,
        marginRight: 0
      }
    }, "Menu")
  }, React.createElement(TabNavItem, {
    isActive: true
  }, "Crossover/Wagon"), React.createElement(TabNavItem, null, "Sedan"), React.createElement(TabNavItem, null, "Hybrid"));
}).addWithJSX('With back button & sticky children (left)', function () {
  return React.createElement(TabNav, {
    textAlign: select('textAlign', ['center', 'left'], 'center'),
    enableLineTransition: boolean('enableLineTransition', false),
    duration: number('duration', 160),
    backButton: {
      text: text('BackButton text', 'Go Back'),
      clickHandler: function clickHandler(e) {
        e.preventDefault();
      }
    },
    stickyChildrenLeft: React.createElement(TabNavItem, {
      extend: {
        marginLeft: 10,
        marginRight: 0
      }
    }, "Menu")
  }, React.createElement(TabNavItem, {
    isActive: true
  }, "Crossover/Wagon"), React.createElement(TabNavItem, null, "Sedan"), React.createElement(TabNavItem, null, "Hybrid"));
}).addWithJSX('With sticky children (left + right)', function () {
  return React.createElement(TabNav, {
    textAlign: select('textAlign', ['center', 'left'], 'center'),
    enableLineTransition: boolean('enableLineTransition', false),
    duration: number('duration', 160),
    stickyChildrenLeft: React.createElement(TabNavItem, {
      extend: {
        marginLeft: 20,
        marginRight: 0
      }
    }, "Left"),
    stickyChildrenRight: React.createElement(TabNavItem, {
      extend: {
        marginLeft: 20
      }
    }, "Right")
  }, React.createElement(TabNavItem, {
    isActive: true
  }, "Crossover/Wagon"), React.createElement(TabNavItem, null, "Sedan"), React.createElement(TabNavItem, null, "Hybrid"));
}).addWithJSX('With back button & sticky children (left + right)', function () {
  return React.createElement(TabNav, {
    textAlign: select('textAlign', ['center', 'left'], 'center'),
    enableLineTransition: boolean('enableLineTransition', false),
    duration: number('duration', 160),
    backButton: {
      text: text('BackButton text', 'Go Back'),
      clickHandler: function clickHandler(e) {
        e.preventDefault();
      }
    },
    stickyChildrenLeft: React.createElement(TabNavItem, {
      extend: {
        marginLeft: 10,
        marginRight: 0
      }
    }, "Left"),
    stickyChildrenRight: React.createElement(TabNavItem, {
      extend: {
        marginLeft: 20
      }
    }, "Right")
  }, React.createElement(TabNavItem, {
    isActive: true
  }, "Crossover/Wagon"), React.createElement(TabNavItem, null, "Sedan"), React.createElement(TabNavItem, null, "Hybrid"));
});