@oicl/openbridge-webcomponents 0.0.7 → 0.0.9

package/script/download-alert-icons.ts

@@ -0,0 +1,180 @@
+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 {
+  IconRef,
+  getCssColorIcon,
+  getStylesForNode,
+  kebabToUpperCamelCase,
+} from './convert-icons';
+
+dotenv.config();
+
+const documentId = 'TPoHGyeEtlcpnNekOa4lY3';
+
+const useCache = false;
+
+const iconMapUrl: {url: string; name: string; typeA: boolean}[] = [
+  {
+    url: 'https://www.figma.com/file/TPoHGyeEtlcpnNekOa4lY3/OpenBridge-CAM?type=design&node-id=850-47442&mode=design&t=QA1ohadrbRZxW1ss-4',
+    name: '14-alarm-unack',
+    typeA: true,
+  },
+  {
+    url: 'https://www.figma.com/file/TPoHGyeEtlcpnNekOa4lY3/OpenBridge-CAM?type=design&node-id=850-47508&mode=design&t=QA1ohadrbRZxW1ss-4',
+    name: '14-alarm-unack',
+    typeA: false,
+  },
+  {
+    url: 'https://www.figma.com/file/TPoHGyeEtlcpnNekOa4lY3/OpenBridge-CAM?type=design&node-id=850-47481&mode=design&t=QA1ohadrbRZxW1ss-4',
+    name: '14-alarm-silenced',
+    typeA: true,
+  },
+  {
+    url: 'https://www.figma.com/file/TPoHGyeEtlcpnNekOa4lY3/OpenBridge-CAM?type=design&node-id=850-47505&mode=design&t=QA1ohadrbRZxW1ss-4',
+    name: '14-alarm-silenced',
+    typeA: false,
+  },
+  {
+    url: 'https://www.figma.com/file/TPoHGyeEtlcpnNekOa4lY3/OpenBridge-CAM?type=design&node-id=850-47445&mode=design&t=QA1ohadrbRZxW1ss-4',
+    name: '14-warning-unack',
+    typeA: true,
+  },
+  {
+    url: 'https://www.figma.com/file/TPoHGyeEtlcpnNekOa4lY3/OpenBridge-CAM?type=design&node-id=850-47475&mode=design&t=QA1ohadrbRZxW1ss-4',
+    name: '14-warning-unack',
+    typeA: false,
+  },
+];
+
+const iconMap: {id: string; name: string; typeA: boolean}[] = iconMapUrl.map(
+  (icon) => {
+    let id = icon.url.match(/node-id=([0-9/-]+)/)![1];
+    // replace - with :
+    id = id.replace(/-/g, ':');
+    return {id, name: icon.name, typeA: icon.typeA};
+  }
+);
+
+const iconDir = './src/components/alert-icon/icons';
+
+export async function main() {
+  // delete all icons
+
+  if (fs.existsSync(iconDir)) {
+    const files = fs.readdirSync(iconDir);
+    for (const file of files) {
+      fs.unlinkSync(`${iconDir}/${file}`);
+    }
+  } else {
+    fs.mkdirSync(iconDir);
+  }
+
+  const api = new Figma.Api({
+    personalAccessToken: process.env.FIGMA_TOKEN as string,
+  });
+
+  const cachepath = './script/.cache-figma-alert.json';
+  let file: GetFileResult;
+  if (fs.existsSync(cachepath) && useCache) {
+    file = JSON.parse(fs.readFileSync(cachepath, 'utf8'));
+  } else {
+    file = await api.getFile(documentId, {ids: ['850:47441']});
+    // save to cache
+    fs.writeFileSync(cachepath, JSON.stringify(file, null, 2));
+  }
+  console.log('Got page');
+  const page = file.document.children.find(
+    (p) => p.name === 'Icons'
+  ) as Figma.Node<'CANVAS'>;
+  const frames = page.children.filter(
+    (child) => child.name === 'Frame 3'
+  ) as Figma.Node<'FRAME'>[];
+  const styles = file.styles;
+
+  const knownIds = iconMap.map((icon) => icon.id);
+  let icons = frames.flatMap((frame): IconRef[] => {
+    return frame.children
+      .filter((child) => knownIds.includes(child.id))
+      .map((child) => {
+        const icon = iconMap.find((icon) => icon.id === child.id);
+        const name = icon!.name + (icon!.typeA ? '-a' : '-b');
+        const javascriptName = 'svg' + kebabToUpperCamelCase(name);
+        return {
+          name: name,
+          id: child.id,
+          javascriptName: javascriptName,
+          styles: getStylesForNode(child, styles),
+        };
+      });
+  });
+
+  // remove duplicate icon names
+  const seen = new Set();
+  icons = icons.filter((icon) => {
+    const duplicate = seen.has(icon.javascriptName);
+    seen.add(icon.javascriptName);
+    if (duplicate) {
+      console.log('Duplicate icon name', icon.name);
+    }
+    return !duplicate;
+  });
+
+  // download all icons
+  if (!useCache) {
+    const split = 50;
+    for (let i = 0; i < icons.length; i += split) {
+      console.log('Got images', i);
+      const iconChunks = icons.slice(i, i + split);
+      const images = await api.getImage(documentId, {
+        ids: iconChunks.map((icon) => icon.id).join(','),
+        scale: 1,
+        format: 'svg',
+      });
+
+      // write icons to disk
+      await Promise.all(
+        Object.keys(images.images).map(async (nodeId) => {
+          const icon = icons.find((icon) => icon.id === nodeId);
+          const imageUrl = images.images[nodeId];
+          if (icon && imageUrl) {
+            // download icons
+            const request = await fetch(imageUrl);
+            const imageData = await request.text();
+            fs.writeFileSync(
+              `./script/.cache/alert-icons/${icon.name}.svg`,
+              imageData
+            );
+          }
+        })
+      );
+    }
+  }
+
+  const fileImport: string[] = [];
+  for (const icon of icons) {
+    const imageData = fs.readFileSync(
+      `./script/.cache/alert-icons/${icon.name}.svg`,
+      'utf8'
+    );
+    const cssColorIcon = getCssColorIcon(imageData, icon);
+
+    // convert icon.name from kebab case to upper cammel case
+    const name = icon.name.toLowerCase();
+
+    const component = `import {svg} from 'lit';
+export const ${icon.javascriptName} = svg\`${cssColorIcon}\`;
+`;
+    fs.writeFileSync(`${iconDir}/icon-${name}.ts`, component);
+    fileImport.push(
+      `import {${icon.javascriptName}} from './icons/icon-${name}';`
+    );
+  }
+
+  fileImport.sort();
+  console.log(fileImport.join('\n'));
+  console.log('done');
+}
+
+main();

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}