Add storybook story for DropdownMenu component

packages/components/src/dropdown-menu/stories/index.js

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { text, object } from '@storybook/addon-knobs';
+
+/**
+ * Internal dependencies
+ */
+import DropdownMenu from '../';
+
+export default { title: 'Components/DropdownMenu', component: DropdownMenu };
+
+export const _default = () => {
+	const label = text( 'Label', 'Select a direction.' );
+	const icon = text( 'Icon', 'ellipsis' );
+	const controls = object( 'Controls', [
+		{
+			title: 'Up',
+			icon: 'arrow-up',
+		},
+		{
+			title: 'Down',
+			icon: 'arrow-down',
+		},
+	] );
+	return <DropdownMenu icon={ icon } label={ label } controls={ controls } />;
+};

storybook/test/__snapshots__/index.js.snap

@@ -2803,6 +2803,42 @@ Array [
 ]
 `;
 
+exports[`Storyshots Components/DropdownMenu Default 1`] = `
+<div
+  className="components-dropdown components-dropdown-menu"
+>
+  <button
+    aria-expanded={false}
+    aria-haspopup="true"
+    aria-label="Select a direction."
+    className="components-button components-dropdown-menu__toggle has-icon"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      className="dashicon dashicons-ellipsis"
+      focusable="false"
+      height={20}
+      role="img"
+      viewBox="0 0 20 20"
+      width={20}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5 10c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm12-2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-7 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
 exports[`Storyshots Components/Experimental/Text Body 1`] = `
 .emotion-0 {
   margin: 0;
@@ -8807,14 +8843,14 @@ exports[`Storyshots Components/TreeSelect Default 1`] = `
   >
     <label
       className="components-base-control__label"
-      htmlFor="inspector-select-control-1"
+      htmlFor="inspector-select-control-2"
     >
       Label Text
     </label>
     <select
-      aria-describedby="inspector-select-control-1__help"
+      aria-describedby="inspector-select-control-2__help"
       className="components-select-control__input"
-      id="inspector-select-control-1"
+      id="inspector-select-control-2"
       multiple={false}
       onChange={[Function]}
     >
@@ -8857,7 +8893,7 @@ exports[`Storyshots Components/TreeSelect Default 1`] = `
   </div>
   <p
     className="components-base-control__help"
-    id="inspector-select-control-1__help"
+    id="inspector-select-control-2__help"
   >
     Help text to explain the select control.
   </p>