@oicl/openbridge-webcomponents 0.0.7 → 0.0.9

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>
   `,
 };

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

@@ -0,0 +1,131 @@
+* {
+    box-sizing: border-box;
+}
+
+.wrapper {
+    position: relative;
+}
+
+.wrapper:not(.info) {
+    background-color: var(--container-background-color);
+    box-shadow: var(--shadow-flat);
+    overflow: hidden;
+    
+    &.top, &.regular {
+        border-top-left-radius: 6px;
+        border-top-right-radius: 6px;
+    }
+
+    &.bottom, &.regular {
+        border-bottom-left-radius: 6px;
+        border-bottom-right-radius: 6px;
+    }
+}
+
+button {
+    width: 100%;
+    appearance: none;
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    padding: 0;
+    border-width: 0 !important;
+    background-color: transparent;
+}
+
+.wrapper:not(.info) button {
+    @mixin style style=flat;   
+}
+
+.top.border button, .center.border button {
+    border-bottom: 1px solid var(--border-outline-color) !important;
+}
+
+.bottom.border button{
+    border-top: 1px solid var(--border-outline-color) !important;
+}
+
+.container {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px;
+}
+
+.wrapper.single-line .container {
+    padding-top: 4px;
+    padding-bottom: 4px;
+}
+
+.container-content {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    gap: 8px;
+    padding: 8px;
+    min-width: 0;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.leading-icon {
+    display: block;
+    width: 32px;
+    height: 24px;
+    padding-right: 8px;
+    color: var(--element-neutral-color);
+    flex-shrink: 0;
+    flex-grow: 0;
+}
+
+.trailing-icon {
+    width: 40px;
+    height: 24px;
+    padding-left: 8px;
+    padding-right: 8px;
+    color: var(--element-neutral-color);
+    flex-shrink: 0;
+    flex-grow: 0;
+
+}
+
+::slotted([slot="label"]) {
+    @mixin font-body;
+    color: var(--element-active-color);
+}
+
+::slotted([slot="description"]) {
+    @mixin font-label;
+    color: var(--element-neutral-color);
+}
+
+.double-line ::slotted([slot="description"])  {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.status {
+    @mixin font-body;
+    color: var(--element-neutral-color);
+}
+
+.graphic {
+    width: 100%;
+}
+
+.graphic-border .graphic {
+    border-bottom: 1px solid var(--border-outline-color);
+    margin-bottom: -1px;
+}
+
+.info .graphic {
+    border-radius: 6px;
+    box-shadow: var(--shadow-flat);
+    overflow: hidden;
+}

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

@@ -0,0 +1,232 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcRichButton} from './rich-button';
+import './rich-button';
+import {html} from 'lit';
+import '../../icons/icon-01-placeholder';
+import '../../icons/icon-02-chevron-right';
+import '../../icons/icon-01-print';
+import '../../icons/icon-03-support';
+import {spread} from '@open-wc/lit-helpers';
+
+const meta: Meta<typeof ObcRichButton> = {
+  title: 'Button/Rich button',
+  tags: ['autodocs'],
+  component: 'obc-rich-button',
+  args: {
+    position: 'regular',
+    size: 'multi-line',
+    hasLeadingIcon: true,
+    hasTrailingIcon: true,
+  },
+  parameters: {
+    backgrounds: {
+      default: 'container-section-color',
+    },
+  },
+  argTypes: {
+    position: {
+      control: {type: 'select'},
+      options: ['regular', 'top', 'bottom', 'center'],
+    },
+    size: {
+      control: {type: 'select'},
+      options: ['single-line', 'double-line', 'multi-line'],
+    },
+  },
+  decorators: (story) => html`<div style="width: 400px;">${story()}</div>`,
+  render: (args) =>
+    html`<obc-rich-button
+      position=${args.position}
+      size=${args.size}
+      ?has-graphic=${args.hasGraphic}
+      ?has-leading-icon=${args.hasLeadingIcon}
+      ?has-trailing-icon=${args.hasTrailingIcon}
+      ?has-status=${args.hasStatus}
+      ?border=${args.border}
+    >
+      <obi-01-placeholder slot="leading-icon"></obi-01-placeholder>
+      <div slot="label">Title</div>
+      <div slot="description">
+        Description with multiple lines of text and more than one line of
+        description
+      </div>
+      <obi-02-chevron-right slot="trailing-icon"></obi-02-chevron-right>
+    </obc-rich-button> `,
+} satisfies Meta<ObcRichButton>;
+
+export default meta;
+type Story = StoryObj<ObcRichButton>;
+
+export const Regular: Story = {};
+
+export const RegularNoIcons: Story = {
+  args: {
+    hasLeadingIcon: false,
+    hasTrailingIcon: false,
+  },
+};
+
+export const Top: Story = {
+  args: {
+    position: 'top',
+  },
+};
+
+export const TopWithBoarder: Story = {
+  args: {
+    position: 'top',
+    border: true,
+  },
+};
+
+export const Bottom: Story = {
+  args: {
+    position: 'bottom',
+  },
+};
+
+export const BottomWithBoarder: Story = {
+  args: {
+    position: 'bottom',
+    border: true,
+  },
+};
+
+export const Center: Story = {
+  args: {
+    position: 'center',
+  },
+};
+
+export const SingleLine: Story = {
+  args: {
+    size: 'single-line',
+  },
+};
+
+export const DoubleLine: Story = {
+  args: {
+    size: 'double-line',
+  },
+};
+
+export const MultiLine: Story = {
+  args: {
+    size: 'multi-line',
+  },
+};
+
+export const WithStatus: Story = {
+  args: {
+    size: 'double-line',
+    hasStatus: true,
+    hasLeadingIcon: true,
+    hasTrailingIcon: true,
+  },
+  render: (args) =>
+    html`<obc-rich-button ${spread(args)}>
+      <obi-01-placeholder slot="leading-icon"></obi-01-placeholder>
+      <div slot="label">Title</div>
+      <div slot="status">Status</div>
+      <obi-02-chevron-right slot="trailing-icon"></obi-02-chevron-right>
+    </obc-rich-button> `,
+};
+
+export const WithGraphic: Story = {
+  args: {
+    size: 'double-line',
+    hasStatus: true,
+    hasLeadingIcon: true,
+    hasTrailingIcon: true,
+    hasGraphic: true,
+    graphicBorder: false,
+  },
+  render: (args) =>
+    html`<obc-rich-button
+      position=${args.position}
+      size=${args.size}
+      ?has-graphic=${args.hasGraphic}
+      ?has-leading-icon=${args.hasLeadingIcon}
+      ?has-trailing-icon=${args.hasTrailingIcon}
+      ?has-status=${args.hasStatus}
+      ?graphic-border=${args.graphicBorder}
+    >
+      <div
+        slot="graphic"
+        style="width: 100%; height: 120px; color: var(--element-neutral-color); padding-top: 40px; padding-bottom: 32px"
+      >
+        <obi-01-print></obi-01-print>
+      </div>
+      <obi-01-placeholder slot="leading-icon"></obi-01-placeholder>
+      <div slot="label">Title</div>
+      <div slot="status">Status</div>
+      <obi-02-chevron-right slot="trailing-icon"></obi-02-chevron-right>
+    </obc-rich-button> `,
+};
+
+export const WithGraphicBorder: Story = {
+  args: {
+    size: 'double-line',
+    hasStatus: true,
+    hasLeadingIcon: true,
+    hasTrailingIcon: true,
+    hasGraphic: true,
+    graphicBorder: true,
+  },
+  render: (args) =>
+    html`<obc-rich-button
+      position=${args.position}
+      size=${args.size}
+      ?has-graphic=${args.hasGraphic}
+      ?has-leading-icon=${args.hasLeadingIcon}
+      ?has-trailing-icon=${args.hasTrailingIcon}
+      ?has-status=${args.hasStatus}
+      ?graphic-border=${args.graphicBorder}
+    >
+      <div
+        slot="graphic"
+        style="width: 100%; height: 120px; color: var(--element-neutral-color); padding-top: 40px; padding-bottom: 32px"
+      >
+        <obi-01-print></obi-01-print>
+      </div>
+      <obi-01-placeholder slot="leading-icon"></obi-01-placeholder>
+      <div slot="label">Title</div>
+      <div slot="status">Status</div>
+      <obi-02-chevron-right slot="trailing-icon"></obi-02-chevron-right>
+    </obc-rich-button> `,
+};
+
+export const WithGraphicInfo: Story = {
+  args: {
+    size: 'multi-line',
+    hasLeadingIcon: false,
+    hasTrailingIcon: false,
+    hasGraphic: true,
+    graphicBorder: false,
+    info: true,
+  },
+  render: (args) =>
+    html`<obc-rich-button
+      position=${args.position}
+      size=${args.size}
+      ?has-graphic=${args.hasGraphic}
+      ?has-leading-icon=${args.hasLeadingIcon}
+      ?has-trailing-icon=${args.hasTrailingIcon}
+      ?graphic-border=${args.graphicBorder}
+      ?info=${args.info}
+    >
+      <div
+        slot="graphic"
+        style="width: 100%; height: 120px; color: var(--element-active-inverted-color); background: var(--instrument-enhanced-secondary-color); padding-top: 40px; padding-bottom: 32px"
+      >
+        <obi-03-support></obi-03-support>
+      </div>
+      <obi-01-placeholder slot="leading-icon"></obi-01-placeholder>
+      <div slot="label">Title</div>
+      <div slot="description">
+        A long description, with a text spanning over multiple lines. Lorem
+        ipsum dolor sit amet, consectetur adipiscing elit.
+      </div>
+      <obi-02-chevron-right slot="trailing-icon"></obi-02-chevron-right>
+    </obc-rich-button> `,
+};

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

@@ -0,0 +1,97 @@
+import {LitElement, html, nothing, unsafeCSS} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import compentStyle from './rich-button.css?inline';
+import {classMap} from 'lit/directives/class-map.js';
+
+export enum ObcRichButtonPosition {
+  Regular = 'regular',
+  Top = 'top',
+  Bottom = 'bottom',
+  Center = 'center',
+}
+export type ObcRichButtonPositionType = 'regular' | 'top' | 'bottom' | 'center';
+
+export enum ObcRichButtonSize {
+  SingleLine = 'single-line',
+  DoubleLine = 'double-line',
+  MultiLine = 'multi-line',
+}
+export type ObcRichButtonSizeType =
+  | 'single-line'
+  | 'double-line'
+  | 'multi-line';
+
+@customElement('obc-rich-button')
+export class ObcRichButton extends LitElement {
+  @property({type: String}) position: ObcRichButtonPositionType =
+    ObcRichButtonPosition.Regular;
+  @property({type: String}) size: ObcRichButtonSizeType =
+    ObcRichButtonSize.SingleLine;
+  @property({type: Boolean}) info = false;
+  @property({type: Boolean, attribute: 'has-leading-icon'}) hasLeadingIcon =
+    false;
+  @property({type: Boolean, attribute: 'has-trailing-icon'}) hasTrailingIcon =
+    false;
+  @property({type: Boolean, attribute: 'has-status'}) hasStatus = false;
+  @property({type: Boolean, attribute: 'has-graphic'}) hasGraphic = false;
+  @property({type: Boolean, attribute: 'graphic-border'}) graphicBorder = false;
+  @property({type: Boolean}) border = false;
+
+  override render() {
+    return html`
+      <div
+        class=${classMap({
+          wrapper: true,
+          [this.position]: true,
+          [this.size]: true,
+          'graphic-border': this.graphicBorder,
+          info: this.info,
+          border: this.border,
+        })}
+      >
+        <button>
+          ${this.hasGraphic
+            ? html`<div class="graphic"><slot name="graphic"></slot></div>`
+            : nothing}
+          <div class="container">
+            <div class="container-content">
+              ${this.hasLeadingIcon
+                ? html`<div class="leading-icon">
+                    <slot name="leading-icon"></slot>
+                  </div>`
+                : nothing}
+              <div class="content">
+                <slot name="label"></slot>
+                ${this.size === ObcRichButtonSize.SingleLine
+                  ? nothing
+                  : html`<slot name="description"></slot>`}
+              </div>
+            </div>
+            ${this.hasStatus
+              ? html`
+                  <div class="status">
+                    <slot name="status"></slot>
+                  </div>
+                `
+              : nothing}
+            ${this.hasTrailingIcon
+              ? html`
+                  <div class="trailing-icon">
+                    <slot name="trailing-icon"></slot>
+                  </div>
+                `
+              : nothing}
+          </div>
+        </button>
+      </div>
+    `;
+  }
+
+  static override styles = unsafeCSS(compentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-rich-button': ObcRichButton;
+  }
+}

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

@@ -0,0 +1,10 @@
+.wrapper {
+    width: 100%;
+    @mixin style style=flat;
+    @mixin outline-inward;
+
+    & img {
+        width: 100%;
+        height: 100%;
+    }
+}

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

@@ -0,0 +1,19 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcVendorButton} from './vendor-button';
+import './vendor-button';
+import {html} from 'lit';
+
+const meta: Meta<typeof ObcVendorButton> = {
+  title: 'Button/Vendor button',
+  tags: ['autodocs'],
+  component: 'obc-vendor-button',
+  args: {
+    imageSrc: 'https://openbridge-demo.web.app/companylogo-day.png',
+  },
+  decorators: [(story) => html`<div style="width:300px">${story()}</div>`],
+} satisfies Meta<ObcVendorButton>;
+
+export default meta;
+type Story = StoryObj<ObcVendorButton>;
+
+export const Primary: Story = {};

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

@@ -0,0 +1,25 @@
+import {LitElement, html, unsafeCSS} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import compentStyle from './vendor-button.css?inline';
+
+@customElement('obc-vendor-button')
+export class ObcVendorButton extends LitElement {
+  @property({type: String, attribute: 'image-src'}) imageSrc = '';
+  @property({type: String}) alt = 'logo';
+
+  override render() {
+    return html`
+      <button class="wrapper">
+        <img src=${this.imageSrc} alt=${this.alt} />
+      </button>
+    `;
+  }
+
+  static override styles = unsafeCSS(compentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-vendor-button': ObcVendorButton;
+  }
+}

package/src/icons/icon-01-content-copy.ts

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-01-content-copy')
+export class Obi01ContentCopy extends LitElement {
+  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+
+  private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 18C8.45 18 7.97917 17.8042 7.5875 17.4125C7.19583 17.0208 7 16.55 7 16V4C7 3.45 7.19583 2.97917 7.5875 2.5875C7.97917 2.19583 8.45 2 9 2H18C18.55 2 19.0208 2.19583 19.4125 2.5875C19.8042 2.97917 20 3.45 20 4V16C20 16.55 19.8042 17.0208 19.4125 17.4125C19.0208 17.8042 18.55 18 18 18H9ZM9 16H18V4H9V16ZM5 22C4.45 22 3.97917 21.8042 3.5875 21.4125C3.19583 21.0208 3 20.55 3 20V6H5V20H16V22H5Z" fill="currentColor"/>
+</svg>
+`;
+
+  private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 18C8.45 18 7.97917 17.8042 7.5875 17.4125C7.19583 17.0208 7 16.55 7 16V4C7 3.45 7.19583 2.97917 7.5875 2.5875C7.97917 2.19583 8.45 2 9 2H18C18.55 2 19.0208 2.19583 19.4125 2.5875C19.8042 2.97917 20 3.45 20 4V16C20 16.55 19.8042 17.0208 19.4125 17.4125C19.0208 17.8042 18.55 18 18 18H9ZM9 16H18V4H9V16ZM5 22C4.45 22 3.97917 21.8042 3.5875 21.4125C3.19583 21.0208 3 20.55 3 20V6H5V20H16V22H5Z" style="fill: var(--element-active-color)"/>
+</svg>
+`;
+
+  override render() {
+    return html`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-01-content-copy': Obi01ContentCopy;
+  }
+}