@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
241 lines (240 loc) • 11.3 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
/**
* @file Small tearsheet stories.
* @copyright IBM Security 2019 - 2020
*/
import { action } from '@storybook/addon-actions';
import { boolean, text } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import React, { Fragment } from 'react';
import { compose, getDisplayName, lifecycle } from 'recompose';
import { info, patterns } from '../../../../.storybook';
import getGuidance from '../stories';
import { Button, CodeSnippet, CodeSnippetSkeleton, TearsheetSmall } from '../../..';
import { buttons, description, body, heading, isDisabled, labels } from './_mocks_';
var closeButton = buttons.closeButton,
primaryButton = buttons.primaryButton,
secondaryButton = buttons.secondaryButton;
var focusTrap = boolean('focusTrap', false);
storiesOf(patterns('TearsheetSmall#legacy'), module).add('Default', function () {
return /*#__PURE__*/React.createElement(TearsheetSmall, {
focusTrap: focusTrap,
heading: heading,
description: description,
closeButton: {
isDisabled: boolean('buttons.closeButton.isDisabled', isDisabled),
label: text('buttons.closeButton.label', closeButton.label),
onClick: action('buttons.closeButton.onClick')
},
primaryButton: {
isDisabled: boolean('buttons.primaryButton.isDisabled', isDisabled),
label: text('buttons.primaryButton.label', primaryButton.label),
onClick: action('buttons.primaryButton.onClick')
},
secondaryButton: {
isDisabled: boolean('buttons.secondaryButton.isDisabled', isDisabled),
label: text('buttons.secondaryButton.label', secondaryButton.label),
onClick: action('buttons.secondaryButton.onClick')
},
isOpen: true,
labels: labels
});
}, info(getGuidance(TearsheetSmall))).add('Hidden button', function () {
return /*#__PURE__*/React.createElement(TearsheetSmall, {
focusTrap: focusTrap,
heading: heading,
description: description,
closeButton: {
isDisabled: boolean('buttons.closeButton.isDisabled', isDisabled),
label: text('buttons.closeButton.label', closeButton.label),
onClick: action('buttons.closeButton.onClick')
},
primaryButton: {
isDisabled: boolean('buttons.primaryButton.isDisabled', isDisabled),
label: text('buttons.primaryButton.label', primaryButton.label),
onClick: action('buttons.primaryButton.onClick')
},
secondaryButton: {
isDisabled: boolean('buttons.secondaryButton.isDisabled', isDisabled),
label: text('buttons.secondaryButton.label', secondaryButton.label),
onClick: action('buttons.secondaryButton.onClick'),
hide: true
},
isOpen: true,
labels: labels
});
}, info(getGuidance(TearsheetSmall))).add('with body', function () {
return boolean('isOpen', true) && /*#__PURE__*/React.createElement(TearsheetSmall, {
flush: boolean('Flush (flush)', TearsheetSmall.defaultProps.flush),
focusTrap: focusTrap,
heading: heading,
description: description,
body: /*#__PURE__*/React.createElement("section", {
className: "tearsheet--small__body"
}, body),
closeButton: {
isDisabled: boolean('buttons.closeButton.isDisabled', isDisabled),
label: text('buttons.closeButton.label', closeButton.label),
onClick: action('buttons.closeButton.onClick')
},
primaryButton: {
isDisabled: boolean('buttons.primaryButton.isDisabled', isDisabled),
label: text('buttons.primaryButton.label', primaryButton.label),
onClick: action('buttons.primaryButton.onClick')
},
secondaryButton: {
isDisabled: boolean('buttons.secondaryButton.isDisabled', isDisabled),
label: text('buttons.secondaryButton.label', secondaryButton.label),
onClick: action('buttons.secondaryButton.onClick')
},
isOpen: true,
labels: labels
});
}, info(getGuidance(TearsheetSmall))).add('with loading', function () {
var loading = true;
var loadingMessage = 'Sending request...';
var TearsheetSmallLoadingStory = compose(lifecycle({
state: {
loading: loading,
loadingMessage: loadingMessage
},
componentDidMount: function componentDidMount() {
var _this = this;
this.startRequest = setTimeout(function () {
return _this.setState({
loadingMessage: loadingMessage
});
}, 1000);
this.processResponse = setTimeout(function () {
return _this.setState({
loadingMessage: 'Processing request...'
});
}, 3000);
this.complete = setTimeout(function () {
return _this.setState({
loading: !loading
});
}, 5000);
},
componentWillUnmount: function componentWillUnmount() {
clearTimeout(this.startRequest);
clearTimeout(this.processResponse);
clearTimeout(this.complete);
}
}))(TearsheetSmall);
TearsheetSmallLoadingStory.displayName = getDisplayName(TearsheetSmall);
TearsheetSmallLoadingStory.__docgenInfo = TearsheetSmall.__docgenInfo;
return /*#__PURE__*/React.createElement(TearsheetSmallLoadingStory, {
focusTrap: focusTrap,
heading: heading,
loadingMessage: loadingMessage,
description: description,
closeButton: {
isDisabled: boolean('buttons.closeButton.isDisabled', isDisabled),
label: text('buttons.closeButton.label', closeButton.label),
onClick: action('buttons.closeButton.onClick')
},
primaryButton: {
isDisabled: boolean('buttons.primaryButton.isDisabled', isDisabled),
label: text('buttons.primaryButton.label', primaryButton.label),
onClick: action('buttons.primaryButton.onClick')
},
secondaryButton: {
isDisabled: boolean('buttons.secondaryButton.isDisabled', isDisabled),
label: text('buttons.secondaryButton.label', secondaryButton.label),
onClick: action('buttons.secondaryButton.onClick')
},
isOpen: true,
loading: loading,
labels: labels,
body: function body(_ref) {
var isLoading = _ref.isLoading;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "Whenever the TearsheetSmall is loading, please use", ' ', /*#__PURE__*/React.createElement(CodeSnippet, {
type: "inline",
light: true,
tabIndex: isLoading ? -1 : 0
}, "isLoading"), ' ', "via the", ' ', /*#__PURE__*/React.createElement(CodeSnippet, {
type: "inline",
light: true,
tabIndex: isLoading ? -1 : 0
}, "renderMain"), ' ', "render prop to prevent users from tabbing through focussable content (such as form inputs, buttons, and links) while the TearsheetSmall is loading. For example, you can selectively load skeleton components, or you can set", /*#__PURE__*/React.createElement(CodeSnippet, {
type: "inline",
light: true,
tabIndex: isLoading ? -1 : 0
}, "disabled"), "or", ' ', /*#__PURE__*/React.createElement(CodeSnippet, {
type: "inline",
light: true,
tabIndex: isLoading ? -1 : 0
}, "tabIndex=", -1), ' ', "on interactive elements."), /*#__PURE__*/React.createElement("p", null, "Here are some examples:"), isLoading ? /*#__PURE__*/React.createElement(CodeSnippetSkeleton, {
type: "multi"
}) : /*#__PURE__*/React.createElement(CodeSnippet, {
light: true,
type: "multi"
}, "\n <TearSheetSmall\n body={(isLoading) => (\n <Button disabled={isLoading}>\n Example button.\n </Button>\n <CodeSnippet tabIndex={isLoading ? -1 : 0}>\n Example snippet with no copy button.\n </CodeSnippet>\n {isLoading ? (\n <CodeSnippetSkeleton type=\"multi\" />\n ) : (\n <CodeSnippet type=\"multi\">\n Exampe snippet with a copy button.\n </CodeSnippet>\n )}\n )}\n />\n "), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("p", null, "For more examples, please review the \"Story\" tab in the Storybook panel below to the see this demo' source code."));
}
});
}, info(getGuidance(TearsheetSmall))).add('With open/close', function () {
var TearsheetSmallStory = /*#__PURE__*/function (_React$Component) {
function TearsheetSmallStory() {
var _this2;
_classCallCheck(this, TearsheetSmallStory);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this2 = _callSuper(this, TearsheetSmallStory, [].concat(args));
_defineProperty(_this2, "state", {
open: false
});
_defineProperty(_this2, "close", function () {
_this2.setState({
open: false
});
});
_defineProperty(_this2, "open", function () {
_this2.setState({
open: true
});
});
return _this2;
}
_inherits(TearsheetSmallStory, _React$Component);
return _createClass(TearsheetSmallStory, [{
key: "render",
value: function render() {
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Button, {
onClick: this.open,
kind: "primary"
}, "Open"), /*#__PURE__*/React.createElement(TearsheetSmall, {
focusTrap: focusTrap,
heading: heading,
description: description,
closeButton: {
isDisabled: boolean('buttons.closeButton.isDisabled', isDisabled),
label: text('buttons.closeButton.label', closeButton.label),
onClick: this.close
},
primaryButton: {
isDisabled: boolean('buttons.primaryButton.isDisabled', isDisabled),
label: text('buttons.primaryButton.label', primaryButton.label),
onClick: action('buttons.primaryButton.onClick')
},
secondaryButton: {
isDisabled: boolean('buttons.secondaryButton.isDisabled', isDisabled),
label: text('buttons.secondaryButton.label', secondaryButton.label),
onClick: this.close
},
isOpen: this.state.open,
labels: labels
}));
}
}]);
}(React.Component);
return /*#__PURE__*/React.createElement(TearsheetSmallStory, null);
}, info(getGuidance(TearsheetSmall)));