@enact/limestone 1.3.0 → 1.10.0

package/Card/Card.js

@@ -9,17 +9,20 @@ var _kind = _interopRequireDefault(require("@enact/core/kind"));
 var _Spottable = _interopRequireDefault(require("@enact/spotlight/Spottable"));
 var _Card = require("@enact/ui/Card");
 var _Layout = require("@enact/ui/Layout");
+var _Touchable = _interopRequireDefault(require("@enact/ui/Touchable"));
 var _resolution = _interopRequireDefault(require("@enact/ui/resolution"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _compose = _interopRequireDefault(require("ramda/src/compose"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _Image = _interopRequireDefault(require("../Image"));
+var _$L = _interopRequireDefault(require("../internal/$L"));
 var _AsyncRenderChildren = _interopRequireDefault(require("../internal/AsyncRenderChildren"));
 var _Marquee = require("../Marquee");
+var _ProgressBar = _interopRequireDefault(require("../ProgressBar"));
 var _Skinnable = _interopRequireDefault(require("../Skinnable"));
 var _CardModule = _interopRequireDefault(require("./Card.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["css", "imageSize", "primaryBadgeSrc", "secondaryBadgeSrc", "style"];
+var _excluded = ["css", "disabled", "icon", "imageSize", "primaryBadgeSrc", "secondaryBadgeSrc", "style"];
 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; }
@@ -69,14 +72,6 @@ var getDefaultImageSize = function getDefaultImageSize(orientation) {
 var CardBase = exports.CardBase = (0, _kind["default"])({
   name: 'Card',
   propTypes: /** @lends limestone/Card.CardBase.prototype */{
-    /**
-     * The primary caption displayed with the image.
-     *
-     * @type {String}
-     * @required
-     * @public
-     */
-    children: _propTypes["default"].string.isRequired,
     /**
      * Source for the image.
      * String value or Object of values used to determine which image will appear on
@@ -87,6 +82,13 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
      * @public
      */
     src: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]).isRequired,
+    /**
+     * The "aria-label" for the Card.
+     *
+     * @type {String}
+     * @public
+     */
+    'aria-label': _propTypes["default"].string,
     /**
      * Determines whether the caption will be placed over the image or not.
      * It only applies when `orientation` is `'vertical'`.
@@ -110,6 +112,13 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
      * @public
      */
     centered: _propTypes["default"].bool,
+    /**
+     * The primary caption displayed with the image.
+     *
+     * @type {String}
+     * @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.
@@ -132,6 +141,13 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
      * @public
      */
     disabled: _propTypes["default"].bool,
+    /**
+     * Fits the image to its height and width and positions it on the center of the Card.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    fitImage: _propTypes["default"].bool,
     /**
      * Set to `true` to display a container with background color.
      * When `orientation` is `'horizontal'`, this prop is always `true` and provided value will be ignored.
@@ -140,6 +156,14 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
      * @public
      */
     hasContainer: _propTypes["default"].bool,
+    /**
+     * Icon used when `selected` is `true`
+     *
+     * @type {String}
+     * @default 'check'
+     * @public
+     */
+    icon: _propTypes["default"].string,
     /**
      * Source for the image icon.
      *
@@ -186,6 +210,14 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
      * @public
      */
     placeholder: _propTypes["default"].string,
+    /**
+     * Indicates if the component is pressed.
+     *
+     * @type {Boolean}
+     * @default false
+     * @private
+     */
+    pressed: _propTypes["default"].bool,
     /**
      * The primary badge image source.
      *
@@ -193,6 +225,13 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
      * @public
      */
     primaryBadgeSrc: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+    /**
+     * The progress displayed inside the ProgressBar
+     *
+     * @type {Number}
+     * @public
+     */
+    progress: _propTypes["default"].number,
     /**
      * Set to `true` to display the image with rounded corners.
      *
@@ -220,10 +259,34 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
      * @type {Boolean}
      * @public
      */
-    selected: _propTypes["default"].bool
+    selected: _propTypes["default"].bool,
+    /**
+     * Activates the 'ProgressBar'.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    showProgressBar: _propTypes["default"].bool,
+    /**
+     * Splits the captions in two sections. This prop is only used when
+     * `captionOverlayOnFocus` or `captionOverlay` is `true` and `orientation` is `'vertical'`.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    splitCaption: _propTypes["default"].bool,
+    /**
+     * Removes the marquee effect of caption and label text.
+     * @type {Boolean}
+     * @public
+     */
+    withoutMarquee: _propTypes["default"].bool
   },
   defaultProps: {
-    orientation: 'vertical'
+    icon: 'check',
+    orientation: 'vertical',
+    pressed: false,
+    withoutMarquee: false
   },
   styles: {
     css: _CardModule["default"],
@@ -231,15 +294,16 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
   },
   handlers: {
     onClick: (0, _handle.handle)((0, _handle.not)((0, _handle.forProp)('disabled', true)), (0, _handle.forward)('onClick')),
-    onKeyUp: (0, _handle.handle)((0, _handle.not)((0, _handle.forProp)('disabled', true)), (0, _handle.forward)('onKeyUp'))
+    onKeyDown: (0, _handle.handle)((0, _handle.not)((0, _handle.forProp)('disabled', true)), (0, _handle.forward)('onKeyDown'))
   },
   computed: {
     'aria-label': function ariaLabel(_ref) {
-      var children = _ref.children,
+      var _ariaLabel = _ref['aria-label'],
+        children = _ref.children,
         label = _ref.label,
         secondaryLabel = _ref.secondaryLabel,
         selected = _ref.selected;
-      return "".concat(children || '').concat(label ? " ".concat(label) : '').concat(secondaryLabel ? " ".concat(secondaryLabel) : '').concat(selected ? ' selected' : '');
+      return _ariaLabel || "".concat(children || '').concat(label ? " ".concat(label) : '').concat(secondaryLabel ? " ".concat(secondaryLabel) : '').concat(selected ? ' ' + (0, _$L["default"])('Selected') : '');
     },
     captionOverlay: function captionOverlay(_ref2) {
       var _captionOverlay = _ref2.captionOverlay,
@@ -247,14 +311,20 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
       return _captionOverlay || captionOverlayOnFocus;
     },
     children: function children(_ref3) {
-      var centered = _ref3.centered,
+      var captionOverlay = _ref3.captionOverlay,
+        captionOverlayOnFocus = _ref3.captionOverlayOnFocus,
+        centered = _ref3.centered,
         _children = _ref3.children,
         css = _ref3.css,
         index = _ref3['data-index'],
         imageIconSrc = _ref3.imageIconSrc,
         label = _ref3.label,
         orientation = _ref3.orientation,
-        secondaryLabel = _ref3.secondaryLabel;
+        progress = _ref3.progress,
+        secondaryLabel = _ref3.secondaryLabel,
+        showProgressBar = _ref3.showProgressBar,
+        splitCaption = _ref3.splitCaption,
+        withoutMarquee = _ref3.withoutMarquee;
       var hasImageIcon = imageIconSrc && orientation === 'vertical';
       var alignment = centered && !imageIconSrc ? {
         alignment: 'center'
@@ -266,7 +336,29 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
           component: _Image["default"],
           shrink: true,
           src: imageIconSrc
-        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Cell, {
+        }) : null, withoutMarquee ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Cell, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            style: {
+              textAlign: alignment === null || alignment === void 0 ? void 0 : alignment.alignment
+            },
+            className: css.caption,
+            children: _children
+          }), typeof label !== 'undefined' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            style: {
+              textAlign: alignment === null || alignment === void 0 ? void 0 : alignment.alignment
+            },
+            className: css.label,
+            children: label
+          }) : null, typeof secondaryLabel !== 'undefined' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            style: {
+              textAlign: alignment === null || alignment === void 0 ? void 0 : alignment.alignment
+            },
+            className: css.label,
+            children: secondaryLabel
+          }) : null, showProgressBar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBar["default"], {
+            progress: progress
+          }) : null]
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Cell, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Marquee.Marquee, _objectSpread(_objectSpread({}, alignment), {}, {
             className: css.caption,
             marqueeOn: "hover",
@@ -279,9 +371,32 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
             className: css.label,
             marqueeOn: "hover",
             children: secondaryLabel
+          })) : null, showProgressBar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBar["default"], {
+            progress: progress
+          }) : null]
+        })]
+      });
+      var splitCaptions = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+          className: css.captions,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Marquee.Marquee, _objectSpread(_objectSpread({}, alignment), {}, {
+            className: css.caption,
+            marqueeOn: "hover",
+            children: _children
+          }))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Cell, {
+          children: [typeof label !== 'undefined' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Marquee.Marquee, _objectSpread(_objectSpread({}, alignment), {}, {
+            className: css.label,
+            marqueeOn: "hover",
+            children: label
+          })) : null, typeof secondaryLabel !== 'undefined' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Marquee.Marquee, _objectSpread(_objectSpread({}, alignment), {}, {
+            className: css.label,
+            marqueeOn: "hover",
+            children: secondaryLabel
           })) : null]
         })]
       });
+      var selectedCaptions = (captionOverlay || captionOverlayOnFocus) && splitCaption && orientation === 'vertical' ? splitCaptions : captions;
       return typeof index !== 'undefined' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_AsyncRenderChildren["default"], {
         fallback: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Row, {
           className: css.captions,
@@ -296,12 +411,14 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
           })]
         }),
         index: index,
-        children: captions
-      }) : captions;
+        children: selectedCaptions
+      }) : selectedCaptions;
     },
     className: function className(_ref4) {
       var captionOverlay = _ref4.captionOverlay,
         captionOverlayOnFocus = _ref4.captionOverlayOnFocus,
+        icon = _ref4.icon,
+        pressed = _ref4.pressed,
         roundedImage = _ref4.roundedImage,
         hasContainer = _ref4.hasContainer,
         orientation = _ref4.orientation,
@@ -309,29 +426,46 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
       return styler.append({
         captionOverlay: captionOverlay && orientation === 'vertical',
         captionOverlayOnFocus: !captionOverlay && captionOverlayOnFocus && orientation === 'vertical',
+        pressed: pressed,
         roundedImage: roundedImage,
-        hasContainer: orientation === 'horizontal' || hasContainer && !captionOverlay
+        hasContainer: orientation === 'horizontal' || hasContainer && !captionOverlay,
+        isCheckIcon: icon === 'check'
       });
+    },
+    splitCaption: function splitCaption(_ref5) {
+      var captionOverlay = _ref5.captionOverlay,
+        captionOverlayOnFocus = _ref5.captionOverlayOnFocus,
+        _splitCaption = _ref5.splitCaption;
+      return (captionOverlay || captionOverlayOnFocus) && _splitCaption;
     }
   },
-  render: function render(_ref5) {
+  render: function render(_ref6) {
     var _imageSize$height, _imageSize$width;
-    var css = _ref5.css,
-      imageSize = _ref5.imageSize,
-      primaryBadgeSrc = _ref5.primaryBadgeSrc,
-      secondaryBadgeSrc = _ref5.secondaryBadgeSrc,
-      style = _ref5.style,
-      rest = _objectWithoutProperties(_ref5, _excluded);
+    var css = _ref6.css,
+      disabled = _ref6.disabled,
+      icon = _ref6.icon,
+      imageSize = _ref6.imageSize,
+      primaryBadgeSrc = _ref6.primaryBadgeSrc,
+      secondaryBadgeSrc = _ref6.secondaryBadgeSrc,
+      style = _ref6.style,
+      rest = _objectWithoutProperties(_ref6, _excluded);
     delete rest.captionOverlayOnFocus;
     delete rest.centered;
     delete rest.label;
+    delete rest.progress;
     delete rest.secondaryLabel;
+    delete rest.showProgressBar;
     delete rest.imageIconSrc;
     delete rest.hasContainer;
+    delete rest.pressed;
     delete rest.roundedImage;
+    delete rest.withoutMarquee;
     var defaultImageSize = getDefaultImageSize(rest.orientation);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.Card, _objectSpread(_objectSpread({}, rest), {}, {
+      "aria-disabled": disabled,
       css: css,
+      "data-webos-voice-intent": "Select",
+      disabled: disabled,
       imageComponent: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Image["default"], {
         children: [primaryBadgeSrc ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image["default"], {
           className: css.primaryBadge,
@@ -343,7 +477,7 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
           className: css.selectionContainer,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], {
             className: css.selectionIcon,
-            children: "check"
+            children: icon
           })
         })]
       }),
@@ -368,6 +502,8 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
  */
 var CardDecorator = exports.CardDecorator = (0, _compose["default"])((0, _Marquee.MarqueeController)({
   marqueeOnFocus: true
+}), (0, _Touchable["default"])({
+  activeProp: 'pressed'
 }), _Spottable["default"], _Skinnable["default"]);
 
 /**