diff --git a/libs/core/src/components/pds-accordion/docs/pds-accordion.mdx b/libs/core/src/components/pds-accordion/docs/pds-accordion.mdx index 380860683..28d8ed9e1 100644 --- a/libs/core/src/components/pds-accordion/docs/pds-accordion.mdx +++ b/libs/core/src/components/pds-accordion/docs/pds-accordion.mdx @@ -3,9 +3,12 @@ import * as stories from '../stories/pds-accordion.stories.js'; import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components'; import { components } from '../../../../dist/docs.json'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Accordion An Accordion, composed of a single label and a panel of custom content, is used to show and hide information. They can be helpful for users to scan the contents of the page and find the information they need quickly and easily. diff --git a/libs/core/src/components/pds-alert/docs/pds-alert.mdx b/libs/core/src/components/pds-alert/docs/pds-alert.mdx index c11b7205a..0dd6a3053 100644 --- a/libs/core/src/components/pds-alert/docs/pds-alert.mdx +++ b/libs/core/src/components/pds-alert/docs/pds-alert.mdx @@ -3,9 +3,12 @@ import * as stories from '../stories/pds-alert.stories.js'; import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components'; import { components } from '../../../../dist/docs.json'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Alert Alerts display inline messages with distinct variants for information, success, warnings, errors, and other states. They can be dismissible and include an actions slot for related buttons. diff --git a/libs/core/src/components/pds-avatar/docs/pds-avatar.mdx b/libs/core/src/components/pds-avatar/docs/pds-avatar.mdx index 32974138d..7ce628722 100644 --- a/libs/core/src/components/pds-avatar/docs/pds-avatar.mdx +++ b/libs/core/src/components/pds-avatar/docs/pds-avatar.mdx @@ -5,9 +5,12 @@ import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components'; import { components } from '../../../../dist/docs.json'; import sampleImg from '../assets/demi_wilkinson.jpg'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Avatar Avatars display a thumbnail representation of a person or organization, supporting an image, an initials fallback, and an optional badge. They can also function as a dropdown trigger. diff --git a/libs/core/src/components/pds-box/docs/pds-box.mdx b/libs/core/src/components/pds-box/docs/pds-box.mdx index e73655981..37581e69d 100644 --- a/libs/core/src/components/pds-box/docs/pds-box.mdx +++ b/libs/core/src/components/pds-box/docs/pds-box.mdx @@ -3,9 +3,12 @@ import * as stories from '../stories/pds-box.stories.js'; import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components'; import { components } from '../../../../dist/docs.json'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Box Box is our primitive layout component. It is intended to be used as a building block for more complex layouts. It allows for custom sizing, colors, padding, and alignment while still adhering to Pine tokens and brand guidelines. The component uses logical properties for margin and padding, making it adaptable to different writing modes and languages. diff --git a/libs/core/src/components/pds-checkbox/docs/pds-checkbox.mdx b/libs/core/src/components/pds-checkbox/docs/pds-checkbox.mdx index 38010d5ff..df31de995 100644 --- a/libs/core/src/components/pds-checkbox/docs/pds-checkbox.mdx +++ b/libs/core/src/components/pds-checkbox/docs/pds-checkbox.mdx @@ -3,9 +3,12 @@ import * as stories from '../stories/pds-checkbox.stories.js'; import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components'; import { components } from '../../../../dist/docs.json'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Checkbox Checkboxes provide users with selectable options like toggling a single setting or selecting multiple options from a list. diff --git a/libs/core/src/components/pds-chip/docs/pds-chip.mdx b/libs/core/src/components/pds-chip/docs/pds-chip.mdx index cea50c9a0..84fcb526f 100644 --- a/libs/core/src/components/pds-chip/docs/pds-chip.mdx +++ b/libs/core/src/components/pds-chip/docs/pds-chip.mdx @@ -3,9 +3,12 @@ import * as stories from '../stories/pds-chip.stories.js'; import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components'; import { components } from '../../../../dist/docs.json'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Chip Chips are used to inform users about the status of an object or to associate properties with a parent. Commonly used in tabular data to indicate status. diff --git a/libs/core/src/components/pds-combobox/docs/pds-combobox.mdx b/libs/core/src/components/pds-combobox/docs/pds-combobox.mdx index b7c4f9e71..7240c9707 100644 --- a/libs/core/src/components/pds-combobox/docs/pds-combobox.mdx +++ b/libs/core/src/components/pds-combobox/docs/pds-combobox.mdx @@ -3,9 +3,12 @@ import * as stories from '../stories/pds-combobox.stories.js'; import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components'; import { components } from '../../../../dist/docs.json'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Combobox A combobox is a text input with a dropdown list of options, allowing users to filter and select from a list. It is useful for searchable selects and autocomplete scenarios. diff --git a/libs/core/src/components/pds-container/docs/pds-container.mdx b/libs/core/src/components/pds-container/docs/pds-container.mdx index 93648cc71..8611d2495 100644 --- a/libs/core/src/components/pds-container/docs/pds-container.mdx +++ b/libs/core/src/components/pds-container/docs/pds-container.mdx @@ -3,9 +3,12 @@ import * as stories from '../stories/pds-container.stories.js'; import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components'; import { components } from '../../../../dist/docs.json'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Container Container constrains its children to a semantic max-width, centering them within the available space. Use it to wrap form panels, settings pages, and full-page flows. diff --git a/libs/core/src/components/pds-copytext/docs/pds-copytext.mdx b/libs/core/src/components/pds-copytext/docs/pds-copytext.mdx index 5157fa51b..45e346ad6 100644 --- a/libs/core/src/components/pds-copytext/docs/pds-copytext.mdx +++ b/libs/core/src/components/pds-copytext/docs/pds-copytext.mdx @@ -3,9 +3,12 @@ import * as stories from '../stories/pds-copytext.stories.js'; import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components'; import { components } from '../../../../dist/docs.json'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Copy Text Copy Text displays a value alongside a copy button, letting users copy codes, IDs, or short strings to their clipboard in a single click. It supports truncation with a hover tooltip for long values. diff --git a/libs/core/src/components/pds-divider/docs/pds-divider.mdx b/libs/core/src/components/pds-divider/docs/pds-divider.mdx index c658e1fe7..62e26b27c 100644 --- a/libs/core/src/components/pds-divider/docs/pds-divider.mdx +++ b/libs/core/src/components/pds-divider/docs/pds-divider.mdx @@ -3,9 +3,12 @@ import * as stories from '../stories/pds-divider.stories.js'; import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components'; import { components } from '../../../../dist/docs.json'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Divider A divider is used to create a clear visual separation between sections of content within a layout. diff --git a/libs/core/src/components/pds-dropdown-menu/docs/pds-dropdown-menu.mdx b/libs/core/src/components/pds-dropdown-menu/docs/pds-dropdown-menu.mdx index c247b911d..877d82b62 100644 --- a/libs/core/src/components/pds-dropdown-menu/docs/pds-dropdown-menu.mdx +++ b/libs/core/src/components/pds-dropdown-menu/docs/pds-dropdown-menu.mdx @@ -3,9 +3,12 @@ import * as stories from '../stories/pds-dropdown-menu.stories.js'; import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components'; import { components } from '../../../../dist/docs.json'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Dropdown Menu Dropdown Menus reveal a list of actions from a button trigger, implementing the WAI-ARIA Menu Button pattern. Use them to conserve space when options do not need to be visible at all times. diff --git a/libs/core/src/components/pds-filters/docs/pds-filters.mdx b/libs/core/src/components/pds-filters/docs/pds-filters.mdx index db4a981b9..66798fb4c 100644 --- a/libs/core/src/components/pds-filters/docs/pds-filters.mdx +++ b/libs/core/src/components/pds-filters/docs/pds-filters.mdx @@ -3,9 +3,12 @@ import * as stories from '../stories/pds-filters.stories.js'; import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components'; import { components } from '../../../../dist/docs.json'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Filters Filters provide a flexible system for building filter interfaces from a row of popover triggers. A parent pds-filters container manages layout while individual pds-filter children hold the popover content for each facet. diff --git a/libs/core/src/components/pds-icon/docs/pds-icon.mdx b/libs/core/src/components/pds-icon/docs/pds-icon.mdx index cd5f4c7e2..3fbc4fdb7 100644 --- a/libs/core/src/components/pds-icon/docs/pds-icon.mdx +++ b/libs/core/src/components/pds-icon/docs/pds-icon.mdx @@ -3,9 +3,12 @@ import * as stories from '../stories/pds-icon.stories.js'; import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components'; import { components as pdsDocsJson } from '@pine-ds/icons/dist/docs.json'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Icon Icons render scalable glyphs from Pine's icon set, representing actions, statuses, or features in the interface. diff --git a/libs/core/src/components/pds-image/docs/pds-image.mdx b/libs/core/src/components/pds-image/docs/pds-image.mdx index d9e5ee54a..2da95782a 100644 --- a/libs/core/src/components/pds-image/docs/pds-image.mdx +++ b/libs/core/src/components/pds-image/docs/pds-image.mdx @@ -3,9 +3,12 @@ import * as stories from '../stories/pds-image.stories.js'; import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components'; import { components } from '../../../../dist/docs.json'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Image An image can be used to convey supplemental information to the user or as decoration. diff --git a/libs/core/src/components/pds-input/docs/pds-input.mdx b/libs/core/src/components/pds-input/docs/pds-input.mdx index 249a8e634..8e675acf7 100644 --- a/libs/core/src/components/pds-input/docs/pds-input.mdx +++ b/libs/core/src/components/pds-input/docs/pds-input.mdx @@ -3,9 +3,12 @@ import * as stories from '../stories/pds-input.stories.js'; import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components'; import { components } from '../../../../dist/docs.json'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Input Input captures a single line of text from the user, paired with a label and optional helper or error message. Use it for names, emails, IDs, and other short freeform values. diff --git a/libs/core/src/components/pds-link/docs/pds-link.mdx b/libs/core/src/components/pds-link/docs/pds-link.mdx index e35f5a736..414ad1e7e 100644 --- a/libs/core/src/components/pds-link/docs/pds-link.mdx +++ b/libs/core/src/components/pds-link/docs/pds-link.mdx @@ -3,9 +3,12 @@ import * as stories from '../stories/pds-link.stories.js'; import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components'; import { components } from '../../../../dist/docs.json'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Link A hyperlink is used as a navigational element to direct users to another location on the website or application. diff --git a/libs/core/src/components/pds-loader/docs/pds-loader.mdx b/libs/core/src/components/pds-loader/docs/pds-loader.mdx index 44661be1c..6ad86f03f 100644 --- a/libs/core/src/components/pds-loader/docs/pds-loader.mdx +++ b/libs/core/src/components/pds-loader/docs/pds-loader.mdx @@ -3,9 +3,12 @@ import * as stories from '../stories/pds-loader.stories.js'; import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components'; import { components } from '../../../../dist/docs.json'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Loader Loaders signal that an operation is in progress via an animated spinner or typing indicator. Use them during time-consuming tasks to reassure users that the system is working. diff --git a/libs/core/src/components/pds-multiselect/docs/pds-multiselect.mdx b/libs/core/src/components/pds-multiselect/docs/pds-multiselect.mdx index 874b90190..98ed55f1d 100644 --- a/libs/core/src/components/pds-multiselect/docs/pds-multiselect.mdx +++ b/libs/core/src/components/pds-multiselect/docs/pds-multiselect.mdx @@ -3,9 +3,12 @@ import * as stories from '../stories/pds-multiselect.stories.js'; import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components'; import { components } from '../../../../dist/docs.json'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Multiselect Multiselects let users pick several options from a searchable dropdown list. The trigger displays the selected count while the panel surfaces a filterable list of choices. diff --git a/libs/core/src/components/pds-popover/docs/pds-popover.mdx b/libs/core/src/components/pds-popover/docs/pds-popover.mdx index 4aeb37495..171c464bc 100644 --- a/libs/core/src/components/pds-popover/docs/pds-popover.mdx +++ b/libs/core/src/components/pds-popover/docs/pds-popover.mdx @@ -3,9 +3,12 @@ import * as stories from '../stories/pds-popover.stories.js'; import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components'; import { components } from '../../../../dist/docs.json'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Popover Popovers display contextual information when users click or initiates a keyboard event on an element. They typically contain more information than tooltips and can include interactive elements. diff --git a/libs/core/src/components/pds-progress/docs/pds-progress.mdx b/libs/core/src/components/pds-progress/docs/pds-progress.mdx index b0c5da212..5280b73fe 100644 --- a/libs/core/src/components/pds-progress/docs/pds-progress.mdx +++ b/libs/core/src/components/pds-progress/docs/pds-progress.mdx @@ -3,9 +3,12 @@ import * as stories from '../stories/pds-progress.stories.js'; import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components'; import { components } from '../../../../dist/docs.json'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Progress Progress bars visualize how far a task has advanced toward completion. They help users gauge wait time during uploads, downloads, or other long-running operations. diff --git a/libs/core/src/components/pds-property/docs/pds-property.mdx b/libs/core/src/components/pds-property/docs/pds-property.mdx index 22e8fd3c9..8fb8614a3 100644 --- a/libs/core/src/components/pds-property/docs/pds-property.mdx +++ b/libs/core/src/components/pds-property/docs/pds-property.mdx @@ -3,9 +3,12 @@ import * as stories from '../stories/pds-property.stories.js'; import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components'; import { components } from '../../../../dist/docs.json'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Property Properties pair an icon with a short label to present key-value pairs, status indicators, or tagged information in a compact horizontal layout. An icon is always shown; unspecified icons default to a star. diff --git a/libs/core/src/components/pds-radio-group/docs/pds-radio-group.mdx b/libs/core/src/components/pds-radio-group/docs/pds-radio-group.mdx index a5926e7d1..5fcd71627 100644 --- a/libs/core/src/components/pds-radio-group/docs/pds-radio-group.mdx +++ b/libs/core/src/components/pds-radio-group/docs/pds-radio-group.mdx @@ -3,9 +3,12 @@ import * as stories from '../stories/pds-radio-group.stories.js'; import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components'; import { components } from '../../../../dist/docs.json'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Radio Group Radio Groups wrap a set of related radio inputs, displaying a single error message and helper message for the whole group. Use them whenever users must pick exactly one option from a set. diff --git a/libs/core/src/components/pds-radio/docs/pds-radio.mdx b/libs/core/src/components/pds-radio/docs/pds-radio.mdx index 52d534689..f27cd54e5 100644 --- a/libs/core/src/components/pds-radio/docs/pds-radio.mdx +++ b/libs/core/src/components/pds-radio/docs/pds-radio.mdx @@ -3,9 +3,12 @@ import * as stories from '../stories/pds-radio.stories.js'; import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components'; import { components } from '../../../../dist/docs.json'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Radio Radio components allow users to select one option from a group of two or more choices. diff --git a/libs/core/src/components/pds-row/docs/pds-row.mdx b/libs/core/src/components/pds-row/docs/pds-row.mdx index 905693829..39ec2ca50 100644 --- a/libs/core/src/components/pds-row/docs/pds-row.mdx +++ b/libs/core/src/components/pds-row/docs/pds-row.mdx @@ -3,10 +3,12 @@ import * as stories from '../stories/pds-row.stories.js'; import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components'; import { components } from '../../../../dist/docs.json'; - +import { StatusBadge } from '../../../stories/_helpers'; + + # Row Row is a flexbox-based grid container that arranges content into responsive columns. It uses a 12-column system for laying out horizontal rows. diff --git a/libs/core/src/components/pds-select/docs/pds-select.mdx b/libs/core/src/components/pds-select/docs/pds-select.mdx index 15a9416c2..c1793f174 100644 --- a/libs/core/src/components/pds-select/docs/pds-select.mdx +++ b/libs/core/src/components/pds-select/docs/pds-select.mdx @@ -3,9 +3,12 @@ import * as stories from '../stories/pds-select.stories.js'; import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components'; import { components } from '../../../../dist/docs.json'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Select Selects present a single-choice dropdown, letting users pick one value from a predefined set of options. diff --git a/libs/core/src/components/pds-sortable/docs/pds-sortable.mdx b/libs/core/src/components/pds-sortable/docs/pds-sortable.mdx index 7395d20cf..49100ba59 100644 --- a/libs/core/src/components/pds-sortable/docs/pds-sortable.mdx +++ b/libs/core/src/components/pds-sortable/docs/pds-sortable.mdx @@ -3,9 +3,12 @@ import * as stories from '../stories/pds-sortable.stories.js'; import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components' import { components } from '../../../../dist/docs.json'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Sortable Sortable is for creating containers of items that can be sorted via drag and drop functionality. diff --git a/libs/core/src/components/pds-switch/docs/pds-switch.mdx b/libs/core/src/components/pds-switch/docs/pds-switch.mdx index 2cc8b4b7a..a0cec0bd1 100644 --- a/libs/core/src/components/pds-switch/docs/pds-switch.mdx +++ b/libs/core/src/components/pds-switch/docs/pds-switch.mdx @@ -3,9 +3,12 @@ import * as stories from '../stories/pds-switch.stories.js'; import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components'; import { components } from '../../../../dist/docs.json'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Switch Switches toggle a single setting between on and off, rendered as a sliding thumb inside a track. They work as form-associated inputs whose checked state submits with the surrounding form. diff --git a/libs/core/src/components/pds-tabs/docs/pds-tabs.mdx b/libs/core/src/components/pds-tabs/docs/pds-tabs.mdx index 7adb496dc..085bcf5b2 100644 --- a/libs/core/src/components/pds-tabs/docs/pds-tabs.mdx +++ b/libs/core/src/components/pds-tabs/docs/pds-tabs.mdx @@ -3,9 +3,12 @@ import * as stories from '../stories/pds-tabs.stories.js'; import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components'; import { components } from '../../../../dist/docs.json'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Tabs Tabs organize related content into separate panels that users switch between using a horizontal button bar, keeping only one panel visible at a time. diff --git a/libs/core/src/components/pds-text/docs/pds-text.mdx b/libs/core/src/components/pds-text/docs/pds-text.mdx index 433045ef8..9562cf15f 100644 --- a/libs/core/src/components/pds-text/docs/pds-text.mdx +++ b/libs/core/src/components/pds-text/docs/pds-text.mdx @@ -3,9 +3,12 @@ import * as stories from '../stories/pds-text.stories.js'; import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components'; import { components } from '../../../../dist/docs.json'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Text Text renders content using configurable semantic HTML tags for headings or body copy, applying Pine's typography tokens consistently across the interface. diff --git a/libs/core/src/components/pds-textarea/docs/pds-textarea.mdx b/libs/core/src/components/pds-textarea/docs/pds-textarea.mdx index 079edbd73..3db989e78 100644 --- a/libs/core/src/components/pds-textarea/docs/pds-textarea.mdx +++ b/libs/core/src/components/pds-textarea/docs/pds-textarea.mdx @@ -3,9 +3,12 @@ import * as stories from '../stories/pds-textarea.stories.js'; import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components'; import { components } from '../../../../dist/docs.json'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Textarea Textarea captures multi-line text from the user, paired with a label and optional helper or error message. Use it for freeform content like comments, descriptions, or messages. diff --git a/libs/core/src/components/pds-toast/docs/pds-toast.mdx b/libs/core/src/components/pds-toast/docs/pds-toast.mdx index e1a13a454..eae30ffa6 100644 --- a/libs/core/src/components/pds-toast/docs/pds-toast.mdx +++ b/libs/core/src/components/pds-toast/docs/pds-toast.mdx @@ -3,9 +3,12 @@ import * as stories from '../stories/pds-toast.stories.js'; import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components'; import { components } from '../../../../dist/docs.json'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Toast Toasts briefly surface feedback messages as non-blocking notifications that auto-dismiss after a short delay. They're used to confirm actions or report status without interrupting the user's flow. diff --git a/libs/core/src/components/pds-tooltip/docs/pds-tooltip.mdx b/libs/core/src/components/pds-tooltip/docs/pds-tooltip.mdx index a2505701c..13e1c5e08 100644 --- a/libs/core/src/components/pds-tooltip/docs/pds-tooltip.mdx +++ b/libs/core/src/components/pds-tooltip/docs/pds-tooltip.mdx @@ -3,9 +3,12 @@ import * as stories from '../stories/pds-tooltip.stories.js'; import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components'; import { components } from '../../../../dist/docs.json'; +import { StatusBadge } from '../../../stories/_helpers'; + + # Tooltip Tooltips display helpful popup text when users hover over or keyboard focus on an element.