fix: use data-tutorial attribute for buttons targeted by app tutorials 🎨

cozy · Nov 7, 2017 · 564d7b8 · 564d7b8
1 parent 587ae08
commit 564d7b8
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 37 deletions.
diff --git a/src/components/Bar.jsx b/src/components/Bar.jsx
@@ -94,15 +94,15 @@ class Bar extends Component {
 
   renderLeft () {
     const { t } = this.props
-    return <button className='coz-bar-burger' onClick={this.toggleDrawer} data-icon='icon-apps'>
+    // data-tutorial attribute allows to be targeted in an application tutorial
+    return <button className='coz-bar-burger' onClick={this.toggleDrawer} data-icon='icon-apps' data-tutorial='apps-mobile'>
       <span className='coz-bar-hidden'>{t('drawer')}</span>
     </button>
   }
 
-  renderRight() {
+  renderRight () {
     const { usageTracker, claudyOpened,
-      enableClaudy, fireClaudy, onDrawer, displayOnMobile, isPublic } = this.props
-    const { drawerVisible } = this.state
+      enableClaudy, fireClaudy, displayOnMobile, isPublic } = this.props
     return (__TARGET__ !== 'mobile' || displayOnMobile) && !isPublic ? <div className='coz-bar-flex-container' key='nav'>
       <Nav toggleSupport={this.toggleSupport} />
       {enableClaudy &&
@@ -117,7 +117,6 @@ class Bar extends Component {
   }
 
   render () {
-    const { t } = this.props
     const { fireClaudy, displaySupport, enableSearchBar } = this.state
     const { barLeft, barRight, barCenter } = this.props
     const { enableClaudy, onDrawer, displayOnMobile, isPublic } = this.props
@@ -128,12 +127,12 @@ class Bar extends Component {
         { barCenter || this.renderCenter() }
         { enableSearchBar
           ? <SearchBar />
-          : <hr className='coz-sep-flex' key='separator'/>
+          : <hr className='coz-sep-flex' key='separator' />
         }
         { barRight || this.renderRight() }
         { displaySupport && <SupportModal onClose={this.toggleSupport} /> }
-        { (__TARGET__ !== 'mobile' || displayOnMobile) && !isPublic ?
-          <Drawer visible={drawerVisible}
+        { (__TARGET__ !== 'mobile' || displayOnMobile) && !isPublic
+          ? <Drawer visible={drawerVisible}
             onClose={this.toggleDrawer}
             onClaudy={(enableClaudy && (() => this.toggleClaudy(true))) || false}
             isClaudyLoading={fireClaudy}

diff --git a/src/components/Nav.jsx b/src/components/Nav.jsx
@@ -74,6 +74,7 @@ class Nav extends Component {
     }
   }
 
+  // data-tutorial attribute allows to be targeted in an application tutorial
   render () {
     const { t, toggleSupport } = this.props
     const { apps, settings } = this.state
@@ -89,6 +90,7 @@ class Nav extends Component {
               onClick={() => this.toggleMenu('apps')}
               aria-controls='coz-nav-pop--apps' aria-busy={apps.busy}
               data-icon='icon-apps'
+              data-tutorial='apps'
             >
               {t('menu.apps')}
             </a>

diff --git a/src/components/SearchBar.jsx b/src/components/SearchBar.jsx
@@ -7,26 +7,26 @@ const INTENT_VERB = 'OPEN'
 const INTENT_DOCTYPE = 'io.cozy.suggestions'
 const SUGGESTIONS_PER_SOURCE = 10
 
-class SearchBar extends Component {  
+class SearchBar extends Component {
   state = {
     query: '',
     suggestions: [],
     sourceURLs: []
   }
-  
+
   componentDidMount () {
     // The searchbar has one or more sources that provide suggestions. These sources are iframes into other apps, provied by thee intent system.
     // Since we need to call the sources whenever the query changes, we are taking manual control over the intent process.
     fetchRawIntent(INTENT_VERB, INTENT_DOCTYPE)
     .then(intent => {
       const { services } = intent.attributes
       if (!services) return null
-      
+
       this.sources = services.map(service => {
         const url = service.href
         this.setState(state => ({...state, sourceURLs: [...state.sourceURLs, url]}))
         const serviceOrigin = url.split('/', 3).join('/')
-        
+
         return {
           slug: service.slug,     // can be used to show where a suggestion comes from
           origin: serviceOrigin,
@@ -36,21 +36,21 @@ class SearchBar extends Component {
           resolve: null           // a reference to a function to call when the source sends suggestions
         }
       })
-      
+
       window.addEventListener('message', this.onMessageFromSource(this.sources))
     })
   }
-  
+
   onMessageFromSource = (sources) => (event) => {
     // this re-implements a subset of injectService found in lib/intents, though only the part that are useful for suggestions
     const source = sources.find(source => source.origin === event.origin)
-    
+
     if (!source) return null
-    
+
     if (event.data.type === `intent-${source.id}:ready`) {
       source.ready = true
       source.window = event.source
-      
+
       source.window.postMessage({}, event.origin)
     }
     else if (event.data.type === `intent-${source.id}:data` && source.resolve) {
@@ -64,28 +64,28 @@ class SearchBar extends Component {
       console.log('unhandled message:', event)
     }
   }
-  
+
   onChange = (event, { newValue }) => {
     this.setState({
       query: newValue
     })
   }
-  
+
   clearSuggestions = () => {
     this.setState({
       suggestions: []
     })
   }
-  
+
   onSuggestionsFetchRequested = ({ value }) => {
     this.clearSuggestions()
-    
+
     this.sources.filter(source => source.ready).forEach(async (source) => {
       const {id, suggestions} = await new Promise(resolve => {
         source.resolve = resolve
         source.window.postMessage({ query: value }, source.origin)
       })
-      
+
       this.setState(state => ({
         ...state,
         suggestions: [
@@ -98,28 +98,28 @@ class SearchBar extends Component {
       }))
     })
   }
-  
+
   onSuggestionSelected = (event, { suggestion }) => {
     const { onSelect } = suggestion
     // `onSelect` is a string that describes what should happen when the suggestion is selected. Currently, the only format we're supporting is `open:http://example.com` to change the url of the current page.
-    
+
     if (/^open:/.test(onSelect)) {
       const url = onSelect.substr(5)
       window.location.href = url
     }
     else {
       console.log('suggestion onSelect (' + onSelect + ') could not be executed')
     }
-    
+
     this.setState({ query: '' })
   }
-  
+
   getSectionSuggestions = (section) => section.suggestions.slice(0, SUGGESTIONS_PER_SOURCE)
-  
+
   getSuggestionValue = (suggestion) => suggestion.term || suggestion.title
-  
+
   renderSectionTitle = (section) => null // we only have one section at the moment, but if we decide to sort suggestions by section/source, we can use this callback
-  
+
   renderSuggestion = (suggestion) => (
     <div className='coz-searchbar-autosuggest-suggestion-content'>
       <div className='coz-searchbar-autosuggest-suggestion-title'>
@@ -130,17 +130,17 @@ class SearchBar extends Component {
       </div>
     </div>
   )
-  
+
   render () {
     const { query, suggestions, sourceURLs } = this.state
     const { t } = this.props
-    
+
     const inputProps = {
       placeholder: t('searchbar.placeholder'),
       value: query,
       onChange: this.onChange
     }
-    
+
     const theme = {
       container: 'coz-searchbar-autosuggest-container',
       input: 'coz-searchbar-autosuggest-input',
@@ -152,7 +152,7 @@ class SearchBar extends Component {
       suggestionHighlighted: 'coz-searchbar-autosuggest-suggestion-highlighted',
       sectionTitle: 'coz-searchbar-autosuggest-section-title',
     }
-    
+
     return (
       <div className='coz-searchbar'>
         {sourceURLs.map(url => (
@@ -177,4 +177,4 @@ class SearchBar extends Component {
   }
 }
 
-export default translate()(SearchBar)
+export default translate()(SearchBar)
diff --git a/src/index.jsx b/src/index.jsx
@@ -59,7 +59,7 @@ const injectBarInDOM = (data) => {
     barNode.dataset.drawerVisible = visible
   }
 
-  return (lang) => render((
+  return () => render((
     <BarProvider store={barStore}>
       <ReduxProvider store={reduxStore}>
         <I18n
@@ -106,7 +106,6 @@ const getDefaultIcon = () => {
 
 let renderBar
 const init = ({
-  lang = getDefaultLang(),
   appName,
   appEditor = getEditor(),
   iconPath = getDefaultIcon(),
@@ -122,7 +121,7 @@ const init = ({
   }
 
   stack.init({cozyURL, token})
-  renderBar = injectBarInDOM({lang, appName, appEditor, iconPath, replaceTitleOnMobile, displayOnMobile, isPublic})
+  renderBar = injectBarInDOM({appName, appEditor, iconPath, replaceTitleOnMobile, displayOnMobile, isPublic})
   renderBar()
 }