cozy-bar 8.4.2 → 8.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-bar",
-  "version": "8.4.2",
+  "version": "8.5.0",
   "description": "cozy-bar.js library, a small lib provided by cozy-stack to inject the Cozy-bar component into each app",
   "main": "dist/cozy-bar.js",
   "author": "Cozy Cloud <contact@cozycloud.cc> (https://cozy.io/)",
@@ -96,7 +96,7 @@
   },
   "dependencies": {
     "@cozy/minilog": "^1.0.0",
-    "cozy-client": "^27.14.4",
+    "cozy-client": "^27.17.0",
     "cozy-device-helper": "^1.16.1",
     "cozy-flags": "2.4.1",
     "cozy-interapp": "0.4.9",
@@ -120,7 +120,7 @@
   "bundlesize": [
     {
       "path": "./dist/cozy-bar.min.js",
-      "maxSize": "300 KB"
+      "maxSize": "350 KB"
     }
   ],
   "jest": {

package/src/components/Apps/ButtonCozyHome.jsx

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

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

@@ -25,20 +25,20 @@ describe('ButtonCozyHome', () => {
     expect(element.props.href).toBe(homeHref)
   })
 
-  it('should render a button when webviewContext', () => {
+  it('should render an anchor when webviewContext', () => {
     const render = shallow(<ButtonCozyHome webviewContext={webviewContext} />)
     const element = render.getElement()
 
-    expect(element.type).toBe('button')
+    expect(element.type).toBe('a')
   })
 
-  it('should give priority to button if both webviewContext and homeHref are present', () => {
+  it('should give priority to anchor if both webviewContext and homeHref are present', () => {
     const render = shallow(
       <ButtonCozyHome homeHref={homeHref} webviewContext={webviewContext} />
     )
     const element = render.getElement()
 
-    expect(element.type).toBe('button')
+    expect(element.type).toBe('a')
   })
 
   it('should call the correct context method on click', () => {

package/src/styles/apps.css

@@ -50,11 +50,6 @@
   margin-right: .75rem;
 }
 
-[role=banner] .coz-nav-apps-btns-home.--flagship {
-  background: none;
-  border: 0;
-  height: 100%;
-}
 
 [role=banner] .coz-nav-apps-btns-home-svg {
   max-width: 2rem;
@@ -88,7 +83,7 @@
   transform-origin: 10% 0%;
 }
 
-[role=banner] .coz-nav .--currentHome + .coz-nav-pop--apps {
+[role=banner] .coz-nav .--currentHome+.coz-nav-pop--apps {
   left: 0;
 }
 
@@ -180,40 +175,52 @@
   align-items: center;
 }
 
-[role=banner] [role=menuitem].coz-apps-home-btn.--mobile > span {
+[role=banner] [role=menuitem].coz-apps-home-btn.--mobile>span {
   display: flex;
   justify-content: flex-start;
 }
-[role=banner] [role=menuitem].coz-apps-home-btn img, .coz-apps-home-btn svg {
+
+[role=banner] [role=menuitem].coz-apps-home-btn img {
   width: 1rem;
   height: 1rem;
   margin-right: .5rem;
 }
 
 @keyframes barPlaceHolderShimmer {
-    0% { background-position: -20rem 0; }
-    80% { background-position: 20rem 0; }
-    80.1% { background-position: -20rem 0; }
-    100% { background-position: -20rem 0; }
+  0% {
+    background-position: -20rem 0;
+  }
+
+  80% {
+    background-position: 20rem 0;
+  }
+
+  80.1% {
+    background-position: -20rem 0;
+  }
+
+  100% {
+    background-position: -20rem 0;
+  }
 }
 
 [role=banner] .coz-loading-placeholder {
-    display: inline-block;
-    width: 100%;
-    height: 100%;
-    min-height: 1em;
-    animation: barPlaceHolderShimmer 1s linear infinite;
-    animation-delay: .1s;
-    animation-duration: 2s;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-    background-position: -20rem 0;
-    background-image: linear-gradient(to right, var(--silver) 0, var(--paleGrey) 50%, var(--silver) 100%);
-    background-size: 20rem 10rem;
-    background-repeat: no-repeat;
-    background-color: var(--silver);
-    border-radius: .15rem;
-    margin: .1rem 0;
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  min-height: 1em;
+  animation: barPlaceHolderShimmer 1s linear infinite;
+  animation-delay: .1s;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  background-position: -20rem 0;
+  background-image: linear-gradient(to right, var(--silver) 0, var(--paleGrey) 50%, var(--silver) 100%);
+  background-size: 20rem 10rem;
+  background-repeat: no-repeat;
+  background-color: var(--silver);
+  border-radius: .15rem;
+  margin: .1rem 0;
 }
 
 
@@ -245,4 +252,4 @@
   height: 1.5rem;
   margin: 0;
   background-color: var(--silver);
-}
+}

package/transpiled/components/Apps/ButtonCozyHome.js

@@ -3,11 +3,11 @@ import IconCozyHome from "./IconCozyHome";
 export var ButtonCozyHome = function ButtonCozyHome(_ref) {
   var webviewContext = _ref.webviewContext,
       homeHref = _ref.homeHref;
-  if (webviewContext) return /*#__PURE__*/React.createElement("button", {
+  if (webviewContext) return /*#__PURE__*/React.createElement("a", {
     onClick: function onClick() {
       webviewContext.call('backToHome');
     },
-    className: "coz-nav-apps-btns-home --flagship"
+    className: "coz-nav-apps-btns-home"
   }, /*#__PURE__*/React.createElement(IconCozyHome, {
     className: "coz-nav-apps-btns-home-svg"
   }));

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

@@ -25,20 +25,20 @@ describe('ButtonCozyHome', () => {
     expect(element.props.href).toBe(homeHref)
   })
 
-  it('should render a button when webviewContext', () => {
+  it('should render an anchor when webviewContext', () => {
     const render = shallow(<ButtonCozyHome webviewContext={webviewContext} />)
     const element = render.getElement()
 
-    expect(element.type).toBe('button')
+    expect(element.type).toBe('a')
   })
 
-  it('should give priority to button if both webviewContext and homeHref are present', () => {
+  it('should give priority to anchor if both webviewContext and homeHref are present', () => {
     const render = shallow(
       <ButtonCozyHome homeHref={homeHref} webviewContext={webviewContext} />
     )
     const element = render.getElement()
 
-    expect(element.type).toBe('button')
+    expect(element.type).toBe('a')
   })
 
   it('should call the correct context method on click', () => {

package/transpiled/cozy-bar.css

@@ -420,11 +420,6 @@
   margin-right: .75rem;
 }
 
-[role=banner] .coz-nav-apps-btns-home.--flagship {
-  background: none;
-  border: 0;
-  height: 100%;
-}
 
 [role=banner] .coz-nav-apps-btns-home-svg {
   max-width: 2rem;
@@ -458,7 +453,7 @@
   transform-origin: 10% 0%;
 }
 
-[role=banner] .coz-nav .--currentHome + .coz-nav-pop--apps {
+[role=banner] .coz-nav .--currentHome+.coz-nav-pop--apps {
   left: 0;
 }
 
@@ -550,40 +545,52 @@
   align-items: center;
 }
 
-[role=banner] [role=menuitem].coz-apps-home-btn.--mobile > span {
+[role=banner] [role=menuitem].coz-apps-home-btn.--mobile>span {
   display: flex;
   justify-content: flex-start;
 }
-[role=banner] [role=menuitem].coz-apps-home-btn img, .coz-apps-home-btn svg {
+
+[role=banner] [role=menuitem].coz-apps-home-btn img {
   width: 1rem;
   height: 1rem;
   margin-right: .5rem;
 }
 
 @keyframes barPlaceHolderShimmer {
-    0% { background-position: -20rem 0; }
-    80% { background-position: 20rem 0; }
-    80.1% { background-position: -20rem 0; }
-    100% { background-position: -20rem 0; }
+  0% {
+    background-position: -20rem 0;
+  }
+
+  80% {
+    background-position: 20rem 0;
+  }
+
+  80.1% {
+    background-position: -20rem 0;
+  }
+
+  100% {
+    background-position: -20rem 0;
+  }
 }
 
 [role=banner] .coz-loading-placeholder {
-    display: inline-block;
-    width: 100%;
-    height: 100%;
-    min-height: 1em;
-    animation: barPlaceHolderShimmer 1s linear infinite;
-    animation-delay: .1s;
-    animation-duration: 2s;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-    background-position: -20rem 0;
-    background-image: linear-gradient(to right, var(--silver) 0, var(--paleGrey) 50%, var(--silver) 100%);
-    background-size: 20rem 10rem;
-    background-repeat: no-repeat;
-    background-color: var(--silver);
-    border-radius: .15rem;
-    margin: .1rem 0;
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  min-height: 1em;
+  animation: barPlaceHolderShimmer 1s linear infinite;
+  animation-delay: .1s;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  background-position: -20rem 0;
+  background-image: linear-gradient(to right, var(--silver) 0, var(--paleGrey) 50%, var(--silver) 100%);
+  background-size: 20rem 10rem;
+  background-repeat: no-repeat;
+  background-color: var(--silver);
+  border-radius: .15rem;
+  margin: .1rem 0;
 }
 
 
@@ -616,7 +623,6 @@
   margin: 0;
   background-color: var(--silver);
 }
-
 [role=banner] .coz-nav-settings-btn {
   color: var(--slateGrey);
 }

package/transpiled/styles/apps.css

@@ -50,11 +50,6 @@
   margin-right: .75rem;
 }
 
-[role=banner] .coz-nav-apps-btns-home.--flagship {
-  background: none;
-  border: 0;
-  height: 100%;
-}
 
 [role=banner] .coz-nav-apps-btns-home-svg {
   max-width: 2rem;
@@ -88,7 +83,7 @@
   transform-origin: 10% 0%;
 }
 
-[role=banner] .coz-nav .--currentHome + .coz-nav-pop--apps {
+[role=banner] .coz-nav .--currentHome+.coz-nav-pop--apps {
   left: 0;
 }
 
@@ -180,40 +175,52 @@
   align-items: center;
 }
 
-[role=banner] [role=menuitem].coz-apps-home-btn.--mobile > span {
+[role=banner] [role=menuitem].coz-apps-home-btn.--mobile>span {
   display: flex;
   justify-content: flex-start;
 }
-[role=banner] [role=menuitem].coz-apps-home-btn img, .coz-apps-home-btn svg {
+
+[role=banner] [role=menuitem].coz-apps-home-btn img {
   width: 1rem;
   height: 1rem;
   margin-right: .5rem;
 }
 
 @keyframes barPlaceHolderShimmer {
-    0% { background-position: -20rem 0; }
-    80% { background-position: 20rem 0; }
-    80.1% { background-position: -20rem 0; }
-    100% { background-position: -20rem 0; }
+  0% {
+    background-position: -20rem 0;
+  }
+
+  80% {
+    background-position: 20rem 0;
+  }
+
+  80.1% {
+    background-position: -20rem 0;
+  }
+
+  100% {
+    background-position: -20rem 0;
+  }
 }
 
 [role=banner] .coz-loading-placeholder {
-    display: inline-block;
-    width: 100%;
-    height: 100%;
-    min-height: 1em;
-    animation: barPlaceHolderShimmer 1s linear infinite;
-    animation-delay: .1s;
-    animation-duration: 2s;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-    background-position: -20rem 0;
-    background-image: linear-gradient(to right, var(--silver) 0, var(--paleGrey) 50%, var(--silver) 100%);
-    background-size: 20rem 10rem;
-    background-repeat: no-repeat;
-    background-color: var(--silver);
-    border-radius: .15rem;
-    margin: .1rem 0;
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  min-height: 1em;
+  animation: barPlaceHolderShimmer 1s linear infinite;
+  animation-delay: .1s;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  background-position: -20rem 0;
+  background-image: linear-gradient(to right, var(--silver) 0, var(--paleGrey) 50%, var(--silver) 100%);
+  background-size: 20rem 10rem;
+  background-repeat: no-repeat;
+  background-color: var(--silver);
+  border-radius: .15rem;
+  margin: .1rem 0;
 }
 
 
@@ -245,4 +252,4 @@
   height: 1.5rem;
   margin: 0;
   background-color: var(--silver);
-}
+}