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

package/src/components/textarea-input/textarea-input.component.spec.ts

@@ -1,28 +0,0 @@
-import { CdkTextareaAutosize } from '@angular/cdk/text-field';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FwIconModule } from '../icon/icon.module';
-import { FwTooltipModule } from '../tooltip/tooltip.module';
-import { FwTextAreaInputComponent } from './textarea-input.component';
-
-describe('TextAreaInputComponent', () => {
-  let component: FwTextAreaInputComponent;
-  let fixture: ComponentFixture<FwTextAreaInputComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [FwIconModule, FwTooltipModule, CdkTextareaAutosize],
-      declarations: [FwTextAreaInputComponent],
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(FwTextAreaInputComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/components/textarea-input/textarea-input.component.ts

@@ -1,73 +0,0 @@
-import { Component, HostBinding, Input } from '@angular/core';
-import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { min } from 'rxjs';
-
-@Component({
-  selector: 'fw-textarea-input',
-  templateUrl: './textarea-input.component.html',
-  styleUrls: ['./textarea-input.component.scss'],
-  providers: [{
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: FwTextAreaInputComponent,
-    multi: true,
-  }],
-})
-export class FwTextAreaInputComponent implements ControlValueAccessor {
-
-  @Input() minRows: number = 2;
-  @Input() maxRows: number = 15;
-  @Input() disabled?: boolean = false;
-  /**
-   * @deprecated please use fw-wrapped-input instead
-   */
-  @Input() helperText?: string;
-  /**
-   * @deprecated please use fw-wrapped-input instead
-   */
-  @Input() errorText?: string;
-  @Input() placeholder?: string;
-  @Input() readOnly?: boolean;
-  @Input() autofocus?: string;
-  @Input() width?: string;
-  // we bind this to host because that's where angular form apis put the error classes
-  @HostBinding('class.errored') @Input() error?: boolean = false;
-
-  @Input() value = '';
-  externalControl: FormControl = null;
-
-  public onTouch = (): void => {
-  };
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  public onChange = (value: string): void => {
-  };
-
-  writeValue(obj: string): void {
-    this.value = obj;
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  registerOnTouched(fn: any): void {
-    this.onTouch = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-  }
-
-  changeHandler(event: KeyboardEvent): void {
-    this.value = (event.target as HTMLInputElement).value;
-    this.onChange(this.value);
-    this.onTouch();
-  }
-
-  blurHandler(): void {
-    this.onTouch();
-  }
-
-  protected readonly min = min;
-}

package/src/components/textarea-input/textarea-input.mdx

@@ -1,43 +0,0 @@
-{/* DocumentationTemplate.mdx */}
-
-
-
-
-import {Controls, Meta, Primary, Stories, Title} from '@storybook/blocks';
-import * as TextAreaInputStories from './textarea-input.stories.ts';
-
-<Meta of={TextAreaInputStories}/>
-
-<Title/>
-```ts
-import { FwTextAreaInputModule } from '@flywheel-io/vision'
-```
-
-## Managing state directly
-```html
-<fw-textarea-input [value]="value" (change)="valueChanged($event)"></fw-textarea-input>
-```
-
-## Using with ngModel
-```html
-<fw-textarea-input [(ngModel)]="value"></fw-textarea-input>
-```
-
-## 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-textarea-input [formControl]="myFormControl"></fw-textarea-input>
-
-// or
-
-<form [formGroup]="form">
-  <fw-textarea-input formControlName="myFormControl"></fw-textarea-input>
-</form>
-```
-
-## Playground
-<Primary/>
-<Controls/>
-
-<Stories/>

package/src/components/textarea-input/textarea-input.module.ts

@@ -1,25 +0,0 @@
-import { TextFieldModule } from '@angular/cdk/text-field';
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
-
-import { FwIconModule } from '../icon/icon.module';
-import { FwTextAreaInputComponent } from './textarea-input.component';
-
-
-@NgModule({
-  imports: [
-    CommonModule,
-    ReactiveFormsModule,
-    TextFieldModule,
-    FwIconModule,
-  ],
-  exports: [
-    FwTextAreaInputComponent,
-  ],
-  declarations: [
-    FwTextAreaInputComponent,
-  ],
-})
-export class FwTextAreaInputModule {
-}

package/src/components/textarea-input/textarea-input.stories.ts

@@ -1,106 +0,0 @@
-// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
-import { TextFieldModule } from '@angular/cdk/text-field';
-import { CommonModule } from '@angular/common';
-import { ReactiveFormsModule } from '@angular/forms';
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-
-import { FwIconModule } from '../icon/icon.module';
-import { FwWrappedInputModule } from '../wrapped-input/wrapped-input.module';
-import { FwTextAreaInputComponent } from './textarea-input.component';
-import { FwTextAreaInputModule } from './textarea-input.module';
-
-export default {
-  title: 'Form Controls/TextArea Input',
-  component: FwTextAreaInputComponent,
-  parameters: {
-    controls: {},
-    design: {
-      type: 'figma',
-      url: '',
-    },
-  },
-  decorators: [
-    moduleMetadata({
-      imports: [
-        CommonModule,
-        FwIconModule,
-        FwTextAreaInputModule,
-        FwWrappedInputModule,
-        ReactiveFormsModule,
-        TextFieldModule,
-      ],
-    }),
-  ],
-  argTypes: {
-    helperText: {
-      description: 'DEPRECATED use Wrapped Input',
-    },
-    errorText: {
-      description: 'DEPRECATED use Wrapped Input',
-    },
-  },
-} as Meta;
-
-type Story = StoryObj<FwTextAreaInputComponent>;
-
-export const Overview: Story = {
-  decorators: [],
-  args: {
-    minRows: 3,
-    maxRows: 15,
-    placeholder: 'Placeholder....',
-  },
-};
-
-export const WithHelperText: Story = {
-  decorators: [],
-  args: {
-    minRows: 3,
-    maxRows: 15,
-    placeholder: 'Placeholder....',
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-    },
-    controls: { disabled: false },
-    template: `
-        <fw-wrapped-input helperText="This is the helper text.">
-          <fw-textarea-input [placeholder]="placeholder"></fw-textarea-input>
-        </fw-wrapped-input>
-    `,
-  }),
-};
-
-export const InErrorState: Story = {
-  decorators: [],
-  args: {
-    minRows: 3,
-    maxRows: 15,
-    placeholder: 'Placeholder....',
-    value: 'bad value',
-    error: true,
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-    },
-    controls: { disabled: false },
-    template: `
-        <fw-wrapped-input errorText="This is in the error state">
-          <fw-textarea-input [placeholder]="placeholder" [value]="value" [error]="error"></fw-textarea-input>
-        </fw-wrapped-input>
-    `,
-  }),
-};
-
-export const WithValue: Story = {
-  decorators: [],
-  args: {
-    minRows: 3,
-    maxRows: 10,
-    width: '330px',
-    placeholder: 'Placeholder....',
-    value: '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.',
-  },
-};

package/src/components/tooltip/tooltip-panel/tooltip-panel.component.html

@@ -1,6 +0,0 @@
-<div
-  class="fw-tooltip-content-wrapper" [ngClass]="color==='dark'?'vision-dark-theme':''"
-  [ngStyle]="{'maxWidth': maxWidth+'px'}">
-  <ng-content></ng-content>
-  <div class="fw-tooltip-caret"></div>
-</div>

package/src/components/tooltip/tooltip-panel/tooltip-panel.component.scss

@@ -1,109 +0,0 @@
-.fw-tooltip-panel {
-  .fw-tooltip-content-wrapper {
-    position: relative;
-    background: var(--card-background);
-    border-radius: 8px;
-    border: 1px solid var(--separations-border);
-    min-width: 60px;
-    box-sizing: border-box;
-    padding: 4px 8px;
-    background-color: var(--card-header);
-    text-align: center;
-    overflow-wrap: break-word;
-
-    h5 {
-      margin: 0 !important;
-      color: var(--typography-muted);
-    }
-
-    .fw-tooltip-caret {
-      position: absolute;
-      overflow: hidden;
-      width: 16px;
-      height: 16px;
-
-      &::after {
-        display: block;
-        content: '';
-        width: 10px;
-        height: 10px;
-        background: var(--separations-border);
-        border: 1px solid var(--separations-border);
-        transform: rotate(45deg);
-        position: relative;
-      }
-    }
-  }
-
-  &.fw-tooltip-none {
-    margin-bottom: 10px;
-
-    .fw-tooltip-caret {
-      display: none;
-    }
-  }
-
-  &.fw-tooltip-above {
-    margin-bottom: 10px;
-
-    .fw-tooltip-caret {
-      left: calc(50% - 8px);
-      bottom: -10px;
-      height: 10px !important;
-
-      &::after {
-        margin: -8px auto;
-        width: 10px;
-      }
-    }
-  }
-
-
-  &.fw-tooltip-below {
-    margin-top: 10px;
-
-    .fw-tooltip-caret {
-      left: calc(50% - 8px);
-      top: -10px;
-      height: 10px !important;
-
-      &::after {
-        top: 10px;
-        margin: -4px auto;
-        width: 10px;
-      }
-    }
-  }
-
-  &.fw-tooltip-left {
-    margin-right: 10px;
-
-    .fw-tooltip-caret {
-      right: -10px;
-      top: max(50% - 10px, 3px);
-      width: 10px !important;
-
-      &::after {
-        top: calc(50% - 5px);
-        left: -8px;
-        width: 10px;
-      }
-    }
-  }
-
-  &.fw-tooltip-right {
-    margin-left: 10px;
-
-    .fw-tooltip-caret {
-      left: -10px;
-      top: max(50% - 10px, 3px);
-      width: 10px !important;
-
-      &::after {
-        top: calc(50% - 5px);
-        right: -6px;
-        width: 10px;
-      }
-    }
-  }
-}

package/src/components/tooltip/tooltip-panel/tooltip-panel.component.ts

@@ -1,22 +0,0 @@
-import { Component, EventEmitter, HostBinding, HostListener, Input, Output, ViewEncapsulation } from '@angular/core';
-
-@Component({
-  selector: 'fw-tooltip-panel',
-  templateUrl: './tooltip-panel.component.html',
-  styleUrls: ['./tooltip-panel.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-})
-export class FwTooltipPanelComponent {
-  @Input() position: 'above' | 'below' | 'left' | 'right' | 'none';
-  @Input() color?: 'light' | 'dark' = 'light';
-  @Input() maxWidth?: number = 200;
-  @Output() mouseLeave: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
-
-  @HostBinding('attr.class') get classes(): string {
-    return ['fw-tooltip-panel', 'fw-tooltip-' + this.position].join(' ');
-  }
-
-  @HostListener('mouseleave', ['$event']) hidePopover(e: MouseEvent): void {
-    this.mouseLeave.emit(e);
-  }
-}

package/src/components/tooltip/tooltip-panel/tooltip-panel.stories.ts

@@ -1,74 +0,0 @@
-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 { FwLayoutsModule } from '../../layouts/layouts.module';
-import { FwTooltipModule } from '../tooltip.module';
-import { FwTooltipPanelComponent } from './tooltip-panel.component';
-
-
-const meta: Meta = {
-  title: 'Components/Tooltip',
-  component: FwTooltipPanelComponent,
-  parameters: {
-    controls: {},
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=4951-73659&mode=dev',
-    },
-  },
-  decorators: [
-    applicationConfig({
-      providers: [importProvidersFrom([
-        BrowserAnimationsModule,
-      ])],
-    }),
-    moduleMetadata({
-      imports: [
-        CommonModule,
-        FwTooltipModule,
-        FwLayoutsModule,
-      ],
-    }),
-  ],
-};
-export default meta;
-
-type Story = StoryObj<FwTooltipPanelComponent>;
-
-export const TooltipPositions: Story = {
-  args: {},
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-      <div style="display: grid; grid-template-columns: 115px 115px 115px; gap: 16px; ">
-
-        <div></div>
-        <fw-tooltip-panel position="above">
-            <h5>Above Position</h5>
-        </fw-tooltip-panel>
-        <div></div>
-
-        <fw-tooltip-panel position="left">
-           <h5>Left Position</h5>
-        </fw-tooltip-panel>
-        <fw-tooltip-panel position="none">
-           <h5>None Position</h5>
-        </fw-tooltip-panel>
-        <fw-tooltip-panel position="right">
-           <h5>Right Position</h5>
-        </fw-tooltip-panel>
-
-
-        <div></div>
-        <fw-tooltip-panel position="below">
-            <h5>Below Position</h5>
-        </fw-tooltip-panel>
-        <div></div>
-
-      </div>
-    `,
-  }),
-};

package/src/components/tooltip/tooltip.component.html

@@ -1,16 +0,0 @@
-<ng-template
-  cdkConnectedOverlay
-  [cdkConnectedOverlayOrigin]="trigger"
-  [cdkConnectedOverlayOpen]="isOpen"
-  [cdkConnectedOverlayPositions]="[positionMap[position]]">
-  <fw-tooltip-panel [position]="position" [color]="color" [maxWidth]="maxWidth" *ngIf="title">
-    <h5 class="vision-h5">{{ title }}</h5>
-  </fw-tooltip-panel>
-</ng-template>
-
-<div
-  title="" [ngClass]="['tooltip-trigger',fullWidth?'full-width':'']"
-  cdkOverlayOrigin #trigger="cdkOverlayOrigin"
-  (mouseenter)="isOpen=true" (mouseleave)="isOpen=false">
-  <ng-content></ng-content>
-</div>

package/src/components/tooltip/tooltip.component.scss

@@ -1,26 +0,0 @@
-:host {
-  &.full-width {
-    flex: 1;
-    display: flex;
-    width: stretch;
-
-    button {
-      flex: 1;
-    }
-  }
-
-  .tooltip-trigger {
-    width: fit-content;
-    display: inline-block;
-
-    &.full-width {
-      flex: 1;
-      display: flex;
-      width: stretch;
-
-      button {
-        flex: 1;
-      }
-    }
-  }
-}

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

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

package/src/components/tooltip/tooltip.component.ts

@@ -1,30 +0,0 @@
-/* eslint-disable @rx-angular/prefer-no-layout-sensitive-apis */
-import { CdkOverlayOrigin, ConnectedPosition, FlexibleConnectedPositionStrategyOrigin } from '@angular/cdk/overlay';
-import { Component, HostBinding, Input } from '@angular/core';
-
-@Component({
-  selector: 'fw-tooltip',
-  templateUrl: './tooltip.component.html',
-  styleUrls: ['./tooltip.component.scss'],
-})
-export class FwTooltipComponent {
-  @Input() title: string;
-  @Input() color: 'light' | 'dark' = 'light';
-  @Input() position: 'above' | 'below' | 'left' | 'right' | 'none' = 'above';
-  @Input() maxWidth?: number = 200;
-  @Input() fullWidth?: boolean = false;
-  @Input() isOpen: boolean = false;
-  @Input() trigger: CdkOverlayOrigin | FlexibleConnectedPositionStrategyOrigin;
-
-  @HostBinding('attr.class') get classes(): string {
-    return ['fw-tooltip', this.fullWidth ? 'full-width' : null].filter(Boolean).join(' ');
-  };
-
-  positionMap: { [key: string]: ConnectedPosition } = {
-    'none': { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: 3 },
-    'above': { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: 3 },
-    'below': { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: -3 },
-    'left': { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center' },
-    'right': { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center' },
-  };
-}

package/src/components/tooltip/tooltip.mdx

@@ -1,27 +0,0 @@
-import {Canvas, Controls, Meta, Primary} from '@storybook/addon-docs';
-import * as TooltipStories from './tooltip.stories';
-
-<Meta of={TooltipStories}/>
-
-# Tooltip
-
-```ts
-import { FwTooltipModule } from '@flywheel-io/vision';
-```
-
-The Vision **Tooltip** `<fw-tooltip>` is a simplified popover for a text label. It is intended to be used around the items you want the tooltip for.
-
-```html title="your.component.html"
-<!-- your.component.html -->
-<fw-tooltip title="My Tooltip">
-  <button>some item</button>
-</fw-tooltip>
-```
-
-<Primary/>
-<Controls exclude={['positionMap']}/>
-
-## Additional Examples
-
-<Canvas of={TooltipStories.TooltipExamples}/>
-

package/src/components/tooltip/tooltip.module.ts

@@ -1,28 +0,0 @@
-import { Overlay, OverlayModule } from '@angular/cdk/overlay';
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-import { FwPopoverModule } from '../popover/popover.module';
-import { FwTooltipComponent } from './tooltip.component';
-import { FwTooltipPanelComponent } from './tooltip-panel/tooltip-panel.component';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    FwPopoverModule,
-    OverlayModule,
-  ],
-  exports: [
-    FwTooltipComponent,
-    FwTooltipPanelComponent,
-  ],
-  declarations: [
-    FwTooltipComponent,
-    FwTooltipPanelComponent,
-  ],
-  providers: [
-    Overlay,
-  ],
-})
-export class FwTooltipModule {
-}