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

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

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

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

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

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

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

package/src/components/switch/switch.component.scss

@@ -0,0 +1,179 @@
+.fw-switch {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  margin-left: 12px;
+  margin-right: 8px;
+  height: 22px;
+  box-sizing: border-box;
+
+  p {
+    margin: 0;
+  }
+
+  input {
+    display: none;
+  }
+
+  label {
+    margin-left: 8px;
+    margin-right: 8px;
+    cursor: pointer;
+  }
+
+  .switch-track {
+    position: relative;
+    width: 34px;
+    height: 14px;
+    transition: all .4s ease;
+
+    .switch-slide {
+      width: 34px;
+      height: 14px;
+      border-radius: 10px;
+      opacity: 0.1;
+      background: var(--slate-dark);
+      position: absolute;
+      top: 0;
+      left: 0;
+      transition: background-color 200ms linear, opacity 200ms linear;
+    }
+
+    .switch-knob {
+      width: 20px;
+      height: 20px;
+      background-color: var(--slate-light);
+      border-radius: 10px;
+      filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.12)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.14)) drop-shadow(0 2px 1px rgba(0, 0, 0, 0.20));
+      position: absolute;
+      top: -3px;
+      left: -3px;
+      transition: left .5s cubic-bezier(0.175, 0.885, 0.320, 1.275), padding .3s ease, margin .3s ease;
+
+      &:hover {
+        outline: 9px solid var(--slate-hover);
+      }
+    }
+
+    &.checked {
+      .switch-slide {
+        background-color: var(--slate-dark);
+        opacity: .6;
+        transition: background-color 200ms linear, opacity 200ms linear;
+      }
+
+      .switch-knob {
+        transition: background-color 200ms linear, opacity 200ms linear,
+        left .5s cubic-bezier(0.175, 0.885, 0.320, 1.275),
+        padding .3s ease, margin .3s ease;
+        left: 16px;
+      }
+    }
+  }
+
+  &.primary {
+    .switch-track {
+      &.checked {
+        .switch-slide {
+          background-color: var(--primary-base);
+          transition: background-color 200ms linear, opacity 200ms linear;
+        }
+
+        .switch-knob {
+          background-color: var(--primary-base);
+
+          &:hover {
+            outline: 9px solid var(--primary-hover);
+          }
+        }
+      }
+    }
+  }
+
+  &.secondary {
+    .switch-track {
+      &.checked {
+        .switch-slide {
+          background-color: var(--secondary-base);
+        }
+
+        .switch-knob {
+          background-color: var(--secondary-base);
+
+          &:hover {
+            outline: 9px solid var(--secondary-hover);
+          }
+        }
+      }
+    }
+  }
+
+  &.title-start {
+    flex-direction: row-reverse;
+
+    label {
+      margin-right: 10px;
+      margin-left: 0;
+    }
+  }
+
+  &.size-small {
+    height: 20px;
+    
+    .switch-track {
+      position: relative;
+      width: 26px;
+      height: 10px;
+
+      .switch-slide {
+        width: 26px;
+        height: 10px;
+        border-radius: 10px;
+      }
+
+      .switch-knob {
+        width: 16px;
+        height: 16px;
+        border-radius: 8px;
+
+        &:hover {
+          outline-width: 7px;
+        }
+      }
+
+      &.checked {
+        .switch-knob {
+          left: 13px;
+        }
+      }
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+
+    p {
+      color: var(--typography-light);
+    }
+
+    .switch-track {
+      opacity: .5;
+
+      &.checked {
+        .switch-slide {
+          background-color: var(--slate-base);
+        }
+
+        .switch-knob {
+          background-color: var(--slate-light);
+
+          &:hover {
+            outline: 9px solid transparent;
+          }
+        }
+      }
+    }
+  }
+
+
+}

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

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