@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
48 lines (46 loc) • 2.44 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@storybook/react");
var _addonKnobs = require("@storybook/addon-knobs");
var _storybook = require("../../../.storybook");
var _namespace = require("../../globals/namespace");
var _Pill = _interopRequireDefault(require("./Pill"));
var _ = require("../../");
var _carbonComponentsReact = require("carbon-components-react");
/**
* @file Pill stories.
* @copyright IBM Security 2019 - 2021
*/
(0, _react2.storiesOf)((0, _storybook.components)('Pill#legacy'), module).addDecorator(function (Story) {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.InlineNotification, {
className: "page-layouts__banner",
actions: /*#__PURE__*/_react.default.createElement(_.NotificationActionButton, {
href: "https://v1-ibm-products.carbondesignsystem.com/?path=/story/security-components-decorator--default",
rel: "noopener noreferrer",
target: "_blank"
}, "View replacement"),
kind: "info",
subtitle: "Component no longer supported. The component will remain available, but plan to migrate to the component replacement.",
title: "",
hideCloseButton: true
}), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Grid, null, /*#__PURE__*/_react.default.createElement(Story, null)));
}).add("default", function () {
return /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: '64px'
}
}, /*#__PURE__*/_react.default.createElement(_Pill.default, {
value: (0, _addonKnobs.text)('value', '127.0.0.1'),
type: (0, _addonKnobs.text)('type', 'IP')
}), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("p", {
style: {
width: '400px'
},
className: "".concat(_namespace.carbonPrefix, "--type-body-long-01")
}, "This is an inline decorator that appears inside a paragraph, alongside text.", /*#__PURE__*/_react.default.createElement(_Pill.default, {
value: (0, _addonKnobs.text)('value', '127.0.0.1'),
type: (0, _addonKnobs.text)('type', 'IP'),
inline: true
}), "This variation of the decorator component is smaller to match the font size of the paragraph text."));
});