@enact/limestone 1.3.0

package/Item/tests/Item-specs.js

@@ -0,0 +1,108 @@
+"use strict";
+
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _Item = require("../Item");
+var _jsxRuntime = require("react/jsx-runtime");
+describe('Item Specs', function () {
+  test('should support adding text as a child', function () {
+    var expected = 'Hello Item';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.ItemBase, {
+      children: expected
+    }));
+    var actual = _react.screen.getByText(expected);
+    expect(actual).toHaveTextContent(expected);
+  });
+  test('should support adding a `label`', function () {
+    var expected = 'Example Label';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.ItemBase, {
+      label: expected,
+      children: "Hello Item"
+    }));
+    var label = _react.screen.getByText(expected);
+    expect(label).toBeInTheDocument();
+  });
+  test('should support label with 0', function () {
+    var expected = '0';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.ItemBase, {
+      label: expected,
+      children: "Hello Item"
+    }));
+    var label = _react.screen.getByText(expected);
+    expect(label).toBeInTheDocument();
+  });
+  test('should support adding text as a child when a label is also set', function () {
+    var expected = 'Hello Item';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.ItemBase, {
+      label: "Example Label",
+      children: expected
+    }));
+    var actual = _react.screen.getByText(expected);
+    expect(actual).toBeInTheDocument();
+  });
+  test('should support `slotBefore`', function () {
+    var expected = 'slot before';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.ItemBase, {
+      slotBefore: expected,
+      children: "Hello Item"
+    }));
+    var actual = _react.screen.getByText(expected);
+    expect(actual).toBeInTheDocument();
+  });
+  test('should support `slotAfter`', function () {
+    var expected = 'slot after';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.ItemBase, {
+      slotAfter: expected,
+      children: "Hello Item"
+    }));
+    var actual = _react.screen.getByText(expected);
+    expect(actual).toBeInTheDocument();
+  });
+  test('should support repositioning of the label', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.ItemBase, {
+      "data-testid": "item",
+      labelPosition: "above",
+      label: "my label",
+      children: "Hello Item"
+    }));
+    var itemLabel = _react.screen.getByTestId('item').children.item(1);
+    expect(itemLabel).toHaveClass('labelAbove');
+  });
+  test('should not include the selected class when not selected', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.ItemBase, {
+      "data-testid": "item",
+      children: "Hello Item"
+    }));
+    var expected = 'selected';
+    var actual = _react.screen.getByTestId('item');
+    expect(actual).not.toHaveClass(expected);
+  });
+  test('should add the selected class when given the selected prop', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.ItemBase, {
+      "data-testid": "item",
+      selected: true,
+      children: "Hello Item"
+    }));
+    var expected = 'selected';
+    var actual = _react.screen.getByTestId('item');
+    expect(actual).toHaveClass(expected);
+  });
+  test('should have apply small class when small', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.ItemBase, {
+      "data-testid": "item",
+      size: "small"
+    }));
+    var expected = 'small';
+    var actual = _react.screen.getByTestId('item');
+    expect(actual).toHaveClass(expected);
+  });
+  test('should support RTL text', function () {
+    var text = 'Hello מצב תמונה';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.ItemBase, {
+      children: text
+    }));
+    var expected = 'rtl';
+    var actual = _react.screen.getByText(text).style;
+    expect(actual).toHaveProperty('direction', expected);
+  });
+});

package/KeyGuide/KeyGuide.d.ts

@@ -0,0 +1,103 @@
+// Type definitions for limestone/KeyGuide
+
+import { MarqueeControllerProps as limestone_Marquee_MarqueeControllerProps } from "limestone/Marquee";
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+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 KeyGuideBaseProps {
+  /**
+ * The direction of the arrow.
+If  `'none'` , no arrow is shown.
+ `'bottom'` ,  `'left'` ,  `'right'` , and  `'top'`  can be used to position the arrow.
+Arrow is only displayed in image-based guides.
+ */
+  arrowPosition?: string;
+  /**
+ * The items to be displayed in the  `KeyGuide`  when  `open` .
+ * 
+ * For icon-based guides, it takes an array of objects. The properties will be passed onto an  `Item`  component.
+The object requires  `children`  and a unique  `key`  property. If the  `icon`  property is one
+of  `'red'` ,  `'green'` ,  `'yellow'`  or ' `blue'` , a corresponding color bar is shown.
+ * 
+ * For image-based guides, it takes an object. The object requires  `children`  and  `imageSrc`  properties.
+The  `children`  property is the text to be displayed and the  `imageSrc`  property is the path to the image to display.
+ */
+  children?:
+    | {
+        children: string | React.ComponentType;
+        key: number | string;
+        icon: string | object | "red" | "green" | "yellow" | "blue";
+        [propName: string]: any;
+      }[]
+    | {
+        [
+          key: {
+            children: string | React.ComponentType;
+            imageSrc: string | object;
+            [propName: string]: any;
+          }
+        ]: any;
+      };
+  /**
+ * 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:
+ * *  `keyGuide`  - The root component class
+ * *  `imageGuide`  - Applied to an image-based keyGuide
+ */
+  css?: object;
+  /**
+   * Controls the visibility of the KeyGuide.
+   */
+  open?: boolean;
+}
+/**
+ * A Key Guide component.
+ * 
+ * This component is most often not used directly but may be composed within another component as it
+is within   .
+ */
+
+export class KeyGuideBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, KeyGuideBaseProps>
+> {}
+
+export interface KeyGuideDecoratorProps
+  extends Merge<
+    limestone_Marquee_MarqueeControllerProps,
+    limestone_Skinnable_SkinnableProps
+  > {}
+export function KeyGuideDecorator<P>(
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & KeyGuideDecoratorProps>;
+
+export interface KeyGuideProps
+  extends Merge<KeyGuideBaseProps, KeyGuideDecoratorProps> {}
+/**
+ * A Key Guide component, ready to use in Limestone applications.
+ * 
+ * `KeyGuide' may be used to display list of text with icons to describe key behavior.
+ * 
+ * Usage:
+ * ```
+<KeyGuide
+	open
+>
+	{[
+	{icon: 'star', children: 'start label', key: 1},
+	{icon: 'plus', children: 'plus label', key: 2},
+	{icon: 'minus', children: 'minus label', key: 3}
+]}
+</KeyGuide>
+```
+ */
+
+export class KeyGuide extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, KeyGuideProps>
+> {}
+
+export default KeyGuide;

package/KeyGuide/KeyGuide.js

@@ -0,0 +1,254 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.KeyGuideDecorator = exports.KeyGuideBase = exports.KeyGuide = void 0;
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
+var _FloatingLayer = _interopRequireDefault(require("@enact/ui/FloatingLayer"));
+var _Pure = _interopRequireDefault(require("@enact/ui/internal/Pure"));
+var _Layout = require("@enact/ui/Layout");
+var _Repeater = _interopRequireDefault(require("@enact/ui/Repeater"));
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
+var _compose = _interopRequireDefault(require("ramda/src/compose"));
+var _BodyText = _interopRequireDefault(require("../BodyText"));
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _Image = _interopRequireDefault(require("../Image"));
+var _Item = require("../Item");
+var _Marquee = require("../Marquee");
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _KeyGuideModule = _interopRequireDefault(require("./KeyGuide.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["icon"],
+  _excluded2 = ["className", "css", "children", "open"];
+/**
+ * Limestone styled key guide component and behaviors.
+ *
+ * @example
+ * <KeyGuide
+ *		open
+ * >
+ * 	{[
+ *		{icon: 'star', children: 'start label', key: 1},
+ *		{icon: 'plus', children: 'plus label', key: 2},
+ *		{icon: 'minus', children: 'minus label', key: 3}
+ *	]}
+ * </KeyGuide>
+ *
+ * @module limestone/KeyGuide
+ * @exports KeyGuide
+ * @exports KeyGuideBase
+ * @exports KeyGuideDecorator
+ */
+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 colorKeys = ['red', 'green', 'yellow', 'blue'];
+var ImageItemBase = function ImageItemBase(_ref) {
+  var children = _ref.children,
+    imageSrc = _ref.imageSrc;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Row, {
+    className: _KeyGuideModule["default"].imageItem,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+      shrink: true,
+      className: _KeyGuideModule["default"].image,
+      src: imageSrc,
+      component: _Image["default"]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+      shrink: false,
+      className: _KeyGuideModule["default"].text,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_BodyText["default"], {
+        className: _KeyGuideModule["default"].bodyText,
+        children: children
+      })
+    })]
+  });
+};
+ImageItemBase.propTypes = {
+  children: _propTypes2["default"].node,
+  imageSrc: _propTypes2["default"].string
+};
+
+/**
+ * A Key Guide component.
+ *
+ * This component is most often not used directly but may be composed within another component as it
+ * is within {@link limestone/KeyGuide.KeyGuide|KeyGuide}.
+ *
+ * @class KeyGuideBase
+ * @memberof limestone/KeyGuide
+ * @ui
+ * @public
+ */
+var KeyGuideBase = exports.KeyGuideBase = (0, _kind["default"])({
+  name: 'KeyGuide',
+  propTypes: /** @lends limestone/KeyGuide.KeyGuideBase.prototype */{
+    /**
+     * The direction of the arrow.
+     * If `'none'`, no arrow is shown.
+     * `'bottom'`, `'left'`, `'right'`, and `'top'` can be used to position the arrow.
+     * Arrow is only displayed in image-based guides.
+     *
+     * @type {String}
+     * @public
+     * @default 'none'
+     */
+    arrowPosition: _propTypes2["default"].oneOf(['bottom', 'left', 'right', 'top', 'none']),
+    /**
+     * The items to be displayed in the `KeyGuide` when `open`.
+     *
+     * For icon-based guides, it takes an array of objects. The properties will be passed onto an `Item` component.
+     * The object requires `children` and a unique `key` property. If the `icon` property is one
+     * of `'red'`, `'green'`, `'yellow'` or '`blue'`, a corresponding color bar is shown.
+     *
+     * For image-based guides, it takes an object. The object requires `children` and `imageSrc` properties.
+     * The `children` property is the text to be displayed and the `imageSrc` property is the path to the image to display.
+    	 * @type {Array.<{children: (String|Component), key: (Number|String), icon: (String|Object|'red'|'green'|'yellow'|'blue')}>|Object.<{children: (String|Component), imageSrc: (String|Object)}>}
+     * @public
+     */
+    children: _propTypes2["default"].arrayOf(_propTypes2["default"].shape({
+      children: _propTypes["default"].renderable.isRequired,
+      key: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].number]).isRequired,
+      icon: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].object])
+    })) || _propTypes2["default"].shape({
+      children: _propTypes["default"].renderable.isRequired,
+      imageSrc: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].object]).isRequired
+    }),
+    /**
+     * 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:
+     *
+     * * `keyGuide` - The root component class
+     * * `imageGuide` - Applied to an image-based keyGuide
+     *
+     * @type {Object}
+     * @public
+     */
+    css: _propTypes2["default"].object,
+    /**
+     * Controls the visibility of the KeyGuide.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    open: _propTypes2["default"].bool
+  },
+  defaultProps: {
+    arrowPosition: 'none'
+  },
+  computed: {
+    children: function children(_ref2) {
+      var _children = _ref2.children,
+        css = _ref2.css;
+      if (_children !== null && _children !== void 0 && _children.imageSrc) {
+        return _children;
+      } else {
+        return _children ? _children.map(function (_ref3) {
+          var icon = _ref3.icon,
+            child = _objectWithoutProperties(_ref3, _excluded);
+          var isColorKey = colorKeys.includes(icon);
+          return _objectSpread(_objectSpread({}, child), {}, {
+            slotBefore: isColorKey ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: css[icon]
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], {
+              className: css.icon,
+              size: "large",
+              children: icon
+            })
+          });
+        }) : [];
+      }
+    },
+    className: function className(_ref4) {
+      var arrowPosition = _ref4.arrowPosition,
+        children = _ref4.children,
+        styler = _ref4.styler;
+      return styler.append(Array.isArray(children) ? 'iconGuide' : 'imageGuide', arrowPosition === 'none' || Array.isArray(children) ? 'noArrow' : "".concat(arrowPosition, "Arrow"));
+    },
+    open: function open(_ref5) {
+      var children = _ref5.children,
+        _open = _ref5.open;
+      return children && (children.imageSrc || children.length > 0) && _open;
+    }
+  },
+  styles: {
+    css: _KeyGuideModule["default"],
+    className: 'keyGuide',
+    publicClassNames: ['keyGuide', 'imageGuide']
+  },
+  render: function render(_ref6) {
+    var className = _ref6.className,
+      css = _ref6.css,
+      children = _ref6.children,
+      open = _ref6.open,
+      rest = _objectWithoutProperties(_ref6, _excluded2);
+    delete rest.arrowPosition;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FloatingLayer["default"], {
+      noAutoDismiss: true,
+      open: open,
+      scrimType: "none",
+      children: Array.isArray(children) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Repeater["default"], _objectSpread(_objectSpread({}, rest), {}, {
+        component: "div",
+        className: className,
+        childComponent: _Item.ItemBase,
+        itemProps: {
+          css: css,
+          marqueeOn: 'render'
+        },
+        children: children
+      })) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, rest), {}, {
+        className: className,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageItemBase, _objectSpread({}, children))
+      }))
+    });
+  }
+});
+
+/**
+ * Applies Limestone specific behaviors to {@link limestone/KeyGuide.KeyGuideBase|KeyGuide}.
+ *
+ * @hoc
+ * @memberof limestone/KeyGuide
+ * @mixes limestone/Marquee.MarqueeController
+ * @mixes limestone/Skinnable.Skinnable
+ * @public
+ */
+var KeyGuideDecorator = exports.KeyGuideDecorator = (0, _compose["default"])((0, _Marquee.MarqueeController)({
+  marqueeOnFocus: true
+}), _Pure["default"], _Skinnable["default"]);
+
+/**
+ * A Key Guide component, ready to use in Limestone applications.
+ *
+ * `KeyGuide' may be used to display list of text with icons to describe key behavior.
+ *
+ * Usage:
+ * ```
+ * <KeyGuide
+ *		open
+ * >
+ * 	{[
+ *		{icon: 'star', children: 'start label', key: 1},
+ *		{icon: 'plus', children: 'plus label', key: 2},
+ *		{icon: 'minus', children: 'minus label', key: 3}
+ *	]}
+ * </KeyGuide>
+ * ```
+ *
+ * @class KeyGuide
+ * @memberof limestone/KeyGuide
+ * @extends limestone/KeyGuide.KeyGuideBase
+ * @mixes limestone/KeyGuide.KeyGuideDecorator
+ * @ui
+ * @public
+ */
+var KeyGuide = exports.KeyGuide = KeyGuideDecorator(KeyGuideBase);
+var _default = exports["default"] = KeyGuide;