@porsche-design-system/components-react 3.0.0 → 3.1.0-rc.0

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 (14) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/esm/lib/components/marque.wrapper.js +3 -3
  3. package/lib/components/marque.wrapper.d.ts +11 -3
  4. package/lib/components/marque.wrapper.js +3 -3
  5. package/lib/types.d.ts +10 -5
  6. package/package.json +2 -2
  7. package/ssr/components/dist/utils/esm/utils-entry.js +2 -3
  8. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/components/marque.wrapper.js +4 -4
  9. package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/marque.js +1 -1
  10. package/ssr/esm/components/dist/utils/esm/utils-entry.js +2 -3
  11. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/marque.wrapper.js +4 -4
  12. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/marque.js +1 -1
  13. package/ssr/lib/components/marque.wrapper.d.ts +11 -3
  14. package/ssr/lib/types.d.ts +10 -5
package/CHANGELOG.md CHANGED
@@ -9,6 +9,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
9
9
 
10
10
  ### [Unreleased]
11
11
 
12
+ ### [3.1.0-rc.0] - 2023-05-24
13
+
14
+ #### Added
15
+
16
+ - `Marque` now has a `variant` property, including 75 years variant
17
+ [#2575](https://github.com/porsche-design-system/porsche-design-system/pull/2575)
18
+
12
19
  ### [3.0.0] - 2023-05-11
13
20
 
14
21
  ### [3.0.0-rc.3] - 2023-05-10
package/esm/lib/components/marque.wrapper.js CHANGED
@@ -4,13 +4,13 @@ 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. Please use "p-wordmark" instead. */
7
- const PMarque = forwardRef(({ aria, href, size = 'responsive', target = '_self', trademark = true, className, ...rest }, ref) => {
7
+ const PMarque = forwardRef(({ aria, href, size = 'responsive', target = '_self', trademark = true, variant = 'default', className, ...rest }, ref) => {
8
8
  const elementRef = useRef();
9
9
  const WebComponentTag = usePrefix('p-marque');
10
- const propsToSync = [aria, href, size, target, trademark];
10
+ const propsToSync = [aria, href, size, target, trademark, variant];
11
11
  useBrowserLayoutEffect(() => {
12
12
  const { current } = elementRef;
13
- ['aria', 'href', 'size', 'target', 'trademark'].forEach((propName, i) => (current[propName] = propsToSync[i]));
13
+ ['aria', 'href', 'size', 'target', 'trademark', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
14
14
  }, propsToSync);
15
15
  const props = {
16
16
  ...rest,
package/lib/components/marque.wrapper.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { HTMLAttributes } from 'react';
2
- import type { SelectedAriaAttributes, MarqueAriaAttribute, MarqueSize, MarqueTarget } from '../types';
2
+ import type { SelectedAriaAttributes, MarqueAriaAttribute, MarqueSize, MarqueTarget, MarqueVariant } from '../types';
3
3
  export type PMarqueProps = Omit<HTMLAttributes<{}>, 'color'> & {
4
4
  /**
5
5
  * Add ARIA attributes.
@@ -18,9 +18,13 @@ export type PMarqueProps = Omit<HTMLAttributes<{}>, 'color'> & {
18
18
  */
19
19
  target?: MarqueTarget;
20
20
  /**
21
- * Show/hide trademark sign.
21
+ * Show/hide trademark sign (only has effect when variant is set to default).
22
22
  */
23
23
  trademark?: boolean;
24
+ /**
25
+ * Shows marque in special editions
26
+ */
27
+ variant?: MarqueVariant;
24
28
  };
25
29
  /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-wordmark" instead. */
26
30
  export declare const PMarque: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
@@ -41,7 +45,11 @@ export declare const PMarque: import("react").ForwardRefExoticComponent<Omit<HTM
41
45
  */
42
46
  target?: MarqueTarget;
43
47
  /**
44
- * Show/hide trademark sign.
48
+ * Show/hide trademark sign (only has effect when variant is set to default).
45
49
  */
46
50
  trademark?: boolean;
51
+ /**
52
+ * Shows marque in special editions
53
+ */
54
+ variant?: MarqueVariant;
47
55
  } & import("react").RefAttributes<HTMLElement>>;
package/lib/components/marque.wrapper.js CHANGED
@@ -6,13 +6,13 @@ 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. Please use "p-wordmark" instead. */
9
- const PMarque = react.forwardRef(({ aria, href, size = 'responsive', target = '_self', trademark = true, className, ...rest }, ref) => {
9
+ const PMarque = react.forwardRef(({ aria, href, size = 'responsive', target = '_self', trademark = true, variant = 'default', className, ...rest }, ref) => {
10
10
  const elementRef = react.useRef();
11
11
  const WebComponentTag = hooks.usePrefix('p-marque');
12
- const propsToSync = [aria, href, size, target, trademark];
12
+ const propsToSync = [aria, href, size, target, trademark, variant];
13
13
  hooks.useBrowserLayoutEffect(() => {
14
14
  const { current } = elementRef;
15
- ['aria', 'href', 'size', 'target', 'trademark'].forEach((propName, i) => (current[propName] = propsToSync[i]));
15
+ ['aria', 'href', 'size', 'target', 'trademark', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
16
16
  }, propsToSync);
17
17
  const props = {
18
18
  ...rest,
package/lib/types.d.ts CHANGED
@@ -921,17 +921,22 @@ export type LinkTileModelSignatureHeadingTag = (typeof LINK_TILE_MODEL_SIGNATURE
921
921
  export type LinkTileModelSignatureWeight = TileWeight;
922
922
  export type LinkTileModelSignatureAspectRatio = TileAspectRatio;
923
923
  export type LinkTileModelSignatureLinkDirection = GroupDirection;
924
+ declare const MARQUE_VARIANTS: readonly [
925
+ "75-years",
926
+ "default"
927
+ ];
928
+ export type MarqueVariant = (typeof MARQUE_VARIANTS)[number];
929
+ export type MarqueTarget = LinkTarget;
930
+ declare const MARQUE_ARIA_ATTRIBUTES: readonly [
931
+ "aria-label"
932
+ ];
933
+ export type MarqueAriaAttribute = (typeof MARQUE_ARIA_ATTRIBUTES)[number];
924
934
  declare const MARQUE_SIZES: readonly [
925
935
  "responsive",
926
936
  "small",
927
937
  "medium"
928
938
  ];
929
939
  export type MarqueSize = typeof MARQUE_SIZES[number];
930
- export type MarqueTarget = LinkTarget;
931
- declare const MARQUE_ARIA_ATTRIBUTES: readonly [
932
- "aria-label"
933
- ];
934
- export type MarqueAriaAttribute = typeof MARQUE_ARIA_ATTRIBUTES[number];
935
940
  declare const MODAL_ARIA_ATTRIBUTES: readonly [
936
941
  "aria-label"
937
942
  ];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@porsche-design-system/components-react",
3
- "version": "3.0.0",
3
+ "version": "3.1.0-rc.0",
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"
20
+ "@porsche-design-system/components-js": "3.1.0-rc.0"
21
21
  },
22
22
  "peerDependencies": {
23
23
  "react": ">=17.0.0 <19.0.0",
package/ssr/components/dist/utils/esm/utils-entry.js CHANGED
@@ -3795,10 +3795,9 @@ const getContentAriaAttributes = (state, labelId, descriptionId) => {
3795
3795
  };
3796
3796
 
3797
3797
  const CDN_BASE_URL$1 = (typeof window !== 'undefined' && window.PORSCHE_DESIGN_SYSTEM_CDN === 'cn' ? 'https://cdn.ui.porsche.cn' : 'https://cdn.ui.porsche.com') + '/porsche-design-system/marque';
3798
- const MARQUES_MANIFEST = { "porscheMarqueTrademark": { "medium": { "1x": { "png": "porsche-marque-trademark.medium.min.da075315857e239ff46bf4c150648ff0@1x.png", "webp": "porsche-marque-trademark.medium.min.5c6af9aa7946fea34f60c8f8c95d0188@1x.webp" }, "2x": { "png": "porsche-marque-trademark.medium.min.aa801f42028b1c385a5e26ae115da598@2x.png", "webp": "porsche-marque-trademark.medium.min.fff6e9b91481cc5b1fc6c9b62987ccaf@2x.webp" }, "3x": { "png": "porsche-marque-trademark.medium.min.824818d15eaf445f50e0a2391613f214@3x.png", "webp": "porsche-marque-trademark.medium.min.f67092ff6b5f4ecb4add73d6ae153db0@3x.webp" } }, "small": { "1x": { "png": "porsche-marque-trademark.small.min.020244b41a29323e2a7932a264514cdf@1x.png", "webp": "porsche-marque-trademark.small.min.783639706bead66b2d56e3b8b64bd61f@1x.webp" }, "2x": { "png": "porsche-marque-trademark.small.min.92184fae44511ceda8320443c17110b1@2x.png", "webp": "porsche-marque-trademark.small.min.760a57efa93d4e7e16e26128ec7ead46@2x.webp" }, "3x": { "png": "porsche-marque-trademark.small.min.fd545cea4298f5d797246d5805711646@3x.png", "webp": "porsche-marque-trademark.small.min.1726036a7829347e1e24d1eb54fc0d64@3x.webp" } } }, "porscheMarque": { "medium": { "1x": { "png": "porsche-marque.medium.min.a98627440b05154565f9f9dfc1ad6187@1x.png", "webp": "porsche-marque.medium.min.fa908e4dfdc5536b0e933e1670d20e1f@1x.webp" }, "2x": { "png": "porsche-marque.medium.min.089d6dd560fff7a2bf613ae6d528990e@2x.png", "webp": "porsche-marque.medium.min.7f0893dc57f2607a2cb0b817d96cb985@2x.webp" }, "3x": { "png": "porsche-marque.medium.min.2cb874345ef290831c929f6caabfeef8@3x.png", "webp": "porsche-marque.medium.min.3534cf066b4e2e737dca62de495f9616@3x.webp" } }, "small": { "1x": { "png": "porsche-marque.small.min.ac2042736af5512cf547c89fa7924c4f@1x.png", "webp": "porsche-marque.small.min.005debed5bf72cf0a9a791b1521f5e1d@1x.webp" }, "2x": { "png": "porsche-marque.small.min.22f1e9dc90399d9a5287eda689b60dba@2x.png", "webp": "porsche-marque.small.min.df4317325d04ffef28c7839aa6d499a0@2x.webp" }, "3x": { "png": "porsche-marque.small.min.49209245f04eadef8817b9bbae80d3e1@3x.png", "webp": "porsche-marque.small.min.cfd6149aaa3bc5b3b522538e5f650890@3x.webp" } } } };
3799
-
3798
+ const MARQUES_MANIFEST = { "porscheMarqueTrademark": { "medium": { "1x": { "png": "porsche-marque-trademark.medium.min.da075315857e239ff46bf4c150648ff0@1x.png", "webp": "porsche-marque-trademark.medium.min.5c6af9aa7946fea34f60c8f8c95d0188@1x.webp" }, "2x": { "png": "porsche-marque-trademark.medium.min.aa801f42028b1c385a5e26ae115da598@2x.png", "webp": "porsche-marque-trademark.medium.min.fff6e9b91481cc5b1fc6c9b62987ccaf@2x.webp" }, "3x": { "png": "porsche-marque-trademark.medium.min.824818d15eaf445f50e0a2391613f214@3x.png", "webp": "porsche-marque-trademark.medium.min.f67092ff6b5f4ecb4add73d6ae153db0@3x.webp" } }, "small": { "1x": { "png": "porsche-marque-trademark.small.min.020244b41a29323e2a7932a264514cdf@1x.png", "webp": "porsche-marque-trademark.small.min.783639706bead66b2d56e3b8b64bd61f@1x.webp" }, "2x": { "png": "porsche-marque-trademark.small.min.92184fae44511ceda8320443c17110b1@2x.png", "webp": "porsche-marque-trademark.small.min.760a57efa93d4e7e16e26128ec7ead46@2x.webp" }, "3x": { "png": "porsche-marque-trademark.small.min.fd545cea4298f5d797246d5805711646@3x.png", "webp": "porsche-marque-trademark.small.min.1726036a7829347e1e24d1eb54fc0d64@3x.webp" } } }, "porscheMarque": { "medium": { "1x": { "png": "porsche-marque.medium.min.a98627440b05154565f9f9dfc1ad6187@1x.png", "webp": "porsche-marque.medium.min.fa908e4dfdc5536b0e933e1670d20e1f@1x.webp" }, "2x": { "png": "porsche-marque.medium.min.089d6dd560fff7a2bf613ae6d528990e@2x.png", "webp": "porsche-marque.medium.min.7f0893dc57f2607a2cb0b817d96cb985@2x.webp" }, "3x": { "png": "porsche-marque.medium.min.2cb874345ef290831c929f6caabfeef8@3x.png", "webp": "porsche-marque.medium.min.3534cf066b4e2e737dca62de495f9616@3x.webp" } }, "small": { "1x": { "png": "porsche-marque.small.min.ac2042736af5512cf547c89fa7924c4f@1x.png", "webp": "porsche-marque.small.min.005debed5bf72cf0a9a791b1521f5e1d@1x.webp" }, "2x": { "png": "porsche-marque.small.min.22f1e9dc90399d9a5287eda689b60dba@2x.png", "webp": "porsche-marque.small.min.df4317325d04ffef28c7839aa6d499a0@2x.webp" }, "3x": { "png": "porsche-marque.small.min.49209245f04eadef8817b9bbae80d3e1@3x.png", "webp": "porsche-marque.small.min.cfd6149aaa3bc5b3b522538e5f650890@3x.webp" } } }, "porscheMarque75": { "medium": { "1x": { "png": "porsche-marque75.medium.min.0a02e2256062de963f2fef2c02d20200@1x.png", "webp": "porsche-marque75.medium.min.99b2d657558f0531d639782974e8fd06@1x.webp" }, "2x": { "png": "porsche-marque75.medium.min.1d41ecfb8f5277d3f4bd65d25d22eea3@2x.png", "webp": "porsche-marque75.medium.min.e32580cd1ac179e354ed8fcb31694168@2x.webp" }, "3x": { "png": "porsche-marque75.medium.min.373bcb5f89d31c8b6084e66e902b9f4c@3x.png", "webp": "porsche-marque75.medium.min.4a003d1e5e81db062bf92d52ba797087@3x.webp" } }, "small": { "1x": { "png": "porsche-marque75.small.min.f5b37fe12cd4487432ff77fdd8469f7d@1x.png", "webp": "porsche-marque75.small.min.146b06cffe2b11c07f3113a51f337b98@1x.webp" }, "2x": { "png": "porsche-marque75.small.min.20d86908f2190640a6f24fce1ee49035@2x.png", "webp": "porsche-marque75.small.min.025770f8db54857874c130999b370ed8@2x.webp" }, "3x": { "png": "porsche-marque75.small.min.e89b13e14a088a273107bf1057f7f67d@3x.png", "webp": "porsche-marque75.small.min.a725d2ec7bd07be17afd8feb2589b156@3x.webp" } } } };
3800
3799
  const cdnBaseUrl = CDN_BASE_URL$1 ;
3801
- const getInnerManifest = (trademark) => MARQUES_MANIFEST[`porscheMarque${trademark ? 'Trademark' : ''}`];
3800
+ const getInnerManifest = (variant, trademark) => MARQUES_MANIFEST[variant === '75-years' ? 'porscheMarque75' : `porscheMarque${trademark ? 'Trademark' : ''}`];
3802
3801
  const buildSrcSet = (innerManifest, size, format) =>
3803
3802
  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
3804
3803
  Object.entries(innerManifest[size])
package/ssr/components-react/projects/react-ssr-wrapper/src/lib/components/marque.wrapper.js CHANGED
@@ -7,13 +7,13 @@ var utils = require('../../utils.js');
7
7
  var marque = require('../dsr-components/marque.js');
8
8
 
9
9
  /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-wordmark" instead. */
10
- const PMarque = react.forwardRef(({ aria, href, size = 'responsive', target = '_self', trademark = true, className, ...rest }, ref) => {
10
+ const PMarque = react.forwardRef(({ aria, href, size = 'responsive', target = '_self', trademark = true, variant = 'default', className, ...rest }, ref) => {
11
11
  const elementRef = react.useRef();
12
12
  const WebComponentTag = hooks.usePrefix('p-marque');
13
- const propsToSync = [aria, href, size, target, trademark];
13
+ const propsToSync = [aria, href, size, target, trademark, variant];
14
14
  hooks.useBrowserLayoutEffect(() => {
15
15
  const { current } = elementRef;
16
- ['aria', 'href', 'size', 'target', 'trademark'].forEach((propName, i) => (current[propName] = propsToSync[i]));
16
+ ['aria', 'href', 'size', 'target', 'trademark', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
17
17
  }, propsToSync);
18
18
  // @ts-ignore
19
19
  if (!process.browser) {
@@ -24,7 +24,7 @@ const PMarque = react.forwardRef(({ aria, href, size = 'responsive', target = '_
24
24
  // @ts-ignore
25
25
  ...(!process.browser
26
26
  ? {
27
- children: (jsxRuntime.jsx(marque.DSRMarque, { ...{ aria, href, size, target, trademark } })),
27
+ children: (jsxRuntime.jsx(marque.DSRMarque, { ...{ aria, href, size, target, trademark, variant } })),
28
28
  }
29
29
  : {
30
30
  suppressHydrationWarning: true,
package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/marque.js CHANGED
@@ -10,7 +10,7 @@ var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entr
10
10
  /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-wordmark" instead. */
11
11
  class DSRMarque extends react.Component {
12
12
  render() {
13
- const innerManifest = utilsEntry.getInnerManifest(this.props.trademark);
13
+ const innerManifest = utilsEntry.getInnerManifest(this.props.variant, this.props.trademark);
14
14
  const mediumMedia = `(min-width: ${'1300'}px)`;
15
15
  const picture = (jsxRuntime.jsxs("picture", { children: [this.props.size === 'responsive'
16
16
  ? [
package/ssr/esm/components/dist/utils/esm/utils-entry.js CHANGED
@@ -3793,10 +3793,9 @@ const getContentAriaAttributes = (state, labelId, descriptionId) => {
3793
3793
  };
3794
3794
 
3795
3795
  const CDN_BASE_URL$1 = (typeof window !== 'undefined' && window.PORSCHE_DESIGN_SYSTEM_CDN === 'cn' ? 'https://cdn.ui.porsche.cn' : 'https://cdn.ui.porsche.com') + '/porsche-design-system/marque';
3796
- const MARQUES_MANIFEST = { "porscheMarqueTrademark": { "medium": { "1x": { "png": "porsche-marque-trademark.medium.min.da075315857e239ff46bf4c150648ff0@1x.png", "webp": "porsche-marque-trademark.medium.min.5c6af9aa7946fea34f60c8f8c95d0188@1x.webp" }, "2x": { "png": "porsche-marque-trademark.medium.min.aa801f42028b1c385a5e26ae115da598@2x.png", "webp": "porsche-marque-trademark.medium.min.fff6e9b91481cc5b1fc6c9b62987ccaf@2x.webp" }, "3x": { "png": "porsche-marque-trademark.medium.min.824818d15eaf445f50e0a2391613f214@3x.png", "webp": "porsche-marque-trademark.medium.min.f67092ff6b5f4ecb4add73d6ae153db0@3x.webp" } }, "small": { "1x": { "png": "porsche-marque-trademark.small.min.020244b41a29323e2a7932a264514cdf@1x.png", "webp": "porsche-marque-trademark.small.min.783639706bead66b2d56e3b8b64bd61f@1x.webp" }, "2x": { "png": "porsche-marque-trademark.small.min.92184fae44511ceda8320443c17110b1@2x.png", "webp": "porsche-marque-trademark.small.min.760a57efa93d4e7e16e26128ec7ead46@2x.webp" }, "3x": { "png": "porsche-marque-trademark.small.min.fd545cea4298f5d797246d5805711646@3x.png", "webp": "porsche-marque-trademark.small.min.1726036a7829347e1e24d1eb54fc0d64@3x.webp" } } }, "porscheMarque": { "medium": { "1x": { "png": "porsche-marque.medium.min.a98627440b05154565f9f9dfc1ad6187@1x.png", "webp": "porsche-marque.medium.min.fa908e4dfdc5536b0e933e1670d20e1f@1x.webp" }, "2x": { "png": "porsche-marque.medium.min.089d6dd560fff7a2bf613ae6d528990e@2x.png", "webp": "porsche-marque.medium.min.7f0893dc57f2607a2cb0b817d96cb985@2x.webp" }, "3x": { "png": "porsche-marque.medium.min.2cb874345ef290831c929f6caabfeef8@3x.png", "webp": "porsche-marque.medium.min.3534cf066b4e2e737dca62de495f9616@3x.webp" } }, "small": { "1x": { "png": "porsche-marque.small.min.ac2042736af5512cf547c89fa7924c4f@1x.png", "webp": "porsche-marque.small.min.005debed5bf72cf0a9a791b1521f5e1d@1x.webp" }, "2x": { "png": "porsche-marque.small.min.22f1e9dc90399d9a5287eda689b60dba@2x.png", "webp": "porsche-marque.small.min.df4317325d04ffef28c7839aa6d499a0@2x.webp" }, "3x": { "png": "porsche-marque.small.min.49209245f04eadef8817b9bbae80d3e1@3x.png", "webp": "porsche-marque.small.min.cfd6149aaa3bc5b3b522538e5f650890@3x.webp" } } } };
3797
-
3796
+ const MARQUES_MANIFEST = { "porscheMarqueTrademark": { "medium": { "1x": { "png": "porsche-marque-trademark.medium.min.da075315857e239ff46bf4c150648ff0@1x.png", "webp": "porsche-marque-trademark.medium.min.5c6af9aa7946fea34f60c8f8c95d0188@1x.webp" }, "2x": { "png": "porsche-marque-trademark.medium.min.aa801f42028b1c385a5e26ae115da598@2x.png", "webp": "porsche-marque-trademark.medium.min.fff6e9b91481cc5b1fc6c9b62987ccaf@2x.webp" }, "3x": { "png": "porsche-marque-trademark.medium.min.824818d15eaf445f50e0a2391613f214@3x.png", "webp": "porsche-marque-trademark.medium.min.f67092ff6b5f4ecb4add73d6ae153db0@3x.webp" } }, "small": { "1x": { "png": "porsche-marque-trademark.small.min.020244b41a29323e2a7932a264514cdf@1x.png", "webp": "porsche-marque-trademark.small.min.783639706bead66b2d56e3b8b64bd61f@1x.webp" }, "2x": { "png": "porsche-marque-trademark.small.min.92184fae44511ceda8320443c17110b1@2x.png", "webp": "porsche-marque-trademark.small.min.760a57efa93d4e7e16e26128ec7ead46@2x.webp" }, "3x": { "png": "porsche-marque-trademark.small.min.fd545cea4298f5d797246d5805711646@3x.png", "webp": "porsche-marque-trademark.small.min.1726036a7829347e1e24d1eb54fc0d64@3x.webp" } } }, "porscheMarque": { "medium": { "1x": { "png": "porsche-marque.medium.min.a98627440b05154565f9f9dfc1ad6187@1x.png", "webp": "porsche-marque.medium.min.fa908e4dfdc5536b0e933e1670d20e1f@1x.webp" }, "2x": { "png": "porsche-marque.medium.min.089d6dd560fff7a2bf613ae6d528990e@2x.png", "webp": "porsche-marque.medium.min.7f0893dc57f2607a2cb0b817d96cb985@2x.webp" }, "3x": { "png": "porsche-marque.medium.min.2cb874345ef290831c929f6caabfeef8@3x.png", "webp": "porsche-marque.medium.min.3534cf066b4e2e737dca62de495f9616@3x.webp" } }, "small": { "1x": { "png": "porsche-marque.small.min.ac2042736af5512cf547c89fa7924c4f@1x.png", "webp": "porsche-marque.small.min.005debed5bf72cf0a9a791b1521f5e1d@1x.webp" }, "2x": { "png": "porsche-marque.small.min.22f1e9dc90399d9a5287eda689b60dba@2x.png", "webp": "porsche-marque.small.min.df4317325d04ffef28c7839aa6d499a0@2x.webp" }, "3x": { "png": "porsche-marque.small.min.49209245f04eadef8817b9bbae80d3e1@3x.png", "webp": "porsche-marque.small.min.cfd6149aaa3bc5b3b522538e5f650890@3x.webp" } } }, "porscheMarque75": { "medium": { "1x": { "png": "porsche-marque75.medium.min.0a02e2256062de963f2fef2c02d20200@1x.png", "webp": "porsche-marque75.medium.min.99b2d657558f0531d639782974e8fd06@1x.webp" }, "2x": { "png": "porsche-marque75.medium.min.1d41ecfb8f5277d3f4bd65d25d22eea3@2x.png", "webp": "porsche-marque75.medium.min.e32580cd1ac179e354ed8fcb31694168@2x.webp" }, "3x": { "png": "porsche-marque75.medium.min.373bcb5f89d31c8b6084e66e902b9f4c@3x.png", "webp": "porsche-marque75.medium.min.4a003d1e5e81db062bf92d52ba797087@3x.webp" } }, "small": { "1x": { "png": "porsche-marque75.small.min.f5b37fe12cd4487432ff77fdd8469f7d@1x.png", "webp": "porsche-marque75.small.min.146b06cffe2b11c07f3113a51f337b98@1x.webp" }, "2x": { "png": "porsche-marque75.small.min.20d86908f2190640a6f24fce1ee49035@2x.png", "webp": "porsche-marque75.small.min.025770f8db54857874c130999b370ed8@2x.webp" }, "3x": { "png": "porsche-marque75.small.min.e89b13e14a088a273107bf1057f7f67d@3x.png", "webp": "porsche-marque75.small.min.a725d2ec7bd07be17afd8feb2589b156@3x.webp" } } } };
3798
3797
  const cdnBaseUrl = CDN_BASE_URL$1 ;
3799
- const getInnerManifest = (trademark) => MARQUES_MANIFEST[`porscheMarque${trademark ? 'Trademark' : ''}`];
3798
+ const getInnerManifest = (variant, trademark) => MARQUES_MANIFEST[variant === '75-years' ? 'porscheMarque75' : `porscheMarque${trademark ? 'Trademark' : ''}`];
3800
3799
  const buildSrcSet = (innerManifest, size, format) =>
3801
3800
  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
3802
3801
  Object.entries(innerManifest[size])
package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/marque.wrapper.js CHANGED
@@ -5,13 +5,13 @@ import { syncRef } from '../../utils.js';
5
5
  import { DSRMarque } from '../dsr-components/marque.js';
6
6
 
7
7
  /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-wordmark" instead. */
8
- const PMarque = forwardRef(({ aria, href, size = 'responsive', target = '_self', trademark = true, className, ...rest }, ref) => {
8
+ const PMarque = forwardRef(({ aria, href, size = 'responsive', target = '_self', trademark = true, variant = 'default', className, ...rest }, ref) => {
9
9
  const elementRef = useRef();
10
10
  const WebComponentTag = usePrefix('p-marque');
11
- const propsToSync = [aria, href, size, target, trademark];
11
+ const propsToSync = [aria, href, size, target, trademark, variant];
12
12
  useBrowserLayoutEffect(() => {
13
13
  const { current } = elementRef;
14
- ['aria', 'href', 'size', 'target', 'trademark'].forEach((propName, i) => (current[propName] = propsToSync[i]));
14
+ ['aria', 'href', 'size', 'target', 'trademark', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
15
15
  }, propsToSync);
16
16
  // @ts-ignore
17
17
  if (!process.browser) {
@@ -22,7 +22,7 @@ const PMarque = forwardRef(({ aria, href, size = 'responsive', target = '_self',
22
22
  // @ts-ignore
23
23
  ...(!process.browser
24
24
  ? {
25
- children: (jsx(DSRMarque, { ...{ aria, href, size, target, trademark } })),
25
+ children: (jsx(DSRMarque, { ...{ aria, href, size, target, trademark, variant } })),
26
26
  }
27
27
  : {
28
28
  suppressHydrationWarning: true,
package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/marque.js CHANGED
@@ -8,7 +8,7 @@ import { getInnerManifest, buildSrcSet, cdnBaseUrl, parseAndGetAriaAttributes }
8
8
  /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-wordmark" instead. */
9
9
  class DSRMarque extends Component {
10
10
  render() {
11
- const innerManifest = getInnerManifest(this.props.trademark);
11
+ const innerManifest = getInnerManifest(this.props.variant, this.props.trademark);
12
12
  const mediumMedia = `(min-width: ${'1300'}px)`;
13
13
  const picture = (jsxs("picture", { children: [this.props.size === 'responsive'
14
14
  ? [
package/ssr/lib/components/marque.wrapper.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { HTMLAttributes } from 'react';
2
- import type { SelectedAriaAttributes, MarqueAriaAttribute, MarqueSize, MarqueTarget } from '../types';
2
+ import type { SelectedAriaAttributes, MarqueAriaAttribute, MarqueSize, MarqueTarget, MarqueVariant } from '../types';
3
3
  export type PMarqueProps = Omit<HTMLAttributes<{}>, 'color'> & {
4
4
  /**
5
5
  * Add ARIA attributes.
@@ -18,9 +18,13 @@ export type PMarqueProps = Omit<HTMLAttributes<{}>, 'color'> & {
18
18
  */
19
19
  target?: MarqueTarget;
20
20
  /**
21
- * Show/hide trademark sign.
21
+ * Show/hide trademark sign (only has effect when variant is set to default).
22
22
  */
23
23
  trademark?: boolean;
24
+ /**
25
+ * Shows marque in special editions
26
+ */
27
+ variant?: MarqueVariant;
24
28
  };
25
29
  /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-wordmark" instead. */
26
30
  export declare const PMarque: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
@@ -41,7 +45,11 @@ export declare const PMarque: import("react").ForwardRefExoticComponent<Omit<HTM
41
45
  */
42
46
  target?: MarqueTarget;
43
47
  /**
44
- * Show/hide trademark sign.
48
+ * Show/hide trademark sign (only has effect when variant is set to default).
45
49
  */
46
50
  trademark?: boolean;
51
+ /**
52
+ * Shows marque in special editions
53
+ */
54
+ variant?: MarqueVariant;
47
55
  } & import("react").RefAttributes<HTMLElement>>;
package/ssr/lib/types.d.ts CHANGED
@@ -921,17 +921,22 @@ export type LinkTileModelSignatureHeadingTag = (typeof LINK_TILE_MODEL_SIGNATURE
921
921
  export type LinkTileModelSignatureWeight = TileWeight;
922
922
  export type LinkTileModelSignatureAspectRatio = TileAspectRatio;
923
923
  export type LinkTileModelSignatureLinkDirection = GroupDirection;
924
+ declare const MARQUE_VARIANTS: readonly [
925
+ "75-years",
926
+ "default"
927
+ ];
928
+ export type MarqueVariant = (typeof MARQUE_VARIANTS)[number];
929
+ export type MarqueTarget = LinkTarget;
930
+ declare const MARQUE_ARIA_ATTRIBUTES: readonly [
931
+ "aria-label"
932
+ ];
933
+ export type MarqueAriaAttribute = (typeof MARQUE_ARIA_ATTRIBUTES)[number];
924
934
  declare const MARQUE_SIZES: readonly [
925
935
  "responsive",
926
936
  "small",
927
937
  "medium"
928
938
  ];
929
939
  export type MarqueSize = typeof MARQUE_SIZES[number];
930
- export type MarqueTarget = LinkTarget;
931
- declare const MARQUE_ARIA_ATTRIBUTES: readonly [
932
- "aria-label"
933
- ];
934
- export type MarqueAriaAttribute = typeof MARQUE_ARIA_ATTRIBUTES[number];
935
940
  declare const MODAL_ARIA_ATTRIBUTES: readonly [
936
941
  "aria-label"
937
942
  ];