diff --git a/packages/core/src/components/GlobalActions/GlobalActions.stories.tsx b/packages/core/src/components/GlobalActions/GlobalActions.stories.tsx index 215167d240..83dbbb5435 100644 --- a/packages/core/src/components/GlobalActions/GlobalActions.stories.tsx +++ b/packages/core/src/components/GlobalActions/GlobalActions.stories.tsx @@ -1,4 +1,5 @@ -import { Backwards } from "@hitachivantara/uikit-react-icons"; +import { useState } from "react"; +import { Backwards, Home } from "@hitachivantara/uikit-react-icons"; import { Meta, StoryObj } from "@storybook/react"; import { HvButton, @@ -7,11 +8,24 @@ import { HvDropDownMenu, HvGlobalActions, HvGlobalActionsProps, + HvBreadCrumb, + HvTabs, + HvTab, + theme, } from "@hitachivantara/uikit-react-core"; +import { css } from "@emotion/css"; const lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Purus faucibus ornare suspendisse sed nisi lacus sed. Tortor at risus viverra adipiscing at in tellus. Et netus et malesuada fames ac turpis. Sed blandit libero volutpat sed cras ornare arcu. Arcu odio ut sem nulla pharetra diam sit amet. Sagittis purus sit amet volutpat consequat mauris nunc congue. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Dictum varius duis at consectetur. Lorem sed risus ultricies tristique nulla aliquet enim tortor at. Turpis egestas maecenas pharetra convallis posuere morbi. Eget sit amet tellus cras adipiscing. Egestas erat imperdiet sed euismod nisi. Morbi tincidunt augue interdum velit euismod in pellentesque massa. At augue eget arcu dictum varius duis at. Tellus elementum sagittis vitae et. In est ante in nibh mauris cursus mattis. Faucibus nisl tincidunt eget nullam non. Cursus metus aliquam eleifend mi in nulla posuere."; +const data = [ + { label: "Label 1", path: "route1" }, + { label: "Label 2", path: "route2" }, + { label: "Label 3", path: "route3" }, + { label: "Label 4", path: "route4" }, + { label: "Label 5", path: "route5" }, +]; + const meta: Meta = { title: "Widgets/Global Actions", component: HvGlobalActions, @@ -105,9 +119,6 @@ export const Main: StoryObj = { }; export const GlobalVariant: StoryObj = { - argTypes: { - classes: { control: { disable: true } }, - }, parameters: { docs: { description: { @@ -146,9 +157,6 @@ export const GlobalVariant: StoryObj = { }; export const SectionVariant: StoryObj = { - argTypes: { - classes: { control: { disable: true } }, - }, parameters: { docs: { description: { @@ -156,6 +164,7 @@ export const SectionVariant: StoryObj = { "The `section` variant of Global Actions should be used to group related blocks of information. Use with parsimony, you might not need such a clear separator.", }, }, + eyes: { include: false }, }, render: () => { const customTitle = ( @@ -183,3 +192,70 @@ export const SectionVariant: StoryObj = { ); }, }; + +export const CustomContent: StoryObj = { + parameters: { + docs: { + description: { + story: + "The content of the Global Actions can be customized. This is useful when you want to add different elements other than the title and actions.", + }, + }, + }, + render: () => { + const classes = { + tab: css({ height: 42, ...theme.typography.title4 }), + wrapper: css({ + display: "flex", + justifyContent: "space-between", + padding: theme.spacing(0, "xs"), + height: 48, + }), + actions: css({ marginLeft: "unset" }), + backButton: css({ + display: "flex", + alignItems: "center", + gap: theme.space.xs, + }), + }; + + const [value, setValue] = useState(0); + + const customTitle = ( + setValue(newValue)}> + + + + + ); + + return ( + + + + + + + + } + > + Primary + + + ); + }, +};