@carbon/ibm-security/lib/components/Nav/Nav-story.js

Carbon for Cloud & Cognitive IBM Security UI components

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _addonActions = require("@storybook/addon-actions");
var _react = require("@storybook/react");
var _react2 = _interopRequireDefault(require("react"));
var _storybook = require("../../../.storybook");
var _ = require("../..");
var _faker = require("faker");
/**
 * @file Navigation stories.
 * @copyright IBM Security 2019 - 2021
 */

var name = _.Nav.name;
(0, _react.storiesOf)((0, _storybook.components)('Nav'), module).add('Default', function () {
  return /*#__PURE__*/_react2.default.createElement("div", {
    style: {
      width: '300px'
    }
  }, /*#__PURE__*/_react2.default.createElement(_.Nav, {
    heading: "Nav example",
    label: "Navigation"
  }, /*#__PURE__*/_react2.default.createElement(_.NavList, {
    title: "Nav list 1"
  }, /*#__PURE__*/_react2.default.createElement(_.NavItem, {
    key: "navitem_1-1",
    element: "span",
    customprop: "uniqueValue"
  }, "Nav item 1-1 (with a custom element)"), /*#__PURE__*/_react2.default.createElement(_.NavItem, {
    key: "navitem_1-2",
    onClick: (0, _addonActions.action)('onClick')
  }, "Nav item 1-2")), /*#__PURE__*/_react2.default.createElement(_.NavList, {
    title: "Nav list 2 expanded on page load",
    isExpandedOnPageload: true
  }, /*#__PURE__*/_react2.default.createElement(_.NavItem, {
    key: "navitem_2-1",
    href: "#navitem_2-1"
  }, "Nav item 2-1"), /*#__PURE__*/_react2.default.createElement(_.NavItem, {
    key: "navitem_2-2",
    href: "#navitem_2-2"
  }, "Nav item 2-2")), /*#__PURE__*/_react2.default.createElement(_.NavList, {
    title: "Nav list 3"
  }, /*#__PURE__*/_react2.default.createElement(_.NavItem, {
    key: "navitem_3-1",
    href: "#navitem_3-1"
  }, "Nav item 3-1"), /*#__PURE__*/_react2.default.createElement(_.NavItem, {
    key: "navitem_3-2",
    href: "https://www.ibm.com/"
  }, "Nav item that is an external link and wraps to a new line"))));
}, {
  info: {
    text: "Basic implementation of the '".concat(name, "' component.")
  }
}).add('Long NavItem test case', function () {
  return /*#__PURE__*/_react2.default.createElement("div", {
    style: {
      width: '300px'
    }
  }, /*#__PURE__*/_react2.default.createElement(_.Nav, {
    heading: "Nav example",
    label: "Navigation"
  }, /*#__PURE__*/_react2.default.createElement(_.NavList, {
    title: "Nav list 1"
  }, /*#__PURE__*/_react2.default.createElement(_.NavItem, {
    key: "navitem_1-1",
    element: "span",
    customprop: "uniqueValue"
  }, "Nav item 1-1 (with a custom element)"), /*#__PURE__*/_react2.default.createElement(_.NavItem, {
    key: "navitem_1-2",
    onClick: (0, _addonActions.action)('onClick')
  }, "Nav item 1-2")), /*#__PURE__*/_react2.default.createElement(_.NavList, {
    title: "Nav list 2 expanded on page load",
    isExpandedOnPageload: true
  }, /*#__PURE__*/_react2.default.createElement(_.NavItem, {
    key: "navitem_2-1",
    href: "#navitem_2-1"
  }, "Nav item 2-1 - ", _faker.commerce.productName(), " - ", _faker.commerce.productName(), ' ', "- ", _faker.commerce.productName()), /*#__PURE__*/_react2.default.createElement(_.NavItem, {
    key: "navitem_2-2",
    href: "#navitem_2-2"
  }, "Nav item 2-2")), /*#__PURE__*/_react2.default.createElement(_.NavList, {
    title: "Nav list 3"
  }, /*#__PURE__*/_react2.default.createElement(_.NavItem, {
    key: "navitem_3-1",
    href: "#navitem_3-1"
  }, "Nav item 3-1"), /*#__PURE__*/_react2.default.createElement(_.NavItem, {
    key: "navitem_3-2",
    href: "https://www.ibm.com/"
  }, "Nav item that is an external link and wraps to a new line"))));
}, {
  info: {
    text: "Basic implementation of the '".concat(name, "' component.")
  }
});