orcs-design-system/es/components/Header/index.js

TeamForm's Design System, aka: ORCS

import React from "react";
import PropTypes from "prop-types";
import Flex, { FlexItem } from "../Flex";
import { Small } from "../Typography";
import { Bar, AppName, SearchContainer, Separator } from "./Header.styles";
import UserMenu from "./UserMenu";
/**
 * Header component for top of app.
 **/
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const Header = _ref => {
  let {
    appName,
    userName,
    avatarSource,
    avatarAlt,
    avatarInitials,
    searchComponent,
    dataTestId,
    currentWorkspace,
    logo,
    userMenuContent,
    showLogoSeparator = false
  } = _ref;
  return /*#__PURE__*/_jsxs(Bar, {
    dataTestId: dataTestId,
    children: [/*#__PURE__*/_jsxs(AppName, {
      children: [logo, showLogoSeparator && /*#__PURE__*/_jsx(Separator, {
        display: ["none", "none", "none", "block"]
      }), /*#__PURE__*/_jsxs(Flex, {
        flexDirection: "column",
        children: [appName && /*#__PURE__*/_jsx(FlexItem, {
          flex: "0 0 auto",
          display: ["none", "none", "none", "block"],
          children: appName
        }), currentWorkspace && /*#__PURE__*/_jsx(FlexItem, {
          flex: "0 0 auto",
          children: /*#__PURE__*/_jsx(Small, {
            color: "greyDark",
            fontSize: "0",
            display: ["none", "none", "none", "block"],
            children: currentWorkspace
          })
        })]
      })]
    }), searchComponent && /*#__PURE__*/_jsx(SearchContainer, {
      children: searchComponent
    }), userName && /*#__PURE__*/_jsx(UserMenu, {
      userName: userName,
      avatarSource: avatarSource,
      avatarAlt: avatarAlt,
      avatarInitials: avatarInitials,
      userMenuContent: userMenuContent
    })]
  });
};
Header.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 logged in user name and email. */
  userName: PropTypes.node,
  /** Source path for avatar image. */
  avatarSource: PropTypes.node,
  /** Alt text for avatar image. */
  avatarAlt: PropTypes.string,
  /** Initials for avatar as fallback if there is no image */
  avatarInitials: PropTypes.string,
  /** Can specify a component to be used for searching */
  searchComponent: PropTypes.node,
  /** Applies the chosen theme to the entire header. */
  theme: PropTypes.object,
  /** Allows for use of the `data-testid` attribute for testing. */
  dataTestId: PropTypes.string,
  /** Allows you to pass in child components to user dropdown menu */
  userMenuContent: PropTypes.node,
  /** use this to apply separator if logo and appName or currentWorkspace exists */
  showLogoSeparator: PropTypes.bool
};

/** @component */
Header.__docgenInfo = {
  "description": "Header component for top of app.",
  "methods": [],
  "displayName": "Header",
  "props": {
    "showLogoSeparator": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "use this to apply separator if logo and appName or currentWorkspace exists",
      "type": {
        "name": "bool"
      },
      "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 logged in user name and email.",
      "type": {
        "name": "node"
      },
      "required": false
    },
    "avatarSource": {
      "description": "Source path for avatar image.",
      "type": {
        "name": "node"
      },
      "required": false
    },
    "avatarAlt": {
      "description": "Alt text for avatar image.",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "avatarInitials": {
      "description": "Initials for avatar as fallback if there is no image",
      "type": {
        "name": "string"
      },
      "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
    },
    "dataTestId": {
      "description": "Allows for use of the `data-testid` attribute for testing.",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "userMenuContent": {
      "description": "Allows you to pass in child components to user dropdown menu",
      "type": {
        "name": "node"
      },
      "required": false
    }
  }
};
export default Header;