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

package/src/components/select-menu/select-menu.stories.ts

@@ -0,0 +1,368 @@
+import { CdkMenuModule } from '@angular/cdk/menu';
+import { CdkScrollableModule } from '@angular/cdk/scrolling';
+import { CommonModule } from '@angular/common';
+import { importProvidersFrom } from '@angular/core';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } 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 { FwIconModule } from '../icon/icon.module';
+import { FwMenuModule } from '../menu/menu.module';
+import { FwTextInputModule } from '../text-input/text-input.module';
+import { FwWrappedInputModule } from '../wrapped-input/wrapped-input.module';
+import { FwSelectMenuComponent } from './select-menu.component';
+import { FwSelectMenuModule } from './select-menu.module';
+
+export default {
+  title: 'Form Controls/Select',
+  component: FwSelectMenuComponent,
+  parameters: {
+    controls: {},
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=4959-73505&mode=design&t=oWH7ZDZej5cyHY4O-11',
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CdkMenuModule,
+        CdkScrollableModule,
+        CommonModule,
+        FwIconModule,
+        FwMenuModule,
+        FwSelectMenuModule,
+        FwTextInputModule,
+        FwWrappedInputModule,
+        FormsModule,
+        ReactiveFormsModule,
+      ],
+    }),
+    applicationConfig({
+      providers: [
+        importProvidersFrom(BrowserModule),
+        importProvidersFrom(BrowserAnimationsModule),
+      ],
+    }),
+  ],
+
+} as Meta;
+
+type Story = StoryObj<FwSelectMenuComponent>;
+
+export const Select: Story = {
+  args: {
+    titleProperty: 'roleName',
+    valueProperty: 'roleId',
+    iconProperty: 'roleIcon',
+    descriptionProperty: 'roleDescription',
+    showFilter: false,
+    disabled: false,
+    placeholder: 'Select Role...',
+    options: [
+      { roleName: 'Owner', roleId: 'owner', roleDescription: 'Owner description', roleIcon: 'icon-placeholder' },
+      { roleName: 'Admin', roleId: 'admin', roleDescription: 'Admin description', roleIcon: 'icon-placeholder' },
+      {
+        roleName: 'Developer',
+        roleId: 'developer',
+        roleDescription: 'Developer description',
+        roleIcon: 'icon-placeholder',
+      },
+      { roleName: 'Member', roleId: 'member', roleDescription: 'Member description', roleIcon: 'icon-placeholder' },
+    ],
+    value: { roleName: 'Developer', roleId: 'developer', roleIcon: 'icon-placeholder' },
+  },
+};
+
+export const SelectEmptyValue: Story = {
+  args: {
+    titleProperty: 'roleName',
+    valueProperty: 'roleId',
+    iconProperty: 'roleIcon',
+    descriptionProperty: 'roleDescription',
+    showFilter: false,
+    disabled: false,
+    placeholder: 'Select Role...',
+    options: [
+      { roleName: 'No Role', roleId: '', roleDescription: 'No access', roleIcon: 'icon-placeholder' },
+      { roleName: 'Owner', roleId: 'owner', roleDescription: 'Owner description', roleIcon: 'icon-placeholder' },
+      { roleName: 'Admin', roleId: 'admin', roleDescription: 'Admin description', roleIcon: 'icon-placeholder' },
+      {
+        roleName: 'Developer',
+        roleId: 'developer',
+        roleDescription: 'Developer description',
+        roleIcon: 'icon-placeholder',
+      },
+      { roleName: 'Member', roleId: 'member', roleDescription: 'Member description', roleIcon: 'icon-placeholder' },
+    ],
+    value: { roleName: 'No Role', roleId: '', roleDescription: 'No access', roleIcon: 'icon-placeholder' },
+  },
+};
+
+export const SelectStaticIcon: Story = {
+  args: {
+    titleProperty: 'roleName',
+    valueProperty: 'roleId',
+    staticIcon: 'crown-style-circle',
+    descriptionProperty: 'roleDescription',
+    showFilter: false,
+    disabled: false,
+    placeholder: 'Select Role...',
+    options: [
+      { roleName: 'No Role', roleId: '', roleDescription: 'No access' },
+      { roleName: 'Owner', roleId: 'owner', roleDescription: 'Owner description' },
+      { roleName: 'Admin', roleId: 'admin', roleDescription: 'Admin description' },
+      {
+        roleName: 'Developer',
+        roleId: 'developer',
+        roleDescription: 'Developer description',
+        roleIcon: 'icon-placeholder',
+      },
+      { roleName: 'Member', roleId: 'member', roleDescription: 'Member description', roleIcon: 'icon-placeholder' },
+    ],
+    value: { roleName: 'No Role', roleId: '', roleDescription: 'No access', roleIcon: 'icon-placeholder' },
+  },
+};
+
+export const SelectStringValue: Story = {
+  args: {
+    titleProperty: 'roleName',
+    valueProperty: 'roleId',
+    iconProperty: 'roleIcon',
+    descriptionProperty: 'roleDescription',
+    showFilter: false,
+    disabled: false,
+    placeholder: 'Select Role...',
+    options: [
+      { roleName: 'Owner', roleId: 'owner', roleDescription: 'Owner description', roleIcon: 'icon-placeholder' },
+      { roleName: 'Admin', roleId: 'admin', roleDescription: 'Admin description', roleIcon: 'icon-placeholder' },
+      {
+        roleName: 'Developer',
+        roleId: 'developer',
+        roleDescription: 'Developer description',
+        roleIcon: 'icon-placeholder',
+      },
+      { roleName: 'Member', roleId: 'member', roleDescription: 'Member description', roleIcon: 'icon-placeholder' },
+    ],
+    value: 'developer',
+  },
+};
+
+export const SelectNumber: Story = {
+  args: {
+    titleProperty: 'title',
+    valueProperty: 'value',
+    showFilter: false,
+    disabled: false,
+    options: [
+      { title: '1-One', value: 1 },
+      { title: '2-Two', value: 2 },
+      { title: '3-Three', value: 3 },
+      { title: '4-Four', value: 4 },
+    ],
+    value: 2,
+  },
+};
+
+export const SelectWithGroups: Story = {
+  args: {},
+  render: (args) => ({
+    props: args,
+    controls: { disabled: false },
+    template: `
+        <fw-select placeholder="Select Project..." width="220px" [value]="value">
+          <fw-menu-item-group title="Group 1" icon="user-group">
+            <fw-menu-item icon="folder-open" title="Project 1" value="bulbasaur" size="compact"></fw-menu-item>
+            <fw-menu-item icon="folder-open" title="Project 2" value="oddish" size="compact"></fw-menu-item>
+            <fw-menu-item icon="folder-open" title="Project 3" value="bellsprout" size="compact"></fw-menu-item>
+          </fw-menu-item-group>
+          <fw-menu-item-group title="Group 2" icon="user-group">
+            <fw-menu-item icon="folder-open" title="Project 4" value="squirtle" size="compact"></fw-menu-item>
+            <fw-menu-item icon="folder-open" title="Project 5" value="psyduck" size="compact"></fw-menu-item>
+            <fw-menu-item icon="folder-open" title="Project 6" value="horsea" size="compact"></fw-menu-item>
+          </fw-menu-item-group>
+        </fw-select>
+    `,
+  }),
+};
+
+
+export const SelectCustom: Story = {
+  args: {
+    value: 'release',
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      items: [
+        { name: 'Chapter One', choice: 'one' },
+        { name: 'Chapter Two', choice: 'two' },
+        { name: 'Chapter Three', choice: 'three' },
+      ],
+      selectedItem: 'two',
+    },
+    controls: { disabled: false },
+    template: `
+      <table>
+        <tr>
+            <td>
+                <fw-select placeholder="Pick a Topic" width="220px" [value]="value">
+                  <fw-menu-item value="release" title="Release Notes" icon="notebook-pen-edit"></fw-menu-item>
+                  <fw-menu-item value="documentation" title="Browse Documentation" icon="files"></fw-menu-item>
+                  <fw-menu-item value="forum" title="User Forum" icon="message-chat-question-support"></fw-menu-item>
+                  <fw-menu-item value="feedback" title="Give Us Feedback" icon="message-question-checkmark"></fw-menu-item>
+                  <fw-menu-separator></fw-menu-separator>
+                  <fw-menu-item value="bookmark" title="Add Bookmark" icon="add-new-create"></fw-menu-item>
+                  <fw-menu-separator></fw-menu-separator>
+                  <fw-menu-item value="flywheel" title="Flywheel Enterprise" description="Version 18.22.1"></fw-menu-item>
+                </fw-select>
+            </td>
+            <td>
+                <fw-select placeholder="Pick a Topic..." width="100%" [(ngModel)]="selectedItem">
+                  <fw-menu-item *ngFor="let item of items" [value]="item.choice" [title]="item.name">
+                  </fw-menu-item>
+                </fw-select>
+            </td>
+        </tr>
+      </table>
+    `,
+  }),
+};
+
+export const SelectInAForm: Story = {
+  args: {
+    titleProperty: 'title',
+    valueProperty: 'value',
+    iconProperty: 'icon',
+    showReset: true,
+    options: [
+      { title: 'Owner', value: 'owner', icon: 'icon-placeholder' },
+      { title: 'Admin', value: 'admin', icon: 'icon-placeholder' },
+      { title: 'Developer', value: 'developer', icon: 'icon-placeholder' },
+      { title: 'Member', value: 'member', icon: 'icon-placeholder' },
+    ],
+    value: 'developer',
+  },
+  render: (args) => {
+    const formGroup = new FormGroup({
+      role: new FormControl(undefined, [Validators.required]),
+    });
+
+    return ({
+      props: { ...args, form: formGroup },
+      controls: { disabled: false },
+      template: `
+        <form [formGroup]="form">
+          <fw-wrapped-input title="Current Role" helperText="What best describes your position">
+            <fw-select
+              placeholder="Pick a Role"
+              width="220px"
+              [titleProperty]="titleProperty"
+              [valueProperty]="valueProperty"
+              [iconProperty]="iconProperty"
+              [options]="options"
+              [showReset]="showReset"
+              formControlName="role">
+            </fw-select>
+          </fw-wrapped-input>
+        </form>
+    `,
+    });
+  },
+};
+
+export const SelectErrored: Story = {
+  args: {
+    titleProperty: 'roleName',
+    valueProperty: 'roleId',
+    iconProperty: 'roleIcon',
+    descriptionProperty: 'roleDescription',
+    showFilter: false,
+    disabled: false,
+    placeholder: 'Select Role...',
+    errored: true,
+    options: [
+      { roleName: 'Owner', roleId: 'owner', roleDescription: 'Owner description', roleIcon: 'icon-placeholder' },
+      { roleName: 'Admin', roleId: 'admin', roleDescription: 'Admin description', roleIcon: 'icon-placeholder' },
+      {
+        roleName: 'Developer',
+        roleId: 'developer',
+        roleDescription: 'Developer description',
+        roleIcon: 'icon-placeholder',
+      },
+      { roleName: 'Member', roleId: 'member', roleDescription: 'Member description', roleIcon: 'icon-placeholder' },
+    ],
+    value: undefined,
+  },
+  render: (args) => {
+    const formGroup = new FormGroup({
+      role: new FormControl(undefined, [Validators.required]),
+    });
+
+    return ({
+      props: { ...args, form: formGroup },
+      controls: { disabled: false },
+      template: `
+        <fw-wrapped-input errorText="Invalid Selection">
+          <fw-select
+            [placeholder]="placeholder"
+            width="220px"
+            [options]="options"
+            [errored]="[errored]"
+            formControlName="role">
+          </fw-select>
+        </fw-wrapped-input>
+    `,
+    });
+  },
+};
+
+export const InScollingDiv: Story = {
+  args: {
+    value: 'release',
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      items: [
+        { name: 'Chapter One', choice: 'one' },
+        { name: 'Chapter Two', choice: 'two' },
+        { name: 'Chapter Three', choice: 'three' },
+      ],
+      selectedItem: 'two',
+    },
+    controls: { disabled: false },
+    template: `
+      <div cdkScrollable style="width: 300px; height: 500px; overflow: scroll">
+        <table>
+          <tr>
+              <td>
+                  <fw-select placeholder="Pick a Topic" width="220px" [value]="value">
+                    <fw-menu-item value="release" title="Release Notes" icon="notebook-pen-edit"></fw-menu-item>
+                    <fw-menu-item value="documentation" title="Browse Documentation" icon="files"></fw-menu-item>
+                    <fw-menu-item value="forum" title="User Forum" icon="message-chat-question-support"></fw-menu-item>
+                    <fw-menu-item value="feedback" title="Give Us Feedback" icon="message-question-checkmark"></fw-menu-item>
+                    <fw-menu-separator></fw-menu-separator>
+                    <fw-menu-item value="bookmark" title="Add Bookmark" icon="add-new-create"></fw-menu-item>
+                    <fw-menu-separator></fw-menu-separator>
+                    <fw-menu-item value="flywheel" title="Flywheel Enterprise" description="Version 18.22.1"></fw-menu-item>
+                  </fw-select>
+              </td>
+          </tr>
+        </table>
+        <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar turpis in mauris bibendum scelerisque. Duis sem nunc, maximus tempus fringilla quis, efficitur a elit. Phasellus sit amet leo ut magna commodo tincidunt at et justo. Phasellus vitae mi ligula. Cras sit amet ipsum ac massa lobortis ultrices id quis tortor. Sed sit amet lacus elementum, faucibus lorem vel, viverra ligula. Aliquam sem massa, ornare at elementum quis, consectetur at neque. Fusce ullamcorper augue tempor elit imperdiet aliquet. Maecenas lacinia luctus mattis. Nam felis ligula, tincidunt eget tincidunt ut, condimentum at tellus.
+        </p><p>
+        Proin dictum fringilla erat. Vivamus quis pulvinar nisl, eget egestas erat. Suspendisse sit amet semper massa. Donec interdum varius vestibulum. Pellentesque porttitor sapien ac velit placerat condimentum. Nunc in justo purus. Nulla ut faucibus odio. Proin purus leo, pharetra at laoreet eu, efficitur et augue. Etiam ante augue, tempor pretium erat in, tincidunt sodales mauris. Nulla feugiat, felis id egestas feugiat, mauris ante sodales turpis, ut egestas dui risus quis justo. Nam vel diam porttitor, ornare nunc ut, faucibus nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce ut ligula dictum nunc egestas consequat. Quisque congue diam sit amet nibh ornare hendrerit eget vulputate urna. Nullam erat lacus, pulvinar id augue vitae, sagittis interdum dolor.
+        </p><p>
+        Phasellus luctus tincidunt elementum. Nullam viverra tempus eros. Phasellus malesuada orci turpis. Morbi porttitor sapien ut ante euismod, vel luctus nunc volutpat. Donec tincidunt nulla in ipsum vulputate ultrices. Nam sodales ornare turpis nec luctus. Pellentesque tempor pulvinar fermentum.
+        </p><p>
+        Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris pellentesque sem ac nunc commodo vestibulum. Nunc tortor neque, consequat vel maximus ut, dignissim sit amet mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque consequat dui ut erat placerat auctor. Vestibulum fermentum imperdiet elit, vitae fermentum neque dapibus eget. Proin laoreet augue ante, id mollis enim consequat et. In pellentesque nisl vitae eleifend varius.
+        </p><p>
+        Ut vulputate molestie quam, vitae viverra mi tristique a. Vivamus sit amet dignissim elit, sed dapibus nisl. Proin ac vestibulum velit. Aenean urna tortor, ultricies condimentum neque eu, elementum pretium tellus. Nullam tristique diam non ex ullamcorper, eu efficitur elit viverra. Donec tempus turpis non eros posuere mattis. Nullam ultricies neque in sagittis tincidunt. Vestibulum sodales ut metus nec euismod. Suspendisse imperdiet mauris at ex ultrices tristique. Donec rhoncus a enim eget ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi venenatis arcu sit amet elit elementum, a convallis turpis lobortis. Cras id ex accumsan, facilisis risus sed, vestibulum turpis. Quisque facilisis tortor ac lectus venenatis pulvinar.
+        </p>
+      </div>
+    `,
+  }),
+};

package/src/components/shadows/shadows.stories.ts

@@ -0,0 +1,76 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+
+@Component({
+  selector: 'stories-shadow-demo',
+  styleUrls: [],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        padding: 10px;
+        background-color: white;
+        font-family: Inter, sans-serif;
+      }
+
+      code,
+      pre {
+        font-family: monospace;
+        color: #a22424;
+      }
+
+      div {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 50px;
+        margin-bottom: 30px;
+      }
+
+      .fw-ghost-animation-dark {
+        color: white;
+      }
+    `,
+  ],
+  template: `
+    <p>
+      Included base class styles for shadows in vision global.
+    </p>
+    <div class="vision-shadow-extra-large">vision-shadow-extra-large</div>
+    <div class="vision-shadow-large">vision-shadow-large</div>
+    <div class="vision-shadow-medium">vision-shadow-medium</div>
+    <div class="vision-shadow-small">vision-shadow-small</div>
+    <div class="vision-shadow-inner">vision-shadow-inner</div>
+    <div class="vision-overlay">vision-overlay</div>
+  `,
+})
+class ShadowDemoComponent {
+}
+
+export default {
+  title: 'SCSS/Shadow',
+  component: ShadowDemoComponent,
+  parameters: {
+    controls: {
+      exclude: [],
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=1650-59653&mode=design&t=kKJ9B1V6klFufk0T-11',
+    },
+  },
+  argTypes: {},
+  args: {},
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule],
+    }),
+  ],
+} as Meta;
+
+const fwShadowTemplate: Story<ShadowDemoComponent> = (args) => ({ props: args });
+
+export const Shadow = fwShadowTemplate.bind({});

package/src/components/shared/pipes/pipes.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+
+import { MinimalTranslationService,TranslationService } from '../translation.service';
+import { TranslatePipe } from './translate.pipe';
+import { TrustHtmlPipe } from './trusthtml.pipe';
+
+const exports = [
+  TranslatePipe,
+  TrustHtmlPipe,
+];
+
+@NgModule({
+  declarations: exports,
+  exports: exports,
+  providers: [
+    {
+      provide: TranslationService,
+      useClass: MinimalTranslationService,
+    },
+  ],
+})
+export class PipesModule {}
+
+export { TranslationService }

package/src/components/shared/pipes/translate.pipe.ts

@@ -0,0 +1,40 @@
+import { ChangeDetectorRef, OnDestroy, Pipe, PipeTransform } from '@angular/core';
+import { Subscription } from 'rxjs';
+
+import { TranslationService } from '../translation.service';
+
+/**
+ * Translate a message given a nested key to a location in the loaded locale copy.
+ */
+@Pipe({
+  name: 'translate',
+  pure: false,
+})
+export class TranslatePipe implements PipeTransform, OnDestroy {
+  private subscriptions: { [key: string]: Subscription } = {};
+  private messages: { [key: string]: string } = {};
+
+  constructor(
+    private cdr: ChangeDetectorRef,
+    private translationService: TranslationService,
+  ) {
+  }
+
+  ngOnDestroy(): void {
+    for (const subscription of Object.values(this.subscriptions)) {
+      subscription.unsubscribe();
+    }
+  }
+
+  transform(key: string, silent = false): string {
+    if (!(key in this.subscriptions)) {
+      this.subscriptions[key] = this.translationService.getMessage(key, silent).subscribe(message => {
+        this.messages[key] = message;
+        // trigger change detection to support components with ChangeDetectionStrategy.OnPush
+        // eslint-disable-next-line @rx-angular/no-explicit-change-detection-apis
+        this.cdr.markForCheck();
+      });
+    }
+    return this.messages[key] || '';
+  }
+}

package/src/components/shared/pipes/trusthtml.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+@Pipe({
+  name: 'trusthtml',
+  pure: true,
+})
+export class TrustHtmlPipe implements PipeTransform {
+  constructor (private sanitizer: DomSanitizer) { }
+
+  transform(html: string): SafeHtml {
+    return this.sanitizer.bypassSecurityTrustHtml(html);
+  }
+}

package/src/components/shared/translation.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+
+export abstract class TranslationService {
+  abstract getMessage(key: string, silent?: boolean): Observable<string>
+}
+
+/**
+ * Very basic i18n implementation. Consumer apps can provide their own implementation of TranslationService to override.
+ */
+@Injectable()
+export class MinimalTranslationService implements TranslationService {
+  private static messages = {
+    'common.actions.close': 'Close',
+    'confirmDialog.body': 'Are you sure?',
+    'confirmDialog.no': 'No',
+    'confirmDialog.yes': 'Yes',
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  getMessage(key: string, silent?: boolean): Observable<string> {
+    return of(MinimalTranslationService.messages[key]);
+  }
+}

package/src/components/snackbar/snackbar/snackbar.component.html

@@ -0,0 +1,15 @@
+<ng-container *ngIf="message">
+  <fw-icon *ngIf="message.icon">{{ message.icon }}</fw-icon>
+  <h4 class="vision-h4" *ngIf="message.message">{{ message.message }}</h4>
+  <fw-button
+    *ngIf="message.actionText" type="ghost"
+    [color]="color" size="small"
+    (click)="handleAction()">{{ message.actionText }}
+  </fw-button>
+  <fw-icon-button
+    *ngIf="message.showClose"
+    icon="close" size="small" [color]="message.severity"
+    (click)="handleDismiss()">
+  </fw-icon-button>
+  <div *ngIf="!message.actionText && !message.showClose"></div>
+</ng-container>

package/src/components/snackbar/snackbar/snackbar.component.scss

@@ -0,0 +1,58 @@
+@use "../../../scss/config/shadows";
+
+fw-snackbar {
+  display: flex;
+  align-items: flex-start;
+  box-sizing: border-box;
+  max-width: 320px;
+  min-width: 200px;
+  min-height: 30px;
+  padding: 8px 8px 8px 16px;
+  gap: 8px;
+  transform-origin: center;
+  background-color: var(--card-header);
+  color: var(--typography-base);
+  white-space: pre-wrap;
+  border-radius: 4px;
+  border: 1px solid var(--separations-border);
+  margin: 8px;
+  @extend .vision-shadow-large !optional;
+
+  > fw-icon {
+    width: 24px;
+    height: 24px;
+    font-size: 24px;
+    white-space: nowrap;
+    margin: 3px 0;
+  }
+
+  h4 {
+    margin: 0;
+    margin-top: 6px;
+    flex: 1;
+  }
+
+  &.primary {
+    fw-icon {
+      color: var(--primary-base);
+    }
+  }
+
+  &.danger {
+    fw-icon {
+      color: var(--red-base);
+    }
+  }
+
+  &.success {
+    fw-icon {
+      color: var(--green-base);
+    }
+  }
+
+  &.warning {
+    fw-icon {
+      color: var(--orange-base);
+    }
+  }
+}

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

@@ -0,0 +1,56 @@
+import { ChangeDetectorRef } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FwIconComponent } from '../../icon/icon.component';
+import { FwSnackbarModule } from '../snackbar.module';
+import { FwSnackbarTimerService } from '../snackbar-timer.service';
+import { FwSnackbarComponent } from './snackbar.component';
+
+describe('FwSnackbarComponent', () => {
+  let component: FwSnackbarComponent;
+  let fixture: ComponentFixture<FwSnackbarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        FwSnackbarComponent,
+        FwIconComponent,
+      ],
+      providers: [
+        FwSnackbarModule,
+        {
+          provide: FwSnackbarTimerService,
+          useValue: {
+            start: () => {
+            },
+            stop: () => {
+            },
+          },
+        },
+        {
+          provide: ChangeDetectorRef,
+          useValue: {
+            markForCheck: () => {
+            },
+          },
+        },
+      ],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FwSnackbarComponent);
+    component = fixture.componentInstance;
+    component.message = {
+      severity: 'success',
+      message: 'This is a test',
+    };
+    component.messageDuration = 100;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+    expect(fixture.nativeElement.textContent).toContain('This is a test');
+  });
+});