From 4202fa7e90256539c3f8ec51bfc69f3ebb151ebf Mon Sep 17 00:00:00 2001 From: Kasia Biernat-Kluba <1268696+kathrine0@users.noreply.github.com> Date: Mon, 9 Sep 2024 14:45:43 +0200 Subject: [PATCH] AAE-24927 update widgets schema & predefined theme (#10185) * AAE-24927 update widgets schema * AAE-24927 predefined theme * update theme model and tests * exclude flaky test --- e2e/protractor.excludes.json | 3 +- .../lib/form/components/widgets/core/index.ts | 1 + .../widgets/core/predefined-theme.ts | 117 ++++++++++++++++++ .../components/widgets/core/theme.model.ts | 30 ++++- .../widgets/core/widget-schema.model.ts | 2 +- .../display-text/display-text.schema.ts | 18 +-- .../widgets/header/header.schema.ts | 18 +-- .../lib/form/pipes/field-style.pipe.spec.ts | 30 +++-- .../src/lib/form/pipes/field-style.pipe.ts | 16 ++- lib/core/src/lib/i18n/en.json | 41 ++++-- .../form/components/form-cloud.component.html | 4 +- .../radio-buttons-cloud.schema.ts | 22 ++-- 12 files changed, 239 insertions(+), 63 deletions(-) create mode 100644 lib/core/src/lib/form/components/widgets/core/predefined-theme.ts diff --git a/e2e/protractor.excludes.json b/e2e/protractor.excludes.json index 981820349c..74464502c2 100644 --- a/e2e/protractor.excludes.json +++ b/e2e/protractor.excludes.json @@ -44,5 +44,6 @@ "C282017": "https://hyland.atlassian.net/browse/ACS-7960", "C282010": "https://hyland.atlassian.net/browse/ACS-7960", "C261046": "https://hyland.atlassian.net/browse/ACS-7960", - "C286508": "https://hyland.atlassian.net/browse/ACS-8733" + "C286508": "https://hyland.atlassian.net/browse/ACS-8733", + "C286509": "https://hyland.atlassian.net/browse/ACS-8760" } diff --git a/lib/core/src/lib/form/components/widgets/core/index.ts b/lib/core/src/lib/form/components/widgets/core/index.ts index 2d56777c1e..ac251bf4c0 100644 --- a/lib/core/src/lib/form/components/widgets/core/index.ts +++ b/lib/core/src/lib/form/components/widgets/core/index.ts @@ -46,3 +46,4 @@ export * from './form-field-utils'; export * from './form-field-variable-options'; export * from './widget-schema.model'; export * from './theme.model'; +export * from './predefined-theme'; diff --git a/lib/core/src/lib/form/components/widgets/core/predefined-theme.ts b/lib/core/src/lib/form/components/widgets/core/predefined-theme.ts new file mode 100644 index 0000000000..33f380f961 --- /dev/null +++ b/lib/core/src/lib/form/components/widgets/core/predefined-theme.ts @@ -0,0 +1,117 @@ +/*! + * @license + * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { PredefinedThemeModel } from './theme.model'; + +export const predefinedTheme: PredefinedThemeModel = { + widgets: { + 'readonly-text': { + normal: { + name: 'FORM.FIELD_STYLE.PREDEFINED.READONLY_TEXT.NORMAL', + styles: { + '--adf-readonly-text-font-size': '16px', + '--adf-readonly-text-font-weight': 'normal', + '--adf-readonly-text-color': 'inherit' + } + }, + strong: { + name: 'FORM.FIELD_STYLE.PREDEFINED.READONLY_TEXT.STRONG', + styles: { + '--adf-readonly-text-font-size': '16px', + '--adf-readonly-text-font-weight': 'bold', + '--adf-readonly-text-color': 'inherit' + } + }, + heading: { + name: 'FORM.FIELD_STYLE.PREDEFINED.READONLY_TEXT.HEADING', + styles: { + '--adf-readonly-text-font-size': '20px', + '--adf-readonly-text-font-weight': 'normal', + '--adf-readonly-text-color': 'inherit' + } + }, + title: { + name: 'FORM.FIELD_STYLE.PREDEFINED.READONLY_TEXT.TITLE', + styles: { + '--adf-readonly-text-font-size': '24px', + '--adf-readonly-text-font-weight': 'normal', + '--adf-readonly-text-color': 'inherit' + } + }, + annotation: { + name: 'FORM.FIELD_STYLE.PREDEFINED.READONLY_TEXT.ANNOTATION', + styles: { + '--adf-readonly-text-font-size': '12px', + '--adf-readonly-text-font-weight': 'normal', + '--adf-readonly-text-color': 'inherit' + } + } + }, + group: { + normal: { + name: 'FORM.FIELD_STYLE.PREDEFINED.HEADER.NORMAL', + styles: { + '--adf-header-font-size': '16px', + '--adf-header-font-weight': 'normal', + '--adf-header-color': 'inherit' + } + }, + heading: { + name: 'FORM.FIELD_STYLE.PREDEFINED.HEADER.HEADING', + styles: { + '--adf-header-font-size': '20px', + '--adf-header-font-weight': 'normal', + '--adf-header-color': 'inherit' + } + }, + title: { + name: 'FORM.FIELD_STYLE.PREDEFINED.HEADER.TITLE', + styles: { + '--adf-header-font-size': '24px', + '--adf-header-font-weight': 'normal', + '--adf-header-color': 'inherit' + } + } + }, + 'radio-buttons': { + normal: { + name: 'FORM.FIELD_STYLE.PREDEFINED.RADIO_BUTTONS.NORMAL', + styles: { + '--adf-radio-buttons-font-size': '16px', + '--adf-radio-buttons-font-weight': 'normal', + '--adf-radio-buttons-color': 'inherit' + } + }, + strong: { + name: 'FORM.FIELD_STYLE.PREDEFINED.RADIO_BUTTONS.STRONG', + styles: { + '--adf-radio-buttons-font-size': '16px', + '--adf-radio-buttons-font-weight': 'bold', + '--adf-radio-buttons-color': 'inherit' + } + }, + heading: { + name: 'FORM.FIELD_STYLE.PREDEFINED.RADIO_BUTTONS.HEADING', + styles: { + '--adf-radio-buttons-font-size': '20px', + '--adf-radio-buttons-font-weight': 'normal', + '--adf-radio-buttons-color': 'inherit' + } + } + } + } +}; diff --git a/lib/core/src/lib/form/components/widgets/core/theme.model.ts b/lib/core/src/lib/form/components/widgets/core/theme.model.ts index 71945e1561..3aea5e6b9f 100644 --- a/lib/core/src/lib/form/components/widgets/core/theme.model.ts +++ b/lib/core/src/lib/form/components/widgets/core/theme.model.ts @@ -35,18 +35,21 @@ export interface ThemeModel { }; widgets?: { ['readonly-text']?: { - [styleName: string]: { - [variable in ReadonlyTextThemeVariable]?: string; + [styleKey: string]: { + name: string; + styles: { [variable in ReadonlyTextThemeVariable]?: string }; }; }; ['group']?: { - [styleName: string]: { - [variable in HeaderThemeVariable]?: string; + [styleKey: string]: { + name: string; + styles: { [variable in HeaderThemeVariable]?: string }; }; }; ['radio-buttons']?: { - [styleName: string]: { - [variable in RadioButtonsThemeVariable]?: string; + [styleKey: string]: { + name: string; + styles: { [variable in RadioButtonsThemeVariable]?: string }; }; }; }; @@ -54,3 +57,18 @@ export interface ThemeModel { [widgetType in SupportedWidgetType]?: string; }; } + +export interface WidgetSchemaPredefinedStyle { + [styleKey: string]: { + name: string; + styles: { [key in TFieldVariable]?: string }; + }; +} + +export interface PredefinedThemeModel { + widgets?: { + ['readonly-text']?: WidgetSchemaPredefinedStyle; + ['group']?: WidgetSchemaPredefinedStyle; + ['radio-buttons']?: WidgetSchemaPredefinedStyle; + }; +} diff --git a/lib/core/src/lib/form/components/widgets/core/widget-schema.model.ts b/lib/core/src/lib/form/components/widgets/core/widget-schema.model.ts index a3e956acbc..2e920bbe51 100644 --- a/lib/core/src/lib/form/components/widgets/core/widget-schema.model.ts +++ b/lib/core/src/lib/form/components/widgets/core/widget-schema.model.ts @@ -19,7 +19,7 @@ import { FormThemeVariable } from './theme.model'; export type WidgetStylePropertySelector = 'number' | 'options' | 'colorOptions'; -export interface WidgetSchemaModel { +export interface WidgetSchemaModel { themeProperties: WidgetSchemaThemeProperty[]; } diff --git a/lib/core/src/lib/form/components/widgets/display-text/display-text.schema.ts b/lib/core/src/lib/form/components/widgets/display-text/display-text.schema.ts index bdef31b715..36ae4a7455 100644 --- a/lib/core/src/lib/form/components/widgets/display-text/display-text.schema.ts +++ b/lib/core/src/lib/form/components/widgets/display-text/display-text.schema.ts @@ -37,11 +37,11 @@ export const displayTextSchema: WidgetSchemaModel = { type: 'options', options: [ { - name: 'FORM.FIELD_STYLE.REGULAR', + name: 'FORM.FIELD_STYLE.FONT_WEIGHTS.REGULAR', value: 'normal' }, { - name: 'FORM.FIELD_STYLE.BOLD', + name: 'FORM.FIELD_STYLE.FONT_WEIGHTS.BOLD', value: 'bold' } ], @@ -55,31 +55,31 @@ export const displayTextSchema: WidgetSchemaModel = { type: 'colorOptions', options: [ { - name: 'FORM.FIELD_STYLE.SYSTEM_COLOR', + name: 'FORM.FIELD_STYLE.COLORS.SYSTEM_COLOR', value: 'inherit' }, { - name: 'FORM.FIELD_STYLE.BLACK', + name: 'FORM.FIELD_STYLE.COLORS.BLACK', value: '#000000' }, { - name: 'FORM.FIELD_STYLE.GREY', + name: 'FORM.FIELD_STYLE.COLORS.GREY', value: '#9CA3AF' }, { - name: 'FORM.FIELD_STYLE.RED', + name: 'FORM.FIELD_STYLE.COLORS.RED', value: '#DA1500' }, { - name: 'FORM.FIELD_STYLE.GREEN', + name: 'FORM.FIELD_STYLE.COLORS.GREEN', value: '#04A003' }, { - name: 'FORM.FIELD_STYLE.BLUE', + name: 'FORM.FIELD_STYLE.COLORS.BLUE', value: '#0A60CE' }, { - name: 'FORM.FIELD_STYLE.YELLOW', + name: 'FORM.FIELD_STYLE.COLORS.YELLOW', value: '#FACC15' } ], diff --git a/lib/core/src/lib/form/components/widgets/header/header.schema.ts b/lib/core/src/lib/form/components/widgets/header/header.schema.ts index a631f36100..da8d40d032 100644 --- a/lib/core/src/lib/form/components/widgets/header/header.schema.ts +++ b/lib/core/src/lib/form/components/widgets/header/header.schema.ts @@ -37,11 +37,11 @@ export const headerSchema: WidgetSchemaModel = { type: 'options', options: [ { - name: 'FORM.FIELD_STYLE.REGULAR', + name: 'FORM.FIELD_STYLE.FONT_WEIGHTS.REGULAR', value: 'normal' }, { - name: 'FORM.FIELD_STYLE.BOLD', + name: 'FORM.FIELD_STYLE.FONT_WEIGHTS.BOLD', value: 'bold' } ], @@ -55,31 +55,31 @@ export const headerSchema: WidgetSchemaModel = { type: 'colorOptions', options: [ { - name: 'FORM.FIELD_STYLE.SYSTEM_COLOR', + name: 'FORM.FIELD_STYLE.COLORS.SYSTEM_COLOR', value: 'inherit' }, { - name: 'FORM.FIELD_STYLE.BLACK', + name: 'FORM.FIELD_STYLE.COLORS.BLACK', value: '#000000' }, { - name: 'FORM.FIELD_STYLE.GREY', + name: 'FORM.FIELD_STYLE.COLORS.GREY', value: '#9CA3AF' }, { - name: 'FORM.FIELD_STYLE.RED', + name: 'FORM.FIELD_STYLE.COLORS.RED', value: '#DA1500' }, { - name: 'FORM.FIELD_STYLE.GREEN', + name: 'FORM.FIELD_STYLE.COLORS.GREEN', value: '#04A003' }, { - name: 'FORM.FIELD_STYLE.BLUE', + name: 'FORM.FIELD_STYLE.COLORS.BLUE', value: '#0A60CE' }, { - name: 'FORM.FIELD_STYLE.YELLOW', + name: 'FORM.FIELD_STYLE.COLORS.YELLOW', value: '#FACC15' } ], diff --git a/lib/core/src/lib/form/pipes/field-style.pipe.spec.ts b/lib/core/src/lib/form/pipes/field-style.pipe.spec.ts index f548f75187..eb3d6c166d 100644 --- a/lib/core/src/lib/form/pipes/field-style.pipe.spec.ts +++ b/lib/core/src/lib/form/pipes/field-style.pipe.spec.ts @@ -23,20 +23,30 @@ const mockTheme: ThemeModel = { widgets: { 'readonly-text': { 'my-custom-display-text': { - '--adf-readonly-text-font-size': '12px', - '--adf-readonly-text-font-weight': 'normal', - '--adf-readonly-text-color': '#000000' + name: 'My Custom Display Text', + styles: { + '--adf-readonly-text-font-size': '12px', + '--adf-readonly-text-font-weight': 'normal', + '--adf-readonly-text-color': '#000000' + } }, 'my-custom-display-text2': { - '--adf-readonly-text-font-size': '15px', - '--adf-readonly-text-color': 'green' + name: 'My Custom Display Text 2', + styles: { + '--adf-readonly-text-font-size': '15px', + '--adf-readonly-text-font-weight': 'normal', + '--adf-readonly-text-color': 'green' + } } }, 'radio-buttons': { - 'my-custom-radio-buttons2': { - '--adf-radio-buttons-font-size': '15px', - '--adf-radio-buttons-font-weight': 'normal', - '--adf-radio-buttons-color': 'green' + 'my-custom-radio-buttons': { + name: 'My Custom Radio Buttons', + styles: { + '--adf-radio-buttons-font-size': '12px', + '--adf-radio-buttons-font-weight': 'normal', + '--adf-radio-buttons-color': '#000000' + } } } } @@ -59,7 +69,7 @@ describe('FieldStylePipe', () => { }; const result = pipe.transform(field as FormFieldModel); - expect(result).toEqual('--adf-readonly-text-font-size: 12px;--adf-readonly-text-font-weight: normal;--adf-readonly-text-color: #000000'); + expect(result).toEqual('--adf-readonly-text-font-size:12px;--adf-readonly-text-font-weight:normal;--adf-readonly-text-color:#000000;'); }); it('should return empty string when style name is not provided', () => { diff --git a/lib/core/src/lib/form/pipes/field-style.pipe.ts b/lib/core/src/lib/form/pipes/field-style.pipe.ts index fe22dcc1e2..310f0ed423 100644 --- a/lib/core/src/lib/form/pipes/field-style.pipe.ts +++ b/lib/core/src/lib/form/pipes/field-style.pipe.ts @@ -18,6 +18,7 @@ import { Pipe, PipeTransform } from '@angular/core'; import { FormFieldModel } from '../components/widgets/core/form-field.model'; import { ContainerModel } from '../components/widgets/core/container.model'; +import { predefinedTheme } from '../components/widgets/core/predefined-theme'; @Pipe({ name: 'adfFieldStyle', @@ -25,15 +26,20 @@ import { ContainerModel } from '../components/widgets/core/container.model'; }) export class FieldStylePipe implements PipeTransform { transform(field: FormFieldModel | ContainerModel): string { - const theme = field.form?.theme?.widgets[field.type]; - const style = field.style && theme?.[field.style]; + if (!field.style) { + return ''; + } - return style ? this.flattenStyles(style) : ''; + const themeStyle = field.form?.theme?.widgets[field.type]?.[field.style]; + const predefinedThemeStyle = predefinedTheme.widgets[field.type]?.[field.style]; + const styles = (themeStyle || predefinedThemeStyle)?.styles; + + return styles ? this.flattenStyles(styles) : ''; } private flattenStyles(styles: { [key: string]: string }): string { return Object.entries(styles) - .map(([key, value]) => `${key}: ${value}`) - .join(';'); + .map(([key, value]) => `${key}:${value};`) + .join(''); } } diff --git a/lib/core/src/lib/i18n/en.json b/lib/core/src/lib/i18n/en.json index f5b1cbff20..24547c75ea 100644 --- a/lib/core/src/lib/i18n/en.json +++ b/lib/core/src/lib/i18n/en.json @@ -75,15 +75,38 @@ "FONT_SIZE": "Font size", "FONT_WEIGHT": "Font weight", "FONT_COLOR": "Font color", - "REGULAR": "Regular", - "BOLD": "Bold", - "SYSTEM_COLOR": "System color", - "BLACK": "Black", - "GREY": "Grey", - "RED": "Red", - "GREEN": "Green", - "BLUE": "Blue", - "YELLOW": "Yellow" + "FONT_WEIGHTS": { + "REGULAR": "Regular", + "BOLD": "Bold" + }, + "COLORS": { + "SYSTEM_COLOR": "System color", + "BLACK": "Black", + "GREY": "Grey", + "RED": "Red", + "GREEN": "Green", + "BLUE": "Blue", + "YELLOW": "Yellow" + }, + "PREDEFINED": { + "HEADER": { + "NORMAL": "normal", + "HEADING": "heading", + "TITLE": "title" + }, + "RADIO_BUTTONS": { + "NORMAL": "normal", + "STRONG": "strong", + "HEADING": "heading" + }, + "READONLY_TEXT": { + "NORMAL": "normal", + "STRONG": "strong", + "HEADING": "heading", + "TITLE": "title", + "ANNOTATION": "annotation" + } + } } }, "CORE": { diff --git a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html index fce3425149..8195e19b0c 100644 --- a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html +++ b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.html @@ -53,8 +53,8 @@ refresh - - {{form.taskName}} + {{form.taskName}} {{'FORM.FORM_RENDERER.NAMELESS_TASK' | translate}} diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.schema.ts b/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.schema.ts index 418700506b..3b7ea4fcaa 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.schema.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.schema.ts @@ -15,9 +15,9 @@ * limitations under the License. */ -import { WidgetSchemaModel, RadioButtonsThemeVariable } from '@alfresco/adf-core'; +import { RadioButtonsThemeVariable, WidgetSchemaModel } from '@alfresco/adf-core'; -export const displayTextSchema: WidgetSchemaModel = { +export const radioButtonsSchema: WidgetSchemaModel = { themeProperties: [ { name: 'FORM.FIELD_STYLE.FONT_SIZE', @@ -36,11 +36,11 @@ export const displayTextSchema: WidgetSchemaModel = { type: 'options', options: [ { - name: 'FORM.FIELD_STYLE.REGULAR', + name: 'FORM.FIELD_STYLE.FONT_WEIGHTS.REGULAR', value: 'normal' }, { - name: 'FORM.FIELD_STYLE.BOLD', + name: 'FORM.FIELD_STYLE.FONT_WEIGHTS.BOLD', value: 'bold' } ], @@ -54,31 +54,31 @@ export const displayTextSchema: WidgetSchemaModel = { type: 'colorOptions', options: [ { - name: 'FORM.FIELD_STYLE.SYSTEM_COLOR', + name: 'FORM.FIELD_STYLE.COLORS.SYSTEM_COLOR', value: 'inherit' }, { - name: 'FORM.FIELD_STYLE.BLACK', + name: 'FORM.FIELD_STYLE.COLORS.BLACK', value: '#000000' }, { - name: 'FORM.FIELD_STYLE.GREY', + name: 'FORM.FIELD_STYLE.COLORS.GREY', value: '#9CA3AF' }, { - name: 'FORM.FIELD_STYLE.RED', + name: 'FORM.FIELD_STYLE.COLORS.RED', value: '#DA1500' }, { - name: 'FORM.FIELD_STYLE.GREEN', + name: 'FORM.FIELD_STYLE.COLORS.GREEN', value: '#04A003' }, { - name: 'FORM.FIELD_STYLE.BLUE', + name: 'FORM.FIELD_STYLE.COLORS.BLUE', value: '#0A60CE' }, { - name: 'FORM.FIELD_STYLE.YELLOW', + name: 'FORM.FIELD_STYLE.COLORS.YELLOW', value: '#FACC15' } ],