@spaced-out/ui-design-system 0.1.124 → 0.1.126

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.126](https://github.com/spaced-out/ui-design-system/compare/v0.1.125...v0.1.126) (2024-08-30)
+
+
+### Bug Fixes
+
+* 🖼️ stepper component step color and custom icon changes  ([#261](https://github.com/spaced-out/ui-design-system/issues/261)) ([038d129](https://github.com/spaced-out/ui-design-system/commit/038d12945065634f736b65a328f96c589f8307cf))
+
+### [0.1.125](https://github.com/spaced-out/ui-design-system/compare/v0.1.124...v0.1.125) (2024-08-29)
+
+
+### Features
+
+* rating component ([#258](https://github.com/spaced-out/ui-design-system/issues/258)) ([450caa5](https://github.com/spaced-out/ui-design-system/commit/450caa523c55b5cf3e4635064f63b3e4eec19a8e))
+
 ### [0.1.124](https://github.com/spaced-out/ui-design-system/compare/v0.1.123...v0.1.124) (2024-08-27)
 
 

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

@@ -1,4 +1,4 @@
 // @flow strict
 
-export type {ChipProps} from './Chip';
+export type {ChipProps, ChipSemanticType} from './Chip';
 export {Chip, CHIP_SEMANTIC} from './Chip';

package/lib/components/Rating/Rating.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Rating = exports.RATING_SIZE = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _invariant = _interopRequireDefault(require("invariant"));
+var _lodash = require("lodash");
+var _classify = require("../../utils/classify");
+var _rating = require("../../utils/rating");
+var _Button = require("../Button");
+var _Chip = require("../Chip");
+var _ConditionalWrapper = require("../ConditionalWrapper");
+var _Icon = require("../Icon");
+var _Text = require("../Text");
+var _RatingModule = _interopRequireDefault(require("./Rating.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; }
+
+const RATING_SIZE = Object.freeze({
+  small: 'small',
+  medium: 'medium'
+});
+exports.RATING_SIZE = RATING_SIZE;
+const Rating = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    size = 'medium',
+    start = 0,
+    end = 5,
+    quiet,
+    rating = 0,
+    labels = _rating.RATINGS,
+    onChange,
+    readOnly,
+    hideLabel,
+    iconName = 'star',
+    iconColor = _Text.TEXT_COLORS.favorite,
+    chipSemantic = _Chip.CHIP_SEMANTIC.warning,
+    classNames
+  } = _ref;
+  const [hoverIcon, setHoverIcon] = React.useState(-1);
+  const chipText = (0, _rating.getRatingLabel)(rating - start, labels);
+  const totalIcons = end - start;
+  (0, _invariant.default)(totalIcons, JSON.stringify(_rating.RATING_ERRORS.INVALID_RANGE));
+  (0, _invariant.default)((0, _lodash.isUndefined)(labels) || (0, _lodash.isArray)(labels) && labels.length, JSON.stringify(_rating.RATING_ERRORS.INVALID_RATING_LABELS));
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "Rating",
+    ref: ref,
+    className: (0, _classify.classify)(_RatingModule.default.ratingContainer, classNames?.wrapper)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _RatingModule.default.stars
+  }, Array.from({
+    length: totalIcons
+  }).map((_, index) => {
+    const isHovering = hoverIcon > -1;
+    const iconCount = index + 1;
+    const iconType = (isHovering ? iconCount <= hoverIcon : iconCount <= rating - start) ? 'solid' : 'regular';
+    return /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
+      key: iconCount,
+      condition: !readOnly,
+      wrapper: children => /*#__PURE__*/React.createElement(_Button.UnstyledButton, {
+        onKeyDown: e => {
+          if (e.key === 'Enter') {
+            onChange?.(start + iconCount, e);
+          }
+        },
+        onFocus: () => !quiet && setHoverIcon(iconCount),
+        className: (0, _classify.classify)(_RatingModule.default.button, classNames?.button),
+        onClick: e => onChange?.(start + iconCount, e),
+        onMouseEnter: () => !quiet && setHoverIcon(iconCount),
+        onMouseLeave: () => !quiet && setHoverIcon(-1)
+      }, children)
+    }, /*#__PURE__*/React.createElement(_Icon.Icon, {
+      size: size,
+      name: iconName,
+      type: iconType,
+      color: iconColor,
+      className: (0, _classify.classify)(_RatingModule.default.icon, classNames?.icon)
+    }));
+  })), !hideLabel &&
+  /*#__PURE__*/
+  // $FlowFixMe[incompatible-type]
+  React.createElement(_Chip.Chip, {
+    size: size,
+    semantic: chipSemantic
+  }, chipText));
+});
+exports.Rating = Rating;

package/lib/components/Rating/Rating.js.flow

@@ -0,0 +1,133 @@
+// @flow strict
+
+import * as React from 'react';
+import invariant from 'invariant';
+import {isArray, isUndefined} from 'lodash';
+
+import type {ColorTypes} from '../../types/typography';
+import {classify} from '../../utils/classify';
+import {getRatingLabel, RATING_ERRORS, RATINGS} from '../../utils/rating';
+import {UnstyledButton} from '../Button';
+import type {ChipSemanticType} from '../Chip';
+import {Chip, CHIP_SEMANTIC} from '../Chip';
+import {ConditionalWrapper} from '../ConditionalWrapper';
+import {Icon} from '../Icon';
+import {TEXT_COLORS} from '../Text';
+
+import css from './Rating.module.css';
+
+
+export const RATING_SIZE = Object.freeze({
+  small: 'small',
+  medium: 'medium',
+});
+
+type ClassNames = $ReadOnly<{wrapper?: string, icon?: string, button?: string}>;
+type RatingSize = $Values<typeof RATING_SIZE>;
+
+export type RatingProps = {
+  size?: RatingSize,
+  start?: number,
+  end?: number,
+  quiet?: boolean,
+  rating?: number,
+  labels?: Array<string>,
+  iconColor?: ColorTypes,
+  onChange?: (rating: number, ?SyntheticEvent<HTMLElement>) => mixed,
+  readOnly?: boolean,
+  hideLabel?: boolean,
+  iconName?: string,
+  classNames?: ClassNames,
+  chipSemantic?: ChipSemanticType,
+};
+
+export const Rating: React$AbstractComponent<RatingProps, HTMLDivElement> =
+  React.forwardRef<RatingProps, HTMLDivElement>(
+    (
+      {
+        size = 'medium',
+        start = 0,
+        end = 5,
+        quiet,
+        rating = 0,
+        labels = RATINGS,
+        onChange,
+        readOnly,
+        hideLabel,
+        iconName = 'star',
+        iconColor = TEXT_COLORS.favorite,
+        chipSemantic = CHIP_SEMANTIC.warning,
+        classNames,
+      }: RatingProps,
+      ref,
+    ): React.Node => {
+      const [hoverIcon, setHoverIcon] = React.useState<number>(-1);
+      const chipText = getRatingLabel(rating - start, labels);
+      const totalIcons = end - start;
+
+      invariant(totalIcons, JSON.stringify(RATING_ERRORS.INVALID_RANGE));
+      invariant(
+        isUndefined(labels) || (isArray(labels) && labels.length),
+        JSON.stringify(RATING_ERRORS.INVALID_RATING_LABELS),
+      );
+
+      return (
+        <div
+          data-testid="Rating"
+          ref={ref}
+          className={classify(css.ratingContainer, classNames?.wrapper)}
+        >
+          <div className={css.stars}>
+            {Array.from({length: totalIcons}).map((_, index) => {
+              const isHovering = hoverIcon > -1;
+              const iconCount = index + 1;
+              const iconType = (
+                isHovering
+                  ? iconCount <= hoverIcon
+                  : iconCount <= rating - start
+              )
+                ? 'solid'
+                : 'regular';
+
+              return (
+                <ConditionalWrapper
+                  key={iconCount}
+                  condition={!readOnly}
+                  wrapper={(children) => (
+                    <UnstyledButton
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                          onChange?.(start + iconCount, e);
+                        }
+                      }}
+                      onFocus={() => !quiet && setHoverIcon(iconCount)}
+                      className={classify(css.button, classNames?.button)}
+                      onClick={(e) => onChange?.(start + iconCount, e)}
+                      onMouseEnter={() => !quiet && setHoverIcon(iconCount)}
+                      onMouseLeave={() => !quiet && setHoverIcon(-1)}
+                    >
+                      {children}
+                    </UnstyledButton>
+                  )}
+                >
+                  <Icon
+                    size={size}
+                    name={iconName}
+                    type={iconType}
+                    color={iconColor}
+                    className={classify(css.icon, classNames?.icon)}
+                  />
+                </ConditionalWrapper>
+              );
+            })}
+          </div>
+          {!hideLabel && (
+            // $FlowFixMe[incompatible-type]
+            <Chip size={size} semantic={chipSemantic}>
+              {chipText}
+            </Chip>
+          )}
+        </div>
+      );
+    },
+  );

package/lib/components/Rating/Rating.module.css

@@ -0,0 +1,41 @@
+@value (
+    spaceNone,
+    spaceXSmall,
+    spaceXXSmall
+) from '../../styles/variables/_space.css';
+@value (
+  colorFocusPrimary
+) from '../../styles/variables/_color.css';
+@value (
+  borderRadiusXSmall,
+  borderWidthNone,
+  borderWidthTertiary
+) from '../../styles/variables/_border.css';
+
+.ratingContainer {
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  gap: spaceXSmall;
+  margin: spaceXXSmall spaceXSmall;
+}
+
+.stars {
+  display: flex;
+}
+
+.icon {
+  composes: motionEaseInEaseOut from '../../styles/animation.module.css';
+  margin: spaceNone spaceXXSmall;
+}
+
+.button {
+  border-radius: borderRadiusXSmall;
+  outline: none;
+  cursor: pointer;
+}
+
+.button:focus {
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusPrimary;
+}

package/lib/components/Rating/index.js

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

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

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

package/lib/components/Stepper/Step/Step.js

@@ -57,17 +57,13 @@ const Step = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }, classNames?.stepCounter)
   }, completed && !active ? /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: "check",
-    color: iconName ? 'success' : 'inversePrimary',
-    type: "solid",
-    size: iconName ? 'medium' : 'small'
+    type: _Icon.ICON_TYPE.solid,
+    size: _Icon.ICON_SIZE.small,
+    className: _StepperModule.default.stepIcon
   }) : /*#__PURE__*/React.createElement(React.Fragment, null, iconName ? /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: iconName,
-    className: (0, _classify.default)(_StepperModule.default.stepIcon, {
-      [_StepperModule.default.selected]: active,
-      [_StepperModule.default.completed]: completed,
-      [_StepperModule.default.disabled]: disabled
-    }),
-    size: "medium",
+    className: _StepperModule.default.stepIcon,
+    size: _Icon.ICON_SIZE.small,
     type: iconType
   }) : (index + 1).toString())), /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_StepperModule.default.stepContent, classNames?.content)

package/lib/components/Stepper/Step/Step.js.flow

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import classify from '../../../utils/classify';
 import type {IconType} from '../../Icon';
-import {Icon} from '../../Icon';
+import {Icon, ICON_SIZE, ICON_TYPE} from '../../Icon';
 
 import css from '../Stepper.module.css';
 
@@ -95,21 +95,17 @@ export const Step: React$AbstractComponent<StepProps, HTMLDivElement> =
             {completed && !active ? (
               <Icon
                 name="check"
-                color={iconName ? 'success' : 'inversePrimary'}
-                type="solid"
-                size={iconName ? 'medium' : 'small'}
+                type={ICON_TYPE.solid}
+                size={ICON_SIZE.small}
+                className={css.stepIcon}
               />
             ) : (
               <React.Fragment>
                 {iconName ? (
                   <Icon
                     name={iconName}
-                    className={classify(css.stepIcon, {
-                      [css.selected]: active,
-                      [css.completed]: completed,
-                      [css.disabled]: disabled,
-                    })}
-                    size="medium"
+                    className={css.stepIcon}
+                    size={ICON_SIZE.small}
                     type={iconType}
                   />
                 ) : (

package/lib/components/Stepper/Stepper.module.css

@@ -1,10 +1,12 @@
 @value (
   colorFillPrimary,
+  colorFillSecondary,
   colorSuccessDark,
   colorBackgroundTertiary,
   colorFillDisabled,
   colorTextSecondary,
   colorTextPrimary,
+  colorTextClickable,
   colorTextDisabled,
   colorTextInversePrimary,
   colorBorderSecondary
@@ -39,7 +41,7 @@
 .stepWrapper {
   position: relative;
   display: flex;
-  align-items: baseline;
+  align-items: flex-start;
   gap: spaceSmall;
   width: sizeFluid;
 }
@@ -60,16 +62,16 @@
   color: colorTextSecondary;
 }
 
-.stepWrapperCounter.selected {
+.stepWrapperCounter.completed {
   background-color: colorFillPrimary;
   border: borderWidthPrimary solid transparent;
   color: colorTextInversePrimary;
 }
 
-.stepWrapperCounter.completed {
-  background-color: colorSuccessDark;
+.stepWrapperCounter.selected {
+  background-color: colorFillSecondary;
   border: borderWidthPrimary solid transparent;
-  color: colorTextInversePrimary;
+  color: colorTextClickable;
 }
 
 .stepWrapperCounter.disabled {
@@ -78,32 +80,15 @@
   color: colorTextDisabled;
 }
 
-.stepWrapperCounter.withIcon {
-  border: initial;
-  border-radius: initial;
-  background-color: initial;
-}
-
 .stepIcon {
   color: inherit;
 }
 
-.stepIcon.selected {
-  color: colorFillPrimary;
-}
-
-.stepIcon.completed {
-  color: colorSuccessDark;
-}
-
-.stepIcon.disabled {
-  color: colorTextDisabled;
-}
-
 .stepContent {
   display: flex;
   flex-flow: column;
   gap: spaceXXSmall;
+  margin-top: spaceXXSmall;
 }
 
 .stepLabelWrapper {

package/lib/utils/index.js

@@ -113,6 +113,17 @@ Object.keys(_mergeRefs).forEach(function (key) {
     }
   });
 });
+var _rating = require("./rating");
+Object.keys(_rating).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _rating[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _rating[key];
+    }
+  });
+});
 var _string = require("./string");
 Object.keys(_string).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/utils/index.js.flow

@@ -10,5 +10,6 @@ export * from './helpers';
 export * from './makeClassNameComponent';
 export * from './menu';
 export * from './merge-refs';
+export * from './rating';
 export * from './string';
 export * from './tokens';

package/lib/utils/rating/index.js

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

package/lib/utils/rating/index.js.flow

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

package/lib/utils/rating/rating.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRatingLabel = exports.RATING_ERRORS = exports.RATINGS = void 0;
+
+const RATING_ERRORS = Object.freeze({
+  INVALID_RANGE: {
+    type: 'INVALID_RANGE',
+    description: 'Given rating\'s stop value cannot come before the start value.'
+  },
+  INVALID_RATING_LABELS: {
+    type: 'INVALID_RATING_LABELS',
+    description: 'Given rating labels are invalid.'
+  }
+});
+exports.RATING_ERRORS = RATING_ERRORS;
+const RATINGS = ['Not-Qualified', 'Proficient', 'Silver', 'Gold', 'Platinum', 'Diamond'];
+exports.RATINGS = RATINGS;
+const getRatingLabel = (rating, labels) => {
+  if (rating <= 0) {
+    return labels[0];
+  } else if (rating >= labels.length) {
+    return labels.slice(-1)[0];
+  } else {
+    return labels[rating];
+  }
+};
+exports.getRatingLabel = getRatingLabel;

package/lib/utils/rating/rating.js.flow

@@ -0,0 +1,35 @@
+// @flow strict
+
+export const RATING_ERRORS = Object.freeze({
+  INVALID_RANGE: {
+    type: 'INVALID_RANGE',
+    description:
+      'Given rating\'s stop value cannot come before the start value.',
+  },
+  INVALID_RATING_LABELS: {
+    type: 'INVALID_RATING_LABELS',
+    description: 'Given rating labels are invalid.',
+  },
+});
+
+export const RATINGS: Array<string> = [
+  'Not-Qualified',
+  'Proficient',
+  'Silver',
+  'Gold',
+  'Platinum',
+  'Diamond',
+];
+
+export const getRatingLabel = (
+  rating: number,
+  labels: Array<string>,
+): string => {
+  if (rating <= 0) {
+    return labels[0];
+  } else if (rating >= labels.length) {
+    return labels.slice(-1)[0];
+  } else {
+    return labels[rating];
+  }
+};

package/package.json

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