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

Carbon for Cloud & Cognitive IBM Security UI components

import _extends from "@babel/runtime/helpers/extends";
/**
 * @file Panel stories.
 * @copyright IBM Security 2019 - 2021
 */

import { Add16 } from '@carbon/icons-react';
import { action } from '@storybook/addon-actions';
import { boolean, text } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import React, { Fragment } from 'react';
import { patterns } from '../../../.storybook';
import { disabled, label } from '../_mocks_';
import { labels } from './_mocks_';
import { Button, Panel, PanelContainer, PanelContent, PanelController } from '../..';
import { InlineNotification, NotificationActionButton } from '../../';
import { Grid } from 'carbon-components-react';
var closeButtonLabel = 'Close';
var panelProps = {
  onClose: action('onClose'),
  onOpen: action('onOpen')
};
var panelContainerProps = {
  title: label,
  subtitle: label,
  labels: labels
};
var panelContent = 'Use the `PanelContent` component to have the appropriate formatting applied to content';
var footerLabel = 'Custom footer';
storiesOf(patterns('Panel#legacy'), module).addDecorator(function (Story) {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InlineNotification, {
    className: "page-layouts__banner",
    actions: /*#__PURE__*/React.createElement(NotificationActionButton, {
      href: "https://v1-ibm-products.carbondesignsystem.com/?path=/story/ibm-products-components-side-panel-sidepanel--slide-over",
      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
  }), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Story, null)));
}).add('Default', function () {
  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Panel, _extends({}, panelProps, {
    render: function render(_ref) {
      var active = _ref.active,
        handleClose = _ref.handleClose,
        toggleActive = _ref.toggleActive;
      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Button, {
        onClick: toggleActive
      }, "Primary and secondary action"), /*#__PURE__*/React.createElement(PanelController, {
        active: active
      }, /*#__PURE__*/React.createElement(PanelContainer, _extends({}, panelContainerProps, {
        closeButton: {
          onClick: toggleActive,
          label: text('closeButton.label', closeButtonLabel)
        },
        primaryButton: {
          icon: Add16,
          iconDescription: text('primaryButton.iconDescription', 'Add'),
          isDisabled: boolean('primaryButton.isDisabled', !disabled),
          label: text('primaryButton.label', 'Add'),
          onClick: handleClose
        },
        secondaryButton: {
          isDisabled: boolean('secondaryButton.isDisabled', !disabled),
          label: text('secondaryButton.label', 'Cancel'),
          onClick: handleClose
        }
      }), /*#__PURE__*/React.createElement(PanelContent, null, panelContent))));
    }
  })), /*#__PURE__*/React.createElement(Panel, _extends({}, panelProps, {
    render: function render(_ref2) {
      var active = _ref2.active,
        toggleActive = _ref2.toggleActive;
      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Button, {
        onClick: toggleActive
      }, "Primary action"), /*#__PURE__*/React.createElement(PanelController, {
        active: active
      }, /*#__PURE__*/React.createElement(PanelContainer, _extends({}, panelContainerProps, {
        closeButton: {
          onClick: toggleActive,
          label: text('closeButton.label', closeButtonLabel)
        },
        primaryButton: {
          isDisabled: boolean('primaryButton.isDisabled', !disabled),
          label: text('primaryButton.label', 'Submit'),
          onClick: toggleActive
        }
      }))));
    }
  })), /*#__PURE__*/React.createElement(Panel, _extends({}, panelProps, {
    render: function render(_ref3) {
      var active = _ref3.active,
        toggleActive = _ref3.toggleActive;
      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Button, {
        onClick: toggleActive
      }, "Default"), /*#__PURE__*/React.createElement(PanelController, {
        active: active
      }, /*#__PURE__*/React.createElement(PanelContainer, _extends({}, panelContainerProps, {
        closeButton: {
          onClick: toggleActive,
          label: closeButtonLabel
        }
      }), /*#__PURE__*/React.createElement(PanelContent, null, panelContent))));
    }
  })), /*#__PURE__*/React.createElement(Panel, _extends({}, panelProps, {
    render: function render(_ref4) {
      var active = _ref4.active,
        toggleActive = _ref4.toggleActive;
      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Button, {
        onClick: toggleActive
      }, footerLabel), /*#__PURE__*/React.createElement(PanelController, {
        active: active
      }, /*#__PURE__*/React.createElement(PanelContainer, _extends({}, panelContainerProps, {
        closeButton: {
          onClick: toggleActive,
          label: text('closeButton.label', closeButtonLabel)
        },
        renderFooter: function renderFooter() {
          return /*#__PURE__*/React.createElement(Button, {
            size: "xl"
          }, footerLabel);
        }
      }))));
    }
  })));
}, {
  info: "View the 'Story' addon panel for guidance on using the `renderFooter` prop"
});