Merge branch 'main' into fix/storybook-test-ci-error

mParticle · Jan 17, 2025 · c2ecd51 · c2ecd51
2 parents fb0b03c + dfdf1df
commit c2ecd51
Show file tree

Hide file tree

Showing 112 changed files with 6,272 additions and 4,193 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,10 @@
+# [1.37.0](https://github.com/mParticle/aquarium/compare/v1.36.1...v1.37.0) (2025-01-17)
+
+### Features
+
+- add badge indicator ([#526](https://github.com/mParticle/aquarium/issues/526)) ([56a3a47](https://github.com/mParticle/aquarium/commit/56a3a4738a44457f1a8932b33dc3a80b0778d20b))
+- replace crosshair icon with precision ([#528](https://github.com/mParticle/aquarium/issues/528)) ([06884ae](https://github.com/mParticle/aquarium/commit/06884ae29d213efd091d6e50cea5c66f3dc95439))
+
 ## [1.36.1](https://github.com/mParticle/aquarium/compare/v1.36.0...v1.36.1) (2024-12-06)
 
 ### Bug Fixes

diff --git a/docs/UX Patterns/Table/Table.stories.tsx b/docs/UX Patterns/Table/Table.stories.tsx
@@ -23,8 +23,6 @@ import { tableColumns, tableData, type TableDataType } from './TableStoryUtils'
 import { SelectWithRangePicker } from 'docs/Candidate Components/Directory/Date Range Filter/SelectWithRangePicker'
 import { useState } from 'react'
 import { ColorTextDescription } from 'src/styles/style'
-import MinusSquareOutlined from '@ant-design/icons/MinusSquareOutlined'
-import PlusSquareOutlined from '@ant-design/icons/PlusSquareOutlined'
 
 const meta: Meta<typeof Table> = {
   title: 'UX Patterns/Table/Table',
@@ -110,11 +108,7 @@ const CollapsibleSection = ({ ...item }: ICollapsibleFormSectionProps): React.JS
           },
         },
       }}>
-      <Collapse
-        ghost
-        expandIcon={({ isActive }): React.JSX.Element => (isActive ? <MinusSquareOutlined /> : <PlusSquareOutlined />)}
-        items={[{ ...item, key: 'item' }]}
-      />
+      <Collapse ghost items={[{ ...item, key: 'item' }]} />
     </ConfigProvider>
   )
 }

diff --git a/docs/components/Data Display/Avatar/Documentation.mdx b/docs/components/Data Display/Avatar/Documentation.mdx
@@ -6,9 +6,14 @@ import * as AvatarStories from '../../../../src/components/data-display/Avatar/A
 
 # Avatar
 
-### Overview
+#### Overview
 
-The Avatar component provides a quick, versatile visual cue to represent users or entities in the UI by displaying images, icons, or initials.
+The **Avatar** component is used to display a profile image, initials, or an icon, commonly for identification purposes.
+
+#### When to use
+
+- To represent an account, organization, or workspace.
+- To represent a single user or as a placeholder when a user profile image isn’t available.
 
 #### Current Usage
 
@@ -19,6 +24,7 @@ The Avatar component provides a quick, versatile visual cue to represent users o
 | Type  | Resource                                                                                                                                               |
 | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | Eames | [Avatar Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=397-12044&node-type=canvas&t=B6HJWqqDsUOypZQj-0) |
+| AntD | [Avatar Component](https://ant.design/components/avatar) |
 
 
 

diff --git a/docs/components/Data Display/Badge/Documentation.mdx b/docs/components/Data Display/Badge/Documentation.mdx
@@ -10,19 +10,21 @@ import * as BadgeStories from '../../../../src/components/data-display/Badge/Bad
 
 #### Overview
 
-The **Badge** component provides visual indicators for an item’s status, available in two styles: a **dot** and a **status badge" with text. 
+The **Badge** component provides visual indicators for an item’s status, available in two styles: a **dot** and a **status badge" with text.
 
 ### [Dot Badge](https://mparticle.github.io/aquarium/?path=/story/components-data-display-badge--dot-badge)
 
 
-#### When to use 
+#### When to use
 
 Use **Badge** when a status needs to be displayed next to an element in a compact form.
 
 #### Current Usages
 
 - **[Navigation](https://mparticle.github.io/aquarium/?path=/story/components-navigation-globalnavigation--primary)** – Badge is used within the navigation sidebar for notification use cases.
 
+<Canvas of={BadgeStories.DotBadge} />
+
 ### [Status Badge](https://mparticle.github.io/aquarium/?path=/story/components-data-display-badge--example-status)
 
 #### When to Use
@@ -38,4 +40,7 @@ For displaying status with accompanying text (e.g., "Active," "Failed," or "Draf
 | Type  | Resource                                                                                                                                               |
 | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | Eames | [Badge Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=399-0&node-type=canvas&t=B6HJWqqDsUOypZQj-0) |
+| AntD | [Badge Component](https://ant.design/components/badge) |
+
 
+<Canvas of={BadgeStories.BadgeStatus} />
diff --git a/docs/components/Data Display/Card/Documentation.mdx b/docs/components/Data Display/Card/Documentation.mdx
@@ -7,13 +7,23 @@ import * as CardStories from '../../../../src/components/data-display/Card/Card.
 # Card
 
 #### Overview
-A Card is a rectangular container for displaying content related to a single subject, combining elements like text, images, or buttons within a single area.
+
+The **Card** component is a flexible and convenient container for displaying content related to a single subject. It combines elements like text, lists, and interactive actions into a visually distinct and structured layout.
+
+## Key Features
+
+- **Customizable Headers and Footers** Supports headers (title) and footers (extra) to add context or actions. Both header and footer is optional.
+- **Content Areas** Organize information into a visually distinct and structured layout.
+- **Actions** Built-in support for buttons, dropdowns, or custom controls to enhance interactivity.
+- **Responsive Layouts** Grid support for displaying multiple cards in a responsive and organized format.
+- **Inner Card**The Inner Card is a specialized type of card designed for use within a parent card. It allows you to organize nested or related content, providing a clear hierarchy within the layout.
 
 #### Related Links
 
 | Type  | Resource                                                                                                                                               |
 | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | Eames | [Card Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=403-0&node-type=canvas&t=B6HJWqqDsUOypZQj-0) |
+| AntD | [Card Component](https://ant.design/components/card) |
 
 
 

diff --git a/docs/components/Data Display/Collapse/Documentation.mdx b/docs/components/Data Display/Collapse/Documentation.mdx
@@ -11,7 +11,7 @@ A content area which can be collapsed and expanded.
 
 #### When to use
 
-In a complex input form within a modal, certain fields or options can be hidden under expandable sections. 
+In a complex input form within a modal, certain fields or options can be hidden under expandable sections.
 
 #### Current Usages
 
@@ -23,6 +23,7 @@ We use expand/collapse in [Table Filters](https://mparticle.github.io/aquarium/?
 | Type  | Resource                                                                                                                                               |
 | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | Eames | [Collapse Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=406-109&node-type=canvas&t=B6HJWqqDsUOypZQj-0) |
+| AntD | [Collapse Component](https://ant.design/components/collapse) |
 
 
-<Canvas meta={CollapseStories.default} />
+<Canvas of={CollapseStories.GhostCollapse} />
diff --git a/docs/components/Data Display/Descriptions/Documentation.mdx b/docs/components/Data Display/Descriptions/Documentation.mdx
@@ -10,14 +10,15 @@ import * as DescriptionsStories from '../../../../src/components/data-display/De
 
 #### Overview
 
-Display multiple read-only fields grouped together, commonly used on details pages to organize information in a structured way. 
+Display multiple read-only fields grouped together, commonly used on details pages to organize information in a structured way.
 
 
 #### Related Links
 
 | Type  | Resource                                                                                                                                               |
 | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | Eames | [Descriptions Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=407-297&node-type=canvas&t=B6HJWqqDsUOypZQj-0) |
+| AntD | [Descriptions Component](https://ant.design/components/descriptions) |
 
 
 

diff --git a/docs/components/Data Display/Empty/Documentation.mdx b/docs/components/Data Display/Empty/Documentation.mdx
@@ -23,6 +23,7 @@ Use an Empty State when:
 | Type  | Resource                                                                                                                                               |
 | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | Eames | [Empty Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=407-367&node-type=canvas&t=B6HJWqqDsUOypZQj-0) |
+| AntD | [Empty Component](https://ant.design/components/empty) |
 
 
 

diff --git a/docs/components/Data Display/Image/Documentation.mdx b/docs/components/Data Display/Image/Documentation.mdx
@@ -18,6 +18,7 @@ The Image component displays pictures in the UI. It supports various sizes and i
 | Type  | Resource                                                                                                                                               |
 | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | Eames | [Image Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=507-39111&node-type=canvas&t=B6HJWqqDsUOypZQj-0) |
+| AntD | [Image Component](https://ant.design/components/image) |
 
 
 

diff --git a/docs/components/Data Display/List/Documentation.mdx b/docs/components/Data Display/List/Documentation.mdx
@@ -10,13 +10,27 @@ import * as ListStories from '../../../../src/components/data-display/List/List.
 
 #### Overview
 
-The **List** component is a simple, versatile structure for displaying multiple items in a single view. List can hold various types of content, providing a clean and organized way to present information.
+The **List** component is a simple, versatile container for displaying multiple items in a single view. List can hold various types of content, providing a clean and organized way to present information.
+
+### When to Use
+- To display a collection of data in a structured format.
+- When presenting lists of settings
+
+## Key Features
+
+- **Customizable Headers and Footers:** Add headers and footers to provide context or summary for the list.
+- **Flexible List Item Structure:** Layouts can include text, images, and actions, offering versatility in content presentation.
+- **Pagination:**  Built-in support for pagination to efficiently manage large data sets.
+- **Load More:**  An optional "Load More" button for dynamically loading additional items.
+- **Grid Support:**  Display list items in grid layouts for a more visual and organized presentation.
+- **Interactive Elements:**  Integrate buttons, links, or select into each list item
 
 #### Related Links
 
 | Type  | Resource                                                                                                                                               |
 | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | Eames | [List Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=407-405&node-type=canvas&t=B6HJWqqDsUOypZQj-0) |
+| AntD | [List Component](https://ant.design/components/list) |
 
 
 

diff --git a/docs/components/Data Display/Popover/Documentation.mdx b/docs/components/Data Display/Popover/Documentation.mdx
@@ -31,6 +31,7 @@ Use [Tooltip](https://mparticle.github.io/aquarium/?path=/story/components-data-
 | Type  | Resource                                                                                                                                               |
 | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | Eames | [Popover Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=408-12073&node-type=canvas&t=B6HJWqqDsUOypZQj-0) |
+| AntD | [Popover Component](https://ant.design/components/popover) |
 
 
 <Canvas meta={PopoverStories.default} />
diff --git a/docs/components/Data Display/Tabs/Documentation.mdx b/docs/components/Data Display/Tabs/Documentation.mdx
@@ -9,13 +9,14 @@ import * as TabsStories from '../../../../src/components/data-display/Tabs/Tabs.
 # Tabs
 
 ### Overview
-The **Tabs** component organizes content into multiple sections within a single view, allowing users to switch between sections without navigating away from the page. 
+The **Tabs** component organizes content into multiple sections within a single view, allowing users to switch between sections without navigating away from the page.
 
 #### Related Links
 
 | Type  | Resource                                                                                                                                               |
 | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | Eames | [Tabs Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=411-17&node-type=canvas&t=B6HJWqqDsUOypZQj-0) |
+| AntD | [Tabs Component](https://ant.design/components/tabs) |
 
 
 {/* Documentation goes here */}

diff --git a/docs/components/Data Display/Tag/Documentation.mdx b/docs/components/Data Display/Tag/Documentation.mdx
@@ -18,7 +18,7 @@ Used to indicate contextual information, such as environments or states. These t
 
 #### Current Usage
 
-[**Tables Usage:**](https://mparticle.github.io/aquarium/?path=/story/components-data-display-tag--table-usage) Used to indicate environment (e.g., production or development), priority, or health status.  
+[**Tables Usage:**](https://mparticle.github.io/aquarium/?path=/story/components-data-display-tag--table-usage) Used to indicate environment (e.g., production or development), priority, or health status.
 
 ### Clicable Tags
 
@@ -31,4 +31,11 @@ Used as interactive elements that can function as filters or selection tools.
 
 {/* Documentation goes here */}
 
+#### Related Links
+
+| Type  | Resource                                                                                                                                               |
+| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Eames | [Tag Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?m=auto&node-id=412-13377&t=BQax0YEp3gD4PyU6-1) |
+| AntD | [Tag Component](https://ant.design/components/tag) |
+
 <Canvas meta={TagStories.default} />
diff --git a/docs/components/Data Display/Tooltip/Documentation.mdx b/docs/components/Data Display/Tooltip/Documentation.mdx
@@ -20,7 +20,8 @@ The Tooltip is a lightweight, contextual UI element used to display additional i
 | Type   | Resource |
 | ------ | -------- |
 | Eames  | [Tooltip Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=413-13162&t=5iHsAw2QyK8Lx8zt-4) |
+| AntD | [Tooltip Component](https://ant.design/components/tooltip) |
 
 {/* Documentation goes here */}
 
-<Canvas meta={TooltipStories.default} />
+<Canvas meta={TooltipStories.default} />
diff --git a/docs/components/Data Display/Tour/Documentation.mdx b/docs/components/Data Display/Tour/Documentation.mdx
@@ -21,6 +21,7 @@ Use the Tour component when:
 | Type  | Resource                                                                                                                                               |
 | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | Eames | [Tour Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=1721-40337&node-type=canvas&t=gOAJGJ8C9ev7N7lt-0) |
+| AntD | [Tour Component](https://ant.design/components/tour) |
 
 {/* Documentation goes here */}
 

diff --git a/docs/components/Data Entry/Auto Complete/Documentation.mdx b/docs/components/Data Entry/Auto Complete/Documentation.mdx
@@ -8,8 +8,16 @@ import * as AutoCompleteStories from '../../../../src/components/data-entry/Auto
 
 # AutoComplete
 
-This is the documentation for the AutoComplete component
+#### Overview
+
+An input field with text hints that aids users by providing keyword-based suggestions as they type.
+
+#### Related Links
+
+| Type  | Resource                                                                                                                                               |
+| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Eames | [AutoComplete Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?m=auto&node-id=388-11035&t=zURbLpG60aM6aJiH-1) |
+| AntD | [AutoComplete Component](https://ant.design/components/auto-complete) |
 
-{/* Documentation goes here */}
 
 <Canvas meta={AutoCompleteStories.default} />
diff --git a/docs/components/Data Entry/Checkbox/Documentation.mdx b/docs/components/Data Entry/Checkbox/Documentation.mdx
@@ -8,8 +8,27 @@ import * as CheckboxStories from '../../../../src/components/data-entry/Checkbox
 
 # Checkbox
 
-This is the documentation for the checkbox component
+#### Overview
+
+The **Checkbox** component allows users to select one or multiple options from a list of choices. It provides a straightforward way to toggle selections on or off and can be used individually or within a group of related options.
+
+### When to Use
+
+Use the **Checkbox** component when:
+- In lists or forms where users can select multiple items.
+- For binary options, especially when changes require saving.
+- For active agreements, such as accepting terms of service.
+
+When selecting a single option from a set of mutually exclusive choices, use **[Radio Buttons](https://mparticle.github.io/aquarium/?path=/story/components-data-entry-radio--primary)**.
+
+Use **[switch](https://mparticle.github.io/aquarium/?path=/story/components-data-entry-switch--primary)** for cases like activation, filter controls, or subscriptions where there is a clear "on/off" state.
+
+#### Related Links
+
+| Type  | Resource                                                                                                                                               |
+| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Eames | [Checkbox Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=388-11036&p=f&t=zURbLpG60aM6aJiH-0) |
+| AntD | [Checkbox Component](https://ant.design/components/checkbox) |
 
-{/* Documentation goes here */}
 
-<Canvas meta={CheckboxStories.default} />
+<Canvas meta={CheckboxStories.default} />
diff --git a/docs/components/Data Entry/Date Picker/Documentation.mdx b/docs/components/Data Entry/Date Picker/Documentation.mdx
@@ -8,8 +8,15 @@ import * as DatePickerStories from '../../../../src/components/data-entry/DatePi
 
 # Date Picker
 
-This is the documentation for the date picker component
+#### Overview
+Used to select or input a single date through an interactive popup calendar.
+For date range selection with presets, use the [Date Range Filter](https://mparticle.github.io/aquarium/?path=/story/candidate-components-directory-date-range-filter--date-range-filter).
 
-{/* Documentation goes here */}
+#### Related Links
+
+| Type  | Resource                                                                                                                                               |
+| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Eames | [DatePicker Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=388-11437&p=f&t=zURbLpG60aM6aJiH-0) |
+| AntD | [DatePicker Component](https://ant.design/components/date-picker) |
 
-<Canvas meta={DatePickerStories.default} />
+<Canvas meta={DatePickerStories.default} />