@porsche-design-system/components-react 4.5.0 → 4.6.0-rc.0

package/skill/references/components/p-tabs-bar/p-tabs-bar.md

@@ -0,0 +1,181 @@
+# p-tabs-bar
+
+The `p-tabs-bar` component is a styled button/link list for multiple purposes. You can use it with your framework router to ensure your **window location** updates on tab click, use it for **hash routing** and displaying content accordingly to the hash, as **skip navigation** to move on a longer page or to **change the state** of another element and therefore change the appearance of your content.
+
+The component does not handle the display of your content. If you use the component you have to manually care for the content to be rendered beneath. To help with this task the component triggers an event called `update` with the index of the active tab.
+
+If you intend to only change content on tab-click without location changes and you are fine that the content needs to be pre-rendered then we prepared a component which also handles the correct display of content according to the active tab. Have a look at the [Tabs](../p-tabs/p-tabs.md) component.
+
+It is a controlled component. This means it does not contain any internal state, and you are in full control over its behavior.
+
+> **Important note**
+>
+> For documentation purpose we use `<button>` tags in the examples below to make them clickable without changing the route. For route changes it is mandatory to use `<a>` tags with `href` in your application. And be aware of that it's not allowed to mix and match `<button>` with `<a>` tags as direct children in the component!
+
+Basic implementation is a tab bar with tabs to switch between the content. Just put `<button>` tags if you need to change e.g. the state on tab-click or `<a>` tags, if you also have to manipulate the window location, inside the `<p-tabs-bar>` component and it will handle all styling behaviors.
+
+In order to get notified when the active tabs change, you need to register an event listener for the `update` event which is emitted by `p-tabs-bar`.
+
+## Usage
+
+### Do:
+
+- Use as an anchor navigation to jump to a section on a longer page.
+- Use it to switch between different stages of content.
+- Use it to show different types of elements.
+
+### Don't:
+
+- Don't place more than six tabs within a group.
+- Don't use more than two words for a tab label whenever possible.
+- Don't use it for primary navigation.
+
+---
+
+## Related Component
+
+- [Tabs](../p-tabs/p-tabs.md)
+- [Pagination](../p-pagination/p-pagination.md)
+
+## Accessibility support
+
+### Keyboard
+
+#### Tabs Bar as a tabbed interface
+
+| Key / state | Function |
+| --- | --- |
+| `Tab` | - Moves focus to the active tab. - When the tab list contains the focus, moves focus to the next element in the tab sequence, which is the `tabpanel` element. |
+| `Right Arrow`, `Left Arrow` | - Moves focus to the next tab. - Activates the newly focused tab. - If focus is on the last tab, moves focus to the first tab. |
+| `Home`, `End` | - Moves focus to the first/last tab and activates it. |
+
+#### Tabs Bar as link list
+
+| Key / state | Function |
+| --- | --- |
+| `Tab`, `Shift-Tab` | Moves focus to next (or previous) focusable element. |
+| `Enter` | Activates the link. |
+
+### ARIA enhancements
+
+#### External **ARIA** provided by the `aria` property:
+
+| ARIA | Usage |
+| --- | --- |
+| `aria-label="STRING"` | Defines a string value that labels the tablist when used as a tabbed interface. |
+| `aria-description="STRING"` | Defines a string value that adds a more detailed description of the tablist. |
+
+The `aria` property applies only when the component is used as a **tabbed interface** with `<button>` children. It is not applied when the component is used as a **link list** with `<a>` children.
+
+#### Internal **ARIA** that is managed by the component:
+
+| ARIA | Usage |
+| --- | --- |
+| `role="tablist"` | Indicates that the element serves as a container for a set of tabs. |
+| `role="tab"` | Indicates the button serves as a tab control. |
+| `aria-selected="BOOLEAN"` | Indicates whether the tab is selected and whether its associated tabpanel is visible. |
+
+## Development considerations
+
+### Labelling
+
+When multiple tab bars appear on the same page, or when the purpose of the tabs is not clear from the visible tab labels alone, provide a descriptive accessible name for the tablist using the `aria` property, e.g.: `<p-tabs-bar aria="{ 'aria-label': 'Some label for the tablist', 'aria-description': 'Some description for the tablist' }">`.
+
+### ARIA enhancements if used as a tabbed interface
+
+The `p-tabs-bar` component is detached from the content (`tabpanel`) which belongs to the active tab. To be truly accessible you need to provide additional ARIA attributes, because every tab (`button`) needs an `aria-controls` attribute which points to the corresponding `id` of the `tabpanel`. The content placeholder needs the `role="tabpanel"` and the attribute `aria-labelledby` which points to the unique `id` of the corresponding tab (`button`).
+
+You must also take care of the **focus handling** of the `tabpanel`. Therefore, the active tab panel must have a `tabindex="0"` to receive keyboard focus and the focus indicator must be styled accordingly. Use the provided focus style like this:
+
+```html
+<p-tabs-bar
+  aria="{ 'aria-label': 'Some label for the tablist', 'aria-description': 'Some description for the tablist' }"
+  active-tab-index="0"
+>
+  <button type="button" id="tab-item-0" aria-controls="tab-panel-0">Tab One</button>
+  <button type="button" id="tab-item-1" aria-controls="tab-panel-1">Tab Two</button>
+  <button type="button" id="tab-item-2" aria-controls="tab-panel-2">Tab Three</button>
+</p-tabs-bar>
+<div id="tab-panel-0" role="tabpanel" tabindex="0" aria-labelledby="tab-item-0">
+  <p-text>Your content of Tab 1</p-text>
+</div>
+<div id="tab-panel-1" role="tabpanel" hidden tabindex="-1" aria-labelledby="tab-item-1">
+  <p-text>Your content of Tab 2</p-text>
+</div>
+<div id="tab-panel-2" role="tabpanel" hidden tabindex="-1" aria-labelledby="tab-item-2">
+  <p-text>Your content of Tab 3</p-text>
+</div>
+```
+
+```scss
+p-tabs-bar ~ [tabindex='0'][role='tabpanel'] {
+  @include pds-focus;
+}
+```
+
+### ARIA enhancements if used as a link list
+
+#### Route based navigation
+
+If the `p-tabs-bar` is used as a link list (navigation context), the semantics of that UI component changes completely - from a **tabbed interface** where content changes happen **on-site** to a **list of links** where content changes are **route-based**. Therefore, additional ARIA attributes **must not** be provided for tab identification. The `p-tabs-bar` component manages this also internally.
+
+To enhance accessibility even further, wrap the `p-tabs-bar` in a `<nav>` element with an `aria-label` attribute. Additionally, an `aria-current="page"` attribute should be provided to the active link.
+
+```html
+<nav aria-label="Label for the navigation">
+  <p-tabs-bar>
+    <a href="https://porsche.com/page-1" aria-current="page">Page One</a>
+    <a href="https://porsche.com/page-2">Page Two</a>
+    <a href="https://porsche.com/page-3">Page Three</a>
+  </p-tabs-bar>
+</nav>
+```
+
+#### In-page jump navigation
+
+If the `p-tabs-bar` is used as an in-page jump navigation, you should follow the same rules as for the route-based variant except that `aria-current="page"` should not be used.
+
+### Common do's and don'ts
+
+- **Do** pass tablist ARIA through the `aria` prop when using a tabbed interface.
+- **Do** wrap route-based navigation in `<nav>` with a descriptive `aria-label`.
+- **Do** wire `aria-controls`, `role="tabpanel"`, and `aria-labelledby` in the host application for tab interfaces.
+- **Don't** add tab semantics when the component is used as a link list for route-based navigation.
+
+## API
+
+### Properties
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `activeTabIndex` | `number | undefined` | `undefined` | Sets the zero-based index of the currently active tab. Pass `undefined` to render all tabs in an unselected state. |
+| `aria` | `TabsBarAriaAttribute` | `undefined` | Sets ARIA attributes on the tablist, such as `aria-label` and `aria-description`. |
+| `background` | `'canvas'` `'surface'` `'frosted'` `'none'` | `'none'` | Sets the background color of the tabs bar. Use `frosted` only when placed on top of images, videos, or gradients. |
+| `compact` | `boolean` | `undefined` | Reduces the tab height and padding for use in dense layouts where vertical space is limited. |
+| `size` | `'small'` `'medium'`<br>`BreakpointCustomizable<TabsBarSize>` | `'small'` | Sets the font size of the tab labels using the PDS typographic scale. Supports responsive breakpoint values. |
+| `weight` _(deprecated)_ | `'regular'` `'semi-bold'` | `'regular'` | @deprecated Will be removed in the next major release. Has no effect anymore. |
+
+### Events
+
+| Event | Type | Description |
+| --- | --- | --- |
+| `update` | `CustomEvent<TabsBarUpdateEventDetail>`<br>`{ activeTabIndex: number }` | Emitted when the user clicks a different tab, carrying the new `activeTabIndex` in the event detail. |
+
+### Controlled properties
+
+- `activeTabIndex` — a controlled prop: the component does **not** update it itself. Handle the `update` event and assign the new value to `activeTabIndex` yourself, or the change will not take effect.
+
+### Slots
+
+| Slot | Required | Allowed tag names | Description |
+| --- | --- | --- | --- |
+| _(default)_ | no | — | Default slot for the `button` or `a` tags which will be rendered as tabs. |
+
+## Examples
+
+| Example | When to use | File |
+| --- | --- | --- |
+| Default | Minimal default configuration. | [./examples/Default.tsx](./examples/Default.tsx) |
+| Links | If the `p-tabs-bar` is used as a link list (navigation context), the semantics of that UI component changes completely - from a **tabbed interface** where content changes happen **on-site** to a **list of links** where content changes are **route-based**. | [./examples/Links.tsx](./examples/Links.tsx) |
+| Gradient color | If the amount of tabs exceeds the viewport, the component renders arrow-buttons to help with horizontal scrolling. | [./examples/Gradient.tsx](./examples/Gradient.tsx) |
+| Labelling | Use the `aria` property to provide an accessible name and optional description for the tablist when the component is used as a tabbed interface with `<button>` children. | [./examples/Labelling.tsx](./examples/Labelling.tsx) |

package/skill/references/components/p-tag/examples/Default.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { PTag } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PTag>
+        Some label
+      </PTag>
+    </>
+  )
+}

package/skill/references/components/p-tag/examples/Multiline.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { PTag } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <div className="w-[100px]">
+        <PTag variant="success" className="whitespace-normal">
+          Some label with longer text wrapped in a narrow container
+        </PTag>
+      </div>
+    </>
+  )
+}

package/skill/references/components/p-tag/examples/SlottedButton.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { PTag } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <div className="flex flex-wrap gap-static-md">
+        <PTag icon="car" variant="primary">
+          <button type="button">
+            Variant primary
+          </button>
+        </PTag>
+        <PTag variant="secondary">
+          <button type="button">
+            Variant secondary
+          </button>
+        </PTag>
+        <PTag variant="info">
+          <button type="button">
+            Variant info
+          </button>
+        </PTag>
+        <PTag variant="warning">
+          <button type="button">
+            Variant warning
+          </button>
+        </PTag>
+        <PTag variant="success">
+          <button type="button">
+            Variant success
+          </button>
+        </PTag>
+        <PTag variant="error">
+          <button type="button">
+            Variant error
+          </button>
+        </PTag>
+      </div>
+    </>
+  )
+}

package/skill/references/components/p-tag/examples/SlottedLink.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { PTag } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <div className="flex flex-wrap gap-static-md">
+        <PTag icon="car" variant="primary">
+          <a href="https://porsche.com">
+            Variant primary
+          </a>
+        </PTag>
+        <PTag variant="secondary">
+          <a href="https://porsche.com">
+            Variant secondary
+          </a>
+        </PTag>
+        <PTag variant="info">
+          <a href="https://porsche.com">
+            Variant info
+          </a>
+        </PTag>
+        <PTag variant="warning">
+          <a href="https://porsche.com">
+            Variant warning
+          </a>
+        </PTag>
+        <PTag variant="success">
+          <a href="https://porsche.com">
+            Variant success
+          </a>
+        </PTag>
+        <PTag variant="error">
+          <a href="https://porsche.com">
+            Variant error
+          </a>
+        </PTag>
+      </div>
+    </>
+  )
+}

package/skill/references/components/p-tag/p-tag.md

@@ -0,0 +1,66 @@
+# p-tag
+
+`p-tag` is used to label, categorize, or organize items by using keywords that describe them.
+
+## Usage
+
+Use tags to label, categorize, or organize items using keywords that describe them.
+
+### Do:
+
+- Use to indicate or highlight a certain attribute of an item.
+- Use to show that content is mapped to one or multiple categories.
+- Use to indicate that a certain filter is active.
+- Use short labeling for easy scanning.
+- Have a large number of tags horizontally scrollable, swipeable, or navigable with arrows.
+- Have tags in a predefined space and move to the next line once they meet the boundary.
+- Use color themes such as success, neutral, warning, and error for better visual perception
+- Include icons to improve the faster perception.
+- Add a link for further explanation about the tag for better understandability (With modal).
+- Add a link for additional information that is not necessary for the task completion (With modal).
+
+### Don't:
+
+- Don't use more than two words (only if necessary).
+- Don't implement something else than a link or button.
+- Don't use Tags for navigation.
+
+## Accessibility support
+
+This component does not include any special accessibility features.
+
+## Development considerations
+
+Tags should communicate status or category in visible text. Do not rely on color or icon alone.
+
+### Common do's and don'ts
+
+- **Do** include descriptive text in the default slot.
+- **Do** use color and icon as supporting cues, not the only indicator.
+- **Don't** use an icon-only tag without visible text.
+
+## API
+
+### Properties
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `compact` | `boolean` | `false` | Reduces the tag's padding and height for use in dense layouts where vertical space is limited. |
+| `icon` | `'none'`<br>one of 290 icon names — see [icon names](references/icons.md) | `'none'` | Sets the icon displayed inside the tag alongside the label. Use `none` to render the tag without an icon. |
+| `iconSource` | `string` | `undefined` | Sets a URL to a custom SVG icon, overriding the built-in icon set when a brand-specific icon is needed. |
+| `variant` | `'primary'` `'secondary'` `'info'` `'info-frosted'` `'warning'` `'warning-frosted'` `'success'` `'success-frosted'` `'error'` `'error-frosted'` | `'secondary'` | Sets the visual style of the tag, which controls its background and text colors (e.g. `primary`, `secondary`, `notification-info`). |
+
+### Slots
+
+| Slot | Required | Allowed tag names | Description |
+| --- | --- | --- | --- |
+| _(default)_ | no | — | Default slot for the tag content. |
+
+## Examples
+
+| Example | When to use | File |
+| --- | --- | --- |
+| Default | Minimal default configuration. | [./examples/Default.tsx](./examples/Default.tsx) |
+| With slotted button | It is possible to add a `<button>` tag into the `p-tag` component. | [./examples/SlottedButton.tsx](./examples/SlottedButton.tsx) |
+| With slotted link | It is possible to add an `<a>` tag to the `p-tag` component. | [./examples/SlottedLink.tsx](./examples/SlottedLink.tsx) |
+| Multiline | The contents of the `p-tag` component are rendered with `white-space: nowrap` by default. | [./examples/Multiline.tsx](./examples/Multiline.tsx) |

package/skill/references/components/p-tag-dismissible/examples/Default.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { PTagDismissible } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PTagDismissible>
+        Some label
+      </PTagDismissible>
+    </>
+  )
+}

package/skill/references/components/p-tag-dismissible/p-tag-dismissible.md

@@ -0,0 +1,75 @@
+# p-tag-dismissible
+
+`p-tag-dismissible` is used in contexts where the user can actively remove a tag. It is often seen in filtering.
+
+## Usage
+
+Allows users to quickly refine the result of data they want to be presented on the page.
+
+### Do:
+
+- Use to show that a certain filter is active.
+- Use this component with a label if additional information is needed (e.g. category an attribute/filter refers to).
+
+### Don't:
+
+- Don't use it for other interactions than dismissing a selection.
+- Don't have long content that causes multiline.
+
+## Accessibility support
+
+### Keyboard
+
+| Key / state | Function |
+| --- | --- |
+| `Tab`, `Shift-Tab` | Moves focus to the next (or previous) focusable element. |
+| `Enter`, `Space` | Removes the element. |
+
+### ARIA enhancements
+
+#### External **ARIA** provided by the `aria` property:
+
+| ARIA | Usage |
+| --- | --- |
+| `aria-label` | Defines a string value that labels the interactive element. |
+
+#### Internal **ARIA** that is managed by the component:
+
+| ARIA | Usage |
+| --- | --- |
+| `aria-hidden="true"` | The "close" icon is hidden from assistive technologies. |
+
+## Development considerations
+
+### Focus handling
+
+Ensure that when a `p-tag-dismissible` is removed, the focus is set to the previous or next `p-tag-dismissible` or to another focusable element. This prevents losing the focus order.
+
+### Common do's and don'ts
+
+- **Do** provide a visible `label` that describes the tag content.
+- **Do** pass dismiss-button ARIA through the `aria` prop when the default action text is insufficient.
+- **Do** move focus to a sensible target after removing a tag.
+- **Don't** add native `aria-*` attributes directly on the component host.
+
+## API
+
+### Properties
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `aria` | `TagDismissibleAriaAttribute` | `undefined` | Sets ARIA attributes on the dismiss button element, for example use `aria-label` to provide a descriptive close action for screen readers. |
+| `compact` | `boolean` | `false` | Reduces the tag's padding and height for use in dense layouts where vertical space is limited. |
+| `label` | `string` | `undefined` | Sets the visible label text displayed inside the tag alongside the dismiss button. |
+
+### Slots
+
+| Slot | Required | Allowed tag names | Description |
+| --- | --- | --- | --- |
+| _(default)_ | no | — | Default slot for the tag content. |
+
+## Examples
+
+| Example | When to use | File |
+| --- | --- | --- |
+| Default | Minimal default configuration. | [./examples/Default.tsx](./examples/Default.tsx) |

package/skill/references/components/p-text/examples/Default.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { PText } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PText>
+        The quick brown fox jumps over the lazy dog
+      </PText>
+    </>
+  )
+}

package/skill/references/components/p-text/examples/Semantics.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { PText } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PText tag="blockquote">
+        The quick brown fox jumps over the lazy dog
+      </PText>
+
+      <PText>
+        <blockquote>
+          The quick brown fox jumps over the lazy dog
+        </blockquote>
+      </PText>
+    </>
+  )
+}

package/skill/references/components/p-text/examples/Size.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { PText } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PText className="text-[3rem]" size="inherit">
+        The quick brown fox jumps over the lazy dog
+      </PText>
+    </>
+  )
+}

package/skill/references/components/p-text/examples/SizeResponsive.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { PText } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PText size={{'base': 'sm', 'l': '2xl'}}>
+        The quick brown fox jumps over the lazy dog
+      </PText>
+    </>
+  )
+}

package/skill/references/components/p-text/p-text.md

@@ -0,0 +1,68 @@
+# p-text
+
+`p-text` is used to specify paragraph styling in documents.
+
+> **Recommendation**
+>
+> Although the component is very sophisticated, it's recommended (if possible) to use the corresponding utility classes of the "@porsche-design-system/components-{js | angular | react | vue}/tailwindcss" sub-package or any of the other styling solutions for best performance since way less DOM nodes are required to render. Further information can be found [here](../../styles/tailwindcss.md).
+
+## Usage
+
+p-text is used to specify paragraph styling
+
+### Do:
+
+- Use p-text for all running body copy, descriptions, and supporting text.
+- Default to text-small for standard paragraphs; scale up for intros or short content blocks.
+- Use text-xx-small for legal disclaimers or metadata.
+- Maintain spacing and alignment using the fluid grid and responsive typography.
+- Always use the predefined text styles to ensure readability and scalability.
+
+### Don't:
+
+- Don’t use p-text styles for section titles or visual emphasis—use p-heading or p-display.
+- Don’t apply unapproved font sizes, weights, or custom spacing.
+
+## Accessibility support
+
+This component does not include any special accessibility features.
+
+## Development considerations
+
+### Semantic markup
+
+Use the `tag` prop to choose the correct HTML element. Do not pick heading tags only for visual styling.
+
+### Common do's and don'ts
+
+- **Do** evaluate correct semantic meaning, e.g. use `tag="p"` for regular paragraphs.
+- **Don't** nest text components.
+
+## API
+
+### Properties
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `align` | `'start'` `'center'` `'end'` `'inherit'` | `'start'` | Text alignment of the text. Use 'start' for left-aligned text (in LTR), 'center' for centered, 'end' for right-aligned (in LTR), or 'inherit' to adopt the parent's alignment. |
+| `color` | `'primary'` `'contrast-higher'` `'contrast-high'` `'contrast-medium'` `'success'` `'warning'` `'error'` `'info'` `'inherit'` | `'primary'` | Text color of the text. Use 'primary' for default, 'contrast-higher' / 'contrast-high' / 'contrast-medium' for alternative emphasis levels, 'success' / 'warning' / 'error' / 'info' for status messages, or 'inherit' to adopt the parent's color. |
+| `ellipsis` | `boolean` | `false` | Adds an ellipsis to a single line of text if it overflows the container width. When enabled, the text is truncated to a single line with `text-overflow: ellipsis`. Cannot be combined with multi-line content. |
+| `hyphens` | `'none'` `'manual'` `'auto'` `'inherit'` | `'inherit'` | Controls the hyphenation behavior of the text. Use 'auto' to let the browser automatically hyphenate words at appropriate points, 'manual' to only hyphenate at manually inserted hyphenation points (e.g. `­`), 'none' to disable hyphenation entirely, or 'inherit' to adopt the parent's hyphenation setting. |
+| `size` | `'2xs'` `'xs'` `'sm'` `'md'` `'lg'` `'xl'` `'2xl'` `'3xl'` `'4xl'` `'5xl'` `'inherit'`<br>_deprecated:_ `'xx-small'` `'x-small'` `'small'` `'medium'` `'large'` `'x-large'`<br>`BreakpointCustomizable<TextSize>` | `'sm'` | Size of the text. Also defines the size for specific breakpoints, like {base: "sm", l: "md"}. You always need to provide a base value when doing this. Use 'inherit' to adopt the parent's font size. |
+| `tag` | `'p'` `'span'` `'div'` `'address'` `'blockquote'` `'figcaption'` `'cite'` `'time'` `'legend'` | `'p'` | Sets the HTML tag of the rendered element to ensure correct semantic meaning (e.g. 'p' for paragraphs, 'blockquote' for quotes, 'time' for dates). |
+| `weight` | `'normal'` `'semibold'` `'bold'`<br>_deprecated:_ `'regular'` `'semi-bold'` | `'normal'` | The font weight of the text. Use 'normal' for regular body text, 'semibold' for slightly emphasized text, or 'bold' for strong emphasis. |
+
+### Slots
+
+| Slot | Required | Allowed tag names | Description |
+| --- | --- | --- | --- |
+| _(default)_ | no | — | Default slot for the text to render. |
+
+## Examples
+
+| Example | When to use | File |
+| --- | --- | --- |
+| Default | Minimal default configuration. | [./examples/Default.tsx](./examples/Default.tsx) |
+| Static Size | There are predefined fluid text sizes for the text component which should cover most use cases. | [./examples/Size.tsx](./examples/Size.tsx) |
+| Responsive Size | The `size` property accepts a breakpoint object to render different text sizes per viewport. | [./examples/SizeResponsive.tsx](./examples/SizeResponsive.tsx) |
+| Semantics | To provide more contextual HTML semantics you can either pass them with the `tag` property or directly inside a slot. | [./examples/Semantics.tsx](./examples/Semantics.tsx) |

package/skill/references/components/p-text-list/examples/Default.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { PTextList, PTextListItem } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PTextList>
+        <PTextListItem>
+          The quick brown fox jumps over the lazy dog
+        </PTextListItem>
+        <PTextListItem>
+          The quick brown fox jumps over the lazy dog
+          <PTextList>
+            <PTextListItem>
+              The quick brown fox jumps over the lazy dog
+            </PTextListItem>
+            <PTextListItem>
+              The quick brown fox jumps over the lazy dog
+            </PTextListItem>
+          </PTextList>
+        </PTextListItem>
+        <PTextListItem>
+          The quick brown fox jumps over the lazy dog
+        </PTextListItem>
+      </PTextList>
+    </>
+  )
+}