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

package/src/components/button/button.component.scss

@@ -0,0 +1,129 @@
+@use 'sass:list';
+@use "sass:map";
+
+:host {
+  &.full-width {
+    flex: 1;
+    display: flex;
+
+    button {
+      flex: 1;
+    }
+  }
+}
+
+button {
+  cursor: pointer;
+  font-family: Inter, sans-serif;
+  font-size: 14px;
+  line-height: 14px;
+  font-style: normal;
+  font-weight: 500;
+  display: inline-flex;
+  height: 36px;
+  padding: 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  border: 1px solid transparent;
+  border-radius: 8px;
+
+  .spacer {
+    height: 18px;
+    width: 0;
+    margin-left: -8px;
+  }
+
+  fw-icon {
+    height: 18px;
+    font-size: 20px;
+    width: 20px;
+    min-width: 20px;
+  }
+
+  span {
+    white-space: nowrap;
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+
+// Size Classes
+.large {
+  font-size: 16px;
+  height: 40px;
+  padding: 12px 14px;
+
+  fw-icon {
+    font-size: 24px;
+    width: 24px;
+    min-width: 24px;
+  }
+}
+
+.small {
+  height: 30px;
+  padding: 12px 10px;
+}
+
+// Generate color and variant classes
+$colors: primary, secondary, slate, danger, skeleton, warning, success;
+$variants: solid, ghost, outline, progress;
+$color-names-to-vars: ("primary": primary, "secondary": secondary, "danger": red, "slate": slate, "warning": orange, "success": green);
+
+@each $color in $colors {
+  @each $variant in $variants {
+    // map from danger to red for example
+    $var-name: map.get($color-names-to-vars, $color);
+
+    .#{$color}-#{$variant} {
+      @if $variant == solid {
+        background-color: var(--#{$var-name}-base);
+        color: var(--typography-contrast);
+
+        &:hover {
+          background-color: var(--#{$var-name}-medium);
+        }
+
+        &:active {
+          background-color: var(--#{$var-name}-dark);
+        }
+      } @else {
+        // ghost and outline share all colors so we can just else here
+        background-color: transparent;
+        color: var(--#{$var-name}-base);
+
+        &:hover {
+          background-color: var(--#{$var-name}-hover);
+        }
+
+        &:active {
+          background-color: var(--#{$var-name}-focus);
+        }
+      }
+
+      // add border to outline variant
+      @if $variant == outline {
+        border: 1px solid var(--separations-base);
+      }
+      @if $variant == progress {
+        background-color: var(--#{$var-name}-hover);
+        color: var(--#{$var-name}-base);
+
+        span {
+          opacity: .6;
+        }
+
+        &:disabled {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+      }
+    }
+
+  }
+}

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

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FwProgressModule } from '../progress/progress.module';
+import { FwButtonComponent } from './button.component';
+import { FwButtonModule } from './button.module';
+
+describe('FwButtonComponent', () => {
+  let component: FwButtonComponent;
+  let fixture: ComponentFixture<FwButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FwButtonModule, FwProgressModule],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FwButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/components/button/button.component.ts

@@ -0,0 +1,40 @@
+import { Component, HostBinding, Input } from '@angular/core';
+
+import { IconType } from '../icon/icon.types';
+
+@Component({
+  selector: 'fw-button',
+  styleUrls: ['./button.component.scss'],
+  templateUrl: './button.component.html',
+})
+export class FwButtonComponent {
+  @HostBinding('attr.class') get classes(): string {
+    return ['fw-button', this.size, this.fullWidth ? 'full-width' : null].filter(Boolean).join(' ');
+  }
+
+  @Input() color?: 'primary' | 'secondary' | 'danger' | 'slate' | 'skeleton' | 'warning' | 'success' = 'primary';
+  @Input() size?: 'small' | 'medium' | 'large' = 'medium';
+  @Input() variant?: 'ghost' | 'solid' | 'outline' | 'progress' = 'solid';
+  @Input() type?: 'button' | 'submit' | 'reset';
+  @Input() disabled?: boolean = false;
+  @Input() fullWidth?: boolean = false;
+  @Input() leftIcon?: IconType;
+  @Input() rightIcon?: IconType;
+
+  getMappedColor(): 'primary' | 'secondary' | 'red' | 'slate' | 'orange' | 'green' | undefined {
+    switch (this.color) {
+      case 'primary':
+      case 'secondary':
+      case 'slate':
+        return this.color;
+      case 'danger':
+        return 'red';
+      case 'warning':
+        return 'orange';
+      case 'success':
+        return 'green';
+      default:
+        return undefined;
+    }
+  }
+}

package/src/components/button/button.directives.ts

@@ -0,0 +1,93 @@
+import { Directive, HostBinding } from '@angular/core';
+import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
+
+@Directive({
+  selector: '[fwButton]',
+})
+export class FwButtonDirective {
+  @HostBinding('style') get style(): SafeStyle {
+    return this.sanitizer.bypassSecurityTrustStyle(`
+      font-family: Inter, sans-serif;
+      font-size: 14px;
+      line-height: 14px;
+      font-style: normal;
+      font-weight: 500;
+      display: inline-flex;
+      height: 36px;
+      padding: 12px;
+      justify-content: center;
+      align-items: center;
+      gap: 8px;
+      flex-shrink: 0;
+      border: 1px solid transparent;
+      border-radius: 8px;
+      background-color: var(--slate-light);
+      color: var(--typography-base);
+      cursor: pointer;
+  `);
+  }
+
+  constructor(private sanitizer: DomSanitizer) {
+  }
+}
+
+
+@Directive({
+  selector: '[fwButtonPrimary]',
+})
+export class FwButtonPrimaryDirective {
+  @HostBinding('style') get style(): SafeStyle {
+    return this.sanitizer.bypassSecurityTrustStyle(`
+      background-color: var(--primary-base) !important;
+      color: var(--typography-contrast);
+  `);
+  }
+
+  constructor(private sanitizer: DomSanitizer) {
+  }
+}
+
+@Directive({
+  selector: '[fwButtonSecondary]',
+})
+export class FwButtonSecondaryDirective {
+  @HostBinding('style') get style(): SafeStyle {
+    return this.sanitizer.bypassSecurityTrustStyle(`
+      background-color: var(--secondary-base) !important;
+      color: var(--typography-contrast);
+  `);
+  }
+
+  constructor(private sanitizer: DomSanitizer) {
+  }
+}
+
+@Directive({
+  selector: '[fwButtonDanger]',
+})
+export class FwButtonDangerDirective {
+  @HostBinding('style') get style(): SafeStyle {
+    return this.sanitizer.bypassSecurityTrustStyle(`
+      background-color: var(--red-base) !important;
+      color: var(--typography-contrast);
+  `);
+  }
+
+  constructor(private sanitizer: DomSanitizer) {
+  }
+}
+
+@Directive({
+  selector: '[fwButtonSuccess]',
+})
+export class FwButtonSuccessDirective {
+  @HostBinding('style') get style(): SafeStyle {
+    return this.sanitizer.bypassSecurityTrustStyle(`
+      background-color: var(--green-base) !important;
+      color: var(--typography-contrast);
+  `);
+  }
+
+  constructor(private sanitizer: DomSanitizer) {
+  }
+}

package/src/components/button/button.mdx

@@ -0,0 +1,16 @@
+import { Title, Subtitle, Description, Primary, Controls, Stories, Meta } from '@storybook/blocks';
+
+import * as ButtonStories from './button.stories';
+
+<Meta of={ButtonStories}/>
+<Title />
+
+```ts
+import FwButtonModule from '@flywheel-io/vision';
+```
+
+<Subtitle />
+<Description />
+<Primary />
+<Controls />
+<Stories />

package/src/components/button/button.module.ts

@@ -0,0 +1,39 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { FwIconModule } from '../icon/icon.module';
+import { FwProgressModule } from '../progress/progress.module';
+import { FwButtonComponent } from './button.component';
+import {
+  FwButtonDangerDirective,
+  FwButtonDirective,
+  FwButtonPrimaryDirective,
+  FwButtonSecondaryDirective,
+  FwButtonSuccessDirective,
+} from './button.directives';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FwIconModule,
+    FwProgressModule,
+  ],
+  exports: [
+    FwButtonComponent,
+    FwButtonDirective,
+    FwButtonDangerDirective, // these need to come after the main directive
+    FwButtonPrimaryDirective,
+    FwButtonSecondaryDirective,
+    FwButtonSuccessDirective,
+  ],
+  declarations: [
+    FwButtonComponent,
+    FwButtonDirective,
+    FwButtonDangerDirective, // these need to come after the main directive
+    FwButtonPrimaryDirective,
+    FwButtonSecondaryDirective,
+    FwButtonSuccessDirective,
+  ],
+})
+export class FwButtonModule {
+}

package/src/components/button/button.stories.ts

@@ -0,0 +1,165 @@
+// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
+import { CommonModule } from '@angular/common';
+import { Meta, moduleMetadata, StoryFn, StoryObj } from '@storybook/angular';
+
+import { FwProgressModule } from '../progress/progress.module';
+import { FwButtonComponent } from './button.component';
+import { FwButtonModule } from './button.module';
+
+export default {
+  title: 'Components/Button',
+  component: FwButtonComponent,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=5-17&mode=design&t=nWWUp7Uaipn1gnod-0',
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        FwButtonModule,
+        FwProgressModule,
+      ],
+    }),
+  ],
+
+} as Meta;
+
+const overviewTemplate: StoryFn<FwButtonComponent> = (args: {}) => ({
+  props: args,
+  controls: { disabled: true },
+  template: `
+    <style>
+      tr, td, th {
+        padding: 8px;
+        text-align: center;
+        font-family: Inter;
+      }
+    </style>
+    <table>
+      <tr>
+        <th></th>
+        <th>Primary</th>
+        <th>Secondary</th>
+        <th>Warning</th>
+        <th>Danger</th>
+        <th>Success</th>
+        <th>Slate</th>
+      </tr>
+      <tr>
+        <th>Solid</th>
+        <td>
+          <fw-button variant="solid" color="primary">Button Text</fw-button>
+        </td>
+        <td>
+          <fw-button variant="solid" color="secondary">Button Text</fw-button>
+        </td>
+        <td>
+          <fw-button variant="solid" color="warning">Button Text</fw-button>
+        </td>
+        <td>
+          <fw-button variant="solid" color="danger">Button Text</fw-button>
+        </td>
+        <td>
+          <fw-button variant="solid" color="success">Button Text</fw-button>
+        </td>
+        <td>
+          <fw-button variant="solid" color="slate">Button Text</fw-button>
+        </td>
+      </tr>
+      <tr>
+        <th>Ghost</th>
+        <td>
+          <fw-button variant="ghost" color="primary">Button Text</fw-button>
+        </td>
+        <td>
+          <fw-button variant="ghost" color="secondary">Button Text</fw-button>
+        </td>
+        <td>
+          <fw-button variant="ghost" color="warning">Button Text</fw-button>
+        </td>
+        <td>
+          <fw-button variant="ghost" color="danger">Button Text</fw-button>
+        </td>
+        <td>
+          <fw-button variant="ghost" color="success">Button Text</fw-button>
+        </td>
+        <td>
+          <fw-button variant="ghost" color="slate">Button Text</fw-button>
+        </td>
+      </tr>
+      <tr>
+        <th>Outline</th>
+        <td>
+          <fw-button variant="outline" color="primary">Button Text</fw-button>
+        </td>
+        <td>
+          <fw-button variant="outline" color="secondary">Button Text</fw-button>
+        </td>
+        <td>
+          <fw-button variant="outline" color="warning">Button Text</fw-button>
+        </td>
+        <td>
+          <fw-button variant="outline" color="danger">Button Text</fw-button>
+        </td>
+        <td>
+          <fw-button variant="outline" color="success">Button Text</fw-button>
+        </td>
+        <td>
+          <fw-button variant="outline" color="slate">Button Text</fw-button>
+        </td>
+      </tr>
+      <tr>
+        <th>Progress</th>
+        <td>
+          <fw-button variant="progress" color="primary">Button Text</fw-button>
+        </td>
+        <td>
+          <fw-button variant="progress" color="secondary">Button Text</fw-button>
+        </td>
+        <td>
+          <fw-button variant="progress" color="warning">Button Text</fw-button>
+        </td>
+        <td>
+          <fw-button variant="progress" color="danger">Button Text</fw-button>
+        </td>
+        <td>
+          <fw-button variant="progress" color="success">Button Text</fw-button>
+        </td>
+        <td>
+          <fw-button variant="progress" color="slate">Button Text</fw-button>
+        </td>
+      </tr>
+    </table>
+  `,
+});
+
+export const Overview = overviewTemplate.bind({});
+
+type Story = StoryObj<FwButtonComponent & {
+  'children'?: string,
+}>;
+
+export const Playground: Story = {
+  args: {
+    color: 'primary',
+    size: 'medium',
+    variant: 'solid',
+    leftIcon: undefined,
+    rightIcon: 'icon-placeholder',
+    disabled: false,
+    fullWidth: false,
+    children: 'Button Text',
+  },
+  render: (args) => ({
+    props: args,
+    controls: { disabled: false },
+    template: `
+        <fw-button [color]="color" [variant]="variant" [size]="size" [leftIcon]="leftIcon" [disabled]="disabled" [rightIcon]="rightIcon" [fullWidth]="fullWidth">
+            ${args.children}
+        </fw-button>
+        `,
+  }),
+};

package/src/components/button-group/button-group.component.scss

@@ -0,0 +1,94 @@
+fw-button-group.fw-button-group {
+  box-sizing: border-box;
+  border-radius: 8px;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: stretch;
+
+  .fw-button-toggle-item.no-title {
+    button {
+      gap: 0;
+    }
+  }
+
+  button {
+    min-width: 0;
+    margin: 0 !important;
+    border-radius: 0;
+    border: 1px solid var(--separations-input);
+    border-right-width: 0 !important;
+  }
+
+  > button {
+    &:first-of-type {
+      border-top-left-radius: 8px;
+      border-bottom-left-radius: 8px;
+    }
+
+    &:last-of-type {
+      border-top-right-radius: 8px;
+      border-bottom-right-radius: 8px;
+      border-right-width: 1px;
+    }
+  }
+
+  &.compact button {
+    line-height: 24px;
+    height: 24px;
+  }
+
+  &.small button {
+    font-size: 12px;
+  }
+
+  &.medium button {
+    font-size: 14px;
+  }
+
+  &.large button {
+    font-size: 18px;
+  }
+
+  > fw-button-toggle-item {
+    &:last-of-type {
+      button {
+        border-top-right-radius: 8px;
+        border-bottom-right-radius: 8px;
+        border-right-width: 1px !important;
+      }
+    }
+
+    &:first-of-type {
+      button {
+        border-top-left-radius: 8px;
+        border-bottom-left-radius: 8px;
+      }
+    }
+  }
+
+  fw-tooltip {
+    fw-button-toggle-item {
+      button {
+        border-radius: 0 !important;
+        border-right-width: 0 !important;
+      }
+    }
+
+    &:last-of-type {
+      fw-button-toggle-item {
+        button {
+          border-radius: 0 8px 8px 0 !important;
+          border-right-width: 1px !important;
+        }
+      }
+    }
+
+    &:first-of-type {
+      fw-button-toggle-item {
+        button {
+          border-radius: 8px 0 0 8px !important;
+        }
+      }
+    }
+  }
+}