Help layout
Layout for the atlaskit/help component.
yarn add @atlaskit/help-layout5.0.1
Patch Changes
-
#120533
f1bec731e278f- Adds asideEffectsfield to ensure this package does not have Compiled styles tree-shaken in the future to avoid an accidental regression.This is related to https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953
Note: This component is designed for internal Atlassian development.
External contributors will be able to use this component but will not be able to submit issues.
Usage
import React from 'react';
import { AnalyticsListener } from '@atlaskit/analytics-next';
import Page from '@atlaskit/page';
import LocaleIntlProvider from '../example-helpers/LocaleIntlProvider';
import HelpLayout from '../src/index';
import {
ExampleWrapper,
HelpWrapper,
FooterContent,
ExampleDefaultContent,
} from './utils/styled';
const handleEvent = (analyticsEvent: { payload: any; context: any }) => {
const { payload, context } = analyticsEvent;
console.log('Received event:', { payload, context });
};
const Example = () => {
return (
<ExampleWrapper>
<Page>
<HelpWrapper>
<AnalyticsListener channel="atlaskit" onEvent={handleEvent}>
<LocaleIntlProvider locale={'en'}>
<HelpLayout
isBackbuttonVisible={true}
footer={
<FooterContent>
<span>Footer</span>
</FooterContent>
}
>
<ExampleDefaultContent>
<span>Default content</span>
</ExampleDefaultContent>
</HelpLayout>
</LocaleIntlProvider>
</AnalyticsListener>
</HelpWrapper>
</Page>
</ExampleWrapper>
);
};
export default Example;Props
isLoading boolean
Loading state. This prop is optional
children React.ReactNode
Wrapped content
React.ReactNodeisAiEnabled boolean
AI implementation flag for new layout
headerTitle string
Title used in the header. This prop is optional, if is not defined, the default value is used ("Help")
headerContent React.ReactNode
Content to render underneath the header title. This prop is optional
React.ReactNodeonCloseButtonClick function
Event handler for the "Close" button. This prop is optional, if this function is not defined the close button will not be displayed
function event, analyticsEvent => undefinedonBackButtonClick function
Event handler for the "Back" button. This prop is optional
function event, analyticsEvent => undefinedisAiEnabled boolean
AI implementation flag for new layout