-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: add
Header documentation (#4538)
- Loading branch information
Showing
1 changed file
with
306 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,306 @@ | ||
| import { Callout } from "nextra/components"; | ||
| import { headerClasses, HvHeader } from "@hitachivantara/uikit-react-core"; | ||
|
|
||
| import Playground from "@docs/components/code/Playground"; | ||
| import { Description } from "@docs/components/page/Description"; | ||
| import { Page } from "@docs/components/page/Page"; | ||
| import { getComponentData } from "@docs/utils/component"; | ||
|
|
||
| export const getStaticProps = async ({ params }) => { | ||
| const meta = await getComponentData("Header", "core", headerClasses, [ | ||
| "Actions", | ||
| "Brand", | ||
| "Navigation", | ||
| ]); | ||
| return { props: { ssg: { meta } } }; | ||
| }; | ||
|
|
||
| <Description /> | ||
|
|
||
| <Page> | ||
|
|
||
| ### Usage | ||
|
|
||
| The `HvHeader` component is used to create a header for your application and can be built by composition with other components. UI Kit | ||
| provides a set of components to help you build your header, such as `HvHeaderBrand`, `HvHeaderActions`, and `HvHeaderNavigation` but you | ||
| can also use your own components. | ||
|
|
||
| ```tsx live | ||
| <HvHeader position="relative" className="mb-lg w-full"> | ||
| <HvHeaderBrand name="Pentaho+" /> | ||
| <HvHeaderActions> | ||
| <HvIconButton title="Open Notifications panel"> | ||
| <HvBadge count={1} icon={<Alert />} /> | ||
| </HvIconButton> | ||
| <HvIconButton title="Open User panel"> | ||
| <User /> | ||
| </HvIconButton> | ||
| </HvHeaderActions> | ||
| </HvHeader> | ||
| ``` | ||
|
|
||
| ### Navigation | ||
|
|
||
| The example below shows a simple header with a brand, navigation, and actions. If you resize the window to a smaller size, the navigation will be hidden and a menu button will appear. | ||
|
|
||
| ```tsx live | ||
| import { useState } from "react"; | ||
|
|
||
| export default function Demo() { | ||
| const width = useWidth(); | ||
| const [selected, setSelected] = useState<string>("2"); | ||
|
|
||
| const isLgUp = width === "lg" || width === "xl"; | ||
|
|
||
| return ( | ||
| <HvHeader position="relative" className="mb-lg w-full"> | ||
| {!isLgUp && ( | ||
| <HvIconButton title="Menu"> | ||
| <Menu /> | ||
| </HvIconButton> | ||
| )} | ||
| <HvHeaderBrand name="Pentaho+" /> | ||
| {isLgUp && ( | ||
| <HvHeaderNavigation | ||
| data={navigationDataMain} | ||
| selected={selected} | ||
| onClick={(_, selectedItem) => | ||
| selectedItem.href | ||
| ? setSelected(selectedItem.id) | ||
| : setSelected(selectedItem.data[0].id) | ||
| } | ||
| /> | ||
| )} | ||
|
|
||
| <HvHeaderActions> | ||
| <HvIconButton title="Open Notifications panel"> | ||
| <HvBadge count={1} icon={<Alert />} /> | ||
| </HvIconButton> | ||
| {isLgUp && ( | ||
| <HvIconButton title="Open User panel"> | ||
| <User /> | ||
| </HvIconButton> | ||
| )} | ||
| </HvHeaderActions> | ||
| </HvHeader> | ||
| ); | ||
| } | ||
|
|
||
| const navigationDataMain = [ | ||
| { | ||
| id: "1", | ||
| label: "Overview", | ||
| data: [ | ||
| { | ||
| id: "1-1", | ||
| label: "Model Effectiveness 1", | ||
| href: "/overview/model-effectiveness", | ||
| }, | ||
| { | ||
| id: "1-2", | ||
| label: "Trend Analysis 1-2", | ||
| href: "/overview/trend-analysis", | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| id: "2", | ||
| label: "Events", | ||
| href: "/events", | ||
| }, | ||
| { | ||
| id: "3", | ||
| label: "Work Orders", | ||
| data: [ | ||
| { | ||
| id: "3-1", | ||
| label: "Model Effectiveness 3-1", | ||
| href: "/work-orders/model-effectiveness", | ||
| }, | ||
| { | ||
| id: "3-2", | ||
| label: "Trend Analysis 3-2", | ||
| href: "/work-orders/trend-analysis", | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| id: "4", | ||
| label: "Assets", | ||
| href: "/assets", | ||
| }, | ||
| { | ||
| id: "5", | ||
| label: "Analytics", | ||
| data: [ | ||
| { | ||
| id: "5-1", | ||
| label: "Model Effectiveness 5-1", | ||
| href: "/analytics/model-effectiveness", | ||
| }, | ||
| { | ||
| id: "5-2", | ||
| label: "Trend Analysis 5-2", | ||
| href: "/analytics/trend-analysis", | ||
| }, | ||
| ], | ||
| }, | ||
| ]; | ||
| ``` | ||
|
|
||
| ### Combined navigation | ||
|
|
||
| ```tsx live | ||
| import { useState } from "react"; | ||
|
|
||
| export default function Demo() { | ||
| const width = useWidth(); | ||
|
|
||
| const [selectedHeaderItem, setSelectedHeaderItem] = | ||
| useState<HvHeaderNavigationItemProp>(navigationDataCombined[0]); | ||
| const [selected, setSelected] = useState( | ||
| navigationDataCombined[0].data?.[0].id, | ||
| ); | ||
|
|
||
| const traverseItem = ( | ||
| item: HvHeaderNavigationItemProp, | ||
| ): string | undefined => { | ||
| if (item.data) { | ||
| return traverseItem(item.data[0]); | ||
| } | ||
| return item.id; | ||
| }; | ||
|
|
||
| const handleChange: HvHeaderNavigationProps["onClick"] = (event, item) => { | ||
| setSelectedHeaderItem(item); | ||
| setSelected(traverseItem(item)); | ||
| }; | ||
|
|
||
| const isLgUp = width === "lg" || width === "xl"; | ||
|
|
||
| return ( | ||
| <div className="w-full"> | ||
| <HvHeader position="relative"> | ||
| <HvHeaderNavigation | ||
| data={navigationDataCombined} | ||
| selected={selectedHeaderItem.id} | ||
| onClick={handleChange} | ||
| aria-label="Header Navigation" | ||
| levels={1} | ||
| /> | ||
| </HvHeader> | ||
| <div | ||
| style={{ | ||
| display: "flex", | ||
| height: `calc(300px - ${theme.header.height})`, | ||
| }} | ||
| > | ||
| <HvVerticalNavigation> | ||
| <HvVerticalNavigationTree | ||
| collapsible | ||
| defaultExpanded | ||
| selected={selected} | ||
| aria-label="Vertical Navigation" | ||
| onChange={(event, data) => { | ||
| event.preventDefault(); | ||
|
|
||
| setSelected(data.id); | ||
| }} | ||
| data={selectedHeaderItem.data ?? [selectedHeaderItem]} | ||
| /> | ||
| </HvVerticalNavigation> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| const navigationDataCombined = [ | ||
| { | ||
| id: "1", | ||
| label: "Overview", | ||
| data: [ | ||
| { | ||
| id: "1-1", | ||
| label: "Model Effectiveness 1", | ||
| href: "/overview/model-effectiveness", | ||
| }, | ||
| { | ||
| id: "1-2", | ||
| label: "Trend Analysis 1-2", | ||
| href: "/overview/trend-analysis", | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| id: "2", | ||
| label: "Events", | ||
| href: "/events", | ||
| }, | ||
| { | ||
| id: "3", | ||
| label: "Work Orders", | ||
| data: [ | ||
| { | ||
| id: "3-1", | ||
| label: "Model Effectiveness 3-1", | ||
| data: [ | ||
| { | ||
| id: "3-1-1", | ||
| label: "Another Sub Level 3-1-1", | ||
| href: "/work-orders/model-effectiveness-3-1-1", | ||
| }, | ||
| { | ||
| id: "3-1-2", | ||
| label: "Another Sub Level 3-1-2", | ||
| href: "/work-orders/trend-analysis-3-1-2", | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| id: "3-2", | ||
| label: "Trend Analysis 3-2", | ||
| href: "/work-orders/trend-analysis", | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| id: "4", | ||
| label: "Assets", | ||
| href: "/assets", | ||
| }, | ||
| { | ||
| id: "5", | ||
| label: "Analytics", | ||
| data: [ | ||
| { | ||
| id: "5-1", | ||
| label: "Model Effectiveness 5-1", | ||
| href: "/analytics/model-effectiveness", | ||
| }, | ||
| { | ||
| id: "5-2", | ||
| label: "Trend Analysis 5-2", | ||
| href: "/analytics/trend-analysis", | ||
| }, | ||
| ], | ||
| }, | ||
| ]; | ||
| ``` | ||
|
|
||
| ### Custom content | ||
|
|
||
| You don't need to use the provided components to build your header. You can use any component you want. | ||
|
|
||
| ```tsx live | ||
| <HvHeader position="relative" className="mb-lg w-full"> | ||
| <HvIconButton title="Menu"> | ||
| <Menu /> | ||
| </HvIconButton> | ||
| <div className="flex-1" /> | ||
| <HvTypography variant="title3">My App Title</HvTypography> | ||
| <div className="flex-1" /> | ||
| <HvButton variant="primarySubtle">Open</HvButton> | ||
| </HvHeader> | ||
| ``` | ||
|
|
||
| </Page> |