@enact/limestone 1.3.0

package/QuickGuidePanels/tests/QuickGuidePanels-specs.js

@@ -0,0 +1,250 @@
+"use strict";
+
+var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _ = require("../");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+describe('QuickGuidePanels Specs', function () {
+  test('should hide next button on the last view', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.QuickGuidePanels, {
+      index: 2,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "I got contents"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "I got contents2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "Last!"
+      })]
+    }));
+    var buttons = _react.screen.getAllByRole('button');
+    var expected = 2;
+    var actual = buttons.length;
+    expect(actual).toBe(expected);
+    expect(buttons[0]).toHaveAttribute('aria-label', 'Exit Quick Guide');
+    expect(buttons[1]).toHaveAttribute('aria-label', 'Previous');
+  });
+  test('should hide previous button on the first view', /*#__PURE__*/_asyncToGenerator(function* () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.QuickGuidePanels, {
+      index: 0,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "I got contents"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "I got contents2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "Last!"
+      })]
+    }));
+    var buttons = _react.screen.getAllByRole('button');
+    var expected = 2;
+    var actual = buttons.length;
+    expect(actual).toBe(expected);
+    expect(buttons[0]).toHaveAttribute('aria-label', 'Exit Quick Guide');
+    expect(buttons[1]).toHaveAttribute('aria-label', 'Next');
+  }));
+  test('should show next button on the first view', /*#__PURE__*/_asyncToGenerator(function* () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.QuickGuidePanels, {
+      index: 0,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "I got contents"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "I got contents2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "Last!"
+      })]
+    }));
+    var nextButton = _react.screen.getByLabelText('Next');
+    yield (0, _react.waitFor)(function () {
+      expect(nextButton).toBeInTheDocument();
+    });
+  }));
+  test('should fire `onWillTransition` with target index and type in pointer mode', /*#__PURE__*/_asyncToGenerator(function* () {
+    var spy = jest.fn();
+    var index = 0;
+    var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.QuickGuidePanels, {
+        index: index,
+        onWillTransition: spy,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+          children: "I got contents"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+          children: "I got contents2"
+        })]
+      })),
+      rerender = _render.rerender;
+    spy.mockClear();
+    index++;
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.QuickGuidePanels, {
+      index: index,
+      onWillTransition: spy,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "I got contents"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "I got contents2"
+      })]
+    }));
+    var expected = {
+      index: index,
+      type: 'onWillTransition'
+    };
+    var actual = spy.mock.calls.length && spy.mock.calls[0][0];
+    yield (0, _react.waitFor)(function () {
+      expect(actual).toMatchObject(expected);
+    });
+  }));
+  test('should fire `onWillTransition` with target index and type in 5-way mode', /*#__PURE__*/_asyncToGenerator(function* () {
+    _spotlight["default"].setPointerMode(false);
+    var spy = jest.fn();
+    var index = 0;
+    var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.QuickGuidePanels, {
+        index: index,
+        onWillTransition: spy,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+          children: "I got contents"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+          children: "I got contents2"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+          children: "I got contents3"
+        })]
+      })),
+      rerender = _render2.rerender;
+    spy.mockClear();
+    var nextButton = _react.screen.getByLabelText('Next');
+    _spotlight["default"].focus(nextButton);
+    index++;
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.QuickGuidePanels, {
+      index: index,
+      onWillTransition: spy,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "I got contents"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "I got contents2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "I got contents3"
+      })]
+    }));
+    var expected = {
+      index: index,
+      type: 'onWillTransition'
+    };
+    var actual = spy.mock.calls.length && spy.mock.calls[0][0];
+    yield (0, _react.waitFor)(function () {
+      expect(actual).toMatchObject(expected);
+    });
+  }));
+  test('should fire `onTransition` with target index and type', /*#__PURE__*/_asyncToGenerator(function* () {
+    var spy = jest.fn();
+    var index = 0;
+    var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.QuickGuidePanels, {
+        index: index,
+        onTransition: spy,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+          children: "I got contents"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+          children: "I got contents2"
+        })]
+      })),
+      rerender = _render3.rerender;
+    spy.mockClear();
+    index++;
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.QuickGuidePanels, {
+      index: index,
+      onTransition: spy,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "I got contents"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "I got contents2"
+      })]
+    }));
+    var expected = {
+      index: index,
+      type: 'onTransition'
+    };
+    var actual = spy.mock.calls.length && spy.mock.calls[0][0];
+    yield (0, _react.waitFor)(function () {
+      expect(actual).toMatchObject(expected);
+    });
+  }));
+  test('should fire `onNextClick` and `onChange` with type when go to the next panel', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleChange = jest.fn();
+    var handleNextClick = jest.fn();
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.QuickGuidePanels, {
+      index: 1,
+      onChange: handleChange,
+      onNextClick: handleNextClick,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})]
+    }));
+    var nextButton = _react.screen.getByLabelText('Next');
+    var expected = {
+      type: 'onNextClick'
+    };
+    yield user.click(nextButton);
+    yield (0, _react.waitFor)(function () {
+      expect(handleChange).toHaveBeenCalledWith({
+        index: 2,
+        type: 'onChange'
+      });
+    });
+    yield (0, _react.waitFor)(function () {
+      var actual = handleNextClick.mock.calls.length && handleNextClick.mock.calls[0][0];
+      expect(actual).toMatchObject(expected);
+    });
+  }));
+  test('should fire `onPrevClick` and `onChange` with type when go to the previous panel', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleChange = jest.fn();
+    var handlePrevClick = jest.fn();
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.QuickGuidePanels, {
+      index: 2,
+      onChange: handleChange,
+      onPrevClick: handlePrevClick,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})]
+    }));
+    var prevButton = _react.screen.getByLabelText('Previous');
+    var expected = {
+      type: 'onPrevClick'
+    };
+    yield user.click(prevButton);
+    yield (0, _react.waitFor)(function () {
+      expect(handleChange).toHaveBeenCalledWith({
+        index: 1,
+        type: 'onChange'
+      });
+    });
+    yield (0, _react.waitFor)(function () {
+      var actual = handlePrevClick.mock.calls.length && handlePrevClick.mock.calls[0][0];
+      expect(actual).toMatchObject(expected);
+    });
+  }));
+  test('should return a ref to the root Panel node', function () {
+    var ref = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.QuickGuidePanels, {
+      ref: ref,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})
+    }));
+    var expected = 'ARTICLE';
+    var actual = ref.mock.calls[0][0].nodeName;
+    expect(actual).toBe(expected);
+  });
+  test('should fire `onClose` when close button is clicked', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleClose = jest.fn();
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.QuickGuidePanels, {
+      onClose: handleClose,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})
+    }));
+    var closeButton = _react.screen.getByLabelText('Exit Quick Guide');
+    var expected = {
+      type: 'onClose'
+    };
+    yield user.click(closeButton);
+    yield (0, _react.waitFor)(function () {
+      var actual = handleClose.mock.calls.length && handleClose.mock.calls[0][0];
+      expect(actual).toMatchObject(expected);
+    });
+  }));
+});

package/README.md

@@ -0,0 +1,59 @@
+# @enact/limestone [![npm (scoped)](https://img.shields.io/npm/v/@enact/limestone.svg?style=flat-square)](https://www.npmjs.com/package/@enact/limestone)
+
+The set of components for an Enact-based application targeting smart TVs.
+
+<!--
+TODO
+Insert Limestone settings app image here
+-->
+
+## Usage
+
+```
+import kind from '@enact/core/kind';
+import Button from '@enact/limestone/Button';
+import ThemeDecorator from '@enact/limestone/ThemeDecorator';
+import React from 'react';
+
+const MyApp = kind({
+	name: 'MyApp',
+	render: () => (<Button>Hello, Enact!</Button>)
+});
+
+const MyLimestoneApp = ThemeDecorator(MyApp);
+
+export default MyLimestoneApp;
+```
+
+> Note: The `@enact/limestone/ThemeDecorator` must be applied to the base component. This decorator also applies
+`@enact/i18n/I18nDecorator`, `@enact/spotlight` and `@enact/ui/resolution` decorators.
+
+## Install
+
+```
+npm install --save @enact/limestone
+```
+
+## Test
+
+Unit tests are implemented in Testing Library and are run with Jest. To execute them:
+
+```
+npm test
+```
+
+## Links
+* [Limestone API Docs](https://enactjs.com/docs/modules/limestone/ActionGuide/)
+* [Limestone Component Sampler](https://enactjs.com/sampler)
+
+## Copyright and License Information
+
+Unless otherwise specified, all content, including all source code files and documentation files in this repository are:
+
+Copyright (c) 2012-2025 LG Electronics
+
+Unless otherwise specified or set forth in the NOTICE file, all content, including all source code files and documentation files in this repository are: Licensed under the Apache License, Version 2.0 (the "License"); you may not use this content except in compliance with the License. You may obtain a copy of the License at
+
+https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

package/RadioItem/RadioItem.d.ts

@@ -0,0 +1,59 @@
+// Type definitions for limestone/RadioItem
+
+import { ToggleableProps as ui_Toggleable_ToggleableProps } from "@enact/ui/Toggleable";
+import { ItemProps as limestone_Item_ItemProps } from "limestone/Item";
+import * as React from "react";
+
+type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
+
+export interface RadioItemBaseProps extends limestone_Item_ItemProps {}
+/**
+ * An item component with a radio toggle icon.
+ * 
+ * This component is most often not used directly but may be composed within another component as it
+is within   .
+ */
+
+export class RadioItemBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, RadioItemBaseProps>
+> {}
+
+export interface RadioItemProps
+  extends Merge<RadioItemBaseProps, RadioItemDecoratorProps> {
+  /**
+ * Customizes the component by mapping the supplied collection of CSS class names to the
+corresponding internal elements and states of this component.
+ * 
+ * The following classes are supported:
+ * *  `radioItem`  - The root class name
+ */
+  css?: object;
+  /**
+   * The icon to display when selected.
+   */
+  icon?: string;
+  /**
+   * If true it will be selected.
+   */
+  selected?: boolean;
+  /**
+   * Nodes to be inserted after the radio button and before  `children` .
+   */
+  slotBefore?: React.ReactNode;
+}
+/**
+ * Renders an  `Item`  with a radio-dot component. Useful to show a selected state on an Item.
+ */
+
+export class RadioItem extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, RadioItemProps>
+> {}
+
+export interface RadioItemDecoratorProps
+  extends ui_Toggleable_ToggleableProps {}
+export function RadioItemDecorator<P>(
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & RadioItemDecoratorProps>;
+
+export default RadioItem;

package/RadioItem/RadioItem.js

@@ -0,0 +1,146 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.RadioItemDecorator = exports.RadioItemBase = exports.RadioItem = void 0;
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _Pure = _interopRequireDefault(require("@enact/ui/internal/Pure"));
+var _Slottable = _interopRequireDefault(require("@enact/ui/Slottable"));
+var _Toggleable = _interopRequireDefault(require("@enact/ui/Toggleable"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _compose = _interopRequireDefault(require("ramda/src/compose"));
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _Item = require("../Item");
+var _RadioItemModule = _interopRequireDefault(require("./RadioItem.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children", "css", "icon", "selected", "slotBefore"];
+/**
+ * Provides a Limestone-themed Item component with an interactive radio toggle icon.
+ *
+ * @example
+ * <RadioItem>Item</RadioItem>
+ *
+ * @module limestone/RadioItem
+ * @exports RadioItem
+ * @exports RadioItemBase
+ */
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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 Item = (0, _Item.ItemDecorator)(_Item.ItemBase);
+
+/**
+ * An item component with a radio toggle icon.
+ *
+ * This component is most often not used directly but may be composed within another component as it
+ * is within {@link limestone/RadioItem.RadioItem|RadioItem}.
+ *
+ * @class RadioItemBase
+ * @memberof limestone/RadioItem
+ * @extends limestone/Item.Item
+ * @ui
+ * @public
+ */
+var RadioItemBase = exports.RadioItemBase = (0, _kind["default"])({
+  name: 'RadioItem',
+  propTypes: /** @lends limestone/RadioItem.RadioItem.prototype */{
+    /**
+     * Customizes the component by mapping the supplied collection of CSS class names to the
+     * corresponding internal elements and states of this component.
+     *
+     * The following classes are supported:
+     *
+     * * `radioItem` - The root class name
+     *
+     * @type {Object}
+     * @public
+     */
+    css: _propTypes["default"].object,
+    /**
+     * The icon to display when selected.
+     *
+     * @type {String}
+     * @default 'circle'
+     * @see {@link limestone/Icon.Icon}
+     */
+    icon: _propTypes["default"].string,
+    /**
+     * If true it will be selected.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    selected: _propTypes["default"].bool,
+    /**
+     * Nodes to be inserted after the radio button and before `children`.
+     *
+     * @type {Node}
+     * @public
+     */
+    slotBefore: _propTypes["default"].node
+  },
+  defaultProps: {
+    icon: 'circle'
+  },
+  styles: {
+    css: _RadioItemModule["default"],
+    className: 'radioItem',
+    publicClassNames: ['radioItem']
+  },
+  render: function render(_ref) {
+    var children = _ref.children,
+      css = _ref.css,
+      icon = _ref.icon,
+      selected = _ref.selected,
+      slotBefore = _ref.slotBefore,
+      rest = _objectWithoutProperties(_ref, _excluded);
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Item, _objectSpread(_objectSpread({
+      "data-webos-voice-intent": "SelectRadioItem",
+      role: "checkbox"
+    }, rest), {}, {
+      "aria-checked": selected,
+      css: css,
+      selected: selected,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("slotBefore", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], {
+          className: css.icon,
+          size: "tiny",
+          children: icon
+        }), slotBefore]
+      }), children]
+    }));
+  }
+});
+
+/**
+ * Limestone specific behaviors to apply to {@link limestone/RadioItem.RadioItemBase|RadioItem}.
+ *
+ * @hoc
+ * @memberof limestone/RadioItem
+ * @mixes ui/Toggleable.Toggleable
+ * @public
+ */
+var RadioItemDecorator = exports.RadioItemDecorator = (0, _compose["default"])((0, _Toggleable["default"])({
+  toggleProp: 'onClick'
+}), (0, _Slottable["default"])({
+  slots: ['label', 'slotAfter', 'slotBefore']
+}));
+
+/**
+ * Renders an `Item` with a radio-dot component. Useful to show a selected state on an Item.
+ *
+ * @class RadioItem
+ * @memberof limestone/RadioItem
+ * @extends limestone/RadioItem.RadioItemBase
+ * @mixes limestone/RadioItem.RadioItemDecorator
+ * @ui
+ * @public
+ */
+var RadioItem = exports.RadioItem = (0, _Pure["default"])(RadioItemDecorator(RadioItemBase));
+var _default = exports["default"] = RadioItem;