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

package/package.json

@@ -1,9 +1,23 @@
 {
   "name": "@flywheel-io/vision",
-  "version": "2.0.0-beta.9",
+  "version": "2.1.0-beta.0",
   "description": "Flywheel UI elements provided as Angular components and native web components",
   "author": "Flywheel",
   "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng run vision-lib:storybook",
+    "build": "ng build vision-lib && node build.js",
+    "test": "ng test vision-lib",
+    "stylelint": "stylelint \"**/*.[s]css\"",
+    "stylelint:fix": "stylelint \"**/*.[s]css\" --fix",
+    "lint": "ng lint",
+    "storybook": "ng run vision-lib:storybook",
+    "build-storybook": "ng run vision-lib:build-storybook"
+  },
+  "engines": {
+    "node": ">=20"
+  },
   "dependencies": {
     "date-fns": "^2.28.0",
     "document-register-element": "^1.7.2",
@@ -11,7 +25,69 @@
     "tslib": "^2.4.1"
   },
   "peerDependencies": {
-    "@storybook/blocks": "^7.6.20"
+    "@angular/core": ">=17"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^17.3.17",
+    "@angular-devkit/core": "^17.3.17",
+    "@angular-eslint/builder": "^17.5.3",
+    "@angular-eslint/eslint-plugin": "^17.5.3",
+    "@angular-eslint/eslint-plugin-template": "^17.5.3",
+    "@angular-eslint/schematics": "^17.5.3",
+    "@angular-eslint/template-parser": "^17.5.3",
+    "@angular/animations": "^17.3.12",
+    "@angular/cdk": "^17.3.10",
+    "@angular/cli": "^17.3.17",
+    "@angular/common": "^17.3.12",
+    "@angular/compiler": "^17.3.12",
+    "@angular/compiler-cli": "^17.3.12",
+    "@angular/core": "^17.3.12",
+    "@angular/elements": "^17.3.12",
+    "@angular/forms": "^17.3.12",
+    "@angular/platform-browser": "^17.3.12",
+    "@angular/platform-browser-dynamic": "^17.3.12",
+    "@angular/router": "^17.3.12",
+    "@babel/core": "^7.20.12",
+    "@compodoc/compodoc": "^1.1.26",
+    "@rx-angular/eslint-plugin": "^1.0.0",
+    "@sass-fairy/url": "^1.0.1",
+    "@storybook/addon-actions": "8.6.14",
+    "@storybook/addon-designs": "8.2.1",
+    "@storybook/addon-essentials": "8.6.14",
+    "@storybook/addon-links": "8.6.14",
+    "@storybook/angular": "8.6.14",
+    "@storybook/blocks": "8.6.14",
+    "@storybook/theming": "8.6.14",
+    "@types/estree": "^1.0.7",
+    "@types/jasmine": "^3.10.7",
+    "@types/node": "^18.19.120",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "babel-loader": "^8.3.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-unused-imports": "^3.0.0",
+    "glob": "^7.2.3",
+    "jasmine-core": "^5.1.1",
+    "jasmine-spec-reporter": "^5.0.0",
+    "karma": "^6.4.2",
+    "karma-chrome-launcher": "^3.2.0",
+    "karma-coverage": "^2.2.1",
+    "karma-jasmine": "^5.1.0",
+    "karma-jasmine-html-reporter": "^2.1.0",
+    "ng-packagr": "^17.3.0",
+    "prettier": "^3.6.2",
+    "rxjs": "^7.6.0",
+    "sass": "^1.57.1",
+    "storybook": "8.6.14",
+    "storybook-dark-mode": "^4.0.2",
+    "stylelint": "^15.11.0",
+    "stylelint-config-standard-scss": "^11.0.0",
+    "ts-node": "~8.3.0",
+    "typescript": "5.4.x",
+    "webpack": "^5.76.3",
+    "zone.js": "^0.14.10"
   },
   "exports": {
     "./assets/*": "./assets/*",
@@ -19,23 +95,7 @@
     "./styles.scss": "./styles.scss",
     "./styles.css": "./styles.css",
     ".": {
-      "sass": "./public-api.scss",
-      "types": "./index.d.ts",
-      "esm2020": "./esm2020/flywheel-io-vision.mjs",
-      "es2020": "./fesm2020/flywheel-io-vision.mjs",
-      "es2015": "./fesm2015/flywheel-io-vision.mjs",
-      "node": "./fesm2015/flywheel-io-vision.mjs",
-      "default": "./fesm2020/flywheel-io-vision.mjs"
-    },
-    "./package.json": {
-      "default": "./package.json"
+      "sass": "./public-api.scss"
     }
-  },
-  "module": "fesm2015/flywheel-io-vision.mjs",
-  "es2020": "fesm2020/flywheel-io-vision.mjs",
-  "esm2020": "esm2020/flywheel-io-vision.mjs",
-  "fesm2020": "fesm2020/flywheel-io-vision.mjs",
-  "fesm2015": "fesm2015/flywheel-io-vision.mjs",
-  "typings": "index.d.ts",
-  "sideEffects": false
-}
+  }
+}

package/publish-beta.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+
+set -e # exit on error
+npm version prerelease --git-tag-version=false --preid=beta
+npm run build
+cd dist/vision-lib
+npm pack
+
+npm publish --dry-run --access=public --tag=next
+
+
+read -r -p "Are you sure? [y/N] " response
+if [[ "$response" =~ ^([yY][eE][sS]|[yY])$ ]]
+then
+    npm publish --access=public --tag=next
+else
+    echo "Aborting..."
+fi

package/src/assets/brand/core.svg

@@ -0,0 +1,22 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" y="2" width="44" height="44" rx="10" stroke="#E8F0FF" stroke-width="4"/>
+<g clip-path="url(#clip0_4230_10724)">
+<rect width="48" height="48" rx="12" fill="#1B68FA"/>
+<rect width="48" height="48" fill="url(#paint0_linear_4230_10724)"/>
+</g>
+<path d="M28.8509 29.879C28.6066 29.5794 28.1987 29.4662 27.8368 29.6017C26.2222 30.2052 24.3604 30.1106 22.7539 29.1834C21.372 28.3853 20.3835 27.0973 19.9704 25.5558C19.5666 24.0485 19.7603 22.4754 20.5153 21.1143C20.5264 21.0942 20.5387 21.0742 20.5509 21.0549C22.6437 17.8234 25.573 17.5773 27.7956 18.4448C28.1609 18.5873 28.5762 18.4767 28.8242 18.1727L32.4261 13.7553C32.7824 13.318 32.6573 12.6648 32.164 12.3916C31.8753 12.2316 31.5297 12.0545 31.1351 11.8779C28.5424 10.7046 25.691 10.3675 22.9729 10.9317C21.2506 11.2895 19.639 11.9952 18.1832 13.0296C16.6706 14.1042 15.3567 15.515 14.278 17.2228L14.239 17.2845L14.2027 17.3476C13.304 18.9039 12.7369 20.5917 12.5171 22.364C12.3048 24.0741 12.424 25.7878 12.8716 27.4577C13.3189 29.1277 14.0727 30.6714 15.1113 32.0463C16.1881 33.4712 17.5232 34.6493 19.0796 35.5476C20.6359 36.4462 22.3237 37.0134 24.0961 37.2331C24.6443 37.3014 25.1929 37.3352 25.7404 37.3352C26.9003 37.3352 28.0551 37.1826 29.1898 36.8787C30.2476 36.5954 31.255 36.189 32.2008 35.6653C32.6922 35.3928 32.814 34.7392 32.4587 34.3038L28.8509 29.879Z" fill="url(#paint1_linear_4230_10724)"/>
+<defs>
+<linearGradient id="paint0_linear_4230_10724" x1="48" y1="0" x2="0" y2="48" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1B68FA"/>
+<stop offset="1" stop-color="#5E00F6"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4230_10724" x1="13.4466" y1="37.0535" x2="53.8595" y2="-7.34404" gradientUnits="userSpaceOnUse">
+<stop stop-color="#76A4FC"/>
+<stop offset="0.47" stop-color="#D9E6FF"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<clipPath id="clip0_4230_10724">
+<rect width="48" height="48" rx="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/brand/discovery.svg

@@ -0,0 +1,22 @@
+<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2.33301" y="2" width="44" height="44" rx="10" stroke="#E8F0FF" stroke-width="4"/>
+<g clip-path="url(#clip0_4230_10805)">
+<rect x="0.333008" width="48" height="48" rx="12" fill="#1B68FA"/>
+<rect width="48" height="48" transform="translate(0.333008)" fill="url(#paint0_linear_4230_10805)"/>
+</g>
+<path d="M35.165 25.064C34.9911 26.9068 34.4275 28.7448 33.4898 30.5276L33.456 30.5917L33.4201 30.6544C32.5239 32.2065 31.3488 33.538 29.9276 34.6118C28.556 35.6478 27.0165 36.3994 25.3509 36.8459C24.22 37.1492 23.0687 37.3012 21.9119 37.3012V37.2845H16.9944C16.5054 37.2845 16.1094 36.8881 16.1094 36.3994V30.8524C16.1094 30.3633 16.5057 29.9673 16.9944 29.9673H21.9489C23.9612 29.9518 25.9156 28.918 27.0199 27.0789C27.0314 27.0596 27.0421 27.04 27.0525 27.0203C29.0514 23.1122 27.1333 20.2041 24.8663 18.8952C24.0224 18.4076 23.0105 18.0732 21.9493 18.0357H16.9944C16.5054 18.0357 16.1094 17.6393 16.1094 17.1506V11.584C16.1094 11.0953 16.5057 10.6989 16.9944 10.6989H21.9489V10.7026C24.2159 10.736 26.4818 11.363 28.5316 12.5465C31.4285 14.2199 33.5799 16.8247 34.5888 19.8819C35.1383 21.5474 35.3322 23.2913 35.165 25.064Z" fill="url(#paint1_linear_4230_10805)"/>
+<defs>
+<linearGradient id="paint0_linear_4230_10805" x1="1.5" y1="48" x2="47.5" y2="1" gradientUnits="userSpaceOnUse">
+<stop stop-color="#761EC2"/>
+<stop offset="1" stop-color="#A95D4C"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4230_10805" x1="13.8057" y1="34.0523" x2="46.7915" y2="-4.86055" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFC6FD"/>
+<stop offset="0.389828" stop-color="#FFEBFF"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<clipPath id="clip0_4230_10805">
+<rect x="0.333008" width="48" height="48" rx="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/brand/exchange.svg

@@ -0,0 +1,28 @@
+<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2.66699" y="2" width="44" height="44" rx="10" stroke="#E8F0FF" stroke-width="4"/>
+<g clip-path="url(#clip0_4230_10764)">
+<rect x="0.666992" width="48" height="48" rx="12" fill="#1B68FA"/>
+<rect width="48" height="48" transform="translate(0.666992)" fill="url(#paint0_linear_4230_10764)"/>
+</g>
+<path d="M36.6663 16.9857V11.7478C36.6663 11.1194 36.1306 10.622 35.5027 10.67C34.9566 10.7117 34.4123 10.7884 33.8736 10.8997C32.143 11.2586 30.5232 11.9664 29.0597 13.004C27.5395 14.0818 26.2189 15.4969 25.1352 17.2098L25.096 17.2716L25.0595 17.3349C24.1563 18.896 23.5863 20.5888 23.3651 22.3666C23.152 24.0817 23.2718 25.8006 23.7213 27.4756C24.1712 29.1506 24.9285 30.699 25.9727 32.078C27.0549 33.5072 28.3964 34.6889 29.9606 35.5899C31.5249 36.4912 33.2211 37.0601 35.0028 37.2805C35.1479 37.2984 35.2931 37.314 35.4382 37.3274C36.0921 37.387 36.6562 36.8721 36.6573 36.2168L36.6666 31.008C36.6666 30.4767 36.2805 30.0203 35.7542 29.941C35.0342 29.8326 34.322 29.5907 33.6542 29.2061C32.2654 28.4056 31.2715 27.1137 30.8567 25.5676C30.4512 24.0579 30.6452 22.4823 31.401 21.1186C31.4144 21.0944 31.429 21.0702 31.4443 21.0471C32.6895 19.1317 34.2287 18.2638 35.7404 18.055C36.2727 17.9816 36.6666 17.5222 36.6666 16.9857H36.6663Z" fill="url(#paint1_linear_4230_10764)"/>
+<path d="M26.0122 25.0768C25.8369 26.9294 25.2691 28.7778 24.3242 30.5708L24.2902 30.6356L24.2536 30.6985C23.3509 32.2596 22.1668 33.5987 20.7343 34.6784C19.3525 35.7205 17.8009 36.4762 16.1226 36.9249C15.3735 37.1252 14.6158 37.2599 13.8533 37.3288C13.2172 37.3861 12.667 36.8906 12.667 36.2529V31.002C12.667 30.4725 13.0509 30.0172 13.575 29.9357C15.2758 29.6714 16.8497 28.6848 17.8002 27.1085C17.8144 27.085 17.8278 27.0612 17.8401 27.0366C19.8494 23.1092 17.917 20.1874 15.6339 18.8713C15.0165 18.5154 14.3099 18.2407 13.5597 18.1022C13.0438 18.0069 12.667 17.562 12.667 17.0385V11.7779C12.667 11.1353 13.2255 10.6365 13.8656 10.7035C15.7536 10.9 17.6155 11.502 19.3275 12.4883C22.247 14.1707 24.4148 16.7902 25.4314 19.8646C25.9854 21.54 26.1808 23.2935 26.0122 25.0768Z" fill="url(#paint2_linear_4230_10764)"/>
+<defs>
+<linearGradient id="paint0_linear_4230_10764" x1="2.5" y1="48" x2="46.5" y2="2.98023e-07" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5E00F6"/>
+<stop offset="1" stop-color="#771FBE"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4230_10764" x1="24.3365" y1="35.6774" x2="54.6339" y2="-5.22586" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D0B3FD"/>
+<stop offset="0.319825" stop-color="#E3D4FA"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint2_linear_4230_10764" x1="7.56661" y1="36.4055" x2="37.7463" y2="-6.11698" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D0B3FD"/>
+<stop offset="0.359827" stop-color="#E3D4FA"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<clipPath id="clip0_4230_10764">
+<rect x="0.666992" width="48" height="48" rx="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/brand/fw-logo-mark-dark-bg.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="25" viewBox="0 0 18 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.50597 6.52794L16.6298 0.0581995C17.043 -0.107607 17.5124 0.092962 17.6782 0.506184C17.7165 0.601642 17.7362 0.703548 17.7362 0.806404V5.74098C17.7362 6.07032 17.5359 6.36654 17.2302 6.48919L1.10641 12.9589C0.693188 13.1247 0.223792 12.9242 0.0579853 12.5109C0.0196824 12.4155 0 12.3136 0 12.2107V7.27614C0 6.9468 0.20032 6.65058 0.50597 6.52794Z" fill="#6DA2FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.508543 14.98L14.375 9.47129C14.7888 9.3069 15.2575 9.50908 15.4219 9.92287C15.4595 10.0176 15.4788 10.1186 15.4788 10.2205V15.1561C15.4788 15.4871 15.2765 15.7845 14.9685 15.906L6.79101 19.1325C6.48307 19.254 6.28071 19.5514 6.28071 19.8824V24.1938C6.28071 24.6391 5.91976 25 5.47452 25C5.36618 25 5.25895 24.9782 5.15924 24.9358L0.49091 22.9522C0.193261 22.8257 0 22.5336 0 22.2102V15.7293C0 15.3989 0.201534 15.102 0.508543 14.98Z" fill="#2E72F6"/>
+</svg>

package/src/assets/updating-icons.md

@@ -0,0 +1,71 @@
+# So you want to update the icons?
+
+*this file will be a script soon hopefully*
+
+## Step 1: Get the generated files from icomoon
+
+You should get a couple folders with updated icons from the designer you're working with.
+
+Namely `Flywheel-Vision-Icons-vX.X` and `Flywheel-Vision-Icons-vX.X-SVG-PNG`
+
+Their folder structure are as such:
+
+```
+Flywheel-Vision-Icons-vX.X
+├── Read Me.txt
+├── demo-files
+│   ├── demo.css
+│   └── demo.js
+├── demo.html
+├── fonts
+│   ├── Flywheel-Vision-Icons.svg
+│   ├── Flywheel-Vision-Icons.ttf
+│   └── Flywheel-Vision-Icons.woff
+├── liga.js
+├── selection.json
+└── style.css
+```
+
+```
+Flywheel-Vision-Icons-vX.X-SVG-PNG
+├── PNG
+|   └── *.png
+├── Read Me.txt
+├── SVG
+|   └── *.svg
+├── demo-external-svg.html
+├── demo-files
+│   └── demo.css
+├── demo.html
+├── selection.json
+├── style.css
+├── svgxuse.js
+└── symbol-defs.svg
+```
+
+## Step 2: Moving Stuff Over
+
+- Move everything in `Flywheel-Vision-Icons-vX.X/fonts` into `src/assets/fonts`
+- Move `Flywheel-Vision-Icons-vX.X/selection.json` to `src/components/icon/selection.json`
+- Move all the SVGs in `Flywheel-Vision-Icons-vX.X-SVG-PNG/SVG/*` to `src/assets/svg`
+
+## Step 3: Updating Files
+
+> This can be handled by `update-icons.js` in the root of this repo
+
+- Update the `allIcons` array in `src/components/icon/icons.stories.ts` with any new icon names.
+- Copy all of the icon classes from `Flywheel-Vision-Icons-vX.X/styles.css` to `src/scss/icons/_icon-glyphs.scss`
+
+On that last step you specifically want the bits that look like this
+
+```
+  .icon-name:before {
+    content: "\glyph-code";
+  }
+```
+
+You can ignore the rest as it's already setup specifically for this project.
+
+## Step 4: QA
+
+Double check that all the icons appear in storybook and you should be done! 🎉

package/src/color.utils.ts

@@ -0,0 +1,47 @@
+
+const accesibilityPallete = [
+  '#00c0cb',
+  '#ffff00',
+  '#00ff00',
+  '#80d8c7',
+  '#ffff80',
+  '#80ff80',
+  '#00ff00',
+  '#ffe0b0',
+  '#c0ffc0',
+  '#80c0ff',
+  '#ff8000',
+  '#80d8c7',
+  '#b080ff',
+  '#ffc080',
+  '#c0ffc0',
+  '#ff69b4',
+  '#fff0d0',
+  '#ff8080',
+  '#ff6040',
+  '#40e0e0',
+  '#ff6930',
+  '#ffc0c0',
+  '#80e0e0',
+  '#ff8000',
+  '#c0f0f0',
+  '#ffc000',
+  '#ffb0c0',
+  '#b0d0ff',
+  '#f0f0c0',
+  '#ffc0e0',
+  '#d0e0ff',
+]
+
+export const hashCode = (str: string): number => {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return Math.abs(hash);
+}
+
+export const pickColorViaHash = (seed = ''): string => {
+  const hash = hashCode(seed);
+  return accesibilityPallete[hash % (accesibilityPallete.length - 1)]
+}

package/src/components/alert/alert.component.html

@@ -0,0 +1,19 @@
+<div [ngClass]="['fw-alert', variant, severity]">
+  <fw-icon *ngIf="icon" class="fw-alert-icon">{{ icon }}</fw-icon>
+  <div class="fw-alert-text">
+    <h4 *ngIf="title" class="vision-h4">{{ title }}</h4>
+    <p *ngIf="description" class="vision-p2">{{ description }}</p>
+    <p class="vision-p2">
+      <ng-content></ng-content>
+    </p>
+  </div>
+  <div class="close-icon">
+    <ng-content select="fw-button"></ng-content>
+    <fw-icon-button
+      *ngIf="showClose"
+      icon="close" size="small"
+      [color]="variant==='filled'?'overlay':severity"
+      (click)="close?close.emit():undefined">
+    </fw-icon-button>
+  </div>
+</div>

package/src/components/alert/alert.component.scss

@@ -0,0 +1,150 @@
+.fw-alert {
+  border-radius: 8px;
+  padding: 6px 16px;
+  display: flex;
+  box-sizing: border-box;
+  min-height: 48px;
+
+  .fw-alert-icon {
+    padding: 7px 12px 7px 0;
+    align-items: flex-start;
+    font-size: 22px;
+  }
+
+  .fw-alert-text {
+    padding: 6px 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-items: center;
+  }
+
+  h4 {
+    margin: 3px 0;
+    color: var(--typography-contrast);
+  }
+
+  p {
+    margin: 3px 0 0;
+    color: inherit;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16.8px;
+  }
+
+  .close-icon {
+    display: flex;
+    align-items: flex-start;
+    margin-left: 16px;
+    gap: 16px;
+    margin-top: 4px;
+    height: 30px;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &.standard {
+    &.info {
+      color: var(--primary-base);
+      background-color: var(--primary-hover);
+      border: 1px solid var(--primary-border);
+
+      h4 {
+        color: var(--primary-base);
+      }
+    }
+
+    &.warning {
+      color: var(--orange-base);
+      background-color: var(--orange-hover);
+      border: 1px solid var(--orange-border);
+
+      h4 {
+        color: var(--orange-base);
+      }
+    }
+
+    &.success {
+      color: var(--green-base);
+      background-color: var(--green-hover);
+      border: 1px solid var(--green-border);
+
+      h4 {
+        color: var(--green-base);
+      }
+    }
+
+    &.error {
+      color: var(--red-base);
+      background-color: var(--red-hover);
+      border: 1px solid var(--red-border);
+
+      h4 {
+        color: var(--red-base);
+      }
+    }
+  }
+
+  &.outlined {
+    &.info {
+      color: var(--primary-base);
+      border: 1px solid var(--primary-base);
+
+      h4 {
+        color: var(--primary-base);
+      }
+    }
+
+    &.warning {
+      color: var(--orange-base);
+      border: 1px solid var(--orange-base);
+
+      h4 {
+        color: var(--orange-base);
+      }
+    }
+
+    &.success {
+      color: var(--green-base);
+      border: 1px solid var(--green-base);
+
+      h4 {
+        color: var(--green-base);
+      }
+    }
+
+    &.error {
+      color: var(--red-base);
+      border: 1px solid var(--red-base);
+
+      h4 {
+        color: var(--red-base);
+      }
+    }
+  }
+
+  &.filled {
+    &.info {
+      color: var(--typography-contrast);
+      background-color: var(--primary-base);
+    }
+
+    &.warning {
+      color: var(--typography-contrast);
+      background-color: var(--orange-base);
+    }
+
+    &.success {
+      color: var(--typography-contrast);
+      background-color: var(--green-base);
+    }
+
+    &.error {
+      color: var(--typography-contrast);
+      background-color: var(--red-base);
+    }
+  }
+
+}

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

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

package/src/components/alert/alert.component.ts

@@ -0,0 +1,19 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+import { IconType } from '../icon/icon.types';
+
+@Component({
+  selector: 'fw-alert',
+  templateUrl: './alert.component.html',
+  styleUrls: ['./alert.component.scss'],
+})
+export class FwAlertComponent {
+  @Input() description?: string;
+  @Input() icon?: IconType;
+  @Input() severity?: 'info' | 'success' | 'warning' | 'error' = 'info';
+  @Input() title?: string;
+  @Input() variant?: 'standard' | 'outlined' | 'filled' = 'standard';
+  @Input() showClose?: boolean;
+  // eslint-disable-next-line @angular-eslint/no-output-native
+  @Output() close: EventEmitter<void> = new EventEmitter<void>();
+}

package/src/components/alert/alert.mdx

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

package/src/components/alert/alert.module.ts

@@ -0,0 +1,22 @@
+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 { FwAlertComponent } from './alert.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FwIconModule,
+        FwIconButtonModule,
+    ],
+    exports: [
+        FwAlertComponent,
+    ],
+    declarations: [
+        FwAlertComponent,
+    ],
+})
+export class FwAlertModule {
+}