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

Carbon for Cloud & Cognitive IBM Security UI components

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

import { Delete16, Folder20 } from '@carbon/icons-react';
import { action } from '@storybook/addon-actions';
import { storiesOf } from '@storybook/react';
import React, { Fragment } from 'react';
import { patterns } from '../../../.storybook';
import { carbonPrefix } from '../../globals/namespace';
import { SummaryCard, SummaryCardAction, SummaryCardBatchAction, SummaryCardBatchActions, SummaryCardBody, SummaryCardContainer, SummaryCardFooter, SummaryCardHeader, SummaryCardSelect, SummaryCardSkeleton, Tooltip } from '../..';
import { lorem } from '../_mocks_';
import props from './SummaryCardContainer/_mocks_';
import summaryCardSelectProps from './SummaryCardSelect/_mocks_';
import { InlineNotification, NotificationActionButton } from '../../';
import { Grid } from 'carbon-components-react';
storiesOf(patterns('SummaryCard#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-cards-productivecard--default",
      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)));
}).addDecorator(function (story) {
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(carbonPrefix, "--grid ").concat(carbonPrefix, "--grid--full-width")
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(carbonPrefix, "--row")
  }, story()));
}).add('with primary label', function () {
  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "".concat(carbonPrefix, "--col-md-4 ").concat(carbonPrefix, "--col-lg-4")
  }, /*#__PURE__*/React.createElement(SummaryCard, null, /*#__PURE__*/React.createElement(SummaryCardHeader, {
    title: "Summary card that is super long and will wrap the next line. Therefore it needs to be truncated with a tooltip for accessibility.",
    status: /*#__PURE__*/React.createElement(Tooltip, {
      showIcon: true,
      iconDescription: "Status"
    }, "Tooltip content"),
    truncate: true
  }), /*#__PURE__*/React.createElement(SummaryCardBody, null, lorem), /*#__PURE__*/React.createElement(SummaryCardFooter, null, /*#__PURE__*/React.createElement(SummaryCardAction, {
    expandedContent: lorem,
    renderIcon: Folder20
  }, "Button label that is long and will be truncated"), /*#__PURE__*/React.createElement(SummaryCardAction, {
    iconDescription: "Icon description",
    renderIcon: Folder20,
    hasIconOnly: true,
    onClick: action('onClick'),
    tooltipPosition: "bottom",
    tooltipAlignment: "center"
  }), /*#__PURE__*/React.createElement(SummaryCardAction, {
    iconDescription: "Icon description",
    renderIcon: Folder20,
    hasIconOnly: true,
    onClick: action('onClick'),
    tooltipPosition: "bottom",
    tooltipAlignment: "center"
  })))), /*#__PURE__*/React.createElement("div", {
    className: "".concat(carbonPrefix, "--col-sm-4 ").concat(carbonPrefix, "--col-md-4 ").concat(carbonPrefix, "--col-lg-4")
  }, /*#__PURE__*/React.createElement(SummaryCard, null, /*#__PURE__*/React.createElement(SummaryCardHeader, {
    title: "Summary card with no footer",
    status: /*#__PURE__*/React.createElement(Tooltip, {
      showIcon: true,
      iconDescription: "Status"
    }, "Tooltip content")
  }), /*#__PURE__*/React.createElement(SummaryCardBody, null, lorem.repeat(5)))), /*#__PURE__*/React.createElement("div", {
    className: "".concat(carbonPrefix, "--col-sm-4 ").concat(carbonPrefix, "--col-md-4 ").concat(carbonPrefix, "--col-lg-4")
  }, /*#__PURE__*/React.createElement(SummaryCard, null, /*#__PURE__*/React.createElement(SummaryCardHeader, {
    title: "Summary card with no status"
  }), /*#__PURE__*/React.createElement(SummaryCardBody, null, lorem.repeat(3)), /*#__PURE__*/React.createElement(SummaryCardFooter, null, /*#__PURE__*/React.createElement(SummaryCardAction, {
    loading: true,
    expandedContent: lorem.repeat(5)
  }, "Button label"), /*#__PURE__*/React.createElement(SummaryCardAction, {
    iconDescription: "Icon description",
    renderIcon: Folder20,
    hasIconOnly: true,
    onClick: action('onClick'),
    tooltipPosition: "bottom",
    tooltipAlignment: "center"
  }), /*#__PURE__*/React.createElement(SummaryCardAction, {
    iconDescription: "Icon description",
    renderIcon: Folder20,
    hasIconOnly: true,
    onClick: action('onClick'),
    tooltipPosition: "bottom",
    tooltipAlignment: "center"
  }), /*#__PURE__*/React.createElement(SummaryCardAction, {
    iconDescription: "Icon description",
    renderIcon: Folder20,
    hasIconOnly: true,
    onClick: action('onClick'),
    tooltipPosition: "bottom",
    tooltipAlignment: "center"
  })))));
}).add('Multiselect', function () {
  return /*#__PURE__*/React.createElement(SummaryCardContainer, {
    render: function render(_ref) {
      var getBatchActionProps = _ref.getBatchActionProps,
        getSelectionProps = _ref.getSelectionProps,
        selectedSummaryCards = _ref.selectedSummaryCards,
        summaryCards = _ref.summaryCards;
      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(SummaryCardBatchActions, getBatchActionProps(), /*#__PURE__*/React.createElement(SummaryCardBatchAction, {
        onClick: function onClick() {
          return action('SummaryCardBatchAction onClick')(selectedSummaryCards);
        },
        renderIcon: Delete16,
        tabIndex: getBatchActionProps().shouldShowBatchActions ? 0 : -1
      }, "Action")), /*#__PURE__*/React.createElement("div", {
        className: "".concat(carbonPrefix, "--row")
      }, summaryCards.map(function (_ref2) {
        var id = _ref2.id;
        return /*#__PURE__*/React.createElement("div", {
          key: id,
          className: "".concat(carbonPrefix, "--col-md-4 ").concat(carbonPrefix, "--col-lg-4")
        }, /*#__PURE__*/React.createElement(SummaryCard, null, /*#__PURE__*/React.createElement(SummaryCardHeader, {
          title: id
        }), /*#__PURE__*/React.createElement(SummaryCardBody, null, "SummaryCardBody"), /*#__PURE__*/React.createElement(SummaryCardFooter, null, /*#__PURE__*/React.createElement(SummaryCardSelect, _extends({}, summaryCardSelectProps, getSelectionProps({
          id: id
        }))), /*#__PURE__*/React.createElement(SummaryCardAction, null, "SummaryCardAction"))));
      })));
    },
    summaryCards: props.summaryCards
  });
}).add('with skeleton', function () {
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(carbonPrefix, "--col-sm-1 ").concat(carbonPrefix, "--col-md-2 ").concat(carbonPrefix, "--col-lg-4")
  }, /*#__PURE__*/React.createElement(SummaryCardSkeleton, null));
});