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

package/src/components/layouts/sidebar/sidebar.mdx

@@ -0,0 +1,18 @@
+import {Canvas, Controls, Meta, Primary} from '@storybook/addon-docs';
+import * as LayoutSidebarStories from './sidebar.component.stories';
+
+<Meta of={LayoutSidebarStories} title="Layout/Sidebar"/>
+
+# Sidebar Layout `<fw-layout-sidebar>`
+
+```ts
+import { FwLayoutsModule } from '@flywheel-io/vision';
+```
+
+A simple layout pattern for 2-up displays of information. Especially for a list with detail information next to it.
+
+<Controls/>
+<Primary/>
+
+### Example of a list panel with a sidebar detail layout
+<Canvas of={LayoutSidebarStories.TableDetail}/>

package/src/components/layouts/toolbar/toolbar.component.scss

@@ -0,0 +1,11 @@
+:host {
+  display: flex;
+  box-sizing: border-box;
+  gap: 16px;
+  align-items: center;
+  font-size: 22px;
+
+  &.dense {
+    gap: 8px;
+  }
+}

package/src/components/layouts/toolbar/toolbar.component.spec.ts

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

package/src/components/layouts/toolbar/toolbar.component.stories.ts

@@ -0,0 +1,59 @@
+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 { FwAvatarModule } from '../../avatar/avatar.module';
+import { FwButtonModule } from '../../button/button.module';
+import { FwIconButtonModule } from '../../icon-button/icon-button.module';
+import { FwLayoutsModule } from '../layouts.module';
+import { FwLayoutToolbarComponent } from './toolbar.component';
+
+const meta: Meta = {
+  title: 'Layout/Toolbar',
+  component: FwLayoutToolbarComponent,
+  parameters: {
+    controls: {},
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?node-id=4957%3A72544&mode=dev',
+    },
+  },
+  decorators: [
+    applicationConfig({
+      providers: [importProvidersFrom([
+        BrowserAnimationsModule,
+      ])],
+    }),
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        FwAvatarModule,
+        FwButtonModule,
+        FwIconButtonModule,
+        FwLayoutsModule,
+      ],
+    }),
+  ],
+};
+export default meta;
+
+type Story = StoryObj<FwLayoutToolbarComponent>;
+
+export const ToolbarLayout: Story = {
+  args: {
+    dense: false,
+  },
+  render: (args) => ({
+    props: args,
+    controls: { disabled: false },
+    template: `
+        <fw-layout-toolbar [dense]="dense">
+          <fw-button leftIcon="add-new-create" size="small">Add Things</fw-button>
+          <fw-icon-button color="primary" icon="grid-layout" size="small"></fw-icon-button>
+          <fw-icon-button color="primary" icon="question-circle" size="small"></fw-icon-button>
+          <fw-avatar content="initial" initial="JD" size="medium"></fw-avatar>
+        </fw-layout-toolbar>
+    `,
+  }),
+};

package/src/components/layouts/toolbar/toolbar.component.ts

@@ -0,0 +1,15 @@
+import { Component, HostBinding, Input } from '@angular/core';
+
+@Component({
+  selector: 'fw-layout-toolbar',
+  template: '<ng-content></ng-content>',
+  styleUrls: ['./toolbar.component.scss'],
+})
+export class FwLayoutToolbarComponent {
+  @Input() dense?: boolean;
+
+  @HostBinding('attr.class') get classes(): string {
+    const classes = ['fw-layout-toolbar', this.dense ? 'dense' : ''];
+    return classes.join(' ');
+  };
+}

package/src/components/layouts/toolbar/toolbar.mdx

@@ -0,0 +1,16 @@
+import {Controls, Meta, Primary} from '@storybook/addon-docs';
+import * as LayoutToolbarStories from './toolbar.component.stories';
+
+<Meta of={LayoutToolbarStories} title="Layout/Toolbar"/>
+
+# Toolbar Layout `<fw-layout-toolbar>`
+
+```ts
+import { FwLayoutsModule } from '@flywheel-io/vision';
+```
+
+- Flex row layout of items with gap and icon button font sizes
+- Accepts all component as Child Components and will lay them out in a flew row with gap of 16px and a default font size of 22px.
+
+<Controls/>
+<Primary/>

package/src/components/menu/menu-close-triggers.directive.ts

@@ -0,0 +1,27 @@
+import { CdkMenuTrigger } from '@angular/cdk/menu';
+import { ContentChildren, Directive, HostListener, QueryList } from '@angular/core';
+
+@Directive({
+  selector: '[fwMenuCloseTriggers]',
+})
+export class FwMenuCloseTriggersDirective {
+  @HostListener('document:click') outsideClick(): void {
+    if (this._isOpen && this.triggers && this.triggers.length > 0) {
+      this.triggers.forEach(trigger => {
+        trigger.close();
+      });
+      this._isOpen = false;
+    }
+    if (this.triggers && this.triggers.length > 0) {
+      this.triggers.forEach(trigger => {
+        if (trigger.isOpen()) {
+          this._isOpen = true;
+        }
+      });
+    }
+  }
+
+  @ContentChildren(CdkMenuTrigger, { descendants: true }) triggers?: QueryList<CdkMenuTrigger>;
+
+  private _isOpen = false;
+}

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

@@ -0,0 +1,9 @@
+<div *ngIf="showFilter" class="filter-box" cdkMenuBar>
+  <fw-text-input
+    placeholder="Search" leftIcon="search" autofocus
+    [value]="filterText" (input)="filterTextChange($event)">
+  </fw-text-input>
+</div>
+<div class="menu-wrapper" [ngClass]="[showFilter?'filtered':'', collapsed?'collapsed':'']">
+  <ng-content></ng-content>
+</div>

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

@@ -0,0 +1,41 @@
+.fw-menu-container {
+  display: flex;
+  border-radius: 8px;
+  background: var(--card-background);
+  position: relative;
+
+  &.border-default {
+    border: 1px solid var(--separations-border);
+  }
+
+  .filter-box {
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    padding: 8px;
+    border-bottom: 1px solid var(--separations-base);
+    background-color: var(--card-background);
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: 1;
+  }
+
+  .menu-wrapper {
+    flex: 1;
+    padding: 6px 4px;
+    scroll-padding: 17px;
+    overflow: hidden auto;
+
+    &.collapsed {
+      scrollbar-width: none;
+    }
+
+    &.filtered {
+      margin-top: 54px;
+    }
+  }
+
+  fw-menu-separator {
+    margin: 6px -8px;
+  }
+}

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

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

package/src/components/menu/menu-container/menu-container.component.ts

@@ -0,0 +1,76 @@
+import {
+  AfterContentInit,
+  Component,
+  ContentChild,
+  EventEmitter,
+  HostBinding,
+  Input,
+  Output,
+  ViewEncapsulation,
+} from '@angular/core';
+import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
+
+import { FwMenuComponent } from '../menu.component';
+
+@Component({
+  selector: 'fw-menu-container',
+  templateUrl: './menu-container.component.html',
+  styleUrls: ['./menu-container.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class FwMenuContainerComponent implements AfterContentInit {
+  @Input() width?: string = 'inherit';
+  @Input() maxHeight?: string = 'auto';
+  @Input() minHeight?: string = 'auto';
+  @Input() border?: 'none' | 'default' = 'default';
+  @Input() shadow?: 'none' | 'small' | 'medium' | 'large' | 'extra-large' | 'inner' = 'large';
+  @Input() showFilter?: boolean = false;
+  @Input() filterText?: string = '';
+  @Input() offset?: string = '0px';
+  /**
+   * @deprecated please use fw-navbar instead
+   */
+  @Input() collapsed?: boolean = false;
+
+  @Output() readonly filterChanged = new EventEmitter<string>();
+
+  @ContentChild(FwMenuComponent) menu: FwMenuComponent;
+
+  @HostBinding('attr.class') get classes(): string {
+    return [
+      'fw-menu-container',
+      `vision-shadow-${this.shadow}`,
+      `border-${this.border}`,
+    ].join(' ');
+  };
+
+  @HostBinding('style') get style(): SafeStyle {
+    return this.sanitizer.bypassSecurityTrustStyle(`
+      width: ${this.width};
+      max-height: ${this.maxHeight};
+      min-height: ${this.minHeight};
+      margin-top: ${this.offset};
+    `);
+  }
+
+  constructor(private sanitizer: DomSanitizer) {
+  }
+
+  ngAfterContentInit(): void {
+    if (this.menu) {
+      this.menu.setFilter(this.filterText);
+    }
+  }
+
+  filterTextChange(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    const inputValue = input.value;
+
+    this.filterChanged.emit(inputValue);
+
+    if (this.menu) {
+      this.menu.setFilter(inputValue);
+    }
+  }
+
+}

package/src/components/menu/menu-container/menu-container.stories.ts

@@ -0,0 +1,105 @@
+import { CommonModule } from '@angular/common';
+import { importProvidersFrom } from '@angular/core';
+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 { FwButtonModule } from '../../button/button.module';
+import { FwDialogsModule } from '../../dialog/dialogs.module';
+import { FwIconModule } from '../../icon/icon.module';
+import { FwMenuModule } from '../menu.module';
+import { FwMenuContainerComponent } from './menu-container.component';
+
+export default {
+  title: 'Components/Menu',
+  component: FwMenuContainerComponent,
+  parameters: {
+    controls: {},
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=4959-73505&mode=design&t=oWH7ZDZej5cyHY4O-11',
+    },
+  },
+  argTypes: {
+    collapsed: {
+      description: 'DEPRECATED',
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        FwAvatarModule,
+        FwButtonModule,
+        FwDialogsModule,
+        FwIconModule,
+        FwMenuModule,
+      ],
+    }),
+    applicationConfig({
+      providers: [
+        importProvidersFrom(BrowserModule),
+        importProvidersFrom(BrowserAnimationsModule),
+      ],
+    }),
+  ],
+
+} as Meta;
+
+type Story = StoryObj<FwMenuContainerComponent>;
+
+export const MenuContainer: Story = {
+  args: {
+    shadow: 'large',
+    border: 'default',
+    width: '414px',
+    maxHeight: '400px',
+  },
+  render: (args) => ({
+    props: args,
+    controls: { disabled: false },
+    template: `
+        <fw-menu-container [width]="width" [maxHeight]="maxHeight" [shadow]="shadow" [border]="border">
+            <fw-menu [multiSelect]="true" [useCheckbox]="true">
+              <fw-menu-item title="Owner" value="owner" description="This is the highest level of permissions. They have access to plan and billing information and settings as well as all permissions an Admin has.">
+              </fw-menu-item>
+              <fw-menu-item title="Admin" value="admin" description="They can create new Users and Groups, and modify user roles and permissions site-wide. ">
+              </fw-menu-item>
+              <fw-menu-item title="Developer" value="developer" description="They can upload gears and restrict their availability to specific projects or users. Admins must assign Developers permissions to Groups and Projects to be able to see data.">
+              </fw-menu-item>
+              <fw-menu-item title="Member" value="member" description="They have no special permissions and must be assigned to specific Groups and Projects by an Admin.">
+              </fw-menu-item>
+            </fw-menu>
+        </fw-menu-container>
+    `,
+  }),
+};
+
+export const MenuContainerFilter: Story = {
+  args: {
+    shadow: 'large',
+    border: 'default',
+    width: '200px',
+    maxHeight: '400px',
+    showFilter: true,
+  },
+  render: (args) => ({
+    props: args,
+    controls: { disabled: false },
+    template: `
+        <fw-menu-container [width]="width" [maxHeight]="maxHeight" [shadow]="shadow" [border]="border" [showFilter]="showFilter">
+            <fw-menu value="developer">
+              <fw-menu-item title="Owner" value="owner">
+              </fw-menu-item>
+              <fw-menu-item title="Admin" value="admin">
+              </fw-menu-item>
+              <fw-menu-item title="Developer" value="developer">
+              </fw-menu-item>
+              <fw-menu-item title="Member" value="member">
+              </fw-menu-item>
+            </fw-menu>
+        </fw-menu-container>
+    `,
+  }),
+};

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

@@ -0,0 +1,5 @@
+<h3 class="vision-h3">
+  <ng-content></ng-content>
+</h3>
+<ng-content select="fw-icon-button"></ng-content>
+<ng-content select="fw-badge"></ng-content>

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

@@ -0,0 +1,20 @@
+:host {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  overflow: hidden;
+  container-name: menuheader;
+  container-type: size;
+
+  h3 {
+    padding: 8px;
+    margin: 0 4px;
+    width: 100%;
+  }
+}
+
+@container menuheader (max-width: 100px) {
+  h3 {
+    opacity: 0;
+  }
+}

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

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

package/src/components/menu/menu-header/menu-header.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'fw-menu-header',
+  templateUrl: './menu-header.component.html',
+  styleUrls: ['./menu-header.component.scss'],
+})
+export class FwMenuHeaderComponent {
+
+}

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

@@ -0,0 +1,42 @@
+<div (click)="handleClick($event)" *ngIf="!hidden">
+  <div
+    [ngClass]="['menu-item', 'size-'+size, 'variant-'+variant, disabled?'disabled':'']"
+    [class.disabled]="disabled">
+    <div class="item-checkbox" *ngIf="showCheckbox && multiSelect">
+      <fw-checkbox
+        [disabled]="disabled"
+        [color]="checkboxColor"
+        [checked]="selected">
+      </fw-checkbox>
+    </div>
+    <div class="item-radiobutton" *ngIf="showCheckbox && !multiSelect">
+      <fw-radio-button
+        [value]="value"
+        [color]="checkboxColor"
+        [disabled]="disabled"
+        [checked]="selected">
+      </fw-radio-button>
+    </div>
+    <fw-icon [color]="iconColor" *ngIf="icon" class="menu-icon {{iconColor}}">{{ icon }}</fw-icon>
+    <ng-content select="fw-avatar"></ng-content>
+    <div class="menu-text" *ngIf="title">
+      <h4 class="vision-h4">{{ title }}</h4>
+      <p *ngIf="description" class="vision-p4 description">{{ description }}</p>
+    </div>
+    <div class="key-text vision-p2">
+      <ng-content select="p"></ng-content>
+      <ng-content select="fw-badge"></ng-content>
+      <ng-content select="fw-icon"></ng-content>
+      <ng-content select="fw-icon-button"></ng-content>
+      <fw-icon-button
+        [size]="'small'"
+        [icon]="subItemsOpen?'chevron-up':'chevron-down'"
+        *ngIf="subItems.length>0"
+        (click)="toggleSubItemsView()">
+      </fw-icon-button>
+    </div>
+  </div>
+</div>
+<div class="item-subitems">
+  <ng-content select="fw-menu-sub-item"></ng-content>
+</div>