@oicl/openbridge-webcomponents 0.0.4

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

@@ -0,0 +1,64 @@
+import {LitElement, html, unsafeCSS} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import compentStyle from './alert-menu.css?inline';
+import '../button/button';
+import '../card-list-button/card-list-button';
+import '../../icons/icon-02-chevron-right';
+import '../../icons/icon-14-alert-list';
+
+/**
+ *
+ * @fires ack-all-click - Fired when the ack button is clicked
+ * @fires alert-list-click - Fired when the alert list button is clicked
+ */
+@customElement('obc-alert-menu')
+export class ObcAlertMenu extends LitElement {
+  @property({type: Boolean}) empty: boolean = false;
+
+  override render() {
+    return html`
+      <div class="wrapper">
+        <div class="header">
+          <div class="title">Active alerts</div>
+          ${this.empty
+            ? null
+            : html`<obc-button
+                variant="raised"
+                class="ack-all-btn"
+                @click=${() =>
+                  this.dispatchEvent(new CustomEvent('ack-all-click'))}
+              >
+                ACK ALL
+              </obc-button> `}
+        </div>
+        <div class="divider"></div>
+        <slot></slot>
+        ${this.empty
+          ? html`<div class="empty">
+              <slot name="empty">No active alerts</slot>
+            </div>`
+          : null}
+        <div class="spacer"></div>
+        <div class="divider"></div>
+        <obc-card-list-button
+          class="alert-list-btn"
+          @click=${() => {
+            this.dispatchEvent(new CustomEvent('alert-list-click'));
+          }}
+        >
+          <obi-14-alert-list slot="leading-icon"></obi-14-alert-list>
+          Alert list
+          <obi-02-chevron-right slot="trailing-icon"></obi-02-chevron-right>
+        </obc-card-list-button>
+      </div>
+    `;
+  }
+
+  static override styles = unsafeCSS(compentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-alert-menu': ObcAlertMenu;
+  }
+}

package/src/components/alert-menu-item/alert-menu-item.css

@@ -0,0 +1,47 @@
+
+:host {
+    display: contents;
+
+}
+
+.alert {
+    display: contents;
+
+    & .icon {
+        display: block;
+        height: 32px;
+        width: 32px;
+    }
+
+    & .message {
+        @mixin font-body;
+        flex-grow: 1;
+        flex-shrink: 1;
+        color: var(--element-active-color, #1A1A1A);
+        min-height: 48px;
+        display: flex;
+        align-items: center;
+    }
+
+    & .time-wrapper {
+        display: contents;
+    }
+
+    & .time-since {
+        flex-shrink: 0;
+        @mixin font-body;
+        color: var(--element-neutral-color);
+    }
+
+    & .time {
+        flex-shrink: 0;
+        @mixin font-body;
+        color: var(--element-neutral-color);
+        display: flex;
+
+        & .time-divider {
+            position: relative;
+            top: -0.75px;
+        }
+    }
+}

package/src/components/alert-menu-item/alert-menu-item.ts

@@ -0,0 +1,73 @@
+import {LitElement, css, html, unsafeCSS} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import compentStyle from './alert-menu-item.css?inline';
+import {renderTime} from '../../time';
+import '../button/button';
+/**
+ *
+ * @fires ack-click - Fired when the ack button is clicked
+ */
+@customElement('obc-alert-menu-item')
+export class ObcAlertMenuItem extends LitElement {
+  @property({type: String}) message = 'Message';
+  @property({type: String}) time = '2021-01-01T00:00:00Z';
+  @property({type: String, attribute: 'time-since'}) timeSince = '1h';
+  @property({type: Boolean}) acknowledgeble = false;
+  @property({type: Boolean}) acknowledged = false;
+  @property({type: Number, attribute: 'narrow-breakpoint-px'})
+  narrowBreakpointPx = 400;
+
+  override render() {
+    const style = css`
+      @media (max-width: ${this.narrowBreakpointPx}px) {
+        .alert .time-wrapper {
+          grid-column-start: 3;
+          grid-column-end: -2;
+          display: flex !important;
+          flex-direction: column;
+          align-items: center;
+          justify-content: flex-start;
+          flex-shrink: 0;
+        }
+      }
+    `;
+
+    const time = renderTime(new Date(this.time));
+    return html`
+      <style>
+        ${style}
+      </style>
+      <div class="alert">
+        <div class="icon">
+          <slot name="icon"> </slot>
+        </div>
+        <div class="message">${this.message}</div>
+        <div class="time-wrapper">
+          <div class="time">${time}</div>
+          <div class="time-since">${this.timeSince}</div>
+        </div>
+        <div class="acknowledge">
+          ${this.acknowledgeble && !this.acknowledged
+            ? html`
+                <obc-button
+                  class="acknowledge-button"
+                  full-width
+                  @click=${() =>
+                    this.dispatchEvent(new CustomEvent('ack-click'))}
+                  >ACK</obc-button
+                >
+              `
+            : ''}
+        </div>
+      </div>
+    `;
+  }
+
+  static override styles = unsafeCSS(compentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ob-alert-menu-item': ObcAlertMenuItem;
+  }
+}

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

@@ -0,0 +1,9 @@
+.wrapper {
+    display: flex;
+    align-items: center;
+    margin-left: 8px;
+}
+
+.notification-message {
+    flex-grow: 1;
+}

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

@@ -0,0 +1,103 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcAlertTopbarElement} from './alert-topbar-element';
+import './alert-topbar-element';
+import {html} from 'lit';
+import '../notification-message-item/notification-message-item';
+import '../../icons/icon-14-alarm-unack';
+import '../../icons/icon-14-caution-color';
+import {AlertType} from '../../types';
+
+const meta: Meta<typeof ObcAlertTopbarElement> = {
+  title: 'Application/Alert topbar element',
+  tags: ['autodocs'],
+  component: 'obc-alert-topbar-element',
+  args: {
+    nAlerts: 1,
+    alertType: AlertType.Alarm,
+    maxWidth: 480,
+    minimized: false,
+    showAck: true,
+    alertMuted: false,
+  },
+  argTypes: {
+    alertType: {
+      options: Object.values(AlertType),
+      control: {type: 'select'},
+    },
+  },
+  render: (args) => html`
+    <obc-alert-topbar-element
+      n-alerts=${args.nAlerts}
+      alert-type=${args.alertType}
+      max-width=${args.maxWidth}
+      ?minimized=${args.minimized}
+      ?show-ack=${args.showAck}
+      ?alert-muted=${args.alertMuted}
+    >
+      <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>
+    </obc-alert-topbar-element>
+  `,
+} satisfies Meta<ObcAlertTopbarElement>;
+
+export default meta;
+type Story = StoryObj<ObcAlertTopbarElement>;
+
+export const Full: Story = {};
+
+export const Muted: Story = {
+  args: {
+    alertMuted: true,
+  },
+};
+
+export const NoAck: Story = {
+  args: {
+    showAck: false,
+  },
+};
+
+export const Caution: Story = {
+  args: {
+    alertType: AlertType.Caution,
+    showAck: false,
+  },
+  render: (args) => html`
+    <obc-alert-topbar-element
+      n-alerts=${args.nAlerts}
+      alert-type=${args.alertType}
+      max-width=${args.maxWidth}
+      ?minimized=${args.minimized}
+      ?show-ack=${args.showAck}
+      ?alert-muted=${args.alertMuted}
+    >
+      <obc-notification-message-item time="2023-01-01T13:37:01+01:00">
+        <obi-14-caution-color slot="icon" use-css-color></obi-14-caution-color>
+        <div slot="message">This is a message</div>
+      </obc-notification-message-item>
+    </obc-alert-topbar-element>
+  `,
+};
+
+export const Minimized: Story = {
+  args: {
+    minimized: true,
+  },
+};
+
+export const NoAlerts: Story = {
+  args: {
+    nAlerts: 0,
+    alertType: AlertType.None,
+  },
+  render: (args) =>
+    html` <obc-alert-topbar-element
+      n-alerts=${args.nAlerts}
+      alert-type=${args.alertType}
+      max-width=${args.maxWidth}
+      ?minimized=${args.minimized}
+    >
+    </obc-alert-topbar-element>`,
+};

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

@@ -0,0 +1,108 @@
+import {LitElement, html, unsafeCSS} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import compentStyle from './alert-topbar-element.css?inline';
+import '../alert-button/alert-button';
+import '../notification-button/notification-button';
+import '../notification-message/notification-message';
+
+import '../../icons/icon-14-mute';
+import {AlertType} from '../../types';
+import {classMap} from 'lit/directives/class-map.js';
+
+/**
+ * Element that displays the alert in topbar
+ * Use the element in the alerts slot in topbar
+ *
+ * @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`
+ */
+@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: 'show-ack'}) showAck = false;
+  @property({type: Boolean, attribute: 'alert-muted'}) alertMuted = false;
+  @property({type: Boolean}) minimized = false;
+  @property({type: Number, attribute: 'max-width'}) maxWidth = 480;
+
+  override render() {
+    const empty = this.nAlerts === 0;
+    const disabledMute =
+      this.alertMuted ||
+      empty ||
+      this.alertType === AlertType.None ||
+      this.alertType === AlertType.Running ||
+      this.alertType === AlertType.Caution;
+    let firstPart;
+    if (this.minimized) {
+      firstPart = html`<obc-notification-button
+        icon
+        open-right
+        corner-left
+        @click=${() => this.dispatchEvent(new CustomEvent('muteclick'))}
+      >
+        <obi-14-mute></obi-14-mute>
+      </obc-notification-button>`;
+    } else {
+      firstPart = html`<obc-notification-message
+          class="notification-message"
+          ?empty=${empty}
+          @click=${() => this.dispatchEvent(new CustomEvent('messageclick'))}
+        >
+          <slot></slot>
+          <div slot="empty">No active alerts</div>
+        </obc-notification-message>
+        ${this.showAck
+          ? html`<obc-notification-button
+              open-right
+              @click=${() => this.dispatchEvent(new CustomEvent('ackclick'))}
+              >ACK</obc-notification-button
+            >`
+          : html``}
+        <obc-notification-button
+          icon
+          open-right
+          ?indent=${empty}
+          ?disabled=${disabledMute}
+          @click=${() => this.dispatchEvent(new CustomEvent('muteclick'))}
+        >
+          <obi-14-mute></obi-14-mute>
+        </obc-notification-button>`;
+    }
+    return html`
+      <style>
+        :host {
+          max-width: ${this.maxWidth}px;
+        }
+      </style>
+      <div
+        class=${classMap({
+          wrapper: true,
+          minimized: this.minimized,
+        })}
+        style=${`max-width: ${this.maxWidth - 8}px;`}
+      >
+        ${firstPart}
+        <obc-alert-button
+          alert-type=${this.alertType}
+          n-alerts=${this.nAlerts}
+          ?counter=${!empty}
+          @click=${() => this.dispatchEvent(new CustomEvent('alertclick'))}
+        ></obc-alert-button>
+      </div>
+    `;
+  }
+
+  static override styles = unsafeCSS(compentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ob-alert-topbar-element': ObcAlertTopbarElement;
+  }
+}

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

@@ -0,0 +1,65 @@
+.wrapper {
+  box-sizing: border-box;
+  position: relative;
+  height: 96px;
+  width: 72px;
+
+  & button {
+    @mixin style style=normal;
+    color: var(--on-normal-neutral-color);
+
+    height: 72px;
+    width: 72px;
+    border-radius: 100%;
+
+    display: flex;
+
+    align-items: center;
+    justify-content: center;
+
+    & .icon {
+      height: 48px;
+      width: 48px;
+    }
+  }
+
+  &.small {
+    height: 64px;
+    width: 48px;
+    padding-top: 8px;
+
+    & button {
+      height: 32px;
+      width: 32px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    & .icon {
+      height: 20px;
+      width: 20px;
+    }
+  }
+
+  .label {
+    color: var(--element-active-color, #1a1a1a);
+    position: absolute;
+    bottom: 4px;
+    left: 0;
+    right: 0;
+
+    text-align: center;
+    @mixin font-label;
+  }
+
+  &.checked {
+    button {
+      @mixin style style=selected;
+      color: var(--on-selected-active-color);
+    }
+
+    .label {
+      @mixin font-label-active;
+    }
+  }
+}

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

@@ -0,0 +1,62 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcAppButton} from './app-button';
+import './app-button';
+import {iconIds, iconIdToIconHtml} from '../../storybook-util';
+import {html} from 'lit';
+
+const meta: Meta<typeof ObcAppButton> = {
+  title: 'Button/App button',
+  tags: ['autodocs'],
+  component: 'obc-app-button',
+  args: {
+    size: 'normal',
+    icon: '06-ship',
+    label: 'Button',
+  },
+  argTypes: {
+    icon: {
+      control: {type: 'select'},
+      options: iconIds,
+    },
+    size: {
+      control: {type: 'select'},
+      options: ['normal', 'small'],
+    },
+    label: {
+      control: {type: 'text'},
+    },
+    checked: {
+      control: {type: 'boolean'},
+    },
+  },
+  render: (args) => {
+    const icon = args.icon
+      ? iconIdToIconHtml(args.icon, {size: 24, slot: 'icon'})
+      : '';
+    return html`<obc-app-button
+      size=${args.size}
+      ?checked=${args.checked}
+      label=${args.label}
+      >${icon}</obc-app-button
+    >`;
+  },
+} satisfies Meta<ObcAppButton>;
+
+export default meta;
+type Story = StoryObj<ObcAppButton>;
+
+export const Primary: Story = {
+  args: {},
+};
+
+export const Checked: Story = {
+  args: {
+    checked: true,
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+  },
+};

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

@@ -0,0 +1,36 @@
+import {LitElement, html, unsafeCSS} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import compentStyle from './app-button.css?inline';
+import {classMap} from 'lit/directives/class-map.js';
+
+@customElement('obc-app-button')
+export class ObcAppButton extends LitElement {
+  @property({type: String}) label = 'Button';
+  @property({type: Boolean}) checked = false;
+  @property({type: String}) size = 'normal';
+
+  override render() {
+    return html` <div
+      class="${classMap({
+        wrapper: true,
+        checked: this.checked,
+        small: this.size === 'small',
+      })}"
+    >
+      <button>
+        <span class="icon">
+          <slot name="icon"></slot>
+        </span>
+      </button>
+      <span class="label"> ${this.label} </span>
+    </div>`;
+  }
+
+  static override styles = unsafeCSS(compentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-app-button': ObcAppButton;
+  }
+}

package/src/components/app-menu/app-menu.css

@@ -0,0 +1,15 @@
+.card {
+  @mixin card;
+  display: flex;
+  flex-direction: column;
+  padding: 8px 24px 8px;
+  box-sizing: border-box;
+  max-width: 440px;
+
+  .main-apps {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 16px;
+    padding: 24px 0;
+  }
+}

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

@@ -0,0 +1,58 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcAppMenu} from './app-menu';
+import './app-menu';
+import '../app-button/app-button';
+import {html} from 'lit';
+import '../../icons/icon-06-ship';
+
+const meta: Meta<typeof ObcAppMenu> = {
+  title: 'Application/App menu',
+  tags: ['autodocs'],
+  component: 'obc-app-menu',
+} satisfies Meta<ObcAppMenu>;
+
+export default meta;
+type Story = StoryObj<ObcAppMenu>;
+
+export const Primary: Story = {
+  render: () => {
+    return html`<obc-app-menu>
+      <obc-app-button label="Radar" checked
+        ><obi-06-ship slot="icon"></obi-06-ship
+      ></obc-app-button>
+      <obc-app-button label="Label"
+        ><obi-06-ship slot="icon"></obi-06-ship
+      ></obc-app-button>
+      <obc-app-button label="Label"
+        ><obi-06-ship slot="icon"></obi-06-ship
+      ></obc-app-button>
+      <obc-app-button label="Label"
+        ><obi-06-ship slot="icon"></obi-06-ship
+      ></obc-app-button>
+      <obc-app-button label="Label"
+        ><obi-06-ship slot="icon"></obi-06-ship
+      ></obc-app-button>
+      <obc-app-button label="Label"
+        ><obi-06-ship slot="icon"></obi-06-ship
+      ></obc-app-button>
+      <obc-app-button label="Label"
+        ><obi-06-ship slot="icon"></obi-06-ship
+      ></obc-app-button>
+      <obc-app-button label="Label"
+        ><obi-06-ship slot="icon"></obi-06-ship
+      ></obc-app-button>
+      <obc-app-button label="Label"
+        ><obi-06-ship slot="icon"></obi-06-ship
+      ></obc-app-button>
+      <obc-app-button label="Label"
+        ><obi-06-ship slot="icon"></obi-06-ship
+      ></obc-app-button>
+      <obc-app-button label="Label"
+        ><obi-06-ship slot="icon"></obi-06-ship
+      ></obc-app-button>
+      <obc-app-button label="Label"
+        ><obi-06-ship slot="icon"></obi-06-ship
+      ></obc-app-button>
+    </obc-app-menu>`;
+  },
+};

package/src/components/app-menu/app-menu.ts

@@ -0,0 +1,36 @@
+import {LitElement, html, unsafeCSS} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import compentStyle from './app-menu.css?inline';
+import '../input/input';
+import '../app-button/app-button';
+import '../../icons/icon-01-search';
+
+@customElement('obc-app-menu')
+export class ObcAppMenu extends LitElement {
+  onSearchInput(e: Event) {
+    this.dispatchEvent(
+      new CustomEvent('search', {detail: (e.target as HTMLInputElement).value})
+    );
+  }
+
+  override render() {
+    return html`
+      <div class="card">
+        <obc-input placeholder="Search" @input=${this.onSearchInput}>
+          <obi-01-search slot="icon"></obi-01-search>
+        </obc-input>
+        <div class="main-apps">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+
+  static override styles = unsafeCSS(compentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-app-menu': ObcAppMenu;
+  }
+}