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

package/src/components/checkbox/checkbox.stories.ts

@@ -1,224 +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 { FwContainedInputModule } from '../contained-input/contained-input.module';
-import { FwMenuModule } from '../menu/menu.module';
-import { FwTextInputModule } from '../text-input/text-input.module';
-import { FwWrappedInputModule } from '../wrapped-input/wrapped-input.module';
-import { FwCheckboxComponent } from './checkbox.component';
-import { FwCheckboxModule } from './checkbox.module';
-
-export default {
-  title: 'Form Controls/Checkbox',
-  component: FwCheckboxComponent,
-  parameters: {
-    controls: {
-      exclude: ['checkboxStyles', '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=409-13380&mode=design&t=nWWUp7Uaipn1gnod-0',
-    },
-  },
-  decorators: [
-    moduleMetadata({
-      imports: [
-        CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        FwCheckboxModule,
-        FwContainedInputModule,
-        FwMenuModule,
-        FwTextInputModule,
-        FwWrappedInputModule,
-      ],
-    }),
-    applicationConfig({
-      providers: [
-        importProvidersFrom(BrowserModule),
-        importProvidersFrom(BrowserAnimationsModule),
-      ],
-    }),
-  ],
-} as Meta;
-
-type Story = StoryObj<FwCheckboxComponent>;
-
-export const Checkbox: Story = {
-  args: {
-    checked: false,
-    focused: false,
-    disabled: false,
-    color: 'primary',
-    size: 'medium',
-    title: '',
-  },
-};
-
-export const InAForm: Story = {
-  args: {
-    checked: true,
-  },
-  render: (args) => {
-    const formGroup = new FormGroup({
-      name: new FormControl('Elizabeth Weir'),
-      primary: new FormControl(true),
-    });
-
-    return ({
-      props: { ...args, form: formGroup },
-      controls: { disabled: false },
-      template: `
-        <form [formGroup]="form">
-          <fw-wrapped-input title="Name">
-            <fw-text-input placeholder="Name" formControlName="name"></fw-text-input>
-            <fw-checkbox title="Primary" formControlName="primary"></fw-checkbox>
-          </fw-wrapped-input>
-        </form>
-    `,
-    });
-  },
-};
-
-export const WithContainedInput: Story = {
-  args: {},
-  render: (args) => {
-    return ({
-      props: args,
-      controls: { disabled: false },
-      template: `
-        <div style="display: flex; flex-direction: column; gap: 16px;">
-          <fw-contained-input title="Contained Input End" inputVariant="checkbox" [checked]="true">
-          </fw-contained-input>
-          <fw-contained-input title="Contained Input Start" inputVariant="checkbox" [checked]="false" inputPosition="start">
-          </fw-contained-input>
-        </div>
-    `,
-    });
-  },
-};
-
-export const WithMenuItem: Story = {
-  args: {},
-  render: (args) => {
-    return ({
-      props: { ...args, value: ['one'] },
-      controls: { disabled: false },
-      template: `
-        <fw-menu [useCheckbox]="true" [multiSelect]="true" [value]="value">
-          <fw-menu-item title="Menu Item One" value="one"></fw-menu-item>
-          <fw-menu-item title="Menu Item Two" value="two"></fw-menu-item>
-          <fw-menu-item title="Menu Item Three" description="Optional" value="three"></fw-menu-item>
-          <fw-menu-item title="Menu Item Four"  icon="icon-placeholder" value="four"></fw-menu-item>
-          <fw-menu-item title="Menu Item Five" description="Optional" icon="icon-placeholder" value="five" disabled="true"></fw-menu-item>
-        </fw-menu>
-    `,
-    });
-  },
-};
-
-export const Overview: Story = {
-  parameters: {
-    controls: {
-      exclude: /.*/g,
-    },
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: true },
-    template: `
-      <div>
-          <style> tr, td, th { padding: 12px; font-family: Inter; } </style>
-          <table>
-              <tr>
-                  <th></th>
-                  <th>primary</th>
-                  <th>secondary</th>
-                  <th>with label</th>
-                  <th>compact</th>
-              </tr>
-              <tr>
-                  <th>unchecked</th>
-                  <td>
-                      <fw-checkbox color="primary" [checked]="false"></fw-checkbox>
-                  </td>
-                  <td>
-                      <fw-checkbox color="secondary" [checked]="false"></fw-checkbox>
-                  </td>
-                  <td>
-                      <fw-checkbox color="primary" [checked]="false" size="medium" title="Medium"></fw-checkbox>
-                  </td>
-                  <td>
-                      <fw-checkbox color="primary" [checked]="false" size="compact" title="Compact"></fw-checkbox>
-                  </td>
-              </tr>
-              <tr>
-                  <th>checked</th>
-                    <td>
-                      <fw-checkbox color="primary" [checked]="true"></fw-checkbox>
-                  </td>
-                  <td>
-                      <fw-checkbox color="secondary" [checked]="true"></fw-checkbox>
-                  </td>
-                  <td>
-                      <fw-checkbox color="primary" [checked]="true" size="medium" title="Medium"></fw-checkbox>
-                  </td>
-                  <td>
-                      <fw-checkbox color="primary" [checked]="true" size="compact" title="Compact"></fw-checkbox>
-                  </td>
-              </tr>
-              <tr>
-                  <th>indeterminate</th>
-                   <td>
-                      <fw-checkbox color="primary" [checked]="undefined"></fw-checkbox>
-                  </td>
-                  <td>
-                      <fw-checkbox color="secondary" [checked]="undefined"></fw-checkbox>
-                  </td>
-                  <td>
-                      <fw-checkbox color="primary" [checked]="undefined" size="medium" title="Medium"></fw-checkbox>
-                  </td>
-                  <td>
-                      <fw-checkbox color="primary" [checked]="undefined" size="compact" title="Compact"></fw-checkbox>
-                  </td>
-              </tr>
-              <tr>
-                  <th>focused</th>
-                   <td>
-                      <fw-checkbox color="primary" [checked]="false" [focused]="true"></fw-checkbox>
-                  </td>
-                  <td>
-                      <fw-checkbox color="secondary" [checked]="false" [focused]="true"></fw-checkbox>
-                  </td>
-                  <td>
-                      <fw-checkbox color="primary" [checked]="false" [focused]="true" size="medium" title="Medium"></fw-checkbox>
-                  </td>
-                  <td>
-                      <fw-checkbox color="primary" [checked]="false" [focused]="true" size="compact" title="Compact"></fw-checkbox>
-                  </td>
-              </tr>
-               <tr>
-                  <th>disabled</th>
-                   <td>
-                      <fw-checkbox color="primary" [disabled]="true" [checked]="true"></fw-checkbox>
-                  </td>
-                  <td>
-                      <fw-checkbox color="secondary" [disabled]="true" [checked]="undefined"></fw-checkbox>
-                  </td>
-                  <td>
-                      <fw-checkbox color="primary" [disabled]="true" [checked]="false" size="medium" title="Medium"></fw-checkbox>
-                  </td>
-                  <td>
-                      <fw-checkbox color="primary" [disabled]="true" [checked]="false" size="compact" title="Compact"></fw-checkbox>
-                  </td>
-              </tr>
-          </table>
-      </div>
-
-    `,
-  }),
-};

package/src/components/chip/chip.component.html

@@ -1,13 +0,0 @@
-<div
-  [ngClass]="['chip', variant, 'chip-'+color]" [class.disabled]="disabled" [class.focused]="selected"
-  [class.selectable]="selectable" (click)="selectable ? select.emit(value) : undefined">
-  <fw-icon *ngIf="icon" class="chip-icon">{{ icon }}</fw-icon>
-  <ng-content select="fw-avatar"></ng-content>
-  <div class="chip-text" *ngIf="title">
-    <span>{{ title }}</span>
-    <span *ngIf="description" class="description">{{ description }}</span>
-  </div>
-  <div class="close-icon" *ngIf="showClose" (click)="handleClose($event)">
-    <fw-icon>close</fw-icon>
-  </div>
-</div>

package/src/components/chip/chip.component.scss

@@ -1,352 +0,0 @@
-@use '../../scss/icons/icons.scss';
-
-:host {
-  min-height: 24px;
-  display: inline-flex;
-}
-
-.chip {
-  box-sizing: border-box;
-  border-radius: 16px;
-  padding: 2px 4px;
-  display: inline-flex;
-  min-height: 24px;
-  align-items: center;
-  font-family: Inter, sans-serif;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 16px;
-
-  .chip-icon {
-    align-items: flex-start;
-    font-size: 16px;
-    min-width: 16px;
-    width: 16px;
-  }
-
-  .chip-text {
-    display: flex;
-    align-items: center;
-    margin: 0 6px;
-    min-height: 16px;
-    white-space: wrap;
-
-    .description {
-      margin-left: 4px;
-      font-weight: 400;
-      color: var(--typography-light)
-    }
-  }
-
-  .close-icon {
-    font-size: 12px;
-    font-weight: bold;
-    cursor: pointer;
-    border-width: 1px;
-    border-style: solid;
-    border-radius: 16px;
-    min-width: 12px;
-    width: 12px;
-    height: 12px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-
-    &:hover {
-      color: var(--typography-contrast);
-      border-radius: 16px;
-    }
-
-    > fw-icon {
-      font-size: 12px;
-      min-width: 12px;
-      width: 12px;
-      height: 12px;
-    }
-  }
-
-  &:not(.selectable) {
-    cursor: default;
-  }
-
-  &.selectable {
-    cursor: pointer;
-  }
-
-  &.enabled {
-    &.chip-slate {
-      color: var(--slate-base);
-      border: 1px solid var(--slate-border);
-
-      .close-icon:hover {
-        background-color: var(--slate-base);
-      }
-    }
-
-    &.chip-primary {
-      color: var(--primary-base);
-      border: 1px solid var(--primary-border);
-
-      .close-icon {
-        border-color: var(--primary-base);
-
-        &:hover {
-          background-color: var(--primary-base);
-        }
-      }
-    }
-
-    &.chip-secondary {
-      color: var(--secondary-base);
-      border: 1px solid var(--secondary-border);
-
-      .close-icon {
-        border-color: var(--secondary-base);
-
-        &:hover {
-          background-color: var(--secondary-base);
-        }
-      }
-    }
-
-    &.chip-orange {
-      color: var(--orange-base);
-      border: 1px solid var(--orange-border);
-
-      .close-icon {
-        border-color: var(--orange-base);
-
-        &:hover {
-          background-color: var(--orange-base);
-        }
-      }
-    }
-
-    &.chip-green {
-      color: var(--green-base);
-      border: 1px solid var(--green-border);
-
-      .close-icon {
-        border-color: var(--green-base);
-
-        &:hover {
-          background-color: var(--green-base);
-        }
-      }
-    }
-
-    &.chip-red {
-      color: var(--red-base);
-      border: 1px solid var(--red-border);
-
-      .close-icon {
-        border-color: var(--red-base);
-
-        &:hover {
-          background-color: var(--red-base);
-        }
-      }
-    }
-  }
-
-  &.hovered, &.selectable:not(.focused):hover {
-    &.chip-slate {
-      color: var(--slate-base) !important;
-      background-color: var(--slate-hover);
-      border: 1px solid var(--slate-border);
-
-      .close-icon:hover {
-        background-color: var(--slate-base);
-      }
-    }
-
-    &.chip-primary {
-      color: var(--primary-base) !important;
-      background-color: var(--primary-hover);
-      border: 1px solid var(--primary-border);
-
-      .close-icon {
-        border-color: var(--primary-base);
-
-        &:hover {
-          background-color: var(--primary-base);
-        }
-      }
-    }
-
-    &.chip-secondary {
-      color: var(--secondary-base) !important;
-      background-color: var(--secondary-hover);
-      border: 1px solid var(--secondary-border);
-
-      .close-icon {
-        border-color: var(--secondary-base);
-
-        &:hover {
-          background-color: var(--secondary-base);
-        }
-      }
-    }
-
-    &.chip-orange {
-      color: var(--orange-base) !important;
-      background-color: var(--orange-hover);
-      border: 1px solid var(--orange-border);
-
-      .close-icon {
-        border-color: var(--orange-base);
-
-        &:hover {
-          background-color: var(--orange-base);
-        }
-      }
-    }
-
-    &.chip-green {
-      color: var(--green-base) !important;
-      background-color: var(--green-hover);
-      border: 1px solid var(--green-border);
-
-      .close-icon {
-        border-color: var(--green-base);
-
-        &:hover {
-          background-color: var(--green-base);
-        }
-      }
-    }
-
-    &.chip-red {
-      color: var(--red-base) !important;
-      background-color: var(--red-hover);
-      border: 1px solid var(--red-border);
-
-      .close-icon {
-        border-color: var(--red-base);
-
-        &:hover {
-          background-color: var(--red-base);
-        }
-      }
-    }
-  }
-
-
-  &.focused {
-    color: var(--typography-contrast) !important;
-
-    .close-icon {
-      border-color: var(--typography-contrast);
-    }
-
-    .close-icon:hover {
-      background-color: var(--typography-contrast);
-      border-radius: 16px;
-    }
-
-    &.chip-slate {
-      background-color: var(--slate-focus);
-      color: var(--typography-base) !important;
-
-      .close-icon {
-        border-color: var(--typography-base);
-      }
-
-      .close-icon:hover {
-        color: var(--slate-base);
-      }
-    }
-
-    &.chip-primary {
-      background-color: var(--primary-base);
-
-      .close-icon:hover {
-        color: var(--primary-base);
-      }
-    }
-
-    &.chip-secondary {
-      background-color: var(--secondary-base);
-
-      .close-icon:hover {
-        color: var(--secondary-base);
-      }
-    }
-
-    &.chip-orange {
-      background-color: var(--orange-base);
-
-      .close-icon:hover {
-        color: var(--orange-base);
-      }
-    }
-
-    &.chip-green {
-      background-color: var(--green-base);
-
-      .close-icon:hover {
-        color: var(--green-base);
-      }
-    }
-
-    &.chip-red {
-      background-color: var(--red-base);
-
-      .close-icon:hover {
-        color: var(--red-base);
-      }
-    }
-  }
-
-  &.disabled {
-    opacity: 38%;
-
-    .close-icon {
-      cursor: not-allowed;
-      color: inherit;
-
-      &:hover {
-        background-color: transparent !important;
-      }
-    }
-
-    &.chip-slate {
-      color: var(--slate-base);
-      background-color: var(--slate-hover);
-      border: 1px solid var(--slate-border);
-    }
-
-    &.chip-primary {
-      color: var(--primary-base);
-      background-color: var(--primary-hover);
-      border: 1px solid var(--primary-border);
-    }
-
-    &.chip-secondary {
-      color: var(--secondary-base);
-      background-color: var(--secondary-hover);
-      border: 1px solid var(--secondary-border);
-    }
-
-    &.chip-orange {
-      color: var(--orange-base);
-      background-color: var(--orange-hover);
-      border: 1px solid var(--orange-border);
-    }
-
-    &.chip-green {
-      color: var(--green-base);
-      background-color: var(--green-hover);
-      border: 1px solid var(--green-border);
-    }
-
-    &.chip-red {
-      color: var(--red-base);
-      background-color: var(--red-hover);
-      border: 1px solid var(--red-border);
-    }
-  }
-
-}

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

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

package/src/components/chip/chip.component.ts

@@ -1,32 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-import { IconType } from '../icon/icon.types';
-
-@Component({
-  selector: 'fw-chip',
-  templateUrl: './chip.component.html',
-  styleUrls: ['./chip.component.scss'],
-})
-export class FwChipComponent {
-  @Input() value?: object | string;
-  @Input() variant?: 'enabled' | 'hovered' | 'focused' | 'disabled' = 'enabled';
-  @Input() color?: 'slate' | 'primary' | 'secondary' | 'red' | 'green' | 'orange' = 'slate';
-  @Input() icon?: IconType;
-  @Input() title?: string;
-  @Input() description?: string;
-  @Input() showClose?: boolean;
-  @Input() disabled?: boolean;
-  @Input() selected?: boolean;
-  @Input() selectable?: boolean = true;
-  // eslint-disable-next-line @angular-eslint/no-output-native
-  @Output() close: EventEmitter<void> = new EventEmitter<void>();
-  // eslint-disable-next-line @angular-eslint/no-output-native
-  @Output() select: EventEmitter<object | string> = new EventEmitter<object | string>();
-
-  handleClose(event: MouseEvent): void {
-    event.stopPropagation();
-    if (this.close) {
-      this.close.emit();
-    }
-  }
-}

package/src/components/chip/chip.mdx

@@ -1,16 +0,0 @@
-import {Controls, Description, Meta, Primary, Stories, Subtitle, Title} from '@storybook/blocks';
-
-import * as ChipStories from './chip.stories';
-
-<Meta of={ChipStories}/>
-<Title/>
-
-```ts
-import FwChipModule from '@flywheel-io/vision';
-```
-
-<Subtitle/>
-<Description/>
-<Primary/>
-<Controls exclude={['handleClose']}/>
-<Stories/>

package/src/components/chip/chip.module.ts

@@ -1,22 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-import { FwIconModule } from '../icon/icon.module';
-import { FwIconButtonModule } from '../icon-button/icon-button.module';
-import { FwChipComponent } from './chip.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        FwIconModule,
-        FwIconButtonModule,
-    ],
-    exports: [
-        FwChipComponent,
-    ],
-    declarations: [
-        FwChipComponent,
-    ],
-})
-export class FwChipModule {
-}