orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
928 lines (926 loc) • 29.2 kB
JavaScript
import React, { useState, useEffect, useRef } from "react";
import PropTypes from "prop-types";
import styled, { ThemeProvider } from "styled-components";
import { space, layout, variant } from "styled-system";
import Avatar from "../Avatar";
import Box from "../Box";
import Flex, { FlexItem } from "../Flex";
import Icon from "../Icon";
import Spacer from "../Spacer";
import { Small } from "../Typography";
import StyledLink from "../StyledLink/";
import { css } from "@styled-system/css";
import shouldForwardProp from "@styled-system/should-forward-prop";
import { themeGet } from "@styled-system/theme-get";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const Bar = styled("header").withConfig({
shouldForwardProp,
displayName: "HeaderComplex__Bar",
componentId: "sc-14xcori-0"
}).attrs(props => ({
"data-testid": props.dataTestId
}))(props => ({
height: themeGet("appScale.navBarSize")(props)
}), props => css({
width: "100%",
zIndex: 12,
position: "sticky",
top: "0",
display: "flex",
alignItems: "center",
py: 0,
px: 4,
bg: themeGet("colors.black")(props),
"a[class^='StyledLink'], a[class*=' StyledLink'], div[class^='Badge'], div[class*=' Badge']": {
display: ["none", "none", "none", "block", "block"]
}
}), variant({
variants: {
default: {
width: "5px",
height: "5px",
backgroundColor: "#fff",
transition: "all 200ms ease-in-out"
},
search: {
display: "grid",
gridGap: "r",
gridTemplateColumns: ["1fr 2fr 2fr 1fr", "1fr 2fr 2fr 1fr", "1fr 2fr 2fr 1fr", "1fr 1.5fr 1.5fr 1fr", "1fr 1fr 1fr 1fr", "1.5fr 1fr 1fr 1.5fr"]
}
}
}), space);
const Switcher = styled("button").withConfig({
displayName: "HeaderComplex__Switcher",
componentId: "sc-14xcori-1"
})(css({
marginRight: "r",
cursor: "pointer",
appearance: "none",
border: "0",
background: "none",
padding: "0",
display: "grid",
gridGap: "3px",
gridTemplateRows: "5px 5px 5px",
gridTemplateColumns: "5px 5px 5px",
"&:hover > div": {
backgroundColor: "#0091ea"
}
}));
const SwitcherTopLeft = styled("div").withConfig({
displayName: "HeaderComplex__SwitcherTopLeft",
componentId: "sc-14xcori-2"
})(css({
width: "5px",
height: "5px",
backgroundColor: "#fff",
transition: "all 200ms ease-in-out"
}));
const SwitcherTopMiddle = styled("div").withConfig({
displayName: "HeaderComplex__SwitcherTopMiddle",
componentId: "sc-14xcori-3"
})(css({
width: "5px",
height: "5px",
backgroundColor: "#fff",
transition: "all 200ms ease-in-out"
}));
const SwitcherTopRight = styled("div").withConfig({
displayName: "HeaderComplex__SwitcherTopRight",
componentId: "sc-14xcori-4"
})(css({
width: "5px",
height: "5px",
backgroundColor: "#fff",
transition: "all 200ms ease-in-out"
}));
const SwitcherMiddleLeft = styled("div").withConfig({
displayName: "HeaderComplex__SwitcherMiddleLeft",
componentId: "sc-14xcori-5"
})(css({
width: "5px",
height: "5px",
backgroundColor: "#fff",
transition: "all 200ms ease-in-out"
}));
const SwitcherMiddleMiddle = styled("div").withConfig({
displayName: "HeaderComplex__SwitcherMiddleMiddle",
componentId: "sc-14xcori-6"
})(css({
width: "5px",
height: "5px",
backgroundColor: "#fff",
transition: "all 200ms ease-in-out"
}));
const SwitcherMiddleRight = styled("div").withConfig({
displayName: "HeaderComplex__SwitcherMiddleRight",
componentId: "sc-14xcori-7"
})(css({
width: "5px",
height: "5px",
backgroundColor: "#fff",
transition: "all 200ms ease-in-out"
}));
const SwitcherBottomLeft = styled("div").withConfig({
displayName: "HeaderComplex__SwitcherBottomLeft",
componentId: "sc-14xcori-8"
})(css({
width: "5px",
height: "5px",
backgroundColor: "#fff",
transition: "all 200ms ease-in-out"
}));
const SwitcherBottomMiddle = styled("div").withConfig({
displayName: "HeaderComplex__SwitcherBottomMiddle",
componentId: "sc-14xcori-9"
})(css({
width: "5px",
height: "5px",
backgroundColor: "#fff",
transition: "all 200ms ease-in-out"
}));
const SwitcherBottomRight = styled("div").withConfig({
displayName: "HeaderComplex__SwitcherBottomRight",
componentId: "sc-14xcori-10"
})(css({
width: "5px",
height: "5px",
backgroundColor: "#fff",
transition: "all 200ms ease-in-out"
}));
const AppsMenu = styled("div").withConfig({
displayName: "HeaderComplex__AppsMenu",
componentId: "sc-14xcori-11"
})(props => css({
backgroundColor: props.lightAppSwitcher ? "white" : "black",
border: props.lightAppSwitcher ? "solid 1px rgba(0, 0, 0, 0.1)" : "none",
color: props.lightAppSwitcher ? "black" : "white",
width: "260px",
display: "inline-block",
position: "absolute",
cursor: "default",
top: "60px",
left: "60px",
padding: "s",
borderRadius: "6px",
opacity: "0",
pointerEvents: "none",
transform: "translate(-10px, -10px)",
userSelect: "none",
zIndex: "-1",
transition: "all 200ms ease-in-out",
boxShadow: themeGet("shadows.boxDefault")(props),
"[class^='StyledLink'], [class*=' StyledLink']": {
color: props.lightAppSwitcher ? themeGet("colors.black")(props) : themeGet("colors.white")(props),
display: "block",
fontWeight: themeGet("fontWeights.2")(props),
padding: "s",
borderRadius: themeGet("radii.2")(props),
"&:hover, &:focus": {
textDecoration: "none",
backgroundColor: props.lightAppSwitcher ? themeGet("colors.primaryLightest")(props) : themeGet("colors.primary")(props)
}
}
}), props => props.isOpen ? css({
opacity: "1",
userSelect: "default",
zIndex: "2",
transform: "translate(0, 0)",
pointerEvents: "auto"
}) : null);
const WorkspaceSwitcher = styled("div").withConfig({
displayName: "HeaderComplex__WorkspaceSwitcher",
componentId: "sc-14xcori-12"
})(props => css({
borderBottom: props.lightAppSwitcher ? "solid 1px rgba(0,0,0,0.1)" : "solid 1px rgba(255,255,255,0.3)",
paddingBottom: "s",
"[class^='Small'], [class*=' Small']": {
display: "block",
fontWeight: themeGet("fontWeights.1")(props)
}
}));
const InternalAppSwitcher = styled("div").withConfig({
displayName: "HeaderComplex__InternalAppSwitcher",
componentId: "sc-14xcori-13"
})(props => css({
borderBottom: props.lightAppSwitcher ? "solid 1px rgba(0,0,0,0.1)" : "solid 1px rgba(255,255,255,0.3)",
paddingBottom: "s",
marginTop: "s",
"[class^='Small'], [class*=' Small']": {
display: "block",
fontWeight: themeGet("fontWeights.1")(props)
}
}));
const ExternalAppSwitcher = styled("div").withConfig({
displayName: "HeaderComplex__ExternalAppSwitcher",
componentId: "sc-14xcori-14"
})(props => css({
marginTop: "s",
"[class^='Small'], [class*=' Small']": {
display: "block",
fontWeight: themeGet("fontWeights.1")(props)
}
}));
const AppName = styled("div").withConfig({
displayName: "HeaderComplex__AppName",
componentId: "sc-14xcori-15"
})(props => css({
display: "flex",
alignItems: "center",
fontSize: themeGet("fontSizes.3")(props),
color: themeGet("colors.white")(props)
}), variant({
variants: {
default: {
width: "5px",
height: "5px",
backgroundColor: "#fff",
transition: "all 200ms ease-in-out"
},
search: {
border: "none",
pr: "0"
}
}
}), space);
const SearchContainer = styled("div").withConfig({
displayName: "HeaderComplex__SearchContainer",
componentId: "sc-14xcori-16"
})(variant({
variants: {
default: {
display: "block"
},
search: {
gridColumn: "2 / 4",
"a[class^='StyledLink'], a[class*=' StyledLink']": {
display: "inline-block"
}
},
searchAndLinks: {
flex: "1 1 auto",
marginLeft: "r",
marginRight: "r"
}
}
}), space, layout);
const MobileMenuToggle = styled("button").withConfig({
displayName: "HeaderComplex__MobileMenuToggle",
componentId: "sc-14xcori-17"
})(props => css({
zIndex: 4,
cursor: "pointer",
userSelect: "none",
background: "none",
border: "none",
position: "relative",
padding: "0 0 7px",
display: "block",
"&:hover, &:focus": {
outline: "0",
span: {
bg: themeGet("colors.white")(props),
"&:before, &:after": {
bg: themeGet("colors.white")(props)
}
}
}
}));
const Hamburger = styled("span").withConfig({
displayName: "HeaderComplex__Hamburger",
componentId: "sc-14xcori-18"
})(props => css({
"::before": {
top: "calc(8px * 1.25)",
position: "absolute",
content: "''",
display: "inline-block",
width: "30px",
height: "4px",
borderRadius: themeGet("radii.2")(props),
bg: themeGet("colors.white")(props),
left: 0,
transformOrigin: "50% 50%",
transition: "top 300ms cubic-bezier(0.165, 0.84, 0.44, 1), transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1), background-color 300ms cubic-bezier(0.165, 0.84, 0.44, 1)"
},
"::after": {
position: "absolute",
top: "calc(8px * -1.25)",
content: "''",
display: "inline-block",
width: "30px",
height: "4px",
borderRadius: themeGet("radii.2")(props),
bg: themeGet("colors.white")(props),
left: 0,
transformOrigin: "50% 50%",
transition: "top 300ms cubic-bezier(0.165, 0.84, 0.44, 1), transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1), background-color 300ms cubic-bezier(0.165, 0.84, 0.44, 1)"
},
display: "inline-block",
cursor: "pointer",
userSelect: "none",
transition: themeGet("transition.transitionDefault")(props),
width: "30px",
height: "4px",
borderRadius: themeGet("radii.2")(props),
bg: themeGet("colors.white")(props),
position: "relative"
}));
const MobileNavToggle = styled("input").withConfig({
displayName: "HeaderComplex__MobileNavToggle",
componentId: "sc-14xcori-19"
})(props => css({
opacity: "0",
position: "absolute",
visibility: "hidden",
margin: 0,
zIndex: 0,
width: 0,
height: 0,
overflow: "hidden",
pointerEvents: "none",
"~ header, ~ div, ~ main": {
transition: themeGet("transition.transitionDefault")(props)
},
"&:checked": {
"~ [class^='Header__MobileNavMenu'], ~ [class*=' Header__MobileNavMenu']": {
transform: "translateX(-" + themeGet("appScale.mobileNavMenuWidth")(props) + ")"
},
"~ main": {
transform: "translateX(-" + themeGet("appScale.mobileNavMenuWidth")(props) + ")"
},
"~ header": {
transform: "translateX(-" + themeGet("appScale.mobileNavMenuWidth")(props) + ")"
},
/* Hamburger */
"~ [class^='Header__Bar'], ~ [class*=' Header__Bar']": {
"[class^='Header__Hamburger'], [class*=' Header__Hamburger']": {
bg: "transparent" /* fade away the middle line */,
"&:hover,&:focus": {
bg: "transparent"
},
"::before": {
transition: "top 300ms cubic-bezier(0.165, 0.84, 0.44, 1), transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1)",
top: 0,
width: "24px",
transform: "rotate3d(0,0,1,45deg) scale(1.1)"
},
"::after": {
transition: "top 300ms cubic-bezier(0.165, 0.84, 0.44, 1), transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1)",
top: 0,
width: "24px",
transform: "rotate3d(0,0,1,-45deg) scale(1.1)"
}
}
},
/* Overlay */
"~ label": {
zIndex: 5,
opacity: "1"
}
}
}));
const MobileNavMenu = styled("div").attrs(props => ({
"aria-hidden": `${!props.isOpen}`
})).withConfig({
displayName: "HeaderComplex__MobileNavMenu",
componentId: "sc-14xcori-20"
})(props => css({
display: props.isOpen ? "block" : "none",
position: "fixed",
overflowY: "auto",
height: "100vh",
right: "-" + themeGet("appScale.mobileNavMenuWidth")(props),
top: 0,
width: themeGet("appScale.mobileNavMenuWidth")(props),
bg: themeGet("colors.greyDarkest")(props),
zIndex: 6,
transition: themeGet("transition.transitionDefault")(props),
"[class^='StyledLink'], [class*=' StyledLink']": {
color: themeGet("colors.white")(props),
display: "block",
fontWeight: themeGet("fontWeights.2")(props),
padding: "r",
borderRadius: themeGet("radii.2")(props),
"&:hover, &:focus": {
textDecoration: "none",
backgroundColor: themeGet("colors.primary")(props)
}
}
}));
const Theme = styled("div").withConfig({
displayName: "HeaderComplex__Theme",
componentId: "sc-14xcori-21"
})(props => css({
borderTop: "solid 1px rgba(255,255,255,0.3)",
padding: "r",
paddingTop: "s",
marginTop: "s",
"[class^='Small'], [class*=' Small']": {
display: "block",
fontWeight: themeGet("fontWeights.1")(props),
marginTop: "xs"
}
}));
const RightAligned = styled("div").withConfig({
displayName: "HeaderComplex__RightAligned",
componentId: "sc-14xcori-22"
})(css({
marginLeft: "auto",
marginRight: "r"
}));
const Overlay = styled("label").withConfig({
displayName: "HeaderComplex__Overlay",
componentId: "sc-14xcori-23"
})(props => css({
position: "fixed",
top: 0,
left: 0,
height: "100vh",
width: "100%",
bg: themeGet("colors.black50")(props),
zIndex: 0,
opacity: "0",
overflow: "hidden",
transition: themeGet("transition.transitionDefault")(props)
}));
/**
* Header component for global app navigation.
*
* At screen sizes less than 1100px the links are instead moved into a mobile menu toggled by a burger icon button to play nice with smaller devices.
*/
export default function HeaderComplex(_ref) {
let {
appName,
userName,
avatarSource,
children,
sideMenuContent,
internalAppSwitcherContent,
externalAppSwitcherContent,
rightAlignedContent,
logoutFunction,
searchComponent,
dataTestId,
theme,
variant,
themeSwitcherContent,
workspaceSwitcherContent,
navToggleId = "mobileMenuToggle",
currentWorkspace,
logo,
appSwitcher,
lightAppSwitcher
} = _ref;
const [toggleState, setToggle] = useState(false);
const [mobileMenuIsOpen, setMobileMenuIsOpen] = useState(false);
const switcherRef = useRef();
const menuRef = useRef();
const toggleMobileMenu = () => {
setMobileMenuIsOpen(state => !state);
};
const closeMenu = () => {
setToggle(false);
};
useEffect(() => {
if (!toggleState) {
return;
}
const handleClicked = event => {
// As the event listener is attached in capture phase, need to do this make sure the sate change are after react event cycle.
if (menuRef.current && !menuRef.current.contains(event.target) && switcherRef.current && !switcherRef.current.contains(event.target)) {
closeMenu();
}
};
// handle click to hide menu
// If any of the actions are using stopPropagation(), the event will stop in the react mounting root.
// So use capture phase to detect anything clicked.
document.addEventListener("click", handleClicked, true);
return () => {
// If menu closed, unregister event listener to prevent memory leaks
document.removeEventListener("click", handleClicked, true);
};
}, [toggleState, switcherRef]);
const onToggle = e => {
e.stopPropagation();
setToggle(!toggleState);
};
const component = /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(MobileNavToggle, {
type: "checkbox",
checked: mobileMenuIsOpen,
defaultChecked: mobileMenuIsOpen,
id: navToggleId
}), /*#__PURE__*/_jsxs(Bar, {
theme: theme,
dataTestId: dataTestId,
variant: variant,
children: [/*#__PURE__*/_jsxs(Flex, {
alignItems: "center",
children: [appSwitcher && /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsxs(Switcher, {
title: "Switch to...",
onClick: onToggle,
"aria-role": "navigation",
"aria-label": "Toggle workspace and app switcher menu",
ref: switcherRef,
children: [/*#__PURE__*/_jsx(SwitcherTopLeft, {}), /*#__PURE__*/_jsx(SwitcherTopMiddle, {}), /*#__PURE__*/_jsx(SwitcherTopRight, {}), /*#__PURE__*/_jsx(SwitcherMiddleLeft, {}), /*#__PURE__*/_jsx(SwitcherMiddleMiddle, {}), /*#__PURE__*/_jsx(SwitcherMiddleRight, {}), /*#__PURE__*/_jsx(SwitcherBottomLeft, {}), /*#__PURE__*/_jsx(SwitcherBottomMiddle, {}), /*#__PURE__*/_jsx(SwitcherBottomRight, {})]
}), /*#__PURE__*/_jsxs(AppsMenu, {
lightAppSwitcher: lightAppSwitcher,
isOpen: toggleState,
ref: menuRef,
children: [workspaceSwitcherContent && /*#__PURE__*/_jsxs(WorkspaceSwitcher, {
children: [/*#__PURE__*/_jsx(Small, {
color: lightAppSwitcher ? "black60" : "white60",
pb: "s",
display: "block",
children: "Change workspace:"
}), workspaceSwitcherContent]
}), internalAppSwitcherContent && /*#__PURE__*/_jsxs(InternalAppSwitcher, {
lightAppSwitcher: lightAppSwitcher,
children: [/*#__PURE__*/_jsx(Small, {
color: lightAppSwitcher ? "black60" : "white60",
pb: "xs",
display: "block",
children: "Switch to:"
}), internalAppSwitcherContent]
}), externalAppSwitcherContent && /*#__PURE__*/_jsxs(ExternalAppSwitcher, {
lightAppSwitcher: lightAppSwitcher,
children: [/*#__PURE__*/_jsx(Small, {
color: lightAppSwitcher ? "black60" : "white60",
pb: "xs",
display: "block",
children: "External apps:"
}), externalAppSwitcherContent]
})]
})]
}), logo && /*#__PURE__*/_jsx(FlexItem, {
children: logo
}), /*#__PURE__*/_jsxs(Flex, {
flexDirection: "column",
justifyContent: "center",
children: [/*#__PURE__*/_jsx(AppName, {
variant: variant,
children: appName
}), currentWorkspace && /*#__PURE__*/_jsx(Small, {
color: "white",
fontSize: "0",
display: ["none", "none", "none", "block"],
children: currentWorkspace
})]
})]
}), /*#__PURE__*/_jsx(Spacer, {
ml: 4,
children: children
}), searchComponent && /*#__PURE__*/_jsx(SearchContainer, {
variant: variant,
children: searchComponent
}), /*#__PURE__*/_jsxs(Flex, {
alignItems: "center",
ml: "auto",
children: [rightAlignedContent && /*#__PURE__*/_jsx(RightAligned, {
children: rightAlignedContent
}), /*#__PURE__*/_jsx(FlexItem, {
flex: "1 0 auto",
mr: "r",
display: ["none", "none", "none", "none", "flex"],
children: /*#__PURE__*/_jsx(Avatar, {
type: "inverted",
sizing: "small",
title: userName,
image: avatarSource,
theme: theme
})
}), /*#__PURE__*/_jsx(MobileMenuToggle, {
theme: theme,
onClick: toggleMobileMenu,
"aria-expanded": `${mobileMenuIsOpen}`,
"aria-label": "Menu",
children: /*#__PURE__*/_jsx(Hamburger, {
id: "hamburger-menu-icon"
})
})]
})]
}), /*#__PURE__*/_jsx(MobileNavMenu, {
isOpen: mobileMenuIsOpen,
children: /*#__PURE__*/_jsxs(Box, {
m: "s",
children: [/*#__PURE__*/_jsx(Box, {
borderBottomWidth: 1,
borderBottomStyle: "solid",
borderBottomColor: "white20",
pt: "s",
pb: "r",
mb: "s",
display: ["block", "block", "block", "block", "none"],
children: /*#__PURE__*/_jsx(Avatar, {
type: "inverted",
sizing: "small",
title: userName,
image: avatarSource,
theme: theme
})
}), /*#__PURE__*/_jsx(Box, {
display: ["block", "block", "block", "none", "none"],
children: children
}), sideMenuContent, logoutFunction && /*#__PURE__*/_jsxs(StyledLink, {
id: "logoutButton",
white: true,
bold: true,
onClick: logoutFunction,
children: [/*#__PURE__*/_jsx(Icon, {
icon: ["fas", "lock"],
colour: "white",
mr: "s"
}), "Logout"]
}), themeSwitcherContent && /*#__PURE__*/_jsxs(Theme, {
children: [/*#__PURE__*/_jsx(Small, {
color: "white60",
pt: "s",
pb: "r",
display: "block",
children: "Switch theme:"
}), themeSwitcherContent]
})]
})
}), /*#__PURE__*/_jsx(Overlay, {
htmlFor: navToggleId
})]
});
return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
theme: theme,
children: component
}) : component;
}
HeaderComplex.propTypes = {
/** Logo for app. Preferably an svg logo */
logo: PropTypes.node,
/** Text for app name. Can be a plain text string or an svg logo */
appName: PropTypes.node,
/** Current active workspace name. Can be a plain text string or a component */
currentWorkspace: PropTypes.node,
/** Text for username. */
userName: PropTypes.node,
/** Source path for avatar image. */
avatarSource: PropTypes.node,
/** String of text for additional client info. */
clientInfo: PropTypes.node,
/** Function for what should happen when logout link is clicked */
logoutFunction: PropTypes.func,
/** Can specify a link that will be rendered on the right side of the header */
rightAlignedLink: PropTypes.node,
/** Can specify a component to be used for searching */
searchComponent: PropTypes.node,
/** Applies the chosen theme to the entire header. */
theme: PropTypes.object,
/** Specifies whether the app switcher should exist or not */
appSwitcher: PropTypes.bool,
/** Changes the app switcher to light theme */
lightAppSwitcher: PropTypes.bool,
/** Navigation links are rendered as child components. */
children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
/** sideMenuContent are links or other content that can be specified and will appear only in the slide out side menu */
sideMenuContent: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
/** InternalAppSwitcherContent are links or other content that can be specified and will appear only in the slide out side menu */
internalAppSwitcherContent: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
/** ExternalAppSwitcherContent are links or other content that can be specified and will appear only in the slide out side menu */
externalAppSwitcherContent: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
/** RightAlignedContent are links or other content that can be specified and will be positioned on the right side of the header */
rightAlignedContent: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
/** Specifies alternate versions of the header */
variant: PropTypes.oneOf(["search", "searchAndLinks"]),
/** Allows for use of the `data-testid` attribute for testing. */
dataTestId: PropTypes.string,
/** Theme related props **/
themeSwitcherContent: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
workspaceSwitcherContent: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
navToggleId: PropTypes.string
};
HeaderComplex.__docgenInfo = {
"description": "Header component for global app navigation.\n\nAt screen sizes less than 1100px the links are instead moved into a mobile menu toggled by a burger icon button to play nice with smaller devices.",
"methods": [],
"displayName": "HeaderComplex",
"props": {
"navToggleId": {
"defaultValue": {
"value": "\"mobileMenuToggle\"",
"computed": false
},
"description": "",
"type": {
"name": "string"
},
"required": false
},
"logo": {
"description": "Logo for app. Preferably an svg logo",
"type": {
"name": "node"
},
"required": false
},
"appName": {
"description": "Text for app name. Can be a plain text string or an svg logo",
"type": {
"name": "node"
},
"required": false
},
"currentWorkspace": {
"description": "Current active workspace name. Can be a plain text string or a component",
"type": {
"name": "node"
},
"required": false
},
"userName": {
"description": "Text for username.",
"type": {
"name": "node"
},
"required": false
},
"avatarSource": {
"description": "Source path for avatar image.",
"type": {
"name": "node"
},
"required": false
},
"clientInfo": {
"description": "String of text for additional client info.",
"type": {
"name": "node"
},
"required": false
},
"logoutFunction": {
"description": "Function for what should happen when logout link is clicked",
"type": {
"name": "func"
},
"required": false
},
"rightAlignedLink": {
"description": "Can specify a link that will be rendered on the right side of the header",
"type": {
"name": "node"
},
"required": false
},
"searchComponent": {
"description": "Can specify a component to be used for searching",
"type": {
"name": "node"
},
"required": false
},
"theme": {
"description": "Applies the chosen theme to the entire header.",
"type": {
"name": "object"
},
"required": false
},
"appSwitcher": {
"description": "Specifies whether the app switcher should exist or not",
"type": {
"name": "bool"
},
"required": false
},
"lightAppSwitcher": {
"description": "Changes the app switcher to light theme",
"type": {
"name": "bool"
},
"required": false
},
"children": {
"description": "Navigation links are rendered as child components.",
"type": {
"name": "union",
"value": [{
"name": "node"
}, {
"name": "arrayOf",
"value": {
"name": "node"
}
}]
},
"required": false
},
"sideMenuContent": {
"description": "sideMenuContent are links or other content that can be specified and will appear only in the slide out side menu",
"type": {
"name": "union",
"value": [{
"name": "node"
}, {
"name": "arrayOf",
"value": {
"name": "node"
}
}]
},
"required": false
},
"internalAppSwitcherContent": {
"description": "InternalAppSwitcherContent are links or other content that can be specified and will appear only in the slide out side menu",
"type": {
"name": "union",
"value": [{
"name": "node"
}, {
"name": "arrayOf",
"value": {
"name": "node"
}
}]
},
"required": false
},
"externalAppSwitcherContent": {
"description": "ExternalAppSwitcherContent are links or other content that can be specified and will appear only in the slide out side menu",
"type": {
"name": "union",
"value": [{
"name": "node"
}, {
"name": "arrayOf",
"value": {
"name": "node"
}
}]
},
"required": false
},
"rightAlignedContent": {
"description": "RightAlignedContent are links or other content that can be specified and will be positioned on the right side of the header",
"type": {
"name": "union",
"value": [{
"name": "node"
}, {
"name": "arrayOf",
"value": {
"name": "node"
}
}]
},
"required": false
},
"variant": {
"description": "Specifies alternate versions of the header",
"type": {
"name": "enum",
"value": [{
"value": "\"search\"",
"computed": false
}, {
"value": "\"searchAndLinks\"",
"computed": false
}]
},
"required": false
},
"dataTestId": {
"description": "Allows for use of the `data-testid` attribute for testing.",
"type": {
"name": "string"
},
"required": false
},
"themeSwitcherContent": {
"description": "Theme related props *",
"type": {
"name": "union",
"value": [{
"name": "node"
}, {
"name": "arrayOf",
"value": {
"name": "node"
}
}]
},
"required": false
},
"workspaceSwitcherContent": {
"description": "",
"type": {
"name": "union",
"value": [{
"name": "node"
}, {
"name": "arrayOf",
"value": {
"name": "node"
}
}]
},
"required": false
}
}
};