@enact/limestone 1.3.0

package/Steps/tests/Steps-specs.js

@@ -0,0 +1,175 @@
+"use strict";
+
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _Steps = require("../Steps");
+var _jsxRuntime = require("react/jsx-runtime");
+describe('Steps Specs', function () {
+  test('should render two steps with no props specified', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {}));
+    var firstStep = _react.screen.getByText('1');
+    var secondStep = _react.screen.getByText('2');
+    expect(firstStep).toBeInTheDocument();
+    expect(secondStep).toBeInTheDocument();
+  });
+  test('should indicate a two step process with no props specified', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {}));
+    var actual = _react.screen.getByRole('list').children;
+    var expected = 2;
+    expect(actual).toHaveLength(expected);
+  });
+  test('should render six steps with `total` set to 6', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {
+      total: 6
+    }));
+    var firstStep = _react.screen.getByText('1');
+    var secondStep = _react.screen.getByText('2');
+    var thirdStep = _react.screen.getByText('3');
+    var fourthStep = _react.screen.getByText('4');
+    var fifthStep = _react.screen.getByText('5');
+    var sixthStep = _react.screen.getByText('6');
+    expect(firstStep).toBeInTheDocument();
+    expect(secondStep).toBeInTheDocument();
+    expect(thirdStep).toBeInTheDocument();
+    expect(fourthStep).toBeInTheDocument();
+    expect(fifthStep).toBeInTheDocument();
+    expect(sixthStep).toBeInTheDocument();
+  });
+  test('should indicate a 6 step process with `total` set to 6', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {
+      total: 6
+    }));
+    var steps = _react.screen.getByRole('list').children;
+    var expected = 6;
+    expect(steps).toHaveLength(expected);
+  });
+  test('should correctly set the `size`', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {
+      size: "medium"
+    }));
+    var firstStepElement = _react.screen.getByText('1');
+    var expected = 'medium'; // `size` actually comes from Icon, which we aren't accessing, so we use the bare class name.
+
+    expect(firstStepElement).toHaveClass(expected);
+  });
+  test('should correctly indicate the `current` even if that\'s the only prop set', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {
+      current: 2
+    }));
+    var firstStepElement = _react.screen.getByRole('list').children.item(0);
+    var secondStepElement = _react.screen.getByText('2');
+    var expected = 'current';
+    expect(firstStepElement).not.toHaveClass(expected);
+    expect(secondStepElement).toHaveClass(expected);
+  });
+  test('should support custom `pastIcon`', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {
+      current: 2,
+      total: 3,
+      pastIcon: "bookmark"
+    }));
+    var pastStepIcon = _react.screen.getByRole('list').children.item(0).textContent.codePointAt();
+    var expected = 983364; // decimal converted charCode of Unicode 'bookmark' character
+
+    expect(pastStepIcon).toBe(expected);
+  });
+  test('should support custom `currentIcon`', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {
+      current: 2,
+      total: 3,
+      currentIcon: "edit"
+    }));
+    var currentStepIcon = _react.screen.getByRole('list').children.item(1).textContent.codePointAt();
+    var expected = 983369; // decimal converted charCode of Unicode 'edit' character
+
+    expect(currentStepIcon).toBe(expected);
+  });
+  test('should support custom `futureIcon`', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {
+      current: 2,
+      total: 3,
+      futureIcon: "arrowup"
+    }));
+    var futureStepIcon = _react.screen.getByRole('list').children.item(2).textContent.codePointAt();
+    var expected = 8593; // decimal converted charCode of Unicode 'arrowup' character
+
+    expect(futureStepIcon).toBe(expected);
+  });
+  test('should support numeric step identifier for `pastIcon`', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {
+      current: 2,
+      total: 3,
+      pastIcon: "numbers"
+    }));
+    var pastIcon = _react.screen.getByRole('list').children.item(0).textContent;
+    var expected = '1';
+    expect(pastIcon).toBe(expected);
+  });
+  test('should support numeric step identifier for `currentIcon`', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {
+      current: 2,
+      total: 3,
+      currentIcon: "numbers"
+    }));
+    var currentIcon = _react.screen.getByRole('list').children.item(1).textContent;
+    var expected = '2';
+    expect(currentIcon).toBe(expected);
+  });
+  test('should support numeric step identifier for `futureIcon`', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {
+      current: 2,
+      total: 3,
+      futureIcon: "numbers"
+    }));
+    var futureIcon = _react.screen.getByRole('list').children.item(2).textContent;
+    var expected = '3';
+    expect(futureIcon).toBe(expected);
+  });
+  test('should support number for `skip` prop', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {
+      skip: 2,
+      current: 3,
+      total: 5
+    }));
+    var skippedStep = _react.screen.getByRole('list').children.item(1);
+    var expected = 'skip';
+    expect(skippedStep.className).toContain(expected);
+  });
+  test('should support custom `skipIcon`', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {
+      skip: 2,
+      skipIcon: "skip",
+      current: 3,
+      total: 5
+    }));
+    var skippedStepIcon = _react.screen.getByRole('list').children.item(1).textContent.codePointAt();
+    var expected = 983017; // decimal converted charCode of Unicode 'skip' character
+
+    expect(skippedStepIcon).toBe(expected);
+  });
+  test('should support array of numbers for `skip` prop', function () {
+    var expected = 'testIconName';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {
+      skip: [2, 4],
+      skipIcon: expected,
+      current: 3,
+      total: 5
+    }));
+    var secondSkippedStep = _react.screen.getByRole('list').children.item(1).textContent;
+    var fourthSkippedStep = _react.screen.getByRole('list').children.item(3).textContent;
+    expect(secondSkippedStep).toBe(expected);
+    expect(fourthSkippedStep).toBe(expected);
+  });
+  test('should not show a skip icon if the `current` step is in the skip list', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.StepsBase, {
+      skip: [2, 3],
+      skipIcon: "testIconName",
+      current: 3,
+      currentIcon: "numbers",
+      total: 5
+    }));
+    var currentStep = _react.screen.getByRole('list').children.item(2).textContent;
+    var expected = '3';
+    expect(currentStep).toBe(expected);
+  });
+});

package/Switch/Switch.d.ts

@@ -0,0 +1,54 @@
+// Type definitions for limestone/Switch
+
+import { ToggleableProps as ui_Toggleable_ToggleableProps } from "@enact/ui/Toggleable";
+import { SpottableProps as spotlight_Spottable_SpottableProps } from "@enact/spotlight/Spottable";
+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 SwitchBaseProps {
+  /**
+   * Disables Switch and becomes non-interactive.
+   */
+  disabled?: boolean;
+  /**
+   * Disables animation.
+   */
+  noAnimation?: boolean;
+  /**
+   * Sets whether this control is in the 'on' or 'off' state.  `true`  for 'on',  `false`  for 'off'.
+   */
+  selected?: boolean;
+}
+/**
+ * Renders the base level DOM structure of the component.
+ */
+
+export class SwitchBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, SwitchBaseProps>
+> {}
+
+export interface SwitchDecoratorProps
+  extends Merge<
+    ui_Toggleable_ToggleableProps,
+    spotlight_Spottable_SpottableProps
+  > {}
+export function SwitchDecorator<P>(
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & SwitchDecoratorProps>;
+
+export interface SwitchProps
+  extends Merge<SwitchBaseProps, SwitchDecoratorProps> {}
+/**
+ * A Limestone-styled component that looks like a toggle switch.
+ * 
+ * `Switch`  will manage its  `selected`  state via    unless set
+directly.
+ */
+
+export class Switch extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, SwitchProps>
+> {}
+
+export default Switch;

package/Switch/Switch.js

@@ -0,0 +1,143 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.SwitchDecorator = exports.SwitchBase = exports.Switch = void 0;
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _compose = _interopRequireDefault(require("ramda/src/compose"));
+var _Spottable = _interopRequireDefault(require("@enact/spotlight/Spottable"));
+var _Touchable = _interopRequireDefault(require("@enact/ui/Touchable"));
+var _Toggleable = _interopRequireDefault(require("@enact/ui/Toggleable"));
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _SwitchModule = _interopRequireDefault(require("./Switch.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["css", "disabled", "selected"];
+/**
+ * Provides a Limestone-themed pill-shaped toggle switch component.
+ *
+ * @example
+ * <Switch />
+ *
+ * @module limestone/Switch
+ * @exports Switch
+ * @exports SwitchBase
+ */
+/**
+ * Renders the base level DOM structure of the component.
+ *
+ * @class SwitchBase
+ * @memberof limestone/Switch
+ * @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 SwitchBase = exports.SwitchBase = (0, _kind["default"])({
+  name: 'Switch',
+  propTypes: /** @lends limestone/Switch.SwitchBase.prototype */{
+    css: _propTypes["default"].object,
+    /**
+     * Disables Switch and becomes non-interactive.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    disabled: _propTypes["default"].bool,
+    /**
+     * Disables animation.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    noAnimation: _propTypes["default"].bool,
+    /**
+     * Sets whether this control is in the 'on' or 'off' state. `true` for 'on', `false` for 'off'.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    selected: _propTypes["default"].bool
+  },
+  defaultProps: {
+    noAnimation: typeof ENACT_PACK_NO_ANIMATION !== 'undefined' && ENACT_PACK_NO_ANIMATION,
+    selected: false
+  },
+  styles: {
+    css: _SwitchModule["default"],
+    className: 'switch',
+    publicClassNames: ['switch', 'selected', 'client']
+  },
+  computed: {
+    className: function className(_ref) {
+      var noAnimation = _ref.noAnimation,
+        selected = _ref.selected,
+        styler = _ref.styler;
+      return styler.append({
+        animated: !noAnimation,
+        selected: selected
+      });
+    }
+  },
+  render: function render(_ref2) {
+    var css = _ref2.css,
+      disabled = _ref2.disabled,
+      selected = _ref2.selected,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+    delete rest.noAnimation;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, rest), {}, {
+      "aria-pressed": selected,
+      "aria-disabled": disabled,
+      disabled: disabled,
+      role: "button",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: css.bg
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: css.client,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: css.icon
+        })
+      })]
+    }));
+  }
+});
+
+/**
+ * Adds interactive functionality to `Switch`.
+ *
+ * @class SwitchDecorator
+ * @memberof limestone/Switch
+ * @mixes ui/Toggleable.Toggleable
+ * @mixes spotlight/Spottable.Spottable
+ * @hoc
+ * @public
+ */
+var SwitchDecorator = exports.SwitchDecorator = (0, _compose["default"])((0, _Toggleable["default"])({
+  toggleProp: 'onClick'
+}), _Touchable["default"], _Spottable["default"], _Skinnable["default"]);
+
+/**
+ * A Limestone-styled component that looks like a toggle switch.
+ *
+ * `Switch` will manage its `selected` state via {@link ui/Toggleable|Toggleable} unless set
+ * directly.
+ *
+ * @class Switch
+ * @memberof limestone/Switch
+ * @extends limestone/Switch.SwitchBase
+ * @mixes limestone/Switch.SwitchDecorator
+ * @ui
+ * @public
+ */
+var Switch = exports.Switch = SwitchDecorator(SwitchBase);
+var _default = exports["default"] = Switch;