Merge pull request #85 from evwilkin/chore/84-color-tokens

patternfly · Oct 17, 2024 · 86d92bb · 86d92bb
2 parents 48c9511 + 3bfd7a1
commit 86d92bb
Showing 1 changed file with 7 additions and 5 deletions.
diff --git 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>