@enact/limestone 1.3.0

package/ProgressButton/ProgressButton.module.css

@@ -0,0 +1,147 @@
+.progressButton .progressContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.progressButton .icon {
+  position: absolute;
+  margin: 0;
+  font-size: 0.625rem;
+}
+.progressButton .progressBar {
+  margin: 0;
+  text-align: initial;
+}
+.progressButton:global(.neutral) .progressBar.radial .bar {
+  border-color: color(from var(--semantic-color-on-surface-white) srgb r g b / 0.2);
+}
+.progressButton:global(.neutral) .progressBar.radial .bar .fill {
+  border-color: var(--semantic-color-on-surface-main);
+}
+:global(.spotlight-input-key) .progressButton:global(.neutral):global(.spottable):focus .progressBar.radial .bar,
+:global(.spotlight-input-mouse) .progressButton:global(.neutral):global(.spottable):focus .progressBar.radial .bar {
+  border-color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.2);
+}
+:global(.spotlight-input-key) .progressButton:global(.neutral):global(.spottable):focus .progressBar.radial .bar .fill,
+:global(.spotlight-input-mouse) .progressButton:global(.neutral):global(.spottable):focus .progressBar.radial .bar .fill {
+  border-color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) .progressButton:global(.neutral):global(.spottable):active .progressBar.radial .bar {
+  border-color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.2);
+}
+:global(.spotlight-input-touch) .progressButton:global(.neutral):global(.spottable):active .progressBar.radial .bar .fill {
+  border-color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.enact-a11y-high-contrast) .progressButton:global(.neutral):global(.highContrast) .progressBar.radial .bar {
+  border-color: color(from var(--semantic-color-on-surface-white) srgb r g b / 0.2);
+}
+:global(.enact-a11y-high-contrast) .progressButton:global(.neutral):global(.highContrast) .progressBar.radial .bar .fill {
+  border-color: var(--semantic-color-on-surface-main);
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .progressButton:global(.neutral):global(.highContrast):global(.spottable):focus .progressBar.radial .bar,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .progressButton:global(.neutral):global(.highContrast):global(.spottable):focus .progressBar.radial .bar {
+  border-color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.2);
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .progressButton:global(.neutral):global(.highContrast):global(.spottable):focus .progressBar.radial .bar .fill,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .progressButton:global(.neutral):global(.highContrast):global(.spottable):focus .progressBar.radial .bar .fill {
+  border-color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .progressButton:global(.neutral):global(.highContrast):global(.spottable):active .progressBar.radial .bar {
+  border-color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.2);
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .progressButton:global(.neutral):global(.highContrast):global(.spottable):active .progressBar.radial .bar .fill {
+  border-color: var(--semantic-color-on-surface-main-focused);
+}
+.progressButton:global(.light) .progressBar.radial .bar {
+  border-color: color(from var(--semantic-color-on-surface-white) srgb r g b / 0.2);
+}
+.progressButton:global(.light) .progressBar.radial .bar .fill {
+  border-color: var(--semantic-color-on-surface-main);
+}
+:global(.spotlight-input-key) .progressButton:global(.light):global(.spottable):focus .progressBar.radial .bar,
+:global(.spotlight-input-mouse) .progressButton:global(.light):global(.spottable):focus .progressBar.radial .bar {
+  border-color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.2);
+}
+:global(.spotlight-input-key) .progressButton:global(.light):global(.spottable):focus .progressBar.radial .bar .fill,
+:global(.spotlight-input-mouse) .progressButton:global(.light):global(.spottable):focus .progressBar.radial .bar .fill {
+  border-color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) .progressButton:global(.light):global(.spottable):active .progressBar.radial .bar {
+  border-color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.2);
+}
+:global(.spotlight-input-touch) .progressButton:global(.light):global(.spottable):active .progressBar.radial .bar .fill {
+  border-color: var(--semantic-color-on-surface-main-focused);
+}
+.progressButton:global(.game) {
+  --semantic-color-surface-default: #2d224c;
+  --semantic-color-surface-default-focused: #6d2fa1;
+  --semantic-color-on-surface-main-focused: #e6e6e6;
+}
+.progressButton:global(.game) .progressBar.radial .bar {
+  border-color: color(from var(--semantic-color-on-surface-white) srgb r g b / 0.2);
+}
+.progressButton:global(.game) .progressBar.radial .bar .fill {
+  border-color: var(--semantic-color-on-surface-main);
+}
+:global(.spotlight-input-key) .progressButton:global(.game):global(.spottable):focus .progressBar.radial .bar,
+:global(.spotlight-input-mouse) .progressButton:global(.game):global(.spottable):focus .progressBar.radial .bar {
+  border-color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.2);
+}
+:global(.spotlight-input-key) .progressButton:global(.game):global(.spottable):focus .progressBar.radial .bar .fill,
+:global(.spotlight-input-mouse) .progressButton:global(.game):global(.spottable):focus .progressBar.radial .bar .fill {
+  border-color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) .progressButton:global(.game):global(.spottable):active .progressBar.radial .bar {
+  border-color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.2);
+}
+:global(.spotlight-input-touch) .progressButton:global(.game):global(.spottable):active .progressBar.radial .bar .fill {
+  border-color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.green) .progressButton:global(.game) {
+  --semantic-color-surface-default: #1F2C24;
+  --semantic-color-surface-default-focused: #3ea07d;
+}
+:global(.green) .progressButton:global(.game) .progressBar.radial .bar {
+  border-color: color(from var(--semantic-color-on-surface-white) srgb r g b / 0.2);
+}
+:global(.green) .progressButton:global(.game) .progressBar.radial .bar .fill {
+  border-color: var(--semantic-color-on-surface-main);
+}
+:global(.spotlight-input-key) :global(.green) .progressButton:global(.game):global(.spottable):focus .progressBar.radial .bar,
+:global(.spotlight-input-mouse) :global(.green) .progressButton:global(.game):global(.spottable):focus .progressBar.radial .bar {
+  border-color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.2);
+}
+:global(.spotlight-input-key) :global(.green) .progressButton:global(.game):global(.spottable):focus .progressBar.radial .bar .fill,
+:global(.spotlight-input-mouse) :global(.green) .progressButton:global(.game):global(.spottable):focus .progressBar.radial .bar .fill {
+  border-color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) :global(.green) .progressButton:global(.game):global(.spottable):active .progressBar.radial .bar {
+  border-color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.2);
+}
+:global(.spotlight-input-touch) :global(.green) .progressButton:global(.game):global(.spottable):active .progressBar.radial .bar .fill {
+  border-color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.orange) .progressButton:global(.game) {
+  --semantic-color-surface-default: #422923;
+  --semantic-color-surface-default-focused: #b85f23;
+}
+:global(.orange) .progressButton:global(.game) .progressBar.radial .bar {
+  border-color: color(from var(--semantic-color-on-surface-white) srgb r g b / 0.2);
+}
+:global(.orange) .progressButton:global(.game) .progressBar.radial .bar .fill {
+  border-color: var(--semantic-color-on-surface-main);
+}
+:global(.spotlight-input-key) :global(.orange) .progressButton:global(.game):global(.spottable):focus .progressBar.radial .bar,
+:global(.spotlight-input-mouse) :global(.orange) .progressButton:global(.game):global(.spottable):focus .progressBar.radial .bar {
+  border-color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.2);
+}
+:global(.spotlight-input-key) :global(.orange) .progressButton:global(.game):global(.spottable):focus .progressBar.radial .bar .fill,
+:global(.spotlight-input-mouse) :global(.orange) .progressButton:global(.game):global(.spottable):focus .progressBar.radial .bar .fill {
+  border-color: var(--semantic-color-on-surface-main-focused);
+}
+:global(.spotlight-input-touch) :global(.orange) .progressButton:global(.game):global(.spottable):active .progressBar.radial .bar {
+  border-color: color(from var(--semantic-color-on-surface-main-focused) srgb r g b / 0.2);
+}
+:global(.spotlight-input-touch) :global(.orange) .progressButton:global(.game):global(.spottable):active .progressBar.radial .bar .fill {
+  border-color: var(--semantic-color-on-surface-main-focused);
+}

package/ProgressButton/package.json

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

package/ProgressButton/tests/ProgressButton-specs.js

@@ -0,0 +1,71 @@
+"use strict";
+
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _ProgressButton = require("../ProgressButton");
+var _jsxRuntime = require("react/jsx-runtime");
+describe('ProgressButton Specs', function () {
+  test('should show text', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressButton.ProgressButtonBase, {
+      children: "Progress Button"
+    }));
+    var expected = 'Progress Button';
+    var actual = _react.screen.getByRole('button').textContent;
+    expect(actual).toBe(expected);
+  });
+  test('should have a root className `progressButton`', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressButton.ProgressButtonBase, {
+      children: "Progress Button"
+    }));
+    var button = _react.screen.getByRole('button');
+    var expected = 'progressButton';
+    expect(button).toHaveClass(expected);
+  });
+  test('should show radial progress', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressButton.ProgressButtonBase, {
+      showProgress: true,
+      children: "Progress Button"
+    }));
+    var progressBar = _react.screen.getByRole('progressbar');
+    var expected = 'radial';
+    expect(progressBar).toHaveClass(expected);
+  });
+  test('should show 0.5 progress', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressButton.ProgressButtonBase, {
+      showProgress: true,
+      progress: 0.5,
+      children: "Progress Button"
+    }));
+    var progressBar = _react.screen.getByRole('progressbar');
+    var expectedValue = '0.5';
+    expect(progressBar).toHaveStyle({
+      '--ui-progressbar-proportion-end': expectedValue
+    });
+  });
+  test('should show default icon `stop`', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressButton.ProgressButtonBase, {
+      showProgress: true,
+      progress: 0.5,
+      children: "Progress Button"
+    }));
+
+    // decimal converted charCode of Unicode 'stop' character
+    var expectedCode = 983004;
+    var actualCode = _react.screen.getByRole('button').textContent.codePointAt();
+    expect(actualCode).toBe(expectedCode);
+  });
+  test('should support a custom icon', function () {
+    var customIcon = 'star';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressButton.ProgressButtonBase, {
+      showProgress: true,
+      progress: 0.5,
+      icon: customIcon,
+      children: "Progress Button"
+    }));
+
+    // decimal converted charCode of Unicode 'star' character
+    var expectedCode = 983080;
+    var actualCode = _react.screen.getByRole('button').textContent.codePointAt();
+    expect(actualCode).toBe(expectedCode);
+  });
+});

package/QuickGuidePanels/Panel.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Panel = Panel;
+exports["default"] = void 0;
+var _react = require("react");
+var _PanelsRouter = require("../internal/Panels/PanelsRouter");
+/**
+ * Panel that sets the children for
+ * {@link limestone/QuickGuidePanels.QuickGuidePanels|QuickGuidePanels}.
+ *
+ * @class Panel
+ * @memberof limestone/QuickGuidePanels
+ * @ui
+ * @public
+ */
+function Panel(_ref) {
+  var ariaLabel = _ref['aria-label'],
+    children = _ref.children,
+    nextButton = _ref.nextButton,
+    prevButton = _ref.prevButton;
+  var set = (0, _react.use)(_PanelsRouter.PanelsContext);
+  (0, _react.useEffect)(function () {
+    if (set) {
+      set({
+        'aria-label': ariaLabel,
+        children: children,
+        nextButton: nextButton,
+        prevButton: prevButton
+      });
+    }
+  }, [ariaLabel, children, nextButton, prevButton, set]);
+  return null;
+}
+
+/**
+ * The aria-label for the Panel.
+ *
+ * Example:
+ * ```
+ * <QuickGuidePanels.Panel aria-label="This is a description for panel">
+ * ```
+ * @name aria-label
+ * @type {String}
+ * @memberof limestone/QuickGuidePanels.Panel.prototype
+ * @public
+ */
+
+/**
+ * The button to use in place of the standard next button.
+ *
+ * This prop accepts a component (e.g. `Button`), a component instance or a boolean value.
+ *
+ * If `false`, the button will not show. If set to a component, or `true`, the button will
+ * show. This will override the setting of
+ * {@link limestone/QuickGuidePanels.QuickGuidePanelsBase.nextButtonVisibility|nextButtonVisibility}.
+ *
+ * Example:
+ * ```
+ * nextButton={<Button icon="closex" aria-label="Quit">Close</Button>}
+ * ```
+ *
+ * @name nextButton
+ * @memberof limestone/QuickGuidePanels.Panel.prototype
+ * @type {Boolean|Component}
+ * @public
+ */
+
+/**
+ * The button to use in place of the standard prev button.
+ *
+ * This prop accepts a component (e.g. `Button`), a component instance or a boolean value.
+ *
+ * If `false`, the button will not show. If set to a component, or `true`, the button will
+ * show. This will override the setting of
+ * {@link limestone/QuickGuidePanels.QuickGuidePanelsBase.prevButtonVisibility|prevButtonVisibility}.
+ *
+ * Example:
+ * ```
+ * prevButton={<Button icon="closex" aria-label="Back">Back</Button>}
+ * ```
+ *
+ * @name prevButton
+ * @memberof limestone/QuickGuidePanels.Panel.prototype
+ * @type {Boolean|Component}
+ * @public
+ */
+var _default = exports["default"] = Panel;