style: Fix several styling issues (#16381)

The following styling issues are fixed: * CXSPA-896: Fix line break * CXSPA-896: Fix styles for conflict groups for intervals * CXSPA-896: Fix suggestion box style * CXSPA-896: Fix conflict navigation link style
SAP · Nov 8, 2022 · 47893b9 · 47893b9
1 parent d64708f
commit 47893b9
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 9 deletions.
diff --git a/...lebased/components/conflict-suggestion/configurator-conflict-suggestion.component.spec.ts b/...lebased/components/conflict-suggestion/configurator-conflict-suggestion.component.spec.ts
@@ -37,7 +37,7 @@ describe('ConfigurationConflictSuggestionComponent', () => {
     expect(component).toBeDefined();
   });
 
-  it('should return true for conflict group with more than one attribute', () => {
+  it('should return true for conflict group with at least one attribute', () => {
     const conflictGroup1: Configurator.Group = {
       ...ConfiguratorTestUtils.createGroup('1'),
       groupType: Configurator.GroupType.CONFLICT_GROUP,
@@ -48,7 +48,7 @@ describe('ConfigurationConflictSuggestionComponent', () => {
       groupType: Configurator.GroupType.CONFLICT_GROUP,
       attributes: [{ name: '1' }],
     };
-    expect(component.displayConflictSuggestion(conflictGroup2)).toBe(false);
+    expect(component.displayConflictSuggestion(conflictGroup2)).toBe(true);
     const conflictGroup3 = {
       ...ConfiguratorTestUtils.createGroup('3'),
 

diff --git a/...or/rulebased/components/conflict-suggestion/configurator-conflict-suggestion.component.ts b/...or/rulebased/components/conflict-suggestion/configurator-conflict-suggestion.component.ts
@@ -39,7 +39,7 @@ export class ConfiguratorConflictSuggestionComponent {
   displayConflictSuggestion(group: Configurator.Group): boolean {
     return group.groupType === Configurator.GroupType.CONFLICT_GROUP &&
       group.attributes
-      ? group.attributes?.length > 1
+      ? group.attributes.length > 0
       : false;
   }
 

diff --git a/feature-libs/product-configurator/rulebased/components/form/configurator-form.component.html b/feature-libs/product-configurator/rulebased/components/form/configurator-form.component.html
@@ -1,7 +1,7 @@
 <ng-container *ngIf="configuration$ | async as configuration; else ghostForm">
   <ng-container *ngIf="currentGroup$ | async as currentGroup">
     <div id="{{ createGroupId(currentGroup.id) }}" role="tabpanel">
-      <ng-container *ngIf="isConflictGroupType(currentGroup.groupType)">
+      <ng-container *ngIf="displayConflictDescription(currentGroup)">
         <cx-configurator-conflict-description
           [currentGroup]="currentGroup"
         ></cx-configurator-conflict-description>

diff --git a/...e-libs/product-configurator/rulebased/components/form/configurator-form.component.spec.ts b/...e-libs/product-configurator/rulebased/components/form/configurator-form.component.spec.ts
@@ -74,6 +74,17 @@ const configRead2: Configurator.Configuration = {
   groups: groups,
 };
 
+const conflictGroup: Configurator.Group = {
+  id: 'GROUP_ID_CONFLICT_1',
+  name: 'The conflict text',
+  groupType: Configurator.GroupType.CONFLICT_GROUP,
+  subGroups: [],
+  attributes: [
+    { name: 'ATTRIBUTE_1_CHECKBOX', key: 'ATTRIBUTE_1' },
+    { name: 'ATTRIBUTE_2_RADIOBUTTON', key: 'ATTRIBUTE_2' },
+  ],
+};
+
 @Component({
   selector: 'cx-configurator-price',
   template: '',
@@ -566,4 +577,38 @@ describe('ConfigurationFormComponent', () => {
       }
     });
   });
+
+  describe('displayConflictDescription', () => {
+    it('should return true if group is conflict group and has a name', () => {
+      spyOn(configuratorGroupsService, 'isConflictGroupType').and.returnValue(
+        true
+      );
+      expect(createComponent().displayConflictDescription(conflictGroup)).toBe(
+        true
+      );
+    });
+    it('should return false if group is standard group', () => {
+      spyOn(configuratorGroupsService, 'isConflictGroupType').and.returnValue(
+        false
+      );
+      expect(createComponent().displayConflictDescription(conflictGroup)).toBe(
+        false
+      );
+    });
+    it('should return false if group is conflict group and does not have a name', () => {
+      spyOn(configuratorGroupsService, 'isConflictGroupType').and.returnValue(
+        true
+      );
+      conflictGroup.name = '';
+      expect(createComponent().displayConflictDescription(conflictGroup)).toBe(
+        false
+      );
+    });
+    it('should return false if group type is undefined', () => {
+      conflictGroup.groupType = undefined;
+      expect(createComponent().displayConflictDescription(conflictGroup)).toBe(
+        false
+      );
+    });
+  });
 });
diff --git a/feature-libs/product-configurator/rulebased/components/form/configurator-form.component.ts b/feature-libs/product-configurator/rulebased/components/form/configurator-form.component.ts
@@ -134,6 +134,19 @@ export class ConfiguratorFormComponent implements OnInit {
     return this.configuratorGroupsService.isConflictGroupType(groupType);
   }
 
+  /**
+   * Display group description box only for conflict groups with a given group name (i.e. a conflict description)
+   * @param group
+   * @returns true if conflict description box should be displayed
+   */
+  displayConflictDescription(group: Configurator.Group): boolean {
+    return (
+      group.groupType !== undefined &&
+      this.configuratorGroupsService.isConflictGroupType(group.groupType) &&
+      group.name !== ''
+    );
+  }
+
   /**
    * Generates a group ID.
    *

diff --git a/feature-libs/product-configurator/rulebased/styles/_configurator-attribute-header.scss b/feature-libs/product-configurator/rulebased/styles/_configurator-attribute-header.scss
@@ -38,6 +38,7 @@
     .cx-action-link {
       color: var(--cx-color-text);
       font-size: 14px;
+      min-height: 0px;
     }
   }
 

diff --git a/feature-libs/product-configurator/rulebased/styles/_configurator-conflict-suggestion.scss b/feature-libs/product-configurator/rulebased/styles/_configurator-conflict-suggestion.scss
@@ -11,8 +11,8 @@
   padding-block-start: 15px;
   padding-block-end: 15px;
 
-  margin-inline-start: -20px;
-  margin-inline-end: -20px;
+  margin-inline-start: -15px;
+  margin-inline-end: -15px;
 
   @include forVersion(5.1) {
     margin-inline-start: -15px;

diff --git a/feature-libs/product-configurator/rulebased/styles/_configurator-overview-attribute.scss b/feature-libs/product-configurator/rulebased/styles/_configurator-overview-attribute.scss
@@ -8,7 +8,7 @@
   .cx-attribute-value {
     width: 50%;
     font-weight: 600;
-    line-break: anywhere;
+    line-break: normal;
     padding-inline-end: 10px;
     @include forVersion(5.1) {
       z-index: -6;
@@ -22,7 +22,7 @@
   .cx-attribute-label {
     width: 100%;
     padding-inline-end: 10px;
-    line-break: anywhere;
+    line-break: normal;
     color: var(--cx-color-secondary);
     @include forVersion(5.1) {
       z-index: -6;

diff --git a/feature-libs/product-configurator/rulebased/styles/mixins/_configurator-attribute-type.scss b/feature-libs/product-configurator/rulebased/styles/mixins/_configurator-attribute-type.scss
@@ -21,7 +21,7 @@
       .cx-value-label-pair {
         width: 80%;
         padding-inline-end: 10px;
-        line-break: anywhere;
+        line-break: normal;
       }
 
       .cx-value-price {