@porsche-design-system/components-react 3.10.0-rc.0 → 3.10.0-rc.1

package/CHANGELOG.md

@@ -14,6 +14,18 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [3.10.0-rc.1] - 2023-12-11
+
+#### Added
+
+- **[EXPERIMENTAL]** `Link Tile Product`
+  ([#2909](https://github.com/porsche-design-system/porsche-design-system/pull/2909))
+
+#### Fixed
+
+- `Wordmark`, `Crest` and `Marque`: custom clickable area
+  ([#2930](https://github.com/porsche-design-system/porsche-design-system/pull/2930))
+
 ### [3.10.0-rc.0] - 2023-12-07
 
 #### Added

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

@@ -0,0 +1,26 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+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 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()];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aspectRatio', 'description', 'heading', 'href', 'likeButton', 'liked', 'price', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PLinkTileProduct = PLinkTileProduct;

package/cjs/public-api.cjs

@@ -31,6 +31,7 @@ var linkPure_wrapper = require('./lib/components/link-pure.wrapper.cjs');
 var linkSocial_wrapper = require('./lib/components/link-social.wrapper.cjs');
 var linkTile_wrapper = require('./lib/components/link-tile.wrapper.cjs');
 var linkTileModelSignature_wrapper = require('./lib/components/link-tile-model-signature.wrapper.cjs');
+var linkTileProduct_wrapper = require('./lib/components/link-tile-product.wrapper.cjs');
 var marque_wrapper = require('./lib/components/marque.wrapper.cjs');
 var modal_wrapper = require('./lib/components/modal.wrapper.cjs');
 var modelSignature_wrapper = require('./lib/components/model-signature.wrapper.cjs');
@@ -107,6 +108,7 @@ exports.PLinkPure = linkPure_wrapper.PLinkPure;
 exports.PLinkSocial = linkSocial_wrapper.PLinkSocial;
 exports.PLinkTile = linkTile_wrapper.PLinkTile;
 exports.PLinkTileModelSignature = linkTileModelSignature_wrapper.PLinkTileModelSignature;
+exports.PLinkTileProduct = linkTileProduct_wrapper.PLinkTileProduct;
 exports.PMarque = marque_wrapper.PMarque;
 exports.PModal = modal_wrapper.PModal;
 exports.PModelSignature = modelSignature_wrapper.PModelSignature;

package/esm/lib/components/index.d.ts

@@ -28,6 +28,7 @@ export * from './link-pure.wrapper';
 export * from './link-social.wrapper';
 export * from './link-tile.wrapper';
 export * from './link-tile-model-signature.wrapper';
+export * from './link-tile-product.wrapper';
 export * from './marque.wrapper';
 export * from './modal.wrapper';
 export * from './model-signature.wrapper';

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

@@ -0,0 +1,96 @@
+import { type HTMLAttributes } from 'react';
+import type { BreakpointCustomizable, LinkTileProductAspectRatio, LinkTileProductLikeEvent, LinkTileProductTarget, Theme } from '../types';
+export type PLinkTileProductProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Aspect ratio of the link-tile-product.
+     */
+    aspectRatio?: BreakpointCustomizable<LinkTileProductAspectRatio>;
+    /**
+     * Additional product description
+     */
+    description?: string;
+    /**
+     * Product heading
+     */
+    heading: string;
+    /**
+     * href of the `<a>`.
+     */
+    href?: string;
+    /**
+     * A Boolean attribute indicating that a like button should be shown.
+     */
+    likeButton?: boolean;
+    /**
+     * A Boolean attribute indicating that a product is liked.
+     */
+    liked?: boolean;
+    /**
+     * Emitted when the like button is clicked.
+     */
+    onLike?: (event: CustomEvent<LinkTileProductLikeEvent>) => void;
+    /**
+     * Product price
+     */
+    price: string;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     */
+    rel?: string;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: LinkTileProductTarget;
+    /**
+     * Adapts the link-tile-product color depending on the theme.
+     */
+    theme?: Theme;
+};
+export declare const PLinkTileProduct: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Aspect ratio of the link-tile-product.
+     */
+    aspectRatio?: BreakpointCustomizable<LinkTileProductAspectRatio> | undefined;
+    /**
+     * Additional product description
+     */
+    description?: string | undefined;
+    /**
+     * Product heading
+     */
+    heading: string;
+    /**
+     * href of the `<a>`.
+     */
+    href?: string | undefined;
+    /**
+     * A Boolean attribute indicating that a like button should be shown.
+     */
+    likeButton?: boolean | undefined;
+    /**
+     * A Boolean attribute indicating that a product is liked.
+     */
+    liked?: boolean | undefined;
+    /**
+     * Emitted when the like button is clicked.
+     */
+    onLike?: ((event: CustomEvent<LinkTileProductLikeEvent>) => void) | undefined;
+    /**
+     * Product price
+     */
+    price: string;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     */
+    rel?: string | undefined;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: string | undefined;
+    /**
+     * Adapts the link-tile-product color depending on the theme.
+     */
+    theme?: "light" | "dark" | "auto" | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,24 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+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 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()];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aspectRatio', 'description', 'heading', 'href', 'likeButton', 'liked', 'price', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PLinkTileProduct };

package/esm/lib/types.d.ts

@@ -996,6 +996,15 @@ export type LinkTileModelSignatureHeadingTag = (typeof LINK_TILE_MODEL_SIGNATURE
 export type LinkTileModelSignatureWeight = TileWeight;
 export type LinkTileModelSignatureAspectRatio = TileAspectRatio;
 export type LinkTileModelSignatureLinkDirection = GroupDirection;
+export type LinkTileProductTarget = LinkTarget;
+export type LinkTileProductLikeEvent = {
+    liked: boolean;
+};
+declare const TILE_PRODUCT_ASPECT_RATIOS: readonly [
+    "3:4",
+    "9:16"
+];
+export type LinkTileProductAspectRatio = Extract<TileAspectRatio, (typeof TILE_PRODUCT_ASPECT_RATIOS)[number]>;
 declare const MODEL_SIGNATURES_MANIFEST: {
     "718": string;
     "911": string;

package/esm/public-api.mjs

@@ -29,6 +29,7 @@ export { PLinkPure } from './lib/components/link-pure.wrapper.mjs';
 export { PLinkSocial } from './lib/components/link-social.wrapper.mjs';
 export { PLinkTile } from './lib/components/link-tile.wrapper.mjs';
 export { PLinkTileModelSignature } from './lib/components/link-tile-model-signature.wrapper.mjs';
+export { PLinkTileProduct } from './lib/components/link-tile-product.wrapper.mjs';
 export { PMarque } from './lib/components/marque.wrapper.mjs';
 export { PModal } from './lib/components/modal.wrapper.mjs';
 export { PModelSignature } from './lib/components/model-signature.wrapper.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.10.0-rc.0",
+  "version": "3.10.0-rc.1",
   "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.10.0-rc.0"
+    "@porsche-design-system/components-js": "3.10.0-rc.1"
   },
   "peerDependencies": {
     "react": ">=17.0.0 <19.0.0",