@enact/limestone 1.3.0

package/Card/package.json

@@ -0,0 +1,3 @@
+{
+    "main": "Card.js"
+}

package/Card/tests/Card-specs.js

@@ -0,0 +1,65 @@
+"use strict";
+
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _Card = require("../Card");
+var _jsxRuntime = require("react/jsx-runtime");
+var src = {
+  'hd': 'https://placehold.co/200x200/000000/ffffff/png',
+  'fhd': 'https://placehold.co/300x300/000000/ffffff/png',
+  'uhd': 'https://placehold.co/600x600/000000/ffffff/png'
+};
+describe('Card', function () {
+  test('should support `captionOverlay` prop', function () {
+    var children = 'children';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardBase, {
+      "data-testid": "card",
+      captionOverlay: true,
+      src: src,
+      children: children
+    }));
+    var expected = 'captionOverlay';
+    var actual = _react.screen.getByTestId('card');
+    expect(actual).toHaveClass(expected);
+  });
+  test('should support `roundedImage` prop', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardBase, {
+      "data-testid": "card",
+      roundedImage: true,
+      src: src
+    }));
+    var expected = 'roundedImage';
+    var actual = _react.screen.getByTestId('card');
+    expect(actual).toHaveClass(expected);
+  });
+  test('should support `hasContainer` prop', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardBase, {
+      "data-testid": "card",
+      hasContainer: true,
+      src: src
+    }));
+    var expected = 'hasContainer';
+    var actual = _react.screen.getByTestId('card');
+    expect(actual).toHaveClass(expected);
+  });
+  test('should support `imageIconSrc` prop when `orientation="vertical"`', function () {
+    var imageIconSrc = 'imageIconSrc';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardBase, {
+      imageIconSrc: imageIconSrc,
+      orientation: "vertical"
+    }));
+    var expected = imageIconSrc;
+    var actual = _react.screen.getAllByRole('img')[2].children.item(0);
+    expect(actual).toHaveAttribute('src', expected);
+  });
+  test('should not support `imageIconSrc` prop when `orientation="horizontal"`', function () {
+    var imageIconSrc = 'imageIconSrc';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardBase, {
+      imageIconSrc: imageIconSrc,
+      orientation: "horizontal"
+    }));
+    var expected = 2;
+    var actual = _react.screen.getAllByRole('img').length;
+    expect(actual).toBe(expected);
+  });
+});

package/Checkbox/Checkbox.d.ts

@@ -0,0 +1,99 @@
+// Type definitions for limestone/Checkbox
+
+import { ToggleableProps as ui_Toggleable_ToggleableProps } from "@enact/ui/Toggleable";
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+import { SpottableProps as spotlight_Spottable_SpottableProps } from "@enact/spotlight/Spottable";
+import { IconProps as limestone_Icon_IconProps } from "limestone/Icon";
+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 CheckboxBaseProps extends limestone_Icon_IconProps {
+  /**
+   * The icon displayed when  `selected` .
+   *
+   * May be specified as either:
+   * *  A string that represents an icon from the   ,
+   * *  An HTML entity string, Unicode reference or hex value (in the form '0x...'),
+   * *  A URL specifying path to an icon image, or
+   * *  An object representing a resolution independent resource (See   )
+   */
+  children?: string | object;
+  /**
+ * 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:
+ * *  `checkbox`  - The root class name
+ * *  `selected`  - Applied when the  `selected`  prop is true
+ */
+  css?: object;
+  /**
+   * Disables Checkbox and becomes non-interactive.
+   */
+  disabled?: boolean;
+  /**
+ * Enables the "indeterminate" state.
+ * 
+ * An indeterminate, mixed, or half-selected state is typically used in a hierarchy or group
+to represent that some, not all, children are selected.
+ * 
+ * NOTE: This does not prevent updating the  `selected`  state. Applications must control this
+property directly.
+ */
+  indeterminate?: boolean;
+  /**
+   * The icon to be used in the  `indeterminate`  state.
+   *
+   * May be specified as either:
+   * *  A string that represents an icon from the   ,
+   * *  An HTML entity string, Unicode reference or hex value (in the form '0x...'),
+   * *  A URL specifying path to an icon image, or
+   * *  An object representing a resolution independent resource (See   )
+   */
+  indeterminateIcon?: string;
+  /**
+   * Sets whether this control is in the 'on' or 'off' state.  `true`  for 'on',  `false`  for 'off'.
+   */
+  selected?: boolean;
+}
+/**
+ * A checkbox component, ready to use in Limestone applications.
+ * 
+ * `Checkbox`  may be used independently to represent a toggleable state but is more commonly used as
+part of   .
+ * 
+ * Usage:
+ * ```
+<Checkbox selected />
+```
+ */
+
+export class CheckboxBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, CheckboxBaseProps>
+> {}
+
+export interface CheckboxDecoratorProps
+  extends Merge<
+    Merge<ui_Toggleable_ToggleableProps, limestone_Skinnable_SkinnableProps>,
+    spotlight_Spottable_SpottableProps
+  > {}
+export function CheckboxDecorator<P>(
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & CheckboxDecoratorProps>;
+
+export interface CheckboxProps
+  extends Merge<CheckboxBaseProps, CheckboxDecoratorProps> {}
+/**
+ * A Limestone-styled checkbox component.
+ * 
+ * `Checkbox`  will manage its  `selected`  state via    unless set
+directly.
+ */
+
+export class Checkbox extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, CheckboxProps>
+> {}
+
+export default Checkbox;

package/Checkbox/Checkbox.js

@@ -0,0 +1,222 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.CheckboxDecorator = exports.CheckboxBase = exports.Checkbox = void 0;
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Spottable = _interopRequireDefault(require("@enact/spotlight/Spottable"));
+var _Touchable = _interopRequireDefault(require("@enact/ui/Touchable"));
+var _Toggleable = _interopRequireDefault(require("@enact/ui/Toggleable"));
+var _compose = _interopRequireDefault(require("ramda/src/compose"));
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _CheckboxModule = _interopRequireDefault(require("./Checkbox.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children", "css", "disabled", "selected"];
+/**
+ * Limestone styled checkbox components.
+ *
+ * @example
+ * <Checkbox onToggle={console.log} />
+ *
+ * @module limestone/Checkbox
+ * @exports Checkbox
+ * @exports CheckboxBase
+ */
+/**
+ * A checkbox component, ready to use in Limestone applications.
+ *
+ * `Checkbox` may be used independently to represent a toggleable state but is more commonly used as
+ * part of {@link limestone/CheckboxItem|CheckboxItem}.
+ *
+ * Usage:
+ * ```
+ * <Checkbox selected />
+ * ```
+ *
+ * @class CheckboxBase
+ * @memberof limestone/Checkbox
+ * @extends limestone/Icon.Icon
+ * @ui
+ * @public
+ */
+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 CheckboxBase = exports.CheckboxBase = (0, _kind["default"])({
+  name: 'Checkbox',
+  propTypes: /** @lends limestone/Checkbox.CheckboxBase.prototype */{
+    /**
+     * The icon displayed when `selected`.
+     *
+     * May be specified as either:
+     *
+     * * A string that represents an icon from the {@link limestone/Icon.iconList|iconList},
+     * * An HTML entity string, Unicode reference or hex value (in the form '0x...'),
+     * * A URL specifying path to an icon image, or
+     * * An object representing a resolution independent resource (See {@link ui/resolution})
+     *
+     * @see {@link limestone/Icon.IconBase.children}
+     * @type {String|Object}
+     * @default	'checkmark'
+     * @public
+     */
+    children: _propTypes["default"].string,
+    /**
+     * 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:
+     *
+     * * `checkbox` - The root class name
+     * * `selected` - Applied when the `selected` prop is true
+     *
+     * @type {Object}
+     * @public
+     */
+    css: _propTypes["default"].object,
+    /**
+     * Disables Checkbox and becomes non-interactive.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    disabled: _propTypes["default"].bool,
+    /**
+     * Enables the "indeterminate" state.
+     *
+     * An indeterminate, mixed, or half-selected state is typically used in a hierarchy or group
+     * to represent that some, not all, children are selected.
+     *
+     * NOTE: This does not prevent updating the `selected` state. Applications must control this
+     * property directly.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    indeterminate: _propTypes["default"].bool,
+    /**
+     * The icon to be used in the `indeterminate` state.
+     *
+     * May be specified as either:
+     *
+     * * A string that represents an icon from the {@link limestone/Icon.Icon.iconList|iconList},
+     * * An HTML entity string, Unicode reference or hex value (in the form '0x...'),
+     * * A URL specifying path to an icon image, or
+     * * An object representing a resolution independent resource (See {@link ui/resolution})
+     *
+     * @type {String}
+     * @default 'minus'
+     * @public
+     */
+    indeterminateIcon: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+    /**
+     * Sets whether this control is in the 'on' or 'off' state. `true` for 'on', `false` for 'off'.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    selected: _propTypes["default"].bool,
+    /**
+     * Sets standalone rules to show spotlight background color.
+     *
+     * @type {Boolean}
+     * @private
+     */
+    standalone: _propTypes["default"].bool
+  },
+  defaultProps: {
+    children: 'checkmark',
+    indeterminate: false,
+    indeterminateIcon: 'minus',
+    selected: false
+  },
+  styles: {
+    css: _CheckboxModule["default"],
+    className: 'checkbox',
+    publicClassNames: ['checkbox', 'selected']
+  },
+  computed: {
+    className: function className(_ref) {
+      var indeterminate = _ref.indeterminate,
+        selected = _ref.selected,
+        standalone = _ref.standalone,
+        styler = _ref.styler;
+      return styler.append({
+        selected: selected,
+        standalone: standalone,
+        indeterminate: indeterminate
+      });
+    },
+    children: function children(_ref2) {
+      var indeterminate = _ref2.indeterminate,
+        indeterminateIcon = _ref2.indeterminateIcon,
+        _children = _ref2.children;
+      return indeterminate ? indeterminateIcon : _children;
+    } // This controls which icon to use, and not that icon's visual presence.
+  },
+  render: function render(_ref3) {
+    var children = _ref3.children,
+      css = _ref3.css,
+      disabled = _ref3.disabled,
+      selected = _ref3.selected,
+      rest = _objectWithoutProperties(_ref3, _excluded);
+    delete rest.indeterminate;
+    delete rest.indeterminateIcon;
+    delete rest.standalone;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, rest), {}, {
+      "aria-checked": selected,
+      "aria-disabled": disabled,
+      disabled: disabled,
+      role: "checkbox",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: css.bg
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], {
+        size: "tiny",
+        className: css.icon,
+        children: children
+      })]
+    }));
+  }
+});
+
+/**
+ * Adds interactive functionality to `Checkbox`.
+ *
+ * @class CheckboxDecorator
+ * @memberof limestone/Checkbox
+ * @mixes ui/Toggleable.Toggleable
+ * @mixes limestone/Skinnable.Skinnable
+ * @mixes spotlight/Spottable.Spottable
+ * @hoc
+ * @public
+ */
+var CheckboxDecorator = exports.CheckboxDecorator = (0, _compose["default"])((0, _Toggleable["default"])({
+  toggleProp: 'onClick'
+}), _Touchable["default"], _Spottable["default"], _Skinnable["default"]);
+
+/**
+ * A Limestone-styled checkbox component.
+ *
+ * `Checkbox` will manage its `selected` state via {@link ui/Toggleable|Toggleable} unless set
+ * directly.
+ *
+ * @class Checkbox
+ * @memberof limestone/Checkbox
+ * @extends limestone/Checkbox.CheckboxBase
+ * @mixes limestone/Checkbox.CheckboxDecorator
+ * @ui
+ * @public
+ */
+var Checkbox = exports.Checkbox = CheckboxDecorator(CheckboxBase);
+var _default = exports["default"] = Checkbox;