@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.49 → 2.0.0-next.52

package/src/integration-systems/integration-button/integration-button.stories.ts

@@ -1,22 +1,30 @@
 import type {Meta, StoryObj} from '@storybook/web-components-vite';
-import {ObcIntegrationButton} from './integration-button.js';
+import {
+  IntegrationButtonType,
+  IntegrationButtonVariant,
+  ObcIntegrationButton,
+} from './integration-button.js';
 import './integration-button.js';
 import {html} from 'lit';
 import '../../icons/icon-placeholder.js';
 
-const meta: Meta<typeof ObcIntegrationButton> = {
+const meta: Meta<ObcIntegrationButton> = {
   title: 'Integration Systems/Integration Button',
-  tags: ['6.0'],
+  tags: ['alpha'],
   component: 'obc-integration-button',
   args: {
     hasLeadingIcon: true,
     hasTrailingIcon: true,
     hasTrailingIcon2: true,
+    hasStatus: false,
     readouts: [
       {label: 'Readout 1', value: 'Value 1', unit: 'Unit 1'},
       {label: 'Readout 2', value: 'Value 2', unit: 'Unit 2'},
     ],
+    variant: IntegrationButtonVariant.normal,
+    type: IntegrationButtonType.regular,
   },
+
   globals: {
     backgrounds: {
       value: 'integration-container-global-color',
@@ -28,9 +36,12 @@ const meta: Meta<typeof ObcIntegrationButton> = {
       .hasLeadingIcon=${args.hasLeadingIcon}
       .hasTrailingIcon=${args.hasTrailingIcon}
       .hasTrailingIcon2=${args.hasTrailingIcon2}
+      .hasStatus=${args.hasStatus}
       .readouts=${args.readouts}
       .selected=${args.selected}
       .disabled=${args.disabled}
+      .variant=${args.variant}
+      .type=${args.type}
     >
       <obi-placeholder slot="leading-icon"></obi-placeholder>
       <obi-placeholder slot="trailing-icon"></obi-placeholder>
@@ -44,10 +55,65 @@ const meta: Meta<typeof ObcIntegrationButton> = {
 } satisfies Meta<ObcIntegrationButton>;
 export default meta;
 
-export const Primary: StoryObj<typeof ObcIntegrationButton> = {};
+export const Primary: StoryObj<ObcIntegrationButton> = {};
+
+export const WithStatus: StoryObj<ObcIntegrationButton> = {
+  args: {
+    hasStatus: true,
+  },
+  render: (args) => html`
+    <obc-integration-button
+      style="width: 320px; display: block;"
+      .hasLeadingIcon=${args.hasLeadingIcon}
+      .hasTrailingIcon=${args.hasTrailingIcon}
+      .hasTrailingIcon2=${args.hasTrailingIcon2}
+      .readouts=${args.readouts}
+      .selected=${args.selected}
+      .disabled=${args.disabled}
+      .variant=${args.variant}
+      .type=${args.type}
+      .hasStatus=${args.hasStatus}
+    >
+      <obi-placeholder slot="leading-icon"></obi-placeholder>
+      <obi-placeholder slot="trailing-icon"></obi-placeholder>
+      <obi-placeholder slot="trailing-icon2"></obi-placeholder>
+      <div slot="label">Label</div>
+      <div slot="status">Status</div>
+      <div slot="info-label">Info Label</div>
+      <div slot="info-status">Info Status</div>
+    </obc-integration-button>
+  `,
+};
 
-export const Selected: StoryObj<typeof ObcIntegrationButton> = {
+export const Selected: StoryObj<ObcIntegrationButton> = {
   args: {
     selected: true,
   },
 };
+
+export const Flat: StoryObj<ObcIntegrationButton> = {
+  args: {
+    variant: IntegrationButtonVariant.flat,
+    hasTrailingIcon: false,
+  },
+};
+
+export const Hug: StoryObj<ObcIntegrationButton> = {
+  args: {
+    type: IntegrationButtonType.hug,
+    hasTrailingIcon: false,
+  },
+};
+
+export const Rich: StoryObj<ObcIntegrationButton> = {
+  args: {
+    type: IntegrationButtonType.rich,
+  },
+};
+
+export const Disabled: StoryObj<ObcIntegrationButton> = {
+  args: {
+    type: IntegrationButtonType.rich,
+    disabled: true,
+  },
+};

package/src/integration-systems/integration-button/integration-button.ts

@@ -10,6 +10,17 @@ export interface IntegrationButtonReadout {
   unit: string;
 }
 
+export enum IntegrationButtonVariant {
+  normal = 'normal',
+  flat = 'flat',
+}
+
+export enum IntegrationButtonType {
+  hug = 'hug',
+  regular = 'regular',
+  rich = 'rich',
+}
+
 /**
  * `<obc-integration-button>` – A button component for integration systems.
  *
@@ -17,73 +28,261 @@ export interface IntegrationButtonReadout {
  * @slot trailing-icon - Icon after label (shown when `hasTrailingIcon` is true)
  * @slot trailing-icon2 - Icon after label (shown when `hasTrailingIcon2` is true)
  * @slot label - Label text
- * @slot status - Status text
+ * @slot status - Status/description text (shown when `hasStatus` is true)
  * @slot info-label - Info label text
  * @slot info-status - Info status text
+ * @slot integration-vessel-menu - Integration vessel menu to be shown when button is in activated state
+ *
+ * @fires click - Fired when the internal button is activated.
+ *
+ * @property {boolean} hasTrailingIcon - Shows the `trailing-icon` slot.
+ * @property {boolean} hasTrailingIcon2 - Shows the `trailing-icon2` slot.
+ * @property {boolean} hasLeadingIcon - Shows the `leading-icon` slot.
+ * @property {boolean} hasstatus - Shows the `status` slot.
+ * @property {IntegrationButtonReadout[]} readouts - List of readout items shown in the rich type.
+ * @property {boolean} disabled - Disables the internal button.
+ * @property {boolean} activated - Applies active state styling while a selection is pending.
+ * @property {boolean} selected - Applies selected state styling.
+ * @property {boolean} dividerBottom - Shows a bottom divider under the button.
+ * @property {boolean} dividerRight - Shows a right divider to separate from adjacent buttons.
+ * @property {IntegrationButtonVariant} variant - Visual variant (`normal` or `flat`).
+ * @property {IntegrationButtonType} type - Layout type (`hug`, `regular`, or `rich`).
  */
 @customElement('obc-integration-button')
 export class ObcIntegrationButton extends LitElement {
   @property({type: Boolean}) hasTrailingIcon = false;
   @property({type: Boolean}) hasTrailingIcon2 = false;
   @property({type: Boolean}) hasLeadingIcon = false;
+  @property({type: Boolean}) hasStatus = false;
   @property({type: Array, attribute: false})
   readouts: IntegrationButtonReadout[] = [];
   @property({type: Boolean}) disabled = false;
+  @property({type: Boolean}) activated = false;
   @property({type: Boolean}) selected = false;
   @property({type: Boolean}) dividerBottom = false;
+  @property({type: Boolean}) dividerRight = false;
+  @property({type: String}) variant: IntegrationButtonVariant =
+    IntegrationButtonVariant.normal;
+  @property({type: String}) type: IntegrationButtonType =
+    IntegrationButtonType.regular;
 
-  override render() {
+  private getButtonClasses() {
+    return {
+      'touch-target': true,
+      selected: this.selected,
+      activated: this.activated,
+      disabled: this.disabled,
+      'has-description': this.hasStatus,
+      ['variant-' + this.variant]: true,
+      ['type-' + this.type]: true,
+    };
+  }
+
+  private onIntegrationVesselMenuClick(event: Event) {
+    event.stopPropagation();
+  }
+
+  renderRich() {
     return html`
-      <button
+      <div class="button-horizontal-divider-container">
+        <div class="button-vertical-divider-container">
+          <button
+            class=${classMap(this.getButtonClasses())}
+            ?disabled=${this.disabled}
+          >
+            <div class="content-container">
+              <div class="main-container">
+                ${this.hasLeadingIcon
+                  ? html`<div class="icon leading">
+                      <slot name="leading-icon"></slot>
+                    </div>`
+                  : nothing}
+                <div class="text-container">
+                  <div class="label"><slot name="label"></slot></div>
+                  ${this.hasStatus
+                    ? html`<div class="status">
+                        <slot name="status"></slot>
+                      </div>`
+                    : nothing}
+                </div>
+                ${this.hasTrailingIcon
+                  ? html`<div class="icon-container">
+                      ${this.hasTrailingIcon2
+                        ? html`<slot
+                            name="trailing-icon2"
+                            class="icon trailing"
+                          ></slot>`
+                        : nothing}
+                      <slot name="trailing-icon" class="icon trailing"></slot>
+                    </div>`
+                  : nothing}
+              </div>
+              <div class="info-container">
+                <div class="info-item">
+                  <slot class="info-label" name="info-label"></slot>
+                  <slot class="info-status" name="info-status"></slot>
+                </div>
+                ${this.readouts.map(
+                  (readout) => html`
+                    <div class="info-readout-item">
+                      <div class="info-item-label">${readout.label}</div>
+                      <div class="info-item-value">${readout.value}</div>
+                      <div class="info-item-unit">${readout.unit}</div>
+                    </div>
+                  `
+                )}
+              </div>
+            </div>
+          </button>
+          ${this.dividerRight
+            ? html`<div class="divider-right"></div>`
+            : html`<div
+                class="divider-right"
+                style="visibility: hidden;"
+              ></div>`}
+        </div>
+        ${this.dividerBottom
+          ? html`<div class="divider-bottom"></div>`
+          : nothing}
+      </div>
+      <div
         class=${classMap({
-          wrapper: true,
-          selected: this.selected,
+          'integration-vessel-menu-container': true,
+          show: this.activated,
         })}
-        ?disabled=${this.disabled}
+        @click=${this.onIntegrationVesselMenuClick}
       >
-        <div class="main-container">
-          ${this.hasLeadingIcon
-            ? html`<div class="icon leading">
-                <slot name="leading-icon"></slot>
-              </div>`
-            : nothing}
-          <div class="text-container">
-            <div class="label"><slot name="label"></slot></div>
-            <div class="status"><slot name="status"></slot></div>
+        <slot name="integration-vessel-menu"></slot>
+      </div>
+    `;
+  }
+
+  renderRegular() {
+    return html`
+      <div class="button-vertical-divider-container">
+        <button
+          class=${classMap(this.getButtonClasses())}
+          ?disabled=${this.disabled}
+        >
+          <div class="content-container">
+            ${this.hasLeadingIcon
+              ? html`<div class="icon leading">
+                  <slot name="leading-icon"></slot>
+                </div>`
+              : nothing}
+            <div class="text-container">
+              <div class="label"><slot name="label"></slot></div>
+              ${this.hasStatus
+                ? html`<div class="status"><slot name="status"></slot></div>`
+                : nothing}
+            </div>
+            ${this.hasTrailingIcon
+              ? html`<div class="icon-container">
+                  ${this.hasTrailingIcon2
+                    ? html`<slot
+                        name="trailing-icon2"
+                        class="icon trailing"
+                      ></slot>`
+                    : nothing}
+                  <slot name="trailing-icon" class="icon trailing"></slot>
+                </div>`
+              : nothing}
           </div>
-          ${this.hasTrailingIcon
-            ? html`<div class="icon-container">
-                ${this.hasTrailingIcon2
-                  ? html`<slot
-                      name="trailing-icon2"
-                      class="icon trailing"
-                    ></slot>`
-                  : nothing}
-                <slot name="trailing-icon" class="icon trailing"></slot>
-              </div>`
-            : nothing}
-        </div>
-        <div class="info-container">
-          <div class="info-item">
-            <slot class="info-label" name="info-label"></slot>
-            <slot class="info-status" name="info-status"></slot>
+        </button>
+        ${this.dividerRight
+          ? html`<div class="divider-right"></div>`
+          : html`<div class="divider-right" style="visibility: hidden;"></div>`}
+      </div>
+      <div
+        class=${classMap({
+          'integration-vessel-menu-container': true,
+          show: this.activated,
+        })}
+        @click=${this.onIntegrationVesselMenuClick}
+      >
+        <slot name="integration-vessel-menu"></slot>
+      </div>
+    `;
+  }
+
+  renderHug() {
+    return html`
+      <div class="button-vertical-divider-container">
+        <button
+          class=${classMap(this.getButtonClasses())}
+          ?disabled=${this.disabled}
+        >
+          <div class="content-container">
+            ${this.hasLeadingIcon
+              ? html`<div class="icon leading">
+                  <slot name="leading-icon"></slot>
+                </div>`
+              : nothing}
+            <div class="text-container">
+              <div class="label"><slot name="label"></slot></div>
+              ${this.hasStatus
+                ? html`<div class="status"><slot name="status"></slot></div>`
+                : nothing}
+            </div>
+            ${this.hasTrailingIcon
+              ? html`<div class="icon-container">
+                  ${this.hasTrailingIcon2
+                    ? html`<slot
+                        name="trailing-icon2"
+                        class="icon trailing"
+                      ></slot>`
+                    : nothing}
+                  <slot name="trailing-icon" class="icon trailing"></slot>
+                </div>`
+              : nothing}
           </div>
-          ${this.readouts.map(
-            (readout) => html`
-              <div class="info-readout-item">
-                <div class="info-item-label">${readout.label}</div>
-                <div class="info-item-value">${readout.value}</div>
-                <div class="info-item-unit">${readout.unit}</div>
-              </div>
-            `
-          )}
-        </div>
-      </button>
-      ${this.dividerBottom ? html`<div class="divider-bottom"></div>` : nothing}
+        </button>
+        ${this.dividerRight
+          ? html`<div class="divider-right"></div>`
+          : html`<div class="divider-right" style="visibility: hidden;"></div>`}
+      </div>
+      <div
+        class=${classMap({
+          'integration-vessel-menu-container': true,
+          show: this.activated,
+        })}
+        @click=${this.onIntegrationVesselMenuClick}
+      >
+        <slot name="integration-vessel-menu"></slot>
+      </div>
     `;
   }
 
+  override render() {
+    switch (this.type) {
+      case IntegrationButtonType.hug: {
+        return this.renderHug();
+      }
+      case IntegrationButtonType.rich: {
+        return this.renderRich();
+      }
+      case IntegrationButtonType.regular:
+      default: {
+        return this.renderRegular();
+      }
+    }
+  }
+
   static override styles = unsafeCSS(compentStyle);
+
+  override updated() {
+    let dividerHeight = 40;
+    if (this.type === IntegrationButtonType.hug) {
+      dividerHeight = 32;
+    }
+    if (this.type === IntegrationButtonType.rich) {
+      dividerHeight = 64;
+    }
+    this.style.setProperty(
+      '--integration-button-divider-height',
+      `${dividerHeight}px`
+    );
+  }
 }
 
 declare global {

package/src/integration-systems/integration-dropdown-button/integration-dropdown-button.css

@@ -98,7 +98,7 @@
   border-radius: 12px;
   background: var(--integration-container-global-color);
   box-shadow: var(--shadow-floating);
-  padding: 4px;
+  padding: 4px 0;
 
   overflow-y: auto;
 }
@@ -111,6 +111,7 @@
   min-height: var(
     --menu-navigation-components-navigation-item-touch-target-size
   );
+  margin: 0 4px;
   padding: 0px
     var(--menu-navigation-components-navigation-item-padding-horizontal);
   border-radius: var(
@@ -187,6 +188,11 @@
   }
 }
 
+slot[name="fleet"] {
+  display: flex;
+  flex: 1;
+}
+
 .wrapper option.fleet-option {
   display: flex;
   align-items: center;

package/src/integration-systems/integration-dropdown-button/integration-dropdown-button.stories.ts

@@ -8,7 +8,7 @@ import '../integration-button/integration-button.js';
 
 const meta: Meta<ObcIntegrationDropdownButton> = {
   title: 'Integration Systems/Integration Dropdown Button',
-  tags: ['autodocs', '6.0'],
+  tags: ['alpha'],
   component: 'obc-integration-dropdown-button',
   globals: {
     backgrounds: {

package/src/integration-systems/integration-fleet-button/integration-fleet-button.stories.ts

@@ -6,7 +6,7 @@ import '../../icons/icon-placeholder.js';
 
 const meta: Meta<typeof ObcIntegrationFleetButton> = {
   title: 'Integration Systems/Fleet Button',
-  tags: ['6.0'],
+  tags: ['alpha'],
   component: 'obc-integration-fleet-button',
   args: {
     fleetName: 'Fleet Name',

package/src/integration-systems/integration-tabs/integration-tabs.stories.ts

@@ -5,7 +5,7 @@ import {html} from 'lit';
 
 const meta: Meta<typeof ObcIntegrationTabs> = {
   title: 'Integration Systems/Building Blocks/Integration Tabs',
-  tags: ['6.0'],
+  tags: ['alpha'],
   component: 'obc-integration-tabs',
   args: {},
   globals: {

package/src/integration-systems/integration-vessel-menu/integration-vessel-menu.css

@@ -0,0 +1,59 @@
+* {
+  box-sizing: border-box;
+}
+
+.wrapper {
+  @mixin style style=integration-normal noClick=true;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-width: 788px;
+  align-items: center;
+  background: var(--container-global-color);
+  border-radius: var(
+    --app-components-integration-system-dropdown-menu-border-radius
+  );
+  border: 2px solid var(--integration-border-menu-outline-color);
+  box-shadow: var(--shadow-floating-x) var(--shadow-floating-y)
+    var(--shadow-floating-blur) var(--shadow-raised-spread)
+    var(--shadow-floating-color);
+}
+
+.footer-container {
+  width: 100%;
+  display: flex;
+  height: var(
+    --app-components-integration-system-dropdown-menu-action-container-height
+  );
+  padding: 0
+    var(--app-components-integration-system-dropdown-menu-padding-horizontal);
+  gap: var(--app-components-alert-menu-button-spacing);
+  border-top: 1px solid var(--border-divider-color);
+  background: var(--container-global-color);
+}
+
+.footer-container obc-button {
+  flex-grow: 1;
+  white-space: nowrap;
+}
+
+.content-container {
+  display: flex;
+  justify-content: center;
+  align-items: stretch;
+  align-self: stretch;
+  min-height: 0;
+  flex: 1;
+}
+
+.alert-list {
+  width: 100%;
+}
+
+.leading-icon {
+  color: var(--integration-on-normal-neutral-color);
+}
+
+.container-title {
+  color: var(--integration-on-normal-neutral-color);
+}