Upgrade Storybook and its dependencies (including @babel/traverse)

.storybook/main.ts

@@ -5,6 +5,7 @@ const config: StorybookConfig = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
+    '@storybook/addon-mdx-gfm'
   ],
   framework: {
     name: '@storybook/angular',

karma.conf.js

@@ -35,7 +35,7 @@ module.exports = function (config) {
         { type: 'text-summary' },
       ],
     },
-    reporters: ['progress', 'coverage', 'kjhtml', 'junit', 'spec'],
+    reporters: ['progress', 'kjhtml', 'junit', 'spec'],
     browsers: ['ChromeHeadless'],
     restartOnFileChange: true,
     customLaunchers: {

package.json

@@ -97,12 +97,13 @@
     "@angular/language-service": "15.2.8",
     "@angularclass/hmr": "2.1.3",
     "@babel/core": "^7.20.12",
-    "@storybook/addon-essentials": "^7.0.7",
-    "@storybook/addon-interactions": "^7.0.7",
-    "@storybook/addon-links": "^7.0.7",
-    "@storybook/angular": "^7.0.7",
-    "@storybook/blocks": "^7.0.7",
-    "@storybook/testing-library": "^0.0.14-next.2",
+    "@storybook/addon-essentials": "^7.5.1",
+    "@storybook/addon-interactions": "^7.5.1",
+    "@storybook/addon-links": "^7.5.1",
+    "@storybook/addon-mdx-gfm": "^7.5.1",
+    "@storybook/angular": "^7.5.1",
+    "@storybook/blocks": "^7.5.1",
+    "@storybook/testing-library": "^0.2.2",
     "@types/country-list": "^2.1.1",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "^2.0.8",
@@ -122,7 +123,7 @@
     "eslint-plugin-jsdoc": "^39.3.6",
     "eslint-plugin-prefer-arrow": "1.2.2",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-storybook": "^0.6.11",
+    "eslint-plugin-storybook": "^0.6.15",
     "jasmine-bamboo-reporter": "0.0.2",
     "jasmine-core": "^3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
@@ -139,7 +140,7 @@
     "prettier": "^2.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.0.7",
+    "storybook": "^7.5.1",
     "ts-jest": "^27.0.7",
     "ts-node": "^10.9.1",
     "tslib": "^2.0.0",

src/app/announcement/components/announcement/announcement.component.html

@@ -1,6 +1,13 @@
+<!-- @format -->
 <div class="announcement" *ngIf="active">
   <div class="announcement-content">
     <span class="announcement-text" [innerHTML]="event.message"></span>
-    <div class="dismiss-button" title="Hide this announcement" (click)="dismiss()"><fa-icon [icon]="['fas', 'window-close']"></fa-icon></div>
+    <div
+      class="dismiss-button"
+      title="Hide this announcement"
+      (click)="dismiss()"
+    >
+      <fa-icon [icon]="['fas', 'window-close']"></fa-icon>
+    </div>
   </div>
 </div>

src/app/announcement/components/announcement/announcement.component.scss

@@ -1,3 +1,4 @@
+/* @format */
 $banner-bg: #fff3cd;
 $banner-text: #856404;
 

src/app/announcement/components/announcement/announcement.component.spec.ts

@@ -1,26 +1,28 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+/* @format */
+import { DebugElement } from '@angular/core';
 import { Shallow } from 'shallow-render';
+import { QueryMatch } from 'shallow-render/dist/lib/models/query-match';
 
 import { AnnouncementModule } from '@announcement/announcement.module';
 import { AnnouncementEvent } from '@announcement/models/announcement-event';
 import { AnnouncementComponent } from './announcement.component';
 
 const currentTestEvent: AnnouncementEvent = {
   start: Date.now(),
-  end: Date.now() + (24 * 60 * 60 * 1000),
+  end: Date.now() + 24 * 60 * 60 * 1000,
   message: 'Test Event!!!',
 };
 
 const pastTestEvent: AnnouncementEvent = {
   start: 1,
   end: 2,
-  message: 'Past: This should not show up!'
+  message: 'Past: This should not show up!',
 };
 
 const futureTestEvent: AnnouncementEvent = {
-  start: Date.now() + (24 * 60 * 60 * 1000),
+  start: Date.now() + 24 * 60 * 60 * 1000,
   end: Infinity,
-  message: 'Future: This should not show up!'
+  message: 'Future: This should not show up!',
 };
 
 Object.freeze(currentTestEvent);
@@ -30,11 +32,14 @@ Object.freeze(futureTestEvent);
 describe('AnnouncementComponent', () => {
   let shallow: Shallow<AnnouncementComponent>;
   async function defaultRender(events?: AnnouncementEvent[]) {
-    return await shallow.render(`<pr-announcement [eventsList]="events"></pr-announcement>`, {
-      bind: {
-        events,
+    return await shallow.render(
+      `<pr-announcement [eventsList]="events"></pr-announcement>`,
+      {
+        bind: {
+          events,
+        },
       }
-    });
+    );
   }
   beforeEach(() => {
     shallow = new Shallow(AnnouncementComponent, AnnouncementModule);
@@ -46,57 +51,100 @@ describe('AnnouncementComponent', () => {
     expect(shallow).not.toBeNull();
   });
   it('should take in test data', async () => {
-    const {element} = await defaultRender([currentTestEvent]);
+    const { element } = await defaultRender([currentTestEvent]);
     expect(element).not.toBeNull();
   });
   it('should display the message', async () => {
-    const {find, element} = await defaultRender([currentTestEvent]);
+    const { find, element } = await defaultRender([currentTestEvent]);
     expect(find('.announcement').length).toBeGreaterThan(0);
     expect(element.nativeElement.innerText).toContain('Test Event!!!');
   });
   it('should hide itself if event is in the future', async () => {
-    const {find} = await defaultRender([futureTestEvent]);
+    const { find } = await defaultRender([futureTestEvent]);
     expect(find('.announcement').length).toBe(0);
   });
   it('should hide itself if the event is already over', async () => {
-    const {find} = await defaultRender([pastTestEvent]);
+    const { find } = await defaultRender([pastTestEvent]);
     expect(find('.announcement').length).toBe(0);
   });
   it('should support multiple event definitions', async () => {
-    const {find, element} = await defaultRender([pastTestEvent, currentTestEvent, futureTestEvent]);
+    const { find, element } = await defaultRender([
+      pastTestEvent,
+      currentTestEvent,
+      futureTestEvent,
+    ]);
     expect(find('.announcement').length).toBe(1);
     expect(element.nativeElement.innerText).toContain('Test Event!!!');
   });
   it('should be dismissable', async () => {
-    const {find, fixture, element} = await defaultRender([currentTestEvent]);
+    const { find, fixture, element } = await defaultRender([currentTestEvent]);
     expect(find('.dismiss-button').length).toBe(1);
     find('.dismiss-button').nativeElement.click();
     fixture.detectChanges();
     expect(find('.announcement').length).toBe(0);
   });
   it('should set dismissed setting in localStorage', async () => {
-    const {find, fixture, instance} = await defaultRender([currentTestEvent]);
+    const { find, fixture, instance } = await defaultRender([currentTestEvent]);
     expect(find('.dismiss-button').length).toBe(1);
     find('.dismiss-button').nativeElement.click();
     fixture.detectChanges();
-    expect(window.localStorage.getItem('announcementDismissed')).toBe(currentTestEvent.start.toString());
+    expect(window.localStorage.getItem('announcementDismissed')).toBe(
+      currentTestEvent.start.toString()
+    );
   });
   it('should recall dismissed setting from localStorage', async () => {
-    window.localStorage.setItem('announcementDismissed', currentTestEvent.start.toString());
-    const {find} = await defaultRender([currentTestEvent]);
+    window.localStorage.setItem(
+      'announcementDismissed',
+      currentTestEvent.start.toString()
+    );
+    const { find } = await defaultRender([currentTestEvent]);
     expect(find('.announcement').length).toBe(0);
   });
   it('should still be able to show a new announcement after dismissing a previous one', async () => {
     window.localStorage.setItem('announcementDismissed', 'pastevent');
-    const {find} = await defaultRender([currentTestEvent]);
+    const { find } = await defaultRender([currentTestEvent]);
     expect(find('.announcement').length).toBe(1);
   });
   it('should be able to handle an empty data array', async () => {
-    const {find} = await defaultRender([]);
+    const { find } = await defaultRender([]);
     expect(find('.announcement').length).toBe(0);
   });
   it('should be able to handle the null case', async () => {
-    const {find} = await defaultRender();
+    const { find } = await defaultRender();
     expect(find('.announcement').length).toBe(0);
   });
+  describe('Layout Adjustment', () => {
+    async function renderWithAdjustables() {
+      return await shallow.render(
+        `<div class="adjust-for-announcement"></div><pr-announcement [eventsList]="events"></pr-announcement><div class="adjust-for-announcement"></div>`,
+        {
+          bind: {
+            events: [currentTestEvent],
+          },
+        }
+      );
+    }
+    function getAdjustedElements(
+      find: (s: string) => QueryMatch<DebugElement>
+    ) {
+      const adjustedElements = find('.adjust-for-announcement');
+      expect(adjustedElements.length).toBeGreaterThan(0);
+      return adjustedElements;
+    }
+    it('should adjust the page layout when it appears', async () => {
+      const { find } = await renderWithAdjustables();
+      getAdjustedElements(find).forEach((element) => {
+        expect(element.nativeElement.style.paddingTop).not.toBe('0px');
+        expect(element.nativeElement.style.paddingTop).not.toBeUndefined();
+      });
+    });
+    it('should readjust the page layout when it disappears', async () => {
+      const { find, fixture } = await renderWithAdjustables();
+      find('.dismiss-button').nativeElement.click();
+      fixture.detectChanges();
+      getAdjustedElements(find).forEach((element) => {
+        expect(element.nativeElement.style.paddingTop).toBe('0px');
+      });
+    });
+  });
 });

src/app/announcement/components/announcement/announcement.component.ts

@@ -1,4 +1,11 @@
-import { AfterViewInit, Component, ElementRef, Input, OnInit } from '@angular/core';
+/* @format */
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  Input,
+  OnInit,
+} from '@angular/core';
 
 import { AnnouncementEvent } from '@announcement/models/announcement-event';
 import { ANNOUNCEMENT_EVENTS } from '@announcement/data/events';
@@ -7,16 +14,23 @@ import { faWindowClose } from '@fortawesome/free-solid-svg-icons';
 
 const STORAGE_KEY = 'announcementDismissed';
 
-export const adjustLayoutForAnnouncement = (component: {elementRef: ElementRef}) => {
+export const adjustLayoutForAnnouncement = (component: {
+  elementRef: ElementRef;
+}) => {
   const self = component.elementRef.nativeElement as HTMLElement;
-  const adjustedElements = document.querySelectorAll('.adjust-for-announcement');
+  const adjustedElements = document.querySelectorAll(
+    '.adjust-for-announcement'
+  );
   for (const element of Array.from(adjustedElements)) {
-    (element as HTMLElement).style.paddingTop = self.getBoundingClientRect().height + 'px';
+    (element as HTMLElement).style.paddingTop =
+      self.getBoundingClientRect().height + 'px';
   }
 };
 
 export const resetLayoutForAnnouncement = () => {
-  const adjustedElements = document.querySelectorAll('.adjust-for-announcement');
+  const adjustedElements = document.querySelectorAll(
+    '.adjust-for-announcement'
+  );
   for (const element of Array.from(adjustedElements)) {
     (element as HTMLElement).style.paddingTop = '0px';
   }
@@ -25,7 +39,7 @@ export const resetLayoutForAnnouncement = () => {
 @Component({
   selector: 'pr-announcement',
   templateUrl: './announcement.component.html',
-  styleUrls: ['./announcement.component.scss']
+  styleUrls: ['./announcement.component.scss'],
 })
 export class AnnouncementComponent implements OnInit, AfterViewInit {
   @Input() eventsList: AnnouncementEvent[] = ANNOUNCEMENT_EVENTS;
@@ -65,8 +79,8 @@ export class AnnouncementComponent implements OnInit, AfterViewInit {
 
   protected findActiveEvent(): AnnouncementEvent | undefined {
     const now = Date.now();
-    return this.eventsList.find((event) =>
-      now >= event.start && now < event.end
+    return this.eventsList.find(
+      (event) => now >= event.start && now < event.end
     );
   }
 }

src/app/announcement/components/announcement/announcement.stories.ts

@@ -1,3 +1,4 @@
+/* @format */
 import {
   componentWrapperDecorator,
   Meta,