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

package/src/components/button-toggle/button-toggle.stories.ts

@@ -1,204 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { importProvidersFrom } from '@angular/core';
-import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-
-import { FwButtonModule } from '../button/button.module';
-import { FwIconModule } from '../icon/icon.module';
-import { FwTooltipModule } from '../tooltip/tooltip.module';
-import { FwButtonToggleComponent } from './button-toggle.component';
-import { FwButtonToggleModule } from './button-toggle.module';
-
-export default {
-  title: 'Form Controls/Button Toggle',
-  component: FwButtonToggleComponent,
-  parameters: {
-    controls: {
-      exclude: ['onChange', 'onTouch', 'registerOnChange', 'registerOnTouched', 'setDisabledState', 'writeValue', 'handleClick', 'onModelChange'],
-    },
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=4929-85995&mode=design&t=8SWNqIEGl4lPdsEq-11',
-    },
-  },
-  decorators: [
-    moduleMetadata({
-      imports: [
-        CommonModule,
-        FwButtonModule,
-        FwButtonToggleModule,
-        FwIconModule,
-        FwTooltipModule,
-        FormsModule,
-        ReactiveFormsModule,
-      ],
-    }),
-    applicationConfig({
-      providers: [
-        importProvidersFrom(BrowserModule),
-        importProvidersFrom(BrowserAnimationsModule),
-      ],
-    }),
-  ],
-
-} as Meta;
-
-type Story = StoryObj<FwButtonToggleComponent>;
-
-export const Playground: Story = {
-  args: {
-    layout: 'basic',
-    size: 'medium',
-    color: 'slate',
-    selectedColor: 'primary',
-    value: 'two',
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-      <fw-button-toggle [layout]="layout" [size]="size" [value]="value" [color]="color" [selectedColor]="selectedColor">
-        <fw-button-toggle-item title="one" value="one"></fw-button-toggle-item>
-        <fw-button-toggle-item title="two" value="two"></fw-button-toggle-item>
-        <fw-button-toggle-item title="three" value="three"></fw-button-toggle-item>
-        <fw-button-toggle-item title="four" value="four"></fw-button-toggle-item>
-      </fw-button-toggle>
-    `,
-  }),
-};
-
-export const WithIcons: Story = {
-  args: {
-    layout: 'basic',
-    size: 'medium',
-    color: 'slate',
-    selectedColor: 'primary',
-    value: 'lungs',
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-      <fw-button-toggle [layout]="layout" [size]="size" [value]="value" [color]="color" [selectedColor]="selectedColor">
-        <fw-button-toggle-item icon="brain" title="Brain" value="brain"></fw-button-toggle-item>
-        <fw-button-toggle-item icon="lungs" title="Lungs" value="lungs"></fw-button-toggle-item>
-        <fw-button-toggle-item icon="stomach" title="Stomach" value="stomach"></fw-button-toggle-item>
-        <fw-button-toggle-item icon="dna-hospital-medical" title="DNA" value="dna"></fw-button-toggle-item>
-      </fw-button-toggle>
-    `,
-  }),
-};
-
-export const IconsOnly: Story = {
-  args: {
-    layout: 'basic',
-    size: 'medium',
-    color: 'slate',
-    selectedColor: 'primary',
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-      <div style="display: flex; gap: 16px; align-items: center">
-        <p>Single Select</p>
-        <fw-button-toggle [layout]="layout" [size]="size" [value]="'bullet'" [color]="color" [selectedColor]="selectedColor">
-          <fw-button-toggle-item icon="list-paragraph" value="bullet"></fw-button-toggle-item>
-          <fw-button-toggle-item icon="list-paragraph-number" value="number"></fw-button-toggle-item>
-        </fw-button-toggle>
-        <p>Single Choice</p>
-        <fw-button-toggle [layout]="layout" [size]="size" [value]="''" [color]="color" [selectedColor]="selectedColor">
-          <fw-button-toggle-item icon="visible-eye-hidden" selectedIcon="show-visible" value="visible"></fw-button-toggle-item>
-        </fw-button-toggle>
-      </div>
-    `,
-  }),
-};
-
-
-export const SingleChoice: Story = {
-  args: {
-    layout: 'basic',
-    size: 'medium',
-    color: 'slate',
-    selectedColor: 'primary',
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-      <div style="display: flex; gap: 16px; align-items: center">
-        <p>Background Color and Icon Change</p>
-        <fw-button-toggle [layout]="layout" [size]="size" [value]="'visible'" [color]="color" [selectedColor]="selectedColor">
-          <fw-button-toggle-item icon="visible-eye-hidden" selectedIcon="show-visible" value="visible" selectedStyle="background"></fw-button-toggle-item>
-        </fw-button-toggle>
-        <p>Foreground Color and Icon Change</p>
-        <fw-button-toggle [layout]="layout" [size]="size" [value]="''" [color]="color" [selectedColor]="selectedColor">
-          <fw-button-toggle-item icon="visible-eye-hidden" selectedIcon="show-visible" value="visible" selectedStyle="foreground"></fw-button-toggle-item>
-        </fw-button-toggle>
-      </div>
-    `,
-  }),
-};
-
-export const SingleChoiceFormControl: Story = {
-  args: {
-    layout: 'basic',
-    size: 'medium',
-    color: 'slate',
-    selectedColor: 'primary',
-  },
-  render: (args) => {
-    const form = new FormGroup({
-      enabled: new FormControl({ value: false, disabled: false }),
-    });
-
-    return ({
-      props: { ...args, form, JSON },
-      controls: { disabled: false },
-      template: `
-        <form [formGroup]="form">
-          <fw-button-toggle #toggle [layout]="layout" [size]="size" formControlName="enabled" [color]="color" [selectedColor]="selectedColor">
-            <fw-button-toggle-item icon="user-checked" title="On" [value]="true"></fw-button-toggle-item>
-            <fw-button-toggle-item icon="user-delete-cross" title="Off" [value]="false"></fw-button-toggle-item>
-          </fw-button-toggle>
-        </form>
-        <p>Control Value: {{ JSON.stringify(toggle.value) }}</p>
-        <p>Form Value: {{ JSON.stringify(form.value) }}</p>
-      `,
-    });
-  },
-};
-
-export const WithTooltips: Story = {
-  args: {
-    layout: 'basic',
-    size: 'medium',
-    color: 'slate',
-    selectedColor: 'primary',
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-      <div style="display: flex; gap: 16px; align-items: center">
-        <fw-button-toggle value="visible">
-          <fw-tooltip title="Visible" position="below">
-            <fw-button-toggle-item
-              value="visible" icon="show-visible"></fw-button-toggle-item>
-          </fw-tooltip>
-          <fw-tooltip title="Documents Only" position="below">
-            <fw-button-toggle-item
-              value="document" icon="document-visible"></fw-button-toggle-item>
-          </fw-tooltip>
-          <fw-tooltip title="Hidden" position="below">
-            <fw-button-toggle-item
-              value="hidden" icon="visible-eye-hidden"></fw-button-toggle-item>
-          </fw-tooltip>
-        </fw-button-toggle>
-      </div>
-    `,
-  }),
-};

package/src/components/card/card-attribute/card-attribute.component.html

@@ -1,3 +0,0 @@
-<fw-icon *ngIf="icon">{{ icon }}</fw-icon>
-<h5 *ngIf="title" class="vision-h5">{{ title }}</h5>
-<ng-content></ng-content>

package/src/components/card/card-attribute/card-attribute.component.scss

@@ -1,19 +0,0 @@
-:host {
-  display: flex;
-  align-items: center;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 120%;
-  color: var(--typography-base);
-
-  fw-icon {
-    color: var(--primary-base);
-    font-size: 18px;
-    margin-right: 4px;
-  }
-
-  h5 {
-    margin: 0;
-  }
-}

package/src/components/card/card-attribute/card-attribute.component.spec.ts

@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FwCardAttributeComponent } from './card-attribute.component';
-
-describe('FwCardStatComponent', () => {
-  let component: FwCardAttributeComponent;
-  let fixture: ComponentFixture<FwCardAttributeComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [FwCardAttributeComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(FwCardAttributeComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/components/card/card-attribute/card-attribute.component.ts

@@ -1,13 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-import { IconType } from '../../icon/icon.types';
-
-@Component({
-  selector: 'fw-card-attr',
-  templateUrl: './card-attribute.component.html',
-  styleUrls: ['./card-attribute.component.scss'],
-})
-export class FwCardAttributeComponent {
-  @Input() icon: IconType;
-  @Input() title: string;
-}

package/src/components/card/card-author/card-author.component.html

@@ -1,5 +0,0 @@
-<ng-content select="fw-avatar"></ng-content>
-<div class="author-text">
-  <h5 class="vision-h5">{{ name }}</h5>
-  <p class="vision-p3">{{ details }}</p>
-</div>

package/src/components/card/card-author/card-author.component.scss

@@ -1,21 +0,0 @@
-:host {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-
-  .author-text {
-    margin-left: 15px;
-
-    h5 {
-      margin: 0;
-    }
-
-    p {
-      margin: 0;
-      color: var(--typography-muted);
-    }
-  }
-
-}

package/src/components/card/card-author/card-author.component.spec.ts

@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FwCardAuthorComponent } from './card-author.component';
-
-describe('FwCardAuthorComponent', () => {
-  let component: FwCardAuthorComponent;
-  let fixture: ComponentFixture<FwCardAuthorComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [FwCardAuthorComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(FwCardAuthorComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/components/card/card-author/card-author.component.ts

@@ -1,11 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'fw-card-author',
-  templateUrl: './card-author.component.html',
-  styleUrls: ['./card-author.component.scss'],
-})
-export class FwCardAuthorComponent {
-  @Input() name: string;
-  @Input() details: string;
-}

package/src/components/card/card-author/card-author.stories.ts

@@ -1,55 +0,0 @@
-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 { FwChipModule } from '../../chip/chip.module';
-import { FwIconModule } from '../../icon/icon.module';
-import { FwCardModule } from '../card.module';
-import { FwCardAuthorComponent } from './card-author.component';
-
-export default {
-  title: 'Components/Card',
-  component: FwCardAuthorComponent,
-  parameters: {
-    controls: {},
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=4964-73586&mode=design&t=kKJ9B1V6klFufk0T-11',
-    },
-  },
-  decorators: [
-    moduleMetadata({
-      imports: [
-        CommonModule,
-        FwAvatarModule,
-        FwButtonModule,
-        FwCardModule,
-        FwChipModule,
-        FwIconModule,
-      ],
-    }),
-  ],
-
-} as Meta;
-
-type Story = StoryObj<FwCardAuthorComponent & {
-  'children'?: unknown,
-}>;
-
-export const CardAuthor: Story = {
-  args: {
-    name: 'Jane Doe',
-    details: 'Last Modified • 2h ago',
-    children: '<fw-avatar size="medium" variant="circular" content="initial" initial="JD"></fw-avatar>',
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-        <fw-card-author [name]="name" [details]="details">
-            ${args.children}
-        </fw-card-author>
-        `,
-  }),
-};

package/src/components/card/card-content/card-content.component.scss

@@ -1,26 +0,0 @@
-@use "../../../scss/config/typography";
-
-:host {
-  overflow: hidden;
-  @include typography.global-typography;
-
-  p {
-    @extend .vision-p2 !optional;
-
-    margin: 0;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 8;
-    overflow-y: hidden;
-    text-overflow: ellipsis;
-    line-height: 140%;
-    color: var(--typography-muted);
-  }
-
-  img {
-    max-width: 100%;
-    margin: auto;
-    border-radius: 4px;
-    border: 1px solid var(--separations-base, #1e3154);
-  }
-}

package/src/components/card/card-content/card-content.component.spec.ts

@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FwCardContentComponent } from './card-content.component';
-
-describe('FwCardContentComponent', () => {
-  let component: FwCardContentComponent;
-  let fixture: ComponentFixture<FwCardContentComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [FwCardContentComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(FwCardContentComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,11 +0,0 @@
-import { Component, ViewEncapsulation } from '@angular/core';
-
-@Component({
-  selector: 'fw-card-content',
-  template: '<ng-content></ng-content>',
-  styleUrls: ['./card-content.component.scss'],
-  encapsulation: ViewEncapsulation.ShadowDom,
-})
-export class FwCardContentComponent {
-
-}

package/src/components/card/card-content/card-content.stories.ts

@@ -1,55 +0,0 @@
-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 { FwChipModule } from '../../chip/chip.module';
-import { FwIconModule } from '../../icon/icon.module';
-import { FwCardModule } from '../card.module';
-import { FwCardContentComponent } from './card-content.component';
-
-export default {
-  title: 'Components/Card',
-  component: FwCardContentComponent,
-  parameters: {
-    controls: {},
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=4964-73586&mode=design&t=kKJ9B1V6klFufk0T-11',
-    },
-  },
-  decorators: [
-    moduleMetadata({
-      imports: [
-        CommonModule,
-        FwAvatarModule,
-        FwButtonModule,
-        FwCardModule,
-        FwChipModule,
-        FwIconModule,
-      ],
-    }),
-  ],
-
-} as Meta;
-
-type Story = StoryObj<FwCardContentComponent & {
-  'children'?: unknown,
-}>;
-
-export const CardContent: Story = {
-  args: {
-    children: '<img src="https://picsum.photos/id/4/800" alt="sample image"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>',
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-        <div style="margin-bottom: 50px; width: 320px;">
-            <fw-card-content>
-                ${args.children}
-            </fw-card-content>
-        </div>
-        `,
-  }),
-};

package/src/components/card/card-footer/card-footer.component.spec.ts

@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FwCardFooterComponent } from './card-footer.component';
-
-describe('FwCardFooterComponent', () => {
-  let component: FwCardFooterComponent;
-  let fixture: ComponentFixture<FwCardFooterComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [FwCardFooterComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(FwCardFooterComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/components/card/card-footer/card-footer.component.ts

@@ -1,24 +0,0 @@
-import { Component, HostBinding } from '@angular/core';
-import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
-
-@Component({
-  selector: 'fw-card-footer',
-  template: '<ng-content></ng-content>',
-  styleUrls: [],
-})
-export class FwCardFooterComponent {
-  @HostBinding('style') get style(): SafeStyle {
-    return this.sanitizer.bypassSecurityTrustStyle(`
-      width: 100%;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-      gap: 8px;
-      margin-top: 8px;
-  `);
-  }
-
-  constructor(private sanitizer: DomSanitizer) {
-  }
-}

package/src/components/card/card-footer/card-footer.stories.ts

@@ -1,72 +0,0 @@
-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 { FwChipModule } from '../../chip/chip.module';
-import { FwIconModule } from '../../icon/icon.module';
-import { FwCardModule } from '../card.module';
-import { FwCardFooterComponent } from './card-footer.component';
-
-export default {
-  title: 'Components/Card',
-  component: FwCardFooterComponent,
-  parameters: {
-    controls: {},
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=4964-73586&mode=design&t=kKJ9B1V6klFufk0T-11',
-    },
-  },
-  decorators: [
-    moduleMetadata({
-      imports: [
-        CommonModule,
-        FwAvatarModule,
-        FwButtonModule,
-        FwCardModule,
-        FwChipModule,
-        FwIconModule,
-      ],
-    }),
-  ],
-} as Meta;
-
-type Story = StoryObj<FwCardFooterComponent & {
-  'children'?: string,
-}>;
-
-export const CardFooter: Story = {
-  args: {
-    children:
-      '<fw-button [fullWidth]="true" leftIcon="trash-delete" color="danger" variant="outline">Remove</fw-button><fw-button [fullWidth]="true" leftIcon="open">Open</fw-button>',
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-        <h2 style="margin-bottom: 50px;">Some Footer Examples</h2>
-        <div style="margin-bottom: 50px; width: 320px;">
-          <fw-card-footer>
-              <fw-card-attr icon="file-text" title="dicom"></fw-card-attr>
-              <fw-card-attr icon="databases-server">2.4TB</fw-card-attr>
-              <fw-card-attr icon="user-group">621</fw-card-attr>
-              <fw-card-attr icon="download">1.2k</fw-card-attr>
-          </fw-card-footer>
-        </div>
-        <div style="margin-bottom: 50px; width: 320px;">
-          <fw-card-footer>
-            <div style="display: flex; gap: 8px;">
-              <fw-chip title="MR" description="329"></fw-chip>
-              <fw-chip title="CT" description="411"></fw-chip>
-            </div>
-          </fw-card-footer>
-        </div>
-        <div style="margin-bottom: 50px; width: 320px;">
-          <fw-card-footer>
-            ${args.children}
-          </fw-card-footer>
-        </div>
-        `,
-  }),
-};

package/src/components/card/card-header/card-header.component.html

@@ -1,9 +0,0 @@
-<ng-content select="fw-app-icon"></ng-content>
-<fw-icon [color]="iconColor" *ngIf="leftIcon">{{ leftIcon }}</fw-icon>
-<div class="card-header-title">
-  <h3 *ngIf="title" class="vision-h3">{{ title }}</h3>
-  <p *ngIf="description" class="vision-p3">{{ description }}</p>
-</div>
-<div class="card-header-key">
-  <ng-content></ng-content>
-</div>

package/src/components/card/card-header/card-header.component.scss

@@ -1,41 +0,0 @@
-@use "../../../scss/config/typography";
-
-:host {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  gap: 8px;
-
-  fw-icon {
-    font-size: 22px;
-  }
-
-  .card-header-title {
-    flex: 1;
-
-    h3 {
-      flex: 1;
-      margin: 0;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2;
-      overflow-y: hidden;
-      text-overflow: ellipsis;
-    }
-
-    p {
-      color: var(--typography-muted);
-      margin: 0;
-    }
-  }
-
-  .card-header-key {
-    display: flex;
-    align-items: flex-start;
-    color: var(--typography-muted);
-    gap: 8px;
-    @extend .vision-p2 !optional;
-  }
-}