Skip to content

Commit

Permalink
feat: custom classname and data-cy props (#873)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nataliepina
nataliepina authored Nov 8, 2022
1 parent bd94480 commit 3f446c9
Show file tree
Hide file tree
Showing 2 changed files with 94 additions and 105 deletions.
33 changes: 27 additions & 6 deletions packages/pageheader/components/PageHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,22 @@ import PageHeaderTabs from "../components/PageHeaderTabs";
import { fillHeight } from "../style";

export interface PageHeaderProps {
/**
* Breadcrumbs to display on the left side of the PageHeader.
*/
breadcrumbElements: React.ReactNodeArray;
/**
* Actions to display on the right side of the PageHeader.
*/
actions?: Array<React.ReactElement<any>>;
/**
* Human-readable selector used for writing tests.
*/
"data-cy"?: string;
/**
* Pass in custom CSS properties.
*/
className?: string;
children?: React.ReactNode;
}

Expand All @@ -24,20 +38,27 @@ export const pageHeaderPaddingSize: SpaceSizes = "l";
const PageHeader = ({
breadcrumbElements,
actions = [],
children
children,
"data-cy": dataCy = "pageHeader",
className
}: PageHeaderProps) => {
const hasTabsChild = React.Children.toArray(children).some(
child => React.isValidElement(child) && child.type === PageHeaderTabs
);

return (
<div
className={cx(padding("all", pageHeaderPaddingSize), {
[border("bottom")]: !hasTabsChild,
[fillHeight]: hasTabsChild
})}
className={cx(
padding("all", pageHeaderPaddingSize),
{
[border("bottom")]: !hasTabsChild,
[fillHeight]: hasTabsChild
},
// className for custom CSS
className
)}
>
<div className={cx(flex({ align: "center" }))} data-cy="pageHeader">
<div className={cx(flex({ align: "center" }))} data-cy={dataCy}>
<div className={flexItem("grow")}>
<Breadcrumb>{breadcrumbElements}</Breadcrumb>
</div>
Expand Down
166 changes: 67 additions & 99 deletions packages/pageheader/stories/PageHeader.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,121 +16,89 @@ const action = () => alert("Action triggered");

export default {
title: "Page Structure/Page Header",
component: PageHeader
} as Meta;

const Template: Story<PageHeaderProps> = args => (
<PageHeader
breadcrumbElements={[
component: PageHeader,
args: {
breadcrumbElements: [
<div key="Universe">Universe</div>,
<div key="MilkyWay">Milky Way</div>,
<div key="Earth">Earth</div>
]}
actions={[
],
actions: [
<SecondaryButton onClick={action} key="Action2">
Secondary
</SecondaryButton>,
<PrimaryButton onClick={action} key="Action1">
Primary
</PrimaryButton>
]}
{...args}
/>
);
]
}
} as Meta;

const Template: Story<PageHeaderProps> = args => <PageHeader {...args} />;

export const Default = Template.bind({});

export const WithOverflowMenu = args => (
<PageHeader
breadcrumbElements={[
<div key="Universe">Universe</div>,
<div key="MilkyWay">Milky Way</div>,
<div key="Earth">Earth</div>
]}
actions={[
<SecondaryButton onClick={action} key="Action2">
Secondary
</SecondaryButton>,
<PrimaryButton onClick={action} key="Action1">
Primary
</PrimaryButton>,
<DropdownMenu
key="OverflowMenu"
trigger={
<ResetButton>
<Icon shape={SystemIcons.EllipsisVertical} />
</ResetButton>
}
{...args}
>
<DropdownSection>
<DropdownMenuItem key="overflowone" value="overflowone">
Overflow One
</DropdownMenuItem>
<DropdownMenuItem key="overflowtwo" value="overflowtwo">
Overflow Two
</DropdownMenuItem>
<DropdownMenuItem key="overflowthree" value="overflowthree">
Overflow Three
</DropdownMenuItem>
</DropdownSection>
</DropdownMenu>
]}
/>
);
export const WithOverflowMenu = Default.bind({});
WithOverflowMenu.args = {
actions: [
<SecondaryButton onClick={action} key="Action2">
Secondary
</SecondaryButton>,
<PrimaryButton onClick={action} key="Action1">
Primary
</PrimaryButton>,
<DropdownMenu
key="OverflowMenu"
trigger={
<ResetButton>
<Icon shape={SystemIcons.EllipsisVertical} />
</ResetButton>
}
>
<DropdownSection>
<DropdownMenuItem key="overflowone" value="overflowone">
Overflow One
</DropdownMenuItem>
<DropdownMenuItem key="overflowtwo" value="overflowtwo">
Overflow Two
</DropdownMenuItem>
<DropdownMenuItem key="overflowthree" value="overflowthree">
Overflow Three
</DropdownMenuItem>
</DropdownSection>
</DropdownMenu>
]
};

export const WithoutActions = args => (
<PageHeader
breadcrumbElements={[
<div key="Universe">Universe</div>,
<div key="MilkyWay">Milky Way</div>,
<div key="Earth">Earth</div>
]}
{...args}
/>
);
export const WithoutActions = Default.bind({});
WithoutActions.args = { actions: [] };

export const WithPageHeaderBody = args => (
<PageHeader
breadcrumbElements={[
<div key="Universe">Universe</div>,
<div key="MilkyWay">Milky Way</div>,
<div key="Earth">Earth</div>
]}
{...args}
>
export const WithPageHeaderBody = Default.bind({});
WithPageHeaderBody.args = {
children: (
<PageHeaderBody>
This content is rendered in the PageHeaderBody component
</PageHeaderBody>
</PageHeader>
);

export const WithPageHeaderTabs = args => {
const tabOnSelect = selectedTab => {
alert(`${selectedTab} clicked`);
};
)
};

return (
<PageHeader
{...args}
breadcrumbElements={[
<div key="Universe">Universe</div>,
<div key="MilkyWay">Milky Way</div>,
<div key="Earth">Earth</div>
]}
>
<PageHeaderTabs>
<Tabs selectedIndex={0} onSelect={tabOnSelect}>
<TabItem>
<TabTitle>Tab 1 Name</TabTitle>
<div>First tab Content</div>
</TabItem>
<TabItem>
<TabTitle>Tab 2 Name</TabTitle>
Second Tab Content
</TabItem>
</Tabs>
</PageHeaderTabs>
</PageHeader>
);
export const WithPageHeaderTabs = Default.bind({});
const tabOnSelect = selectedTab => {
alert(`${selectedTab} clicked`);
};
WithPageHeaderTabs.args = {
children: (
<PageHeaderTabs>
<Tabs selectedIndex={0} onSelect={tabOnSelect}>
<TabItem>
<TabTitle>Tab 1 Name</TabTitle>
<div>First tab Content</div>
</TabItem>
<TabItem>
<TabTitle>Tab 2 Name</TabTitle>
Second Tab Content
</TabItem>
</Tabs>
</PageHeaderTabs>
)
};

0 comments on commit 3f446c9

Please sign in to comment.