Merge pull request #446 from TAMULib/sprint22-445-card_expand_collapse

Issue 445: Weaver Card Should Support Expand/Collapse on Card Header click.
TAMULib · Oct 19, 2021 · b028338 · b028338
2 parents 046db3e + 1e61034
commit b028338
Show file tree

Hide file tree

Showing 6 changed files with 172 additions and 7 deletions.
diff --git a/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.html b/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.html
@@ -1,5 +1,5 @@
-<div #animationRoot class="wvr-components wvr-card card {{additionalCardClasses}}" [ngClass]="{ 'text-center': textCenter }" style="width: 18rem;">
-  <div class="card-header {{additionalHeaderClasses}}" [wvrContentProjection]="eRef" template="card-header"></div>
+<div #animationRoot class="wvr-components wvr-card card {{additionalCardClasses}}" [ngClass]="{ 'text-center': textCenter, 'collapsed': isCollapsed }" style="width: 18rem;">
+  <div class="card-header {{additionalHeaderClasses}}" [wvrContentProjection]="eRef" template="card-header" (click)="toggleCollapsibleClick()"></div>
   <div class="card-image" [wvrContentProjection]="eRef" template="card-image"></div>
   <div [wvrContentProjection]="eRef" template="card-list-top"></div>
   <div class="card-body">

diff --git a/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.scss b/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.scss
@@ -8,8 +8,27 @@
   --card-color: var(--wvr-white);
 
   font-family: var(--wvr-font-family-sans-serif);
-  ::ng-deep {
 
+  & .wvr-card.collapsed .card-header {
+    border-bottom: 0px;
+  }
+
+  & .wvr-card.collapsed .card-body,
+  & .wvr-card.collapsed .card-footer {
+    visibility: collapse;
+    overflow: hidden;
+
+    height: 0px;
+    min-height: 0px;
+    max-height: 0px;
+
+    border: 0px;
+    margin: 0px;
+    padding: 0px;
+    outline: 0px;
+  }
+
+  ::ng-deep {
     .list-group-flush {
       border-top: 1px solid rgba(0, 0, 0, 0.125);
       border-bottom: 1px solid rgba(0, 0, 0, 0.125);
@@ -22,6 +41,6 @@
     .card-body {
       color: var(--card-body-color)
     }
-
   }
+
 }
diff --git a/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.spec.ts b/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.spec.ts
@@ -98,4 +98,46 @@ describe('WvrCardComponent', () => {
       .toBeTruthy();
   });
 
+  it('should collapse when collapsible and clicked while expanded', () => {
+    component.isCollapsed = false;
+    component.collapseMethod = 'click';
+    fixture.detectChanges();
+
+    const cardElem = fixture.elementRef.nativeElement as HTMLElement;
+    const cardHeaderElem = cardElem.querySelector('.card-header') as HTMLElement;
+
+    cardHeaderElem.dispatchEvent(new MouseEvent('click'));
+    fixture.detectChanges();
+    expect(component.isCollapsed)
+      .toBeTrue();
+  });
+
+  it('should not collapse when not collapsible and clicked while expanded', () => {
+    component.isCollapsed = false;
+    component.collapseMethod = 'none';
+    fixture.detectChanges();
+
+    const cardElem = fixture.elementRef.nativeElement as HTMLElement;
+    const cardHeaderElem = cardElem.querySelector('.card-header') as HTMLElement;
+
+    cardHeaderElem.dispatchEvent(new MouseEvent('click'));
+    fixture.detectChanges();
+    expect(component.isCollapsed)
+      .toBeFalse();
+  });
+
+  it('should expand while collapsed and clicked', () => {
+    component.isCollapsed = true;
+    component.collapseMethod = 'click';
+    fixture.detectChanges();
+
+    const cardElem = fixture.elementRef.nativeElement as HTMLElement;
+    const cardHeaderElem = cardElem.querySelector('.card-header') as HTMLElement;
+
+    cardHeaderElem.dispatchEvent(new MouseEvent('click'));
+    fixture.detectChanges();
+    expect(component.isCollapsed)
+      .toBeFalse();
+  });
+
 });
diff --git a/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.ts b/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, HostBinding, Injector, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostBinding, Injector, Input, OnInit } from '@angular/core';
 import { ThemeVariantName } from '../shared/theme';
 import { WvrBaseComponent } from '../shared/wvr-base.component';
 
@@ -11,7 +11,7 @@ import { WvrBaseComponent } from '../shared/wvr-base.component';
   styleUrls: ['./wvr-card.component.scss'],
   changeDetection: ChangeDetectionStrategy.Default
 })
-export class WvrCardComponent extends WvrBaseComponent {
+export class WvrCardComponent extends WvrBaseComponent implements OnInit {
 
   /** Allows for the override of the default 'wvre' sufix for psudo components. */
   @Input() selectorPrefix = 'wvre';
@@ -25,6 +25,15 @@ export class WvrCardComponent extends WvrBaseComponent {
   /** Used to describe the format of card. */
   @Input() panelFormat: 'solid' | 'outlined' | 'mixed';
 
+  /** Designate how to expand/collapse. */
+  @Input() collapseMethod: 'click' | 'none';
+
+  /** Designate the initial expanded/collapsed state. */
+  @Input() startCollapsed: boolean;
+
+  /** The collapsed/uncollapsed state. */
+  isCollapsed: boolean;
+
   @HostBinding('style.--card-header-color') get cardHeaderColor(): string {
     return this.panelFormat === 'outlined' ? 'var(--light-default-color)' : `var(--${this.themeVariant}-default-color)`;
   }
@@ -39,6 +48,24 @@ export class WvrCardComponent extends WvrBaseComponent {
   constructor(injector: Injector) {
     super(injector);
     this.themeVariant = 'primary';
+    this.collapseMethod = 'none';
+  }
+
+  /**
+   * Initialize properties dependent on @Input.
+   */
+  ngOnInit(): void {
+    super.ngOnInit();
+    this.isCollapsed = !!this.startCollapsed;
+  }
+
+  /**
+   * Toggle the collapsible state when clicked, if allowed.
+   */
+  toggleCollapsibleClick(): void {
+    if (this.collapseMethod === 'click') {
+      this.isCollapsed = !this.isCollapsed;
+    }
   }
 
   get additionalCardClasses(): string {

diff --git a/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.ud-examples.html b/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.ud-examples.html
@@ -11,7 +11,68 @@
         <wvre-text value="Card Title"></wvre-text>
       </template>
       <template card-image>
-        <img src="assets/lighthouse.svg" />
+        <img src="assets/lighthouse.svg">
+      </template>
+      <template card-list-top>
+        <wvre-list list-type="group-flush" context="info">
+          <wvre-list-item>
+            <wvre-text value="Item 1"></wvre-text>
+          </wvre-list-item>
+          <wvre-list-item context="warning">
+            <wvre-text value="Item 2"></wvre-text>
+          </wvre-list-item>
+          <wvre-list-item context="success">
+            <wvre-text value="Item 3"></wvre-text>
+          </wvre-list-item>
+        </wvre-list>
+      </template>
+      <template card-content>
+        <wvre-text value="This is a basic card body content"></wvre-text>
+      </template>
+      <template card-list-bottom>
+        <wvre-list list-type="group-flush" context="info">
+          <wvre-list-item>
+            <wvre-text value="Item 1"></wvre-text>
+          </wvre-list-item>
+          <wvre-list-item context="warning">
+            <wvre-text value="Item 2"></wvre-text>
+          </wvre-list-item>
+        </wvre-list>
+      </template>
+      <template card-links>
+        <a href="http://www.google.com" class="card-link">
+          <wvre-text value="Google"></wvre-text>
+        </a>
+        <a href="http://www.google.com" class="card-link">
+          <wvre-text value="Gmail"></wvre-text>
+        </a>
+      </template>
+      <template card-buttons>
+        <wvre-button theme-variant="secondary">
+          <wvre-text value="Card Button Text"></wvre-text>
+        </wvre-button>
+      </template>
+      <template card-footer>
+        <wvre-text class="text-muted" value="Card Footer"></wvre-text>
+      </template>
+    </wvre-card>
+  </snippet>
+</example>
+
+<example name="Collapsible Weaver Card">
+  <desciption>
+    The <code>wvre-card</code> component with collapse on header clicked enabled that is initially collapsed.
+  </desciption>
+  <snippet>
+    <wvre-card collapse-method="click" start-collapsed="true">
+      <template card-header>
+        <wvre-text value="Card Header"></wvre-text>
+      </template>
+      <template card-title>
+        <wvre-text value="Card Title"></wvre-text>
+      </template>
+      <template card-image>
+        <img src="assets/lighthouse.svg">
       </template>
       <template card-list-top>
         <wvre-list list-type="group-flush" context="info">

diff --git a/src/index.html b/src/index.html
@@ -378,6 +378,22 @@ <h4 class="alert-heading">
         <wvre-text value="Outlined Card Footer"></wvre-text>
       </template>
     </wvre-card>
+
+    <br>
+    <wvre-card text-center panel-format="outlined" theme-variant="warning" collapse-method="click" start-collapsed="true">
+      <template card-header>
+        <wvre-text value="Collapsible Card Header"></wvre-text>
+      </template>
+      <template card-title>
+        <wvre-text value="Collapsible Card Title"></wvre-text>
+      </template>
+      <template card-text>
+        <wvre-text value="With supporting text below as a natural lead-in to additional content."></wvre-text>
+      </template>
+      <template card-footer>
+        <wvre-text value="Collapsible Card Footer"></wvre-text>
+      </template>
+    </wvre-card>
   </div>
 
   <div class="container index-container">