@enact/limestone 1.3.0

package/Button/package.json

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

package/Button/tests/Button-specs.js

@@ -0,0 +1,252 @@
+"use strict";
+
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _Button = _interopRequireWildcard(require("../Button"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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('Button', function () {
+  test('should have \'disabled\' HTML attribute when \'disabled\' prop is provided', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+      disabled: true,
+      children: "I am a disabled Button"
+    }));
+    var button = _react.screen.getByRole('button');
+    expect(button).toHaveAttribute('disabled');
+  });
+  test('should have default backgroundOpacity opaque', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.ButtonBase, {}));
+    var button = _react.screen.getByRole('button');
+    var expected = 'opaque';
+    expect(button).toHaveClass(expected);
+  });
+  test('should expand by default', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.ButtonBase, {}));
+    var button = _react.screen.getByRole('button');
+    var expected = 'focusExpand';
+    expect(button).toHaveClass(expected);
+  });
+  test('should be able to disable the expand focus effect', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.ButtonBase, {
+      focusEffect: "static"
+    }));
+    var button = _react.screen.getByRole('button');
+    var expected = 'focusStatic';
+    expect(button).toHaveClass(expected);
+  });
+  test('should have default minWidth', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.ButtonBase, {}));
+    var button = _react.screen.getByRole('button');
+    var expected = 'minWidth';
+    expect(button).toHaveClass(expected);
+  });
+  test('should have default size large', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.ButtonBase, {}));
+    var button = _react.screen.getByRole('button');
+    var expected = 'large';
+    expect(button).toHaveClass(expected);
+  });
+  describe('with no minWidth', function () {
+    test('should not have minWidth class', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.ButtonBase, {
+        minWidth: false
+      }));
+      var button = _react.screen.getByRole('button');
+      var expected = 'minWidth';
+      expect(button).not.toHaveClass(expected);
+    });
+  });
+  describe('with transparent backgroundOpacity', function () {
+    test('should have transparent class', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.ButtonBase, {
+        backgroundOpacity: "transparent"
+      }));
+      var button = _react.screen.getByRole('button');
+      var expected = 'transparent';
+      expect(button).toHaveClass(expected);
+    });
+    test('should not have have opaque class', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.ButtonBase, {
+        backgroundOpacity: "transparent"
+      }));
+      var button = _react.screen.getByRole('button');
+      var expected = 'opaque';
+      expect(button).not.toHaveClass(expected);
+    });
+  });
+  describe('with icon', function () {
+    test('should have check icon when specified', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+        icon: "checkmark",
+        children: "abc"
+      }));
+      var icon = _react.screen.getByText('✓');
+      expect(icon).toBeInTheDocument();
+      expect(icon).toHaveClass('icon');
+    });
+    test('should not have minWidth class with only icon', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+        icon: "check"
+      }));
+      var button = _react.screen.getByRole('button');
+      var expected = 'minWidth';
+      expect(button).not.toHaveClass(expected);
+    });
+    test('should have iconAfter class with text and icon', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+        icon: "check",
+        iconPosition: "after",
+        children: "text"
+      }));
+      var button = _react.screen.getByRole('button');
+      var expected = 'iconAfter';
+      expect(button).toHaveClass(expected);
+    });
+    test('should have iconBefore class with text and icon', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+        icon: "check",
+        iconPosition: "before",
+        children: "text"
+      }));
+      var button = _react.screen.getByRole('button');
+      var expected = 'iconBefore';
+      expect(button).toHaveClass(expected);
+    });
+    test('should not have iconPosition classes with only icon', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+        icon: "check"
+      }));
+      var button = _react.screen.getByRole('button');
+      expect(button).not.toHaveClass('iconBefore');
+      expect(button).not.toHaveClass('iconAfter');
+    });
+    test('should have iconOnly class when there is no children', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+        icon: "check"
+      }));
+      var button = _react.screen.getByRole('button');
+      var expected = 'iconOnly';
+      expect(button).toHaveClass(expected);
+    });
+  });
+  describe('with color', function () {
+    test('should have hasColor class when a color is specified', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+        color: "red",
+        children: "abc"
+      }));
+      var button = _react.screen.getByRole('button');
+      var expected = 'hasColor';
+      expect(button).toHaveClass(expected);
+    });
+    test('should not have hasColor when no color is specified', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+        children: "abc"
+      }));
+      var button = _react.screen.getByRole('button');
+      var expected = 'hasColor';
+      expect(button).not.toHaveClass(expected);
+    });
+    test('should have red class', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+        color: "red",
+        children: "abc"
+      }));
+      var button = _react.screen.getByRole('button');
+      var expected = 'red';
+      expect(button).toHaveClass(expected);
+    });
+    test('should have blue class', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+        color: "blue",
+        children: "abc"
+      }));
+      var button = _react.screen.getByRole('button');
+      var expected = 'blue';
+      expect(button).toHaveClass(expected);
+    });
+    test('should have yellow class', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+        color: "yellow",
+        children: "abc"
+      }));
+      var button = _react.screen.getByRole('button');
+      var expected = 'yellow';
+      expect(button).toHaveClass(expected);
+    });
+    test('should have green class', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+        color: "green",
+        children: "abc"
+      }));
+      var button = _react.screen.getByRole('button');
+      var expected = 'green';
+      expect(button).toHaveClass(expected);
+    });
+  });
+  describe('with shadowed', function () {
+    test('should have shadowed class when the background is transparent', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+        shadowed: true,
+        backgroundOpacity: "transparent"
+      }));
+      var button = _react.screen.getByRole('button');
+      var expected = 'shadowed';
+      expect(button).toHaveClass(expected);
+    });
+    test('should have shadowed class when the background is undefined and has icon only', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+        shadowed: true,
+        icon: "check"
+      }));
+      var button = _react.screen.getByRole('button');
+      var expected = 'shadowed';
+      expect(button).toHaveClass(expected);
+    });
+    test('should not have shadowed class when the background is not transparent', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+        shadowed: true,
+        backgroundOpacity: "opaque"
+      }));
+      var button = _react.screen.getByRole('button');
+      var expected = 'shadowed';
+      expect(button).not.toHaveClass(expected);
+    });
+  });
+  describe('events', function () {
+    test('should call onClick when not disabled', /*#__PURE__*/_asyncToGenerator(function* () {
+      var handleClick = jest.fn();
+      var user = _userEvent["default"].setup();
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+        onClick: handleClick,
+        children: "I am not a disabled Button"
+      }));
+      var button = _react.screen.getByText('I am not a disabled Button');
+      yield user.click(button);
+      expect(handleClick).toHaveBeenCalled();
+    }));
+    test('should not call onClick when disabled', /*#__PURE__*/_asyncToGenerator(function* () {
+      var handleClick = jest.fn();
+      var user = _userEvent["default"].setup();
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+        disabled: true,
+        onClick: handleClick,
+        children: "I am a disabled Button"
+      }));
+      var button = _react.screen.getByText('I am a disabled Button');
+      yield user.click(button);
+      expect(handleClick).not.toHaveBeenCalled();
+    }));
+    test('should have "Select" voice intent in the node of "role=button"', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+        children: "Hello"
+      }));
+      var button = _react.screen.getByRole('button');
+      expect(button).toHaveAttribute('data-webos-voice-intent', 'Select');
+    });
+  });
+});

package/CHANGELOG.md

@@ -0,0 +1,170 @@
+# Change Log
+
+The following is a curated list of changes in the Enact limestone module, newest changes on the top.
+
+## [1.3.0] - 2025-08-08
+
+### Added
+
+- `limestone/Card` prop `imageSize` to set the size of card image
+- `limestone/Icon` supported icon list, adding new icons
+- `limestone/Input` prop `buttons`
+- `limestone/MediaPlayer.Times` prop `includeHour` to conditionally show hour for current and total time
+- `limestone/VideoPlayer` prop `includeTimeHour` to conditionally show hour for current and total time
+
+### Changed
+
+- All components in `light` skin and high-contrast mode styling to match the latest GUI
+- `limestone/Card` to display `captions` on focus
+- `limestone/CheckboxItem` styling to match the latest GUI
+- `limestone/FlexiblePopupPanels` styling to match the latest GUI
+- `limestone/FormCheckboxItem` styling to match the latest GUI
+- `limestone/MediaOverlay` styling to match the latest GUI
+- `limestone/RadioItem` styling to match the latest GUI
+- `limestone/TabLayout` vertical to be collapsed in portrait mode
+- `limestone/Tooltip` styling to match the latest GUI
+
+### Fixed
+
+- `limestone/Card` for `focusRing` mode
+- `limestone/Card` `background` for captions
+- `limestone/Icon` medium size
+- `limestone/Popup` to restore focus properly when popup hides
+- `limestone/QuickGuidePanels` navigation buttons position
+- `limestone/Scroller` to prevent the native scrolling behavior caused by keydown events only when a popup is open
+- `limestone/Scroller` to restore focus when focus is lost after scroll by voice control
+- `limestone/Scroller` with `editable` prop to work properly with deployed apps
+- `limestone/Scroller` with `editable` prop to recognize button if clickEvent is triggered for `Button` background 
+- `limestone/TabLayout` to maintain the same scroller position when `Tabs` are collapsed or expanded
+- `limestone/VideoPlayer` size of the icons from the control buttons
+
+## [1.2.0] - 2025-07-11
+
+### Added
+
+- `limestone/Chip` prop `id` to manage focus properly
+
+### Changed
+
+- `limestone/ActionGuide` styling to match the latest GUI
+- `limestone/IconItem` styling to match the latest GUI
+- `limestone/ImageItem` styling to match the latest GUI
+- `limestone/KeyGuide` styling to match the latest GUI
+- `limestone/Slider` styling to match the latest GUI
+- `limestone/Spinner` styling to match the latest GUI
+- `limestone/TimePicker` styling to match the latest GUI
+- `limestone/VideoPlayer` styling to match the latest GUI
+
+### Fixed
+
+- `limestone/Chips` to handle focus properly when `children` changes
+- `limestone/FixedPopupPanels` to work with `noAnimation`
+- `limestone/FlexiblePopupPanels` to work with `noAnimation`
+- `limestone/InputPopup` prop `defaultValue` to be displayed when it's set
+- `limestone/TooltipDecorator` to change position if wrapped component changes size
+- `limestone/WizardPanels` title visibility when `prevButton` or `nextButton` are set to `false`
+
+## [1.1.0] - 2025-06-25
+
+### Added
+
+- `limestone/ContextualPopup` `large` type `offset`
+- `limestone/Icon` supported icon list, adding new icons
+- `limestone/ImageItem` prop `wideImage` to support wide image
+
+### Changed
+
+- `limestone/Alert` styling to match the latest GUI
+- `limestone/Button` styling to match the latest GUI
+- `limestone/Button` font-size for non-latin locale
+- `limestone/Dropdown` styling to match the latest GUI
+- `limestone/ImageItem` styling to match the latest GUI
+- `limestone/Input` styling to match the latest GUI
+- `limestone/PageViews` indicator styling to match the latest GUI
+
+### Fixed
+
+- `limestone/Button` min-width for `iconOnly` button in large text mode
+- `limestone/ImageItem` props `children` and `label` to accept node type
+- `limestone/TimePicker` flickering on the hour picker when the meridiem value change
+
+## [1.0.0] - 2025-06-13
+
+### Added
+
+- `limestone/Chips`, a new container component that groups and manages multiple `limestone/Chips.Chip` for improved layout and interaction
+
+### Changed
+
+- `limestone/Chips.Chip` styling to match the latest GUI
+- `limestone/TabLayout` styling to match the latest GUI
+
+## [1.0.0-rc.2] - 2025-06-04
+
+### Changed
+
+- `limestone/ContextualMenuDecorator` styling to match the latest GUI
+- `limestone/FixedPopupPanels` styling to match the latest GUI
+
+### Fixed
+
+- `limestone/TabLayout` to focus to the last focused tab when focus enters to the tab group
+
+## [1.0.0-rc.1] - 2025-05-29
+
+### Added
+
+- `limestone/Icon` supported icon list, adding new icons
+- `limestone/TabLayout` prop `primaryIndex` to focus primary tab when pressing back key from other tabs or initial rendering
+
+### Changed
+
+- `limestone/BodyText` styling to match the latest GUI
+- `limestone/DatePicker` styling to match the latest GUI
+- `limestone/DayPicker` styling to match the latest GUI
+- `limestone/Heading` prop `size` default value to `tiny` and styling to match the latest GUI
+- `limestone/PageViews` styling to match the latest GUI
+- `limestone/Panels` styling to match the latest GUI
+- `limestone/Panels.Header` styling to match the latest GUI
+- `limestone/PopupTabLayout` styling to match the latest GUI
+- `limestone/ProgressButton` styling to match the latest GUI
+- `limestone/Steps` styling to match the latest GUI
+- `limestone/Switch` styling to match the latest GUI
+- `limestone/SwitchItem` styling to match the latest GUI
+- `limestone/WizardPanels` styling to match the latest GUI
+
+### Fixed
+
+- `limestone/ContextualPopupDecorator` to update popup position properly when Wrapped component updated
+- `limestone/Input.InputField` to receive focus properly when navigating with directional keys
+- `limestone/Input.InputField` to receive focus properly when not contained in the same SpotlightContainer
+
+## [1.0.0-beta.1] - 2025-04-29
+
+### Added
+
+- `limestone/Card` prop `secondaryLabel`
+
+### Changed
+
+- `limestone/Button` styling to match the latest GUI
+- `limestone/Checkbox` styling to match the latest GUI
+- `limestone/Dropdown` styling to match the latest GUI
+- `limestone/Input.InputField` styling to match the latest GUI
+- `limestone/Item` styling to match the latest GUI
+- `limestone/Picker` styling to match the latest GUI
+- `limestone/ProgressBar` styling to match the latest GUI
+- `limestone/RadioItem` styling to match the latest GUI
+- `limestone/Scroller` styling to match the latest GUI
+- `limestone/Tab` styling to match the latest GUI
+- `limestone/VirtualList` styling to match the latest GUI
+- `limestone/WizardPanels` to marquee subtitle
+
+### Fixed
+
+- `limestone/ContextualPopupDecorator` to focus content only after the state has been updated when popup opens
+- `limestone/Scroller` with `editable` prop to not move hidden items
+
+## [1.0.0-alpha.1] - 2025-04-04
+
+Initial alpha release.

package/Card/Card.d.ts

@@ -0,0 +1,138 @@
+// Type definitions for limestone/Card
+
+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 { CardProps as ui_Card_CardProps } from "@enact/ui/Card";
+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 CardBaseProps extends ui_Card_CardProps {
+  /**
+   * The primary caption displayed with the image.
+   */
+  children: string;
+  /**
+ * Source for the image.
+String value or Object of values used to determine which image will appear on
+a specific screenSize.
+ */
+  src: string | object;
+  /**
+ * Determines whether the caption will be placed over the image or not.
+It only applies when  `orientation`  is  `'vertical'` .
+ */
+  captionOverlay?: boolean;
+  /**
+ * Determines whether the caption will be placed over the image and shown only on card focus.
+It only applies when  `orientation`  is  `'vertical'` .
+ */
+  captionOverlayOnFocus?: boolean;
+  /**
+   * Centers the captions when  `imageIconSrc`  is not provided.
+   */
+  centered?: boolean;
+  /**
+ * Customizes the component by mapping the supplied collection of CSS class names to the
+corresponding internal elements and states of this component.
+ */
+  css?: object;
+  /**
+   * Disables Card and becomes non-interactive.
+   */
+  disabled?: boolean;
+  /**
+ * 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.
+ */
+  hasContainer?: boolean;
+  /**
+ * Source for the image icon.
+ * 
+ * String value or Object of values used to determine which image will appear on
+a specific screenSize. This prop is only used when  `orientation`  is  `'vertical'` .
+ */
+  imageIconSrc?: string | object;
+  /**
+   * The size of the image.
+   *
+   * The following properties should be provided:
+   * *  `height`  - The height of the image
+   * *  `width`  - The width of the image
+   */
+  imageSize?: object;
+  /**
+   * A secondary caption displayed with the image.
+   */
+  label?: string;
+  /**
+   * The layout orientation of the component.
+   */
+  orientation?: "horizontal" | "vertical";
+  /**
+   * A placeholder image to be displayed before the image is loaded.
+   */
+  placeholder?: string;
+  /**
+   * The primary badge image source.
+   */
+  primaryBadgeSrc?: string | object;
+  /**
+   * Set to  `true`  to display the image with rounded corners.
+   */
+  roundedImage?: boolean;
+  /**
+   * The secondary badge image source.
+   */
+  secondaryBadgeSrc?: string | object;
+  /**
+   * A ternary caption displayed with the image.
+   */
+  secondaryLabel?: string;
+  /**
+   * Applies a selected visual effect to the image.
+   */
+  selected?: boolean;
+}
+/**
+ * A Limestone styled base component for   .
+ */
+
+export class CardBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, CardBaseProps>
+> {}
+
+export interface CardDecoratorProps
+  extends Merge<
+    Merge<
+      limestone_Marquee_MarqueeControllerProps,
+      spotlight_Spottable_SpottableProps
+    >,
+    limestone_Skinnable_SkinnableProps
+  > {}
+export function CardDecorator<P>(
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & CardDecoratorProps>;
+
+export interface CardProps extends Merge<CardBaseProps, CardDecoratorProps> {}
+/**
+ * A Limestone-styled Card.
+ * 
+ * Usage:
+ * ```
+<Card
+  src="https://placehold.co/100x100/9037ab/ffffff/png?text=Image0"
+  label="A secondary caption"
+>
+ The primary caption
+</Card>
+```
+ */
+
+export class Card extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, CardProps>
+> {}
+
+export default Card;