feat: Add isInvertedTheme param

This parameter is used to indicate to cozy-bar that it is in reverse theme (black, by default white). This commit allows with this condition to change the icon `icon-cozy-home.svg` by `icon-cozy-home-inverted.svg`
cozy · May 19, 2023 · d460806 · d460806
1 parent a0a2b6b
commit d460806
Show file tree

Hide file tree

Showing 10 changed files with 187 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -46,6 +46,8 @@ window.cozy.bar.init({
 - `lang` is extracted from the `lang` attribute of the `<html>` tag. Defaults to 'en'
 - `iconPath` uses the favicon 32px. Defaults to a blank GIF
 
+To make the icon of Cozy(`icon-cozy-home.svg`) compatible with an inverted theme, please set the parameter `isInvertedTheme` to `true`
+
 Help link
 ---
 Help link is defined in your Cozy's [configuration file](https://github.com/cozy/cozy-stack/blob/master/docs/config.md#main-configuration-file), in the `context` section. See the `cozy.example.yaml` file [provided by the stack](https://github.com/cozy/cozy-stack/blob/master/cozy.example.yaml#L80).

diff --git a/src/components/Apps/AppItem.jsx b/src/components/Apps/AppItem.jsx
@@ -1,13 +1,14 @@
 import React from 'react'
 import get from 'lodash/get'
-import { appShape } from 'proptypes/index'
-import { models } from 'cozy-client'
+import PropTypes from 'prop-types'
 
+import { models } from 'cozy-client'
 import AppIcon from 'cozy-ui/react/AppIcon'
 import AppLinker from 'cozy-ui/react/AppLinker'
+
 import HomeIcon from 'components/Apps/IconCozyHome'
+import { appShape } from 'proptypes/index'
 import stack from 'lib/stack'
-import PropTypes from 'prop-types'
 
 const getAppDisplayName = get(models, 'applications.getAppDisplayName', app => {
   return app.namePrefix && app.namePrefix.toLowerCase() !== 'cozy'
@@ -64,7 +65,13 @@ export class AppItem extends React.Component {
   }
 
   render() {
-    const { useHomeIcon, app, ariaHidden, tabIndex } = this.props
+    const {
+      useHomeIcon,
+      app,
+      ariaHidden,
+      tabIndex,
+      isInvertedTheme
+    } = this.props
 
     const dataIcon = app.slug ? `icon-${app.slug}` : ''
     const appName = getAppDisplayName(app)
@@ -92,7 +99,10 @@ export class AppItem extends React.Component {
                 aria-hidden={ariaHidden}
               >
                 {useHomeIcon ? (
-                  <HomeIcon className="coz-nav-apps-item-icon" />
+                  <HomeIcon
+                    className="coz-nav-apps-item-icon"
+                    isInvertedTheme={isInvertedTheme}
+                  />
                 ) : (
                   <AppIcon
                     app={app}
@@ -113,7 +123,11 @@ export class AppItem extends React.Component {
 
 AppItem.propTypes = {
   app: appShape.isRequired,
-  useHomeIcon: PropTypes.bool
+  useHomeIcon: PropTypes.bool,
+  ariaHidden: PropTypes.bool,
+  tabIndex: PropTypes.number,
+  isInvertedTheme: PropTypes.bool,
+  onAppSwitch: PropTypes.func
 }
 
 export default AppItem
diff --git a/src/components/Apps/AppNavButtons.jsx b/src/components/Apps/AppNavButtons.jsx
@@ -1,10 +1,11 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
-
-import { getHomeApp } from 'lib/reducers'
+import PropTypes from 'prop-types'
 
 import { translate } from 'cozy-ui/react/I18n'
 import Icon from 'cozy-ui/react/Icon'
+
+import { getHomeApp } from 'lib/reducers'
 import { isFetchingApps } from 'lib/reducers'
 import { ButtonCozyHome } from './ButtonCozyHome'
 
@@ -17,6 +18,7 @@ class AppNavButton extends Component {
       appNamePrefix,
       appSlug,
       iconPath,
+      isInvertedTheme,
       isFetchingApps,
       isPublic,
       opened,
@@ -50,7 +52,7 @@ class AppNavButton extends Component {
 
     return (
       <div className={`coz-nav-apps-btns${isHomeApp ? ' --currentHome' : ''}`}>
-        <ButtonCozyHome homeHref={homeHref} />
+        <ButtonCozyHome homeHref={homeHref} isInvertedTheme={isInvertedTheme} />
 
         {!isHomeApp && <span className="coz-nav-apps-btns-sep" />}
 
@@ -75,6 +77,23 @@ class AppNavButton extends Component {
   }
 }
 
+AppNavButton.propTypes = {
+  homeApp: PropTypes.shape({
+    isCurrentApp: PropTypes.bool,
+    slug: PropTypes.string,
+    href: PropTypes.string
+  }),
+  handleClick: PropTypes.func,
+  appName: PropTypes.string,
+  appNamePrefix: PropTypes.string,
+  appSlug: PropTypes.string,
+  iconPath: PropTypes.string,
+  isInvertedTheme: PropTypes.bool,
+  isFetchingApps: PropTypes.bool,
+  isPublic: PropTypes.bool,
+  opened: PropTypes.bool
+}
+
 const mapStateToProps = state => ({
   homeApp: getHomeApp(state),
   isFetchingApps: isFetchingApps(state)

diff --git a/src/components/Apps/AppsContent.jsx b/src/components/Apps/AppsContent.jsx
@@ -1,11 +1,11 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
-import Proptypes from 'prop-types'
+import PropTypes from 'prop-types'
 
 import { translate } from 'cozy-ui/react/I18n'
 import withBreakpoints from 'cozy-ui/react/helpers/withBreakpoints'
-import { getApps, getHomeApp, isFetchingApps } from 'lib/reducers'
 
+import { getApps, getHomeApp, isFetchingApps } from 'lib/reducers'
 import AppItem from 'components/Apps/AppItem'
 import AppItemPlaceholder from 'components/Apps/AppItemPlaceholder'
 import cozyIcon from 'assets/icons/16/icon-cozy-16.svg'
@@ -27,7 +27,8 @@ export class AppsContent extends Component {
       isFetchingApps,
       onAppSwitch,
       tabIndex,
-      ariaHidden
+      ariaHidden,
+      isInvertedTheme
     } = this.props
     const { isMobile } = breakpoints
     const isHomeApp = homeApp && homeApp.isCurrentApp
@@ -47,6 +48,7 @@ export class AppsContent extends Component {
               onAppSwitch={onAppSwitch}
               tabIndex={tabIndex}
               ariaHidden={ariaHidden}
+              isInvertedTheme={isInvertedTheme}
             />
           )}
           {isFetchingApps
@@ -63,6 +65,7 @@ export class AppsContent extends Component {
                     onAppSwitch={onAppSwitch}
                     tabIndex={tabIndex}
                     ariaHidden={ariaHidden}
+                    isInvertedTheme={isInvertedTheme}
                   />
                 ))}
         </ul>
@@ -88,12 +91,17 @@ AppsContent.defaultProps = {
 }
 
 AppsContent.propTypes = {
-  homeApp: Proptypes.shape({
-    isCurrentApp: Proptypes.bool,
-    slug: Proptypes.string
+  homeApp: PropTypes.shape({
+    isCurrentApp: PropTypes.bool,
+    slug: PropTypes.string,
+    href: PropTypes.string
   }),
-  apps: Proptypes.array,
-  isFetchingApps: Proptypes.bool.isRequired
+  apps: PropTypes.array,
+  isFetchingApps: PropTypes.bool.isRequired,
+  onAppSwitch: PropTypes.func,
+  tabIndex: PropTypes.number,
+  ariaHidden: PropTypes.bool,
+  isInvertedTheme: PropTypes.bool
 }
 const translateApp = t => app => {
   const namePrefix = app.namePrefix

diff --git a/src/components/Apps/ButtonCozyHome.jsx b/src/components/Apps/ButtonCozyHome.jsx
@@ -1,12 +1,18 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import flag from 'cozy-flags'
 import { isFlagshipApp } from 'cozy-device-helper'
 import { translate } from 'cozy-ui/react/I18n'
 
 import IconCozyHome from './IconCozyHome'
 
-const ButtonCozyHomeWithI18n = ({ webviewContext, homeHref, t }) => {
+const ButtonCozyHomeWithI18n = ({
+  webviewContext,
+  homeHref,
+  t,
+  isInvertedTheme
+}) => {
   if (isFlagshipApp() || flag('flagship.debug'))
     return (
       <a
@@ -18,11 +24,14 @@ const ButtonCozyHomeWithI18n = ({ webviewContext, homeHref, t }) => {
         aria-label={t('menu.home')}
         data-testid="ButtonCozyHome-flagship"
       >
-        <IconCozyHome className="coz-nav-apps-btns-home-svg" />
+        <IconCozyHome
+          className="coz-nav-apps-btns-home-svg"
+          isInvertedTheme={isInvertedTheme}
+        />
       </a>
     )
 
-  if (homeHref)
+  if (homeHref) {
     return (
       <a
         href={homeHref}
@@ -31,21 +40,34 @@ const ButtonCozyHomeWithI18n = ({ webviewContext, homeHref, t }) => {
         aria-label={t('menu.home')}
         data-testid="ButtonCozyHome-homeHref"
       >
-        <IconCozyHome className="coz-nav-apps-btns-home-svg" />
+        <IconCozyHome
+          className="coz-nav-apps-btns-home-svg"
+          isInvertedTheme={isInvertedTheme}
+        />
       </a>
     )
+  }
 
   return (
     <span
       className="coz-nav-apps-btns-home"
       aria-hidden="true"
       data-testid="ButtonCozyHome-span"
     >
-      <IconCozyHome className="coz-nav-apps-btns-home-svg" />
+      <IconCozyHome
+        className="coz-nav-apps-btns-home-svg"
+        isInvertedTheme={isInvertedTheme}
+      />
     </span>
   )
 }
 
+ButtonCozyHomeWithI18n.propTypes = {
+  webviewContext: PropTypes.object,
+  homeHref: PropTypes.string,
+  isInvertedTheme: PropTypes.bool
+}
+
 const ButtonCozyHome = translate()(ButtonCozyHomeWithI18n)
 
 export { ButtonCozyHome }
diff --git a/src/components/Apps/IconCozyHome.jsx b/src/components/Apps/IconCozyHome.jsx
@@ -1,4 +1,5 @@
 import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
 
 import AppIcon from 'cozy-ui/react/AppIcon'
 
@@ -7,9 +8,13 @@ import homeIcon from 'assets/sprites/icon-cozy-home.svg'
 
 class IconCozyHome extends PureComponent {
   render() {
-    const { className } = this.props
-    const fetchIcon = () =>
-      `${stack.get.cozyURL()}/assets/images/icon-cozy-home.svg`
+    const { className, isInvertedTheme } = this.props
+    const fetchIcon = () => {
+      if (isInvertedTheme) {
+        return `${stack.get.cozyURL()}/assets/images/icon-cozy-home-inverted.svg`
+      }
+      return `${stack.get.cozyURL()}/assets/images/icon-cozy-home.svg`
+    }
 
     return (
       <AppIcon
@@ -21,4 +26,9 @@ class IconCozyHome extends PureComponent {
   }
 }
 
+IconCozyHome.propTypes = {
+  className: PropTypes.string,
+  isInvertedTheme: PropTypes.bool
+}
+
 export default IconCozyHome
diff --git a/src/components/Apps/index.jsx b/src/components/Apps/index.jsx
@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 
 import AppsContent from 'components/Apps/AppsContent'
 import AppNavButtons from 'components/Apps/AppNavButtons'
@@ -45,7 +46,8 @@ class Apps extends Component {
       appNamePrefix,
       appSlug,
       iconPath,
-      isPublic
+      isPublic,
+      isInvertedTheme
     } = this.props
     const { opened } = this.state
     const tabIndex = opened ? 0 : -1
@@ -66,18 +68,33 @@ class Apps extends Component {
           handleClick={this.toggleMenu}
           opened={opened}
           isPublic={isPublic}
+          isInvertedTheme={isInvertedTheme}
         />
         <div
           className="coz-nav-pop coz-nav-pop--apps"
           id="coz-nav-pop--apps"
           aria-hidden={!opened}
           tabIndex={tabIndex}
         >
-          <AppsContent tabIndex={tabIndex} ariaHidden={!opened} />
+          <AppsContent
+            tabIndex={tabIndex}
+            ariaHidden={!opened}
+            isInvertedTheme={isInvertedTheme}
+          />
         </div>
       </nav>
     )
   }
 }
 
+Apps.propTypes = {
+  appName: PropTypes.string,
+  appNamePrefix: PropTypes.string,
+  appSlug: PropTypes.string,
+  iconPath: PropTypes.string,
+  replaceTitleOnMobile: PropTypes.bool,
+  isPublic: PropTypes.bool,
+  isInvertedTheme: PropTypes.bool
+}
+
 export default Apps