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

package/src/components/stepper/step.stories.ts

@@ -1,73 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-
-import { FwAvatarModule } from '../avatar/avatar.module';
-import { FwButtonModule } from '../button/button.module';
-import { FwDialogsModule } from '../dialog/dialogs.module';
-import { FwIconModule } from '../icon/icon.module';
-import { FwProgressModule } from '../progress/progress.module';
-import { FwStepComponent } from './step.component';
-import { FwStepperModule } from './stepper.module';
-
-export default {
-  title: 'Components/Stepper',
-  component: FwStepComponent,
-  parameters: {
-    controls: {},
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?node-id=1676%3A61140&mode=dev',
-    },
-  },
-  decorators: [
-    moduleMetadata({
-      imports: [
-        CommonModule,
-        FwStepperModule,
-        FwAvatarModule,
-        FwButtonModule,
-        FwDialogsModule,
-        FwIconModule,
-        FwProgressModule,
-      ],
-    }),
-  ],
-} as Meta;
-
-type Story = StoryObj<FwStepComponent>;
-
-export const Step: Story = {
-  args: {
-    stepNumber: 3,
-    title: 'Step title',
-    description: 'Optional',
-    alignment: 'left',
-    active: true,
-    completed: false,
-    disabled: false,
-    variant: 'number',
-    icon: undefined,
-    color: 'slate',
-  },
-};
-
-export const StepsNoStepper: Story = {
-  args: {},
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-        <div style="display: flex">
-            <fw-step stepNumber="1" title="Creating Resources" description="Building and allocating workspace." variant="icon" icon="done-check" status="done" alignment="center">
-            </fw-step>
-            <fw-step stepNumber="2" title="Syncing Users" description="Creating users and assigning roles." variant="icon" icon="done-check" status="done" alignment="center">
-            </fw-step>
-            <fw-step stepNumber="3" title="Workspace Ready" description="Azure is ready to use." variant="decorator" icon="undone-uncheck-untracked" status="completed" alignment="center">
-                <fw-step-decorator><fw-progress-spinner size="small"></fw-progress-spinner></fw-step-decorator>
-            </fw-step>
-            <fw-step stepNumber="4" title="Creating Compute" description="Provisioning compute instances for users." variant="icon" icon="undone-uncheck-untracked" status="default" alignment="center"></fw-step>
-            <fw-step stepNumber="5" title="Setup Xfer Storage" description="Project Exports linked with Azure" variant="icon" icon="undone-uncheck-untracked" status="disabled" alignment="center"></fw-step>
-        </div>
-    `,
-  }),
-};

package/src/components/stepper/stepper.component.ts

@@ -1,100 +0,0 @@
-import {
-  AfterContentInit,
-  Component,
-  ContentChildren,
-  EventEmitter,
-  HostBinding,
-  Input,
-  OnChanges,
-  OnDestroy,
-  Output,
-  QueryList,
-  SimpleChanges,
-} from '@angular/core';
-import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
-import { Subscription } from 'rxjs';
-
-import { FwStepComponent } from './step.component';
-
-@Component({
-  selector: 'fw-stepper',
-  template: '<ng-content select="fw-step"></ng-content>',
-  styleUrls: [],
-})
-export class FwStepperComponent implements OnChanges, OnDestroy, AfterContentInit {
-  @Input() activeStep: number = 1;
-  @Input() doneStep?: number;
-  @Input() alignment?: 'left' | 'center' = 'left';
-  @Input() backgroundColor?: string = 'var(--card-background)';
-  @Output() stepChange: EventEmitter<number> = new EventEmitter<number>();
-  @ContentChildren(FwStepComponent) steps: QueryList<FwStepComponent>;
-
-  @HostBinding('style') get style(): SafeStyle {
-    return this.sanitizer.bypassSecurityTrustStyle(`
-      display: flex;
-      background-color: ${this.backgroundColor};
-    `);
-  }
-
-  private subscriptions: Subscription[] = [];
-
-  constructor(private sanitizer: DomSanitizer) {
-  }
-
-  ngOnDestroy(): void {
-    for (const subscription of this.subscriptions) {
-      subscription.unsubscribe();
-    }
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes) {
-      this.updateSteps();
-    }
-  }
-
-  ngAfterContentInit(): void {
-    this.steps.forEach(step => {
-      const sub = step.select.subscribe(step => this.handleSelect(step));
-      this.subscriptions.push(sub);
-    });
-    this.updateSteps();
-  }
-
-  handleSelect(step?: number): void {
-    this.activeStep = step;
-    this.stepChange.emit(parseInt(step.toString())); // weirdly passing out step directly fails the eqeqeq
-    this.updateSteps();
-  }
-
-  updateSteps(): void {
-    if (this.steps && this.steps.length > 0) {
-      this.steps.forEach(step => {
-        if (step.stepNumber < this.activeStep) {
-          step.completed = true;
-          step.active = false;
-          step.done = false;
-          step.backgroundColor = this.backgroundColor;
-          step.alignment = this.alignment;
-        }
-        if (step.stepNumber.toString() === this.activeStep.toString()) {
-          step.completed = false;
-          step.active = true;
-          step.done = false;
-          step.backgroundColor = this.backgroundColor;
-          step.alignment = this.alignment;
-        }
-        if (step.stepNumber > this.activeStep) {
-          step.completed = false;
-          step.active = false;
-          step.done = false;
-          step.backgroundColor = this.backgroundColor;
-          step.alignment = this.alignment;
-        }
-        if (Boolean(this.doneStep) && step.stepNumber <= this.doneStep) {
-          step.done = true;
-        }
-      });
-    }
-  }
-}

package/src/components/stepper/stepper.mdx

@@ -1,83 +0,0 @@
-import {Canvas, Meta} from '@storybook/addon-docs';
-import * as StepperStories from './stepper.stories'
-import * as StepStories from './step.stories'
-
-<Meta of={StepperStories}/>
-
-# Stepper
-
-A Vision Stepper is UI only component. It is expected that you will maintain the state in your application you need for your steps.
-
-It consists of two objects the top level `<fw-stepper>` which is the collection component. And has two main properties `activeStep` and `alignment`.
-Changing either of these properties will pass down the `completed`, `active`, `alignment` values to the child steps.
-Additionally there is a `doneStep` which will set the `done` property on all steps up to and including that step.
-There is one main output `stepChange` event that you can subscribe to which will give you the activeStep number if a completed step has been clicked on
-to go back to revisit that step.
-
-*note: only steps in the completed and not done state can be clicked*
-
-<Canvas of={StepperStories.Stepper}></Canvas>
-
-Most of the actual UI is managed in the `fw-step` sub-components. `color` and `variant` can be managed on the step directly. The default is a left aligned number in the slate color.
-`title` and `stepNumber` properties are required.
-
-<Canvas of={StepStories.Step}></Canvas>
-
-## Usage
-
-First import the module into your `app.module.ts`
-
-```ts filename="app.module.ts"
-// app.module.ts
-
-import { FwStepperModule } from '@flywheel-io/vision';
-
-@NgModule({
-  imports: [
-      FwStepperModule
-  ]
-})
-```
-
-and then in your layout code add the component
-
-```html
-<!--- your.component.html --->
-
-<fw-stepper [activeStep]="yourStep" (stepChange)="handleStepChange($event)">
-  <fw-step stepNumber="1" title="Step title"></fw-step>
-  <fw-step stepNumber="2" title="Step title"></fw-step>
-  <fw-step stepNumber="3" title="Step title"></fw-step>
-  <fw-step stepNumber="4" title="Step title"></fw-step>
-  <fw-step stepNumber="5" title="Step title"></fw-step>
-</fw-stepper>
-```
-
-*alternatively* if your use case is non-linear and you want to manage your steps, events and **status** directly and independently.
-
-```html
-<!--- your.component.html --->
-<div style="display: flex">
-    <fw-step stepNumber="1" title="Step title" status="done"></fw-step>
-    <fw-step stepNumber="2" title="Step title" status="done"></fw-step>
-    <fw-step stepNumber="3" title="Step title" status="completed"></fw-step>
-    <fw-step stepNumber="4" title="Step title" status="default"></fw-step>
-    <fw-step stepNumber="5" title="Step title" status="disabled"></fw-step>
-</div>
-```
-
-
-## Stepper Variations
-
-<Canvas of={StepperStories.StepperVariations}></Canvas>
-
-#### Stepper in a Dialog Header
-<Canvas of={StepperStories.StepperInDialog}></Canvas>
-
-#### Complex Stepper
-<Canvas of={StepperStories.StepperComplex}></Canvas>
-
-#### Complex Steps with No Stepper
-<Canvas of={StepStories.StepsNoStepper}></Canvas>
-
-

package/src/components/stepper/stepper.module.ts

@@ -1,27 +0,0 @@
-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 { FwStepComponent, FwStepDecoratorComponent } from './step.component';
-import { FwStepperComponent } from './stepper.component';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    FwIconModule,
-    FwIconButtonModule,
-  ],
-  exports: [
-    FwStepComponent,
-    FwStepDecoratorComponent,
-    FwStepperComponent,
-  ],
-  declarations: [
-    FwStepComponent,
-    FwStepDecoratorComponent,
-    FwStepperComponent,
-  ],
-})
-export class FwStepperModule {
-}

package/src/components/stepper/stepper.stories.ts

@@ -1,233 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-
-import { FwAvatarModule } from '../avatar/avatar.module';
-import { FwButtonModule } from '../button/button.module';
-import { FwDialogsModule } from '../dialog/dialogs.module';
-import { FwIconModule } from '../icon/icon.module';
-import { FwIconButtonModule } from '../icon-button/icon-button.module';
-import { FwProgressModule } from '../progress/progress.module';
-import { FwStepperComponent } from './stepper.component';
-import { FwStepperModule } from './stepper.module';
-
-export default {
-  title: 'Components/Stepper',
-  component: FwStepperComponent,
-  parameters: {
-    controls: {},
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?node-id=1676%3A61140&mode=dev',
-    },
-  },
-  decorators: [
-    moduleMetadata({
-      imports: [
-        CommonModule,
-        FwStepperModule,
-        FwAvatarModule,
-        FwButtonModule,
-        FwDialogsModule,
-        FwIconModule,
-        FwIconButtonModule,
-        FwProgressModule,
-      ],
-    }),
-  ],
-  argTypes: {
-    active: {
-      control: { type: 'boolean' },
-      description: 'active highlighted control',
-    },
-  },
-} as Meta;
-
-type Story = StoryObj<FwStepperComponent>;
-
-export const Stepper: Story = {
-  args: {
-    activeStep: 3,
-    doneStep: 0,
-    alignment: 'left',
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-        <fw-stepper [activeStep]="activeStep" [alignment]="alignment" [doneStep]="doneStep" (stepChange)="stepChange">
-            <fw-step stepNumber="1" title="Step title" description="Optional"></fw-step>
-            <fw-step stepNumber="2" title="Red leicester paneer" description="Cheesy grin pepper jack camembert de normandie cheese slices"></fw-step>
-            <fw-step stepNumber="3" title="Step title" description="Optional"></fw-step>
-            <fw-step stepNumber="4" title="Step title"></fw-step>
-            <fw-step stepNumber="5" title="Step title" description="Optional"></fw-step>
-        </fw-stepper>
-    `,
-  }),
-};
-
-export const StepperComplex: Story = {
-  args: {
-    alignment: 'center',
-    activeStep: 3,
-    doneStep: 2,
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-        <fw-stepper [alignment]="alignment" [doneStep]="doneStep" [activeStep]="activeStep" (stepChange)="stepChange">
-            <fw-step stepNumber="1" title="Creating Resources" description="Building and allocating workspace." variant="icon" icon="done-check" [done]="true">
-            </fw-step>
-            <fw-step stepNumber="2" title="Syncing Users" description="Creating users and assigning roles." variant="icon" icon="done-check" [done]="true">
-            </fw-step>
-            <fw-step stepNumber="3" title="Workspace Ready" description="Azure is ready to use." variant="decorator" icon="undone-uncheck-untracked" [completed]="true">
-                <fw-step-decorator><fw-progress-spinner size="small"></fw-progress-spinner></fw-step-decorator>
-            </fw-step>
-            <fw-step stepNumber="4" title="Creating Compute" description="Provisioning compute instances for users." variant="icon" icon="undone-uncheck-untracked"></fw-step>
-            <fw-step stepNumber="5" title="Setup Xfer Storage" description="Project Exports linked with Azure" variant="icon" icon="undone-uncheck-untracked" [disabled]="true"></fw-step>
-        </fw-stepper>
-    `,
-  }),
-};
-
-export const StepperVariations: Story = {
-  render: (args) => ({
-    props: args,
-    controls: { disabled: true },
-    template: `
-      <div>
-          <div style="margin-bottom: 40px;">
-            <fw-stepper activeStep="3">
-                <fw-step stepNumber="1" title="Step title"></fw-step>
-                <fw-step stepNumber="2" title="Step title"></fw-step>
-                <fw-step stepNumber="3" title="Step title"></fw-step>
-                <fw-step stepNumber="4" title="Step title"></fw-step>
-                <fw-step stepNumber="5" title="Step title"></fw-step>
-            </fw-stepper>
-          </div>
-          <div style="margin-bottom: 40px;">
-            <fw-stepper activeStep="3">
-                <fw-step stepNumber="1" title="Step title" description="Optional"></fw-step>
-                <fw-step stepNumber="2" title="Step title" description="Optional"></fw-step>
-                <fw-step stepNumber="3" title="Step title" description="Optional"></fw-step>
-                <fw-step stepNumber="4" title="Step title"></fw-step>
-                <fw-step stepNumber="5" title="Step title" description="Optional"></fw-step>
-            </fw-stepper>
-          </div>
-          <div style="margin-bottom: 40px;">
-            <fw-stepper activeStep="3" alignment="center">
-                <fw-step stepNumber="1" title="Step title"></fw-step>
-                <fw-step stepNumber="2" title="Step title"></fw-step>
-                <fw-step stepNumber="3" title="Step title"></fw-step>
-                <fw-step stepNumber="4" title="Step title"></fw-step>
-                <fw-step stepNumber="5" title="Step title"></fw-step>
-            </fw-stepper>
-          </div>
-          <div style="margin-bottom: 40px;">
-            <fw-stepper activeStep="3" doneStep="2" alignment="center">
-                <fw-step stepNumber="1" title="Step title" description="Optional"></fw-step>
-                <fw-step stepNumber="2" title="Step title" description="Optional"></fw-step>
-                <fw-step stepNumber="3" title="Step title" description="Optional"></fw-step>
-                <fw-step stepNumber="4" title="Step title"></fw-step>
-                <fw-step stepNumber="5" title="Step title" description="Optional"></fw-step>
-            </fw-stepper>
-          </div>
-          <div style="margin-bottom: 40px;">
-            <fw-stepper activeStep="3" doneStep="1" alignment="center">
-                <fw-step stepNumber="1" title="Step title" description="Optional" variant="icon" icon="information-circle"></fw-step>
-                <fw-step stepNumber="2" title="Step title" description="Optional" variant="icon" icon="information-circle"></fw-step>
-                <fw-step stepNumber="3" title="Step title" description="Optional" variant="icon" icon="information-circle"></fw-step>
-                <fw-step stepNumber="4" title="Step title" description="Optional" variant="icon" icon="information-circle"></fw-step>
-                <fw-step stepNumber="5" title="Step title" description="Optional" variant="icon" icon="information-circle" [disabled]="true"></fw-step>
-            </fw-stepper>
-          </div>
-          <div style="margin-bottom: 40px;">
-            <fw-stepper activeStep="1" alignment="center">
-                <fw-step stepNumber="1" title="Step title" description="Optional"></fw-step>
-                <fw-step stepNumber="2" color="error" title="Step title" description="Optional"></fw-step>
-                <fw-step stepNumber="3" color="warning" title="Step title" description="Optional"></fw-step>
-                <fw-step stepNumber="4" color="success" title="Step title"></fw-step>
-                <fw-step stepNumber="5" color="info" title="Step title" description="Optional"></fw-step>
-            </fw-stepper>
-          </div>
-          <div style="margin-bottom: 40px;">
-            <fw-stepper activeStep="1" alignment="center">
-                <fw-step stepNumber="1" variant="decorator" title="Step title" description="Optional">
-                    <fw-step-decorator><fw-progress-spinner size="small"></fw-progress-spinner></fw-step-decorator>
-                </fw-step>
-                <fw-step stepNumber="2" color="error" variant="icon" icon="warning-circle" title="Step title" description="Optional"></fw-step>
-                <fw-step stepNumber="3" color="warning" variant="icon" icon="warning" title="Step title" description="Optional"></fw-step>
-                <fw-step stepNumber="4" color="success" variant="icon" icon="done-check" title="Step title"></fw-step>
-                <fw-step stepNumber="5" color="info" variant="icon" icon="information-circle" title="Step title" description="Optional"></fw-step>
-            </fw-stepper>
-          </div>
-          <div style="margin-bottom: 40px;">
-            <fw-stepper activeStep="6" alignment="center">
-                <fw-step stepNumber="1" variant="decorator" title="Step title" description="Optional">
-                    <fw-step-decorator>
-                        <fw-icon-button icon="home-modern-door"></fw-icon-button>
-                    </fw-step-decorator>
-                </fw-step>
-                <fw-step stepNumber="2" color="error" variant="icon" icon="warning-circle" title="Step title" description="Optional"></fw-step>
-                <fw-step stepNumber="3" color="warning" variant="icon" icon="warning" title="Step title" description="Optional"></fw-step>
-                <fw-step stepNumber="4" color="success" variant="icon" icon="done-check" title="Step title"></fw-step>
-                <fw-step stepNumber="5" color="info" variant="icon" icon="information-circle" title="Step title" description="Optional"></fw-step>
-            </fw-stepper>
-          </div>
-      </div>
-    `,
-  }),
-};
-
-export const StepperInDialog: Story = {
-  args: {
-    activeStep: 3,
-    alignment: 'left',
-    backgroundColor: 'var(--card-header)',
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: true },
-    template: `
-      <fw-dialog width="medium">
-          <fw-dialog-header>
-            <div style="flex: 1">
-              <fw-stepper [activeStep]="activeStep" [backgroundColor]="backgroundColor" [alignment]="alignment">
-                  <fw-step stepNumber="1" title="Step title"></fw-step>
-                  <fw-step stepNumber="2" title="Step title"></fw-step>
-                  <fw-step stepNumber="3" title="Step title"></fw-step>
-                  <fw-step stepNumber="4" title="Step title"></fw-step>
-                  <fw-step stepNumber="5" title="Step title"></fw-step>
-                  <fw-step stepNumber="6" title="Step title"></fw-step>
-              </fw-stepper>
-              </div>
-          </fw-dialog-header>
-          <fw-dialog-content>
-              <p style="padding: 16px;">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Massa, semper etiam aliquet elit
-              feugiat eu. Amet feugiat gravida sagittis id eget venenatis maecenas. Id tortor molestie
-              orci, aliquet. Eget lorem eget fusce sit diam in. Facilisis dui gravida ultricies eleifend.
-              Amet, tristique est eu viverra ac felis. Nec cursus arcu integer in quam ultricies. Mauris
-              ipsum vel est tellus porta curabitur consectetur egestas. Scelerisque eget sit tellus feugiat
-              duis nulla turpis nunc. Quam tellus vitae sit sed tincidunt sociis et sit. Felis elementum
-              laoreet integer dignissim gravida arcu. Nunc pulvinar posuere vestibulum pretium metus,
-              augue in commodo sodales. Augue sem et in elit leo praesent urna.
-              </p>
-          </fw-dialog-content>
-          <fw-dialog-actions>
-              <div style="flex: 1; display:flex; justify-content: space-between">
-                <fw-button leftIcon="image-picture-square" variant="outline">Preview Mode</fw-button>
-                <div style="display:flex; gap: 8px">
-                  <fw-button leftIcon="arrow-back" variant="outline">Previous Step</fw-button>
-                  <fw-button rightIcon="arrow-forward">Next Step</fw-button>
-                </div>
-                <div style="display:flex; gap: 8px">
-                  <fw-button variant="outline">Cancel</fw-button>
-                  <fw-button>Save Draft</fw-button>
-                </div>
-              </div>
-          </fw-dialog-actions>
-      </fw-dialog>
-    `,
-  }),
-};

package/src/components/switch/switch.component.html

@@ -1,10 +0,0 @@
-<div
-  [ngClass]="['fw-switch', 'size-'+size, 'title-'+titlePosition, color, disabled?'disabled':'']"
-  (click)="handleClick()">
-  <div class="switch-track" [ngClass]="[checked?'checked':'']">
-    <div class="switch-slide"></div>
-    <div class="switch-knob"></div>
-  </div>
-  <input type="checkbox" [checked]="checked" [disabled]="disabled" [name]="name">
-  <label *ngIf="title"><p class="vision-p2">{{ title }}</p></label>
-</div>