-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'soniakose-Foundations'
- Loading branch information
Showing
13 changed files
with
503 additions
and
3 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| # Brand Colors | ||
|
|
||
| ### Primary | ||
| The Primary Color is the main brand color, used to represent key actions and elements across the UI. In Ant Design, this color is typically applied to interactive elements such as primary buttons, active links, and highlighted items to draw user attention and establish brand identity. | ||
|
|
||
| | Hex Code | Token Name | Value | | ||
| |----------------------------------------------------------------------------------------------------|-------------------------------------|-----------------------------------------| | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#3600D1; border:1px solid #000;"></div> `#3600D1` | `--Colors-Brand-Primary-colorPrimary` | `var(--Colors-mpTokens-mpBrandPrimary-8)` | | ||
|
|
||
|
|
||
| #### Primary Color Variations | ||
|
|
||
| To create a visually consistent and accessible interface, the primary color comes with several variations, or shades, which provide a range of intensities for different UI needs. | ||
|
|
||
| | Hex Code | Token Name | Color Name | | ||
| |---------------------------------------------------------------------------------------------------|--------------------------------------|---------------------| | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#F8F6FB; border:1px solid #000;"></div> `#F8F6FB` | `--Colors-mpTokens-mpBrandPrimary-1` | Brand Primary 1 | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#EBE8F8; border:1px solid #000;"></div> `#EBE8F8` | `--Colors-mpTokens-mpBrandPrimary-2` | Brand Primary 2 | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#DBCEFF; border:1px solid #000;"></div> `#DBCEFF` | `--Colors-mpTokens-mpBrandPrimary-3` | Brand Primary 3 | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#C3AEFF; border:1px solid #000;"></div> `#C3AEFF` | `--Colors-mpTokens-mpBrandPrimary-4` | Brand Primary 4 | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#AB8EFF; border:1px solid #000;"></div> `#AB8EFF` | `--Colors-mpTokens-mpBrandPrimary-5` | Brand Primary 5 | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#8255FF; border:1px solid #000;"></div> `#8255FF` | `--Colors-mpTokens-mpBrandPrimary-6` | Brand Primary 6 | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#5F29F8; border:1px solid #000;"></div> `#5F29F8` | `--Colors-mpTokens-mpBrandPrimary-7` | Brand Primary 7 | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#3600D1; border:1px solid #000;"></div> `#3600D1` | `--Colors-mpTokens-mpBrandPrimary-8` | Brand Primary 8 | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#2C00AA; border:1px solid #000;"></div> `#2C00AA` | `--Colors-mpTokens-mpBrandPrimary-9` | Brand Primary 9 | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#20007A; border:1px solid #000;"></div> `#20007A` | `--Colors-mpTokens-mpBrandPrimary-10`| Brand Primary 10 | | ||
|
|
||
|
|
||
|
|
||
| #### Secondary | ||
| These colors complement the primary palette and are used to support the primary actions without drawing too much attention, typically applied to backgrounds, borders, and secondary UI components. | ||
|
|
||
| | Hex Code | Token Name | Color Name | | ||
| |---------------------------------------------------------------------------------------------------|---------------------------------------|---------------------| | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#FAF9F8; border:1px solid #000;"></div> `#FAF9F8` | `--Colors-mpTokens-mpBrandSecondary-2` | Brand Secondary 2 | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#ECEAE9; border:1px solid #000;"></div> `#ECEAE9` | `--Colors-mpTokens-mpBrandSecondary-3` | Brand Secondary 3 | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#DCDCD8; border:1px solid #000;"></div> `#DCDCD8` | `--Colors-mpTokens-mpBrandSecondary-4` | Brand Secondary 4 | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#BABBB5; border:1px solid #000;"></div> `#BABBB5` | `--Colors-mpTokens-mpBrandSecondary-5` | Brand Secondary 5 | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#717368; border:1px solid #000;"></div> `#717368` | `--Colors-mpTokens-mpBrandSecondary-6` | Brand Secondary 6 | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#505249; border:1px solid #000;"></div> `#505249` | `--Colors-mpTokens-mpBrandSecondary-7` | Brand Secondary 7 | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#2C2D2B; border:1px solid #000;"></div> `#2C2D2B` | `--Colors-mpTokens-mpBrandSecondary-8` | Brand Secondary 8 | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#212020; border:1px solid #000;"></div> `#212020` | `--Colors-mpTokens-mpBrandSecondary-9` | Brand Secondary 9 | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#0F0E0E; border:1px solid #000;"></div> `#0F0E0E` | `--Colors-mpTokens-mpBrandSecondary-10`| Brand Secondary 10 | | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| # Semantic Palette | ||
| A semantic color palette is a set of colors in a design system that conveys specific meanings or functions, rather than just aesthetic choices. Unlike base colors , semantic colors are mapped to particular purposes within the UI, helping users intuitively understand the state or role of elements. | ||
| ### Success Color | ||
|
|
||
| | Hex Code | Token Name | Value | | ||
| |----------------------------------------------------------------------------------------------------|----------------------------------------|--------------------------| | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#52C41A; border:1px solid #000;"></div> `#52C41A` | `--Colors-Brand-Success-colorSuccess` | `var(--Colors-Base-Green-6)` | | ||
|
|
||
| #### Success Color Variations | ||
|
|
||
| | Hex Code | Token Name | Value | | ||
| |----------------------------------------------------------------------------------------------------|---------------------------------------------|---------------------------------| | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#F6FFED; border:1px solid #000;"></div> `#F6FFED` | `--Colors-Brand-Success-colorSuccessBg` | `var(--Colors-Base-Green-1)` | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#D9F7BE; border:1px solid #000;"></div> `#D9F7BE` | `--Colors-Brand-Success-colorSuccessBgHover` | `var(--Colors-Base-Green-2)` | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#B7EB8F; border:1px solid #000;"></div> `#B7EB8F` | `--Colors-Brand-Success-colorSuccessBorder` | `var(--Colors-Base-Green-3)` | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#95DE64; border:1px solid #000;"></div> `#95DE64` | `--Colors-Brand-Success-colorSuccessBorderHover` | `var(--Colors-Base-Green-4)` | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#95DE64; border:1px solid #000;"></div> `#95DE64` | `--Colors-Brand-Success-colorSuccessHover` | `var(--Colors-Base-Green-4)` | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#389E0D; border:1px solid #000;"></div> `#389E0D` | `--Colors-Brand-Success-colorSuccessActive` | `var(--Colors-Base-Green-7)` | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#73D13D; border:1px solid #000;"></div> `#73D13D` | `--Colors-Brand-Success-colorSuccessTextHover` | `var(--Colors-Base-Green-5)` | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#52C41A; border:1px solid #000;"></div> `#52C41A` | `--Colors-Brand-Success-colorSuccessText` | `var(--Colors-Base-Green-6)` | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#389E0D; border:1px solid #000;"></div> `#389E0D` | `--Colors-Brand-Success-colorSuccessTextActive` | `var(--Colors-Base-Green-7)` | | ||
|
|
||
|
|
||
|
|
||
| ### Warning Color | ||
|
|
||
| | Hex Code | Token Name | Value | | ||
| |----------------------------------------------------------------------------------------------------|----------------------------------------|--------------------------| | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#FAAD14; border:1px solid #000;"></div> `#FAAD14` | `--Colors-Brand-Warning-colorWarning` | `var(--Colors-Base-Gold-6)` | | ||
|
|
||
| ### Info Color | ||
|
|
||
|
|
||
| | Hex Code | Token Name | Value | | ||
| |----------------------------------------------------------------------------------------------------|------------------------------------|-------------------------------------| | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#3600D1; border:1px solid #000;"></div> `#3600D1` | `--Colors-Brand-Info-colorInfo` | `var(--Colors-Brand-Primary-colorPrimary)` | | ||
|
|
||
|
|
||
|
|
||
|
|
||
| ### Error Color | ||
|
|
||
| | Hex Code | Token Name | Value | | ||
| |----------------------------------------------------------------------------------------------------|-------------------------------------|-----------| | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#FF4D4F; border:1px solid #000;"></div> `#FF4D4F` | `--Colors-Brand-Error-colorError` | `#FF4D4F` | | ||
|
|
||
|
|
||
|
|
||
|
|
||
| ### Text Colors | ||
| #### Neutral | ||
|
|
||
| | Hex Code | Token Name | Value | | ||
| |----------------------------------------------------------------------------------------------------|---------------------------------------------|---------------------------------------------| | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:rgba(0, 0, 0, 0.95); border:1px solid #000;"></div> `rgba(0, 0, 0, 0.95)` | `--Colors-Neutral-Text-colorText` | rgba(0, 0, 0, 0.95) | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:rgba(0, 0, 0, 0.75); border:1px solid #000;"></div> `rgba(0, 0, 0, 0.75)` | `--Colors-Neutral-Text-colorTextSecondary` | rgba(0, 0, 0, 0.75) | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:rgba(0, 0, 0, 0.55); border:1px solid #000;"></div> `rgba(0, 0, 0, 0.55)` | `--Colors-Neutral-Text-colorTextTertiary` | rgba(0, 0, 0, 0.55) | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:rgba(0, 0, 0, 0.40); border:1px solid #000;"></div> `rgba(0, 0, 0, 0.40)` | `--Colors-Neutral-Text-colorTextQuaternary` | rgba(0, 0, 0, 0.40) | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#FFFFFF; border:1px solid #000;"></div> `#FFFFFF` | `--Colors-Neutral-Text-colorTextLightSolid` | #FFFFFF | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:rgba(0, 0, 0, 0.95); border:1px solid #000;"></div> `rgba(0, 0, 0, 0.95)` | `--Colors-Neutral-Text-colorTextHeading` | var(--Colors-Neutral-Text-colorText) | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:rgba(0, 0, 0, 0.75); border:1px solid #000;"></div> `rgba(0, 0, 0, 0.75)` | `--Colors-Neutral-Text-colorTextLabel` | var(--Colors-Neutral-Text-colorTextSecondary)| | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:rgba(0, 0, 0, 0.55); border:1px solid #000;"></div> `rgba(0, 0, 0, 0.55)` | `--Colors-Neutral-Text-colorTextDescription`| var(--Colors-Neutral-Text-colorTextTertiary) | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:rgba(0, 0, 0, 0.40); border:1px solid #000;"></div> `rgba(0, 0, 0, 0.40)` | `--Colors-Neutral-Text-colorTextDisabled` | var(--Colors-Neutral-Text-colorTextQuaternary)| | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:rgba(0, 0, 0, 0.40); border:1px solid #000;"></div> `rgba(0, 0, 0, 0.40)` | `--Colors-Neutral-Text-colorTextPlaceholder`| var(--Colors-Neutral-Text-colorTextQuaternary)| | ||
|
|
||
| --- | ||
|
|
||
| #### Error | ||
| | Hex Code | Token Name | Value | | ||
| |----------------------------------------------------------------------------------------------------|---------------------------------------------|---------------------------------------------| | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#FF7875; border:1px solid #000;"></div> `#FF7875` | `--Colors-Brand-Error-colorErrorTextHover` | #FF7875 | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#FF4D4F; border:1px solid #000;"></div> `#FF4D4F` | `--Colors-Brand-Error-colorErrorText` | #FF4D4F | | ||
| | <div style="display:inline-block; width:16px; height:16px; background-color:#D9363E; border:1px solid #000;"></div> `#D9363E` | `--Colors-Brand-Error-colorErrorTextActive` | #D9363E | | ||
|
|
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| # Table Cells | ||
|
|
||
| ### 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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| # 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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| # 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. | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| # 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. | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| # 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. | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import { Meta, Story } from '@storybook/blocks'; | ||
|
|
||
| {/* // import * as TableStories from './Table.stories'; */} | ||
|
|
||
| {/* <Meta of={TableStories.default} /> */} | ||
|
|
||
| {/* <Story of={TableStories.default} /> */} | ||
|
|
||
| # Table | ||
|
|
||
| #### Overview | ||
| Tables present and organize data in a structured, readable format, ranging from basic displays to complex interfaces that support queries and data manipulation. | ||
|
|
||
| #### Basic Table | ||
|
|
||
| ##### Header | ||
| A typical table header contains column titles that describe the data in each column. It includes functionality for sorting columns and may feature help icons with tooltips to provide additional information on each column’s purpose. | ||
|
|
||
| ##### Pagination | ||
| Use pagination in tables to improve performance and reduce load times by fetching only the data needed for the current page. | ||
|
|
||
| ##### Cell Types | ||
| Table cells support various formats and are designed to display data in clear, readable ways. | ||
|
|
||
| - Date / Time (Coming Soon) | ||
| - Text | ||
| - CTA Buttons (Coming Soon) | ||
| - Status (Coming Soon) | ||
|
|
||
| - Tags (Coming Soon) | ||
| - More Actions (Coming Soon) | ||
|
|
||
| [View Example](#link) | ||
|
|
||
| #### Tables with Filters | ||
| Filters help users refine large datasets within tables. The mParticle table supports a range of filter types, including: | ||
|
|
||
| - [Search](#link-to-search) | ||
| - [Date Range filters](#link-to-daterange) | ||
| - [Basic Filters](#link-to-basic-filters) | ||
| - [Filters with an Apply button](#link-to-apply-button-filters) | ||
|
|
||
|
|
||
|
|
||
| #### 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" /> |
Oops, something went wrong.