(enhancement) bumb styling to carbon 11 for form-entry engine

openmrs · Aug 31, 2022 · 06c294c · 06c294c
1 parent 149a0e5
commit 06c294c
Show file tree

Hide file tree

Showing 23 changed files with 286 additions and 252 deletions.
diff --git a/angular.json b/angular.json
@@ -29,7 +29,7 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css",
+              "src/styles.scss",
               "projects/ngx-formentry/styles/ngx-formentry.css"
             ],
             "stylePreprocessorOptions": {

diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
     "e2e": "ng e2e"
   },
   "peerDependencies": {
-    "carbon-components": "10.x"
+    "@carbon/styles": "1.x"
   },
   "dependencies": {
     "@angular-devkit/core": "^10.2.3",
@@ -27,6 +27,7 @@
     "@angular/platform-browser": "^11.2.14",
     "@angular/platform-browser-dynamic": "^11.2.14",
     "@angular/router": "^11.2.14",
+    "@carbon/styles": "^1.11.0",
     "@ng-select/ng-select": "^6.1.0",
     "core-js": "^2.5.4",
     "font-awesome": "^4.7.0",
@@ -65,7 +66,6 @@
     "@types/node": "^12.11.1",
     "@typescript-eslint/eslint-plugin": "4.16.1",
     "@typescript-eslint/parser": "4.16.1",
-    "carbon-components": "^10.36.0",
     "eslint": "^7.6.0",
     "husky": "^4.3.0",
     "jasmine-core": "~3.6.0",

diff --git a/projects/ngx-formentry/package.json b/projects/ngx-formentry/package.json
@@ -19,7 +19,7 @@
     "shelljs": "^0.7.0",
     "slick-carousel": "^1.6.0",
     "tree-model": "^1.0.5",
-    "carbon-components": "^10.36.0",
+    "@carbon/styles": "^1.11.0",
     "ngx-file-uploader": "^0.0.18",
     "@angular-extensions/elements": "^12.6.0"
   }

diff --git a/projects/ngx-formentry/src/change-tracking/sample-form/sample-form.component.html b/projects/ngx-formentry/src/change-tracking/sample-form/sample-form.component.html
@@ -58,11 +58,11 @@
       >
     </div>
     <div class="form-row">
-      <button class="bx--btn bx--btn--primary" type="submit" [disabled]="!form.valid">Save</button>
-      <button class="bx--btn bx--btn--secondary" type="button" (click)="setControlOneValue()">
+      <button class="cds--btn cds--btn--primary" type="submit" [disabled]="!form.valid">Save</button>
+      <button class="cds--btn cds--btn--secondary" type="button" (click)="setControlOneValue()">
         change value 1
       </button>
-      <button class="bx--btn bx--btn--danger" type="button" (click)="removeControlNine()">
+      <button class="cds--btn cds--btn--danger" type="button" (click)="removeControlNine()">
         remove control 9
       </button>
     </div>

diff --git a/...s/ngx-formentry/src/components/appointments-overview/appointments-overview.component.html b/...s/ngx-formentry/src/components/appointments-overview/appointments-overview.component.html
@@ -1,24 +1,24 @@
 <div *ngIf="showAppointments" class="container">
   <div *ngIf="loadingAppointments">
     <span *ngIf="!appointmentsLoaded && errorLoadingAppointments">Error checking appointments</span>
-    <div *ngIf="loadingAppointments" class="bx--inline-loading" aria-live="assertive">
-      <div class="bx--inline-loading__animation">
+    <div *ngIf="loadingAppointments" class="cds--inline-loading" aria-live="assertive">
+      <div class="cds--inline-loading__animation">
         <div aria-atomic="true" aria-labelledby="loading-id-2" aria-live="assertive"
-          class="bx--loading bx--loading--small">
-          <label id="loading-id-2" class="bx--visually-hidden">Active loading indicator</label><svg
-            class="bx--loading__svg" viewBox="0 0 100 100">
+          class="cds--loading cds--loading--small">
+          <label id="loading-id-2" class="cds--visually-hidden">Active loading indicator</label><svg
+            class="cds--loading__svg" viewBox="0 0 100 100">
             <title>Active loading indicator</title>
-            <circle class="bx--loading__background" cx="50%" cy="50%" r="44"></circle>
-            <circle class="bx--loading__stroke" cx="50%" cy="50%" r="44"></circle>
+            <circle class="cds--loading__background" cx="50%" cy="50%" r="44"></circle>
+            <circle class="cds--loading__stroke" cx="50%" cy="50%" r="44"></circle>
           </svg>
         </div>
       </div>
-      <div class="bx--inline-loading__text">Loading...</div>
+      <div class="cds--inline-loading__text">Loading...</div>
     </div>
   </div>
 
-  <div class="bx--data-table-content" *ngIf="appointmentsLoaded && !errorLoadingAppointments">
-    <table class="bx--data-table bx--data-table--no-border">
+  <div class="cds--data-table-content" *ngIf="appointmentsLoaded && !errorLoadingAppointments">
+    <table class="cds--data-table cds--data-table--no-border">
       <thead>
         <tr>
           <th *ngFor="let appointment of appointments" scope="col" [ngClass]="{ active: appointment.date === today }">

diff --git a/projects/ngx-formentry/src/components/check-box/checkbox.component.html b/projects/ngx-formentry/src/components/check-box/checkbox.component.html
@@ -1,8 +1,8 @@
-<fieldset class="bx--fieldset">
-  <div class="bx--form-item bx--checkbox-wrapper" *ngFor="let option of options; let i = index">
-    <input type="checkbox" class="bx--checkbox" [id]="i + 'id'" [checked]="option.checked" (change)="selectOpt(option, $event)" [value]="option.value">
-    <label [for]="i + 'id'" class="bx--checkbox-label">
-      <span class="bx--checkbox-label-text">{{ option.label }}</span>
+<fieldset class="cds--fieldset">
+  <div class="cds--form-item cds--checkbox-wrapper" *ngFor="let option of options; let i = index">
+    <input type="checkbox" class="cds--checkbox" [id]="i + 'id'" [checked]="option.checked" (change)="selectOpt(option, $event)" [value]="option.value">
+    <label [for]="i + 'id'" class="cds--checkbox-label">
+      <span class="cds--checkbox-label-text">{{ option.label }}</span>
     </label>
   </div>
 </fieldset>
diff --git a/projects/ngx-formentry/src/components/input/input.directive.ts b/projects/ngx-formentry/src/components/input/input.directive.ts
@@ -26,19 +26,19 @@ export class TextInput {
    */
   @Input() size: 'sm' | 'md' | 'xl' = 'md';
 
-  @HostBinding('class.bx--text-input') inputClass = true;
-  @HostBinding('class.bx--text-input--xl') get isSizeXl() {
+  @HostBinding('class.cds--text-input') inputClass = true;
+  @HostBinding('class.cds--text-input--xl') get isSizeXl() {
     return this.size === 'xl';
   }
-  @HostBinding('class.bx--text-input--sm') get isSizeSm() {
+  @HostBinding('class.cds--text-input--sm') get isSizeSm() {
     return this.size === 'sm';
   }
-  @HostBinding('class.bx--text-input--invalid') @Input() invalid = false;
-  @HostBinding('class.bx--text-input__field-wrapper--warning')
+  @HostBinding('class.cds--text-input--invalid') @Input() invalid = false;
+  @HostBinding('class.cds--text-input__field-wrapper--warning')
   @Input()
   warn = false;
-  @HostBinding('class.bx--skeleton') @Input() skeleton = false;
-  @HostBinding('class.bx--text-input--light') get isLightTheme() {
+  @HostBinding('class.cds--skeleton') @Input() skeleton = false;
+  @HostBinding('class.cds--text-input--light') get isLightTheme() {
     return this.theme === 'light';
   }
 }
diff --git a/projects/ngx-formentry/src/components/input/label.component.ts b/projects/ngx-formentry/src/components/input/label.component.ts
@@ -41,17 +41,17 @@ import { TextArea } from './text-area.directive';
     <label
       [for]="labelInputID"
       [attr.aria-label]="ariaLabel"
-      class="bx--label"
+      class="cds--label"
       [ngClass]="{
-        'bx--skeleton': skeleton
+        'cds--skeleton': skeleton
       }"
     >
       <ng-content></ng-content>
     </label>
     <div
       [class]="wrapperClass"
       [ngClass]="{
-        'bx--text-input__field-wrapper--warning': warn
+        'cds--text-input__field-wrapper--warning': warn
       }"
       [attr.data-invalid]="invalid ? true : null"
       #wrapper
@@ -62,7 +62,7 @@ import { TextArea } from './text-area.directive';
         preserveAspectRatio="xMidYMid meet"
         style="will-change: transform;"
         xmlns="http://www.w3.org/2000/svg"
-        class="bx--text-input__invalid-icon"
+        class="cds--text-input__invalid-icon"
         width="16"
         height="16"
         viewBox="0 0 16 16"
@@ -81,7 +81,7 @@ import { TextArea } from './text-area.directive';
     </div>
     <div
       *ngIf="!skeleton && helperText && !invalid && !warn"
-      class="bx--form__helper-text"
+      class="cds--form__helper-text"
     >
       <ng-container *ngIf="!isTemplate(helperText)">{{
         helperText
@@ -91,7 +91,7 @@ import { TextArea } from './text-area.directive';
         [ngTemplateOutlet]="helperText"
       ></ng-template>
     </div>
-    <div *ngIf="!warn && invalid" class="bx--form-requirement">
+    <div *ngIf="!warn && invalid" class="cds--form-requirement">
       <ng-container *ngIf="!isTemplate(invalidText)">{{
         invalidText
       }}</ng-container>
@@ -100,7 +100,7 @@ import { TextArea } from './text-area.directive';
         [ngTemplateOutlet]="invalidText"
       ></ng-template>
     </div>
-    <div *ngIf="!invalid && warn" class="bx--form-requirement">
+    <div *ngIf="!invalid && warn" class="cds--form-requirement">
       <ng-container *ngIf="!isTemplate(warnText)">{{ warnText }}</ng-container>
       <ng-template
         *ngIf="isTemplate(warnText)"
@@ -117,7 +117,7 @@ export class Label implements AfterContentInit, AfterViewInit {
   /**
    * The class of the wrapper
    */
-  wrapperClass = 'bx--text-input__field-wrapper';
+  wrapperClass = 'cds--text-input__field-wrapper';
   /**
    * The id of the input item associated with the `Label`. This value is also used to associate the `Label` with
    * its input counterpart through the 'for' attribute.
@@ -163,7 +163,7 @@ export class Label implements AfterContentInit, AfterViewInit {
   // @ts-ignore
   @ContentChild(TextArea, { static: false }) textArea: TextArea;
 
-  @HostBinding('class.bx--form-item') labelClass = true;
+  @HostBinding('class.cds--form-item') labelClass = true;
 
   /**
    * Creates an instance of Label.
@@ -177,7 +177,7 @@ export class Label implements AfterContentInit, AfterViewInit {
    */
   ngAfterContentInit() {
     if (this.textArea) {
-      this.wrapperClass = 'bx--text-area__wrapper';
+      this.wrapperClass = 'cds--text-area__wrapper';
     }
   }
 

diff --git a/projects/ngx-formentry/src/components/input/text-area.directive.ts b/projects/ngx-formentry/src/components/input/text-area.directive.ts
@@ -21,10 +21,10 @@ export class TextArea {
    */
   @Input() theme: 'light' | 'dark' = 'dark';
 
-  @HostBinding('class.bx--text-area') baseClass = true;
-  @HostBinding('class.bx--text-area--invalid') @Input() invalid = false;
-  @HostBinding('class.bx--skeleton') @Input() skeleton = false;
-  @HostBinding('class.bx--text-area--light') get isLightTheme() {
+  @HostBinding('class.cds--text-area') baseClass = true;
+  @HostBinding('class.cds--text-area--invalid') @Input() invalid = false;
+  @HostBinding('class.cds--skeleton') @Input() skeleton = false;
+  @HostBinding('class.cds--text-area--light') get isLightTheme() {
     return this.theme === 'light';
   }
 }
diff --git a/projects/ngx-formentry/src/components/ngx-datetime-picker/ngx-datetime-picker.html b/projects/ngx-formentry/src/components/ngx-datetime-picker/ngx-datetime-picker.html
@@ -1,15 +1,15 @@
 <div class="date-time-picker-container">
     <div data-date-picker data-date-picker-type="single"
-        class="bx--date-picker bx--date-picker--single bx--date-picker--light" [ngClass]="{
-    'bx--date-picker--light': theme === 'light'
+        class="cds--date-picker cds--date-picker--single cds--date-picker--light" [ngClass]="{
+    'cds--date-picker--light': theme === 'light'
 }">
-        <div class="bx--date-picker-container fill">
-            <div class="bx--date-picker-input__wrapper">
+        <div class="cds--date-picker-container fill">
+            <div class="cds--date-picker-input__wrapper">
                 <input [disabled]="isDisabled" (dateTimeChange)="onInput($event)" type="text"
-                    class="bx--date-picker__input fill" [id]="id" [value]="value" [owlDateTime]="dt1"
+                    class="cds--date-picker__input fill" [id]="id" [value]="value" [owlDateTime]="dt1"
                     [owlDateTimeTrigger]="dt1" placeholder="mm/dd/yyyy" data-date-picker-input />
                 <svg [owlDateTimeTrigger]="dt1" focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;"
-                    xmlns="http://www.w3.org/2000/svg" data-date-picker-icon="true" class="bx--date-picker__icon"
+                    xmlns="http://www.w3.org/2000/svg" data-date-picker-icon="true" class="cds--date-picker__icon"
                     width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
                     <path
                         d="M13,2h-2V1h-1v1H6V1H5v1H3C2.4,2,2,2.4,2,3v10c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1V3C14,2.4,13.6,2,13,2z M13,13H3V6h10V13z M13,5H3V3h2v1h1V3h4v1h1V3h2V5z">
@@ -20,16 +20,16 @@
     </div>
 
 
-    <div *ngIf="showWeeks" class="bx--select some-class week-select-wrapper" [ngClass]="{'bx--select--light': theme === 'light'}">
-        <div class="bx--select-input__wrapper">
-            <select (change)="onWeeksSelected($event.target.value)" id="select-1" class="bx--select-input">
-                <option class="bx--select-option" value="placeholder-item" disabled="" hidden="" selected="">Select
+    <div *ngIf="showWeeks" class="cds--select some-class week-select-wrapper" [ngClass]="{'cds--select--light': theme === 'light'}">
+        <div class="cds--select-input__wrapper">
+            <select (change)="onWeeksSelected($event.target.value)" id="select-1" class="cds--select-input">
+                <option class="cds--select-option" value="placeholder-item" disabled="" hidden="" selected="">Select
                     Weeks</option>
-                <option class="bx--select-option" [value]="week" *ngFor="let week of weeks">{{week}} Weeks</option>
+                <option class="cds--select-option" [value]="week" *ngFor="let week of weeks">{{week}} Weeks</option>
             </select>
             <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg"
                 fill="currentColor" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"
-                class="bx--select__arrow">
+                class="cds--select__arrow">
                 <path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path>
             </svg>
         </div>

diff --git a/projects/ngx-formentry/src/components/number-input/number-input.component.html b/projects/ngx-formentry/src/components/number-input/number-input.component.html
@@ -1,48 +1,48 @@
-<div data-numberinput [attr.data-invalid]="invalid ? true : null" class="bx--number" [ngClass]="{
-      'bx--number--light': theme === 'light',
-      'bx--number--nolabel': !label,
-      'bx--number--helpertext': helperText,
-      'bx--skeleton': skeleton,
-      'bx--number--sm': size === 'sm',
-      'bx--number--xl': size === 'xl'
+<div data-numberinput [attr.data-invalid]="invalid ? true : null" class="cds--number" [ngClass]="{
+      'cds--number--light': theme === 'light',
+      'cds--number--nolabel': !label,
+      'cds--number--helpertext': helperText,
+      'cds--skeleton': skeleton,
+      'cds--number--sm': size === 'sm',
+      'cds--number--xl': size === 'xl'
     }">
-  <div class="bx--number__input-wrapper" [ngClass]="{
-        'bx--number__input-wrapper--warning': warn
+  <div class="cds--number__input-wrapper" [ngClass]="{
+        'cds--number__input-wrapper--warning': warn
       }">
     <input type="number" [id]="id" [value]="value" [attr.min]="min" [attr.max]="max" [attr.step]="step"
       [disabled]="disabled" [required]="required" (input)="onNumberInputChange($event)" />
-    <div class="bx--number__controls">
-      <button type="button" class="bx--number__control-btn down-icon" (click)="onDecrement()" title="Decrement number"
+    <div class="cds--number__controls">
+      <button type="button" class="cds--number__control-btn down-icon" (click)="onDecrement()" title="Decrement number"
         [attr.aria-label]="decrementLabel" tabindex="-1">
         <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg"
           fill="currentColor" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true" class="down-icon">
           <path d="M8 15H24V17H8z"></path>
         </svg>
       </button>
-      <div class="bx--number__rule-divider"></div>
-      <button type="button" class="bx--number__control-btn up-icon" (click)="onIncrement()" title="Increment number"
+      <div class="cds--number__rule-divider"></div>
+      <button type="button" class="cds--number__control-btn up-icon" (click)="onIncrement()" title="Increment number"
         [attr.aria-label]="incrementLabel" tabindex="-1">
         <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg"
           fill="currentColor" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true" class="up-icon">
           <path d="M17 15L17 8 15 8 15 15 8 15 8 17 15 17 15 24 17 24 17 17 24 17 24 15z"></path>
         </svg>
       </button>
-      <div class="bx--number__rule-divider"></div>
+      <div class="cds--number__rule-divider"></div>
     </div>
   </div>
-  <div *ngIf="helperText && !invalid && !warn" class="bx--form__helper-text">
+  <div *ngIf="helperText && !invalid && !warn" class="cds--form__helper-text">
     <ng-container *ngIf="!isTemplate(helperText)">{{
       helperText
       }}</ng-container>
     <ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
   </div>
-  <div *ngIf="!warn && invalid" class="bx--form-requirement">
+  <div *ngIf="!warn && invalid" class="cds--form-requirement">
     <ng-container *ngIf="!isTemplate(invalidText)">{{
       invalidText
       }}</ng-container>
     <ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
   </div>
-  <div *ngIf="!invalid && warn" class="bx--form-requirement">
+  <div *ngIf="!invalid && warn" class="cds--form-requirement">
     <ng-container *ngIf="!isTemplate(warnText)">{{ warnText }}</ng-container>
     <ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
   </div>

diff --git a/projects/ngx-formentry/src/components/select/optgroup.directive.ts b/projects/ngx-formentry/src/components/select/optgroup.directive.ts
@@ -6,5 +6,5 @@ import { Directive, HostBinding } from '@angular/core';
   selector: 'optgroup'
 })
 export class OptGroup {
-  @HostBinding('class') inputClass = 'bx--select-optgroup';
+  @HostBinding('class') inputClass = 'cds--select-optgroup';
 }
diff --git a/projects/ngx-formentry/src/components/select/option.directive.ts b/projects/ngx-formentry/src/components/select/option.directive.ts
@@ -6,5 +6,5 @@ import { Directive, HostBinding } from '@angular/core';
   selector: 'option'
 })
 export class Option {
-  @HostBinding('class') inputClass = 'bx--select-option';
+  @HostBinding('class') inputClass = 'cds--select-option';
 }