Merge pull request #2104 from tf/nav-palette-color

Accent color palettes for default navigation
codevise · May 7, 2024 · a64bcd7 · a64bcd7
2 parents 7e6605e + ad7d15b
commit a64bcd7
Show file tree

Hide file tree

Showing 10 changed files with 129 additions and 9 deletions.
diff --git a/entry_types/scrolled/config/locales/new/nav-palette-color.de.yml b/entry_types/scrolled/config/locales/new/nav-palette-color.de.yml
@@ -0,0 +1,8 @@
+de:
+  pageflow:
+    editor:
+      widgets:
+        attributes:
+          defaultNavigation:
+            accentColor:
+              label: "Akzentfarbe"
diff --git a/entry_types/scrolled/config/locales/new/nav-palette-color.en.yml b/entry_types/scrolled/config/locales/new/nav-palette-color.en.yml
@@ -0,0 +1,8 @@
+en:
+  pageflow:
+    editor:
+      widgets:
+        attributes:
+          defaultNavigation:
+            accentColor:
+              label: "Accent color"
diff --git a/entry_types/scrolled/package/spec/editor/models/ScrolledEntry-spec.js b/entry_types/scrolled/package/spec/editor/models/ScrolledEntry-spec.js
@@ -3114,6 +3114,57 @@ describe('ScrolledEntry', () => {
       expect(values).toEqual(['brand-blue', 'brand-green']);
     });
 
+    it('supports named palettes', () => {
+      const entry = factories.entry(
+        ScrolledEntry,
+        {},
+        {
+          entryTypeSeed: normalizeSeed({
+            themeOptions: {
+              properties: {
+                root: {
+                  paletteColorBrandBlue: '#00f',
+                  paletteColorBrandGreen: '#0f0',
+                  paletteColorAccentColor: '#123)'
+                }
+              },
+              palettes: {
+                brandColors: ['brandBlue', 'brand_green']
+              }
+            }
+          })
+        }
+      );
+
+      const [values] = entry.getPaletteColors({name: 'brandColors'});
+
+      expect(values).toEqual(['brand-blue', 'brand-green']);
+    });
+
+    it('returns empty array if named palette is missing', () => {
+      const entry = factories.entry(
+        ScrolledEntry,
+        {},
+        {
+          entryTypeSeed: normalizeSeed({
+            themeOptions: {
+              properties: {
+                root: {
+                  paletteColorBrandBlue: '#00f',
+                  paletteColorBrandGreen: '#0f0',
+                  paletteColorAccentColor: '#123)'
+                }
+              }
+            }
+          })
+        }
+      );
+
+      const [values] = entry.getPaletteColors({name: 'brandColors'});
+
+      expect(values).toEqual([]);
+    });
+
     describe('with shared translations', () => {
       const commonPrefix = 'pageflow_scrolled.editor.palette_colors'
 

diff --git a/entry_types/scrolled/package/spec/widgets/defaultNavigation/Defaultnavigation-spec.js b/entry_types/scrolled/package/spec/widgets/defaultNavigation/Defaultnavigation-spec.js
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import {DefaultNavigation} from 'widgets/defaultNavigation/DefaultNavigation';
+
+import {renderInEntry} from 'pageflow-scrolled/testHelpers';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('DefaultNavigation', () => {
+  it('does not have style attribute on header by default', async () => {
+    const {container} = renderInEntry(
+      <DefaultNavigation configuration={{}} />
+    );
+
+    expect(container.querySelector('header')).not.toHaveAttribute('style');
+  });
+
+  it('supports overriding accent color', async () => {
+    const {container} = renderInEntry(
+      <DefaultNavigation configuration={{accentColor: 'brand-blue'}} />
+    );
+
+    expect(container.querySelector('header')).toHaveStyle(
+      {'--theme-accent-color': 'var(--theme-palette-color-brand-blue)'
+    });
+  });
+});
diff --git a/entry_types/scrolled/package/src/editor/config.js b/entry_types/scrolled/package/src/editor/config.js
@@ -11,6 +11,7 @@ import {SideBarController} from './controllers/SideBarController';
 
 import {browser} from 'pageflow/frontend';
 import {CheckBoxInputView, ConfigurationEditorView} from 'pageflow/ui';
+import {ColorSelectInputView} from './views/inputs/ColorSelectInputView';
 import {BrowserNotSupportedView} from './views/BrowserNotSupportedView';
 
 editor.registerEntryType('scrolled', {
@@ -53,7 +54,20 @@ editor.widgetTypes.registerRole('header', {
 editor.widgetTypes.register('defaultNavigation', {
   configurationEditorView: ConfigurationEditorView.extend({
     configure: function() {
+      const [values, texts] = this.options.entry.getPaletteColors({name: 'accentColors'});
+
       this.tab('defaultNavigation', function() {
+        if (values.length) {
+          this.input('accentColor', ColorSelectInputView, {
+            includeBlank: true,
+            blankTranslationKey: 'pageflow_scrolled.editor.' +
+                                 'common_content_element_attributes.' +
+                                 'palette_color.blank',
+            values,
+            texts,
+          });
+        }
+
         this.input('hideToggleMuteButton', CheckBoxInputView);
         this.input('hideSharingButton', CheckBoxInputView);
         this.input('fixedOnDesktop', CheckBoxInputView);

diff --git a/entry_types/scrolled/package/src/editor/models/ScrolledEntry/index.js b/entry_types/scrolled/package/src/editor/models/ScrolledEntry/index.js
@@ -197,11 +197,15 @@ export const ScrolledEntry = Entry.extend({
     return [values, texts]
   },
 
-  getPaletteColors() {
-    const values = Object.keys(
-      this.scrolledSeed.config.theme.options.properties?.root || {}
-    ).filter(
-      key => key.indexOf('paletteColor') === 0
+  getPaletteColors({name} = {}) {
+    const themeOptions = this.scrolledSeed.config.theme.options
+
+    const values = (
+      name ?
+      (themeOptions.palettes?.[name] || []) :
+      Object.keys(themeOptions.properties?.root || {}).filter(
+        key => key.indexOf('paletteColor') === 0
+      )
     ).map(
       key => dasherize(key.replace('paletteColor', ''))
     );
@@ -229,7 +233,7 @@ export const ScrolledEntry = Entry.extend({
 function dasherize(text) {
   return (
     text[0] +
-    text.slice(1).replace(/[A-Z]/g, match => `-${match}`)
+    text.slice(1).replace('_', '-').replace(/[A-Z]/g, match => `-${match}`)
   ).toLowerCase();
 }
 

diff --git a/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.js b/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.js
@@ -3,6 +3,7 @@ import classNames from 'classnames';
 
 import {
   Widget,
+  paletteColor,
   useScrollPosition,
   useChapters,
   useCurrentChapter,
@@ -125,7 +126,7 @@ export function DefaultNavigation({configuration}) {
         !mobileNavHidden
       ),
       [styles.hasChapters]: hasChapters
-    })}>
+    })} style={{'--theme-accent-color': paletteColor(configuration.accentColor)}}>
       <div className={styles.navigationBarContentWrapper}>
         {hasChapters && <HamburgerIcon onClick={handleBurgerMenuClick}
                                        mobileNavHidden={mobileNavHidden}/>}

diff --git a/package/spec/editor/views/EditWidgetView-spec.js b/package/spec/editor/views/EditWidgetView-spec.js
@@ -8,13 +8,18 @@ describe('EditWidgetView', () => {
   var f = support.factories;
 
   it('renders widget configuration editor', () => {
+    var entry = f.entry({id: 25});
     var widgetTypes = f.widgetTypes([
       {name: 'default_bar', role: 'navigation'},
       {name: 'fancy_bar', role: 'navigation'}
     ], function(w) {
       w.register('fancy_bar', {
         configurationEditorView: Backbone.View.extend({
-          className: 'edit_fancy_bar'
+          className: 'edit_fancy_bar',
+
+          initialize() {
+            this.$el.attr('data-entry-id', this.options.entry.id)
+          }
         })
       });
     });
@@ -24,11 +29,12 @@ describe('EditWidgetView', () => {
     }, {widgetTypes: widgetTypes});
     var view = new EditWidgetView({
       model: widget,
+      entry,
       widgetTypes: widgetTypes
     });
 
     view.render();
 
-    expect(view.$el.find('.edit_fancy_bar').length).toBe(1);
+    expect(view.$el.find('.edit_fancy_bar[data-entry-id=25]').length).toBe(1);
   });
 });
diff --git a/package/src/editor/controllers/SidebarController.js b/package/src/editor/controllers/SidebarController.js
@@ -78,6 +78,7 @@ export const SidebarController = Marionette.Controller.extend({
 
   widget: function(id) {
     this.region.show(new EditWidgetView({
+      entry: this.entry,
       model: this.entry.widgets.get(id)
     }));
   },

diff --git a/package/src/editor/views/EditWidgetView.js b/package/src/editor/views/EditWidgetView.js
@@ -26,6 +26,7 @@ export const EditWidgetView = Marionette.ItemView.extend({
   onRender: function() {
     var configurationEditor = this.model.widgetType().createConfigurationEditorView({
       model: this.model.configuration,
+      entry: this.options.entry,
       tab: this.options.tab
     });