@porsche-design-system/components-react 2.20.0 → 2.21.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 +6 -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 +7 -2
  6. package/package.json +2 -2
  7. package/ssr/components/dist/utils/esm/utils-entry.js +2 -2
  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 -2
  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 +7 -2
package/CHANGELOG.md CHANGED
@@ -9,6 +9,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
9
9
 
10
10
  ### [Unreleased]
11
11
 
12
+ ### [2.21.0-rc.0] - 2023-03-28
13
+
14
+ #### Added
15
+
16
+ - `Marque` now has a `variant` property, including 75 years variant [PR](https://github.com/porsche-design-system/porsche-design-system/pull/2433)
17
+
12
18
  ### [2.20.0] - 2023-02-06
13
19
 
14
20
  ### [2.20.0-rc.1] - 2023-02-06
package/esm/lib/components/marque.wrapper.js CHANGED
@@ -3,13 +3,13 @@ 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 PMarque = /*#__PURE__*/ forwardRef(({ aria, href, size = 'responsive', target = '_self', trademark = true, className, ...rest }, ref) => {
6
+ const PMarque = /*#__PURE__*/ forwardRef(({ aria, href, size = 'responsive', target = '_self', trademark = true, variant = 'default', className, ...rest }, ref) => {
7
7
  const elementRef = useRef();
8
8
  const WebComponentTag = usePrefix('p-marque');
9
- const propsToSync = [aria, href, size, target, trademark];
9
+ const propsToSync = [aria, href, size, target, trademark, variant];
10
10
  useBrowserLayoutEffect(() => {
11
11
  const { current } = elementRef;
12
- ['aria', 'href', 'size', 'target', 'trademark'].forEach((propName, i) => (current[propName] = propsToSync[i]));
12
+ ['aria', 'href', 'size', 'target', 'trademark', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
13
13
  }, propsToSync);
14
14
  const props = {
15
15
  ...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, LinkTarget } from '../types';
2
+ import type { SelectedAriaAttributes, MarqueAriaAttribute, MarqueSize, LinkTarget, 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?: LinkTarget;
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
  export declare const PMarque: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
26
30
  /**
@@ -40,7 +44,11 @@ export declare const PMarque: import("react").ForwardRefExoticComponent<Omit<HTM
40
44
  */
41
45
  target?: LinkTarget;
42
46
  /**
43
- * Show/hide trademark sign.
47
+ * Show/hide trademark sign (only has effect when variant is set to default).
44
48
  */
45
49
  trademark?: boolean;
50
+ /**
51
+ * Shows marque in special editions
52
+ */
53
+ variant?: MarqueVariant;
46
54
  } & import("react").RefAttributes<HTMLElement>>;
package/lib/components/marque.wrapper.js CHANGED
@@ -5,13 +5,13 @@ var react = require('react');
5
5
  var hooks = require('../../hooks.js');
6
6
  var utils = require('../../utils.js');
7
7
 
8
- const PMarque = /*#__PURE__*/ react.forwardRef(({ aria, href, size = 'responsive', target = '_self', trademark = true, className, ...rest }, ref) => {
8
+ const PMarque = /*#__PURE__*/ react.forwardRef(({ aria, href, size = 'responsive', target = '_self', trademark = true, variant = 'default', className, ...rest }, ref) => {
9
9
  const elementRef = react.useRef();
10
10
  const WebComponentTag = hooks.usePrefix('p-marque');
11
- const propsToSync = [aria, href, size, target, trademark];
11
+ const propsToSync = [aria, href, size, target, trademark, variant];
12
12
  hooks.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
  const props = {
17
17
  ...rest,
package/lib/types.d.ts CHANGED
@@ -566,16 +566,21 @@ declare const LINK_TILE_ASPECT_RATIOS: readonly [
566
566
  "9:16"
567
567
  ];
568
568
  export declare type LinkTileAspectRatio = typeof LINK_TILE_ASPECT_RATIOS[number];
569
+ declare const MARQUE_VARIANTS: readonly [
570
+ "75-years",
571
+ "default"
572
+ ];
573
+ export declare type MarqueVariant = (typeof MARQUE_VARIANTS)[number];
569
574
  declare const MARQUE_SIZES: readonly [
570
575
  "responsive",
571
576
  "small",
572
577
  "medium"
573
578
  ];
574
- export declare type MarqueSize = typeof MARQUE_SIZES[number];
579
+ export declare type MarqueSize = (typeof MARQUE_SIZES)[number];
575
580
  declare const MARQUE_ARIA_ATTRIBUTES: readonly [
576
581
  "aria-label"
577
582
  ];
578
- export declare type MarqueAriaAttribute = typeof MARQUE_ARIA_ATTRIBUTES[number];
583
+ export declare type MarqueAriaAttribute = (typeof MARQUE_ARIA_ATTRIBUTES)[number];
579
584
  declare const MODAL_ARIA_ATTRIBUTES: readonly [
580
585
  "aria-label"
581
586
  ];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@porsche-design-system/components-react",
3
- "version": "2.20.0",
3
+ "version": "2.21.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": "2.20.0"
20
+ "@porsche-design-system/components-js": "2.21.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
@@ -5640,9 +5640,9 @@ const getContentAriaAttributes = (state, labelId, descriptionId) => {
5640
5640
  };
5641
5641
 
5642
5642
  const CDN_BASE_URL = (typeof window !== 'undefined' && window.PORSCHE_DESIGN_SYSTEM_CDN === 'cn' ? 'https://cdn.ui.porsche.cn' : 'https://cdn.ui.porsche.com') + '/porsche-design-system/marque';
5643
- 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" } } } };
5643
+ 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" } } } };
5644
5644
  const cdnBaseUrl = CDN_BASE_URL ;
5645
- const getInnerManifest = (trademark) => MARQUES_MANIFEST[`porscheMarque${trademark ? 'Trademark' : ''}`];
5645
+ const getInnerManifest = (variant, trademark) => MARQUES_MANIFEST[variant === '75-years' ? 'porscheMarque75' : `porscheMarque${trademark ? 'Trademark' : ''}`];
5646
5646
  const buildSrcSet = (innerManifest, size, format) =>
5647
5647
  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
5648
5648
  Object.entries(innerManifest[size])
package/ssr/components-react/projects/react-ssr-wrapper/src/lib/components/marque.wrapper.js CHANGED
@@ -6,13 +6,13 @@ var hooks = require('../../hooks.js');
6
6
  var utils = require('../../utils.js');
7
7
  var marque = require('../dsr-components/marque.js');
8
8
 
9
- const PMarque = /*#__PURE__*/ react.forwardRef(({ aria, href, size = 'responsive', target = '_self', trademark = true, className, ...rest }, ref) => {
9
+ const PMarque = /*#__PURE__*/ 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
  // @ts-ignore
18
18
  if (!process.browser) {
@@ -23,7 +23,7 @@ const PMarque = /*#__PURE__*/ react.forwardRef(({ aria, href, size = 'responsive
23
23
  // @ts-ignore
24
24
  ...(!process.browser
25
25
  ? {
26
- children: (jsxRuntime.jsx(marque.DSRMarque, { ...{ aria, href, size, target, trademark } })),
26
+ children: (jsxRuntime.jsx(marque.DSRMarque, { ...{ aria, href, size, target, trademark, variant } })),
27
27
  }
28
28
  : {
29
29
  suppressHydrationWarning: true,
package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/marque.js CHANGED
@@ -9,7 +9,7 @@ var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entr
9
9
 
10
10
  class DSRMarque extends react.Component {
11
11
  render() {
12
- const innerManifest = utilsEntry.getInnerManifest(this.props.trademark);
12
+ const innerManifest = utilsEntry.getInnerManifest(this.props.variant, this.props.trademark);
13
13
  const mediumMedia = `(min-width: ${'1300px'})`;
14
14
  const picture = (jsxRuntime.jsxs("picture", { children: [this.props.size === 'responsive'
15
15
  ? [
package/ssr/esm/components/dist/utils/esm/utils-entry.js CHANGED
@@ -5638,9 +5638,9 @@ const getContentAriaAttributes = (state, labelId, descriptionId) => {
5638
5638
  };
5639
5639
 
5640
5640
  const CDN_BASE_URL = (typeof window !== 'undefined' && window.PORSCHE_DESIGN_SYSTEM_CDN === 'cn' ? 'https://cdn.ui.porsche.cn' : 'https://cdn.ui.porsche.com') + '/porsche-design-system/marque';
5641
- 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" } } } };
5641
+ 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" } } } };
5642
5642
  const cdnBaseUrl = CDN_BASE_URL ;
5643
- const getInnerManifest = (trademark) => MARQUES_MANIFEST[`porscheMarque${trademark ? 'Trademark' : ''}`];
5643
+ const getInnerManifest = (variant, trademark) => MARQUES_MANIFEST[variant === '75-years' ? 'porscheMarque75' : `porscheMarque${trademark ? 'Trademark' : ''}`];
5644
5644
  const buildSrcSet = (innerManifest, size, format) =>
5645
5645
  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
5646
5646
  Object.entries(innerManifest[size])
package/ssr/esm/components-react/projects/react-ssr-wrapper/src/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
  import { DSRMarque } from '../dsr-components/marque.js';
6
6
 
7
- const PMarque = /*#__PURE__*/ forwardRef(({ aria, href, size = 'responsive', target = '_self', trademark = true, className, ...rest }, ref) => {
7
+ const PMarque = /*#__PURE__*/ 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
  // @ts-ignore
16
16
  if (!process.browser) {
@@ -21,7 +21,7 @@ const PMarque = /*#__PURE__*/ forwardRef(({ aria, href, size = 'responsive', tar
21
21
  // @ts-ignore
22
22
  ...(!process.browser
23
23
  ? {
24
- children: (jsx(DSRMarque, { ...{ aria, href, size, target, trademark } })),
24
+ children: (jsx(DSRMarque, { ...{ aria, href, size, target, trademark, variant } })),
25
25
  }
26
26
  : {
27
27
  suppressHydrationWarning: true,
package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/marque.js CHANGED
@@ -7,7 +7,7 @@ import { getInnerManifest, buildSrcSet, cdnBaseUrl, parseAndGetAriaAttributes }
7
7
 
8
8
  class DSRMarque extends Component {
9
9
  render() {
10
- const innerManifest = getInnerManifest(this.props.trademark);
10
+ const innerManifest = getInnerManifest(this.props.variant, this.props.trademark);
11
11
  const mediumMedia = `(min-width: ${'1300px'})`;
12
12
  const picture = (jsxs("picture", { children: [this.props.size === 'responsive'
13
13
  ? [
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, LinkTarget } from '../types';
2
+ import type { SelectedAriaAttributes, MarqueAriaAttribute, MarqueSize, LinkTarget, 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?: LinkTarget;
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
  export declare const PMarque: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
26
30
  /**
@@ -40,7 +44,11 @@ export declare const PMarque: import("react").ForwardRefExoticComponent<Omit<HTM
40
44
  */
41
45
  target?: LinkTarget;
42
46
  /**
43
- * Show/hide trademark sign.
47
+ * Show/hide trademark sign (only has effect when variant is set to default).
44
48
  */
45
49
  trademark?: boolean;
50
+ /**
51
+ * Shows marque in special editions
52
+ */
53
+ variant?: MarqueVariant;
46
54
  } & import("react").RefAttributes<HTMLElement>>;
package/ssr/lib/types.d.ts CHANGED
@@ -566,16 +566,21 @@ declare const LINK_TILE_ASPECT_RATIOS: readonly [
566
566
  "9:16"
567
567
  ];
568
568
  export declare type LinkTileAspectRatio = typeof LINK_TILE_ASPECT_RATIOS[number];
569
+ declare const MARQUE_VARIANTS: readonly [
570
+ "75-years",
571
+ "default"
572
+ ];
573
+ export declare type MarqueVariant = (typeof MARQUE_VARIANTS)[number];
569
574
  declare const MARQUE_SIZES: readonly [
570
575
  "responsive",
571
576
  "small",
572
577
  "medium"
573
578
  ];
574
- export declare type MarqueSize = typeof MARQUE_SIZES[number];
579
+ export declare type MarqueSize = (typeof MARQUE_SIZES)[number];
575
580
  declare const MARQUE_ARIA_ATTRIBUTES: readonly [
576
581
  "aria-label"
577
582
  ];
578
- export declare type MarqueAriaAttribute = typeof MARQUE_ARIA_ATTRIBUTES[number];
583
+ export declare type MarqueAriaAttribute = (typeof MARQUE_ARIA_ATTRIBUTES)[number];
579
584
  declare const MODAL_ARIA_ATTRIBUTES: readonly [
580
585
  "aria-label"
581
586
  ];