@enact/limestone 1.3.0

package/Icon/tests/Icon-specs.js

@@ -0,0 +1,131 @@
+"use strict";
+
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _Icon = require("../Icon");
+var _jsxRuntime = require("react/jsx-runtime");
+describe('Icon Specs', function () {
+  test('should return the correct Unicode value for named icon \'star\'', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconBase, {
+      "data-testid": "icon",
+      children: "star"
+    }));
+    var expected = 983080; // decimal converted charCode of Unicode 'star' character
+    var actual = _react.screen.getByTestId('icon').textContent.codePointAt();
+    expect(actual).toBe(expected);
+  });
+  test('should return the correct Unicode value when provided \'star\' hex value', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconBase, {
+      "data-testid": "icon",
+      children: "0x0F0028"
+    }));
+    var expected = 983080; // decimal converted charCode of character
+    var actual = _react.screen.getByTestId('icon').textContent.codePointAt();
+    expect(actual).toBe(expected);
+  });
+  test('should return the correct Unicode value when provided HTML entity as hex value', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconBase, {
+      "data-testid": "icon",
+      children: "\u2605"
+    }));
+    var expected = 9733; // decimal converted charCode of character
+    var actual = _react.screen.getByTestId('icon').textContent.codePointAt();
+    expect(actual).toBe(expected);
+  });
+  test('should return the correct Unicode value when provided Unicode reference', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconBase, {
+      "data-testid": "icon",
+      children: "\\u0F0028"
+    }));
+    var expected = 983080; // decimal converted charCode of Unicode 'star' character
+    var actual = _react.screen.getByTestId('icon').textContent.codePointAt();
+    expect(actual).toBe(expected);
+  });
+  test('should support high code point Unicode values', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconBase, {
+      "data-testid": "icon",
+      children: String.fromCodePoint(0x0F0028)
+    }));
+    var expected = 983080; // decimal converted charCode of Unicode 'star' character
+    var actual = _react.screen.getByTestId('icon').textContent.codePointAt();
+    expect(actual).toBe(expected);
+  });
+  test('should support preset size "large"', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconBase, {
+      "data-testid": "icon",
+      size: "large",
+      children: "star"
+    }));
+    var expected = 'large';
+    var icon = _react.screen.getByTestId('icon');
+    expect(icon).toHaveClass(expected);
+  });
+  test('should support preset size "medium"', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconBase, {
+      "data-testid": "icon",
+      size: "medium",
+      children: "star"
+    }));
+    var expected = 'medium';
+    var icon = _react.screen.getByTestId('icon');
+    expect(icon).toHaveClass(expected);
+  });
+  test('should support preset size "small"', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconBase, {
+      "data-testid": "icon",
+      size: "small",
+      children: "star"
+    }));
+    var expected = 'small';
+    var icon = _react.screen.getByTestId('icon');
+    expect(icon).toHaveClass(expected);
+  });
+  test('should support preset size "tiny"', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconBase, {
+      "data-testid": "icon",
+      size: "tiny",
+      children: "star"
+    }));
+    var expected = 'tiny';
+    var icon = _react.screen.getByTestId('icon');
+    expect(icon).toHaveClass(expected);
+  });
+  test('should support arbitrary custom numeric sizes that scale to the correct value', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconBase, {
+      "data-testid": "icon",
+      size: 96,
+      children: "star"
+    }));
+    var icon = _react.screen.getByTestId('icon');
+
+    // surprisingly this returns 8rem, instead of what you'd expect
+    // with a base pxToRem value of 48px, which would be 2rem.
+    // Tests must run at a tiny simulated screen size.
+    expect(icon).toHaveStyle({
+      '--icon-size': '8rem'
+    });
+  });
+  test('should support RTL flip', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconBase, {
+      "data-testid": "icon",
+      rtl: true,
+      flip: "auto",
+      children: "star"
+    }));
+    var expected = "flipHorizontal";
+    var icon = _react.screen.getByTestId('icon');
+    expect(icon).toHaveClass(expected);
+  });
+  test('should not support RTL flip when locale is he-IL and children is \'help\'', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconBase, {
+      "data-testid": "icon",
+      rtl: true,
+      flip: "auto",
+      locale: "he-IL",
+      children: "help"
+    }));
+    var expected = "flipHorizontal";
+    var icon = _react.screen.getByTestId('icon');
+    expect(icon).not.toHaveClass(expected);
+  });
+});

package/IconItem/IconItem.d.ts

@@ -0,0 +1,137 @@
+// Type definitions for limestone/IconItem
+
+import { MarqueeControllerProps as limestone_Marquee_MarqueeControllerProps } from "limestone/Marquee";
+import { SpottableProps as spotlight_Spottable_SpottableProps } from "@enact/spotlight/Spottable";
+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;
+
+/**
+ * The shape for image of   .
+ */
+export interface ImageShape {
+  /**
+ * Size for the image.
+The following properties should be provided:
+ * *  `height`  - The height of the image
+ * *  `width`  - The width of the image
+ */
+  size: object /**
+ * Source for the image.
+String value or Object of values used to determine which image will appear on
+a specific screenSize.
+ */;
+  src: string | object;
+}
+export interface IconItemBaseProps {
+  /**
+ * The background color, gradient, or image of this item.
+Accepts any format of color, gradient type value, and image url.
+ * 
+ * Example: '#ff0000', 'radial-gradient(crimson, skyblue)', 'url(  ) center / cover'
+ */
+  background?: string;
+  /**
+   * Specifies bordered or borderless.
+   */
+  bordered?: boolean;
+  /**
+   * The custom component rendered as the content of this IconItem.
+   */
+  children?: React.ComponentType;
+  /**
+ * 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:
+ * *  `iconItem`  - The icon item component class
+ * *  `content`  - The class for the content area except title
+ * *  `bordered`  - The border class
+ * *  `icon`  - The icon component class
+ * *  `image`  - The image component class
+ * *  `labelContainer`  - The label container class
+ * *  `label`  - The label component class
+ * *  `title`  - The title component class
+ */
+  css?: object;
+  /**
+   * The voice control intent.
+   */
+  "data-webos-voice-intent"?: string;
+  /**
+   * Disable IconItem and becomes non-interactive.
+   */
+  disabled?: boolean;
+  /**
+ * The icon content.
+If this is specified,    will be shown as the content.
+ */
+  icon?: string | object;
+  /**
+ * Source and size for the image.
+See the details in  
+ */
+  image?: ImageShape;
+  /**
+   * A label displayed in the content.
+   */
+  label?: string;
+  /**
+   * The color of label.
+   */
+  labelColor?: "dark" | "light";
+  /**
+   * Determines what triggers the label to show.
+   */
+  labelOn?: "focus" | "render";
+  /**
+   * Title text showing below the icon.
+   */
+  title?: string;
+  /**
+   * Determines what triggers the title to show.
+   */
+  titleOn?: "focus" | "render";
+}
+/**
+ * A Limestone styled base component for   .
+ */
+
+export class IconItemBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, IconItemBaseProps>
+> {}
+
+export interface IconItemDecoratorProps
+  extends Merge<
+    Merge<
+      limestone_Marquee_MarqueeControllerProps,
+      spotlight_Spottable_SpottableProps
+    >,
+    limestone_Skinnable_SkinnableProps
+  > {}
+export function IconItemDecorator<P>(
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & IconItemDecoratorProps>;
+
+export interface IconItemProps
+  extends Merge<IconItemBaseProps, IconItemDecoratorProps> {}
+/**
+ * A limestone-styled icon item, Marquee and Spottable applied.
+ * 
+ * Usage:
+ * ```
+<IconItem
+  background="#1b1b1b"
+  bordered
+  icon="usb"
+/>
+```
+ */
+
+export class IconItem extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, IconItemProps>
+> {}
+
+export default IconItem;

package/IconItem/IconItem.js

@@ -0,0 +1,360 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.IconItemDecorator = exports.IconItemBase = exports.IconItem = void 0;
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _Spottable = _interopRequireDefault(require("@enact/spotlight/Spottable"));
+var _Layout = require("@enact/ui/Layout");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _compose = _interopRequireDefault(require("ramda/src/compose"));
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _Image = _interopRequireDefault(require("../Image"));
+var _Marquee = require("../Marquee");
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _IconItemModule = _interopRequireDefault(require("./IconItem.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children", "disabled"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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; }
+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 _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); } /**
+ * Provides Limestone styled icon item components and behaviors.
+ *
+ * @example
+ * <IconItem
+ *   background="#1b1b1b"
+ *   bordered
+ *   icon="usb"
+ *   style={{
+ *      height: 80,
+ *      width: 104
+ *   }}
+ * />
+ *
+ * @module limestone/IconItem
+ * @exports IconItem
+ * @exports IconItemBase
+ * @exports IconItemDecorator
+ * @public
+ */ /**
+ * The shape for image of {@link limestone/IconItem|IconItem}.
+ *
+ * @typedef {Object} ImageShape
+ * @memberof limestone/IconItem
+ * @property {Object} size Size for the image.
+ *  The following properties should be provided:
+ *
+ * * `height` - The height of the image
+ * * `width` - The width of the image
+ * @property {String|Object} src Source for the image.
+ *  String value or Object of values used to determine which image will appear on
+ *  a specific screenSize.
+ * @public
+ */
+var ImageShape = _propTypes["default"].shape({
+  size: _propTypes["default"].shape({
+    height: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]).isRequired,
+    width: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]).isRequired
+  }).isRequired,
+  src: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]).isRequired
+});
+var MarqueeBase = function MarqueeBase(_ref) {
+  var rest = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  delete rest.order;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread({}, rest));
+};
+var Marquee = (0, _Marquee.MarqueeDecorator)({
+  invalidateProps: ['remeasure', 'order']
+}, MarqueeBase);
+
+/**
+ * A Limestone styled base component for {@link limestone/IconItem.IconItem|IconItem}.
+ *
+ * @class IconItemBase
+ * @memberof limestone/IconItem
+ * @ui
+ * @public
+ */
+var IconItemBase = exports.IconItemBase = (0, _kind["default"])({
+  name: 'IconItem',
+  propTypes: /** @lends limestone/IconItem.IconItemBase.prototype */{
+    /**
+     * The background color, gradient, or image of this item.
+     * Accepts any format of color, gradient type value, and image url.
+     *
+     * Example: '#ff0000', 'radial-gradient(crimson, skyblue)', 'url(https://example.com/image.png) center / cover'
+     *
+     * @type {String}
+     * @public
+     */
+    background: _propTypes["default"].string,
+    /**
+     * Specifies bordered or borderless.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    bordered: _propTypes["default"].bool,
+    /**
+     * The custom component rendered as the content of this IconItem.
+     *
+     * @type {Component}
+     * @public
+     */
+    children: _propTypes["default"].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:
+     *
+     * * `iconItem` - The icon item component class
+     * * `content` - The class for the content area except title
+     * * `bordered` - The border class
+     * * `icon` - The icon component class
+     * * `image` - The image component class
+     * * `labelContainer` - The label container class
+     * * `label` - The label component class
+     * * `title` - The title component class
+     *
+     * @type {Object}
+     * @public
+     */
+    css: _propTypes["default"].object,
+    /**
+     * The voice control intent.
+     *
+     * @type {String}
+     * @default 'Select'
+     * @public
+     */
+    'data-webos-voice-intent': _propTypes["default"].string,
+    /**
+     * Disable IconItem and becomes non-interactive.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    disabled: _propTypes["default"].bool,
+    /**
+     * The icon content.
+     * If this is specified, {@link limestone/Icon.Icon|Icon} will be shown as the content.
+     *
+     * @see {@link ui/Icon.Icon.children}
+     * @type {String|Object}
+     * @public
+     */
+    icon: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+    /**
+     * Source and size for the image.
+     * See the details in {@link limestone/IconItem.ImageShape|ImageShape}
+     *
+     * @type {limestone/IconItem.ImageShape}
+     * @public
+     */
+    image: ImageShape,
+    /**
+     * A label displayed in the content.
+     *
+     * @type {String}
+     * @public
+     */
+    label: _propTypes["default"].string,
+    /**
+     * The color of label.
+     *
+     * @type {('dark'|'light')}
+     * @default 'light'
+     * @public
+     */
+    labelColor: _propTypes["default"].oneOf(['dark', 'light']),
+    /**
+     * Determines what triggers the label to show.
+     *
+     * @type {('focus'|'render')}
+     * @default 'render'
+     * @public
+     */
+    labelOn: _propTypes["default"].oneOf(['focus', 'render']),
+    /**
+     * The order of the item.
+     * Invalidates Marquee when the order changes.
+     *
+     * @type {Number}
+     * @private
+     */
+    order: _propTypes["default"].number,
+    /**
+     * Title text showing below the icon.
+     *
+     * @type {String}
+     * @public
+     */
+    title: _propTypes["default"].string,
+    /**
+     * Determines what triggers the title to show.
+     *
+     * @type {('focus'|'render')}
+     * @default 'render'
+     * @public
+     */
+    titleOn: _propTypes["default"].oneOf(['focus', 'render'])
+  },
+  defaultProps: {
+    'data-webos-voice-intent': 'Select',
+    labelColor: 'light',
+    labelOn: 'render',
+    titleOn: 'render'
+  },
+  styles: {
+    css: _IconItemModule["default"],
+    className: 'iconItem',
+    publicClassNames: true
+  },
+  computed: {
+    className: function className(_ref2) {
+      var bordered = _ref2.bordered,
+        label = _ref2.label,
+        labelColor = _ref2.labelColor,
+        labelOn = _ref2.labelOn,
+        styler = _ref2.styler,
+        title = _ref2.title,
+        titleOn = _ref2.titleOn;
+      return styler.append({
+        bordered: bordered,
+        hasLabel: !!label,
+        hasTitle: !!title,
+        labelOnFocus: labelOn === 'focus',
+        titleOnFocus: titleOn === 'focus',
+        darkLabel: labelColor === 'dark'
+      });
+    },
+    children: function children(_ref3) {
+      var background = _ref3.background,
+        _children = _ref3.children,
+        css = _ref3.css,
+        icon = _ref3.icon,
+        image = _ref3.image,
+        label = _ref3.label,
+        labelOn = _ref3.labelOn,
+        order = _ref3.order,
+        title = _ref3.title;
+      if (_children) return _children;
+      var imageComponent;
+      if (icon) {
+        imageComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], {
+          className: css.icon,
+          size: "large",
+          children: icon
+        });
+      } else if (image) {
+        var _image$size, _image$size2;
+        imageComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image["default"], {
+          className: css.image,
+          src: image === null || image === void 0 ? void 0 : image.src,
+          style: {
+            width: image === null || image === void 0 || (_image$size = image.size) === null || _image$size === void 0 ? void 0 : _image$size.width,
+            height: image === null || image === void 0 || (_image$size2 = image.size) === null || _image$size2 === void 0 ? void 0 : _image$size2.height
+          }
+        });
+      }
+      if (!imageComponent && !_children && !label && !title) return;
+      var align = label && labelOn === 'render' ? 'center' : 'center center';
+      var iconContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Column, {
+        align: align,
+        className: css.content,
+        style: {
+          background: background
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+          shrink: true,
+          children: imageComponent ? imageComponent : null
+        }), label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+          shrink: true,
+          className: css.labelContainer,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Marquee, {
+            alignment: "center",
+            className: css.label,
+            marqueeOn: "focus",
+            order: order,
+            children: label
+          })
+        }) : null]
+      });
+      return title ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Column, {
+        children: [iconContent, /*#__PURE__*/(0, _jsxRuntime.jsx)(Marquee, {
+          alignment: "center",
+          className: css.title,
+          marqueeOn: "focus",
+          order: order,
+          children: title
+        })]
+      }) : iconContent;
+    }
+  },
+  render: function render(_ref4) {
+    var children = _ref4.children,
+      disabled = _ref4.disabled,
+      rest = _objectWithoutProperties(_ref4, _excluded);
+    delete rest.background;
+    delete rest.bordered;
+    delete rest.icon;
+    delete rest.image;
+    delete rest.label;
+    delete rest.labelColor;
+    delete rest.labelOn;
+    delete rest.title;
+    delete rest.titleOn;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, rest), {}, {
+      "aria-disabled": disabled,
+      disabled: disabled,
+      children: children
+    }));
+  }
+});
+
+/**
+ * Limestone-specific IconItem behaviors to apply to
+ * {@link limestone/IconItem.IconItem|IconItem}.
+ *
+ * @hoc
+ * @memberof limestone/IconItem
+ * @mixes limestone/Marquee.MarqueeController
+ * @mixes spotlight/Spottable.Spottable
+ * @mixes limestone/Skinnable.Skinnable
+ * @public
+ */
+var IconItemDecorator = exports.IconItemDecorator = (0, _compose["default"])((0, _Marquee.MarqueeController)({
+  marqueeOnFocus: true
+}), _Spottable["default"], _Skinnable["default"]);
+
+/**
+ * A limestone-styled icon item, Marquee and Spottable applied.
+ *
+ * Usage:
+ * ```
+ * <IconItem
+ *   background="#1b1b1b"
+ *   bordered
+ *   icon="usb"
+ * />
+ * ```
+ *
+ * @class IconItem
+ * @memberof limestone/IconItem
+ * @extends limestone/IconItem.IconItemBase
+ * @mixes limestone/IconItem.IconItemDecorator
+ * @see {@link limestone/IconItem.IconItemBase}
+ * @ui
+ * @public
+ */
+var IconItem = exports.IconItem = IconItemDecorator(IconItemBase);
+IconItem.displayName = 'IconItem';
+var _default = exports["default"] = IconItem;