@porsche-design-system/components-react 2.16.3 → 2.17.0-rc.0

package/lib/components/index.d.ts

@@ -18,6 +18,7 @@ export * from './inline-notification.wrapper';
 export * from './link.wrapper';
 export * from './link-pure.wrapper';
 export * from './link-social.wrapper';
+export * from './link-tile.wrapper';
 export * from './marque.wrapper';
 export * from './modal.wrapper';
 export * from './pagination.wrapper';

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

@@ -0,0 +1,112 @@
+import { HTMLAttributes } from 'react';
+import type { LinkTileAlign, SelectedAriaAttributes, LinkAriaAttributes, BreakpointCustomizable, LinkTileAspectRatio, LinkTileSize, LinkTarget, LinkTileWeight } from '../types';
+export declare type PLinkTileProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Alignment of link and description.
+     */
+    align?: LinkTileAlign;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<LinkAriaAttributes>;
+    /**
+     * Aspect ratio of the link-tile.
+     */
+    aspectRatio?: BreakpointCustomizable<LinkTileAspectRatio>;
+    /**
+     * Displays the tile-link as compact version with description and link icon only.
+     */
+    compact?: BreakpointCustomizable<boolean>;
+    /**
+     * Description text.
+     */
+    description: string;
+    /**
+     * Special download attribute to open native browser download dialog if target url points to a downloadable file.
+     */
+    download?: string;
+    /**
+     * Show gradient.
+     */
+    gradient?: boolean;
+    /**
+     * href of the `<a>`.
+     */
+    href: string;
+    /**
+     * Label of the <a />.
+     */
+    label: string;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     */
+    rel?: string;
+    /**
+     * Font size of the description.
+     */
+    size?: BreakpointCustomizable<LinkTileSize>;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: LinkTarget;
+    /**
+     * Font weight of the description.
+     */
+    weight?: BreakpointCustomizable<LinkTileWeight>;
+};
+export declare const PLinkTile: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Alignment of link and description.
+     */
+    align?: LinkTileAlign;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<LinkAriaAttributes>;
+    /**
+     * Aspect ratio of the link-tile.
+     */
+    aspectRatio?: BreakpointCustomizable<LinkTileAspectRatio>;
+    /**
+     * Displays the tile-link as compact version with description and link icon only.
+     */
+    compact?: BreakpointCustomizable<boolean>;
+    /**
+     * Description text.
+     */
+    description: string;
+    /**
+     * Special download attribute to open native browser download dialog if target url points to a downloadable file.
+     */
+    download?: string;
+    /**
+     * Show gradient.
+     */
+    gradient?: boolean;
+    /**
+     * href of the `<a>`.
+     */
+    href: string;
+    /**
+     * Label of the <a />.
+     */
+    label: string;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     */
+    rel?: string;
+    /**
+     * Font size of the description.
+     */
+    size?: BreakpointCustomizable<LinkTileSize>;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: LinkTarget;
+    /**
+     * Font weight of the description.
+     */
+    weight?: BreakpointCustomizable<LinkTileWeight>;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/lib/types.d.ts

@@ -563,6 +563,29 @@ declare const LINK_ARIA_ATTRIBUTES: readonly [
 ];
 export declare type LinkAriaAttributes = typeof LINK_ARIA_ATTRIBUTES[number];
 export declare type SocialIconName = 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">;
+declare const LINK_TILE_WEIGHTS: readonly [
+    "regular",
+    "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];
 declare const MARQUE_SIZES: readonly [
     "responsive",
     "small",

package/package.json

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

package/provider.d.ts

@@ -1,12 +1,9 @@
 import type { PropsWithChildren } from 'react';
 export declare const PorscheDesignSystemContext: import("react").Context<{
     prefix: any;
-    usesSkeletons: any;
 }>;
-export declare const hasSkeleton: () => boolean;
 declare type Props = {
     prefix?: string;
-    usesSkeletons?: boolean;
 };
-export declare const PorscheDesignSystemProvider: ({ prefix, usesSkeletons, ...props }: PropsWithChildren<Props>) => JSX.Element;
+export declare const PorscheDesignSystemProvider: ({ prefix, ...props }: PropsWithChildren<Props>) => JSX.Element;
 export {};

package/public-api.js

@@ -9,14 +9,12 @@ var react = require('react');
 // to warn users about missing PorscheDesignSystemProvider, we set the default values as undefined
 const PorscheDesignSystemContext = react.createContext({
     prefix: undefined,
-    usesSkeletons: undefined,
 });
-const hasSkeleton = () => typeof window !== 'undefined' && !!document.querySelector('style[uses-skeleton]');
-const PorscheDesignSystemProvider = ({ prefix = '', usesSkeletons = hasSkeleton(), ...props }) => {
+const PorscheDesignSystemProvider = ({ prefix = '', ...props }) => {
     react.useEffect(() => {
         componentsJs.load({ prefix });
     }, [prefix]);
-    return jsxRuntime.jsx(PorscheDesignSystemContext.Provider, { value: { prefix, usesSkeletons }, ...props });
+    return jsxRuntime.jsx(PorscheDesignSystemContext.Provider, { value: { prefix }, ...props });
 };
 
 const splitToArray =  (str) => str.split(' ').filter((str) => str);
@@ -426,6 +424,22 @@ const PLinkSocial = /*#__PURE__*/ react.forwardRef(({ hideLabel = false, href, i
     return jsxRuntime.jsx(Tag, { ...props });
 });
 
+const PLinkTile = /*#__PURE__*/ react.forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', compact = false, description, download, gradient = true, href, label, rel, size = 'default', target = '_self', weight = 'semibold', className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const Tag = usePrefix('p-link-tile');
+    const propsToSync = [align, aria, aspectRatio, compact, description, download, gradient, href, label, rel, size, target, weight];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['align', 'aria', 'aspectRatio', 'compact', 'description', 'download', 'gradient', 'href', 'label', 'rel', 'size', 'target', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(Tag, { ...props });
+});
+
 const PMarque = /*#__PURE__*/ react.forwardRef(({ aria, href, size = 'responsive', target = '_self', trademark = true, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const Tag = usePrefix('p-marque');
@@ -922,6 +936,7 @@ exports.PInlineNotification = PInlineNotification;
 exports.PLink = PLink;
 exports.PLinkPure = PLinkPure;
 exports.PLinkSocial = PLinkSocial;
+exports.PLinkTile = PLinkTile;
 exports.PMarque = PMarque;
 exports.PModal = PModal;
 exports.PPagination = PPagination;