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

@@ -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,
+};

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',
+};

app/javascript/crayons/Dropdown/__stories__/dropdown-css-helper.scss

@@ -0,0 +1,7 @@
+.dropdown-trigger-container {
+  position: relative;
+
+  .dropdown-trigger:hover + div {
+    display: block;
+  }
+}

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>

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',
 };

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();
+  });
+});

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>
+`;

app/javascript/crayons/Dropdown/index.js

@@ -0,0 +1 @@
+export * from './Dropdown';

app/javascript/crayons/index.js

@@ -0,0 +1 @@
+export * from '@crayons/Dropdown';

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