Skip to content

Commit

Permalink
feat(design)!: change daffTextAlignmentMixin to a directive (#2922)
Browse files Browse the repository at this point in the history
BREAKING CHANGE: daffTextAlignmentMixin has been removed in favor of DaffTextAlignableDirective. Update usage by using the hostDirective feature.
  • Loading branch information
xelaint authored Jul 30, 2024
1 parent 98f19c8 commit ae6cb7e
Show file tree
Hide file tree
Showing 10 changed files with 188 additions and 260 deletions.
42 changes: 1 addition & 41 deletions libs/design/callout/src/callout/callout.component.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -79,47 +79,7 @@ describe('@daffodil/design/callout | DaffCalloutComponent', () => {
wrapper.textAlignment = 'left';
fixture.detectChanges();

expect(component.textAlignment).toEqual('left');
});

describe('setting the textAlignment', () => {
it('should add the class of the defined textAlignment to the host element', () => {
wrapper.textAlignment = 'left';
fixture.detectChanges();

expect(de.nativeElement.classList.contains('daff-left')).toEqual(true);
});

it('should set the default textAlignment to left', () => {
expect(component.textAlignment).toEqual('left');
});

describe('when textAlignment="left"', () => {
it('should add a class of "daff-left" to the host element', () => {
wrapper.textAlignment = 'left';
fixture.detectChanges();

expect(de.nativeElement.classList.contains('daff-left')).toBeTruthy();
});
});

describe('when textAlignment="center"', () => {
it('should add a class of "daff-center" to the host element', () => {
wrapper.textAlignment = 'center';
fixture.detectChanges();

expect(de.nativeElement.classList.contains('daff-center')).toBeTruthy();
});
});

describe('when textAlignment="right"', () => {
it('should add a class of "daff-right" to the host element', () => {
wrapper.textAlignment = 'right';
fixture.detectChanges();

expect(de.nativeElement.classList.contains('daff-right')).toBeTruthy();
});
});
expect(de.nativeElement.classList.contains('daff-left')).toEqual(true);
});

it('should take compact as an input', () => {
Expand Down
21 changes: 15 additions & 6 deletions libs/design/callout/src/callout/callout.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,7 @@ import {
DaffCompactable,
daffCompactableMixin,
DaffManageContainerLayoutDirective,
DaffTextAlignable,
daffTextAlignmentMixin,
DaffTextAlignableDirective,
} from '@daffodil/design';

/**
Expand All @@ -25,7 +24,7 @@ class DaffCalloutBase {
constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
}

const _daffCalloutBase = daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin(DaffCalloutBase, 'left')));
const _daffCalloutBase = daffColorMixin(daffCompactableMixin(DaffCalloutBase));

/**
* @inheritdoc
Expand All @@ -37,16 +36,26 @@ const _daffCalloutBase = daffColorMixin(daffCompactableMixin(daffTextAlignmentMi
encapsulation: ViewEncapsulation.None,
//todo(damienwebdev): remove once decorators hit stage 3 - https://github.com/microsoft/TypeScript/issues/7342
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['color', 'compact', 'textAlignment'],
inputs: ['color', 'compact'],
hostDirectives: [
{ directive: DaffArticleEncapsulatedDirective },
{ directive: DaffManageContainerLayoutDirective },
{
directive: DaffTextAlignableDirective,
inputs: ['textAlignment'],
},
],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DaffCalloutComponent extends _daffCalloutBase implements DaffColorable, DaffTextAlignable, DaffCompactable {
constructor(private elementRef: ElementRef, private renderer: Renderer2) {
export class DaffCalloutComponent extends _daffCalloutBase implements DaffColorable, DaffCompactable {
constructor(
private elementRef: ElementRef,
private renderer: Renderer2,
private textAlignable: DaffTextAlignableDirective,
) {
super(elementRef, renderer);

this.textAlignable.textAlignment = 'left';
}

/**
Expand Down
42 changes: 1 addition & 41 deletions libs/design/hero/src/hero/hero.component.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -76,47 +76,7 @@ describe('@daffodil/design/hero | DaffHeroComponent', () => {
wrapper.textAlignment = 'left';
fixture.detectChanges();

expect(component.textAlignment).toEqual('left');
});

describe('setting the textAlignment', () => {
it('should add the class of the defined textAlignment to the host element', () => {
wrapper.textAlignment = 'left';
fixture.detectChanges();

expect(de.nativeElement.classList.contains('daff-left')).toEqual(true);
});

it('should set the default textAlignment to left', () => {
expect(component.textAlignment).toEqual('left');
});

describe('when textAlignment="left"', () => {
it('should add a class of "daff-left" to the host element', () => {
wrapper.textAlignment = 'left';
fixture.detectChanges();

expect(de.nativeElement.classList.contains('daff-left')).toBeTruthy();
});
});

describe('when textAlignment="center"', () => {
it('should add a class of "daff-center" to the host element', () => {
wrapper.textAlignment = 'center';
fixture.detectChanges();

expect(de.nativeElement.classList.contains('daff-center')).toBeTruthy();
});
});

describe('when textAlignment="right"', () => {
it('should add a class of "daff-right" to the host element', () => {
wrapper.textAlignment = 'right';
fixture.detectChanges();

expect(de.nativeElement.classList.contains('daff-right')).toBeTruthy();
});
});
expect(de.nativeElement.classList.contains('daff-left')).toEqual(true);
});

it('should take compact as an input', () => {
Expand Down
23 changes: 17 additions & 6 deletions libs/design/hero/src/hero/hero.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import {
ChangeDetectionStrategy,
HostBinding,
Renderer2,
SimpleChanges,
OnChanges,
} from '@angular/core';

import {
Expand All @@ -14,8 +16,7 @@ import {
DaffCompactable,
daffCompactableMixin,
DaffManageContainerLayoutDirective,
DaffTextAlignable,
daffTextAlignmentMixin,
DaffTextAlignableDirective,
} from '@daffodil/design';

/**
Expand All @@ -25,7 +26,7 @@ class DaffHeroBase {
constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
}

const _daffHeroBase = daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin(DaffHeroBase, 'left')));
const _daffHeroBase = daffColorMixin(daffCompactableMixin(DaffHeroBase));

/**
* @inheritdoc
Expand All @@ -37,16 +38,26 @@ const _daffHeroBase = daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin
encapsulation: ViewEncapsulation.None,
//todo(damienwebdev): remove once decorators hit stage 3 - https://github.com/microsoft/TypeScript/issues/7342
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['color', 'compact', 'textAlignment'],
inputs: ['color', 'compact'],
hostDirectives: [
{ directive: DaffArticleEncapsulatedDirective },
{ directive: DaffManageContainerLayoutDirective },
{
directive: DaffTextAlignableDirective,
inputs: ['textAlignment'],
},
],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DaffHeroComponent extends _daffHeroBase implements DaffColorable, DaffTextAlignable, DaffCompactable {
constructor(private elementRef: ElementRef, private renderer: Renderer2) {
export class DaffHeroComponent extends _daffHeroBase implements DaffColorable, DaffCompactable {
constructor(
private elementRef: ElementRef,
private renderer: Renderer2,
private textAlignable: DaffTextAlignableDirective,
){
super(elementRef, renderer);

this.textAlignable.defaultAlignment = 'left';
}

/**
Expand Down
2 changes: 1 addition & 1 deletion libs/design/src/core/text-alignable/public_api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@ export {
DaffTextAlignment,
DaffTextAlignmentEnum,
} from './text-alignable';
export { daffTextAlignmentMixin } from './text-alignable-mixin';
export { DaffTextAlignableDirective } from './text-alignable.directive';
57 changes: 0 additions & 57 deletions libs/design/src/core/text-alignable/text-alignable-mixin.ts

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import {
Component,
DebugElement,
} from '@angular/core';
import {
waitForAsync,
ComponentFixture,
TestBed,
} from '@angular/core/testing';
import { By } from '@angular/platform-browser';

import { DaffTextAlignment } from './text-alignable';
import { DaffTextAlignableDirective } from './text-alignable.directive';

@Component({
template: `
<div daffTextAlignable [textAlignment]="textAlignment"></div>`,
})

class WrapperComponent {
textAlignment: DaffTextAlignment;
}

describe('@daffodil/design | DaffTextAlignableDirective', () => {
let wrapper: WrapperComponent;
let de: DebugElement;
let fixture: ComponentFixture<WrapperComponent>;
let directive: DaffTextAlignableDirective;

beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [
WrapperComponent,
],
imports: [
DaffTextAlignableDirective,
],
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(WrapperComponent);
wrapper = fixture.componentInstance;
de = fixture.debugElement.query(By.css('[daffTextAlignable]'));

directive = de.injector.get(DaffTextAlignableDirective);
fixture.detectChanges();
});

it('should create', () => {
expect(wrapper).toBeTruthy();
expect(directive).toBeTruthy();
});

it('should take textAlignment as an input', () => {
expect(directive.textAlignment).toEqual(wrapper.textAlignment);
});

it('should add a class of .daff-left to the host element if textAlignment is set to left', () => {
wrapper.textAlignment = 'left';
fixture.detectChanges();

expect(directive.class).toEqual(jasmine.objectContaining({
'daff-left': true,
}));
});

it('should add a class of .daff-center to the host element if textAlignment is set to center', () => {
wrapper.textAlignment = 'center';
fixture.detectChanges();

expect(directive.class).toEqual(jasmine.objectContaining({
'daff-center': true,
}));
});

it('should add a class of .daff-right to the host element if textAlignment is set to right', () => {
wrapper.textAlignment = 'right';
fixture.detectChanges();

expect(directive.class).toEqual(jasmine.objectContaining({
'daff-right': true,
}));
});
});
Loading

0 comments on commit ae6cb7e

Please sign in to comment.