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

package/CHANGELOG.md

@@ -9,6 +9,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [3.0.0-alpha.5] - 2023-03-30
+
+#### Added
+
+- `Wordmark` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2418)
+- `Crest` [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2437)
+- Styles: changed color values of `theme[Light|Dark]ContrastMedium` and `theme[Light|Dark]Notification[*]` color tokens
+  of `Styles` subpackage [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2436)
+
 ### [3.0.0-alpha.4] - 2023-03-28
 
 #### Changed
@@ -69,6 +78,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 #### 🤡 Component deprecations 🤡
 
+##### Marque [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2418)
+
+```diff
+- <p-marque></p-marque>
++ <p-wordmark></p-wordmark>
+```
+
 ##### Fieldset Wrapper: [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2404)
 
 ```diff

package/esm/lib/components/crest.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 PCrest = forwardRef(({ aria, href, target = '_self', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-crest');
+    const propsToSync = [aria, href, target];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aria', 'href', 'target'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PCrest };

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

@@ -3,6 +3,7 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
+/** @deprecated since v3.0.0, will be removed with next major release. Please use "p-wordmark" instead. */
 const PMarque = forwardRef(({ aria, href, size = 'responsive', target = '_self', trademark = true, className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-marque');

package/esm/lib/components/wordmark.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 PWordmark = forwardRef(({ aria, href, size = 'small', target = '_self', theme = 'light', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-wordmark');
+    const propsToSync = [aria, href, size, target, theme];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aria', 'href', 'size', '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 { PWordmark };

package/esm/public-api.js

@@ -8,6 +8,7 @@ export { PButtonTile } from './lib/components/button-tile.wrapper.js';
 export { PCarousel } from './lib/components/carousel.wrapper.js';
 export { PCheckboxWrapper } from './lib/components/checkbox-wrapper.wrapper.js';
 export { PContentWrapper } from './lib/components/content-wrapper.wrapper.js';
+export { PCrest } from './lib/components/crest.wrapper.js';
 export { PDisplay } from './lib/components/display.wrapper.js';
 export { PDivider } from './lib/components/divider.wrapper.js';
 export { PFieldset } from './lib/components/fieldset.wrapper.js';
@@ -57,6 +58,7 @@ export { PTextList } from './lib/components/text-list.wrapper.js';
 export { PTextListItem } from './lib/components/text-list-item.wrapper.js';
 export { PTextareaWrapper } from './lib/components/textarea-wrapper.wrapper.js';
 export { PToast } from './lib/components/toast.wrapper.js';
+export { PWordmark } from './lib/components/wordmark.wrapper.js';
 export { PorscheDesignSystemProvider } from './provider.js';
 export { skipCheckForPorscheDesignSystemProviderDuringTests, useToastManager } from './hooks.js';
 export { skipPorscheDesignSystemCDNRequestsDuringTests } from './utils.js';

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

@@ -0,0 +1,30 @@
+import { HTMLAttributes } from 'react';
+import type { SelectedAriaAttributes, CrestAriaAttribute, CrestTarget } from '../types';
+export type PCrestProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<CrestAriaAttribute>;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: CrestTarget;
+};
+export declare const PCrest: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<CrestAriaAttribute>;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: CrestTarget;
+} & import("react").RefAttributes<HTMLElement>>;

package/lib/components/crest.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 PCrest = react.forwardRef(({ aria, href, target = '_self', className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-crest');
+    const propsToSync = [aria, href, target];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aria', 'href', 'target'].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.PCrest = PCrest;

package/lib/components/index.d.ts

@@ -7,6 +7,7 @@ export * from './button-tile.wrapper';
 export * from './carousel.wrapper';
 export * from './checkbox-wrapper.wrapper';
 export * from './content-wrapper.wrapper';
+export * from './crest.wrapper';
 export * from './display.wrapper';
 export * from './divider.wrapper';
 export * from './fieldset.wrapper';
@@ -56,3 +57,4 @@ export * from './text-list.wrapper';
 export * from './text-list-item.wrapper';
 export * from './textarea-wrapper.wrapper';
 export * from './toast.wrapper';
+export * from './wordmark.wrapper';

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

@@ -22,6 +22,7 @@ export type PMarqueProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     trademark?: boolean;
 };
+/** @deprecated since v3.0.0, will be removed with next major release. Please use "p-wordmark" instead. */
 export declare const PMarque: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Add ARIA attributes.

package/lib/components/marque.wrapper.js

@@ -5,6 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
+/** @deprecated since v3.0.0, will be removed with next major release. Please use "p-wordmark" instead. */
 const PMarque = react.forwardRef(({ aria, href, size = 'responsive', target = '_self', trademark = true, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-marque');

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

@@ -0,0 +1,46 @@
+import { HTMLAttributes } from 'react';
+import type { SelectedAriaAttributes, WordmarkAriaAttribute, WordmarkSize, WordmarkTarget, Theme } from '../types';
+export type PWordmarkProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<WordmarkAriaAttribute>;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string;
+    /**
+     * Adapts sizing of wordmark.
+     */
+    size?: WordmarkSize;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: WordmarkTarget;
+    /**
+     * Adapts color depending on theme.
+     */
+    theme?: Theme;
+};
+export declare const PWordmark: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<WordmarkAriaAttribute>;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string;
+    /**
+     * Adapts sizing of wordmark.
+     */
+    size?: WordmarkSize;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: WordmarkTarget;
+    /**
+     * Adapts color depending on theme.
+     */
+    theme?: Theme;
+} & import("react").RefAttributes<HTMLElement>>;

package/lib/components/wordmark.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 PWordmark = react.forwardRef(({ aria, href, size = 'small', target = '_self', theme = 'light', className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-wordmark');
+    const propsToSync = [aria, href, size, target, theme];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aria', 'href', 'size', '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.PWordmark = PWordmark;

package/lib/types.d.ts

@@ -597,6 +597,11 @@ declare const CONTENT_WRAPPER_WIDTHS: readonly [
     "full"
 ];
 export declare type ContentWrapperWidth = typeof CONTENT_WRAPPER_WIDTHS[number];
+export declare type CrestTarget = LinkTarget;
+declare const CREST_ARIA_ATTRIBUTES: readonly [
+    "aria-label"
+];
+export declare type CrestAriaAttribute = (typeof CREST_ARIA_ATTRIBUTES)[number];
 declare const DISPLAY_TAGS: readonly [
     "h1",
     "h2",
@@ -1100,4 +1105,14 @@ export declare type ToastMessage = {
     text: string;
     state?: ToastState;
 };
+declare const WORDMARK_SIZES: readonly [
+    "small",
+    "inherit"
+];
+export declare type WordmarkSize = (typeof WORDMARK_SIZES)[number];
+export declare type WordmarkTarget = LinkTarget;
+declare const WORDMARK_ARIA_ATTRIBUTES: readonly [
+    "aria-label"
+];
+export declare type WordmarkAriaAttribute = (typeof WORDMARK_ARIA_ATTRIBUTES)[number];
 export {};

package/package.json

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

package/public-api.js

@@ -10,6 +10,7 @@ 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 crest_wrapper = require('./lib/components/crest.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');
@@ -59,6 +60,7 @@ var textList_wrapper = require('./lib/components/text-list.wrapper.js');
 var textListItem_wrapper = require('./lib/components/text-list-item.wrapper.js');
 var textareaWrapper_wrapper = require('./lib/components/textarea-wrapper.wrapper.js');
 var toast_wrapper = require('./lib/components/toast.wrapper.js');
+var wordmark_wrapper = require('./lib/components/wordmark.wrapper.js');
 var provider = require('./provider.js');
 var hooks = require('./hooks.js');
 var utils = require('./utils.js');
@@ -78,6 +80,7 @@ exports.PButtonTile = buttonTile_wrapper.PButtonTile;
 exports.PCarousel = carousel_wrapper.PCarousel;
 exports.PCheckboxWrapper = checkboxWrapper_wrapper.PCheckboxWrapper;
 exports.PContentWrapper = contentWrapper_wrapper.PContentWrapper;
+exports.PCrest = crest_wrapper.PCrest;
 exports.PDisplay = display_wrapper.PDisplay;
 exports.PDivider = divider_wrapper.PDivider;
 exports.PFieldset = fieldset_wrapper.PFieldset;
@@ -127,6 +130,7 @@ exports.PTextList = textList_wrapper.PTextList;
 exports.PTextListItem = textListItem_wrapper.PTextListItem;
 exports.PTextareaWrapper = textareaWrapper_wrapper.PTextareaWrapper;
 exports.PToast = toast_wrapper.PToast;
+exports.PWordmark = wordmark_wrapper.PWordmark;
 exports.PorscheDesignSystemProvider = provider.PorscheDesignSystemProvider;
 exports.skipCheckForPorscheDesignSystemProviderDuringTests = hooks.skipCheckForPorscheDesignSystemProviderDuringTests;
 exports.useToastManager = hooks.useToastManager;