docs: add GlobalActions samples

lumada-design · Nov 23, 2023 · 2cec2b7 · 2cec2b7
1 parent 16d03d9
commit 2cec2b7
Showing 1 changed file with 83 additions and 7 deletions.
diff --git 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<typeof HvGlobalActions> = {
   title: "Widgets/Global Actions",
   component: HvGlobalActions,
@@ -105,9 +119,6 @@ export const Main: StoryObj<HvGlobalActionsProps> = {
 };
 
 export const GlobalVariant: StoryObj<HvGlobalActionsProps> = {
-  argTypes: {
-    classes: { control: { disable: true } },
-  },
   parameters: {
     docs: {
       description: {
@@ -146,16 +157,14 @@ export const GlobalVariant: StoryObj<HvGlobalActionsProps> = {
 };
 
 export const SectionVariant: StoryObj<HvGlobalActionsProps> = {
-  argTypes: {
-    classes: { control: { disable: true } },
-  },
   parameters: {
     docs: {
       description: {
         story:
           "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<HvGlobalActionsProps> = {
     );
   },
 };
+
+export const CustomContent: StoryObj<HvGlobalActionsProps> = {
+  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 = (
+      <HvTabs value={value} onChange={(_, newValue) => setValue(newValue)}>
+        <HvTab className={classes.tab} label="Tab 1" />
+        <HvTab className={classes.tab} label="Tab 2" />
+        <HvTab className={classes.tab} label="Tab 3" />
+      </HvTabs>
+    );
+
+    return (
+      <HvGlobalActions
+        title={customTitle}
+        classes={{
+          wrapper: classes.wrapper,
+          actions: classes.actions,
+        }}
+        backButton={
+          <div className={classes.backButton}>
+            <HvButton aria-label="Go back" icon>
+              <Backwards />
+            </HvButton>
+            <Home aria-label="Home" />
+            <HvBreadCrumb listRoute={data} maxVisible={2} />
+          </div>
+        }
+      >
+        <HvButton variant="secondaryGhost">Primary</HvButton>
+        <HvDropDownMenu
+          placement="left"
+          dataList={[
+            { label: "Action 2" },
+            { label: "Action 3" },
+            { label: "Action 4" },
+          ]}
+        />
+      </HvGlobalActions>
+    );
+  },
+};