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

package/src/components/switch/switch.component.scss

@@ -0,0 +1,179 @@
+.fw-switch {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  margin-left: 12px;
+  margin-right: 8px;
+  height: 22px;
+  box-sizing: border-box;
+
+  p {
+    margin: 0;
+  }
+
+  input {
+    display: none;
+  }
+
+  label {
+    margin-left: 8px;
+    margin-right: 8px;
+    cursor: pointer;
+  }
+
+  .switch-track {
+    position: relative;
+    width: 34px;
+    height: 14px;
+    transition: all .4s ease;
+
+    .switch-slide {
+      width: 34px;
+      height: 14px;
+      border-radius: 10px;
+      opacity: 0.1;
+      background: var(--slate-dark);
+      position: absolute;
+      top: 0;
+      left: 0;
+      transition: background-color 200ms linear, opacity 200ms linear;
+    }
+
+    .switch-knob {
+      width: 20px;
+      height: 20px;
+      background-color: var(--slate-light);
+      border-radius: 10px;
+      filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.12)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.14)) drop-shadow(0 2px 1px rgba(0, 0, 0, 0.20));
+      position: absolute;
+      top: -3px;
+      left: -3px;
+      transition: left .5s cubic-bezier(0.175, 0.885, 0.320, 1.275), padding .3s ease, margin .3s ease;
+
+      &:hover {
+        outline: 9px solid var(--slate-hover);
+      }
+    }
+
+    &.checked {
+      .switch-slide {
+        background-color: var(--slate-dark);
+        opacity: .6;
+        transition: background-color 200ms linear, opacity 200ms linear;
+      }
+
+      .switch-knob {
+        transition: background-color 200ms linear, opacity 200ms linear,
+        left .5s cubic-bezier(0.175, 0.885, 0.320, 1.275),
+        padding .3s ease, margin .3s ease;
+        left: 16px;
+      }
+    }
+  }
+
+  &.primary {
+    .switch-track {
+      &.checked {
+        .switch-slide {
+          background-color: var(--primary-base);
+          transition: background-color 200ms linear, opacity 200ms linear;
+        }
+
+        .switch-knob {
+          background-color: var(--primary-base);
+
+          &:hover {
+            outline: 9px solid var(--primary-hover);
+          }
+        }
+      }
+    }
+  }
+
+  &.secondary {
+    .switch-track {
+      &.checked {
+        .switch-slide {
+          background-color: var(--secondary-base);
+        }
+
+        .switch-knob {
+          background-color: var(--secondary-base);
+
+          &:hover {
+            outline: 9px solid var(--secondary-hover);
+          }
+        }
+      }
+    }
+  }
+
+  &.title-start {
+    flex-direction: row-reverse;
+
+    label {
+      margin-right: 10px;
+      margin-left: 0;
+    }
+  }
+
+  &.size-small {
+    height: 20px;
+    
+    .switch-track {
+      position: relative;
+      width: 26px;
+      height: 10px;
+
+      .switch-slide {
+        width: 26px;
+        height: 10px;
+        border-radius: 10px;
+      }
+
+      .switch-knob {
+        width: 16px;
+        height: 16px;
+        border-radius: 8px;
+
+        &:hover {
+          outline-width: 7px;
+        }
+      }
+
+      &.checked {
+        .switch-knob {
+          left: 13px;
+        }
+      }
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+
+    p {
+      color: var(--typography-light);
+    }
+
+    .switch-track {
+      opacity: .5;
+
+      &.checked {
+        .switch-slide {
+          background-color: var(--slate-base);
+        }
+
+        .switch-knob {
+          background-color: var(--slate-light);
+
+          &:hover {
+            outline: 9px solid transparent;
+          }
+        }
+      }
+    }
+  }
+
+
+}

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

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

package/src/components/switch/switch.component.ts

@@ -0,0 +1,58 @@
+import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 'fw-switch',
+  templateUrl: './switch.component.html',
+  styleUrls: ['./switch.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => FwSwitchComponent),
+      multi: true,
+    },
+  ],
+})
+export class FwSwitchComponent implements ControlValueAccessor {
+  @Input() name?: string;
+  @Input() title?: string;
+  @Input() titlePosition?: 'start' | 'end' = 'end';
+  @Input() size?: 'small' | 'medium' = 'medium';
+  @Input() color?: 'default' | 'primary' | 'secondary' = 'primary';
+  @Input() disabled?: boolean;
+  @Input() checked: boolean = false;
+
+  // eslint-disable-next-line @angular-eslint/no-output-native
+  @Output() change = new EventEmitter<boolean>();
+
+  onChange: (value: boolean) => void;
+  onTouched = (): void => {
+  };
+
+  registerOnChange(fn: (value: boolean) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  writeValue(checked: boolean): void {
+    this.checked = checked;
+  }
+
+  handleClick(): void {
+    this.onTouched();
+    if (!this.disabled) {
+      this.checked = !this.checked;
+      if (this.onChange) {
+        this.onChange(this.checked);
+      }
+      this.change.emit(this.checked);
+    }
+  }
+}

package/src/components/switch/switch.mdx

@@ -0,0 +1,39 @@
+import {Controls, Description, Meta, Primary, Stories, Subtitle, Title} from '@storybook/blocks';
+
+import * as SwitchStories from './switch.stories';
+
+<Meta of={SwitchStories}/>
+<Title/>
+
+```ts
+import FwSwitchModule from '@flywheel-io/vision';
+```
+
+## Managing state directly
+```html
+<fw-switch title="Title" [checked]="switchChecked" (change)="switchChanged($event)"></fw-switch>
+```
+
+## Using with ngModel
+```html
+<fw-switch title="Title" [(ngModel)]="switchChecked"></fw-switch>
+```
+
+## Using with a FormControl
+
+This component implements [ControlValueAccessor](https://angular.io/api/forms/ControlValueAccessor). So it will work with Angular's reactive forms and template-driven forms. Simply use it as you would any other form element, for example:
+```html
+<fw-switch title="Title" [formControl]="myFormControl"></fw-switch>
+
+// or
+
+<form [formGroup]="form">
+  <fw-switch title="Title" formControlName="myFormControl"></fw-switch>
+</form>
+```
+
+<Subtitle/>
+<Description/>
+<Primary/>
+<Controls/>
+<Stories/>

package/src/components/switch/switch.module.ts

@@ -0,0 +1,18 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { FwSwitchComponent } from './switch.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+  ],
+  exports: [
+    FwSwitchComponent,
+  ],
+  declarations: [
+    FwSwitchComponent,
+  ],
+})
+export class FwSwitchModule {
+}

package/src/components/switch/switch.stories.ts

@@ -0,0 +1,117 @@
+import { CommonModule } from '@angular/common';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { FwSwitchComponent } from './switch.component';
+import { FwSwitchModule } from './switch.module';
+
+export default {
+  title: 'Form Controls/Switch',
+  component: FwSwitchComponent,
+  parameters: {
+    controls: {},
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=1676-61160&mode=dev',
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        FwSwitchModule,
+      ],
+    }),
+  ],
+
+} as Meta;
+
+type Story = StoryObj<FwSwitchComponent>;
+
+export const Playground: Story = {
+  args: {
+    title: 'Switch',
+    checked: true,
+    disabled: false,
+    color: 'primary',
+    titlePosition: 'end',
+    size: 'medium',
+  },
+};
+
+export const Overview: Story = {
+  render: (args) => ({
+    props: args,
+    controls: { disabled: true },
+    template: `
+      <div>
+          <style> tr, td { padding: 16px; font-family: Inter } </style>
+          <table>
+              <tr>
+                  <th></th>
+                  <th>checked<br/>false</th>
+                  <th>checked<br/>true</th>
+                  <th>disabled<br/>true</th>
+                  <th>with<br/>title</th>
+                  <th>size<br/>small</th>
+              </tr>
+              <tr>
+                  <th>default</th>
+                  <td>
+                      <fw-switch></fw-switch>
+                  </td>
+                  <td>
+                      <fw-switch [checked]="true"></fw-switch>
+                  </td>
+                  <td>
+                      <fw-switch [disabled]="true"></fw-switch>
+                  </td>
+                  <td>
+                      <fw-switch title="Title"></fw-switch>
+                  </td>
+                  <td>
+                     <fw-switch size="small" [checked]="true" title="Title"></fw-switch>
+                  </td>
+              </tr>
+              <tr>
+                  <th>primary</th>
+                  <td>
+                      <fw-switch color="primary"></fw-switch>
+                  </td>
+                  <td>
+                      <fw-switch color="primary" [checked]="true"></fw-switch>
+                  </td>
+                  <td>
+                      <fw-switch color="primary" [disabled]="true"></fw-switch>
+                  </td>
+                  <td>
+                      <fw-switch color="primary" title="Title"></fw-switch>
+                  </td>
+                  <td>
+                     <fw-switch color="primary" size="small" [checked]="true" title="Title"></fw-switch>
+                  </td>
+              </tr>
+              <tr>
+                  <th>secondary</th>
+                  <td>
+                      <fw-switch color="secondary"></fw-switch>
+                  </td>
+                  <td>
+                      <fw-switch color="secondary" [checked]="true"></fw-switch>
+                  </td>
+                  <td>
+                      <fw-switch color="secondary" [disabled]="true"></fw-switch>
+                  </td>
+                  <td>
+                      <fw-switch color="secondary" title="Title"></fw-switch>
+                  </td>
+                  <td>
+                     <fw-switch color="secondary" size="small" [checked]="true" title="Title"></fw-switch>
+                  </td>
+              </tr>
+
+          </table>
+      </div>
+
+    `,
+  }),
+};

package/src/components/table/cell.ts

@@ -0,0 +1,111 @@
+/* eslint @angular-eslint/directive-class-suffix: 0 */
+/* eslint  @angular-eslint/directive-selector: 0 */
+
+import {
+  CdkCell,
+  CdkCellDef,
+  CdkColumnDef,
+  CdkFooterCell,
+  CdkFooterCellDef,
+  CdkHeaderCell,
+  CdkHeaderCellDef,
+} from '@angular/cdk/table';
+import { Directive, HostBinding, Input } from '@angular/core';
+
+/**
+ * Cell definition for the fw-table.
+ * Captures the template of a column's data row cell as well as cell-specific properties.
+ */
+@Directive({
+  selector: '[fwCellDef]',
+  providers: [{ provide: CdkCellDef, useExisting: FwCellDef }],
+  standalone: true,
+})
+export class FwCellDef extends CdkCellDef {
+}
+
+/**
+ * Header cell definition for the fw-table.
+ * Captures the template of a column's header cell and as well as cell-specific properties.
+ */
+@Directive({
+  selector: '[fwHeaderCellDef]',
+  providers: [{ provide: CdkHeaderCellDef, useExisting: FwHeaderCellDef }],
+  standalone: true,
+})
+export class FwHeaderCellDef extends CdkHeaderCellDef {
+}
+
+/**
+ * Footer cell definition for the fw-table.
+ * Captures the template of a column's footer cell and as well as cell-specific properties.
+ */
+@Directive({
+  selector: '[fwFooterCellDef]',
+  providers: [{ provide: CdkFooterCellDef, useExisting: FwFooterCellDef }],
+  standalone: true,
+})
+export class FwFooterCellDef extends CdkFooterCellDef {
+}
+
+/**
+ * Column definition for the fw-table.
+ * Defines a set of cells available for a table column.
+ */
+@Directive({
+  selector: '[fwColumnDef]',
+  providers: [
+    { provide: CdkColumnDef, useExisting: FwColumnDef },
+  ],
+  standalone: true,
+})
+export class FwColumnDef extends CdkColumnDef {
+  /** Unique name for this column. */
+  @Input('fwColumnDef')
+  override get name(): string {
+    return this._name;
+  }
+
+  override set name(name: string) {
+    this._setNameInput(name);
+  }
+
+  /**
+   * Add "fw-column-" prefix in addition to "cdk-column-" prefix.
+   * In the future, this will only add "fw-column-" and columnCssClassName
+   * will change from type string[] to string.
+   * @docs-private
+   */
+  protected override _updateColumnCssClassName(): void {
+    super._updateColumnCssClassName();
+    this._columnCssClassName!.push(`fw-column-${this.cssClassFriendlyName}`);
+  }
+}
+
+/** Header cell template container that adds the right classes and role. */
+@Directive({
+  selector: 'fw-header-cell, th[fw-header-cell]',
+  standalone: true,
+})
+export class FwHeaderCell extends CdkHeaderCell {
+  @HostBinding() class: string = 'fw-header-cell';
+  @HostBinding() role: string = 'columnheader';
+}
+
+/** Footer cell template container that adds the right classes and role. */
+@Directive({
+  selector: 'fw-footer-cell, td[fw-footer-cell]',
+  standalone: true,
+})
+export class FwFooterCell extends CdkFooterCell {
+  @HostBinding() class: string = 'fw-footer-cell';
+}
+
+/** Cell template container that adds the right classes and role. */
+@Directive({
+  selector: 'fw-cell, td[fw-cell]',
+  standalone: true,
+})
+export class FwCell extends CdkCell {
+  @HostBinding() class: string = 'fw-cell';
+}

package/src/components/table/row.ts

@@ -0,0 +1,113 @@
+/* eslint @angular-eslint/directive-class-suffix: 0 */
+/* eslint @angular-eslint/directive-selector: 0 */
+/* eslint @angular-eslint/component-class-suffix:0 */
+
+import {
+  CdkFooterRow,
+  CdkFooterRowDef,
+  CdkHeaderRow,
+  CdkHeaderRowDef,
+  CdkNoDataRow,
+  CdkRow,
+  CdkRowDef,
+} from '@angular/cdk/table';
+import { ChangeDetectionStrategy, Component, Directive, HostBinding, Input, ViewEncapsulation } from '@angular/core';
+
+const ROW_TEMPLATE = '<ng-container cdkCellOutlet></ng-container>';
+
+/**
+ * Header row definition for the fw-table.
+ * Captures the header row's template and other header properties such as the columns to display.
+ */
+@Directive({
+  selector: '[fwHeaderRowDef]',
+  providers: [{ provide: CdkHeaderRowDef, useExisting: FwHeaderRowDef }],
+})
+export class FwHeaderRowDef extends CdkHeaderRowDef {
+  @Input('fwHeaderRowDef') columns: string[];
+  // @Input('fwHeaderRowDefSticky') sticky: boolean;
+}
+
+/**
+ * Footer row definition for the fw-table.
+ * Captures the footer row's template and other footer properties such as the columns to display.
+ */
+@Directive({
+  selector: '[fwFooterRowDef]',
+  providers: [{ provide: CdkFooterRowDef, useExisting: FwFooterRowDef }],
+})
+export class FwFooterRowDef extends CdkFooterRowDef {
+  @Input('fwFooterRowDef') columns: string[];
+  // @Input('fwFooterRowDefSticky') sticky: boolean;
+}
+
+/**
+ * Data row definition for the fw-table.
+ * Captures the data row's template and other properties such as the columns to display and
+ * a when predicate that describes when this row should be used.
+ */
+@Directive({
+  selector: '[fwRowDef]',
+  providers: [{ provide: CdkRowDef, useExisting: FwRowDef }],
+})
+export class FwRowDef<T> extends CdkRowDef<T> {
+  @Input('fwRowDefColumns') columns: string[];
+  @Input('fwRowDefWhen') when: (index: number, rowData: T) => boolean;
+}
+
+/** Header template container that contains the cell outlet. Adds the right class and role. */
+@Component({
+  selector: 'fw-header-row, tr[fw-header-row]',
+  template: ROW_TEMPLATE,
+  // See note on CdkTable for explanation on why this uses the default change detection strategy.
+  // tslint:disable-next-line:validate-decorators
+  changeDetection: ChangeDetectionStrategy.Default,
+  encapsulation: ViewEncapsulation.None,
+  exportAs: 'fwHeaderRow',
+  providers: [{ provide: CdkHeaderRow, useExisting: FwHeaderRow }],
+})
+export class FwHeaderRow extends CdkHeaderRow {
+  @HostBinding() class = 'fw-header-row';
+  @HostBinding() role = 'row';
+}
+
+/** Footer template container that contains the cell outlet. Adds the right class and role. */
+@Component({
+  selector: 'fw-footer-row, tr[fw-footer-row]',
+  template: ROW_TEMPLATE,
+  // See note on CdkTable for explanation on why this uses the default change detection strategy.
+  // tslint:disable-next-line:validate-decorators
+  changeDetection: ChangeDetectionStrategy.Default,
+  encapsulation: ViewEncapsulation.None,
+  exportAs: 'fwFooterRow',
+  providers: [{ provide: CdkFooterRow, useExisting: FwFooterRow }],
+})
+export class FwFooterRow extends CdkFooterRow {
+  @HostBinding() class = 'fw-footer-row';
+  @HostBinding() role = 'row';
+}
+
+/** Data row template container that contains the cell outlet. Adds the right class and role. */
+@Component({
+  selector: 'fw-row, tr[fw-row]',
+  template: ROW_TEMPLATE,
+  // See note on CdkTable for explanation on why this uses the default change detection strategy.
+  // tslint:disable-next-line:validate-decorators
+  changeDetection: ChangeDetectionStrategy.Default,
+  encapsulation: ViewEncapsulation.None,
+  exportAs: 'fwRow',
+  providers: [{ provide: CdkRow, useExisting: FwRow }],
+})
+export class FwRow extends CdkRow {
+  @HostBinding() class = 'fw-row';
+  @HostBinding() role = 'row';
+}
+
+/** Row that can be used to display a message when no data is shown in the table. */
+@Directive({
+  selector: 'ng-template[fwNoDataRow]',
+  providers: [{ provide: CdkNoDataRow, useExisting: FwNoDataRow }],
+})
+export class FwNoDataRow extends CdkNoDataRow {
+  override _contentClassName = 'fw-no-data-row';
+}