[Bulk actions workflow]: Updates for MouseEvent

addon/components/o-s-s/banner.hbs

@@ -1,10 +1,12 @@
-<div class="upf-banner fx-1 fx-row fx-xalign-center fx-gap-px-12 {{this.modifierClasses}}"
-            ...attributes>
+<div class="upf-banner fx-1 fx-row fx-xalign-center fx-gap-px-12 {{this.modifierClasses}}" ...attributes>
   {{#if (has-block "custom-icon")}}
     <div>{{yield to="custom-icon"}}</div>
   {{else if @icon}}
-    <OSS::Icon @style={{fa-icon-style @icon}} @icon={{fa-icon-value @icon}}
-               class="upf-badge upf-badge--shape-round upf-badge--size-md" />
+    <OSS::Icon
+      @style={{fa-icon-style @icon}}
+      @icon={{fa-icon-value @icon}}
+      class="upf-badge upf-badge--shape-round upf-badge--size-md"
+    />
   {{else if @image}}
     <img class="upf-badge upf-badge--size-md upf-badge--shape-round" src={{@image}} alt="banner" />
   {{/if}}
@@ -27,4 +29,9 @@
   {{#if (has-block "actions")}}
     <div>{{yield to="actions"}}</div>
   {{/if}}
-</div>
+  {{#if this.feedbackMessage.value}}
+    <div class="upf-banner--feedback font-color-{{this.feedbackMessage.type}}-500">
+      {{this.feedbackMessage.value}}
+    </div>
+  {{/if}}
+</div>

addon/components/o-s-s/banner.stories.js

@@ -1,6 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 const COMPONENT_SIZES = ['sm', 'md', 'lg'];
+const FEEDBACK_TYPES = ['error', 'warning', 'success'];
 
 export default {
   title: 'Components/OSS::Banner',
@@ -77,9 +78,19 @@ export default {
         type: 'boolean'
       }
     },
+    feedbackMessage: {
+      description: 'A feedback message that will be displayed below the banner. Its color changes based on its type',
+      table: {
+        type: {
+          summary: `{ type: ${FEEDBACK_TYPES.join(' | ')}, value: string }`
+        },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'object' }
+    },
     size: {
       description:
-        'Allows to adjust the size of the component. Currently available options are `sm`, `md` and `lg`. Defaults to `md`.',
+        'Allows to adjust the size of the component. Currently available options are `sm`, `md` and `lg`. Defaults to `md`',
       table: {
         type: COMPONENT_SIZES.join('|'),
         defaultValue: { summary: 'md' }
@@ -93,7 +104,7 @@ export default {
   parameters: {
     docs: {
       description: {
-        component: 'A configurable Banner component. Can display a badge or an image, a title and a subtitle.'
+        component: 'A configurable Banner component. Can display a badge or an image, a title and a subtitle'
       },
       iframeHeight: 120
     }
@@ -108,21 +119,24 @@ const defaultArgs = {
   plain: false,
   selected: false,
   disabled: false,
+  feedbackMessage: undefined,
   size: undefined
 };
 
 const Template = (args) => ({
   template: hbs`
       <OSS::Banner @title={{this.title}} @subtitle={{this.subtitle}} @icon={{this.icon}} @plain={{this.plain}}
-                   @image={{this.image}} @selected={{this.selected}} @disabled={{this.disabled}} @size={{this.size}} />
+                   @image={{this.image}} @selected={{this.selected}} @disabled={{this.disabled}} @size={{this.size}}
+                   @feedbackMessage={{this.feedbackMessage}} />
   `,
   context: args
 });
 
 const CustomTitleTemplate = (args) => ({
   template: hbs`
       <OSS::Banner @title={{this.title}} @subtitle={{this.subtitle}} @icon={{this.icon}} @plain={{this.plain}}
-                   @image={{this.image}} @selected={{this.selected}} @disabled={{this.disabled}} @size={{this.size}}>
+                   @image={{this.image}} @selected={{this.selected}} @disabled={{this.disabled}} @size={{this.size}}
+                   @feedbackMessage={{this.feedbackMessage}}>
         <:title-suffix>
           <div class="fx-row fx-gap-px-6 fx-xalign-center">
             <OSS::Icon @icon="fa-users" /> <span class="font-color-gray-500">Custom title</span>
@@ -136,7 +150,8 @@ const CustomTitleTemplate = (args) => ({
 const CustomIconTemplate = (args) => ({
   template: hbs`
       <OSS::Banner @title={{this.title}} @subtitle={{this.subtitle}} @icon={{this.icon}} @plain={{this.plain}}
-                   @image={{this.image}} @selected={{this.selected}} @disabled={{this.disabled}} @size={{this.size}}>
+                   @image={{this.image}} @selected={{this.selected}} @disabled={{this.disabled}} @size={{this.size}}
+                   @feedbackMessage={{this.feedbackMessage}}>
         <:custom-icon>
           <OSS::Badge @icon="fas fa-check" />
         </:custom-icon>
@@ -148,7 +163,8 @@ const CustomIconTemplate = (args) => ({
 const ActionTemplate = (args) => ({
   template: hbs`
       <OSS::Banner @title={{this.title}} @subtitle={{this.subtitle}} @icon={{this.icon}} @plain={{this.plain}}
-                   @image={{this.image}} @selected={{this.selected}} @disabled={{this.disabled}} @size={{this.size}}>
+                   @image={{this.image}} @selected={{this.selected}} @disabled={{this.disabled}} @size={{this.size}}
+                   @feedbackMessage={{this.feedbackMessage}}>
         <:actions>
           <OSS::Button @label="Click me" />
         </:actions>

addon/components/o-s-s/banner.ts

@@ -1,5 +1,6 @@
 import { isBlank } from '@ember/utils';
 import Component from '@glimmer/component';
+import { FEEDBACK_TYPES, type FeedbackMessage } from './input-container';
 
 type SizeType = 'sm' | 'md' | 'lg';
 
@@ -8,6 +9,7 @@ interface OSSBannerArgs {
   plain?: boolean;
   selected?: boolean;
   disabled?: boolean;
+  feedbackMessage?: FeedbackMessage;
 }
 
 const SIZE_CLASSES: Record<string, string> = {
@@ -32,8 +34,31 @@ export default class OSSBanner extends Component<OSSBannerArgs> {
     return SIZE_CLASSES[this.args.size ?? 'md'] ?? '';
   }
 
+  get feedbackMessage(): FeedbackMessage | undefined {
+    if (this.args.feedbackMessage && FEEDBACK_TYPES.includes(this.args.feedbackMessage.type)) {
+      return this.args.feedbackMessage;
+    }
+    return undefined;
+  }
+
+  get borderColorClass(): string {
+    if (this.feedbackMessage) return `upf-banner--${this.feedbackMessage.type}`;
+    return '';
+  }
+
+  get feedbackMarginClass(): string {
+    return this.feedbackMessage?.value ? 'margin-bottom-px-24' : '';
+  }
+
   get modifierClasses(): string {
-    return [this.disabledClass, this.selectedClass, this.plainClass, this.sizeClass]
+    return [
+      this.disabledClass,
+      this.selectedClass,
+      this.plainClass,
+      this.sizeClass,
+      this.borderColorClass,
+      this.feedbackMarginClass
+    ]
       .filter((mc) => !isBlank(mc))
       .join(' ');
   }

addon/components/o-s-s/button.hbs

@@ -20,9 +20,15 @@
     {{else if @iconUrl}}
       <img src={{@iconUrl}} alt="icon" />
     {{/if}}
-
     {{#if @label}}
       <span class={{if (or @icon @iconUrl) "margin-left-px-6"}}>{{@label}}</span>
     {{/if}}
+    {{#if @suffixIcon}}
+      <OSS::Icon
+        @style={{fa-icon-style @suffixIcon}}
+        @icon={{fa-icon-value @suffixIcon}}
+        class={{if @label "margin-left-px-18"}}
+      />
+    {{/if}}
   {{/if}}
 </button>

addon/components/o-s-s/button.stories.js

@@ -97,6 +97,16 @@ export default {
         type: 'text'
       }
     },
+    suffixIcon: {
+      description: 'Font Awesome class for an icon displayed after the label (e.g. fas fa-chevron-down)',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: {
+        type: 'text'
+      }
+    },
     square: {
       description: 'Displays the button as a square. Useful for icon buttons.',
       table: {
@@ -164,6 +174,7 @@ const defaultArgs = {
   countDown: undefined,
   loadingOptions: undefined,
   iconUrl: undefined,
+  suffixIcon: undefined,
   disabled: undefined
 };
 
@@ -172,7 +183,8 @@ const Template = (args) => ({
     <OSS::Button
       @skin={{this.skin}} @size={{this.size}} @loading={{this.loading}} @label={{this.label}} @icon={{this.icon}}
       @theme={{this.theme}} @square={{this.square}} @countDown={{this.countDown}}
-      @iconUrl={{this.iconUrl}} @loadingOptions={{this.loadingOptions}} disabled={{this.disabled}} />
+      @iconUrl={{this.iconUrl}} @suffixIcon={{this.suffixIcon}}
+      @loadingOptions={{this.loadingOptions}} disabled={{this.disabled}} />
   `,
   context: args
 });
@@ -201,3 +213,11 @@ WithIconUrl.args = {
     iconUrl: '/@upfluence/oss-components/assets/heart.svg'
   }
 };
+
+export const WithSuffixIcon = Template.bind({});
+WithSuffixIcon.args = {
+  ...defaultArgs,
+  ...{
+    suffixIcon: 'fas fa-chevron-down'
+  }
+};

addon/components/o-s-s/button.ts

@@ -77,6 +77,7 @@ export interface OSSButtonArgs {
   loadingOptions?: LoadingOptions;
   icon?: string;
   iconUrl?: string;
+  suffixIcon?: string;
   label?: string;
   theme?: string;
   square?: boolean;

addon/components/o-s-s/context-menu.hbs

@@ -0,0 +1,31 @@
+<OSS::Button
+  @skin={{@skin}}
+  @size={{@size}}
+  @loading={{@loading}}
+  @loadingOptions={{@loadingOptions}}
+  @icon={{@icon}}
+  @iconUrl={{@iconUrl}}
+  @label={{@label}}
+  @theme={{@theme}}
+  @square={{@square}}
+  @countDown={{@countDown}}
+  @suffixIcon={{if this.displayContextMenuPanel "fa-chevron-up" "fa-chevron-down"}}
+  @gap={{or @chevronGap @gap "fx-gap-px-6"}}
+  {{did-insert this.registerMenuTrigger}}
+  {{on "click" this.toggleContextMenuPanel}}
+  ...attributes
+/>
+
+{{#if this.displayContextMenuPanel}}
+  <OSS::ContextMenu::Panel
+    @referenceTarget={{this.referenceTarget}}
+    @items={{@items}}
+    @offset={{4}}
+    @placement="bottom-start"
+    @onMouseLeave={{this.onContextMenuPanelMouseLeave}}
+    @onClose={{this.closeContextMenuPanel}}
+    @registerPanel={{this.registerContextMenuPanel}}
+    @unregisterPanel={{this.unregisterContextMenuPanel}}
+    {{on-click-outside this.onClickOutsidePanel useCapture=true}}
+  />
+{{/if}}