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

package/src/components/icon/icon.types.ts

@@ -0,0 +1,318 @@
+export type IconType = typeof allIcons[number];
+
+export const allIcons = <const>[
+  '3d-sphere-rotate-arrows',
+  'add-circle',
+  'add-new-create',
+  'add-row-above',
+  'add-row-below',
+  'add-server-databases-endpoint',
+  'add-server',
+  'add-user',
+  'ai',
+  'apple',
+  'apply-copy-duplicate',
+  'arrange-filter-sort',
+  'arrow-annotate',
+  'arrow-back-collapse',
+  'arrow-back',
+  'arrow-down',
+  'arrow-forward-collapse',
+  'arrow-forward',
+  'arrow-rotate-restore',
+  'arrow-rotate',
+  'arrow-up',
+  'arrow',
+  'barcode-serial',
+  'barcode-stack-scan',
+  'bell-notification',
+  'bezier-curve',
+  'blocks-code-test-checkmark',
+  'book-lab-flask',
+  'bookmark-plus-add',
+  'bookmark',
+  'brain',
+  'brightness-photo-edit',
+  'browser-internet-web-windows',
+  'brush-edit-create',
+  'bucket-paint',
+  'button-form-element',
+  'calendar-arrow-left-center',
+  'calendar-schedule',
+  'camera-photo-capture',
+  'cash-banknotes',
+  'chart-square',
+  'chart-trend-square',
+  'chat-messages-bubble',
+  'checklist-tasks-chechmark-square',
+  'checklist',
+  'chevron-back',
+  'chevron-down',
+  'chevron-forward',
+  'chevron-input-number',
+  'chevron-up',
+  'circle-ellipses',
+  'circle',
+  'clap-applause-hands',
+  'clip-attachment',
+  'clock-history',
+  'clock-hour-4',
+  'clock-loading',
+  'close-circled',
+  'close',
+  'closed-freehand-vector-poly',
+  'cloud-network-add',
+  'cloud-storage-checkmark',
+  'cloud-upload',
+  'code-block-embed',
+  'code-text',
+  'color-design-profile',
+  'color-ven-design-profile-central',
+  'column-edit',
+  'computer-chip',
+  'contrast-photo-edit',
+  'copy-item',
+  'creative-commons',
+  'crosshair',
+  'crown-style-circle',
+  'cursor-select',
+  'curve-object-secet-cursor',
+  'data-tree',
+  'delivery-shipment-packages',
+  'dna-hospital-medical',
+  'document-file-add-plus-bottom-left',
+  'document-file-blank',
+  'document-file-download',
+  'document-file-list-protocol',
+  'document-file-tar',
+  'document-file-upload-bottom-center',
+  'document-file-zip',
+  'document-status-done-checkmark',
+  'document-visible',
+  'documents-file',
+  'documents-files',
+  'done-check-tracked',
+  'done-check',
+  'download-status',
+  'download',
+  'drag-drop-indicator',
+  'draw-rectangle',
+  'earth-globe-fail',
+  'edit-boxed',
+  'edit-erase',
+  'edit',
+  'email-mail-checkmark-group',
+  'email',
+  'embed-circle',
+  'exchange',
+  'expand-pathfinder-dot-square-segmentation',
+  'facebook',
+  'file-blank-image-load-mask',
+  'file-download',
+  'file-text',
+  'files-library-content',
+  'files-library',
+  'files',
+  'filter-sort-add',
+  'filter-sort-check-mark',
+  'filter-sort-delete',
+  'filter',
+  'flag',
+  'flip-horizontal',
+  'flip-vertical',
+  'floppy-save',
+  'flywheel-mark-logo',
+  'flywheel-viewer-mark-logo',
+  'folder-add',
+  'folder-blank',
+  'folder-checked',
+  'folder-group',
+  'folder-open',
+  'folder-share',
+  'form-metadata-element',
+  'free-rights',
+  'freehand-vector-poly',
+  'full-screen-zoom',
+  'github-color-login',
+  'gitlab',
+  'graduate-hat',
+  'grid-dot-square',
+  'grid-layout',
+  'hammer-legal-square',
+  'hammer-screwdriver',
+  'hand-money-currency',
+  'header-form-element',
+  'home-modern-door',
+  'home-modern-option-lines',
+  'human-artificial-intelligence',
+  'icon-placeholder',
+  'image-photo-copy-left-down',
+  'image-picture-square',
+  'information-circle',
+  'invoice-checkmark-paid',
+  'invoice',
+  'italic',
+  'items-group-elements',
+  'key',
+  'keyboard',
+  'keychain',
+  'label-tag',
+  'laptop-health-medical-cross',
+  'layers',
+  'layout-grid',
+  'layout',
+  'line',
+  'link-unlink',
+  'link',
+  'linkedin',
+  'linux',
+  'list-paragraph-number',
+  'list-paragraph',
+  'list-test-lab-flask',
+  'livewire-tool',
+  'loading-status-checkmark',
+  'lock-unlock',
+  'lock',
+  'logout',
+  'lung',
+  'lungs',
+  'markdown',
+  'measure-angle',
+  'measure-ruler-calibration',
+  'media-library-imports-dowload',
+  'menu-burger-handle',
+  'menu-horizontal',
+  'menu-list-form-square',
+  'menu-vertical',
+  'message-chat-info',
+  'message-chat-question-support',
+  'message-checkmark-sent',
+  'message-question-checkmark',
+  'microphone-mic-rec-circle',
+  'microphone-mic-rec',
+  'microphone-mic-recording-circle',
+  'minus',
+  'modalities',
+  'molecule',
+  'money-coin',
+  'money-dollar',
+  'money',
+  'mouse-big',
+  'move',
+  'music-play-resume',
+  'music-stop',
+  'mute',
+  'network-storage-alert',
+  'notebook-add-plus',
+  'notebook-open',
+  'notebook-pen-edit',
+  'notebook',
+  'notes-pen',
+  'object-search-zoom-plus',
+  'open',
+  'paint-roller',
+  'pause',
+  'pen-edit-circle',
+  'pencil-edit-create',
+  'photo-edit-brightness-invert',
+  'pie-chart',
+  'pie-graph-chart-sample',
+  'plus-add-rectangle',
+  'polygon',
+  'private-mode-protection-circle',
+  'protection-target',
+  'protective-mask',
+  'question-circle',
+  'quote',
+  'radiology-scan-circle',
+  'radiology-scan',
+  'reader-studies',
+  'rotate-arrow-manual',
+  'rotate-item-left',
+  'rotate-item-right',
+  'rotate-refresh',
+  'rotate',
+  'ruler-bidirectional',
+  'ruler',
+  'scanner',
+  'search-loop',
+  'search-user-profile-person',
+  'search-zoom-minus',
+  'search-zoom-plus',
+  'search',
+  'section-form-element',
+  'send-message-share',
+  'server-checkmark',
+  'server-database-endpoint',
+  'server-databases-connect',
+  'server-databases-download',
+  'server-databases-key-protection',
+  'server-databases-minimal-download',
+  'server-databases-sync-import',
+  'server-databases-sync',
+  'server-upload',
+  'server',
+  'servers-database',
+  'setting-gear',
+  'settings-adjust',
+  'settings-gear-square',
+  'settings-gear',
+  'settings-select',
+  'shapes-objects',
+  'share',
+  'shield-protect',
+  'show-visible',
+  'smiley-emoji-face',
+  'speed-dashboard',
+  'square-fill',
+  'square-fill-outline',
+  'square-outline',
+  'star',
+  'stars-light-sparkle',
+  'stomach',
+  'substract-group',
+  'switch',
+  'target-space-object-select',
+  'target',
+  'tasklist-to-do-checkmark',
+  'technology-cube-3d',
+  'test-lab-flask',
+  'text-bold',
+  'text-cross',
+  'text-h1',
+  'text-h2',
+  'text-input-form',
+  'text-long',
+  'text-short-form-element',
+  'text-underline',
+  'thumbs-up-like',
+  'timer-clock-style',
+  'trash-delete',
+  'twitter',
+  'undone-uncheck-untracked',
+  'unlimited-repeat-subscription-circle',
+  'upload',
+  'user-checked',
+  'user-delete-cross',
+  'user-document',
+  'user-group',
+  'user-key',
+  'user-lock',
+  'user-profile-group-discovery',
+  'user-setting-gear',
+  'user',
+  'video-player-controls',
+  'visible-eye-hidden',
+  'volume-full',
+  'warning-circle',
+  'warning',
+  'window-finder-resize-arrow-down',
+  'window-finder-resize-arrow-up',
+  'window-resize-left',
+  'window-resize-right',
+  'window-zoom-plus-loupe',
+  'windows',
+  'workspace-mode',
+  'youtube',
+  'zendesk-logo',
+];

package/src/components/icon/icons.stories.scss

@@ -0,0 +1,63 @@
+span {
+  font-family: Inter, sans-serif;
+}
+
+code, pre {
+  font-family: monospace;
+  color: #a22424;
+}
+
+pre {
+  padding: 10px;
+  background-color: #eeeeee;
+  border: 1px solid #dddddd;
+}
+
+.icons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 25px;
+  padding: 35px 0;
+  align-items: flex-start;
+
+  > span {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 5px;
+    width: 100px;
+    height: 100px;
+    font-size: 12px;
+    position: relative;
+
+    &:hover {
+      background-color: var(--primary-hover);
+      border-radius: 8px;
+      cursor: pointer;
+    }
+
+    .empty {
+      display: none;
+    }
+
+    .copied {
+      position: absolute;
+      background-color: var(--green-base);
+      color: var(--typography-contrast);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: bold;
+      inset: 0;
+      border-radius: 8px;
+    }
+
+    > fw-icon {
+      padding-top: 12px;
+    }
+
+    > span, > fw-icon {
+      text-align: center;
+    }
+  }
+}

package/src/components/icon/icons.stories.ts

@@ -0,0 +1,95 @@
+import { Clipboard } from '@angular/cdk/clipboard';
+import { CommonModule } from '@angular/common';
+import { Component, importProvidersFrom, Input } from '@angular/core';
+import { FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
+import { Observable } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
+
+import { FwTextInputModule } from '../text-input/text-input.module';
+import { FwIconModule } from './icon.module';
+import { allIcons } from './icon.types';
+
+@Component({
+  standalone: true,
+  selector: 'stories-icon-demo',
+  imports: [FwTextInputModule, CommonModule, FwIconModule, ReactiveFormsModule],
+  styleUrls: ['../../scss/icons/icons.scss', './icons.stories.scss'],
+  template: `
+
+    <fw-text-input [formControl]="searchField" placeholder="Search Icons" leftIcon="search"></fw-text-input>
+
+    <div class="icons">
+      <span *ngFor="let name of filteredIcons$ | async" (click)="handleClick(name)">
+        <div [ngClass]="isCopied===name?'copied':'empty'">Copied!</div>
+        <fw-icon [color]="color" [size]="size">{{ name }}</fw-icon>
+        <span>{{ name }}</span>
+      </span>
+    </div>
+  `,
+})
+class IconDemoComponent {
+  @Input() color:
+    | 'primary'
+    | 'secondary'
+    | 'red'
+    | 'orange'
+    | 'green'
+    | 'slate'
+    | 'muted'
+    | 'typography';
+  @Input() size: 'large' | 'medium' | 'small';
+  isCopied = '';
+
+  readonly exampleClass = '<span class="icon-add-user"></span>';
+  readonly exampleLigature = '<fw-icon>add-user</fw-icon>';
+  readonly filteredIcons$: Observable<string[]>;
+  readonly searchField = new UntypedFormControl('');
+
+  constructor(private clipboard: Clipboard) {
+    this.filteredIcons$ = this.searchField.valueChanges.pipe(
+      startWith(''),
+      map((filter: string) => {
+        const filterLower = filter.toLowerCase();
+        return allIcons.filter(name => name.toLowerCase().includes(filterLower));
+      }),
+    );
+  }
+
+  handleClick(name: string): void {
+    this.isCopied = name;
+    this.clipboard.copy(name);
+    setTimeout(() => this.isCopied = '', 1000);
+  }
+}
+
+export default {
+  title: 'Components/Icons',
+  component: IconDemoComponent,
+  parameters: {
+    controls: {
+      exclude: ['exampleClass', 'exampleLigature', 'filteredIcons$', 'searchField'],
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/p9qXznB9heIjRXwwNW7QUF/VDS---Icons?type=design&node-id=2-74&mode=design&t=Vf5RoAGE4njJWdO2-11',
+    },
+  },
+  args: {
+    color: 'primary',
+    size: 'medium',
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, FormsModule, FwIconModule, ReactiveFormsModule],
+    }),
+    applicationConfig({
+      providers: [importProvidersFrom(NoopAnimationsModule)],
+    }),
+  ],
+} as Meta;
+
+const fwIconTemplate: StoryFn<IconDemoComponent> = (args) => ({ props: args });
+
+export const Icons = fwIconTemplate.bind({});