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

package/src/components/form-heading/form-heading.stories.ts

@@ -0,0 +1,168 @@
+// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
+import { CommonModule } from '@angular/common';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { FwButtonModule } from '../button/button.module';
+import { FwChipModule } from '../chip/chip.module';
+import { FwIconModule } from '../icon/icon.module';
+import { FwLayoutsModule } from '../layouts/layouts.module';
+import { FwSectionHeadingModule } from '../section-heading/section-heading.module';
+import { FwSwitchModule } from '../switch/switch.module';
+import { FwTabsModule } from '../tabs/tabs.module';
+import { FwTextInputModule } from '../text-input/text-input.module';
+import { FwTextAreaInputModule } from '../textarea-input/textarea-input.module';
+import { FwFormHeadingComponent } from './form-heading.component';
+
+
+export default {
+  title: 'Form Controls/Form Heading',
+  component: FwFormHeadingComponent,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?node-id=4967-73195&m=dev',
+    },
+  },
+  argTypes: {
+    backButton: {
+      defaultValue: { summary: false },
+    },
+    icon: {
+      defaultValue: '',
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        FwButtonModule,
+        FwChipModule,
+        FwIconModule,
+        FwLayoutsModule,
+        FwSectionHeadingModule,
+        FwSwitchModule,
+        FwTabsModule,
+        FwTextInputModule,
+        FwTextAreaInputModule,
+      ],
+    }),
+  ],
+} as Meta;
+
+type Story = StoryObj<FwFormHeadingComponent>;
+
+export const Overview: Story = {
+  args: {
+    title: 'Form Heading',
+    description: 'Lorem ipsum dolor sit amet consectetur.',
+    status: '',
+  },
+};
+
+export const WithStatus: Story = {
+  args: {
+    title: 'Form Heading',
+    description: 'Lorem ipsum dolor sit amet consectetur.',
+    status: 'STATUS',
+  },
+};
+
+export const WithChildren: Story = {
+  args: {
+    title: 'Form Heading',
+    description: 'Lorem ipsum dolor sit amet consectetur.',
+    status: 'STATUS',
+  },
+  render: (args) => ({
+    props: args,
+    controls: { disabled: true },
+    template: `
+      <fw-form-heading [title]="title">
+        <fw-icon color="muted">information-circle</fw-icon>
+        <fw-chip title="Status Chip"></fw-chip>
+        <p class="vision-p3">Lorem <b>ipsum</b> dolor <a href="http://flywheel.io" target="_blank">sit amet</a> consectetur.</p>
+        <fw-switch></fw-switch>
+      </fw-form-heading>
+  `,
+  }),
+};
+
+export const AboveTextInput: Story = {
+  args: {
+    title: 'Form Heading',
+    description: 'Lorem ipsum dolor sit amet consectetur.',
+    status: '',
+  },
+  render: (args) => ({
+    props: args,
+    controls: { disabled: true },
+    template: `
+      <fw-form-heading [title]="title" [description]="description" [status]="status">
+      </fw-form-heading>
+      <fw-text-input placeholder="Input Text"></fw-text-input>
+  `,
+  }),
+};
+
+
+export const WithContext: Story = {
+  args: {
+    title: 'Title',
+    description: 'Lorem ipsum dolor sit amet consectetur.',
+    status: '',
+  },
+  render: (args) => ({
+    props: args,
+    controls: { disabled: true },
+    template: `
+      <fw-layout-panel border="all" [rounded]="true">
+        <fw-form-heading [title]="title" [description]="description" [status]="status">
+          <fw-switch></fw-switch>
+        </fw-form-heading>
+        <div style="display: flex; justify-content: center">
+          <fw-layout-context title="Replace this Component" description="Swap this with your component or anything from VDS" icon="search-loop" iconColor="secondary">
+          </fw-layout-context>
+        </div>
+      </fw-layout-panel>
+  `,
+  }),
+};
+
+export const ComplexForm: Story = {
+  args: {
+    title: 'Form Heading',
+    description: 'Lorem ipsum dolor sit amet consectetur.',
+    status: '',
+  },
+  render: (args) => ({
+    props: args,
+    controls: { disabled: true },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 16px;">
+        <fw-section-heading title="Section heading" description="Description goes here and shouldn’t exceed one line.">
+            <fw-button variant="ghost">Action</fw-button>
+            <fw-button variant="outline">Action</fw-button>
+            <fw-button variant="solid">Action</fw-button>
+        </fw-section-heading>
+        <fw-tabs [activeTabIndex]="0" [bordered]="true">
+            <fw-tab title="Tab"></fw-tab>
+            <fw-tab title="Tab"></fw-tab>
+            <fw-tab title="Tab"></fw-tab>
+            <fw-tab title="Tab"></fw-tab>
+        </fw-tabs>
+        <div>
+          <fw-form-heading title="Title Text" description="Description">
+              <fw-icon color="muted">information-circle</fw-icon>
+          </fw-form-heading>
+          <fw-text-input placeholder="Input Text" helperText="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et."></fw-text-input>
+        </div>
+        <div>
+          <fw-form-heading title="Title Text" description="Description">
+              <fw-icon color="muted">information-circle</fw-icon>
+          </fw-form-heading>
+          <fw-textarea-input [minRows]="4" [maxRows]="10" placeholder="Input Text" helperText="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et."></fw-textarea-input>
+        </div>
+      </div>
+  `,
+  }),
+};

package/src/components/forms/validators.ts

@@ -0,0 +1,97 @@
+// adapted from https://github.com/yuyang041060120/ng2-validation
+import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
+import { isAfter,isBefore, isSameDay, parseISO } from 'date-fns';
+import { isValidPhoneNumber } from 'libphonenumber-js';
+
+export class FwValidators {
+  static phone: ValidatorFn = (control: AbstractControl): { [key: string]: boolean } => {
+    if (!control || !control.value) {
+      return null;
+    }
+    const v: string = control.value;
+    return isValidPhoneNumber(v) ? null : { 'phone': true };
+  };
+
+  static email: ValidatorFn = (control: AbstractControl): { [key: string]: boolean } => {
+    if (!control || !control.value) {
+      return null;
+    }
+    const v: string = control.value;
+    const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    return emailRegex.test(v) ? null : { 'email': true };
+  };
+
+  static url: ValidatorFn = (control: AbstractControl): { [key: string]: boolean } => {
+    if (!control || !control.value) {
+      return null;
+    }
+    const v: string = control.value;
+    const urlRegEx = /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i;
+    return urlRegEx.test(v) ? null : { 'url': true };
+  };
+}
+
+const isFormControl = (obj: unknown | AbstractControl): obj is AbstractControl => {
+  return Boolean((obj as AbstractControl)?.status);
+}
+
+/**
+ * @description Checks that passed form control's value is after passed date
+ * @param earliestDateArg Date object or another form control
+ *
+ * @usageNotes
+ * Assumes form control emits an ISO timestamp string
+ *
+ * Does not error on empty so use a {@link https://angular.dev/api/forms/Validators#required | required validator} if needed
+ * @see {@link https://angular.dev/guide/forms/reactive-forms#validating-form-input | Angular Form Validation Docs}
+ * @returns
+ */
+export const notBeforeDate = (earliestDateArg: AbstractControl | Date): ValidatorFn => {
+  return (control: AbstractControl): ValidationErrors | null => {
+
+    // don't error empties as that's what required is for
+    if (!control.value) {
+      return null;
+    }
+
+    const valueToCheck = parseISO(control.value);
+    const earliestDate = isFormControl(earliestDateArg) ? parseISO(earliestDateArg.value as string) : earliestDateArg;
+
+    const isInvalid = isBefore(valueToCheck, earliestDate);
+    const areSameDay = isSameDay(valueToCheck, earliestDate);
+
+    const error = {
+      dateRange: 'date range is invalid',
+    }
+
+    return (isInvalid && !areSameDay) ? error : null;
+  }
+}
+
+/**
+ * @description Checks that the date emitted by the attached form control is not in the future
+ *
+ * @usageNotes
+ * Assumes form control emits an ISO timestamp string
+ *
+ * Does not error on empty so use a {@link https://angular.dev/api/forms/Validators#required | required validator} if needed
+ * @see {@link https://angular.dev/guide/forms/reactive-forms#validating-form-input | Angular Form Validation Docs}
+ * @returns Validation error or null
+ */
+export const notFutureDate = (): ValidatorFn => {
+  return (control: AbstractControl): ValidationErrors | null => {
+
+    // don't error empties as that's what required is for
+    if (!control.value) {
+      return null;
+    }
+
+    // assume the control uses an ISO timestamp
+    const valueToCheck = parseISO(control.value);
+
+    const today = new Date();
+    const isFuture = isAfter(valueToCheck, today);
+
+    return isFuture ? { isFuture: true } : null;
+  }
+}

package/src/components/getting-started.mdx

@@ -0,0 +1,92 @@
+import {Meta} from '@storybook/addon-docs';
+
+<Meta title="Getting Started"/>
+
+# Vision Component Library
+
+[![NPM Version](https://img.shields.io/npm/v/%40flywheel-io%2Fvision?style=flat&color=black)](https://www.npmjs.com/package/@flywheel-io/vision)
+[![gitlab badge](https://img.shields.io/badge/Gitlab-Gitlab?style=flat&logo=gitlab&color=black)](https://gitlab.com/flywheel-io/product/frontend/vision)
+[![figma badge](https://img.shields.io/badge/Figma-Figma?style=flat&logo=figma&color=black)](https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=0-1&mode=design&t=uWLS8FwgwmsyB5ge-0)
+[![slack badge](https://img.shields.io/badge/Slack-Slack?style=flat&logo=slack&color=black)](https://flywheel-io.slack.com/archives/C06F731KZUG)
+[![jira badge](https://img.shields.io/badge/Jira-Jira?style=flat&logo=jira&color=black)](https://flywheelio.atlassian.net/jira/software/c/projects/VDS/boards/1219)
+
+
+Vision is Flywheel's Design System with the goal of unifying the look and feel of all applications throughout Flywheel. This is a collection of scss styles and angular components for aiding and simplifying frontend work.
+
+# Prerequisites
+Vision requires `"@angular/core": ">=15",` and has been tested with Angular 15 & Angular 16.
+
+We assume that you are installing it into a project configured to use Sass styles.
+
+```
+ng new my-app --style=scss
+```
+
+if you are using a different style system and need to convert your project to a Sass based project you can run
+
+```
+ng set defaults.styleExt scss
+```
+
+# Installation
+To use vision first install it from npm
+```bash
+$ npm install --save @flywheel-io/vision
+```
+
+Then you need to do some scss setup, in your global scss stylesheet add:
+```scss
+@use '@flywheel-io/vision' as vision;
+
+@include vision.icons; // adds the icon font face and glyph classes
+@include vision.colors; // defines the colors vision relies on
+@include vision.overlay; // defines the overlay style vision relies on for dialog, menu, notification, popover, select
+
+// optional inclusions
+@include vision.global-typography; // adds global styles for text elements
+@include vision.global-scrollbar; // adds vision scrollbar styling to all elements
+// alternatively you can use the scrollbar in specific places with `@include vision.scrollbar`
+```
+
+For more info on colors and theming check out the [colors docs](?path=/docs/docs-colors--docs)
+
+And just like that, you're ready to use vision! 🥳
+
+# Using Components
+
+To use the components, you just need to import their module into the module you're working in
+
+```ts
+import { FwAlertModule } from '@flywheel-io/vision';
+
+@NgModule({
+  imports: [
+    FwButtonModule,
+    ...anyOtherFwModulesYouMightNeed,
+  ...
+```
+
+Then add it to your html
+```html
+<fw-button>Button!</fw-button>
+```
+For more details on using specific components, including their module name and selector, you can check out its docs page in this storybook
+
+Or if you're using standalone components import the relevant module there
+
+```ts
+@Component({
+  standalone: true,
+  selector: 'app-component',
+  imports: [
+    FwButtonModule,
+    ...anyOtherFwModulesYouMightNeed,
+  ],
+  template: `
+    <fw-button>Yay buttons!</fw-button>
+  `,
+})
+export class AppComponent {
+  // component logic
+}
+```

package/src/components/ghost/ghost.stories.ts

@@ -0,0 +1,76 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+
+@Component({
+  selector: 'stories-ghost-demo',
+  styleUrls: ['../../scss/atoms/ghost.scss'],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        padding: 10px;
+        background-color: var(--page-light);
+        font-family: Inter, sans-serif;
+      }
+
+      code,
+      pre {
+        font-family: monospace;
+        color: #a22424;
+      }
+
+      div {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .fw-ghost-animation-dark {
+        color: white;
+      }
+    `,
+  ],
+  template: `
+    <p>
+      Include
+      <code>scss/atoms/ghost.scss</code>
+      in your styles and use the
+      <code>.fw-ghost-animation</code>
+      class or the
+      <code>animate-ghost-line</code>
+      mixin on elements with a width and height.
+    </p>
+    <div class="fw-ghost-animation" style="width: 200px; height: 50px">Loading...</div>
+    <div class="fw-ghost-animation" style="width: 100px; height: 50px">Loading...</div>
+
+    <p>Use the <code>.fw-ghost-animation-dark</code> class in a dark context.</p>
+    <div class="fw-ghost-animation-dark" style="width: 150px; height: 80px">Loading...</div>
+    <div class="fw-ghost-animation-dark" style="width: 200px; height: 40px">Loading...</div>
+  `,
+})
+class GhostDemoComponent {
+}
+
+export default {
+  title: 'SCSS/Ghost',
+  component: GhostDemoComponent,
+  parameters: {
+    controls: {
+      exclude: [],
+    },
+  },
+  argTypes: {},
+  args: {},
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule],
+    }),
+  ],
+} as Meta;
+
+const fwGhostTemplate: Story<GhostDemoComponent> = (args) => ({ props: args });
+
+export const Ghost = fwGhostTemplate.bind({});

package/src/components/icon/README.txt

@@ -0,0 +1,5 @@
+Run Storybook and see the Icons story for a showcase of all icons available.
+
+To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
+
+You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.

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

@@ -0,0 +1,52 @@
+import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
+import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
+
+@Component({
+  selector: 'fw-icon',
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FwIconComponent {
+  @Input() size?: 'large' | 'medium' | 'small';
+  @Input() color?:
+    | 'primary'
+    | 'secondary'
+    | 'red'
+    | 'orange'
+    | 'green'
+    | 'slate'
+    | 'muted'
+    | 'typography';
+  @HostBinding('class') class = 'vision-icon';
+  @HostBinding('role') role = 'img';
+
+  @HostBinding('style') get style(): SafeStyle {
+    let size: string = '';
+    switch (this.size) {
+      case 'small':
+        size = 'font-size: 22px; min-width: 22px; width: 22px;';
+        break;
+      case 'medium':
+        size = 'font-size: 24px; min-width: 24px; width: 24px;';
+        break;
+      case 'large':
+        size = 'font-size: 28px; min-width: 28px; width: 28px;';
+        break;
+    }
+    let color: string = '';
+    if (this.color) {
+      if (this.color === 'muted') {
+        color = 'color: var(--typography-muted);';
+      } else {
+        color = `color: var(--${this.color}-base);`;
+      }
+    }
+    return this.sanitizer.bypassSecurityTrustStyle(`
+      ${size}
+      ${color}
+  `);
+  }
+
+  constructor(private sanitizer: DomSanitizer) {
+  }
+}

package/src/components/icon/icon.mdx

@@ -0,0 +1,36 @@
+import {Controls, Description, Meta, Primary, Subtitle, Title} from '@storybook/blocks';
+
+import * as IconStories from './icon.stories';
+import * as IconsStories from './icons.stories';
+import {Story} from "@storybook/addon-docs";
+
+<Meta of={IconStories}/>
+<Title/>
+
+Make sure to include the vision icons in your global stylesheet
+```scss
+@include vision.icons; // adds the icon font face and glyph classes
+```
+
+Import the FwIconModule to use the `fw-icon` component
+```ts
+import { FwIconModule } from '@flywheel-io/vision';
+```
+Just add whatever icon you want inside the `fw-icon` tag
+```html
+<fw-icon size="medium" color="primary">add-user</fw-icon>
+// or
+<fw-icon style="font-size: 22px; color: var(--primary-base)">add-user</fw-icon>
+```
+
+You can also place icon classes on any element without using the component:
+```html
+<span class="icon-add-user"></span>
+```
+
+<Subtitle/>
+<Description/>
+<Primary/>
+<Controls/>
+
+<Story of={IconsStories.Icons}/>

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

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

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

@@ -0,0 +1,51 @@
+import { CommonModule } from '@angular/common';
+import { importProvidersFrom } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { FwIconComponent } from './icon.component';
+import { FwIconModule } from './icon.module';
+
+const meta: Meta = {
+  title: 'Components/Icons',
+  component: FwIconComponent,
+  parameters: {
+    controls: {
+      exclude: ['class', 'role'],
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/p9qXznB9heIjRXwwNW7QUF/VDS---Icons?type=design&node-id=2-74&mode=design&t=Vf5RoAGE4njJWdO2-11',
+    },
+  },
+  decorators: [
+    applicationConfig({
+      providers: [importProvidersFrom([
+        BrowserAnimationsModule,
+      ])],
+    }),
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        FwIconModule,
+      ],
+    }),
+  ],
+};
+export default meta;
+
+type Story = StoryObj<FwIconComponent & {
+  'content'?: string,
+}>;
+
+export const Icon: Story = {
+  args: {
+    color: 'primary',
+    size: 'medium',
+    content: 'add-user',
+  },
+  render: (args) => ({
+    props: args,
+    template: `<fw-icon [color]="color" [size]="size">${args['content']}</fw-icon>`,
+  }),
+};