@prioticket/design-system-web 1.0.0

package/COMPONENT-DOCUMENTATION.md

@@ -0,0 +1,608 @@
+# Prioticket Design System Web Components
+
+## Installation
+
+```bash
+npm install @prioticket/design-system-web
+```
+
+## NPM Registry Configuration
+
+```ini
+@prioticket:registry=https://gitlab.prioticket.dev/api/v4/projects/193/packages/npm/
+//gitlab.prioticket.dev/api/v4/projects/193/packages/npm/:_authToken=TcG8u2Ryebr6v3x3D19y
+```
+
+## Usage
+
+```typescript
+import { PdButton, PdCard, PdTextField } from '@prioticket/design-system-web';
+```
+
+## Components
+
+
+### src\components\pd-text-field
+
+**Tag:** `<src\components\text-field>`
+
+Component description not available
+
+#### Properties
+- `variant`: 'filled' | 'outlined'
+- `label`: any
+- `placeholder`: any
+- `value`: any
+- `supportingText`: any
+- `errorText`: any
+- `prefixText`: any
+- `suffixText`: any
+- `disabled`: any
+- `readonly`: any
+- `required`: any
+- `error`: any
+- `type`: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'textarea'
+- `rows`: any
+- `cols`: any
+- `leadingIcon`: any
+- `trailingIcon`: any
+- `maxlength`: any
+- `minlength`: any
+
+#### Events
+
+
+#### Example
+```html
+<src\components\pd-text-field></src\components\pd-text-field>
+```
+
+
+### src\components\pd-tabs
+
+**Tag:** `<src\components\tabs>`
+
+Component description not available
+
+#### Properties
+- `activeTabIndex`: any
+- `autoActivate`: any
+- `tabs`: TabData[]
+- `secondary`: any
+- `inlineIcon`: any
+- `icon`: any
+- `ariaLabel`: any
+
+#### Events
+
+
+#### Example
+```html
+<src\components\pd-tabs></src\components\pd-tabs>
+```
+
+
+### src\components\pd-switch
+
+**Tag:** `<src\components\switch>`
+
+Component description not available
+
+#### Properties
+- `selected`: any
+- `disabled`: any
+- `selectedIcon`: any
+- `unselectedIcon`: any
+- `showOnlySelectedIcon`: any
+- `name`: any
+- `value`: any
+- `ariaLabel`: any
+- `required`: any
+
+#### Events
+
+
+#### Example
+```html
+<src\components\pd-switch></src\components\pd-switch>
+```
+
+
+### src\components\pd-stepper
+
+**Tag:** `<src\components\stepper>`
+
+Component description not available
+
+#### Properties
+- `steps`: StepData[]
+- `currentStep`: any
+- `orientation`: 'horizontal' | 'vertical'
+- `linear`: any
+- `showContent`: any
+- `alternativeLabel`: any
+
+#### Events
+
+
+#### Example
+```html
+<src\components\pd-stepper></src\components\pd-stepper>
+```
+
+
+### src\components\pd-slider
+
+**Tag:** `<src\components\slider>`
+
+Component description not available
+
+#### Properties
+- `disabled`: any
+- `min`: any
+- `max`: any
+- `value`: any
+- `step`: any
+- `ticks`: any
+- `labeled`: any
+- `valueIndicator`: any
+- `valueStart`: any
+- `valueEnd`: any
+- `ariaLabel`: any
+- `ariaLabelStart`: any
+- `ariaLabelEnd`: any
+
+#### Events
+
+
+#### Example
+```html
+<src\components\pd-slider></src\components\pd-slider>
+```
+
+
+### src\components\pd-select
+
+**Tag:** `<src\components\select>`
+
+Component description not available
+
+#### Properties
+- `variant`: 'filled' | 'outlined'
+- `label`: any
+- `value`: any
+- `disabled`: any
+- `required`: any
+- `errorText`: any
+- `error`: any
+- `supportingText`: any
+- `options`: SelectOption[]
+- `leadingIcon`: any
+
+#### Events
+
+
+#### Example
+```html
+<src\components\pd-select></src\components\pd-select>
+```
+
+
+### src\components\pd-segmented-stepper
+
+**Tag:** `<src\components\segmented-stepper>`
+
+Component description not available
+
+#### Properties
+- `activeStep`: any
+- `completedSteps`: number[]
+- `size`: 'small' | 'medium' | 'large'
+- `disabled`: any
+- `allowStepNavigation`: any
+- `stepNumber`: any
+- `state`: 'pending' | 'active' | 'completed' | 'disabled'
+- `disabled`: any
+- `clickable`: any
+- `icon`: any
+
+#### Events
+- `stepchange`: Fired when the active step changes.
+- `stepcomplete`: Fired when a step is marked as completed.
+
+#### Example
+```html
+<src\components\pd-segmented-stepper></src\components\pd-segmented-stepper>
+```
+
+
+### src\components\pd-segmented-button
+
+**Tag:** `<src\components\segmented-button>`
+
+Component description not available
+
+#### Properties
+- `multiSelect`: any
+- `size`: 'small' | 'medium' | 'large'
+- `disabled`: any
+- `selectedValues`: string[]
+- `value`: any
+- `selected`: any
+- `disabled`: any
+- `icon`: any
+- `iconOnly`: any
+
+#### Events
+- `selectionchange`: Fired when the selection changes.
+
+#### Example
+```html
+<src\components\pd-segmented-button></src\components\pd-segmented-button>
+```
+
+
+### src\components\pd-radio
+
+**Tag:** `<src\components\radio>`
+
+Component description not available
+
+#### Properties
+- `checked`: any
+- `disabled`: any
+- `name`: any
+- `value`: any
+- `ariaLabel`: any
+- `ariaDescribedby`: any
+- `required`: any
+- `name`: any
+- `value`: any
+- `disabled`: any
+- `required`: any
+- `ariaLabel`: any
+- `ariaLabelledby`: any
+
+#### Events
+
+
+#### Example
+```html
+<src\components\pd-radio></src\components\pd-radio>
+```
+
+
+### src\components\pd-progress
+
+**Tag:** `<src\components\progress>`
+
+Component description not available
+
+#### Properties
+- `type`: 'linear' | 'circular'
+- `value`: any
+- `max`: any
+- `buffer`: any
+- `indeterminate`: any
+- `visible`: any
+- `size`: 'small' | 'medium' | 'large'
+- `ariaLabel`: any
+
+#### Events
+
+
+#### Example
+```html
+<src\components\pd-progress></src\components\pd-progress>
+```
+
+
+### src\components\pd-menu
+
+**Tag:** `<src\components\menu>`
+
+Component description not available
+
+#### Properties
+- `anchor`: any
+- `anchorElement`: any
+- `open`: any
+- `positioning`: 'absolute' | 'fixed' | 'document' | 'popover'
+- `anchorCorner`: 'end-start' | 'end-end' | 'start-start' | 'start-end'
+- `menuCorner`: 'end-start' | 'end-end' | 'start-start' | 'start-end'
+- `quick`: any
+- `hasOverflow`: any
+- `xOffset`: any
+- `yOffset`: any
+- `defaultFocus`: 'none' | 'list-root' | 'first-item' | 'last-item'
+- `stayOpenOnFocusout`: any
+- `stayOpenOnOutsideClick`: any
+- `skipRestoreFocus`: any
+
+#### Events
+
+
+#### Example
+```html
+<src\components\pd-menu></src\components\pd-menu>
+```
+
+
+### src\components\pd-menu-item
+
+**Tag:** `<src\components\menu-item>`
+
+Component description not available
+
+#### Properties
+- `disabled`: any
+- `type`: 'menuitem' | 'option' | 'button'
+- `href`: any
+- `target`: any
+- `keepOpen`: any
+- `selected`: any
+- `leadingIcon`: any
+- `trailingIcon`: any
+- `text`: any
+- `supportingText`: any
+
+#### Events
+- `close`: menu - Fired when the menu should be closed (usually on selection)
+
+#### Example
+```html
+<src\components\pd-menu-item></src\components\pd-menu-item>
+```
+
+
+### src\components\pd-list
+
+**Tag:** `<src\components\list>`
+
+Component description not available
+
+#### Properties
+- `role`: any
+- `tabindex`: any
+- `type`: 'text' | 'link' | 'button'
+- `headline`: any
+- `supportingText`: any
+- `trailingSupportingText`: any
+- `href`: any
+- `target`: any
+- `disabled`: any
+- `icon`: any
+- `trailingIcon`: any
+- `avatar`: any
+- `image`: any
+- `tabindex`: any
+- `inset`: any
+- `role`: any
+
+#### Events
+
+
+#### Example
+```html
+<src\components\pd-list></src\components\pd-list>
+```
+
+
+### src\components\pd-icon
+
+**Tag:** `<src\components\icon>`
+
+Component description not available
+
+#### Properties
+- `name`: any
+- `size`: 'small' | 'medium' | 'large'
+- `variant`: 'filled' | 'outlined' | 'round' | 'sharp' | 'two-tone'
+
+#### Events
+
+
+#### Example
+```html
+<src\components\pd-icon></src\components\pd-icon>
+```
+
+
+### src\components\pd-icon-button
+
+**Tag:** `<src\components\icon-button>`
+
+Component description not available
+
+#### Properties
+- `variant`: 'standard' | 'filled' | 'tonal' | 'outlined'
+- `icon`: any
+- `selectedIcon`: any
+- `disabled`: any
+- `toggle`: any
+- `selected`: any
+- `href`: any
+- `target`: any
+- `ariaLabel`: any
+- `ariaLabelSelected`: any
+
+#### Events
+
+
+#### Example
+```html
+<src\components\pd-icon-button></src\components\pd-icon-button>
+```
+
+
+### src\components\pd-fab
+
+**Tag:** `<src\components\fab>`
+
+Component description not available
+
+#### Properties
+- `variant`: 'surface' | 'primary' | 'secondary' | 'tertiary' | 'branded'
+- `size`: 'small' | 'medium' | 'large'
+- `icon`: any
+- `label`: any
+- `lowered`: any
+- `disabled`: any
+- `ariaLabel`: any
+
+#### Events
+
+
+#### Example
+```html
+<src\components\pd-fab></src\components\pd-fab>
+```
+
+
+### src\components\pd-expandable-card
+
+**Tag:** `<src\components\expandable-card>`
+
+Component description not available
+
+#### Properties
+- `variant`: 'elevated' | 'filled' | 'outlined'
+- `expanded`: any
+- `expandIcon`: any
+- `collapseIcon`: any
+- `headerClickable`: any
+
+#### Events
+- `expand`: Fired when the card is expanded
+- `collapse`: Fired when the card is collapsed
+
+#### Example
+```html
+<src\components\pd-expandable-card></src\components\pd-expandable-card>
+```
+
+
+### src\components\pd-dialog
+
+**Tag:** `<src\components\dialog>`
+
+Component description not available
+
+#### Properties
+- `open`: any
+- `size`: 'small' | 'medium' | 'large' | 'fullscreen'
+- `variant`: 'alert' | 'confirm' | 'form' | 'custom'
+- `headline`: any
+- `primaryAction`: any
+- `secondaryAction`: any
+- `closableByBackdrop`: any
+- `showCloseButton`: any
+
+#### Events
+- `open`: Fired when the dialog is opened.
+- `closed`: Fired when the dialog is closed.
+
+#### Example
+```html
+<src\components\pd-dialog></src\components\pd-dialog>
+```
+
+
+### src\components\pd-chip
+
+**Tag:** `<src\components\chip>`
+
+Component description not available
+
+#### Properties
+- `variant`: 'assist' | 'filter' | 'input' | 'suggestion'
+- `label`: any
+- `disabled`: any
+- `alwaysFocusable`: any
+- `hasIcon`: any
+- `icon`: any
+- `selected`: any
+- `removable`: any
+- `elevated`: any
+- `href`: any
+- `target`: any
+- `avatar`: any
+- `removeOnly`: any
+
+#### Events
+
+
+#### Example
+```html
+<src\components\pd-chip></src\components\pd-chip>
+```
+
+
+### src\components\pd-checkbox
+
+**Tag:** `<src\components\checkbox>`
+
+Component description not available
+
+#### Properties
+- `checked`: any
+- `indeterminate`: any
+- `disabled`: any
+- `required`: any
+- `value`: any
+- `name`: any
+- `label`: any
+- `touchTarget`: any
+
+#### Events
+
+
+#### Example
+```html
+<src\components\pd-checkbox></src\components\pd-checkbox>
+```
+
+
+### src\components\pd-card
+
+**Tag:** `<src\components\card>`
+
+Component description not available
+
+#### Properties
+- `variant`: 'elevated' | 'filled' | 'outlined'
+- `clickable`: any
+
+#### Events
+
+
+#### Example
+```html
+<src\components\pd-card></src\components\pd-card>
+```
+
+
+### src\components\pd-button
+
+**Tag:** `<src\components\button>`
+
+Component description not available
+
+#### Properties
+- `variant`: 'filled' | 'outlined' | 'text' | 'elevated' | 'tonal'
+- `size`: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'
+- `icon`: any
+- `iconTrailing`: any
+- `disabled`: any
+
+#### Events
+
+
+#### Example
+```html
+<src\components\pd-button></src\components\pd-button>
+```
+
+
+## Storybook
+View interactive documentation: https://68af3f22b44ad2acc02b3370-smrhgwrsuh.chromatic.com/