cozy-bar 1.17.1

package/src/styles/indicators.css

@@ -0,0 +1,58 @@
+/* Spinner */
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}
+
+/* Progress bar */
+[role=banner] progress[value] {
+  /* Reset the default appearance */
+  appearance: none;
+  background-color: var(--paleGrey);
+  border: solid 1px var(--silver);
+  border-radius: 2px;
+  color: var(--dodgerBlue);
+}
+
+[role=banner] progress[value]::-webkit-progress-bar {
+  background: var(--paleGrey);
+  border-radius: 2px;
+}
+
+[role=banner] progress[value]::-webkit-progress-value {
+  background: var(--dodgerBlue);
+  border-radius: 1px;
+}
+
+[role=banner] progress[value]::-moz-progress-bar {
+  background: var(--dodgerBlue);
+  border-radius: 1px;
+}
+
+/* Errors */
+[role=banner] .coz-nav--error {
+  margin: 0 0 .1em 0;
+  font-weight: normal;
+  font-size: .875em;
+  color: var(--pomegranate);
+}
+
+/* Claudy loading */
+[role=banner] .coz-claudy [data-claudy-loading=true]::before {
+  position: absolute;
+  content: '';
+  width: 100%;
+  height: 100%;
+  bottom: 0;
+  right: 0;
+  background: none;
+  border-radius: 100%;
+  border: .2em solid var(--scienceBlue);
+  border-right: .2em solid white;
+  box-sizing: border-box;
+  animation: 1s linear infinite spin;
+}

package/src/styles/nav.css

@@ -0,0 +1,81 @@
+[role=banner] .coz-nav {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  position: relative;
+}
+
+@media (max-width: 48em) {
+  [role=banner] .coz-nav {
+    display: none;
+  }
+}
+
+[role=banner] [aria-controls][aria-busy]::after {
+  position: relative;
+  top: .12em;
+  margin: 0 .355em;
+  font-size: .875em;
+}
+
+[role=banner] [aria-controls][aria-busy=true] {
+  padding-right: 0;
+}
+
+[role=banner] .coz-nav [aria-controls][data-icon] {
+  padding-left: calc(1.25em + 16px + .5em);
+  background-position: 1em calc(50% - 1px);
+}
+
+/* POP */
+[role=banner] .coz-nav-pop[aria-hidden=true] {
+  display: flex;
+  transform: scale(0);
+  opacity: 0;
+  transition: .2s transform ease-in, .1s opacity ease-in;
+}
+
+[role=banner] .coz-nav-pop {
+  position: absolute;
+  top: calc(100% - .25em);
+  box-sizing: border-box;
+  min-width: 100%;
+  max-height: calc(100vh - 4rem);
+  overflow-y: auto;
+  background-color: #fff;
+  border-radius: 8px;
+  border: solid 1px rgba(50, 54, 63, 0.12);
+  box-shadow: 0 1px 3px 0 rgba(50, 54, 63, 0.19), 0 6px 18px 0 rgba(50, 54, 63, 0.19);
+  opacity: 1;
+  transform: scale(1);
+  transform-origin: 80% 0%;
+  transition: .2s transform cubic-bezier(0.2, 0.75, 0.3, 1.15);
+  /* hide scrollbars */
+  -ms-overflow-style: none;  /* IE 10+ */
+}
+
+[role=banner] .coz-nav-pop::-webkit-scrollbar {
+  display: none; /* Safari and Chrome */
+}
+
+[role=banner] .coz-nav-pop-content .coz-nav-group {
+  padding: 0;
+  margin: 0;
+}
+
+[role=banner] .coz-nav-pop-content .coz-nav-group:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+[role=banner] .coz-nav-pop-content .coz-nav-group:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+[role=banner] .coz-nav-pop .coz-nav-group {
+  border-bottom: solid 1px var(--silver);
+}
+
+[role=banner] .coz-nav-pop .coz-nav-group:last-child {
+  border: 0;
+}

package/src/styles/navigation_item.css

@@ -0,0 +1,39 @@
+/* Force pointer on clickable elements*/
+[role=banner] a[role=menuitem],
+[role=banner] button[role=menuitem] {
+  cursor: pointer;
+  border-left: 4px solid transparent;
+}
+
+[role=banner] a[role=menuitem]:hover,
+[role=banner] a[role=menuitem]:focus,
+[role=banner] button[role=menuitem]:hover,
+[role=banner] button[role=menuitem]:focus {
+  background-color: var(--paleGrey);
+}
+
+[role=banner] [role=menuitem][aria-busy=true]::after {
+  right: 1.5em;
+  top: .5em;
+}
+
+[role=banner] .coz-drawer-wrapper [role=menuitem][aria-busy=true]::after {
+  top: .8em;
+}
+
+/* nav group */
+
+[role=banner] .coz-nav-group.coz-nav--error {
+  padding: 0.75em;
+  min-width: 20em;
+}
+
+/* Remove default margin for p elements */
+[role=banner] a[role=menuitem] p.coz-label {
+  margin: 0;
+}
+
+[role=banner] div[role=menuitem]:not([data-icon]) {
+  margin: 0;
+  padding-left: 1.5em;
+}

package/src/styles/searchbar.css

@@ -0,0 +1,158 @@
+[role=banner] .coz-searchbar{
+  height: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-grow: 1;
+  padding: .3em .8em .3em .7em;
+  box-sizing: border-box;
+  position: relative;
+}
+
+[role=banner] .coz-searchbar-autosuggest-container{
+  position: relative;
+  width: 100%;
+  opacity: .4;
+  transition: all .2s ease-out;
+}
+[role=banner] .coz-searchbar-autosuggest-container.--focused{
+  opacity: 1;
+}
+[role=banner] .coz-searchbar-autosuggest-container:before{
+  content: '';
+  display: inline-block;
+  width: 1.6em;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: url('~assets/icons/16/icon-magnifier-16.svg') .6em center no-repeat;
+}
+[role=banner] .coz-searchbar-autosuggest-container.--searching:before{
+  padding-left: .5em;
+  background: url('~assets/icons/spinner.svg') center no-repeat;
+  background-size: 1em;
+  animation: spin 1s linear infinite;
+}
+
+[role=banner] .coz-searchbar-autosuggest-input{
+  box-sizing: border-box;
+  width: 100%;
+  padding: .5em;
+  padding-left: 2em;
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+  border-radius: 4px;
+  transition: all .2s ease-out;
+}
+[role=banner] .coz-searchbar-autosuggest-input:hover{
+  border-color: var(--silver);
+}
+[role=banner] .coz-searchbar-autosuggest-input:focus,
+[role=banner] .coz-searchbar-autosuggest-input-focused{
+  outline: none;
+  border-color: var(--dodgerBlue);
+}
+
+[role=banner] .coz-searchbar-autosuggest-suggestions-container {
+  position: absolute;
+  top: 100%;
+  margin-top: 3px;
+  width: 100%;
+  max-height: em(170px);
+  overflow: auto;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--silver);
+  border-radius: 4px;
+  background: white;
+  box-shadow: 0 1px 3px 0 rgba(50, 54, 63, 0.19), 0 6px 18px 0 rgba(50, 54, 63, 0.19);
+  display: none;
+}
+
+[role=banner] .coz-searchbar-autosuggest-suggestions-container--open {
+	display: block;
+}
+
+[role=banner] .coz-searchbar-autosuggest-status-container {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin: -0.3em .8em .3em;
+  padding: .8em .5em;
+  max-height: em(170px);
+  overflow: auto;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--silver);
+  border-radius: 4px;
+  background: white;
+  box-shadow: 0 1px 3px 0 rgba(50, 54, 63, 0.19), 0 6px 18px 0 rgba(50, 54, 63, 0.19);
+}
+
+[role=banner] .coz-searchbar-autosuggest-suggestions-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+[role=banner] .coz-searchbar-autosuggest-suggestions-list b {
+  font-weight: bolder;
+  color: var(--scienceBlue)
+}
+
+[role=banner] .coz-searchbar-autosuggest-suggestion {
+	padding: .8em .5em;
+  border-width: 0;
+  border-bottom-width: 1px;
+  border-style:  solid;
+  border-color: var(--silver);
+  cursor: pointer;
+}
+[role=banner] .coz-searchbar-autosuggest-suggestion:last-child {
+  border-bottom-width: 0;
+}
+
+[role=banner] .coz-searchbar-autosuggest-suggestion-item {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+[role=banner] .coz-searchbar-autosuggest-suggestion-icon {
+  max-height: 2rem;
+  min-height: 2rem;
+  margin-right: 1rem;
+}
+
+[role=banner] .coz-searchbar-autosuggest-suggestion-content {
+  flex-grow: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  flex-direction: column;
+}
+
+[role=banner] .coz-searchbar-autosuggest-suggestion-subtitle {
+  color: var(--coolGrey);
+}
+
+[role=banner] .coz-searchbar-autosuggest-suggestion-highlighted {
+  background: var(--paleGrey);
+  box-shadow: inset 4px 0 0 0 var(--dodgerBlue);
+}
+
+[role=banner] .coz-searchbar-autosuggest-section-title {
+  padding: .5em;
+  font-size: .8em;
+}
+
+@media (max-width: 48em) {
+  [role=banner] .coz-searchbar{
+    display: none;
+  }
+}

package/src/styles/settings.css

@@ -0,0 +1,44 @@
+[role=banner] .coz-nav-settings-btn {
+  color: var(--slateGrey);
+}
+[role=banner] .coz-nav-settings-btn svg {
+  fill: var(--coolGrey);
+}
+[role=banner] .coz-nav-settings-btn:hover,
+[role=banner] .coz-nav-settings-btn:focus {
+  background-color: var(--paleGrey);
+  box-shadow: inset 0 -1px 0 0 var(--silver);
+  color: var(--charcoalGrey);
+}
+
+[role=banner] .coz-nav-pop--settings {
+  right: 0;
+}
+
+[role=banner] .coz-nav-settings-item [role=menuitem] {
+  position: relative;
+  z-index: 0;
+  display: block;
+  box-sizing: border-box;
+  margin: 0;
+  width: 100%;
+  padding: .8em 1.5em .8em calc(1.5em + 16px + .5em);
+  border: none;
+  align-items: center;
+  background-position: 1.5em 50%;
+  background-color: transparent;
+  text-align: left;
+  font-size: 1rem;
+  font-weight: normal;
+  white-space: nowrap;
+  color: var(--charcoalGrey);
+  text-transform: none;
+  text-decoration: none;
+  outline: none;
+}
+[role=banner] .coz-nav-settings-item .coz-nav-settings-item-btn[role=menuitem] {
+  padding-left: 1.5rem;
+}
+[role=banner] .coz-nav-settings-item .coz-nav-settings-item-btn[role=menuitem] > span > span {
+  margin-right: auto;
+}

package/src/styles/storage.css

@@ -0,0 +1,22 @@
+[role=banner] [role=menuitem][data-icon=icon-storage] {
+  background-position: 1.5em calc(.8em + 1px);
+}
+
+[role=banner] .coz-nav-storage {
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+  padding-top: .5em;
+  color: var(--coolGrey);
+}
+
+[role=banner] .coz-nav-storage-text {
+  margin: 0 0 .1em 0;
+  font-weight: normal;
+  font-size: .875em;
+}
+
+[role=banner] .cozy-nav-storage-bar {
+    height: .5em;
+    margin: .2em 0 .1em 0;
+}

package/src/styles/supportModal.css

@@ -0,0 +1,20 @@
+[role=banner] .coz-support-modal .coz-support-modal-content {
+  min-height: 8em;
+}
+
+[role=banner] .coz-support-modal .coz-support-intent-wrapper .coz-intent {
+  width: 100%;
+  height: 24em;
+  border: none;
+}
+
+[role=banner] .coz-support-modal .coz-support-modal-close {
+  margin-top: .7rem;
+  margin-right: 1rem;
+}
+
+@media (max-width: 48em) {
+  [role=banner] .coz-support-modal .coz-support-intent-wrapper .coz-intent {
+    height: 27em;
+  }
+}

package/src/styles/theme.styl

@@ -0,0 +1,25 @@
+
+[role=banner] .coz-bar-wrapper
+    box-shadow inset 0 -1px 0 0 var(--silver)
+    --cozBarThemePrimaryColor var(--primaryColor)
+    --cozBarThemePrimaryContrastTextColor var(--primaryContrastTextColor)
+
+    .coz-nav-apps-btns
+        color var(--slateGrey)
+
+    .coz-bar-burger
+        color var(--coolGrey)
+
+@media (max-width: 64em)
+    [role=banner] .coz-bar-wrapper
+        background-color var(--white)
+
+@media (max-width: 48em)
+    [role=banner] .coz-bar-wrapper
+        &.coz-theme-primary
+            box-shadow inherit
+            background-color var(--cozBarThemePrimaryColor)
+
+            .coz-nav-apps-btns,
+            .coz-bar-burger
+                color var(--cozBarThemePrimaryContrastTextColor)

package/test/__mocks__/fileMock.js

@@ -0,0 +1,3 @@
+'use strict'
+
+module.exports = 'test-file-stub'

package/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`The bar library should render correctly the cozy-bar 1`] = `
+<Provider
+  store={
+    BarStore {
+      "claudyActions": null,
+      "helpLink": "",
+      "settingsAppURL": "",
+      "settingsData": null,
+    }
+  }
+>
+  <Provider
+    store={
+      Object {
+        "dispatch": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+        Symbol(Symbol.observable): [Function],
+      }
+    }
+  >
+    <Connect(I18n)
+      dictRequire={[Function]}
+    >
+      <Wrapper
+        appName="test-app"
+        appNamePrefix="cozy"
+        iconPath=""
+        isPublic={false}
+        onDrawer={[Function]}
+        onLogOut={undefined}
+        replaceTitleOnMobile={false}
+        userActionRequired={undefined}
+      />
+    </Connect(I18n)>
+  </Provider>
+</Provider>
+`;

package/test/components/AppItem.spec.jsx

@@ -0,0 +1,113 @@
+import React from 'react'
+import { AppItem } from 'components/Apps/AppItem'
+import { mount, shallow } from 'enzyme'
+import { tMock } from '../jestLib/I18n'
+import { isMobileApp, isMobile } from 'cozy-device-helper'
+
+jest.useFakeTimers()
+
+jest.mock('cozy-device-helper', () => ({
+  ...require.requireActual('cozy-device-helper'),
+  isMobileApp: jest.fn(),
+  isMobile: jest.fn(),
+  openDeeplinkOrRedirect: jest.fn()
+}))
+
+jest.mock('lib/stack', () => ({
+  get: {
+    iconProps: () => {
+      const { isMobileApp } = require('cozy-device-helper')
+      return isMobileApp()
+        ? {
+            fetchIcon: jest.fn().mockResolvedValue('http://urlOfIcon')
+          }
+        : {
+            // we mustn't give the protocol here
+            domain: 'cozy.tools',
+            secure: true
+          }
+    }
+  }
+}))
+const defaultApp = {
+  slug: 'cozy-drive',
+  name: 'Drive',
+  href: 'http://fake.fr'
+}
+
+describe('AppItem', () => {
+  const setup = ({ app } = {}) => {
+    const wrapper = shallow(<AppItem app={app || defaultApp} t={tMock} />)
+    return { wrapper }
+  }
+
+  afterEach(() => {
+    jest.restoreAllMocks()
+  })
+
+  describe('buildAppUrl', () => {
+    it('should return untouched href', () => {
+      const { wrapper } = setup()
+      const url = wrapper.instance().buildAppUrl('http://fake.fr')
+      expect(url).toBe('http://fake.fr/')
+    })
+
+    it('should update query string', () => {
+      jest.spyOn(AppItem, 'buildQueryParams').mockReturnValue({
+        foo: 'bar',
+        bar: 'buz'
+      })
+
+      const { wrapper } = setup()
+      const url = wrapper.instance().buildAppUrl('http://fake.fr')
+      expect(url).toBe('http://fake.fr/?foo=bar&bar=buz')
+    })
+
+    it('should return null for invalid url', () => {
+      jest.spyOn(console, 'error').mockImplementation(() => {})
+
+      const invalidApp = {
+        name: 'Invalid app',
+        url: 'Clearly not an url',
+        slug: 'invalid-app'
+      }
+      const { wrapper } = setup({ app: invalidApp })
+      const appLinkerWrapper = wrapper.find('AppLinker')
+      expect(appLinkerWrapper.props().href).toEqual('')
+    })
+  })
+})
+
+describe('app icon', () => {
+  let spyConsoleError
+
+  beforeEach(() => {
+    spyConsoleError = jest.spyOn(console, 'error')
+
+    isMobileApp.mockReturnValue(false)
+    isMobile.mockReturnValue(false)
+  })
+
+  afterEach(() => {
+    spyConsoleError.mockRestore()
+  })
+
+  const setup = () => {
+    const root = mount(<AppItem t={tMock} app={defaultApp} />)
+    return { root }
+  }
+
+  it('should render correctly', () => {
+    const { root } = setup()
+    const appIcon = root.find('AppIcon')
+    expect(appIcon.props().className).toContain('coz-nav-apps-item-icon')
+  })
+
+  it('should render correctly with target mobile and providing fetchIcon to AppIcon', () => {
+    isMobileApp.mockReturnValue(true)
+    const { root } = setup()
+    const appIcon = root.find('AppIcon')
+    expect(appIcon.props().className).toContain('coz-nav-apps-item-icon')
+    expect(appIcon.props().fetchIcon).not.toBe(undefined)
+  })
+})