@flywheel-io/vision 1.17.0 → 2.0.0-beta-1

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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,33 @@
+<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

@@ -0,0 +1,421 @@
+@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

@@ -0,0 +1,92 @@
+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 {
+}

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

@@ -0,0 +1,73 @@
+import { CommonModule } from '@angular/common';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { FwAvatarModule } from '../avatar/avatar.module';
+import { FwButtonModule } from '../button/button.module';
+import { FwDialogsModule } from '../dialog/dialogs.module';
+import { FwIconModule } from '../icon/icon.module';
+import { FwProgressModule } from '../progress/progress.module';
+import { FwStepComponent } from './step.component';
+import { FwStepperModule } from './stepper.module';
+
+export default {
+  title: 'Components/Stepper',
+  component: FwStepComponent,
+  parameters: {
+    controls: {},
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?node-id=1676%3A61140&mode=dev',
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        FwStepperModule,
+        FwAvatarModule,
+        FwButtonModule,
+        FwDialogsModule,
+        FwIconModule,
+        FwProgressModule,
+      ],
+    }),
+  ],
+} as Meta;
+
+type Story = StoryObj<FwStepComponent>;
+
+export const Step: Story = {
+  args: {
+    stepNumber: 3,
+    title: 'Step title',
+    description: 'Optional',
+    alignment: 'left',
+    active: true,
+    completed: false,
+    disabled: false,
+    variant: 'number',
+    icon: undefined,
+    color: 'slate',
+  },
+};
+
+export const StepsNoStepper: Story = {
+  args: {},
+  render: (args) => ({
+    props: args,
+    controls: { disabled: false },
+    template: `
+        <div style="display: flex">
+            <fw-step stepNumber="1" title="Creating Resources" description="Building and allocating workspace." variant="icon" icon="done-check" status="done" alignment="center">
+            </fw-step>
+            <fw-step stepNumber="2" title="Syncing Users" description="Creating users and assigning roles." variant="icon" icon="done-check" status="done" alignment="center">
+            </fw-step>
+            <fw-step stepNumber="3" title="Workspace Ready" description="Azure is ready to use." variant="decorator" icon="undone-uncheck-untracked" status="completed" alignment="center">
+                <fw-step-decorator><fw-progress-spinner size="small"></fw-progress-spinner></fw-step-decorator>
+            </fw-step>
+            <fw-step stepNumber="4" title="Creating Compute" description="Provisioning compute instances for users." variant="icon" icon="undone-uncheck-untracked" status="default" alignment="center"></fw-step>
+            <fw-step stepNumber="5" title="Setup Xfer Storage" description="Project Exports linked with Azure" variant="icon" icon="undone-uncheck-untracked" status="disabled" alignment="center"></fw-step>
+        </div>
+    `,
+  }),
+};