@camunda/camunda-composite-components 0.3.1-rc.9 → 0.4.0

package/lib/esm/package.json

@@ -0,0 +1,114 @@
+{
+    "name": "@camunda/camunda-composite-components",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/camunda-cloud/camunda-composite-components.git"
+    },
+    "version": "0.3.1-rc.18",
+    "scripts": {
+        "clean": "rimraf lib/",
+        "build": "yarn clean && tsc",
+        "storybook": "storybook dev -p 6006",
+        "start": "yarn storybook",
+        "build:storybook": "storybook build",
+        "build:all": "yarn build && yarn build:storybook",
+        "serve:storybook": "serve ./storybook-static -p 6006 -n -L",
+        "prepare": "husky install",
+        "format": "prettier --write .",
+        "lint": "eslint src/",
+        "lint:fix": "eslint --fix src/",
+        "test:ts": "tsc --noEmit --project ./tsconfig.json",
+        "test:storybook": "TEST_A11Y=true test-storybook",
+        "test:storybook:smoke": "test-storybook",
+        "start:docker-storybook": "yarn build:storybook && docker-compose up -d && docker-compose exec c3-visual-regression yarn serve:storybook",
+        "test:visual-regression": "wait-on http://localhost:6006 && PWTEST_SKIP_TEST_OUTPUT=1 yarn playwright test",
+        "test:visual-regression:ui": "yarn test:playwright --ui",
+        "report:visual-regression": "yarn playwright show-report",
+        "update:visual-regression": "yarn playwright test --update-snapshots",
+        "test:visual-regression:docker": "docker exec -it -t c3-visual-regression yarn test:visual-regression",
+        "update:visual-regression:docker": "docker exec -it -t c3-visual-regression yarn update:visual-regression",
+        "test": "yarn test:ts && yarn test:storybook && yarn test:visual-regression:docker"
+    },
+    "devDependencies": {
+        "@babel/core": "7.23.3",
+        "@babel/preset-env": "7.23.3",
+        "@babel/preset-react": "7.23.3",
+        "@babel/preset-typescript": "7.23.3",
+        "@carbon/react": "1.37.0",
+        "@mdx-js/react": "2.3.0",
+        "@playwright/test": "1.37.1",
+        "@semantic-release/changelog": "6.0.3",
+        "@semantic-release/git": "10.0.1",
+        "@storybook/addon-a11y": "7.5.3",
+        "@storybook/addon-actions": "7.5.3",
+        "@storybook/addon-docs": "7.5.3",
+        "@storybook/addon-essentials": "7.5.3",
+        "@storybook/addon-interactions": "7.5.3",
+        "@storybook/addon-links": "7.5.3",
+        "@storybook/blocks": "7.5.3",
+        "@storybook/preset-scss": "1.0.3",
+        "@storybook/react": "7.5.3",
+        "@storybook/react-webpack5": "7.5.3",
+        "@storybook/test-runner": "0.16.0",
+        "@storybook/testing-library": "0.2.2",
+        "@types/carbon-components-react": "7.55.3",
+        "@types/event-source-polyfill": "1.0.1",
+        "@types/mixpanel-browser": "2.47.1",
+        "@types/node": "20.9.0",
+        "@types/react": "18.2.21",
+        "@types/react-dom": "18.2.7",
+        "@types/styled-components": "5.1.27",
+        "@typescript-eslint/eslint-plugin": "6.9.0",
+        "@typescript-eslint/parser": "6.9.0",
+        "axe-playwright": "1.2.3",
+        "babel-loader": "9.1.3",
+        "conventional-changelog-conventionalcommits": "7.0.2",
+        "copyfiles": "2.4.1",
+        "css-loader": "6.8.1",
+        "eslint": "8.52.0",
+        "eslint-config-prettier": "9.0.0",
+        "eslint-import-resolver-typescript": "3.6.1",
+        "eslint-plugin-import": "2.29.0",
+        "eslint-plugin-prettier": "5.0.1",
+        "eslint-plugin-react": "7.33.2",
+        "eslint-plugin-react-hooks": "4.6.0",
+        "eslint-plugin-storybook": "0.6.15",
+        "event-source-polyfill": "1.0.31",
+        "husky": "8.0.3",
+        "mixpanel-browser": "2.47.0",
+        "prettier": "3.0.3",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "rimraf": "5.0.5",
+        "sass": "1.66.1",
+        "sass-loader": "13.3.2",
+        "semantic-release": "22.0.12",
+        "serve": "14.2.1",
+        "storybook": "7.5.3",
+        "style-loader": "3.3.3",
+        "styled-components": "6.0.7",
+        "typescript": "5.2.2",
+        "wait-on": "7.0.1",
+        "webpack": "5.88.2"
+    },
+    "dependencies": {
+        "jwt-decode": "3.1.2",
+        "react-markdown": "8.0.7"
+    },
+    "peerDependencies": {
+        "@carbon/react": "1.x",
+        "event-source-polyfill": "1.0.x",
+        "react": "18.x",
+        "react-dom": "18.x",
+        "styled-components": "5.x || 6.x"
+    },
+    "description": "Camunda Composite Components",
+    "main": "./lib/esm/src/index.js",
+    "types": "./lib/esm/src/index.d.ts",
+    "files": [
+        "/lib"
+    ],
+    "author": "Camunda",
+    "license": "Apache-2.0",
+    "packageManager": "yarn@3.6.4"
+}

package/lib/esm/{api → src/api}/help-center.d.ts

@@ -2,7 +2,7 @@ import { HelpCenterConfig } from "../components/c3-help-center/defaultHelpCenter
 import { Persona, TileConfig, WpCardType } from "../components/c3-help-center/c3-help-center.types";
 import { OnboardingConfig } from "../components/c3-onboarding-survey/defaultOnboardingConfig";
 import { RequestPayload } from "./api";
-export declare const getConfig: (accessToken: string, audience: string) => Promise<HelpCenterConfig | null>;
+export declare const getConfig: (accessToken: string, audience: string, orgId: string) => Promise<HelpCenterConfig | null>;
 export declare const getTiles: ({ accessToken, tileConfig, salesPlanType, clusterIds, currentOrgId, persona, flags, email, cloudAudience, }: {
     accessToken: string;
     tileConfig: TileConfig[];
@@ -16,9 +16,10 @@ export declare const getTiles: ({ accessToken, tileConfig, salesPlanType, cluste
     salesPlanType: string;
     flags: string[];
 }) => Promise<WpCardType[]>;
-export declare const getOnboardingConfig: ({ camundaAuth, audience, }: {
+export declare const getOnboardingConfig: ({ camundaAuth, audience, orgId, }: {
     audience: string;
     camundaAuth: RequestPayload["camundaAuth"];
+    orgId: string;
 }) => Promise<OnboardingConfig>;
 export declare const updatePersona: ({ newPersona, audience, accessToken, orgId, userId, }: {
     newPersona: Persona;

package/lib/esm/{api → src/api}/help-center.js

@@ -1,8 +1,8 @@
 import { recommendations } from "../components/c3-help-center/recommendations";
 import { request } from "./api";
-export const getConfig = async (accessToken, audience) => {
+export const getConfig = async (accessToken, audience, orgId) => {
     try {
-        const response = await fetch(`https://helpcenter.${audience}/helpcenter/config`, {
+        const response = await fetch(`https://helpcenter.${audience}/helpcenter/config/${orgId}`, {
             headers: {
                 authorization: `Bearer ${accessToken}`,
                 "Content-Type": "application/json",
@@ -31,8 +31,8 @@ export const getTiles = async ({ accessToken, tileConfig, salesPlanType, cluster
     });
     return cards;
 };
-export const getOnboardingConfig = ({ camundaAuth, audience, }) => request({
-    url: `https://helpcenter.${audience}/survey/config`,
+export const getOnboardingConfig = ({ camundaAuth, audience, orgId, }) => request({
+    url: `https://helpcenter.${audience}/survey/config/${orgId}`,
     camundaAuth,
     type: "json",
 });

package/lib/esm/{components → src/components}/c3-help-center/c3-help-center-provider.d.ts

@@ -1,5 +1,8 @@
 import React, { FC, PropsWithChildren } from "react";
-import { HelpCenterHintType } from "./help-center-hint";
+export declare enum HelpCenterHintType {
+    HelpCenter = "help-center",
+    Onboarding = "onboarding"
+}
 export type C3HelpCenterContextValue = {
     openHelpCenter: (showTabId?: string) => void;
     setIsHelpCenterOpen: (isOpen: boolean) => void;

package/lib/esm/{components → src/components}/c3-help-center/c3-help-center-provider.js

@@ -1,4 +1,9 @@
 import React, { useEffect, useState } from "react";
+export var HelpCenterHintType;
+(function (HelpCenterHintType) {
+    HelpCenterHintType["HelpCenter"] = "help-center";
+    HelpCenterHintType["Onboarding"] = "onboarding";
+})(HelpCenterHintType || (HelpCenterHintType = {}));
 export const C3HelpCenterContext = React.createContext({
     openHelpCenter: () => undefined,
     setIsHelpCenterOpen: () => undefined,
@@ -6,7 +11,7 @@ export const C3HelpCenterContext = React.createContext({
     showHint: false,
     setShowHint: () => undefined,
     setShowHintOnClose: () => undefined,
-    hintType: "onboarding",
+    hintType: HelpCenterHintType.Onboarding,
     setHintType: () => undefined,
 });
 export const C3HelpCenterProvider = ({ children }) => {
@@ -14,7 +19,7 @@ export const C3HelpCenterProvider = ({ children }) => {
     const [activeTabId, setActiveTabId] = useState(null);
     const [showHint, setShowHint] = useState(false);
     const [showHintOnClose, setShowHintOnClose] = useState(false);
-    const [hintType, setHintType] = useState("onboarding");
+    const [hintType, setHintType] = useState(HelpCenterHintType.Onboarding);
     const openHelpCenter = (showTabId) => {
         if (!isHelpCenterOpen) {
             setIsHelpCenterOpen(true);
@@ -27,17 +32,11 @@ export const C3HelpCenterProvider = ({ children }) => {
         if (!isHelpCenterOpen) {
             setActiveTabId(null);
             if (showHintOnClose) {
-                console.log("showing hint and hiding after");
                 setShowHintOnClose(false);
-                console.log("starting timeout for showing hint");
-                setTimeout(() => {
-                    console.log("timeout over, showing hint");
-                    setShowHint(true);
-                }, 240);
+                setTimeout(() => setShowHint(true), 240);
             }
         }
     }, [isHelpCenterOpen]);
-    console.log("showHintOnClose", showHintOnClose);
     return (React.createElement(C3HelpCenterContext.Provider, { value: {
             openHelpCenter,
             setIsHelpCenterOpen,

package/lib/esm/{components → src/components}/c3-help-center/c3-help-center.js

@@ -51,9 +51,10 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
     const fetchConfig = async () => {
         if (!userToken || !decodedAudience)
             return;
-        const onboardConfig = await getConfig(userToken, decodedAudience);
+        const onboardConfig = await getConfig(userToken, decodedAudience, activeOrganizationId);
         setHelpCenterConfig(onboardConfig || defaultHelpCenterConfig);
     };
+    const isFirstLoad = useRef(true);
     const fetchData = async () => {
         if (!userToken || !decodedToken || !decodedAudience)
             return;
@@ -76,23 +77,31 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
             onRequestOpen?.();
         }
         await fetchConfig();
+        isFirstLoad.current = false;
     };
     React.useEffect(() => {
         fetchData();
     }, [JSON.stringify(decodedToken), decodedAudience]);
     useEffect(() => {
-        if (!userToken || !decodedAudience || !persona?.complete)
+        if (isFirstLoad.current ||
+            !userToken ||
+            !decodedAudience ||
+            !persona?.complete)
             return;
         fetchConfig();
         reloadClusters();
     }, [persona?.complete]);
+    useEffect(() => {
+        if (isFirstLoad.current || !activeOrganizationId)
+            return;
+        fetchConfig();
+        reloadClusters();
+    }, [activeOrganizationId]);
     React.useEffect(() => {
         const tabs = helpCenterConfig.tabs;
         const firstTab = tabs[0].id;
         if (isOpen) {
-            console.log("opening hc");
             if (autoStartSurvey && !persona?.wasShown) {
-                console.log("show hint on close");
                 setShowHintOnClose(true);
             }
             if (persona && !persona.wasShown && decodedAudience) {

package/lib/esm/{components → src/components}/c3-help-center/help-center-hint.d.ts

@@ -1,3 +1,2 @@
 import React, { PropsWithChildren } from "react";
-export type HelpCenterHintType = "help-center" | "onboarding";
 export declare const HelpCenterHint: React.FC<PropsWithChildren>;

package/lib/esm/{components → src/components}/c3-help-center/help-center-hint.js

@@ -1,18 +1,17 @@
 import React from "react";
 import { Button, Toggletip, ToggletipActions, ToggletipContent, } from "@carbon/react";
-import { useC3HelpCenter } from "./c3-help-center-provider";
+import { HelpCenterHintType, useC3HelpCenter } from "./c3-help-center-provider";
 export const HelpCenterHint = ({ children }) => {
     const { showHint, setShowHint, hintType } = useC3HelpCenter();
-    console.log("showHint", showHint);
     return showHint ? (React.createElement(Toggletip, { defaultOpen: true, 
         // eslint-disable-next-line
         // @ts-ignore
         align: "bottom-right" },
         children,
         React.createElement(ToggletipContent, null,
-            React.createElement("p", null, hintType === "help-center"
-                ? "Access the help center at any time to see your recommendations, discover guides, tutorials, or to share feedback."
-                : "Access the onboarding survey to get personalized next steps and educational content"),
+            React.createElement("p", null, hintType === HelpCenterHintType.HelpCenter
+                ? "Access the Help Center at any time to see your recommendations, discover guides, tutorials, or to share feedback."
+                : "Access the onboarding survey from the Help Center to get personalized next steps and educational content."),
             React.createElement(ToggletipActions, null,
                 React.createElement(Button, { size: "sm", onClick: () => setShowHint(false) }, "Got it"))))) : (children);
 };

package/lib/esm/{components → src/components}/c3-help-center/help-center.js

@@ -1,4 +1,4 @@
-import { Button, Loading, ModalBody, ModalFooter, ModalHeader, SideNav, SideNavItems, SideNavMenuItem, Stack, } from "@carbon/react";
+import { Button, ModalBody, ModalFooter, ModalHeader, SideNav, SideNavItems, SideNavMenuItem, Stack, } from "@carbon/react";
 import { Undo } from "@carbon/react/icons";
 import React, { useEffect, useState } from "react";
 import { Feedback } from "./tabs/feedback";
@@ -9,6 +9,7 @@ import { body01, headings } from "../styles";
 import styled from "styled-components";
 import { useC3HelpCenter } from "./c3-help-center-provider";
 import { useC3Profile } from "../c3-user-configuration/c3-profile-provider/c3-profile-provider";
+import { TabContentSkeleton } from "./tabs/tabContentSkeleton";
 export const StyledModalHeader = styled(ModalHeader) `
 	${headings}
 `;
@@ -52,8 +53,8 @@ export const HelpCenter = ({ configuration, persona, email, audience, flags = []
                     });
                 }
             }
-            setTabTiles(tiles);
             setIsLoadingTiles(false);
+            setTabTiles(tiles);
         })();
     }, [
         token,
@@ -78,7 +79,7 @@ export const HelpCenter = ({ configuration, persona, email, audience, flags = []
         Object.keys(tabTiles).length === 0 &&
         isLoadingTiles) {
         header = "Your recommendations";
-        content = React.createElement(Loading, { style: { marginLeft: "17rem" } });
+        content = React.createElement(TabContentSkeleton, null);
     }
     else if (activeTab === "recommendations" &&
         Object.keys(tabTiles).length === 0) {

package/lib/esm/{components → src/components}/c3-help-center/tabs/feedback.js

@@ -30,7 +30,7 @@ export const Feedback = (props) => {
         placeholder: Placeholder.Feedback,
     });
     const [suggestion, setSuggestion] = useState("");
-    const [allowContact, setAllowContact] = useState(false);
+    const [allowContact, setAllowContact] = useState(true);
     const [file, setFile] = useState(undefined);
     const [submitted, setSubmitted] = useState(false);
     const [isDoingAsyncWork, setisDoingAsyncWork] = useState(false);

package/lib/esm/src/components/c3-help-center/tabs/tabContent.d.ts

@@ -0,0 +1,291 @@
+import React, { FC } from "react";
+import { Dict } from "mixpanel-browser";
+import { WpCardType } from "../c3-help-center.types";
+export declare const TAB_TYPES: {
+    readonly Grid: "grid";
+    readonly Column: "column";
+};
+export type TabType = (typeof TAB_TYPES)[keyof typeof TAB_TYPES];
+export declare const TileWrapper: import("styled-components").IStyledComponent<"web", {
+    ref?: React.LegacyRef<HTMLDivElement> | undefined;
+    key?: React.Key | null | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    placeholder?: string | undefined;
+    slot?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    style?: React.CSSProperties | undefined;
+    tabIndex?: number | undefined;
+    title?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    role?: React.AriaRole | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    is?: string | undefined;
+    'aria-activedescendant'?: string | undefined;
+    'aria-atomic'?: (boolean | "true" | "false") | undefined;
+    'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
+    'aria-braillelabel'?: string | undefined;
+    'aria-brailleroledescription'?: string | undefined;
+    'aria-busy'?: (boolean | "true" | "false") | undefined;
+    'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+    'aria-colcount'?: number | undefined;
+    'aria-colindex'?: number | undefined;
+    'aria-colindextext'?: string | undefined;
+    'aria-colspan'?: number | undefined;
+    'aria-controls'?: string | undefined;
+    'aria-current'?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date" | undefined;
+    'aria-describedby'?: string | undefined;
+    'aria-description'?: string | undefined;
+    'aria-details'?: string | undefined;
+    'aria-disabled'?: (boolean | "true" | "false") | undefined;
+    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-errormessage'?: string | undefined;
+    'aria-expanded'?: (boolean | "true" | "false") | undefined;
+    'aria-flowto'?: string | undefined;
+    'aria-grabbed'?: (boolean | "true" | "false") | undefined;
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
+    'aria-hidden'?: (boolean | "true" | "false") | undefined;
+    'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    'aria-keyshortcuts'?: string | undefined;
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    'aria-level'?: number | undefined;
+    'aria-live'?: "off" | "assertive" | "polite" | undefined;
+    'aria-modal'?: (boolean | "true" | "false") | undefined;
+    'aria-multiline'?: (boolean | "true" | "false") | undefined;
+    'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
+    'aria-orientation'?: "horizontal" | "vertical" | undefined;
+    'aria-owns'?: string | undefined;
+    'aria-placeholder'?: string | undefined;
+    'aria-posinset'?: number | undefined;
+    'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
+    'aria-readonly'?: (boolean | "true" | "false") | undefined;
+    'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    'aria-required'?: (boolean | "true" | "false") | undefined;
+    'aria-roledescription'?: string | undefined;
+    'aria-rowcount'?: number | undefined;
+    'aria-rowindex'?: number | undefined;
+    'aria-rowindextext'?: string | undefined;
+    'aria-rowspan'?: number | undefined;
+    'aria-selected'?: (boolean | "true" | "false") | undefined;
+    'aria-setsize'?: number | undefined;
+    'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
+    'aria-valuemax'?: number | undefined;
+    'aria-valuemin'?: number | undefined;
+    'aria-valuenow'?: number | undefined;
+    'aria-valuetext'?: string | undefined;
+    children?: React.ReactNode;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCopyCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCut?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCutCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPaste?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPasteCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCompositionEnd?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionEndCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStart?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStartCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdate?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
+    onFocus?: React.FocusEventHandler<HTMLDivElement> | undefined;
+    onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
+    onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
+    onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
+    onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
+    onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInput?: React.FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+    onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
+    onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+    onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
+    onResetCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+    onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
+    onSubmitCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+    onInvalid?: React.FormEventHandler<HTMLDivElement> | undefined;
+    onInvalidCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+    onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onError?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onErrorCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyDownCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPress?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPressCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUp?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUpCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onAbort?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onAbortCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThrough?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThroughCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptied?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptiedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onEncrypted?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onEncryptedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onEnded?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onEndedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedData?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedDataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadata?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStart?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStartCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onPause?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onPauseCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onPlaying?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onProgress?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onProgressCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onResize?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onResizeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeked?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeking?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onStalled?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onStalledCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspend?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspendCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdate?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdateCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onWaiting?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onWaitingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onAuxClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onAuxClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenu?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenuCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onDrag?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnd?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragEndCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnter?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnterCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragExit?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragExitCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeave?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeaveCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragOver?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragOverCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragStart?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDragStartCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDrop?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onDropCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
+    onMouseDown?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseDownCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseLeave?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMove?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMoveCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOut?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOutCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOver?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOverCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUp?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUpCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    onSelect?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onSelectCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onTouchCancel?: React.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchCancelCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEnd?: React.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEndCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMove?: React.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMoveCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStart?: React.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStartCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
+    onPointerDown?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerDownCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMove?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMoveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUp?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUpCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancel?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancelCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnter?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnterCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeave?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeaveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOver?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOverCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOut?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOutCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onScroll?: React.UIEventHandler<HTMLDivElement> | undefined;
+    onScrollCapture?: React.UIEventHandler<HTMLDivElement> | undefined;
+    onWheel?: React.WheelEventHandler<HTMLDivElement> | undefined;
+    onWheelCapture?: React.WheelEventHandler<HTMLDivElement> | undefined;
+    onAnimationStart?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationStartCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEndCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIteration?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
+    onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
+}>;
+export declare const TabContent: FC<{
+    onboarding: {
+        complete: boolean;
+        resumeSurvey: () => void;
+    } | undefined;
+    tiles: WpCardType[];
+    type: TabType;
+    salesPlanType: string;
+    origin: string;
+    mixpanelTrack?: (event: string, data: Dict | undefined) => void;
+}>;

package/lib/esm/src/components/c3-help-center/tabs/tabContent.js

@@ -0,0 +1,20 @@
+import { ActionableNotification, Stack } from "@carbon/react";
+import React from "react";
+import { HelpCenterTile } from "../tile";
+import styled from "styled-components";
+export const TAB_TYPES = {
+    Grid: "grid",
+    Column: "column",
+};
+export const TileWrapper = styled.div `
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: flex-start;
+	gap: var(--cds-spacing-05);
+`;
+export const TabContent = ({ onboarding, type, origin, tiles, mixpanelTrack }) => {
+    return (React.createElement("div", null,
+        React.createElement(Stack, null,
+            onboarding && onboarding?.complete !== true && (React.createElement(ActionableNotification, { kind: "info", inline: true, lowContrast: true, hideCloseButton: true, style: { maxWidth: "100%", marginBottom: "1rem" }, actionButtonLabel: "Resume Survey", onActionButtonClick: onboarding.resumeSurvey, title: "Complete the new user survey to see more recommendations", subtitle: "" })),
+            React.createElement(TileWrapper, null, tiles.map((tile) => (React.createElement(HelpCenterTile, { origin: origin, tabType: type, tile: tile, mixpanelTrack: mixpanelTrack, key: tile.card_id })))))));
+};