jsx import { jsx } from '@emotion/core' ; import styled from '@emotion/styled' ; import * as React from 'react' ; import { storiesOf } from '@storybook/react' ; import chroma from 'chroma-js' ; import { notificationsIcon , inboxIcon } from '@workday/canvas-system-icons-web' ; import { Avatar } from '@workday/canvas-kit-react/avatar' ; import { colors , space , gradients } from '@workday/canvas-kit-react/tokens' ; import { IconButton , PrimaryButton } from '@workday/canvas-kit-react/button' ; import { MenuItem } from '@workday/canvas-kit-preview-react/menu' ; import { SearchForm , SearchFormProps } from '@workday/canvas-kit-labs-react/search-form' ; import { DeprecatedGlobalHeader , DeprecatedHeader , DeprecatedDubLogoTitle , DeprecatedWorkdayLogoTitle , DeprecatedHeaderVariant , } from '../index' ; import bgImg from '../static/workday-bg.jpg' ; const containerStyle = { backgroundColor : colors . soap100 , padding : space . m , } ; const backgroundStyle = { padding : `0 0 64px 0` , background : `linear-gradient(${ chroma ( colors . blueberry500 ) . alpha ( 0.8 ) . css ( ) }, ${ chroma ( colors . blueberry400 ) . alpha ( 0.8 ) . css ( ) }), url(${ bgImg })` , backgroundPosition : `0 50%` , backgroundSize : 'cover' , } ; const Link = styled ( 'a' ) < { to : string ; } > ( { } ) ; const handleMenuClickTest = ( e ) => { console . log ( `Menu clicked! ${ e . target }` ) ; } ; const handleAvatarClickTest = ( e ) => { console . log ( `Avatar clicked! ${ e . target }` ) ; } ; const handleSearchSubmitTest = ( e ) => { const formInputValue = ( e . target as HTMLFormElement ) . getElementsByTagName ( 'input' ) [ 0 ] . value ; console . log ( `search submitted ${ formInputValue }` ) ; } ; const nav = ( < nav > < ul > < li className = "current" > < a href = "#" > Discover < /a> < /li> < li > < a href = "#" > Library < /a> < /li> < li > < Link to = "#" > Create < /Link> < /li> < li > < a href = "#" > Manage < /a> < /li> < /ul> < /nav>); class SearchWithAutoComplete extends React . Component < Partial < SearchFormProps > , { currentText : string ; } > { state = { currentText : '' , } ; autocompleteCallback = ( event ) : void => { this . setState ( { currentText : event . target . value } ) ; } ; onSubmit = ( event ) => { const formInputValue = ( event . target as HTMLFormElement ) . getElementsByTagName ( 'input' ) [ 0 ] . value ; console . log ( `search submitted ${ formInputValue }` ) ; } ; render ( ) { const autocompleteResult = ( textModifier ) => ( < MenuItem onClick = { ( ) => `Clicked Result ${ textModifier }` } > Result { ' ' } < span > num < span > ber < /span> < /span>{' '} { textModifier } < /MenuItem>); return ( < SearchForm autocompleteItems = { Array . apply ( null , Array ( this . state . currentText . length ) ) . map ( ( _ , i ) => autocompleteResult ( String ( i ) ) ) . splice ( 0 , 5 ) } isCollapsed = { false } onInputChange = { this . autocompleteCallback } placeholder = { `Search with Autocomplete` } grow = { true } onSubmit = { this . onSubmit } { ... this . props } />); } } storiesOf ( 'Labs/Header/React' , module ) . addParameters ( { component : DeprecatedHeader } ) . addParameters ( { ReadmePath : 'labs-react/header' } ) . add ( 'Global Header' , ( ) => ( < div className = "story" > < div css = { containerStyle } > < DeprecatedGlobalHeader brand = { < a href = "#" > < DeprecatedDubLogoTitle themeColor = { DeprecatedHeader . Theme . White } / > < /a>} menuToggle={<Avatar onClick={handleMenuClickTest} url="https:/ / s3 - us - west - 2. amazonaws . com / design - assets - internal / avatars / lmcneil . png "/>} leftSlot={<SearchForm isCollapsed={false} onSubmit={handleSearchSubmitTest}/>} isCollapsed={false} onMenuClick={handleMenuClickTest}> < IconButton icon = { notificationsIcon } variant = "circle" title = "Notifications" aria - label = "Notifications" / > < IconButton icon = { inboxIcon } variant = "circle" title = "Inbox" aria - label = "Inbox" / > < Avatar onClick = { handleAvatarClickTest } url = "https://s3-us-west-2.amazonaws.com/design-assets-internal/avatars/lmcneil.png" altText = "Profile" / > < /DeprecatedGlobalHeader> < /div> < div css = { containerStyle } > < DeprecatedGlobalHeader brand = { < DeprecatedWorkdayLogoTitle variant = { DeprecatedHeaderVariant . Global } / > } menuToggle = { < Avatar onClick = { handleMenuClickTest } / > } leftSlot = { < SearchForm isCollapsed = { false } onSubmit = { handleSearchSubmitTest } / > } isCollapsed = { false } > < IconButton icon = { notificationsIcon } variant = "circle" title = "Notifications" aria - label = "Notifications" / > < IconButton icon = { inboxIcon } variant = "circle" title = "Inbox" aria - label = "Inbox" / > < Avatar onClick = { handleAvatarClickTest } altText = "Profile" / > < /DeprecatedGlobalHeader> < /div> < div css = { containerStyle } > < DeprecatedGlobalHeader leftSlot = { < SearchForm isCollapsed = { false } onSubmit = { handleSearchSubmitTest } / > } onMenuClick = { handleMenuClickTest } isCollapsed = { false } > < IconButton icon = { notificationsIcon } variant = "circle" title = "Notifications" aria - label = "Notifications" / > < IconButton icon = { inboxIcon } variant = "circle" title = "Inbox" aria - label = "Inbox" / > < Avatar onClick = { handleAvatarClickTest } altText = "Profile" / > < /DeprecatedGlobalHeader> < /div> < /div>)) . add ( 'Dub Header' , ( ) => ( < div className = "story" > < div css = { containerStyle } > < DeprecatedHeader title = "Required" leftSlot = { < SearchForm isCollapsed = { false } rightAlign = { true } autocompleteItems = { [ < MenuItem > Hello < /MenuItem>]} onSubmit={handleSearchSubmitTest}/ > } isCollapsed = { false } / > < /div> < div css = { containerStyle } > < DeprecatedHeader title = "Icons Only" brandUrl = "#" leftSlot = { < SearchForm isCollapsed = { false } onSubmit = { handleSearchSubmitTest } / > } isCollapsed = { false } > < IconButton variant = "circle" icon = { notificationsIcon } title = "Notifications" aria - label = "Notifications" / > < IconButton variant = "circle" icon = { inboxIcon } title = "Inbox" aria - label = "Inbox" / > < Avatar onClick = { handleAvatarClickTest } altText = "Profile" / > < /DeprecatedHeader> < /div> < br / > < div css = { containerStyle } > < DeprecatedHeader title = "Kitchen Sink" themeColor = { DeprecatedHeader . Theme . Blue } brandUrl = "#" onMenuClick = { handleMenuClickTest } leftSlot = { < SearchWithAutoComplete searchTheme = { SearchForm . Theme . Dark } / > } isCollapsed = { false } css = { [ { zIndex : 4 } ] } > { nav } < IconButton variant = "inverse" icon = { notificationsIcon } title = "Notifications" aria - label = "Notifications" / > < Avatar onClick = { handleAvatarClickTest } altText = "Profile" / > < PrimaryButton > Download < /PrimaryButton> < /DeprecatedHeader> < /div> < br / > < div css = { containerStyle } > < DeprecatedHeader variant = { DeprecatedHeader . Variant . Dub } title = "Ignored when brand prop exists..." themeColor = { DeprecatedHeader . Theme . White } brand = { < DeprecatedDubLogoTitle title = "Contained Lockup" themeColor = { DeprecatedHeader . Theme . Blue } bgColor = { gradients . blueberry } / > } brandUrl = "#" leftSlot = { < SearchForm isCollapsed = { false } grow = { true } onSubmit = { handleSearchSubmitTest } / > } isCollapsed = { false } > { nav } < IconButton variant = "circle" icon = { notificationsIcon } title = "Notifications" aria - label = "Notifications" / > < IconButton variant = "circle" icon = { inboxIcon } title = "Inbox" aria - label = "Inbox" / > < PrimaryButton > Logout < /PrimaryButton> < /DeprecatedHeader> < /div> < br / > < div css = { containerStyle } > < DeprecatedHeader variant = { DeprecatedHeader . Variant . Dub } title = "Centered Menu" themeColor = { DeprecatedHeader . Theme . White } centeredNav = { true } brandUrl = "#" leftSlot = { < SearchForm isCollapsed = { false } grow = { true } onSubmit = { handleSearchSubmitTest } / > } isCollapsed = { false } > { nav } < IconButton variant = "circle" icon = { notificationsIcon } title = "Notifications" aria - label = "Notifications" / > < IconButton variant = "circle" icon = { inboxIcon } title = "Inbox" aria - label = "Inbox" / > < PrimaryButton > Logout < /PrimaryButton> < /DeprecatedHeader> < /div> < br / > < div css = { containerStyle } > < DeprecatedHeader variant = { DeprecatedHeader . Variant . Dub } title = "Centered Menu Without Search" themeColor = { DeprecatedHeader . Theme . White } centeredNav = { true } brandUrl = "#" isCollapsed = { false } > { nav } < IconButton variant = "circle" icon = { notificationsIcon } title = "Notifications" aria - label = "Notifications" / > < IconButton variant = "circle" icon = { inboxIcon } title = "Inbox" aria - label = "Inbox" / > < PrimaryButton > Logout < /PrimaryButton> < /DeprecatedHeader> < /div> < br / > < div css = { [ containerStyle , backgroundStyle ] } > < DeprecatedHeader variant = { DeprecatedHeader . Variant . Dub } title = "Transparent" themeColor = { DeprecatedHeader . Theme . Transparent } brandUrl = "#" leftSlot = { < SearchForm isCollapsed = { false } grow = { true } onSubmit = { handleSearchSubmitTest } searchTheme = { SearchForm . Theme . Dark } / > } isCollapsed = { false } > { nav } < IconButton variant = "inverse" icon = { notificationsIcon } title = "Notifications" aria - label = "Notifications" / > < IconButton variant = "inverse" icon = { inboxIcon } title = "Inbox" aria - label = "Inbox" / > < PrimaryButton > Logout < /PrimaryButton> < /DeprecatedHeader> < /div> < /div>)) . add ( 'Full Header' , ( ) => ( < div className = "story" > < div css = { containerStyle } > < DeprecatedHeader variant = { DeprecatedHeader . Variant . Full } isCollapsed = { false } / > < /div> < div css = { containerStyle } > < DeprecatedHeader variant = { DeprecatedHeader . Variant . Full } title = "Design" themeColor = { DeprecatedHeader . Theme . White } brandUrl = "#" isCollapsed = { false } > { nav } < /DeprecatedHeader> < /div> < br / > < div css = { containerStyle } > < DeprecatedHeader variant = { DeprecatedHeader . Variant . Full } title = "Kitchen Sink" themeColor = { DeprecatedHeader . Theme . Blue } brandUrl = "#" onMenuClick = { handleMenuClickTest } isCollapsed = { false } > { nav } < IconButton variant = "inverse" icon = { notificationsIcon } title = "Notifications" aria - label = "Notifications" / > < Avatar onClick = { handleAvatarClickTest } altText = "Profile" / > < PrimaryButton > Download < /PrimaryButton> < /DeprecatedHeader> < /div> < br / > < div css = { containerStyle } > < DeprecatedHeader variant = { DeprecatedHeader . Variant . Full } title = "" themeColor = { DeprecatedHeader . Theme . Blue } brandUrl = "#" isCollapsed = { false } > { nav } < IconButton variant = "inverse" icon = { notificationsIcon } title = "Notifications" aria - label = "Notifications" / > < Avatar onClick = { handleAvatarClickTest } / > < /DeprecatedHeader> < /div> < br / > < div css = { [ containerStyle , backgroundStyle ] } > < DeprecatedHeader variant = { DeprecatedHeader . Variant . Full } title = "Transparent" themeColor = { DeprecatedHeader . Theme . Transparent } brandUrl = "#" isCollapsed = { false } > { nav } < IconButton variant = "inverse" icon = { notificationsIcon } title = "Notifications" aria - label = "Notifications" / > < Avatar onClick = { handleAvatarClickTest } altText = "Profile" / > < /DeprecatedHeader> < /div> < br / > < div css = { containerStyle } > < DeprecatedHeader variant = { DeprecatedHeader . Variant . Full } title = "" themeColor = { DeprecatedHeader . Theme . White } centeredNav = { true } brandUrl = "#" isCollapsed = { false } > { nav } < IconButton variant = "circle" icon = { notificationsIcon } title = "Notifications" aria - label = "Notifications" / > < IconButton variant = "circle" icon = { inboxIcon } title = "Inbox" aria - label = "Inbox" / > < PrimaryButton > Logout < /PrimaryButton> < /DeprecatedHeader> < /div> < /div>));