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

package/src/components/radio/radio-group.mdx

@@ -0,0 +1,45 @@
+import {Canvas, Controls, Meta} from '@storybook/addon-docs';
+import * as RadioStories from './radio.stories'
+import * as RadioGroupStories from './radio-group.stories'
+
+<Meta of={RadioGroupStories}/>
+
+# Radio Buttons
+
+```ts
+import FwRadioModule from '@flywheel-io/vision';
+```
+
+The Vision **Radio Buttons** consists of the `<fw-radio-group>` which is a collection component that is built via an assembly of the child components `fw-radio-button`
+
+- radio buttons can flow "horizontal" "vertical" in the group via the __direction__ property
+- changing input properties on the group will overwrite corresponding values in the `<fw-radio-button>` children.
+
+This component implements ControlValueAccessor. So it will work with Angular's reactive forms and template-driven forms. Simply use it as you would any other form element, for example:
+```html
+<fw-radio-group [formControl]="myControl">
+  <fw-radio-button title="One" value="one"></fw-radio-button>
+  <fw-radio-button title="Two" value="two"></fw-radio-button>
+  <fw-radio-button title="Three" value="three"></fw-radio-button>
+  <fw-radio-button title="Four" value="four"></fw-radio-button>
+  <fw-radio-button title="Five" value="five" disabled="true"></fw-radio-button>
+</fw-radio-group>
+```
+
+<Canvas of={RadioGroupStories.RadioGroup}></Canvas>
+
+<Controls/>
+
+## Radio Button
+
+Most of the actual visible UI is managed in the `<fw-radio-button>` sub-components.
+
+<Canvas of={RadioStories.RadioButton}></Canvas>
+
+<Controls of={RadioStories.RadioButton}/>
+
+### All the Radio Button States
+<Canvas of={RadioStories.Overview}></Canvas>
+
+### Built in Radio Buttons Usage in a Menu
+<Canvas of={RadioStories.WithMenuItem}></Canvas>

package/src/components/radio/radio-group.stories.ts

@@ -0,0 +1,76 @@
+import { CommonModule } from '@angular/common';
+import { importProvidersFrom } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { action } from '@storybook/addon-actions';
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { FwContainedInputModule } from '../contained-input/contained-input.module';
+import { FwMenuModule } from '../menu/menu.module';
+import { FwTextInputModule } from '../text-input/text-input.module';
+import { FwWrappedInputModule } from '../wrapped-input/wrapped-input.module';
+import { FwRadioModule } from './radio.module';
+import { FwRadioGroupComponent } from './radio-group.component';
+
+export default {
+  title: 'Form Controls/Radio Button',
+  component: FwRadioGroupComponent,
+  parameters: {
+    controls: {
+      exclude: ['radioButtons', 'onChange', 'onTouch', 'registerOnChange', 'registerOnTouched', 'setDisabledState', 'writeValue', 'ngAfterContentInit', 'ngOnChanges', 'updateLayout', 'subscriptions', 'handleChange', 'ngOnDestroy'],
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?node-id=4957-72536&m=dev',
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        FwRadioModule,
+        FwContainedInputModule,
+        FwMenuModule,
+        FwTextInputModule,
+        FwWrappedInputModule,
+      ],
+    }),
+    applicationConfig({
+      providers: [
+        importProvidersFrom(BrowserModule),
+        importProvidersFrom(BrowserAnimationsModule),
+      ],
+    }),
+  ],
+} as Meta;
+
+type Story = StoryObj<FwRadioGroupComponent>;
+
+export const RadioGroup: Story = {
+  args: {
+    value: 'one',
+    group: 'radioGroup',
+    direction: 'horizontal',
+    size: 'medium',
+    color: 'primary',
+    disabled: undefined,
+  },
+  render: (args) => {
+    return ({
+      props: { ...args, onChangeAction: action('onChangeAction') },
+      controls: { disabled: false },
+      template: `
+            <fw-radio-group [direction]="direction" [value]="value" [group]="group" [size]="size" [color]="color" [disabled]="disabled" (change)="onChangeAction($event)">
+              <fw-radio-button title="One" value="one"></fw-radio-button>
+              <fw-radio-button title="Two" value="two"></fw-radio-button>
+              <fw-radio-button title="Three" value="three"></fw-radio-button>
+              <fw-radio-button title="Four" value="four"></fw-radio-button>
+              <fw-radio-button title="Five" value="five" disabled="true"></fw-radio-button>
+            </fw-radio-group>
+    `,
+    });
+  },
+};

package/src/components/radio/radio.component.html

@@ -0,0 +1,19 @@
+<div [ngClass]="['fw-radio-wrapper', disabled?'disabled':'']">
+  <div [ngClass]="radioStyles">
+    <input
+      type="radio"
+      class="fw-radio"
+      [id]="group+value"
+      [value]="value"
+      [checked]="checked"
+      [name]="group"
+      [disabled]="disabled"
+      (change)="handleChange($event)"
+      (focusout)="focused=false"
+      (focusin)="focused=true"
+    />
+  </div>
+  <label *ngIf="title" [htmlFor]="group+value" class="vision-h4">{{ title }}
+    <ng-content></ng-content>
+  </label>
+</div>

package/src/components/radio/radio.component.scss

@@ -0,0 +1,132 @@
+:host {
+  .fw-radio-wrapper {
+    display: flex;
+    align-items: center;
+    width: fit-content;
+    cursor: pointer;
+
+    label {
+      margin: 0 6px 0 0;
+      color: var(--typography-base);
+
+      &:empty {
+        display: none;
+      }
+    }
+
+    .fw-radio {
+      height: 36px;
+      width: 36px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+
+      &:hover {
+        background-color: var(--slate-hover);
+      }
+
+      &.focused {
+        background-color: var(--slate-focus);
+      }
+
+      input[type='radio'] {
+        appearance: none;
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        margin: 6px;
+        background-clip: content-box;
+        border: 2px solid var(--typography-light);
+        background-color: transparent;
+        border-radius: 50%;
+        cursor: pointer;
+
+        &:checked {
+          width: 16px;
+          height: 16px;
+          background-color: var(--typography-light);
+          outline: 2px solid var(--typography-light);
+          border: 2px solid white;
+          margin: 8px;
+        }
+      }
+
+      &.primary {
+        &.focused {
+          background-color: var(--primary-focus);
+
+          input[type='radio'] {
+            border: 2px solid var(--primary-base);
+          }
+        }
+
+        input[type='radio'] {
+          &:checked {
+            border: 2px solid white;
+            background-color: var(--primary-base);
+            outline: 2px solid var(--primary-base);
+          }
+        }
+
+      }
+
+      &.secondary {
+        &.focused {
+          background-color: var(--secondary-focus);
+
+          input[type='radio'] {
+            border: 2px solid var(--secondary-base);
+          }
+        }
+
+        input[type='radio'] {
+          &:checked {
+            border: 2px solid white;
+            background-color: var(--secondary-base);
+            outline: 2px solid var(--secondary-base);
+          }
+        }
+      }
+
+      &.disabled {
+        cursor: not-allowed;
+
+        input[type='radio'] {
+          &:checked {
+            border: 2px solid white;
+            background-color: var(--typography-light);
+            outline: 2px solid var(--typography-light);
+          }
+        }
+      }
+
+      &.compact {
+        width: 30px;
+        height: 30px;
+
+        input[type='radio'] {
+          width: 18px;
+          height: 18px;
+          margin: 5px;
+
+          &:checked {
+            width: 14px;
+            height: 14px;
+            margin: 7px;
+          }
+        }
+      }
+    }
+
+
+    &.disabled {
+      cursor: not-allowed;
+      opacity: .4;
+
+      label {
+        color: var(--typography-light);
+      }
+    }
+  }
+}

package/src/components/radio/radio.component.ts

@@ -0,0 +1,33 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+    selector: 'fw-radio-button',
+    templateUrl: './radio.component.html',
+    styleUrls: ['./radio.component.scss'],
+})
+export class FwRadioComponent {
+    @Input() checked: boolean = false;
+    @Input() value: string;
+    @Input() group: string;
+    @Input() disabled: boolean = false;
+    @Input() size: 'medium' | 'compact' = 'medium';
+    @Input() color: 'default' | 'primary' | 'secondary' = 'default';
+    @Input() title: string;
+    @Input() focused: boolean = false;
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    @Output() change = new EventEmitter<string>();
+
+    get radioStyles(): string[] {
+        return [
+            'fw-radio',
+            this.color,
+            this.size,
+            this.focused ? 'focused' : '',
+            this.disabled ? 'disabled' : '',
+        ];
+    }
+
+    handleChange(event): void {
+        this.change.emit(event.target.value);
+    }
+}

package/src/components/radio/radio.module.ts

@@ -0,0 +1,24 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { FwRadioComponent } from './radio.component';
+import { FwRadioGroupComponent } from './radio-group.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        ReactiveFormsModule,
+        FormsModule,
+    ],
+    exports: [
+        FwRadioComponent,
+        FwRadioGroupComponent,
+    ],
+    declarations: [
+        FwRadioComponent,
+        FwRadioGroupComponent,
+    ],
+})
+export class FwRadioModule {
+}

package/src/components/radio/radio.stories.ts

@@ -0,0 +1,168 @@
+import { CommonModule } from '@angular/common';
+import { importProvidersFrom } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { FwContainedInputModule } from '../contained-input/contained-input.module';
+import { FwMenuModule } from '../menu/menu.module';
+import { FwTextInputModule } from '../text-input/text-input.module';
+import { FwWrappedInputModule } from '../wrapped-input/wrapped-input.module';
+import { FwRadioComponent } from './radio.component';
+import { FwRadioModule } from './radio.module';
+
+export default {
+  title: 'Form Controls/Radio Button',
+  component: FwRadioComponent,
+  parameters: {
+    controls: {
+      exclude: ['handleClick', 'handleChange'],
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?node-id=4957-72536&m=dev',
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        FwRadioModule,
+        FwContainedInputModule,
+        FwMenuModule,
+        FwTextInputModule,
+        FwWrappedInputModule,
+      ],
+    }),
+    applicationConfig({
+      providers: [
+        importProvidersFrom(BrowserModule),
+        importProvidersFrom(BrowserAnimationsModule),
+      ],
+    }),
+  ],
+} as Meta;
+
+type Story = StoryObj<FwRadioComponent>;
+
+export const RadioButton: Story = {
+  args: {
+    checked: false,
+    focused: false,
+    disabled: false,
+    color: 'primary',
+    size: 'medium',
+    title: '',
+    value: 'radioButton',
+    group: 'radioGroup',
+  },
+};
+
+export const WithMenuItem: Story = {
+  args: {},
+  render: (args) => {
+    return ({
+      props: { ...args, value: 'one' },
+      controls: { disabled: false },
+      template: `
+            <fw-menu [useCheckbox]="true" [multiSelect]="false" [value]="value">
+              <fw-menu-item title="Menu Item One" value="one" showCheckbox="true"></fw-menu-item>
+              <fw-menu-item title="Menu Item Two" value="two"></fw-menu-item>
+              <fw-menu-item title="Menu Item Three" description="Optional" value="three"></fw-menu-item>
+              <fw-menu-item title="Menu Item Four"  icon="icon-placeholder" value="four"></fw-menu-item>
+              <fw-menu-item title="Menu Item Five" description="Optional" icon="icon-placeholder" value="five" disabled="true"></fw-menu-item>
+            </fw-menu>
+    `,
+    });
+  },
+};
+
+export const Overview: Story = {
+  parameters: {
+    controls: {
+      exclude: /.*/g,
+    },
+  },
+  render: (args) => ({
+    props: args,
+    controls: { disabled: true },
+    template: `
+      <div>
+          <style> tr, td, th { padding: 12px; font-family: Inter; } </style>
+          <table>
+              <tr>
+                  <th></th>
+                  <th>primary</th>
+                  <th>secondary</th>
+                  <th>with label</th>
+                  <th>compact</th>
+              </tr>
+              <tr>
+                  <th>unchecked</th>
+                  <td>
+                      <fw-radio-button color="primary" group="primary" value="unchecked"></fw-radio-button>
+                  </td>
+                  <td>
+                      <fw-radio-button color="secondary" group="secondary" value="unchecked"></fw-radio-button>
+                  </td>
+                  <td>
+                      <fw-radio-button color="default" group="label" value="unchecked" size="medium" title="Medium"></fw-radio-button>
+                  </td>
+                  <td>
+                      <fw-radio-button color="default" group="compact" value="unchecked" size="compact" title="Compact"></fw-radio-button>
+                  </td>
+              </tr>
+              <tr>
+                  <th>checked</th>
+                    <td>
+                      <fw-radio-button color="primary" group="primary" value="checked" [checked]="true"></fw-radio-button>
+                  </td>
+                  <td>
+                      <fw-radio-button color="secondary" group="secondary" value="checked" [checked]="true"></fw-radio-button>
+                  </td>
+                  <td>
+                      <fw-radio-button color="default" group="label" value="checked" [checked]="true" size="medium" title="Medium"></fw-radio-button>
+                  </td>
+                  <td>
+                      <fw-radio-button color="default" group="compact" value="checked" [checked]="true" size="compact" title="Compact"></fw-radio-button>
+                  </td>
+              </tr>
+              <tr>
+                  <th>focused</th>
+                   <td>
+                      <fw-radio-button color="primary" group="primary" value="focused" [focused]="true"></fw-radio-button>
+                  </td>
+                  <td>
+                      <fw-radio-button color="secondary" group="secondary" value="focused" [focused]="true"></fw-radio-button>
+                  </td>
+                  <td>
+                      <fw-radio-button color="default" group="label" value="focused" [focused]="true" size="medium" title="Medium"></fw-radio-button>
+                  </td>
+                  <td>
+                      <fw-radio-button color="default" group="compact" value="focused" [focused]="true" size="compact" title="Compact"></fw-radio-button>
+                  </td>
+              </tr>
+               <tr>
+                  <th>disabled</th>
+                   <td>
+                      <fw-radio-button color="primary" group="primary" value="disabled" [disabled]="true"></fw-radio-button>
+                  </td>
+                  <td>
+                      <fw-radio-button color="secondary" group="secondary" value="disabled" [disabled]="true"></fw-radio-button>
+                  </td>
+                  <td>
+                      <fw-radio-button color="default" group="label" value="disabled" [disabled]="true" size="medium" title="Medium"></fw-radio-button>
+                  </td>
+                  <td>
+                      <fw-radio-button color="default" group="compact" value="disabled" [disabled]="true" size="compact" title="Compact"></fw-radio-button>
+                  </td>
+              </tr>
+          </table>
+      </div>
+
+    `,
+  }),
+};

package/src/components/section-heading/back-button/back-button.component.html

@@ -0,0 +1,3 @@
+<button (click)="handleClick()">
+  <fw-icon>arrow-back</fw-icon>
+</button>

package/src/components/section-heading/back-button/back-button.component.scss

@@ -0,0 +1,37 @@
+.fw-back-button {
+  button {
+    color: var(--typography-light);
+    background-color: transparent;
+    border: 1px solid var(--slate-border);
+    width: 44px;
+    height: 44px;
+    border-radius: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    fw-icon {
+      line-height: 42px;
+      font-size: 24px;
+      color: var(--typography-light);
+    }
+
+    &:hover {
+      background-color: var(--primary-hover);
+      border: 1px solid var(--primary-hover);
+
+      fw-icon {
+        color: var(--primary-base);
+      }
+    }
+
+    &:active {
+      background-color: var(--primary-focus);
+      border: 1px solid var(--primary-focus);
+
+      fw-icon {
+        color: var(--primary-base);
+      }
+    }
+  }
+}

package/src/components/section-heading/back-button/back-button.component.spec.ts

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FwIconModule } from '../../icon/icon.module';
+import { FwBackButtonComponent } from './back-button.component';
+
+describe('BackButtonComponent', () => {
+  let component: FwBackButtonComponent;
+  let fixture: ComponentFixture<FwBackButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FwIconModule],
+      declarations: [FwBackButtonComponent],
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FwBackButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/components/section-heading/back-button/back-button.component.ts

@@ -0,0 +1,24 @@
+import { Location } from '@angular/common';
+import { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'fw-back-button',
+  templateUrl: './back-button.component.html',
+  styleUrls: ['./back-button.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class FwBackButtonComponent {
+  @Input() backFunction?: () => {};
+  @HostBinding('attr.class') class = 'fw-back-button';
+
+  constructor(public location: Location) {
+  }
+
+  handleClick(): void {
+    if (this.backFunction) {
+      this.backFunction();
+    } else {
+      this.location.back();
+    }
+  }
+}

package/src/components/section-heading/back-button/back-button.stories.ts

@@ -0,0 +1,39 @@
+// 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 { FwIconModule } from '../../icon/icon.module';
+import { FwSectionHeadingModule } from '../section-heading.module';
+import { FwBackButtonComponent } from './back-button.component';
+
+export default {
+  title: 'Components/Section Heading',
+  component: FwBackButtonComponent,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?node-id=2925-82469&mode=dev',
+    },
+  },
+  argTypes: {},
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        FwIconModule,
+        FwSectionHeadingModule,
+      ],
+    }),
+  ],
+} as Meta;
+
+type Story = StoryObj<
+  FwBackButtonComponent & {
+  children?: unknown;
+}
+>;
+
+export const BackButtonOnly: Story = {
+  args: {},
+};
+

package/src/components/section-heading/section-heading.component.html

@@ -0,0 +1,15 @@
+<div class="heading-area">
+  <fw-back-button *ngIf="backButton" [backFunction]="backFunction"></fw-back-button>
+  <fw-icon *ngIf="icon" class="heading-icon">{{ icon }}</fw-icon>
+  <ng-content select="fw-icon"></ng-content>
+  <div>
+    <h2 class="vision-h2 section-heading">{{ title }}
+      <ng-content select="fw-chip"></ng-content>
+    </h2>
+    <p *ngIf="description" class="vision-p2">{{ description }}</p>
+    <ng-content select="p"></ng-content>
+  </div>
+</div>
+<div class="right-content">
+  <ng-content></ng-content>
+</div>