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

Carbon for Cloud & Cognitive IBM Security UI components

/**
 * @file Navigation stories.
 * @copyright IBM Security 2019 - 2021
 */

import { action } from '@storybook/addon-actions';
import { storiesOf } from '@storybook/react';
import React from 'react';
import { components } from '../../../.storybook';
import { Nav, NavItem, NavList } from '../..';
import { commerce } from 'faker';
var name = Nav.name;
storiesOf(components('Nav'), module).add('Default', function () {
  return /*#__PURE__*/React.createElement("div", {
    style: {
      width: '300px'
    }
  }, /*#__PURE__*/React.createElement(Nav, {
    heading: "Nav example",
    label: "Navigation"
  }, /*#__PURE__*/React.createElement(NavList, {
    title: "Nav list 1"
  }, /*#__PURE__*/React.createElement(NavItem, {
    key: "navitem_1-1",
    element: "span",
    customprop: "uniqueValue"
  }, "Nav item 1-1 (with a custom element)"), /*#__PURE__*/React.createElement(NavItem, {
    key: "navitem_1-2",
    onClick: action('onClick')
  }, "Nav item 1-2")), /*#__PURE__*/React.createElement(NavList, {
    title: "Nav list 2 expanded on page load",
    isExpandedOnPageload: true
  }, /*#__PURE__*/React.createElement(NavItem, {
    key: "navitem_2-1",
    href: "#navitem_2-1"
  }, "Nav item 2-1"), /*#__PURE__*/React.createElement(NavItem, {
    key: "navitem_2-2",
    href: "#navitem_2-2"
  }, "Nav item 2-2")), /*#__PURE__*/React.createElement(NavList, {
    title: "Nav list 3"
  }, /*#__PURE__*/React.createElement(NavItem, {
    key: "navitem_3-1",
    href: "#navitem_3-1"
  }, "Nav item 3-1"), /*#__PURE__*/React.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__*/React.createElement("div", {
    style: {
      width: '300px'
    }
  }, /*#__PURE__*/React.createElement(Nav, {
    heading: "Nav example",
    label: "Navigation"
  }, /*#__PURE__*/React.createElement(NavList, {
    title: "Nav list 1"
  }, /*#__PURE__*/React.createElement(NavItem, {
    key: "navitem_1-1",
    element: "span",
    customprop: "uniqueValue"
  }, "Nav item 1-1 (with a custom element)"), /*#__PURE__*/React.createElement(NavItem, {
    key: "navitem_1-2",
    onClick: action('onClick')
  }, "Nav item 1-2")), /*#__PURE__*/React.createElement(NavList, {
    title: "Nav list 2 expanded on page load",
    isExpandedOnPageload: true
  }, /*#__PURE__*/React.createElement(NavItem, {
    key: "navitem_2-1",
    href: "#navitem_2-1"
  }, "Nav item 2-1 - ", commerce.productName(), " - ", commerce.productName(), ' ', "- ", commerce.productName()), /*#__PURE__*/React.createElement(NavItem, {
    key: "navitem_2-2",
    href: "#navitem_2-2"
  }, "Nav item 2-2")), /*#__PURE__*/React.createElement(NavList, {
    title: "Nav list 3"
  }, /*#__PURE__*/React.createElement(NavItem, {
    key: "navitem_3-1",
    href: "#navitem_3-1"
  }, "Nav item 3-1"), /*#__PURE__*/React.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.")
  }
});