-
-
Notifications
You must be signed in to change notification settings - Fork 28
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(daffio): create packages sidebar (#2725)
* feat(daffio): create packages sidebar * check breakpoint for packages sidebar * add sidebar footer and header to guides routes * check sidebar mode for showing header and footer * set content sidebar kind to const * update component file names * fix test --------- Co-authored-by: Peter Lauck <[email protected]>
- Loading branch information
Showing
34 changed files
with
555 additions
and
192 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
6 changes: 6 additions & 0 deletions
6
apps/daffio/src/app/core/sidebar/containers/docs-sidebar/docs-sidebar.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| <ng-container *ngrxLet="sidebarKind$; let sidebarKind"> | ||
| <ng-container *ngrxLet="isBigTablet$; let isBigTablet"> | ||
| <daffio-docs-packages-list-container *ngIf="isBigTablet || sidebarKind === contentSidebarKind"></daffio-docs-packages-list-container> | ||
| <daffio-docs-sidebar-content *ngIf="!isBigTablet && !sidebarKind"></daffio-docs-sidebar-content> | ||
| </ng-container> | ||
| </ng-container> |
149 changes: 149 additions & 0 deletions
149
apps/daffio/src/app/core/sidebar/containers/docs-sidebar/docs-sidebar.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,149 @@ | ||
| import { | ||
| BreakpointObserver, | ||
| BreakpointState, | ||
| } from '@angular/cdk/layout'; | ||
| import { HttpClientTestingModule } from '@angular/common/http/testing'; | ||
| import { | ||
| ComponentFixture, | ||
| TestBed, | ||
| waitForAsync, | ||
| } from '@angular/core/testing'; | ||
| import { By } from '@angular/platform-browser'; | ||
| import { RouterTestingModule } from '@angular/router/testing'; | ||
| import { LetModule } from '@ngrx/component'; | ||
| import { | ||
| MockStore, | ||
| provideMockStore, | ||
| } from '@ngrx/store/testing'; | ||
| import { DaffioDocsPackagesListContainerModule } from 'apps/daffio/src/app/guides/containers/packages-list/packages-list.module'; | ||
| import { BehaviorSubject } from 'rxjs'; | ||
|
|
||
| import { DaffBreakpoints } from '@daffodil/design'; | ||
|
|
||
| import { | ||
| DAFFIO_DOCS_CONTENT_SIDEBAR_KIND, | ||
| DaffioDocsSidebarContainer, | ||
| } from './docs-sidebar.component'; | ||
| import { DaffioDocsSidebarContentComponentModule } from '../../components/docs-sidebar-content/docs-sidebar-content.module'; | ||
| import { selectSidebarKind } from '../../reducers'; | ||
|
|
||
| describe('DaffioDocsSidebarContainer', () => { | ||
| let component: DaffioDocsSidebarContainer; | ||
| let fixture: ComponentFixture<DaffioDocsSidebarContainer>; | ||
| let store: MockStore; | ||
| let breakpointSpy: jasmine.SpyObj<BreakpointObserver>; | ||
| let breakpointState: BehaviorSubject<BreakpointState>; | ||
|
|
||
| beforeEach(waitForAsync(() => { | ||
| breakpointSpy = jasmine.createSpyObj('BreakpointObserver', ['observe']); | ||
|
|
||
| TestBed.configureTestingModule({ | ||
| imports: [ | ||
| LetModule, | ||
| RouterTestingModule, | ||
| HttpClientTestingModule, | ||
| DaffioDocsPackagesListContainerModule, | ||
| DaffioDocsSidebarContentComponentModule, | ||
| ], | ||
| declarations: [ | ||
| DaffioDocsSidebarContainer, | ||
| ], | ||
| providers: [ | ||
| provideMockStore(), | ||
| { | ||
| provide: BreakpointObserver, | ||
| useValue: breakpointSpy, | ||
| }, | ||
| ], | ||
| }) | ||
| .compileComponents(); | ||
| })); | ||
|
|
||
| beforeEach(() => { | ||
| store = TestBed.inject(MockStore); | ||
| breakpointState = new BehaviorSubject({ matches: false, breakpoints: {}}); | ||
| breakpointSpy.observe.withArgs(DaffBreakpoints.BIG_TABLET).and.returnValue(breakpointState); | ||
| store.overrideSelector(selectSidebarKind, undefined); | ||
|
|
||
| fixture = TestBed.createComponent(DaffioDocsSidebarContainer); | ||
| component = fixture.componentInstance; | ||
|
|
||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| afterEach(() => { | ||
| store.resetSelectors(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
|
|
||
| describe('when the breakpoint is big tablet', () => { | ||
| beforeEach(() => { | ||
| breakpointState.next({ | ||
| matches: true, | ||
| breakpoints: {}, | ||
| }); | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| describe('and when the sidebar kind is unset', () => { | ||
| beforeEach(() => { | ||
| store.overrideSelector(selectSidebarKind, undefined); | ||
| store.setState({}); | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should render <daffio-docs-packages-list-container>', () => { | ||
| expect(fixture.debugElement.query(By.css('daffio-docs-packages-list-container'))).toBeTruthy(); | ||
| }); | ||
| }); | ||
|
|
||
| describe('and when the sidebar kind is content', () => { | ||
| beforeEach(() => { | ||
| store.overrideSelector(selectSidebarKind, DAFFIO_DOCS_CONTENT_SIDEBAR_KIND); | ||
| store.setState({}); | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should render <daffio-docs-packages-list-container>', () => { | ||
| expect(fixture.debugElement.query(By.css('daffio-docs-packages-list-container'))).toBeTruthy(); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| describe('when the breakpoint is not big tablet', () => { | ||
| beforeEach(() => { | ||
| breakpointState.next({ | ||
| matches: false, | ||
| breakpoints: {}, | ||
| }); | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| describe('and when the sidebar kind is unset', () => { | ||
| beforeEach(() => { | ||
| store.overrideSelector(selectSidebarKind, undefined); | ||
| store.setState({}); | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should render <daffio-docs-sidebar-content>', () => { | ||
| expect(fixture.debugElement.query(By.css('daffio-docs-sidebar-content'))).toBeTruthy(); | ||
| }); | ||
| }); | ||
|
|
||
| describe('and when the sidebar kind is content', () => { | ||
| beforeEach(() => { | ||
| store.overrideSelector(selectSidebarKind, DAFFIO_DOCS_CONTENT_SIDEBAR_KIND); | ||
| store.setState({}); | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should render <daffio-docs-packages-list-container>', () => { | ||
| expect(fixture.debugElement.query(By.css('daffio-docs-packages-list-container'))).toBeTruthy(); | ||
| }); | ||
| }); | ||
| }); | ||
| }); |
48 changes: 48 additions & 0 deletions
48
apps/daffio/src/app/core/sidebar/containers/docs-sidebar/docs-sidebar.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import { BreakpointObserver } from '@angular/cdk/layout'; | ||
| import { | ||
| ChangeDetectionStrategy, | ||
| Component, | ||
| OnInit, | ||
| } from '@angular/core'; | ||
| import { | ||
| select, | ||
| Store, | ||
| } from '@ngrx/store'; | ||
| import { | ||
| Observable, | ||
| map, | ||
| } from 'rxjs'; | ||
|
|
||
| import { DaffBreakpoints } from '@daffodil/design'; | ||
|
|
||
| import { selectSidebarKind } from '../../reducers'; | ||
|
|
||
| export const DAFFIO_DOCS_CONTENT_SIDEBAR_KIND = 'content'; | ||
|
|
||
| /** | ||
| * @private | ||
| * This component stores all of the sidebars within daff.io/docs | ||
| */ | ||
| @Component({ | ||
| selector: 'daffio-docs-sidebar-container', | ||
| templateUrl: './docs-sidebar.component.html', | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| }) | ||
| export class DaffioDocsSidebarContainer implements OnInit { | ||
| contentSidebarKind = DAFFIO_DOCS_CONTENT_SIDEBAR_KIND; | ||
|
|
||
| constructor( | ||
| private store: Store, | ||
| private breakpointObserver: BreakpointObserver, | ||
| ) {} | ||
|
|
||
| sidebarKind$: Observable<string | undefined>; | ||
| isBigTablet$: Observable<boolean>; | ||
|
|
||
| ngOnInit() { | ||
| this.isBigTablet$ = this.breakpointObserver.observe(DaffBreakpoints.BIG_TABLET).pipe( | ||
| map(({ matches }) => matches), | ||
| ); | ||
| this.sidebarKind$ = this.store.pipe(select(selectSidebarKind)); | ||
| } | ||
| } |
26 changes: 26 additions & 0 deletions
26
apps/daffio/src/app/core/sidebar/containers/docs-sidebar/docs-sidebar.module.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { CommonModule } from '@angular/common'; | ||
| import { NgModule } from '@angular/core'; | ||
| import { RouterModule } from '@angular/router'; | ||
| import { LetModule } from '@ngrx/component'; | ||
| import { DaffioDocsPackagesListContainerModule } from 'apps/daffio/src/app/guides/containers/packages-list/packages-list.module'; | ||
|
|
||
| import { DaffioDocsSidebarContainer } from './docs-sidebar.component'; | ||
| import { DaffioDocsSidebarContentComponentModule } from '../../components/docs-sidebar-content/docs-sidebar-content.module'; | ||
|
|
||
| @NgModule({ | ||
| imports: [ | ||
| CommonModule, | ||
| RouterModule, | ||
| LetModule, | ||
|
|
||
| DaffioDocsPackagesListContainerModule, | ||
| DaffioDocsSidebarContentComponentModule, | ||
| ], | ||
| declarations: [ | ||
| DaffioDocsSidebarContainer, | ||
| ], | ||
| exports: [ | ||
| DaffioDocsSidebarContainer, | ||
| ], | ||
| }) | ||
| export class DaffioDocsSidebarContainerModule {} |
19 changes: 0 additions & 19 deletions
19
apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport-theme.scss
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.