@carbon/ibm-products 1.0.0-rc.1 → 1.1.0

package/lib/components/NotificationsPanel/NotificationsPanel_data.js

@@ -0,0 +1,146 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _addonActions = require("@storybook/addon-actions");
+
+var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
+
+/**
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var currentDate = new Date();
+var yesterdayDate = new Date();
+yesterdayDate.setDate(yesterdayDate.getDate() - 1);
+var dayBeforeYesterday = new Date();
+dayBeforeYesterday.setDate(dayBeforeYesterday.getDate() - 2);
+var msInOneMinute = 60000;
+var data = [{
+  id: (0, _uuidv.default)(),
+  type: 'error',
+  title: 'LogRhythm connection failure',
+  description: 'LogRhythm is failing to connect, check timeout.',
+  timestamp: currentDate,
+  unread: true,
+  onNotificationClick: (0, _addonActions.action)("Clicked on notification")
+}, {
+  id: (0, _uuidv.default)(),
+  type: 'error',
+  title: 'LogDNA cannot be reached.',
+  description: 'Unable to communicate with LogDNA.',
+  timestamp: new Date(new Date().getTime() - 30 * 1000),
+  // 30 seconds ago
+  unread: true,
+  onNotificationClick: (0, _addonActions.action)("Clicked on notification")
+}, {
+  id: (0, _uuidv.default)(),
+  type: 'warning',
+  title: 'System alert',
+  description: 'Email classification was exported successfully.',
+  timestamp: new Date(currentDate.getTime() - 11 * msInOneMinute),
+  onNotificationClick: (0, _addonActions.action)("Clicked on notification")
+}, {
+  id: (0, _uuidv.default)(),
+  type: 'success',
+  title: 'IBM Cloud Pak for Automation Success',
+  description: 'Successfully connected cartridge',
+  timestamp: new Date(currentDate.getTime() - 120 * msInOneMinute),
+  onNotificationClick: (0, _addonActions.action)("Clicked on notification")
+}, {
+  id: (0, _uuidv.default)(),
+  type: 'success',
+  title: 'Successfully connected LogDNA',
+  description: 'App connection succeeded',
+  timestamp: yesterdayDate,
+  onNotificationClick: (0, _addonActions.action)("Clicked on notification")
+}, {
+  id: (0, _uuidv.default)(),
+  type: 'warning',
+  title: 'Cloud Foundry app memory',
+  description: 'Allocated app memory low',
+  timestamp: dayBeforeYesterday,
+  onNotificationClick: (0, _addonActions.action)("Clicked on notification")
+}, {
+  id: (0, _uuidv.default)(),
+  type: 'informational',
+  title: 'Logs are now being monitored',
+  link: {
+    text: 'View logs',
+    url: 'https://www.carbondesignsystem.com'
+  },
+  timestamp: dayBeforeYesterday,
+  onNotificationClick: (0, _addonActions.action)("Clicked on notification")
+}, {
+  id: (0, _uuidv.default)(),
+  type: 'error',
+  title: 'Cluster unreachable',
+  description: 'Not able to establish connection with provided cluster. Please check your logs and memory allocation to resolve this issue further.',
+  timestamp: dayBeforeYesterday,
+  onNotificationClick: (0, _addonActions.action)("Clicked on notification")
+}, {
+  id: (0, _uuidv.default)(),
+  type: 'error',
+  title: 'Cluster unreachable',
+  description: 'Not able to establish connection with provided cluster. Please check your logs and memory allocation to resolve this issue further.',
+  timestamp: dayBeforeYesterday,
+  onNotificationClick: (0, _addonActions.action)("Clicked on notification")
+}, {
+  id: (0, _uuidv.default)(),
+  type: 'error',
+  title: 'Cluster unreachable',
+  description: 'Not able to establish connection with provided cluster. Please check your logs and memory allocation to resolve this issue further.',
+  timestamp: dayBeforeYesterday,
+  onNotificationClick: (0, _addonActions.action)("Clicked on notification")
+}, {
+  id: (0, _uuidv.default)(),
+  type: 'error',
+  title: 'Cluster unreachable',
+  description: 'Not able to establish connection with provided cluster. Please check your logs and memory allocation to resolve this issue further.',
+  timestamp: dayBeforeYesterday,
+  onNotificationClick: (0, _addonActions.action)("Clicked on notification")
+}, {
+  id: (0, _uuidv.default)(),
+  type: 'error',
+  title: 'Cluster unreachable',
+  description: 'Not able to establish connection with provided cluster. Please check your logs and memory allocation to resolve this issue further.',
+  timestamp: dayBeforeYesterday,
+  onNotificationClick: (0, _addonActions.action)("Clicked on notification")
+}, {
+  id: (0, _uuidv.default)(),
+  type: 'error',
+  title: 'Cluster unreachable',
+  description: 'Not able to establish connection with provided cluster. Please check your logs and memory allocation to resolve this issue further.',
+  timestamp: dayBeforeYesterday,
+  onNotificationClick: (0, _addonActions.action)("Clicked on notification")
+}, {
+  id: (0, _uuidv.default)(),
+  type: 'error',
+  title: 'Cluster unreachable',
+  description: 'Not able to establish connection with provided cluster. Please check your logs and memory allocation to resolve this issue further.',
+  timestamp: dayBeforeYesterday,
+  onNotificationClick: (0, _addonActions.action)("Clicked on notification")
+}, {
+  id: (0, _uuidv.default)(),
+  type: 'error',
+  title: 'Cluster unreachable',
+  description: 'Not able to establish connection with provided cluster. Please check your logs and memory allocation to resolve this issue further.',
+  timestamp: dayBeforeYesterday,
+  onNotificationClick: (0, _addonActions.action)("Clicked on notification")
+}, {
+  id: (0, _uuidv.default)(),
+  type: 'error',
+  title: 'Cluster unreachable',
+  description: 'Not able to establish connection with provided cluster. Please check your logs and memory allocation to resolve this issue further.',
+  timestamp: dayBeforeYesterday,
+  onNotificationClick: (0, _addonActions.action)("Clicked on notification")
+}];
+var _default = data;
+exports.default = _default;

package/lib/components/NotificationsPanel/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "NotificationsPanel", {
+  enumerable: true,
+  get: function get() {
+    return _NotificationsPanel.NotificationsPanel;
+  }
+});
+
+var _NotificationsPanel = require("./NotificationsPanel");

package/lib/components/NotificationsPanel/preview-components/UnreadNotificationBell.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UnreadNotificationBell = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+/**
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var UnreadNotificationBell = function UnreadNotificationBell() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "18px",
+    height: "19px",
+    viewBox: "0 0 18 19",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink"
+  }, /*#__PURE__*/_react.default.createElement("title", null, "Unread notification bell"), /*#__PURE__*/_react.default.createElement("g", {
+    id: "Page-1",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    id: "Group",
+    transform: "translate(-1.000000, 0.000000)"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    id: "notification"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M17.9419375,12.058125 L16.25,10.3661875 L16.25,8.125 C16.245845,4.91692673 13.816599,2.23147626 10.625,1.90675 L10.625,0.625 L9.375,0.625 L9.375,1.90675 C6.183401,2.23147626 3.754155,4.91692673 3.75,8.125 L3.75,10.3661875 L2.0580625,12.058125 C1.94086706,12.1753182 1.875,12.3342622 1.875,12.5 L1.875,14.375 C1.875,14.720178 2.15482203,15 2.5,15 L6.875,15 L6.875,15.4855 C6.84694527,17.1272367 8.05869477,18.5271305 9.6875,18.7346875 C10.5660567,18.8218694 11.4405518,18.5337871 12.0952737,17.9415019 C12.7499955,17.3492167 13.1239886,16.5078712 13.125,15.625 L13.125,15 L17.5,15 C17.845178,15 18.125,14.720178 18.125,14.375 L18.125,12.5 C18.125,12.3342622 18.0591329,12.1753182 17.9419375,12.058125 Z M11.875,15.625 C11.875,16.6605339 11.0355339,17.5 10,17.5 C8.96446609,17.5 8.125,16.6605339 8.125,15.625 L8.125,15 L11.875,15 L11.875,15.625 Z M16.875,13.75 L3.125,13.75 L3.125,12.7588125 L4.816875,11.066875 C4.93409336,10.949692 4.9999646,10.7907468 5,10.625 L5,8.125 C5,5.36357625 7.23857625,3.125 10,3.125 C12.7614237,3.125 15,5.36357625 15,8.125 L15,10.625 C15.0000354,10.7907468 15.0659066,10.949692 15.183125,11.066875 L16.875,12.7588125 L16.875,13.75 Z",
+    id: "Shape",
+    fill: "#FFFFFF",
+    fillRule: "nonzero"
+  }), /*#__PURE__*/_react.default.createElement("rect", {
+    id: "_Transparent_Rectangle_",
+    x: "0",
+    y: "0",
+    width: "20",
+    height: "20"
+  })), /*#__PURE__*/_react.default.createElement("circle", {
+    id: "Oval",
+    stroke: "#161616",
+    fill: "#DA1E28",
+    cx: "15",
+    cy: "4.375",
+    r: "2.5"
+  }))));
+};
+
+exports.UnreadNotificationBell = UnreadNotificationBell;

package/lib/components/NotificationsPanel/utils.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.timeAgo = void 0;
+
+/**
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var timeAgo = function timeAgo(_ref) {
+  var previousTime = _ref.previousTime,
+      secondsAgoText = _ref.secondsAgoText,
+      minuteAgoText = _ref.minuteAgoText,
+      minutesAgoText = _ref.minutesAgoText,
+      hoursAgoText = _ref.hoursAgoText,
+      hourAgoText = _ref.hourAgoText,
+      daysAgoText = _ref.daysAgoText,
+      yesterdayAtText = _ref.yesterdayAtText,
+      monthsAgoText = _ref.monthsAgoText,
+      monthAgoText = _ref.monthAgoText,
+      yearsAgoText = _ref.yearsAgoText,
+      yearAgoText = _ref.yearAgoText,
+      nowText = _ref.nowText;
+  var msPerMinute = 60 * 1000;
+  var msPerHour = msPerMinute * 60;
+  var msPerDay = msPerHour * 24;
+  var msPerMonth = msPerDay * 30;
+  var msPerYear = msPerDay * 365;
+  var elapsed = new Date() - previousTime;
+
+  switch (true) {
+    case elapsed < msPerMinute:
+      return Math.round(elapsed / 1000) > 10 ? secondsAgoText(Math.round(elapsed / 1000)) : nowText;
+
+    case elapsed < msPerHour:
+      return Math.round(elapsed / msPerMinute) > 1 ? minutesAgoText(Math.round(elapsed / msPerMinute)) : minuteAgoText(Math.round(elapsed / msPerMinute));
+
+    case elapsed < msPerDay:
+      return Math.round(elapsed / msPerHour) > 1 ? hoursAgoText(Math.round(elapsed / msPerHour)) : hourAgoText(Math.round(elapsed / msPerHour));
+
+    case elapsed < msPerMonth:
+      return Math.round(elapsed / msPerDay) > 1 ? daysAgoText(Math.round(elapsed / msPerDay)) : yesterdayAtText(new Date(previousTime).toLocaleTimeString(getBrowserLocales[0]));
+
+    case elapsed < msPerYear:
+      return Math.round(elapsed / msPerMonth) > 1 ? monthsAgoText(Math.round(elapsed / msPerMonth)) : monthAgoText(Math.round(elapsed / msPerMonth));
+
+    default:
+      return Math.round(elapsed / msPerYear) > 1 ? yearsAgoText(Math.round(elapsed / msPerYear)) : yearAgoText(Math.round(elapsed / msPerYear));
+  }
+};
+
+exports.timeAgo = timeAgo;
+
+var getBrowserLocales = function getBrowserLocales() {
+  var browserLocales = navigator.languages === undefined ? [navigator.language, 'en'] // add fallback 'en' if we can't get locale value from browser
+  : navigator.languages;
+  return browserLocales.map(function (locale) {
+    var trimmedLocale = locale.trim();
+    return trimmedLocale;
+  });
+};

package/lib/components/OptionsTile/OptionsTile.js

@@ -0,0 +1,327 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OptionsTile = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _devtools = require("../../global/js/utils/devtools");
+
+var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
+
+var _settings = require("../../settings");
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+var _iconsReact = require("@carbon/icons-react");
+
+var carbonMotion = _interopRequireWildcard(require("@carbon/motion"));
+
+var _excluded = ["children", "className", "enabled", "heading", "headingId", "invalid", "invalidText", "locked", "lockedText", "onToggle", "size", "summary", "warn", "warnText"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(_settings.pkg.prefix, "--options-tile");
+var componentName = 'OptionsTile'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
+
+/**
+ * TODO: A description of the component.
+ */
+
+var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      enabled = _ref.enabled,
+      heading = _ref.heading,
+      userDefinedHeadingId = _ref.headingId,
+      invalid = _ref.invalid,
+      invalidText = _ref.invalidText,
+      locked = _ref.locked,
+      lockedText = _ref.lockedText,
+      onToggle = _ref.onToggle,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'xl' : _ref$size,
+      summary = _ref.summary,
+      warn = _ref.warn,
+      warnText = _ref.warnText,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      closing = _useState4[0],
+      setClosing = _useState4[1];
+
+  var detailsRef = (0, _react.useRef)(null);
+  var contentRef = (0, _react.useRef)(null);
+  var id = (0, _uuidv.default)();
+  var headingId = userDefinedHeadingId !== null && userDefinedHeadingId !== void 0 ? userDefinedHeadingId : "".concat(id, "-heading");
+  var isExpandable = children !== undefined;
+  var isInvalid = invalid;
+  var isWarn = !isInvalid && warn;
+  var isLocked = !isInvalid && !isWarn && locked;
+  var reducedMotion = window && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
+    matches: true
+  };
+
+  function expand() {
+    if (detailsRef.current && contentRef.current && !reducedMotion.matches) {
+      setOpen(true);
+      detailsRef.current.open = true;
+
+      var _getComputedStyle = getComputedStyle(contentRef.current),
+          paddingTop = _getComputedStyle.paddingTop,
+          paddingBottom = _getComputedStyle.paddingBottom,
+          height = _getComputedStyle.height;
+
+      contentRef.current.animate([{
+        paddingTop: 0,
+        paddingBottom: 0,
+        height: 0,
+        opacity: 0,
+        overflow: 'hidden'
+      }, {
+        paddingTop: paddingTop,
+        paddingBottom: paddingBottom,
+        height: height,
+        opacity: 1,
+        overflow: 'hidden'
+      }], {
+        duration: Number(carbonMotion.moderate01.replace('ms', '')),
+        easing: carbonMotion.easings.entrance.productive
+      });
+    } else {
+      // in case the refs are not set or the user prefers reduced motion, skip the animation
+      setOpen(true);
+    }
+  }
+
+  function collapse() {
+    if (contentRef.current && !reducedMotion.matches) {
+      setClosing(true);
+
+      var _getComputedStyle2 = getComputedStyle(contentRef.current),
+          paddingTop = _getComputedStyle2.paddingTop,
+          paddingBottom = _getComputedStyle2.paddingBottom,
+          height = _getComputedStyle2.height;
+
+      var animation = contentRef.current.animate([{
+        paddingTop: paddingTop,
+        paddingBottom: paddingBottom,
+        height: height,
+        opacity: 1
+      }, {
+        paddingTop: 0,
+        paddingBottom: 0,
+        height: 0,
+        opacity: 0
+      }], {
+        duration: Number(carbonMotion.moderate01.replace('ms', '')),
+        easing: carbonMotion.easings.entrance.productive
+      });
+
+      var callback = function callback() {
+        setOpen(false);
+        setClosing(false);
+      };
+
+      animation.onfinish = callback;
+      animation.oncancel = callback;
+    } else {
+      // in case the ref is not set or the user prefers reduced motion, skip the animation
+      setOpen(false);
+    }
+  }
+
+  function toggle(e) {
+    e.preventDefault();
+
+    if (open) {
+      collapse();
+    } else {
+      expand();
+    }
+  }
+
+  function renderTitle() {
+    var Icon = null;
+    var text = summary;
+    var summaryClasses = ["".concat(blockClass, "__summary")];
+
+    if (invalid) {
+      Icon = _iconsReact.WarningFilled16;
+      text = invalidText;
+      summaryClasses.push("".concat(blockClass, "__summary--invalid"));
+    } else if (warn) {
+      Icon = _iconsReact.WarningAltFilled16;
+      text = warnText;
+      summaryClasses.push("".concat(blockClass, "__summary--warn"));
+    } else if (locked) {
+      Icon = _iconsReact.Locked16;
+      summaryClasses.push("".concat(blockClass, "__summary--locked"));
+    }
+
+    var summaryHidden = enabled === false;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(blockClass, "__title")
+    }, /*#__PURE__*/_react.default.createElement("h6", {
+      id: headingId,
+      className: "".concat(blockClass, "__heading")
+    }, heading), text && /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _classnames.default)(summaryClasses),
+      "aria-hidden": summaryHidden
+    }, Icon && /*#__PURE__*/_react.default.createElement(Icon, null), /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(blockClass, "__summary-text")
+    }, text)));
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
+    className: (0, _classnames.default)(blockClass, // Apply the block class to the main HTML element
+    className, // Apply any supplied class names to the main HTML element.
+    "".concat(blockClass, "--").concat(size), (0, _defineProperty2.default)({}, "".concat(blockClass, "--closing"), closing)),
+    ref: ref
+  }, (0, _devtools.getDevtoolsProps)(componentName)), enabled !== undefined && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__toggle-container")
+  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Toggle, {
+    id: "".concat(id, "-toggle"),
+    className: "".concat(blockClass, "__toggle"),
+    toggled: enabled,
+    labelA: "",
+    labelB: "",
+    "aria-labelledby": headingId,
+    onToggle: onToggle,
+    size: "sm",
+    disabled: isLocked
+  })), isExpandable ? /*#__PURE__*/_react.default.createElement("details", {
+    open: open,
+    ref: detailsRef
+  }, /*#__PURE__*/_react.default.createElement("summary", {
+    className: "".concat(blockClass, "__header"),
+    onClick: toggle
+  }, /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronDown16, {
+    className: "".concat(blockClass, "__chevron")
+  }), renderTitle()), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__content"),
+    ref: contentRef
+  }, isLocked && /*#__PURE__*/_react.default.createElement("p", {
+    className: "".concat(blockClass, "__locked-text")
+  }, /*#__PURE__*/_react.default.createElement(_iconsReact.Locked16, null), lockedText), children)) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__static-content")
+  }, renderTitle()));
+}); // Return a placeholder if not released and not enabled by feature flag
+
+
+exports.OptionsTile = OptionsTile;
+exports.OptionsTile = OptionsTile = _settings.pkg.checkComponentEnabled(OptionsTile, componentName); // The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+
+OptionsTile.displayName = componentName; // The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+
+OptionsTile.propTypes = {
+  /**
+   * Provide content to render as expandable OptionsTile. If no children
+   * are present, the OptionsTile will render as its variant.
+   */
+  children: _propTypes.default.node,
+
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * Whether the toggle is enabled or disabled. If nothing is passed,
+   * no toggle will be rendered.
+   */
+  enabled: _propTypes.default.bool,
+
+  /**
+   * Provide the heading for this OptionsTile.
+   */
+  heading: _propTypes.default.string.isRequired,
+
+  /**
+   * Optionally provide an id which should be used for the heading.
+   */
+  headingId: _propTypes.default.string,
+
+  /**
+   * Whether the OptionsTile is in invalid validation state.
+   */
+  invalid: _propTypes.default.bool,
+
+  /**
+   * Provide a text explaining why the OptionsTile is in invalid state.
+   */
+  invalidText: _propTypes.default.string,
+
+  /**
+   * Whether the OptionsTile is in locked validation state.
+   */
+  locked: _propTypes.default.bool,
+
+  /**
+   * Provide a text explaining why the OptionsTile is in locked state.
+   */
+  lockedText: _propTypes.default.string,
+
+  /**
+   * Provide a function which will be called each time the user
+   * interacts with the toggle.
+   */
+  onToggle: _propTypes.default.func,
+
+  /**
+   * Define the size of the OptionsTile.
+   */
+  size: _propTypes.default.oneOf(['lg', 'xl']),
+
+  /**
+   * Optionally provide a text summarizing the current state of the content.
+   */
+  summary: _propTypes.default.string,
+
+  /**
+   * Whether the OptionsTile is in warning validation state.
+   */
+  warn: _propTypes.default.bool,
+
+  /**
+   * Provide a text explaining why the OptionsTile is in warning state.
+   */
+  warnText: _propTypes.default.string
+}; // Default values for component props. Default values are not required for
+// props that are required, nor for props where the component can apply
+// 'undefined' values reasonably. Default values should be provided when the
+// component needs to make a choice or assumption when a prop is not supplied.
+
+OptionsTile.defaultProps = {
+  size: 'xl'
+};

package/lib/components/OptionsTile/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OptionsTile", {
+  enumerable: true,
+  get: function get() {
+    return _OptionsTile.OptionsTile;
+  }
+});
+
+var _OptionsTile = require("./OptionsTile");