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

Carbon for Cloud & Cognitive IBM Security UI components

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
 * @file Shell stories.
 * @copyright IBM Security 2018 - 2021
 */

import { Camera20 } from '@carbon/icons-react';
import { action } from '@storybook/addon-actions';
import { storiesOf } from '@storybook/react';
import React from 'react';
import { disableCenteredStories, patterns } from '../../../.storybook';
import Shell from '.';
import { IconButton, Button } from '../..';
import { header, profile, toolbar, returnToBanner, skipToContent } from './_mocks_';
import { InlineNotification, NotificationActionButton } from '../../';
import { Grid } from 'carbon-components-react';
var shellProps = {
  header: header,
  profile: profile,
  toolbar: toolbar
};
disableCenteredStories(storiesOf(patterns('Shell#legacy'), module)).addDecorator(function (Story) {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Story, null)), /*#__PURE__*/React.createElement(InlineNotification, {
    className: "page-layouts__banner",
    actions: /*#__PURE__*/React.createElement(NotificationActionButton, {
      href: "https://react.carbondesignsystem.com/?path=/story/components-ui-shell--header-base-w-actions",
      rel: "noopener noreferrer",
      target: "_blank"
    }, "View replacement"),
    kind: "info",
    subtitle: "Pattern no longer supported. The pattern will remain available, but plan to migrate to the pattern replacement.",
    title: "",
    hideCloseButton: true
  }));
}).add('default', function () {
  return /*#__PURE__*/React.createElement(Shell, shellProps);
}, {
  info: {
    text: "\n          Basic implementation of the shell.\n        "
  }
}).add('with addon and skip-to-content link', function () {
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Shell, _extends({}, shellProps, {
    skipToContent: skipToContent,
    renderAddons: [{
      id: 'example-addon',
      tooltip: 'Example Addon Action',
      render: function render(_ref) {
        var iconClassName = _ref.iconClassName,
          className = _ref.className;
        return /*#__PURE__*/React.createElement(IconButton, {
          className: className,
          iconClassName: iconClassName,
          label: "Example Addon",
          onClick: action('addon click'),
          onFocus: action('addon hovered'),
          onMouseOver: action('addon hovered'),
          renderIcon: Camera20,
          tooltipDirection: IconButton.TooltipDirection.RIGHT
        });
      }
    }]
  })), /*#__PURE__*/React.createElement("div", {
    id: "main",
    style: {
      paddingLeft: '5rem'
    }
  }, /*#__PURE__*/React.createElement("p", null, "Example page content."), /*#__PURE__*/React.createElement(Button, {
    href: "#"
  }, "Example button")));
}, {
  info: {
    text: "\n          Shell with an extra icon and a skip-to-content link.\n        "
  }
}).add('with returnTo banner', function () {
  return /*#__PURE__*/React.createElement(Shell, _extends({}, shellProps, {
    returnToBanner: returnToBanner
  }));
}, {
  info: {
    text: "\n          Shell with a return-to banner.\n        "
  }
}).add('with returnTo banner inc. view', function () {
  return /*#__PURE__*/React.createElement(Shell, _extends({}, shellProps, {
    returnToBanner: _objectSpread(_objectSpread({}, returnToBanner), {}, {
      view: 'Preview page title'
    })
  }));
}, {
  info: {
    text: "\n          Shell with a return-to banner and a rendered addon.\n        "
  }
}).add('with addon, skip-to-content link and returnToBanner', function () {
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Shell, _extends({}, shellProps, {
    returnToBanner: _objectSpread(_objectSpread({}, returnToBanner), {}, {
      view: 'Preview page title'
    }),
    skipToContent: skipToContent,
    renderAddons: [{
      id: 'example-addon',
      tooltip: 'Example Addon Action',
      render: function render(_ref2) {
        var className = _ref2.className,
          iconClassName = _ref2.iconClassName;
        return /*#__PURE__*/React.createElement(IconButton, {
          className: className,
          iconClassName: iconClassName,
          label: "Example Addon",
          onClick: action('addon click'),
          onFocus: action('addon hovered'),
          onMouseOver: action('addon hovered'),
          renderIcon: Camera20,
          tooltipDirection: IconButton.TooltipDirection.RIGHT
        });
      }
    }]
  })), /*#__PURE__*/React.createElement("div", {
    id: "main",
    style: {
      paddingLeft: '5rem',
      paddingTop: '2rem'
    }
  }, /*#__PURE__*/React.createElement("p", null, "Example page content."), /*#__PURE__*/React.createElement(Button, {
    href: "#"
  }, "Example button")));
}, {
  info: {
    text: "\n          Shell with an extra icon, a return-to banner, and a skip-to-content link.\n        "
  }
});