docs(Foundation): deprecated colors

livechat · Jan 31, 2024 · 2fd4506 · 2fd4506
1 parent 68594a7
commit 2fd4506
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/packages/react-components/src/stories/components/Table/Table.tsx b/packages/react-components/src/stories/components/Table/Table.tsx
@@ -1,6 +1,11 @@
 import * as React from 'react';
 
 import './Table.scss';
+import { Warning } from '@livechat/design-system-icons';
+
+import { Icon } from '../../../components/Icon';
+import { Tooltip } from '../../../components/Tooltip';
+import { DesignToken } from '../../../foundations/design-token';
 import { handleCopyText } from '../../helpers';
 
 type BasicTableData = Record<string, unknown> & {
@@ -47,7 +52,19 @@ export const Table: React.FC<ITable> = ({
                       <div className="example-field copy-text">
                         {renderExample && renderExample(row['token'])}
                         {row['enum']}
-                        {row['deprecated'] && <i> (deprecated)</i>}
+                        {row['deprecated'] && (
+                          <Tooltip
+                            kind="invert"
+                            triggerRenderer={
+                              <Icon
+                                source={Warning}
+                                customColor={`var(${DesignToken.ActionWarningDefault})`}
+                              ></Icon>
+                            }
+                          >
+                            Deprecated
+                          </Tooltip>
+                        )}
                       </div>
                     </td>
                   );

diff --git a/packages/react-components/src/stories/foundations/Color/constants.ts b/packages/react-components/src/stories/foundations/Color/constants.ts
@@ -13,4 +13,5 @@ export const ColorsTokens: ColorShape[] = ColorBaseVariants.map((color) => ({
   ...color,
   desc: ColorsData[color.enum]?.desc ?? '',
   group: ColorsData[color.enum]?.group,
+  deprecated: ColorsData[color.enum]?.deprecated,
 })).sort((a, b) => a.enum.localeCompare(b.enum));