From f557c9d4748b74171c8c75cac62a3103150c8db3 Mon Sep 17 00:00:00 2001
From: Nick Taylor <nick@iamdeveloper.com>
Date: Tue, 31 Mar 2020 09:42:21 -0400
Subject: [PATCH] Created preact component for crayons dropdown (#6961)

* Created barrel files so we can import directly from @crayons.

* Added stories for Dropdown for JSX.

* Tweaked Dropdown Storybook stories.

* Tweaked <Dropdown /> component.

* Added module mapping to jest for @crayons.

* Added tests for <Dropdown /> component.

* Removed Storybook custom decorator that is no longer required.
---
 app/javascript/crayons/Dropdown/Dropdown.jsx  | 26 ++++++++++++
 .../Dropdown/__stories__/Dropdown.stories.jsx | 42 +++++++++++++++++++
 .../__stories__/dropdown-css-helper.scss      |  7 ++++
 .../dropdown.description.stories.jsx          |  6 ---
 .../__stories__/dropdown.html.stories.jsx     | 31 ++++++++------
 .../Dropdown/__tests__/Dropdown.test.jsx      | 27 ++++++++++++
 .../__snapshots__/Dropdown.test.jsx.snap      | 17 ++++++++
 app/javascript/crayons/Dropdown/index.js      |  1 +
 app/javascript/crayons/index.js               |  1 +
 jest.config.js                                |  1 +
 10 files changed, 141 insertions(+), 18 deletions(-)
 create mode 100644 app/javascript/crayons/Dropdown/Dropdown.jsx
 create mode 100644 app/javascript/crayons/Dropdown/__stories__/Dropdown.stories.jsx
 create mode 100644 app/javascript/crayons/Dropdown/__stories__/dropdown-css-helper.scss
 create mode 100644 app/javascript/crayons/Dropdown/__tests__/Dropdown.test.jsx
 create mode 100644 app/javascript/crayons/Dropdown/__tests__/__snapshots__/Dropdown.test.jsx.snap
 create mode 100644 app/javascript/crayons/Dropdown/index.js
 create mode 100644 app/javascript/crayons/index.js

diff --git a/app/javascript/crayons/Dropdown/Dropdown.jsx b/app/javascript/crayons/Dropdown/Dropdown.jsx
new file mode 100644
index 000000000..1c5292cc0
--- /dev/null
+++ b/app/javascript/crayons/Dropdown/Dropdown.jsx
@@ -0,0 +1,26 @@
+import { h } from 'preact';
+import PropTypes from 'prop-types';
+import { defaultChildrenPropTypes } from '../../src/components/common-prop-types/default-children-prop-types';
+
+export const Dropdown = ({ children, className }) => {
+  return (
+    <div
+      className={`crayons-dropdown${
+        className && className.length > 0 ? ` ${className}` : ''
+      }`}
+    >
+      {children}
+    </div>
+  );
+};
+
+Dropdown.defaultProps = {
+  className: undefined,
+};
+
+Dropdown.displayName = 'Dropdown';
+
+Dropdown.propTypes = {
+  children: defaultChildrenPropTypes.isRequired,
+  className: PropTypes.string,
+};
diff --git a/app/javascript/crayons/Dropdown/__stories__/Dropdown.stories.jsx b/app/javascript/crayons/Dropdown/__stories__/Dropdown.stories.jsx
new file mode 100644
index 000000000..8f2064b43
--- /dev/null
+++ b/app/javascript/crayons/Dropdown/__stories__/Dropdown.stories.jsx
@@ -0,0 +1,42 @@
+import { h } from 'preact';
+import { withKnobs, text } from '@storybook/addon-knobs/react';
+import { Dropdown } from '@crayons';
+
+import './dropdown-css-helper.scss';
+
+export default {
+  title: 'Components/Dropdowns/JSX',
+  decorators: [withKnobs],
+};
+
+export const Default = () => (
+  <div className="dropdown-trigger-container">
+    <a href="/" className="crayons-btn dropdown-trigger">
+      Hover to trigger dropdown
+    </a>
+    <Dropdown className={text('className', 'mb-2')}>
+      Hey, I&apos;m a dropdown content! Lorem ipsum dolor sit amet, consectetur
+      adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus.
+    </Dropdown>
+  </div>
+);
+
+Default.story = {
+  name: 'default',
+};
+
+export const AdditonalCssClasses = () => (
+  <div className="dropdown-trigger-container">
+    <a href="/" className="crayons-btn dropdown-trigger">
+      Hover to trigger dropdown
+    </a>
+    <Dropdown className={text('className', 'p-6')}>
+      Hey, I&apos;m a dropdown content! Lorem ipsum dolor sit amet, consectetur
+      adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus.
+    </Dropdown>
+  </div>
+);
+
+AdditonalCssClasses.story = {
+  name: 'additional CSS classes',
+};
diff --git a/app/javascript/crayons/Dropdown/__stories__/dropdown-css-helper.scss b/app/javascript/crayons/Dropdown/__stories__/dropdown-css-helper.scss
new file mode 100644
index 000000000..f30d3a207
--- /dev/null
+++ b/app/javascript/crayons/Dropdown/__stories__/dropdown-css-helper.scss
@@ -0,0 +1,7 @@
+.dropdown-trigger-container {
+  position: relative;
+
+  .dropdown-trigger:hover + div {
+    display: block;
+  }
+}
diff --git a/app/javascript/crayons/Dropdown/__stories__/dropdown.description.stories.jsx b/app/javascript/crayons/Dropdown/__stories__/dropdown.description.stories.jsx
index 532015370..6f971a7bf 100644
--- a/app/javascript/crayons/Dropdown/__stories__/dropdown.description.stories.jsx
+++ b/app/javascript/crayons/Dropdown/__stories__/dropdown.description.stories.jsx
@@ -19,12 +19,6 @@ export const Description = () => (
       <li>&lt;250px: 16px</li>
       <li>251 - 320px: 24px</li>
     </ul>
-    <p>
-      If you need to utilize entire dropdown area and you have to get rid of
-      default padding, please use modifier class
-      <code>crayons-dropdown--padding-0</code>
-      .
-    </p>
     <p>
       FYI: Dropdowns use “Box” component as background, with Level 3 elevation.
     </p>
diff --git a/app/javascript/crayons/Dropdown/__stories__/dropdown.html.stories.jsx b/app/javascript/crayons/Dropdown/__stories__/dropdown.html.stories.jsx
index 4817f3882..a9feb7428 100644
--- a/app/javascript/crayons/Dropdown/__stories__/dropdown.html.stories.jsx
+++ b/app/javascript/crayons/Dropdown/__stories__/dropdown.html.stories.jsx
@@ -7,9 +7,14 @@ export default {
 };
 
 export const Default = () => (
-  <div className="crayons-dropdown" style={{ display: 'block' }}>
-    Hey, I&apos;m a dropdown content! Lorem ipsum dolor sit amet, consectetur
-    adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus.
+  <div className="dropdown-trigger-container">
+    <a href="/" className="crayons-btn dropdown-trigger">
+      Hover to trigger dropdown
+    </a>
+    <div className="crayons-dropdown">
+      Hey, I&apos;m a dropdown content! Lorem ipsum dolor sit amet, consectetur
+      adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus.
+    </div>
   </div>
 );
 
@@ -17,16 +22,18 @@ Default.story = {
   name: 'default',
 };
 
-export const Large = () => (
-  <div
-    className="crayons-dropdown crayons-dropdown--l"
-    style={{ display: 'block' }}
-  >
-    Hey, I&apos;m a dropdown content! Lorem ipsum dolor sit amet, consectetur
-    adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus.
+export const AdditonalCssClasses = () => (
+  <div className="dropdown-trigger-container">
+    <a href="/" className="crayons-btn dropdown-trigger">
+      Hover to trigger dropdown
+    </a>
+    <div className="crayons-dropdown p-6">
+      Hey, I&apos;m a dropdown content! Lorem ipsum dolor sit amet, consectetur
+      adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus.
+    </div>
   </div>
 );
 
-Large.story = {
-  name: 'large',
+AdditonalCssClasses.story = {
+  name: 'additional CSS classes',
 };
diff --git a/app/javascript/crayons/Dropdown/__tests__/Dropdown.test.jsx b/app/javascript/crayons/Dropdown/__tests__/Dropdown.test.jsx
new file mode 100644
index 000000000..77e40594e
--- /dev/null
+++ b/app/javascript/crayons/Dropdown/__tests__/Dropdown.test.jsx
@@ -0,0 +1,27 @@
+import { h } from 'preact';
+import render from 'preact-render-to-json';
+import { Dropdown } from '@crayons';
+
+describe('<Dropdown />', () => {
+  it('renders properly', () => {
+    const tree = render(
+      <Dropdown>
+        Hey, I&apos;m a dropdown content! Lorem ipsum dolor sit amet,
+        consectetur adipisicing elit. Sequi ea voluptates quaerat eos
+        consequuntur temporibus.
+      </Dropdown>,
+    );
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders properly with additional CSS classes', () => {
+    const tree = render(
+      <Dropdown className="some-additional-css-class">
+        Hey, I&apos;m a dropdown content! Lorem ipsum dolor sit amet,
+        consectetur adipisicing elit. Sequi ea voluptates quaerat eos
+        consequuntur temporibus.
+      </Dropdown>,
+    );
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/app/javascript/crayons/Dropdown/__tests__/__snapshots__/Dropdown.test.jsx.snap b/app/javascript/crayons/Dropdown/__tests__/__snapshots__/Dropdown.test.jsx.snap
new file mode 100644
index 000000000..42227b0aa
--- /dev/null
+++ b/app/javascript/crayons/Dropdown/__tests__/__snapshots__/Dropdown.test.jsx.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Dropdown /> renders properly 1`] = `
+<div
+  class="crayons-dropdown"
+>
+  Hey, I'm a dropdown content! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus.
+</div>
+`;
+
+exports[`<Dropdown /> renders properly with additional CSS classes 1`] = `
+<div
+  class="crayons-dropdown some-additional-css-class"
+>
+  Hey, I'm a dropdown content! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus.
+</div>
+`;
diff --git a/app/javascript/crayons/Dropdown/index.js b/app/javascript/crayons/Dropdown/index.js
new file mode 100644
index 000000000..2f29bad4e
--- /dev/null
+++ b/app/javascript/crayons/Dropdown/index.js
@@ -0,0 +1 @@
+export * from './Dropdown';
diff --git a/app/javascript/crayons/index.js b/app/javascript/crayons/index.js
new file mode 100644
index 000000000..647ea61e0
--- /dev/null
+++ b/app/javascript/crayons/index.js
@@ -0,0 +1 @@
+export * from '@crayons/Dropdown';
diff --git a/jest.config.js b/jest.config.js
index fd2188e20..6b964120e 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -8,6 +8,7 @@ module.exports = {
   ],
   moduleNameMapper: {
     '\\.(svg|png)$': '<rootDir>/empty-module.js',
+    '^@crayons(.*)$': '<rootDir>/app/javascript/crayons$1',
   },
   snapshotSerializers: ['preact-render-spy/snapshot'],
   // The webpack config folder for webpacker is excluded as it has a test.js file that gets