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

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

@@ -0,0 +1,49 @@
+/**
+ * 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.
+ */
+import React from 'react';
+
+var UnreadNotificationBell = function UnreadNotificationBell() {
+  return /*#__PURE__*/React.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.createElement("title", null, "Unread notification bell"), /*#__PURE__*/React.createElement("g", {
+    id: "Page-1",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "Group",
+    transform: "translate(-1.000000, 0.000000)"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "notification"
+  }, /*#__PURE__*/React.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.createElement("rect", {
+    id: "_Transparent_Rectangle_",
+    x: "0",
+    y: "0",
+    width: "20",
+    height: "20"
+  })), /*#__PURE__*/React.createElement("circle", {
+    id: "Oval",
+    stroke: "#161616",
+    fill: "#DA1E28",
+    cx: "15",
+    cy: "4.375",
+    r: "2.5"
+  }))));
+};
+
+export { UnreadNotificationBell };

package/es/components/NotificationsPanel/utils.js

@@ -0,0 +1,56 @@
+/**
+ * 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.
+ */
+export 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));
+  }
+};
+
+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/es/components/OptionsTile/OptionsTile.js

@@ -0,0 +1,306 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "className", "enabled", "heading", "headingId", "invalid", "invalidText", "locked", "lockedText", "onToggle", "size", "summary", "warn", "warnText"];
+
+/**
+ * Copyright IBM Corp. 2021, 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.
+ */
+// Import portions of React that are needed.
+import React, { useState, useRef } from 'react'; // Other standard imports.
+
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import uuidv4 from '../../global/js/utils/uuidv4';
+import { pkg } from '../../settings'; // Carbon and package components we use.
+
+import { Toggle } from 'carbon-components-react';
+import { ChevronDown16, Locked16, WarningAltFilled16, WarningFilled16 } from '@carbon/icons-react';
+import * as carbonMotion from '@carbon/motion'; // The block part of our conventional BEM class names (blockClass__E--M).
+
+var blockClass = "".concat(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.
+ */
+
+export var OptionsTile = /*#__PURE__*/React.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 = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      closing = _useState4[0],
+      setClosing = _useState4[1];
+
+  var detailsRef = useRef(null);
+  var contentRef = useRef(null);
+  var id = uuidv4();
+  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 = WarningFilled16;
+      text = invalidText;
+      summaryClasses.push("".concat(blockClass, "__summary--invalid"));
+    } else if (warn) {
+      Icon = WarningAltFilled16;
+      text = warnText;
+      summaryClasses.push("".concat(blockClass, "__summary--warn"));
+    } else if (locked) {
+      Icon = Locked16;
+      summaryClasses.push("".concat(blockClass, "__summary--locked"));
+    }
+
+    var summaryHidden = enabled === false;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "__title")
+    }, /*#__PURE__*/React.createElement("h6", {
+      id: headingId,
+      className: "".concat(blockClass, "__heading")
+    }, heading), text && /*#__PURE__*/React.createElement("span", {
+      className: cx(summaryClasses),
+      "aria-hidden": summaryHidden
+    }, Icon && /*#__PURE__*/React.createElement(Icon, null), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(blockClass, "__summary-text")
+    }, text)));
+  }
+
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: cx(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), _defineProperty({}, "".concat(blockClass, "--closing"), closing)),
+    ref: ref
+  }, getDevtoolsProps(componentName)), enabled !== undefined && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__toggle-container")
+  }, /*#__PURE__*/React.createElement(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.createElement("details", {
+    open: open,
+    ref: detailsRef
+  }, /*#__PURE__*/React.createElement("summary", {
+    className: "".concat(blockClass, "__header"),
+    onClick: toggle
+  }, /*#__PURE__*/React.createElement(ChevronDown16, {
+    className: "".concat(blockClass, "__chevron")
+  }), renderTitle()), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__content"),
+    ref: contentRef
+  }, isLocked && /*#__PURE__*/React.createElement("p", {
+    className: "".concat(blockClass, "__locked-text")
+  }, /*#__PURE__*/React.createElement(Locked16, null), lockedText), children)) : /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__static-content")
+  }, renderTitle()));
+}); // Return a placeholder if not released and not enabled by feature flag
+
+OptionsTile = 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.node,
+
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Whether the toggle is enabled or disabled. If nothing is passed,
+   * no toggle will be rendered.
+   */
+  enabled: PropTypes.bool,
+
+  /**
+   * Provide the heading for this OptionsTile.
+   */
+  heading: PropTypes.string.isRequired,
+
+  /**
+   * Optionally provide an id which should be used for the heading.
+   */
+  headingId: PropTypes.string,
+
+  /**
+   * Whether the OptionsTile is in invalid validation state.
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Provide a text explaining why the OptionsTile is in invalid state.
+   */
+  invalidText: PropTypes.string,
+
+  /**
+   * Whether the OptionsTile is in locked validation state.
+   */
+  locked: PropTypes.bool,
+
+  /**
+   * Provide a text explaining why the OptionsTile is in locked state.
+   */
+  lockedText: PropTypes.string,
+
+  /**
+   * Provide a function which will be called each time the user
+   * interacts with the toggle.
+   */
+  onToggle: PropTypes.func,
+
+  /**
+   * Define the size of the OptionsTile.
+   */
+  size: PropTypes.oneOf(['lg', 'xl']),
+
+  /**
+   * Optionally provide a text summarizing the current state of the content.
+   */
+  summary: PropTypes.string,
+
+  /**
+   * Whether the OptionsTile is in warning validation state.
+   */
+  warn: PropTypes.bool,
+
+  /**
+   * Provide a text explaining why the OptionsTile is in warning state.
+   */
+  warnText: PropTypes.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/es/components/OptionsTile/index.js

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2021, 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.
+ */
+export { OptionsTile } from './OptionsTile';