@spaced-out/ui-design-system 0.1.118 → 0.1.120

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.120](https://github.com/spaced-out/ui-design-system/compare/v0.1.119...v0.1.120) (2024-08-19)
+
+
+### Features
+
+* 🛝 new range slider component ([#254](https://github.com/spaced-out/ui-design-system/issues/254)) ([5631aa3](https://github.com/spaced-out/ui-design-system/commit/5631aa30bc9794e4400b0b88938dc2700a94939d))
+
+### [0.1.119](https://github.com/spaced-out/ui-design-system/compare/v0.1.118...v0.1.119) (2024-08-16)
+
+
+### Bug Fixes
+
+* disabled state fix for link with icon ([a0c3a2a](https://github.com/spaced-out/ui-design-system/commit/a0c3a2aa035e0639a625d51c95c3e96dabd2a7fa))
+
 ### [0.1.118](https://github.com/spaced-out/ui-design-system/compare/v0.1.117...v0.1.118) (2024-08-05)
 
 

package/lib/components/Link/Link.js

@@ -115,7 +115,9 @@ const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     name: iconLeftName,
     size: iconLeftSize,
     type: iconLeftType,
-    className: _typographyModule.default[color]
+    className: (0, _classify.default)(_typographyModule.default[color], {
+      [_typographyModule.default.disabled]: disabled
+    })
   }), /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
     condition: Boolean(iconLeftName || iconRightName),
     wrapper: children => /*#__PURE__*/React.createElement("span", {

package/lib/components/Link/Link.js.flow

@@ -186,7 +186,7 @@ export const Link: React$AbstractComponent<LinkProps, ?HTMLAnchorElement> =
               name={iconLeftName}
               size={iconLeftSize}
               type={iconLeftType}
-              className={css[color]}
+              className={classify(css[color], {[css.disabled]: disabled})}
             />
           )}
 

package/lib/components/RangeSlider/RangeSlider.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RangeSlider = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _color = require("../../styles/variables/_color");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Icon = require("../Icon");
+var _RangeSliderModule = _interopRequireDefault(require("./RangeSlider.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const RangeSlider = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    classNames,
+    disabled,
+    min = 0,
+    max = 100,
+    step = 1,
+    value = min,
+    onChange,
+    showTicks,
+    iconLeftName = 'minus',
+    iconLeftSize = _Icon.ICON_SIZE.small,
+    iconLeftType,
+    iconRightName = 'plus',
+    iconRightSize = _Icon.ICON_SIZE.small,
+    iconRightType,
+    hideLeftIcon,
+    hideRightIcon,
+    ...restInputProps
+  } = _ref;
+  const progress = (value - min) / (max - min) * 100;
+  const iconLeftDisabled = disabled || value <= min;
+  const iconRightDisabled = disabled || value >= max;
+
+  /**
+   * Note(Nishant): This needs to be done because the Clickable Icon
+   * does not support disable prop currently. This can become a refactor
+   * task once we bake in disable support to Clickable Icon variation
+   */
+  const LeftIconComponent = iconLeftDisabled ? _Icon.Icon : _Icon.ClickableIcon;
+  const RightIconComponent = iconRightDisabled ? _Icon.Icon : _Icon.ClickableIcon;
+  const progressColor = disabled ? _color.colorTextDisabled : _color.colorFillPrimary;
+  const handleChange = e => {
+    emitRoundedValue(e.currentTarget.value);
+  };
+  const emitRoundedValue = value => {
+    const newValue = parseFloat(value);
+    const roundedValue = Math.round(newValue * 100) / 100; // Rounds to two decimal places
+    onChange?.(roundedValue);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-testid": "RangeSlider",
+    className: (0, _classify.default)(_RangeSliderModule.default.wrapper, {
+      [_RangeSliderModule.default.disabled]: disabled
+    }, classNames?.wrapper)
+  }, !hideLeftIcon && /*#__PURE__*/React.createElement(LeftIconComponent, _extends({
+    name: iconLeftName,
+    size: iconLeftSize,
+    type: iconLeftType,
+    color: iconLeftDisabled ? 'disabled' : 'primary'
+  }, !(disabled || value <= min) && {
+    onClick: () => emitRoundedValue(value - step)
+  })), /*#__PURE__*/React.createElement("div", {
+    className: _RangeSliderModule.default.sliderContainer
+  }, /*#__PURE__*/React.createElement("input", _extends({}, restInputProps, {
+    type: "range",
+    min: min,
+    max: max,
+    step: step,
+    value: value,
+    onChange: handleChange,
+    className: _RangeSliderModule.default.slider,
+    list: showTicks ? 'ticks' : undefined,
+    disabled: disabled,
+    style: {
+      background: `linear-gradient(to right, ${progressColor} ${progress}%, ${_color.colorGrayLightest} ${progress}%)`
+    }
+  })), showTicks && step > 0 && /*#__PURE__*/React.createElement("datalist", {
+    id: "ticks",
+    className: _RangeSliderModule.default.sliderTicks
+  }, Array.from({
+    length: (max - min) / step + 1
+  }, (_, index) => /*#__PURE__*/React.createElement("option", {
+    key: index,
+    value: min + index * step
+  })))), !hideRightIcon && /*#__PURE__*/React.createElement(RightIconComponent, _extends({
+    name: iconRightName,
+    size: iconRightSize,
+    type: iconRightType,
+    color: iconRightDisabled ? 'disabled' : 'primary'
+  }, !(disabled || value >= max) && {
+    onClick: () => emitRoundedValue(value + step)
+  })));
+});
+exports.RangeSlider = RangeSlider;

package/lib/components/RangeSlider/RangeSlider.js.flow

@@ -0,0 +1,155 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {
+  colorFillPrimary,
+  colorGrayLightest,
+  colorTextDisabled,
+} from '../../styles/variables/_color';
+import classify from '../../utils/classify';
+import type {IconSize, IconType} from '../Icon';
+import {ClickableIcon, Icon, ICON_SIZE} from '../Icon';
+
+import css from './RangeSlider.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type RangeSliderProps = {
+  min?: number,
+  max?: number,
+  step?: number,
+  value?: number,
+  onChange?: (value: number) => void, // We don't want to send in the event because the icon buttons also modify the value
+  showTicks?: boolean,
+  iconLeftName?: string,
+  iconLeftType?: IconType,
+  iconLeftSize?: IconSize,
+  iconRightName?: string,
+  iconRightType?: IconType,
+  iconRightSize?: IconSize,
+  disabled?: boolean,
+  hideLeftIcon?: boolean,
+  hideRightIcon?: boolean,
+  classNames?: ClassNames,
+  ...
+};
+
+export const RangeSlider: React$AbstractComponent<
+  RangeSliderProps,
+  HTMLDivElement,
+> = React.forwardRef<RangeSliderProps, HTMLDivElement>(
+  (
+    {
+      classNames,
+      disabled,
+      min = 0,
+      max = 100,
+      step = 1,
+      value = min,
+      onChange,
+      showTicks,
+      iconLeftName = 'minus',
+      iconLeftSize = ICON_SIZE.small,
+      iconLeftType,
+      iconRightName = 'plus',
+      iconRightSize = ICON_SIZE.small,
+      iconRightType,
+      hideLeftIcon,
+      hideRightIcon,
+      ...restInputProps
+    }: RangeSliderProps,
+    ref,
+  ) => {
+    const progress = ((value - min) / (max - min)) * 100;
+
+    const iconLeftDisabled = disabled || value <= min;
+    const iconRightDisabled = disabled || value >= max;
+
+    /**
+     * Note(Nishant): This needs to be done because the Clickable Icon
+     * does not support disable prop currently. This can become a refactor
+     * task once we bake in disable support to Clickable Icon variation
+     */
+    const LeftIconComponent = iconLeftDisabled ? Icon : ClickableIcon;
+    const RightIconComponent = iconRightDisabled ? Icon : ClickableIcon;
+
+    const progressColor = disabled ? colorTextDisabled : colorFillPrimary;
+
+    const handleChange = (e: SyntheticEvent<HTMLInputElement>) => {
+      emitRoundedValue(e.currentTarget.value);
+    };
+
+    const emitRoundedValue = (value: number | string) => {
+      const newValue = parseFloat(value);
+      const roundedValue = Math.round(newValue * 100) / 100; // Rounds to two decimal places
+      onChange?.(roundedValue);
+    };
+
+    return (
+      <div
+        ref={ref}
+        data-testid="RangeSlider"
+        className={classify(
+          css.wrapper,
+          {[css.disabled]: disabled},
+          classNames?.wrapper,
+        )}
+      >
+        {!hideLeftIcon && (
+          <LeftIconComponent
+            name={iconLeftName}
+            size={iconLeftSize}
+            type={iconLeftType}
+            color={iconLeftDisabled ? 'disabled' : 'primary'}
+            {...(!(disabled || value <= min) && {
+              onClick: () => emitRoundedValue(value - step),
+            })}
+          />
+        )}
+
+        <div className={css.sliderContainer}>
+          <input
+            {...restInputProps}
+            type="range"
+            min={min}
+            max={max}
+            step={step}
+            value={value}
+            onChange={handleChange}
+            className={css.slider}
+            list={showTicks ? 'ticks' : undefined}
+            disabled={disabled}
+            style={{
+              background: `linear-gradient(to right, ${progressColor} ${progress}%, ${colorGrayLightest} ${progress}%)`,
+            }}
+          />
+          {showTicks && step > 0 && (
+            <datalist id="ticks" className={css.sliderTicks}>
+              {/*
+                Note(Nishant): Currently, ticks are shown based on the step value.
+                This can be easily extended in the future to support custom tick intervals
+                by allowing user-defined brackets or ranges for tick marks.
+              */}
+              {Array.from({length: (max - min) / step + 1}, (_, index) => (
+                <option key={index} value={min + index * step} />
+              ))}
+            </datalist>
+          )}
+        </div>
+        {!hideRightIcon && (
+          <RightIconComponent
+            name={iconRightName}
+            size={iconRightSize}
+            type={iconRightType}
+            color={iconRightDisabled ? 'disabled' : 'primary'}
+            {...(!(disabled || value >= max) && {
+              onClick: () => emitRoundedValue(value + step),
+            })}
+          />
+        )}
+      </div>
+    );
+  },
+);

package/lib/components/RangeSlider/RangeSlider.module.css

@@ -0,0 +1,121 @@
+@value (colorFillPrimary, colorGrayLightest, colorBackgroundTertiary, colorFocusPrimary, colorTextDisabled) from '../../styles/variables/_color.css';
+@value (sizeFluid, size4, size20, size2) from '../../styles/variables/_size.css';
+@value (spaceXSmall, spaceXXSmall, spaceNone) from '../../styles/variables/_space.css';
+@value (borderRadiusLarge, borderRadiusCircle, borderWidthTertiary, borderWidthNone) from '../../styles/variables/_border.css';
+
+@value thumbSize: size20;
+@value tickSize: size2;
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  width: sizeFluid;
+  gap: calc(spaceXSmall * 2);
+}
+
+.sliderContainer {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  position: relative;
+  width: sizeFluid;
+}
+
+.slider {
+  display: flex;
+  align-items: center;
+  -webkit-appearance: none;
+  appearance: none;
+  width: sizeFluid;
+  height: size4;
+  background-color: colorGrayLightest;
+  border-radius: borderRadiusLarge;
+  outline: none;
+  cursor: pointer;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: thumbSize;
+  height: thumbSize;
+  border-radius: borderRadiusCircle;
+  background: colorFillPrimary;
+  cursor: progress;
+  border: borderWidthTertiary solid colorBackgroundTertiary;
+  cursor: move; /* fallback if grab cursor is unsupported */
+  cursor: grab;
+  cursor: -webkit-grab;
+}
+
+.slider:active::-webkit-slider-thumb {
+  cursor: grabbing;
+  cursor: -webkit-grabbing;
+}
+
+.disabled .slider::-webkit-slider-thumb {
+  background: colorTextDisabled; /* Disabled thumb color */
+  cursor: not-allowed;
+}
+
+.slider::-moz-range-thumb {
+  width: thumbSize;
+  height: thumbSize;
+  border-radius: borderRadiusCircle;
+  background: colorFillPrimary;
+  cursor: progress;
+  border: borderWidthTertiary solid colorBackgroundTertiary;
+  cursor: move; /* fallback if grab cursor is unsupported */
+  cursor: grab;
+  cursor: -moz-grab;
+}
+
+.slider:active::-moz-range-thumb {
+  cursor: grabbing;
+  cursor: -moz-grabbing;
+}
+
+.disabled .slider::-moz-range-thumb {
+  background: colorTextDisabled; /* Disabled thumb color */
+  cursor: not-allowed;
+}
+
+/***** Focus Styles *****/
+/* Removes default focus */
+input[type='range']:focus {
+  outline: none;
+}
+
+input[type='range']:focus::-webkit-slider-thumb {
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusPrimary;
+}
+
+input[type='range']:focus::-moz-range-thumb {
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusPrimary;
+}
+
+.sliderTicks {
+  display: flex;
+  position: absolute;
+  top: calc(spaceXXSmall / 4);
+  width: sizeFluid;
+  justify-content: space-between;
+  pointer-events: none; /* Prevent ticks from interfering with slider interaction */
+  padding: spaceNone calc(thumbSize / 2); /* Half of thumb size */
+}
+
+.sliderTicks option {
+  display: flex;
+  background-color: colorFillPrimary;
+  width: tickSize;
+  height: tickSize;
+  border-radius: borderRadiusLarge;
+  display: flex;
+  padding-block-start: spaceNone;
+  padding-block-end: spaceNone;
+  min-block-size: tickSize;
+  padding-inline: spaceNone;
+  white-space: nowrap;
+}

package/lib/components/RangeSlider/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _RangeSlider = require("./RangeSlider");
+Object.keys(_RangeSlider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _RangeSlider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _RangeSlider[key];
+    }
+  });
+});

package/lib/components/RangeSlider/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './RangeSlider';

package/lib/components/index.js

@@ -454,6 +454,17 @@ Object.keys(_RadioButton).forEach(function (key) {
     }
   });
 });
+var _RangeSlider = require("./RangeSlider");
+Object.keys(_RangeSlider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _RangeSlider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _RangeSlider[key];
+    }
+  });
+});
 var _SearchInput = require("./SearchInput");
 Object.keys(_SearchInput).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/index.js.flow

@@ -41,6 +41,7 @@ export * from './Pagination';
 export * from './Panel';
 export * from './ProgressDonut';
 export * from './RadioButton';
+export * from './RangeSlider';
 export * from './SearchInput';
 export * from './Shimmer';
 export * from './SideMenuLink';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.118",
+  "version": "0.1.120",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {