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

"use strict";

var _react = _interopRequireDefault(require("react"));

var _react2 = require("@storybook/react");

var _addonKnobs = require("@storybook/addon-knobs");

var _ = require("./");

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

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

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

(0, _react2.storiesOf)('Navigation/TabNav', module).addWithJSX('Default', function () {
  return _react.default.createElement(_block.Block, null, _react.default.createElement(_.TabNav, {
    textAlign: (0, _addonKnobs.select)('textAlign', ['center', 'left'], 'center'),
    enableLineTransition: (0, _addonKnobs.boolean)('enableLineTransition', false),
    duration: (0, _addonKnobs.number)('duration', 160)
  }, _react.default.createElement(_tabNavItem.TabNavItem, {
    isActive: true
  }, "Crossover/Wagon"), _react.default.createElement(_tabNavItem.TabNavItem, null, "Sedan"), _react.default.createElement(_tabNavItem.TabNavItem, null, "Hybrid")));
}).addWithJSX('TabNavItems as link', function () {
  return _react.default.createElement(_block.Block, null, _react.default.createElement(_.TabNav, {
    textAlign: (0, _addonKnobs.select)('textAlign', ['center', 'left'], 'center'),
    enableLineTransition: (0, _addonKnobs.boolean)('enableLineTransition', false),
    duration: (0, _addonKnobs.number)('duration', 160)
  }, _react.default.createElement(_tabNavItem.TabNavItem, {
    isActive: true,
    href: "somelink"
  }, "Crossover/Wagon"), _react.default.createElement(_tabNavItem.TabNavItem, {
    href: "somelink"
  }, "Sedan"), _react.default.createElement(_tabNavItem.TabNavItem, {
    href: "somelink"
  }, "Hybrid")));
}).addWithJSX('With Back link', function () {
  return _react.default.createElement(_block.Block, null, _react.default.createElement(_.TabNav, {
    textAlign: (0, _addonKnobs.select)('textAlign', ['center', 'left'], 'center'),
    enableLineTransition: (0, _addonKnobs.boolean)('enableLineTransition', false),
    duration: (0, _addonKnobs.number)('duration', 160),
    backButton: {
      text: (0, _addonKnobs.text)('BackButton text', 'Go back'),
      href: '/href'
    },
    showBackButtonOn: ['s', 'm', 'l']
  }, _react.default.createElement(_tabNavItem.TabNavItem, {
    isActive: true
  }, "Crossover/Wagon"), _react.default.createElement(_tabNavItem.TabNavItem, null, "Sedan"), _react.default.createElement(_tabNavItem.TabNavItem, null, "Hybrid")));
}).addWithJSX('With Back button', function () {
  return _react.default.createElement(_block.Block, null, _react.default.createElement(_.TabNav, {
    textAlign: (0, _addonKnobs.select)('textAlign', ['center', 'left'], 'center'),
    enableLineTransition: (0, _addonKnobs.boolean)('enableLineTransition', false),
    duration: (0, _addonKnobs.number)('duration', 160),
    backButton: {
      text: (0, _addonKnobs.text)('BackButton text', 'Go back'),
      clickHandler: function clickHandler(e) {
        e.preventDefault();
      }
    },
    showBackButtonOn: ['s', 'm', 'l']
  }, _react.default.createElement(_tabNavItem.TabNavItem, {
    isActive: true
  }, "Crossover/Wagon"), _react.default.createElement(_tabNavItem.TabNavItem, null, "Sedan"), _react.default.createElement(_tabNavItem.TabNavItem, null, "Hybrid")));
}).addWithJSX('With sticky children (left)', function () {
  return _react.default.createElement(_.TabNav, {
    textAlign: (0, _addonKnobs.select)('textAlign', ['center', 'left'], 'center'),
    enableLineTransition: (0, _addonKnobs.boolean)('enableLineTransition', false),
    duration: (0, _addonKnobs.number)('duration', 160),
    stickyChildrenLeft: _react.default.createElement(_tabNavItem.TabNavItem, {
      extend: {
        marginLeft: 20,
        marginRight: 0
      }
    }, "Menu")
  }, _react.default.createElement(_tabNavItem.TabNavItem, {
    isActive: true
  }, "Crossover/Wagon"), _react.default.createElement(_tabNavItem.TabNavItem, null, "Sedan"), _react.default.createElement(_tabNavItem.TabNavItem, null, "Hybrid"));
}).addWithJSX('With back button & sticky children (left)', function () {
  return _react.default.createElement(_.TabNav, {
    textAlign: (0, _addonKnobs.select)('textAlign', ['center', 'left'], 'center'),
    enableLineTransition: (0, _addonKnobs.boolean)('enableLineTransition', false),
    duration: (0, _addonKnobs.number)('duration', 160),
    backButton: {
      text: (0, _addonKnobs.text)('BackButton text', 'Go Back'),
      clickHandler: function clickHandler(e) {
        e.preventDefault();
      }
    },
    stickyChildrenLeft: _react.default.createElement(_tabNavItem.TabNavItem, {
      extend: {
        marginLeft: 10,
        marginRight: 0
      }
    }, "Menu")
  }, _react.default.createElement(_tabNavItem.TabNavItem, {
    isActive: true
  }, "Crossover/Wagon"), _react.default.createElement(_tabNavItem.TabNavItem, null, "Sedan"), _react.default.createElement(_tabNavItem.TabNavItem, null, "Hybrid"));
}).addWithJSX('With sticky children (left + right)', function () {
  return _react.default.createElement(_.TabNav, {
    textAlign: (0, _addonKnobs.select)('textAlign', ['center', 'left'], 'center'),
    enableLineTransition: (0, _addonKnobs.boolean)('enableLineTransition', false),
    duration: (0, _addonKnobs.number)('duration', 160),
    stickyChildrenLeft: _react.default.createElement(_tabNavItem.TabNavItem, {
      extend: {
        marginLeft: 20,
        marginRight: 0
      }
    }, "Left"),
    stickyChildrenRight: _react.default.createElement(_tabNavItem.TabNavItem, {
      extend: {
        marginLeft: 20
      }
    }, "Right")
  }, _react.default.createElement(_tabNavItem.TabNavItem, {
    isActive: true
  }, "Crossover/Wagon"), _react.default.createElement(_tabNavItem.TabNavItem, null, "Sedan"), _react.default.createElement(_tabNavItem.TabNavItem, null, "Hybrid"));
}).addWithJSX('With back button & sticky children (left + right)', function () {
  return _react.default.createElement(_.TabNav, {
    textAlign: (0, _addonKnobs.select)('textAlign', ['center', 'left'], 'center'),
    enableLineTransition: (0, _addonKnobs.boolean)('enableLineTransition', false),
    duration: (0, _addonKnobs.number)('duration', 160),
    backButton: {
      text: (0, _addonKnobs.text)('BackButton text', 'Go Back'),
      clickHandler: function clickHandler(e) {
        e.preventDefault();
      }
    },
    stickyChildrenLeft: _react.default.createElement(_tabNavItem.TabNavItem, {
      extend: {
        marginLeft: 10,
        marginRight: 0
      }
    }, "Left"),
    stickyChildrenRight: _react.default.createElement(_tabNavItem.TabNavItem, {
      extend: {
        marginLeft: 20
      }
    }, "Right")
  }, _react.default.createElement(_tabNavItem.TabNavItem, {
    isActive: true
  }, "Crossover/Wagon"), _react.default.createElement(_tabNavItem.TabNavItem, null, "Sedan"), _react.default.createElement(_tabNavItem.TabNavItem, null, "Hybrid"));
});