@pingux/astro 2.118.0-alpha.0 → 2.118.0-alpha.1

package/lib/hooks/useSliderField/useSliderField.test.js

@@ -0,0 +1,102 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import _valuesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/values";
+import { renderHook } from '@testing-library/react';
+import useSliderField, { getDefaultValue, getDisplayValue } from './useSliderField';
+var defaultProps = {
+  minValue: 0,
+  maxValue: 100,
+  step: 10,
+  defaultValue: 50,
+  isMultiThumb: false,
+  label: 'test label',
+  trackRef: {
+    current: null
+  }
+};
+describe('useSliderField utility functions', function () {
+  describe('getDefaultValue', function () {
+    test('returns defaultValueProp if provided', function () {
+      var result = getDefaultValue({
+        defaultValueProp: [10, 50],
+        minValue: 0,
+        step: 10
+      });
+      expect(result).toEqual([10, 50]);
+    });
+    test('calculates default value if defaultValueProp is not provided', function () {
+      var result = getDefaultValue({
+        defaultValueProp: undefined,
+        minValue: 0,
+        step: 10
+      });
+      expect(result).toEqual([0, 30]);
+    });
+  });
+  describe('getDisplayValue', function () {
+    var mockState = {
+      getThumbValueLabel: jest.fn(function (index) {
+        return index === 0 ? '10' : '50';
+      })
+    };
+    test('returns displayValueProp if provided', function () {
+      var result = getDisplayValue({
+        displayValueProp: 'Custom Display',
+        isMultiThumb: false,
+        state: mockState
+      });
+      expect(result).toEqual('Custom Display');
+    });
+    test('returns single thumb value if isMultiThumb is false', function () {
+      var result = getDisplayValue({
+        displayValueProp: undefined,
+        isMultiThumb: false,
+        state: mockState
+      });
+      expect(result).toEqual('10');
+    });
+    test('returns range value if isMultiThumb is true', function () {
+      var result = getDisplayValue({
+        displayValueProp: undefined,
+        isMultiThumb: true,
+        state: mockState
+      });
+      expect(result).toEqual('10 - 50');
+    });
+  });
+});
+describe('useSliderField hook', function () {
+  test('should initialize with default minValue and maxValue', function () {
+    var _renderHook = renderHook(function () {
+        return useSliderField(defaultProps);
+      }),
+      result = _renderHook.result;
+    var containerProps = result.current.containerProps;
+    expect(containerProps).toBeDefined();
+    expect(_valuesInstanceProperty(result.current.sliderActiveTrackProps.state)).toEqual([50]);
+  });
+  test('should update minValue and maxValue when props change', function () {
+    var _renderHook2 = renderHook(function (props) {
+        return useSliderField(props);
+      }, {
+        initialProps: defaultProps
+      }),
+      result = _renderHook2.result,
+      rerender = _renderHook2.rerender;
+    expect(_valuesInstanceProperty(result.current.sliderActiveTrackProps.state)).toEqual([50]);
+    rerender(_objectSpread(_objectSpread({}, defaultProps), {}, {
+      minValue: 20,
+      maxValue: 80,
+      defaultValue: 30
+    }));
+  });
+});

package/lib/index.js

@@ -172,6 +172,7 @@ export { default as Separator } from './components/Separator';
 export * from './components/Separator';
 export { default as Skeleton } from './components/Skeleton';
 export * from './components/Skeleton';
+export { default as SliderField } from './components/SliderField/SliderField';
 export { Step, default as Stepper } from './components/Stepper';
 export * from './components/Stepper';
 export { default as Switch } from './components/Switch';

package/lib/styles/colors.js

@@ -50,6 +50,9 @@ var accentBase = '303F5F';
 var accentLight = 'F7F8FD';
 var accentSteps = 8;
 var accentScale = chroma.scale([accentBase, accentLight]).mode('hsl');
+var slider = {
+  track: '#E4E6E9'
+};
 export var accent = {
   5: chroma(accentBase).darken(1).hex(),
   10: chroma(accentBase).darken(0.5).hex(),
@@ -130,7 +133,8 @@ var allColors = {
   text: text,
   line: line,
   button: button,
-  warning: warning
+  warning: warning,
+  slider: slider
 };
 export default allColors;
 function flattenColors(obj) {

package/lib/styles/variants/variants.js

@@ -46,6 +46,7 @@ import rockerButton from '../../components/RockerButton/RockerButton.styles';
 import scrollBox from '../../components/ScrollBox/ScrollBox.styles';
 import separator from '../../components/Separator/Separator.styles';
 import skeleton from '../../components/Skeleton/Skeleton.styles';
+import slider from '../../components/SliderField/Slider.styles';
 import stepper from '../../components/Stepper/Stepper.styles';
 import table from '../../components/Table/Table.styles';
 import * as tab from '../../components/Tabs/Tabs.style';
@@ -90,6 +91,7 @@ export default _objectSpread({
   rockerButton: rockerButton,
   scrollBox: scrollBox,
   separator: separator,
+  slider: slider,
   stepper: stepper,
   skeleton: skeleton,
   table: table,

package/lib/types/sliderField.js

@@ -0,0 +1 @@
+export {};

package/lib/utils/testUtils/universalFormSubmitTest.js

@@ -56,6 +56,12 @@ var useDefaultProps = function useDefaultProps(componentType) {
   };
   var handleChange = jest.fn();
   switch (componentType) {
+    case 'SliderField':
+      return {
+        value: value,
+        onChange: setValue,
+        name: name
+      };
     case 'CheckboxField':
     case 'SwitchField':
       return {
@@ -139,6 +145,11 @@ var getDefaultProps = function getDefaultProps(componentType, testValue) {
         name: name,
         value: testValue
       };
+    case 'SliderField':
+      return {
+        name: name,
+        value: testValue
+      };
     case 'SwitchField':
       return {
         isDefaultSelected: true,
@@ -335,6 +346,12 @@ export var universalFieldComponentTests = function universalFieldComponentTests(
                 return cell.getAttribute('aria-selected') === 'true';
               });
               expect(selected === null || selected === void 0 ? void 0 : selected.children[0]).toHaveAttribute('aria-label', 'Wednesday, August 10, 2022 selected');
+            } else if (componentType === 'SliderField') {
+              fireEvent.change(screen.getByRole('slider'), {
+                target: {
+                  value: testValue
+                }
+              });
             } else {
               fireEvent.change(screen.getAllByLabelText(testLabel)[0], {
                 target: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.118.0-alpha.0",
+  "version": "2.118.0-alpha.1",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -43,6 +43,7 @@
     "@emotion/styled": "^11.1.1",
     "@faker-js/faker": "~7.5.0",
     "@internationalized/date": "^3.5.3",
+    "@internationalized/number": "^3.6.0",
     "@mdx-js/react": "^1.6.22",
     "@pingux/mdi-react": "^1.2.0",
     "@react-aria/accordion": "~3.0.0-alpha.11",
@@ -91,6 +92,7 @@
     "@react-stately/toggle": "^3.7.3",
     "@react-stately/tree": "^3.7.4",
     "@react-stately/virtualizer": "~3.6.5",
+    "@react-types/slider": "^3.7.9",
     "@storybook/addon-actions": "^7.1.0",
     "@storybook/api": "^7.1.0",
     "@storybook/components": "^7.1.0",