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

package/src/components/chip/chip.stories.ts

@@ -0,0 +1,222 @@
+import { CommonModule } from '@angular/common';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { FwAvatarModule } from '../avatar/avatar.module';
+import { FwIconModule } from '../icon/icon.module';
+import { FwChipComponent } from './chip.component';
+import { FwChipModule } from './chip.module';
+
+export default {
+  title: 'Components/Chip',
+  component: FwChipComponent,
+  parameters: {
+    controls: {},
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=4964-73403&mode=design&t=kKJ9B1V6klFufk0T-11',
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        FwChipModule,
+        FwAvatarModule,
+        FwIconModule,
+      ],
+    }),
+  ],
+
+} as Meta;
+
+type Story = StoryObj<FwChipComponent>;
+
+export const Default: Story = {
+  args: {
+    title: 'Chip',
+    description: '',
+    icon: undefined,
+    showClose: false,
+    color: 'slate',
+    selectable: true,
+    selected: false,
+    disabled: false,
+    value: undefined,
+    variant: 'enabled',
+  },
+};
+
+export const PrimaryWithAllOptions: Story = {
+  args: {
+    title: 'Chip',
+    description: '13',
+    icon: 'lock',
+    showClose: true,
+    color: 'primary',
+    selectable: true,
+  },
+};
+
+export const AvatarChip: Story = {
+  render: (args) => ({
+    props: args,
+    controls: { disabled: false },
+    template: `
+      <fw-chip title="John Doe" color="green">
+        <fw-avatar content="initial" initial="JD" size="small" variant="circular" color="success"></fw-avatar>
+      </fw-chip>
+    `,
+  }),
+};
+
+export const ReallyLongChips: Story = {
+  args: {
+    color: 'slate',
+    variant: 'enabled',
+    showClose: false,
+  },
+  parameters: {
+    controls: {
+      exclude: [
+        'description',
+        'disabled',
+        'icon',
+        'selectable',
+        'selected',
+        'title',
+        'value',
+        'close',
+        'select',
+        'handleClose',
+      ],
+    },
+  },
+  render: (args) => ({
+    props: args,
+    controls: { disabled: false },
+    template: `
+      <div style="width: 400px; display: flex; flex-wrap: wrap; gap: 8px; overflow: hidden">
+        <fw-chip [color]="color" [variant]="variant" [showClose]="showClose" title="model_architecture: Resnet-50, RetinaNet, PSPNet, DeepLab V3+, Attention UNet"></fw-chip>
+        <fw-chip [color]="color" [variant]="variant" [showClose]="showClose" title="therapeutic_area: Pulmonary/Respiratory Disease, Opthamology, Oncology"></fw-chip>
+        <fw-chip [color]="color" [variant]="variant" [showClose]="showClose" title="modality: MR, FS, MG"></fw-chip>
+        <fw-chip [color]="color" [variant]="variant" [showClose]="showClose" title="source: NVIDIA Zoo, Monai, Internal"></fw-chip>
+        <fw-chip [color]="color" [variant]="variant" [showClose]="showClose" title="loss_type: Hausdorff distance, Jaccard, TverskyLoss, FocalLoss, SoftBCEWithLogitsLoss"></fw-chip>
+        <fw-chip [color]="color" [variant]="variant" [showClose]="showClose" title="source: NVIDIA Zoo, Monai, Internal"></fw-chip>
+      </div>
+    `,
+  }),
+};
+
+
+export const Overview: Story = {
+  parameters: {
+    controls: {
+      exclude: /.*/g,
+    },
+  },
+  render: (args) => ({
+    props: args,
+    controls: { disabled: true },
+    template: `
+      <div>
+          <style> tr, td { padding: 12px; font-family: Inter; } </style>
+          <table>
+              <tr>
+                  <th></th>
+                  <th>slate</th>
+                  <th>primary</th>
+                  <th>secondary</th>
+                  <th>red</th>
+                  <th>orange</th>
+                  <th>green</th>
+              </tr>
+              <tr>
+                  <th>enabled</th>
+                  <td>
+                      <fw-chip variant="enabled" color="slate" title="Chip"></fw-chip>
+                  </td>
+                  <td>
+                      <fw-chip variant="enabled" color="primary" title="Chip" icon="information-circle"></fw-chip>
+                  </td>
+                  <td>
+                      <fw-chip variant="enabled" color="secondary" icon="user-checked"></fw-chip>
+                  </td>
+                  <td>
+                      <fw-chip variant="enabled" color="red" title="Chip" icon="question-circle" showClose="true"></fw-chip>
+                  </td>
+                  <td>
+                      <fw-chip variant="enabled" color="orange" title="Chip" icon="warning-circle"></fw-chip>
+                  </td>
+                  <td>
+                      <fw-chip variant="enabled" color="green" title="Chip" icon="done-check"></fw-chip>
+                  </td>
+              </tr>
+              <tr>
+                  <th>hovered</th>
+                    <td>
+                      <fw-chip variant="hovered" color="slate" title="Chip"></fw-chip>
+                  </td>
+                  <td>
+                      <fw-chip variant="hovered" color="primary" title="Chip" icon="information-circle"></fw-chip>
+                  </td>
+                  <td>
+                      <fw-chip variant="hovered" color="secondary" icon="user-checked"></fw-chip>
+                  </td>
+                  <td>
+                      <fw-chip variant="hovered" color="red" title="Chip" icon="question-circle" showClose="true"></fw-chip>
+                  </td>
+                  <td>
+                      <fw-chip variant="hovered" color="orange" title="Chip" icon="warning-circle"></fw-chip>
+                  </td>
+                  <td>
+                      <fw-chip variant="hovered" color="green" title="Chip" icon="done-check"></fw-chip>
+                  </td>
+              </tr>
+              <tr>
+                  <th>focused</th>
+                    <td>
+                      <fw-chip variant="focused" color="slate" title="Chip"></fw-chip>
+                  </td>
+                  <td>
+                      <fw-chip variant="focused" color="primary" title="Chip" icon="information-circle"></fw-chip>
+                  </td>
+                  <td>
+                      <fw-chip variant="focused" color="secondary" icon="user-checked"></fw-chip>
+                  </td>
+                  <td>
+                      <fw-chip variant="focused" color="red" title="Chip" icon="question-circle" showClose="true"></fw-chip>
+                  </td>
+                  <td>
+                      <fw-chip variant="focused" color="orange" title="Chip" icon="warning-circle"></fw-chip>
+                  </td>
+                  <td>
+                      <fw-chip variant="focused" color="green" title="Chip" icon="done-check"></fw-chip>
+                  </td>
+              </tr>
+               <tr>
+                  <th>disabled</th>
+                    <td>
+                      <fw-chip variant="disabled" color="slate" title="Chip"></fw-chip>
+                  </td>
+                  <td>
+                      <fw-chip variant="disabled" color="primary" title="Chip" icon="information-circle"></fw-chip>
+                  </td>
+                  <td>
+                      <fw-chip variant="disabled" color="secondary" icon="user-checked"></fw-chip>
+                  </td>
+                  <td>
+                      <fw-chip variant="disabled" color="red" title="Chip" icon="question-circle" showClose="true"></fw-chip>
+                  </td>
+                  <td>
+                      <fw-chip variant="disabled" color="orange" title="Chip" icon="warning-circle"></fw-chip>
+                  </td>
+                  <td>
+                      <fw-chip variant="disabled" color="green" title="Chip" icon="done-check"></fw-chip>
+                  </td>
+              </tr>
+          </table>
+      </div>
+
+    `,
+  }),
+};

package/src/components/color-palette/color-palette.component.html

@@ -0,0 +1,10 @@
+<div class="container vision-light-theme">
+  <h1>Light Theme</h1>
+  <fw-swatch *ngFor="let color of colorNames;" [color]="color">
+  </fw-swatch>
+</div>
+<div class="container vision-dark-theme">
+  <h1>Dark Theme</h1>
+  <fw-swatch *ngFor="let color of colorNames;" [color]="color">
+  </fw-swatch>
+</div>

package/src/components/color-palette/color-palette.component.scss

@@ -0,0 +1,15 @@
+@use '../../scss/config/colors';
+
+:host {
+  display: flex;
+}
+
+.container {
+  padding: 16px;
+  max-width: 320px;
+  border-radius: 8px;
+}
+
+h1 {
+  margin-bottom: 16px;
+}

package/src/components/color-palette/color-palette.component.ts

@@ -0,0 +1,73 @@
+import { Component } from '@angular/core';
+
+
+@Component({
+  selector: 'fw-color-palette',
+  templateUrl: './color-palette.component.html',
+  styleUrls: ['./color-palette.component.scss'],
+})
+export class ColorPaletteComponent {
+
+  constructor() {
+  }
+
+  colorNames = [
+    'typography-base',
+    'typography-muted',
+    'typography-light',
+    'typography-disabled',
+    'typography-contrast',
+    'page-light',
+    'page-shaded',
+    'card-header',
+    'card-background',
+    'separations-base',
+    'separations-input',
+    'separations-divider',
+    'separations-overlay',
+    'primary-base',
+    'primary-medium',
+    'primary-dark',
+    'primary-light',
+    'primary-hover',
+    'primary-focus',
+    'primary-border',
+    'secondary-base',
+    'secondary-medium',
+    'secondary-dark',
+    'secondary-light',
+    'secondary-hover',
+    'secondary-focus',
+    'secondary-border',
+    'red-base',
+    'red-medium',
+    'red-dark',
+    'red-light',
+    'red-hover',
+    'red-focus',
+    'red-border',
+    'slate-base',
+    'slate-medium',
+    'slate-dark',
+    'slate-light',
+    'slate-hover',
+    'slate-focus',
+    'slate-border',
+    'orange-base',
+    'orange-medium',
+    'orange-dark',
+    'orange-light',
+    'orange-hover',
+    'orange-focus',
+    'orange-border',
+    'green-base',
+    'green-medium',
+    'green-dark',
+    'green-light',
+    'green-hover',
+    'green-focus',
+    'green-border',
+    'sidebar-base',
+  ];
+
+}

package/src/components/color-palette/color-palette.module.ts

@@ -0,0 +1,22 @@
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { ColorPaletteComponent } from './color-palette.component';
+import { SwatchComponent } from './swatch/swatch.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ClipboardModule,
+  ],
+  declarations: [
+    ColorPaletteComponent,
+    SwatchComponent,
+  ],
+  exports: [
+    ColorPaletteComponent,
+  ],
+})
+export class ColorPaletteModule {
+}

package/src/components/color-palette/color-palette.stories.ts

@@ -0,0 +1,35 @@
+import { CommonModule } from '@angular/common';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { ColorPaletteModule } from './color-palette.module';
+
+
+export default {
+  title: 'Tokens/Colors',
+  argTypes: {},
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=0-1&mode=design&t=nWWUp7Uaipn1gnod-0',
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        ColorPaletteModule,
+      ],
+    }),
+  ],
+} as Meta;
+
+type Story = StoryObj<ColorPaletteModule>;
+
+export const Overview: Story = {
+  args: {},
+  render: (args) => ({
+    props: args,
+    controls: { disabled: false },
+    template: '<fw-color-palette></fw-color-palette>',
+  }),
+};

package/src/components/color-palette/colors.mdx

@@ -0,0 +1,47 @@
+import {Meta, Story} from '@storybook/addon-docs';
+import * as ColorStories from './color-palette.stories'
+
+<Meta title="Docs/Colors"/>
+
+# Colors
+
+Vision exports an Angular Material Theme as well as a collection of CSS variables.
+
+## Installation
+
+There are 2 steps to adding the vision colors to your project.
+
+Add an import to your global stylesheet
+
+```css
+@use '@flywheel-io/vision' as vision;
+```
+
+From here there are two options:
+### Class option
+Add a theme class high up in your html hierarchy either `vision-light-theme` or `vision-dark-theme`, i.e. the body tag this allows for easy theme swapping
+```html
+<body class="vision-light-theme">
+```
+
+### SCSS option
+if you don't plan on having theme switching you can just statically define the colors you'd like to use in your global scss
+```css
+@use '@flywheel-io/vision' as vision;
+
+@include vision.colors(light) //or vision.colors(dark)
+```
+
+## Usage
+The exported variables can be used like any other CSS variables.
+```css
+color: var(--typography-base);
+background-color: var(--red-base);
+border: 1px solid var(--primary-base);
+```
+
+Usage of colors from the Angular Material Theme is generally discouraged, but if you want to read up on it [angular's documentation is here](https://material.angular.io/guide/theming#reading-hues-from-palettes).
+
+## All Color Tokens
+All of the CSS color variables exported by Vision are below. You can click any swatch to copy that color.
+<Story of={ColorStories.Overview}></Story>

package/src/components/color-palette/swatch/swatch.component.html

@@ -0,0 +1,3 @@
+<div class="swatch" (click)="onColorClick()">
+  <p>{{ display }}</p> <div class="sample" [style.backgroundColor]="colorAsVar"></div>
+</div>

package/src/components/color-palette/swatch/swatch.component.scss

@@ -0,0 +1,21 @@
+.sample {
+  height: 16px;
+  width: 16px;
+  border-radius: 8px;
+  background-color: var(--red-base);
+  border: 1px solid var(--separations-base);
+}
+
+.swatch {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  border: 1px solid var(--separations-base);
+  padding: 16px;
+  cursor: pointer;
+}
+
+.swatch:hover {
+  background-color: var(--page-shaded);
+}

package/src/components/color-palette/swatch/swatch.component.ts

@@ -0,0 +1,28 @@
+import { Clipboard } from '@angular/cdk/clipboard';
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'fw-swatch',
+    templateUrl: './swatch.component.html',
+    styleUrls: ['./swatch.component.scss'],
+})
+export class SwatchComponent implements OnInit {
+    @Input() color: string = '';
+    colorAsVar: string;
+    display: string;
+
+    constructor(private clipboard: Clipboard) {
+    }
+
+    ngOnInit(): void {
+        this.colorAsVar = `var(--${ this.color })`;
+        this.display = this.color;
+    }
+
+    onColorClick(): void {
+        this.display = 'Copied!';
+        this.clipboard.copy(this.colorAsVar);
+        setTimeout(() => this.display = this.color, 1000);
+    }
+
+}

package/src/components/contained-input/contained-input.component.html

@@ -0,0 +1,15 @@
+<div class="heading-area">
+  <ng-content select="fw-avatar"></ng-content>
+  <div>
+    <h4 class="vision-h4 section-heading">{{ title }}
+      <span *ngIf="status" class="status">{{ status.toUpperCase() }}</span>
+      <ng-content select="fw-icon"></ng-content>
+    </h4>
+    <p class="vision-p3" *ngIf="description">{{ description }}</p>
+  </div>
+</div>
+<div class="input-content">
+  <fw-switch *ngIf="inputVariant==='switch'" [checked]="checked" [disabled]="disabled" color="primary"></fw-switch>
+  <fw-checkbox
+    *ngIf="inputVariant==='checkbox'" [checked]="checked" [disabled]="disabled" color="primary"></fw-checkbox>
+</div>

package/src/components/contained-input/contained-input.component.scss

@@ -0,0 +1,88 @@
+:host {
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  border: 1px var(--separations-base) solid;
+  padding: 16px;
+  border-radius: 8px;
+  cursor: pointer;
+
+  &:hover {
+    border: 1px solid var(--primary-border);
+    background: var(--primary-hover);
+  }
+
+  &.checked {
+    border: 1px solid var(--primary-border);
+    background: var(--primary-focus);
+  }
+
+  &.position-start {
+    flex-direction: row-reverse;
+  }
+
+  .heading-area {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    flex: 1;
+
+    h4 {
+      color: var(--typography-base);
+      margin: 0;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+
+      .status {
+        color: var(--primary-base);
+      }
+    }
+
+    p {
+      color: var(--typography-muted);
+      margin: 0;
+      line-height: 140%;
+      display: flex;
+      align-items: center;
+      gap: 3px;
+
+      a {
+        color: var(--typography-muted);
+      }
+    }
+
+    fw-icon.heading-icon {
+      box-sizing: border-box;
+      color: var(--primary-base);
+      width: 44px;
+      height: 44px;
+      font-size: 32px;
+      text-align: center;
+      justify-content: center;
+      padding: 6px;
+    }
+  }
+
+  .input-content {
+    fw-switch {
+      margin: 0 8px 0 -8px;
+      width: 36px;
+      display: block;
+    }
+
+    fw-checkbox {
+      margin: 0;
+    }
+  }
+
+  &.disabled {
+    border: 1px solid var(--separations-base);
+    background: none;
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+}

package/src/components/contained-input/contained-input.component.spec.ts

@@ -0,0 +1,34 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FwAvatarModule } from '../avatar/avatar.module';
+import { FwCheckboxModule } from '../checkbox/checkbox.module';
+import { FwSwitchModule } from '../switch/switch.module';
+import { FwContainedInputComponent } from './contained-input.component';
+
+describe('FwContainedInputComponent', () => {
+  let component: FwContainedInputComponent;
+  let fixture: ComponentFixture<FwContainedInputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        FwSwitchModule,
+        FwCheckboxModule,
+        FwAvatarModule,
+      ],
+      declarations: [
+        FwContainedInputComponent,
+      ],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FwContainedInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/components/contained-input/contained-input.component.ts

@@ -0,0 +1,65 @@
+import { Component, EventEmitter, HostBinding, HostListener, Input, Output } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 'fw-contained-input',
+  templateUrl: './contained-input.component.html',
+  styleUrls: ['./contained-input.component.scss'],
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: FwContainedInputComponent,
+    multi: true,
+  }],
+})
+export class FwContainedInputComponent implements ControlValueAccessor {
+  @Input() title: string;
+  @Input() description?: string;
+  @Input() status?: string;
+  @Input() inputPosition?: 'start' | 'end' = 'end';
+  @Input() inputVariant?: 'none' | 'switch' | 'checkbox' = 'switch';
+  @Input() checked?: boolean;
+  @Input() disabled?: boolean;
+  // eslint-disable-next-line @angular-eslint/no-output-native
+  @Output() change = new EventEmitter<boolean>();
+
+  @HostListener('click') clicked(): void {
+    if (!this.disabled) {
+      this.writeValue(!this.checked);
+      this.onChange(this.checked);
+      this.change.emit(this.checked);
+    }
+  }
+
+  @HostBinding('attr.class') get classes(): string {
+    return [
+      'fw-contained-input',
+      `position-${this.inputPosition}`,
+      [this.checked ? 'checked' : ''],
+      [this.disabled ? 'disabled' : ''],
+    ].join(' ');
+  };
+
+  public onTouch = (): void => {
+  };
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public onChange = (value: boolean): void => {
+  };
+
+  writeValue(checked: boolean): void {
+    this.checked = checked;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+}