@spaced-out/ui-design-system 0.3.8 → 0.3.9

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.3.9](https://github.com/spaced-out/ui-design-system/compare/v0.3.8...v0.3.9) (2024-12-17)
+
+
+### Features
+
+* [GDS-473] introduces withBorder and labelMap props in the score-bar component. ([#297](https://github.com/spaced-out/ui-design-system/issues/297)) ([9c741d2](https://github.com/spaced-out/ui-design-system/commit/9c741d285aa91f97f1afb35bc4e9379d3bf09d0b))
+
 ### [0.3.8](https://github.com/spaced-out/ui-design-system/compare/v0.3.8-beta.0...v0.3.8) (2024-12-13)
 
 ### [0.3.8-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.3.7...v0.3.8-beta.0) (2024-12-12)

package/design-tokens/color/app-color.json

@@ -261,23 +261,23 @@
     "score-bar": {
       "level": {
         "1": {
-          "value": "{baseColor.red.400.value}"
+          "value": "{baseColor.gray.400.value}"
         },
         "2": {
-          "value": "{baseColor.orange.400.value}"
+          "value": "{baseColor.red.400.value}"
         },
         "3": {
-          "value": "{baseColor.blue.400.value}"
+          "value": "{baseColor.orange.400.value}"
         },
         "4": {
-          "value": "{baseColor.green.300.value}"
+          "value": "{baseColor.blue.400.value}"
         },
         "5": {
-          "value": "{baseColor.green.700.value}"
+          "value": "{baseColor.green.400.value}"
         }
       },
       "inactive": {
-        "value": "{baseColor.indigo.200.value}"
+        "value": "{baseColor.gray.200.value}"
       }
     },
     "gray.lightest": {

package/lib/components/ScoreBar/ScoreBar.js

@@ -11,6 +11,7 @@ var _color = require("../../styles/variables/_color.js");
 var _size = require("../../styles/variables/_size");
 var _classify = require("../../utils/classify");
 var _scoreBar = require("../../utils/score-bar");
+var _Text = require("../Text");
 var _ScoreBarModule = _interopRequireDefault(require("./ScoreBar.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); }
@@ -37,13 +38,18 @@ const ScoreBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     colorMap = DEFAULT_COLOR_MAP,
     totalBars = DEFAULT_BARS_COUNT,
     direction = 'vertical',
-    classNames
+    classNames,
+    withBorder = false,
+    labelMap
   } = _ref;
   (0, _invariant.default)(totalBars > 0, JSON.stringify(_scoreBar.SCORE_BAR_ERRORS.INVALID_BAR_COUNT));
+  const activeLabel = (0, _scoreBar.getLabelByScorePercentage)(score, totalBars, labelMap);
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
     "data-testid": "ScoreBar",
-    className: (0, _classify.classify)(_ScoreBarModule.default.scoreBarWrapper, classNames?.wrapper)
+    className: (0, _classify.classify)(_ScoreBarModule.default.scoreBarWrapper, {
+      [_ScoreBarModule.default.scoreBarBorder]: withBorder
+    }, classNames?.wrapper)
   }, /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_ScoreBarModule.default.scoreBarContainer, classNames?.container),
     style: {
@@ -59,6 +65,8 @@ const ScoreBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       '--width': direction === Direction.vertical ? _size.size18 : _size.size2
     },
     key: count
-  }))));
+  }))), activeLabel && /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
+    className: (0, _classify.classify)(_ScoreBarModule.default.scoreBarLabel, classNames?.label)
+  }, activeLabel));
 });
 exports.ScoreBar = ScoreBar;

package/lib/components/ScoreBar/ScoreBar.js.flow

@@ -16,8 +16,10 @@ import {size2, size18} from '../../styles/variables/_size';
 import {classify} from '../../utils/classify';
 import {
   getColorByScorePercentage,
+  getLabelByScorePercentage,
   SCORE_BAR_ERRORS,
 } from '../../utils/score-bar';
+import {SubTitleExtraSmall} from '../Text';
 
 import css from './ScoreBar.module.css';
 
@@ -31,24 +33,24 @@ export type ClassNames = $ReadOnly<{
   container?: string,
   wrapper?: string,
   bar?: string,
+  label?: string,
 }>;
 
 export type ScoreBarDirection = $Values<typeof Direction>;
 export type ScoreBarColorMap = $ReadOnly<{
-  inactive: string, // percentage > score
-  '100': string, // score > 80%
-  '80': string, // score > 60% and score <= %80
-  '60': string, // score > 40% and score <= %60
-  '40': string, // score > 20% and score <= 40%
-  '20': string, // score > 0% and score <= 20%
+  [key: string]: string,
 }>;
 
+export type ScoreBarLabelMap = ScoreBarColorMap;
+
 export type ScoreBarProps = {
   classNames?: ClassNames,
   direction?: ScoreBarDirection,
   colorMap?: ScoreBarColorMap,
+  labelMap?: ScoreBarLabelMap,
   totalBars?: number,
   score?: number,
+  withBorder?: boolean,
 };
 
 const DEFAULT_BARS_COUNT = 5;
@@ -70,6 +72,8 @@ export const ScoreBar: React$AbstractComponent<ScoreBarProps, HTMLDivElement> =
         totalBars = DEFAULT_BARS_COUNT,
         direction = 'vertical',
         classNames,
+        withBorder = false,
+        labelMap,
       }: ScoreBarProps,
       ref,
     ): React.Node => {
@@ -78,11 +82,17 @@ export const ScoreBar: React$AbstractComponent<ScoreBarProps, HTMLDivElement> =
         JSON.stringify(SCORE_BAR_ERRORS.INVALID_BAR_COUNT),
       );
 
+      const activeLabel = getLabelByScorePercentage(score, totalBars, labelMap);
+
       return (
         <div
           ref={ref}
           data-testid="ScoreBar"
-          className={classify(css.scoreBarWrapper, classNames?.wrapper)}
+          className={classify(
+            css.scoreBarWrapper,
+            {[css.scoreBarBorder]: withBorder},
+            classNames?.wrapper,
+          )}
         >
           <div
             className={classify(css.scoreBarContainer, classNames?.container)}
@@ -111,6 +121,14 @@ export const ScoreBar: React$AbstractComponent<ScoreBarProps, HTMLDivElement> =
               />
             ))}
           </div>
+
+          {activeLabel && (
+            <SubTitleExtraSmall
+              className={classify(css.scoreBarLabel, classNames?.label)}
+            >
+              {activeLabel}
+            </SubTitleExtraSmall>
+          )}
         </div>
       );
     },

package/lib/components/ScoreBar/ScoreBar.module.css

@@ -1,31 +1,28 @@
 @value (
+    spaceXSmall,
+    spaceXXSmall
+) from '../../styles/variables/_space.css';
+@value (
+    borderRadiusSmall,
     borderRadiusXSmall
 ) from '../../styles/variables/_border.css';
-@value (
-    size34,
-    size18,
-    size2
-) from '../../styles/variables/_size.css';
-@value (
-    spaceXXSmall,
-    spaceXSmall
-) from '../../styles/variables/_space.css';
 
 .scoreBarWrapper {
   display: flex;
   padding: spaceXSmall;
   align-items: center;
   justify-content: center;
+  width: fit-content;
 }
 
 .scoreBarContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: calc(spaceXXSmall / 2);
   width: var(--width);
   height: var(--height);
-  gap: calc(spaceXXSmall / 2);
-  display: flex;
   flex-direction: var(--direction);
-  justify-content: space-between;
-  align-items: center;
 }
 
 .bar {
@@ -34,3 +31,12 @@
   border-radius: borderRadiusXSmall;
   background-color: var(--background-color);
 }
+
+.scoreBarBorder {
+  composes: borderPrimary from '../../styles/border.module.css';
+  border-radius: borderRadiusSmall;
+}
+
+.scoreBarLabel {
+  padding-left: spaceXSmall;
+}

package/lib/styles/index.css

@@ -162,17 +162,17 @@
 
 @value colorDataViz8: #F5EBB4;
 
-@value colorScoreBarLevel1: #e94970;
+@value colorScoreBarLevel1: #7e7e7e;
 
-@value colorScoreBarLevel2: #e5983d;
+@value colorScoreBarLevel2: #e94970;
 
-@value colorScoreBarLevel3: #3987f3;
+@value colorScoreBarLevel3: #e5983d;
 
-@value colorScoreBarLevel4: #56b988;
+@value colorScoreBarLevel4: #3987f3;
 
-@value colorScoreBarLevel5: #026b37;
+@value colorScoreBarLevel5: #35ab71;
 
-@value colorScoreBarInactive: #D3D2E0;
+@value colorScoreBarInactive: #d1d1d1;
 
 @value colorGrayLightest: #EBEBEB;
 

package/lib/styles/index.js

@@ -171,17 +171,17 @@ const colorDataViz7 = '#F5B8E1';
 exports.colorDataViz7 = colorDataViz7;
 const colorDataViz8 = '#F5EBB4';
 exports.colorDataViz8 = colorDataViz8;
-const colorScoreBarLevel1 = '#e94970';
+const colorScoreBarLevel1 = '#7e7e7e';
 exports.colorScoreBarLevel1 = colorScoreBarLevel1;
-const colorScoreBarLevel2 = '#e5983d';
+const colorScoreBarLevel2 = '#e94970';
 exports.colorScoreBarLevel2 = colorScoreBarLevel2;
-const colorScoreBarLevel3 = '#3987f3';
+const colorScoreBarLevel3 = '#e5983d';
 exports.colorScoreBarLevel3 = colorScoreBarLevel3;
-const colorScoreBarLevel4 = '#56b988';
+const colorScoreBarLevel4 = '#3987f3';
 exports.colorScoreBarLevel4 = colorScoreBarLevel4;
-const colorScoreBarLevel5 = '#026b37';
+const colorScoreBarLevel5 = '#35ab71';
 exports.colorScoreBarLevel5 = colorScoreBarLevel5;
-const colorScoreBarInactive = '#D3D2E0';
+const colorScoreBarInactive = '#d1d1d1';
 exports.colorScoreBarInactive = colorScoreBarInactive;
 const colorGrayLightest = '#EBEBEB';
 exports.colorGrayLightest = colorGrayLightest;

package/lib/styles/index.js.flow

@@ -164,17 +164,17 @@ export const colorDataViz7 = '#F5B8E1';
 
 export const colorDataViz8 = '#F5EBB4';
 
-export const colorScoreBarLevel1 = '#e94970';
+export const colorScoreBarLevel1 = '#7e7e7e';
 
-export const colorScoreBarLevel2 = '#e5983d';
+export const colorScoreBarLevel2 = '#e94970';
 
-export const colorScoreBarLevel3 = '#3987f3';
+export const colorScoreBarLevel3 = '#e5983d';
 
-export const colorScoreBarLevel4 = '#56b988';
+export const colorScoreBarLevel4 = '#3987f3';
 
-export const colorScoreBarLevel5 = '#026b37';
+export const colorScoreBarLevel5 = '#35ab71';
 
-export const colorScoreBarInactive = '#D3D2E0';
+export const colorScoreBarInactive = '#d1d1d1';
 
 export const colorGrayLightest = '#EBEBEB';
 

package/lib/styles/variables/_color.css

@@ -138,17 +138,17 @@
 
 @value colorDataViz8: #F5EBB4;
 
-@value colorScoreBarLevel1: #e94970;
+@value colorScoreBarLevel1: #7e7e7e;
 
-@value colorScoreBarLevel2: #e5983d;
+@value colorScoreBarLevel2: #e94970;
 
-@value colorScoreBarLevel3: #3987f3;
+@value colorScoreBarLevel3: #e5983d;
 
-@value colorScoreBarLevel4: #56b988;
+@value colorScoreBarLevel4: #3987f3;
 
-@value colorScoreBarLevel5: #026b37;
+@value colorScoreBarLevel5: #35ab71;
 
-@value colorScoreBarInactive: #D3D2E0;
+@value colorScoreBarInactive: #d1d1d1;
 
 @value colorGrayLightest: #EBEBEB;
 

package/lib/styles/variables/_color.js

@@ -146,17 +146,17 @@ const colorDataViz7 = '#F5B8E1';
 exports.colorDataViz7 = colorDataViz7;
 const colorDataViz8 = '#F5EBB4';
 exports.colorDataViz8 = colorDataViz8;
-const colorScoreBarLevel1 = '#e94970';
+const colorScoreBarLevel1 = '#7e7e7e';
 exports.colorScoreBarLevel1 = colorScoreBarLevel1;
-const colorScoreBarLevel2 = '#e5983d';
+const colorScoreBarLevel2 = '#e94970';
 exports.colorScoreBarLevel2 = colorScoreBarLevel2;
-const colorScoreBarLevel3 = '#3987f3';
+const colorScoreBarLevel3 = '#e5983d';
 exports.colorScoreBarLevel3 = colorScoreBarLevel3;
-const colorScoreBarLevel4 = '#56b988';
+const colorScoreBarLevel4 = '#3987f3';
 exports.colorScoreBarLevel4 = colorScoreBarLevel4;
-const colorScoreBarLevel5 = '#026b37';
+const colorScoreBarLevel5 = '#35ab71';
 exports.colorScoreBarLevel5 = colorScoreBarLevel5;
-const colorScoreBarInactive = '#D3D2E0';
+const colorScoreBarInactive = '#d1d1d1';
 exports.colorScoreBarInactive = colorScoreBarInactive;
 const colorGrayLightest = '#EBEBEB';
 exports.colorGrayLightest = colorGrayLightest;

package/lib/styles/variables/_color.js.flow

@@ -140,17 +140,17 @@ export const colorDataViz7 = '#F5B8E1';
 
 export const colorDataViz8 = '#F5EBB4';
 
-export const colorScoreBarLevel1 = '#e94970';
+export const colorScoreBarLevel1 = '#7e7e7e';
 
-export const colorScoreBarLevel2 = '#e5983d';
+export const colorScoreBarLevel2 = '#e94970';
 
-export const colorScoreBarLevel3 = '#3987f3';
+export const colorScoreBarLevel3 = '#e5983d';
 
-export const colorScoreBarLevel4 = '#56b988';
+export const colorScoreBarLevel4 = '#3987f3';
 
-export const colorScoreBarLevel5 = '#026b37';
+export const colorScoreBarLevel5 = '#35ab71';
 
-export const colorScoreBarInactive = '#D3D2E0';
+export const colorScoreBarInactive = '#d1d1d1';
 
 export const colorGrayLightest = '#EBEBEB';
 

package/lib/utils/score-bar/score-bar.js

@@ -3,21 +3,35 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getColorByScorePercentage = exports.SCORE_BAR_ERRORS = void 0;
+exports.getLabelByScorePercentage = exports.getColorByScorePercentage = exports.SCORE_BAR_ERRORS = void 0;
 
-const getColorByPercentage = (totalBars, score, colorMap) => {
-  if (score <= 0) {
-    return colorMap.inactive;
-  }
+const getValidRange = (score, totalBars, keys) => {
   const scorePercentage = 100 * score / totalBars;
-  const range = Math.min(Math.ceil(scorePercentage / 20) * 20, 100);
-  return colorMap[range.toString()] || colorMap.inactive;
+  for (const key of keys) {
+    if (scorePercentage <= Number(key)) {
+      return key;
+    }
+  }
+  return [...keys].pop() || '';
 };
 const getColorByScorePercentage = (totalBars, score, currentBarNumber, colorMap) => {
-  const validColor = getColorByPercentage(totalBars, score, colorMap);
+  if (score <= 0) {
+    return colorMap.inactive;
+  }
+  const validRange = getValidRange(score, totalBars, Object.keys(colorMap));
+  const validColor = colorMap[validRange];
   return currentBarNumber < score ? validColor : colorMap.inactive;
 };
 exports.getColorByScorePercentage = getColorByScorePercentage;
+const getLabelByScorePercentage = (score, totalBars, labelMap) => {
+  if (!labelMap) {
+    return '';
+  }
+  const validRange = getValidRange(score, totalBars, Object.keys(labelMap));
+  const validLabel = labelMap[validRange];
+  return validLabel || '';
+};
+exports.getLabelByScorePercentage = getLabelByScorePercentage;
 const SCORE_BAR_ERRORS = Object.freeze({
   INVALID_BAR_COUNT: {
     type: 'INVALID_BAR_COUNT',

package/lib/utils/score-bar/score-bar.js.flow

@@ -1,18 +1,24 @@
 // @flow strict
-import type {ScoreBarColorMap} from '../../components/ScoreBar';
 
+import type {
+  ScoreBarColorMap,
+  ScoreBarLabelMap,
+} from '../../components/ScoreBar';
 
-const getColorByPercentage = (
-  totalBars: number,
+
+const getValidRange = (
   score: number,
-  colorMap: ScoreBarColorMap,
+  totalBars: number,
+  keys: Array<string>,
 ): string => {
-  if (score <= 0) {
-    return colorMap.inactive;
-  }
   const scorePercentage = (100 * score) / totalBars;
-  const range = Math.min(Math.ceil(scorePercentage / 20) * 20, 100);
-  return colorMap[range.toString()] || colorMap.inactive;
+  for (const key of keys) {
+    if (scorePercentage <= Number(key)) {
+      return key;
+    }
+  }
+
+  return [...keys].pop() || '';
 };
 
 export const getColorByScorePercentage = (
@@ -21,10 +27,29 @@ export const getColorByScorePercentage = (
   currentBarNumber: number,
   colorMap: ScoreBarColorMap,
 ): string => {
-  const validColor = getColorByPercentage(totalBars, score, colorMap);
+  if (score <= 0) {
+    return colorMap.inactive;
+  }
+  const validRange = getValidRange(score, totalBars, Object.keys(colorMap));
+  const validColor = colorMap[validRange];
+
   return currentBarNumber < score ? validColor : colorMap.inactive;
 };
 
+export const getLabelByScorePercentage = (
+  score: number,
+  totalBars: number,
+  labelMap?: ScoreBarLabelMap,
+): string => {
+  if (!labelMap) {
+    return '';
+  }
+  const validRange = getValidRange(score, totalBars, Object.keys(labelMap));
+  const validLabel = labelMap[validRange];
+
+  return validLabel || '';
+};
+
 export const SCORE_BAR_ERRORS = Object.freeze({
   INVALID_BAR_COUNT: {
     type: 'INVALID_BAR_COUNT',

package/package.json

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