UXPLATFORM-6962: Node 16 upgrade

.nvmrc

@@ -1 +1 @@
-lts/fermium
+lts/gallium

package.json

@@ -4,7 +4,7 @@
   "version": "0.1.0",
   "description": "terra-graphs",
   "engines": {
-    "node": "^10.0.0 || ^12.0.0 || ^14.0.0"
+    "node": "^10.0.0 || ^12.0.0 || ^14.0.0 || ^16.0.0"
   },
   "repository": {
     "type": "git",
@@ -47,7 +47,7 @@
     "@cerner/terra-enzyme-intl": "4.6.0",
     "@cerner/terra-functional-testing": "^2.0.0",
     "@cerner/terra-open-source-scripts": "^1.0.1",
-    "@cerner/webpack-config-terra": "^1.3.1",
+    "@cerner/webpack-config-terra": "file:cerner-webpack-config-terra-1.3.1.tgz",
     "autoprefixer": "^9.8.6",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
@@ -70,7 +70,7 @@
     "eslint-config-prettier": "^6.11.0",
     "eslint-config-standard": "^14.1.1",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsdoc": "^24.0.6",
+    "eslint-plugin-jsdoc": "^30.7.6",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
@@ -144,6 +144,16 @@
     "wdio-default": "terra wdio",
     "wdio-lowlight": "NODE_OPTIONS=--max-old-space-size=2048 terra wdio --themes clinical-lowlight-theme",
     "wdio-fusion": "terra wdio --themes orion-fusion-theme",
-    "wdio": "terra wdio --themes terra-default-theme"
+    "wdio": "terra wdio --themes terra-default-theme",
+    "wdio:bar": "terra wdio --themes terra-default-theme --spec packages/terra-graphs/tests/wdio/Graphs/BarGraph/bar-graph-spec.js",
+    "wdio:bubble": "terra wdio --themes terra-default-theme --spec packages/terra-graphs/tests/wdio/Graphs/BubbleGraph/bubbleGraphs-spec.js",
+    "wdio:combination": "terra wdio --themes terra-default-theme --spec packages/terra-graphs/tests/wdio/Graphs/CombinationGraph/combination-graph-spec.js",
+    "wdio:gantt": "terra wdio --themes terra-default-theme --spec packages/terra-graphs/tests/wdio/Graphs/GanttChart/gantt-chart-spec.js",
+    "wdio:general": "terra wdio --themes terra-default-theme --spec packages/terra-graphs/tests/wdio/Graphs/General/general-spec.js",
+    "wdio:line": "terra wdio --themes terra-default-theme --spec packages/terra-graphs/tests/wdio/Graphs/LineGraph/line-graph-spec.js",
+    "wdio:pairedresult": "terra wdio --themes terra-default-theme --spec packages/terra-graphs/tests/wdio/Graphs/PairedResultGraph/paired-result-graph-spec.js",
+    "wdio:pie": "terra wdio --themes terra-default-theme --spec packages/terra-graphs/tests/wdio/Graphs/PieChart/pie-graph-spec.js",
+    "wdio:scatter": "terra wdio --themes terra-default-theme --spec packages/terra-graphs/tests/wdio/Graphs/ScatterGraph/scatter-graph-spec.js",
+    "wdio:timeline": "terra wdio --themes terra-default-theme --spec packages/terra-graphs/tests/wdio/Graphs/Timeline/timeline-spec.js"
   }
 }

packages/carbon-graphs/CHANGELOG.md

@@ -2,13 +2,19 @@
 
 ## Unreleased
 
+## 2.23.0 - (January 3, 2023)
+
+* Added
+  * Added logic to increase legend icon size when an icon is used in the legend without a line.
+
 ## 2.22.0 - (September 13, 2022)
 
 * Added
   * Added support for `config.axis.x.allowCalibration` for a line graph with a numerical and timeseries x-axis.
   * Added support for `config.axis.x.allowCalibration` for a paired result graph with a numerical and timeseries x-axis.
   * Added support for `config.axis.x.allowCalibration` for a scatter graph with a numerical and timeseries x-axis.
   * Added support for `config.axis.x.allowCalibration` for a bar graph with a numerical and timeseries x-axis.
+  * Removed extra done() from testing as karma will fail in future
 
 ## 2.21.0 - (February 15, 2022)
 

packages/carbon-graphs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cerner/carbon-graphs",
   "main": "lib/Graphs.js",
-  "version": "2.22.0",
+  "version": "2.23.0",
   "description": "A graphing library built using d3 based on Cerner design standards",
   "repository": {
     "type": "git",

packages/carbon-graphs/src/js/helpers/legend.js

@@ -65,7 +65,9 @@ const legendDisplayStyle = (input) => (input.legendOptions
  */
 const createLegendIcon = (buttonPath, input) => buttonPath.append(() => new Shape(getShapeForTarget(input)).getShapeElement(
   getDefaultSVGProps({
-    svgClassNames: styles.legendItemIcon,
+    svgClassNames: (input.legendOptions && input.legendOptions.showLine)
+      ? styles.legendItemIconWithLine
+      : styles.legendItemIcon,
     svgStyles: `fill: ${getColorForTarget(input)};`,
   }),
   true,
@@ -75,14 +77,13 @@ const createLegendIcon = (buttonPath, input) => buttonPath.append(() => new Shap
  *
  * @private
  * @param {object} buttonPath - d3 svg object
- * @param {object} t - input item object processed from the input JSON
+ * @param {object} input - input item object processed from the input JSON
  */
-const createLegendLine = (buttonPath, t) => {
-  const { legendOptions } = t;
+const createLegendLine = (buttonPath, input) => {
   const svg = buttonPath
     .append('svg')
     .classed(
-      legendOptions.showShape
+      input.legendOptions.showShape
         ? styles.legendItemLineWithIcon
         : styles.legendItemLine,
       true,
@@ -94,16 +95,16 @@ const createLegendLine = (buttonPath, t) => {
     .attr('x1', 1)
     .attr(
       'x2',
-      legendOptions.showShape
+      input.legendOptions.showShape
         ? constants.DEFAULT_LEGEND_LINE_WIDTH_WITH_SYMBOL - 1
         : constants.DEFAULT_LEGEND_LINE_WIDTH - 1,
     )
     .attr('y1', constants.LEGEND_LINE_POSITION)
     .attr('y2', constants.LEGEND_LINE_POSITION)
     .attr(
       'style',
-      `stroke: ${getColorForTarget(t)};
-            stroke-dasharray: ${legendOptions.style.strokeDashArray};
+      `stroke: ${getColorForTarget(input)};
+            stroke-dasharray: ${input.legendOptions.style.strokeDashArray};
             stroke-width: 1px;`,
     );
 };
@@ -117,10 +118,8 @@ const createLegendLine = (buttonPath, t) => {
 const processLegendOptions = (buttonPath, input) => {
   if (input.legendOptions) {
     // Create a legend icon only if the showShape is true
-    if (input.showShapes || input.showShapes === undefined) {
-      if (input.legendOptions.showShape) {
-        createLegendIcon(buttonPath, input);
-      }
+    if ((input.showShapes || input.showShapes === undefined) && input.legendOptions.showShape) {
+      createLegendIcon(buttonPath, input);
     }
     if (input.legendOptions.showLine) {
       createLegendLine(buttonPath, input);

packages/carbon-graphs/src/js/helpers/styles.js

@@ -39,6 +39,7 @@ export default {
   legendItem: 'carbon-legend-item',
   legendItemBtn: 'carbon-legend-item-btn',
   legendItemIcon: 'carbon-legend-item-icon',
+  legendItemIconWithLine: 'carbon-legend-item-icon-with-line',
   legendItemLine: 'carbon-legend-item-line',
   legendItemLineWithIcon: 'carbon-legend-item-line-with-icon',
   legendItemSpan: 'carbon-legend-item-span',

packages/carbon-graphs/src/less/core.less

@@ -7,6 +7,7 @@ svg:not(:root) {
 }
 
 .carbon-svg-icon {
+
     width: 0.625rem;
     height: 0.625rem;
     display: inline-block;
@@ -151,8 +152,20 @@ svg:not(:root) {
             }
         }
 
+        // refers to the icon itself IF there is no line next to it
         & .carbon-legend-item-icon {
             display: block;
+            height: 0.857rem;
+            width: 0.857rem;
+            stroke: @white;
+            stroke-width: 5px;
+        }
+
+        // refers to the icon IF there is a line next to it
+        & .carbon-legend-item-icon-with-line {
+            display: block;
+            height: 0.625rem;
+            width: 0.625rem;
             stroke: @white;
             stroke-width: 5px;
         }
@@ -164,12 +177,14 @@ svg:not(:root) {
             align-items: center;
         }
 
+        // refers to the line itself IF there is no icon next to it
         & .carbon-legend-item-line {
             height: 5px;
             width: 28px;
             padding-top: 1px;
         }
 
+        // refers to the line IF there is an icon next to it
         & .carbon-legend-item-line-with-icon {
             height: 5px;
             width: 18px;

packages/carbon-graphs/tests/unit/controls/Bar/GroupedBar-spec.js

@@ -151,7 +151,6 @@ describe('Grouped Bar', () => {
             .querySelector(`.${styles.taskBar}`)
             .getAttribute('aria-hidden'),
         ).toBe('true');
-        done();
       });
       triggerEvent(legendItem[1], 'click', () => {
         fetchAllElementsByClass(
@@ -161,8 +160,8 @@ describe('Grouped Bar', () => {
         expect(barsContainer[0].getAttribute('aria-hidden')).toBe(
           'true',
         );
-        done();
       });
+      done();
     });
     it('Displays Bar content on double click', (done) => {
       const legendItem = fetchAllElementsByClass(

packages/carbon-graphs/tests/unit/controls/Bar/StackedBar-spec.js

@@ -153,15 +153,14 @@ describe('Stacked Bar', () => {
             .querySelector(`.${styles.taskBar}`)
             .getAttribute('aria-hidden'),
         ).toBe('true');
-        done();
       });
       triggerEvent(legendItem[1], 'click', () => {
         barsContainer;
         expect(barsContainer[0].getAttribute('aria-hidden')).toBe(
           'true',
         );
-        done();
       });
+      done();
     });
     it('Displays Bar content on double click', (done) => {
       const legendItem = fetchAllElementsByClass(

packages/carbon-graphs/tests/unit/controls/Graph/GraphAxes-spec.js

@@ -2624,7 +2624,6 @@ describe('Graph - Axes', () => {
             expect(
               onClickPrimaryFunctionSpy.calledOnce,
             ).toBeFalsy();
-            done();
           },
         );
         triggerEvent(
@@ -2634,7 +2633,6 @@ describe('Graph - Axes', () => {
             expect(
               onClickPrimaryFunctionSpy.calledOnce,
             ).toBeFalsy();
-            done();
           },
         );
         triggerEvent(
@@ -2644,9 +2642,9 @@ describe('Graph - Axes', () => {
             expect(
               onClickPrimaryFunctionSpy.calledOnce,
             ).toBeFalsy();
-            done();
           },
         );
+        done();
       });
     });
     describe('when small label and onLabelClick function is provided', () => {
@@ -2667,7 +2665,6 @@ describe('Graph - Axes', () => {
             expect(
               onClickPrimaryFunctionSpy.calledOnce,
             ).toBeFalsy();
-            done();
           },
         );
         triggerEvent(
@@ -2677,7 +2674,6 @@ describe('Graph - Axes', () => {
             expect(
               onClickPrimaryFunctionSpy.calledOnce,
             ).toBeFalsy();
-            done();
           },
         );
         triggerEvent(
@@ -2687,9 +2683,9 @@ describe('Graph - Axes', () => {
             expect(
               onClickPrimaryFunctionSpy.calledOnce,
             ).toBeFalsy();
-            done();
           },
         );
+        done();
       });
     });
     describe('when large label and onLabelClick function is provided', () => {
@@ -2716,7 +2712,6 @@ describe('Graph - Axes', () => {
             expect(
               onClickSecondaryFunctionSpy.getCall(0).args[0],
             ).toBe(largeLabel);
-            done();
           },
         );
         triggerEvent(
@@ -2729,7 +2724,6 @@ describe('Graph - Axes', () => {
             expect(
               onClickFourthFunctionSpy.getCall(0).args[0],
             ).toBe(largeLabel);
-            done();
           },
         );
         triggerEvent(
@@ -2740,9 +2734,9 @@ describe('Graph - Axes', () => {
             expect(onClickThirdFunctionSpy.getCall(0).args[0]).toBe(
               largeLabel,
             );
-            done();
           },
         );
+        done();
       });
     });
     describe('when large label is provided and onLabelClick function is not provided', () => {
@@ -2770,7 +2764,6 @@ describe('Graph - Axes', () => {
             expect(
               onClickSecondaryFunctionSpy.getCall(0).args[0],
             ).toBe(largeLabel);
-            done();
           },
         );
         d3.select(fetchElementByClass(`${styles.axisLabelY} text`)).on(
@@ -2787,7 +2780,6 @@ describe('Graph - Axes', () => {
             expect(
               onClickSecondaryFunctionSpy.getCall(0).args[0],
             ).toBe(largeLabel);
-            done();
           },
         );
         d3.select(fetchElementByClass(`${styles.axisLabelY2} text`)).on(
@@ -2804,9 +2796,9 @@ describe('Graph - Axes', () => {
             expect(
               onClickSecondaryFunctionSpy.getCall(0).args[0],
             ).toBe(largeLabel);
-            done();
           },
         );
+        done();
       });
     });
   });

packages/carbon-graphs/tests/unit/controls/Line/LineLoad-spec.js

@@ -1104,7 +1104,7 @@ describe('Line - Load', () => {
       expect(iconPath.getAttribute('d')).not.toBeNull();
     });
     describe('when showShapes is true', () => {
-      it('loads  shape and line if user sets showLine to be true  and showShape to be true', () => {
+      it('loads shape and line if user sets showLine to be true and showShape to be true', () => {
         const input = getInput(valuesDefault, false, false);
         input.legendOptions = {
           showShape: true,
@@ -1121,7 +1121,7 @@ describe('Line - Load', () => {
         expect(SVGElements.length).toBe(2);
 
         expect(iconSVG).not.toBeNull();
-        expect(iconSVG.classList).toContain(styles.legendItemIcon);
+        expect(iconSVG.classList).toContain(styles.legendItemIconWithLine);
         expect(iconPath).not.toBeNull();
         expect(iconPath.getAttribute('d')).not.toBeNull();
 
@@ -1154,7 +1154,7 @@ describe('Line - Load', () => {
         expect(SVGElements.length).toBe(2);
 
         expect(iconSVG).not.toBeNull();
-        expect(iconSVG.classList).toContain(styles.legendItemIcon);
+        expect(iconSVG.classList).toContain(styles.legendItemIconWithLine);
         expect(iconPath).not.toBeNull();
         expect(iconPath.getAttribute('d')).not.toBeNull();
 

packages/carbon-graphs/tests/unit/controls/PairedResult/PairedResultLoad-spec.js

@@ -1533,7 +1533,7 @@ describe('Paired Result - Load', () => {
         const lineSVG = svgElements[1];
         expect(svgElements.length).toBe(2);
         expect(iconSVG).not.toBeNull();
-        expect(iconSVG.classList).toContain(styles.legendItemIcon);
+        expect(iconSVG.classList).toContain(styles.legendItemIconWithLine);
         expect(lineSVG).not.toBeNull();
         expect(lineSVG.classList).toContain(
           styles.legendItemLineWithIcon,