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

package/src/assets/brand/fw-logo-mark-dark-bg.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="25" viewBox="0 0 18 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.50597 6.52794L16.6298 0.0581995C17.043 -0.107607 17.5124 0.092962 17.6782 0.506184C17.7165 0.601642 17.7362 0.703548 17.7362 0.806404V5.74098C17.7362 6.07032 17.5359 6.36654 17.2302 6.48919L1.10641 12.9589C0.693188 13.1247 0.223792 12.9242 0.0579853 12.5109C0.0196824 12.4155 0 12.3136 0 12.2107V7.27614C0 6.9468 0.20032 6.65058 0.50597 6.52794Z" fill="#6DA2FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.508543 14.98L14.375 9.47129C14.7888 9.3069 15.2575 9.50908 15.4219 9.92287C15.4595 10.0176 15.4788 10.1186 15.4788 10.2205V15.1561C15.4788 15.4871 15.2765 15.7845 14.9685 15.906L6.79101 19.1325C6.48307 19.254 6.28071 19.5514 6.28071 19.8824V24.1938C6.28071 24.6391 5.91976 25 5.47452 25C5.36618 25 5.25895 24.9782 5.15924 24.9358L0.49091 22.9522C0.193261 22.8257 0 22.5336 0 22.2102V15.7293C0 15.3989 0.201534 15.102 0.508543 14.98Z" fill="#2E72F6"/>
+</svg>

package/src/assets/updating-icons.md

@@ -0,0 +1,71 @@
+# So you want to update the icons?
+
+*this file will be a script soon hopefully*
+
+## Step 1: Get the generated files from icomoon
+
+You should get a couple folders with updated icons from the designer you're working with.
+
+Namely `Flywheel-Vision-Icons-vX.X` and `Flywheel-Vision-Icons-vX.X-SVG-PNG`
+
+Their folder structure are as such:
+
+```
+Flywheel-Vision-Icons-vX.X
+├── Read Me.txt
+├── demo-files
+│   ├── demo.css
+│   └── demo.js
+├── demo.html
+├── fonts
+│   ├── Flywheel-Vision-Icons.svg
+│   ├── Flywheel-Vision-Icons.ttf
+│   └── Flywheel-Vision-Icons.woff
+├── liga.js
+├── selection.json
+└── style.css
+```
+
+```
+Flywheel-Vision-Icons-vX.X-SVG-PNG
+├── PNG
+|   └── *.png
+├── Read Me.txt
+├── SVG
+|   └── *.svg
+├── demo-external-svg.html
+├── demo-files
+│   └── demo.css
+├── demo.html
+├── selection.json
+├── style.css
+├── svgxuse.js
+└── symbol-defs.svg
+```
+
+## Step 2: Moving Stuff Over
+
+- Move everything in `Flywheel-Vision-Icons-vX.X/fonts` into `src/assets/fonts`
+- Move `Flywheel-Vision-Icons-vX.X/selection.json` to `src/components/icon/selection.json`
+- Move all the SVGs in `Flywheel-Vision-Icons-vX.X-SVG-PNG/SVG/*` to `src/assets/svg`
+
+## Step 3: Updating Files
+
+> This can be handled by `update-icons.js` in the root of this repo
+
+- Update the `allIcons` array in `src/components/icon/icons.stories.ts` with any new icon names.
+- Copy all of the icon classes from `Flywheel-Vision-Icons-vX.X/styles.css` to `src/scss/icons/_icon-glyphs.scss`
+
+On that last step you specifically want the bits that look like this
+
+```
+  .icon-name:before {
+    content: "\glyph-code";
+  }
+```
+
+You can ignore the rest as it's already setup specifically for this project.
+
+## Step 4: QA
+
+Double check that all the icons appear in storybook and you should be done! 🎉

package/src/components/alert/alert.component.html

@@ -0,0 +1,19 @@
+<div [ngClass]="['fw-alert', variant, severity]">
+  <fw-icon *ngIf="icon" class="fw-alert-icon">{{ icon }}</fw-icon>
+  <div class="fw-alert-text">
+    <h4 *ngIf="title" class="vision-h4">{{ title }}</h4>
+    <p *ngIf="description" class="vision-p2">{{ description }}</p>
+    <p class="vision-p2">
+      <ng-content></ng-content>
+    </p>
+  </div>
+  <div class="close-icon">
+    <ng-content select="fw-button"></ng-content>
+    <fw-icon-button
+      *ngIf="showClose"
+      icon="close" size="small"
+      [color]="variant==='filled'?'overlay':severity"
+      (click)="close?close.emit():undefined">
+    </fw-icon-button>
+  </div>
+</div>

package/src/components/alert/alert.component.scss

@@ -0,0 +1,150 @@
+.fw-alert {
+  border-radius: 8px;
+  padding: 6px 16px;
+  display: flex;
+  box-sizing: border-box;
+  min-height: 48px;
+
+  .fw-alert-icon {
+    padding: 7px 12px 7px 0;
+    align-items: flex-start;
+    font-size: 22px;
+  }
+
+  .fw-alert-text {
+    padding: 6px 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-items: center;
+  }
+
+  h4 {
+    margin: 3px 0;
+    color: var(--typography-contrast);
+  }
+
+  p {
+    margin: 3px 0 0;
+    color: inherit;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16.8px;
+  }
+
+  .close-icon {
+    display: flex;
+    align-items: flex-start;
+    margin-left: 16px;
+    gap: 16px;
+    margin-top: 4px;
+    height: 30px;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &.standard {
+    &.info {
+      color: var(--primary-base);
+      background-color: var(--primary-hover);
+      border: 1px solid var(--primary-border);
+
+      h4 {
+        color: var(--primary-base);
+      }
+    }
+
+    &.warning {
+      color: var(--orange-base);
+      background-color: var(--orange-hover);
+      border: 1px solid var(--orange-border);
+
+      h4 {
+        color: var(--orange-base);
+      }
+    }
+
+    &.success {
+      color: var(--green-base);
+      background-color: var(--green-hover);
+      border: 1px solid var(--green-border);
+
+      h4 {
+        color: var(--green-base);
+      }
+    }
+
+    &.error {
+      color: var(--red-base);
+      background-color: var(--red-hover);
+      border: 1px solid var(--red-border);
+
+      h4 {
+        color: var(--red-base);
+      }
+    }
+  }
+
+  &.outlined {
+    &.info {
+      color: var(--primary-base);
+      border: 1px solid var(--primary-base);
+
+      h4 {
+        color: var(--primary-base);
+      }
+    }
+
+    &.warning {
+      color: var(--orange-base);
+      border: 1px solid var(--orange-base);
+
+      h4 {
+        color: var(--orange-base);
+      }
+    }
+
+    &.success {
+      color: var(--green-base);
+      border: 1px solid var(--green-base);
+
+      h4 {
+        color: var(--green-base);
+      }
+    }
+
+    &.error {
+      color: var(--red-base);
+      border: 1px solid var(--red-base);
+
+      h4 {
+        color: var(--red-base);
+      }
+    }
+  }
+
+  &.filled {
+    &.info {
+      color: var(--typography-contrast);
+      background-color: var(--primary-base);
+    }
+
+    &.warning {
+      color: var(--typography-contrast);
+      background-color: var(--orange-base);
+    }
+
+    &.success {
+      color: var(--typography-contrast);
+      background-color: var(--green-base);
+    }
+
+    &.error {
+      color: var(--typography-contrast);
+      background-color: var(--red-base);
+    }
+  }
+
+}

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

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

package/src/components/alert/alert.component.ts

@@ -0,0 +1,19 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+import { IconType } from '../icon/icon.types';
+
+@Component({
+  selector: 'fw-alert',
+  templateUrl: './alert.component.html',
+  styleUrls: ['./alert.component.scss'],
+})
+export class FwAlertComponent {
+  @Input() description?: string;
+  @Input() icon?: IconType;
+  @Input() severity?: 'info' | 'success' | 'warning' | 'error' = 'info';
+  @Input() title?: string;
+  @Input() variant?: 'standard' | 'outlined' | 'filled' = 'standard';
+  @Input() showClose?: boolean;
+  // eslint-disable-next-line @angular-eslint/no-output-native
+  @Output() close: EventEmitter<void> = new EventEmitter<void>();
+}

package/src/components/alert/alert.mdx

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

package/src/components/alert/alert.module.ts

@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { FwIconModule } from '../icon/icon.module';
+import { FwIconButtonModule } from '../icon-button/icon-button.module';
+import { FwAlertComponent } from './alert.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FwIconModule,
+        FwIconButtonModule,
+    ],
+    exports: [
+        FwAlertComponent,
+    ],
+    declarations: [
+        FwAlertComponent,
+    ],
+})
+export class FwAlertModule {
+}

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>