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

package/src/components/avatar/avatar.component.scss

@@ -1,97 +0,0 @@
-@use "sass:map";
-
-:host {
-  display: block;
-
-  .avatar {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    width: inherit;
-    height: inherit;
-    border-radius: inherit;
-    font-size: inherit;
-
-    fw-icon {
-      color: var(--typography-contrast);
-      font-size: inherit;
-    }
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      border-radius: inherit;
-    }
-
-    .initial {
-      font-family: Inter, sans-serif;
-      font-style: normal;
-      font-weight: 500;
-      color: var(--typography-contrast);
-      font-size: inherit;
-    }
-  }
-
-  &.small {
-    width: 16px;
-    height: 16px;
-    font-size: 8px;
-
-    .avatar fw-icon {
-      font-size: 12px;
-    }
-  }
-
-  &.medium {
-    width: 32px;
-    height: 32px;
-    font-size: 14px;
-
-    .avatar fw-icon {
-      font-size: 24px;
-    }
-  }
-
-  &.large {
-    width: 48px;
-    height: 48px;
-    font-size: 22px;
-
-    .avatar fw-icon {
-      font-size: 32px;
-    }
-  }
-
-  &.x-large {
-    width: 96px;
-    height: 96px;
-    font-size: 36px;
-
-    .avatar fw-icon {
-      font-size: 64px;
-    }
-  }
-
-  &.rounded.small {
-    border-radius: 4px;
-  }
-
-  &.rounded.medium {
-    border-radius: 8px;
-  }
-
-  &.rounded.large {
-    border-radius: 12px;
-  }
-
-  &.rounded.x-large {
-    border-radius: 16px;
-  }
-
-  &.circular {
-    border-radius: 64px;
-  }
-}
-

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

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

package/src/components/avatar/avatar.component.ts

@@ -1,50 +0,0 @@
-import { Component, computed,HostBinding, Input, input } from '@angular/core';
-
-import { pickColorViaHash } from '../../color.utils';
-import { IconType } from '../icon/icon.types';
-
-type AvatarColorOption = 'primary' | 'secondary' | 'red' | 'light-slate' | 'slate' | 'warning' | 'success';
-
-const namedColorMap: { [K in AvatarColorOption]: string } = {
-  primary: 'var(--primary-base)',
-  secondary: 'var(--secondary-base)',
-  red: 'var(--red-base)',
-  'light-slate': 'var(--slate-light)',
-  slate: 'var(--slate-base)',
-  warning: 'var(--orange-base)',
-  success: 'var(--green-base)',
-}
-@Component({
-  selector: 'fw-avatar',
-  styleUrls: ['./avatar.component.scss'],
-  templateUrl: './avatar.component.html',
-})
-export class FwAvatarComponent {
-  @HostBinding('attr.class') get classes(): string {
-    return [this.size, this.variant, this.content].filter(Boolean).join(' ');
-  };
-
-  @Input() color?: AvatarColorOption = 'primary';
-  @Input() variant?: 'circular' | 'rounded' | 'square' = 'circular';
-  @Input() content?: 'image' | 'icon' | 'initial' = 'icon';
-  @Input() size?: 'small' | 'medium' | 'large' | 'x-large' = 'small';
-  @Input() initial?: string = '';
-  @Input() imageUrl?: string = '';
-  @Input() imageAltText?: string = '';
-  @Input() icon?: IconType = 'user';
-  colorSeed = input<string>();
-
-  hasedColor = computed(() => pickColorViaHash(this.colorSeed()));
-
-  colorToDisplay = computed(() => this.colorSeed() ? this.hasedColor() : namedColorMap[this.color]);
-
-  isImageBroken: boolean = false;
-
-  loadImage(): void {
-    this.isImageBroken = false;
-  }
-
-  errorImage(): void {
-    this.isImageBroken = true;
-  }
-}

package/src/components/avatar/avatar.mdx

@@ -1,16 +0,0 @@
-import { Title, Subtitle, Description, Primary, Controls, Stories, Meta } from '@storybook/blocks';
-
-import * as AvatarStories from './avatar.stories';
-
-<Meta of={AvatarStories}/>
-<Title />
-
-```ts
-import FwAvatarModule from '@flywheel-io/vision';
-```
-
-<Subtitle />
-<Description />
-<Primary />
-<Controls />
-<Stories />

package/src/components/avatar/avatar.module.ts

@@ -1,20 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-import { FwIconModule } from '../icon/icon.module';
-import { FwAvatarComponent } from './avatar.component';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    FwIconModule,
-  ],
-  exports: [
-    FwAvatarComponent,
-  ],
-  declarations: [
-    FwAvatarComponent,
-  ],
-})
-export class FwAvatarModule {
-}

package/src/components/avatar/avatar.stories.ts

@@ -1,207 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-
-import { FwIconModule } from '../icon/icon.module';
-import { FwAvatarComponent } from './avatar.component';
-import { FwAvatarModule } from './avatar.module';
-
-const meta: Meta = {
-  title: 'Components/Avatar',
-  component: FwAvatarComponent,
-  argTypes: {
-    colorSeed: {
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {
-          summary: 'string',
-        },
-      },
-      description: 'A seed that will be hashed to choose a color, overrides the `color` prop if set',
-    },
-  },
-  parameters: {
-    controls: {
-      exclude: ['isImageBroken', 'loadImage', 'errorImage'],
-    },
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=5-14&mode=design&t=nWWUp7Uaipn1gnod-0',
-    },
-  },
-  decorators: [
-    moduleMetadata({
-      imports: [CommonModule, FwAvatarModule, FwIconModule],
-    }),
-  ],
-}
-
-export default meta;
-
-type Story = StoryObj<FwAvatarComponent>;
-
-export const Default: Story = {
-  args: {
-    variant: 'circular',
-    content: 'initial',
-    size: 'medium',
-    color: 'primary',
-    initial: 'JD',
-  },
-};
-
-export const HashedColor: Story = {
-    args: {
-    variant: 'circular',
-    content: 'initial',
-    size: 'medium',
-    color: 'primary',
-    initial: 'JD',
-    colorSeed: 'JD',
-  },
-}
-
-export const Variations: Story = {
-  parameters: {
-    controls: {
-      exclude: /.*/g,
-    },
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: true },
-    template: `
-      <div>
-          <style> tr, td { padding: 12px; font-family: Inter; } table {border-spacing: 10px; -webkit-border-vertical-spacing: 0;}</style>
-          <table>
-              <tr>
-                  <th></th>
-                  <th>circular</th>
-                  <th>square</th>
-                  <th>rounded</th>
-                  <th></th>
-                  <th>circular</th>
-                  <th>square</th>
-                  <th>rounded</th>
-                  <th></th>
-                  <th>circular</th>
-                  <th>square</th>
-                  <th>rounded</th>
-              </tr>
-               <tr>
-                  <th></th>
-                  <th>large</th>
-                  <th>large</th>
-                  <th>large</th>
-                  <th></th>
-                  <th>medium</th>
-                  <th>medium</th>
-                  <th>medium</th>
-                  <th></th>
-                  <th>small</th>
-                  <th>small</th>
-                  <th>small</th>
-              </tr>
-              <tr>
-                  <th>icon</th>
-                  <td>
-                      <fw-avatar size="large" variant="circular"></fw-avatar>
-                  </td>
-                  <td>
-                      <fw-avatar size="large" variant="square"></fw-avatar>
-                  </td>
-                  <td>
-                      <fw-avatar size="large" variant="rounded"></fw-avatar>
-                  </td>
-                  <td></td>
-                  <td>
-                      <fw-avatar size="medium" variant="circular"></fw-avatar>
-                  </td>
-                  <td>
-                      <fw-avatar size="medium" variant="square"></fw-avatar>
-                  </td>
-                  <td>
-                      <fw-avatar size="medium" variant="rounded"></fw-avatar>
-                  </td>
-                  <td></td>
-                  <td>
-                      <fw-avatar size="small" variant="circular"></fw-avatar>
-                  </td>
-                  <td>
-                      <fw-avatar size="small" variant="square"></fw-avatar>
-                  </td>
-                  <td>
-                      <fw-avatar size="small" variant="rounded"></fw-avatar>
-                  </td>
-              </tr>
-              <tr>
-                  <th>initial</th>
-                  <td>
-                      <fw-avatar size="large" variant="circular" content="initial" initial="JD"></fw-avatar>
-                  </td>
-                  <td>
-                      <fw-avatar size="large" variant="square" content="initial" initial="JD"></fw-avatar>
-                  </td>
-                  <td>
-                      <fw-avatar size="large" variant="rounded" content="initial" initial="JD"></fw-avatar>
-                  </td>
-                  <td></td>
-                  <td>
-                      <fw-avatar size="medium" variant="circular" content="initial" initial="JD"></fw-avatar>
-                  </td>
-                  <td>
-                      <fw-avatar size="medium" variant="square" content="initial" initial="JD"></fw-avatar>
-                  </td>
-                  <td>
-                      <fw-avatar size="medium" variant="rounded" content="initial" initial="JD"></fw-avatar>
-                  </td>
-                  <td></td>
-                  <td>
-                      <fw-avatar size="small" variant="circular" content="initial" initial="JD"></fw-avatar>
-                  </td>
-                  <td>
-                      <fw-avatar size="small" variant="square" content="initial" initial="JD"></fw-avatar>
-                  </td>
-                  <td>
-                      <fw-avatar size="small" variant="rounded" content="initial" initial="JD"></fw-avatar>
-                  </td>
-              </tr>
-              <tr>
-                  <th>image</th>
-                  <td>
-                      <fw-avatar size="large" variant="circular" content="image" imageUrl="https://raw.githubusercontent.com/Ashwinvalento/cartoon-avatar/master/lib/images/male/45.png"></fw-avatar>
-                  </td>
-                  <td>
-                      <fw-avatar size="large" variant="square" content="image" imageUrl="https://raw.githubusercontent.com/Ashwinvalento/cartoon-avatar/master/lib/images/male/45.png"></fw-avatar>
-                  </td>
-                  <td>
-                      <fw-avatar size="large" variant="rounded" content="image" imageUrl="https://raw.githubusercontent.com/Ashwinvalento/cartoon-avatar/master/lib/images/male/45.png"></fw-avatar>
-                  </td>
-                  <td></td>
-                  <td>
-                      <fw-avatar size="medium" variant="circular" content="image" imageUrl="https://raw.githubusercontent.com/Ashwinvalento/cartoon-avatar/master/lib/images/male/45.png"></fw-avatar>
-                  </td>
-                  <td>
-                      <fw-avatar size="medium" variant="square" content="image" imageUrl="https://raw.githubusercontent.com/Ashwinvalento/cartoon-avatar/master/lib/images/male/45.png"></fw-avatar>
-                  </td>
-                  <td>
-                      <fw-avatar size="medium" variant="rounded" content="image" imageUrl="https://raw.githubusercontent.com/Ashwinvalento/cartoon-avatar/master/lib/images/male/45.png"></fw-avatar>
-                  </td>
-                  <td></td>
-                  <td>
-                      <fw-avatar size="small" variant="circular" content="image" imageUrl="https://raw.githubusercontent.com/Ashwinvalento/cartoon-avatar/master/lib/images/male/45.png"></fw-avatar>
-                  </td>
-                  <td>
-                      <fw-avatar size="small" variant="square" content="image" imageUrl="https://raw.githubusercontent.com/Ashwinvalento/cartoon-avatar/master/lib/images/male/45.png"></fw-avatar>
-                  </td>
-                  <td>
-                      <fw-avatar size="small" variant="rounded" content="image" imageUrl="https://raw.githubusercontent.com/Ashwinvalento/cartoon-avatar/master/lib/images/male/45.png"></fw-avatar>
-                  </td>
-              </tr>
-          </table>
-      </div>
-
-    `,
-  }),
-};

package/src/components/badge/badge.component.html

@@ -1,4 +0,0 @@
-<ng-content></ng-content>
-<div class="badge-content vision-p4" *ngIf="showBadge()">
-  {{ value }}
-</div>

package/src/components/badge/badge.component.scss

@@ -1,98 +0,0 @@
-@use "../../scss/config/shadows";
-
-:host {
-  position: relative;
-  display: inline-flex;
-  width: fit-content;
-
-  .badge-content {
-    z-index: 99;
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: 500;
-    color: var(--typography-contrast);
-    overflow: hidden;
-    box-sizing: border-box;
-  }
-
-  &.dot {
-    .badge-content {
-      width: 8px;
-      height: 8px;
-      border-radius: 8px;
-      content-visibility: hidden;
-      right: -3px;
-      top: -3px;
-    }
-  }
-
-  &.standard {
-    .badge-content {
-      padding: 6px;
-      min-width: 22px;
-      height: 22px;
-      border-radius: 64px;
-      right: -11px;
-      top: -11px;
-      @extend .vision-shadow-small !optional;
-    }
-  }
-
-  &.static {
-    align-items: center;
-
-    .badge-content {
-      padding: 6px;
-      min-width: 22px;
-      height: 22px;
-      border-radius: 64px;
-      position: relative;
-      @extend .vision-shadow-small !optional;
-    }
-  }
-
-  &.default {
-    .badge-content {
-      background: var(--slate-light);
-      color: var(--typography-base);
-    }
-  }
-
-  &.primary {
-    .badge-content {
-      background: var(--primary-base);
-    }
-  }
-
-  &.secondary {
-    .badge-content {
-      background: var(--secondary-base);
-    }
-  }
-
-  &.error {
-    .badge-content {
-      background: var(--red-base);
-    }
-  }
-
-  &.warning {
-    .badge-content {
-      background: var(--orange-base);
-    }
-  }
-
-  &.success {
-    .badge-content {
-      background: var(--green-base);
-    }
-  }
-
-  &.slate {
-    .badge-content {
-      background: var(--slate-base);
-    }
-  }
-}

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

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

package/src/components/badge/badge.component.ts

@@ -1,30 +0,0 @@
-import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
-
-@Component({
-  selector: 'fw-badge',
-  templateUrl: './badge.component.html',
-  styleUrls: ['./badge.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class FwBadgeComponent {
-  @Input() color?: 'default' | 'primary' | 'secondary' | 'error' | 'warning' | 'success' = 'default';
-  @Input() variant?: 'standard' | 'dot' | 'static' = 'standard';
-  @Input() value?: string = '';
-  @Input() hideZero?: boolean = false;
-  @Input() hideEmpty?: boolean = false;
-
-  @HostBinding('class') get cssClass(): string {
-    return ['fw-badge', this.color, this.variant].join(' ');
-  }
-
-  showBadge(): boolean {
-    let show = true;
-    if (this.hideEmpty) {
-      show = !(this.value.length === 0);
-    }
-    if (this.hideZero) {
-      show = !(this.value && this.value === '0' || (this.hideEmpty && this.value.length === 0));
-    }
-    return show;
-  }
-}

package/src/components/badge/badge.mdx

@@ -1,33 +0,0 @@
-{/* DocumentationTemplate.mdx */}
-
-import {Controls, Meta, Primary, Stories, Title} from '@storybook/blocks';
-import * as BadgeStories from './badge.stories.ts';
-
-<Meta of={BadgeStories}/>
-
-<Title/>
-```ts
-import { FwBadgeModule } from '@flywheel-io/vision';
-```
-
-`<fw-badge>` displays a badge over the wrapped component
-
-- You are strongly encouraged to use the value for representing numbers only. [Chip](/docs/vision-chip--docs) is most likely a better match for text "badging".
-- **Style Tip:** Try to limit width by using "Fuzzy Numbers" on values after 2 or 3 digits: `99+`, `1.2K`
-
-## Basic Usage
-
-First import the badge module into your `app.module.ts`
-
-```html title="your.component.html"
-<!-- your.component.html -->
-<fw-badge value="1">
-  <fw-icon-button size="medium" icon="bell-notification"></fw-icon-button>
-</fw-badge>
-```
-
-## Playground
-<Primary/>
-<Controls/>
-
-<Stories/>

package/src/components/badge/badge.module.ts

@@ -1,18 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-import { FwBadgeComponent } from './badge.component';
-
-@NgModule({
-  imports: [
-    CommonModule,
-  ],
-  exports: [
-    FwBadgeComponent,
-  ],
-  declarations: [
-    FwBadgeComponent,
-  ],
-})
-export class FwBadgeModule {
-}