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

package/src/components/section-heading/section-heading.component.scss

@@ -0,0 +1,48 @@
+.fw-section-heading {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .heading-area {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+
+    h2 {
+      color: var(--typography-base);
+      margin: 0;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    p {
+      color: var(--typography-muted);
+      margin: 0;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      a {
+        color: var(--typography-muted);
+      }
+    }
+
+    fw-icon.heading-icon {
+      box-sizing: border-box;
+      color: var(--primary-base);
+      width: 44px;
+      height: 44px;
+      font-size: 32px;
+      text-align: center;
+      justify-content: center;
+      padding: 6px;
+    }
+  }
+
+  .right-content {
+    display: flex;
+    gap: 10px;
+  }
+}

package/src/components/section-heading/section-heading.component.spec.ts

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

package/src/components/section-heading/section-heading.component.ts

@@ -0,0 +1,21 @@
+import { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';
+
+import { IconType } from '../icon/icon.types';
+
+@Component({
+  selector: 'fw-section-heading',
+  templateUrl: './section-heading.component.html',
+  styleUrls: ['./section-heading.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class FwSectionHeadingComponent {
+  @HostBinding('attr.class') class = 'fw-section-heading';
+  @Input() title: string;
+  @Input() description?: string;
+  @Input() backButton?: boolean = false;
+  @Input() backFunction?: () => {};
+  @Input() icon?: IconType;
+
+  constructor() {
+  }
+}

package/src/components/section-heading/section-heading.mdx

@@ -0,0 +1,22 @@
+import {Canvas, Controls, Description, Meta, Primary, Stories, Subtitle, Title} from '@storybook/blocks';
+
+import * as SectionHeadingStories from './section-heading.stories';
+import * as SubSectionHeadingStories from './subsection-heading/subsection-heading.stories';
+import * as BackButtonStories from './back-button/back-button.stories';
+
+<Meta of={SectionHeadingStories}/>
+<Title/>
+
+```ts
+import FwSectionHeadingModule from '@flywheel-io/vision';
+```
+
+<Subtitle/>
+<Description/>
+<Primary/>
+<Controls/>
+<Stories/>
+### Subsection Heading
+<Canvas of={SubSectionHeadingStories.SubsectionHeading}/>
+### Back Button Only
+<Canvas of={BackButtonStories.BackButtonOnly}/>

package/src/components/section-heading/section-heading.module.ts

@@ -0,0 +1,28 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { FwButtonModule } from '../button/button.module';
+import { FwIconModule } from '../icon/icon.module';
+import { FwBackButtonComponent } from './back-button/back-button.component';
+import { FwSectionHeadingComponent } from './section-heading.component';
+import { FwSubsectionHeadingComponent } from './subsection-heading/subsection-heading.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FwButtonModule,
+    FwIconModule,
+  ],
+  exports: [
+    FwBackButtonComponent,
+    FwSectionHeadingComponent,
+    FwSubsectionHeadingComponent,
+  ],
+  declarations: [
+    FwBackButtonComponent,
+    FwSectionHeadingComponent,
+    FwSubsectionHeadingComponent,
+  ],
+})
+export class FwSectionHeadingModule {
+}

package/src/components/section-heading/section-heading.stories.ts

@@ -0,0 +1,141 @@
+// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
+import { CommonModule } from '@angular/common';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { FwButtonModule } from '../button/button.module';
+import { FwChipModule } from '../chip/chip.module';
+import { FwLayoutsModule } from '../layouts/layouts.module';
+import { FwTabsModule } from '../tabs/tabs.module';
+import { FwSectionHeadingComponent } from './section-heading.component';
+import { FwSectionHeadingModule } from './section-heading.module';
+
+
+export default {
+  title: 'Components/Section Heading',
+  component: FwSectionHeadingComponent,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=673-16154&mode=design&t=nWWUp7Uaipn1gnod-0',
+    },
+  },
+  argTypes: {
+    backButton: {
+      defaultValue: { summary: false },
+    },
+    icon: {
+      defaultValue: '',
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        FwSectionHeadingModule,
+        FwButtonModule,
+        FwChipModule,
+        FwLayoutsModule,
+        FwTabsModule,
+      ],
+    }),
+  ],
+} as Meta;
+
+type Story = StoryObj<FwSectionHeadingComponent>;
+
+export const Overview: Story = {
+  args: {
+    title: 'Section Heading',
+    description: 'Description goes here and shouldn’t exceed one line.',
+    backButton: false,
+    icon: undefined,
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    title: 'Section Heading',
+    description: 'Description goes here and shouldn’t exceed one line.',
+    backButton: false,
+    icon: 'icon-placeholder',
+  },
+};
+
+export const WithBackButton: Story = {
+  args: {
+    title: 'Section Heading',
+    description: 'Description goes here and shouldn’t exceed one line.',
+    backButton: true,
+    icon: undefined,
+  },
+};
+
+export const WithButtons: Story = {
+  args: {
+    title: 'Section Heading',
+    description: 'Description goes here and shouldn’t exceed one line.',
+    backButton: false,
+    icon: undefined,
+  },
+  render: (args) => ({
+    props: args,
+    controls: { disabled: true },
+    template: `
+    <fw-section-heading
+      [title]="title"
+      [description]="description"
+      [backButton]="backButton"
+      [icon]="icon">
+      <fw-button variant="ghost" color="primary">Action</fw-button>
+      <fw-button variant="outline" color="primary">Action</fw-button>
+      <fw-button variant="solid" color="primary">Action</fw-button>
+    </fw-section-heading>
+  `,
+  }),
+};
+
+export const FullHeadingsExample: Story = {
+  args: {
+    title: 'Section Heading',
+    description: 'Description goes here and shouldn’t exceed one line.',
+    backButton: true,
+    icon: undefined,
+  },
+  render: (args) => ({
+    props: args,
+    controls: { disabled: true },
+    template: `
+    <fw-grid>
+        <fw-grid-item [cols]="12">
+          <fw-section-heading
+            [title]="title"
+            [description]="description"
+            [backButton]="backButton"
+            [icon]="icon">
+            <fw-chip color="primary" title="Status"></fw-chip>
+            <fw-button variant="ghost" color="primary">Action</fw-button>
+            <fw-button variant="outline" color="primary">Action</fw-button>
+            <fw-button variant="solid" color="primary">Action</fw-button>
+          </fw-section-heading>
+        </fw-grid-item>
+        <fw-grid-item [cols]="12">
+          <fw-tabs [activeTabIndex]="0" [bordered]="true">
+            <fw-tab title="Tab"></fw-tab>
+            <fw-tab title="Tab"></fw-tab>
+            <fw-tab title="Tab"></fw-tab>
+            <fw-tab title="Tab"></fw-tab>
+          </fw-tabs>
+        </fw-grid-item>
+        <fw-grid-item [cols]="12" [padded]="true">
+          <fw-subsection-heading title="Subsection Heading" icon="icon-placeholder"></fw-subsection-heading>
+          <p>
+          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.
+          </p>
+        </fw-grid-item>
+    </fw-grid>
+  `,
+  }),
+};

package/src/components/section-heading/subsection-heading/subsection-heading.component.html

@@ -0,0 +1,7 @@
+<div class="heading-area">
+  <fw-icon *ngIf="icon">{{ icon }}</fw-icon>
+  <h3 class="vision-h3 subsection-heading">{{ title }}</h3>
+</div>
+<div class="right-content">
+  <ng-content></ng-content>
+</div>

package/src/components/section-heading/subsection-heading/subsection-heading.component.scss

@@ -0,0 +1,31 @@
+:host {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .heading-area {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    h3 {
+      color: var(--typography-base);
+      margin: 0;
+    }
+
+    fw-icon {
+      color: var(--typography-light);
+      width: 24px;
+      height: 24px;
+      font-size: 24px;
+      text-align: center;
+    }
+  }
+
+  .right-content {
+    display: flex;
+    gap: 10px;
+  }
+
+}

package/src/components/section-heading/subsection-heading/subsection-heading.component.spec.ts

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

package/src/components/section-heading/subsection-heading/subsection-heading.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input } from '@angular/core';
+
+import { IconType } from '../../icon/icon.types';
+
+@Component({
+  selector: 'fw-subsection-heading',
+  templateUrl: './subsection-heading.component.html',
+  styleUrls: ['./subsection-heading.component.scss'],
+})
+export class FwSubsectionHeadingComponent {
+  @Input() title: string;
+  @Input() icon?: IconType;
+
+  constructor() {
+  }
+
+}

package/src/components/section-heading/subsection-heading/subsection-heading.stories.ts

@@ -0,0 +1,60 @@
+// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
+import { CommonModule } from '@angular/common';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { FwIconModule } from '../../icon/icon.module';
+import { FwSectionHeadingModule } from '../section-heading.module';
+import { FwSubsectionHeadingComponent } from './subsection-heading.component';
+
+
+export default {
+  title: 'Components/Section Heading',
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=673-16154&mode=design&t=nWWUp7Uaipn1gnod-0',
+    },
+  },
+  argTypes: {
+    backButton: {
+      defaultValue: { summary: false },
+    },
+    icon: {
+      defaultValue: '',
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        FwIconModule,
+        FwSectionHeadingModule,
+      ],
+    }),
+  ],
+} as Meta;
+
+type Story = StoryObj<
+  FwSubsectionHeadingComponent & {
+  children?: unknown;
+}
+>;
+
+export const SubsectionHeading: Story = {
+  args: {
+    title: 'Title',
+    icon: 'icon-placeholder',
+    children:
+      '<fw-icon style="color: var(--orange-base); font-size: 24px">information-circle</fw-icon>',
+  },
+  render: (args) => ({
+    props: args,
+    controls: { disabled: false },
+    template: `
+        <fw-subsection-heading [title]="title" [icon]="icon">
+            ${args.children}
+        </fw-subsection-heading>
+        `,
+  }),
+};
+

package/src/components/select-menu/multi-select-menu/multi-select-menu.component.html

@@ -0,0 +1,62 @@
+<div [ngStyle]="{width: width}">
+  <div
+    [ngClass]="['chip-grid', size]"
+    [ngStyle]="{minHeight: minHeight, maxHeight: maxHeight}"
+    [cdkMenuTriggerFor]="selectMenu">
+    <div class="inner-chip-grid" *ngIf="value && value.length>0">
+      <fw-chip
+        *ngFor="let chip of selectedOptions | slice:0:maxSelectedShown"
+        [title]="chip[titleProperty]"
+        [value]="chip[valueProperty]"
+        [icon]="chip[iconProperty]"
+        color="primary"
+        [showClose]="true"
+        (close)="handleClose(chip)"
+        [selectable]="false">
+      </fw-chip>
+      <span *ngIf="value.length>maxSelectedShown" class="max-exceeded">+{{ value.length - maxSelectedShown }}
+        more</span>
+      <input
+        type="text" #textInput
+        class="placeholder"
+        (keydown)="handleKeyDown($event)" (input)="handleInput($event)">
+    </div>
+    <input
+      type="text" #textInitialInput
+      *ngIf="!value || value.length===0"
+      class="placeholder" [placeholder]="placeholder"
+      (focus)="handleTouched()"
+      (keydown)="handleKeyDown($event)" (input)="handleInput($event)">
+    <fw-icon>chevron-down</fw-icon>
+  </div>
+  <ng-template #selectMenu>
+    <fw-menu-container
+      [width]="optionsWidth || width" [maxHeight]="maxOptionsHeight" [minHeight]="minOptionsHeight"
+      *ngIf="emptyText.length > 0 || (filteredOptions && filteredOptions.length > 0)">
+      <fw-menu
+        [multiSelect]="true"
+        [disabled]="disabled || (filteredOptions && filteredOptions.length===0)"
+        [value]="selectedValues"
+        (change)="handleChange($event)">
+        <ng-container *ngIf="menuItems && menuItems.length===0">
+          <fw-menu-item
+            *ngFor="let item of filteredOptions; index as $index"
+            [title]="item[titleProperty]"
+            [value]="item[valueProperty]"
+            [icon]="item[iconProperty]"
+            [multiSelect]="true"
+            [showCheckbox]="useCheckbox"
+            [focused]="focused===$index"
+            (mouseover)="focused=$index"
+          >
+          </fw-menu-item>
+          <fw-menu-item
+            *ngIf="filteredOptions && filteredOptions.length===0 && emptyText" [showCheckbox]="false"
+            [disabled]="true" [title]="emptyText">
+          </fw-menu-item>
+        </ng-container>
+        <ng-content select="[fw-menu-item, fw-menu-separator]"></ng-content>
+      </fw-menu>
+    </fw-menu-container>
+  </ng-template>
+</div>

package/src/components/select-menu/multi-select-menu/multi-select-menu.component.scss

@@ -0,0 +1,76 @@
+:host {
+  .chip-grid {
+    min-height: 36px;
+    box-sizing: border-box;
+    color: var(--typography-light);
+    background: var(--page-light);
+    display: flex;
+    padding: 4px;
+    align-items: center;
+    border-radius: 6px;
+    border: 1px solid var(--separations-input);
+    cursor: pointer;
+    font-family: Inter, sans-serif;
+
+    &.small {
+      min-height: 30px;
+      padding: 2px;
+    }
+
+    &.large {
+      min-height: 40px;
+      padding: 6px;
+    }
+
+    &:focus-within {
+      border-color: var(--primary-base);
+    }
+
+    .inner-chip-grid {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+      overflow: hidden auto;
+      align-items: center;
+      flex: 1;
+
+      input {
+        display: inline-flex;
+        width: 10px;
+        flex-grow: 1;
+      }
+    }
+
+    .placeholder {
+      padding: 0 2px 0 4px;
+      font-size: 14px;
+      color: var(--typography-base);
+      background: var(--page-light);
+      border: 0;
+      outline: 0;
+      display: inline-flex;
+      width: 10px;
+      flex-grow: 1;
+
+      &:focus {
+        outline: none !important;
+      }
+
+      &::placeholder {
+        color: var(--typography-light);
+      }
+    }
+
+    fw-icon {
+      font-size: 20px;
+
+      &:hover {
+        color: var(--primary-base);
+      }
+    }
+
+    .max-exceeded {
+      font-size: 12px;
+    }
+  }
+}

package/src/components/select-menu/multi-select-menu/multi-select-menu.component.spec.ts

@@ -0,0 +1,83 @@
+import { CdkMenuModule } from '@angular/cdk/menu';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+import { FwIconModule } from '../../icon/icon.module';
+import { FwMenuModule } from '../../menu/menu.module';
+import { FwTextInputModule } from '../../text-input/text-input.module';
+import { FwMultiSelectMenuComponent } from './multi-select-menu.component';
+
+describe('FwMultiSelectMenuComponent', () => {
+  let component: FwMultiSelectMenuComponent;
+  let fixture: ComponentFixture<FwMultiSelectMenuComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [FwMultiSelectMenuComponent],
+      imports: [
+        CdkMenuModule,
+        FormsModule,
+        FwTextInputModule,
+        FwIconModule,
+        FwMenuModule,
+        NoopAnimationsModule,
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FwMultiSelectMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should handle item change from dropdown with initial value set', () => {
+    component.options = [{ item: 'a' }, { item: 'b' }, { item: 'c' }];
+    component.valueProperty = 'item';
+    component.titleProperty = 'item';
+    component.value = ['a'];
+    expect(component.value).toEqual(['a']);
+    component.handleChange(["a", "b"]);
+    expect(component.value).toEqual(['a', 'b']);
+  });
+
+  it('should handle item change from dropdown with initial value set', () => {
+    component.options = [{ item: 'a' }, { item: 'b' }, { item: 'c' }];
+    component.valueProperty = 'item';
+    component.titleProperty = 'item';
+    component.value = [{ item: 'a' }];
+    expect(component.value).toEqual(['a']);
+    component.handleChange(["a", "b"]);
+    expect(component.value).toEqual(["a", "b"]);
+    expect(component.selectedOptions).toEqual([{ item: 'a' }, { item: 'b' }]);
+  });
+
+  it('should handle item change from removing a chip', () => {
+    component.options = [{ value: 'a' }, { value: 'b' }, { value: 'c' }];
+    component.titleProperty = 'value';
+    component.value = ['a', 'b', 'c'];
+    expect(component.value).toEqual(['a', 'b', 'c']);
+    component.handleClose({ value: "b" });
+    expect(component.value).toEqual(['a', 'c']);
+  });
+
+  it('should handle item change from keyboard with initial value set', () => {
+    component.options = [{ item: 'a' }, { item: 'b' }, { item: 'c' }];
+    component.valueProperty = 'item';
+    component.titleProperty = 'item';
+    component.value = ['a'];
+    expect(component.value).toEqual(['a']);
+    component.trigger.open();
+    component.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+    component.handleKeyDown(new KeyboardEvent('keydown', { key: 'Tab' }));
+    expect(component.value).toEqual(['a']);
+    expect(component.trigger.isOpen()).toBeFalse();
+    component.trigger.open();
+    component.handleKeyDown(new KeyboardEvent('keydown', { key: 'Enter' }));
+    expect(component.value).toEqual(['a', 'b']);
+  });
+
+});