@porsche-design-system/components-react 3.0.0-alpha.3 → 3.0.0-alpha.4

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

@@ -0,0 +1,64 @@
+import { HTMLAttributes } from 'react';
+import type { BreakpointCustomizable, LinkTileModelSignatureAspectRatio, LinkTileModelSignatureHeadingTag, LinkTileModelSignatureLinkDirection, LinkTileModelSignatureModel, LinkTileModelSignatureWeight } from '../types';
+export type PLinkTileModelSignatureProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+    /**
+     * Aspect ratio of the link-tile-model-signature.
+     */
+    aspectRatio?: BreakpointCustomizable<LinkTileModelSignatureAspectRatio>;
+    /**
+     * Description text.
+     */
+    description?: string;
+    /**
+     * Heading text.
+     */
+    heading: string;
+    /**
+     * Sets a custom headline tag which wraps the heading to enhance semantics.
+     */
+    headingTag?: LinkTileModelSignatureHeadingTag;
+    /**
+     * Defines the direction of the main and cross axis of the links. The default is '{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint 'xs'.
+     */
+    linkDirection?: BreakpointCustomizable<LinkTileModelSignatureLinkDirection>;
+    /**
+     * Adapts the model of the component.
+     */
+    model?: LinkTileModelSignatureModel;
+    /**
+     * Adapts the font weight of the heading.
+     */
+    weight?: BreakpointCustomizable<LinkTileModelSignatureWeight>;
+};
+export declare const PLinkTileModelSignature: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+    /**
+     * Aspect ratio of the link-tile-model-signature.
+     */
+    aspectRatio?: BreakpointCustomizable<LinkTileModelSignatureAspectRatio>;
+    /**
+     * Description text.
+     */
+    description?: string;
+    /**
+     * Heading text.
+     */
+    heading: string;
+    /**
+     * Sets a custom headline tag which wraps the heading to enhance semantics.
+     */
+    headingTag?: LinkTileModelSignatureHeadingTag;
+    /**
+     * Defines the direction of the main and cross axis of the links. The default is '{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint 'xs'.
+     */
+    linkDirection?: BreakpointCustomizable<LinkTileModelSignatureLinkDirection>;
+    /**
+     * Adapts the model of the component.
+     */
+    model?: LinkTileModelSignatureModel;
+    /**
+     * Adapts the font weight of the heading.
+     */
+    weight?: BreakpointCustomizable<LinkTileModelSignatureWeight>;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/lib/components/link-tile-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 PLinkTileModelSignature = react.forwardRef(({ aspectRatio = '3:4', description, heading, headingTag = 'h2', linkDirection = { base: 'column', xs: 'row' }, model = '911', weight = 'semi-bold', className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-link-tile-model-signature');
+    const propsToSync = [aspectRatio, description, heading, headingTag, linkDirection, model, weight];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aspectRatio', 'description', 'heading', 'headingTag', 'linkDirection', 'model', 'weight'].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.PLinkTileModelSignature = PLinkTileModelSignature;

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

@@ -14,7 +14,7 @@ export type PLinkTileProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     aspectRatio?: BreakpointCustomizable<LinkTileAspectRatio>;
     /**
-     * Displays the tile-link as compact version with description and link icon only.
+     * Displays the link-tile as compact version with description and link icon only.
      */
     compact?: BreakpointCustomizable<boolean>;
     /**
@@ -68,7 +68,7 @@ export declare const PLinkTile: import("react").ForwardRefExoticComponent<Omit<H
      */
     aspectRatio?: BreakpointCustomizable<LinkTileAspectRatio>;
     /**
-     * Displays the tile-link as compact version with description and link icon only.
+     * Displays the link-tile as compact version with description and link icon only.
      */
     compact?: BreakpointCustomizable<boolean>;
     /**

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

@@ -21,6 +21,10 @@ export type PScrollerProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      * Scrolls the scroll area to the left either smooth or immediately
      */
     scrollToPosition?: ScrollerScrollToPosition;
+    /**
+     * Specifies if scrollbar should be shown
+     */
+    scrollbar?: boolean;
     /**
      * Adapts the color when used on dark background.
      */
@@ -47,6 +51,10 @@ export declare const PScroller: import("react").ForwardRefExoticComponent<Omit<H
      * Scrolls the scroll area to the left either smooth or immediately
      */
     scrollToPosition?: ScrollerScrollToPosition;
+    /**
+     * Specifies if scrollbar should be shown
+     */
+    scrollbar?: boolean;
     /**
      * Adapts the color when used on dark background.
      */

package/lib/components/scroller.wrapper.js

@@ -5,13 +5,13 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PScroller = react.forwardRef(({ alignScrollIndicator = 'center', gradientColor = 'background-base', gradientColorScheme, scrollIndicatorPosition, scrollToPosition, theme = 'light', className, ...rest }, ref) => {
+const PScroller = react.forwardRef(({ alignScrollIndicator = 'center', gradientColor = 'background-base', gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar = false, theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-scroller');
-    const propsToSync = [alignScrollIndicator, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, theme];
+    const propsToSync = [alignScrollIndicator, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['alignScrollIndicator', 'gradientColor', 'gradientColorScheme', 'scrollIndicatorPosition', 'scrollToPosition', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['alignScrollIndicator', 'gradientColor', 'gradientColorScheme', 'scrollIndicatorPosition', 'scrollToPosition', 'scrollbar', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { TableChangeEvent } from '../types';
+import type { TableChangeEvent, Theme } from '../types';
 export type PTableProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * A caption describing the contents of the table for accessibility only. This won't be visible in the browser. Use an element with an attribute of `slot="caption"` for a visible caption.
@@ -13,6 +13,10 @@ export type PTableProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when sorting is changed.
      */
     onSortingChange?: (event: CustomEvent<TableChangeEvent>) => void;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: Theme;
 };
 export declare const PTable: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
@@ -27,6 +31,10 @@ export declare const PTable: import("react").ForwardRefExoticComponent<Omit<HTML
      * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when sorting is changed.
      */
     onSortingChange?: (event: CustomEvent<TableChangeEvent>) => void;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: Theme;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/lib/components/table.wrapper.js

@@ -5,14 +5,16 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PTable = react.forwardRef(({ caption, onChange, onSortingChange, className, ...rest }, ref) => {
+const PTable = react.forwardRef(({ caption, onChange, onSortingChange, theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'sortingChange', onSortingChange);
     const WebComponentTag = hooks.usePrefix('p-table');
+    const propsToSync = [caption, theme];
     hooks.useBrowserLayoutEffect(() => {
-        elementRef.current.caption = caption;
-    }, [caption]);
+        const { current } = elementRef;
+        ['caption', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
     const props = {
         ...rest,
         class: hooks.useMergedClass(elementRef, className),

package/lib/types.d.ts

@@ -209,6 +209,29 @@ export declare type BreakpointValues<T> = {
     base: T;
 };
 export declare type BreakpointCustomizable<T> = T | BreakpointValues<T>;
+declare const TILE_ASPECT_RATIOS: readonly [
+    "1:1",
+    "4:3",
+    "3:4",
+    "16:9",
+    "9:16"
+];
+export declare type TileAspectRatio = (typeof TILE_ASPECT_RATIOS)[number];
+declare const TILE_SIZES: readonly [
+    "default",
+    "inherit"
+];
+export declare type TileSize = (typeof TILE_SIZES)[number];
+declare const TILE_WEIGHTS: readonly [
+    "regular",
+    "semi-bold"
+];
+export declare type TileWeight = (typeof TILE_WEIGHTS)[number];
+declare const TILE_ALIGNS: readonly [
+    "top",
+    "bottom"
+];
+export declare type TileAlign = (typeof TILE_ALIGNS)[number];
 declare const GRADIENT_COLOR_SCHEMES: readonly [
     "default",
     "surface"
@@ -523,29 +546,38 @@ declare const BANNER_WIDTHS: readonly [
     "basic",
     "fluid"
 ];
+/** @deprecated */
 export declare type BannerWidth = typeof BANNER_WIDTHS[number];
 export declare type ButtonIcon = LinkButtonIconName;
-declare const BUTTON_GROUP_DIRECTIONS: readonly [
+declare const GROUP_DIRECTIONS: readonly [
     "row",
     "column"
 ];
-export declare type ButtonGroupDirection = typeof BUTTON_GROUP_DIRECTIONS[number];
+export declare type GroupDirection = (typeof GROUP_DIRECTIONS)[number];
+export declare type ButtonGroupDirection = GroupDirection;
 export declare type ButtonPureType = ButtonType;
 export declare type ButtonPureIcon = LinkButtonIconName;
 export declare type ButtonPureAriaAttribute = ButtonAriaAttribute;
 export declare type ButtonPureAlignLabel = AlignLabel;
 export declare type ButtonPureWeight = TextWeight;
 export declare type ButtonPureSize = TextSize;
+export declare type ButtonTileAriaAttribute = ButtonAriaAttribute;
+export declare type ButtonTileIcon = LinkButtonIconName;
+export declare type ButtonTileType = ButtonType;
+export declare type ButtonTileAspectRatio = TileAspectRatio;
+export declare type ButtonTileSize = TileSize;
+export declare type ButtonTileWeight = TileWeight;
+export declare type ButtonTileAlign = TileAlign;
 declare const CAROUSEL_WIDTHS: readonly [
     "basic",
     "extended"
 ];
-export declare type CarouselWidth = typeof CAROUSEL_WIDTHS[number];
+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 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;
@@ -602,12 +634,14 @@ declare const DIVIDER_DIRECTIONS: readonly [
 ];
 export declare type DividerDirection = typeof DIVIDER_DIRECTIONS[number];
 export declare type DividerOrientation = DividerDirection;
-declare const FIELDSET_WRAPPER_LABEL_SIZES: readonly [
+declare const FIELDSET_LABEL_SIZES: readonly [
     "small",
     "medium"
 ];
-export declare type FieldsetWrapperLabelSize = typeof FIELDSET_WRAPPER_LABEL_SIZES[number];
-export declare type FieldsetWrapperState = FormState;
+export declare type FieldsetLabelSize = typeof FIELDSET_LABEL_SIZES[number];
+export declare type FieldsetState = FormState;
+export declare type FieldsetWrapperLabelSize = FieldsetLabelSize;
+export declare type FieldsetWrapperState = FieldsetState;
 export declare type FlexInline = boolean;
 declare const FLEX_WRAPS: readonly [
     "nowrap",
@@ -830,47 +864,17 @@ export declare type LinkPureSize = TextSize;
 export declare type LinkPureTarget = LinkTarget;
 export declare type LinkSocialIcon = Extract<IconName, "logo-facebook" | "logo-google" | "logo-instagram" | "logo-linkedin" | "logo-pinterest" | "logo-twitter" | "logo-wechat" | "logo-whatsapp" | "logo-xing" | "logo-youtube" | "logo-baidu" | "logo-delicious" | "logo-digg" | "logo-foursquare" | "logo-gmail" | "logo-hatena" | "logo-kaixin" | "logo-kakaotalk" | "logo-naver" | "logo-qq-share" | "logo-qq" | "logo-reddit" | "logo-skyrock" | "logo-sohu" | "logo-tecent" | "logo-telegram" | "logo-tiktok" | "logo-tumblr" | "logo-viber" | "logo-vk" | "logo-weibo" | "logo-yahoo" | "logo-youku">;
 export declare type LinkSocialTarget = LinkTarget;
+export declare type LinkTileTarget = LinkTarget;
+export declare type LinkTileAriaAttribute = LinkAriaAttribute;
+export declare type LinkTileAspectRatio = TileAspectRatio;
+export declare type LinkTileSize = TileSize;
+export declare type LinkTileAlign = TileAlign;
 declare const LINK_TILE_WEIGHTS: readonly [
     "regular",
     "semi-bold",
     "semibold"
 ];
-export declare type LinkTileWeight = typeof LINK_TILE_WEIGHTS[number];
-declare const LINK_TILE_SIZES: readonly [
-    "default",
-    "inherit"
-];
-export declare type LinkTileSize = typeof LINK_TILE_SIZES[number];
-declare const LINK_TILE_ALIGNS: readonly [
-    "top",
-    "bottom"
-];
-export declare type LinkTileAlign = typeof LINK_TILE_ALIGNS[number];
-declare const LINK_TILE_ASPECT_RATIOS: readonly [
-    "1:1",
-    "4:3",
-    "3:4",
-    "16:9",
-    "9:16"
-];
-export declare type LinkTileAspectRatio = typeof LINK_TILE_ASPECT_RATIOS[number];
-export declare type LinkTileTarget = LinkTarget;
-export declare type LinkTileAriaAttribute = LinkAriaAttribute;
-declare const MARQUE_SIZES: readonly [
-    "responsive",
-    "small",
-    "medium"
-];
-export declare type MarqueSize = typeof MARQUE_SIZES[number];
-export declare type MarqueTarget = LinkTarget;
-declare const MARQUE_ARIA_ATTRIBUTES: readonly [
-    "aria-label"
-];
-export declare type MarqueAriaAttribute = typeof MARQUE_ARIA_ATTRIBUTES[number];
-declare const MODAL_ARIA_ATTRIBUTES: readonly [
-    "aria-label"
-];
-export declare type ModalAriaAttribute = (typeof MODAL_ARIA_ATTRIBUTES)[number];
+export declare type LinkTileWeight = (typeof LINK_TILE_WEIGHTS)[number];
 declare const MODEL_SIGNATURES_MANIFEST: {
     "718": string;
     "911": string;
@@ -897,6 +901,33 @@ declare const MODEL_SIGNATURE_COLORS: readonly [
     "inherit"
 ];
 export declare type ModelSignatureColor = typeof MODEL_SIGNATURE_COLORS[number];
+export declare type LinkTileModelSignatureModel = ModelSignatureModel;
+declare const LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS: readonly [
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6"
+];
+export declare type LinkTileModelSignatureHeadingTag = (typeof LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS)[number];
+export declare type LinkTileModelSignatureWeight = TileWeight;
+export declare type LinkTileModelSignatureAspectRatio = TileAspectRatio;
+export declare type LinkTileModelSignatureLinkDirection = GroupDirection;
+declare const MARQUE_SIZES: readonly [
+    "responsive",
+    "small",
+    "medium"
+];
+export declare type MarqueSize = typeof MARQUE_SIZES[number];
+export declare type MarqueTarget = LinkTarget;
+declare const MARQUE_ARIA_ATTRIBUTES: readonly [
+    "aria-label"
+];
+export declare type MarqueAriaAttribute = typeof MARQUE_ARIA_ATTRIBUTES[number];
+declare const MODAL_ARIA_ATTRIBUTES: readonly [
+    "aria-label"
+];
+export declare type ModalAriaAttribute = (typeof MODAL_ARIA_ATTRIBUTES)[number];
 declare const PAGINATION_NUMBER_OF_PAGE_LINKS: readonly [
     5,
     7

package/package.json

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

package/public-api.js

@@ -6,11 +6,13 @@ var banner_wrapper = require('./lib/components/banner.wrapper.js');
 var button_wrapper = require('./lib/components/button.wrapper.js');
 var buttonGroup_wrapper = require('./lib/components/button-group.wrapper.js');
 var buttonPure_wrapper = require('./lib/components/button-pure.wrapper.js');
+var buttonTile_wrapper = require('./lib/components/button-tile.wrapper.js');
 var carousel_wrapper = require('./lib/components/carousel.wrapper.js');
 var checkboxWrapper_wrapper = require('./lib/components/checkbox-wrapper.wrapper.js');
 var contentWrapper_wrapper = require('./lib/components/content-wrapper.wrapper.js');
 var display_wrapper = require('./lib/components/display.wrapper.js');
 var divider_wrapper = require('./lib/components/divider.wrapper.js');
+var fieldset_wrapper = require('./lib/components/fieldset.wrapper.js');
 var fieldsetWrapper_wrapper = require('./lib/components/fieldset-wrapper.wrapper.js');
 var flex_wrapper = require('./lib/components/flex.wrapper.js');
 var flexItem_wrapper = require('./lib/components/flex-item.wrapper.js');
@@ -24,6 +26,7 @@ var link_wrapper = require('./lib/components/link.wrapper.js');
 var linkPure_wrapper = require('./lib/components/link-pure.wrapper.js');
 var linkSocial_wrapper = require('./lib/components/link-social.wrapper.js');
 var linkTile_wrapper = require('./lib/components/link-tile.wrapper.js');
+var linkTileModelSignature_wrapper = require('./lib/components/link-tile-model-signature.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');
@@ -71,11 +74,13 @@ exports.PBanner = banner_wrapper.PBanner;
 exports.PButton = button_wrapper.PButton;
 exports.PButtonGroup = buttonGroup_wrapper.PButtonGroup;
 exports.PButtonPure = buttonPure_wrapper.PButtonPure;
+exports.PButtonTile = buttonTile_wrapper.PButtonTile;
 exports.PCarousel = carousel_wrapper.PCarousel;
 exports.PCheckboxWrapper = checkboxWrapper_wrapper.PCheckboxWrapper;
 exports.PContentWrapper = contentWrapper_wrapper.PContentWrapper;
 exports.PDisplay = display_wrapper.PDisplay;
 exports.PDivider = divider_wrapper.PDivider;
+exports.PFieldset = fieldset_wrapper.PFieldset;
 exports.PFieldsetWrapper = fieldsetWrapper_wrapper.PFieldsetWrapper;
 exports.PFlex = flex_wrapper.PFlex;
 exports.PFlexItem = flexItem_wrapper.PFlexItem;
@@ -89,6 +94,7 @@ exports.PLink = link_wrapper.PLink;
 exports.PLinkPure = linkPure_wrapper.PLinkPure;
 exports.PLinkSocial = linkSocial_wrapper.PLinkSocial;
 exports.PLinkTile = linkTile_wrapper.PLinkTile;
+exports.PLinkTileModelSignature = linkTileModelSignature_wrapper.PLinkTileModelSignature;
 exports.PMarque = marque_wrapper.PMarque;
 exports.PModal = modal_wrapper.PModal;
 exports.PModelSignature = modelSignature_wrapper.PModelSignature;