Builder Header: Add component

[garygong]

Implement the Builder Header component according to spec: https://www.lightningdesignsystem.com/components/builder-header/

[garygong]

Here's what I'm thinking for the interface. What do you think?

BuilderHeader:

Name	Type	Description
assistiveText.icon	string	Assistive text for the title icon
className	string	Additional class names
children	Element[]	Structure of the header. BuilderHeaderNav (optional) and BuilderHeaderToolbar (optional)
events.onClickBack	function	Callback for when "Back" is clicked
events.onClickHelp	function	Callback for when "Help" is clicked
labels.back	string	Label for the "Back" action
labels.help	string	Label for the "Help" action
labels.pageType	string	Label for the page type
labels.title	string	Title of the builder

BuilderHeaderNav:

Name	Type	Description
children	Element[]	Dropdown or Button elements

BuilderHeaderToolbar:

Name	Type	Description
children	ButtonGroup[]	Button groups in the toolbar
onRenderActions	function	Renders the actions section of the toolbar

Example:

Here's an example using the example given in the spec.

<BuilderHeader
  assistiveText={{ icon: 'Builder' }}
  labels={{ back: 'Back', help: 'Help', pageType: 'Page Type', title: 'App Name' }}
>
  <BuilderHeaderNav>
    <Button
      iconCategory="utility"
      iconName="settings"
      label="Link"
    />
    <Dropdown
      iconCategory="utility"
      iconCategory="page"
      label="Dropdown"
    />
  </BuilderHeaderNav>
  <BuilderHeaderToolbar
    onRenderActions={() => (
      <>
        <Button
          iconCategory="utility"
          iconName="right"
          iconPosition="left"
          label="Run"
        />
        <Button label="Save As" />
        <Button label="Save" variant="brand" />
      </>
    )}
  >
    <ButtonGroup>
      <Button
        assistiveText={{ icon: 'Undo' }}
        className="slds-button_icon-border"
        iconCategory="utility"
        iconName="undo"
        variant="icon"
      />
      <Button
        assistiveText={{ icon: 'Redo' }}
        className="slds-button_icon-border"
        iconCategory="utility"
        iconName="redo"
        variant="icon"
      />
    </ButtonGroup>
    <ButtonGroup>
      <Button
        assistiveText={{ icon: 'Cut' }}
        className="slds-button_icon-border"
        iconCategory="utility"
        iconName="cut"
        variant="icon"
      />
      <Button
        assistiveText={{ icon: 'Copy' }}
        className="slds-button_icon-border"
        iconCategory="utility"
        iconName="copy"
        variant="icon"
      />
      <Button
        assistiveText={{ icon: 'Paste' }}
        className="slds-button_icon-border"
        iconCategory="utility"
        iconName="paste"
        variant="icon"
      />
    </ButtonGroup>
  </BuilderHeaderToolbar>
</BuilderHeader>

[interactivellama]

Approved!

I don't think we want to force classnames like slds-button_icon-border on consumers. This should probably be a new variant or something like that.

[garygong]

After working on implementing this, here are some changes that I thought needed to be made to the component API. The biggest change is to use a new link component instead of <Button>.

After reading the "Button vs. Link" explanation, I thought that this makes sense since the spec indicated that the nav items should be links.

BuilderHeader:

Name	Type	Description
assistiveText.backIcon	string	[NEW] Assistive text for the back icon
assistiveText.helpIcon	string	[NEW] Assistive text for the help icon
assistiveText.icon	string	Assistive text for the title icon
children	Element[]	Structure of the header. BuilderHeaderNav (optional) and BuilderHeaderToolbar (optional)
className	string	Additional class names
events.onClickBack	function	Callback for when "Back" is clicked
events.onClickHelp	function	Callback for when "Help" is clicked
labels.back	string	Label for the "Back" action
labels.help	string	Label for the "Help" action
labels.pageType	string	Label for the page type
labels.title	string	Title of the builder
style	object	[NEW] Custom styles to be passed to the component

BuilderHeaderNav:

Name	Type	Description
children	Element[]	Dropdown or Button BuilderHeaderNavLink elements

[NEW] BuilderHeaderNavLink:

Name	Type	Description
assistiveText.icon	string	Assitive text for the icon next to the link text
iconCategory	'action','custom','doctype','standard','utility'	Name of the icon category
iconName	string	Name of the icon
iconPath	string	Path to the icon
label	string	Text for the link
onClick	function	Triggered when the link is clicked

BuilderHeaderToolbar:

Name	Type	Description
assistiveText.actions	string	[NEW] Assistive text for the actions section
children	ButtonGroup[]	Button groups in the toolbar
onRenderActions	function	Renders the actions section of the toolbar