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

package/skills/pds-knowledge-react/references/components/p-link-tile-product/examples/Default.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useState } from 'react';
+import { PLinkTileProduct, PTag, type LinkTileProductLikeEvent } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  const [liked, setLiked] = useState(false);
+
+  const onLike = (e: CustomEvent<LinkTileProductLikeEvent>) => {
+    setLiked(!e.detail.liked);
+  }
+
+  return (
+    <>
+      <PLinkTileProduct liked={liked} heading="Some product" price="718,00 €" priceOriginal="911,00 €" description="Some description" href="https://porsche.com" onLike={onLike}>
+        <PTag slot="header" color="background-base">
+          New
+        </PTag>
+        <img src="assets/placeholder_800x900.svg" width={800} height={900} alt="Some alt text" />
+      </PLinkTileProduct>
+    </>
+  )
+}

package/skills/pds-knowledge-react/references/components/p-link-tile-product/examples/FrameworkRouting.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useState } from 'react';
+import { PLinkTileProduct, type LinkTileProductLikeEvent } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  const [liked, setLiked] = useState(false);
+
+  const onLike = (e: CustomEvent<LinkTileProductLikeEvent>) => {
+    setLiked(!e.detail.liked);
+  }
+
+  return (
+    <>
+      <PLinkTileProduct liked={liked} heading="Some product" price="718,00 €" priceOriginal="911,00 €" description="Some description" onLike={onLike}>
+        <a slot="anchor" href="https://porsche.com">
+          Weekender, sale price 718,00 €, original price 
+          <s>
+            911,00 €
+          </s>
+        </a>
+        <img src="assets/placeholder_800x900.svg" width={800} height={900} alt="Some alt text" />
+      </PLinkTileProduct>
+    </>
+  )
+}

package/skills/pds-knowledge-react/references/components/p-link-tile-product/p-link-tile-product.md

@@ -0,0 +1,93 @@
+# p-link-tile-product
+
+> **Experimental:** This component is experimental — its API may change in any release. Avoid relying on it in production.
+
+> **Experimental Component**
+>
+> The `p-link-tile-product` component is experimental and might be changed or removed in a future release.
+
+The `p-link-tile-product` is a navigational component designed to showcase a featured product within a store. it offers the option to "like" the product, allowing you to easily add it to the users wishlist. Additionally, you can place a chip at the top to signal special features about the product, such as its novelty or exclusivity.
+
+> **Image Aspect Ratio**
+>
+> The image within the component has a fixed aspect ratio of 8:9. For optimal presentation, it is recommended that the supplied image adheres to the same aspect ratio of 8:9 and includes a transparent background.
+
+An `img` or `picture` element has to be available as a child of the `p-link-tile-product` component.
+
+The `heading` and `price` properties are required and a link must be provided, using either the `href` property or a [slotted link](./p-link-tile-product.md).
+
+## Usage
+
+### Do:
+
+- Use Link-Tile-Product to display a single product or within other products.
+- Use the heading prop only for the product name.
+- Use the price prop only for price and price reduction.
+- Use description prop only for VAT or other disclaimers according to the product.
+- Use only transparent images for the Link Tile Product.
+- Use product images with an aspect ratio of 8:9.
+- Use only product images with the same aspect ratio.
+- Use Link-Tile-Products with identical sizes in one view.
+- Use the header slot only for appropriate information such as "new" or "limited", and keep it short.
+- Use Link-Tile-Product in a grid with other products.
+- Use the likeButton prop to hide the likeButton when no wishlist is available.
+
+### Don't:
+
+- Do not manipulate product images. Keep them natural, with transparent backgrounds and sufficient contrast.
+- Don't integrate environment into the product image, no reflection, drop shadow, or other styling effects.
+- Don't alter the display of VAT when the display is requested, either show it for all products or don't.
+- Don't manipulate the likeButton, this position is only reserved for this function.
+- Don't have long product names.
+
+---
+
+## Related components
+
+- [Link Tile](../p-link-tile/p-link-tile.md)
+
+## Accessibility support
+
+Not yet considered due to experimental state.
+
+## API
+
+### Properties
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `aspectRatio` | `'3/4'` `'9/16'`<br>`BreakpointCustomizable<LinkTileProductAspectRatio>` | `'3/4'` | Sets the width-to-height ratio of the tile media area. Supports responsive breakpoint values. |
+| `description` | `string` | `undefined` | Sets an optional short description providing additional product details below the price. |
+| `heading` _(required)_ | `string` | `undefined` | Sets the product name displayed prominently at the top of the tile. |
+| `href` | `string` | `undefined` | Sets the URL the tile navigates to when clicked. Alternatively, provide a slotted anchor element. |
+| `likeButton` | `boolean` | `true` | Shows a like/bookmark button so users can save the product. |
+| `liked` | `boolean` | `false` | Reflects whether the product is currently liked — controls the filled state of the like button. |
+| `price` _(required)_ | `string` | `undefined` | Sets the current retail price of the product, displayed with or without a discount. |
+| `priceOriginal` | `string` | `undefined` | Sets the original recommended retail price shown with a strikethrough to indicate a discount. Requires `price` to be set. |
+| `rel` | `string` | `undefined` | Sets the `rel` attribute on the link (e.g. `noopener`). |
+| `target` | `'_self'` `'_blank'` `'_parent'` `'_top'` `'string'` | `'_self'` | Specifies where to open the linked URL (e.g. `_self`, `_blank`). |
+
+### Events
+
+| Event | Type | Description |
+| --- | --- | --- |
+| `like` | `CustomEvent<LinkTileProductLikeEventDetail>`<br>`{ liked: boolean }` | Emitted when the user clicks the like button, with the new liked state in the event detail. |
+
+### Controlled properties
+
+- `liked` — a controlled prop: the component does **not** update it itself. Handle the `like` event and assign the new value to `liked` yourself, or the change will not take effect.
+
+### Slots
+
+| Slot | Required | Allowed tag names | Description |
+| --- | --- | --- | --- |
+| `anchor` | no | — | Slotted anchor link which can be used instead of the `href` prop. Ensure the named slot is directly on the anchor element, without nesting. |
+| `header` | no | — | Shows special features about the product like novelty or exclusivity. Although you can pass in anything, it is recommended to use the `p-tag` component. |
+| _(default)_ | no | — | Default slot for the img or picture tag. |
+
+## Examples
+
+| Example | When to use | File |
+| --- | --- | --- |
+| Default | Minimal default configuration. | [./examples/Default.tsx](./examples/Default.tsx) |
+| Framework routing (anchor nesting) | To support framework routing you can provide the link as a slotted element by using the `anchor` slot instead of using the `href` property. | [./examples/FrameworkRouting.tsx](./examples/FrameworkRouting.tsx) |

package/skills/pds-knowledge-react/references/components/p-modal/accessibility.md

@@ -0,0 +1,80 @@
+# p-modal accessibility integration examples
+
+## Integration examples
+
+### ARIA on component host vs aria prop
+
+#### ❌ Anti-pattern
+
+```tsx
+<PButton aria-haspopup="dialog">
+  Details of product XYZ
+</PButton>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PButton aria={{'aria-haspopup': 'dialog'}}>
+  Details of product XYZ
+</PButton>
+```
+
+### Dialog label on component host vs header slot
+
+#### ❌ Anti-pattern
+
+```tsx
+<PModal aria-label="Details">
+  ...
+</PModal>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PModal>
+  <PHeading slot="header" tag="h2" size="lg">
+    Details of product XYZ
+  </PHeading>
+  ...
+</PModal>
+
+{/* or with aria prop when no visible header is shown */}
+
+<PModal aria={{'aria-label': 'Details of product XYZ'}}>
+  ...
+</PModal>
+```
+
+### Modal trigger without popup semantics or context
+
+#### ❌ Anti-pattern
+
+```tsx
+<PButton>
+  Open
+</PButton>
+
+<PModal>
+  <PHeading slot="header" tag="h2" size="lg">
+    Details
+  </PHeading>
+  ...
+</PModal>
+```
+
+#### ✅ Recommended
+
+```tsx
+<PButton aria={{'aria-haspopup': 'dialog'}}>
+  Details of product XYZ
+</PButton>
+
+<PModal>
+  <PHeading slot="header" tag="h2" size="lg">
+    Details of product XYZ
+  </PHeading>
+  ...
+</PModal>
+```

package/skills/pds-knowledge-react/references/components/p-modal/examples/AlertDialog.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useState } from 'react';
+import { PButton, PHeading, PModal, PText } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  const [open, setOpen] = useState(false);
+
+  const onClick = () => {
+    setOpen(true);
+  }
+  const onDismiss = () => {
+    setOpen(false);
+  }
+
+  return (
+    <>
+      <PButton type="button" aria={{'aria-haspopup': 'dialog'}} onClick={onClick}>
+        Open Modal
+      </PButton>
+
+      <PModal open={open} aria={{'role': 'alertdialog'}} disableBackdropClick={true} onDismiss={onDismiss}>
+        <PHeading slot="header" size="large" tag="h2">
+          Some important Heading
+        </PHeading>
+        <PText>
+          Some important Content
+        </PText>
+        <div slot="footer" role="group" className="flex flex-wrap gap-fluid-sm max-xs:flex-col">
+          <PButton type="button">
+            Accept
+          </PButton>
+          <PButton type="button" variant="secondary">
+            Deny
+          </PButton>
+        </div>
+      </PModal>
+    </>
+  )
+}

package/skills/pds-knowledge-react/references/components/p-modal/examples/CustomStyling.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useState } from 'react';
+import { PButton, PModal } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  const [open, setOpen] = useState(false);
+
+  const onClick = () => {
+    setOpen(true);
+  }
+  const onDismiss = () => {
+    setOpen(false);
+  }
+
+  return (
+    <>
+      <PButton type="button" aria={{'aria-haspopup': 'dialog'}} onClick={onClick}>
+        Open Modal
+      </PButton>
+
+      <PModal open={open} backdrop="shading" aria={{'aria-label': 'Some Label'}} className="[--p-modal-width:clamp(276px,45.25vw+131px,1000px)] [--p-modal-spacing-top:200px] [--p-modal-spacing-bottom:50px]" onDismiss={onDismiss}>
+        <img src="assets/porsche-992-carrera-s.jpg" className="-mt-(--ref-p-modal-pt) -mx-(--ref-p-modal-px) -mb-(--ref-p-modal-pb) max-w-(--p-modal-width) rounded-xl" />
+      </PModal>
+    </>
+  )
+}

package/skills/pds-knowledge-react/references/components/p-modal/examples/Default.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useState } from 'react';
+import { PButton, PHeading, PModal, PText } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  const [open, setOpen] = useState(false);
+
+  const onClick = () => {
+    setOpen(true);
+  }
+  const onDismiss = () => {
+    setOpen(false);
+  }
+
+  return (
+    <>
+      <PButton type="button" aria={{'aria-haspopup': 'dialog'}} onClick={onClick}>
+        Open Modal
+      </PButton>
+
+      <PModal open={open} aria={{'aria-label': 'Some Heading'}} onDismiss={onDismiss}>
+        <PHeading slot="header" size="large" tag="h2">
+          Some Heading
+        </PHeading>
+        <PText>
+          Some Content
+        </PText>
+        <div slot="footer" role="group" className="flex flex-wrap gap-fluid-sm max-xs:flex-col">
+          <PButton type="button">
+            Proceed
+          </PButton>
+          <PButton type="button" variant="secondary">
+            Cancel
+          </PButton>
+        </div>
+      </PModal>
+    </>
+  )
+}

package/skills/pds-knowledge-react/references/components/p-modal/examples/Scrollable.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useState } from 'react';
+import { PButton, PHeading, PModal, PText } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  const [open, setOpen] = useState(false);
+
+  const onClick = () => {
+    setOpen(true);
+  }
+  const onDismiss = () => {
+    setOpen(false);
+  }
+
+  return (
+    <>
+      <PButton type="button" aria={{'aria-haspopup': 'dialog'}} onClick={onClick}>
+        Open Modal
+      </PButton>
+
+      <PModal open={open} aria={{'aria-label': 'Some Heading'}} onDismiss={onDismiss}>
+        <PHeading slot="header" size="large" tag="h2">
+          Some Heading
+        </PHeading>
+        <PText>
+          Some Content Begin
+        </PText>
+        <div className="w-[10px] h-[120vh] bg-[deeppink]"></div>
+        <PText>
+          Some Content End
+        </PText>
+        <div slot="footer" role="group" className="flex flex-wrap gap-fluid-sm max-xs:flex-col">
+          <PButton type="button">
+            Proceed
+          </PButton>
+          <PButton type="button" variant="secondary">
+            Cancel
+          </PButton>
+        </div>
+      </PModal>
+    </>
+  )
+}

package/skills/pds-knowledge-react/references/components/p-modal/p-modal.md

@@ -0,0 +1,139 @@
+# p-modal
+
+The `p-modal` is a temporary overlay to focus the user's attention on one task while interactions with the underlying page are blocked. It is only used as highly disruptive modal notification to present important information until dismissed. Or as overlay to confirm critical user actions, such as confirming an irreversible choice. It should be used thoughtfully and sparingly.
+
+It is a controlled component. This grants flexible control over the modal's behavior especially whether it should stay open after user interaction like submission of a form.
+
+> **Scroll-lock**
+>
+> This component sets `overflow: hidden` on the body when opened in order to prevent background scrolling.
+>
+> This doesn't work completely reliable under iOS but is the most stable solution.
+>
+> Feel free to address this issue in an Open Source PR, if you can provide a better solution.
+>
+> **[Current implementation](https://github.com/porsche-design-system/porsche-design-system/blob/main/packages/components/src/utils/setScrollLock.ts)**
+
+Following **web standards**, the component uses the native `<dialog />` element internally which ensures proper focus handling including a **focus trap**. In addition, it's rendered on the `#top-layer` which ensures the element to be on top of the page independent of where `p-modal` is placed in the DOM hierarchy (`z-index` is not relevant anymore and won't have any effect).
+
+The most important property of `p-modal` is its `open` property. When it's set to `true` the modal will be visible. In order to get notified when the modal gets closed by clicking the `x` button, the backdrop or by pressing the `Escape` key you need to register an event listener for the `dismiss` event which is emitted by `p-modal`.
+
+The size of `p-modal` adjusts itself to the content with a predefined **min/max width** which aligns to the **[Porsche Grid](../../styles/tailwindcss.md)**.
+
+## Usage
+
+### Do:
+
+- Use Modals to display additional information or required steps without losing context.
+- Use Modals for confirmation before performing lengthy or dangerous actions.
+- Use default Modal for simple content.
+- Use full-width content and background overlay animation to draw user attention.
+- Provide multiple ways to dismiss the Modal but require an intentional choice.
+- Use scrolling only when necessary and try to keep content in a single view.
+- Adjust Modal size and alignment with the grid.
+- Use up to three actions in the action bar at the bottom of the Modal.
+- Follow button order and positioning guidelines.
+- Use feedback banner for any feedback related to the request.
+
+### Don't:
+
+- Don't use fullscreen Modals on desktop.
+- Don't use the Modal with more than three buttons.
+- Don't launch a Modal within a Modal.
+
+## Accessibility support
+
+The `Modal` component uses the native `dialog` element to provide a modal dialog which comes with browser-specific behavior. As a result, accessibility features may vary across different browsers.
+
+### Keyboard
+
+| Key / state | Function |
+| --- | --- |
+| `Tab`, `Shift-Tab` | Moves focus to the next (or previous) focusable element inside the dialog. Focus is trapped (browser behavior). |
+| `ESC` | Closes the dialog. |
+| `focus` on trigger element | The focus is returned to the trigger element after closing the dialog (browser behavior). |
+
+### ARIA enhancements
+
+#### External **ARIA** provided by the `aria` property:
+
+| ARIA | Usage |
+| --- | --- |
+| `aria-label` | Defines a string value that labels the dialog element. |
+| `role` | Defines the semantic of the dialog element (`dialog` or `alertdialog`). |
+
+#### Internal **ARIA** that is managed by the component:
+
+| ARIA | Usage |
+| --- | --- |
+| `aria-label="STRING"` | Defines the accessible name if no `aria` property is provided, uses the contents of the header slot and falls back to a fixed name. |
+
+## Development considerations
+
+To inform users that the trigger button opens a `dialog`, the `aria-haspopup` attribute must be set using the `aria` property.
+
+### Common do's and don'ts
+
+- **Do** use a semantic trigger (usually a button) with a meaningful accessible name.
+- **Do** set `aria-haspopup` through the trigger component `aria` prop when opening the modal.
+- **Do** ensure a meaningful title is available via the `header` slot or `aria` property.
+- **Don't** add raw host-level ARIA attributes as a workaround.
+- **Don't** use unclear trigger copy like "Open" when the destination is not obvious.
+
+## Integration examples
+
+See [accessibility integration examples](./accessibility.md) for paired anti-pattern and recommended implementations.
+
+## API
+
+### Properties
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `aria` | `ModalAriaAttribute` | `undefined` | Sets ARIA attributes on the dialog element for improved accessibility when no visible heading is present. |
+| `backdrop` | `'blur'` `'shading'` | `'blur'` | Sets the backdrop style. Use `blur` when the modal is opened by user interaction; use `shading` when opened automatically (e.g. Cookie Consent). |
+| `background` | `'canvas'` `'surface'` | `'canvas'` | Sets the background color of the modal panel (`canvas` or `surface`). |
+| `disableBackdropClick` | `boolean` | `false` | When enabled, clicking the backdrop will not close the modal. |
+| `dismissButton` | `boolean` | `true` | Shows a dismiss button in the modal header so the user can manually close it. |
+| `fullscreen` | `boolean`<br>`BreakpointCustomizable<boolean>` | `false` | Expands the modal to the full viewport size, intended for mobile use cases. Supports responsive breakpoint values. |
+| `open` _(required)_ | `boolean` | `false` | Controls whether the modal dialog is visible. |
+
+### Events
+
+| Event | Type | Description |
+| --- | --- | --- |
+| `dismiss` | `CustomEvent<void>` | Emitted when the user closes the modal via the dismiss button, backdrop click, or Escape key. |
+| `motionHiddenEnd` | `CustomEvent<ModalMotionHiddenEndEventDetail>`<br>`TransitionEvent` | Emitted after the modal's close transition completes and the dialog is fully hidden. |
+| `motionVisibleEnd` | `CustomEvent<ModalMotionVisibleEndEventDetail>`<br>`TransitionEvent` | Emitted after the modal's open transition completes and the dialog is fully visible. |
+
+### Controlled properties
+
+- `open` — a controlled prop: the component does **not** update it itself. Handle the `dismiss` event and assign the new value to `open` yourself, or the change will not take effect.
+
+### Slots
+
+| Slot | Required | Allowed tag names | Description |
+| --- | --- | --- | --- |
+| `header` | no | — | Renders a header section above the content area. |
+| _(default)_ | no | — | Default slot for the main content. |
+| `footer` | no | — | Shows a sticky footer section, flowing under the content area when scrollable. |
+
+### CSS Variables
+
+| CSS Variable | Default | Description |
+| --- | --- | --- |
+| `--p-modal-width` | `auto` | Width of the modal. |
+| `--p-modal-spacing-top` | `clamp(16px, 10vh, 192px)` | Spacing of the modal to the top. |
+| `--p-modal-spacing-bottom` | `clamp(16px, 10vh, 192px)` | Spacing of the modal to the bottom. |
+| `--ref-p-modal-pt` | — | Exposes the internally used padding-top of the Modal as read only CSS variable. When slotting e.g. a media container, this variable can be used to stretch the element to the top of the Modal. |
+| `--ref-p-modal-pb` | — | Exposes the internally used padding-bottom of the Modal as read only CSS variable. When slotting e.g. a media container, this variable can be used to stretch the element to the bottom of the Modal. |
+| `--ref-p-modal-px` | — | Exposes the internally used padding-inline of the Modal as read only CSS variable. When slotting e.g. a media container, this variable can be used to stretch the element to the full horizontal size of the Modal. |
+
+## Examples
+
+| Example | When to use | File |
+| --- | --- | --- |
+| Default | Minimal default configuration. | [./examples/Default.tsx](./examples/Default.tsx) |
+| Scrollable modal with sticky footer | If the modal's content does not fit within the available space, the content becomes scrollable and the footer area remains sticky. | [./examples/Scrollable.tsx](./examples/Scrollable.tsx) |
+| Modal as alert dialog | The `p-modal` component can be used as an alert dialog. | [./examples/AlertDialog.tsx](./examples/AlertDialog.tsx) |
+| Custom styling | The modal component has some values that can be overridden via CSS custom properties (aka CSS variables). | [./examples/CustomStyling.tsx](./examples/CustomStyling.tsx) |

package/skills/pds-knowledge-react/references/components/p-model-signature/examples/CustomStyling.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { PModelSignature } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PModelSignature color="inherit" className="text-info"></PModelSignature>
+
+      <PModelSignature className="[--p-model-signature-width:auto] [--p-model-signature-height:50px] block"></PModelSignature>
+
+      <PModelSignature className="[--p-model-signature-width:50px] [--p-model-signature-height:auto] block"></PModelSignature>
+    </>
+  )
+}

package/skills/pds-knowledge-react/references/components/p-model-signature/examples/Default.tsx

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

package/skills/pds-knowledge-react/references/components/p-model-signature/examples/MaskBlendMode.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { PModelSignature } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <div className="isolate bg-[#00aa3680] inline-block p-static-lg">
+        <PModelSignature color="contrast-medium" safeZone={false} className="mix-blend-overlay"></PModelSignature>
+      </div>
+
+      <div className="isolate bg-[#f2f2f280] inline-block p-static-lg">
+        <PModelSignature color="contrast-medium" safeZone={false} className="mix-blend-overlay"></PModelSignature>
+      </div>
+
+      <div className="isolate bg-[#1f1f1f80] inline-block p-static-lg">
+        <PModelSignature color="contrast-medium" safeZone={false} className="mix-blend-overlay"></PModelSignature>
+      </div>
+
+      <div className="isolate bg-[#c5004280] inline-block p-static-lg">
+        <PModelSignature color="contrast-medium" safeZone={false} className="mix-blend-overlay"></PModelSignature>
+      </div>
+
+      <div className="isolate bg-[#e1d4a480] inline-block p-static-lg">
+        <PModelSignature color="contrast-medium" safeZone={false} className="mix-blend-overlay"></PModelSignature>
+      </div>
+
+      <div className="isolate bg-[#0099e080] inline-block p-static-lg">
+        <PModelSignature color="contrast-medium" safeZone={false} className="mix-blend-overlay"></PModelSignature>
+      </div>
+    </>
+  )
+}

package/skills/pds-knowledge-react/references/components/p-model-signature/examples/MaskImage.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { PModelSignature } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PModelSignature safeZone={false} className="[--p-model-signature-width:auto]">
+        <img src="assets/dessert.jpg" alt="Dessert" />
+      </PModelSignature>
+    </>
+  )
+}

package/skills/pds-knowledge-react/references/components/p-model-signature/examples/MaskVideo.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { PModelSignature } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PModelSignature safeZone={false} className="[--p-model-signature-width:auto]">
+        <video poster="assets/ocean.jpg" src="assets/ocean.mp4" autoPlay={true} playsInline={true} loop={true} muted={true}></video>
+      </PModelSignature>
+    </>
+  )
+}

package/skills/pds-knowledge-react/references/components/p-model-signature/examples/SafeZone.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { PModelSignature } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <div className="bg-[#ff000033] inline-block me-static-md mt-static-md">
+        <PModelSignature safeZone={false} model="718"></PModelSignature>
+      </div>
+
+      <div className="bg-[#ff000033] inline-block me-static-md mt-static-md">
+        <PModelSignature safeZone={false} model="911"></PModelSignature>
+      </div>
+
+      <div className="bg-[#ff000033] inline-block me-static-md mt-static-md">
+        <PModelSignature safeZone={false} model="boxster"></PModelSignature>
+      </div>
+
+      <div className="bg-[#ff000033] inline-block me-static-md mt-static-md">
+        <PModelSignature safeZone={false} model="cayenne"></PModelSignature>
+      </div>
+
+      <div className="bg-[#ff000033] inline-block me-static-md mt-static-md">
+        <PModelSignature safeZone={false} model="cayman"></PModelSignature>
+      </div>
+
+      <div className="bg-[#ff000033] inline-block me-static-md mt-static-md">
+        <PModelSignature safeZone={false} model="gt3-rs"></PModelSignature>
+      </div>
+
+      <div className="bg-[#ff000033] inline-block me-static-md mt-static-md">
+        <PModelSignature safeZone={false} model="gt3"></PModelSignature>
+      </div>
+
+      <div className="bg-[#ff000033] inline-block me-static-md mt-static-md">
+        <PModelSignature safeZone={false} model="gts"></PModelSignature>
+      </div>
+
+      <div className="bg-[#ff000033] inline-block me-static-md mt-static-md">
+        <PModelSignature safeZone={false} model="macan"></PModelSignature>
+      </div>
+
+      <div className="bg-[#ff000033] inline-block me-static-md mt-static-md">
+        <PModelSignature safeZone={false} model="panamera"></PModelSignature>
+      </div>
+
+      <div className="bg-[#ff000033] inline-block me-static-md mt-static-md">
+        <PModelSignature safeZone={false} model="taycan"></PModelSignature>
+      </div>
+
+      <div className="bg-[#ff000033] inline-block me-static-md mt-static-md">
+        <PModelSignature safeZone={false} model="turbo-s"></PModelSignature>
+      </div>
+
+      <div className="bg-[#ff000033] inline-block me-static-md mt-static-md">
+        <PModelSignature safeZone={false} model="turbo"></PModelSignature>
+      </div>
+    </>
+  )
+}