@enact/limestone 1.3.0

package/.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,28 @@
+### Checklist
+
+* [ ] I have read and understand the [contribution guide](https://enactjs.com/docs/developer-guide/contributing/)
+* [ ] A [CHANGELOG entry](https://enactjs.com/docs/developer-guide/contributing/changelogs/) is included
+* [ ] At least one test case is included for this feature or bug fix
+* [ ] Documentation was added or is not needed
+* [ ] This is an API breaking change
+
+### Issue Resolved / Feature Added
+[//]: # (Describe the issue resolved or feature added by this pull request)
+
+
+### Resolution
+[//]: # (Does the code work as intended?)
+[//]: # (What is the impact of this change and *why* was it made?)
+
+
+### Additional Considerations
+[//]: # (How should the change be tested?)
+[//]: # (Are there any outstanding questions?)
+[//]: # (Were any side-effects caused by the change?)
+
+
+### Links
+[//]: # (Related issues, references)
+
+
+### Comments

package/.github/workflows/update-copyright-years.yml

@@ -0,0 +1,25 @@
+name: Update copyright year(s) in license file
+
+on:
+  schedule:
+    - cron: "0 0 4 1 *"
+
+jobs:
+  run:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+      with:
+        ref: develop
+        fetch-depth: 0
+    - uses: FantasticFiasco/action-update-license-year@v2
+      with:
+        token: ${{ secrets.GITHUB_TOKEN }}
+        path: | 
+          README.md
+          samples/sampler/README.md
+        branchName: license/{{currentYear}}
+        commitTitle: update license
+        commitBody: Let's keep legal happy.
+        prTitle: Update copyright years in README.md file
+        prBody: It's that time of the year, let's update the license.

package/.travis.yml

@@ -0,0 +1,40 @@
+dist: jammy
+language: node_js
+node_js:
+    - lts/*
+    - node
+sudo: false
+before_install:
+    - sudo apt-get update
+    - sudo apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev
+install:
+    - npm config set prefer-offline false
+    - npm install -g codecov
+    - git clone --branch=develop --depth 1 https://github.com/enactjs/cli ../cli
+    - pushd ../cli
+    - npm install
+    - npm link
+    - popd
+    - git clone --branch=develop --depth 1 https://github.com/enactjs/enact ../enact
+    - pushd ../enact
+    - npm uninstall @enact/ui-test-utils --prefix packages/i18n
+    - npm install
+    - npm run lerna exec -- --ignore enact-sampler --concurrency 1 -- npm --no-package-lock install
+    - npm run lerna exec -- --ignore enact-sampler --concurrency 1 -- npm --no-package-lock link
+    - npm run interlink
+    - popd
+    - rm -fr node_modules/@enact
+    - npm uninstall @enact/ui-test-utils
+    - npm install
+    - enact link
+script:
+    - echo -e "\x1b\x5b35;1m*** Starting tests...\x1b\x5b0m"
+    - npm test -- --runInBand --coverage
+    - codecov -t $CODECOV_TOKEN
+    - echo -e "\x1b\x5b35;1m*** Tests complete\x1b\x5b0m"
+    - echo -e "\x1b\x5b35;1m*** Starting eslint...\x1b\x5b0m"
+    - npm run lint -- -- --report-unused-disable-directives --max-warnings 0 .
+    - echo -e "\x1b\x5b35;1m*** eslint complete\x1b\x5b0m"
+    - echo -e "\x1b\x5b35;1m*** Starting docs validation...\x1b\x5b0m"
+    - npm run validate-docs
+    - echo -e "\x1b\x5b35;1m*** Docs validation complete\x1b\x5b0m"

package/ActionGuide/ActionGuide.d.ts

@@ -0,0 +1,73 @@
+// Type definitions for limestone/ActionGuide
+
+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 ActionGuideBaseProps {
+  /**
+   * The "aria-label" for the button.
+   */
+  buttonAriaLabel?: string;
+  /**
+   * The contents for the action guide.
+   */
+  children?: 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:
+ * *  `actionGuide`  - The root component class
+ */
+  css?: object;
+  /**
+   * Disables the button.
+   */
+  disabled?: boolean;
+  /**
+   * The icon displayed within the action guide.
+   */
+  icon?: string;
+  /**
+   * Called when Button is clicked.
+   */
+  onClick?: Function;
+}
+/**
+ * An Action Guide component.
+ * 
+ * This component is most often not used directly but may be composed within another component as it
+is within   .
+ */
+
+export class ActionGuideBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, ActionGuideBaseProps>
+> {}
+
+export interface ActionGuideDecoratorProps
+  extends limestone_Skinnable_SkinnableProps {}
+export function ActionGuideDecorator<P>(
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & ActionGuideDecoratorProps>;
+
+export interface ActionGuideProps
+  extends Merge<ActionGuideBaseProps, ActionGuideDecoratorProps> {}
+/**
+ * An Action Guide component, ready to use in Limestone applications.
+ * 
+ * `ActionGuide`  may be used to display text and icon to describe an action.
+ * 
+ * Usage:
+ * ```
+<ActionGuide icon="arrowlargedown">Hello</ActionGuide>
+```
+ */
+
+export class ActionGuide extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, ActionGuideProps>
+> {}
+
+export default ActionGuide;

package/ActionGuide/ActionGuide.js

@@ -0,0 +1,164 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ActionGuideDecorator = exports.ActionGuideBase = exports.ActionGuide = void 0;
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _Pure = _interopRequireDefault(require("@enact/ui/internal/Pure"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _compose = _interopRequireDefault(require("ramda/src/compose"));
+var _$L = _interopRequireDefault(require("../internal/$L"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _Marquee = require("../Marquee");
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _ActionGuideModule = _interopRequireDefault(require("./ActionGuide.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["buttonAriaLabel", "children", "css", "disabled", "icon", "onClick"];
+/**
+ * Limestone styled action guide component and behaviors.
+ *
+ * @example
+ * <ActionGuide icon="arrowlargedown">Hello</ActionGuide>
+ *
+ * @module limestone/ActionGuide
+ * @exports ActionGuide
+ * @exports ActionGuideBase
+ * @exports ActionGuideDecorator
+ */
+/**
+ * An Action Guide component.
+ *
+ * This component is most often not used directly but may be composed within another component as it
+ * is within {@link limestone/ActionGuide.ActionGuide|ActionGuide}.
+ *
+ * @class ActionGuideBase
+ * @memberof limestone/ActionGuide
+ * @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 ActionGuideBase = exports.ActionGuideBase = (0, _kind["default"])({
+  name: 'ActionGuide',
+  propTypes: /** @lends limestone/ActionGuide.ActionGuideBase.prototype */{
+    /**
+     * The "aria-label" for the button.
+     *
+     * @type {String}
+     * @public
+     */
+    buttonAriaLabel: _propTypes["default"].string,
+    /**
+     * The contents for the action guide.
+     *
+     * @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.
+     *
+     * The following classes are supported:
+     *
+     * * `actionGuide` - The root component class
+     *
+     * @type {Object}
+     * @public
+     */
+    css: _propTypes["default"].object,
+    /**
+     * Disables the button.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    disabled: _propTypes["default"].bool,
+    /**
+     * The icon displayed within the action guide.
+     *
+     * @type {String}
+     * @default 'arrowsmalldown'
+     * @public
+     */
+    icon: _propTypes["default"].string,
+    /**
+     * Called when Button is clicked.
+     *
+     * @type {Function}
+     * @param {Object} event
+     * @public
+     */
+    onClick: _propTypes["default"].func
+  },
+  defaultProps: {
+    icon: 'arrowsmalldown'
+  },
+  styles: {
+    css: _ActionGuideModule["default"],
+    className: 'actionGuide',
+    publicClassNames: ['actionGuide']
+  },
+  render: function render(_ref) {
+    var buttonAriaLabel = _ref.buttonAriaLabel,
+      children = _ref.children,
+      css = _ref.css,
+      disabled = _ref.disabled,
+      icon = _ref.icon,
+      onClick = _ref.onClick,
+      rest = _objectWithoutProperties(_ref, _excluded);
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, rest), {}, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+        "aria-label": buttonAriaLabel ? buttonAriaLabel : (0, _$L["default"])('More'),
+        css: css,
+        className: css.icon,
+        disabled: disabled,
+        icon: icon,
+        minWidth: false,
+        onClick: onClick
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Marquee.Marquee, {
+        className: css.label,
+        marqueeOn: "render",
+        alignment: "center",
+        children: children
+      })]
+    }));
+  }
+});
+
+/**
+ * Applies Limestone specific behaviors to {@link limestone/ActionGuide.ActionGuideBase|ActionGuide}.
+ *
+ * @hoc
+ * @memberof limestone/ActionGuide
+ * @mixes limestone/Skinnable.Skinnable
+ * @public
+ */
+var ActionGuideDecorator = exports.ActionGuideDecorator = (0, _compose["default"])(_Pure["default"], _Skinnable["default"]);
+
+/**
+ * An Action Guide component, ready to use in Limestone applications.
+ *
+ * `ActionGuide` may be used to display text and icon to describe an action.
+ *
+ * Usage:
+ * ```
+ * <ActionGuide icon="arrowlargedown">Hello</ActionGuide>
+ * ```
+ *
+ * @class ActionGuide
+ * @memberof limestone/ActionGuide
+ * @extends limestone/ActionGuide.ActionGuideBase
+ * @mixes limestone/ActionGuide.ActionGuideDecorator
+ * @ui
+ * @public
+ */
+var ActionGuide = exports.ActionGuide = ActionGuideDecorator(ActionGuideBase);
+var _default = exports["default"] = ActionGuide;

package/ActionGuide/ActionGuide.module.css

@@ -0,0 +1,73 @@
+.actionGuide {
+  text-align: center;
+  max-width: 31.25rem;
+  margin: 0 auto;
+  line-height: 0;
+  padding: var(--primitive-spacing-12) 0 var(--primitive-spacing-36) 0;
+}
+.actionGuide .button {
+  margin: 0 0 -0.25rem 0;
+  height: 1.75rem;
+  min-width: 1.75rem;
+  width: 1.75rem;
+}
+.actionGuide .label {
+  font-family: "Limestone";
+  font-size: var(--primitive-font-size-48);
+  font-weight: var(--primitive-font-weight-regular);
+  height: 1.25rem;
+  line-height: 1.25rem;
+}
+:global(.enact-locale-non-latin) .actionGuide .label {
+  font-family: "Limestone";
+  font-size: var(--primitive-font-size-48);
+}
+.actionGuide:global(.neutral) .icon .icon {
+  color: var(--semantic-color-on-background-actionguide);
+}
+.actionGuide:global(.neutral) .label {
+  color: var(--semantic-color-on-background-actionguide);
+}
+:global(.enact-a11y-high-contrast) .actionGuide:global(.neutral):global(.highContrast) .icon .icon {
+  color: var(--semantic-color-on-background-actionguide);
+}
+:global(.enact-a11y-high-contrast) .actionGuide:global(.neutral):global(.highContrast) .label {
+  color: var(--semantic-color-on-background-actionguide);
+}
+.actionGuide:global(.light) .icon .icon {
+  color: var(--semantic-color-on-background-actionguide);
+}
+.actionGuide:global(.light) .label {
+  color: var(--semantic-color-on-background-actionguide);
+}
+.actionGuide:global(.game) {
+  --semantic-color-surface-default: #2d224c;
+  --semantic-color-surface-default-focused: #6d2fa1;
+  --semantic-color-on-surface-main-focused: #e6e6e6;
+}
+.actionGuide:global(.game) .icon .icon {
+  color: var(--semantic-color-on-background-actionguide);
+}
+.actionGuide:global(.game) .label {
+  color: var(--semantic-color-on-background-actionguide);
+}
+:global(.green) .actionGuide:global(.game) {
+  --semantic-color-surface-default: #1F2C24;
+  --semantic-color-surface-default-focused: #3ea07d;
+}
+:global(.green) .actionGuide:global(.game) .icon .icon {
+  color: var(--semantic-color-on-background-actionguide);
+}
+:global(.green) .actionGuide:global(.game) .label {
+  color: var(--semantic-color-on-background-actionguide);
+}
+:global(.orange) .actionGuide:global(.game) {
+  --semantic-color-surface-default: #422923;
+  --semantic-color-surface-default-focused: #b85f23;
+}
+:global(.orange) .actionGuide:global(.game) .icon .icon {
+  color: var(--semantic-color-on-background-actionguide);
+}
+:global(.orange) .actionGuide:global(.game) .label {
+  color: var(--semantic-color-on-background-actionguide);
+}

package/ActionGuide/package.json

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

package/ActionGuide/tests/ActionGuide-specs.js

@@ -0,0 +1,51 @@
+"use strict";
+
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _ActionGuide = require("../ActionGuide");
+var _jsxRuntime = require("react/jsx-runtime");
+describe('ActionGuide', function () {
+  test('should render `icon`', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionGuide.ActionGuideBase, {
+      "data-testid": "actionGuide",
+      icon: "star"
+    }));
+    var expected = 983080; // decimal converted charCode of Unicode 'star' character
+    var actual = _react.screen.getByTestId('actionGuide').children.item(0).textContent.codePointAt();
+    expect(actual).toBe(expected);
+  });
+  test('should render `children`', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionGuide.ActionGuideBase, {
+      "data-testid": "actionGuide",
+      children: "content"
+    }));
+    var actual = _react.screen.getByText('content');
+    expect(actual).toBeInTheDocument();
+  });
+  test('should set "buttonAriaLabel" to action guide', function () {
+    var label = 'custom aria-label';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionGuide.ActionGuideBase, {
+      "data-testid": "actionGuide",
+      buttonAriaLabel: label
+    }));
+    var actual = _react.screen.getByRole('button', {
+      name: label
+    });
+    expect(actual).toBeInTheDocument();
+  });
+  describe('CSS override', function () {
+    test('should allow `actionGuide` to be augmented', function () {
+      var css = {
+        actionGuide: 'test-action-guide'
+      };
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionGuide.ActionGuideBase, {
+        "data-testid": "actionGuide",
+        css: css,
+        children: "content"
+      }));
+      var expected = css.actionGuide;
+      var actual = _react.screen.getByTestId('actionGuide');
+      expect(actual).toHaveClass(expected);
+    });
+  });
+});

package/Alert/Alert.d.ts

@@ -0,0 +1,155 @@
+// Type definitions for limestone/Alert
+
+import * as React from "react";
+import { SlottableProps as ui_Slottable_SlottableProps } from "@enact/ui/Slottable";
+
+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 AlertImageProps {
+  /**
+ * String value or Object of values used to determine which image will appear for
+a specific component size.
+ */
+  src: string | object;
+  /**
+   * Type of image to appear in the alert component. There are two types:
+   * *  `icon`  - A small square sized image type
+   * *  `thumbnail`  - A common image type
+   */
+  type: "icon" | "thumbnail";
+  /**
+   * Size of the image when  `type`  is set to  `icon` .
+   */
+  iconSize?: "small" | "large";
+}
+/**
+ * An image for use in an Alert.
+ */
+
+export class AlertImage extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, AlertImageProps>
+> {}
+
+export interface AlertBaseProps {
+  /**
+   * Buttons to be included under the component.
+   *
+   * Typically, up to 3 buttons are used.
+   */
+  buttons?: JSX.Element | JSX.Element[];
+  /**
+ * The contents of the body of the component.
+ * 
+ * Only shown when  `type="overlay"` . If  `children`  is text-only, it will be wrapped with
+  .
+ */
+  children?: React.ReactNode;
+  /**
+ * 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:
+ * *  `alert`  - The root class name
+ * *  `content`  - The content component class
+ * *  `fullscreen`  - Applied to a  `type='fullscreen'`  alert
+ * *  `overlay`  - Applied to a  `type='overlay'`  alert
+ * *  `title`  - The title component class
+ */
+  css?: object;
+  /**
+   * Image to be included in the Alert component.
+   *
+   * It is recommended to use the  `AlertImage`  component.
+   */
+  image?: JSX.Element;
+  /**
+   * Called when the user requests to close the Alert.
+   *
+   * This also includes pressing the cancel key.
+   */
+  onClose?: Function;
+  /**
+   * Called after the transition to hide the Alert has finished.
+   */
+  onHide?: Function;
+  /**
+   * Opens the Alert.
+   */
+  open?: boolean;
+  /**
+   * Position of the Alert when type= `overlay` .
+   *
+   * There are five types:
+   * *  `center`  - Popup in the center of the screen
+   * *  `bottom left`  - Popup in the bottom left of the screen
+   * *  `bottom right`  - Popup in the bottom right of the screen
+   * *  `top left`  - Popup in the top left of the screen
+   * *  `top right`  - Popup in the top right of the screen
+   */
+  overlayPosition?:
+    | "bottom left"
+    | "bottom right"
+    | "center"
+    | "top left"
+    | "top right";
+  /**
+   * The primary text displayed.
+   *
+   * Only shown when  `type="fullscreen"` .
+   */
+  title?: string;
+  /**
+   * Type of popup.
+   *
+   * There are two types:
+   * *  `fullscreen`  - Full screen popup
+   * *  `overlay`  - Popup in the center of the screen
+   */
+  type?: "fullscreen" | "overlay";
+}
+/**
+ * A modal Alert component.
+ * 
+ * This component is most often not used directly but may be composed within another component as it
+is within   .
+ */
+
+export class AlertBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, AlertBaseProps>
+> {}
+
+export interface AlertProps
+  extends Merge<AlertBaseProps, ui_Slottable_SlottableProps> {}
+/**
+ * A modal Alert component, ready to use in Limestone applications.
+ * 
+ * `Alert`  may be used to interrupt a workflow to receive feedback from the user.
+The dialog consists of a title, a message, and an area for additional
+  .
+ * 
+ * Usage:
+ * ```
+<Alert
+  open={this.state.open}
+  title="An Important Alert"
+>
+  <image>
+    <AlertImage src={this.state.src} type="thumbnail" />
+  </image>
+
+  Body text for alert. Components may also be used here for greater customizability.
+
+  <buttons>
+    <Button>Button 1</Button>
+    <Button>Button 2</Button>
+  </buttons>
+</Alert>
+```
+ */
+
+export class Alert extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, AlertProps>
+> {}
+
+export default Alert;