docs: update docs and stories for first 6 data-entry components

mParticle · Dec 20, 2024 · 5bfeefb · 5bfeefb
1 parent ad063f5
commit 5bfeefb
Show file tree

Hide file tree

Showing 14 changed files with 1,058 additions and 708 deletions.
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} />
diff --git a/docs/components/Data Entry/Input/Documentation.mdx b/docs/components/Data Entry/Input/Documentation.mdx
@@ -8,8 +8,19 @@ import * as InputStories from '../../../../src/components/data-entry/Input/Input
 
 # Input
 
-This is the documentation for the Inputs component
+#### Overview
+The **Input** component allows users to enter content using a mouse or keyboard. It serves as the most basic form field wrapper and is commonly used where user input is required.
+
+#### **When To Use**
+- A user input in a form field is needed.
+- A search input is required.
+
+#### Related Links
+
+| Type  | Resource                                                                                                                                               |
+| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Eames | [Input Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=388-11439&p=f&t=zURbLpG60aM6aJiH-0) |
+| AntD | [Input Component](https://ant.design/components/input) |
 
-{/* Documentation goes here */}
 
 <Canvas meta={InputStories.default} />
diff --git a/docs/components/Data Entry/InputNumber/Documentation.mdx b/docs/components/Data Entry/InputNumber/Documentation.mdx
@@ -8,8 +8,18 @@ import * as InputNumberStories from '../../../../src/components/data-entry/Input
 
 # InputNumber
 
-This is the documentation for the InputNumbers component
+#### Overview
+The **InputNumber** component allows users to enter numeric values within a specified range using the mouse or keyboard. It ensures controlled and validated number input.
 
-{/* Documentation goes here */}
+#### **When To Use**
+- When a numeric value needs to be provided by the user.
+- To restrict input to numbers only, optionally within a defined range.
+
+#### 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} />