mParticle · tibuurcio · Oct 23, 2024 · Oct 16, 2024 · Oct 16, 2024 · Oct 16, 2024
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -38,7 +38,7 @@ const preview: Preview = {
           ],
           'Candidate Components',
           'UX Patterns',
-          ['Table', ['Documentation', 'Filters'], 'Observability', 'Directory'],
+          ['Table', ['Table', 'Filters']],
           'Contributing',
           ['Introduction', 'Commits', 'Testing in the platforms', 'Release Process', 'Maintainers'],
         ],

diff --git a/docs/Candidate Components/Directory/Date Range Filter/SelectWithRangePicker.stories.tsx b/docs/Candidate Components/Directory/Date Range Filter/SelectWithRangePicker.stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 import { SelectWithRangePicker as Component } from './SelectWithRangePicker'
 import { fn } from '@storybook/test'

diff --git a/docs/Design Templates/Directory.mdx b/docs/Design Templates/Directory.mdx
diff --git a/docs/Design Templates/Table/Cell Badge.mdx b/docs/Design Templates/Table/Cell Badge.mdx
diff --git a/docs/Design Templates/Table/Cell Link.mdx b/docs/Design Templates/Table/Cell Link.mdx
diff --git a/docs/Design Templates/Table/Cell More Actions.mdx b/docs/Design Templates/Table/Cell More Actions.mdx
diff --git a/docs/Design Templates/Table/Cell Tag.mdx b/docs/Design Templates/Table/Cell Tag.mdx
diff --git a/docs/Design Templates/Table/Filters.mdx b/docs/Design Templates/Table/Filters.mdx
diff --git a/docs/Design Templates/Table/Table.mdx b/docs/Design Templates/Table/Table.mdx
diff --git a/docs/Design Templates/Table/Tags.mdx b/docs/Design Templates/Table/Tags.mdx
diff --git a/docs/UX Patterns/Directory.mdx b/docs/UX Patterns/Directory.mdx
diff --git a/docs/UX Patterns/Table/Cell Badge.mdx b/docs/UX Patterns/Table/Cell Badge.mdx
diff --git a/docs/UX Patterns/Table/Cell CTA.mdx b/docs/UX Patterns/Table/Cell CTA.mdx
@@ -0,0 +1,7 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as TableStories from './Table.stories'
+
+<Meta of={TableStories} />
+
+# Cell CTA
diff --git a/docs/UX Patterns/Table/Cell Link.mdx b/docs/UX Patterns/Table/Cell Link.mdx
@@ -1 +1,23 @@
-![](../../assets/test.png)
+import { Meta, Story } from '@storybook/blocks'
+
+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.
diff --git a/docs/UX Patterns/Table/Cell More Actions.mdx b/docs/UX Patterns/Table/Cell More Actions.mdx
@@ -1,18 +1,21 @@
-### More Actions Menu
+import { Meta, Story } from '@storybook/blocks'
 
-#### 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.
+import * as TableStories from './Table.stories'
 
-<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>
+<Meta of={TableStories} />
 
+# 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.
 
 #### 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:
-- Disabled menu item (Coming Soon)
+#### Examples:
 
+- Disabled menu item (Coming Soon)
diff --git a/docs/UX Patterns/Table/Cell Status.mdx b/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.
diff --git a/docs/UX Patterns/Table/Cell Tag.mdx b/docs/UX Patterns/Table/Cell Tag.mdx
diff --git a/docs/UX Patterns/Table/Cell Text.mdx b/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.
diff --git a/docs/UX Patterns/Table/Date and Time.mdx b/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.
diff --git a/docs/UX Patterns/Table/Filters.mdx b/docs/UX Patterns/Table/Filters.mdx
@@ -1,20 +1,37 @@
+import { Meta, Story } from '@storybook/blocks'
+
+import * as FiltersStories from './Filters.stories'
+
+<Meta of={FiltersStories} />
+
 # Filters
 
-*Note: This section covers filters specifically for tables. For query-related filters, please refer to the [Analytics Filters - Coming Soon](#coming).*
+<br />
+
+_Note: This section covers filters specifically for tables. For query-related filters, please refer to the [Analytics Filters - Coming Soon](#coming)._
+
+#### **Simple Filters**
 
-#### **Simple Filters**  
 Simple filters are ideal when there are only a few filter options. These are straightforward and quick to use, often appearing as dropdowns above the table. For implementation, refer to the [Select Component](https://mparticle.github.io/aquarium/?path=/docs/components-data-entry-select--documentation).
 
 Examples:
-- Coming Soon
-- Coming Soon
 
-#### **Filters with Apply Button**  
+<Story of={FiltersStories.WithBasicFilters} />
+
+#### **Filters with Apply Button**
+
 Complex filters provide more advanced filtering options, allowing users to apply multiple criteria at once. These filters often include dropdowns, checkboxes, and text fields. Complex filters are particularly useful when multiple filters need to be applied simultaneously or when load times might be a concern.
 
-#### **Date Range Filters**  
+- daterange
+- modal: sorting, filters: one of each input type: checkboxes, input, tree select and placeholder for tags
+
+<Story of={FiltersStories.WithComplexFilters} />
+
+#### **Date Range Filters**
+
 Date range filters allow users to specify a range of dates to narrow down the data displayed in the table. Typically, these filters include a start date and an end date, with options for common ranges like “Last 7 days” or “Last 30 days.” User presets are also available for frequently used date ranges.
 
 Examples:
+
 - [Basic Date Picker](https://mparticle.github.io/aquarium/?path=/docs/components-data-entry-date-picker--documentation)
 - [Date Range Filter with Presets](https://mparticle.github.io/aquarium/?path=/docs/candidate-components-directory-date-range-filter--documentation)