Skip to content

chore: move related links #707

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
skosemP wants to merge 2 commits into
base: main
Choose a base branch
from
Open

chore: move related links #707

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ce02d50
chore: move related links
skosemP Dec 18, 2025
f2ed2f3
Merge branch 'main' into chore/related-links-bottom
skosemP Dec 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 8 additions & 9 deletions docs/Foundations/Icons/How to use.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,15 +49,6 @@ Add the icon components in the [src/components/icons](https://github.com/mPartic
Ensure the new icons are included in the Icons object located in [src/constants/Icons](https://github.com/mParticle/aquarium/blob/3abc3b71916ab5a7db3c4f93e06ad2bd5845e1bf/src/constants/Icons.ts). This object is used across the project to reference all available icons.


### Related Links

| Type | Resource|
| -------- | ------- |
| Eames | [Figma Icon library](https://www.figma.com/design/3j5Nb0oOSkF3DW3URS8yex/mParticle-Icons-1.0.0?node-id=2055-9952&t=K7xlZo0hE2tn2y54-0) |
|Eames| [Icon Guidelines for designers](https://mparticle.atlassian.net/wiki/spaces/DMP/pages/3988914258/Icons) |
| Eames | [Fontawesome Library](https://fontawesome.com/search?o=r&s=ligh) |


### FAQ

**Q:** What if an icon in Figma has a FontAwesome name or doesn't follow the standard naming format? Should I name it myself?
Expand All @@ -68,3 +59,11 @@ Ensure the new icons are included in the Icons object located in [src/constants/
- When the design team explicitly requests a customized icon.
- When the AntD library does not offer a suitable icon for a specific use case.
- When an existing AntD icon does not align with mParticle’s design or functional requirements.

### Related Links

| Type | Resource|
| -------- | ------- |
| Eames | [Figma Icon library](https://www.figma.com/design/3j5Nb0oOSkF3DW3URS8yex/mParticle-Icons-1.0.0?node-id=2055-9952&t=K7xlZo0hE2tn2y54-0) |
|Eames| [Icon Guidelines for designers](https://mparticle.atlassian.net/wiki/spaces/DMP/pages/3988914258/Icons) |
| Eames | [Fontawesome Library](https://fontawesome.com/search?o=r&s=ligh) |
10 changes: 4 additions & 6 deletions docs/UX Patterns/Table/Documentation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,13 +42,11 @@ Filters help users refine large datasets within tables. The mParticle table supp



#### Example basic table image (To be changed)

<img src="images/basic-table.png" />

#### Related Links
| Type | Resource |
| ------ | -------- |
| Eames | [Figma Templates](https://www.figma.com/design/yCPszaTtkCFxRHaSkkJFR9/Eames-Templates-%5BInternal%5D?node-id=2114-9632&node-type=frame&t=Aa9XxcKyme3ud4cb-0) |



#### Example basic table image (To be changed)

<img src="images/basic-table.png" />
13 changes: 8 additions & 5 deletions docs/components/Data Display/Avatar/Documentation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,17 @@ The **Avatar** component is used to display a profile image, initials, or an ico

- **[Navigation](https://mparticle.github.io/aquarium/?path=/story/components-navigation-globalnavigation--primary)** – Avatar is used within the navigation sidebar to represent the selected workspace.

#### Square avatar badges

Wrap a square `Avatar` with the `Badge` component to highlight unread items or online status. The `WithSquareBadge` story shows both an icon-based avatar and a photo avatar using badges.

<Canvas of={AvatarStories.WithSquareBadge} />

<Canvas meta={AvatarStories.default} />

#### Related Links

| 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) |




<Canvas meta={AvatarStories.default} />
6 changes: 2 additions & 4 deletions docs/components/Data Display/Card/Documentation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,11 @@ The **Card** component is a flexible container for displaying content related to
- **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.

<Story of={CardStories.Primary} />

#### 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) |



<Story of={CardStories.Primary} />
5 changes: 2 additions & 3 deletions docs/components/Data Display/Collapse/Documentation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,11 @@ In a complex input form within a modal, certain fields or options can be hidden
We use expand/collapse in [Table Filters](https://mparticle.github.io/aquarium/?path=/story/ux-patterns-table-filters--with-complex-filters). Initially, only the main categories are shown, while detailed options are hidden under expandable sections.


<Canvas of={CollapseStories.GhostCollapse} />

#### Related Links

| 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 of={CollapseStories.GhostCollapse} />
6 changes: 2 additions & 4 deletions docs/components/Data Display/Descriptions/Documentation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,11 @@ import * as DescriptionsStories from '../../../../src/components/data-display/De
Display multiple read-only fields grouped together, commonly used on details pages to organize information in a structured way.


<Canvas meta={DescriptionsStories.default} />

#### 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) |



<Canvas meta={DescriptionsStories.default} />
7 changes: 2 additions & 5 deletions docs/components/Data Display/Image/Documentation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,11 @@ import * as ImageStories from '../../../../src/components/data-display/Image/Ima
The Image component displays pictures in the UI. It supports various sizes and is suitable for showcasing visual content, such as marketing images or logos.


<Canvas meta={ImageStories.default} />

#### Related Links

| 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) |




<Canvas meta={ImageStories.default} />
6 changes: 2 additions & 4 deletions docs/components/Data Display/List/Documentation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,11 @@ The **List** component is a simple, versatile container for displaying multiple
- **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

<Canvas meta={ListStories.default} />

#### 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) |



<Canvas meta={ListStories.default} />
5 changes: 2 additions & 3 deletions docs/components/Data Display/Popover/Documentation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,11 @@ Use [Tooltip](https://mparticle.github.io/aquarium/?path=/story/components-data-
**Feature Experience Switch** – The [Feature Experience Switch](Insert link) uses the popover to allow users to toggle between the old and new experience.


<Canvas meta={PopoverStories.default} />

#### Related Links

| 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} />
9 changes: 4 additions & 5 deletions docs/components/Data Display/Tabs/Documentation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,13 @@ import * as TabsStories from '../../../../src/components/data-display/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.

{/* Documentation goes here */}

<Canvas meta={TabsStories.default} />

#### 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 */}

<Canvas meta={TabsStories.default} />
8 changes: 4 additions & 4 deletions docs/components/Data Display/Tooltip/Documentation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@ The Tooltip is a lightweight, contextual UI element used to display additional i
- When more information is needed to explain an action, label, or feature without disrupting the user's flow.
- To guide users with short, helpful messages, especially when onboarding or interacting with complex components.

{/* Documentation goes here */}

<Canvas meta={TooltipStories.default} />

#### Related Links
| 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} />
8 changes: 4 additions & 4 deletions docs/components/Data Display/Tour/Documentation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,13 @@ Use the Tour component when:
- You want to onboard new users by introducing them to important features.
- Highlighting new or updated features for existing users.
- Offering guidance for complex workflows or multi-step processes.
{/* Documentation goes here */}

<Canvas meta={TourStories.default} />

#### Related Links

| 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 */}

<Canvas meta={TourStories.default} />
5 changes: 2 additions & 3 deletions docs/components/Data Entry/Auto Complete/Documentation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,11 @@ import * as AutoCompleteStories from '../../../../src/components/data-entry/Auto

An input field with text hints that aids users by providing keyword-based suggestions as they type.

<Canvas meta={AutoCompleteStories.default} />

#### 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) |


<Canvas meta={AutoCompleteStories.default} />
5 changes: 2 additions & 3 deletions docs/components/Data Entry/Checkbox/Documentation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,11 @@ When selecting a single option from a set of mutually exclusive choices, use **[

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.

<Canvas meta={CheckboxStories.default} />

#### 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) |


<Canvas meta={CheckboxStories.default} />
4 changes: 2 additions & 2 deletions docs/components/Data Entry/Date Picker/Documentation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ import * as DatePickerStories from '../../../../src/components/data-entry/DatePi
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).

<Story of={DatePickerStories.Primary} />

#### 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) |

<Story of={DatePickerStories.Primary} />
4 changes: 2 additions & 2 deletions docs/components/Data Entry/InputNumber/Documentation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,11 @@ The **InputNumber** component allows users to enter numeric values within a spec
- When a numeric value needs to be provided by the user.
- To restrict input to numbers only, optionally within a defined range.

<Canvas meta={InputNumberStories.default} />

#### Related Links

| Type | Resource |
| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Eames | [InputNumber Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=388-11439&p=f&t=zURbLpG60aM6aJiH-0) |
| AntD | [InputNumber Component](https://ant.design/components/input-number) |

<Canvas meta={InputNumberStories.default} />
4 changes: 2 additions & 2 deletions docs/components/Data Entry/Radio/Documentation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@ Used to select a single state from multiple options.
- Unlike **[select](https://mparticle.github.io/aquarium/?path=/story/components-data-entry-select--primary)**, **Radio** is always visible, helping users easily compare choices.
- Use **Radio** when there are few options to avoid overwhelming the user.

<Canvas of={RadioStories.Primary} />

#### Related Links

| Type | Resource |
| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Eames | [Radio Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=395-10973&p=f&t=zURbLpG60aM6aJiH-0) |
| AntD | [Radio Component](https://ant.design/components/radio) |

<Canvas of={RadioStories.Primary} />
8 changes: 4 additions & 4 deletions docs/components/Data Entry/Select/Documentation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,12 @@ Select component allows users to select the necessary record from a list.
- Select with Autocomplete [Insert Link]


{/* Documentation goes here */}

<Canvas meta={SelectStories.default} />

#### Related Links
| Type | Resource |
| ------ | -------- |
| Eames | [Select Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=1217-31707&t=5iHsAw2QyK8Lx8zt-4) |
| AntD | [Select Component](https://ant.design/components/select) |

{/* Documentation goes here */}

<Canvas meta={SelectStories.default} />
4 changes: 2 additions & 2 deletions docs/components/Data Entry/TreeSelect/Documentation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ import * as TreeSelectStories from '../../../../src/components/data-entry/TreeSe
- Use **TreeSelect** when data entries are defined in a hierarchical manner.
- Ideal for scenarios like categorized data with parent-child relationships

<Canvas meta={TreeSelectStories.default} />

#### Related Links

| Type | Resource |
| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Eames | [TreeSelect Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=396-13800&p=f&t=tFDp4mtk1zJJUroL-0) |
| AntD | [TreeSelect Component](https://ant.design/components/tree-select) |

<Canvas meta={TreeSelectStories.default} />
4 changes: 2 additions & 2 deletions docs/components/Data Entry/Upload/Documentation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,11 @@ Used to select and upload files or drag and drop files.
- When you want to allow file uploads via drag-and-drop.
- When you need to display the upload process (e.g., progress indicators).

<Canvas meta={UploadStories.default} />

#### Related Links

| Type | Resource |
| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Eames | [Upload Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=396-13801&p=f&t=qTxTI3nmyrN7o7DQ-0) |
| AntD | [Upload Component](https://ant.design/components/upload) |

<Canvas meta={UploadStories.default} />