Merge pull request #16597 from sennyeya/tech-radar-text-color

Add ring color to the TechRadar quadrant and ring titles.

.changeset/mighty-games-turn.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-tech-radar': patch
+---
+
+Update colors to match Zalando's tech radar, also add coloring on title and legend to match ring color.

plugins/tech-radar/src/components/RadarGrid/RadarGrid.test.tsx

@@ -44,4 +44,16 @@ describe('RadarGrid', () => {
     expect(rendered.getByTestId('radar-grid-x-line')).toBeInTheDocument();
     expect(rendered.getByTestId('radar-grid-y-line')).toBeInTheDocument();
   });
+
+  it('should have the correct text color', async () => {
+    const rendered = await renderInTestApp(
+      <svg>
+        <RadarGrid {...minProps} />
+      </svg>,
+    );
+
+    expect(rendered.getByTestId('radar-ring-heading')).toHaveStyle({
+      fill: '#93c47d',
+    });
+  });
 });

plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx

@@ -23,25 +23,29 @@ export type Props = {
   rings: Ring[];
 };
 
-const useStyles = makeStyles<Theme>(theme => ({
-  ring: {
-    fill: 'none',
-    stroke: '#bbb',
-    strokeWidth: '1px',
-  },
-  axis: {
-    fill: 'none',
-    stroke: '#bbb',
-    strokeWidth: '1px',
-  },
-  text: {
-    pointerEvents: 'none',
-    userSelect: 'none',
-    fill: theme.palette.text.primary,
-    fontSize: '25px',
-    fontWeight: 800,
-  },
-}));
+const useStyles = makeStyles<Theme>(
+  theme => ({
+    ring: {
+      fill: 'none',
+      stroke: '#bbb',
+      strokeWidth: '1px',
+    },
+    axis: {
+      fill: 'none',
+      stroke: '#bbb',
+      strokeWidth: '1px',
+    },
+    text: {
+      pointerEvents: 'none',
+      userSelect: 'none',
+      fill: theme.palette.text.primary,
+      fontSize: '25px',
+      fontWeight: 800,
+      opacity: 0.7,
+    },
+  }),
+  { name: 'PluginTechRadarGrid' },
+);
 
 // A component for the background grid of the radar, with axes, rings etc.  It will render around the origin, i.e.
 // assume that (0, 0) is in the middle of the drawing.
@@ -62,6 +66,8 @@ const RadarGrid = (props: Props) => {
       y={ringRadius !== undefined ? -ringRadius + 42 : undefined}
       textAnchor="middle"
       className={classes.text}
+      style={{ fill: rings[ringIndex].color }}
+      data-testid="radar-ring-heading"
     >
       {rings[ringIndex].name}
     </text>,

plugins/tech-radar/src/components/RadarLegend/RadarLegend.test.tsx

@@ -56,4 +56,19 @@ describe('RadarLegend', () => {
     expect(rendered.getAllByTestId('radar-quadrant')).toHaveLength(1);
     expect(rendered.getAllByTestId('radar-ring')).toHaveLength(1);
   });
+
+  it('should have the correct ring text color', async () => {
+    const rendered = await renderInTestApp(
+      <svg>
+        <RadarLegend {...minProps} />
+      </svg>,
+    );
+
+    expect(rendered.getByTestId('radar-legend')).toBeInTheDocument();
+
+    const legend = rendered.getByTestId('radar-legend-heading');
+    expect(legend).toHaveStyle({
+      color: '#93c47d',
+    });
+  });
 });

plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx

@@ -45,6 +45,7 @@ const useStyles = makeStyles<Theme>(theme => ({
   },
   ringEmpty: {
     color: theme.palette.text.secondary,
+    fontSize: '12px',
   },
   ringHeading: {
     pointerEvents: 'none',

plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx

@@ -37,7 +37,13 @@ export const RadarLegendRing = ({
 }: RadarLegendRingProps) => {
   return (
     <div data-testid="radar-ring" key={ring.id} className={classes.ring}>
-      <h3 className={classes.ringHeading}>{ring.name}</h3>
+      <h3
+        className={classes.ringHeading}
+        style={{ color: ring.color }}
+        data-testid="radar-legend-heading"
+      >
+        {ring.name}
+      </h3>
       {entries.length === 0 ? (
         <Typography paragraph className={classes.ringEmpty}>
           (empty)

plugins/tech-radar/src/sample.ts

@@ -23,10 +23,10 @@ import {
 } from './api';
 
 const rings = new Array<RadarRing>();
-rings.push({ id: 'adopt', name: 'ADOPT', color: '#93c47d' });
-rings.push({ id: 'trial', name: 'TRIAL', color: '#93d2c2' });
-rings.push({ id: 'assess', name: 'ASSESS', color: '#fbdb84' });
-rings.push({ id: 'hold', name: 'HOLD', color: '#efafa9' });
+rings.push({ id: 'adopt', name: 'ADOPT', color: '#5BA300' });
+rings.push({ id: 'trial', name: 'TRIAL', color: '#009EB0' });
+rings.push({ id: 'assess', name: 'ASSESS', color: '#C7BA00' });
+rings.push({ id: 'hold', name: 'HOLD', color: '#E09B96' });
 
 const quadrants = new Array<RadarQuadrant>();
 quadrants.push({ id: 'infrastructure', name: 'Infrastructure' });