From 2fd45066560ce5434d1196492c7c814d95a5393a Mon Sep 17 00:00:00 2001
From: Vadym <v.bezpalko@livechat.com>
Date: Wed, 31 Jan 2024 10:12:33 +0100
Subject: [PATCH] docs(Foundation): deprecated colors

---
 .../src/stories/components/Table/Table.tsx    | 19 ++++++++++++++++++-
 .../stories/foundations/Color/constants.ts    |  1 +
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/src/stories/components/Table/Table.tsx b/packages/react-components/src/stories/components/Table/Table.tsx
index be6dbbba0..3e501a884 100644
--- 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
index 19f56131e..9be49f54f 100644
--- 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));