Feature/226 optimise dropdown for mobile devices

.github/workflows/semantic-release.yml

@@ -0,0 +1,44 @@
+name: Run semantic release
+on:
+  push:
+    branches: [ alpha ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: "14"
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - uses: actions/cache@v2
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install dependencies
+        run: yarn install --prefer-offline --frozen-lockfile --silent
+
+      - name: Build affected libs
+        # run: npx nx run chlorophyll:build
+        run: npx nx affected --target build --base=origin/main
+
+      - name: Release affected libs
+        # run: npx nx run chlorophyll:release --verbose
+        run: npx nx affected --target release --base=origin/main
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+          HUSKY: 0

.storybook/postcss.config.js

@@ -2,5 +2,6 @@ module.exports = {
   // Add your installed PostCSS plugins here:
   plugins: [
     require('autoprefixer'),
+    require('cssnano'),
   ],
 };

apps/angular-lib-dev/src/app/dropdown/dropdown.module.ts

@@ -4,7 +4,6 @@ import { CommonModule } from '@angular/common'
 import { DropdownRoutingModule } from './dropdown-routing.module'
 import { DropdownComponent } from './dropdown.component'
 import { ReactiveFormsModule } from '@angular/forms'
-// eslint-disable-next-line
 import { NggDropdownModule } from '@sebgroup/green-angular'
 
 @NgModule({

apps/angular-lib-dev/src/app/segmented-control/segmented-control.module.ts

@@ -5,7 +5,6 @@ import { SegmentedControlRoutingModule } from './segmented-control-routing.modul
 import { SegmentedControlComponent } from './segmented-control.component'
 import { OptionAComponent } from './option-a/option-a.component'
 import { OptionBComponent } from './option-b/option-b.component'
-// eslint-disable-next-line
 import { NggSegmentedControlModule } from '@sebgroup/green-angular'
 
 @NgModule({

libs/angular/ng-package.json

@@ -1,6 +1,9 @@
 {
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
   "dest": "../../dist/libs/angular",
+  "allowedNonPeerDependencies": [
+    "@sebgroup/chlorophyll"
+  ],
   "lib": {
     "entryFile": "src/index.ts"
   }

libs/angular/package.json

@@ -1,11 +1,30 @@
 {
   "name": "@sebgroup/green-angular",
-  "version": "0.0.1",
+  "version": "0.0.0-semantically-released",
   "peerDependencies": {
     "@angular/common": "^12.1.0",
     "@angular/core": "^12.1.0"
   },
   "dependencies": {
+    "@sebgroup/chlorophyll": "*",
+    "@types/body-scroll-lock": "^3.1.0",
+    "body-scroll-lock": "^4.0.0-beta.0",
     "tslib": "^2.2.0"
-  }
+  },
+  "description": "Angular components built on top of @sebgroup/chlorophyll.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sebgroup/green.git"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "author": "Robert Hjalmers <opensource@rhj.se> (http://www.linkedin.com/in/robert-hjalmers/)",
+  "contributors": [],
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/sebgroup/green/labels/angular"
+  },
+  "homepage": "https://sebgroup.github.io/green/latest/angular/"
 }

libs/angular/src/lib/dropdown/dropdown.component.ts

@@ -13,15 +13,20 @@ import { AbstractControl } from '@angular/forms'
       >
         {{ control.value }}
       </button>
-      <ul nggPopoverElement tabindex="-1" autofocus>
-        <li
-          *ngFor="let option of options; let i = index"
-          [nggPopoverOption]="option.value"
-          [index]="i"
-        >
-          {{ option.key }}
-        </li>
-      </ul>
+      <div nggPopoverElement tabindex="-1" autofocus>
+        <button class="close m-4 m-sm-2 d-block d-sm-none ">
+          <span class="sr-only">Close</span>
+        </button>
+        <ul role="listbox">
+          <li
+            *ngFor="let option of options; let i = index"
+            [nggPopoverOption]="option.value"
+            [index]="i"
+          >
+            {{ option.key }}
+          </li>
+        </ul>
+      </div>
     </div>
   `,
   //changeDetection: ChangeDetectionStrategy.OnPush

libs/angular/src/lib/dropdown/popover-element.directive.ts

@@ -5,6 +5,7 @@ import {
   ElementRef,
   forwardRef,
   HostBinding,
+  HostListener,
   Inject,
   OnDestroy,
   OnInit,
@@ -17,24 +18,38 @@ import { EMPTY, fromEvent, merge, Subject } from 'rxjs'
 import { NggPopoverOptionDirective } from './popover-option.directive'
 import { NggPopoverDirective } from './popover.directive'
 import { createPopper } from '@popperjs/core'
+import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
 
 @Directive({
   selector: '[nggPopoverElement]',
 })
 export class NggPopoverElementDirective implements OnInit, OnDestroy {
-  _popper?: Instance
+  _popper?: Instance | null
   _container?: ElementRef | null
   $unsubscribe = new Subject()
+  sm = window.innerWidth <= 576
   @ContentChildren(NggPopoverOptionDirective) options:
     | QueryList<NggPopoverOptionDirective>
     | undefined
 
   @HostBinding('class.popover') class = true
   @HostBinding('attr.role') role = 'listbox'
   @HostBinding('attr.id') id = null
-  @HostBinding('class.d-block') show = this.popover.state.$isOpen.value
+  @HostBinding('class.active') show = this.popover.state.$isOpen.value
   @HostBinding('attr.aria-activedescendant') activeDescendant: string | null =
     null
+  // TODO: refactor and move to general size/device service
+  @HostListener('window:resize', ['$event']) onResize(event: UIEvent) {
+    // determine if small screen size i.e less than or equal to 576 pixels which is the breakpoint for small screens
+    this.sm = (event.target as Window).innerWidth <= 576
+    if (this.sm) {
+      // remove popper
+      this.removePopper()
+    } else if (!this._popper) {
+      // add popper
+      this.addPopper()
+    }
+  }
 
   handleClickEvent(event: Event) {
     // if click inside popover element...
@@ -96,35 +111,25 @@ export class NggPopoverElementDirective implements OnInit, OnDestroy {
           this.show = isOpen // toggle visibility
 
           if (isOpen) {
+            // if use body scroll lock
+            if (this.popover.config.useBodyScrollLock) {
+              this.disableBodyScrollLock()
+            }
             // if popover is configured to use a container...
             if (this.popover.config.container !== '') {
               // ...add container
               this.addContainer()
             }
             // if popover is configured to use popper.js...
             if (this.popover.config.usePopper) {
-              // ...create popper instance for anchoring popover with trigger element
-              this._popper = createPopper(
-                this.popover.triggerElement?.nativeElement,
-                this._elRef.nativeElement,
-                {
-                  placement: 'bottom-start',
-                  modifiers: [
-                    {
-                      name: 'offset',
-                      options: {
-                        offset: [0, 4],
-                      },
-                    },
-                  ],
-                }
-              )
-              // detect changes once element and popper is initiated to update initial position
-              this._cdr.detectChanges()
+              this.addPopper()
             }
           } else {
+            if (this.popover.config.useBodyScrollLock) {
+              this.enableBodyScrollLock()
+            }
             this.removeContainer()
-            this._popper?.destroy()
+            this.removePopper()
           }
         }),
         switchMap((isOpen) =>
@@ -163,10 +168,8 @@ export class NggPopoverElementDirective implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    // destroy popper if declared
-    if (this._popper) {
-      this._popper?.destroy()
-    }
+    this.removePopper()
+    this.disableBodyScrollLock()
 
     // remove container if declared
     if (this._container) {
@@ -176,6 +179,50 @@ export class NggPopoverElementDirective implements OnInit, OnDestroy {
     this.$unsubscribe.complete()
   }
 
+  enableBodyScrollLock() {
+    enableBodyScroll(this._elRef.nativeElement)
+  }
+
+  disableBodyScrollLock() {
+    disableBodyScroll(this._elRef.nativeElement)
+  }
+
+  addPopper() {
+    if (this.sm) {
+      return
+    }
+    if (!this._popper) {
+      // ...create popper instance for anchoring popover with trigger element
+      this._popper = createPopper(
+        this.popover.triggerElement?.nativeElement,
+        this._elRef.nativeElement,
+        {
+          placement: 'bottom-start',
+          modifiers: [
+            {
+              name: 'offset',
+              options: {
+                offset: [0, 4],
+              },
+            },
+          ],
+        }
+      )
+      // detect changes once element and popper is initiated to update initial position
+      this._cdr.detectChanges()
+    } else {
+      this._popper.state.elements.reference =
+        this.popover.triggerElement?.nativeElement
+      this._popper.update().then((_) => this._cdr.detectChanges())
+    }
+  }
+  removePopper() {
+    // destroy popper if declared
+    if (this._popper) {
+      this._popper?.destroy()
+      this._popper = null
+    }
+  }
   addContainer() {
     // create global container for popover if not already present
     if (!this._container) {

libs/angular/src/lib/dropdown/popover.directive.ts

@@ -1,28 +1,28 @@
 import { Directive, ElementRef, Input } from '@angular/core'
 import { AbstractControl } from '@angular/forms'
 import { BehaviorSubject } from 'rxjs'
+interface PopoverConfig {
+  usePopper?: boolean
+  container?: '' | 'body'
+  useBodyScrollLock?: boolean
+}
 
 @Directive({
   selector: '[nggPopover]',
 })
 export class NggPopoverDirective {
-  get config(): { usePopper?: boolean; container?: '' | 'body' } {
+  get config(): PopoverConfig {
     return this._config
   }
 
-  @Input() set config(config: {
-    usePopper?: boolean
-    container?: '' | 'body'
-  }) {
+  @Input() set config(config: PopoverConfig) {
     this._config = { ...this.config, ...config }
   }
   triggerElement?: ElementRef
-  private _config: {
-    usePopper?: boolean
-    container?: '' | 'body'
-  } = {
+  private _config: PopoverConfig = {
     usePopper: true,
     container: '',
+    useBodyScrollLock: true,
   }
   state: {
     $isOpen: BehaviorSubject<boolean>

libs/angular/src/lib/segmented-control/segmented-control.stories.ts

@@ -6,11 +6,17 @@ import { componentWrapperDecorator, moduleMetadata } from '@storybook/angular'
 import { APP_BASE_HREF, CommonModule } from '@angular/common'
 import { RouterModule, Routes } from '@angular/router'
 import { of } from 'rxjs'
+import { Component } from '@angular/core'
 
-// eslint-disable-next-line
-import { OptionAComponent } from '../../../../../apps/angular-lib-dev/src/app/segmented-control/option-a/option-a.component'
-// eslint-disable-next-line
-import { OptionBComponent } from '../../../../../apps/angular-lib-dev/src/app/segmented-control/option-b/option-b.component'
+@Component({
+  template: ` <p class="mt-4">Option A</p> `,
+})
+class OptionAComponent {}
+
+@Component({
+  template: ` <p class="mt-4">Option B</p> `,
+})
+class OptionBComponent {}
 
 const routes: Routes = [
   {
@@ -28,7 +34,7 @@ export default {
   component: NggSegmentedControlComponent,
   decorators: [
     moduleMetadata({
-      declarations: [],
+      declarations: [OptionAComponent, OptionBComponent],
       imports: [CommonModule, RouterModule.forRoot(routes)],
       providers: [{ provide: APP_BASE_HREF, useValue: '/' }],
     }),

libs/chlorophyll/.storybook/postcss.config.js

@@ -2,5 +2,6 @@ module.exports = {
   // Add your installed PostCSS plugins here:
   plugins: [
     require('autoprefixer'),
+    require('cssnano'),
   ],
 };