MicroHeader

A Micro Header is a general purpose semantic header to announce the name of an application on a Getting Started page and provide options for a user to take.

It renders an application title, logo image, and accepts optional “action” props that users can pass to a provided dropdown or listbox component via the menuComponent prop, which it makes accessible to end-users via a contextual “More” menu icon.

Import

import {MicroHeader} from '@fuegokit/react'

Usage

Micro Header accepts a React component in the slot for a listbox or dropdown menu, which allows consumers to choose their own solution.

In addition to passing your own dropdown or listbox component as a React component into a slot, you can provide your own feedback button icon and label as well:

const Example = () => {
  const myActionHandler = action => {
    alert('action handler')
  }
  const sampleMenuItem = {
    type: 'INTERNAL',
    url: 'https://appfire.com',
    label: 'Some label',
    tracking: {
      destination: 'some-destination-string',
      type: 'button'
    }
  }
  const menuItems = [
    {
      menuGroup: '',
      actions: [
        {...sampleMenuItem, label: 'Workflows'},
        {...sampleMenuItem, label: 'Event-based actions'},
        {...sampleMenuItem, label: 'Scheduled actions'},
        {...sampleMenuItem, label: 'Shared actions'},
        {...sampleMenuItem, label: 'View logs'}
      ]
    }
  ]
  return (
    <MicroHeader
      title={`Jira Misc Workflow Extensions`}
      appLogoUrl={`https://user-images.githubusercontent.com/96323698/155614696-c585cb10-a2ed-42bd-8bbc-a92619b6ab09.png`}
      menuItems={menuItems}
      menuComponent={<MicroHeaderMenu menuItems={menuItems} actionHandler={myActionHandler} />}
      feedbackButtonIcon={<AkQuestionsIcon />}
      feedbackButtonLabel={`Support`}
    />
  )
}

render(<Example />)

Every Getting Started page MicroHeader has several options for users to take action, including a button with a primary action as well as a dropdown or listbox that provides options for users to take.

Those actions can be internal, external, or addon actions.

Micro Header will display a contextual menu that renders a dropdown or listbox component, which you can pass as a React componenet into the MicroHeaderMenu component as an argument.

This works for any 3rd-party dropdown component or listbox component you might import and use in the product environment:

import Dropdown, {DropdownItem} from "@atlaskit/dropdown-menu";
 import {MicroHeader, Footer, Stack} from "@fuegokit/react";

 const MyMenu = ({menuItems, actionHandler, action, ...props}) => {
   return (
      <Dropdown{...props}>
        {menuItems.map(item => {
          <DropdownItem key={item.id} onClick={() => myActionHandler(action)} />
         })}

See also