@porsche-design-system/components-react 2.20.0 → 3.0.0-alpha.1

package/ssr/lib/types.d.ts

@@ -1,4 +1,186 @@
-export type IconName = "360" | "accessibility" | "active-cabin-ventilation" | "add" | "adjust" | "arrow-double-down" | "arrow-double-left" | "arrow-double-right" | "arrow-double-up" | "arrow-down" | "arrow-first" | "arrow-head-down" | "arrow-head-left" | "arrow-head-right" | "arrow-head-up" | "arrow-last" | "arrow-left" | "arrow-right" | "arrow-up" | "augmented-reality" | "battery-empty" | "battery-full" | "bell" | "bookmark" | "broadcast" | "calculator" | "calendar" | "camera" | "car" | "car-battery" | "card" | "charging-active" | "charging-state" | "charging-station" | "chart" | "chat" | "check" | "city" | "climate" | "climate-control" | "clock" | "close" | "closed-caption" | "co2-emission" | "compare" | "configurate" | "country-road" | "cubic-capacity" | "delete" | "disable" | "document" | "download" | "duration" | "edit" | "email" | "exclamation" | "external" | "filter" | "flash" | "fuel-station" | "garage" | "gift" | "globe" | "grid" | "highway" | "home" | "horn" | "image" | "increase" | "information" | "key" | "leaf" | "leather" | "light" | "list" | "locate" | "lock" | "lock-open" | "logo-baidu" | "logo-delicious" | "logo-digg" | "logo-facebook" | "logo-foursquare" | "logo-gmail" | "logo-google" | "logo-hatena" | "logo-instagram" | "logo-kaixin" | "logo-kakaotalk" | "logo-linkedin" | "logo-naver" | "logo-pinterest" | "logo-qq" | "logo-qq-share" | "logo-reddit" | "logo-skyrock" | "logo-sohu" | "logo-tecent" | "logo-telegram" | "logo-tiktok" | "logo-tumblr" | "logo-twitter" | "logo-viber" | "logo-vk" | "logo-wechat" | "logo-weibo" | "logo-whatsapp" | "logo-xing" | "logo-yahoo" | "logo-youku" | "logo-youtube" | "logout" | "map" | "menu-dots-horizontal" | "menu-dots-vertical" | "menu-lines" | "minus" | "mobile" | "moon" | "oil-can" | "parking-brake" | "parking-light" | "pause" | "phone" | "pin" | "play" | "plug" | "plus" | "preheating" | "printer" | "purchase" | "question" | "racing-flag" | "refresh" | "replay" | "reset" | "route" | "rss" | "save" | "screen" | "search" | "send" | "share" | "shopping-bag" | "shopping-cart" | "sidelights" | "snowflake" | "sort" | "stack" | "star" | "steering-wheel" | "stopwatch" | "subtract" | "success" | "sun" | "switch" | "tablet" | "tachometer" | "truck" | "upload" | "user" | "user-group" | "user-manual" | "video" | "view" | "view-off" | "volume-off" | "volume-up" | "warning" | "weight" | "wifi" | "work" | "wrench" | "wrenches" | "zoom-in" | "zoom-out";
+declare const ICON_NAMES: readonly [
+    "360",
+    "accessibility",
+    "active-cabin-ventilation",
+    "add",
+    "adjust",
+    "arrow-double-down",
+    "arrow-double-left",
+    "arrow-double-right",
+    "arrow-double-up",
+    "arrow-down",
+    "arrow-first",
+    "arrow-head-down",
+    "arrow-head-left",
+    "arrow-head-right",
+    "arrow-head-up",
+    "arrow-last",
+    "arrow-left",
+    "arrow-right",
+    "arrow-up",
+    "augmented-reality",
+    "battery-empty",
+    "battery-full",
+    "bell",
+    "bookmark",
+    "broadcast",
+    "calculator",
+    "calendar",
+    "camera",
+    "car",
+    "car-battery",
+    "card",
+    "charging-active",
+    "charging-state",
+    "charging-station",
+    "chart",
+    "chat",
+    "check",
+    "city",
+    "climate",
+    "climate-control",
+    "clock",
+    "close",
+    "closed-caption",
+    "co2-emission",
+    "compare",
+    "configurate",
+    "country-road",
+    "cubic-capacity",
+    "delete",
+    "disable",
+    "document",
+    "download",
+    "duration",
+    "edit",
+    "email",
+    "error-filled",
+    "exclamation",
+    "external",
+    "filter",
+    "flash",
+    "fuel-station",
+    "garage",
+    "gift",
+    "globe",
+    "grid",
+    "highway",
+    "home",
+    "horn",
+    "image",
+    "increase",
+    "information",
+    "information-filled",
+    "key",
+    "leaf",
+    "leather",
+    "light",
+    "list",
+    "locate",
+    "lock",
+    "lock-open",
+    "logo-baidu",
+    "logo-delicious",
+    "logo-digg",
+    "logo-facebook",
+    "logo-foursquare",
+    "logo-gmail",
+    "logo-google",
+    "logo-hatena",
+    "logo-instagram",
+    "logo-kaixin",
+    "logo-kakaotalk",
+    "logo-linkedin",
+    "logo-naver",
+    "logo-pinterest",
+    "logo-qq",
+    "logo-qq-share",
+    "logo-reddit",
+    "logo-skyrock",
+    "logo-sohu",
+    "logo-tecent",
+    "logo-telegram",
+    "logo-tiktok",
+    "logo-tumblr",
+    "logo-twitter",
+    "logo-viber",
+    "logo-vk",
+    "logo-wechat",
+    "logo-weibo",
+    "logo-whatsapp",
+    "logo-xing",
+    "logo-yahoo",
+    "logo-youku",
+    "logo-youtube",
+    "logout",
+    "map",
+    "menu-dots-horizontal",
+    "menu-dots-vertical",
+    "menu-lines",
+    "minus",
+    "mobile",
+    "moon",
+    "oil-can",
+    "parking-brake",
+    "parking-light",
+    "pause",
+    "phone",
+    "pin",
+    "play",
+    "plug",
+    "plus",
+    "preheating",
+    "printer",
+    "purchase",
+    "question",
+    "racing-flag",
+    "refresh",
+    "replay",
+    "reset",
+    "route",
+    "rss",
+    "save",
+    "screen",
+    "search",
+    "send",
+    "share",
+    "shopping-bag",
+    "shopping-cart",
+    "sidelights",
+    "snowflake",
+    "sort",
+    "stack",
+    "star",
+    "steering-wheel",
+    "stopwatch",
+    "subtract",
+    "success",
+    "success-filled",
+    "sun",
+    "switch",
+    "tablet",
+    "tachometer",
+    "truck",
+    "upload",
+    "user",
+    "user-group",
+    "user-manual",
+    "video",
+    "view",
+    "view-off",
+    "volume-off",
+    "volume-up",
+    "warning",
+    "warning-filled",
+    "weight",
+    "wifi",
+    "work",
+    "wrench",
+    "wrenches",
+    "zoom-in",
+    "zoom-out"
+];
+export type IconName = typeof ICON_NAMES[number];
 declare const FORM_STATES: readonly [
     "none",
     "error",
@@ -11,7 +193,7 @@ declare const BUTTON_ARIA_ATTRIBUTES: readonly [
     "aria-pressed",
     "aria-haspopup"
 ];
-export declare type ButtonAriaAttributes = typeof BUTTON_ARIA_ATTRIBUTES[number];
+export declare type ButtonAriaAttribute = typeof BUTTON_ARIA_ATTRIBUTES[number];
 declare const BREAKPOINTS: readonly [
     "base",
     "xs",
@@ -46,19 +228,6 @@ declare const THEMES: readonly [
     "dark"
 ];
 export declare type Theme = typeof THEMES[number];
-declare const THEMES_EXTENDED_ELECTRIC: readonly [
-    "light",
-    "dark",
-    "light-electric"
-];
-export declare type ThemeExtendedElectric = typeof THEMES_EXTENDED_ELECTRIC[number];
-declare const THEMES_EXTENDED_ELECTRIC_DARK: readonly [
-    "light",
-    "dark",
-    "light-electric",
-    "dark-electric"
-];
-export declare type ThemeExtendedElectricDark = typeof THEMES_EXTENDED_ELECTRIC_DARK[number];
 declare const ALIGN_LABELS: readonly [
     "left",
     "right"
@@ -70,18 +239,7 @@ declare const BUTTON_TYPES: readonly [
     "reset"
 ];
 export declare type ButtonType = typeof BUTTON_TYPES[number];
-declare const HEADLINE_VARIANTS: readonly [
-    "large-title",
-    "headline-1",
-    "headline-2",
-    "headline-3",
-    "headline-4",
-    "headline-5"
-];
-export declare type VariantType = typeof HEADLINE_VARIANTS[number];
-export declare type HeadlineVariantCustom = Exclude<BreakpointCustomizable<TextSize>, TextSize>;
-export declare type HeadlineVariant = VariantType | HeadlineVariantCustom | Extract<TextSize, "inherit">;
-declare const HEADLINE_TAGS: readonly [
+declare const HEADING_TAGS: readonly [
     "h1",
     "h2",
     "h3",
@@ -89,14 +247,7 @@ declare const HEADLINE_TAGS: readonly [
     "h5",
     "h6"
 ];
-export declare type HeadlineTag = typeof HEADLINE_TAGS[number];
-declare const ICON_SIZES: readonly [
-    "small",
-    "medium",
-    "large",
-    "inherit"
-];
-export declare type IconSize = typeof ICON_SIZES[number];
+export declare type HeadingTag = typeof HEADING_TAGS[number];
 declare const LINK_BUTTON_VARIANTS: readonly [
     "primary",
     "secondary",
@@ -110,14 +261,19 @@ declare const TEXT_ALIGNS: readonly [
 ];
 export declare type TextAlign = typeof TEXT_ALIGNS[number];
 declare const TEXT_COLORS: readonly [
+    "primary",
     "brand",
     "default",
-    "neutral-contrast-high",
-    "neutral-contrast-medium",
+    "contrast-low",
     "neutral-contrast-low",
+    "contrast-medium",
+    "neutral-contrast-medium",
+    "contrast-high",
+    "neutral-contrast-high",
     "notification-success",
     "notification-warning",
     "notification-error",
+    "notification-info",
     "notification-neutral",
     "inherit"
 ];
@@ -135,6 +291,7 @@ declare const TEXT_WEIGHTS: readonly [
     "thin",
     "regular",
     "semibold",
+    "semi-bold",
     "bold"
 ];
 export declare type TextWeight = typeof TEXT_WEIGHTS[number];
@@ -332,7 +489,7 @@ export declare type AriaAttributes = {
     /** Defines the human readable text alternative of aria-valuenow for a range widget. */
     "aria-valuetext"?: string | undefined;
 };
-export type LinkButtonPureIconName = IconName | "none";
+export type LinkButtonIconName = IconName | "none";
 export type ButtonVariant = LinkButtonVariant;
 export type LinkVariant = LinkButtonVariant;
 export type SelectedAriaAttributes<T extends keyof AriaAttributes> = Pick<AriaAttributes, T> | string;
@@ -344,9 +501,11 @@ export declare type AccordionSize = typeof ACCORDION_SIZES[number];
 export declare type AccordionChangeEvent = {
     open: boolean;
 };
+export declare type AccordionTag = HeadingTag;
 declare const BANNER_STATES: readonly [
     "error",
     "warning",
+    "info",
     "neutral"
 ];
 export declare type BannerState = typeof BANNER_STATES[number];
@@ -372,11 +531,34 @@ declare const CONTENT_WRAPPER_BACKGROUND_COLORS: readonly [
 ];
 export declare type ContentWrapperBackgroundColor = typeof CONTENT_WRAPPER_BACKGROUND_COLORS[number];
 declare const CONTENT_WRAPPER_WIDTHS: readonly [
+    "narrow",
     "basic",
     "extended",
-    "fluid"
+    "fluid",
+    "full"
 ];
 export declare type ContentWrapperWidth = typeof CONTENT_WRAPPER_WIDTHS[number];
+declare const DISPLAY_TAGS: readonly [
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6"
+];
+export declare type DisplayTag = typeof DISPLAY_TAGS[number];
+declare const DISPLAY_SIZES: readonly [
+    "medium",
+    "large",
+    "inherit"
+];
+export declare type DisplaySize = typeof DISPLAY_SIZES[number];
+declare const DISPLAY_COLORS: readonly [
+    "primary",
+    "inherit"
+];
+export declare type DisplayColor = typeof DISPLAY_COLORS[number];
+export declare type DisplayAlign = TextAlign;
 declare const DIVIDER_COLORS: readonly [
     "neutral-contrast-high",
     "neutral-contrast-medium",
@@ -527,13 +709,77 @@ declare const GRID_ITEM_OFFSETS: readonly [
     11
 ];
 export declare type GridItemOffset = typeof GRID_ITEM_OFFSETS[number];
+declare const HEADING_SIZES: readonly [
+    "small",
+    "medium",
+    "large",
+    "x-large",
+    "xx-large",
+    "xxx-large",
+    "inherit"
+];
+export declare type HeadingSize = typeof HEADING_SIZES[number];
+declare const HEADING_COLORS: readonly [
+    "primary",
+    "inherit"
+];
+export declare type HeadingColor = typeof HEADING_COLORS[number];
+export declare type HeadingAlign = TextAlign;
+declare const HEADLINE_VARIANTS: readonly [
+    "large-title",
+    "headline-1",
+    "headline-2",
+    "headline-3",
+    "headline-4",
+    "headline-5"
+];
+export declare type HeadlineVariantType = typeof HEADLINE_VARIANTS[number];
+export declare type HeadlineVariantCustom = Exclude<BreakpointCustomizable<TextSize>, TextSize>;
+export declare type HeadlineVariant = HeadlineVariantType | HeadlineVariantCustom | Extract<TextSize, "inherit">;
+declare const HEADLINE_TAGS: readonly [
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6"
+];
+export declare type HeadlineTag = typeof HEADLINE_TAGS[number];
+declare const HEADLINE_COLORS: readonly [
+    "primary",
+    "default",
+    "inherit"
+];
+export declare type HeadlineColor = typeof HEADLINE_COLORS[number];
+export declare type HeadlineAlign = TextAlign;
 declare const ICON_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
 export declare type IconAriaAttribute = typeof ICON_ARIA_ATTRIBUTES[number];
+export declare type IconSize = TextSize;
+declare const ICON_COLORS: readonly [
+    "primary",
+    "brand",
+    "default",
+    "contrast-low",
+    "neutral-contrast-low",
+    "contrast-medium",
+    "neutral-contrast-medium",
+    "contrast-high",
+    "neutral-contrast-high",
+    "notification-success",
+    "notification-warning",
+    "notification-error",
+    "notification-info",
+    "notification-neutral",
+    "inherit",
+    "disabled"
+];
+export declare type IconColor = typeof ICON_COLORS[number];
 declare const INLINE_NOTIFICATION_STATES: readonly [
     "error",
     "warning",
+    "info",
     "neutral",
     "success"
 ];
@@ -662,8 +908,11 @@ export declare type TabGradientColorTheme = GradientColorTheme;
 declare const TAG_COLORS: readonly [
     "background-surface",
     "background-default",
+    "background-base",
     "neutral-contrast-high",
+    "primary",
     "notification-neutral",
+    "notification-info",
     "notification-warning",
     "notification-success",
     "notification-error"
@@ -671,7 +920,8 @@ declare const TAG_COLORS: readonly [
 export declare type TagColor = typeof TAG_COLORS[number];
 declare const TAG_DISMISSIBLE_COLORS: readonly [
     "background-surface",
-    "background-default"
+    "background-default",
+    "background-base"
 ];
 export declare type TagDismissibleColor = typeof TAG_DISMISSIBLE_COLORS[number];
 declare const TAG_DISMISSIBLE_ARIA_ATTRIBUTES: readonly [
@@ -706,8 +956,9 @@ declare const ORDER_TYPES: readonly [
 ];
 export declare type OrderType = typeof ORDER_TYPES[number];
 declare const TOAST_STATES: readonly [
-    "neutral",
-    "success"
+    "info",
+    "success",
+    "neutral"
 ];
 export declare type ToastState = typeof TOAST_STATES[number];
 export declare type ToastMessage = {

package/styles/esm/index.js

@@ -0,0 +1 @@
+export * from '@porsche-design-system/components-js/styles';

package/styles/index.d.ts

@@ -0,0 +1 @@
+export * from '@porsche-design-system/components-js/styles';

package/styles/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var styles = require('@porsche-design-system/components-js/styles');
+
+
+
+Object.keys(styles).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return styles[k]; }
+	});
+});

package/{utilities/js → styles}/package.json

@@ -1,5 +1,6 @@
 {
   "main": "index.js",
   "module": "esm/index.js",
+  "types": "index.d.ts",
   "sideEffects": false
 }

package/styles/scss.scss

@@ -0,0 +1 @@
+@import '~@porsche-design-system/components-js/styles/scss';