React Ribbon Component

Demo: Live styleguide

 <MainRibbon
     text="Ribbon Title"
     currentTab={activeTab}
     tabEvents={{ onClick: (i) => { setActiveTab(i) } }}
     quickAccessButtons={[
            <ButtonWithSmallImage image={save} key="quickaccess1" />
     ]}
     >
      <RibbonTabPage text="HOME">
          <RibbonGroup text="Glossary">
               // ...children (check styleguide example)
          </RibbonGroup>
       </RibbonTabPage>
 </MainRibbon>

<MainRibbon />

With Sub Components

<RibbonTabPage />
<RibbonGroup />
<RibbonColumn />
<RibbonRow />
<Separator />
<DropDownWithSmallImageWithText />
<DropDownWithLargeImageWithText />
<ButtonWithSmallImageWithText />
<ButtonWithLargeImageWithText />
<ButtonWithSmallImage />
<SplitButton />
<SplitButtonWithSmallImage />
<PopupMenu />
<MenuItem />
<ComboBox />
<MenuDropDown />
<MenuSeparator />
<DropDownWithSmallImage />
<Checkbox />

MainRibbon properties

• text (title)
• property "palette" for theming, example:

{
    {
        main: '#2a569a',
        tabBody: '#efefef',
        inActiveTab: 'white',
        backStageButton: 'yellow',
        activeBackStageButton: 'blue',
        backStageText: 'brown',
    }
}

• currentTab - int
• font - string (ex normal 11px 'Open Sans')
• quickAccessButtons - object ex

[
  <ButtonWithSmallImage
       image={save} key="quickaccess1" />,
  <DropDownWithSmallImage
       image={undo} key="quickaccess2" />,
  <DropDownWithSmallImage
       image={redo} key="quickaccess3" />
]

• tabEvents - (onClick to get new tab index)
• fileButtonEvents

• children of type RibbonTabPage

RibbonTabPage properties

• text (title)

• children of type RibbonGroup, Separator

RibbonGroup properties

• text (title)

• children of type SplitButton, RibbonColumn, RibbonRow, DropDownWithLargeImageWithText, Separator, CheckBox, DropDown, ButtonWithSmallImageWithText, ButtonWithLargeImageWithText, PopupMenu, MenuItem, MenuToggleItem, MenuSeparator, MenuDropDown

RibbonGroup Children: (to document!)

All components have an onClick and an enabled prop

Check Live styleguide