feat(design): allow multiple sidebars of various modes and sides

This reworks to use new modes: 1. side 2. side-fixed 3. over 4. under Additionally, we now better support sidebars on each side of the viewport. BREAKING CHANGE: The sidebar now holds the state of the sidebar (instead of the viewport), specifically "mode" and "open".
graycoreio · Jul 21, 2023 · dd6bc28 · dd6bc28
1 parent a3be91f
commit dd6bc28
Show file tree

Hide file tree

Showing 63 changed files with 1,318 additions and 385 deletions.
diff --git a/apps/design-land/src/app/app.component.html b/apps/design-land/src/app/app.component.html
@@ -1,5 +1,5 @@
-<daff-sidebar-viewport>
-  <daff-sidebar class="design-land__sidebar">
+<daff-sidebar-viewport class="design-land__viewport" (backdropClicked)="toggleOpen()">
+  <daff-sidebar class="design-land__sidebar" [mode]="mode$ | async" [open]="open">
     <daff-link-set>
       <div daffLinkSetHeading>Foundations</div>
       <a daff-link-set-item routerLink="color">Color</a>
@@ -27,10 +27,10 @@
       <a daff-link-set-item routerLink="card">Card</a>
       <a daff-link-set-item routerLink="container">Container</a>
       <a daff-link-set-item routerLink="feature">Feature</a>
-      <a daff-link-set-item  routerLink="form">Form</a>
-        <daff-link-set>
-          <a daff-link-set-item routerLink="quantity-field">Quantity Field</a>
-        </daff-link-set>
+      <a daff-link-set-item routerLink="form">Form</a>
+      <daff-link-set>
+        <a daff-link-set-item routerLink="quantity-field">Quantity Field</a>
+      </daff-link-set>
       <a daff-link-set-item routerLink="hero">Hero</a>
       <a daff-link-set-item routerLink="image-gallery">Image Gallery</a>
       <a daff-link-set-item routerLink="link-set">Link Set</a>
@@ -42,13 +42,17 @@
       <a daff-link-set-item routerLink="paginator">Paginator</a>
       <a daff-link-set-item routerLink="qty-dropdown">Quantity Dropdown</a>
       <a daff-link-set-item routerLink="sidebar">Sidebar</a>
-
     </daff-link-set>
   </daff-sidebar>
-  <div class="design-land__content">
+  <nav daff-sidebar-viewport-nav daff-navbar>
+    <button daff-icon-button (click)="toggleOpen()" aria-label="Open Menu">
+      <fa-icon [icon]="faBars"></fa-icon>
+    </button>
     <daff-theme-switch-button class="design-land__theme-switch"></daff-theme-switch-button>
+  </nav>
+  <div class="design-land__content">
     <daff-article>
       <router-outlet></router-outlet>
     </daff-article>
   </div>
-</daff-sidebar-viewport>
+</daff-sidebar-viewport>
diff --git a/apps/design-land/src/app/app.component.scss b/apps/design-land/src/app/app.component.scss
@@ -1,11 +1,10 @@
 .design-land {
   &__theme-switch {
-    display: flex;
-    justify-content: right;
-    margin-bottom: 24px;
+    margin-left: auto;
   }
-
+  
   &__sidebar {
+    --daff-sidebar-side-fixed-top-shift: 64px;
     padding: 24px;
   }
 
@@ -14,6 +13,12 @@
   }
 }
 
+nav {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
 daff-link-set {
   margin: 0 0 24px 0;
 

diff --git a/apps/design-land/src/app/app.component.ts b/apps/design-land/src/app/app.component.ts
@@ -1,10 +1,21 @@
+import { BreakpointObserver } from '@angular/cdk/layout';
 import {
   Component,
   Injector,
   ComponentFactoryResolver,
 } from '@angular/core';
-import { createCustomElement } from '@angular/elements';
+import { faBars } from '@fortawesome/free-solid-svg-icons';
+import {
+  Observable,
+  map,
+  tap,
+} from 'rxjs';
 
+import {
+  DaffBreakpoints,
+  DaffSidebarMode,
+  DaffSidebarModeEnum,
+} from '@daffodil/design';
 import { ACCORDION_EXAMPLES } from '@daffodil/design/accordion/examples';
 import { ARTICLE_EXAMPLES } from '@daffodil/design/article/examples';
 import { BUTTON_EXAMPLES } from '@daffodil/design/button/examples';
@@ -24,18 +35,28 @@ import { NAVBAR_EXAMPLES } from '@daffodil/design/navbar/examples';
 import { PAGINATOR_EXAMPLES } from '@daffodil/design/paginator/examples';
 import { QUANTITY_FIELD_EXAMPLES } from '@daffodil/design/quantity-field/examples';
 import { RADIO_EXAMPLES } from '@daffodil/design/radio/examples';
+import { SIDEBAR_EXAMPLES } from '@daffodil/design/sidebar/examples';
 
 import { createCustomElementFromExample } from './core/elements/create-element-from-example';
 
+
+
 @Component({
   selector: 'design-land-app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
 export class DesignLandAppComponent {
+  faBars = faBars;
+
+  public mode$: Observable<DaffSidebarMode>;
+
+  public open = false;
+
   constructor(
     injector: Injector,
     private componentFactoryResolver: ComponentFactoryResolver,
+    private breakpoint: BreakpointObserver,
   ) {
     [
       ...ARTICLE_EXAMPLES,
@@ -57,6 +78,7 @@ export class DesignLandAppComponent {
       ...PAGINATOR_EXAMPLES,
       ...IMAGE_EXAMPLES,
       ...INPUT_EXAMPLES,
+      ...SIDEBAR_EXAMPLES,
     ].map((componentExample) => createCustomElementFromExample(componentExample, injector))
       .map((customElement) => {
         // Register the custom element with the browser.
@@ -65,5 +87,13 @@ export class DesignLandAppComponent {
           customElement.element,
         );
       });
+    this.open = this.breakpoint.isMatched(DaffBreakpoints.BIG_TABLET);
+    this.mode$ = this.breakpoint.observe(DaffBreakpoints.BIG_TABLET).pipe(
+      map((match) => match.matches ? DaffSidebarModeEnum.SideFixed : DaffSidebarModeEnum.Under),
+    );
+  }
+
+  toggleOpen() {
+    this.open = !this.open;
   }
 }
diff --git a/apps/design-land/src/app/app.module.ts b/apps/design-land/src/app/app.module.ts
@@ -2,12 +2,15 @@ import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 import {
   DaffSidebarModule,
   DaffLinkSetModule,
   DaffArticleModule,
   DAFF_THEME_INITIALIZER,
+  DaffNavbarModule,
+  DaffButtonModule,
 } from '@daffodil/design';
 import { DaffThemeSwitchButtonModule } from '@daffodil/theme-switch';
 
@@ -24,6 +27,9 @@ import { DesignLandAppComponent } from './app.component';
     DaffLinkSetModule,
     DaffArticleModule,
     DaffThemeSwitchButtonModule,
+    DaffNavbarModule,
+    DaffButtonModule,
+    FontAwesomeModule,
   ],
   declarations: [
     DesignLandAppComponent,

diff --git a/apps/design-land/src/app/sidebar/sidebar.component.html b/apps/design-land/src/app/sidebar/sidebar.component.html
@@ -1,22 +1,21 @@
+<h1 daffArticleTitle>Sidebar</h1>
+
 <design-land-article-encapsulated>
-  <daff-form-field>
-    <select daff-native-select [(ngModel)]="mode">
-      <option value="push">Push (push)</option>
-      <option value="side">Side (side)</option>
-      <option value="over">Over (over)</option>
-      <option value="fixed">Fixed (fixed)</option>
-    </select>
-  </daff-form-field>
-
-  <button daff-button (click)="open = !open">{{ open ? "Close" : "Open" }}</button>
-
-  <daff-sidebar-viewport [mode]="mode" [opened]="open">
-      <daff-sidebar>
-        <a daff-link-set-item routerLink="accordion">Accordion</a><br>
-        <a daff-link-set-item routerLink="article">Article</a><br>
-      </daff-sidebar>
-      <p>Some Content</p>
-  </daff-sidebar-viewport>
-  <h1>Outside Focus   </h1>
-  <input>    <input>     
+  <design-land-example-viewer-container example="basic-sidebar"></design-land-example-viewer-container>
 </design-land-article-encapsulated>
+
+<design-land-article-encapsulated>
+  <design-land-example-viewer-container example="sidebar-with-sticky"></design-land-example-viewer-container>
+</design-land-article-encapsulated>
+
+<design-land-article-encapsulated>
+  <design-land-example-viewer-container example="two-fixed-sidebars-either-side"></design-land-example-viewer-container>
+</design-land-article-encapsulated>
+
+<design-land-article-encapsulated>
+  <design-land-example-viewer-container example="fixed-and-over-sidebar"></design-land-example-viewer-container>
+</design-land-article-encapsulated>
+
+<design-land-article-encapsulated>
+  <design-land-example-viewer-container example="under-sidebar"></design-land-example-viewer-container>
+</design-land-article-encapsulated>
diff --git a/apps/design-land/src/app/sidebar/sidebar.component.ts b/apps/design-land/src/app/sidebar/sidebar.component.ts
@@ -1,16 +1,8 @@
-import {
-  Component,
-  OnInit,
-} from '@angular/core';
-
-import { DaffSidebarMode } from '@daffodil/design';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'design-land-sidebar',
   templateUrl: './sidebar.component.html',
   styleUrls: ['./sidebar.component.scss'],
 })
-export class DesignLandSidebarComponent {
-  mode: DaffSidebarMode = 'push';
-  open = false;
-}
+export class DesignLandSidebarComponent {}
diff --git a/apps/design-land/src/app/sidebar/sidebar.module.ts b/apps/design-land/src/app/sidebar/sidebar.module.ts
@@ -1,16 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-
-import {
-  DaffSidebarModule,
-  DaffButtonModule,
-  DaffNativeSelectModule,
-  DaffFormFieldModule,
-  DaffArticleModule,
-} from '@daffodil/design';
 
 import { DesignLandArticleEncapsulatedModule } from '../core/article-encapsulated/article-encapsulated.module';
+import { DesignLandExampleViewerModule } from '../core/code-preview/container/example-viewer.module';
 import { DesignLandSidebarRoutingModule } from './sidebar-routing.module';
 import { DesignLandSidebarComponent } from './sidebar.component';
 
@@ -20,12 +12,7 @@ import { DesignLandSidebarComponent } from './sidebar.component';
   ],
   imports: [
     CommonModule,
-    FormsModule,
-    DaffArticleModule,
-    DaffNativeSelectModule,
-    DaffFormFieldModule,
-    DaffButtonModule,
-    DaffSidebarModule,
+    DesignLandExampleViewerModule,
     DesignLandSidebarRoutingModule,
     DesignLandArticleEncapsulatedModule,
   ],

diff --git a/libs/design/scss/global.scss b/libs/design/scss/global.scss
@@ -24,6 +24,7 @@ html {
 	line-height: 1.5;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
+	--daff-sidebar-side-fixed-top-shift: 0;
 }
 
 html {

diff --git a/libs/design/sidebar/examples/ng-package.json b/libs/design/sidebar/examples/ng-package.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/design/sidebar/examples",
+  "deleteDestPath": false,
+  "lib": {
+    "entryFile": "src/index.ts",
+    "styleIncludePaths": ["../../src/scss"]
+  }
+} 
diff --git a/libs/design/sidebar/examples/package.json b/libs/design/sidebar/examples/package.json
@@ -0,0 +1,3 @@
+{
+  "name": "@daffodil/design/sidebar/examples"
+} 
diff --git a/libs/design/sidebar/examples/src/basic-sidebar/basic-sidebar.component.html b/libs/design/sidebar/examples/src/basic-sidebar/basic-sidebar.component.html
@@ -0,0 +1,11 @@
+<daff-sidebar-viewport>
+  <daff-sidebar>
+    <a daff-link-set-item routerLink="accordion">Accordion</a><br>
+    <a daff-link-set-item routerLink="article">Article</a><br>
+  </daff-sidebar>
+  <div>
+    <nav daff-navbar>
+      <div>Basic Sidebar</div>
+    </nav>
+  </div>
+</daff-sidebar-viewport>
diff --git a/libs/design/sidebar/examples/src/basic-sidebar/basic-sidebar.component.ts b/libs/design/sidebar/examples/src/basic-sidebar/basic-sidebar.component.ts
@@ -0,0 +1,15 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'basic-sidebar',
+  templateUrl: './basic-sidebar.component.html',
+  styles: ['daff-sidebar-viewport { height: 300px }'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BasicSidebarComponent {
+
+}
diff --git a/libs/design/sidebar/examples/src/basic-sidebar/basic-sidebar.module.ts b/libs/design/sidebar/examples/src/basic-sidebar/basic-sidebar.module.ts
@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+
+import {
+  DaffSidebarModule,
+  DaffNavbarModule,
+} from '@daffodil/design';
+
+import { BasicSidebarComponent } from './basic-sidebar.component';
+
+@NgModule({
+  imports: [
+    DaffSidebarModule,
+    DaffNavbarModule,
+  ],
+  declarations: [
+    BasicSidebarComponent,
+  ],
+  exports: [
+    BasicSidebarComponent,
+  ],
+})
+export class BasicSidebarModule { }
diff --git a/.../design/sidebar/examples/src/fixed-and-over-sidebar/fixed-and-over-sidebar.component.html b/.../design/sidebar/examples/src/fixed-and-over-sidebar/fixed-and-over-sidebar.component.html
@@ -0,0 +1,21 @@
+<daff-sidebar-viewport class="viewport" (backdropClicked)="closeOverSidebar()">
+  <daff-sidebar mode="side-fixed" [open]="true">
+    <a daff-link-set-item routerLink="accordion">Accordion</a><br>
+    <a daff-link-set-item routerLink="article">Article</a><br>
+  </daff-sidebar>
+  <daff-sidebar mode="over" side="right" [open]="overOpen">
+    <a daff-link-set-item routerLink="accordion">Accordion</a><br>
+    <a daff-link-set-item routerLink="article">Article</a><br>
+  </daff-sidebar>
+  <div>
+    <nav daff-navbar>
+      <button daff-button (click)="openOverSidebar()">
+        Open
+      </button>
+    </nav>
+    <div class="inner-layout">
+      <div class="filler">Content</div>
+      <div class="inner-sticky">Some Other Content</div>
+    </div>
+  </div>
+</daff-sidebar-viewport>
diff --git a/.../design/sidebar/examples/src/fixed-and-over-sidebar/fixed-and-over-sidebar.component.scss b/.../design/sidebar/examples/src/fixed-and-over-sidebar/fixed-and-over-sidebar.component.scss
@@ -0,0 +1,24 @@
+nav {
+  justify-content: flex-end;
+}
+daff-sidebar-viewport { height: 300px }
+
+
+.inner-layout {
+  position: relative;
+  display: flex;
+}
+
+.filler {
+  flex-grow: 1;
+  height: 600px;
+  padding: 0 16px;
+}
+
+.inner-sticky {
+  position: sticky;
+  padding: 20px;
+  top: 0;
+  height: 200px;
+  width: 300px;
+}