feat(RadioGroup): now supports centered content OR left/top aligned c…

…ontent

ISSUES CLOSED: #1570

demo/app/components/radio/radio.component.html

@@ -52,28 +52,22 @@ <h3 tsCardTitle tsVerticalSpacing>
       Group 2 - visual
     </h3>
 
-    <ts-radio-group
-      [isVisual]="true"
-      [formatUILabelFn]="uiFormatter"
-      [formatUISubLabelFn]="uiSubFormatter"
-      [formatModelValueFn]="modelFormatter"
-      [formControl]="myForm.get('myRadioGroup2')"
-      [options]="items2$ | async"
-      (selectionChange)="selected($event)"
-    ></ts-radio-group>
-
-    Selected value: {{ myForm.get('myRadioGroup2')?.value }}
-  </ts-card>
-
-
-  <ts-card tsVerticalSpacing>
-    <h3 tsCardTitle tsVerticalSpacing>
-      Group 2 - visual:small
-    </h3>
+    <div>
+      <label>
+        <input formControlName="isSmall" type="checkbox">
+        Small
+      </label>
+      <br>
+      <label>
+        <input formControlName="isCentered" type="checkbox">
+        Centered Content
+      </label>
+    </div>
 
     <ts-radio-group
       [isVisual]="true"
-      [small]="true"
+      [small]="myForm.get('isSmall').value"
+      [centeredContent]="myForm.get('isCentered').value"
       [formatUILabelFn]="uiFormatter"
       [formatUISubLabelFn]="uiSubFormatter"
       [formatModelValueFn]="modelFormatter"

demo/app/components/radio/radio.component.ts

@@ -92,6 +92,8 @@ export class RadioComponent {
   ]);
   // tslint:enable: max-line-length
   myForm: FormGroup = this.formBuilder.group({
+    isSmall: false,
+    isCentered: true,
     myRadioGroup: [
       null,
       [
@@ -107,9 +109,9 @@ export class RadioComponent {
   });
 
 
-  uiFormatter: TsRadioFormatFn = (v) => v.bar;
-  uiSubFormatter: TsRadioFormatFn = (v) => v.bing;
-  modelFormatter: TsRadioFormatFn = (v) => v.foo;
+  uiFormatter: TsRadioFormatFn = v => v.bar;
+  uiSubFormatter: TsRadioFormatFn = v => v.bing;
+  modelFormatter: TsRadioFormatFn = v => v.foo;
 
 
 

terminus-ui/radio-group/src/radio-group.component.html

@@ -73,7 +73,8 @@
           >
           <div
             class="c-radio__content"
-            [class.c-radio__content--disabled]="(isDisabled || option.disabled) ? 'disabled' : null"
+            [class.c-radio__content--disabled]="isDisabled || option.disabled"
+            [class.c-radio__content--centered]="centeredContent"
             mat-ripple
             [matRippleDisabled]="(isDisabled || option.disabled) ? 'disabled' : null"
             [matRippleColor]="rippleColor"

terminus-ui/radio-group/src/radio-group.component.md

@@ -13,6 +13,7 @@
   - [Disabled option](#disabled-option)
 - [Visual mode](#visual-mode)
   - [Small](#small)
+  - [Centered Content](#centered-content)
   - [Custom content](#custom-content)
 - [Test Helpers](#test-helpers)
 
@@ -184,7 +185,7 @@ Enable by setting the `isVisual` flag:
 
 ### Small
 
-For a smaller clickable area, use the `small` flag. This sets the visual radio buttons to 13.75rem x 7rem. 
+For a smaller clickable area, use the `small` flag. This sets the visual radio buttons to 13.75rem x 7rem.
 
 _Note_ The maximum content should be a title with two lines and body with 3 lines
 
@@ -196,6 +197,18 @@ _Note_ The maximum content should be a title with two lines and body with 3 line
 ></ts-radio-group>
 ```
 
+### Centered Content
+
+By default the content is centered when in visual mode. Setting `centeredContent` to `false` will use standard top/left alignent.
+
+```html
+<ts-radio-group
+  [isVisual]="true"
+  [centeredContent]="true"
+  ...
+></ts-radio-group>
+```
+
 ### Custom content
 
 `TsRadioOption` now accepts an optional `template` key with a string template:

terminus-ui/radio-group/src/radio-group.component.scss

@@ -101,9 +101,6 @@
     align-items: center;
     border: 1px solid color(utility, light);
     border-radius: 3px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
     padding: spacing(default);
     transition: border-color 200ms ease-in;
 
@@ -132,6 +129,12 @@
       z-index: 1;
     }
 
+    &--centered {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
     // Class added when the option is disabled
     &--disabled {
       color: color(utility);

terminus-ui/radio-group/src/radio-group.component.spec.ts

@@ -8,6 +8,7 @@ import {
   FormControl,
   Validators,
 } from '@angular/forms';
+import { By } from '@angular/platform-browser';
 import {
   ChangeDetectorRefMock,
   createComponent,
@@ -39,6 +40,8 @@ class DomSanitizerMock {
   template: `
   <ts-radio-group
     [isVisual]="isVisual"
+    [small]="small"
+    [centeredContent]="centered"
     [formatUILabelFn]="uiFormatter"
     [formatModelValueFn]="modelFormatter"
     [formControl]="control"
@@ -50,6 +53,8 @@ class DomSanitizerMock {
 class TestHostComponent {
   private control: FormControl | undefined = new FormControl();
   public isVisual = false;
+  public small = false;
+  public centered = true;
   public optionsArray: TsRadioOption[] = [
     {
       foo: 'bar',
@@ -73,6 +78,7 @@ describe('TsRadioGroupComponent INT test', function() {
     fixture.detectChanges();
   });
 
+
   describe(`change`, () => {
 
     test(`should emit change for non-isVisual radios`, () => {
@@ -91,8 +97,56 @@ describe('TsRadioGroupComponent INT test', function() {
 
   });
 
+
+  describe(`visual mode`, function() {
+
+    beforeEach(() => {
+      fixture.componentInstance.isVisual = true;
+      fixture.detectChanges();
+    });
+
+
+    test(`should add the visual layout class`, function() {
+      const visualClass = fixture.debugElement.query(By.css('.c-radio--visual'));
+      expect(visualClass).toBeTruthy();
+    });
+
+
+    describe(`small`, function() {
+
+      test(`should add the correct class for the small layout`, function() {
+        let smallClass = fixture.debugElement.queryAll(By.css('.c-radio--small'));
+        expect(smallClass.length).toEqual(0);
+
+        fixture.componentInstance.small = true;
+        fixture.detectChanges();
+
+        smallClass = fixture.debugElement.queryAll(By.css('.c-radio--small'));
+        expect(smallClass.length).toBeGreaterThan(0);
+      });
+
+    });
+
+
+    describe(`centeredContent`, function() {
+
+      test(`should add the correct class for centered content`, function() {
+        let centeredClass = fixture.debugElement.queryAll(By.css('.c-radio__content--centered'));
+        expect(centeredClass.length).toBeGreaterThan(0);
+
+        fixture.componentInstance.centered = false;
+        fixture.detectChanges();
+
+        centeredClass = fixture.debugElement.queryAll(By.css('.c-radio__content--centered'));
+        expect(centeredClass.length).toEqual(0);
+      });
+
+    });
+  });
+
 });
 
+
 describe('TsRadioGroupComponent', function() {
   let component: TsRadioGroupComponent;
   let options: TsRadioOption[];
@@ -143,7 +197,7 @@ describe('TsRadioGroupComponent', function() {
 
     test(`should return undefined if no value is passed in`, () => {
       const foo = void 0;
-      expect(component.formatUILabelFn = foo).toEqual(undefined);
+      expect(component.formatUILabelFn = foo as any).toEqual(undefined);
     });
 
 
@@ -168,7 +222,7 @@ describe('TsRadioGroupComponent', function() {
 
     test(`should return undefined if no value is passed in`, () => {
       const foo = void 0;
-      expect(component.formatUISubLabelFn = foo).toEqual(undefined);
+      expect(component.formatUISubLabelFn = foo as any).toEqual(undefined);
     });
 
 
@@ -193,7 +247,7 @@ describe('TsRadioGroupComponent', function() {
 
     test(`should return undefined if no value is passed in`, () => {
       const foo = void 0;
-      expect(component.formatModelValueFn = foo).toEqual(undefined);
+      expect(component.formatModelValueFn = foo as any).toEqual(undefined);
     });
 
 
@@ -246,27 +300,6 @@ describe('TsRadioGroupComponent', function() {
   });
 
 
-  describe(`isVisual`, () => {
-
-    test(`should set and retrieve the visual value`, () => {
-      expect(component.isVisual).toEqual(false);
-      component.isVisual = true;
-      expect(component.isVisual).toEqual(true);
-    });
-
-  });
-
-  describe(`small`, () => {
-
-    test(`should set and retrieve the small value`, () => {
-      expect(component.small).toEqual(false);
-      component.small = true;
-      expect(component.small).toEqual(true);
-    });
-
-  });
-
-
   describe(`options`, () => {
 
     test(`should set and retrieve options`, () => {

terminus-ui/radio-group/src/radio-group.component.ts

@@ -82,6 +82,7 @@ let nextUniqueId = 0;
  *              [ariaDescribedby]="Aria Describedby"
  *              [ariaLabel]="Aria Label"
  *              [ariaLabelledby]="Aria Labelledby"
+ *              [centeredContent]="false"
  *              [formatUILabelFn]="myUIFormatter"
  *              [formatUISubLabelFn]="myUISubFormatter"
  *              [formatModelValueFn]="myModelFormatter"
@@ -148,6 +149,12 @@ export class TsRadioGroupComponent extends TsReactiveFormBaseComponent implement
   public ariaDescribedby: string | undefined;
   // tslint:enable: no-input-rename
 
+  /**
+   * Define if the radio contents should be centered (used with the visual radio group layout)
+   */
+  @Input()
+  public centeredContent = true;
+
   /**
    * Define a function to retrieve the UI value for an option
    */