@porsche-design-system/components-react 3.12.0 → 3.13.0-rc.0

package/CHANGELOG.md

@@ -14,14 +14,27 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [3.13.0-rc.0] - 2024-02-19
+
+#### Added
+
+- `Link Tile Product`: Prop `price-original` to be able to visualize sale and original price
+  ([#3040](https://github.com/porsche-design-system/porsche-design-system/pull/3040))
+
+#### Changed
+
+- Validation of `getInitialStyles()` partial is temporarily disabled
+  ([#3049](https://github.com/porsche-design-system/porsche-design-system/pull/3049))
+
 ### [3.12.0] - 2024-02-12
 
 ### [3.12.0-rc.1] - 2024-02-08
 
 #### Fixed
 
-- `Checkbox Wrapper`, `Radio Button Wrapper`: Safari visually reflects input status (checked/unchecked) when 
-  used in another Shadow DOM or changed programmatically ([#3028](https://github.com/porsche-design-system/porsche-design-system/pull/3028))
+- `Checkbox Wrapper`, `Radio Button Wrapper`: Safari visually reflects input status (checked/unchecked) when used in
+  another Shadow DOM or changed programmatically
+  ([#3028](https://github.com/porsche-design-system/porsche-design-system/pull/3028))
 
 ### [3.12.0-rc.0] - 2024-02-05
 
@@ -33,8 +46,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 #### Changed
 
 - `Icon`: Visual appearance of `information-filled`, `information`, `success-filled`, `success`, `bookmark`, `compare`,
-  `configurate`, `heart-filled`, `heart`, `menu-lines`, `success`, `search`, `locate`, `star`, `shopping-bag-filled`, 
-  `shopping-bag`, `user-filled` and `user` ([#3025](https://github.com/porsche-design-system/porsche-design-system/pull/3025))
+  `configurate`, `heart-filled`, `heart`, `menu-lines`, `success`, `search`, `locate`, `star`, `shopping-bag-filled`,
+  `shopping-bag`, `user-filled` and `user`
+  ([#3025](https://github.com/porsche-design-system/porsche-design-system/pull/3025))
 - All components (expect some form elements) have improved focus styling based on `:focus-visible`
   ([#3011](https://github.com/porsche-design-system/porsche-design-system/pull/3011))
 - Several components are using CSS property `inset|inset-inline|inset-block` instead of `top|bottom|left|right` for

package/cjs/lib/components/link-tile-product.wrapper.cjs

@@ -6,14 +6,14 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PLinkTileProduct = react.forwardRef(({ aspectRatio = '3:4', description, heading, href, likeButton = true, liked = false, onLike, price, rel, target = '_self', theme, className, ...rest }, ref) => {
+const PLinkTileProduct = react.forwardRef(({ aspectRatio = '3:4', description, heading, href, likeButton = true, liked = false, onLike, price, priceOriginal, rel, target = '_self', theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'like', onLike);
     const WebComponentTag = hooks.usePrefix('p-link-tile-product');
-    const propsToSync = [aspectRatio, description, heading, href, likeButton, liked, price, rel, target, theme || hooks.useTheme()];
+    const propsToSync = [aspectRatio, description, heading, href, likeButton, liked, price, priceOriginal, rel, target, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aspectRatio', 'description', 'heading', 'href', 'likeButton', 'liked', 'price', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aspectRatio', 'description', 'heading', 'href', 'likeButton', 'liked', 'price', 'priceOriginal', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/link-tile-product.wrapper.d.ts

@@ -6,11 +6,11 @@ export type PLinkTileProductProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     aspectRatio?: BreakpointCustomizable<LinkTileProductAspectRatio>;
     /**
-     * Additional product description
+     * Additional product description.
      */
     description?: string;
     /**
-     * Product heading
+     * Product heading.
      */
     heading: string;
     /**
@@ -30,9 +30,13 @@ export type PLinkTileProductProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     onLike?: (event: CustomEvent<LinkTileProductLikeEventDetail>) => void;
     /**
-     * Product price
+     * Product retail price (with or without discount).
      */
     price: string;
+    /**
+     * Shows original price (recommended retail price) with line-through. Needs prop "price" to be defined, otherwise this prop has no effect.
+     */
+    priceOriginal?: string;
     /**
      * Specifies the relationship of the target object to the link object.
      */
@@ -52,11 +56,11 @@ export declare const PLinkTileProduct: import("react").ForwardRefExoticComponent
      */
     aspectRatio?: BreakpointCustomizable<LinkTileProductAspectRatio> | undefined;
     /**
-     * Additional product description
+     * Additional product description.
      */
     description?: string | undefined;
     /**
-     * Product heading
+     * Product heading.
      */
     heading: string;
     /**
@@ -76,9 +80,13 @@ export declare const PLinkTileProduct: import("react").ForwardRefExoticComponent
      */
     onLike?: ((event: CustomEvent<LinkTileProductLikeEventDetail>) => void) | undefined;
     /**
-     * Product price
+     * Product retail price (with or without discount).
      */
     price: string;
+    /**
+     * Shows original price (recommended retail price) with line-through. Needs prop "price" to be defined, otherwise this prop has no effect.
+     */
+    priceOriginal?: string | undefined;
     /**
      * Specifies the relationship of the target object to the link object.
      */

package/esm/lib/components/link-tile-product.wrapper.mjs

@@ -4,14 +4,14 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PLinkTileProduct = forwardRef(({ aspectRatio = '3:4', description, heading, href, likeButton = true, liked = false, onLike, price, rel, target = '_self', theme, className, ...rest }, ref) => {
+const PLinkTileProduct = forwardRef(({ aspectRatio = '3:4', description, heading, href, likeButton = true, liked = false, onLike, price, priceOriginal, rel, target = '_self', theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'like', onLike);
     const WebComponentTag = usePrefix('p-link-tile-product');
-    const propsToSync = [aspectRatio, description, heading, href, likeButton, liked, price, rel, target, theme || useTheme()];
+    const propsToSync = [aspectRatio, description, heading, href, likeButton, liked, price, priceOriginal, rel, target, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aspectRatio', 'description', 'heading', 'href', 'likeButton', 'liked', 'price', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aspectRatio', 'description', 'heading', 'href', 'likeButton', 'liked', 'price', 'priceOriginal', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.12.0",
+  "version": "3.13.0-rc.0",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.12.0"
+    "@porsche-design-system/components-js": "3.13.0-rc.0"
   },
   "peerDependencies": {
     "react": ">=17.0.0 <19.0.0",

package/ssr/cjs/components/dist/styles/esm/styles-entry.cjs

@@ -6598,9 +6598,9 @@ const getMultilineEllipsis = (lineClamp) => {
         overflow: 'hidden',
     };
 };
-const getComponentCss$D = (hasLikeButton, hasSlottedAnchor, aspectRatio, theme) => {
-    const { primaryColor, contrastHighColor, backgroundSurfaceColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, contrastHighColor: contrastHighColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, } = getThemedColors('dark');
+const getComponentCss$D = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, hasDescription, aspectRatio, theme) => {
+    const { primaryColor, contrastHighColor, contrastMediumColor, backgroundSurfaceColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, contrastHighColor: contrastHighColorDark, contrastMediumColor: contrastMediumColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, } = getThemedColors('dark');
     return getCss({
         '@global': {
             ':host': {
@@ -6638,6 +6638,14 @@ const getComponentCss$D = (hasLikeButton, hasSlottedAnchor, aspectRatio, theme)
                     },
                 },
             }),
+            ...(hasPriceOriginal && {
+                s: {
+                    color: contrastMediumColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        color: contrastMediumColorDark,
+                    }),
+                },
+            }),
         },
         root: {
             display: 'flex',
@@ -6696,25 +6704,35 @@ const getComponentCss$D = (hasLikeButton, hasSlottedAnchor, aspectRatio, theme)
             textAlign: 'center',
         },
         heading: {
+            margin: '0 0 2px', // ua-style reset
             ...headingSmallStyle,
             ...fontHyphenationStyle,
             ...getMultilineEllipsis(3),
-            margin: '0 0 2px',
         },
         price: {
-            ...textXSmallStyle,
-            ...getMultilineEllipsis(2),
-            margin: 0, // ua-style reset
-        },
-        description: {
-            ...textXXSmallStyle,
-            ...getMultilineEllipsis(2),
             margin: 0, // ua-style reset
-            color: contrastHighColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                color: contrastHighColorDark,
+            ...textXSmallStyle,
+            ...(hasPriceOriginal && {
+                display: 'flex',
+                flexWrap: 'wrap',
+                justifyContent: 'center',
+                columnGap: spacingFluidXSmall,
             }),
         },
+        ...(hasDescription && {
+            description: {
+                margin: 0, // ua-style reset
+                ...textXXSmallStyle,
+                ...getMultilineEllipsis(2),
+                color: contrastHighColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: contrastHighColorDark,
+                }),
+            },
+        }),
+        ...(hasPriceOriginal && {
+            'sr-only': getHiddenTextJssStyle(),
+        }),
     });
 };
 

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/link-tile-product.wrapper.cjs

@@ -7,14 +7,14 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var linkTileProduct = require('../dsr-components/link-tile-product.cjs');
 
-const PLinkTileProduct = react.forwardRef(({ aspectRatio = '3:4', description, heading, href, likeButton = true, liked = false, onLike, price, rel, target = '_self', theme, className, children, ...rest }, ref) => {
+const PLinkTileProduct = react.forwardRef(({ aspectRatio = '3:4', description, heading, href, likeButton = true, liked = false, onLike, price, priceOriginal, rel, target = '_self', theme, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'like', onLike);
     const WebComponentTag = hooks.usePrefix('p-link-tile-product');
-    const propsToSync = [aspectRatio, description, heading, href, likeButton, liked, price, rel, target, theme || hooks.useTheme()];
+    const propsToSync = [aspectRatio, description, heading, href, likeButton, liked, price, priceOriginal, rel, target, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aspectRatio', 'description', 'heading', 'href', 'likeButton', 'liked', 'price', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aspectRatio', 'description', 'heading', 'href', 'likeButton', 'liked', 'price', 'priceOriginal', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -25,7 +25,7 @@ const PLinkTileProduct = react.forwardRef(({ aspectRatio = '3:4', description, h
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(linkTileProduct.DSRLinkTileProduct, { aspectRatio, description, heading, href, likeButton, liked, price, rel, target, theme: theme || hooks.useTheme(), children })),
+                children: (jsxRuntime.jsx(linkTileProduct.DSRLinkTileProduct, { aspectRatio, description, heading, href, likeButton, liked, price, priceOriginal, rel, target, theme: theme || hooks.useTheme(), children })),
             }
             : {
                 children,

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-tile-product.cjs

@@ -84,8 +84,8 @@ class DSRLinkTileProduct extends react.Component {
         const headingId = 'heading';
         const priceId = 'price';
         const descriptionId = 'description';
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getLinkTileProductCss(this.props.likeButton, !this.props.href, this.props.aspectRatio, this.props.theme)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [this.props.href ? (jsxRuntime.jsx("a", { className: "anchor", href: this.props.href, target: this.props.target, rel: this.props.rel, "aria-labelledby": `${headingId} ${priceId}`, "aria-describedby": `${headerId} ${descriptionId}` })) : (jsxRuntime.jsx("slot", { name: utilsEntry.anchorSlot })), jsxRuntime.jsxs("div", { id: headerId, className: "header", children: [jsxRuntime.jsx("slot", { name: utilsEntry.headerSlot }), this.props.likeButton && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "button", type: "button", icon: this.props.liked ? 'heart-filled' : 'heart', hideLabel: true, theme: this.props.theme, children: this.props.liked ? 'Remove from wishlist' : 'Add to wishlist' }))] }), jsxRuntime.jsx("div", { className: "image", children: jsxRuntime.jsx("slot", {}) }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("h3", { id: headingId, className: "heading", children: this.props.heading }), jsxRuntime.jsx("p", { id: priceId, className: "price", children: this.props.price }), jsxRuntime.jsx("p", { id: descriptionId, className: "description", children: this.props.description })] })] })] }), this.props.children] }));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getLinkTileProductCss(this.props.likeButton, !this.props.href, !!this.props.priceOriginal, !!this.props.description, this.props.aspectRatio, this.props.theme)));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [this.props.href ? (jsxRuntime.jsx("a", { className: "anchor", href: this.props.href, target: this.props.target, rel: this.props.rel, "aria-labelledby": `${headingId} ${priceId}`, "aria-describedby": `${headerId} ${descriptionId}` })) : (jsxRuntime.jsx("slot", { name: utilsEntry.anchorSlot })), jsxRuntime.jsxs("div", { id: headerId, className: "header", children: [jsxRuntime.jsx("slot", { name: utilsEntry.headerSlot }), this.props.likeButton && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "button", type: "button", icon: this.props.liked ? 'heart-filled' : 'heart', hideLabel: true, theme: this.props.theme, children: this.props.liked ? 'Remove from wishlist' : 'Add to wishlist' }))] }), jsxRuntime.jsx("div", { className: "image", children: jsxRuntime.jsx("slot", {}) }), jsxRuntime.jsxs("div", { className: "wrapper", children: [this.props.heading && (jsxRuntime.jsx("h3", { id: headingId, className: "heading", children: this.props.heading })), this.props.price && (jsxRuntime.jsx("p", { id: priceId, className: "price", children: this.props.priceOriginal ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "sr-only", children: "sale price" }), this.props.price, jsxRuntime.jsx("span", { className: "sr-only", children: "original price" }), jsxRuntime.jsx("s", { children: this.props.priceOriginal })] })) : (this.props.price) })), this.props.description && (jsxRuntime.jsx("p", { id: descriptionId, className: "description", children: this.props.description }))] })] })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/components/dist/styles/esm/styles-entry.mjs

@@ -6596,9 +6596,9 @@ const getMultilineEllipsis = (lineClamp) => {
         overflow: 'hidden',
     };
 };
-const getComponentCss$D = (hasLikeButton, hasSlottedAnchor, aspectRatio, theme) => {
-    const { primaryColor, contrastHighColor, backgroundSurfaceColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, contrastHighColor: contrastHighColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, } = getThemedColors('dark');
+const getComponentCss$D = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, hasDescription, aspectRatio, theme) => {
+    const { primaryColor, contrastHighColor, contrastMediumColor, backgroundSurfaceColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, contrastHighColor: contrastHighColorDark, contrastMediumColor: contrastMediumColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, } = getThemedColors('dark');
     return getCss({
         '@global': {
             ':host': {
@@ -6636,6 +6636,14 @@ const getComponentCss$D = (hasLikeButton, hasSlottedAnchor, aspectRatio, theme)
                     },
                 },
             }),
+            ...(hasPriceOriginal && {
+                s: {
+                    color: contrastMediumColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        color: contrastMediumColorDark,
+                    }),
+                },
+            }),
         },
         root: {
             display: 'flex',
@@ -6694,25 +6702,35 @@ const getComponentCss$D = (hasLikeButton, hasSlottedAnchor, aspectRatio, theme)
             textAlign: 'center',
         },
         heading: {
+            margin: '0 0 2px', // ua-style reset
             ...headingSmallStyle,
             ...fontHyphenationStyle,
             ...getMultilineEllipsis(3),
-            margin: '0 0 2px',
         },
         price: {
-            ...textXSmallStyle,
-            ...getMultilineEllipsis(2),
-            margin: 0, // ua-style reset
-        },
-        description: {
-            ...textXXSmallStyle,
-            ...getMultilineEllipsis(2),
             margin: 0, // ua-style reset
-            color: contrastHighColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                color: contrastHighColorDark,
+            ...textXSmallStyle,
+            ...(hasPriceOriginal && {
+                display: 'flex',
+                flexWrap: 'wrap',
+                justifyContent: 'center',
+                columnGap: spacingFluidXSmall,
             }),
         },
+        ...(hasDescription && {
+            description: {
+                margin: 0, // ua-style reset
+                ...textXXSmallStyle,
+                ...getMultilineEllipsis(2),
+                color: contrastHighColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: contrastHighColorDark,
+                }),
+            },
+        }),
+        ...(hasPriceOriginal && {
+            'sr-only': getHiddenTextJssStyle(),
+        }),
     });
 };
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/link-tile-product.wrapper.mjs

@@ -5,14 +5,14 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
 import { syncRef } from '../../utils.mjs';
 import { DSRLinkTileProduct } from '../dsr-components/link-tile-product.mjs';
 
-const PLinkTileProduct = forwardRef(({ aspectRatio = '3:4', description, heading, href, likeButton = true, liked = false, onLike, price, rel, target = '_self', theme, className, children, ...rest }, ref) => {
+const PLinkTileProduct = forwardRef(({ aspectRatio = '3:4', description, heading, href, likeButton = true, liked = false, onLike, price, priceOriginal, rel, target = '_self', theme, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'like', onLike);
     const WebComponentTag = usePrefix('p-link-tile-product');
-    const propsToSync = [aspectRatio, description, heading, href, likeButton, liked, price, rel, target, theme || useTheme()];
+    const propsToSync = [aspectRatio, description, heading, href, likeButton, liked, price, priceOriginal, rel, target, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aspectRatio', 'description', 'heading', 'href', 'likeButton', 'liked', 'price', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aspectRatio', 'description', 'heading', 'href', 'likeButton', 'liked', 'price', 'priceOriginal', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -23,7 +23,7 @@ const PLinkTileProduct = forwardRef(({ aspectRatio = '3:4', description, heading
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRLinkTileProduct, { aspectRatio, description, heading, href, likeButton, liked, price, rel, target, theme: theme || useTheme(), children })),
+                children: (jsx(DSRLinkTileProduct, { aspectRatio, description, heading, href, likeButton, liked, price, priceOriginal, rel, target, theme: theme || useTheme(), children })),
             }
             : {
                 children,

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-tile-product.mjs

@@ -82,8 +82,8 @@ class DSRLinkTileProduct extends Component {
         const headingId = 'heading';
         const priceId = 'price';
         const descriptionId = 'description';
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$D(this.props.likeButton, !this.props.href, this.props.aspectRatio, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [this.props.href ? (jsx("a", { className: "anchor", href: this.props.href, target: this.props.target, rel: this.props.rel, "aria-labelledby": `${headingId} ${priceId}`, "aria-describedby": `${headerId} ${descriptionId}` })) : (jsx("slot", { name: anchorSlot })), jsxs("div", { id: headerId, className: "header", children: [jsx("slot", { name: headerSlot }), this.props.likeButton && (jsx(PButtonPure, { className: "button", type: "button", icon: this.props.liked ? 'heart-filled' : 'heart', hideLabel: true, theme: this.props.theme, children: this.props.liked ? 'Remove from wishlist' : 'Add to wishlist' }))] }), jsx("div", { className: "image", children: jsx("slot", {}) }), jsxs("div", { className: "wrapper", children: [jsx("h3", { id: headingId, className: "heading", children: this.props.heading }), jsx("p", { id: priceId, className: "price", children: this.props.price }), jsx("p", { id: descriptionId, className: "description", children: this.props.description })] })] })] }), this.props.children] }));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$D(this.props.likeButton, !this.props.href, !!this.props.priceOriginal, !!this.props.description, this.props.aspectRatio, this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [this.props.href ? (jsx("a", { className: "anchor", href: this.props.href, target: this.props.target, rel: this.props.rel, "aria-labelledby": `${headingId} ${priceId}`, "aria-describedby": `${headerId} ${descriptionId}` })) : (jsx("slot", { name: anchorSlot })), jsxs("div", { id: headerId, className: "header", children: [jsx("slot", { name: headerSlot }), this.props.likeButton && (jsx(PButtonPure, { className: "button", type: "button", icon: this.props.liked ? 'heart-filled' : 'heart', hideLabel: true, theme: this.props.theme, children: this.props.liked ? 'Remove from wishlist' : 'Add to wishlist' }))] }), jsx("div", { className: "image", children: jsx("slot", {}) }), jsxs("div", { className: "wrapper", children: [this.props.heading && (jsx("h3", { id: headingId, className: "heading", children: this.props.heading })), this.props.price && (jsx("p", { id: priceId, className: "price", children: this.props.priceOriginal ? (jsxs(Fragment, { children: [jsx("span", { className: "sr-only", children: "sale price" }), this.props.price, jsx("span", { className: "sr-only", children: "original price" }), jsx("s", { children: this.props.priceOriginal })] })) : (this.props.price) })), this.props.description && (jsx("p", { id: descriptionId, className: "description", children: this.props.description }))] })] })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/lib/components/link-tile-product.wrapper.d.ts

@@ -6,11 +6,11 @@ export type PLinkTileProductProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     aspectRatio?: BreakpointCustomizable<LinkTileProductAspectRatio>;
     /**
-     * Additional product description
+     * Additional product description.
      */
     description?: string;
     /**
-     * Product heading
+     * Product heading.
      */
     heading: string;
     /**
@@ -30,9 +30,13 @@ export type PLinkTileProductProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     onLike?: (event: CustomEvent<LinkTileProductLikeEventDetail>) => void;
     /**
-     * Product price
+     * Product retail price (with or without discount).
      */
     price: string;
+    /**
+     * Shows original price (recommended retail price) with line-through. Needs prop "price" to be defined, otherwise this prop has no effect.
+     */
+    priceOriginal?: string;
     /**
      * Specifies the relationship of the target object to the link object.
      */
@@ -52,11 +56,11 @@ export declare const PLinkTileProduct: import("react").ForwardRefExoticComponent
      */
     aspectRatio?: BreakpointCustomizable<LinkTileProductAspectRatio>;
     /**
-     * Additional product description
+     * Additional product description.
      */
     description?: string;
     /**
-     * Product heading
+     * Product heading.
      */
     heading: string;
     /**
@@ -76,9 +80,13 @@ export declare const PLinkTileProduct: import("react").ForwardRefExoticComponent
      */
     onLike?: (event: CustomEvent<LinkTileProductLikeEventDetail>) => void;
     /**
-     * Product price
+     * Product retail price (with or without discount).
      */
     price: string;
+    /**
+     * Shows original price (recommended retail price) with line-through. Needs prop "price" to be defined, otherwise this prop has no effect.
+     */
+    priceOriginal?: string;
     /**
      * Specifies the relationship of the target object to the link object.
      */