Fixed text expand with newlines (#1138)

skyux-spa-visual-tests/src/app/text-expand/text-expand-visual.component.html

@@ -8,4 +8,7 @@
   <div id="modal-text-expand">
     <sky-text-expand [text]="longText" [expandModalTitle]="'Long Text'"></sky-text-expand>
   </div>
+  <div id="screenshot-truncate-text-w-newlines">
+    <sky-text-expand [text]="longText" [truncateNewlines]="false"></sky-text-expand>
+  </div>
 </div>

skyux-spa-visual-tests/src/app/text-expand/text-expand.visual-spec.ts

@@ -41,4 +41,16 @@ describe('TextExpand', () => {
 
   });
 
+  it('should match previous text expand without truncated newlines', () => {
+    return SkyVisualTest
+      .setupTest('text-expand')
+      .then(() => {
+        return SkyVisualTest
+          .compareScreenshot({
+            screenshotName: 'text-expand-w-newlines',
+            selector: '#screenshot-truncate-text-w-newlines'
+          });
+      });
+  });
+
 });

src/app/components/text-expand/index.html

@@ -31,6 +31,9 @@
     <sky-demo-page-property propertyName="expandModalTitle" defaultValue="Expanded View" isOptional="true">
       The title to display in the modal expanded view.
     </sky-demo-page-property>
+    <sky-demo-page-property propertyName="truncateNewlines" defaultValue="true" isOptional="true">
+      If this property is set to <stache-code>false</stache-code>, newline characters will not be replaced with spaces in the truncated text.
+    </sky-demo-page-property>
   </sky-demo-page-properties>
 
   <sky-demo-page-properties sectionHeading="Text expand repeater properties">

src/app/components/text-expand/text-expand-demo.component.html

@@ -1,6 +1,29 @@
-<h3>Text expand</h3>
-<sky-text-expand [text]="shortText"></sky-text-expand>
-<h3>Text expand modal view</h3>
-<sky-text-expand [text]="longText"></sky-text-expand>
-<h3>Text expand repeater</h3>
-<sky-text-expand-repeater [data]="repeaterData" [maxItems]="2"></sky-text-expand-repeater>
+<h3>
+  Text expand
+</h3>
+<sky-text-expand
+  [text]="shortText">
+</sky-text-expand>
+
+<h3>
+  Text expand modal view
+</h3>
+<sky-text-expand
+  [text]="longText">
+</sky-text-expand>
+
+<h3>
+  Text expand modal view (with newlines)
+</h3>
+<sky-text-expand
+  [text]="longText"
+  [truncateNewlines]="false">
+</sky-text-expand>
+
+<h3>
+  Text expand repeater
+</h3>
+<sky-text-expand-repeater
+  [data]="repeaterData"
+  [maxItems]="2">
+</sky-text-expand-repeater>

src/modules/text-expand/fixtures/text-expand.component.fixture.html

@@ -2,5 +2,5 @@
   <sky-text-expand [maxLength]="maxLength" [text]="text"></sky-text-expand>
 </div>
 <div *ngIf="!maxLength">
-  <sky-text-expand [text]="text"></sky-text-expand>
+  <sky-text-expand [text]="text" [truncateNewlines]="truncateNewlines"></sky-text-expand>
 </div>

src/modules/text-expand/fixtures/text-expand.component.fixture.ts

@@ -8,4 +8,5 @@ export class TextExpandTestComponent {
   // tslint:disable-next-line
   public text: string;
   public maxLength: number;
+  public truncateNewlines: boolean = true;
 }

src/modules/text-expand/text-expand.component.spec.ts

@@ -275,6 +275,23 @@ describe('Text expand component', () => {
         });
       });
     }), 300000);
+
+    it('should render newlines if requested', () => {
+      let fixture = TestBed.createComponent(TextExpandTestComponent);
+      let cmp = fixture.componentInstance as TextExpandTestComponent;
+      let el = fixture.nativeElement as HTMLElement;
+
+      // tslint:disable-next-line
+      cmp.text = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\nAenean commodo ligula eget dolor. Aenean massa.\nCum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu';
+      cmp.truncateNewlines = false;
+
+      fixture.detectChanges();
+
+      let ellipsis: any = el.querySelector('.sky-text-expand-ellipsis');
+      let seeMoreButton: any = el.querySelector('.sky-text-expand-see-more');
+      expect(ellipsis).toBeNull();
+      expect(seeMoreButton).toBeNull();
+    });
   });
 
   describe('modal behaviors', () => {

src/modules/text-expand/text-expand.component.ts

@@ -37,6 +37,8 @@ export class SkyTextExpandComponent implements AfterContentInit {
     this.setup(value);
   }
   @Input()
+  public truncateNewlines = true;
+  @Input()
   public maxLength: number = 200;
   @Input()
   public maxExpandedLength: number = 600;
@@ -49,7 +51,6 @@ export class SkyTextExpandComponent implements AfterContentInit {
   @ViewChild('text')
   public textEl: ElementRef;
 
-  public maxNewlines: number = 1;
   public isExpanded: boolean = false;
   public expandable: boolean;
   public buttonText: string;
@@ -129,7 +130,7 @@ export class SkyTextExpandComponent implements AfterContentInit {
   private setup(value: string) {
     if (value) {
       this.newlineCount = this.getNewlineCount(value);
-      this.collapsedText = this.getTruncatedText(value, this.maxLength, this.maxNewlines);
+      this.collapsedText = this.getTruncatedText(value, this.maxLength);
       this.expandedText = value;
       if (this.collapsedText !== value) {
         this.buttonText = this.seeMoreText;
@@ -155,10 +156,10 @@ export class SkyTextExpandComponent implements AfterContentInit {
 
     return 0;
   }
-  private getTruncatedText(value: string, length: number, newlines: number) {
+  private getTruncatedText(value: string, length: number) {
     let i: number;
-    if (newlines && this.newlineCount >= newlines) {
-      value = value.replace(/\s+/gi, ' ');
+    if (this.truncateNewlines) {
+      value = value.replace(/\n+/gi, ' ');
     }
     // Jump ahead one character and see if it's a space, and if it isn't,
     // back up to the first space and break there so a word doesn't get cut