feat: introduce UiPopover component

addon/components/ui-popover/component.ts

@@ -0,0 +1,47 @@
+import UiContextualContainer, {
+  SelectorStrategies,
+  TriggerEvents,
+} from '../-internals/contextual-container/component';
+
+/**
+ *
+ */
+export default class UiPopoverContextContainer extends UiContextualContainer {
+  /**
+   * The amount of time, in milliseconds, between the triggering interaction
+   * and when the tooltip is displayed.
+   */
+  delay = 150;
+
+  distance = 11;
+
+  /** @hidden */
+  ariaAttachAs = 'aria-controls';
+
+  /** @hidden */
+  closeOnOutsideClick = false;
+
+  /** @hidden */
+  triggerEvents = TriggerEvents.CLICK;
+
+  /** @hidden */
+  triggerSelector = SelectorStrategies.PARENT;
+
+  /** @hidden */
+  readonly overlayComponent = 'ui-popover/element';
+
+  public didInsertElement() {
+    super.didInsertElement();
+    this.getAriaElement()?.setAttribute('aria-expanded', 'false');
+  }
+
+  /** @hidden */
+  onShow = () => {
+    this.getAriaElement()?.setAttribute('aria-expanded', 'true');
+  };
+
+  /** @hidden */
+  onHide = () => {
+    this.getAriaElement()?.setAttribute('aria-expanded', 'false');
+  };
+}

addon/components/ui-popover/element/component.ts

@@ -0,0 +1,27 @@
+import UiContextualElement from '@nsf-open/ember-ui-foundation/components/-internals/contextual-container/element/component';
+import { computed } from '@ember/object';
+
+export default class UiPopoverContextElement extends UiContextualElement {
+  arrowClassName = 'arrow';
+
+  innerClassName = 'popover-content';
+
+  titleTextClassName = 'popover-title';
+
+  ariaRole = 'region';
+
+  @computed('fade', 'actualPlacement', 'showContent')
+  public get popperClassNames() {
+    const classNames = ['popover', this.actualPlacement];
+
+    if (this.fade) {
+      classNames.push('fade');
+    }
+
+    if (this.showContent) {
+      classNames.push('in');
+    }
+
+    return classNames;
+  }
+}

addon/components/ui-popover/ui-popover.stories.ts

@@ -0,0 +1,35 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export default {
+  title: 'Elements/ui-popover',
+  component: 'components/ui-popover/component',
+
+  parameters: {
+    layout: 'centered',
+  },
+
+  args: {
+    textContent: 'Hello World',
+  },
+};
+
+const Template = (context: unknown) => {
+  return {
+    context: Object.assign({}, context),
+
+    // language=handlebars
+    template: hbs`
+      <div class="text-center">
+        <UiButton @variant="primary">
+            Log In
+            <UiPopover @title="Hello World">
+                Username and password go here
+            </UiPopover>
+        </UiButton>
+      </div>
+    `,
+  };
+};
+
+export const Default = Template.bind({});
+Default.storyName = 'ui-popover';

addon/styles/addon.css

@@ -21,3 +21,14 @@ nice with other libraries/tools. */
   border-bottom-left-radius: 0;
   border-left: 0;
 }
+
+.popover {
+  display: block;
+}
+
+.popover.top .arrow,
+.popover.bottom .arrow,
+.popover.left .arrow,
+.popover.right .arrow {
+  margin: 0;
+}

app/components/ui-popover.js

@@ -0,0 +1 @@
+export { default } from '@nsf-open/ember-ui-foundation/components/ui-popover/component';

app/components/ui-popover/element.js

@@ -0,0 +1 @@
+export { default } from '@nsf-open/ember-ui-foundation/components/ui-popover/element/component';