@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
68 lines (67 loc) • 2.8 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
/**
* @file Card stories.
* @copyright IBM Security 2019 - 2021
*/
import { action } from '@storybook/addon-actions';
import { text } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import React from 'react';
import { components } from '../../../.storybook';
import { Card, CardSkeleton, SearchBar, StatusIcon } from '../..';
import { Grid } from 'carbon-components-react';
import { image, label, link, tag, text as bodyText, title } from './_mocks_';
import { InlineNotification, NotificationActionButton } from '../../';
var footerDescription = 'Status';
var headerPrefix = "header.";
var props = function props() {
return {
header: {
tag: text("Subtitle (".concat(headerPrefix, "tag)"), tag),
image: text("Icon (".concat(headerPrefix, "image)"), image),
title: text("Title (".concat(headerPrefix, "title)"), title)
},
body: {
text: text('Description (body.text)', bodyText)
},
footer: {
children: /*#__PURE__*/React.createElement(StatusIcon, {
description: footerDescription,
message: footerDescription,
status: "success"
})
}
};
};
var searchLabelText = 'Search';
storiesOf(components('Card#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: "Component 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(Card, null);
}).add('Content', function () {
return /*#__PURE__*/React.createElement(Card, _extends({}, props(), {
label: text('Icon label (label)', label),
link: text('Link (link)', link),
onClick: action('onClick')
}));
}).add('Child with light background', function () {
return /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(SearchBar, {
clearButtonLabelText: "Clear",
labelText: searchLabelText,
placeHolderText: searchLabelText,
submitLabel: "Submit"
}));
}).add('Skeleton', function () {
return /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CardSkeleton, null));
});