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

package/src/components/snackbar/snackbar.mdx

@@ -1,90 +0,0 @@
-import {Canvas, Meta} from '@storybook/addon-docs';
-import * as SnackbarStories from './snackbar/snackbar.stories'
-import * as SnackbarContainerStories from "./snackbar-container/snackbar-container.stories";
-
-<Meta of={SnackbarStories}/>
-
-# Snackbar
-
-The Vision **Snackbar** system consists of a `<fw-snackbar>` layout control intended to be used with the `<fw-snackbar-container>` having a `FwSnackbarMessage` dispatched via the `FwSnackbarService`
-
-- [FwSnackbarContainer](/story/vision-snackbar--snackbar-container) will show messages in an absolute position ascending from the lower right.
-- if the user hovers [FwSnackbarContainer](/story/vision-snackbar--snackbar-container) while there are any active messages a *Clear All* button will be displayed.
-- [FwSnackbar](/story/vision-snackbar--snackbar) `icon, showClose, action, actionText, duration` inputs all can be overridden via the supplied [Message Model](#snackbarmessage-model) properties.
-- FwSnackbar will default icons and colors based on the [severity](#snackbar-severity-examples) settings: `info, success, warning, error`
-- FwSnackbar default `duration` for messages is 9 seconds.
-- FwSnackbar with `error` severity messages default `duration` is 29 seconds and `showClose` is true.
-
-## Usage
-
-First import the module into your `app.module.ts`
-
-```ts filename="app.module.ts"
-// app.module.ts
-
-import {FwSnackbarModule} from '@flywheel-io/vision';
-
-@NgModule({
-  imports: [
-      FwSnackbarModule
-  ]
-})
-```
-
-in your shared template layout code add the container component
-
-```html
-<!--- your.highlevel-template.html --->
-
-<div>
-    <!-- your layout template --->
-    <fw-snackbar-container></fw-snackbar-container>
-</div>
-```
-
-and then finally in your calling component code
-
-```ts filename="your.component.ts"
-// your.component.ts
-
-class YourComponent {
-  constructor(private snackbarService: FwSnackbarService) {
-  }
-
-
-  addMessage(): void {
-    const message: FwSnackbarMessage = {
-        severity: 'info',
-        message: 'This is the message'
-    }
-    this.snackbarService.show(message);
-  }
-}
-```
-
-<Canvas of={SnackbarStories.Snackbar}></Canvas>
-
-
-## Snackbar Severity Examples
-
-<Canvas of={SnackbarStories.SnackbarExamples}></Canvas>
-
-## SnackbarContainer Example
-
-<Canvas of={SnackbarContainerStories.SnackbarContainer}></Canvas>
-
-## SnackbarMessage Model
-
-```ts
-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.module.ts

@@ -1,31 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-import { FwButtonModule } from '../button/button.module';
-import { FwIconModule } from '../icon/icon.module';
-import { FwIconButtonModule } from '../icon-button/icon-button.module';
-import { FwSnackbarService } from './snackbar.service';
-import { FwSnackbarComponent } from './snackbar/snackbar.component';
-import { FwSnackbarContainerComponent } from './snackbar-container/snackbar-container.component';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    FwButtonModule,
-    FwIconButtonModule,
-    FwIconModule,
-  ],
-  exports: [
-    FwSnackbarComponent,
-    FwSnackbarContainerComponent,
-  ],
-  declarations: [
-    FwSnackbarComponent,
-    FwSnackbarContainerComponent,
-  ],
-  providers: [
-    FwSnackbarService,
-  ],
-})
-export class FwSnackbarModule {
-}

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

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { FwSnackbarService } from './snackbar.service';
-
-describe('FwSnackbarService', () => {
-  let service: FwSnackbarService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(FwSnackbarService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

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

@@ -1,36 +0,0 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
-
-import { FwSnackbarMessage } from './snackbar-message.model';
-
-export function genMessageId(): string {
-  return String.prototype.padStart(24, Math.floor(Math.random() * Date.now()).toString(16));
-}
-
-@Injectable({
-  providedIn: 'root',
-})
-export class FwSnackbarService {
-  readonly messages$ = new BehaviorSubject<FwSnackbarMessage[]>([]);
-  private messageQueue: FwSnackbarMessage[] = [];
-
-  show(message: FwSnackbarMessage): void {
-    if (!message.id) {
-      message.id = genMessageId();
-    }
-
-    this.messageQueue.push(message);
-    this.messages$.next(this.messageQueue);
-  }
-
-  dismiss(messageId: string): void {
-    this.messageQueue = this.messageQueue.filter((v) => v.id !== messageId);
-    this.messages$.next(this.messageQueue);
-  }
-
-  dismissAll(): void {
-    this.messageQueue = [];
-    this.messages$.next(this.messageQueue);
-  }
-}
-

package/src/components/stepper/step.component.html

@@ -1,33 +0,0 @@
-<div
-  [ngClass]="['step-wrapper', 'step-color-'+color, 'step-alignment-'+alignment]"
-  [class.disabled]="disabled"
-  [class.active]="active"
-  [class.completed]="completed"
-  [class.done]="done"
-  (click)="handleClick()">
-  <div class="step-connector"></div>
-  <div class="step-content" [style]="{backgroundColor: backgroundColor}">
-    <div
-      class="step-decorator-wrapper"
-      [style]="{outlineColor: backgroundColor, backgroundColor: backgroundColor}">
-      <div *ngIf="done; else notDone" class="step-done" [style]="{outlineColor: backgroundColor}">
-        <fw-icon size="small">done-check</fw-icon>
-      </div>
-    </div>
-    <ng-template #notDone>
-      <div *ngIf="variant==='number'" class="step-number">
-        <h5 class="vision-h5">{{ stepNumber }}</h5>
-      </div>
-      <div *ngIf="variant==='icon'" class="step-icon">
-        <fw-icon size="small">{{ icon }}</fw-icon>
-      </div>
-      <div *ngIf="variant==='decorator'" class="step-decorator">
-        <ng-content select="fw-step-decorator"></ng-content>
-      </div>
-    </ng-template>
-    <div class="step-text">
-      <h4 class="vision-h4">{{ title }}</h4>
-      <p *ngIf="description" class="vision-p4 description">{{ description }}</p>
-    </div>
-  </div>
-</div>

package/src/components/stepper/step.component.scss

@@ -1,421 +0,0 @@
-@use '../../scss/icons/icons.scss';
-
-:host {
-  box-sizing: border-box;
-  position: relative;
-  flex: 1;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-
-  .step-connector {
-    position: absolute;
-    left: -50%;
-    right: 0;
-    top: 17px;
-    height: 1px;
-    width: 100%;
-    background-color: var(--separations-base);
-    z-index: 49;
-  }
-
-  &:first-of-type {
-    .step-connector {
-      display: none;
-    }
-  }
-
-  .step-content {
-    position: relative;
-    z-index: 50;
-  }
-
-  .step-number {
-    box-sizing: border-box;
-    display: flex;
-    width: 24px;
-    height: 24px;
-    margin: 5px 8px;
-    padding: 9px;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    border-radius: 64px;
-    border: 1px solid var(--separations-base);
-    background: var(--slate-hover);
-
-    h5 {
-      color: inherit;
-      margin: 0;
-    }
-  }
-
-  .step-icon {
-    box-sizing: border-box;
-    display: flex;
-    width: 24px;
-    height: 24px;
-    margin: 5px 8px;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    background-color: var(--card-background);
-    color: var(--typography-muted);
-    font-size: 24px;
-  }
-
-  .step-decorator {
-    box-sizing: border-box;
-    display: flex;
-    width: 24px;
-    height: 24px;
-    margin: 5px 8px;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    background-color: var(--card-background);
-    font-size: 24px;
-  }
-
-  .step-done {
-    box-sizing: border-box;
-    display: flex;
-    width: 24px;
-    height: 24px;
-    margin: 5px 8px;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    border-radius: 64px;
-    color: var(--typography-contrast);
-    background-color: var(--green-base);
-    font-size: 16px;
-  }
-
-  .step-text {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    color: var(--typography-muted);
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 130%;
-
-    h4 {
-      margin: 0;
-      white-space: nowrap;
-      color: var(--typography-muted);
-    }
-
-    p {
-      margin: 0;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2;
-      overflow-y: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .description {
-      color: var(--typography-muted);
-      font-size: 10px;
-      font-weight: 400;
-      line-height: 12px;
-    }
-  }
-
-  .step-alignment-center {
-    .step-content {
-      background-color: transparent !important;
-      text-align: center;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-
-      .step-text {
-        align-items: center;
-      }
-    }
-  }
-
-  .step-alignment-left {
-    .step-content {
-      background-color: var(--card-background);
-      padding-right: 10px;
-      display: flex;
-      flex-direction: row;
-    }
-  }
-
-  .active {
-    .step-number {
-      background-color: transparent;
-      border: 1px solid var(--primary-base);
-      color: var(--primary-base);
-    }
-
-    .step-icon {
-      color: var(--primary-base);
-    }
-
-    .step-text {
-      color: var(--primary-base);
-
-      h4 {
-        color: var(--primary-base);
-      }
-    }
-
-    .step-connector {
-      background-color: var(--primary-base);
-    }
-  }
-
-  .completed {
-    .step-number, .step-icon {
-      background-color: var(--primary-base);
-      border: 1px solid var(--primary-base);
-      color: var(--typography-contrast);
-    }
-
-    .step-icon {
-      background-color: transparent;
-      border: none;
-      color: var(--primary-base);
-    }
-
-    .step-text {
-      color: var(--typography-base);
-
-      h4 {
-        color: var(--typography-base);
-      }
-    }
-
-    .step-connector {
-      background-color: var(--primary-base);
-    }
-
-    &:not(.done) {
-      cursor: pointer;
-    }
-  }
-
-  .done {
-    .step-connector {
-      background-color: var(--green-base);
-    }
-  }
-
-  .step-color-error {
-    .step-number {
-      background-color: var(--red-hover);
-      color: var(--red-base);
-    }
-
-    .step-icon {
-      color: var(--red-base);
-    }
-
-    .step-text {
-      color: var(--red-base);
-
-      h4 {
-        color: var(--red-base);
-      }
-
-      .description {
-        color: var(--red-base);
-      }
-    }
-
-    &.active {
-      color: var(--red-base);
-
-      .step-number {
-        border-color: var(--red-base);
-        color: var(--red-base);
-      }
-    }
-
-    &.completed {
-      .step-number {
-        color: var(--typography-contrast);
-        border-color: var(--red-base);
-        background-color: var(--red-base);
-      }
-
-      .step-icon {
-        background-color: transparent;
-        border: none;
-      }
-    }
-  }
-
-  .step-color-warning {
-    .step-number {
-      background-color: var(--orange-hover);
-      color: var(--orange-base);
-    }
-
-    .step-icon {
-      color: var(--orange-base);
-    }
-
-    .step-text {
-      color: var(--orange-base);
-
-      h4 {
-        color: var(--orange-base);
-      }
-
-      .description {
-        color: var(--orange-base);
-      }
-    }
-
-    &.active {
-      color: var(--orange-base);
-
-      .step-number {
-        border-color: var(--orange-base);
-        color: var(--orange-base);
-      }
-    }
-
-    &.completed {
-      .step-number {
-        color: var(--typography-contrast);
-        border-color: var(--orange-base);
-        background-color: var(--orange-base);
-      }
-
-      .step-icon {
-        background-color: transparent;
-        border: none;
-      }
-    }
-  }
-
-  .step-color-success {
-    .step-number {
-      background-color: var(--green-hover);
-      color: var(--green-base);
-    }
-
-    .step-icon {
-      color: var(--green-base);
-    }
-
-    .step-text {
-      color: var(--green-base);
-
-      h4 {
-        color: var(--green-base);
-      }
-
-      .description {
-        color: var(--green-base);
-      }
-    }
-
-    &.active {
-      color: var(--green-base);
-
-      .step-number {
-        border-color: var(--green-base);
-        color: var(--green-base);
-      }
-    }
-
-    &.completed {
-      .step-number {
-        color: var(--typography-contrast);
-        border-color: var(--green-base);
-        background-color: var(--green-base);
-      }
-
-      .step-icon {
-        background-color: transparent;
-        border: none;
-      }
-    }
-  }
-
-  .step-color-info {
-    .step-number {
-      background-color: var(--primary-hover);
-      color: var(--primary-base);
-    }
-
-    .step-icon {
-      color: var(--primary-base);
-    }
-
-    .step-text {
-      color: var(--primary-base);
-
-      h4 {
-        color: var(--primary-base);
-      }
-
-      .description {
-        color: var(--primary-base);
-      }
-    }
-
-    &.active {
-      color: var(--primary-base);
-
-      .step-number {
-        background-color: var(--typography-contrast);
-        border-color: var(--primary-base);
-        color: var(--primary-base);
-      }
-    }
-
-    &.completed {
-      .step-number {
-        color: var(--typography-contrast);
-        border-color: var(--primary-base);
-        background-color: var(--primary-base);
-      }
-
-      .step-icon {
-        background-color: transparent;
-        border: none;
-      }
-    }
-  }
-
-  .disabled {
-    .step-text {
-      color: var(--typography-muted);
-      opacity: .4;
-
-      h4 {
-        color: var(--typography-muted);
-      }
-
-      .description {
-        color: var(--typography-muted);
-      }
-    }
-
-    .step-number {
-      color: var(--typography-muted);
-      border-color: var(--separations-base);
-      background-color: var(--slate-focus);
-    }
-
-    .step-icon {
-      opacity: .4;
-      color: var(--typography-muted);
-      background-color: var(--typography-contrast);
-      border-color: var(--typography-contrast);
-    }
-
-  }
-}

package/src/components/stepper/step.component.ts

@@ -1,92 +0,0 @@
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
-
-import { IconType } from '../icon/icon.types';
-
-@Component({
-  selector: 'fw-step',
-  templateUrl: './step.component.html',
-  styleUrls: ['./step.component.scss'],
-})
-export class FwStepComponent implements OnChanges {
-  @Input() stepNumber: number;
-  @Input() color?: 'slate' | 'success' | 'error' | 'warning' | 'info' = 'slate';
-  @Input() variant?: 'number' | 'icon' | 'decorator' = 'number';
-  @Input() alignment?: 'left' | 'center' = 'left';
-  @Input() backgroundColor?: string = 'var(--card-background)';
-  @Input() title: string;
-  @Input() description?: string;
-  @Input() icon?: IconType;
-  @Input() disabled?: boolean;
-  @Input() active?: boolean;
-  @Input() completed?: boolean;
-  @Input() done?: boolean;
-  @Input() status?: 'default' | 'active' | 'completed' | 'done' | 'disabled' | 'error' | 'warning' | 'info';
-  // eslint-disable-next-line @angular-eslint/no-output-native
-  @Output() select: EventEmitter<number> = new EventEmitter<number>();
-
-  handleClick(): void {
-    if (this.completed && !this.done && !this.disabled) {
-      this.select.emit(this.stepNumber);
-    }
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.status) {
-      this.active = false;
-      this.disabled = false;
-      this.completed = false;
-      this.done = false;
-      this.color = 'slate';
-      switch (changes.status.currentValue) {
-        case 'active':
-          this.active = true;
-          break;
-        case 'completed':
-          this.completed = true;
-          break;
-        case 'done':
-          this.done = true;
-          break;
-        case 'disabled':
-          this.disabled = true;
-          break;
-        case 'error':
-          this.color = 'error';
-          break;
-        case 'warning':
-          this.color = 'warning';
-          break;
-        case 'info':
-          this.color = 'info';
-          break;
-        case 'default':
-        default:
-          // handled in init
-          break;
-      }
-    }
-    if (changes.active && changes.active.previousValue === false) {
-      this.status = 'active';
-    }
-    if (changes.completed && changes.completed.previousValue === false) {
-      this.status = 'completed';
-    }
-    if (changes.done && changes.done.previousValue === false) {
-      this.status = 'done';
-    }
-    if (changes.disabled && changes.disabled.previousValue === false) {
-      this.status = 'disabled';
-    }
-    if (this.color === 'slate' && !this.active && !this.completed && !this.done && !this.disabled) {
-      this.status = 'default';
-    }
-  }
-}
-
-@Component({
-  selector: 'fw-step-decorator',
-  template: '<ng-content></ng-content>',
-  styleUrls: [],
-})
-export class FwStepDecoratorComponent {
-}