@enact/limestone 1.3.0

package/Steps/Steps.d.ts

@@ -0,0 +1,119 @@
+// Type definitions for limestone/Steps
+
+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 StepsBaseProps {
+  /**
+ * 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:
+ * *  `steps`  - The root class name
+ * *  `step`  - Applied to each individual step
+ * *  `numbers`  - Applied on the steps designated as "numbers" special case (See:  `Icon`  related props below)
+ * *  `past`  - Applied to the steps preceding the current step
+ * *  `current`  - Applied to the current step
+ * *  `future`  - Applied to the steps following the current step
+ * 
+ * When providing a custom  `iconComponent`  it will receive the classes:
+'step' (always), 'numbers' (conditionally, based on the "numbers" value), and one of the
+following three, based on the  `current`  step: 'past', 'current', and 'future'.
+ */
+  css?: object;
+  /**
+   * Indicate the current step.
+   *
+   * This is 1-based, not 0-based; as in the first step is  `1` .
+   */
+  current?: number;
+  /**
+ * The icon to use for indicating the current step.
+ * 
+ * This accepts any icon supported by   , in addition to a special
+value: "numbers", which instead of a standard icon, shows the number of the step.
+ */
+  currentIcon?: string;
+  /**
+ * The icon to use for indicating all steps following the current step.
+ * 
+ * This accepts any icon supported by   , in addition to a special
+value: "numbers", which instead of a standard icon, shows the number of the step.
+ */
+  futureIcon?: string;
+  /**
+ * Defines how to represent the current step.
+ * 
+ * When  `true` , highlight effect will be applied only to the current icon.
+When  `false` , highlight effect will be applied to past and current icons.
+ */
+  highlightCurrentOnly?: boolean;
+  /**
+ * Defines a custom element to use as the icon component.
+ * 
+ * Use the  `css`  prop and public class name override system to target the classes applied to
+this component. This component will be repeated  `total`  number of times and will also
+receive the  `children`  and  `size`  props.
+ */
+  iconComponent?: React.ComponentType;
+  /**
+ * The icon to use for indicating all steps preceding the current step.
+ * 
+ * This accepts any icon supported by   , in addition to a special
+value: "numbers", which instead of a standard icon, shows the number of the step.
+ */
+  pastIcon?: string;
+  /**
+   * The size of the step icons.
+   *
+   * This accepts any  `size`  supported by   .
+   */
+  size?: "large" | "medium" | "small" | "tiny" | number;
+  /**
+   * Indicate which steps to skip.
+   *
+   * A number or array of step numbers is acceptable.
+   */
+  skip?: number | number[];
+  /**
+ * The icon to use for any skipped steps, past or future.
+ * 
+ * This accepts any icon supported by   .
+ * 
+ * The current step will always show the  `currentIcon`  regardless of whether it has been
+skipped. It's the developer's responsibility to not set  `current`  to a skipped step.
+ */
+  skipIcon?: string;
+  /**
+   * Indicate the total number of steps.
+   */
+  total?: number;
+}
+/**
+ * Renders a limestone-styled steps component only basic behavior.
+ */
+
+export class StepsBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, StepsBaseProps>
+> {}
+
+export interface StepsDecoratorProps
+  extends limestone_Skinnable_SkinnableProps {}
+export function StepsDecorator<P>(
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & StepsDecoratorProps>;
+
+export interface StepsProps
+  extends Merge<StepsBaseProps, StepsDecoratorProps> {}
+/**
+ * A full-featured Limestone-styled step component.
+ */
+
+export class Steps extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, StepsProps>
+> {}
+
+export default Steps;

package/Steps/Steps.js

@@ -0,0 +1,303 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.StepsDecorator = exports.StepsBase = exports.Steps = void 0;
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _util = require("@enact/core/util");
+var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
+var _Repeater = _interopRequireDefault(require("@enact/ui/Repeater"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
+var _compose = _interopRequireDefault(require("ramda/src/compose"));
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _StepsModule = _interopRequireDefault(require("./Steps.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["css", "iconComponent", "size", "steps"];
+/**
+ * Provides Limestone styled component to indicate progress along a continuum.
+ *
+ * In the following example, 6 total steps will be displayed with the current step being the 3rd
+ * step, having passed the previous 2 steps, with 3 more to go.
+ *
+ * @example
+ * <Steps total={6} current={3} />
+ *
+ * @module limestone/Steps
+ * @exports Steps
+ * @exports StepsBase
+ * @exports StepsDecorator
+ */
+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 PageIndicator = function PageIndicator(_ref) {
+  var className = _ref.className,
+    css = _ref.css;
+  var mergedClasses = (0, _classnames["default"])(css.pageIndicator, className);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: mergedClasses
+  });
+};
+
+/**
+ * Renders a limestone-styled steps component only basic behavior.
+ *
+ * @class StepsBase
+ * @memberof limestone/Steps
+ * @ui
+ * @public
+ */
+var StepsBase = exports.StepsBase = (0, _kind["default"])({
+  name: 'Steps',
+  propTypes: /** @lends limestone/Steps.StepsBase.prototype */{
+    /**
+     * 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:
+     *
+     * * `steps` - The root class name
+     * * `step` - Applied to each individual step
+     * * `numbers` - Applied on the steps designated as "numbers" special case (See: `Icon` related props below)
+     * * `past` - Applied to the steps preceding the current step
+     * * `current` - Applied to the current step
+     * * `future` - Applied to the steps following the current step
+     *
+     * When providing a custom `iconComponent` it will receive the classes:
+     * 'step' (always), 'numbers' (conditionally, based on the "numbers" value), and one of the
+     * following three, based on the `current` step: 'past', 'current', and 'future'.
+     *
+     * @type {Object}
+     * @public
+     */
+    css: _propTypes2["default"].object,
+    /**
+     * Indicate the current step.
+     *
+     * This is 1-based, not 0-based; as in the first step is `1`.
+     *
+     * @type {Number}
+     * @default 1
+     * @public
+     */
+    current: _propTypes2["default"].number,
+    /**
+     * The icon to use for indicating the current step.
+     *
+     * This accepts any icon supported by {@link limestone/Icon}, in addition to a special
+     * value: "numbers", which instead of a standard icon, shows the number of the step.
+     *
+     * @type {String}
+     * @default 'numbers'
+     * @public
+     */
+    currentIcon: _propTypes2["default"].string,
+    /**
+     * The icon to use for indicating all steps following the current step.
+     *
+     * This accepts any icon supported by {@link limestone/Icon}, in addition to a special
+     * value: "numbers", which instead of a standard icon, shows the number of the step.
+     *
+     * @type {String}
+     * @default 'numbers'
+     * @public
+     */
+    futureIcon: _propTypes2["default"].string,
+    /**
+     * Defines how to represent the current step.
+     *
+     * When `true`, highlight effect will be applied only to the current icon.
+     * When `false`, highlight effect will be applied to past and current icons.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    highlightCurrentOnly: _propTypes2["default"].bool,
+    /**
+     * Defines a custom element to use as the icon component.
+     *
+     * Use the `css` prop and public class name override system to target the classes applied to
+     * this component. This component will be repeated `total` number of times and will also
+     * receive the `children` and `size` props.
+     *
+     * @type {Component}
+     * @default limestone/Icon.Icon
+     * @public
+     */
+    iconComponent: _propTypes["default"].component,
+    /**
+     * The icon to use for indicating all steps preceding the current step.
+     *
+     * This accepts any icon supported by {@link limestone/Icon}, in addition to a special
+     * value: "numbers", which instead of a standard icon, shows the number of the step.
+     *
+     * @type {String}
+     * @default 'check'
+     * @public
+     */
+    pastIcon: _propTypes2["default"].string,
+    /**
+     * The size of the step icons.
+    	 * This accepts any `size` supported by {@link limestone/Icon}.
+     *
+     * @type {('large'|'medium'|'small'|'tiny'|Number)}
+     * @default 'small'
+     * @public
+     */
+    size: _propTypes2["default"].oneOfType([_propTypes2["default"].oneOf(['large', 'medium', 'small', 'tiny']), _propTypes2["default"].number]),
+    /**
+     * Indicate which steps to skip.
+     *
+     * A number or array of step numbers is acceptable.
+     *
+     * @type {Number|Number[]}
+     * @public
+     */
+    skip: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].arrayOf(_propTypes2["default"].number)]),
+    /**
+     * The icon to use for any skipped steps, past or future.
+     *
+     * This accepts any icon supported by {@link limestone/Icon}.
+     *
+     * The current step will always show the `currentIcon` regardless of whether it has been
+     * skipped. It's the developer's responsibility to not set `current` to a skipped step.
+     *
+     * @type {String}
+     * @default 'minus'
+     * @public
+     */
+    skipIcon: _propTypes2["default"].string,
+    /**
+     * Indicate the total number of steps.
+     *
+     * @type {Number}
+     * @default 2
+     * @public
+     */
+    total: _propTypes2["default"].number
+  },
+  defaultProps: {
+    current: 1,
+    iconComponent: _Icon["default"],
+    pastIcon: 'check',
+    currentIcon: 'numbers',
+    futureIcon: 'numbers',
+    size: 'small',
+    skipIcon: 'minus',
+    total: 2
+  },
+  styles: {
+    css: _StepsModule["default"],
+    className: 'steps',
+    publicClassNames: ['steps', 'step', 'numbers', 'past', 'current', 'future', 'pageIndicator']
+  },
+  computed: {
+    iconComponent: function iconComponent(_ref2) {
+      var highlightCurrentOnly = _ref2.highlightCurrentOnly,
+        _iconComponent = _ref2.iconComponent;
+      return highlightCurrentOnly && _iconComponent === _Icon["default"] ? PageIndicator : _iconComponent;
+    },
+    steps: function steps(_ref3) {
+      var current = _ref3.current,
+        pastIcon = _ref3.pastIcon,
+        currentIcon = _ref3.currentIcon,
+        futureIcon = _ref3.futureIcon,
+        highlightCurrentOnly = _ref3.highlightCurrentOnly,
+        skip = _ref3.skip,
+        skipIcon = _ref3.skipIcon,
+        total = _ref3.total,
+        styler = _ref3.styler;
+      skip = (0, _util.coerceArray)(skip);
+      return Array.from(Array(total)).map(function (el, index) {
+        var stepNum = index + 1;
+        var skipStep = skip.indexOf(stepNum) >= 0;
+        var past = stepNum < current;
+        var present = stepNum === current;
+        var future = stepNum > current;
+        var children,
+          numbers = false;
+        if (present) {
+          numbers = currentIcon === 'numbers';
+          children = numbers ? stepNum.toString() : currentIcon;
+        } else if (past) {
+          numbers = pastIcon === 'numbers';
+          children = numbers ? stepNum.toString() : pastIcon;
+        } else if (future) {
+          numbers = futureIcon === 'numbers';
+          children = numbers ? stepNum.toString() : futureIcon;
+        }
+        if (skipStep && !present) {
+          numbers = skipIcon === 'numbers';
+          children = numbers ? stepNum.toString() : skipIcon;
+        }
+        return {
+          className: styler.join('step', {
+            numbers: numbers,
+            past: past,
+            current: present,
+            future: future,
+            skip: skipStep && !present,
+            highlightCurrentOnly: highlightCurrentOnly
+          }),
+          key: "step".concat(stepNum),
+          children: children
+        };
+      });
+    }
+  },
+  render: function render(_ref4) {
+    var css = _ref4.css,
+      iconComponent = _ref4.iconComponent,
+      size = _ref4.size,
+      steps = _ref4.steps,
+      rest = _objectWithoutProperties(_ref4, _excluded);
+    delete rest.current;
+    delete rest.currentIcon;
+    delete rest.futureIcon;
+    delete rest.highlightCurrentOnly;
+    delete rest.pastIcon;
+    delete rest.skip;
+    delete rest.skipIcon;
+    delete rest.total;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Repeater["default"], _objectSpread(_objectSpread({}, rest), {}, {
+      component: "div",
+      childComponent: iconComponent,
+      itemProps: {
+        css: css,
+        size: size
+      },
+      children: steps
+    }));
+  }
+});
+
+/**
+ * Limestone-specific behaviors to apply to {@link limestone/Steps.StepsBase|StepsBase}.
+ *
+ * @hoc
+ * @memberof limestone/Steps
+ * @mixes limestone/Skinnable.Skinnable
+ * @public
+ */
+var StepsDecorator = exports.StepsDecorator = (0, _compose["default"])(_Skinnable["default"]);
+
+/**
+ * A full-featured Limestone-styled step component.
+ *
+ * @class Steps
+ * @memberof limestone/Steps
+ * @extends limestone/Steps.StepsBase
+ * @mixes limestone/Steps.StepsDecorator
+ * @ui
+ * @public
+ */
+var Steps = exports.Steps = StepsDecorator(StepsBase);
+var _default = exports["default"] = Steps;

package/Steps/Steps.module.css

@@ -0,0 +1,130 @@
+.steps .step {
+  margin: 0 var(--primitive-spacing-30);
+}
+.steps .step.numbers {
+  font-size: var(--primitive-font-size-48);
+  font-weight: var(--primitive-font-weight-semibold);
+}
+.steps .step.highlightCurrentOnly.future {
+  opacity: 1;
+}
+.steps .step.current {
+  opacity: 1;
+}
+.steps .step.future {
+  opacity: 1;
+}
+.steps .pageIndicator {
+  width: 0.375rem;
+  height: 0.375rem;
+  margin: 0 var(--primitive-spacing-12);
+  border-radius: var(--semantic-radius-full);
+}
+.steps .pageIndicator.current {
+  width: 0.5rem;
+  height: 0.5rem;
+  margin: 0 var(--primitive-spacing-6);
+}
+.steps:global(.neutral) .step:not(.pageIndicator).past {
+  color: var(--semantic-color-on-background-main);
+}
+.steps:global(.neutral) .step:not(.pageIndicator).current {
+  color: var(--semantic-color-on-background-accent);
+}
+.steps:global(.neutral) .step:not(.pageIndicator).future {
+  color: var(--semantic-color-on-background-main);
+}
+.steps:global(.neutral) .pageIndicator {
+  background-color: color(from var(--semantic-color-surface-default-indicator) srgb r g b / 0.4);
+}
+.steps:global(.neutral) .pageIndicator.current {
+  background-color: var(--semantic-color-surface-default-indicator);
+}
+:global(.enact-a11y-high-contrast) .steps:global(.neutral):global(.highContrast) .step:not(.pageIndicator).past {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.enact-a11y-high-contrast) .steps:global(.neutral):global(.highContrast) .step:not(.pageIndicator).current {
+  color: var(--semantic-color-on-background-accent);
+}
+:global(.enact-a11y-high-contrast) .steps:global(.neutral):global(.highContrast) .step:not(.pageIndicator).future {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.enact-a11y-high-contrast) .steps:global(.neutral):global(.highContrast) .pageIndicator {
+  background-color: color(from var(--semantic-color-surface-default-indicator) srgb r g b / 0.4);
+}
+:global(.enact-a11y-high-contrast) .steps:global(.neutral):global(.highContrast) .pageIndicator.current {
+  background-color: var(--semantic-color-surface-default-indicator);
+}
+.steps:global(.light) .step:not(.pageIndicator).past {
+  color: var(--semantic-color-on-background-main);
+}
+.steps:global(.light) .step:not(.pageIndicator).current {
+  color: var(--semantic-color-on-background-accent);
+}
+.steps:global(.light) .step:not(.pageIndicator).future {
+  color: var(--semantic-color-on-background-main);
+}
+.steps:global(.light) .pageIndicator {
+  background-color: color(from var(--semantic-color-surface-default-indicator) srgb r g b / 0.4);
+}
+.steps:global(.light) .pageIndicator.current {
+  background-color: var(--semantic-color-surface-default-indicator);
+}
+.steps:global(.game) {
+  --semantic-color-surface-default: #2d224c;
+  --semantic-color-surface-default-focused: #6d2fa1;
+  --semantic-color-on-surface-main-focused: #e6e6e6;
+}
+.steps:global(.game) .step:not(.pageIndicator).past {
+  color: var(--semantic-color-on-background-main);
+}
+.steps:global(.game) .step:not(.pageIndicator).current {
+  color: var(--semantic-color-on-background-accent);
+}
+.steps:global(.game) .step:not(.pageIndicator).future {
+  color: var(--semantic-color-on-background-main);
+}
+.steps:global(.game) .pageIndicator {
+  background-color: color(from var(--semantic-color-surface-default-indicator) srgb r g b / 0.4);
+}
+.steps:global(.game) .pageIndicator.current {
+  background-color: var(--semantic-color-surface-default-indicator);
+}
+:global(.green) .steps:global(.game) {
+  --semantic-color-surface-default: #1F2C24;
+  --semantic-color-surface-default-focused: #3ea07d;
+}
+:global(.green) .steps:global(.game) .step:not(.pageIndicator).past {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.green) .steps:global(.game) .step:not(.pageIndicator).current {
+  color: var(--semantic-color-on-background-accent);
+}
+:global(.green) .steps:global(.game) .step:not(.pageIndicator).future {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.green) .steps:global(.game) .pageIndicator {
+  background-color: color(from var(--semantic-color-surface-default-indicator) srgb r g b / 0.4);
+}
+:global(.green) .steps:global(.game) .pageIndicator.current {
+  background-color: var(--semantic-color-surface-default-indicator);
+}
+:global(.orange) .steps:global(.game) {
+  --semantic-color-surface-default: #422923;
+  --semantic-color-surface-default-focused: #b85f23;
+}
+:global(.orange) .steps:global(.game) .step:not(.pageIndicator).past {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.orange) .steps:global(.game) .step:not(.pageIndicator).current {
+  color: var(--semantic-color-on-background-accent);
+}
+:global(.orange) .steps:global(.game) .step:not(.pageIndicator).future {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.orange) .steps:global(.game) .pageIndicator {
+  background-color: color(from var(--semantic-color-surface-default-indicator) srgb r g b / 0.4);
+}
+:global(.orange) .steps:global(.game) .pageIndicator.current {
+  background-color: var(--semantic-color-surface-default-indicator);
+}

package/Steps/package.json

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