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

package/src/components/dialog/dialog.mdx

@@ -1,252 +0,0 @@
-import {Canvas, Meta, Story} from '@storybook/addon-docs';
-import * as DialogStories from './dialog.stories'
-import * as DialogSimpleStories from './dialog-simple.stories'
-import * as DialogConfirmStories from './dialog-confirm.stories'
-
-<Meta of={DialogStories}/>
-
-# Dialog
-
-```ts
-import FwDialogsModule from '@flywheel-io/vision';
-```
-
-This is the new Vision **Dialog** layout component to be used with [FwDialogService](#dialog-service) or [CdkDialog](https://v14.material.angular.io/cdk/dialog/overview)
-
-*If you are looking for the previous **legacy version** dialog has been moved to [here](/docs/legacy-dialog-choice-dialog--docs)*
-
-
-There are 3 variants of the Dialog made available.
-
- - FwDialogComponent `<fw-dialog></fw-dialog>` (The base component to customize completely)
- - FwDialogConfirmComponent `<fw-dialog-confirm></fw-dialog-confirm>`
- - FwDialogSimpleComponent `<fw-dialog-simple></fw-dialog-simple>`
-
-```css
-/* NOTE: if the dialog is not showing up like expected make sure you have included */
-/* the following line in your global.scss as documented in the "Getting Started" */
-@include vision.overlay;
-```
-
-## Usage
-
-You can either instantiate the Simple or Confirm Dialog [Inline](#inline-dialog-approach) or make a [Custom Component](#custom-component) and have full control of the layout.
-
-### Fully customizable `fw-dialog` component
-
-```html title="your-dialog.component.html"
-<!-- your-dialog.component.html -->
-
-<fw-dialog [width]="small" showClose="true" title="A Simple Title can go here">
-  <fw-dialog-header>
-      <h3>Or you can make a more custom dialog header with this.</h3>
-  </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>
-     <fw-button variant="outline" (click)="dialogRef.close()">Cancel</fw-button>
-     <fw-button (click)="action()">Save</fw-button>
-  </fw-dialog-actions>
-</fw-dialog>
-```
-
-add the ts code, all that is needed is the `DialogRef` reference, but here we show a more complete example to pass in custom data as well.
-
-```ts filename="your-dialog.component.ts"
-// your-dialog.component.ts
-
-import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';
-import { Component, Inject } from '@angular/core';
-
-export interface DialogData {
-    animal: 'panda' | 'unicorn' | 'lion';
-}
-
-@Component({
-    selector: 'app-your-dialog',
-    templateUrl: './your-dialog.component.html',
-    styleUrls: ['./your-dialog.component.scss'],
-})
-export class YourDialogComponent {
-    constructor(
-        public dialogRef: DialogRef,
-        @Inject(DIALOG_DATA) public data?: DialogData,
-    ) { }
-
-    action():void {
-        // your action methods here
-        this.dialogRef.close(this.data.animal);
-    }
-}
-
-```
-
-in your calling component open the dialog like this, as well as an example to pass in data
-
-```ts filename="your.component.ts"
-// your.component.ts
-
-import { FwDialogService } from "./dialog.service";
-
-export class SandboxComponent {
-  constructor(public dialog: FwDialogService) { }
-
-  showDialog(): void {
-    const dlg = this.dialog.openDialog(YourDialogComponent, {
-      data: { animal: 'panda' },
-    });
-    dlg.closed.subscribe(result => { console.log('result', result); // panda })
-  }
-}
-```
-
-<Story of={DialogSimpleStories.DialogSimple}></Story>
-
-### Dialog Service
-
-Using the FwDialogService and its `openDialog` will automatically set the backdrop overlay class and position the dialog to the default at 125px from the top, centered horizontally.
-
-```ts
-// your.component.ts
-import { FwDialogService } from '@flywheel-io/vision';
-
-export class YourComponent {
-  constructor(public dialog: FwDialogService) {
-
-  }
-
-  openYourDialog(): void {
-    // open dialog 15% viewport height from the top
-    const dlg = this.dialog.openDialog(YourDialogComponent, {
-      data: {},
-    }, '15vh');  // optional offset value if you need to adjust
-    dlg.closed.subscribe(result => { console.log('result', result); })
-  }
-}
-```
-
-*optionally you can also use the cdk Dialog class for managing opening and closing dialogs (as shown in the [alternate approach](#alternate-approaches);) below) as the FwDialogService is written on top of that.*
-
-### Custom Backdrop Overlay Class
-
-If you are using the default CDK Dialog, and it's `open` method, you will want to
-set a custom css class for your backdrop overlay. To do this modify your `app.module.ts` file and add the following to the providers section.
-```ts filename="app.module.ts"
-// app.module.ts
-
-import { DEFAULT_DIALOG_CONFIG, DialogConfig, DialogModule } from '@angular/cdk/dialog';
-import { FwDialogsModule } from '@flywheel-io/vision';
-
-@NgModule({
-  imports: [
-      FwDialogsModule
-  ],
-  providers: [
-    {
-      provide: DEFAULT_DIALOG_CONFIG,
-      useValue: {
-        ...new DialogConfig(),
-        backdropClass: 'vision-overlay',
-      },
-    },
-  ]
-})
-```
-
-## Alternate Approaches
-
-### Inline Dialog Approach
-
-Add a reference to the CdkDialog to your calling component
-
-```ts
-// your.component.ts
-
-import { Dialog } from '@angular/cdk/dialog';
-
-export class YourComponent {
-  constructor(public dialog: Dialog) { }
-
-  YourCallingMethod() {
-    const confirmDialog = this.dialog.open(FwDialogConfirmComponent, {},);
-    confirmDialog.componentInstance.title = 'Confirm';
-    confirmDialog.componentInstance.contentTitle = 'Are you sure?';
-    confirmDialog.componentInstance.confirmButtonText = 'Confirm';
-    confirmDialog.componentInstance.confirm.subscribe(() => {
-          // things you want to do on confirmation
-          confirmDialog.close();
-    });
-  }
-}
-```
-
-<Story of={DialogConfirmStories.DialogConfirm}></Story>
-
-and you're done!
-
-### Custom Component Approach
-
-Add the html layout for the `fw-dialog-simple` component
-
-```html title="your-dialog.component.html"
-<!-- your-dialog.component.html -->
-
-<fw-dialog-simple
-  width="small"
-  title="Dialog Header"
-  actionButtonText="Save"
-  cancelButtonText="Cancel"
-  contentText="Lorem ipsum dolor sit amet..."
-  (close)="close()"
-  (action)="action()">
-</fw-dialog-simple>
-```
-
-or a slightly more complex content via
-
-```html title="your-dialog.component.html"
-<!-- your-dialog.component.html -->
-
-<fw-dialog-simple
-  width="small"
-  title="Dialog Header"
-  actionButtonText="Save"
-  cancelButtonText="Cancel"
-  (close)="close()"
-  (action)="action()">
-    <fw-dialog-content>
-      <div style="padding: 15px">
-        <p>Lorem ipsum dolor sit amet...</p>
-        <p>Ut enim ad minim veniam...</p>
-      </div>
-    </fw-dialog-content>
-</fw-dialog-simple>
-```
-
-<Canvas of={DialogSimpleStories.DialogSimpleContent}/>
-
-
-## Other Examples
-
-### Confirm Dialog With Custom Properties
-<Canvas of={DialogConfirmStories.DialogConfirmIcon}/>
-
-### Custom Dialog with only Choice Actions
-<Canvas of={DialogStories.DialogOnlyActions}/>
-
-### Custom Dialog with no Header
-<Canvas of={DialogStories.DialogNoHeader}/>
-
-### Custom Dialog with an Easy Header
-<Canvas of={DialogStories.DialogEasyHeader}/>
-
-### A More Complex Custom Dialog with Material Tab Component embedded
-<Canvas of={DialogStories.DialogWithTabs}/>
-

package/src/components/dialog/dialog.service.ts

@@ -1,34 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { DEFAULT_DIALOG_CONFIG, Dialog, DIALOG_SCROLL_STRATEGY, DialogConfig, DialogRef } from '@angular/cdk/dialog';
-import { ComponentType, Overlay, OverlayContainer } from '@angular/cdk/overlay';
-import { Inject, Injectable, Injector, Optional, SkipSelf } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class FwDialogService extends Dialog {
-  constructor(private overlay: Overlay,
-              _injector: Injector,
-              public injector: Injector,
-              @Optional() @Inject(DEFAULT_DIALOG_CONFIG) _dialogConfig: DialogConfig,
-              public _overlayContainerRef: OverlayContainer,
-              @Inject(DIALOG_SCROLL_STRATEGY) scrollStrategy: any,
-              @Optional() @SkipSelf() _parentDialog: Dialog,
-              @Optional() public dialogRef: DialogRef<any>) {
-    super(overlay, _injector, _dialogConfig, _parentDialog, _overlayContainerRef, scrollStrategy);
-  }
-
-  /**
-   * Open a custom component in an overlay and positioned near the top
-   */
-  openDialog<T>(component: ComponentType<T>, config?: DialogConfig, topOffset?: string): DialogRef<unknown, any> {
-    const defaultSettings = {
-      backdropClass: 'vision-overlay',
-      positionStrategy: this.overlay.position().global().top(topOffset ? topOffset : '10vh').centerHorizontally(),
-    };
-
-    config = { ...config, ...defaultSettings };
-    return super.open(component, config);
-
-  }
-}

package/src/components/dialog/dialog.stories.ts

@@ -1,169 +0,0 @@
-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 { FwButtonModule } from '../button/button.module';
-import { FwIconModule } from '../icon/icon.module';
-import { FwTabsModule } from '../tabs/tabs.module';
-import { DialogWidth, FwDialogComponent } from './dialog.component';
-import { FwDialogsModule } from './dialogs.module';
-
-const meta: Meta = {
-  title: 'Components/Dialogs',
-  component: FwDialogComponent,
-  parameters: {
-    controls: {},
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=845-33184&mode=design&t=g3H9aeapDmPYz5Dv-11',
-    },
-  },
-  decorators: [
-    applicationConfig({
-      providers: [importProvidersFrom([
-        BrowserAnimationsModule,
-      ])],
-    }),
-    moduleMetadata({
-      imports: [
-        CommonModule,
-        FwButtonModule,
-        FwDialogsModule,
-        FwIconModule,
-        FwTabsModule,
-      ],
-    }),
-  ],
-};
-export default meta;
-
-type Story = StoryObj<FwDialogComponent & {
-  'fw-dialog-header'?: string,
-  'fw-dialog-content'?: string,
-  'fw-dialog-actions'?: string,
-}>;
-
-export const Dialog: Story = {
-  args: {
-    width: DialogWidth.Small,
-    showClose: true,
-    'fw-dialog-header':
-      '<fw-icon style="font-size: 20px; color: var(--primary-base)">add-circle</fw-icon><h3>Dialog Title</h3>',
-    'fw-dialog-content': '<p style="padding: 15px;">Dialog Content</p>',
-    'fw-dialog-actions': '<fw-button variant="outline">Sub Action</fw-button><fw-button>Main Action</fw-button>',
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-      <fw-dialog [width]="width" [showClose]="showClose">
-        <fw-dialog-header>${args['fw-dialog-header']}</fw-dialog-header>
-        <fw-dialog-content>${args['fw-dialog-content']}</fw-dialog-content>
-        <fw-dialog-actions>${args['fw-dialog-actions']}</fw-dialog-actions>
-      </fw-dialog>
-    `,
-  }),
-};
-
-export const DialogEasyHeader: Story = {
-  args: {
-    width: DialogWidth.Small,
-    showClose: true,
-    title: 'File: y2mate.is - Colonoscopic Polypectomy BD ENDOSCOPY-JhbXMvNv_oM-480pp-1706726658.mp4',
-    icon: 'download',
-    iconColor: 'primary',
-    'fw-dialog-content': '<p style="padding: 15px;">Dialog Content</p>',
-    'fw-dialog-actions': '<fw-button variant="outline">Sub Action</fw-button><fw-button>Main Action</fw-button>',
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-      <fw-dialog [width]="width" [title]="title" [icon]="icon" [iconColor]="iconColor" [showClose]="showClose">
-        <fw-dialog-content>${args['fw-dialog-content']}</fw-dialog-content>
-        <fw-dialog-actions>${args['fw-dialog-actions']}</fw-dialog-actions>
-      </fw-dialog>
-    `,
-  }),
-};
-
-export const DialogNoHeader: Story = {
-  args: {
-    width: DialogWidth.Small,
-    showClose: false,
-    'fw-dialog-content':
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-    'fw-dialog-actions': '<fw-button variant="outline">Sub Action</fw-button><fw-button>Main Action</fw-button>',
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-      <fw-dialog [width]="width" [showClose]="showClose">
-        <fw-dialog-content>
-            <p style="padding: 16px; margin: 0; color: var(--typography-muted);">${args['fw-dialog-content']}</p>
-        </fw-dialog-content>
-        <fw-dialog-actions>${args['fw-dialog-actions']}</fw-dialog-actions>
-      </fw-dialog>
-    `,
-  }),
-};
-
-export const DialogOnlyActions: Story = {
-  args: {
-    width: DialogWidth.ExtraSmall,
-    showClose: false,
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-      <fw-dialog [width]="width" [showClose]="showClose">
-        <fw-dialog-actions>
-            <div style="flex: 1; display: flex; align-items: center; justify-content: space-between">
-              <p>Choose Wisely: </p>
-              <fw-button color="danger">Choice1</fw-button>
-              <fw-button color="success">Choice2</fw-button>
-              <fw-button>Choice3</fw-button>
-            </div>
-        </fw-dialog-actions>
-      </fw-dialog>
-    `,
-  }),
-};
-
-export const DialogWithTabs: Story = {
-  args: {
-    width: DialogWidth.Medium,
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-      <fw-dialog [width]="width">
-        <fw-dialog-header>
-          <h3>Dialog With Tabs</h3>
-        </fw-dialog-header>
-        <fw-dialog-content>
-          <fw-tabs activeTabIndex="0" style="border-bottom: 1px solid var(--separations-base);">
-            <fw-tab title="Tab 1" icon="icon-placeholder" [panel]="panel1"></fw-tab>
-            <fw-tab title="Tab 2" icon="icon-placeholder" [panel]="panel2"></fw-tab>
-            <fw-tab title="Tab 3" icon="icon-placeholder" [panel]="panel3"></fw-tab>
-            <fw-tab title="Tab 4" icon="icon-placeholder" [panel]="panel4"></fw-tab>
-            <fw-tab title="Tab 5" icon="icon-placeholder" [panel]="panel5"></fw-tab>
-          </fw-tabs>
-          <fw-tab-panel #panel1><p style="padding: 15px;">Lorem ipsum 1 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-tab-panel>
-          <fw-tab-panel #panel2><p style="padding: 15px;">Lorem ipsum 2 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-tab-panel>
-          <fw-tab-panel #panel3><p style="padding: 15px;">Lorem ipsum 3 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-tab-panel>
-          <fw-tab-panel #panel4><p style="padding: 15px;">Lorem ipsum 4 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-tab-panel>
-          <fw-tab-panel #panel5><p style="padding: 15px;">Lorem ipsum 5 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-tab-panel>
-        </fw-dialog-content>
-        <fw-dialog-actions>
-          <fw-button variant="outline" color="danger" leftIcon="trash-delete">Button Text</fw-button>
-          <fw-button variant="solid" color="primary" leftIcon="floppy-save">Button Text</fw-button>
-        </fw-dialog-actions>
-      </fw-dialog>
-    `,
-  }),
-};

package/src/components/dialog/dialogs.module.ts

@@ -1,47 +0,0 @@
-import { DialogModule } from '@angular/cdk/dialog';
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-import { FwButtonModule } from '../button/button.module';
-import { FwIconModule } from '../icon/icon.module';
-import { FwIconButtonModule } from '../icon-button/icon-button.module';
-import { PipesModule } from '../shared/pipes/pipes.module';
-import { FwDialogComponent } from './dialog.component';
-import { FwDialogService } from './dialog.service';
-import { FwDialogActionsComponent } from './dialog-actions.component';
-import { FwDialogConfirmComponent } from './dialog-confirm.component';
-import { FwDialogContentComponent } from './dialog-content.component';
-import { FwDialogHeaderComponent } from './dialog-header.component';
-import { FwDialogSimpleComponent } from './dialog-simple.component';
-
-@NgModule({
-  declarations: [
-    FwDialogActionsComponent,
-    FwDialogComponent,
-    FwDialogConfirmComponent,
-    FwDialogContentComponent,
-    FwDialogHeaderComponent,
-    FwDialogSimpleComponent,
-  ],
-  imports: [
-    CommonModule,
-    DialogModule,
-    FwButtonModule,
-    FwIconButtonModule,
-    FwIconModule,
-    PipesModule,
-  ],
-  exports: [
-    FwDialogActionsComponent,
-    FwDialogComponent,
-    FwDialogConfirmComponent,
-    FwDialogContentComponent,
-    FwDialogHeaderComponent,
-    FwDialogSimpleComponent,
-  ],
-  providers: [
-    FwDialogService,
-  ],
-})
-export class FwDialogsModule {
-}

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

@@ -1,15 +0,0 @@
-<div class="heading-area">
-  <div>
-    <h4 class="vision-h4 section-heading">{{ title }}
-      <span *ngIf="status" class="status">{{ status.toUpperCase() }}</span>
-      <ng-content select="fw-tooltip"></ng-content>
-      <ng-content select="fw-icon"></ng-content>
-      <ng-content select="fw-chip"></ng-content>
-    </h4>
-    <p class="vision-p3" *ngIf="description">{{ description }}</p>
-    <ng-content select="p"></ng-content>
-  </div>
-</div>
-<div class="right-content">
-  <ng-content></ng-content>
-</div>

package/src/components/form-heading/form-heading.component.scss

@@ -1,55 +0,0 @@
-.fw-form-heading {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 8px;
-
-  .heading-area {
-    display: flex;
-    align-items: center;
-    padding-left: 4px;
-    margin-bottom: 8px;
-
-    h4 {
-      color: var(--typography-base);
-      margin: 0;
-      display: flex;
-      align-items: center;
-      gap: 5px;
-
-      .status {
-        color: var(--primary-base);
-      }
-    }
-
-    p {
-      color: var(--typography-muted);
-      margin: 0;
-      line-height: 140%;
-      display: flex;
-      align-items: center;
-      gap: 3px;
-
-      a {
-        color: var(--typography-muted);
-      }
-    }
-
-    fw-icon.heading-icon {
-      box-sizing: border-box;
-      color: var(--primary-base);
-      width: 44px;
-      height: 44px;
-      font-size: 32px;
-      text-align: center;
-      justify-content: center;
-      padding: 6px;
-    }
-  }
-
-  .right-content {
-    display: flex;
-    gap: 8px;
-  }
-}

package/src/components/form-heading/form-heading.component.spec.ts

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

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

@@ -1,17 +0,0 @@
-import { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';
-
-@Component({
-  selector: 'fw-form-heading',
-  templateUrl: './form-heading.component.html',
-  styleUrls: ['./form-heading.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-})
-export class FwFormHeadingComponent {
-  @HostBinding('attr.class') class = 'fw-form-heading';
-  @Input() title: string;
-  @Input() description?: string;
-  @Input() status?: string;
-
-  constructor() {
-  }
-}

package/src/components/form-heading/form-heading.mdx

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

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

@@ -1,22 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-import { FwButtonModule } from '../button/button.module';
-import { FwIconModule } from '../icon/icon.module';
-import { FwFormHeadingComponent } from './form-heading.component';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    FwButtonModule,
-    FwIconModule,
-  ],
-  exports: [
-    FwFormHeadingComponent,
-  ],
-  declarations: [
-    FwFormHeadingComponent,
-  ],
-})
-export class FwFormHeadingModule {
-}