Skip to content

Commit

Permalink
feat(design)!: move DaffBackdropModule into DaffSidebarModule (#2673
Browse files Browse the repository at this point in the history
)

BREAKING CHANGE: `DaffBackdropModule` code has been moved into `DaffSidebarModule`. It can no longer be used as a standalone component in `@daffodil/design`
  • Loading branch information
xelaint committed Apr 3, 2024
1 parent baa150e commit 01db447
Show file tree
Hide file tree
Showing 18 changed files with 178 additions and 222 deletions.
1 change: 1 addition & 0 deletions libs/design/sidebar/src/public_api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export * from './sidebar-header/sidebar-header.component';
export * from './sidebar-footer/sidebar-footer.component';
export * from './sidebar-header/sidebar-header-title/sidebar-header-title.directive';
export * from './sidebar-header/sidebar-header-action/sidebar-header-action.directive';
export * from './sidebar-viewport-backdrop/sidebar-viewport-backdrop.component';
export {
DaffSidebarMode,
DaffSidebarModeEnum,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export type DaffSidebarViewportBackdropAnimationState = 'interactable' | 'non-interactable';
export const getAnimationState = (interactable: boolean): DaffSidebarViewportBackdropAnimationState=> interactable ? 'interactable' : 'non-interactable';
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const animationDuration = '350ms';
const backdropTransitionOut = 'cubic-bezier(0.4, 0.0, 1, 1)';
const backdropTransitionIn = 'cubic-bezier(0.0, 0.0, 0.2, 1)';

export const daffBackdropAnimations: {
export const daffSidebarViewportBackdropAnimations: {
readonly fadeBackdrop: AnimationTriggerMetadata;
} = {
fadeBackdrop: trigger('fadeBackdrop', [
Expand Down
Original file line number Diff line number Diff line change
@@ -1,28 +1,27 @@
@use 'interactions';
@use '../../../scss/interactions';
@use '../helper/variables';

$bg-color: rgba(0, 0, 0, 0.3);
$highlight-color: rgba(0, 0, 0, 0);

:host {
display: block;
background: $bg-color;
-webkit-tap-highlight-color: $highlight-color;
position: absolute;
pointer-events: auto;
height: 100%;
width: 100%;
visibility: hidden;
pointer-events: none;
z-index: variables.$daff-sidebar-backdrop-z-index;

&.interactable {
visibility: visible;
pointer-events: all;
@include interactions.clickable;
}
}

.daff-backdrop {
background: $bg-color;
height: 100%;
width: 100%;


&--transparent {
&.transparent {
background: none;
}

Expand All @@ -32,9 +31,7 @@ $highlight-color: rgba(0, 0, 0, 0);
outline: 0;
}



&--fullscreen {
&.fullscreen {
position: absolute;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
import {
Component,
DebugElement,
} from '@angular/core';
import {
waitForAsync,
ComponentFixture,
TestBed,
} from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

import { DaffSidebarViewportBackdropComponent } from './sidebar-viewport-backdrop.component';

@Component({ template: `
<daff-sidebar-viewport-backdrop
[fullscreen]="fullscreen"
[transparent]="transparent"
(backdropClicked)="backdropFunction()"></daff-sidebar-viewport-backdrop>
` })
class WrapperComponent {
fullscreen = false;
showValue = true;
transparent = true;
backdropFunction = () => {};
}

describe('@daffodil/design/sidebar | DaffSidebarViewportBackdropComponent | Usage', () => {
let wrapper: WrapperComponent;
let fixture: ComponentFixture<WrapperComponent>;
let component: DaffSidebarViewportBackdropComponent;
let de: DebugElement;

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

beforeEach(() => {
fixture = TestBed.createComponent(WrapperComponent);
wrapper = fixture.componentInstance;
fixture.detectChanges();

de = fixture.debugElement.query(By.css('daff-sidebar-viewport-backdrop'));
component = de.componentInstance;
});

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

describe('the transparent property', () => {
describe('when trasparent="false"', () => {
it('should not add the class `transparent` to the host element', () => {
wrapper.transparent = false;
fixture.detectChanges();

expect(de.nativeElement.classList).not.toContain('transparent');
});
});

describe('when transparent="true"', () => {
it('should add the class `transparent` to the host element', () => {
wrapper.transparent = true;
fixture.detectChanges();

expect(de.nativeElement.classList).toContain('transparent');
});
});
});

describe('the fullscreen property', () => {
describe('when fullscreen="false"', () => {
it('should not add the class `fullscreen` to the host element', () => {
wrapper.fullscreen = false;
fixture.detectChanges();

expect(de.nativeElement.classList).not.toContain('fullscreen');
});
});

describe('when fullscreen="true"', () => {
it('should add the class `fullscreen` to the host element', () => {
wrapper.fullscreen = true;
fixture.detectChanges();
expect(de.nativeElement.classList).toContain('fullscreen');
});
});
});

describe('when the backdrop host element is clicked', () => {
it('should emit backdropClicked', () => {
spyOn(component.backdropClicked, 'emit');

de.nativeElement.click();

expect(component.backdropClicked.emit).toHaveBeenCalledWith();
});
});
});


describe('@daffodil/design/sidebar | DaffSidebarViewportBackdropComponent | Defaults', () => {
let fixture: ComponentFixture<DaffSidebarViewportBackdropComponent>;
let component: DaffSidebarViewportBackdropComponent;

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

beforeEach(() => {
fixture = TestBed.createComponent(DaffSidebarViewportBackdropComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

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

it('should set transparent to `false` by default', () => {
expect(component.transparent).toBe(false);
});

it('should set fullscreen to `false` by default', () => {
expect(component.fullscreen).toBe(false);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -7,29 +7,29 @@ import {
ChangeDetectionStrategy,
HostListener,
HostBinding,
ElementRef,
OnInit,
} from '@angular/core';

import { daffBackdropAnimations } from '../animation/backdrop-animation';
import { getAnimationState } from '../animation/backdrop-animation-state';
import { daffSidebarViewportBackdropAnimations } from './animation/backdrop-animation';
import { getAnimationState } from './animation/backdrop-animation-state';

@Component({
selector: 'daff-backdrop',
templateUrl: './backdrop.component.html',
styleUrls: ['./backdrop.component.scss'],
selector: 'daff-sidebar-viewport-backdrop',
template: '<ng-content></ng-content>',
styleUrls: ['./sidebar-viewport-backdrop.component.scss'],
animations: [
daffBackdropAnimations.fadeBackdrop,
daffSidebarViewportBackdropAnimations.fadeBackdrop,
],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DaffBackdropComponent implements OnInit {
export class DaffSidebarViewportBackdropComponent implements OnInit {

@HostBinding('class.interactable') interactableClass = true;

/**
* Determines whether or not the backdrop is transparent.
*/
// eslint-disable-next-line @typescript-eslint/no-inferrable-types
@Input() transparent: boolean = false;
@Input() @HostBinding('class.transparent') transparent = false;

/**
* Determines whether or not the backdrop is interactable.
Expand All @@ -40,16 +40,13 @@ export class DaffBackdropComponent implements OnInit {
* Boolean property that determines whether or not the
* backdrop should fill up its containing window.
*/
// eslint-disable-next-line @typescript-eslint/no-inferrable-types
@Input() fullscreen: boolean = false;
@Input() @HostBinding('class.fullscreen') fullscreen = false;

/**
* Output event triggered when the backdrop is clicked.
*/
@Output() backdropClicked: EventEmitter<void> = new EventEmitter<void>();

@HostBinding('class.interactable') interactableClass = true;

ngOnInit(): void {
this.interactableClass = this.interactable;
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
<ng-content select="daff-sidebar:not([side=right])"></ng-content>

<daff-backdrop
<daff-sidebar-viewport-backdrop
[@transformContent]="_animationState"
class="daff-sidebar-viewport__backdrop"
[interactable]="_backdropInteractable"
(backdropClicked)="_backdropClicked()">
</daff-backdrop>
</daff-sidebar-viewport-backdrop>

<div class="daff-sidebar-viewport__nav"
[@transformContent]="_animationState"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,14 +35,6 @@
}
}
}

&__backdrop {
height: 100%;
position: absolute;
width: 100%;
pointer-events: auto;
z-index: variables.$daff-sidebar-backdrop-z-index;
}
}

:host-context(daff-sidebar-viewport daff-sidebar-viewport) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,10 @@ import {
import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

import {
DaffBackdropComponent,
DaffBackdropModule,
} from '@daffodil/design';

import { DaffNavPlacement } from './nav-placement';
import { DaffSidebarViewportComponent } from './sidebar-viewport.component';
import { DaffSidebarComponent } from '../sidebar/sidebar.component';
import { DaffSidebarViewportBackdropComponent } from '../sidebar-viewport-backdrop/sidebar-viewport-backdrop.component';

@Component({ template: `
<div class="sidebar-content-wrapper">
Expand All @@ -44,14 +40,13 @@ describe('@daffodil/design/sidebar | DaffSidebarViewportComponent | Usage', () =
let wrapper: WrapperComponent;
let fixture: ComponentFixture<WrapperComponent>;
let component: DaffSidebarViewportComponent;
let backdrop: DaffBackdropComponent;
let backdrop: DaffSidebarViewportBackdropComponent;
let de: DebugElement;

beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [
NoopAnimationsModule,
DaffBackdropModule,
],
declarations: [
WrapperComponent,
Expand Down Expand Up @@ -100,10 +95,10 @@ describe('@daffodil/design/sidebar | DaffSidebarViewportComponent | Usage', () =
});
});

describe('when <backdrop> emits backdropClicked', () => {
describe('when <daff-sidebar-viewport-backdrop> emits backdropClicked', () => {
beforeEach(() => {
fixture.detectChanges();
backdrop = fixture.debugElement.query(By.css('daff-backdrop')).componentInstance;
backdrop = fixture.debugElement.query(By.css('daff-sidebar-viewport-backdrop')).componentInstance;
spyOn(component.backdropClicked, 'emit');

backdrop.backdropClicked.emit();
Expand Down Expand Up @@ -132,7 +127,6 @@ describe('@daffodil/design/sidebar | DaffSidebarViewportComponent | Usage', () =
imports: [
CommonModule,
NoopAnimationsModule,
DaffBackdropModule,
],
declarations: [
DaffSidebarComponent,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ import {
} from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

import { DaffBackdropModule } from '@daffodil/design';

import { DaffSidebarViewportComponent } from './../sidebar-viewport.component';
import { DaffSidebarAnimationStates } from '../../animation/sidebar-animation';
import { DaffSidebarComponent } from '../../sidebar/sidebar.component';
Expand All @@ -20,7 +18,6 @@ describe('@daffodil/design/sidebar | DaffSidebarViewportComponent | Defaults', (
TestBed.configureTestingModule({
imports: [
NoopAnimationsModule,
DaffBackdropModule,
A11yModule,
],
declarations: [
Expand Down
Loading

0 comments on commit 01db447

Please sign in to comment.