Merge pull request #473 from cozy/feat/custom-theme

 feat: Allow custom overrides in the theme

Author: drazik

src/components/Bar.jsx

@@ -180,6 +180,7 @@ class Bar extends Component {
     } = this.state
     const {
       theme,
+      themeOverrides,
       barLeft,
       barRight,
       barCenter,
@@ -189,8 +190,17 @@ class Bar extends Component {
       onLogOut,
       userActionRequired
     } = this.props
+
+    const { 
+      primaryColor: pColor, 
+      primaryContrastTextColor: pctColor 
+    } = themeOverrides
+    const pStyle = pColor ? { '--cozBarThemePrimaryColor': pColor } : { }
+    const pctStyle = pctColor ? { '--cozBarThemePrimaryContrastTextColor': pctColor } : { }
+    const themeStyle = { ...pStyle, ...pctStyle }
+
     return (
-      <div className={`coz-bar-wrapper coz-theme-${theme}`}>
+      <div className={`coz-bar-wrapper coz-theme-${theme}`} style={themeStyle}>
         <div id="cozy-bar-modal-dom-place" />
         <div className="coz-bar-container">
           {barLeft || this.renderLeft()}
@@ -229,7 +239,8 @@ class Bar extends Component {
 }
 
 const mapStateToProps = state => ({
-  theme: getTheme(state),
+  theme: getTheme(state).name,
+  themeOverrides: getTheme(state).overrides,
   barLeft: getContent(state, 'left'),
   barRight: getContent(state, 'right'),
   barCenter: getContent(state, 'center'),

src/index.jsx

@@ -252,18 +252,18 @@ APILocations.forEach(location => {
 })
 
 // setLocale API
-apiReferences.setLocale = lang => {
+apiReferences.setLocale = (...args) => {
   if (exposedAPI.setLocale) {
-    return exposedAPI.setLocale(lang)
+    return exposedAPI.setLocale(...args)
   } else {
     showAPIError('setLocale')
   }
 }
 
 // setTheme API
-apiReferences.setTheme = theme => {
+apiReferences.setTheme = (...args) => {
   if (exposedAPI.setTheme) {
-    return exposedAPI.setTheme(theme)
+    return exposedAPI.setTheme(...args)
   } else {
     showAPIError('setTheme')
   }

src/lib/api/index.js

@@ -82,12 +82,12 @@ export default store => {
     methods[getReactApiName(location)] = barContentComponent(store, location)
   })
 
-  methods.setLocale = lang => {
-    store.dispatch(setLocale(lang))
+  methods.setLocale = (...args) => {
+    store.dispatch(setLocale(...args))
   }
 
-  methods.setTheme = theme => {
-    store.dispatch(setTheme(theme))
+  methods.setTheme = (...args) => {
+    store.dispatch(setTheme(...args))
   }
 
   return methods

src/lib/reducers/theme.js

@@ -2,22 +2,43 @@ const SET_THEME = 'SET_THEME'
 const DEFAULT_THEME = 'default'
 const PRIMARY_THEME = 'primary'
 const THEMES = [DEFAULT_THEME, PRIMARY_THEME]
+const EMPTY_OVERRIDES = {}
 
-// action creator
-export const setTheme = theme => ({
+// Theme state is { name, overrides }
+// where both have the form described in `setTheme`
+const DEFAULT_STATE = {name: DEFAULT_THEME, overrides: EMPTY_OVERRIDES}
+
+/**
+ * Change the cozy-bar theme
+ * 
+ * Today, the value 'primary' will change the background color
+ * of the bar in the mobile view. It will then use the 
+ * `--primaryColor` CSS variable and the `--primaryContrastTextColor`
+ * for the text.
+ * 
+ * @function
+ * @param {String} name - either 'default' or 'primary'
+ * @param {Object} overrides - overrides of default values for the theme
+ *                             default to an empty object (no overrides)
+ *                             It will only overrides the values for the 
+ *                             'primary' specific theme/view
+ * @param {Object} overrides.primaryColor - the background color
+ * @param {Object} overrides.primaryContrastTextColor - the text color
+ * @returns {Object} action `{ type: SET_THEME, theme: {name, overrides} }
+ */
+export const setTheme = (name, overrides=EMPTY_OVERRIDES) => ({
   type: SET_THEME,
-  theme
+  theme: { name, overrides }
 })
 
-// reducer
-export const getDefaultTheme = () => DEFAULT_THEME
-
+export const getDefaultTheme = () => DEFAULT_STATE
+ 
 export const reducer = (state = getDefaultTheme(), action) => {
   if (action.type === SET_THEME) {
-    if (THEMES.includes(action.theme)) {
+    if (THEMES.includes(action.theme.name)) {
       return action.theme
     }
-    return DEFAULT_THEME
+    return {...action.theme, name: DEFAULT_THEME }
   } else {
     return state
   }

src/styles/theme.styl

@@ -1,5 +1,8 @@
+
 [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)
@@ -15,8 +18,8 @@
     [role=banner] .coz-bar-wrapper
         &.coz-theme-primary
             box-shadow inherit
-            background-color var(--primaryColor)
+            background-color var(--cozBarThemePrimaryColor)
 
             .coz-nav-apps-btns,
             .coz-bar-burger
-                color var(--primaryContrastTextColor)
+                color var(--cozBarThemePrimaryContrastTextColor)

test/components/Bar.spec.jsx

@@ -17,6 +17,7 @@ describe('Bar', () => {
       fetchApps: jest.fn().mockResolvedValue([]),
       fetchSettingsData: jest.fn().mockResolvedValue({}),
       theme: 'default',
+      themeOverrides: {},
       t: x => x
     }
   })
@@ -56,6 +57,13 @@ describe('Bar', () => {
     expect(toJson(root)).toMatchSnapshot()
   })
 
+  it('should change allow theme overrides', () => {
+    const root = shallow(
+      <Bar {...props} theme="primary" themeOverrides={{primaryColor: 'red'}} />
+    )
+    expect(toJson(root)).toMatchSnapshot()
+  })
+
   it('should display the Searchbar', () => {
     const root = shallow(
       <Bar {...props} currentApp="Cozy Drive" isPublic={false} />

test/components/__snapshots__/Bar.spec.jsx.snap

@@ -1,8 +1,61 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Bar should change allow theme overrides 1`] = `
+<div
+  className="coz-bar-wrapper coz-theme-primary"
+  style={
+    Object {
+      "--cozBarThemePrimaryColor": "red",
+    }
+  }
+>
+  <div
+    id="cozy-bar-modal-dom-place"
+  />
+  <div
+    className="coz-bar-container"
+  >
+    <button
+      className="coz-bar-btn coz-bar-burger"
+      data-tutorial="apps-mobile"
+      onClick={[Function]}
+      type="button"
+    >
+      <Icon
+        height={16}
+        icon="test-file-stub"
+        spin={false}
+        width={16}
+      />
+      <span
+        className="coz-bar-hidden"
+      >
+        drawer
+      </span>
+    </button>
+    <Apps />
+    <div
+      className="u-flex-grow"
+    />
+    <Wrapper
+      toggleSupport={[Function]}
+    />
+    <Connect(Drawer)
+      drawerListener={[Function]}
+      isClaudyLoading={false}
+      onClaudy={false}
+      onClose={[Function]}
+      toggleSupport={[Function]}
+      visible={false}
+    />
+  </div>
+</div>
+`;
+
 exports[`Bar should change theme 1`] = `
 <div
   className="coz-bar-wrapper coz-theme-primary"
+  style={Object {}}
 >
   <div
     id="cozy-bar-modal-dom-place"
@@ -50,6 +103,7 @@ exports[`Bar should change theme 1`] = `
 exports[`Bar should display the Searchbar 1`] = `
 <div
   className="coz-bar-wrapper coz-theme-default"
+  style={Object {}}
 >
   <div
     id="cozy-bar-modal-dom-place"
@@ -101,6 +155,7 @@ exports[`Bar should display the Searchbar 1`] = `
 exports[`Bar should not display searchbar if we are not on  a public page 1`] = `
 <div
   className="coz-bar-wrapper coz-theme-default"
+  style={Object {}}
 >
   <div
     id="cozy-bar-modal-dom-place"
@@ -121,6 +176,7 @@ exports[`Bar should not display searchbar if we are not on  a public page 1`] =
 exports[`Bar should not display searchbar if we are not on Cozy Drive 1`] = `
 <div
   className="coz-bar-wrapper coz-theme-default"
+  style={Object {}}
 >
   <div
     id="cozy-bar-modal-dom-place"
@@ -170,6 +226,7 @@ exports[`Bar should not display searchbar if we are not on Cozy Drive 1`] = `
 exports[`Bar should not display searchbar if we are on mobile 1`] = `
 <div
   className="coz-bar-wrapper coz-theme-default"
+  style={Object {}}
 >
   <div
     id="cozy-bar-modal-dom-place"

test/lib/api.spec.js

@@ -114,10 +114,16 @@ describe('api spec', function() {
   it('should set theme', function() {
     const { setTheme } = api
     // default theme is `default`
-    expect(store.getState().theme).toBe('default')
+    expect(store.getState().theme.name).toBe('default')
+    expect(store.getState().theme.overrides).toEqual({})
     setTheme('primary')
-    expect(store.getState().theme).toBe('primary')
+    expect(store.getState().theme.name).toBe('primary')
+    expect(store.getState().theme.overrides).toEqual({})
+    setTheme('primary', { primaryColor: 'red' })
+    expect(store.getState().theme.name).toBe('primary')
+    expect(store.getState().theme.overrides).toEqual({ primaryColor: 'red' })
     setTheme('wrongTheme')
-    expect(store.getState().theme).toBe('default')
+    expect(store.getState().theme.name).toBe('default')
+    expect(store.getState().theme.overrides).toEqual({})
   })
 })