diff --git a/entry_types/scrolled/package/spec/editor/models/ScrolledEntry-spec.js b/entry_types/scrolled/package/spec/editor/models/ScrolledEntry-spec.js index a414c9542..699e18f63 100644 --- 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/src/editor/models/ScrolledEntry/index.js b/entry_types/scrolled/package/src/editor/models/ScrolledEntry/index.js index 7853aec4d..9d7ec14f1 100644 --- 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(); }