docs: merge changes from #462

docs/UX Patterns/Table/Cell Badge.mdx → docs/UX Patterns/Table/Cell CTA.mdx

@@ -4,4 +4,4 @@ import * as TableStories from './Table.stories'
 
 <Meta of={TableStories} />
 
-# Cell Badge
+# Cell CTA

docs/UX Patterns/Table/Cell Link.mdx

@@ -5,3 +5,19 @@ import * as TableStories from './Table.stories'
 <Meta of={TableStories} />
 
 # Cell Link
+
+### Links
+
+#### When to use:
+
+##### Text Links:
+
+Use the Link component [Insert Link] to navigate to other pages, sections, or external resources.
+
+##### Call-to-Actions (CTAs):
+
+Links that serve as action triggers, like "Activate", should also follow these styles.
+
+##### Buttons vs Links:
+
+Use links for navigation and "More Actions" menu or a buttons for actions.

docs/UX Patterns/Table/Cell More Actions.mdx

@@ -4,26 +4,18 @@ import * as TableStories from './Table.stories'
 
 <Meta of={TableStories} />
 
-# Cell Tag
-
-### More Actions Menu
+# More Actions Menu
 
 #### Overview
 
 The Actions Menu provides a consolidated interface for row-specific operations, such as delete, duplicate, download, and archive, all grouped within a single menu.
 
-<iframe
-  width="1143"
-  height="8208"
-  src="https://www.figma.com/embed?embed_host=your-site.com&url=https://www.figma.com/design/yCPszaTtkCFxRHaSkkJFR9/Eames-Templates-%5BInternal%5D?node-id=2146-40220"
-  allowfullscreen></iframe>
-
 #### Usage Guidelines
 
 - Highlight destructive actions in red to ensure emphasis and user caution.
 - Omit icons from menu items to maintain a clean, easy-to-read menu.
 - Display the "More Actions" menu even when only one option is available.
 
-Examples:
+#### Examples:
 
 - Disabled menu item (Coming Soon)

docs/UX Patterns/Table/Cell Status.mdx

@@ -0,0 +1,23 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as TableStories from './Table.stories'
+
+<Meta of={TableStories} />
+
+# Table Cells
+
+### Status
+
+Always use badge components for system status. Reserve tags for actual tags, labels, and environment descriptions (e.g., prod, dev). This ensures clear visual distinction between different information types.
+
+#### Do
+
+<img src="images/basic-table.png" />
+
+#### Don't
+
+<img src="images/basic-table.png" />
+
+### Cell Aligment
+
+Statuses are left-aligned to create a cohesive and organized table layout.

docs/UX Patterns/Table/Cell Text.mdx

@@ -0,0 +1,27 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as TableStories from './Table.stories'
+
+<Meta of={TableStories} />
+
+# Table Cells
+
+### Text
+
+Text cells support 1 or 2 lines of text. Single-line text cells are typically used for concise information like names, identifiers, or short labels. Two-line text cells are used when additional context is needed and can include entry type or ID, allowing for more detailed information without consuming excessive space.
+
+[Insert 2 lines example]
+
+#### Case
+
+We use sentence case for everything except for titles, which use title case. Exceptions are allowed based on a specific project requirements.
+
+#### Truncating Long names
+
+Column with most dynamic and longest copy to typically have flexible. When needed implement cell truncation by ending the text with ellipses and display the full text in a tooltip upon hovering.
+
+[Insert Example]
+
+#### Cell Alligment
+
+Text content within table cells is typically left-aligned to enhance readability and allow for easier scanning of information.

docs/UX Patterns/Table/Date and Time.mdx

@@ -0,0 +1,29 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as TableStories from './Table.stories'
+
+<Meta of={TableStories} />
+
+# Table Cells
+
+### Date and Time
+
+To ensure clarity for both US and EU audiences, all dates and times should follow a standard global format. All times are displayed in UTC.
+
+#### Do
+
+- Date: MMM DD, YYYY (e.g., Sep 12, 2024), which removes any ambiguity between US (MM/DD) and EU (DD/MM) formats.
+- Time Zone: UTC (displayed once, somewhere visible on the screen).
+
+| Event          | Start Date (UTC) | End Date (UTC) |
+| -------------- | ---------------- | -------------- |
+| Product Launch | Sep 12, 2024     | Sep 14, 2024   |
+| Black Friday   | Nov 29, 2024     | Nov 29, 2024   |
+
+[Insert link: Displaying a link in a date picker]
+
+#### Don't
+
+- **Mix Date Formats**: Do not use different formats such as `MM/DD/YYYY` (e.g., 09/12/2024, which could be interpreted as either September 12 or December 9) or `DD/MM/YYYY` (e.g., 12/09/2024, which can also cause confusion). Stick to the global format `MMM DD, YYYY` (e.g., Sep 12, 2024).
+- **Omit the Time Zone**: Never omit the time zone when displaying times, especially when it might lead to user confusion. Example: Instead of just showing "14:30", show "14:30 UTC".
+- **Repeat UTC for Each Entry**: Avoid repeating "UTC" in every row of a table or list. Example: Instead of labeling every row "Sep 12, 2024 (UTC)", use a clear table header like `Date (UTC)` to indicate the time zone for all rows.

docs/UX Patterns/Table/Table.mdx

@@ -35,11 +35,10 @@ Use pagination in tables to improve performance and reduce load times by fetchin
 
 Table cells support various formats and are designed to display data in clear, readable ways.
 
-- Numbers (Coming Soon)
 - Date / Time (Coming Soon)
+- Text
 - CTA Buttons (Coming Soon)
-- Status Badges (Coming Soon)
-- Links (Coming Soon)
+- Status (Coming Soon)
 - Tags (Coming Soon)
 - More Actions (Coming Soon)