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

package/src/components/date-input/date-input.stories.ts

@@ -0,0 +1,96 @@
+// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { FwIconModule } from '../icon/icon.module';
+import { FwWrappedInputModule } from '../wrapped-input/wrapped-input.module';
+import { FwDateInputComponent } from './date-input.component';
+import { FwDateInputModule } from './date-input.module';
+
+export default {
+  argTypes: {
+    value: {
+      description: 'RFC 3339/ISO 8601 format',
+    },
+    helperText: {
+      description: 'DEPRECATED use Wrapped Input',
+    },
+    errorText: {
+      description: 'DEPRECATED use Wrapped Input',
+    },
+  },
+  title: 'Form Controls/Date Input',
+  component: FwDateInputComponent,
+  parameters: {
+    controls: {},
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=4951-73655&mode=design&t=kKJ9B1V6klFufk0T-11',
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        FwDateInputModule,
+        FwIconModule,
+        FwWrappedInputModule,
+        ReactiveFormsModule,
+      ],
+    }),
+  ],
+} as Meta;
+
+type Story = StoryObj<FwDateInputComponent>;
+
+export const Overview: Story = {
+  decorators: [],
+  args: {
+    value: (new Date()).toISOString(),
+    type: 'date',
+  },
+};
+
+export const MinMax: Story = {
+  decorators: [],
+  args: {
+    type: 'date',
+    value: '2007-06-29',
+    min: '2007-06-01',
+    max: '2007-06-29',
+    step: 7,
+  },
+};
+
+export const DateTime: Story = {
+  decorators: [],
+  args: {
+    type: 'datetime-local',
+    value: '2007-06-29 09:41',
+    min: '2007-06-01 00:00',
+    max: '2007-06-29 00:00',
+    leftIcon: 'list-test-lab-flask',
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    controls: { disabled: false },
+    template: `
+        <fw-wrapped-input helperText="Time of last flask reading">
+          <fw-date-input [placeholder]="placeholder" [type]="type" [value]="value" [min]="min" [max]="max" [leftIcon]="leftIcon"></fw-date-input>
+        </fw-wrapped-input>
+    `,
+  }),
+};
+
+export const Time: Story = {
+  decorators: [],
+  args: {
+    type: 'time',
+    value: '09:41',
+    min: '09:00',
+    max: '11:00',
+  },
+};

package/src/components/dialog/dialog-actions.component.ts

@@ -0,0 +1,22 @@
+import { Component, HostBinding } from '@angular/core';
+import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
+
+@Component({
+  template: `
+    <ng-content></ng-content>`,
+  selector: 'fw-dialog-actions',
+})
+export class FwDialogActionsComponent {
+  @HostBinding('style') get style(): SafeStyle {
+    return this.sanitizer.bypassSecurityTrustStyle(`
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 16px;
+  `);
+  }
+
+  constructor(private sanitizer: DomSanitizer) {
+  }
+}

package/src/components/dialog/dialog-confirm.component.html

@@ -0,0 +1,37 @@
+<fw-dialog
+  [width]="DialogWidth.ExtraSmall"
+  [title]="title"
+  [icon]="icon"
+  [iconColor]="iconColor"
+  [showClose]="false">
+  <fw-dialog-content>
+    <div class="dialog-content-confirm">
+      <fw-icon class="content-icon" [ngClass]="confirmColor" *ngIf="contentIcon">
+        {{ contentIcon }}
+      </fw-icon>
+      <p class="vision-p2 content-title" *ngIf="contentTitle">
+        {{ contentTitle }}
+      </p>
+      <p class="vision-p2 content-text" *ngIf="contentText">
+        {{ contentText }}
+      </p>
+    </div>
+  </fw-dialog-content>
+  <fw-dialog-actions>
+    <fw-button
+      variant="outline"
+      *ngIf="cancelButtonText"
+      color="slate"
+      (click)="handleCloseButton()">
+      {{ cancelButtonText }}
+    </fw-button>
+    <fw-button
+      variant="solid"
+      *ngIf="confirmButtonText"
+      [color]="confirmColor"
+      [leftIcon]="confirmButtonIcon"
+      (click)="confirm.emit()">
+      {{ confirmButtonText }}
+    </fw-button>
+  </fw-dialog-actions>
+</fw-dialog>

package/src/components/dialog/dialog-confirm.component.scss

@@ -0,0 +1,49 @@
+:host {
+  box-sizing: border-box;
+}
+
+.dialog-content-confirm {
+  display: flex;
+  flex-direction: column;
+  padding: 50px;
+  align-items: center;
+  justify-content: center;
+
+  .content-title {
+    margin-bottom: 5px;
+    font-weight: 500;
+  }
+
+  .content-text {
+    margin: 0;
+    color: var(--typography-muted);
+  }
+
+  .content-icon {
+    font-size: 50px;
+
+    &.primary {
+      color: var(--primary-base);
+    }
+
+    &.secondary {
+      color: var(--secondary-base);
+    }
+
+    &.slate {
+      color: var(--slate-base);
+    }
+
+    &.success {
+      color: var(--green-base);
+    }
+
+    &.warning {
+      color: var(--orange-base);
+    }
+
+    &.danger {
+      color: var(--red-base);
+    }
+  }
+}

package/src/components/dialog/dialog-confirm.component.ts

@@ -0,0 +1,35 @@
+import { DialogRef } from '@angular/cdk/dialog';
+import { Component, EventEmitter, Input, Optional, Output } from '@angular/core';
+
+import { IconType } from '../icon/icon.types';
+import { DialogWidth } from './dialog.component';
+
+@Component({
+  selector: 'fw-dialog-confirm',
+  templateUrl: './dialog-confirm.component.html',
+  styleUrls: ['./dialog-confirm.component.scss'],
+})
+export class FwDialogConfirmComponent {
+  @Input() title?: string = 'Confirm';
+  @Input() icon?: IconType;
+  @Input() iconColor?: 'primary' | 'secondary' | 'red' | 'orange' | 'green' | 'slate' = 'primary';
+  @Input() confirmColor?: 'primary' | 'secondary' | 'danger' | 'slate' | 'warning' | 'success' = 'primary';
+  @Input() confirmButtonText?: string = 'Confirm';
+  @Input() confirmButtonIcon?: string = 'done-check';
+  @Input() cancelButtonText?: string = 'Cancel';
+  @Input() contentIcon?: string;
+  @Input() contentTitle?: string = 'Are you sure?';
+  @Input() contentText?: string;
+  // eslint-disable-next-line @angular-eslint/no-output-native
+  @Output() close: EventEmitter<void> = new EventEmitter<void>();
+  @Output() confirm: EventEmitter<void> = new EventEmitter<void>();
+  protected readonly DialogWidth = DialogWidth;
+
+  constructor(@Optional() public dialogRef: DialogRef) {
+  }
+
+  handleCloseButton(): void {
+    this.dialogRef.close();
+    this.close.emit();
+  }
+}

package/src/components/dialog/dialog-confirm.stories.ts

@@ -0,0 +1,47 @@
+import { CommonModule } from '@angular/common';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { FwDialogConfirmComponent } from './dialog-confirm.component';
+import { FwDialogsModule } from './dialogs.module';
+
+export default {
+  title: 'Components/Dialogs',
+  component: FwDialogConfirmComponent,
+  parameters: {
+    controls: {},
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=845-33184&mode=design&t=g3H9aeapDmPYz5Dv-11',
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        FwDialogsModule,
+      ],
+    }),
+  ],
+
+} as Meta;
+
+type Story = StoryObj<FwDialogConfirmComponent>;
+
+export const DialogConfirm: Story = {
+  args: {},
+};
+
+export const DialogConfirmIcon: Story = {
+  args: {
+    title: 'Approve Request',
+    icon: 'user-checked',
+    iconColor: 'green',
+    confirmColor: 'success',
+    confirmButtonText: 'Approve Request',
+    confirmButtonIcon: 'done-check',
+    cancelButtonText: 'Nevermind',
+    contentIcon: 'user-checked',
+    contentTitle: 'Are you sure you want to approve request?',
+    contentText: 'This action can\'t be undone',
+  },
+};

package/src/components/dialog/dialog-content.component.ts

@@ -0,0 +1,28 @@
+import { Component, HostBinding, Input } from '@angular/core';
+import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
+
+@Component({
+  template: `
+    <ng-content></ng-content>`,
+  selector: 'fw-dialog-content',
+})
+export class FwDialogContentComponent {
+  @Input() padded?: boolean;
+
+  @HostBinding('style') get style(): SafeStyle {
+    if (this.padded) {
+      return this.sanitizer.bypassSecurityTrustStyle(`
+        padding: 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      `);
+    } else {
+      return '';
+    }
+  }
+
+  constructor(private sanitizer: DomSanitizer) {
+  }
+}
+

package/src/components/dialog/dialog-header.component.ts

@@ -0,0 +1,25 @@
+import { Component, HostBinding } from '@angular/core';
+import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
+
+@Component({
+  template: `
+    <ng-content></ng-content>`,
+  selector: 'fw-dialog-header',
+})
+export class FwDialogHeaderComponent {
+  @HostBinding('style') get style(): SafeStyle {
+    return this.sanitizer.bypassSecurityTrustStyle(`
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 4px;
+        border-bottom: 1px solid var(--separations-base);
+        padding: 12px 16px;
+        height: 44px;
+  `);
+  }
+
+  constructor(private sanitizer: DomSanitizer) {
+  }
+}

package/src/components/dialog/dialog-simple.component.html

@@ -0,0 +1,27 @@
+<fw-dialog
+  [width]="width"
+  [title]="title"
+  [icon]="icon"
+  [iconColor]="iconColor"
+  [showClose]="showClose">
+  <fw-dialog-content>
+    <ng-content select="fw-dialog-content"></ng-content>
+    <p class="vision-p2 dialog-content-default" *ngIf="contentText">{{ contentText }}</p>
+  </fw-dialog-content>
+  <fw-dialog-actions>
+    <fw-button
+      variant="outline"
+      *ngIf="alternateButtonText"
+      [leftIcon]="alternateButtonIcon"
+      (click)="alternateAction.emit()">
+      {{ alternateButtonText }}
+    </fw-button>
+    <div class="flex"></div>
+    <fw-button variant="outline" *ngIf="cancelButtonText" (click)="handleCloseButton()">
+      {{ cancelButtonText }}
+    </fw-button>
+    <fw-button variant="solid" *ngIf="actionButtonText" (click)="action.emit()">
+      {{ actionButtonText }}
+    </fw-button>
+  </fw-dialog-actions>
+</fw-dialog>

package/src/components/dialog/dialog-simple.component.scss

@@ -0,0 +1,13 @@
+:host {
+  box-sizing: border-box;
+}
+
+.dialog-content-default {
+  padding: 15px;
+  margin: 0;
+  color: var(--typography-muted);
+}
+
+.flex {
+  flex: 1;
+}

package/src/components/dialog/dialog-simple.component.ts

@@ -0,0 +1,36 @@
+import { DialogRef } from '@angular/cdk/dialog';
+import { Component, EventEmitter, Input, Optional, Output } from '@angular/core';
+
+import { IconType } from '../icon/icon.types';
+import { DialogWidth } from './dialog.component';
+
+@Component({
+  selector: 'fw-dialog-simple',
+  templateUrl: './dialog-simple.component.html',
+  styleUrls: ['./dialog-simple.component.scss'],
+})
+export class FwDialogSimpleComponent {
+  @Input() width?: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' = DialogWidth.ExtraSmall;
+  @Input() title?: string;
+  @Input() icon?: IconType;
+  @Input() iconColor?: 'primary' | 'secondary' | 'red' | 'orange' | 'green' | 'slate' = 'primary';
+  @Input() showClose?: boolean = true;
+  @Input() actionButtonText?: string;
+  @Input() actionButtonIcon?: string;
+  @Input() cancelButtonText?: string;
+  @Input() alternateButtonText?: string;
+  @Input() alternateButtonIcon?: string;
+  @Input() contentText?: string;
+  // eslint-disable-next-line @angular-eslint/no-output-native
+  @Output() close: EventEmitter<void> = new EventEmitter<void>();
+  @Output() action: EventEmitter<void> = new EventEmitter<void>();
+  @Output() alternateAction: EventEmitter<void> = new EventEmitter<void>();
+
+  constructor(@Optional() public dialogRef: DialogRef) {
+  }
+
+  handleCloseButton(): void {
+    this.dialogRef.close();
+    this.close.emit();
+  }
+}

package/src/components/dialog/dialog-simple.stories.ts

@@ -0,0 +1,78 @@
+import { CommonModule } from '@angular/common';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { FwLayoutsModule } from '../layouts/layouts.module';
+import { DialogWidth } from './dialog.component';
+import { FwDialogSimpleComponent } from './dialog-simple.component';
+import { FwDialogsModule } from './dialogs.module';
+
+export default {
+  title: 'Components/Dialogs',
+  component: FwDialogSimpleComponent,
+  parameters: {
+    controls: {},
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=845-33184&mode=design&t=g3H9aeapDmPYz5Dv-11',
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        FwDialogsModule,
+        FwLayoutsModule,
+      ],
+    }),
+  ],
+
+} as Meta;
+
+type Story = StoryObj<FwDialogSimpleComponent>;
+
+export const DialogSimple: Story = {
+  args: {
+    width: DialogWidth.Small,
+    title: 'Dialog Header',
+    actionButtonText: 'Save',
+    cancelButtonText: 'Cancel',
+    contentText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Massa, semper etiam aliquet elit feugiat eu. Amet feugiat gravida sagittis id eget venenatis maecenas. Id tortor molestie orci, aliquet. Eget lorem eget fusce sit diam in. Facilisis dui gravida ultricies eleifend. Amet, tristique est eu viverra ac felis.\n' +
+      'Nec cursus arcu integer in quam ultricies. Mauris ipsum vel est tellus porta curabitur consectetur egestas. Scelerisque eget sit tellus feugiat duis nulla turpis nunc. Quam tellus vitae sit sed tincidunt sociis et sit. Felis elementum laoreet integer dignissim gravida arcu. Nunc pulvinar posuere vestibulum pretium metus, augue in commodo sodales. Augue sem et in elit leo praesent urna.',
+  },
+};
+
+export const DialogSimpleContent: Story = {
+  args: {
+    width: 'small',
+    title: 'Secondary Dialog',
+    alternateButtonText: 'Back',
+    alternateButtonIcon: 'arrow-back',
+    actionButtonText: 'Commit',
+    cancelButtonText: 'Cancel',
+  },
+  render: (args) => ({
+    props: args,
+    controls: { disabled: false },
+    template: `
+      <fw-dialog-simple
+        [width]="width"
+        [title]="title"
+        [alternateButtonText]="alternateButtonText"
+        [alternateButtonIcon]="alternateButtonIcon"
+        [actionButtonText]="actionButtonText"
+        [cancelButtonText]="cancelButtonText"
+        (close)="close()"
+        (action)="action()">
+          <fw-dialog-content>
+            <fw-layout-context
+                width="medium"
+                icon="search-loop"
+                iconColor="secondary"
+                title="No Datasets Found"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Orci praesent porta etiam mollis. Cursus sagittis risus et tempus consequat rhoncus viverra vitae.">
+            </fw-layout-context>
+          </fw-dialog-content>
+      </fw-dialog-simple>
+    `,
+  }),
+};

package/src/components/dialog/dialog.component.html

@@ -0,0 +1,20 @@
+<div class="dialog">
+  <fw-icon-button
+    *ngIf="showClose"
+    tabindex="-1" icon="close" color="slate"
+    (click)="handleCloseButton()">
+  </fw-icon-button>
+  <div class="dialog-header">
+    <ng-content select="fw-dialog-header"></ng-content>
+    <div class="dialog-title" *ngIf="title">
+      <fw-icon *ngIf="icon" [color]="iconColor">{{ icon }}</fw-icon>
+      <h3 class="vision-h3">{{ title }}</h3>
+    </div>
+  </div>
+  <div class="dialog-body">
+    <ng-content select="fw-dialog-content"></ng-content>
+  </div>
+  <div class="dialog-actions">
+    <ng-content select="fw-dialog-actions"></ng-content>
+  </div>
+</div>

package/src/components/dialog/dialog.component.scss

@@ -0,0 +1,94 @@
+:host {
+  box-sizing: border-box;
+  background-color: var(--card-background);
+  border: 1px solid var(--separations-border);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  &.dialog-width-extra-small {
+    width: 444px;
+  }
+
+  &.dialog-width-small {
+    width: 600px;
+  }
+
+  &.dialog-width-medium {
+    width: 900px;
+  }
+
+  &.dialog-width-large {
+    width: 1200px;
+  }
+
+  &.dialog-width-extra-large {
+    width: 1536px;
+  }
+
+  .dialog {
+    position: relative;
+
+    fw-icon-button {
+      position: absolute;
+      top: 4px;
+      right: 4px;
+    }
+
+    .dialog-header {
+      background-color: var(--card-header);
+
+      .dialog-title {
+        display: flex;
+        gap: 8px;
+        box-sizing: border-box;
+        border-bottom: 1px solid var(--separations-base);
+        padding: 12px 16px;
+        height: 44px;
+        overflow: hidden;
+        align-items: center;
+
+        fw-icon {
+          font-size: 22px;
+        }
+
+        h3 {
+          overflow: clip visible;
+
+          // min-width being set causes overflow clip to trigger the ellipsis
+          min-width: 0;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          margin-right: 30px;
+          flex: 1;
+        }
+      }
+
+      h3 {
+        margin: 0;
+      }
+
+      &:empty {
+        display: none;
+      }
+    }
+
+    .dialog-body {
+      background-color: var(--card-background);
+      border-bottom: 1px solid var(--separations-base);
+
+      &:empty {
+        display: none;
+      }
+    }
+
+    .dialog-actions {
+      padding: 16px;
+
+      &:empty {
+        display: none;
+      }
+    }
+  }
+}

package/src/components/dialog/dialog.component.ts

@@ -0,0 +1,39 @@
+import { DialogRef } from '@angular/cdk/dialog';
+import { Component, EventEmitter, HostBinding, Input, Optional, Output } from '@angular/core';
+
+import { IconType } from '../icon/icon.types';
+
+export enum DialogWidth {
+  ExtraSmall = 'extra-small',
+  Small = 'small',
+  Medium = 'medium',
+  Large = 'large',
+  ExtraLarge = 'extra-large'
+}
+
+@Component({
+  selector: 'fw-dialog',
+  templateUrl: './dialog.component.html',
+  styleUrls: ['./dialog.component.scss'],
+})
+export class FwDialogComponent {
+  @Input() width?: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' = DialogWidth.ExtraSmall;
+  @Input() title?: string;
+  @Input() icon?: IconType;
+  @Input() iconColor?: 'primary' | 'secondary' | 'red' | 'orange' | 'green' | 'slate' = 'primary';
+  @Input() showClose?: boolean = true;
+  // eslint-disable-next-line @angular-eslint/no-output-native
+  @Output() close: EventEmitter<void> = new EventEmitter<void>();
+
+  constructor(@Optional() protected dialogRef: DialogRef) {
+  }
+
+  @HostBinding('attr.class') get classes(): string {
+    return 'dialog-width-' + this.width;
+  }
+
+  protected handleCloseButton(): void {
+    this.dialogRef.close();
+    this.close.emit();
+  }
+}