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

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,75 @@
+<div [ngStyle]="{width: width}" #wrapper>
+
+  <div
+    fwMenuRegister
+    class="chip-grid"
+    [ngClass]="[size]"
+    [ngStyle]="{ minHeight: minHeight, maxHeight: maxHeight }"
+    [cdkMenuTriggerFor]="selectMenu">
+    <span *ngIf="value.length === 0" class="placeholder">{{placeholder}}</span>
+
+    <!-- CHIPS -->
+    <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)="handleChipClose(chip)"
+        [selectable]="false">
+      </fw-chip>
+      <span *ngIf="maxSelectedShown === 0 && value.length > 0" class="selected-text">
+        {{ value.length }} selected
+      </span>
+      <span *ngIf="value.length > maxSelectedShown && maxSelectedShown > 0" class="max-exceeded">
+        +{{ value.length - maxSelectedShown }} more
+      </span>
+    </div>
+
+    <fw-icon *ngIf="showClear() && value.length > 0" (click)="updateValue([])">close</fw-icon>
+    <fw-icon>chevron-down</fw-icon>
+  </div>
+
+  <!-- MENU -->
+  <ng-template #selectMenu>
+    <fw-menu-filter
+      [keyHandler]="handleKeyDown"
+      [showFilter]="showFilter()"
+      [focusFilterOnMount]="showFilter()"
+      [width]="optionsWidth || (wrapper.offsetWidth - 2) + 'px'"
+      [additionalMenuItems]="this.customMenuItems"
+      [emptyText]="emptyText"
+      [maxHeight]="maxOptionsHeight"
+      [minHeight]="minOptionsHeight"
+      [filterFn]="customFilter"
+      (filteredMenuItemChange)="displayedOptions.set($event)"
+      >
+      <div class="filter-content" *ngIf="showSelectionInfo()">
+        <p>{{value.length}} selections</p>
+        <fw-button variant="ghost" (click)="updateValue([])">Clear</fw-button>
+      </div>
+      <fw-menu
+        [multiSelect]="true"
+        [disabled]="disabled"
+        [value]="createArray(selectedValues)"
+        (change)="handleMenuChange($event)">
+        <ng-container *ngIf="customMenuItems.length === 0">
+          <fw-menu-item
+            *ngFor="let item of options; index as $index"
+            [title]="item[titleProperty]"
+            [value]="item[valueProperty]"
+            [icon]="item[iconProperty]"
+            [multiSelect]="true"
+            [selected]="value.includes(item[valueProperty])"
+            [showCheckbox]="useCheckbox"
+            (mouseenter)="setFocusedIndex(item)"
+          >
+          </fw-menu-item>
+        </ng-container>
+        <ng-content ngProjectAs="custom-menu-items" select="[fw-menu-item, fw-menu-separator, fw-menu-item-group, fw-menu-header]"></ng-content>
+      </fw-menu>
+    </fw-menu-filter>
+  </ng-template>
+</div>

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

@@ -0,0 +1,91 @@
+:host {
+  .placeholder {
+    color: var(--typography-light);
+    font-size: 14px;
+    padding-left: 4px;
+    text-wrap: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .chip-grid {
+    min-height: 36px;
+    width: 100%;
+    box-sizing: border-box;
+    color: var(--typography-light);
+    background: var(--page-light);
+    display: flex;
+    justify-content: space-between;
+    padding: 4px;
+    align-items: center;
+    border-radius: 6px;
+    overflow: hidden;
+    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;
+      }
+    }
+
+    fw-icon {
+      font-size: 20px;
+
+      &:hover {
+        color: var(--primary-base);
+      }
+    }
+
+    .selected-text {
+      color: var(--typography-base);
+      font-size: 14px;
+      padding: 0 2px 0 4px;
+      text-wrap: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    .max-exceeded {
+      font-size: 12px;
+    }
+  }
+}
+
+.filter-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 4px;
+  padding-top: 4px;
+
+  p {
+    color: var(--typography-muted);
+    width: fit-content;
+    margin: 0;
+  }
+}

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

@@ -0,0 +1,89 @@
+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 { FwChipModule } from '../../chip/chip.module';
+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,
+        FwChipModule,
+        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.handleMenuChange(["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.handleMenuChange(["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.handleChipClose({ 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' }];
+    fixture.componentRef.setInput('showFilter', false);
+    component.valueProperty = 'item';
+    component.titleProperty = 'item';
+    component.value = ['a'];
+    component.trigger.open();
+
+    fixture.detectChanges();
+
+    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: 'ArrowDown' }));
+    component.handleKeyDown(new KeyboardEvent('keydown', { key: 'Enter' }));
+    expect(component.value).toEqual(['a', 'b']);
+  });
+
+});