And new story variant 'indropdown'.

Author: ArinzeJeffrey-droid

scss/bitstyles/atoms/dropdown/Dropdown.js

@@ -11,7 +11,11 @@ export default ({ alignment = [], children }) => {
   });
   wrapper.appendChild(button);
   const dropdown = document.createElement('div');
-  dropdown.innerHTML = children || 'Dropdown';
+  if (children instanceof HTMLElement) {
+    dropdown.append(children);
+  } else {
+    dropdown.innerHTML = children || 'Dropdown';
+  }
   dropdown.classList.add('a-dropdown', 'u-overflow-y-auto');
   alignment.forEach((variant) => {
     dropdown.classList.add(`a-dropdown--${variant}`);

scss/bitstyles/atoms/flash/flash.stories.js

@@ -1,3 +1,4 @@
+import Dropdown from '../dropdown/Dropdown';
 import Flash from './Flash';
 
 export default {
@@ -32,6 +33,41 @@ export default {
 
 const Template = (args) => Flash(args);
 const dummyOnClick = () => {};
+const dropdownDecorator = (story) => {
+  const render = `
+    <ul class="u-list-none">
+      <li>${story().outerHTML}</li>
+      <li>${
+        story({
+          args: {
+            onClick: dummyOnClick,
+            icon: 'question-circle',
+            theme: 'warning',
+          },
+        }).outerHTML
+      }</li>
+      <li>${
+        story({
+          args: {
+            onClick: dummyOnClick,
+            icon: 'question-circle',
+            theme: 'danger',
+          },
+        }).outerHTML
+      }</li>
+      <li>${
+        story({
+          args: {
+            onClick: dummyOnClick,
+            icon: 'question-circle',
+            theme: 'positive',
+          },
+        }).outerHTML
+      }</li>
+    </ul>
+  `;
+  return Dropdown({ children: render });
+};
 
 // ***** Theme variants ****************** //
 
@@ -41,6 +77,7 @@ Base.parameters = {
   zeplinLink:
     'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6331bd93290bbf15ece3af28',
 };
+Base.decorators = [dropdownDecorator];
 
 export const Danger = Template.bind({});
 Danger.args = { theme: 'danger' };
@@ -134,3 +171,14 @@ PositiveIconButton.parameters = {
   zeplinLink:
     'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6331bd96d1e9ea1a4033367b',
 };
+
+export const InDropdown = Template.bind({});
+InDropdown.args = {
+  icon: 'info-circle',
+  onClick: dummyOnClick,
+  children: 'In dropdown',
+};
+InDropdown.parameters = {
+  zeplinLink: 'https://zpl.io/8lBBP44',
+};
+InDropdown.decorators = [dropdownDecorator];