From 2d07e0bad82a3f2b856ee80fa672f5cc5ddfb977 Mon Sep 17 00:00:00 2001
From: Steven Ulmer <steven.ulmer@tangoe.com>
Date: Fri, 30 Oct 2020 14:33:52 -0400
Subject: [PATCH 1/3] Add max length attribute for text area

---
 .../go-text-area/go-text-area.component.html  |  1 +
 .../go-text-area/go-text-area.component.ts    |  1 +
 .../text-area-docs.component.html             | 38 +++++++++++++++++++
 .../text-area-docs.component.ts               |  9 +++++
 4 files changed, 49 insertions(+)

diff --git a/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.html b/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.html
index 76b734b50..8623849f3 100644
--- a/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.html
+++ b/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.html
@@ -15,6 +15,7 @@
     [placeholder]="placeholder"
     [rows]="rows"
     [formControl]="control"
+    [attr.maxlength]="maxlength || null"
   ></textarea>
 
   <go-hint *ngFor="let hint of hints" [message]="hint" [theme]="theme"></go-hint>
diff --git a/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.ts b/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.ts
index c00d0d3ec..c427ceebe 100644
--- a/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.ts
+++ b/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.ts
@@ -13,6 +13,7 @@ export class GoTextAreaComponent implements OnInit {
   @Input() key: string;
   @Input() hints: Array<string>;
   @Input() label: string;
+  @Input() maxlength: number;
   @Input() placeholder: string = '';
   @Input() theme: 'light' | 'dark' = 'light';
   @Input() rows: number;
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.html
index 93a84e2ce..84b86a2e2 100644
--- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.html
+++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.html
@@ -345,4 +345,42 @@ <h4 class="go-heading-4 go-heading--underlined">Code</h4>
 
     </div>
   </go-card>
+
+  <go-card id="form-textarea-max-length" class="go-column go-column--100">
+    <ng-container go-card-header>
+      <h2 class="go-heading-2 go-heading--no-wrap">Component Max Length</h2>
+      <go-copy cardId="form-textarea-max-length" goCopyCardLink></go-copy>
+    </ng-container>
+    <div class="go-container" go-card-content>
+
+      <div class="go-column go-column--100">
+        <p class="go-body-copy go-body-copy--no-margin">
+          The text area component's max legnth can be set via
+          <code class="code-block--inline">@Input() maxlength: number;</code> and the
+          <code class="code-block--inline">maxlength</code> attribute.
+        </p>
+      </div>
+
+      <div class="go-column go-column--100 go-column--no-padding">
+        <div class="go-container">
+          <div class="go-column go-column--50">
+            <h4 class="go-heading-4 go-heading--underlined">View</h4>
+            <go-text-area
+              [control]="message10"
+              label="Your Message"
+              maxlength="10">
+            </go-text-area>
+          </div>
+          <div class="go-column go-column--50">
+            <h4 class="go-heading-4 go-heading--underlined">Code</h4>
+            <code
+              [highlight]="basicMaxLengthExample"
+              class="code-block--no-bottom-margin">
+            </code>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </go-card>
 </section>
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.ts
index 43a151d55..99bb0fb4c 100644
--- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.ts
+++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.ts
@@ -15,6 +15,7 @@ export class TextAreaDocsComponent implements OnInit {
   message7: FormControl = new FormControl('');
   message8: FormControl = new FormControl('');
   message9: FormControl = new FormControl('');
+  message10: FormControl = new FormControl('');
 
   hints: Array<string> = [
     'Please type your message here',
@@ -105,6 +106,14 @@ export class TextAreaDocsComponent implements OnInit {
   </go-text-area>
   `;
 
+  basicMaxLengthExample: string = `
+  <go-text-area
+    [control]="message"
+    label="Your Message"
+    maxlength="10">
+  </go-text-area>
+  `;
+
   constructor(private subNavService: SubNavService) {
     this.subNavService.pageTitle = 'Textarea';
     this.subNavService.linkToSource = 'https://github.com/mobi/goponents/tree/dev/projects/go-lib/src/lib/components/go-text-area';

From bc02ef96d53085b454c524aef1950fd57a9b933b Mon Sep 17 00:00:00 2001
From: Steven Ulmer <steven.ulmer@tangoe.com>
Date: Mon, 9 Nov 2020 12:16:54 -0500
Subject: [PATCH 2/3] Add min length for text area

---
 .../go-text-area/go-text-area.component.html  |  1 +
 .../go-text-area/go-text-area.component.ts    |  1 +
 .../text-area-docs.component.html             | 40 ++++++++++++++++++-
 .../text-area-docs.component.ts               |  9 +++++
 4 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.html b/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.html
index 8623849f3..f2bbe859a 100644
--- a/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.html
+++ b/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.html
@@ -16,6 +16,7 @@
     [rows]="rows"
     [formControl]="control"
     [attr.maxlength]="maxlength || null"
+    [attr.minlength]="minlength || null"
   ></textarea>
 
   <go-hint *ngFor="let hint of hints" [message]="hint" [theme]="theme"></go-hint>
diff --git a/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.ts b/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.ts
index c427ceebe..2b53e2170 100644
--- a/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.ts
+++ b/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.ts
@@ -14,6 +14,7 @@ export class GoTextAreaComponent implements OnInit {
   @Input() hints: Array<string>;
   @Input() label: string;
   @Input() maxlength: number;
+  @Input() minlength: number;
   @Input() placeholder: string = '';
   @Input() theme: 'light' | 'dark' = 'light';
   @Input() rows: number;
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.html
index 84b86a2e2..2ce8484b2 100644
--- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.html
+++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.html
@@ -355,7 +355,7 @@ <h2 class="go-heading-2 go-heading--no-wrap">Component Max Length</h2>
 
       <div class="go-column go-column--100">
         <p class="go-body-copy go-body-copy--no-margin">
-          The text area component's max legnth can be set via
+          The text area component's max length can be set via
           <code class="code-block--inline">@Input() maxlength: number;</code> and the
           <code class="code-block--inline">maxlength</code> attribute.
         </p>
@@ -383,4 +383,42 @@ <h4 class="go-heading-4 go-heading--underlined">Code</h4>
 
     </div>
   </go-card>
+
+  <go-card id="form-textarea-min-length" class="go-column go-column--100">
+    <ng-container go-card-header>
+      <h2 class="go-heading-2 go-heading--no-wrap">Component Min Length</h2>
+      <go-copy cardId="form-textarea-min-length" goCopyCardLink></go-copy>
+    </ng-container>
+    <div class="go-container" go-card-content>
+
+      <div class="go-column go-column--100">
+        <p class="go-body-copy go-body-copy--no-margin">
+          The text area component's min length can be set via
+          <code class="code-block--inline">@Input() minlength: number;</code> and the
+          <code class="code-block--inline">minlength</code> attribute.
+        </p>
+      </div>
+
+      <div class="go-column go-column--100 go-column--no-padding">
+        <div class="go-container">
+          <div class="go-column go-column--50">
+            <h4 class="go-heading-4 go-heading--underlined">View</h4>
+            <go-text-area
+              [control]="message11"
+              label="Your Message"
+              minlength="2">
+            </go-text-area>
+          </div>
+          <div class="go-column go-column--50">
+            <h4 class="go-heading-4 go-heading--underlined">Code</h4>
+            <code
+              [highlight]="basicMinLengthExample"
+              class="code-block--no-bottom-margin">
+            </code>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </go-card>
 </section>
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.ts
index 99bb0fb4c..173bf349d 100644
--- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.ts
+++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.ts
@@ -16,6 +16,7 @@ export class TextAreaDocsComponent implements OnInit {
   message8: FormControl = new FormControl('');
   message9: FormControl = new FormControl('');
   message10: FormControl = new FormControl('');
+  message11: FormControl = new FormControl('');
 
   hints: Array<string> = [
     'Please type your message here',
@@ -114,6 +115,14 @@ export class TextAreaDocsComponent implements OnInit {
   </go-text-area>
   `;
 
+  basicMinLengthExample: string = `
+  <go-text-area
+    [control]="message"
+    label="Your Message"
+    minlength="2">
+  </go-text-area>
+  `;
+
   constructor(private subNavService: SubNavService) {
     this.subNavService.pageTitle = 'Textarea';
     this.subNavService.linkToSource = 'https://github.com/mobi/goponents/tree/dev/projects/go-lib/src/lib/components/go-text-area';

From 4e65daef764d784cd51f45e07a527a40ac01368e Mon Sep 17 00:00:00 2001
From: Steven Ulmer <steven.ulmer@tangoe.com>
Date: Mon, 30 Nov 2020 11:38:23 -0500
Subject: [PATCH 3/3] Add validation for min/max length on text area component

---
 .../go-text-area/go-text-area.component.html  |  4 +--
 .../go-text-area.component.spec.ts            | 32 ++++++++++++++++++-
 .../go-text-area/go-text-area.component.ts    |  8 +++++
 .../text-area-docs.component.html             |  4 +--
 .../text-area-docs.component.ts               |  4 +--
 5 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.html b/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.html
index f2bbe859a..4ae396052 100644
--- a/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.html
+++ b/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.html
@@ -15,8 +15,8 @@
     [placeholder]="placeholder"
     [rows]="rows"
     [formControl]="control"
-    [attr.maxlength]="maxlength || null"
-    [attr.minlength]="minlength || null"
+    [maxlength]="maxlength"
+    [minlength]="minlength"
   ></textarea>
 
   <go-hint *ngFor="let hint of hints" [message]="hint" [theme]="theme"></go-hint>
diff --git a/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.spec.ts b/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.spec.ts
index 694baac4f..8d841e044 100644
--- a/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.spec.ts
+++ b/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.spec.ts
@@ -67,7 +67,37 @@ describe('GoTextAreaComponent', () => {
       component.ngOnInit();
 
       expect(component.id).toBeDefined();
-      expect(component.id).toContain('text-area-')
+      expect(component.id).toContain('text-area-');
+    });
+
+    it('doesn\'n error if no minlength passed in', () => {
+      component.minlength = undefined;
+      component.maxlength = 20;
+
+      component.ngOnInit();
+
+      expect(component.minlength).toBe(undefined);
+      expect(component.maxlength).toBe(20);
+    });
+
+    it('doesn\'n error if no maxlength passed in', () => {
+      component.minlength = 20;
+      component.maxlength = undefined;
+
+      component.ngOnInit();
+
+      expect(component.minlength).toBe(20);
+      expect(component.maxlength).toBe(undefined);
+    });
+
+    it('sets minlength to 0 if minlength is greater than maxlength', () => {
+      component.minlength = 150;
+      component.maxlength = 100;
+
+      component.ngOnInit();
+
+      expect(component.minlength).toBe(0);
+      expect(component.maxlength).toBe(100);
     });
   });
 });
diff --git a/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.ts b/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.ts
index 2b53e2170..01810964f 100644
--- a/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.ts
+++ b/projects/go-lib/src/lib/components/go-text-area/go-text-area.component.ts
@@ -23,5 +23,13 @@ export class GoTextAreaComponent implements OnInit {
 
   ngOnInit(): void {
     this.id = this.key || generateId(this.label, 'text-area');
+
+    this.validateMinMax();
+  }
+
+  private validateMinMax(): void {
+    if (this.maxlength && this.minlength && this.minlength > this.maxlength) {
+      this.minlength = 0;
+    }
   }
 }
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.html
index 2ce8484b2..f57d7e5a4 100644
--- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.html
+++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.html
@@ -368,7 +368,7 @@ <h4 class="go-heading-4 go-heading--underlined">View</h4>
             <go-text-area
               [control]="message10"
               label="Your Message"
-              maxlength="10">
+              [maxlength]="10">
             </go-text-area>
           </div>
           <div class="go-column go-column--50">
@@ -406,7 +406,7 @@ <h4 class="go-heading-4 go-heading--underlined">View</h4>
             <go-text-area
               [control]="message11"
               label="Your Message"
-              minlength="2">
+              [minlength]="2">
             </go-text-area>
           </div>
           <div class="go-column go-column--50">
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.ts
index 173bf349d..799748763 100644
--- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.ts
+++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/text-area-docs/text-area-docs.component.ts
@@ -111,7 +111,7 @@ export class TextAreaDocsComponent implements OnInit {
   <go-text-area
     [control]="message"
     label="Your Message"
-    maxlength="10">
+    [maxlength]="10">
   </go-text-area>
   `;
 
@@ -119,7 +119,7 @@ export class TextAreaDocsComponent implements OnInit {
   <go-text-area
     [control]="message"
     label="Your Message"
-    minlength="2">
+    [minlength]="2">
   </go-text-area>
   `;