From a5d7fcfd9550edcfe358bb2712c33b2f9682ad7c Mon Sep 17 00:00:00 2001
From: "Jones, Michael Dean (Contractor)" <MDJONES@associates.nsf.gov>
Date: Wed, 28 Dec 2022 11:15:37 -0500
Subject: [PATCH] feat: introduce UiPopover component

---
 addon/components/ui-popover/component.ts      | 47 +++++++++++++++++++
 .../ui-popover/element/component.ts           | 27 +++++++++++
 .../ui-popover/ui-popover.stories.ts          | 35 ++++++++++++++
 addon/styles/addon.css                        | 11 +++++
 app/components/ui-popover.js                  |  1 +
 app/components/ui-popover/element.js          |  1 +
 6 files changed, 122 insertions(+)
 create mode 100644 addon/components/ui-popover/component.ts
 create mode 100644 addon/components/ui-popover/element/component.ts
 create mode 100644 addon/components/ui-popover/ui-popover.stories.ts
 create mode 100644 app/components/ui-popover.js
 create mode 100644 app/components/ui-popover/element.js

diff --git a/addon/components/ui-popover/component.ts b/addon/components/ui-popover/component.ts
new file mode 100644
index 0000000..184c552
--- /dev/null
+++ b/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');
+  };
+}
diff --git a/addon/components/ui-popover/element/component.ts b/addon/components/ui-popover/element/component.ts
new file mode 100644
index 0000000..f2f2b31
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/addon/components/ui-popover/ui-popover.stories.ts b/addon/components/ui-popover/ui-popover.stories.ts
new file mode 100644
index 0000000..111ad73
--- /dev/null
+++ b/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';
diff --git a/addon/styles/addon.css b/addon/styles/addon.css
index a7b9762..657bcdc 100644
--- a/addon/styles/addon.css
+++ b/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;
+}
diff --git a/app/components/ui-popover.js b/app/components/ui-popover.js
new file mode 100644
index 0000000..64f1dae
--- /dev/null
+++ b/app/components/ui-popover.js
@@ -0,0 +1 @@
+export { default } from '@nsf-open/ember-ui-foundation/components/ui-popover/component';
diff --git a/app/components/ui-popover/element.js b/app/components/ui-popover/element.js
new file mode 100644
index 0000000..c456fc7
--- /dev/null
+++ b/app/components/ui-popover/element.js
@@ -0,0 +1 @@
+export { default } from '@nsf-open/ember-ui-foundation/components/ui-popover/element/component';