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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (116) hide show
  1. package/CHANGELOG.md +65 -2
  2. package/OSS_NOTICE +65234 -2280
  3. package/bin/patchRemixRunProcessBrowserGlobalIdentifier.js +58 -0
  4. package/esm/lib/components/carousel.wrapper.js +3 -3
  5. package/esm/lib/components/content-wrapper.wrapper.js +1 -1
  6. package/esm/lib/components/divider.wrapper.js +1 -1
  7. package/esm/lib/components/model-signature.wrapper.js +22 -0
  8. package/esm/public-api.js +1 -0
  9. package/lib/components/carousel.wrapper.d.ts +21 -3
  10. package/lib/components/carousel.wrapper.js +3 -3
  11. package/lib/components/content-wrapper.wrapper.js +1 -1
  12. package/lib/components/divider.wrapper.js +1 -1
  13. package/lib/components/index.d.ts +1 -0
  14. package/lib/components/model-signature.wrapper.d.ts +38 -0
  15. package/lib/components/model-signature.wrapper.js +24 -0
  16. package/lib/components/text-list.wrapper.d.ts +6 -6
  17. package/lib/types.d.ts +89 -32
  18. package/package.json +6 -3
  19. package/public-api.js +2 -0
  20. package/ssr/components/dist/styles/esm/styles-entry.js +346 -296
  21. package/ssr/components/dist/utils/esm/utils-entry.js +48 -32
  22. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/components/carousel.wrapper.js +4 -4
  23. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/components/content-wrapper.wrapper.js +1 -1
  24. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/components/divider.wrapper.js +1 -1
  25. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/components/model-signature.wrapper.js +37 -0
  26. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/components/text-list-item.wrapper.js +2 -4
  27. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/accordion.js +1 -0
  28. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/banner.js +1 -0
  29. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button-pure.js +2 -1
  30. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button.js +2 -1
  31. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/carousel.js +3 -2
  32. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/inline-notification.js +1 -0
  33. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-pure.js +1 -0
  34. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-social.js +1 -0
  35. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-tile.js +1 -0
  36. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link.js +1 -0
  37. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/modal.js +1 -0
  38. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/model-signature.js +17 -0
  39. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/pagination.js +3 -2
  40. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/popover.js +1 -0
  41. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/scroller.js +2 -1
  42. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/segmented-control-item.js +1 -0
  43. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select-wrapper.js +2 -1
  44. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/state-message.js +1 -0
  45. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/stepper-horizontal-item.js +2 -1
  46. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/stepper-horizontal.js +1 -0
  47. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/switch.js +1 -0
  48. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/table-head-cell.js +1 -0
  49. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/table.js +1 -0
  50. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tabs-bar.js +1 -0
  51. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tabs.js +1 -0
  52. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tag-dismissible.js +1 -0
  53. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tag.js +1 -0
  54. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text-field-wrapper.js +2 -1
  55. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text-list-item.js +1 -3
  56. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text-list.js +5 -7
  57. package/ssr/components-react/projects/react-ssr-wrapper/src/public-api.js +2 -0
  58. package/ssr/esm/components/dist/styles/esm/styles-entry.js +319 -270
  59. package/ssr/esm/components/dist/utils/esm/utils-entry.js +46 -33
  60. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/carousel.wrapper.js +4 -4
  61. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/content-wrapper.wrapper.js +1 -1
  62. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/divider.wrapper.js +1 -1
  63. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/model-signature.wrapper.js +35 -0
  64. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/text-list-item.wrapper.js +2 -4
  65. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/accordion.js +3 -2
  66. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/banner.js +3 -2
  67. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button-group.js +2 -2
  68. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button-pure.js +4 -3
  69. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button.js +4 -3
  70. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/carousel.js +4 -3
  71. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/checkbox-wrapper.js +2 -2
  72. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/content-wrapper.js +2 -2
  73. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/display.js +2 -2
  74. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/divider.js +2 -2
  75. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/fieldset-wrapper.js +2 -2
  76. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/flex-item.js +2 -2
  77. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/flex.js +2 -2
  78. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/grid-item.js +2 -2
  79. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/grid.js +2 -2
  80. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/heading.js +2 -2
  81. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/headline.js +2 -2
  82. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/icon.js +2 -2
  83. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/inline-notification.js +3 -2
  84. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-pure.js +3 -2
  85. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-social.js +3 -2
  86. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-tile.js +3 -2
  87. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link.js +3 -2
  88. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/marque.js +2 -2
  89. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/modal.js +3 -2
  90. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/model-signature.js +15 -0
  91. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/pagination.js +3 -2
  92. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/popover.js +1 -0
  93. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/scroller.js +2 -1
  94. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/segmented-control-item.js +1 -0
  95. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select-wrapper.js +2 -1
  96. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/state-message.js +1 -0
  97. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/stepper-horizontal-item.js +2 -1
  98. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/stepper-horizontal.js +1 -0
  99. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/switch.js +1 -0
  100. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/table-head-cell.js +1 -0
  101. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/table.js +1 -0
  102. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tabs-bar.js +1 -0
  103. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tabs.js +1 -0
  104. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tag-dismissible.js +1 -0
  105. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tag.js +1 -0
  106. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text-field-wrapper.js +2 -1
  107. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text-list-item.js +2 -4
  108. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text-list.js +6 -8
  109. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/public-api.js +1 -0
  110. package/ssr/lib/components/carousel.wrapper.d.ts +21 -3
  111. package/ssr/lib/components/index.d.ts +1 -0
  112. package/ssr/lib/components/model-signature.wrapper.d.ts +38 -0
  113. package/ssr/lib/components/text-list.wrapper.d.ts +6 -6
  114. package/ssr/lib/dsr-components/model-signature.d.ts +5 -0
  115. package/ssr/lib/dsr-components/text-list-item.d.ts +1 -2
  116. package/ssr/lib/types.d.ts +89 -32
@@ -0,0 +1,58 @@
1
+ #!/usr/bin/env node
2
+ 'use strict';
3
+
4
+ var path = require('path');
5
+ var fs = require('fs');
6
+
7
+ function _interopNamespaceDefault(e) {
8
+ var n = Object.create(null);
9
+ if (e) {
10
+ Object.keys(e).forEach(function (k) {
11
+ if (k !== 'default') {
12
+ var d = Object.getOwnPropertyDescriptor(e, k);
13
+ Object.defineProperty(n, k, d.get ? d : {
14
+ enumerable: true,
15
+ get: function () { return e[k]; }
16
+ });
17
+ }
18
+ });
19
+ }
20
+ n.default = e;
21
+ return Object.freeze(n);
22
+ }
23
+
24
+ var path__namespace = /*#__PURE__*/_interopNamespaceDefault(path);
25
+ var fs__namespace = /*#__PURE__*/_interopNamespaceDefault(fs);
26
+
27
+ const patchRemixRunProcessBrowserGlobalIdentifier = () => {
28
+ const packageEntry = require.resolve('@remix-run/dev');
29
+ const compilerDirPath = path__namespace.resolve(packageEntry, '../compiler');
30
+ const [fileName] = fs__namespace
31
+ .readdirSync(compilerDirPath)
32
+ // file is currently called compileBrowser.js, but the other part is compilerServer.js
33
+ // that's why we also consider compilerBrowser.js to be on the safe side
34
+ .filter((fileName) => fileName.match(/^compiler?Browser\.js$/));
35
+ const filePath = path__namespace.resolve(compilerDirPath, fileName);
36
+ const filePathBackup = filePath.replace(/\.js$/, '-original$&');
37
+ if (!fs__namespace.existsSync(filePathBackup)) {
38
+ fs__namespace.copyFileSync(filePath, filePathBackup);
39
+ }
40
+ else {
41
+ fs__namespace.copyFileSync(filePathBackup, filePath);
42
+ }
43
+ const fileContent = fs__namespace.readFileSync(filePath, 'utf8');
44
+ // prepending should be safer than appending because JSON.stringify() might be multiline like in source
45
+ // https://github.com/remix-run/remix/blob/05ffb6e2db8f2a0e09caffad6e9b3c897c34cb7d/packages/remix-dev/compiler/compileBrowser.ts#L159-L163
46
+ const newFileContent = fileContent.replace(/"process\.env\.REMIX_DEV_SERVER_WS_PORT": JSON\.stringify\(.*/, '"process.browser": "true",\n $&');
47
+ const prettyFilePath = filePath.replace(packageEntry.substring(0, packageEntry.indexOf('/node_modules')), '.');
48
+ if (newFileContent.includes('"process.browser": "true"')) {
49
+ console.log(`Successfully patched ${prettyFilePath}`);
50
+ }
51
+ else {
52
+ console.error(`Patching ${prettyFilePath} failed`);
53
+ }
54
+ fs__namespace.writeFileSync(filePath, newFileContent);
55
+ };
56
+ patchRemixRunProcessBrowserGlobalIdentifier();
57
+
58
+ exports.patchRemixRunProcessBrowserGlobalIdentifier = patchRemixRunProcessBrowserGlobalIdentifier;
@@ -3,14 +3,14 @@ import { forwardRef, useRef } from 'react';
3
3
  import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
4
4
  import { syncRef } from '../../utils.js';
5
5
 
6
- const PCarousel = forwardRef(({ description, disablePagination = false, heading, intl = {}, onCarouselChange, rewind = true, slidesPerPage = 1, theme = 'light', wrapContent, className, ...rest }, ref) => {
6
+ const PCarousel = forwardRef(({ alignHeader = 'left', description, disablePagination = false, heading, intl = {}, onCarouselChange, rewind = true, slidesPerPage = 1, theme = 'light', width = 'basic', wrapContent, className, ...rest }, ref) => {
7
7
  const elementRef = useRef();
8
8
  useEventCallback(elementRef, 'carouselChange', onCarouselChange);
9
9
  const WebComponentTag = usePrefix('p-carousel');
10
- const propsToSync = [description, disablePagination, heading, intl, rewind, slidesPerPage, theme, wrapContent];
10
+ const propsToSync = [alignHeader, description, disablePagination, heading, intl, rewind, slidesPerPage, theme, width, wrapContent];
11
11
  useBrowserLayoutEffect(() => {
12
12
  const { current } = elementRef;
13
- ['description', 'disablePagination', 'heading', 'intl', 'rewind', 'slidesPerPage', 'theme', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
13
+ ['alignHeader', 'description', 'disablePagination', 'heading', 'intl', 'rewind', 'slidesPerPage', 'theme', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
14
14
  }, propsToSync);
15
15
  const props = {
16
16
  ...rest,
@@ -4,7 +4,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.j
4
4
  import { syncRef } from '../../utils.js';
5
5
 
6
6
  /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
7
- const PContentWrapper = forwardRef(({ backgroundColor = 'transparent', theme = 'light', width = 'basic', className, ...rest }, ref) => {
7
+ const PContentWrapper = forwardRef(({ backgroundColor = 'transparent', theme = 'light', width = 'extended', className, ...rest }, ref) => {
8
8
  const elementRef = useRef();
9
9
  const WebComponentTag = usePrefix('p-content-wrapper');
10
10
  const propsToSync = [backgroundColor, theme, width];
@@ -3,7 +3,7 @@ import { forwardRef, useRef } from 'react';
3
3
  import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
4
4
  import { syncRef } from '../../utils.js';
5
5
 
6
- const PDivider = forwardRef(({ color = 'neutral-contrast-low', orientation = 'horizontal', theme = 'light', className, ...rest }, ref) => {
6
+ const PDivider = forwardRef(({ color = 'contrast-low', orientation = 'horizontal', theme = 'light', className, ...rest }, ref) => {
7
7
  const elementRef = useRef();
8
8
  const WebComponentTag = usePrefix('p-divider');
9
9
  const propsToSync = [color, orientation, theme];
@@ -0,0 +1,22 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { forwardRef, useRef } from 'react';
3
+ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
4
+ import { syncRef } from '../../utils.js';
5
+
6
+ const PModelSignature = forwardRef(({ color = 'primary', model = '911', size = 'small', theme = 'light', className, ...rest }, ref) => {
7
+ const elementRef = useRef();
8
+ const WebComponentTag = usePrefix('p-model-signature');
9
+ const propsToSync = [color, model, size, theme];
10
+ useBrowserLayoutEffect(() => {
11
+ const { current } = elementRef;
12
+ ['color', 'model', 'size', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
13
+ }, propsToSync);
14
+ const props = {
15
+ ...rest,
16
+ class: useMergedClass(elementRef, className),
17
+ ref: syncRef(elementRef, ref)
18
+ };
19
+ return jsx(WebComponentTag, { ...props });
20
+ });
21
+
22
+ export { PModelSignature };
package/esm/public-api.js CHANGED
@@ -24,6 +24,7 @@ export { PLinkSocial } from './lib/components/link-social.wrapper.js';
24
24
  export { PLinkTile } from './lib/components/link-tile.wrapper.js';
25
25
  export { PMarque } from './lib/components/marque.wrapper.js';
26
26
  export { PModal } from './lib/components/modal.wrapper.js';
27
+ export { PModelSignature } from './lib/components/model-signature.wrapper.js';
27
28
  export { PPagination } from './lib/components/pagination.wrapper.js';
28
29
  export { PPopover } from './lib/components/popover.wrapper.js';
29
30
  export { PRadioButtonWrapper } from './lib/components/radio-button-wrapper.wrapper.js';
@@ -1,6 +1,10 @@
1
1
  import { HTMLAttributes } from 'react';
2
- import type { BreakpointCustomizable, CarouselInternationalization, CarouselChangeEvent, Theme } from '../types';
2
+ import type { CarouselAlignHeader, BreakpointCustomizable, CarouselInternationalization, CarouselChangeEvent, Theme, CarouselWidth } from '../types';
3
3
  export type PCarouselProps = Omit<HTMLAttributes<{}>, 'color'> & {
4
+ /**
5
+ * Alignment of heading and description
6
+ */
7
+ alignHeader?: CarouselAlignHeader;
4
8
  /**
5
9
  * Defines the description used in the carousel.
6
10
  */
@@ -34,11 +38,20 @@ export type PCarouselProps = Omit<HTMLAttributes<{}>, 'color'> & {
34
38
  */
35
39
  theme?: Theme;
36
40
  /**
37
- * 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.
41
+ * Defines the outer spacings between the carousel and the left and right screen sides.
42
+ */
43
+ width?: CarouselWidth;
44
+ /**
45
+ * Has no effect anymore
46
+ * @deprecated since v3.0.0, will be removed with next major release
38
47
  */
39
48
  wrapContent?: boolean;
40
49
  };
41
50
  export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
51
+ /**
52
+ * Alignment of heading and description
53
+ */
54
+ alignHeader?: CarouselAlignHeader;
42
55
  /**
43
56
  * Defines the description used in the carousel.
44
57
  */
@@ -72,7 +85,12 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<H
72
85
  */
73
86
  theme?: Theme;
74
87
  /**
75
- * 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.
88
+ * Defines the outer spacings between the carousel and the left and right screen sides.
89
+ */
90
+ width?: CarouselWidth;
91
+ /**
92
+ * Has no effect anymore
93
+ * @deprecated since v3.0.0, will be removed with next major release
76
94
  */
77
95
  wrapContent?: boolean;
78
96
  } & {
@@ -5,14 +5,14 @@ var react = require('react');
5
5
  var hooks = require('../../hooks.js');
6
6
  var utils = require('../../utils.js');
7
7
 
8
- const PCarousel = react.forwardRef(({ description, disablePagination = false, heading, intl = {}, onCarouselChange, rewind = true, slidesPerPage = 1, theme = 'light', wrapContent, className, ...rest }, ref) => {
8
+ const PCarousel = react.forwardRef(({ alignHeader = 'left', description, disablePagination = false, heading, intl = {}, onCarouselChange, rewind = true, slidesPerPage = 1, theme = 'light', width = 'basic', wrapContent, className, ...rest }, ref) => {
9
9
  const elementRef = react.useRef();
10
10
  hooks.useEventCallback(elementRef, 'carouselChange', onCarouselChange);
11
11
  const WebComponentTag = hooks.usePrefix('p-carousel');
12
- const propsToSync = [description, disablePagination, heading, intl, rewind, slidesPerPage, theme, wrapContent];
12
+ const propsToSync = [alignHeader, description, disablePagination, heading, intl, rewind, slidesPerPage, theme, width, wrapContent];
13
13
  hooks.useBrowserLayoutEffect(() => {
14
14
  const { current } = elementRef;
15
- ['description', 'disablePagination', 'heading', 'intl', 'rewind', 'slidesPerPage', 'theme', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
15
+ ['alignHeader', 'description', 'disablePagination', 'heading', 'intl', 'rewind', 'slidesPerPage', 'theme', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
16
16
  }, propsToSync);
17
17
  const props = {
18
18
  ...rest,
@@ -6,7 +6,7 @@ var hooks = require('../../hooks.js');
6
6
  var utils = require('../../utils.js');
7
7
 
8
8
  /** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
9
- const PContentWrapper = react.forwardRef(({ backgroundColor = 'transparent', theme = 'light', width = 'basic', className, ...rest }, ref) => {
9
+ const PContentWrapper = react.forwardRef(({ backgroundColor = 'transparent', theme = 'light', width = 'extended', className, ...rest }, ref) => {
10
10
  const elementRef = react.useRef();
11
11
  const WebComponentTag = hooks.usePrefix('p-content-wrapper');
12
12
  const propsToSync = [backgroundColor, theme, width];
@@ -5,7 +5,7 @@ var react = require('react');
5
5
  var hooks = require('../../hooks.js');
6
6
  var utils = require('../../utils.js');
7
7
 
8
- const PDivider = react.forwardRef(({ color = 'neutral-contrast-low', orientation = 'horizontal', theme = 'light', className, ...rest }, ref) => {
8
+ const PDivider = react.forwardRef(({ color = 'contrast-low', orientation = 'horizontal', theme = 'light', className, ...rest }, ref) => {
9
9
  const elementRef = react.useRef();
10
10
  const WebComponentTag = hooks.usePrefix('p-divider');
11
11
  const propsToSync = [color, orientation, theme];
@@ -23,6 +23,7 @@ export * from './link-social.wrapper';
23
23
  export * from './link-tile.wrapper';
24
24
  export * from './marque.wrapper';
25
25
  export * from './modal.wrapper';
26
+ export * from './model-signature.wrapper';
26
27
  export * from './pagination.wrapper';
27
28
  export * from './popover.wrapper';
28
29
  export * from './radio-button-wrapper.wrapper';
@@ -0,0 +1,38 @@
1
+ import { HTMLAttributes } from 'react';
2
+ import type { ModelSignatureColor, ModelSignatureModel, ModelSignatureSize, Theme } from '../types';
3
+ export type PModelSignatureProps = Omit<HTMLAttributes<{}>, 'color'> & {
4
+ /**
5
+ * Adapts the color of the component.
6
+ */
7
+ color?: ModelSignatureColor;
8
+ /**
9
+ * Adapts the model of the component.
10
+ */
11
+ model?: ModelSignatureModel;
12
+ /**
13
+ * Adapts the size of the component.
14
+ */
15
+ size?: ModelSignatureSize;
16
+ /**
17
+ * Adapts color depending on theme.
18
+ */
19
+ theme?: Theme;
20
+ };
21
+ export declare const PModelSignature: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
22
+ /**
23
+ * Adapts the color of the component.
24
+ */
25
+ color?: ModelSignatureColor;
26
+ /**
27
+ * Adapts the model of the component.
28
+ */
29
+ model?: ModelSignatureModel;
30
+ /**
31
+ * Adapts the size of the component.
32
+ */
33
+ size?: ModelSignatureSize;
34
+ /**
35
+ * Adapts color depending on theme.
36
+ */
37
+ theme?: Theme;
38
+ } & import("react").RefAttributes<HTMLElement>>;
@@ -0,0 +1,24 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+ var react = require('react');
5
+ var hooks = require('../../hooks.js');
6
+ var utils = require('../../utils.js');
7
+
8
+ const PModelSignature = react.forwardRef(({ color = 'primary', model = '911', size = 'small', theme = 'light', className, ...rest }, ref) => {
9
+ const elementRef = react.useRef();
10
+ const WebComponentTag = hooks.usePrefix('p-model-signature');
11
+ const propsToSync = [color, model, size, theme];
12
+ hooks.useBrowserLayoutEffect(() => {
13
+ const { current } = elementRef;
14
+ ['color', 'model', 'size', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
15
+ }, propsToSync);
16
+ const props = {
17
+ ...rest,
18
+ class: hooks.useMergedClass(elementRef, className),
19
+ ref: utils.syncRef(elementRef, ref)
20
+ };
21
+ return jsxRuntime.jsx(WebComponentTag, { ...props });
22
+ });
23
+
24
+ exports.PModelSignature = PModelSignature;
@@ -2,29 +2,29 @@ import { HTMLAttributes } from 'react';
2
2
  import type { ListType, OrderType, Theme } from '../types';
3
3
  export type PTextListProps = Omit<HTMLAttributes<{}>, 'color'> & {
4
4
  /**
5
- * The type of the text list.
5
+ * The type of the list.
6
6
  */
7
7
  listType?: ListType;
8
8
  /**
9
- * The list style type of an ordered list.
9
+ * The list style type of ordered list. Only has effect when list type is set to 'ordered'.
10
10
  */
11
11
  orderType?: OrderType;
12
12
  /**
13
- * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
13
+ * Adapts the text color depending on the theme.
14
14
  */
15
15
  theme?: Theme;
16
16
  };
17
17
  export declare const PTextList: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
18
18
  /**
19
- * The type of the text list.
19
+ * The type of the list.
20
20
  */
21
21
  listType?: ListType;
22
22
  /**
23
- * The list style type of an ordered list.
23
+ * The list style type of ordered list. Only has effect when list type is set to 'ordered'.
24
24
  */
25
25
  orderType?: OrderType;
26
26
  /**
27
- * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
27
+ * Adapts the text color depending on the theme.
28
28
  */
29
29
  theme?: Theme;
30
30
  } & {
package/lib/types.d.ts CHANGED
@@ -262,20 +262,20 @@ declare const TEXT_ALIGNS: readonly [
262
262
  export declare type TextAlign = typeof TEXT_ALIGNS[number];
263
263
  declare const TEXT_COLORS: readonly [
264
264
  "primary",
265
- "brand",
266
- "default",
267
265
  "contrast-low",
268
- "neutral-contrast-low",
269
266
  "contrast-medium",
270
- "neutral-contrast-medium",
271
267
  "contrast-high",
272
- "neutral-contrast-high",
273
268
  "notification-success",
274
269
  "notification-warning",
275
270
  "notification-error",
276
271
  "notification-info",
277
- "notification-neutral",
278
- "inherit"
272
+ "inherit",
273
+ "brand",
274
+ "default",
275
+ "neutral-contrast-low",
276
+ "neutral-contrast-medium",
277
+ "neutral-contrast-high",
278
+ "notification-neutral"
279
279
  ];
280
280
  export declare type TextColor = typeof TEXT_COLORS[number];
281
281
  declare const TEXT_SIZES: readonly [
@@ -288,11 +288,11 @@ declare const TEXT_SIZES: readonly [
288
288
  ];
289
289
  export declare type TextSize = typeof TEXT_SIZES[number];
290
290
  declare const TEXT_WEIGHTS: readonly [
291
- "thin",
292
291
  "regular",
293
- "semibold",
294
292
  "semi-bold",
295
- "bold"
293
+ "bold",
294
+ "thin",
295
+ "semibold"
296
296
  ];
297
297
  export declare type TextWeight = typeof TEXT_WEIGHTS[number];
298
298
  declare const LINK_TARGETS: readonly [
@@ -503,15 +503,15 @@ export declare type AccordionChangeEvent = {
503
503
  };
504
504
  export declare type AccordionTag = HeadingTag;
505
505
  declare const BANNER_STATES: readonly [
506
- "error",
507
- "warning",
508
506
  "info",
507
+ "warning",
508
+ "error",
509
509
  "neutral"
510
510
  ];
511
511
  export declare type BannerState = typeof BANNER_STATES[number];
512
512
  declare const BANNER_WIDTHS: readonly [
513
- "basic",
514
513
  "extended",
514
+ "basic",
515
515
  "fluid"
516
516
  ];
517
517
  export declare type BannerWidth = typeof BANNER_WIDTHS[number];
@@ -520,6 +520,16 @@ declare const BUTTON_GROUP_DIRECTIONS: readonly [
520
520
  "column"
521
521
  ];
522
522
  export declare type ButtonGroupDirection = typeof BUTTON_GROUP_DIRECTIONS[number];
523
+ declare const CAROUSEL_WIDTHS: readonly [
524
+ "basic",
525
+ "extended"
526
+ ];
527
+ export declare type CarouselWidth = typeof CAROUSEL_WIDTHS[number];
528
+ declare const CAROUSEL_ALIGN_HEADERS: readonly [
529
+ "left",
530
+ "center"
531
+ ];
532
+ export declare type CarouselAlignHeader = typeof CAROUSEL_ALIGN_HEADERS[number];
523
533
  export declare type CarouselInternationalization = Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>>;
524
534
  export declare type CarouselChangeEvent = {
525
535
  activeIndex: number;
@@ -560,6 +570,9 @@ declare const DISPLAY_COLORS: readonly [
560
570
  export declare type DisplayColor = typeof DISPLAY_COLORS[number];
561
571
  export declare type DisplayAlign = TextAlign;
562
572
  declare const DIVIDER_COLORS: readonly [
573
+ "contrast-low",
574
+ "contrast-medium",
575
+ "contrast-high",
563
576
  "neutral-contrast-high",
564
577
  "neutral-contrast-medium",
565
578
  "neutral-contrast-low"
@@ -757,13 +770,31 @@ declare const ICON_ARIA_ATTRIBUTES: readonly [
757
770
  ];
758
771
  export declare type IconAriaAttribute = typeof ICON_ARIA_ATTRIBUTES[number];
759
772
  export declare type IconSize = TextSize;
760
- export declare type IconColor = TextColor;
773
+ declare const ICON_COLORS: readonly [
774
+ "primary",
775
+ "contrast-low",
776
+ "contrast-medium",
777
+ "contrast-high",
778
+ "notification-success",
779
+ "notification-warning",
780
+ "notification-error",
781
+ "notification-info",
782
+ "inherit",
783
+ "brand",
784
+ "default",
785
+ "neutral-contrast-low",
786
+ "neutral-contrast-medium",
787
+ "neutral-contrast-high",
788
+ "notification-neutral",
789
+ "disabled"
790
+ ];
791
+ export declare type IconColor = typeof ICON_COLORS[number];
761
792
  declare const INLINE_NOTIFICATION_STATES: readonly [
762
- "error",
763
- "warning",
793
+ "success",
764
794
  "info",
765
- "neutral",
766
- "success"
795
+ "warning",
796
+ "error",
797
+ "neutral"
767
798
  ];
768
799
  export declare type InlineNotificationState = typeof INLINE_NOTIFICATION_STATES[number];
769
800
  declare const LINK_ARIA_ATTRIBUTES: readonly [
@@ -808,6 +839,32 @@ declare const MODAL_ARIA_ATTRIBUTES: readonly [
808
839
  "aria-label"
809
840
  ];
810
841
  export declare type ModalAriaAttribute = typeof MODAL_ARIA_ATTRIBUTES[number];
842
+ declare const MODEL_SIGNATURES_MANIFEST: {
843
+ "718": string;
844
+ "911": string;
845
+ boxster: string;
846
+ cayenne: string;
847
+ cayman: string;
848
+ macan: string;
849
+ panamera: string;
850
+ taycan: string;
851
+ "turbo-s": string;
852
+ turbo: string;
853
+ };
854
+ declare const MODEL_SIGNATURE_SIZES: readonly [
855
+ "small",
856
+ "inherit"
857
+ ];
858
+ export declare type ModelSignatureSize = typeof MODEL_SIGNATURE_SIZES[number];
859
+ export declare type ModelSignatureModel = keyof typeof MODEL_SIGNATURES_MANIFEST;
860
+ declare const MODEL_SIGNATURE_COLORS: readonly [
861
+ "primary",
862
+ "contrast-low",
863
+ "contrast-medium",
864
+ "contrast-high",
865
+ "inherit"
866
+ ];
867
+ export declare type ModelSignatureColor = typeof MODEL_SIGNATURE_COLORS[number];
811
868
  declare const PAGINATION_NUMBER_OF_PAGE_LINKS: readonly [
812
869
  5,
813
870
  7
@@ -887,29 +944,29 @@ export declare type TabChangeEvent = {
887
944
  activeTabIndex: number;
888
945
  };
889
946
  export declare type TabGradientColorTheme = GradientColorTheme;
947
+ declare const TAG_DISMISSIBLE_COLORS: readonly [
948
+ "background-surface",
949
+ "background-base",
950
+ "background-default"
951
+ ];
952
+ export declare type TagDismissibleColor = typeof TAG_DISMISSIBLE_COLORS[number];
953
+ declare const TAG_DISMISSIBLE_ARIA_ATTRIBUTES: readonly [
954
+ "aria-label"
955
+ ];
956
+ export declare type TagDismissibleAriaAttribute = typeof TAG_DISMISSIBLE_ARIA_ATTRIBUTES[number];
890
957
  declare const TAG_COLORS: readonly [
891
958
  "background-surface",
892
- "background-default",
893
959
  "background-base",
894
- "neutral-contrast-high",
960
+ "background-default",
895
961
  "primary",
896
- "notification-neutral",
897
962
  "notification-info",
898
963
  "notification-warning",
899
964
  "notification-success",
900
- "notification-error"
965
+ "notification-error",
966
+ "neutral-contrast-high",
967
+ "notification-neutral"
901
968
  ];
902
969
  export declare type TagColor = typeof TAG_COLORS[number];
903
- declare const TAG_DISMISSIBLE_COLORS: readonly [
904
- "background-surface",
905
- "background-default",
906
- "background-base"
907
- ];
908
- export declare type TagDismissibleColor = typeof TAG_DISMISSIBLE_COLORS[number];
909
- declare const TAG_DISMISSIBLE_ARIA_ATTRIBUTES: readonly [
910
- "aria-label"
911
- ];
912
- export declare type TagDismissibleAriaAttribute = typeof TAG_DISMISSIBLE_ARIA_ATTRIBUTES[number];
913
970
  declare const TEXT_TAGS: readonly [
914
971
  "p",
915
972
  "span",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@porsche-design-system/components-react",
3
- "version": "3.0.0-alpha.0",
3
+ "version": "3.0.0-alpha.2",
4
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.",
5
5
  "keywords": [
6
6
  "porsche",
@@ -17,7 +17,7 @@
17
17
  "license": "SEE LICENSE IN LICENSE",
18
18
  "homepage": "https://designsystem.porsche.com",
19
19
  "dependencies": {
20
- "@porsche-design-system/components-js": "3.0.0-alpha.0"
20
+ "@porsche-design-system/components-js": "3.0.0-alpha.2"
21
21
  },
22
22
  "peerDependencies": {
23
23
  "react": ">=17.0.0 <19.0.0",
@@ -25,5 +25,8 @@
25
25
  },
26
26
  "main": "public-api.js",
27
27
  "module": "esm/public-api.js",
28
- "types": "public-api.d.ts"
28
+ "types": "public-api.d.ts",
29
+ "bin": {
30
+ "patchRemixRunProcessBrowserGlobalIdentifier": "./bin/patchRemixRunProcessBrowserGlobalIdentifier.js"
31
+ }
29
32
  }
package/public-api.js CHANGED
@@ -26,6 +26,7 @@ var linkSocial_wrapper = require('./lib/components/link-social.wrapper.js');
26
26
  var linkTile_wrapper = require('./lib/components/link-tile.wrapper.js');
27
27
  var marque_wrapper = require('./lib/components/marque.wrapper.js');
28
28
  var modal_wrapper = require('./lib/components/modal.wrapper.js');
29
+ var modelSignature_wrapper = require('./lib/components/model-signature.wrapper.js');
29
30
  var pagination_wrapper = require('./lib/components/pagination.wrapper.js');
30
31
  var popover_wrapper = require('./lib/components/popover.wrapper.js');
31
32
  var radioButtonWrapper_wrapper = require('./lib/components/radio-button-wrapper.wrapper.js');
@@ -90,6 +91,7 @@ exports.PLinkSocial = linkSocial_wrapper.PLinkSocial;
90
91
  exports.PLinkTile = linkTile_wrapper.PLinkTile;
91
92
  exports.PMarque = marque_wrapper.PMarque;
92
93
  exports.PModal = modal_wrapper.PModal;
94
+ exports.PModelSignature = modelSignature_wrapper.PModelSignature;
93
95
  exports.PPagination = pagination_wrapper.PPagination;
94
96
  exports.PPopover = popover_wrapper.PPopover;
95
97
  exports.PRadioButtonWrapper = radioButtonWrapper_wrapper.PRadioButtonWrapper;