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

package/src/components/select-menu/multi-select-menu/multi-select-menu.stories.ts

@@ -0,0 +1,415 @@
+import { CommonModule } from '@angular/common';
+import { importProvidersFrom } from '@angular/core';
+import { FormsModule } 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 { FwAvatarModule } from '../../avatar/avatar.module';
+import { FwIconModule } from '../../icon/icon.module';
+import { FwMenuModule } from '../../menu/menu.module';
+import { FwTextInputModule } from '../../text-input/text-input.module';
+import { FwSelectMenuModule } from '../select-menu.module';
+import { FwMultiSelectMenuComponent } from './multi-select-menu.component';
+
+export default {
+  title: 'Form Controls/Multi-Select',
+  component: FwMultiSelectMenuComponent,
+  argTypes: {
+    options: { table: { subcategory: 'Option Handling' } },
+    titleProperty: { table: { subcategory: 'Option Handling' } },
+    valueProperty: { table: { subcategory: 'Option Handling' } },
+    iconProperty: { table: { subcategory: 'Option Handling' } },
+    width: { table: { subcategory: 'Sizing' } },
+    minHeight: { table: { subcategory: 'Sizing' } },
+    maxHeight:  { table: { subcategory: 'Sizing' } },
+    optionsWidth:  { table: { subcategory: 'Sizing' } },
+    minOptionsHeight:  { table: { subcategory: 'Sizing' } },
+    maxOptionsHeight:  { table: { subcategory: 'Sizing' } },
+    size:  { table: { subcategory: 'Sizing' } },
+    emptyText:  { table: { subcategory: 'Behavior' } },
+    showFilter: {
+      type: 'boolean',
+      description: 'Whether or not to display a filter within the dropdown',
+      table: {
+        defaultValue: {
+          summary: 'true',
+        },
+        subcategory: 'Behavior',
+        category: 'inputs',
+      },
+    },
+    showClear:  {
+      type: 'boolean',
+      description: 'display a clear all x, inline in the select',
+      table: {
+        defaultValue: {
+          summary: 'false',
+        },
+        subcategory: 'Behavior',
+        category: 'inputs',
+      },
+    },
+    placeholder: { table: { subcategory: 'Behavior' } },
+    disabled: { table: { subcategory: 'Behavior' } },
+    useCheckbox: { table: { subcategory: 'Behavior' } },
+    closeOnSelect: { table: { subcategory: 'Behavior' } },
+    maxSelectedShown: { table: { subcategory: 'Behavior' } },
+    showSelectionInfo: {
+      description: 'Show selection count and clear button within the dropdown',
+      type: 'boolean',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        subcategory: 'Behavior',
+        type: 'boolean',
+        defaultValue: {
+          summary: 'false',
+        },
+        category: 'inputs',
+      },
+    },
+    filterItemsOnSelect: {
+      description: 'Determines whether an option is displayed, while it is selected',
+      type: 'boolean',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        type: 'boolean',
+        defaultValue: {
+          summary: 'true',
+        },
+        category: 'inputs',
+        subcategory: 'Behavior',
+      },
+    },
+  },
+  parameters: {
+    controls: {
+      expanded: 'true',
+      exclude: [],
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=4959-73505&mode=design&t=oWH7ZDZej5cyHY4O-11',
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        FwAvatarModule,
+        FwIconModule,
+        FwMenuModule,
+        FwSelectMenuModule,
+        FwTextInputModule,
+        FormsModule,
+      ],
+    }),
+    applicationConfig({
+      providers: [importProvidersFrom(BrowserModule), importProvidersFrom(BrowserAnimationsModule)],
+    }),
+  ],
+} as Meta;
+
+type Story = StoryObj<FwMultiSelectMenuComponent>;
+
+export const Primary: Story = {
+  parameters: {
+    argTypes: {
+      options: {
+        description: 'BBBBBBB',
+      },
+    },
+  },
+  args: {
+    options: [
+      { title: 'Owner', value: 'owner', icon: 'crown-style-circle' },
+      { title: 'Admin', value: 'admin', icon: 'icon-placeholder' },
+      { title: 'Developer', value: 'developer', icon: 'code-text' },
+      { title: 'Member', value: 'member', icon: 'user' },
+    ],
+  },
+};
+
+export const NoChips: Story = {
+  args: {
+    placeholder: 'Select something...',
+    emptyText: 'No matches found...',
+    closeOnSelect: true,
+    filterItemsOnSelect: true,
+    maxSelectedShown: 0,
+    titleProperty: 'title',
+    valueProperty: 'value',
+    iconProperty: 'icon',
+    disabled: false,
+    useCheckbox: false,
+    size: 'medium',
+    width: '200px',
+    maxHeight: '200px',
+
+    options: [
+      { title: 'Owner', value: 'owner', icon: 'icon-placeholder' },
+      { title: 'Admin', value: 'admin', icon: 'icon-placeholder' },
+      { title: 'Developer', value: 'developer', icon: 'icon-placeholder' },
+      { title: 'Member', value: 'member', icon: 'icon-placeholder' },
+    ],
+
+    showClear: true,
+  },
+};
+
+export const WithDetailsPane: Story = {
+  args: {
+    placeholder: 'Select something...',
+    emptyText: 'No matches found...',
+    closeOnSelect: false,
+    filterItemsOnSelect: true,
+    maxSelectedShown: 0,
+    titleProperty: 'title',
+    valueProperty: 'value',
+    showSelectionInfo: true,
+    iconProperty: 'icon',
+    disabled: false,
+    useCheckbox: false,
+    size: 'medium',
+    width: '200px',
+    maxHeight: '200px',
+    options: [
+      { title: 'Owner', value: 'owner', icon: 'icon-placeholder' },
+      { title: 'Admin', value: 'admin', icon: 'icon-placeholder' },
+      { title: 'Developer', value: 'developer', icon: 'icon-placeholder' },
+      { title: 'Member', value: 'member', icon: 'icon-placeholder' },
+    ],
+  },
+};
+
+export const WithCheckboxes: Story = {
+  args: {
+    placeholder: 'Select something...',
+    emptyText: 'No matches found...',
+    closeOnSelect: false,
+    maxSelectedShown: 0,
+    titleProperty: 'title',
+    valueProperty: 'value',
+    showFilter: false,
+    iconProperty: 'icon',
+    disabled: false,
+    useCheckbox: true,
+    size: 'medium',
+    width: '200px',
+    maxHeight: '200px',
+    options: [
+      { title: 'Owner', value: 'owner', icon: 'icon-placeholder' },
+      { title: 'Admin', value: 'admin', icon: 'icon-placeholder' },
+      { title: 'Developer', value: 'developer', icon: 'icon-placeholder' },
+      { title: 'Member', value: 'member', icon: 'icon-placeholder' },
+    ],
+  },
+};
+
+export const WithCustomOptions: Story = {
+  args: {
+    placeholder: 'Select your favorite starters...',
+    emptyText: 'No matches found...',
+    closeOnSelect: false,
+    filterItemsOnSelect: true,
+    maxSelectedShown: 2,
+    titleProperty: 'title',
+    valueProperty: 'value',
+    iconProperty: 'icon',
+    disabled: false,
+    useCheckbox: false,
+    size: 'medium',
+    width: '400px',
+    maxHeight: '200px',
+    maxOptionsHeight: '400px',
+    optionsWidth: undefined,
+    minOptionsHeight: undefined,
+    options: [],
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      pokemon: {
+        gen1: [
+          {
+            name: 'Bulbasaur',
+            id: 1,
+            sprite: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png',
+          },
+          {
+            name: 'Charmander',
+            id: 4,
+            sprite: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/4.png',
+          },
+          {
+            name: 'Squirtle',
+            id: 7,
+            sprite: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/7.png',
+          },
+        ],
+        gen2: [
+          {
+            name: 'Chikorita',
+            id: 152,
+            sprite: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/152.png',
+          },
+          {
+            name: 'Cyndaquil',
+            id: 155,
+            sprite: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/155.png',
+          },
+          {
+            name: 'Totodile',
+            id: 158,
+            sprite: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/158.png',
+          },
+        ],
+      },
+    },
+    controls: { disabled: false },
+    template: `
+      <fw-multi-select
+        [emptyText]="emptyText"
+        [closeOnSelect]="closeOnSelect"
+        [filterItemsOnSelect]="filterItemsOnSelect"
+        [maxSelectedShown]="maxSelectedShown"
+        [titleProperty]="titleProperty"
+        [valueProperty]="valueProperty"
+        [iconProperty]="iconProperty"
+        [disabled]="disabled"
+        [useCheckbox]="useCheckbox"
+        [size]="size"
+        [width]="width"
+        [maxHeight]="maxHeight"
+        [maxOptionsHeight]="maxOptionsHeight"
+        [optionsWidth]="optionsWidth"
+        [minOptionsHeight]="minOptionsHeight"
+        [width]="width"
+        [maxOptionsHeight]="maxOptionsHeight"
+        [placeholder]="placeholder"
+        [showSelectionInfo]="showSelectionInfo"
+      >
+        <fw-menu-item-group title="Gen 1">
+          <fw-menu-item
+            *ngFor="let mon of pokemon.gen1"
+            [value]="mon.id"
+            [title]="mon.name"
+          >
+            <fw-avatar
+              color="slate"
+              variant="circular"
+              size="medium"
+              content="image"
+              [imageUrl]="mon.sprite || ''"
+            >
+            </fw-avatar>
+          </fw-menu-item>
+        </fw-menu-item-group>
+        <fw-menu-item-group title="Gen 2">
+          <fw-menu-item
+            *ngFor="let mon of pokemon.gen2"
+            [value]="mon.id"
+            [title]="mon.name"
+          >
+            <fw-avatar
+              color="slate"
+              variant="circular"
+              size="medium"
+              content="image"
+              [imageUrl]="mon.sprite || ''"
+            >
+            </fw-avatar>
+          </fw-menu-item>
+        </fw-menu-item-group>
+      </fw-multi-select>
+    `,
+  }),
+};
+
+export const Examples: Story = {
+  args: {
+    options: [
+      { title: 'Owner', value: 'owner', icon: 'icon-placeholder' },
+      { title: 'Admin', value: 'admin', icon: 'icon-placeholder' },
+      { title: 'Developer', value: 'developer', icon: 'icon-placeholder' },
+      { title: 'Member', value: 'member', icon: 'icon-placeholder' },
+    ],
+    value: [
+      { title: 'Admin', value: 'admin', icon: 'icon-placeholder' },
+      { title: 'Developer', value: 'developer', icon: 'icon-placeholder' },
+    ],
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      directValues: ['admin', 'developer'],
+    },
+    controls: { disabled: false },
+    template: `
+        <style>
+            th{
+            vertical-align: top;
+            text-align: left;
+            font-size: 12px;
+            padding-left: 10px;
+            font-family: Inter;
+            }
+        </style>
+        <table>
+          <tr>
+            <th>
+              MultiSelect
+              <li>maxSelectedShown: 100</li>
+              <li>filterItemsOnSelect: true</li>
+              <li>closeOnSelect: true</li>
+            </th>
+            <th>
+              MultiSelect
+              <li>maxSelectedShown: 1</li>
+              <li>filterItemsOnSelect: false</li>
+              <li>closeOnSelect: false</li>
+            </th>
+            <th>
+              Select
+              <li>shown for contrast</li>
+            </th>
+          </tr>
+           <tr>
+            <td>
+              <fw-multi-select
+                [(ngModel)]="directValues"
+                [options]="options"
+                [filterItemsOnSelect]="true"
+                width="260px"
+                placeholder="Select Permissions...">
+              </fw-multi-select>
+            </td>
+            <td>
+              <fw-multi-select
+                [(ngModel)]="value"
+                [options]="options"
+                [maxSelectedShown]="1"
+                [filterItemsOnSelect]="false"
+                [closeOnSelect]="false"
+                width="220px"
+                placeholder="Select Permissions...">
+              </fw-multi-select>
+            </td>
+            <td>
+                <fw-select
+                [value]="value[0]"
+                [options]="options"
+                width="220px"
+                placeholder="Select Permissions...">
+              </fw-select>
+            </td>
+          </tr>
+        </table>
+
+    `,
+  }),
+};

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

@@ -0,0 +1,40 @@
+<div #wrapper [ngStyle]="{width: width, cursor: 'pointer'}">
+  <fw-text-input
+    fwMenuRegister
+    [cdkMenuTriggerFor]="selectMenu"
+    [value]="selectTitle"
+    [leftIcon]="staticIcon || selectIcon"
+    [rightIcon]="(selectTitle&&showReset)?'close-circled':'chevron-down'"
+    (rightIconAction)="handleReset()"
+    [useActionableIcons]="true"
+    [placeholder]="placeholder"
+    [disabled]="disabled"
+    [size]="size"
+    [error]="errored || (invalid && touched)"
+    (keyup)="handleKeyUp($event)"
+    (keydown)="handleKeyDown($event)"
+    readOnly="true">
+  </fw-text-input>
+  <ng-template #selectMenu>
+    <fw-menu-container
+      [filterText]="filterValue"
+      *ngIf="!disabled" [showFilter]="showFilter" [width]="optionsWidth || wrapper.offsetWidth + 'px'"
+      [maxHeight]="maxOptionsHeight" [minHeight]="minOptionsHeight" (filterChanged)="onFilterChanged($event)">
+      <fw-menu [disabled]="disabled" [value]="selectValue" (change)="handleClick($event)">
+        <ng-container *ngIf="menuItems.length===0">
+          <fw-menu-item
+            *ngFor="let item of options"
+            [title]="item[titleProperty]?.toString()"
+            [description]="item[descriptionProperty]"
+            [value]="useFullOptionAsValue ? JSON.stringify(item) : item?.[valueProperty]?.toString()"
+            [icon]="item[iconProperty]"
+          >
+          </fw-menu-item>
+        </ng-container>
+        <div #menuContentWrapper>
+          <ng-content select="[fw-menu-item, fw-menu-separator, fw-menu-item-group]"></ng-content>
+        </div>
+      </fw-menu>
+    </fw-menu-container>
+  </ng-template>
+</div>

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

@@ -0,0 +1,4 @@
+:host {
+  box-sizing: border-box;
+  max-width: 100%;
+}

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

@@ -0,0 +1,242 @@
+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 { FwSelectMenuComponent } from './select-menu.component';
+
+describe('FwSelectMenuComponent', () => {
+  let component: FwSelectMenuComponent;
+  let fixture: ComponentFixture<FwSelectMenuComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        FwSelectMenuComponent,
+      ],
+      imports: [
+        CdkMenuModule,
+        FormsModule,
+        FwTextInputModule,
+        FwIconModule,
+        FwMenuModule,
+        NoopAnimationsModule,
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FwSelectMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('handleClick', () => {
+    it('should set the value to the clicked option', () => {
+
+      component.options = [{ value: "a" }, { value: "b" }, { value: "c" }];
+      component.titleProperty = 'value';
+      component.descriptionProperty = 'value';
+
+      expect(component.value).toBeUndefined();
+      component.handleClick("b");
+      expect(component.value).toEqual("b");
+    });
+
+    it('should handle calls with stringified JSON when `useFullOptionsAsValue` is true', () => {
+      component.options = [{ value: "a" }, { value: "b" }, { value: "c" }];
+      component.titleProperty = 'value';
+      component.descriptionProperty = 'value';
+      component.useFullOptionAsValue = true;
+
+      const changeEmitterSpy = jasmine.createSpyObj('changeEmitter', ['emit']);
+      component.change = changeEmitterSpy;
+
+      const changeSpy = jasmine.createSpy('onChangeSpy');
+      component.registerOnChange(changeSpy);
+
+      expect(component.value).toBeUndefined();
+      component.handleClick(JSON.stringify({ value: "a" }));
+      expect(component.value)
+        .withContext('should set the internal value as the stringified object')
+        .toEqual(JSON.stringify({ value: "a" }));
+      expect(changeSpy)
+        .withContext('should call external onChanges with the object')
+        .toHaveBeenCalledWith({ value: 'a' });
+      expect(changeEmitterSpy.emit)
+        .withContext('should emit the object from the `changes` emitter')
+        .toHaveBeenCalledWith({ value: 'a' });
+    })
+  });
+
+
+  describe('handleKeyDown', () => {
+      it('should handle selecting an option', () => {
+        component.options = [{ value: 'a' }, { value: 'b' }, { value: 'c' }];
+        component.titleProperty = 'value';
+        component.descriptionProperty = 'value';
+        component.value = 'a';
+        component.trigger.open();
+        component.inFocusOpen = true;
+        expect(component.value).toEqual('a');
+        component.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+        expect(component.value).toEqual('b');
+        component.handleKeyDown(new KeyboardEvent('keydown', { key: 'Enter' }));
+        expect(component.value).toEqual('b');
+      });
+
+      it('should handle selecting an option with `useFullObjectAsValue` set to true', () => {
+        component.options = [{ value: 'a' }, { value: 'b' }, { value: 'c' }];
+        component.titleProperty = 'value';
+        component.descriptionProperty = 'value';
+        component.useFullOptionAsValue = true;
+        component.trigger.open();
+        component.inFocusOpen = true;
+        component.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+
+        const changeSpy = jasmine.createSpy('onChangeSpy');
+        component.registerOnChange(changeSpy);
+
+        expect(component.value)
+          .withContext('should set the internal value as the stringified object')
+          .toEqual(JSON.stringify({ value: 'b' }));
+        expect(changeSpy)
+          .withContext('should not emit a change before they press enter')
+          .not.toHaveBeenCalled();
+
+        component.handleKeyDown(new KeyboardEvent('keydown', { key: 'Enter' }));
+
+        expect(component.value)
+          .withContext('enter key should not affect internal value')
+          .toEqual(JSON.stringify({ value: 'b' }));
+        expect(changeSpy)
+          .withContext('enter key should emit focussed value')
+          .toHaveBeenCalledWith({ value: 'b' });
+      });
+  })
+
+  it('should handle different value property name', () => {
+    component.options = [{ item: "a", title: "test value a" }, { item: "b" }, { item: "c" }];
+    component.valueProperty = 'item';
+    component.titleProperty = 'title';
+    component.descriptionProperty = 'item';
+    expect(component.value).toBeUndefined();
+    component.handleClick("b");
+    expect(component.value).toEqual("b");
+  });
+
+  describe('writeValue', () => {
+    it('should handle calls with a string value and map it to the right option to display', () => {
+      const options = [
+        {
+          title: 'Test Value A',
+          value: 'a',
+        },
+        {
+          title: 'Test Value B',
+          value: 'b',
+        },
+        {
+          title: 'Test Value C',
+          value: 'c',
+        },
+      ]
+
+      component.titleProperty = 'title';
+      component.valueProperty = 'value';
+      component.options = options;
+
+      const changeSpy = jasmine.createSpy('onChangeSpy');
+      component.registerOnChange(changeSpy);
+
+      expect(component.value).toEqual(undefined);
+      expect(component.selectTitle).toEqual('');
+
+      component.writeValue('b');
+
+      expect(changeSpy).toHaveBeenCalledWith('b');
+      expect(component.selectTitle).toEqual('Test Value B');
+    });
+
+    it('should handle calls with an object and set value and display string according to its properties', () => {
+      const options = [
+        {
+          title: 'Test Value A',
+          value: 'a',
+        },
+        {
+          title: 'Test Value B',
+          value: 'b',
+        },
+        {
+          title: 'Test Value C',
+          value: 'c',
+        },
+      ]
+
+      component.titleProperty = 'title';
+      component.valueProperty = 'value';
+      component.options = options;
+
+      expect(component.value).toEqual(undefined);
+      expect(component.selectTitle).toEqual('');
+
+      const changeSpy = jasmine.createSpy('onChangeSpy');
+      component.registerOnChange(changeSpy);
+
+      component.writeValue({
+          title: 'Test Value D',
+          value: 'd',
+        });
+
+      expect(changeSpy).toHaveBeenCalledWith('d');
+      expect(component.selectTitle).toEqual('Test Value D');
+    });
+
+    it('should set the value as the full passed object when `useFullOptionAsValue` is true', () => {
+      const options = [
+        {
+          title: 'Test Value A',
+          value: 'a',
+        },
+        {
+          title: 'Test Value B',
+          value: 'b',
+        },
+        {
+          title: 'Test Value C',
+          value: 'c',
+        },
+      ]
+
+      component.titleProperty = 'title';
+      component.valueProperty = 'value';
+      component.useFullOptionAsValue = true;
+      component.options = options;
+
+      expect(component.value).toEqual(undefined);
+      expect(component.selectTitle).toEqual('');
+
+      const changeSpy = jasmine.createSpy('onChangeSpy');
+      component.registerOnChange(changeSpy);
+
+      component.writeValue({
+          title: 'Test Value C',
+          value: 'c',
+      });
+
+      expect(changeSpy).toHaveBeenCalledWith({
+          title: 'Test Value C',
+          value: 'c',
+      });
+      expect(component.selectTitle).toEqual('Test Value C');
+    });
+  });
+
+
+});