@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
265 lines (264 loc) • 15.2 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _addonActions = require("@storybook/addon-actions");
var _addonKnobs = require("@storybook/addon-knobs");
var _react = require("@storybook/react");
var _react2 = _interopRequireWildcard(require("react"));
var _recompose = require("recompose");
var _storybook = require("../../../.storybook");
var _stories = _interopRequireDefault(require("./stories"));
var _ = require("../..");
var _mocks_ = _interopRequireDefault(require("./_mocks_"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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 Tearsheet stories.
* @copyright IBM Security 2019 - 2021
*/
var __docgenInfo = _.Tearsheet.__docgenInfo,
defaultProps = _.Tearsheet.defaultProps;
var renderSidebar = function renderSidebar() {
return (0, _addonKnobs.boolean)('Sidebar (renderSidebar)', true) ? function () {
return 'Sidebar';
} : defaultProps.renderSidebar;
};
var searchLabel = 'What are you looking for today?';
var labelText = 'Label';
var placeholder = 'Placeholder text';
var namespace = 'wizard__form';
var className = "".concat(namespace, "__input");
var id = 'search';
var selector = "#".concat(id);
var selectorPrimaryFocus = function selectorPrimaryFocus() {
return document.querySelector(selector);
};
var renderMain = function renderMain(_ref) {
var isLoading = _ref.isLoading;
return /*#__PURE__*/_react2.default.createElement(_.Form, {
className: namespace,
tabIndex: isLoading ? -1 : 0
}, /*#__PURE__*/_react2.default.createElement("p", null, "Whenever the Tearsheet is loading, please use", ' ', /*#__PURE__*/_react2.default.createElement(_.CodeSnippet, {
type: "inline",
light: true,
tabIndex: isLoading ? -1 : 0
}, "isLoading"), ' ', "via the", ' ', /*#__PURE__*/_react2.default.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 Tearsheet is loading. For example, you can selectively load skeleton components, or you can set", /*#__PURE__*/_react2.default.createElement(_.CodeSnippet, {
type: "inline",
light: true,
tabIndex: isLoading ? -1 : 0
}, "disabled"), "or", ' ', /*#__PURE__*/_react2.default.createElement(_.CodeSnippet, {
type: "inline",
light: true,
tabIndex: isLoading ? -1 : 0
}, "tabIndex=", -1), ' ', "on interactive elements."), /*#__PURE__*/_react2.default.createElement("p", null, "Here are some examples:"), isLoading ? /*#__PURE__*/_react2.default.createElement(_.CodeSnippetSkeleton, {
type: "multi"
}) : /*#__PURE__*/_react2.default.createElement(_.CodeSnippet, {
light: true,
type: "multi"
}, "\n<TearSheet\n renderMain={({ 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__*/_react2.default.createElement("br", null), /*#__PURE__*/_react2.default.createElement("p", null, "For more examples, please review the \"Story\" tab in the Storybook panel below to the see this demo' source code."), /*#__PURE__*/_react2.default.createElement("br", null), /*#__PURE__*/_react2.default.createElement(_.Search, {
id: id,
className: className,
disabled: isLoading,
labelText: searchLabel,
placeholder: searchLabel
}), /*#__PURE__*/_react2.default.createElement(_.TextInput, {
className: className,
id: "test-input-id",
labelText: labelText,
placeholder: placeholder,
disabled: isLoading
}), /*#__PURE__*/_react2.default.createElement(_.FormGroup, {
legendText: labelText
}, /*#__PURE__*/_react2.default.createElement(_.Dropdown, {
id: "dropdown",
label: "Dropdown label",
items: [{
id: 'option-1',
text: 'Option 1'
}, {
id: 'option-2',
text: 'Option 2'
}],
itemToString: function itemToString(item) {
return item ? item.text : '';
},
disabled: isLoading
})), /*#__PURE__*/_react2.default.createElement(_.NumberInput, {
id: "numberInput",
className: className,
label: labelText,
value: 1000,
disabled: isLoading
}), /*#__PURE__*/_react2.default.createElement(_.TextArea, {
className: className,
labelText: labelText,
placeholder: placeholder,
disabled: isLoading
}));
};
var buttons = function buttons() {
return {
primaryButton: {
onClick: (0, _addonActions.action)('primary-click'),
label: (0, _addonKnobs.text)('primaryButton.label', 'Next'),
isDisabled: (0, _addonKnobs.boolean)('primaryButton.isDisabled', false)
},
secondaryButton: {
onClick: (0, _addonActions.action)('secondary-click'),
label: (0, _addonKnobs.text)('secondaryButton.label', 'Previous'),
isDisabled: (0, _addonKnobs.boolean)('secondaryButton.isDisabled', false)
},
closeButton: {
onClick: (0, _addonActions.action)('close-click'),
label: (0, _addonKnobs.text)('closeButton.label', 'Close'),
isDisabled: (0, _addonKnobs.boolean)('closeButton.isDisabled', false)
},
deleteButton: {
onClick: (0, _addonActions.action)('delete-click'),
label: (0, _addonKnobs.text)('deleteButton.label', 'Delete'),
isDisabled: (0, _addonKnobs.boolean)('deleteButton.isDisabled', false)
}
};
};
(0, _react.storiesOf)((0, _storybook.patterns)('Tearsheet#legacy'), module).add('Basic', function () {
return /*#__PURE__*/_react2.default.createElement(_.Tearsheet, (0, _extends2.default)({}, buttons(), {
focusTrap: (0, _addonKnobs.boolean)('focusTrap', false),
selectorPrimaryFocus: selectorPrimaryFocus,
renderMain: renderMain,
renderSidebar: renderSidebar(),
sidebarTitle: "Title of setup",
sidebarSubtitle: "5 mins setup",
mainTitle: "Step title",
labels: _mocks_.default
}));
}, {
info: "\n Basic implementation of the Tearsheet. Using the `label` property in a button object will override the value set in `labels` prop\n ## Important note about `focusTrap`:\n The `focusTrap` prop is set to `false` in the Storybook so that you can navigate the Storybook UI. This prop is set to `true` by default. In most cases, you should not have to change this prop.\n\n ".concat((0, _stories.default)(_.Tearsheet), "\n ")
}).add('with loading', function () {
var loading = true;
var loadingMessage = 'Sending request...';
var TearsheetLoadingStory = (0, _recompose.compose)((0, _recompose.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);
}
}))(_.Tearsheet);
TearsheetLoadingStory.displayName = (0, _recompose.getDisplayName)(_.Tearsheet);
TearsheetLoadingStory.__docgenInfo = __docgenInfo;
return /*#__PURE__*/_react2.default.createElement(TearsheetLoadingStory, (0, _extends2.default)({}, buttons(), {
focusTrap: (0, _addonKnobs.boolean)('focusTrap', false),
selectorPrimaryFocus: selectorPrimaryFocus,
renderMain: renderMain,
renderSidebar: renderSidebar(),
sidebarTitle: "Title of setup",
sidebarSubtitle: "5 mins setup",
mainTitle: "Step title",
labels: _mocks_.default,
isOpen: true,
loading: loading,
loadingMessage: loadingMessage
}));
}, {
info: "\n Tearsheet with loading and dynamic messages. Using the `label` property in a button object will override the value set in `labels` prop\n ## Important note about `focusTrap`:\n The `focusTrap` prop is set to `false` in the Storybook so that you can navigate the Storybook UI. This prop is set to `true` by default. In most cases, you should not have to change this prop.\n \n ".concat((0, _stories.default)(_.Tearsheet), "\n ")
}).add('With open/close', function () {
var TearsheetStory = /*#__PURE__*/function (_React$Component) {
function TearsheetStory() {
var _this2;
(0, _classCallCheck2.default)(this, TearsheetStory);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this2 = _callSuper(this, TearsheetStory, [].concat(args));
(0, _defineProperty2.default)(_this2, "state", {
open: false
});
(0, _defineProperty2.default)(_this2, "close", function () {
_this2.setState({
open: false
});
});
(0, _defineProperty2.default)(_this2, "open", function () {
_this2.setState({
open: true
});
});
return _this2;
}
(0, _inherits2.default)(TearsheetStory, _React$Component);
return (0, _createClass2.default)(TearsheetStory, [{
key: "render",
value: function render() {
return /*#__PURE__*/_react2.default.createElement(_react2.Fragment, null, /*#__PURE__*/_react2.default.createElement(_.Button, {
onClick: this.open,
kind: "primary"
}, "Open"), /*#__PURE__*/_react2.default.createElement(_.Tearsheet, (0, _extends2.default)({}, buttons(), {
focusTrap: (0, _addonKnobs.boolean)('focusTrap', false),
selectorPrimaryFocus: selectorPrimaryFocus,
renderMain: renderMain,
renderSidebar: renderSidebar(),
closeButton: {
onClick: this.close,
label: (0, _addonKnobs.text)('closeButton.label', 'Close'),
isDisabled: (0, _addonKnobs.boolean)('closeButton.isDisabled', false)
},
sidebarTitle: "Title of setup",
sidebarSubtitle: "5 mins setup",
mainTitle: "Step title",
isOpen: this.state.open,
labels: _mocks_.default
})));
}
}]);
}(_react2.default.Component);
return /*#__PURE__*/_react2.default.createElement(TearsheetStory, null);
}, {
info: "\n Basic implementation of a tearsheet. Using the `label` property in a button object will override the value set in `labels` prop\n ## Important note about `focusTrap` & `selectoPrimaryFocus`:\n The `focusTrap` prop is set to `false` in the Storybook so that you can navigate the Storybook UI. This prop is set to `true` by default. In most cases, you should not have to change this prop.\n\n The `selectorPrimaryFocus` prop only works when `focusTrap` is set to `true`. However, in this Storybook environment, `focusTrap = false` so that you can navigate the UI. To demonstrate `selectorPrimaryFocus` functionality, please open the \"Knobs\" tab in the Storybook addon's frame and toggle the `focusTrap` checkbox. When you are ready to view this component's prop table or navigate to a different component, you will need to click on the `focusTrap` checkbox again to disable focus trapping.\n \n ".concat((0, _stories.default)(_.Tearsheet), "\n ")
}).add('With supplied selectorPrimaryFocus', function () {
return /*#__PURE__*/_react2.default.createElement(_.Tearsheet, (0, _extends2.default)({}, buttons(), {
focusTrap: (0, _addonKnobs.boolean)('focusTrap', false),
selectorPrimaryFocus: selector,
renderMain: renderMain,
renderSidebar: renderSidebar(),
sidebarTitle: "Title of setup",
sidebarSubtitle: "5 mins setup",
mainTitle: "Step title",
labels: _mocks_.default,
isOpen: true
}));
}, {
info: "\n Basic implementation of the Tearsheet including supplied selectorPrimaryFocus.\n ## Important note about `focusTrap` & `selectoPrimaryFocus`:\n The `focusTrap` prop is set to `false` in the Storybook so that you can navigate the Storybook UI. This prop is set to `true` by default. In most cases, you should not have to change this prop.\n\n The `selectorPrimaryFocus` prop only works when `focusTrap` is set to `true`. However, in this Storybook environment, `focusTrap = false` so that you can navigate the UI. To demonstrate `selectorPrimaryFocus` functionality, please open the \"Knobs\" tab in the Storybook addon's frame and toggle the `focusTrap` checkbox. When you are ready to view this component's prop table or navigate to a different component, you will need to click on the `focusTrap` checkbox again to disable focus trapping.\n \n ".concat((0, _stories.default)(_.Tearsheet), "\n ")
});