@enact/limestone 1.3.0

package/ProgressBar/ProgressBar.js

@@ -0,0 +1,223 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProgressBarDecorator = exports.ProgressBarBase = exports.ProgressBar = void 0;
+Object.defineProperty(exports, "ProgressBarTooltip", {
+  enumerable: true,
+  get: function get() {
+    return _ProgressBarTooltip.ProgressBarTooltip;
+  }
+});
+exports["default"] = void 0;
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _ComponentOverride = _interopRequireDefault(require("@enact/ui/ComponentOverride"));
+var _ProgressBar = _interopRequireDefault(require("@enact/ui/ProgressBar"));
+var _Pure = _interopRequireDefault(require("@enact/ui/internal/Pure"));
+var _Slottable = _interopRequireDefault(require("@enact/ui/Slottable"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _compose = _interopRequireDefault(require("ramda/src/compose"));
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _ProgressBarTooltip = require("./ProgressBarTooltip");
+var _ProgressBarModule = _interopRequireDefault(require("./ProgressBar.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["css", "orientation", "progress", "tooltip"];
+/**
+ * Provides Limestone-themed progress bar component.
+ *
+ * @example
+ * <ProgressBar progress={0.5} backgroundProgress={0.75} />
+ *
+ * @module limestone/ProgressBar
+ * @exports ProgressBar
+ * @exports ProgressBarBase
+ * @exports ProgressBarDecorator
+ * @exports ProgressBarTooltip
+ */
+/**
+ * Renders a limestone-styled progress bar.
+ *
+ * @class ProgressBarBase
+ * @memberof limestone/ProgressBar
+ * @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 ProgressBarBase = exports.ProgressBarBase = (0, _kind["default"])({
+  name: 'ProgressBar',
+  propTypes: /** @lends limestone/ProgressBar.ProgressBarBase.prototype */{
+    /**
+     * The proportion of the loaded portion of the progress bar.
+     *
+     * * Valid values are between `0` and `1`.
+     *
+     * @type {Number}
+     * @default 0
+     * @public
+     */
+    backgroundProgress: _propTypes["default"].number,
+    /**
+     * 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:
+     *
+     * * `progressBar` - The root component class
+     * * `radial` - Applied when `orientation` is `'radial'`
+     *
+     * @type {Object}
+     * @public
+     */
+    // `'bar` and `fill'` were intentionally excluded from the above documented
+    // exported classes as they do not appear to provide value to the end-developer, but are
+    // needed by ProgressButton internally for its design guidelines.
+    css: _propTypes["default"].object,
+    /**
+     * Highlights the filled portion.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    highlighted: _propTypes["default"].bool,
+    /**
+     * The orientation of the slider.
+     *
+     * @type {('horizontal'|'vertical'|'radial')}
+     * @default 'horizontal'
+     * @public
+     */
+    orientation: _propTypes["default"].oneOf(['horizontal', 'vertical', 'radial']),
+    /**
+     * A number between `0` and `1` indicating the proportion of the filled portion of the bar.
+     *
+     * @type {Number}
+     * @default 0
+     * @public
+     */
+    progress: _propTypes["default"].number,
+    /**
+     * Displays an anchor at `progressAnchor`.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    showAnchor: _propTypes["default"].bool,
+    /**
+     * Enables the built-in tooltip.
+     *
+     * To customize the tooltip, pass either a custom tooltip component or an instance of
+     * {@link limestone/ProgressBar.ProgressBarTooltip|ProgressBarTooltip} with additional
+     * props configured.
+     *
+     * The provided component will receive the following props from `ProgressBar`:
+     *
+     * * `orientation`  - The value of `orientation`
+     * * `percent`      - Always `true` indicating the value should be presented as a percentage
+     *                    rather than an absolute value
+     * * `progress`     - The `value` as a proportion between `min` and `max`
+     * * `visible`      - Always `true` indicating that the tooltip should be visible
+     *
+     * Usage:
+     * ```
+     * <ProgressBar
+     *   tooltip={
+     *     <ProgressBarTooltip position="after" />
+     *   }
+     * />
+     * ```
+     *
+     * The tooltip may also be passed as a child via the `"tooltip"` slot. See
+     * {@link ui/Slottable|Slottable} for more information on how slots can be used.
+     *
+     * Usage:
+     * ```
+     * <ProgressBar>
+     *   <ProgressBarTooltip position="after" />
+     * </ProgressBar>
+     * ```
+     *
+     * @type {Boolean|Component|Element}
+     * @public
+     */
+    tooltip: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].element, _propTypes["default"].func])
+  },
+  defaultProps: {
+    backgroundProgress: 0,
+    orientation: 'horizontal',
+    progress: 0
+  },
+  styles: {
+    css: _ProgressBarModule["default"],
+    publicClassNames: ['progressBar', 'radial', 'bar', 'fill']
+  },
+  computed: {
+    className: function className(_ref) {
+      var highlighted = _ref.highlighted,
+        showAnchor = _ref.showAnchor,
+        styler = _ref.styler;
+      return styler.append({
+        highlighted: highlighted,
+        showAnchor: showAnchor
+      });
+    },
+    tooltip: function tooltip(_ref2) {
+      var _tooltip = _ref2.tooltip;
+      return _tooltip === true ? _ProgressBarTooltip.ProgressBarTooltip : _tooltip;
+    }
+  },
+  render: function render(_ref3) {
+    var css = _ref3.css,
+      orientation = _ref3.orientation,
+      progress = _ref3.progress,
+      tooltip = _ref3.tooltip,
+      rest = _objectWithoutProperties(_ref3, _excluded);
+    delete rest.tooltip;
+    delete rest.highlighted;
+    delete rest.showAnchor;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBar["default"], _objectSpread(_objectSpread({}, rest), {}, {
+      orientation: orientation,
+      progress: progress,
+      css: css,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentOverride["default"], {
+        component: tooltip,
+        orientation: orientation,
+        percent: true,
+        proportion: progress,
+        visible: true
+      })
+    }));
+  }
+});
+
+/**
+ * Limestone-specific behaviors to apply to {@link limestone/ProgressBar.ProgressBarBase|ProgressBar}.
+ *
+ * @hoc
+ * @memberof limestone/ProgressBar
+ * @mixes limestone/Skinnable.Skinnable
+ * @public
+ */
+var ProgressBarDecorator = exports.ProgressBarDecorator = (0, _compose["default"])(_Pure["default"], (0, _Slottable["default"])({
+  slots: ['tooltip']
+}), _Skinnable["default"]);
+
+/**
+ * The ready-to-use Limestone-styled ProgressBar.
+ *
+ * @class ProgressBar
+ * @memberof limestone/ProgressBar
+ * @extends limestone/ProgressBar.ProgressBarBase
+ * @mixes limestone/ProgressBar.ProgressBarDecorator
+ * @ui
+ * @public
+ */
+var ProgressBar = exports.ProgressBar = ProgressBarDecorator(ProgressBarBase);
+var _default = exports["default"] = ProgressBar;

package/ProgressBar/ProgressBar.module.css

@@ -0,0 +1,264 @@
+.progressBar {
+  height: 0.25rem;
+  margin: var(--primitive-spacing-24) 0;
+}
+.progressBar.showAnchor::after {
+  content: "";
+  position: absolute;
+  transform: translate(-50%, -50%);
+}
+.progressBar .bar {
+  border-radius: var(--semantic-radius-full);
+  overflow: hidden;
+}
+.progressBar.horizontal.showAnchor::after {
+  width: 0.125rem;
+  height: 1rem;
+  top: 50%;
+  left: calc(var(--ui-progressbar-proportion-anchor) * 100%);
+}
+.progressBar.vertical {
+  min-height: 5rem;
+  width: 0.25rem;
+}
+.progressBar.vertical.showAnchor::after {
+  width: 1rem;
+  height: 0.125rem;
+  bottom: calc(var(--ui-progressbar-proportion-anchor) * 100%);
+  left: 50%;
+  transform: translate(-50%, 50%);
+}
+.progressBar.radial {
+  height: 1.41667rem;
+  width: 1.41667rem;
+}
+.progressBar.radial .bar {
+  border-color: inherit;
+  border-width: 0.125rem;
+  overflow: visible;
+}
+.progressBar.radial .fill,
+.progressBar.radial .load {
+  top: -0.125rem;
+  right: -0.125rem;
+  bottom: -0.125rem;
+  left: -0.125rem;
+}
+.progressBar.radial .fill::before,
+.progressBar.radial .load::before,
+.progressBar.radial .fill::after,
+.progressBar.radial .load::after {
+  border-color: inherit;
+  border-width: 0.125rem;
+}
+.progressBar:global(.neutral) .bar {
+  background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
+}
+.progressBar:global(.neutral) .fill {
+  background-color: var(--semantic-color-surface-accent);
+}
+.progressBar:global(.neutral) .load {
+  background-color: color(from var(--semantic-color-surface-white) srgb r g b / 0.5);
+}
+.progressBar:global(.neutral).radial .bar,
+.progressBar:global(.neutral).radial .fill,
+.progressBar:global(.neutral).radial .load {
+  background-color: transparent;
+}
+.progressBar:global(.neutral).radial .bar {
+  border-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
+}
+.progressBar:global(.neutral).radial .fill {
+  border-color: var(--semantic-color-surface-accent);
+}
+.progressBar:global(.neutral).radial .load {
+  border-color: color(from var(--semantic-color-surface-white) srgb r g b / 0.5);
+}
+.progressBar:global(.neutral).highlighted .fill {
+  background-color: var(--semantic-color-surface-default-focused);
+}
+.progressBar:global(.neutral).highlighted.radial .fill {
+  background-color: transparent;
+  border-color: var(--semantic-color-surface-default-focused);
+}
+.progressBar:global(.neutral).showAnchor::after {
+  background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
+}
+:global(.enact-a11y-high-contrast) .progressBar:global(.neutral):global(.highContrast) .bar {
+  background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
+}
+:global(.enact-a11y-high-contrast) .progressBar:global(.neutral):global(.highContrast) .fill {
+  background-color: var(--semantic-color-surface-accent);
+}
+:global(.enact-a11y-high-contrast) .progressBar:global(.neutral):global(.highContrast) .load {
+  background-color: color(from var(--semantic-color-surface-white) srgb r g b / 0.5);
+}
+:global(.enact-a11y-high-contrast) .progressBar:global(.neutral):global(.highContrast).radial .bar,
+:global(.enact-a11y-high-contrast) .progressBar:global(.neutral):global(.highContrast).radial .fill,
+:global(.enact-a11y-high-contrast) .progressBar:global(.neutral):global(.highContrast).radial .load {
+  background-color: transparent;
+}
+:global(.enact-a11y-high-contrast) .progressBar:global(.neutral):global(.highContrast).radial .bar {
+  border-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
+}
+:global(.enact-a11y-high-contrast) .progressBar:global(.neutral):global(.highContrast).radial .fill {
+  border-color: var(--semantic-color-surface-accent);
+}
+:global(.enact-a11y-high-contrast) .progressBar:global(.neutral):global(.highContrast).radial .load {
+  border-color: color(from var(--semantic-color-surface-white) srgb r g b / 0.5);
+}
+:global(.enact-a11y-high-contrast) .progressBar:global(.neutral):global(.highContrast).highlighted .fill {
+  background-color: var(--semantic-color-surface-default-focused);
+}
+:global(.enact-a11y-high-contrast) .progressBar:global(.neutral):global(.highContrast).highlighted.radial .fill {
+  background-color: transparent;
+  border-color: var(--semantic-color-surface-default-focused);
+}
+:global(.enact-a11y-high-contrast) .progressBar:global(.neutral):global(.highContrast).showAnchor::after {
+  background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
+}
+.progressBar:global(.light) .bar {
+  background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
+}
+.progressBar:global(.light) .fill {
+  background-color: var(--semantic-color-surface-accent);
+}
+.progressBar:global(.light) .load {
+  background-color: color(from var(--semantic-color-surface-white) srgb r g b / 0.5);
+}
+.progressBar:global(.light).radial .bar,
+.progressBar:global(.light).radial .fill,
+.progressBar:global(.light).radial .load {
+  background-color: transparent;
+}
+.progressBar:global(.light).radial .bar {
+  border-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
+}
+.progressBar:global(.light).radial .fill {
+  border-color: var(--semantic-color-surface-accent);
+}
+.progressBar:global(.light).radial .load {
+  border-color: color(from var(--semantic-color-surface-white) srgb r g b / 0.5);
+}
+.progressBar:global(.light).highlighted .fill {
+  background-color: var(--semantic-color-surface-default-focused);
+}
+.progressBar:global(.light).highlighted.radial .fill {
+  background-color: transparent;
+  border-color: var(--semantic-color-surface-default-focused);
+}
+.progressBar:global(.light).showAnchor::after {
+  background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
+}
+.progressBar:global(.game) {
+  --semantic-color-surface-default: #2d224c;
+  --semantic-color-surface-default-focused: #6d2fa1;
+  --semantic-color-on-surface-main-focused: #e6e6e6;
+}
+.progressBar:global(.game) .bar {
+  background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
+}
+.progressBar:global(.game) .fill {
+  background-color: var(--semantic-color-surface-accent);
+}
+.progressBar:global(.game) .load {
+  background-color: color(from var(--semantic-color-surface-white) srgb r g b / 0.5);
+}
+.progressBar:global(.game).radial .bar,
+.progressBar:global(.game).radial .fill,
+.progressBar:global(.game).radial .load {
+  background-color: transparent;
+}
+.progressBar:global(.game).radial .bar {
+  border-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
+}
+.progressBar:global(.game).radial .fill {
+  border-color: var(--semantic-color-surface-accent);
+}
+.progressBar:global(.game).radial .load {
+  border-color: color(from var(--semantic-color-surface-white) srgb r g b / 0.5);
+}
+.progressBar:global(.game).highlighted .fill {
+  background-color: var(--semantic-color-surface-default-focused);
+}
+.progressBar:global(.game).highlighted.radial .fill {
+  background-color: transparent;
+  border-color: var(--semantic-color-surface-default-focused);
+}
+.progressBar:global(.game).showAnchor::after {
+  background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
+}
+:global(.green) .progressBar:global(.game) {
+  --semantic-color-surface-default: #1F2C24;
+  --semantic-color-surface-default-focused: #3ea07d;
+}
+:global(.green) .progressBar:global(.game) .bar {
+  background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
+}
+:global(.green) .progressBar:global(.game) .fill {
+  background-color: var(--semantic-color-surface-accent);
+}
+:global(.green) .progressBar:global(.game) .load {
+  background-color: color(from var(--semantic-color-surface-white) srgb r g b / 0.5);
+}
+:global(.green) .progressBar:global(.game).radial .bar,
+:global(.green) .progressBar:global(.game).radial .fill,
+:global(.green) .progressBar:global(.game).radial .load {
+  background-color: transparent;
+}
+:global(.green) .progressBar:global(.game).radial .bar {
+  border-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
+}
+:global(.green) .progressBar:global(.game).radial .fill {
+  border-color: var(--semantic-color-surface-accent);
+}
+:global(.green) .progressBar:global(.game).radial .load {
+  border-color: color(from var(--semantic-color-surface-white) srgb r g b / 0.5);
+}
+:global(.green) .progressBar:global(.game).highlighted .fill {
+  background-color: var(--semantic-color-surface-default-focused);
+}
+:global(.green) .progressBar:global(.game).highlighted.radial .fill {
+  background-color: transparent;
+  border-color: var(--semantic-color-surface-default-focused);
+}
+:global(.green) .progressBar:global(.game).showAnchor::after {
+  background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
+}
+:global(.orange) .progressBar:global(.game) {
+  --semantic-color-surface-default: #422923;
+  --semantic-color-surface-default-focused: #b85f23;
+}
+:global(.orange) .progressBar:global(.game) .bar {
+  background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
+}
+:global(.orange) .progressBar:global(.game) .fill {
+  background-color: var(--semantic-color-surface-accent);
+}
+:global(.orange) .progressBar:global(.game) .load {
+  background-color: color(from var(--semantic-color-surface-white) srgb r g b / 0.5);
+}
+:global(.orange) .progressBar:global(.game).radial .bar,
+:global(.orange) .progressBar:global(.game).radial .fill,
+:global(.orange) .progressBar:global(.game).radial .load {
+  background-color: transparent;
+}
+:global(.orange) .progressBar:global(.game).radial .bar {
+  border-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
+}
+:global(.orange) .progressBar:global(.game).radial .fill {
+  border-color: var(--semantic-color-surface-accent);
+}
+:global(.orange) .progressBar:global(.game).radial .load {
+  border-color: color(from var(--semantic-color-surface-white) srgb r g b / 0.5);
+}
+:global(.orange) .progressBar:global(.game).highlighted .fill {
+  background-color: var(--semantic-color-surface-default-focused);
+}
+:global(.orange) .progressBar:global(.game).highlighted.radial .fill {
+  background-color: transparent;
+  border-color: var(--semantic-color-surface-default-focused);
+}
+:global(.orange) .progressBar:global(.game).showAnchor::after {
+  background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
+}