diff --git a/libs/design/text-snippet/README.md b/libs/design/text-snippet/README.md new file mode 100644 index 0000000000..df2c8e43ff --- /dev/null +++ b/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. \ No newline at end of file diff --git a/libs/design/text-snippet/examples/ng-package.json b/libs/design/text-snippet/examples/ng-package.json new file mode 100644 index 0000000000..e0bd308d7b --- /dev/null +++ b/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"] + } +} \ No newline at end of file diff --git a/libs/design/text-snippet/examples/src/basic-text-snippet/basic-text-snippet.component.html b/libs/design/text-snippet/examples/src/basic-text-snippet/basic-text-snippet.component.html new file mode 100644 index 0000000000..481675c898 --- /dev/null +++ b/libs/design/text-snippet/examples/src/basic-text-snippet/basic-text-snippet.component.html @@ -0,0 +1,3 @@ + + 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. + \ No newline at end of file diff --git a/libs/design/text-snippet/examples/src/basic-text-snippet/basic-text-snippet.component.ts b/libs/design/text-snippet/examples/src/basic-text-snippet/basic-text-snippet.component.ts new file mode 100644 index 0000000000..06f04b494b --- /dev/null +++ b/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 {} diff --git a/libs/design/text-snippet/examples/src/basic-text-snippet/basic-text-snippet.module.ts b/libs/design/text-snippet/examples/src/basic-text-snippet/basic-text-snippet.module.ts new file mode 100644 index 0000000000..d6e92177b3 --- /dev/null +++ b/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 { } diff --git a/libs/design/text-snippet/examples/src/index.ts b/libs/design/text-snippet/examples/src/index.ts new file mode 100644 index 0000000000..4aaf8f92ed --- /dev/null +++ b/libs/design/text-snippet/examples/src/index.ts @@ -0,0 +1 @@ +export * from './public_api'; diff --git a/libs/design/text-snippet/examples/src/public_api.ts b/libs/design/text-snippet/examples/src/public_api.ts new file mode 100644 index 0000000000..2d1cf648be --- /dev/null +++ b/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 }, +]; diff --git a/libs/design/text-snippet/ng-package.json b/libs/design/text-snippet/ng-package.json new file mode 100644 index 0000000000..14833aac7d --- /dev/null +++ b/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"] + } +} \ No newline at end of file diff --git a/libs/design/text-snippet/src/index.ts b/libs/design/text-snippet/src/index.ts new file mode 100644 index 0000000000..4aaf8f92ed --- /dev/null +++ b/libs/design/text-snippet/src/index.ts @@ -0,0 +1 @@ +export * from './public_api'; diff --git a/libs/design/text-snippet/src/public_api.ts b/libs/design/text-snippet/src/public_api.ts new file mode 100644 index 0000000000..dff714d487 --- /dev/null +++ b/libs/design/text-snippet/src/public_api.ts @@ -0,0 +1 @@ +export * from './text-snippet.component'; diff --git a/libs/design/text-snippet/src/text-snippet.component.html b/libs/design/text-snippet/src/text-snippet.component.html new file mode 100644 index 0000000000..a10b2f71ea --- /dev/null +++ b/libs/design/text-snippet/src/text-snippet.component.html @@ -0,0 +1,8 @@ +
+
+ +
+ diff --git a/libs/design/text-snippet/src/text-snippet.component.scss b/libs/design/text-snippet/src/text-snippet.component.scss new file mode 100644 index 0000000000..1efd50d4c9 --- /dev/null +++ b/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; + } + } +} diff --git a/libs/design/text-snippet/src/text-snippet.component.spec.ts b/libs/design/text-snippet/src/text-snippet.component.spec.ts new file mode 100644 index 0000000000..43a21b44a7 --- /dev/null +++ b/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: 'content', + standalone: true, + imports: [ + DaffButtonModule, + DaffTextSnippetComponent, + ], +}) + +class WrapperComponent { + condensed = true; + html = ''; +} + +describe('DaffTextSnippetComponent', () => { + let fixture: ComponentFixture; + 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 = '

Some Content

'; + 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 = ''; + 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 = '
'; + 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(); + }); +}); diff --git a/libs/design/text-snippet/src/text-snippet.component.ts b/libs/design/text-snippet/src/text-snippet.component.ts new file mode 100644 index 0000000000..2d1c32bbe0 --- /dev/null +++ b/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 = 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(); + } +}