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

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

@@ -0,0 +1,16 @@
+import {Controls, Description, Meta, Primary, Stories, Subtitle, Title} from '@storybook/blocks';
+
+import * as ContainedInputStories from './contained-input.stories';
+
+<Meta of={ContainedInputStories}/>
+<Title/>
+
+```ts
+import FwContainedInputModule from '@flywheel-io/vision';
+```
+
+<Subtitle/>
+<Description/>
+<Primary/>
+<Controls/>
+<Stories/>

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

@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { FwButtonModule } from '../button/button.module';
+import { FwCheckboxModule } from '../checkbox/checkbox.module';
+import { FwIconModule } from '../icon/icon.module';
+import { FwSwitchModule } from '../switch/switch.module';
+import { FwContainedInputComponent } from './contained-input.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FwButtonModule,
+    FwIconModule,
+    FwSwitchModule,
+    FwCheckboxModule,
+  ],
+  exports: [
+    FwContainedInputComponent,
+  ],
+  declarations: [
+    FwContainedInputComponent,
+  ],
+})
+export class FwContainedInputModule {
+}

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

@@ -0,0 +1,155 @@
+import { CommonModule } from '@angular/common';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { FwAvatarModule } from '../avatar/avatar.module';
+import { FwButtonModule } from '../button/button.module';
+import { FwCheckboxModule } from '../checkbox/checkbox.module';
+import { FwIconModule } from '../icon/icon.module';
+import { FwLayoutsModule } from '../layouts/layouts.module';
+import { FwSwitchModule } from '../switch/switch.module';
+import { FwContainedInputComponent } from './contained-input.component';
+
+
+export default {
+  title: 'Form Controls/Contained Input',
+  component: FwContainedInputComponent,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?node-id=11206-25402&m=dev',
+    },
+  },
+  argTypes: {
+    backButton: {
+      defaultValue: { summary: false },
+    },
+    icon: {
+      defaultValue: '',
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        FwAvatarModule,
+        FwButtonModule,
+        FwCheckboxModule,
+        FwIconModule,
+        FwLayoutsModule,
+        FwSwitchModule,
+      ],
+    }),
+  ],
+} as Meta;
+
+type Story = StoryObj<FwContainedInputComponent>;
+
+export const Overview: Story = {
+  args: {
+    title: 'Title',
+    description: 'Lorem ipsum dolor sit amet consectetur.',
+    status: '',
+    inputVariant: 'switch',
+    inputPosition: 'end',
+    checked: false,
+    disabled: false,
+  },
+};
+
+
+export const WithStatusAndAvatar: Story = {
+  args: {
+    title: 'Development',
+    description: 'Staff Admin',
+    status: 'Default',
+  },
+  render: (args) => ({
+    props: args,
+    controls: { disabled: true },
+    template: `
+      <fw-contained-input [title]="title" [description]="description" [status]="status" inputVariant="none">
+        <fw-avatar variant="rounded" initial="FD" content="initial" size="medium"></fw-avatar>
+      </fw-contained-input>
+  `,
+  }),
+};
+
+export const InAForm: Story = {
+  args: {},
+  render: (args) => {
+    const formGroup = new FormGroup({
+      selected: new FormControl(true),
+    });
+
+    return ({
+      props: { ...args, form: formGroup },
+      controls: { disabled: false },
+      template: `
+        <form [formGroup]="form">
+          <fw-contained-input title="Form Bound Value" formControlName="selected">
+          </fw-contained-input>
+        </form>
+    `,
+    });
+  },
+};
+
+export const InputVariations: Story = {
+  args: {
+    title: 'Title',
+    description: 'Lorem ipsum dolor sit amet consectetur.',
+  },
+  render: (args) => ({
+    props: args,
+    controls: { disabled: true },
+    template: `
+        <fw-grid>
+            <fw-grid-item [cols]="6">
+             <fw-contained-input [title]="title" [description]="description" [status]="status" inputVariant="none">
+             </fw-contained-input>
+            </fw-grid-item>
+            <fw-grid-item [cols]="6">
+             <fw-contained-input [title]="title" [description]="description" [status]="status" inputVariant="none"  [checked]="true">
+                <fw-avatar variant="rounded" initial="FD" content="initial" size="medium"></fw-avatar>
+              </fw-contained-input>
+            </fw-grid-item>
+            <fw-grid-item [cols]="6">
+             <fw-contained-input [title]="title" [description]="description" [status]="status" inputVariant="switch" inputPosition="end">
+             </fw-contained-input>
+            </fw-grid-item>
+            <fw-grid-item [cols]="6">
+             <fw-contained-input [title]="title" [description]="description" [status]="status" inputVariant="checkbox" inputPosition="end" [checked]="true">
+             </fw-contained-input>
+            </fw-grid-item>
+             <fw-grid-item [cols]="6">
+             <fw-contained-input [title]="title" [description]="description" [status]="status" inputVariant="checkbox" inputPosition="end">
+             </fw-contained-input>
+            </fw-grid-item>
+            <fw-grid-item [cols]="6">
+             <fw-contained-input [title]="title" [description]="description" [status]="status" inputVariant="switch" inputPosition="end" [checked]="true">
+             </fw-contained-input>
+            </fw-grid-item>
+            <fw-grid-item [cols]="6">
+             <fw-contained-input [title]="title" [description]="description" [status]="status" inputVariant="switch" inputPosition="start">
+             </fw-contained-input>
+            </fw-grid-item>
+            <fw-grid-item [cols]="6">
+             <fw-contained-input [title]="title" [description]="description" [status]="status" inputVariant="checkbox" inputPosition="start" [checked]="true">
+             </fw-contained-input>
+            </fw-grid-item>
+            <fw-grid-item [cols]="6">
+             <fw-contained-input [title]="title" [description]="description" [status]="status" inputVariant="checkbox" inputPosition="start">
+             </fw-contained-input>
+            </fw-grid-item>
+            <fw-grid-item [cols]="6">
+             <fw-contained-input [title]="title" [description]="description" [status]="status" inputVariant="switch" inputPosition="start" [checked]="true">
+             </fw-contained-input>
+            </fw-grid-item>
+        </fw-grid>
+
+  `,
+  }),
+};

package/src/components/date-input/date-input.component.html

@@ -0,0 +1,28 @@
+<div class="full-container">
+  <div class="input-container" [class]="size">
+    <fw-icon
+      *ngIf="!!leftIcon"
+      (click)="useActionableIcons?onLeftIconClick():null"
+      [ngClass]="useActionableIcons?'actionable':''">
+      {{ leftIcon }}
+    </fw-icon>
+    <p class="vision-p2 context" *ngIf="!!prefix">{{ prefix }}</p>
+    <input
+      [type]="type"
+      (keyup)="changeHandler($event)"
+      (blur)="blurHandler()"
+      (change)="changeHandler($event)"
+      [value]="value"
+      [max]="max"
+      [min]="min"
+      [step]="step"
+      [placeholder]="placeholder || ''"
+      [readOnly]="readOnly"
+      [disabled]="disabled"
+      [autofocus]="autofocus"
+      [autocomplete]="autocomplete">
+    <fw-icon class="error-icon">warning-circle</fw-icon>
+  </div>
+  <p class="vision-p4 helper-text" *ngIf="!!helperText">{{ helperText }}</p>
+  <p class="vision-p4 error-text" *ngIf="!!errorText">{{ errorText }}</p>
+</div>

package/src/components/date-input/date-input.component.scss

@@ -0,0 +1,192 @@
+// general structural styles
+@use "../../scss/config/typography";
+@use '@sass-fairy/url';
+
+.full-container {
+  display: flex;
+  flex-direction: column;
+
+  // helps with centering everything
+  line-height: 21px;
+
+  .input-container {
+    box-sizing: border-box;
+    color: var(--typography-light);
+    background: var(--page-light);
+    display: flex;
+    padding: 8px;
+    align-items: center;
+    gap: 5px;
+    border-radius: 6px;
+    border: 1px solid var(--separations-input);
+    font-family: Inter, sans-serif;
+
+    &:focus-within {
+      border: 1px solid var(--primary-base);
+    }
+
+    input {
+      min-width: 0;
+      font-family: Inter, sans-serif;
+      font-size: 14px;
+      flex-grow: 1;
+      color: var(--typography-base);
+      background: var(--page-light);
+      border: none;
+
+      &:focus {
+        outline: none;
+        border: none;
+      }
+
+      &::-webkit-datetime-edit-fields-wrapper,
+      {
+        font-family: Inter, sans-serif;
+      }
+
+      &::-webkit-datetime-edit-text {
+        color: var(--typography-light);
+      }
+
+      &::-webkit-datetime-edit-year-field,
+      &::-webkit-datetime-edit-month-field,
+      &::-webkit-datetime-edit-week-field,
+      &::-webkit-datetime-edit-day-field,
+      &::-webkit-datetime-edit-hour-field,
+      &::-webkit-datetime-edit-minute-field,
+      &::-webkit-datetime-edit-second-field,
+      &::-webkit-datetime-edit-millisecond-field,
+      &::-webkit-datetime-edit-ampm-field {
+        &:hover, &:active, &:focus {
+          background-color: var(--primary-focus);
+          color: var(--typography-base);
+        }
+      }
+
+      &::-webkit-calendar-picker-indicator {
+        color: rgba(0, 0, 0, 0);
+        opacity: 1;
+        width: 22px;
+        height: 22px;
+        cursor: pointer;
+        margin-left: .5rem;
+        margin-right: -1px;
+        outline-width: 1px;
+        border-radius: 6px;
+      }
+
+      $icon-color: #8996a9;
+      $calendar-svg: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H19C20.5192 3.25 21.75 4.48079 21.75 6V9V19C21.75 20.5192 20.5192 21.75 19 21.75H5C3.48079 21.75 2.25 20.5192 2.25 19V9V6C2.25 4.48079 3.48079 3.25 5 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 6V4.75H5C4.30921 4.75 3.75 5.30921 3.75 6V8.25H20.25V6C20.25 5.30921 19.6908 4.75 19 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6ZM3.75 19V9.75H20.25V19C20.25 19.6908 19.6908 20.25 19 20.25H5C4.30921 20.25 3.75 19.6908 3.75 19ZM7 14C7.55228 14 8 13.5523 8 13C8 12.4477 7.55228 12 7 12C6.44772 12 6 12.4477 6 13C6 13.5523 6.44772 14 7 14ZM8 17C8 17.5523 7.55228 18 7 18C6.44772 18 6 17.5523 6 17C6 16.4477 6.44772 16 7 16C7.55228 16 8 16.4477 8 17ZM12 14C11.4477 14 11 13.5523 11 13C11 12.4477 11.4477 12 12 12C12.5523 12 13 12.4477 13 13C13 13.5523 12.5523 14 12 14ZM11 17C11 17.5523 11.4477 18 12 18C12.5523 18 13 17.5523 13 17C13 16.4477 12.5523 16 12 16C11.4477 16 11 16.4477 11 17ZM17 14C16.4477 14 16 13.5523 16 13C16 12.4477 16.4477 12 17 12C17.5523 12 18 12.4477 18 13C18 13.5523 17.5523 14 17 14Z" fill="' + $icon-color + '"/></svg>';
+      $time-svg: '<svg fill="none" height="1024" viewBox="0 0 1024 1024" width="1024" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M981.333 512c0-129.579-52.565-246.997-137.472-331.861s-202.283-137.472-331.861-137.472-246.997 52.565-331.861 137.472-137.472 202.283-137.472 331.861 52.565 246.997 137.472 331.861 202.283 137.472 331.861 137.472 246.997-52.565 331.861-137.472 137.472-202.283 137.472-331.861zM896 512c0 106.069-42.923 201.984-112.469 271.531s-165.461 112.469-271.531 112.469-201.984-42.923-271.531-112.469-112.469-165.461-112.469-271.531 42.923-201.984 112.469-271.531 165.461-112.469 271.531-112.469 201.984 42.923 271.531 112.469 112.469 165.461 112.469 271.531zM469.333 256v256c0 16.597 9.472 31.019 23.595 38.144l170.667 85.333c21.077 10.539 46.72 2.005 57.259-19.072s2.005-46.72-19.072-57.259l-147.115-73.515v-229.632c0-23.552-19.115-42.667-42.667-42.667s-42.667 19.115-42.667 42.667z" fill="' + $icon-color + '"/></svg>';
+
+      &[type="date"] {
+        &::-webkit-calendar-picker-indicator {
+          background-image: url.svg($calendar-svg);
+        }
+      }
+
+      &[type="datetime-local"] {
+        &::-webkit-calendar-picker-indicator {
+          background-image: url.svg($calendar-svg);
+        }
+      }
+
+      &[type="time"] {
+        &::-webkit-calendar-picker-indicator {
+          background-image: url.svg($time-svg);
+        }
+      }
+    }
+
+    input::placeholder {
+      color: var(--typography-light);
+    }
+
+    .context {
+      color: var(--typography-light);
+    }
+  }
+
+  .error-icon {
+    display: none;
+  }
+
+  .helper-text {
+    margin-top: 4px;
+    color: var(--typography-light);
+    line-height: 13px;
+    margin-left: 6px;
+    margin-bottom: 0;
+  }
+
+  .error-text {
+    @extend .helper-text;
+
+    text-align: left;
+    color: var(--red-base);
+    display: none;
+  }
+}
+
+fw-icon {
+  &.actionable {
+    cursor: pointer;
+
+    &:hover {
+      color: var(--primary-base);
+      background-color: var(--primary-hover);
+      border-radius: 50%;
+    }
+  }
+}
+
+
+// sizes
+.small {
+  height: 30px;
+
+  & > fw-icon {
+    font-size: 18px;
+  }
+}
+
+.medium {
+  height: 36px;
+
+  & > fw-icon {
+    font-size: 20px;
+  }
+}
+
+.large {
+  height: 40px;
+
+  & > fw-icon {
+    font-size: 24px;
+  }
+}
+
+// states
+:host.errored, :host.ng-touched.ng-invalid {
+  .input-container {
+    border: 1px solid var(--red-base);
+  }
+
+  .error-icon {
+    color: var(--red-base);
+    display: inline !important;
+  }
+
+  .helper-text {
+    display: none;
+  }
+
+  .error-text {
+    display: block !important;
+  }
+}
+
+:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}

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

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

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

@@ -0,0 +1,126 @@
+import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
+import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { IconType } from '../icon/icon.types';
+
+@Component({
+  selector: 'fw-date-input',
+  templateUrl: './date-input.component.html',
+  styleUrls: ['./date-input.component.scss'],
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: FwDateInputComponent,
+    multi: true,
+  }],
+})
+export class FwDateInputComponent implements ControlValueAccessor {
+
+  @Input() disabled?: boolean = false;
+  @Input() useActionableIcons?: boolean = false;
+  @Input() leftIcon?: IconType;
+  @Output() leftIconAction?: EventEmitter<void> = new EventEmitter<void>();
+  @Input() prefix?: string;
+  /**
+   * @deprecated please use fw-wrapped-input instead
+   */
+  @Input() helperText?: string;
+  /**
+   * @deprecated please use fw-wrapped-input instead
+   */
+  @Input() errorText?: string;
+  @Input() placeholder?: string = 'mm/dd/yyyy';
+  @Input() readOnly?: boolean;
+  @Input() size?: 'small' | 'medium' | 'large' = 'medium';
+  @Input() type?: 'date' | 'time' | 'datetime-local' = 'date';
+  @Input() max?: string;
+  @Input() min?: string;
+  @Input() step?: number;
+  @Input() autofocus?: string;
+  @Input() autocomplete?: string;
+  // we bind this to host because that's where angular form apis put the error classes
+  @HostBinding('class.errored') @Input() error?: boolean = false;
+
+  private _value: string;
+  @Input()
+  get value(): string {
+    return this._value;
+  }
+
+  set value(newValue: string) {
+    if (this.isIsoDate(newValue)) {
+      this.setDateString(newValue);
+    } else {
+      this.writeValue(newValue);
+    }
+  }
+
+  externalControl: FormControl = null;
+
+  public onTouch = (): void => {
+  };
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public onChange = (value: string): void => {
+  };
+
+  public setDate(value: Date): void {
+    const year = value.getFullYear();
+    const month = (value.getMonth() + 1).toString().padStart(2, '0');
+    const day = value.getDate().toString().padStart(2, '0');
+    const hours = value.getHours().toString().padStart(2, '0');
+    const minutes = value.getMinutes().toString().padStart(2, '0');
+    if (this.type === 'date') {
+      this.writeValue(`${year}-${month}-${day}`);
+    }
+    if (this.type === 'datetime-local') {
+      this.writeValue(`${year}-${month}-${day}T${hours}:${minutes}:00`);
+    }
+    if (this.type === 'time') {
+      this.writeValue(`${hours}:${minutes}`);
+    }
+  }
+
+  public setDateString(isoValue: string): void {
+    this.setDate(new Date(isoValue));
+  }
+
+  isIsoDate(str): boolean {
+    if (!/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/.test(str)) {
+      return false;
+    }
+    const d = new Date(str);
+    return !isNaN(d.getTime()) && d.toISOString() === str; // valid date
+  }
+
+  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: Event): void {
+    this.value = (event.target as HTMLInputElement).value;
+    this.onChange(this.value);
+    this.onTouch();
+  }
+
+  blurHandler(): void {
+    this.onTouch();
+  }
+
+  onLeftIconClick(): void {
+    this.leftIconAction.emit();
+  }
+
+}

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

@@ -0,0 +1,23 @@
+import {Controls, Meta, Primary, Stories, Title} from '@storybook/blocks';
+import * as DateInputStories from './date-input.stories.ts';
+
+<Meta of={DateInputStories}/>
+
+<Title/>
+```ts
+import { FwDateInputModule } from '@flywheel-io/vision'
+```
+This component uses the [native html input type="date"](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date). It is optimized for Google Chrome but behavior will change between browsers.
+
+## Using with 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-date-input [formControl]="myControl">
+```
+
+## Playground
+<Primary/>
+<Controls/>
+
+<Stories/>

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

@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { FwIconModule } from '../icon/icon.module';
+import { FwDateInputComponent } from './date-input.component';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FwIconModule,
+    ReactiveFormsModule,
+  ],
+  exports: [
+    FwDateInputComponent,
+  ],
+  declarations: [
+    FwDateInputComponent,
+  ],
+})
+export class FwDateInputModule {
+}