@flywheel-io/vision 2.0.0 → 2.1.0-beta.0

package/src/components/snackbar/snackbar/snackbar.component.scss

@@ -0,0 +1,58 @@
+@use "../../../scss/config/shadows";
+
+fw-snackbar {
+  display: flex;
+  align-items: flex-start;
+  box-sizing: border-box;
+  max-width: 320px;
+  min-width: 200px;
+  min-height: 30px;
+  padding: 8px 8px 8px 16px;
+  gap: 8px;
+  transform-origin: center;
+  background-color: var(--card-header);
+  color: var(--typography-base);
+  white-space: pre-wrap;
+  border-radius: 4px;
+  border: 1px solid var(--separations-border);
+  margin: 8px;
+  @extend .vision-shadow-large !optional;
+
+  > fw-icon {
+    width: 24px;
+    height: 24px;
+    font-size: 24px;
+    white-space: nowrap;
+    margin: 3px 0;
+  }
+
+  h4 {
+    margin: 0;
+    margin-top: 6px;
+    flex: 1;
+  }
+
+  &.primary {
+    fw-icon {
+      color: var(--primary-base);
+    }
+  }
+
+  &.danger {
+    fw-icon {
+      color: var(--red-base);
+    }
+  }
+
+  &.success {
+    fw-icon {
+      color: var(--green-base);
+    }
+  }
+
+  &.warning {
+    fw-icon {
+      color: var(--orange-base);
+    }
+  }
+}

package/src/components/snackbar/snackbar/snackbar.component.spec.ts

@@ -0,0 +1,56 @@
+import { ChangeDetectorRef } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FwIconComponent } from '../../icon/icon.component';
+import { FwSnackbarModule } from '../snackbar.module';
+import { FwSnackbarTimerService } from '../snackbar-timer.service';
+import { FwSnackbarComponent } from './snackbar.component';
+
+describe('FwSnackbarComponent', () => {
+  let component: FwSnackbarComponent;
+  let fixture: ComponentFixture<FwSnackbarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        FwSnackbarComponent,
+        FwIconComponent,
+      ],
+      providers: [
+        FwSnackbarModule,
+        {
+          provide: FwSnackbarTimerService,
+          useValue: {
+            start: () => {
+            },
+            stop: () => {
+            },
+          },
+        },
+        {
+          provide: ChangeDetectorRef,
+          useValue: {
+            markForCheck: () => {
+            },
+          },
+        },
+      ],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FwSnackbarComponent);
+    component = fixture.componentInstance;
+    component.message = {
+      severity: 'success',
+      message: 'This is a test',
+    };
+    component.messageDuration = 100;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+    expect(fixture.nativeElement.textContent).toContain('This is a test');
+  });
+});

package/src/components/snackbar/snackbar/snackbar.component.ts

@@ -0,0 +1,115 @@
+/* eslint-disable @rx-angular/no-explicit-change-detection-apis */
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnInit,
+  Output,
+  ViewEncapsulation,
+} from '@angular/core';
+
+import { FwSnackbarMessage } from '../snackbar-message.model';
+import { FwSnackbarTimerService } from '../snackbar-timer.service';
+
+@Component({
+  selector: 'fw-snackbar',
+  styleUrls: ['./snackbar.component.scss'],
+  templateUrl: './snackbar.component.html',
+  providers: [FwSnackbarTimerService],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+
+export class FwSnackbarComponent implements AfterViewInit, OnInit {
+  @Input() message: FwSnackbarMessage;
+  @Input() messageDuration: number = 9000;
+  @Output() ready = new EventEmitter<FwSnackbarComponent>();
+  @Output() dismiss = new EventEmitter<string>();
+  @Output() action = new EventEmitter<string>();
+  color: 'primary' | 'success' | 'warning' | 'danger' = 'primary';
+
+  @HostBinding('class') get cssClass(): string {
+    const cssClass = 'fw-snackbar';
+    if (this.message?.severity) {
+      return cssClass + ' ' + this.color;
+    } else {
+      return cssClass;
+    }
+  }
+
+  constructor(private cdr: ChangeDetectorRef, private timerService: FwSnackbarTimerService) {
+  }
+
+  ngAfterViewInit(): void {
+    this.ready.emit(this);
+    this.cdr.markForCheck();
+  }
+
+  startTimer(): void {
+    if (this.message && this.message.duration) {
+      this.messageDuration = this.message.duration;
+    }
+    this.timerService.start(this.messageDuration).then(() => {
+      this.handleDismiss();
+      this.cdr.markForCheck();
+    });
+  }
+
+  stopTimer(): void {
+    this.timerService.stop();
+    this.cdr.markForCheck();
+  }
+
+  ngOnInit(): void {
+    switch (this.message.severity) {
+      case 'success':
+        if (!this.message.icon) {
+          this.message.icon = 'done-check-tracked';
+        }
+        this.color = 'success';
+        break;
+      case 'warning':
+        if (!this.message.icon) {
+          this.message.icon = 'warning-circle';
+        }
+        this.color = 'warning';
+        break;
+      case 'error':
+        if (!this.message.icon) {
+          this.message.icon = 'warning';
+        }
+        if (this.message.showClose === undefined) {
+          this.message.showClose = true;
+        }
+        if (!this.message.duration) {
+          this.message.duration = 29000;
+        }
+        this.color = 'danger';
+        break;
+      case 'info':
+        if (!this.message.icon) {
+          this.message.icon = 'information-circle';
+        }
+        this.color = 'primary';
+        break;
+    }
+  }
+
+  handleDismiss(): void {
+    this.dismiss.emit(this.message.id);
+    this.cdr.markForCheck();
+  }
+
+  handleAction(): void {
+    this.action.emit(this.message.id);
+    if (this.message.action) {
+      this.message.action();
+    }
+    this.cdr.markForCheck();
+  }
+
+}

package/src/components/snackbar/snackbar/snackbar.stories.ts

@@ -0,0 +1,92 @@
+// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
+import { CommonModule } from '@angular/common';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { FwButtonModule } from '../../button/button.module';
+import { FwIconModule } from '../../icon/icon.module';
+import { FwIconButtonModule } from '../../icon-button/icon-button.module';
+import { FwSnackbarModule } from '../snackbar.module';
+import { FwSnackbarComponent } from './snackbar.component';
+
+export default {
+  title: 'Components/Snackbar',
+  component: FwSnackbarComponent,
+  argTypes: {
+    notification: {
+      message: {
+        control: {
+          type: 'text',
+        },
+      },
+      type: {
+        control: {
+          type: 'text',
+        },
+      },
+    } as unknown,
+  },
+  parameters: {
+    controls: {},
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=4956-73122&mode=design&t=kKJ9B1V6klFufk0T-11',
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        FwSnackbarModule,
+        FwIconModule,
+        FwButtonModule,
+        FwIconButtonModule,
+      ],
+    }),
+  ],
+} as Meta;
+
+
+type Story = StoryObj<FwSnackbarComponent>;
+export const Snackbar: Story = {
+  args: {
+    message: {
+      severity: 'info',
+      message: 'This is the message.',
+    },
+    color: 'primary',
+  },
+};
+
+export const SnackbarWithAction: Story = {
+  args: {
+    message: {
+      severity: 'error',
+      message: 'This is an error.',
+      actionText: 'retry',
+      action: () => {
+      },
+      showClose: true,
+    },
+    color: 'danger',
+  },
+};
+
+export const SnackbarExamples: Story = {
+  args: {},
+  render: (args) => ({
+    props: args,
+    controls: { disabled: false },
+    template: `
+        <div>
+            <fw-snackbar [message]="{severity: 'info', message: 'This is an &quot;info&quot; severity'}">
+            </fw-snackbar>
+            <fw-snackbar [message]="{severity: 'success', message: 'This is a &quot;success&quot; severity'}">
+            </fw-snackbar>
+            <fw-snackbar [message]="{severity: 'error', message: 'This is an &quot;error&quot; severity'}">
+            </fw-snackbar>
+            <fw-snackbar [message]="{severity: 'warning', message: 'This is a &quot;warning&quot; severity', actionText: 'retry'}">
+            </fw-snackbar>
+        </div>
+    `,
+  }),
+};

package/src/components/snackbar/snackbar-container/snackbar-container.component.html

@@ -0,0 +1,18 @@
+<div role="list">
+  <div class="buttons">
+    <fw-button
+      *ngIf="messages.length > 0" (click)="clearAll()"
+      class="clear-all" aria-label="clear all"
+      color="slate" size="small" type="ghost">
+      Clear All
+    </fw-button>
+  </div>
+  <fw-snackbar
+    *ngFor="let message of messages; index as $index"
+    (ready)="onReady($event)"
+    (dismiss)="onDismiss($event)"
+    [message]="message"
+    [attr.aria-label]="message.message"
+    role="listitem"
+  ></fw-snackbar>
+</div>

package/src/components/snackbar/snackbar-container/snackbar-container.component.scss

@@ -0,0 +1,22 @@
+fw-snackbar-container {
+  position: fixed;
+  right: 6px;
+  bottom: 10px;
+  z-index: 999999;
+
+  .buttons {
+    text-align: right;
+    padding-right: 10px;
+
+    fw-button {
+      transition: opacity .1s ease-in;
+      opacity: 0;
+    }
+  }
+}
+
+fw-snackbar-container:hover {
+  .buttons > fw-button {
+    opacity: 1;
+  }
+}

package/src/components/snackbar/snackbar-container/snackbar-container.component.spec.ts

@@ -0,0 +1,98 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectorRef } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { of } from 'rxjs';
+import { FwButtonModule } from 'src/public-api';
+
+import { FwSnackbarService } from '../snackbar.service';
+import { FwSnackbarComponent } from '../snackbar/snackbar.component';
+import { FwSnackbarTimerService } from '../snackbar-timer.service';
+import { FwSnackbarContainerComponent } from './snackbar-container.component';
+
+describe('FwSnackbarContainerComponent', () => {
+  let component: FwSnackbarContainerComponent;
+  let fixture: ComponentFixture<FwSnackbarContainerComponent>;
+  let snackbarService: FwSnackbarService;
+  let timerService: FwSnackbarTimerService;
+  let cdr: ChangeDetectorRef;
+
+  const MOCK_NOTIFICATIONS = [
+    {
+      id: '0',
+      type: 'error',
+      message: 'This is an error.',
+      ref: new FwSnackbarComponent(cdr, timerService),
+    },
+    {
+      id: '1',
+      type: 'success',
+      message: 'This is a success message.',
+      ref: new FwSnackbarComponent(cdr, timerService),
+    },
+  ];
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CommonModule, FwButtonModule],
+      declarations: [FwSnackbarComponent, FwSnackbarContainerComponent],
+      providers: [
+        {
+          provide: FwSnackbarService,
+          useValue: {
+            messages$: of(MOCK_NOTIFICATIONS),
+            dismiss: () => {
+            },
+            dismissAll: () => {
+            },
+          },
+        },
+        {
+          provide: FwSnackbarTimerService,
+          useValue: {
+            start: () => {
+            },
+            stop: () => {
+            },
+          },
+        },
+        {
+          provide: ChangeDetectorRef,
+          useValue: {
+            markForCheck: () => {
+            },
+          },
+        },
+      ],
+    }).compileComponents();
+    timerService = TestBed.inject(FwSnackbarTimerService);
+    snackbarService = TestBed.inject(FwSnackbarService);
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FwSnackbarContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should start the timer when the snackbar is ready', () => {
+    const spy = spyOn(FwSnackbarComponent.prototype, 'startTimer');
+    component.onReady(MOCK_NOTIFICATIONS[0].ref);
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('should stop the timer when the snackbar is dismissed', () => {
+    const spy = spyOn(FwSnackbarComponent.prototype, 'stopTimer');
+    component.onDismiss(MOCK_NOTIFICATIONS[0].id);
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('should call dismissAll when clear all is clicked', () => {
+    const spy = spyOn(snackbarService, 'dismissAll');
+    component.clearAll();
+    expect(spy).toHaveBeenCalled();
+  });
+});

package/src/components/snackbar/snackbar-container/snackbar-container.component.ts

@@ -0,0 +1,71 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  HostBinding,
+  OnDestroy,
+  ViewEncapsulation,
+} from '@angular/core';
+import { Subscription } from 'rxjs';
+
+import { FwSnackbarService } from '../snackbar.service';
+import { FwSnackbarComponent } from '../snackbar/snackbar.component';
+import { FwSnackbarMessage } from '../snackbar-message.model';
+
+@Component({
+  selector: 'fw-snackbar-container',
+  templateUrl: './snackbar-container.component.html',
+  styleUrls: ['./snackbar-container.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FwSnackbarContainerComponent implements OnDestroy {
+  @HostBinding('attr.class') get classes(): string {
+    return 'fw-snackbar-container';
+  };
+
+  limit = 10;
+  messages: FwSnackbarMessage[] = [];
+
+  private subscriptions = {
+    messages: Subscription.EMPTY,
+  };
+
+  constructor(private cdr: ChangeDetectorRef, private snackbarService: FwSnackbarService) {
+    this.subscriptions.messages = this.snackbarService.messages$.subscribe((messages: FwSnackbarMessage[]) => {
+      this.messages = messages;
+      // eslint-disable-next-line @rx-angular/no-explicit-change-detection-apis
+      this.cdr.markForCheck();
+    });
+  }
+
+  ngOnDestroy(): void {
+    for (const subscription of Object.values(this.subscriptions)) {
+      subscription.unsubscribe();
+    }
+  }
+
+  onReady(snackbar: FwSnackbarComponent): void {
+    const currentMessage = this.messages[this.messages.length - 1];
+    currentMessage.ref = snackbar;
+    snackbar.startTimer();
+  }
+
+  onDismiss(messageId: string): void {
+    const message = this.messages.find(currentMessage => currentMessage.id === messageId);
+    if (message?.ref) {
+      message.ref.stopTimer();
+    }
+    if (message?.id) {
+      this.snackbarService.dismiss(message.id);
+    }
+    // eslint-disable-next-line @rx-angular/no-explicit-change-detection-apis
+    this.cdr.markForCheck();
+  }
+
+  clearAll(): void {
+    this.snackbarService.dismissAll();
+    // eslint-disable-next-line @rx-angular/no-explicit-change-detection-apis
+    this.cdr.markForCheck();
+  }
+}

package/src/components/snackbar/snackbar-container/snackbar-container.stories.ts

@@ -0,0 +1,70 @@
+// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
+
+import { FwButtonModule } from '../../button/button.module';
+import { FwSnackbarModule } from '../snackbar.module';
+import { FwSnackbarService } from '../snackbar.service';
+import { FwSnackbarMessage } from '../snackbar-message.model';
+import { FwSnackbarContainerComponent } from './snackbar-container.component';
+
+@Component({
+  selector: 'stories-add-snackbar',
+  template: `
+    <fw-button color="primary" variant="solid" (click)="addMessages()">Add message</fw-button>
+    <fw-snackbar-container></fw-snackbar-container>
+  `,
+  providers: [FwSnackbarService],
+})
+// eslint-disable-next-line @angular-eslint/component-class-suffix
+class AddSnackbarStoryComponent {
+  constructor(private snackbarService: FwSnackbarService) {
+  }
+
+  counter = 0;
+
+  addMessages(): void {
+    const messages: FwSnackbarMessage[] = [
+      { message: 'This is a info message', severity: 'info' },
+      { message: 'This is a success message', severity: 'success' },
+      { message: 'This is a warning message', severity: 'warning', actionText: 'retry' },
+      { message: 'This is an error message', severity: 'error' },
+    ];
+    this.snackbarService.show({
+      ...messages[Math.floor(Math.random() * messages.length)],
+    });
+  }
+}
+
+export default {
+  title: 'Components/Snackbar',
+  component: FwSnackbarContainerComponent,
+  parameters: {
+    controls: {},
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=4956-73122&mode=design&t=kKJ9B1V6klFufk0T-11',
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      declarations: [
+        AddSnackbarStoryComponent,
+      ],
+      imports: [
+        CommonModule,
+        FwButtonModule,
+        FwSnackbarModule,
+      ],
+    }),
+  ],
+} as Meta;
+
+export const SnackbarContainer: StoryFn = () => ({
+  template: `
+    <div style="min-height: 400px">
+    <stories-add-snackbar></stories-add-snackbar>
+    </div>
+  `,
+});

package/src/components/snackbar/snackbar-message.model.ts

@@ -0,0 +1,13 @@
+import { FwSnackbarComponent } from './snackbar/snackbar.component';
+
+export interface FwSnackbarMessage {
+  id?: string;
+  severity: 'info' | 'success' | 'warning' | 'error';
+  message: string;
+  icon?: string;
+  showClose?: boolean;
+  actionText?: string,
+  action?: () => void;
+  duration?: number;
+  ref?: FwSnackbarComponent;
+}

package/src/components/snackbar/snackbar-timer.service.ts

@@ -0,0 +1,32 @@
+export class FwSnackbarTimerService {
+  private timerId: number;
+  private now = 0;
+  private remainingDuration = 0;
+  private resolver: () => void;
+
+  start(duration: number): Promise<void> {
+    return new Promise<void>((resolve) => {
+      this.remainingDuration = duration;
+      this.resolver = resolve;
+      this.continue();
+    });
+  }
+
+  stop(): void {
+    clearTimeout(this.timerId);
+    this.remainingDuration = 0;
+  }
+
+  pause(): void {
+    clearTimeout(this.timerId);
+    this.remainingDuration =
+      this.remainingDuration - new Date().getTime() - this.now;
+  }
+
+  continue(): void {
+    this.now = new Date().getTime();
+    this.timerId = window.setTimeout(() => {
+      this.resolver();
+    }, this.remainingDuration);
+  }
+}