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

package/src/components/badge/badge.stories.ts

@@ -1,131 +0,0 @@
-// 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 { FwIconModule } from '../icon/icon.module';
-import { FwIconButtonModule } from '../icon-button/icon-button.module';
-import { FwBadgeComponent } from './badge.component';
-import { FwBadgeModule } from './badge.module';
-
-export default {
-  title: 'Components/Badge',
-  component: FwBadgeComponent,
-  parameters: {
-    controls: {
-      exclude: ['renderClass', 'ngOnChanges', 'badgeStyle'],
-    },
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=5-15&mode=design&t=nWWUp7Uaipn1gnod-0',
-    },
-  },
-  argTypes: {
-    color: {
-      control: {
-        type: 'radio',
-        options: ['default', 'primary', 'secondary', 'error', 'warning', 'success'],
-      },
-    },
-  },
-  decorators: [
-    moduleMetadata({
-      imports: [CommonModule, FwBadgeModule, FwButtonModule, FwIconModule, FwIconButtonModule],
-    }),
-  ],
-} as Meta;
-
-type Story = StoryObj<FwBadgeComponent>;
-
-export const Badge: Story = {
-  args: {
-    variant: 'standard',
-    color: 'error',
-    value: '1',
-    hideZero: false,
-    hideEmpty: false,
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: true },
-    template: `
-        <div style="display: flex; gap: 16px">
-          <fw-badge [value]="value" [color]="color" [variant]="variant" [hideEmpty]="hideEmpty" [hideZero]="hideZero">
-              <fw-icon-button size="medium" icon="bell-notification" selected="true"></fw-icon-button>
-          </fw-badge>
-          <fw-badge [value]="value" [color]="color" [variant]="variant" [hideEmpty]="hideEmpty" [hideZero]="hideZero">
-              <fw-icon-button size="medium" icon="bell-notification"></fw-icon-button>
-          </fw-badge>
-        </div>
-    `,
-  }),
-};
-
-export const DottedBadge: Story = {
-  args: {
-    variant: 'dot',
-    color: 'error',
-    value: '4',
-    hideZero: false,
-    hideEmpty: false,
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: true },
-    template: `
-         <fw-badge [value]="value" [color]="color" [variant]="variant" [hideEmpty]="hideEmpty" [hideZero]="hideZero">
-            <fw-icon size="large" color="typography">bell-notification</fw-icon>
-        </fw-badge>
-    `,
-  }),
-};
-
-export const StaticBadge: Story = {
-  args: {
-    variant: 'static',
-    color: 'error',
-    value: '4',
-    hideZero: false,
-    hideEmpty: false,
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: true },
-    template: `
-         <fw-badge [value]="value" [color]="color" [variant]="variant" [hideEmpty]="hideEmpty" [hideZero]="hideZero">
-        </fw-badge>
-    `,
-  }),
-};
-
-export const Examples: Story = {
-  args: {
-    value: '99',
-    color: 'error',
-    variant: 'standard',
-    hideZero: false,
-    hideEmpty: false,
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: true },
-    template: `
-      <div style="display: flex; gap: 16px; align-items: center">
-        <fw-badge [value]="value" [color]="color" [variant]="variant" [hideEmpty]="hideEmpty" [hideZero]="hideZero">
-            <div style="background-color: var(--primary-hover); padding: 0 12px;">
-                <p>Text in a div</p>
-            </div>
-        </fw-badge>
-         <fw-badge [value]="value" [color]="color" [variant]="variant" [hideEmpty]="hideEmpty" [hideZero]="hideZero">
-            <fw-icon size="large">bell-notification</fw-icon>
-        </fw-badge>
-        <fw-badge [value]="value" [color]="color" [variant]="variant" [hideEmpty]="hideEmpty" [hideZero]="hideZero">
-            <fw-button variant="solid">Button</fw-button>
-        </fw-badge>
-        <fw-badge [value]="value" [color]="color" [variant]="variant" [hideEmpty]="hideEmpty" [hideZero]="hideZero">
-            <fw-icon-button icon="bell-notification" size="medium" selected="true"></fw-icon-button>
-        </fw-badge>
-      </div>
-      `,
-  }),
-};

package/src/components/breadcrumbs/breadcrumbs.component.scss

@@ -1,5 +0,0 @@
-:host {
-  display: flex;
-  box-sizing: border-box;
-  align-items: center;
-}

package/src/components/breadcrumbs/breadcrumbs.component.spec.ts

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

package/src/components/breadcrumbs/breadcrumbs.component.stories.ts

@@ -1,81 +0,0 @@
-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/layouts.module';
-import { FwBreadcrumbsComponent } from './breadcrumbs.component';
-import { FwBreadcrumbsModule } from './breadcrumbs.module';
-
-const meta: Meta = {
-  title: 'Components/Breadcrumbs',
-  component: FwBreadcrumbsComponent,
-  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,
-        FwBreadcrumbsModule,
-        FwButtonModule,
-        FwIconButtonModule,
-        FwLayoutsModule,
-      ],
-    }),
-  ],
-};
-export default meta;
-
-type Story = StoryObj<FwBreadcrumbsComponent>;
-
-export const Breadcrumbs: Story = {
-  args: {},
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-      <fw-breadcrumbs>
-        <fw-crumb title="Crumb" description="Optional"></fw-crumb>
-        <fw-crumb title="Crumb" description="Optional"></fw-crumb>
-        <fw-crumb title="Crumb" description="Optional"></fw-crumb>
-      </fw-breadcrumbs>
-    `,
-  }),
-};
-
-export const BreadcrumbsInLayout: Story = {
-  args: {},
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-      <fw-layout-group stackable="true">
-        <fw-breadcrumbs>
-          <fw-crumb title="Flywheel" description="13 Projects"></fw-crumb>
-          <fw-crumb title="Alzheimer's" description="18 Sessions"></fw-crumb>
-          <fw-crumb title="example-session-b" description="December 5th, 2017 - 05:24:56"></fw-crumb>
-        </fw-breadcrumbs>
-        <fw-layout-toolbar>
-          <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>
-      </fw-layout-group>
-    `,
-  }),
-};

package/src/components/breadcrumbs/breadcrumbs.component.ts

@@ -1,20 +0,0 @@
-import { AfterContentInit, Component, ContentChildren, QueryList } from '@angular/core';
-
-import { FwCrumbComponent } from './crumb.component';
-
-@Component({
-  selector: 'fw-breadcrumbs',
-  template: '<ng-content select="fw-crumb"></ng-content>',
-  styleUrls: ['./breadcrumbs.component.scss'],
-})
-export class FwBreadcrumbsComponent implements AfterContentInit {
-  @ContentChildren(FwCrumbComponent) crumbs: QueryList<FwCrumbComponent>;
-
-  ngAfterContentInit(): void {
-    this.crumbs.forEach((crumb, index) => {
-      if (index === this.crumbs.length - 1) {
-        crumb.last = true;
-      }
-    });
-  }
-}

package/src/components/breadcrumbs/breadcrumbs.mdx

@@ -1,53 +0,0 @@
-import {Canvas, Meta} from '@storybook/addon-docs';
-import * as BreadcrumbsStories from './breadcrumbs.component.stories';
-import * as CrumbStories from './crumb.component.stories';
-
-<Meta of={BreadcrumbsStories}/>
-
-# Breadcrumbs
-
-```ts
-import { FwBreadcrumbsModule } from '@flywheel-io/vision';
-```
-
-This is the layout component `fw-breadcrumbs` most commonly will be used to display page hierarchy links
-
-It is collection container of the `fw-crumb` components.
-
-- has no inputs or outputs
-- will automatically hide the separator icon on the last `fw-crumb`
-- `fw-crumb` can use a [routerLink](https://angular.io/api/router/RouterLink) directive or the `href` input property for navigation.
-
-## Basic Usage
-
-First import the card module into your `app.module.ts`
-
-
-
-### Custom Component Approach
-
-Assemble the html layout for the `<fw-card></fw-card>` component by adding the card child components that you want to use to it.
-
-```html title="your-dialog.component.html"
-<!-- your.component.html -->
-
-  <fw-breadcrumbs>
-    <fw-crumb title="Crumb" description="Optional"></fw-crumb>
-    <fw-crumb title="Crumb" description="Optional"></fw-crumb>
-    <fw-crumb title="Crumb" description="Optional"></fw-crumb>
-  </fw-breadcrumbs>
-```
-<Canvas of={BreadcrumbsStories.Breadcrumbs}/>
-
-## Child Component
-
-### Crumb `<fw-crumb>`
-- has the [inputs](/story/vision-card--card-header) of `title, description`
-<Canvas of={CrumbStories.Crumb}/>
-
-## Other Examples
-
-### Breadcrumbs in a layout with a toolbar
-<Canvas of={BreadcrumbsStories.BreadcrumbsInLayout}/>
-
-

package/src/components/breadcrumbs/breadcrumbs.module.ts

@@ -1,23 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-import { FwIconModule } from '../icon/icon.module';
-import { FwBreadcrumbsComponent } from './breadcrumbs.component';
-import { FwCrumbComponent } from './crumb.component';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    FwIconModule,
-  ],
-  exports: [
-    FwBreadcrumbsComponent,
-    FwCrumbComponent,
-  ],
-  declarations: [
-    FwBreadcrumbsComponent,
-    FwCrumbComponent,
-  ],
-})
-export class FwBreadcrumbsModule {
-}

package/src/components/breadcrumbs/crumb.component.html

@@ -1,5 +0,0 @@
-<div (click)="handleClick($event)">
-  <h3 class="vision-h3">{{ title }}</h3>
-  <p *ngIf="description" class="vision-p3">{{ description }}</p>
-</div>
-<fw-icon *ngIf="!last" size="medium" color="slate">chevron-forward</fw-icon>

package/src/components/breadcrumbs/crumb.component.scss

@@ -1,23 +0,0 @@
-:host {
-  display: flex;
-  align-items: center;
-
-  > div {
-    cursor: pointer;
-  }
-
-  h3 {
-    margin: 0;
-    color: var(--typography-base);
-  }
-
-  p {
-    margin: 0;
-    color: var(--typography-muted);
-  }
-
-  fw-icon {
-    margin: 0 10px;
-    color: var(--typography-light);
-  }
-}

package/src/components/breadcrumbs/crumb.component.stories.ts

@@ -1,53 +0,0 @@
-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/layouts.module';
-import { FwBreadcrumbsModule } from './breadcrumbs.module';
-import { FwCrumbComponent } from './crumb.component';
-
-const meta: Meta = {
-  title: 'Components/Breadcrumbs',
-  component: FwCrumbComponent,
-  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,
-        FwBreadcrumbsModule,
-        FwButtonModule,
-        FwIconButtonModule,
-        FwLayoutsModule,
-      ],
-    }),
-  ],
-};
-export default meta;
-
-type Story = StoryObj<FwCrumbComponent>;
-
-export const Crumb: Story = {
-  args: {
-    title: 'Crumb',
-    description: 'Optional',
-  },
-  argTypes: {
-    click: { action: 'click' },
-  },
-};

package/src/components/breadcrumbs/crumb.component.ts

@@ -1,23 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-@Component({
-  selector: 'fw-crumb',
-  templateUrl: './crumb.component.html',
-  styleUrls: ['./crumb.component.scss'],
-})
-export class FwCrumbComponent {
-  @Input() title: string;
-  @Input() description?: string;
-  @Input() href?: string;
-  @Input() last?: boolean;
-  // eslint-disable-next-line @angular-eslint/no-output-native
-  @Output() click: EventEmitter<Event> = new EventEmitter<Event>();
-
-  handleClick(evt: Event): void {
-    evt.stopPropagation();
-    if (this.href) {
-      window.location.href = this.href;
-    }
-    this.click.emit(evt);
-  }
-}

package/src/components/button/button.component.html

@@ -1,7 +0,0 @@
-<button [type]="type" [class]="[color + '-' + variant, size]" [disabled]="disabled">
-  <fw-progress-spinner size="small" [color]="getMappedColor()" *ngIf="variant==='progress'"></fw-progress-spinner>
-  <fw-icon *ngIf="!!leftIcon && variant!=='progress'">{{ leftIcon }}</fw-icon>
-  <div class="spacer" *ngIf="!leftIcon"></div>
-  <span><ng-content></ng-content></span>
-  <fw-icon *ngIf="!!rightIcon">{{ rightIcon }}</fw-icon>
-</button>

package/src/components/button/button.component.scss

@@ -1,129 +0,0 @@
-@use 'sass:list';
-@use "sass:map";
-
-:host {
-  &.full-width {
-    flex: 1;
-    display: flex;
-
-    button {
-      flex: 1;
-    }
-  }
-}
-
-button {
-  cursor: pointer;
-  font-family: Inter, sans-serif;
-  font-size: 14px;
-  line-height: 14px;
-  font-style: normal;
-  font-weight: 500;
-  display: inline-flex;
-  height: 36px;
-  padding: 12px;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  flex-shrink: 0;
-  border: 1px solid transparent;
-  border-radius: 8px;
-
-  .spacer {
-    height: 18px;
-    width: 0;
-    margin-left: -8px;
-  }
-
-  fw-icon {
-    height: 18px;
-    font-size: 20px;
-    width: 20px;
-    min-width: 20px;
-  }
-
-  span {
-    white-space: nowrap;
-  }
-
-  &:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-}
-
-// Size Classes
-.large {
-  font-size: 16px;
-  height: 40px;
-  padding: 12px 14px;
-
-  fw-icon {
-    font-size: 24px;
-    width: 24px;
-    min-width: 24px;
-  }
-}
-
-.small {
-  height: 30px;
-  padding: 12px 10px;
-}
-
-// Generate color and variant classes
-$colors: primary, secondary, slate, danger, skeleton, warning, success;
-$variants: solid, ghost, outline, progress;
-$color-names-to-vars: ("primary": primary, "secondary": secondary, "danger": red, "slate": slate, "warning": orange, "success": green);
-
-@each $color in $colors {
-  @each $variant in $variants {
-    // map from danger to red for example
-    $var-name: map.get($color-names-to-vars, $color);
-
-    .#{$color}-#{$variant} {
-      @if $variant == solid {
-        background-color: var(--#{$var-name}-base);
-        color: var(--typography-contrast);
-
-        &:hover {
-          background-color: var(--#{$var-name}-medium);
-        }
-
-        &:active {
-          background-color: var(--#{$var-name}-dark);
-        }
-      } @else {
-        // ghost and outline share all colors so we can just else here
-        background-color: transparent;
-        color: var(--#{$var-name}-base);
-
-        &:hover {
-          background-color: var(--#{$var-name}-hover);
-        }
-
-        &:active {
-          background-color: var(--#{$var-name}-focus);
-        }
-      }
-
-      // add border to outline variant
-      @if $variant == outline {
-        border: 1px solid var(--separations-base);
-      }
-      @if $variant == progress {
-        background-color: var(--#{$var-name}-hover);
-        color: var(--#{$var-name}-base);
-
-        span {
-          opacity: .6;
-        }
-
-        &:disabled {
-          opacity: 0.6;
-          cursor: not-allowed;
-        }
-      }
-    }
-
-  }
-}

package/src/components/button/button.component.spec.ts

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

package/src/components/button/button.component.ts

@@ -1,40 +0,0 @@
-import { Component, HostBinding, Input } from '@angular/core';
-
-import { IconType } from '../icon/icon.types';
-
-@Component({
-  selector: 'fw-button',
-  styleUrls: ['./button.component.scss'],
-  templateUrl: './button.component.html',
-})
-export class FwButtonComponent {
-  @HostBinding('attr.class') get classes(): string {
-    return ['fw-button', this.size, this.fullWidth ? 'full-width' : null].filter(Boolean).join(' ');
-  }
-
-  @Input() color?: 'primary' | 'secondary' | 'danger' | 'slate' | 'skeleton' | 'warning' | 'success' = 'primary';
-  @Input() size?: 'small' | 'medium' | 'large' = 'medium';
-  @Input() variant?: 'ghost' | 'solid' | 'outline' | 'progress' = 'solid';
-  @Input() type?: 'button' | 'submit' | 'reset';
-  @Input() disabled?: boolean = false;
-  @Input() fullWidth?: boolean = false;
-  @Input() leftIcon?: IconType;
-  @Input() rightIcon?: IconType;
-
-  getMappedColor(): 'primary' | 'secondary' | 'red' | 'slate' | 'orange' | 'green' | undefined {
-    switch (this.color) {
-      case 'primary':
-      case 'secondary':
-      case 'slate':
-        return this.color;
-      case 'danger':
-        return 'red';
-      case 'warning':
-        return 'orange';
-      case 'success':
-        return 'green';
-      default:
-        return undefined;
-    }
-  }
-}