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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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