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

package/src/components/app-icon/app-icon.component.scss

@@ -1,348 +0,0 @@
-@use "../../scss/config/shadows";
-
-:host {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  position: relative;
-  outline: none;
-
-  .icon-highlight {
-    box-sizing: content-box;
-    display: inline-flex;
-    border: 4px solid transparent;
-    padding: 2px;
-    position: absolute;
-    top: 0;
-  }
-
-  .icon-wrapper {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    user-select: none;
-    position: relative;
-    box-sizing: border-box;
-    margin: 6px;
-  }
-
-  p {
-    margin: 0;
-    line-height: 16.8px;
-    user-select: none;
-    display: inline-block;
-    color: var(--typography-muted);
-    text-align: center;
-  }
-
-  .app-badge {
-    min-width: 18px;
-    height: 18px;
-    border-radius: 64px;
-    background: var(--red-base);
-    font-family: Inter, sans-serif;
-    font-size: 10px;
-    font-weight: 500;
-    line-height: 180%;
-    letter-spacing: 0;
-    text-align: center;
-    color: var(--typography-contrast);
-    display: inline-flex;
-    align-items: flex-start;
-    justify-content: center;
-    position: absolute;
-    top: -8px;
-    right: -8px;
-    padding: 0 6px;
-    box-sizing: border-box;
-    overflow: hidden;
-    white-space: nowrap;
-    @extend .vision-shadow-small !optional;
-  }
-
-  .app-locked {
-    width: 21px;
-    height: 21px;
-    border-radius: 64px;
-    background: var(--slate-base);
-    font-size: 15px;
-    color: var(--typography-contrast);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: -6px;
-    right: -6px;
-    overflow: hidden;
-    white-space: nowrap;
-    @extend .vision-shadow-medium !optional;
-  }
-
-  &.primary {
-    .icon-wrapper {
-      background-color: var(--primary-base);
-
-      > fw-icon {
-        color: var(--typography-contrast);
-
-        &.base {
-          color: var(--typography-base);
-        }
-
-        &.transparent {
-          color: transparent;
-        }
-      }
-    }
-  }
-
-  &.dark {
-    .icon-wrapper {
-      background-color: var(--primary-dark);
-
-      > fw-icon {
-        color: var(--typography-contrast);
-
-        &.base {
-          color: var(--typography-base);
-        }
-      }
-    }
-  }
-
-  &.gradient {
-    .icon-wrapper {
-      background: linear-gradient(23.3deg, #093af6 -22.41%, #1b68fa 41.03%, #b080fc 94.31%);
-
-      > fw-icon {
-        color: var(--typography-contrast);
-
-        &.base {
-          color: var(--typography-base);
-        }
-      }
-    }
-  }
-
-  &.light {
-    .icon-wrapper {
-      background-color: var(--page-light);
-      outline: 1px solid var(--separations-base);
-
-      > fw-icon {
-        background: linear-gradient(23.3deg, #093af6 -22.41%, #1b68fa 41.03%, #b080fc 94.31%);
-        background-clip: text;
-        /* stylelint-disable */
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        /* stylelint-enable */
-      }
-    }
-  }
-
-  &.transparent {
-    .icon-wrapper {
-      background-color: transparent;
-      outline: 1px solid transparent;
-    }
-  }
-
-  &.small {
-    .icon-highlight {
-      border-radius: 12px;
-      width: 24px;
-      height: 24px;
-    }
-
-    .icon-wrapper {
-      display: inline-flex;
-      width: 24px;
-      height: 24px;
-      border-radius: 6px;
-      align-items: center;
-      justify-content: center;
-
-      > fw-icon {
-        font-size: 16px;
-        width: 16px;
-        min-width: 16px;
-      }
-
-      img {
-        height: 24px;
-        width: 24px;
-      }
-    }
-
-    .app-badge {
-      min-width: 8px;
-      padding: 0;
-      width: 8px;
-      height: 8px;
-      border-radius: 8px;
-      text-indent: -9999px;
-      top: -3px;
-      right: -3px;
-    }
-  }
-
-  &.medium {
-    .icon-highlight {
-      border-radius: 14px;
-      width: 32px;
-      height: 32px;
-    }
-
-    .icon-wrapper {
-      display: inline-flex;
-      width: 32px;
-      height: 32px;
-      border-radius: 8px;
-      align-items: center;
-      justify-content: center;
-
-      > fw-icon {
-        font-size: 20px;
-        width: 20px;
-        min-width: 20px;
-      }
-
-      img {
-        height: 32px;
-        width: 32px;
-      }
-    }
-
-    .app-badge {
-      min-width: 8px;
-      padding: 0;
-      width: 8px;
-      height: 8px;
-      border-radius: 8px;
-      text-indent: -9999px;
-      top: -3px;
-      right: -3px;
-    }
-
-  }
-
-  &.large {
-    .icon-highlight {
-      border-radius: 18px;
-      width: 48px;
-      height: 48px;
-    }
-
-    .icon-wrapper {
-      display: inline-flex;
-      width: 48px;
-      height: 48px;
-      border-radius: 12px;
-      align-items: center;
-      justify-content: center;
-
-      > fw-icon {
-        font-size: 32px;
-        width: 32px;
-        min-width: 32px;
-      }
-
-      img {
-        height: 48px;
-        width: 48px;
-      }
-    }
-
-  }
-
-  &.extra-large {
-    .icon-highlight {
-      border-radius: 22px;
-      width: 64px;
-      height: 64px;
-    }
-
-    .icon-wrapper {
-      display: inline-flex;
-      width: 64px;
-      height: 64px;
-      border-radius: 16px;
-      align-items: center;
-      justify-content: center;
-
-      > fw-icon {
-        font-size: 48px;
-        width: 48px;
-        min-width: 48px;
-      }
-
-      img {
-        height: 64px;
-        width: 64px;
-      }
-    }
-
-    p {
-      max-width: 64px;
-    }
-  }
-
-  &.interactive {
-    .icon-highlight {
-      border: 4px solid transparent;
-    }
-  }
-
-  &.hover, &:hover {
-    .icon-highlight {
-      border: 4px solid var(--primary-border);
-    }
-  }
-
-  &.animated.hover, &.animated:hover {
-    @keyframes rubber-band {
-      0% {
-        transform: scale(.95, .95);
-      }
-
-      20% {
-        transform: scale(1.05, 1.05)
-      }
-
-      32% {
-        transform: scale(0.95, 0.95);
-      }
-
-      48% {
-        transform: scale(1, 1);
-      }
-    }
-
-    .icon-highlight {
-      animation: rubber-band 500ms linear forwards;
-      border: 4px solid var(--primary-border);
-    }
-  }
-
-  &.focused, &:focus, &.animated:focus {
-    .icon-highlight {
-      border: 4px solid var(--primary-base);
-    }
-
-    p {
-      color: var(--typography-base);
-    }
-  }
-
-  &.static, &.static:hover, &.static.animated:hover {
-    .icon-highlight {
-      border: 4px solid transparent;
-    }
-  }
-
-  &.locked {
-    pointer-events: none;
-  }
-}

package/src/components/app-icon/app-icon.component.spec.ts

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

package/src/components/app-icon/app-icon.component.ts

@@ -1,27 +0,0 @@
-import { Component, HostBinding, Input } from '@angular/core';
-
-import { IconType } from '../icon/icon.types';
-
-@Component({
-  selector: 'fw-app-icon',
-  templateUrl: './app-icon.component.html',
-  styleUrls: ['./app-icon.component.scss'],
-})
-export class FwAppIconComponent {
-  @Input() title?: string;
-  @Input() icon?: IconType;
-  @Input() imageUrl?: string;
-  @Input() color?: 'primary' | 'dark' | 'light' | 'gradient' | 'transparent' = 'primary';
-  @Input() fontColor?: 'contrast' | 'base' = 'contrast';
-  @Input() size?: 'small' | 'medium' | 'large' | 'extra-large' = 'medium';
-  @Input() variant?: 'interactive' | 'hover' | 'focused' | 'static' = 'interactive';
-  @Input() badge?: string;
-  @HostBinding('tabindex') @Input() tabindex = '';
-  @HostBinding('class.locked') @Input() locked?: boolean = false;
-  @HostBinding('class.animated') @Input() animated?: boolean = false;
-  @HostBinding('role') role = 'button';
-
-  @HostBinding('class') get cssClass(): string {
-    return ['fw-app-icon', this.size, this.color, this.variant].join(' ');
-  }
-}

package/src/components/app-icon/app-icon.mdx

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

package/src/components/app-icon/app-icon.module.ts

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

package/src/components/app-icon/app-icon.stories.ts

@@ -1,200 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-
-import { FwAppIconComponent } from './app-icon.component';
-import { FwAppIconModule } from './app-icon.module';
-
-export default {
-  title: 'Components/App Icon',
-  component: FwAppIconComponent,
-  parameters: {
-    controls: {},
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=7608-102158&mode=design&t=kKJ9B1V6klFufk0T-11',
-    },
-  },
-  decorators: [
-    moduleMetadata({
-      imports: [
-        CommonModule,
-        FwAppIconModule,
-      ],
-    }),
-  ],
-
-} as Meta;
-
-type Story = StoryObj<FwAppIconComponent>;
-
-export const AppIcon: Story = {
-  args: {
-    variant: 'interactive',
-    icon: 'flywheel-mark-logo',
-    color: 'primary',
-    fontColor: 'contrast',
-    size: 'medium',
-    title: 'App',
-    badge: '1',
-    locked: false,
-    animated: false,
-  },
-};
-
-export const AppIconsInPanel: Story = {
-  args: {},
-  render: (args) => ({
-    props: args,
-    controls: { disabled: true },
-    template: `
-      <div style="width:fit-content; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px">
-        <fw-app-icon imageUrl="./images/core.svg" size="medium" variant="focused" color="transparent" title="Core" [animated]="true"></fw-app-icon>
-        <fw-app-icon imageUrl="./images/exchange.svg" size="medium" color="transparent" title="Exchange" badge="1" [animated]="true"></fw-app-icon>
-        <fw-app-icon imageUrl="./images/discovery.svg" size="medium" color="transparent" title="Discovery" variant="static" [locked]="true"></fw-app-icon>
-        <fw-app-icon icon="folder-group" size="medium" title="My Data" [animated]="true"></fw-app-icon>
-        <fw-app-icon icon="setting-gear" size="medium" title="Admin" [animated]="true"></fw-app-icon>
-        <fw-app-icon icon="add-new-create" size="medium" title="Add Apps" [animated]="true"></fw-app-icon>
-      </div>
-      `,
-  }),
-};
-
-export const Variations: Story = {
-  args: {},
-  render: (args) => ({
-    props: args,
-    controls: { disabled: true },
-    template: `
-      <div>
-          <style> tr, td { padding: 12px; font-family: Inter } </style>
-          <table>
-              <tr>
-                  <th></th>
-                  <th>small</th>
-                  <th>medium</th>
-                  <th>large</th>
-                  <th>extra-large</th>
-                  <th></th>
-                  <th>small</th>
-                  <th>medium</th>
-                  <th>large</th>
-                  <th>extra-large</th>
-              </tr>
-              <tr>
-                  <th>interactive</th>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" size="small" variant="interactive" title="App" badge="1"></fw-app-icon>
-                  </td>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" size="medium" variant="interactive" title="App" badge="1"></fw-app-icon>
-                  </td>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" size="large" variant="interactive" title="App" badge="1"></fw-app-icon>
-                  </td>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" size="extra-large" variant="interactive" title="App" badge="1"></fw-app-icon>
-                  </td>
-                  <th></th>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" color="light" size="small" variant="interactive" title="App" badge="1"></fw-app-icon>
-                  </td>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" color="light" size="medium" variant="interactive" title="App" badge="1"></fw-app-icon>
-                  </td>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" color="light" size="large" variant="interactive" title="App" badge="1"></fw-app-icon>
-                  </td>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" color="light" size="extra-large" variant="interactive" title="App" badge="1"></fw-app-icon>
-                  </td>
-              </tr>
-              <tr>
-                  <th>hover</th>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" size="small" variant="hover" title="App" badge="1"></fw-app-icon>
-                  </td>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" size="medium" variant="hover" title="App" badge="1"></fw-app-icon>
-                  </td>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" size="large" variant="hover" title="App" badge="1"></fw-app-icon>
-                  </td>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" size="extra-large" variant="hover" title="App" badge="1"></fw-app-icon>
-                  </td>
-                  <th></th>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" color="light" size="small" variant="hover" title="App" badge="1"></fw-app-icon>
-                  </td>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" color="light" size="medium" variant="hover" title="App" badge="1"></fw-app-icon>
-                  </td>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" color="light" size="large" variant="hover" title="App" badge="1"></fw-app-icon>
-                  </td>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" color="light" size="extra-large" variant="hover" title="App" badge="1"></fw-app-icon>
-                  </td>
-              </tr>
-              <tr>
-                  <th>focused</th>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" size="small" variant="focused" title="App" badge="1"></fw-app-icon>
-                  </td>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" size="medium" variant="focused" title="App" badge="1"></fw-app-icon>
-                  </td>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" size="large" variant="focused" title="App" badge="1"></fw-app-icon>
-                  </td>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" size="extra-large" variant="focused" title="App" badge="1"></fw-app-icon>
-                  </td>
-                  <th></th>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" color="light" size="small" variant="focused" title="App" badge="1"></fw-app-icon>
-                  </td>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" color="light" size="medium" variant="focused" title="App" badge="1"></fw-app-icon>
-                  </td>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" color="light" size="large" variant="focused" title="App" badge="1"></fw-app-icon>
-                  </td>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" color="light" size="extra-large" variant="focused" title="App" badge="1"></fw-app-icon>
-                  </td>
-              </tr>
-               <tr>
-                  <th>static</th>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" size="small" variant="static" title="App" badge="1"></fw-app-icon>
-                  </td>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" size="medium" variant="static" title="App" badge="1"></fw-app-icon>
-                  </td>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" size="large" variant="static" title="App" badge="1"></fw-app-icon>
-                  </td>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" size="extra-large" variant="static" title="App" badge="1"></fw-app-icon>
-                  </td>
-                  <th></th>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" color="light" size="small" variant="static" title="App" badge="1"></fw-app-icon>
-                  </td>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" color="light" size="medium" variant="static" title="App" badge="1"></fw-app-icon>
-                  </td>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" color="light" size="large" variant="static" title="App" badge="1"></fw-app-icon>
-                  </td>
-                  <td>
-                      <fw-app-icon icon="flywheel-mark-logo" color="light" size="extra-large" variant="static" title="App" badge="1"></fw-app-icon>
-                  </td>
-              </tr>
-          </table>
-      </div>
-
-    `,
-  }),
-};

package/src/components/avatar/avatar.component.html

@@ -1,22 +0,0 @@
-<ng-container [ngSwitch]="content">
-  <div [style.backgroundColor]="colorToDisplay()" *ngSwitchCase="'image'" class="avatar">
-    <img
-      *ngIf="!isImageBroken else displayInitial"
-      [src]="imageUrl"
-      [alt]="imageAltText"
-      (load)="loadImage()"
-      (error)="errorImage()">
-  </div>
-  <div *ngSwitchCase="'icon'" [style.backgroundColor]="colorToDisplay()" class="avatar">
-    <ng-container *ngTemplateOutlet="displayIcon"></ng-container>
-  </div>
-  <div *ngSwitchCase="'initial'" [style.backgroundColor]="colorToDisplay()" class="avatar">
-    <ng-container *ngTemplateOutlet="displayInitial"></ng-container>
-  </div>
-</ng-container>
-<ng-template #displayInitial>
-  <span class="initial" *ngIf="initial else displayIcon">{{ initial }}</span>
-</ng-template>
-<ng-template #displayIcon>
-  <fw-icon>{{ icon }}</fw-icon>
-</ng-template>