feat(design): create DaffTextSnippetComponent

libs/design/text-snippet/README.md

@@ -0,0 +1,2 @@
+# Text Snippet
+The text snippet component shows a snippet of text, with the ability to show or hide content beyond one line of text.

libs/design/text-snippet/examples/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-entrypoint.schema.json",
+  "lib": {
+    "entryFile": "src/index.ts",
+    "styleIncludePaths": ["../../scss"]
+  }
+}

libs/design/text-snippet/examples/src/basic-text-snippet/basic-text-snippet.component.html

@@ -0,0 +1,3 @@
+<daff-text-snippet>
+	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</daff-text-snippet>

libs/design/text-snippet/examples/src/basic-text-snippet/basic-text-snippet.component.ts

@@ -0,0 +1,12 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'basic-text-snippet',
+  templateUrl: './basic-text-snippet.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BasicTextSnippetComponent {}

libs/design/text-snippet/examples/src/basic-text-snippet/basic-text-snippet.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+
+import { DaffTextSnippetComponent } from '@daffodil/design/text-snippet';
+
+import { BasicTextSnippetComponent } from './basic-text-snippet.component';
+
+@NgModule({
+  declarations: [
+    BasicTextSnippetComponent,
+  ],
+  exports: [
+    BasicTextSnippetComponent,
+  ],
+  imports: [
+    DaffTextSnippetComponent,
+  ],
+})
+export class BasicTextSnippetComponentModule { }

libs/design/text-snippet/examples/src/index.ts

@@ -0,0 +1 @@
+export * from './public_api';

libs/design/text-snippet/examples/src/public_api.ts

@@ -0,0 +1,8 @@
+import { ComponentExample } from '@daffodil/design';
+
+import { BasicTextSnippetComponent } from './basic-text-snippet/basic-text-snippet.component';
+import { BasicTextSnippetComponentModule } from './basic-text-snippet/basic-text-snippet.module';
+
+export const TEXT_SNIPPET_EXAMPLES: ComponentExample[] = [
+  { component: BasicTextSnippetComponent, module: BasicTextSnippetComponentModule },
+];

libs/design/text-snippet/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-entrypoint.schema.json",
+  "lib": {
+    "entryFile": "src/index.ts",
+    "styleIncludePaths": ["../src/scss"]
+  }
+}

libs/design/text-snippet/src/index.ts

@@ -0,0 +1 @@
+export * from './public_api';

libs/design/text-snippet/src/public_api.ts

@@ -0,0 +1 @@
+export * from './text-snippet.component';

libs/design/text-snippet/src/text-snippet.component.html

@@ -0,0 +1,8 @@
+<div class="daff-text-snippet__content daff-text-snippet__html" #htmlEl [class.condensed]="condensed" [innerHtml]="html" *ngIf="html"></div>
+<div class="daff-text-snippet__content daff-text-snippet__ngcontent" #contentEl [class.condensed]="condensed" *ngIf="!html">
+  <ng-content></ng-content>
+</div>
+<button daff-underline-button color="theme-contrast" [attr.aria-expanded]="!condensed ? true : false" (click)="toggleSnippet()">
+  <ng-container *ngIf="condensed">Show More</ng-container>
+  <ng-container *ngIf="!condensed">Show Less</ng-container>
+</button>

libs/design/text-snippet/src/text-snippet.component.scss

@@ -0,0 +1,37 @@
+:host {
+	display: block;
+	position: relative;
+
+	::ng-deep { // stylelint-disable-line selector-pseudo-element-no-unknown
+		.daff-text-snippet__content {
+			> {
+				* {
+					&:first-child {
+						margin-top: 0;
+					}
+
+					&:last-child {
+						margin-bottom: 0;
+					}
+				}
+			}
+		}
+
+		h2 {
+			&:first-of-type {
+				margin-top: 0;
+			}
+		}
+	}
+}
+
+.daff-text-snippet {
+	&__content {
+		display: block;
+
+		&.condensed { // stylelint-disable-line selector-class-pattern
+			width: 100%;
+			overflow: hidden;
+		}
+	}
+}

libs/design/text-snippet/src/text-snippet.component.spec.ts

@@ -0,0 +1,99 @@
+import {
+  Component,
+  DebugElement,
+} from '@angular/core';
+import {
+  TestBed,
+  ComponentFixture,
+  waitForAsync,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { DaffButtonModule } from '@daffodil/design/button';
+
+import { DaffTextSnippetComponent } from './text-snippet.component';
+
+@Component({
+  template: '<daff-text-snippet [condensed]="condensed" [html]="html">content</daff-text-snippet>',
+  standalone: true,
+  imports: [
+    DaffButtonModule,
+    DaffTextSnippetComponent,
+  ],
+})
+
+class WrapperComponent {
+  condensed = true;
+  html = '';
+}
+
+describe('DaffTextSnippetComponent', () => {
+  let fixture: ComponentFixture<WrapperComponent>;
+  let wrapper: WrapperComponent;
+  let component: DaffTextSnippetComponent;
+  let componentDe: DebugElement;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        WrapperComponent,
+      ],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WrapperComponent);
+    wrapper = fixture.componentInstance;
+    componentDe = fixture.debugElement.query(By.css('daff-text-snippet'));
+    component = componentDe.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(fixture).toBeTruthy();
+  });
+
+  it('should pass through any html as `innerHtml` on the `html` div inside the component', () => {
+    wrapper.html = '<h1>Some Content</h1>';
+    fixture.detectChanges();
+    const htmlHolder = fixture.debugElement.query(By.css('.daff-text-snippet__html'));
+    expect(htmlHolder).toBeTruthy();
+    expect(htmlHolder.nativeElement.innerHTML).toEqual(wrapper.html);
+  });
+
+  it('should securely pass-through html onto the `html` div', () => {
+    wrapper.html = '<script>alert("hello")</script>';
+    fixture.detectChanges();
+    const htmlHolder = fixture.debugElement.query(By.css('.daff-text-snippet__html'));
+    expect(htmlHolder).toBeTruthy();
+    expect(htmlHolder.nativeElement.innerHTML).toEqual('');
+  });
+
+  it('should hide the other content if `html` is set', () => {
+    wrapper.html = '<div></div>';
+    fixture.detectChanges();
+    const contentHolder = fixture.debugElement.query(By.css('.daff-text-snippet__ngcontent'));
+    expect(contentHolder).toBeFalsy();
+  });
+
+  it('should show the other content if `html` is falsy', () => {
+    wrapper.html = '';
+    fixture.detectChanges();
+    const contentHolder = fixture.debugElement.query(By.css('.daff-text-snippet__ngcontent'));
+    expect(contentHolder).toBeTruthy();
+  });
+
+  it('should hide the html holder if `html` is falsy', () => {
+    wrapper.html = '';
+    fixture.detectChanges();
+    const contentHolder = fixture.debugElement.query(By.css('.daff-text-snippet__html'));
+    expect(contentHolder).toBeFalsy();
+  });
+
+  it('should apply a `condensed` class to the content when `condensed` is true', () => {
+    wrapper.condensed = true;
+    fixture.detectChanges();
+
+    expect(componentDe.query(By.css('.daff-text-snippet__content')).classes['condensed']).toBeTruthy();
+  });
+});

libs/design/text-snippet/src/text-snippet.component.ts

@@ -0,0 +1,69 @@
+import { NgIf } from '@angular/common';
+import {
+  Component,
+  Input,
+  ChangeDetectionStrategy,
+  EventEmitter,
+  Output,
+  ElementRef,
+  AfterViewInit,
+  ViewChild,
+} from '@angular/core';
+
+import { DaffButtonModule } from '@daffodil/design/button';
+
+@Component({
+  selector: 'daff-text-snippet',
+  templateUrl: './text-snippet.component.html',
+  styleUrls: ['./text-snippet.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    NgIf,
+    DaffButtonModule,
+  ],
+})
+export class DaffTextSnippetComponent implements AfterViewInit {
+
+  /**
+   * A property to track whether or not the component
+   * should render a condensed version of the content.
+   */
+  @Input() condensed = true;
+
+  @Input() html = '';
+
+  @ViewChild('contentEl', { read: ElementRef }) contentRef: ElementRef;
+  @ViewChild('htmlEl', { read: ElementRef }) htmlRef: ElementRef;
+
+  /**
+   * An output event that can be used to track the state of the component externally.
+   */
+  @Output() toggle: EventEmitter<boolean> = new EventEmitter();
+
+  calculateHeight() {
+    const ref = this.html ? this.htmlRef : this.contentRef;
+
+    if(!ref || !ref.nativeElement.firstChild) {
+      return;
+    }
+
+    const heightNode = ref.nativeElement.firstChild.nodeType === 1 ? ref.nativeElement.firstChild : ref.nativeElement;
+
+    if(this.condensed) {
+      ref.nativeElement.style.height = window.getComputedStyle(heightNode, null).getPropertyValue('line-height');
+    } else {
+      ref.nativeElement.style.height = null;
+    }
+  }
+
+  toggleSnippet() {
+    this.condensed = !this.condensed;
+    this.calculateHeight();
+    this.toggle.emit(this.condensed);
+  }
+
+  ngAfterViewInit() {
+    this.calculateHeight();
+  }
+}