@atlaskit/help-layout 6.0.2 → 6.2.0

package/dist/esm/components/SideNav/index.js

@@ -0,0 +1,62 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useState } from 'react';
+import { cx } from '@atlaskit/css';
+import { Box, Flex, Pressable, Stack, Text } from '@atlaskit/primitives/compiled';
+import Tooltip from '@atlaskit/tooltip';
+import { DynamicHeader } from '../DynamicHeader';
+var styles = {
+  mainContent: "_1reo1wug _18m91wug _4t3i1osq _1bsb1osq",
+  navBarWrapper: "_1reo1wug _18m91wug _4t3i1osq _1bsb1osq",
+  navButton: "_2rkoiti9 _zulpu2gc _19it145i _1rjcu2gc _1e0c1txw _bfhk1j28 _2lx21bp4 _4cvr1h6o _80omtlke _vchhusvi _o5721q9c _1bsb1osq _irr3166n _30l31fxt",
+  navButtonSelected: "_1h6d15qp _bfhkfg4m _syaz14q2 _irr3i1yw _30l314q2",
+  wrapper: "_1reo1wug _18m91wug _4t3i1osq _1ul91wqb _bfhk1d5g",
+  navItemWrapper: "_19pk1b66 _2hwx1b66 _otyr1b66 _18u01b66"
+};
+export var SideNav = function SideNav(_ref) {
+  var sideNavTabs = _ref.sideNavTabs;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeIndex = _useState2[0],
+    setActiveIndex = _useState2[1];
+  return /*#__PURE__*/React.createElement(Flex, {
+    xcss: styles.navBarWrapper
+  }, /*#__PURE__*/React.createElement(Flex, {
+    justifyContent: "space-between",
+    xcss: styles.wrapper,
+    direction: "column"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    testId: "side-nav-tabs"
+  }, sideNavTabs.map(function (tab, index) {
+    return /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.navItemWrapper,
+      key: tab.label,
+      testId: "side-nav-".concat(tab.label)
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      ignoreTooltipPointerEvents: true,
+      position: "left",
+      content: tab.label
+    }, /*#__PURE__*/React.createElement(Pressable, {
+      xcss: cx(styles.navButton, index === activeIndex && styles.navButtonSelected),
+      onClick: function onClick(event) {
+        setActiveIndex(index);
+        tab.onClick && (tab === null || tab === void 0 ? void 0 : tab.onClick(event));
+      },
+      testId: "side-nav-button-".concat(tab.label)
+    }, tab.icon, /*#__PURE__*/React.createElement(Text, {
+      size: "small",
+      color: index === activeIndex ? 'color.link' : 'color.text.subtle'
+    }, tab.label))));
+  }))), /*#__PURE__*/React.createElement(Flex, {
+    direction: "column",
+    xcss: styles.mainContent
+  }, /*#__PURE__*/React.createElement(DynamicHeader, {
+    title: sideNavTabs[activeIndex].header.title,
+    onCloseButtonClick: sideNavTabs[activeIndex].header.onCloseButtonClick,
+    onNewChatButtonClick: sideNavTabs[activeIndex].header.onNewChatButtonClick,
+    newChatButtonDisabled: sideNavTabs[activeIndex].header.newChatButtonDisabled
+  }), sideNavTabs[activeIndex].content));
+};

package/dist/esm/messages.js

@@ -24,5 +24,10 @@ export var messages = defineMessages({
     id: 'helpPanel.header.close.button',
     defaultMessage: 'Close Help Panel',
     description: ''
+  },
+  help_panel_new_chat_button: {
+    id: 'helpPanel.header.new.chat.button',
+    defaultMessage: 'New',
+    description: 'Start a new chat with CSM agent'
   }
 });

package/dist/types/components/DynamicHeader/NewChatButton.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/// <reference types="react" />
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+interface Props {
+    onClick?(event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent): void;
+    isDisabled?: boolean;
+}
+export declare const NewChatButton: ({ onClick, isDisabled }: Props) => JSX.Element;
+export {};

package/dist/types/components/DynamicHeader/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/// <reference types="react" />
+import { type HeaderContent } from '../../model/HelpLayout';
+export declare const DynamicHeader: ({ title, onCloseButtonClick, onNewChatButtonClick, newChatButtonDisabled, }: HeaderContent) => JSX.Element;

package/dist/types/components/Header/CloseButton.d.ts

@@ -3,7 +3,7 @@ import { type WrappedComponentProps } from 'react-intl-next';
 import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 interface Props {
     onClick(event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent?: UIAnalyticsEvent): void;
-    isAiEnabled?: boolean;
+    inDynamicHeader?: boolean;
 }
 /**
  * This function will return a CloseButton component only if the function

package/dist/types/components/Header/styled.d.ts

@@ -7,10 +7,8 @@ import { TransitionStatus } from '../constants';
 export declare const HeaderContainer: ({ children }: {
     children: React.ReactNode;
 }) => JSX.Element;
-export declare const CloseButtonContainer: ({ children }: {
-    children: React.ReactNode;
-}) => JSX.Element;
-export declare const CloseButtonContainerAi: ({ children }: {
+export declare const CloseButtonContainer: ({ inDynamicHeader, children, }: {
+    inDynamicHeader: boolean;
     children: React.ReactNode;
 }) => JSX.Element;
 export declare const TRANSITION_DURATION_MS = 220;
@@ -21,9 +19,6 @@ export declare const BackButtonContainer: ({ transitionState, children, }: {
 export declare const HeaderTitle: ({ children }: {
     children: React.ReactNode;
 }) => JSX.Element;
-export declare const HeaderTitleAi: ({ children }: {
-    children: React.ReactNode;
-}) => JSX.Element;
 export declare const HeaderContent: ({ children }: {
     children: React.ReactNode;
 }) => JSX.Element;

package/dist/types/components/SideNav/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/// <reference types="react" />
+import { type SideNavTab } from '../../model/HelpLayout';
+interface SideNavProps {
+    sideNavTabs: SideNavTab[];
+}
+export declare const SideNav: ({ sideNavTabs }: SideNavProps) => JSX.Element;
+export {};

package/dist/types/messages.d.ts

@@ -24,4 +24,9 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    help_panel_new_chat_button: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

package/dist/types/model/HelpLayout.d.ts

@@ -8,9 +8,23 @@ export interface HelpPanelHeader {
     isBackbuttonVisible?: boolean;
     isAiEnabled?: boolean;
 }
+export interface HeaderContent {
+    title: string;
+    onNewChatButtonClick?(event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent): void;
+    onCloseButtonClick?(event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent): void;
+    newChatButtonDisabled?: boolean;
+}
+export interface SideNavTab {
+    icon: React.ReactNode;
+    label: string;
+    content: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    header: HeaderContent;
+}
 export interface HelpLayout extends HelpPanelHeader {
     isLoading?: boolean;
     footer?: React.ReactNode;
     children?: React.ReactNode;
-    isAiEnabled?: boolean;
+    sideNavTabs?: SideNavTab[];
+    onLoad?: () => void;
 }

package/dist/types-ts4.5/components/DynamicHeader/NewChatButton.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+interface Props {
+    onClick?(event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent): void;
+    isDisabled?: boolean;
+}
+export declare const NewChatButton: ({ onClick, isDisabled }: Props) => JSX.Element;
+export {};

package/dist/types-ts4.5/components/DynamicHeader/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type HeaderContent } from '../../model/HelpLayout';
+export declare const DynamicHeader: ({ title, onCloseButtonClick, onNewChatButtonClick, newChatButtonDisabled, }: HeaderContent) => JSX.Element;

package/dist/types-ts4.5/components/Header/CloseButton.d.ts

@@ -3,7 +3,7 @@ import { type WrappedComponentProps } from 'react-intl-next';
 import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 interface Props {
     onClick(event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent?: UIAnalyticsEvent): void;
-    isAiEnabled?: boolean;
+    inDynamicHeader?: boolean;
 }
 /**
  * This function will return a CloseButton component only if the function

package/dist/types-ts4.5/components/Header/styled.d.ts

@@ -7,10 +7,8 @@ import { TransitionStatus } from '../constants';
 export declare const HeaderContainer: ({ children }: {
     children: React.ReactNode;
 }) => JSX.Element;
-export declare const CloseButtonContainer: ({ children }: {
-    children: React.ReactNode;
-}) => JSX.Element;
-export declare const CloseButtonContainerAi: ({ children }: {
+export declare const CloseButtonContainer: ({ inDynamicHeader, children, }: {
+    inDynamicHeader: boolean;
     children: React.ReactNode;
 }) => JSX.Element;
 export declare const TRANSITION_DURATION_MS = 220;
@@ -21,9 +19,6 @@ export declare const BackButtonContainer: ({ transitionState, children, }: {
 export declare const HeaderTitle: ({ children }: {
     children: React.ReactNode;
 }) => JSX.Element;
-export declare const HeaderTitleAi: ({ children }: {
-    children: React.ReactNode;
-}) => JSX.Element;
 export declare const HeaderContent: ({ children }: {
     children: React.ReactNode;
 }) => JSX.Element;

package/dist/types-ts4.5/components/SideNav/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type SideNavTab } from '../../model/HelpLayout';
+interface SideNavProps {
+    sideNavTabs: SideNavTab[];
+}
+export declare const SideNav: ({ sideNavTabs }: SideNavProps) => JSX.Element;
+export {};

package/dist/types-ts4.5/messages.d.ts

@@ -24,4 +24,9 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    help_panel_new_chat_button: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

package/dist/types-ts4.5/model/HelpLayout.d.ts

@@ -8,9 +8,23 @@ export interface HelpPanelHeader {
     isBackbuttonVisible?: boolean;
     isAiEnabled?: boolean;
 }
+export interface HeaderContent {
+    title: string;
+    onNewChatButtonClick?(event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent): void;
+    onCloseButtonClick?(event: React.MouseEvent<HTMLElement, MouseEvent>, analyticsEvent: UIAnalyticsEvent): void;
+    newChatButtonDisabled?: boolean;
+}
+export interface SideNavTab {
+    icon: React.ReactNode;
+    label: string;
+    content: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    header: HeaderContent;
+}
 export interface HelpLayout extends HelpPanelHeader {
     isLoading?: boolean;
     footer?: React.ReactNode;
     children?: React.ReactNode;
-    isAiEnabled?: boolean;
+    sideNavTabs?: SideNavTab[];
+    onLoad?: () => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/help-layout",
-	"version": "6.0.2",
+	"version": "6.2.0",
 	"description": "Layout for the atlaskit/help component.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -34,7 +34,10 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/button": "^23.0.0",
+		"@atlaskit/css": "^0.10.0",
+		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^25.6.0",
+		"@atlaskit/primitives": "^14.7.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tokens": "^4.8.0",
 		"@atlaskit/tooltip": "^20.0.0",