fix(badges): use relative coloring for badges

fixes #286

src/components/Badge/Badge.tsx

@@ -1,25 +1,35 @@
 import classNames from "classnames";
 import React, { MouseEventHandler } from "react";
 
+import { ConfigData } from "../../config";
 import "./badge.scss";
 
 type BadgeProps = {
   onClick?: MouseEventHandler;
   big?: boolean;
   type: "big" | "all" | "empty" | string;
+  config: ConfigData;
+};
+
+const badgeClass = (type: string, config: ConfigData) => {
+  if (!config.rings.includes(type)) {
+    return type;
+  }
+  return ["first", "second", "third", "fourth"][config.rings.indexOf(type)];
 };
 
 export default function Badge({
   onClick,
   big,
   type,
+  config,
   children,
 }: React.PropsWithChildren<BadgeProps>) {
   const Comp = onClick ? "a" : "span";
 
   return (
     <Comp
-      className={classNames("badge", `badge--${type}`, {
+      className={classNames("badge", `badge--${badgeClass(type, config)}`, {
         "badge--big": big === true,
       })}
       onClick={onClick}

src/components/Badge/badge.scss

@@ -24,19 +24,19 @@
     background: var(--color-gray-normal);
     border-color: var(--color-gray-normal);
   }
-  &--adopt {
+  &--first {
     background: var(--color-green);
     border-color: var(--color-green);
   }
-  &--trial {
+  &--second {
     background: var(--color-orange);
     border-color: var(--color-orange);
   }
-  &--assess {
+  &--third {
     background: var(--color-blue);
     border-color: var(--color-blue);
   }
-  &--hold {
+  &--fourth {
     background: var(--color-marine);
     border-color: var(--color-marine);
   }

src/components/ItemRevision/ItemRevision.tsx

@@ -1,18 +1,21 @@
+import { ConfigData } from "../../config";
 import { formatRelease } from "../../date";
 import { Revision } from "../../model";
 import Badge from "../Badge/Badge";
 
 export default function ItemRevision({
   revision,
+  config,
   dateFormat,
 }: {
   revision: Revision;
+  config: ConfigData;
   dateFormat?: string;
 }) {
   return (
     <div className="item-revision">
       <div>
-        <Badge type={revision.ring}>
+        <Badge type={revision.ring} config={config}>
           {revision.ring} | {formatRelease(revision.release, dateFormat)}
         </Badge>
       </div>

src/components/ItemRevisions/ItemRevisions.tsx

@@ -1,3 +1,4 @@
+import { ConfigData } from "../../config";
 import { useMessages } from "../../context/MessagesContext";
 import { Revision } from "../../model";
 import HeadlineGroup from "../HeadlineGroup/HeadlineGroup";
@@ -6,9 +7,11 @@ import "./item-revisions.scss";
 
 export default function ItemRevisions({
   revisions,
+  config,
   dateFormat,
 }: {
   revisions: Revision[];
+  config: ConfigData;
   dateFormat?: string;
 }) {
   const { revisionsText } = useMessages();
@@ -25,6 +28,7 @@ export default function ItemRevisions({
           key={revision.release}
           revision={revision}
           dateFormat={dateFormat}
+          config={config}
         />
       ))}
     </div>

src/components/PageItem/PageItem.tsx

@@ -81,7 +81,7 @@ const PageItem: React.FC<Props> = ({
             >
               <div className="split">
                 <div className="split__left">
-                  <Badge big type={item.ring}>
+                  <Badge big type={item.ring} config={config}>
                     {item.ring}
                   </Badge>
                 </div>
@@ -119,7 +119,7 @@ const PageItem: React.FC<Props> = ({
                   {editButton}
                 </div>
                 <div className="split__right">
-                  <Badge big type={item.ring}>
+                  <Badge big type={item.ring} config={config}>
                     {item.ring}
                   </Badge>
                 </div>
@@ -134,6 +134,7 @@ const PageItem: React.FC<Props> = ({
               <ItemRevisions
                 revisions={item.revisions.slice(1)}
                 dateFormat={config.dateFormat}
+                config={config}
               />
             )}
           </div>

src/components/PageItemMobile/PageItemMobile.tsx

@@ -65,7 +65,7 @@ export default function PageItemMobile({
                   {editButton}
                 </div>
                 <div className="split__right">
-                  <Badge big type={item.ring}>
+                  <Badge big type={item.ring} config={config}>
                     {item.ring}
                   </Badge>
                 </div>
@@ -77,7 +77,10 @@ export default function PageItemMobile({
             />
             <ItemTags tags={item.tags} />
             {item.revisions.length > 1 && (
-              <ItemRevisions revisions={item.revisions.slice(1)} />
+              <ItemRevisions
+                revisions={item.revisions.slice(1)}
+                config={config}
+              />
             )}
           </div>
         </div>

src/components/PageOverview/PageOverview.tsx

@@ -101,6 +101,7 @@ export default function PageOverview({
                     big
                     onClick={handleRingClick(ringName)}
                     type={isRingActive(ringName) ? ringName : "empty"}
+                    config={config}
                   >
                     {ringName}
                   </Badge>
@@ -137,7 +138,9 @@ export default function PageOverview({
                               {translate(config, item.quadrant)}
                             </div>
                             <div className="nav__item">
-                              <Badge type={item.ring}>{item.ring}</Badge>
+                              <Badge type={item.ring} config={config}>
+                                {item.ring}
+                              </Badge>
                             </div>
                           </div>
                         </div>

src/components/QuadrantSection/QuadrantSection.tsx

@@ -10,6 +10,7 @@ const renderList = (
   ringName: string,
   quadrantName: string,
   groups: Group,
+  config: ConfigData,
   big: boolean
 ) => {
   const itemsInRing = groups[quadrantName][ringName] || [];
@@ -17,7 +18,7 @@ const renderList = (
   if (big) {
     return (
       <ItemList items={itemsInRing} noLeadingBorder>
-        <Badge type={ringName} big={big}>
+        <Badge type={ringName} big={big} config={config}>
           {ringName}
         </Badge>
       </ItemList>
@@ -27,7 +28,9 @@ const renderList = (
   return (
     <div className="ring-list">
       <div className="ring-list__header">
-        <Badge type={ringName}>{ringName}</Badge>
+        <Badge type={ringName} config={config}>
+          {ringName}
+        </Badge>
       </div>
       {itemsInRing.map((item) => (
         <span key={item.name} className="ring-list__item">
@@ -45,11 +48,11 @@ const renderRing = (
   ringName: string,
   quadrantName: string,
   groups: Group,
-  renderIfEmpty: boolean,
+  config: ConfigData,
   big: boolean
 ) => {
   if (
-    !renderIfEmpty &&
+    !config.showEmptyRings &&
     (!groups[quadrantName] ||
       !groups[quadrantName][ringName] ||
       groups[quadrantName][ringName].length === 0)
@@ -58,7 +61,7 @@ const renderRing = (
   }
   return (
     <div key={ringName} className="quadrant-section__ring">
-      {renderList(ringName, quadrantName, groups, big)}
+      {renderList(ringName, quadrantName, groups, config, big)}
     </div>
   );
 };
@@ -93,7 +96,7 @@ export default function QuadrantSection({
       </div>
       <div className="quadrant-section__rings">
         {config.rings.map((ringName: string) =>
-          renderRing(ringName, quadrantName, groups, config.showEmptyRings, big)
+          renderRing(ringName, quadrantName, groups, config, big)
         )}
       </div>
     </div>