cozy-bar 0.0.0-development

package/src/components/Apps/AppNavButtons.jsx

@@ -0,0 +1,94 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+import BottomIcon from 'cozy-ui/react/Icons/Bottom'
+import Icon from 'cozy-ui/react/Icon'
+import TopIcon from 'cozy-ui/react/Icons/Top'
+import { translate } from 'cozy-ui/react/I18n'
+
+import { ButtonCozyHome } from 'components/Apps/ButtonCozyHome'
+import { getHomeApp } from 'lib/reducers'
+import { isFetchingApps } from 'lib/reducers'
+
+class AppNavButton extends Component {
+  render() {
+    const {
+      homeApp,
+      handleClick,
+      appName,
+      appNamePrefix,
+      appSlug,
+      iconPath,
+      isFetchingApps,
+      isPublic,
+      opened,
+      t
+    } = this.props
+
+    const isHomeApp = homeApp && homeApp.isCurrentApp
+
+    if (!isPublic && isFetchingApps) {
+      return (
+        <div className="coz-nav-apps-btns --loading">
+          <div className="coz-nav-apps-btns-home coz-loading-placeholder" />
+          <div className="coz-nav-apps-btns-main coz-loading-placeholder" />
+        </div>
+      )
+    }
+
+    const displayName =
+      !isHomeApp && appNamePrefix
+        ? [
+            t(`${appSlug}.name_prefix`, {
+              _: appNamePrefix
+            }),
+            t(`${appSlug}.name`, {
+              _: appName
+            })
+          ].join(' ')
+        : t(`${appSlug}.name`, { _: appName })
+
+    const homeHref = !isPublic && homeApp && homeApp.href
+
+    return (
+      <div className={`coz-nav-apps-btns${isHomeApp ? ' --currentHome' : ''}`}>
+        <ButtonCozyHome homeHref={homeHref} />
+
+        {!isHomeApp && <span className="coz-nav-apps-btns-sep" />}
+
+        <button
+          type="button"
+          onClick={isPublic ? null : handleClick}
+          className="coz-nav-apps-btns-main"
+          aria-controls="coz-nav-pop--apps"
+          data-tutorial="apps"
+          disabled={isPublic}
+        >
+          {!isHomeApp && (
+            <img className="coz-bar-hide-sm" src={iconPath} width="28" alt="" />
+          )}
+          <span className="coz-nav-app-name">{displayName}</span>
+          {!isPublic && (
+            <Icon
+              icon={opened ? TopIcon : BottomIcon}
+              color="#95999d"
+              size="12"
+            />
+          )}
+        </button>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  homeApp: getHomeApp(state),
+  isFetchingApps: isFetchingApps(state)
+})
+
+const mapDispatchToProps = () => ({})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(translate()(AppNavButton))

package/src/components/Apps/AppsContent.jsx

@@ -0,0 +1,91 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import Proptypes from 'prop-types'
+
+import { translate } from 'cozy-ui/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import CloudIcon from 'cozy-ui/transpiled/react/Icons/Cloud'
+
+import withBreakpoints from 'cozy-ui/react/helpers/withBreakpoints'
+import { getApps, getHomeApp, isFetchingApps } from 'lib/reducers'
+
+import AppItem from 'components/Apps/AppItem'
+import AppItemPlaceholder from 'components/Apps/AppItemPlaceholder'
+
+const sorter = fn => (itemA, itemB) => fn(itemA) > fn(itemB)
+
+export class AppsContent extends Component {
+  constructor(props, context) {
+    super(props, context)
+    this.translateApp = translateApp(this.props.t)
+  }
+
+  render() {
+    const {
+      t,
+      apps,
+      breakpoints,
+      homeApp,
+      isFetchingApps,
+      onAppSwitch
+    } = this.props
+    const { isMobile } = breakpoints
+    const isHomeApp = homeApp && homeApp.isCurrentApp
+    const homeSlug = homeApp && homeApp.slug
+
+    if (!isFetchingApps && (!apps || !apps.length)) {
+      return <p className="coz-nav--error coz-nav-group">{t('no_apps')}</p>
+    }
+
+    return (
+      <div className="coz-nav-pop-content">
+        <ul className="coz-nav-group">
+          {isMobile && homeApp && (
+            <AppItem app={homeApp} useHomeIcon onAppSwitch={onAppSwitch} />
+          )}
+          {isFetchingApps
+            ? new Array(3)
+                .fill({})
+                .map((nothing, index) => <AppItemPlaceholder key={index} />)
+            : apps
+                .filter(app => app.slug !== homeSlug)
+                .sort(sorter(this.translateApp))
+                .map((app, index) => (
+                  <AppItem app={app} key={index} onAppSwitch={onAppSwitch} />
+                ))}
+        </ul>
+        {homeApp && !isMobile && !isHomeApp && (
+          <a role="menuitem" href={homeApp.href} className="coz-apps-home-btn">
+            <Icon icon={CloudIcon} />
+            {t('menu.home')}
+          </a>
+        )}
+      </div>
+    )
+  }
+}
+AppsContent.propTypes = {
+  homeApp: Proptypes.shape({
+    isCurrentApp: Proptypes.bool,
+    slug: Proptypes.string
+  }),
+  apps: Proptypes.array,
+  isFetchingApps: Proptypes.bool.isRequired
+}
+const translateApp = t => app => {
+  const namePrefix = app.namePrefix
+    ? t(`${app.slug}.namePrefix`, { _: app.namePrefix })
+    : null
+  const name = t(`${app.slug}.name`, { _: app.name })
+  return namePrefix ? `${namePrefix} ${name}` : `${name}`
+}
+
+const mapStateToProps = state => ({
+  apps: getApps(state),
+  homeApp: getHomeApp(state),
+  isFetchingApps: isFetchingApps(state)
+})
+
+export default connect(mapStateToProps)(
+  translate()(withBreakpoints()(AppsContent))
+)

package/src/components/Apps/ButtonCozyHome.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import IconCozyHome from './IconCozyHome'
+
+export const ButtonCozyHome = ({ webviewContext, homeHref }) => {
+  if (webviewContext)
+    return (
+      <button
+        onClick={() => {
+          webviewContext.call('backToHome')
+        }}
+        className="coz-nav-apps-btns-home --flagship"
+      >
+        <IconCozyHome className="coz-nav-apps-btns-home-svg" />
+      </button>
+    )
+
+  if (homeHref)
+    return (
+      <a href={homeHref} className="coz-nav-apps-btns-home">
+        <IconCozyHome className="coz-nav-apps-btns-home-svg" />
+      </a>
+    )
+
+  return (
+    <span className="coz-nav-apps-btns-home">
+      <IconCozyHome className="coz-nav-apps-btns-home-svg" />
+    </span>
+  )
+}

package/src/components/Apps/ButtonCozyHome.spec.jsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+
+import { ButtonCozyHome } from 'components/Apps/ButtonCozyHome'
+
+const homeHref = 'foo'
+const expectedCall = 'backToHome'
+const webviewContext = {
+  call: jest.fn()
+}
+
+describe('ButtonCozyHome', () => {
+  it('should render a span with no props', () => {
+    const render = shallow(<ButtonCozyHome />)
+    const element = render.getElement()
+
+    expect(element.type).toBe('span')
+  })
+
+  it('should render an anchor with correct href when homeHref', () => {
+    const render = shallow(<ButtonCozyHome homeHref={homeHref} />)
+    const element = render.getElement()
+
+    expect(element.type).toBe('a')
+    expect(element.props.href).toBe(homeHref)
+  })
+
+  it('should render a button when webviewContext', () => {
+    const render = shallow(<ButtonCozyHome webviewContext={webviewContext} />)
+    const element = render.getElement()
+
+    expect(element.type).toBe('button')
+  })
+
+  it('should give priority to button if both webviewContext and homeHref are present', () => {
+    const render = shallow(
+      <ButtonCozyHome homeHref={homeHref} webviewContext={webviewContext} />
+    )
+    const element = render.getElement()
+
+    expect(element.type).toBe('button')
+  })
+
+  it('should call the correct context method on click', () => {
+    const render = shallow(
+      <ButtonCozyHome homeHref={homeHref} webviewContext={webviewContext} />
+    )
+
+    render.simulate('click')
+
+    expect(webviewContext.call).toBeCalledWith(expectedCall)
+  })
+})

package/src/components/Apps/IconCozyHome.jsx

@@ -0,0 +1,38 @@
+import React, { PureComponent } from 'react'
+
+import AppIcon from 'cozy-ui/react/AppIcon'
+
+import stack from 'lib/stack'
+
+/* Generated with node_modules/.bin/svgr src/assets/sprites/icon-cozy-home.svg  */
+function SvgIconCozyHome(props) {
+  return (
+    <svg width={32} height={32} {...props}>
+      <g fill="none" fillRule="evenodd">
+        <circle fill="#297EF2" fillRule="nonzero" cx={16} cy={16} r={16} />
+        <path
+          d="M19.314 17.561a.555.555 0 01-.82.12 4.044 4.044 0 01-2.499.862 4.04 4.04 0 01-2.494-.86.557.557 0 01-.815-.12.547.547 0 01.156-.748c.214-.14.229-.421.229-.424a.555.555 0 01.176-.385.504.504 0 01.386-.145.544.544 0 01.528.553c0 .004 0 .153-.054.36a2.954 2.954 0 003.784-.008 1.765 1.765 0 01-.053-.344.546.546 0 01.536-.561h.01c.294 0 .538.237.545.532 0 0 .015.282.227.422a.544.544 0 01.158.746m2.322-6.369a5.94 5.94 0 00-1.69-3.506A5.651 5.651 0 0015.916 6a5.648 5.648 0 00-4.029 1.687 5.936 5.936 0 00-1.691 3.524 5.677 5.677 0 00-3.433 1.737 5.966 5.966 0 00-1.643 4.137C5.12 20.347 7.704 23 10.882 23h10.236c3.176 0 5.762-2.653 5.762-5.915 0-3.083-2.31-5.623-5.244-5.893"
+          fill="#FFF"
+        />
+      </g>
+    </svg>
+  )
+}
+
+class IconCozyHome extends PureComponent {
+  render() {
+    const { className } = this.props
+    const fetchIcon = () =>
+      `${stack.get.cozyURL()}/assets/images/icon-cozy-home.svg`
+
+    return (
+      <AppIcon
+        fetchIcon={fetchIcon}
+        fallbackIcon={SvgIconCozyHome}
+        className={className}
+      />
+    )
+  }
+}
+
+export default IconCozyHome

package/src/components/Apps/index.jsx

@@ -0,0 +1,72 @@
+import React, { Component } from 'react'
+
+import AppsContent from 'components/Apps/AppsContent'
+import AppNavButtons from 'components/Apps/AppNavButtons'
+
+class Apps extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      opened: false
+    }
+  }
+
+  componentDidMount() {
+    document.body.addEventListener('click', this.onClickOutside)
+    this.modalContainer = document.getElementById('cozy-bar-modal-dom-place')
+  }
+
+  componentWillUnmount() {
+    document.body.removeEventListener('click', this.onClickOutside)
+  }
+
+  onClickOutside = event => {
+    if (this.state.opened) {
+      // if it's not a cozy-bar nav popup, close the opened popup
+      if (
+        !this.rootRef.contains(event.target) &&
+        !this.modalContainer.contains(event.target)
+      ) {
+        this.setState({ opened: false })
+        event.stopPropagation()
+      }
+    }
+  }
+
+  toggleMenu = () => {
+    this.setState({ opened: !this.state.opened })
+  }
+
+  // data-tutorial attribute allows to be targeted in an application tutorial
+  render() {
+    const { appName, appNamePrefix, appSlug, iconPath, isPublic } = this.props
+    const { opened } = this.state
+    return (
+      <nav
+        className="coz-nav coz-nav-apps"
+        ref={ref => {
+          this.rootRef = ref
+        }}
+      >
+        <AppNavButtons
+          appName={appName}
+          appNamePrefix={appNamePrefix}
+          appSlug={appSlug}
+          iconPath={iconPath}
+          handleClick={this.toggleMenu}
+          opened={opened}
+          isPublic={isPublic}
+        />
+        <div
+          className="coz-nav-pop coz-nav-pop--apps"
+          id="coz-nav-pop--apps"
+          aria-hidden={!opened}
+        >
+          <AppsContent />
+        </div>
+      </nav>
+    )
+  }
+}
+
+export default Apps

package/src/components/Banner.jsx

@@ -0,0 +1,41 @@
+import React, { Component } from 'react'
+import { ButtonLink } from 'cozy-ui/react/Button'
+import { translate } from 'cozy-ui/react/I18n'
+
+class Banner extends Component {
+  constructor(props) {
+    super(props)
+    this.state = { unmounted: true }
+    this.animate = this.animate.bind(this)
+  }
+
+  animate() {
+    // To animate we have to use a setTimeout to
+    // force a CSS class update and trigger CSS animation
+    return setTimeout(() => {
+      this.setState(() => ({ unmounted: false }))
+    }, 100)
+  }
+
+  componentDidMount() {
+    this.animate()
+  }
+
+  render() {
+    const { t, code, links } = this.props
+    const { unmounted } = this.state
+    return (
+      <div className={`coz-bar-banner${unmounted ? ' unmounted' : ''}`}>
+        <p>{t(`banner.${code}.description`)}</p>
+        <ButtonLink
+          className="coz-bar-banner-button"
+          size="tiny"
+          href={links}
+          label={t(`banner.${code}.CTA`)}
+        />
+      </div>
+    )
+  }
+}
+
+export default translate()(Banner)