From 3bfd7a126c448365ebd0f8eee96631f08abb329e Mon Sep 17 00:00:00 2001
From: Evan Wilkinson <evan.wilkinson@gmail.com>
Date: Tue, 3 Sep 2024 23:01:24 -0400
Subject: [PATCH] chore(docs): add value for color tokens where missing

---
 .../module/patternfly-docs/content/tokensTable.js    | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/module/patternfly-docs/content/tokensTable.js b/packages/module/patternfly-docs/content/tokensTable.js
index c47822d..8d2fd87 100644
--- a/packages/module/patternfly-docs/content/tokensTable.js
+++ b/packages/module/patternfly-docs/content/tokensTable.js
@@ -43,8 +43,9 @@ const getTokenChain = (themeTokenData) => {
   return tokenChain;
 };
 
-const showTokenChain = (themeTokenData) => {
-  const tokenChain = getTokenChain(themeTokenData);
+const showTokenChain = (themeTokenData, hasReferences) => {
+  // Show final value if isColorToken but no references - otherwise color value not displayed in table
+  const tokenChain = hasReferences ? getTokenChain(themeTokenData) : [themeTokenData.value];
   return (
     <div>
       {tokenChain.map((nextValue, index) => (
@@ -158,6 +159,7 @@ export const TokensTable = ({ tokenJson, formatThemeText = capitalize }) => {
                       const hasReferences = tokenThemesArr.some(([_themeName, themeToken]) =>
                         themeToken.hasOwnProperty('references')
                       );
+                      const isColorToken = tokenThemesArr[0][1].type === 'color';
                       const tokenDescription = tokenThemesArr[0][1].description;
 
                       return (
@@ -166,7 +168,7 @@ export const TokensTable = ({ tokenJson, formatThemeText = capitalize }) => {
                             {/* Expandable row icon */}
                             <Td
                               expand={
-                                hasReferences
+                                hasReferences || isColorToken
                                   ? {
                                       rowIndex,
                                       isExpanded: isTokenExpanded(tokenName),
@@ -214,7 +216,7 @@ export const TokensTable = ({ tokenJson, formatThemeText = capitalize }) => {
                           </Tr>
 
                           {/* Expandable token chain */}
-                          {hasReferences && isTokenExpanded(tokenName) && (
+                          {(hasReferences || isColorToken) && isTokenExpanded(tokenName) && (
                             <Tr isExpanded>
                               <Td />
                               <Td colSpan={3}>
@@ -223,7 +225,7 @@ export const TokensTable = ({ tokenJson, formatThemeText = capitalize }) => {
                                     {tokenThemesArr.map(([themeName, themeToken]) => (
                                       <>
                                         <GridItem span={2}>{formatThemeText(themeName)}:</GridItem>
-                                        <GridItem span={10}>{showTokenChain(themeToken)}</GridItem>
+                                        <GridItem span={10}>{showTokenChain(themeToken, hasReferences)}</GridItem>
                                       </>
                                     ))}
                                   </Grid>