@enact/limestone 1.3.0

package/QuickGuidePanels/QuickGuidePanels.js

@@ -0,0 +1,463 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.QuickGuidePanelsDecorator = exports.QuickGuidePanelsBase = exports.QuickGuidePanels = void 0;
+var _handle = _interopRequireWildcard(require("@enact/core/handle"));
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
+var _I18nDecorator = require("@enact/i18n/I18nDecorator");
+var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
+var _SpotlightContainerDecorator = _interopRequireWildcard(require("@enact/spotlight/SpotlightContainerDecorator"));
+var _Layout = require("@enact/ui/Layout");
+var _Changeable = _interopRequireDefault(require("@enact/ui/Changeable"));
+var _ForwardRef = _interopRequireDefault(require("@enact/ui/ForwardRef"));
+var _ViewManager = _interopRequireDefault(require("@enact/ui/ViewManager"));
+var _IString = _interopRequireDefault(require("ilib/lib/IString"));
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
+var _compose = _interopRequireDefault(require("ramda/src/compose"));
+var _$L = _interopRequireDefault(require("../internal/$L"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _Panels = require("../internal/Panels");
+var _PanelsRouter = _interopRequireDefault(require("../internal/Panels/PanelsRouter"));
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _Steps = _interopRequireDefault(require("../Steps"));
+var _QuickGuidePanelsModule = _interopRequireDefault(require("./QuickGuidePanels.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children", "closeButton", "index", "nextNavigationButton", "onTransition", "onWillTransition", "prevNavigationButton", "stepHintAriaLabel", "steps"];
+/**
+ * A QuickGuidePanels that has steps with corresponding panels and panels have full screen size content.
+ *
+ * @example
+ * 	<QuickGuidePanels>
+ *		<QuickGuidePanels.Panel>
+ *			QuickGuidePanelsContent
+ *		</QuickGuidePanels.Panel>
+ *	</QuickGuidePanels>
+ *
+ * @class QuickGuidePanelsBase
+ * @memberof limestone/QuickGuidePanels
+ * @ui
+ * @public
+ */
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var QuickGuidePanelsBase = exports.QuickGuidePanelsBase = (0, _kind["default"])({
+  name: 'QuickGuidePanels',
+  propTypes: /** @lends limestone/QuickGuidePanels.QuickGuidePanelsBase.prototype */{
+    /**
+     * The aria-label for the Panel.
+     *
+     * Example:
+    	 * ```
+     * <QuickGuidePanels.Panel aria-label="This is a description for panel">
+     * ```
+     * @type {String}
+     * @private
+     */
+    'aria-label': _propTypes2["default"].string,
+    /**
+     * Hint string read when focusing the close button.
+     *
+     * @type {String}
+     * @default 'Exit Quick Guide'
+     * @public
+     */
+    closeButtonAriaLabel: _propTypes2["default"].string,
+    /**
+     * Obtains a reference to the root node.
+     *
+     * @type {Function|Object}
+     * @public
+     */
+    componentRef: _propTypes["default"].ref,
+    /**
+     * The current step.
+     *
+     * This is 1-based, not 0-based; as in the first step is `1`. If omitted, this will equal
+     * the currently selected panel.
+     *
+     * @type {Number}
+     * @public
+     */
+    current: _propTypes2["default"].number,
+    /**
+    * The currently selected panel.
+    *
+    * @type {Number}
+    * @default 0
+    * @private
+    */
+    index: _propTypes2["default"].number,
+    /**
+     * The button to use in place of the standard next button.
+     *
+     * This prop accepts a component (e.g. `Button`), a component instance, or a boolean value.
+     *
+     * If `false`, the button will not show. If set to a component, or `true`, the button will
+     * show. This will override the setting of `nextButtonVisibility`.
+     *
+    	 * Example:
+    	 * ```
+     * nextButton={<Button icon="closex" aria-label="Quit">Close</Button>}
+     * ```
+     *
+     * @type {Boolean|Component}
+     * @private
+     */
+    nextButton: _propTypes2["default"].oneOfType([_propTypes2["default"].bool, _propTypes["default"].componentOverride]),
+    /**
+     * Specifies when and how to show `nextButton` on QuickGuidePanel.
+     *
+     * * `'auto'` will display the `nextButton` on every `QuickGuidePanels.Panel` except the last
+     * * `'always'` will always display the `nextButton`
+     * * `'never'` will always hide the `nextButton`
+     *
+     * Note, children values will override the generalized parent visibility settings. In this
+     * case, a customized `nextButton` on QuickGuidePanels.Panel will take precedence over the
+     * `nextButtonVisibility` value.
+     *
+     * @type {('auto'|'always'|'never')}
+     * @default 'auto'
+     * @public
+     */
+    nextButtonVisibility: _propTypes2["default"].oneOf(['auto', 'always', 'never']),
+    /**
+    * Called when the index value is changed.
+    *
+    * @type {Function}
+    * @param {Object} event
+    * @public
+    */
+    onChange: _propTypes2["default"].func,
+    /**
+     * Called when the close button is clicked.
+     *
+     * @type {Function}
+     * @public
+     */
+    onClose: _propTypes2["default"].func,
+    /**
+     * Called when the next button is clicked in QuickGuidePanel.
+     *
+     * Calling `preventDefault` on the passed event will prevent advancing to the next panel.
+     *
+     * @type {Function}
+     * @public
+     */
+    onNextClick: _propTypes2["default"].func,
+    /**
+     * Called when previous button is clicked in QuickGuidePanel.
+     *
+     * Calling `preventDefault` on the passed event will prevent navigation to the previous panel.
+     *
+     * @type {Function}
+     * @public
+     */
+    onPrevClick: _propTypes2["default"].func,
+    /**
+     * Called when a transition completes.
+     *
+     * @type {Function}
+     */
+    onTransition: _propTypes2["default"].func,
+    /**
+     * Called before a transition begins.
+     *
+     * @type {Function}
+     */
+    onWillTransition: _propTypes2["default"].func,
+    /**
+     * The button to use in place of the standard prev button.
+     *
+     * This prop accepts a component (e.g. `Button`), a component instance, or a boolean value.
+     *
+     * If `false`, the button will not show. If set to a component, or `true`, the button will
+     * show. This will override the setting of `prevButtonVisibility`.
+     *
+    	 * Example:
+    	 * ```
+     * prevButton={<Button icon="closex" aria-label="Back">Back</Button>}
+     * ```
+     *
+     * @type {Boolean|Component}
+     * @private
+     */
+    prevButton: _propTypes2["default"].oneOfType([_propTypes2["default"].bool, _propTypes["default"].componentOverride]),
+    /**
+     * Specifies when and how to show `prevButton` on QuickGuidePanel.
+     *
+     * * `'auto'` will display the `prevButton` on every `QuickGuidePanels.Panel` except the first
+     * * `'always'` will always display the `prevButton`
+     * * `'never'` will always hide the `prevButton`
+     *
+     * Note, children values will override the generalized parent visibility settings. In this case,
+     * if user provides a customized `prevButton` on QuickGuidePanels.Panel will take precedence over the `prevButtonVisibility` value.
+     *
+     * @type {('auto'|'always'|'never')}
+     * @default 'auto'
+     * @public
+     */
+    prevButtonVisibility: _propTypes2["default"].oneOf(['auto', 'always', 'never']),
+    /**
+     * The total number of steps.
+     *
+     * If omitted, this will equal the total number of Panels.
+     *
+     * @type {Number}
+     * @public
+     */
+    total: _propTypes2["default"].number,
+    /**
+    * The total panels in QuickGuidePanels.
+    *
+    * @type {Number}
+    * @private
+    */
+    totalPanels: _propTypes2["default"].number
+  },
+  defaultProps: {
+    index: 0,
+    nextButtonVisibility: 'auto',
+    prevButtonVisibility: 'auto'
+  },
+  styles: {
+    css: _QuickGuidePanelsModule["default"],
+    className: 'quickGuidePanels'
+  },
+  handlers: {
+    onClose: (0, _handle.forwardCustom)('onClose'),
+    onNextClick: (0, _handle["default"])((0, _handle.forwardCustomWithPrevent)('onNextClick'), function (ev, _ref) {
+      var spotlightId = _ref['data-spotlight-id'],
+        index = _ref.index,
+        onChange = _ref.onChange,
+        totalPanels = _ref.totalPanels;
+      _spotlight["default"].set(spotlightId, {
+        enterTo: 'last-focused'
+      });
+      if (onChange && index !== totalPanels) {
+        var nextIndex = index < totalPanels - 1 ? index + 1 : index;
+        onChange({
+          type: 'onChange',
+          index: nextIndex
+        });
+      }
+    }),
+    onPrevClick: (0, _handle["default"])((0, _handle.forwardCustomWithPrevent)('onPrevClick'), function (ev, _ref2) {
+      var index = _ref2.index,
+        onChange = _ref2.onChange;
+      if (onChange && index !== 0) {
+        var prevIndex = index > 0 ? index - 1 : index;
+        onChange({
+          type: 'onChange',
+          index: prevIndex
+        });
+      }
+    }),
+    onTransition: function onTransition(ev, _ref3) {
+      var index = _ref3.index,
+        _onTransition = _ref3.onTransition;
+      if (_onTransition) {
+        _onTransition({
+          type: 'onTransition',
+          index: index
+        });
+      }
+    },
+    onWillTransition: function onWillTransition(ev, _ref4) {
+      var index = _ref4.index,
+        _onWillTransition = _ref4.onWillTransition;
+      if (_onWillTransition) {
+        _onWillTransition({
+          type: 'onWillTransition',
+          index: index
+        });
+      }
+    }
+  },
+  computed: {
+    stepHintAriaLabel: function stepHintAriaLabel(_ref5) {
+      var label = _ref5['aria-label'],
+        current = _ref5.current,
+        index = _ref5.index,
+        totalPanels = _ref5.totalPanels;
+      var stepNum = typeof current === 'number' && current > 0 ? current : index + 1;
+      var step = new _IString["default"]((0, _$L["default"])('Page {current} out of {total}')).format({
+        current: stepNum,
+        total: totalPanels
+      }) + ' ';
+      return "".concat(step, " ").concat(label || '');
+    },
+    closeButton: function closeButton(_ref6) {
+      var closeButtonAriaLabel = _ref6.closeButtonAriaLabel,
+        onClose = _ref6.onClose,
+        totalPanels = _ref6.totalPanels;
+      return totalPanels ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+        "aria-label": closeButtonAriaLabel == null ? (0, _$L["default"])('Exit Quick Guide') : closeButtonAriaLabel,
+        className: _QuickGuidePanelsModule["default"].close,
+        icon: "closex",
+        onClick: onClose,
+        size: "small"
+      }) : null;
+    },
+    nextNavigationButton: function nextNavigationButton(_ref7) {
+      var index = _ref7.index,
+        nextButton = _ref7.nextButton,
+        nextButtonVisibility = _ref7.nextButtonVisibility,
+        onNextClick = _ref7.onNextClick,
+        totalPanels = _ref7.totalPanels;
+      var isNextButtonVisible = nextButtonVisibility === 'always' || nextButtonVisibility === 'auto' && index < totalPanels - 1;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panels.NavigationButton, {
+        "aria-label": (0, _$L["default"])('Next'),
+        backgroundOpacity: "transparent",
+        className: _QuickGuidePanelsModule["default"].navigationButton,
+        component: nextButton,
+        focusEffectIconOnly: true,
+        icon: "arrowlargeright",
+        iconFlip: "auto",
+        iconPosition: "after",
+        id: "nextButton",
+        minWidth: false,
+        onClick: onNextClick,
+        visible: isNextButtonVisible
+      });
+    },
+    prevNavigationButton: function prevNavigationButton(_ref8) {
+      var index = _ref8.index,
+        onPrevClick = _ref8.onPrevClick,
+        prevButton = _ref8.prevButton,
+        prevButtonVisibility = _ref8.prevButtonVisibility;
+      var isPrevButtonVisible = prevButtonVisibility === 'always' || prevButtonVisibility === 'auto' && index !== 0;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panels.NavigationButton, {
+        "aria-label": (0, _$L["default"])('Previous'),
+        backgroundOpacity: "transparent",
+        className: _QuickGuidePanelsModule["default"].navigationButton,
+        component: prevButton,
+        focusEffectIconOnly: true,
+        icon: "arrowlargeleft",
+        iconFlip: "auto",
+        minWidth: false,
+        onClick: onPrevClick,
+        visible: isPrevButtonVisible
+      });
+    },
+    steps: function steps(_ref9) {
+      var current = _ref9.current,
+        index = _ref9.index,
+        total = _ref9.total,
+        totalPanels = _ref9.totalPanels;
+      var currentStep = typeof current === 'number' && current > 0 ? current : index + 1;
+      var totalSteps = typeof total === 'number' && total > 0 ? total : totalPanels;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps["default"], {
+        css: _QuickGuidePanelsModule["default"],
+        current: currentStep,
+        highlightCurrentOnly: true,
+        total: totalSteps
+      });
+    }
+  },
+  render: function render(_ref0) {
+    var children = _ref0.children,
+      closeButton = _ref0.closeButton,
+      index = _ref0.index,
+      nextNavigationButton = _ref0.nextNavigationButton,
+      onTransition = _ref0.onTransition,
+      onWillTransition = _ref0.onWillTransition,
+      prevNavigationButton = _ref0.prevNavigationButton,
+      stepHintAriaLabel = _ref0.stepHintAriaLabel,
+      steps = _ref0.steps,
+      rest = _objectWithoutProperties(_ref0, _excluded);
+    delete rest['aria-label'];
+    delete rest.closeButtonAriaLabel;
+    delete rest.current;
+    delete rest.nextButton;
+    delete rest.nextButtonVisibility;
+    delete rest.onClose;
+    delete rest.onNextClick;
+    delete rest.onPrevClick;
+    delete rest.prevButton;
+    delete rest.prevButtonVisibility;
+    delete rest.total;
+    delete rest.totalPanels;
+    delete rest.hideChildren;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("article", {
+      role: "region",
+      "aria-labelledby": "quickguidepanel_index_".concat(index),
+      ref: rest.componentRef,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Column, _objectSpread(_objectSpread({
+        "aria-label": stepHintAriaLabel,
+        id: "quickguidepanel_index_".concat(index)
+      }, rest), {}, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Row, {
+          className: _QuickGuidePanelsModule["default"].contentHeader,
+          children: [steps, closeButton]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Row, {
+          className: _QuickGuidePanelsModule["default"].navigationButtonContainer,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+            shrink: true,
+            children: prevNavigationButton
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+            shrink: true,
+            children: nextNavigationButton
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ViewManager["default"], {
+          arranger: _Panels.BasicArranger,
+          duration: 400,
+          noAnimation: true,
+          onTransition: onTransition,
+          onWillTransition: onWillTransition,
+          children: children
+        })]
+      }))
+    });
+  }
+});
+var QuickGuidePanelsDecorator = exports.QuickGuidePanelsDecorator = (0, _compose["default"])((0, _ForwardRef["default"])({
+  prop: 'componentRef'
+}), (0, _Changeable["default"])({
+  prop: 'index'
+}), (0, _Panels.CancelDecorator)({
+  cancel: 'onChange',
+  shouldCancel: (0, _handle["default"])((0, _handle.forwardCustomWithPrevent)('onBack'), (0, _handle.not)((0, _handle.forProp)('noPrevButton', true)))
+}), (0, _SpotlightContainerDecorator["default"])({
+  continue5WayHold: true,
+  defaultElement: [".".concat(_SpotlightContainerDecorator.spotlightDefaultClass), 'header > *', "#nextButton", ".".concat(_QuickGuidePanelsModule["default"].close, " *")],
+  enterTo: 'default-element'
+}), (0, _I18nDecorator.I18nContextDecorator)({
+  rtlProp: 'rtl'
+}), (0, _PanelsRouter["default"])({
+  type: 'quickGuide'
+}), _Skinnable["default"]);
+
+/**
+ * A QuickGuidePanels that can step through different panels.
+ * Expects {@link limestone/QuickGuidePanels.Panel|Panel} as children.
+ *
+ * @class QuickGuidePanels
+ * @memberof limestone/QuickGuidePanels
+ * @extends limestone/QuickGuidePanels.QuickGuidePanelsBase
+ * @mixes ui/Changeable.Changeable
+ * @ui
+ * @public
+ */
+var QuickGuidePanels = exports.QuickGuidePanels = QuickGuidePanelsDecorator(QuickGuidePanelsBase);
+
+/**
+ * Called when the back button is pressed.
+ *
+ * If `ev.preventDefault` is called, `QuickGuidePanels` will not process the event further. If it is
+ * not called, the index of the panel will be decremented unless `noPrevButton` is set.
+ *
+ * @name onBack
+ * @memberof limestone/QuickGuidePanels.QuickGuidePanels.prototype
+ * @type {Function}
+ */
+var _default = exports["default"] = QuickGuidePanels;

package/QuickGuidePanels/QuickGuidePanels.module.css

@@ -0,0 +1,26 @@
+.quickGuidePanels .contentHeader {
+  z-index: 10;
+  flex-direction: row-reverse;
+}
+.quickGuidePanels .contentHeader .steps {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  margin-top: 1.875rem;
+  min-height: 1rem;
+}
+.quickGuidePanels .contentHeader .close {
+  position: absolute;
+  top: 2.24583rem;
+  margin-inline-end: 3.125rem;
+}
+.quickGuidePanels .navigationButtonContainer {
+  align-items: center;
+  height: 2.75rem;
+  margin-top: calc(100vh / 2 - 1.375rem );
+  z-index: 10;
+}
+.quickGuidePanels .navigationButtonContainer .navigationButton {
+  margin: 0 0.25rem;
+}

package/QuickGuidePanels/index.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Panel", {
+  enumerable: true,
+  get: function get() {
+    return _Panel.Panel;
+  }
+});
+Object.defineProperty(exports, "QuickGuidePanels", {
+  enumerable: true,
+  get: function get() {
+    return _QuickGuidePanels.QuickGuidePanels;
+  }
+});
+Object.defineProperty(exports, "QuickGuidePanelsBase", {
+  enumerable: true,
+  get: function get() {
+    return _QuickGuidePanels.QuickGuidePanelsBase;
+  }
+});
+exports["default"] = void 0;
+var _QuickGuidePanels = require("./QuickGuidePanels");
+var _Panel = require("./Panel");
+/**
+ * Provides a Limestone styled panels component for full screen size content panel with steps.
+ *
+ * Usage:
+ * ```
+ * <QuickGuidePanels>
+ *		<QuickGuidePanels.Panel aria-label="This is a description for panel">
+ *			QuickGuidePanelsContent
+ *		</QuickGuidePanels.Panel>
+ * </QuickGuidePanels>
+ * ```
+ * @module limestone/QuickGuidePanels
+ * @exports Panel
+ * @exports QuickGuidePanels
+ * @exports QuickGuidePanelsBase
+ */
+
+/**
+ * A shortcut to access {@link limestone/QuickGuidePanels.Panel}
+ *
+ * @name Panel
+ * @static
+ * @memberof limestone/QuickGuidePanels.QuickGuidePanels
+ */
+_QuickGuidePanels.QuickGuidePanels.Panel = _Panel.Panel;
+var _default = exports["default"] = _QuickGuidePanels.QuickGuidePanels;