@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.61 → 2.0.0-next.62

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

@@ -3,6 +3,7 @@ import {ObcIntegrationBar} from './integration-bar.js';
 import './integration-bar.js';
 import {html, nothing} from 'lit';
 import '../../components/dropdown-button/dropdown-button.js';
+import '../../components/button/button.js';
 import '../../components/clock/clock.js';
 import '../integration-vessel-menu/integration-vessel-menu.js';
 import {
@@ -104,16 +105,23 @@ function renderIntegrationButtons({
       <div slot="info-status">Info Status</div>
       <div slot="status">Status</div>
       ${showIntegrationMenu
-        ? html`<obc-integration-vessel-menu
-            slot="integration-vessel-menu"
-            numberOfButtons="2"
-            @button1-click=${() => console.log('Boat Button 1 clicked')}
-            @button2-click=${() => console.log('Boat Button 2 clicked')}
-            ><span slot="title">Boat</span
-            ><obi-placeholder slot="button-1-leading-icon"></obi-placeholder>
-            <div slot="button-1-label">Select</div>
-            <obi-placeholder slot="button-2-leading-icon"></obi-placeholder>
-            <div slot="button-2-label">Dismiss</div>
+        ? html`<obc-integration-vessel-menu slot="integration-vessel-menu"
+            ><obc-button
+              slot="buttons"
+              ?fullWidth=${true}
+              ?showLeadingIcon=${true}
+              @click=${() => console.log('Boat Button 1 clicked')}
+              ><obi-placeholder slot="leading-icon"></obi-placeholder
+              >Select</obc-button
+            >
+            <obc-button
+              slot="buttons"
+              ?fullWidth=${true}
+              ?showLeadingIcon=${true}
+              @click=${() => console.log('Boat Button 2 clicked')}
+              ><obi-placeholder slot="leading-icon"></obi-placeholder
+              >Dismiss</obc-button
+            >
             <div slot="content" style="padding: 24px;">
               <p>Boat is working just fine.</p>
             </div></obc-integration-vessel-menu
@@ -141,16 +149,23 @@ function renderIntegrationButtons({
       <div slot="info-status">Info Status</div>
       <div slot="status">Status</div>
       ${showIntegrationMenu
-        ? html`<obc-integration-vessel-menu
-            slot="integration-vessel-menu"
-            numberOfButtons="2"
-            @button1-click=${() => console.log('Space Ship Button 1 clicked')}
-            @button2-click=${() => console.log('Space Ship Button 2 clicked')}
-            ><span slot="title">Space Ship</span
-            ><obi-placeholder slot="button-1-leading-icon"></obi-placeholder>
-            <div slot="button-1-label">Select</div>
-            <obi-placeholder slot="button-2-leading-icon"></obi-placeholder>
-            <div slot="button-2-label">Dismiss</div>
+        ? html`<obc-integration-vessel-menu slot="integration-vessel-menu"
+            ><obc-button
+              slot="buttons"
+              ?fullWidth=${true}
+              ?showLeadingIcon=${true}
+              @click=${() => console.log('Space Ship Button 1 clicked')}
+              ><obi-placeholder slot="leading-icon"></obi-placeholder
+              >Select</obc-button
+            >
+            <obc-button
+              slot="buttons"
+              ?fullWidth=${true}
+              ?showLeadingIcon=${true}
+              @click=${() => console.log('Space Ship Button 2 clicked')}
+              ><obi-placeholder slot="leading-icon"></obi-placeholder
+              >Dismiss</obc-button
+            >
             <div slot="content" style="padding: 24px;">
               <p>Space Ship is working just fine.</p>
             </div></obc-integration-vessel-menu
@@ -178,16 +193,23 @@ function renderIntegrationButtons({
       <div slot="info-status">Info Status</div>
       <div slot="status">Status</div>
       ${showIntegrationMenu
-        ? html`<obc-integration-vessel-menu
-            slot="integration-vessel-menu"
-            numberOfButtons="2"
-            @button1-click=${() => console.log('Vessel Button 1 clicked')}
-            @button2-click=${() => console.log('Vessel Button 2 clicked')}
-            ><span slot="title">Vessel</span
-            ><obi-placeholder slot="button-1-leading-icon"></obi-placeholder>
-            <div slot="button-1-label">Select</div>
-            <obi-placeholder slot="button-2-leading-icon"></obi-placeholder>
-            <div slot="button-2-label">Dismiss</div>
+        ? html`<obc-integration-vessel-menu slot="integration-vessel-menu"
+            ><obc-button
+              slot="buttons"
+              ?fullWidth=${true}
+              ?showLeadingIcon=${true}
+              @click=${() => console.log('Vessel Button 1 clicked')}
+              ><obi-placeholder slot="leading-icon"></obi-placeholder
+              >Select</obc-button
+            >
+            <obc-button
+              slot="buttons"
+              ?fullWidth=${true}
+              ?showLeadingIcon=${true}
+              @click=${() => console.log('Vessel Button 2 clicked')}
+              ><obi-placeholder slot="leading-icon"></obi-placeholder
+              >Dismiss</obc-button
+            >
             <div slot="content" style="padding: 24px;">
               <p>Vessel is working just fine.</p>
             </div></obc-integration-vessel-menu
@@ -215,16 +237,23 @@ function renderIntegrationButtons({
       <div slot="info-status">Info Status</div>
       <div slot="status">Status</div>
       ${showIntegrationMenu
-        ? html`<obc-integration-vessel-menu
-            slot="integration-vessel-menu"
-            numberOfButtons="2"
-            @button1-click=${() => console.log('Last Button 1 clicked')}
-            @button2-click=${() => console.log('Last Button 2 clicked')}
-            ><span slot="title">Last</span
-            ><obi-placeholder slot="button-1-leading-icon"></obi-placeholder>
-            <div slot="button-1-label">Select</div>
-            <obi-placeholder slot="button-2-leading-icon"></obi-placeholder>
-            <div slot="button-2-label">Dismiss</div>
+        ? html`<obc-integration-vessel-menu slot="integration-vessel-menu"
+            ><obc-button
+              slot="buttons"
+              ?fullWidth=${true}
+              ?showLeadingIcon=${true}
+              @click=${() => console.log('Last Button 1 clicked')}
+              ><obi-placeholder slot="leading-icon"></obi-placeholder
+              >Select</obc-button
+            >
+            <obc-button
+              slot="buttons"
+              ?fullWidth=${true}
+              ?showLeadingIcon=${true}
+              @click=${() => console.log('Last Button 2 clicked')}
+              ><obi-placeholder slot="leading-icon"></obi-placeholder
+              >Dismiss</obc-button
+            >
             <div slot="content" style="padding: 24px;">
               <p>Last is working just fine.</p>
             </div></obc-integration-vessel-menu

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

@@ -6,8 +6,6 @@
   @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(
@@ -22,31 +20,57 @@
 .footer-container {
   width: 100%;
   display: flex;
+  align-items: center;
+  align-self: stretch;
   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);
+  padding: var(--app-components-integration-system-menu-padding-vertical)
+    var(--app-components-integration-system-menu-padding-horizontal);
+  gap: var(--app-components-integration-system-menu-action-spacing);
   border-top: 1px solid var(--border-divider-color);
   background: var(--container-global-color);
+  border-radius: 12px;
+}
+
+.content-area {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  align-self: stretch;
+  border-radius: 8px;
 }
 
-.footer-container obc-button {
-  flex-grow: 1;
+.footer-container slot[name="buttons"]::slotted(:not(obc-button)) {
+  display: contents;
+}
+
+.footer-container slot[name="buttons"]::slotted(*) {
+  display: flex;
+  flex: 1 1 0px;
+  width: 100%;
   white-space: nowrap;
 }
 
+.buttons-slot {
+  display: contents;
+}
+
 .content-container {
   display: flex;
   justify-content: center;
-  align-items: stretch;
+  align-items: flex-start;
   align-self: stretch;
   min-height: 0;
   flex: 1;
+  border-radius: 8px;
+  &.hidealarmlist {
+    display: none;
+  }
 }
 
-.alert-list {
+.alertlist {
   width: 100%;
 }
 

package/src/integration-systems/integration-vessel-menu/integration-vessel-menu.stories.ts

@@ -106,13 +106,10 @@ const meta: Meta<ObcIntegrationVesselMenu> = {
   title: 'Integration Systems/Integration Vessel Menu',
   component: 'obc-integration-vessel-menu',
   tags: ['alpha'],
-  args: {numberOfButtons: 3},
+  args: {hideAlarmList: false},
   argTypes: {
-    numberOfButtons: {
-      control: 'number',
-      min: 0,
-      max: 3,
-      step: 1,
+    hideAlarmList: {
+      control: 'boolean',
     },
   },
   parameters: {
@@ -129,7 +126,7 @@ export default meta;
 type Story = StoryObj<ObcIntegrationVesselMenu>;
 
 interface IntegrationVesselMenuArgs {
-  numberOfButtons: number;
+  hideAlarmList: boolean;
 }
 
 type IntegrationVesselMenuTemplate = (
@@ -137,34 +134,61 @@ type IntegrationVesselMenuTemplate = (
 ) => ReturnType<typeof html>;
 
 const template: IntegrationVesselMenuTemplate = (args) => html`
-  <obc-integration-vessel-menu
-    .numberOfButtons=${args.numberOfButtons}
-    @button-1-click=${() => console.log('Button 1 clicked')}
-    @button-2-click=${() => console.log('Button 2 clicked')}
-    @button-3-click=${() => console.log('Button 3 clicked')}
-  >
+  <obc-integration-vessel-menu .hideAlarmList=${args.hideAlarmList}>
     <div slot="content" style="padding: 24px;">
       <div style="width: 496px; height: 256;">
         <p>Content area</p>
       </div>
     </div>
-    <obi-placeholder slot="button-1-leading-icon"></obi-placeholder>
-    <div slot="button-1-label">Action 1</div>
-    <obi-placeholder slot="button-2-leading-icon"></obi-placeholder>
-    <div slot="button-2-label">Ac. 2</div>
-    <obi-placeholder slot="button-3-leading-icon"></obi-placeholder>
-    <div slot="button-3-label">Action number 3</div>
+    <obc-button
+      slot="buttons"
+      @click=${() => console.log('Button 1 clicked')}
+      ?fullWidth=${true}
+    >
+      <div>Action 1</div>
+    </obc-button>
+    <obc-button
+      slot="buttons"
+      @click=${() => console.log('Button 2 clicked')}
+      ?fullWidth=${true}
+    >
+      Ac. 2
+    </obc-button>
+    <obc-button
+      slot="buttons"
+      @click=${() => console.log('Button 3 clicked')}
+      ?fullWidth=${true}
+    >
+      Action number 3
+    </obc-button>
+
     ${renderAlarms()}
   </obc-integration-vessel-menu>
 `;
 
 const templateWithoutAlarms: IntegrationVesselMenuTemplate = (args) => html`
-  <obc-integration-vessel-menu
-    .numberOfButtons=${args.numberOfButtons}
-    @button-1-click=${() => console.log('Button 1 clicked')}
-    @button-2-click=${() => console.log('Button 2 clicked')}
-    @button-3-click=${() => console.log('Button 3 clicked')}
-  >
+  <obc-integration-vessel-menu .hideAlarmList=${args.hideAlarmList}>
+    <obc-button
+      slot="buttons"
+      @click=${() => console.log('Button 1 clicked')}
+      ?fullWidth=${true}
+    >
+      Action 1
+    </obc-button>
+    <obc-button
+      slot="buttons"
+      @click=${() => console.log('Button 2 clicked')}
+      ?fullWidth=${true}
+    >
+      Ac. 2
+    </obc-button>
+    <obc-button
+      slot="buttons"
+      @click=${() => console.log('Button 3 clicked')}
+      ?fullWidth=${true}
+    >
+      Action number 3
+    </obc-button>
     <div slot="content" style="padding: 24px;">
       <p>Add content here</p>
     </div>
@@ -178,3 +202,8 @@ export const Default: Story = {
 export const WithoutAlarms: Story = {
   render: templateWithoutAlarms,
 };
+
+export const WithoutAlarmsHideEmptyAlarmList: Story = {
+  render: templateWithoutAlarms,
+  args: {hideAlarmList: true},
+};

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

@@ -12,46 +12,15 @@ import '../../building-blocks/alert-list/alert-list.js';
 /**
  * `<obc-integration-vessel-menu>` – A menu to be shown when selecting a obc-integration-button from a obc-integration-bar.
  *
- * @slot leading-icon - Icon shown in the header.
- * @slot title - Header title text.
- * @slot button-1-leading-icon - Leading icon for the first button.
- * @slot button-1-label - Label for the first button.
- * @slot button-2-leading-icon - Leading icon for the second button.
- * @slot button-2-label - Label for the second button.
- * @slot button-3-leading-icon - Leading icon for the third button.
- * @slot button-3-label - Label for the third button.
+ * @slot buttons - Buttons shown in the footer.
  * @slot content - Main content shown in the content area.
  * @slot alarms - Alarm items rendered inside the alert list.
- *
- * @property {number} numberOfButtons - Number of buttons to render (up to 3).
- *
- * @fires button1-click - Fired when the first button is clicked.
- * @fires button2-click - Fired when the second button is clicked.
- * @fires button3-click - Fired when the third button is clicked.
  */
 
 @customElement('obc-integration-vessel-menu')
 export class ObcIntegrationVesselMenu extends LitElement {
-  @property({type: Number}) numberOfButtons = 3;
-
-  private renderButtons() {
-    return html`${Array.from({length: this.numberOfButtons}, (_, i) => {
-      const buttonNum = i + 1;
-      return html`<obc-button
-        @click=${() =>
-          this.dispatchEvent(new CustomEvent(`button${buttonNum}-click`))}
-        ?showLeadingIcon=${true}
-        ?fullWidth=${true}
-        class="button"
-      >
-        <slot
-          name="button-${buttonNum}-leading-icon"
-          slot="leading-icon"
-        ></slot>
-        <slot name="button-${buttonNum}-label"></slot>
-      </obc-button>`;
-    })}`;
-  }
+  /** Hide the alarm list, ensuring it doesn't take space (display: none). */
+  @property({type: Boolean}) hideAlarmList = false;
 
   protected override render() {
     return html`
@@ -60,13 +29,20 @@ export class ObcIntegrationVesselMenu extends LitElement {
           wrapper: true,
         })}
       >
-        <div class="footer-container">${this.renderButtons()}</div>
+        <div class="footer-container">
+          <slot name="buttons" class="buttons-slot"></slot>
+        </div>
         <div class="content-area">
           <slot name="content"></slot>
         </div>
-        <div class="content-container">
-          <obc-alert-list class="alert-list"
-            ><slot name="alarms"> </slot>
+        <div
+          class=${classMap({
+            'content-container': true,
+            hidealarmlist: this.hideAlarmList,
+          })}
+        >
+          <obc-alert-list class="alertlist"
+            ><slot name="alarms"></slot>
           </obc-alert-list>
         </div>
       </div>