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

package/src/components/alert/alert.stories.ts

@@ -0,0 +1,144 @@
+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 { FwAlertComponent } from './alert.component';
+import { FwAlertModule } from './alert.module';
+
+export default {
+  title: 'Components/Alert',
+  component: FwAlertComponent,
+  parameters: {
+    controls: {},
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=4929-85995&mode=design&t=8SWNqIEGl4lPdsEq-11',
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        FwAlertModule,
+        FwButtonModule,
+        FwIconModule,
+      ],
+    }),
+  ],
+
+} as Meta;
+
+type Story = StoryObj<FwAlertComponent>;
+
+export const StandardInfo: Story = {
+  args: {
+    variant: 'standard',
+    icon: 'information-circle',
+    severity: 'info',
+    title: 'Standard Info Alert',
+    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+  },
+};
+
+export const TitleAndIconOnly: Story = {
+  args: {
+    variant: 'outlined',
+    icon: 'done-check-tracked',
+    severity: 'success',
+    title: 'Success!',
+  },
+};
+
+export const NoIconContentOnly: Story = {
+  render: (args) => ({
+    props: args,
+    controls: { disabled: false },
+    template: `
+      <fw-alert variant="filled" severity="warning">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </fw-alert>`,
+  }),
+};
+
+export const WithButtonAndLink: Story = {
+  args: {
+    showClose: false,
+  },
+  render: (args) => ({
+    props: args,
+    controls: { disabled: false },
+    template: `
+      <fw-alert severity="info" icon="information-circle" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor." [showClose]="showClose">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <a href="https://flywheel.io" target="_blank">exercitation ullamco</a> laboris nisi ut aliquip ex ea commodo consequat.
+        <fw-button>Link Account</fw-button>
+      </fw-alert>`,
+  }),
+};
+
+export const Overview: Story = {
+  render: (args) => ({
+    props: args,
+    controls: { disabled: true },
+    template: `
+      <div>
+          <style> tr, td { padding: 12px; font-family: Inter } </style>
+          <table>
+              <tr>
+                  <th></th>
+                  <th>info</th>
+                  <th>success</th>
+                  <th>warning</th>
+                  <th>error</th>
+              </tr>
+              <tr>
+                  <th>standard</th>
+                  <td>
+                      <fw-alert variant="standard" severity="info" title="Alert Title" icon="information-circle" [showClose]="true">Description</fw-alert>
+                  </td>
+                  <td>
+                      <fw-alert variant="standard" severity="success" title="Alert Title" icon="done-check-tracked" [showClose]="true">Description</fw-alert>
+                  </td>
+                  <td>
+                      <fw-alert variant="standard" severity="warning" title="Alert Title" icon="warning" [showClose]="true">Description</fw-alert>
+                  </td>
+                  <td>
+                      <fw-alert variant="standard" severity="error" title="Alert Title" icon="warning-circle" [showClose]="true">Description</fw-alert>
+                  </td>
+              </tr>
+              <tr>
+                  <th>outlined</th>
+                  <td>
+                      <fw-alert variant="outlined" severity="info" title="Alert Title" icon="information-circle" [showClose]="true">Description</fw-alert>
+                  </td>
+                  <td>
+                      <fw-alert variant="outlined" severity="success" title="Alert Title" icon="done-check-tracked" [showClose]="true">Description</fw-alert>
+                  </td>
+                  <td>
+                      <fw-alert variant="outlined" severity="warning" title="Alert Title" icon="warning" [showClose]="true">Description</fw-alert>
+                  </td>
+                  <td>
+                      <fw-alert variant="outlined" severity="error" title="Alert Title" icon="warning-circle" [showClose]="true">Description</fw-alert>
+                  </td>
+              </tr>
+              <tr>
+                  <th>filled</th>
+                  <td>
+                      <fw-alert variant="filled" severity="info" title="Alert Title" icon="information-circle" [showClose]="true">Description</fw-alert>
+                  </td>
+                  <td>
+                      <fw-alert variant="filled" severity="success" title="Alert Title" icon="done-check-tracked" [showClose]="true">Description</fw-alert>
+                  </td>
+                  <td>
+                      <fw-alert variant="filled" severity="warning" title="Alert Title" icon="warning" [showClose]="true">Description</fw-alert>
+                  </td>
+                  <td>
+                      <fw-alert variant="filled" severity="error" title="Alert Title" icon="warning-circle" [showClose]="true">Description</fw-alert>
+                  </td>
+              </tr>
+          </table>
+      </div>
+
+    `,
+  }),
+};

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

@@ -0,0 +1,10 @@
+<div class="icon-highlight"></div>
+<div class="icon-wrapper">
+  <div class="app-badge" *ngIf="badge"><span>{{ badge }}</span></div>
+  <div class="app-locked" *ngIf="locked">
+    <fw-icon>lock</fw-icon>
+  </div>
+  <img *ngIf="imageUrl" [src]="imageUrl" alt="App Icon">
+  <fw-icon *ngIf="icon" [ngClass]="fontColor">{{ icon }}</fw-icon>
+</div>
+<p class="vision-p3" *ngIf="title">{{ title }}</p>

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

@@ -0,0 +1,348 @@
+@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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,20 @@
+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 {
+}