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

package/src/components/table/table.stories.ts

@@ -1,198 +0,0 @@
-import { CdkTableModule } from '@angular/cdk/table';
-import { CommonModule } from '@angular/common';
-import { importProvidersFrom } from '@angular/core';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-
-import { FwAvatarModule } from '../avatar/avatar.module';
-import { FwCheckboxModule } from '../checkbox/checkbox.module';
-import { FwIconModule } from '../icon/icon.module';
-import { FwLayoutsModule } from '../layouts/layouts.module';
-import { FwPaginatorModule } from '../paginator/paginator.module';
-import { FwTableComponent } from './table.component';
-import { FwTableModule } from './table.module';
-
-export default {
-  title: 'Components/Table',
-  component: FwTableComponent,
-  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: [
-    applicationConfig({
-      providers: [importProvidersFrom([
-        BrowserAnimationsModule,
-      ])],
-    }),
-    moduleMetadata({
-      imports: [
-        CdkTableModule,
-        CommonModule,
-        FwTableModule,
-        FwAvatarModule,
-        FwCheckboxModule,
-        FwIconModule,
-        FwLayoutsModule,
-        FwPaginatorModule,
-      ],
-    }),
-  ],
-
-} as Meta;
-
-type Story = StoryObj<FwTableComponent<never>>;
-
-
-const dataSet = [
-  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
-  { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
-  { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
-  { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
-  { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
-  { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
-  { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
-  { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
-  { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
-  { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
-];
-
-const pageSize = 5;
-const tableData = dataSet.slice(0, pageSize < dataSet.length ? pageSize : dataSet.length);
-
-
-export const DefaultTable: Story = {
-  render: (args) => {
-    return ({
-      props: {
-        ...args,
-        dataSource: dataSet,
-        displayedColumns: ['position', 'name', 'weight', 'symbol'],
-      },
-      controls: { disabled: false },
-      template: `
-        <table fw-table [dataSource]="dataSource">
-          <!-- Position Column -->
-          <ng-container fwColumnDef="position">
-            <th fw-header-cell *fwHeaderCellDef> Number</th>
-            <td fw-cell *fwCellDef="let element">
-                <div class="fw-cell-div">
-                  <fw-avatar content="initial" initial="JD" size="medium"></fw-avatar>
-                  Cell-{{element.position}}
-                </div>
-            </td>
-          </ng-container>
-
-          <!-- Name Column -->
-          <ng-container fwColumnDef="name">
-            <th fw-header-cell *fwHeaderCellDef> Name </th>
-            <td fw-cell *fwCellDef="let element"> {{element.name}} </td>
-          </ng-container>
-
-          <!-- Weight Column -->
-          <ng-container fwColumnDef="weight">
-            <th fw-header-cell *fwHeaderCellDef> Weight </th>
-            <td fw-cell *fwCellDef="let element"> {{element.weight}} </td>
-          </ng-container>
-
-          <!-- Symbol Column -->
-          <ng-container fwColumnDef="symbol">
-            <th fw-header-cell *fwHeaderCellDef> Symbol </th>
-            <td fw-cell *fwCellDef="let element"> {{element.symbol}} </td>
-          </ng-container>
-          <tr fw-header-row *fwHeaderRowDef="displayedColumns"></tr>
-          <tr fw-row *fwRowDef="let row; columns: displayedColumns; index as i">
-          </tr>
-        </table>
-    `,
-    });
-  },
-};
-
-export const FullExample: Story = {
-  render: (args) => {
-    return ({
-      props: {
-        ...args,
-        dataSource: tableData,
-        displayedColumns: ['position', 'name', 'weight', 'symbol'],
-        selected: tableData[1],
-      },
-      controls: { disabled: false },
-      template: `
-        <fw-layout-panel border="all" rounded="true" [padded]="false" [margin]="true">
-          <fw-table [dataSource]="dataSource">
-            <!-- Position Column -->
-            <ng-container fwColumnDef="position">
-              <fw-header-cell *fwHeaderCellDef>
-                <div class="fw-cell-div">
-                  <fw-checkbox></fw-checkbox>
-                  <span style="padding: 0 8px 0 8px; display: flex;">
-                  <fw-icon size="small">list-test-lab-flask</fw-icon>
-                  </span>
-                  Number
-                </div>
-              </fw-header-cell>
-              <fw-cell *fwCellDef="let element">
-                  <div class="fw-cell-div">
-                    <fw-checkbox [checked]="element.position === selected.position"></fw-checkbox>
-                    <fw-avatar content="initial" initial="JD" size="medium"></fw-avatar>
-                    Cell-{{element.position}}
-                  </div>
-              </fw-cell>
-              <fw-footer-cell *fwFooterCellDef>
-                  <span style="padding: 0 8px 0 8px; display: flex;">
-                  <fw-icon size="small">list-test-lab-flask</fw-icon>
-                  </span>
-                  Number
-              </fw-footer-cell>
-            </ng-container>
-
-            <!-- Name Column -->
-            <ng-container fwColumnDef="name">
-              <fw-header-cell *fwHeaderCellDef fw-sort-header> Name </fw-header-cell>
-              <fw-cell *fwCellDef="let element"> {{element.name}} </fw-cell>
-              <fw-footer-cell *fwFooterCellDef> Name </fw-footer-cell>
-            </ng-container>
-
-            <!-- Weight Column -->
-            <ng-container fwColumnDef="weight">
-              <fw-header-cell *fwHeaderCellDef fw-sort-header> Weight </fw-header-cell>
-              <fw-cell *fwCellDef="let element"> {{element.weight}} </fw-cell>
-              <fw-footer-cell *fwFooterCellDef> Weight </fw-footer-cell>
-            </ng-container>
-
-            <!-- Symbol Column -->
-            <ng-container fwColumnDef="symbol">
-              <fw-header-cell *fwHeaderCellDef fw-sort-header> Symbol </fw-header-cell>
-              <fw-cell *fwCellDef="let element"> {{element.symbol}} </fw-cell>
-              <fw-footer-cell *fwFooterCellDef> Symbol </fw-footer-cell>
-            </ng-container>
-            <fw-header-row *fwHeaderRowDef="displayedColumns"></fw-header-row>
-            <fw-row
-              *fwRowDef="let row; columns: displayedColumns; index as i"
-              [ngClass]='row.position === selected.position ? "selected":""'
-              (click)="selected = row">
-            ></fw-row>
-            <fw-footer-row *fwFooterRowDef="displayedColumns"></fw-footer-row>
-          </fw-table>
-        </fw-layout-panel>
-        <fw-layout-panel [padded]="false" [margin]="true">
-          <fw-layout-group justify="space-between" [padded]="false">
-            <p>&nbsp;1 row selected</p>
-            <fw-paginator-advanced
-              alignment="end"
-              [length]="10"
-              [pageIndex]="0"
-              [pageSize]="5"
-              (page)="page = $event">
-            </fw-paginator-advanced>
-          </fw-layout-group>
-        </fw-layout-panel>
-    `,
-    });
-  },
-};

package/src/components/tabs/tab/tab.component.html

@@ -1,3 +0,0 @@
-<fw-icon *ngIf="icon" size="medium">{{ icon }}</fw-icon>
-<h4 class="vision-h4">{{ title }}</h4>
-<ng-content select="fw-badge"></ng-content>

package/src/components/tabs/tab/tab.component.scss

@@ -1,79 +0,0 @@
-:host {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 16px;
-  gap: 8px;
-  border-bottom: 2px solid transparent;
-  cursor: pointer;
-  height: 45px;
-  box-sizing: border-box;
-
-  h4 {
-    margin: 0;
-    color: var(--typography-muted);
-    white-space: nowrap;
-  }
-
-  &.primary {
-    color: var(--primary-base);
-
-    &:hover {
-      h4 {
-        color: var(--typography-base);
-      }
-    }
-
-    &.active {
-      border-bottom: 2px solid var(--primary-base);
-
-      h4 {
-        color: var(--primary-base);
-      }
-    }
-
-    &:focus-visible {
-      outline: 2px dotted var(--primary-base);
-    }
-  }
-
-  &.secondary {
-    color: var(--secondary-base);
-
-    &:hover {
-      h4 {
-        color: var(--secondary-base);
-      }
-    }
-
-    &:focus-visible {
-      outline: 2px dotted var(--secondary-base);
-    }
-
-    &.active {
-      border-bottom: 2px solid var(--secondary-base);
-
-      h4 {
-        color: var(--secondary-base);
-      }
-    }
-  }
-
-  &.disabled {
-    color: var(--typography-muted);
-    cursor: not-allowed;
-    opacity: .4;
-
-    &:focus-visible {
-      outline: 2px dotted var(--typography-muted);
-    }
-
-    &.active {
-      border-bottom: 2px solid transparent;
-
-      h4 {
-        color: var(--typography-muted);
-      }
-    }
-  }
-}

package/src/components/tabs/tab/tab.component.spec.ts

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

package/src/components/tabs/tab/tab.component.ts

@@ -1,47 +0,0 @@
-import { Component, EventEmitter, HostBinding, HostListener, Input, Output } from '@angular/core';
-
-import { IconType } from '../../../components/icon/icon.types';
-import { FwTabPanelComponent } from '../tab-panel/tab-panel.component';
-
-@Component({
-  selector: 'fw-tab',
-  templateUrl: './tab.component.html',
-  styleUrls: ['./tab.component.scss'],
-})
-export class FwTabComponent {
-  @Input() title: string;
-  @Input() panel?: FwTabPanelComponent;
-  @Input() color: 'primary' | 'secondary' = 'primary';
-  @Input() icon?: IconType;
-  // eslint-disable-next-line @angular-eslint/no-output-native
-  @Output() select: EventEmitter<FwTabComponent> = new EventEmitter<FwTabComponent>();
-  @HostBinding('class.active') @Input() active: boolean = false;
-  @HostBinding('class.disabled') @Input() disabled: boolean = false;
-  @HostBinding('role') role = 'button';
-  @HostBinding('tabindex') @Input() tabindex = '';
-
-  @HostBinding('class') get cssClass(): string {
-    return ['fw-tab', this.color].join(' ');
-  }
-
-  @HostListener('click') onClick(): void {
-    this.handleSelect();
-  }
-
-  @HostListener('window:keyup', ['$event']) keyEvent(event: KeyboardEvent): void {
-    if (event.key === 'Enter' && event.target['attributes']['label']['nodeValue'] === this.title) {
-      this.handleSelect();
-    }
-  }
-
-  handleSelect(): void {
-    if (!this.disabled) {
-      this.active = true;
-      if (this.panel) {
-        this.panel.active = true;
-      }
-      this.select.emit(this);
-    }
-  }
-
-}

package/src/components/tabs/tab/tab.stories.ts

@@ -1,38 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-
-import { FwTabsModule } from '../tabs.module';
-import { FwTabComponent } from './tab.component';
-
-export default {
-  title: 'Components/Tabs',
-  component: FwTabComponent,
-  parameters: {
-    controls: {},
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=4951-73656&mode=dev',
-    },
-  },
-  decorators: [
-    moduleMetadata({
-      imports: [
-        CommonModule,
-        FwTabsModule,
-      ],
-    }),
-  ],
-
-} as Meta;
-
-type Story = StoryObj<FwTabComponent>;
-
-export const Tab: Story = {
-  args: {
-    title: 'Tab',
-    icon: 'icon-placeholder',
-    color: 'primary',
-    active: true,
-    disabled: false,
-  },
-};

package/src/components/tabs/tab-panel/tab-panel.component.html

@@ -1 +0,0 @@
-<ng-content></ng-content>

package/src/components/tabs/tab-panel/tab-panel.component.scss

@@ -1,7 +0,0 @@
-:host {
-  display: none;
-
-  &.active {
-    display: flex;
-  }
-}

package/src/components/tabs/tab-panel/tab-panel.component.spec.ts

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

package/src/components/tabs/tab-panel/tab-panel.component.ts

@@ -1,11 +0,0 @@
-import { Component, HostBinding, Input } from '@angular/core';
-
-@Component({
-  selector: 'fw-tab-panel',
-  templateUrl: './tab-panel.component.html',
-  styleUrls: ['./tab-panel.component.scss'],
-})
-export class FwTabPanelComponent {
-  @HostBinding('class.active') @Input() active: boolean = false;
-
-}

package/src/components/tabs/tabs.component.html

@@ -1,2 +0,0 @@
-<ng-content select="fw-tab"></ng-content>
-<ng-content></ng-content>

package/src/components/tabs/tabs.component.scss

@@ -1,9 +0,0 @@
-:host {
-  display: flex;
-  overflow-x: auto;
-  align-items: center;
-
-  &.bordered {
-    border-bottom: 1px solid var(--separations-divider);
-  }
-}

package/src/components/tabs/tabs.component.spec.ts

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

package/src/components/tabs/tabs.component.ts

@@ -1,69 +0,0 @@
-import {
-  AfterContentInit,
-  Component,
-  ContentChildren,
-  EventEmitter,
-  HostBinding,
-  Input,
-  OnDestroy,
-  Output,
-  QueryList,
-} from '@angular/core';
-import { Subscription } from 'rxjs';
-
-import { FwTabComponent } from './tab/tab.component';
-
-@Component({
-  selector: 'fw-tabs',
-  templateUrl: './tabs.component.html',
-  styleUrls: ['./tabs.component.scss'],
-})
-export class FwTabsComponent implements AfterContentInit, OnDestroy {
-  @Input() activeTabIndex: number;
-  @Input() activeTab?: FwTabComponent;
-  @Input() bordered?: boolean = false;
-  // eslint-disable-next-line @angular-eslint/no-output-native
-  @Output() select: EventEmitter<FwTabComponent> = new EventEmitter<FwTabComponent>();
-  @ContentChildren(FwTabComponent) tabs: QueryList<FwTabComponent>;
-
-  @HostBinding('class') get cssClass(): string {
-    return ['fw-tabs', this.bordered ? 'bordered' : ''].join(' ');
-  }
-
-  private subscriptions: Array<Subscription> = [];
-
-  ngOnDestroy(): void {
-    for (const subscription of this.subscriptions) {
-      subscription.unsubscribe();
-    }
-  }
-
-  ngAfterContentInit(): void {
-    if (this.activeTabIndex <= this.tabs.length) {
-      this.activeTab = this.tabs.get(this.activeTabIndex);
-      this.activeTab.active = true;
-      if (this.activeTab.panel) {
-        this.activeTab.panel.active = true;
-      }
-    }
-    this.tabs.forEach(tab => {
-      const sub = tab.select.subscribe(selected => this.handleTabChange(selected));
-      this.subscriptions.push(sub);
-    });
-  }
-
-  handleTabChange(tab: FwTabComponent): void {
-    this.activeTab = tab;
-    this.tabs.forEach((t, index) => {
-      if (t !== tab) {
-        t.active = false;
-        if (t.panel) {
-          t.panel.active = false;
-        }
-      } else {
-        this.activeTabIndex = index;
-      }
-    });
-    this.select.emit(tab);
-  }
-}

package/src/components/tabs/tabs.mdx

@@ -1,74 +0,0 @@
-import {Canvas, Meta} from '@storybook/addon-docs';
-import * as TabsStories from './tabs.stories'
-import * as TabStories from './tab/tab.stories'
-
-<Meta of={TabsStories}/>
-
-# Tabs
-
-The Vision **Tabs** system consists of the `<fw-tabs>` which is a collection component.
-
-It is built via an assembly of the `<fw-tab>` child components.
-
-- the selected tabs is managed via the `activeTabIndex`
-- an output event `(select)` will fire when a tab has been selected.
-- Optionally you can provide a `<fw-tab-panel>` wired to the `<fw-tab>` via the `[panel]` input.
-- If the panel is provided the tabs will manage hiding and showing the panels.
-
-## Usage
-
-First import the module into your `app.module.ts`
-
-```ts filename="app.module.ts"
-// app.module.ts
-
-import {FwTabsModule} from '@flywheel-io/vision';
-
-@NgModule({
-  imports: [
-      FwTabsModule
-  ]
-})
-```
-
-and then in your layout code add the component
-
-```html
-<!--- your.component.html --->
-
-<div>
-    <fw-tabs [activeTabIndex]="0" (select)="yourOptionalMethod($event)">
-      <fw-tab title="Tab 1" icon="icon-placeholder" [panel]="panel1"></fw-tab>
-      <fw-tab title="Tab 2" icon="icon-placeholder" [panel]="panel2"></fw-tab>
-      <fw-tab title="Tab 3" icon="icon-placeholder" [panel]="panel3"></fw-tab>
-      <fw-tab title="Tab 4" icon="icon-placeholder" [panel]="panel4"></fw-tab>
-      <fw-tab title="Tab 5" icon="icon-placeholder" [panel]="panel5"></fw-tab>
-      <fw-tab title="Tab 6" icon="icon-placeholder" [panel]="panel6"></fw-tab>
-    </fw-tabs>
-    <fw-tab-panel #panel1>This is fw-tab-panel #1</fw-tab-panel>
-    <fw-tab-panel #panel2>This is fw-tab-panel #2</fw-tab-panel>
-    <fw-tab-panel #panel3>This is fw-tab-panel #3</fw-tab-panel>
-    <fw-tab-panel #panel4>This is fw-tab-panel #4</fw-tab-panel>
-    <fw-tab-panel #panel5>This is fw-tab-panel #5</fw-tab-panel>
-    <fw-tab-panel #panel6>This is fw-tab-panel #6</fw-tab-panel>
-</div>
-```
-
-<Canvas of={TabsStories.Tabs}></Canvas>
-
-## Tab
-
-<Canvas of={TabStories.Tab}></Canvas>
-
-Most of the actual visible UI is managed in the `<fw-tab>` component.
-
-- inputs are `label, icon, color, panel, active, disabled`
-
-<Canvas of={TabsStories.TabExamples}></Canvas>
-
-## TabPanel
-
-`<fw-tab-panel>` is an optional component to use in conjunction with the `<fw-tab>`
-
-- Panels are hidden by default, and made visible when `active` is set true.
-- If associated with a `<fw-tab>` via the `panel` property the visibility will be managed via the tab's `active` state

package/src/components/tabs/tabs.module.ts

@@ -1,26 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-import { FwIconModule } from '../icon/icon.module';
-import { FwTabComponent } from './tab/tab.component';
-import { FwTabPanelComponent } from './tab-panel/tab-panel.component';
-import { FwTabsComponent } from './tabs.component';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    FwIconModule,
-  ],
-  exports: [
-    FwTabComponent,
-    FwTabPanelComponent,
-    FwTabsComponent,
-  ],
-  declarations: [
-    FwTabComponent,
-    FwTabPanelComponent,
-    FwTabsComponent,
-  ],
-})
-export class FwTabsModule {
-}