diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx index b685f49697..7227ba1b3f 100644 --- a/apps/website/pages/_app.tsx +++ b/apps/website/pages/_app.tsx @@ -14,6 +14,7 @@ import Link from "next/link"; import { GroupItem, Item, Section } from "../../../packages/lib/src/base-menu/types"; import { isGroupItem } from "../../../packages/lib/src/base-menu/utils"; import SidenavLogo from "@/common/sidenav/SidenavLogo"; +import { dxcLogo } from "@/common/images/dxc_logo"; type NextPageWithLayout = NextPage & { getLayout?: (_page: ReactElement) => ReactNode; @@ -99,6 +100,11 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo + } sidenav={ + DXC Logo + + + + + + + +); diff --git a/apps/website/screens/components/header/code/HeaderCodePage.tsx b/apps/website/screens/components/header/code/HeaderCodePage.tsx index 30eddc65c8..2f1b3d4841 100644 --- a/apps/website/screens/components/header/code/HeaderCodePage.tsx +++ b/apps/website/screens/components/header/code/HeaderCodePage.tsx @@ -1,14 +1,34 @@ -import { DxcFlex, DxcTable, DxcParagraph, DxcLink } from "@dxc-technology/halstack-react"; +import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react"; import DocFooter from "@/common/DocFooter"; import QuickNavContainer from "@/common/QuickNavContainer"; -import Link from "next/link"; import Code, { ExtendedTableCode, TableCode } from "@/common/Code"; import StatusBadge from "@/common/StatusBadge"; -const logoTypeString = `{ - href?: string; - src: string; - title?: string; +const brandingTypeString = `{ + logo : { + src: string | SVG; + alt: string; + href?: string; + onClick?: () => void; + }; + appTitle?: string; +}`; + +const navItemsTypeString = `(GroupItem | Item)[]`; + +const itemTypeString = `{ + badge?: ReactElement; + icon?: string | SVG; + label: string; + onSelect?: () => void; + selected?: boolean; +}`; + +const groupItemTypeString = `{ + badge?: ReactElement; + icon?: string | SVG; + label: string; + items: (Item)[]; }`; const sections = [ @@ -25,124 +45,90 @@ const sections = [ - - content - - React.ReactNode - - - Content shown in the header. Take into account that the component applies styles for the first child in - the content, so we recommend the use of React.Fragment to be applied correctly. Otherwise, - the styles can be modified. - - - - - - logo + + branding - - {"Logo"} -

- being Logo an object with the following properties: -

- {logoTypeString} - + {brandingTypeString} - Logo to be displayed inside the header. + Object used to configure the header branding, including logo and application title. - - margin + navItems - 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' + {navItemsTypeString} - Size of the bottom margin to be applied to the header. - - - - - onClick - {"() => void"} + Array of navigation items to be displayed in the header navigation menu. Each item can be a single/simple + item or a group item. +

+ Being Item an object with the following properties: +

+ {itemTypeString} +

+ and GroupItem an object with the following properties: +

+ {groupItemTypeString} + Group items will ignore any nested group items to maintain a maximum of two levels in the navigation menu. + When responsive, navigation items will be displayed in a vertical menu below the header in a vertical + layout. - This function will be called when the user clicks the header logo. - - responsiveContent + responsiveBottomContent - {"(closeHandler: () => void) => React.ReactNode"} + React.ReactNode - Content shown in responsive version. It receives the close menu handler that can be used to add that - functionality when a element is clicked. + The content rendered in the bottom part of the header menu under the navigation items when in responsive + mode. - - tabIndex - - number - - Value of the tabindex for all interactive elements, except those inside the custom area. - - 0 - - - - underlined + sideContent - boolean + {"React.ReactNode | (isResponsive: boolean) => React.ReactNode"} - Whether a contrast line should appear at the bottom of the header. - false + Content to be displayed on the right side of the header. It can be a ReactNode or a function that receives + a boolean indicating if the header is in responsive mode and returns a ReactNode. ), }, - { - title: "DxcHeader.Dropdown", - content: ( - - Everything between the tags will be displayed as a dropdown. If you want to show a{" "} - - DxcDropdown - - , as a shortcut, you can also use it as a direct child of the DxcHeader without the tags, but we recommend to - use it with the tags since some styles will be applied for a better fit in the header. - - ), - }, - { - title: "Examples", - subSections: [ - { - title: "Header in application layout", - content: ( -