@oicl/openbridge-webcomponents 0.0.7 → 0.0.8

package/script/download-icons.ts

@@ -2,6 +2,12 @@ import * as Figma from 'figma-api';
 import * as dotenv from 'dotenv';
 import * as fs from 'fs';
 import {GetFileResult} from 'figma-api/lib/api-types';
+import {
+  getCssColorIcon,
+  getSingleColorIcon,
+  getStylesForNode,
+  kebabToUpperCamelCase,
+} from './convert-icons';
 
 dotenv.config();
 
@@ -141,7 +147,7 @@ export class Obi${upperCammelCaseName} extends LitElement {
     \`;
   }
 
-  static override styles = unsafeCSS(css)\`
+  static override styles = css\`
   .wrapper {
     height: 100%;
     width: 100%;
@@ -175,144 +181,4 @@ declare global {
   console.log('done');
 }
 
-function getSingleColorIcon(imageData: string, icon: IconRef): string {
-  // replace fill color with currentColor
-  const fillRegex = /fill="[^"]+"/g;
-  const replace = 'fill="currentColor"';
-  let imageDataNew = imageData.replace(fillRegex, replace);
-
-  // remove fillOpacity
-  const fillOpacityRegex = /fill-opacity="[^"]+"/g;
-  imageDataNew = imageDataNew.replace(fillOpacityRegex, '');
-
-  return imageDataNew;
-}
-
-function getCssColorIcon(imageData: string, icon: IconRef): string {
-  // replace fill color with currentColor
-  const fillRegex = /fill="([^"]+)"/g;
-
-  const replace = (match: string, color: string) => {
-    const cssClass = icon.styles[color];
-    if (cssClass === undefined) {
-      if (color === 'black') return 'fill="currentColor"';
-      if (color === 'none') return 'fill="none"';
-      if (color === 'white') return 'fill="none"';
-      console.warn(
-        'No css class for color',
-        color,
-        icon.name,
-        Object.keys(icon.styles)
-      );
-      return 'fill="currentColor"';
-    }
-    return `style="fill: var(--${cssClass.cssClass})"`;
-  };
-  imageData = imageData.replace(fillRegex, replace);
-
-  // remove fillOpacity
-  const fillOpacityRegex = /fill-opacity="[^"]+"/g;
-  imageData = imageData.replace(fillOpacityRegex, '');
-
-  return imageData;
-}
-
-function kebabToUpperCamelCase(kebabCase: string): string {
-  const words = kebabCase.replace(/ /g, '').split('-');
-  const upperCamelCase = words
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-    .join('');
-  return upperCamelCase;
-}
-
-function getStylesForNode(
-  node: Figma.Node,
-  styles: {[styleId: string]: Figma.Style}
-): {[colorCode: string]: {cssClass: string}} {
-  let out = {};
-
-  if ('children' in node) {
-    for (const child of node.children) {
-      out = {...out, ...getStylesForNode(child, styles)};
-      if ('fills' in child && 'styles' in child) {
-        let fils: string | undefined;
-        child.fills.forEach((fill) => {
-          if (fill.type === 'SOLID') {
-            if (fils !== undefined) {
-              console.warn(
-                'Multiple fills',
-                fils,
-                rgbaToHexOrColorName(fill.color!)
-              );
-            }
-            fils = rgbaToHexOrColorName(fill.color!);
-          }
-        });
-        if (fils !== undefined && child.styles && 'fill' in child.styles) {
-          const styleId = child.styles.fill as string;
-          const figmaStyle = styles[styleId];
-          const cssClass = styleToCssClass(figmaStyle);
-          out[fils] = {cssClass: cssClass};
-        }
-      }
-      if ('strokes' in child && 'styles' in child) {
-        let strokes: string;
-        child.strokes.forEach((fill) => {
-          if (fill.type === 'SOLID') {
-            if (strokes !== undefined) {
-              console.warn(
-                'Multiple strokes',
-                strokes,
-                rgbaToHexOrColorName(fill.color!)
-              );
-            }
-            strokes = rgbaToHexOrColorName(fill.color!);
-          }
-        });
-        if (strokes !== undefined && child.styles?.stroke) {
-          const styleId = child.styles.stroke;
-          const figmaStyle = styles[styleId];
-          const cssClass = styleToCssClass(figmaStyle);
-          out[strokes] = {cssClass: cssClass};
-        }
-      }
-      if ('fillOverrideTable' in child) {
-        for (const fill of Object.values(child.fillOverrideTable)) {
-          if (fill === null) continue;
-          if (!('inheritFillStyleId' in fill)) continue;
-          const styleId = fill.inheritFillStyleId;
-          const figmaStyle = styles[styleId];
-          const color = rgbaToHexOrColorName(fill.fills[0].color!);
-          const cssClass = styleToCssClass(figmaStyle);
-          out[color] = {cssClass: cssClass};
-        }
-      }
-    }
-  }
-  return out;
-}
-
-function decimalToHex(d: number): string {
-  const v = Math.round(d * 255).toString(16);
-  return v.length === 1 ? `0${v}` : v;
-}
-
-function rgbaToHexOrColorName(rgba: Figma.Color): string {
-  const isBlack = rgba.r === 0 && rgba.g === 0 && rgba.b === 0 && rgba.a === 1;
-  const isWhite = rgba.r === 1 && rgba.g === 1 && rgba.b === 1 && rgba.a === 1;
-  if (isBlack) {
-    return 'black';
-  } else if (isWhite) {
-    return 'white';
-  } else {
-    return `#${decimalToHex(rgba.r)}${decimalToHex(rgba.g)}${decimalToHex(
-      rgba.b
-    )}`.toUpperCase();
-  }
-}
-
-function styleToCssClass(style: Figma.Style): string {
-  return style.name.replace(/[\/ ]/g, '-').toLocaleLowerCase();
-}
-
 main();

package/src/components/alert-button/alert-button.css

@@ -32,10 +32,6 @@
         }
     }
 
-    & .badge {
-        color: var(--on-normal-active-color, #1A1A1A);
-    }
-
     & .icon {
         height: 24px;
         width: 24px;
@@ -63,14 +59,7 @@
 
     &.type-alarm {
         @mixin style style=alarm visibleWrapperClass=.visible-wrapper;
-
-        & .visible-wrapper {
-            color: var(--on-alarm-active-color, #FFF);
-
-            & .badge {
-                color: var(--on-alarm-active-color, #FFF);
-            }
-        }
+        color: var(--on-alarm-active-color);
     }
 
     &.type-warning {

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

@@ -11,6 +11,8 @@ const meta: Meta<typeof ObcAlertButton> = {
     nAlerts: 2,
     counter: true,
     standalone: false,
+    blinkAlarmValue: true,
+    blinkWarningValue: true,
   },
   argTypes: {
     nAlerts: {

package/src/components/alert-button/alert-button.ts

@@ -3,9 +3,18 @@ import {customElement, property} from 'lit/decorators.js';
 import compentStyle from './alert-button.css?inline';
 import '../../icons/icon-14-alerts';
 import {AlertType} from '../../types';
+import {classMap} from 'lit/directives/class-map.js';
 
 /**
- * Represents an alert button component.
+ * Button used for alerts and notification
+ *
+ * @prop {number} nAlerts - Number of alerts.
+ * @prop {AlertType} alertType - Type of alert.
+ * @prop {boolean} standalone - If the button is standalone and not used together with an notification-message.
+ * @prop {boolean} counter - If the button should display a counter.
+ * @prop {boolean} blinkAlarmValue - This value should alternate between true and false to make the icon blink.
+ *                        It should be synchronized with the blinkValue of other alarms.
+ * @prop {boolean} blinkWarningValue - This value should alternate between true and false to make the icon blink.
  *
  * @fires click - Fires when the button is clicked.
  */
@@ -15,13 +24,29 @@ export class ObcAlertButton extends LitElement {
   @property({type: String, attribute: 'alert-type'}) alertType = AlertType.None;
   @property({type: Boolean}) standalone = false;
   @property({type: Boolean}) counter = false;
+  @property({type: Boolean, attribute: 'blink-alarm-value'}) blinkAlarmValue =
+    false;
+  @property({type: Boolean, attribute: 'blink-warning-value'})
+  blinkWarningValue = false;
 
   override render() {
+    let alertType = this.alertType;
+    if (this.alertType === AlertType.Alarm && !this.blinkAlarmValue) {
+      alertType = AlertType.None;
+    } else if (
+      this.alertType === AlertType.Warning &&
+      !this.blinkWarningValue
+    ) {
+      alertType = AlertType.None;
+    }
     return html`
       <button
-        class="wrapper type-${this.alertType} ${this.counter
-          ? 'counter'
-          : null} ${this.standalone ? 'standalone' : null}"
+        class=${classMap({
+          wrapper: true,
+          [`type-${alertType}`]: true,
+          counter: this.counter,
+          standalone: this.standalone,
+        })}
       >
         <div class="visible-wrapper">
           <obi-14-alerts class="icon"></obi-14-alerts>

package/src/components/alert-icon/alert-icon.stories.ts

@@ -0,0 +1,35 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcAlertIcon, AlertIconNames} from './alert-icon';
+import './alert-icon';
+import {html} from 'lit';
+
+const meta: Meta<typeof ObcAlertIcon> = {
+  title: 'Alert/Icon',
+  tags: ['autodocs'],
+  component: 'obc-alert-icon',
+  args: {
+    name: 'alarm-unack',
+    blinkValue: true,
+  },
+  argTypes: {
+    name: {
+      options: AlertIconNames,
+      control: {type: 'radio'},
+    },
+    blinkValue: {
+      control: {type: 'boolean'},
+    },
+  },
+  render: (args) =>
+    html` <div style="width:64px;height:64px">
+      <obc-alert-icon
+        ?blink-value=${args.blinkValue}
+        name=${args.name}
+      ></obc-alert-icon>
+    </div>`,
+} satisfies Meta<ObcAlertIcon>;
+
+export default meta;
+type Story = StoryObj<ObcAlertIcon>;
+
+export const Primary: Story = {};

package/src/components/alert-icon/alert-icon.ts

@@ -0,0 +1,75 @@
+import {LitElement, html, css} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
+import {svg14AlarmSilencedA} from './icons/icon-14-alarm-silenced-a';
+import {svg14AlarmSilencedB} from './icons/icon-14-alarm-silenced-b';
+import {svg14AlarmUnackA} from './icons/icon-14-alarm-unack-a';
+import {svg14AlarmUnackB} from './icons/icon-14-alarm-unack-b';
+import {svg14WarningUnackA} from './icons/icon-14-warning-unack-a';
+import {svg14WarningUnackB} from './icons/icon-14-warning-unack-b';
+
+const mapping = {
+  'alarm-silenced': {a: svg14AlarmSilencedA, b: svg14AlarmSilencedB},
+  'alarm-unack': {a: svg14AlarmUnackA, b: svg14AlarmUnackB},
+  'warning-unack': {a: svg14WarningUnackA, b: svg14WarningUnackB},
+};
+
+export const AlertIconNames = Object.keys(mapping) as AlertIconName[];
+export type AlertIconName = keyof typeof mapping;
+
+/**
+ * Icon used for alerts and notification with blinking effect
+ *
+ * @prop {boolean} blinkValue - This value should alternate between true and false to make the icon blink.
+ * @prop {AlertIconName} name - Name of the icon.
+ */
+@customElement('obc-alert-icon')
+export class ObcAlertIcon extends LitElement {
+  @property({type: Boolean, attribute: 'blink-value'}) blinkValue = false;
+  @property({type: String}) name: AlertIconName = 'alarm-unack';
+
+  override render() {
+    const icons = mapping[this.name];
+    return html`
+      <div
+        class=${classMap({
+          wrapper: true,
+          'show-a': this.blinkValue,
+          'show-b': !this.blinkValue,
+        })}
+      >
+        <span class="a">${icons.a}</span>
+        <span class="b">${icons.b}</span>
+      </div>
+    `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+    }
+    .wrapper * {
+      height: 100%;
+      width: 100%;
+    }
+    .a,
+    .b {
+      display: none;
+    }
+
+    .show-a .a {
+      display: revert;
+    }
+
+    .show-b .b {
+      display: revert;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-alert-icon': ObcAlertIcon;
+  }
+}

package/src/components/alert-icon/icons/icon-14-alarm-silenced-a.ts

@@ -0,0 +1,9 @@
+import {svg} from 'lit';
+export const svg14AlarmSilencedA = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.1409 1.51681C11.5032 0.82773 12.4968 0.827732 12.8591 1.51681L22.8888 20.5936C23.2254 21.2338 22.7573 22 22.0297 22H1.97033C1.24266 22 0.774615 21.2338 1.11121 20.5936L11.1409 1.51681Z" fill="var(--alarm-enabled-background-color)"/>
+<path d="M6.99848 10.8967L7.88021 10.015L17.3 19.2682L16.4183 20.1499L15.1363 18.868C14.4859 19.387 13.7168 19.7747 12.8788 19.9623V18.6741C13.3791 18.5303 13.8356 18.2864 14.2421 17.98L11.6281 15.366V19.487L8.50138 16.3603H6V12.6082H8.50138L8.68273 12.4206L6.99848 10.8967Z" style="fill: var(--on-alarm-active-color)"/>
+<path d="M15.7491 15.9476C15.9117 15.4911 16.0055 14.9971 16.0055 14.4843C16.0055 12.5019 14.6861 10.826 12.8788 10.2882V9C15.3864 9.56906 17.2562 11.8078 17.2562 14.4843C17.2562 15.3535 17.0561 16.1727 16.7059 16.9044L15.7491 15.9476Z" style="fill: var(--on-alarm-active-color)"/>
+<path d="M12.8788 11.9641C13.8043 12.4269 14.4422 13.3774 14.4422 14.4843C14.4422 14.5343 14.4359 14.5843 14.4297 14.6344L12.8788 13.0835V11.9641Z" style="fill: var(--on-alarm-active-color)"/>
+<path d="M10.4525 10.6572L11.6281 9.48152V11.8328L10.4525 10.6572Z" style="fill: var(--on-alarm-active-color)"/>
+</svg>
+`;

package/src/components/alert-icon/icons/icon-14-alarm-silenced-b.ts

@@ -0,0 +1,16 @@
+import {svg} from 'lit';
+export const svg14AlarmSilencedB = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_850_47505)">
+<path d="M13.3017 1.28413L12.8591 1.51681L13.3017 1.28413C12.752 0.238626 11.248 0.238621 10.6983 1.28413L11.1314 1.51182L10.6983 1.28413L0.668648 20.3609C0.154023 21.3397 0.872928 22.5 1.97033 22.5H22.0297C23.1271 22.5 23.846 21.3397 23.3314 20.3609L13.3017 1.28413Z" style="stroke: var(--element-neutral-color)" />
+<path d="M6.99848 10.8967L7.88021 10.015L17.3 19.2682L16.4183 20.1499L15.1363 18.868C14.4859 19.387 13.7168 19.7747 12.8788 19.9623V18.6741C13.3791 18.5303 13.8356 18.2864 14.2421 17.98L11.6281 15.366V19.487L8.50138 16.3603H6V12.6082H8.50138L8.68273 12.4206L6.99848 10.8967Z" style="fill: var(--element-neutral-color)" />
+<path d="M15.7491 15.9476C15.9117 15.4911 16.0055 14.9971 16.0055 14.4843C16.0055 12.5019 14.6861 10.826 12.8788 10.2882V9C15.3864 9.56906 17.2562 11.8078 17.2562 14.4843C17.2562 15.3535 17.0561 16.1727 16.7059 16.9044L15.7491 15.9476Z" style="fill: var(--element-neutral-color)" />
+<path d="M12.8788 11.9641C13.8043 12.4269 14.4422 13.3774 14.4422 14.4843C14.4422 14.5343 14.4359 14.5843 14.4297 14.6344L12.8788 13.0835V11.9641Z" style="fill: var(--element-neutral-color)" />
+<path d="M10.4525 10.6572L11.6281 9.48152V11.8328L10.4525 10.6572Z" style="fill: var(--element-neutral-color)" />
+</g>
+<defs>
+<clipPath id="clip0_850_47505">
+<rect width="24" height="24" fill="none"/>
+</clipPath>
+</defs>
+</svg>
+`;

package/src/components/alert-icon/icons/icon-14-alarm-unack-a.ts

@@ -0,0 +1,8 @@
+import {svg} from 'lit';
+export const svg14AlarmUnackA = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.1409 1.51681C11.5032 0.82773 12.4968 0.827732 12.8591 1.51681L22.8888 20.5936C23.2254 21.2338 22.7573 22 22.0297 22H1.97033C1.24266 22 0.774615 21.2338 1.11121 20.5936L11.1409 1.51681Z" fill="var(--alarm-enabled-background-color)"/>
+<path d="M8.50855 16.3814L11.6442 19.5171V9.4829L8.50855 12.6186H6V16.3814H8.50855Z" style="fill: var(--on-alarm-active-color)"/>
+<path d="M14.4664 14.5C14.4664 13.39 13.8267 12.4367 12.8985 11.9726V17.0211C13.8267 16.5633 14.4664 15.61 14.4664 14.5Z" style="fill: var(--on-alarm-active-color)"/>
+<path d="M12.8985 10.2919C14.7109 10.8312 16.0342 12.512 16.0342 14.5C16.0342 16.488 14.7109 18.1688 12.8985 18.7081V20C15.4133 19.4293 17.2885 17.1842 17.2885 14.5C17.2885 11.8159 15.4133 9.5707 12.8985 9V10.2919Z" style="fill: var(--on-alarm-active-color)"/>
+</svg>
+`;

package/src/components/alert-icon/icons/icon-14-alarm-unack-b.ts

@@ -0,0 +1,15 @@
+import {svg} from 'lit';
+export const svg14AlarmUnackB = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_850_47508)">
+<path d="M13.3017 1.28413L12.8591 1.51681L13.3017 1.28413C12.752 0.238626 11.248 0.238621 10.6983 1.28413L11.1314 1.51182L10.6983 1.28413L0.668648 20.3609C0.154023 21.3397 0.872928 22.5 1.97033 22.5H22.0297C23.1271 22.5 23.846 21.3397 23.3314 20.3609L13.3017 1.28413Z" style="stroke: var(--element-neutral-color)" />
+<path d="M8.50855 16.3814L11.6442 19.5171V9.4829L8.50855 12.6186H6V16.3814H8.50855Z" style="fill: var(--element-neutral-color)" />
+<path d="M14.4664 14.5C14.4664 13.39 13.8267 12.4367 12.8985 11.9726V17.0211C13.8267 16.5633 14.4664 15.61 14.4664 14.5Z" style="fill: var(--element-neutral-color)" />
+<path d="M12.8985 10.2919C14.7109 10.8312 16.0342 12.512 16.0342 14.5C16.0342 16.488 14.7109 18.1688 12.8985 18.7081V20C15.4133 19.4293 17.2885 17.1842 17.2885 14.5C17.2885 11.8159 15.4133 9.5707 12.8985 9V10.2919Z" style="fill: var(--element-neutral-color)" />
+</g>
+<defs>
+<clipPath id="clip0_850_47508">
+<rect width="24" height="24" fill="none"/>
+</clipPath>
+</defs>
+</svg>
+`;

package/src/components/alert-icon/icons/icon-14-warning-unack-a.ts

@@ -0,0 +1,8 @@
+import {svg} from 'lit';
+export const svg14WarningUnackA = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10.5" style="fill: var(--warning-enabled-background-color)" style="stroke: var(--element-active-color)"/>
+<path d="M8.50855 13.8814L11.6442 17.0171V6.9829L8.50855 10.1186H6V13.8814H8.50855Z" style="fill: var(--on-warning-active-color)" />
+<path d="M14.4664 12C14.4664 10.89 13.8267 9.93672 12.8985 9.47263V14.5211C13.8267 14.0633 14.4664 13.11 14.4664 12Z" style="fill: var(--on-warning-active-color)" />
+<path d="M12.8985 7.7919C14.7109 8.33124 16.0342 10.012 16.0342 12C16.0342 13.988 14.7109 15.6688 12.8985 16.2081V17.5C15.4133 16.9293 17.2885 14.6842 17.2885 12C17.2885 9.31585 15.4133 7.0707 12.8985 6.5V7.7919Z" style="fill: var(--on-warning-active-color)" />
+</svg>
+`;

package/src/components/alert-icon/icons/icon-14-warning-unack-b.ts

@@ -0,0 +1,8 @@
+import {svg} from 'lit';
+export const svg14WarningUnackB = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10.5" style="stroke: var(--element-neutral-color)" />
+<path d="M8.50855 13.8814L11.6442 17.0171V6.9829L8.50855 10.1186H6V13.8814H8.50855Z" style="fill: var(--element-neutral-color)" />
+<path d="M14.4664 12C14.4664 10.89 13.8267 9.93672 12.8985 9.47263V14.5211C13.8267 14.0633 14.4664 13.11 14.4664 12Z" style="fill: var(--element-neutral-color)" />
+<path d="M12.8985 7.7919C14.7109 8.33124 16.0342 10.012 16.0342 12C16.0342 13.988 14.7109 15.6688 12.8985 16.2081V17.5C15.4133 16.9293 17.2885 14.6842 17.2885 12C17.2885 9.31585 15.4133 7.0707 12.8985 6.5V7.7919Z" style="fill: var(--element-neutral-color)" />
+</svg>
+`;

package/src/components/alert-topbar-element/alert-topbar-element.stories.ts

@@ -18,6 +18,8 @@ const meta: Meta<typeof ObcAlertTopbarElement> = {
     minimized: false,
     showAck: true,
     alertMuted: false,
+    blinkAlarmValue: true,
+    blinkWarningValue: true,
   },
   argTypes: {
     alertType: {
@@ -30,6 +32,8 @@ const meta: Meta<typeof ObcAlertTopbarElement> = {
       n-alerts=${args.nAlerts}
       alert-type=${args.alertType}
       max-width=${args.maxWidth}
+      ?blink-alarm-value=${args.blinkAlarmValue}
+      ?blink-warning-value=${args.blinkWarningValue}
       ?minimized=${args.minimized}
       ?show-ack=${args.showAck}
       ?alert-muted=${args.alertMuted}

package/src/components/alert-topbar-element/alert-topbar-element.ts

@@ -13,18 +13,33 @@ import {classMap} from 'lit/directives/class-map.js';
  * Element that displays the alert in topbar
  * Use the element in the alerts slot in topbar
  *
+ * @prop {number} nAlerts - Number of alerts.
+ * @prop {AlertType} alertType - Type of alert.
+ * @prop {boolean} blinkAlarmValue - This value should alternate between true and false to make the icon blink.
+ *                       It should be synchronized with the blinkValue of other alarms.
+ * @prop {boolean} blinkWarningValue - This value should alternate between true and false to make the icon blink.
+ * @prop {boolean} showAck - If the ack button should be shown.
+ * @prop {boolean} alertMuted - If the alert is muted.
+ * @prop {boolean} minimized - If the alert is minimized.
+ * @prop {number} maxWidth - The maximum width of the alert.
+ *
  * @fires muteclick - Fired when the mute button is clicked
  * @fires ackclick - Fired when the ack button is clicked
  * @fires alertclick - Fired when the alert button is clicked
  * @fires messageclick - Fired when the message is clicked
  *
  * @slot  - The message to display in the alert element of type `obc-notification-message-item`
+ * @slot empty - The message to display when there are no alerts
  */
 @customElement('obc-alert-topbar-element')
 export class ObcAlertTopbarElement extends LitElement {
   @property({type: Number, attribute: 'n-alerts'}) nAlerts = 0;
   @property({type: String, attribute: 'alert-type'}) alertType: AlertType =
     AlertType.None;
+  @property({type: Boolean, attribute: 'blink-alarm-value'}) blinkAlarmValue =
+    false;
+  @property({type: Boolean, attribute: 'blink-warning-value'})
+  blinkWarningValue = false;
   @property({type: Boolean, attribute: 'show-ack'}) showAck = false;
   @property({type: Boolean, attribute: 'alert-muted'}) alertMuted = false;
   @property({type: Boolean}) minimized = false;
@@ -92,6 +107,8 @@ export class ObcAlertTopbarElement extends LitElement {
           alert-type=${this.alertType}
           n-alerts=${this.nAlerts}
           ?counter=${!empty}
+          ?blink-alarm-value=${this.blinkAlarmValue}
+          ?blink-warning-value=${this.blinkWarningValue}
           @click=${() => this.dispatchEvent(new CustomEvent('alertclick'))}
         ></obc-alert-button>
       </div>

package/src/components/notification-message/notification-message.stories.ts

@@ -2,7 +2,7 @@ import type {Meta, StoryObj} from '@storybook/web-components';
 import {ObcNotificationMessage} from './notification-message';
 import './notification-message';
 import '../notification-message-item/notification-message-item';
-import '../../icons/icon-14-alarm-unack';
+import '../alert-icon/alert-icon';
 import {html} from 'lit';
 
 const meta: Meta<typeof ObcNotificationMessage> = {
@@ -20,7 +20,11 @@ export const Primary: Story = {
   render: () => html`
     <obc-notification-message>
       <obc-notification-message-item time="2023-01-01T13:37:01+01:00">
-        <obi-14-alarm-unack slot="icon" use-css-color></obi-14-alarm-unack>
+        <obc-alert-icon
+          slot="icon"
+          name="alarm-unack"
+          blink-value
+        ></obc-alert-icon>
         <div slot="message">This is a message</div>
       </obc-notification-message-item>
       <div slot="empty">No active alerts</div>
@@ -40,11 +44,19 @@ export const Large: Story = {
   render: () => html`
     <obc-notification-message large>
       <obc-notification-message-item time="2023-01-01T13:37:01+01:00">
-        <obi-14-alarm-unack slot="icon" use-css-color></obi-14-alarm-unack>
+        <obc-alert-icon
+          slot="icon"
+          name="alarm-unack"
+          blink-value
+        ></obc-alert-icon>
         <div slot="message">This is a message</div>
       </obc-notification-message-item>
       <obc-notification-message-item time="2023-01-01T13:37:01+01:00">
-        <obi-14-alarm-unack slot="icon" use-css-color></obi-14-alarm-unack>
+        <obc-alert-icon
+          slot="icon"
+          name="alarm-unack"
+          blink-value
+        ></obc-alert-icon>
         <div slot="message">This is a message</div>
       </obc-notification-message-item>
       <div slot="empty">No active alerts</div>
@@ -53,13 +65,17 @@ export const Large: Story = {
 };
 
 export const LargeSingleMessage: Story = {
-  render: () => `
+  render: () => html`
     <obc-notification-message large>
-        <obc-notification-message-item time="2023-01-01T13:37:01+01:00">
-            <obi-14-alarm-unack slot="icon" use-css-color></obi-14-alarm-unack>
-            <div slot="message">This is a message</div>
-        </obc-notification-message-item>
-        <div slot="empty">No active alerts</div>
+      <obc-notification-message-item time="2023-01-01T13:37:01+01:00">
+        <obc-alert-icon
+          slot="icon"
+          name="alarm-unack"
+          blink-value
+        ></obc-alert-icon>
+        <div slot="message">This is a message</div>
+      </obc-notification-message-item>
+      <div slot="empty">No active alerts</div>
     </obc-notification-message>
   `,
 };