@porsche-design-system/components-react 3.0.0-alpha.1 → 3.0.0-alpha.2

package/esm/lib/components/carousel.wrapper.js

@@ -3,14 +3,14 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PCarousel = forwardRef(({ description, disablePagination = false, heading, intl = {}, onCarouselChange, rewind = true, slidesPerPage = 1, theme = 'light', wrapContent, className, ...rest }, ref) => {
+const PCarousel = forwardRef(({ alignHeader = 'left', description, disablePagination = false, heading, intl = {}, onCarouselChange, rewind = true, slidesPerPage = 1, theme = 'light', width = 'basic', wrapContent, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     const WebComponentTag = usePrefix('p-carousel');
-    const propsToSync = [description, disablePagination, heading, intl, rewind, slidesPerPage, theme, wrapContent];
+    const propsToSync = [alignHeader, description, disablePagination, heading, intl, rewind, slidesPerPage, theme, width, wrapContent];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'disablePagination', 'heading', 'intl', 'rewind', 'slidesPerPage', 'theme', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['alignHeader', 'description', 'disablePagination', 'heading', 'intl', 'rewind', 'slidesPerPage', 'theme', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/content-wrapper.wrapper.js

@@ -4,7 +4,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.j
 import { syncRef } from '../../utils.js';
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
-const PContentWrapper = forwardRef(({ backgroundColor = 'transparent', theme = 'light', width = 'basic', className, ...rest }, ref) => {
+const PContentWrapper = forwardRef(({ backgroundColor = 'transparent', theme = 'light', width = 'extended', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-content-wrapper');
     const propsToSync = [backgroundColor, theme, width];

package/esm/lib/components/divider.wrapper.js

@@ -3,7 +3,7 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PDivider = forwardRef(({ color = 'neutral-contrast-low', orientation = 'horizontal', theme = 'light', className, ...rest }, ref) => {
+const PDivider = forwardRef(({ color = 'contrast-low', orientation = 'horizontal', theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-divider');
     const propsToSync = [color, orientation, theme];

package/esm/lib/components/model-signature.wrapper.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
+import { syncRef } from '../../utils.js';
+
+const PModelSignature = forwardRef(({ color = 'primary', model = '911', size = 'small', theme = 'light', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-model-signature');
+    const propsToSync = [color, model, size, theme];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['color', 'model', 'size', '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 { PModelSignature };

package/esm/public-api.js

@@ -24,6 +24,7 @@ export { PLinkSocial } from './lib/components/link-social.wrapper.js';
 export { PLinkTile } from './lib/components/link-tile.wrapper.js';
 export { PMarque } from './lib/components/marque.wrapper.js';
 export { PModal } from './lib/components/modal.wrapper.js';
+export { PModelSignature } from './lib/components/model-signature.wrapper.js';
 export { PPagination } from './lib/components/pagination.wrapper.js';
 export { PPopover } from './lib/components/popover.wrapper.js';
 export { PRadioButtonWrapper } from './lib/components/radio-button-wrapper.wrapper.js';

package/lib/components/carousel.wrapper.d.ts

@@ -1,6 +1,10 @@
 import { HTMLAttributes } from 'react';
-import type { BreakpointCustomizable, CarouselInternationalization, CarouselChangeEvent, Theme } from '../types';
+import type { CarouselAlignHeader, BreakpointCustomizable, CarouselInternationalization, CarouselChangeEvent, Theme, CarouselWidth } from '../types';
 export type PCarouselProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Alignment of heading and description
+     */
+    alignHeader?: CarouselAlignHeader;
     /**
      * Defines the description used in the carousel.
      */
@@ -34,11 +38,20 @@ export type PCarouselProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
     /**
-     * Whether the content should receive a padding to the sides to be aligned on the grid when used full width and not within content-wrapper.
+     * Defines the outer spacings between the carousel and the left and right screen sides.
+     */
+    width?: CarouselWidth;
+    /**
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     wrapContent?: boolean;
 };
 export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Alignment of heading and description
+     */
+    alignHeader?: CarouselAlignHeader;
     /**
      * Defines the description used in the carousel.
      */
@@ -72,7 +85,12 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<H
      */
     theme?: Theme;
     /**
-     * Whether the content should receive a padding to the sides to be aligned on the grid when used full width and not within content-wrapper.
+     * Defines the outer spacings between the carousel and the left and right screen sides.
+     */
+    width?: CarouselWidth;
+    /**
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     wrapContent?: boolean;
 } & {

package/lib/components/carousel.wrapper.js

@@ -5,14 +5,14 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PCarousel = react.forwardRef(({ description, disablePagination = false, heading, intl = {}, onCarouselChange, rewind = true, slidesPerPage = 1, theme = 'light', wrapContent, className, ...rest }, ref) => {
+const PCarousel = react.forwardRef(({ alignHeader = 'left', description, disablePagination = false, heading, intl = {}, onCarouselChange, rewind = true, slidesPerPage = 1, theme = 'light', width = 'basic', wrapContent, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     const WebComponentTag = hooks.usePrefix('p-carousel');
-    const propsToSync = [description, disablePagination, heading, intl, rewind, slidesPerPage, theme, wrapContent];
+    const propsToSync = [alignHeader, description, disablePagination, heading, intl, rewind, slidesPerPage, theme, width, wrapContent];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'disablePagination', 'heading', 'intl', 'rewind', 'slidesPerPage', 'theme', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['alignHeader', 'description', 'disablePagination', 'heading', 'intl', 'rewind', 'slidesPerPage', 'theme', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/lib/components/content-wrapper.wrapper.js

@@ -6,7 +6,7 @@ var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
-const PContentWrapper = react.forwardRef(({ backgroundColor = 'transparent', theme = 'light', width = 'basic', className, ...rest }, ref) => {
+const PContentWrapper = react.forwardRef(({ backgroundColor = 'transparent', theme = 'light', width = 'extended', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-content-wrapper');
     const propsToSync = [backgroundColor, theme, width];

package/lib/components/divider.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PDivider = react.forwardRef(({ color = 'neutral-contrast-low', orientation = 'horizontal', theme = 'light', className, ...rest }, ref) => {
+const PDivider = react.forwardRef(({ color = 'contrast-low', orientation = 'horizontal', theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-divider');
     const propsToSync = [color, orientation, theme];

package/lib/components/index.d.ts

@@ -23,6 +23,7 @@ export * from './link-social.wrapper';
 export * from './link-tile.wrapper';
 export * from './marque.wrapper';
 export * from './modal.wrapper';
+export * from './model-signature.wrapper';
 export * from './pagination.wrapper';
 export * from './popover.wrapper';
 export * from './radio-button-wrapper.wrapper';

package/lib/components/model-signature.wrapper.d.ts

@@ -0,0 +1,38 @@
+import { HTMLAttributes } from 'react';
+import type { ModelSignatureColor, ModelSignatureModel, ModelSignatureSize, Theme } from '../types';
+export type PModelSignatureProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Adapts the color of the component.
+     */
+    color?: ModelSignatureColor;
+    /**
+     * Adapts the model of the component.
+     */
+    model?: ModelSignatureModel;
+    /**
+     * Adapts the size of the component.
+     */
+    size?: ModelSignatureSize;
+    /**
+     * Adapts color depending on theme.
+     */
+    theme?: Theme;
+};
+export declare const PModelSignature: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Adapts the color of the component.
+     */
+    color?: ModelSignatureColor;
+    /**
+     * Adapts the model of the component.
+     */
+    model?: ModelSignatureModel;
+    /**
+     * Adapts the size of the component.
+     */
+    size?: ModelSignatureSize;
+    /**
+     * Adapts color depending on theme.
+     */
+    theme?: Theme;
+} & import("react").RefAttributes<HTMLElement>>;

package/lib/components/model-signature.wrapper.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.js');
+var utils = require('../../utils.js');
+
+const PModelSignature = react.forwardRef(({ color = 'primary', model = '911', size = 'small', theme = 'light', className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-model-signature');
+    const propsToSync = [color, model, size, theme];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['color', 'model', 'size', '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.PModelSignature = PModelSignature;

package/lib/components/text-list.wrapper.d.ts

@@ -2,29 +2,29 @@ import { HTMLAttributes } from 'react';
 import type { ListType, OrderType, Theme } from '../types';
 export type PTextListProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
-     * The type of the text list.
+     * The type of the list.
      */
     listType?: ListType;
     /**
-     * The list style type of an ordered list.
+     * The list style type of ordered list. Only has effect when list type is set to 'ordered'.
      */
     orderType?: OrderType;
     /**
-     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
+     * Adapts the text color depending on the theme.
      */
     theme?: Theme;
 };
 export declare const PTextList: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
-     * The type of the text list.
+     * The type of the list.
      */
     listType?: ListType;
     /**
-     * The list style type of an ordered list.
+     * The list style type of ordered list. Only has effect when list type is set to 'ordered'.
      */
     orderType?: OrderType;
     /**
-     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
+     * Adapts the text color depending on the theme.
      */
     theme?: Theme;
 } & {

package/lib/types.d.ts

@@ -262,20 +262,20 @@ declare const TEXT_ALIGNS: readonly [
 export declare type TextAlign = typeof TEXT_ALIGNS[number];
 declare const TEXT_COLORS: readonly [
     "primary",
-    "brand",
-    "default",
     "contrast-low",
-    "neutral-contrast-low",
     "contrast-medium",
-    "neutral-contrast-medium",
     "contrast-high",
-    "neutral-contrast-high",
     "notification-success",
     "notification-warning",
     "notification-error",
     "notification-info",
-    "notification-neutral",
-    "inherit"
+    "inherit",
+    "brand",
+    "default",
+    "neutral-contrast-low",
+    "neutral-contrast-medium",
+    "neutral-contrast-high",
+    "notification-neutral"
 ];
 export declare type TextColor = typeof TEXT_COLORS[number];
 declare const TEXT_SIZES: readonly [
@@ -288,11 +288,11 @@ declare const TEXT_SIZES: readonly [
 ];
 export declare type TextSize = typeof TEXT_SIZES[number];
 declare const TEXT_WEIGHTS: readonly [
-    "thin",
     "regular",
-    "semibold",
     "semi-bold",
-    "bold"
+    "bold",
+    "thin",
+    "semibold"
 ];
 export declare type TextWeight = typeof TEXT_WEIGHTS[number];
 declare const LINK_TARGETS: readonly [
@@ -503,15 +503,15 @@ export declare type AccordionChangeEvent = {
 };
 export declare type AccordionTag = HeadingTag;
 declare const BANNER_STATES: readonly [
-    "error",
-    "warning",
     "info",
+    "warning",
+    "error",
     "neutral"
 ];
 export declare type BannerState = typeof BANNER_STATES[number];
 declare const BANNER_WIDTHS: readonly [
-    "basic",
     "extended",
+    "basic",
     "fluid"
 ];
 export declare type BannerWidth = typeof BANNER_WIDTHS[number];
@@ -520,6 +520,16 @@ declare const BUTTON_GROUP_DIRECTIONS: readonly [
     "column"
 ];
 export declare type ButtonGroupDirection = typeof BUTTON_GROUP_DIRECTIONS[number];
+declare const CAROUSEL_WIDTHS: readonly [
+    "basic",
+    "extended"
+];
+export declare type CarouselWidth = typeof CAROUSEL_WIDTHS[number];
+declare const CAROUSEL_ALIGN_HEADERS: readonly [
+    "left",
+    "center"
+];
+export declare type CarouselAlignHeader = typeof CAROUSEL_ALIGN_HEADERS[number];
 export declare type CarouselInternationalization = Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>>;
 export declare type CarouselChangeEvent = {
     activeIndex: number;
@@ -560,6 +570,9 @@ declare const DISPLAY_COLORS: readonly [
 export declare type DisplayColor = typeof DISPLAY_COLORS[number];
 export declare type DisplayAlign = TextAlign;
 declare const DIVIDER_COLORS: readonly [
+    "contrast-low",
+    "contrast-medium",
+    "contrast-high",
     "neutral-contrast-high",
     "neutral-contrast-medium",
     "neutral-contrast-low"
@@ -759,29 +772,29 @@ export declare type IconAriaAttribute = typeof ICON_ARIA_ATTRIBUTES[number];
 export declare type IconSize = TextSize;
 declare const ICON_COLORS: readonly [
     "primary",
-    "brand",
-    "default",
     "contrast-low",
-    "neutral-contrast-low",
     "contrast-medium",
-    "neutral-contrast-medium",
     "contrast-high",
-    "neutral-contrast-high",
     "notification-success",
     "notification-warning",
     "notification-error",
     "notification-info",
-    "notification-neutral",
     "inherit",
+    "brand",
+    "default",
+    "neutral-contrast-low",
+    "neutral-contrast-medium",
+    "neutral-contrast-high",
+    "notification-neutral",
     "disabled"
 ];
 export declare type IconColor = typeof ICON_COLORS[number];
 declare const INLINE_NOTIFICATION_STATES: readonly [
-    "error",
-    "warning",
+    "success",
     "info",
-    "neutral",
-    "success"
+    "warning",
+    "error",
+    "neutral"
 ];
 export declare type InlineNotificationState = typeof INLINE_NOTIFICATION_STATES[number];
 declare const LINK_ARIA_ATTRIBUTES: readonly [
@@ -826,6 +839,32 @@ declare const MODAL_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
 export declare type ModalAriaAttribute = typeof MODAL_ARIA_ATTRIBUTES[number];
+declare const MODEL_SIGNATURES_MANIFEST: {
+    "718": string;
+    "911": string;
+    boxster: string;
+    cayenne: string;
+    cayman: string;
+    macan: string;
+    panamera: string;
+    taycan: string;
+    "turbo-s": string;
+    turbo: string;
+};
+declare const MODEL_SIGNATURE_SIZES: readonly [
+    "small",
+    "inherit"
+];
+export declare type ModelSignatureSize = typeof MODEL_SIGNATURE_SIZES[number];
+export declare type ModelSignatureModel = keyof typeof MODEL_SIGNATURES_MANIFEST;
+declare const MODEL_SIGNATURE_COLORS: readonly [
+    "primary",
+    "contrast-low",
+    "contrast-medium",
+    "contrast-high",
+    "inherit"
+];
+export declare type ModelSignatureColor = typeof MODEL_SIGNATURE_COLORS[number];
 declare const PAGINATION_NUMBER_OF_PAGE_LINKS: readonly [
     5,
     7
@@ -905,29 +944,29 @@ export declare type TabChangeEvent = {
     activeTabIndex: number;
 };
 export declare type TabGradientColorTheme = GradientColorTheme;
+declare const TAG_DISMISSIBLE_COLORS: readonly [
+    "background-surface",
+    "background-base",
+    "background-default"
+];
+export declare type TagDismissibleColor = typeof TAG_DISMISSIBLE_COLORS[number];
+declare const TAG_DISMISSIBLE_ARIA_ATTRIBUTES: readonly [
+    "aria-label"
+];
+export declare type TagDismissibleAriaAttribute = typeof TAG_DISMISSIBLE_ARIA_ATTRIBUTES[number];
 declare const TAG_COLORS: readonly [
     "background-surface",
-    "background-default",
     "background-base",
-    "neutral-contrast-high",
+    "background-default",
     "primary",
-    "notification-neutral",
     "notification-info",
     "notification-warning",
     "notification-success",
-    "notification-error"
+    "notification-error",
+    "neutral-contrast-high",
+    "notification-neutral"
 ];
 export declare type TagColor = typeof TAG_COLORS[number];
-declare const TAG_DISMISSIBLE_COLORS: readonly [
-    "background-surface",
-    "background-default",
-    "background-base"
-];
-export declare type TagDismissibleColor = typeof TAG_DISMISSIBLE_COLORS[number];
-declare const TAG_DISMISSIBLE_ARIA_ATTRIBUTES: readonly [
-    "aria-label"
-];
-export declare type TagDismissibleAriaAttribute = typeof TAG_DISMISSIBLE_ARIA_ATTRIBUTES[number];
 declare const TEXT_TAGS: readonly [
     "p",
     "span",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.2",
   "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.0.0-alpha.1"
+    "@porsche-design-system/components-js": "3.0.0-alpha.2"
   },
   "peerDependencies": {
     "react": ">=17.0.0 <19.0.0",

package/public-api.js

@@ -26,6 +26,7 @@ var linkSocial_wrapper = require('./lib/components/link-social.wrapper.js');
 var linkTile_wrapper = require('./lib/components/link-tile.wrapper.js');
 var marque_wrapper = require('./lib/components/marque.wrapper.js');
 var modal_wrapper = require('./lib/components/modal.wrapper.js');
+var modelSignature_wrapper = require('./lib/components/model-signature.wrapper.js');
 var pagination_wrapper = require('./lib/components/pagination.wrapper.js');
 var popover_wrapper = require('./lib/components/popover.wrapper.js');
 var radioButtonWrapper_wrapper = require('./lib/components/radio-button-wrapper.wrapper.js');
@@ -90,6 +91,7 @@ exports.PLinkSocial = linkSocial_wrapper.PLinkSocial;
 exports.PLinkTile = linkTile_wrapper.PLinkTile;
 exports.PMarque = marque_wrapper.PMarque;
 exports.PModal = modal_wrapper.PModal;
+exports.PModelSignature = modelSignature_wrapper.PModelSignature;
 exports.PPagination = pagination_wrapper.PPagination;
 exports.PPopover = popover_wrapper.PPopover;
 exports.PRadioButtonWrapper = radioButtonWrapper_wrapper.PRadioButtonWrapper;