add simple-dropdown

Author: Scott Watkins

src/lib/components/simple-dropdown/simple-dropdown.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { SimpleDropdown } from './simple-dropdown';
+import { StorybookAction, liveEdit, liveEditScope } from '../../../storybook-utils';
+
+export default {
+    title: 'Simple Dropdown',
+    component: SimpleDropdown,
+    decorators: [liveEditScope({ SimpleDropdown })]
+};
+
+export const LiveEdit = (action: StorybookAction) => liveEdit(
+    <div style={{ width: '100%' }}>
+        <SimpleDropdown
+            label="Fruits"
+            options={["apple", "banana", "pear", "strawberries"]}
+            onChange={event => action("Selected value is: " + event.target.value)(event)}
+        />
+    </div>
+)(action);

src/lib/components/simple-dropdown/simple-dropdown.styles.scss

@@ -0,0 +1,20 @@
+@import "../../colors";
+
+div.simple-dropdown  {
+    display: inline-block
+}
+
+.simple-dropdown {
+  background-color: $color-tw-blue-50;
+  color: $color-tw-blue-700;
+  font-size: 14px;
+  font-family: Arial, Helvetica, sans-serif;
+
+  select {
+    color: inherit;
+    font: inherit;
+    vertical-align: baseline;
+    border: none;
+    background-color: transparent;
+  }
+}

src/lib/components/simple-dropdown/simple-dropdown.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { SimpleDropdown } from './simple-dropdown';
+
+it('SimpleDropdown renders without crashing', () => {
+    mount(
+        (<SimpleDropdown
+            label="Fruits"
+            options={["apple", "banana", "strawberries"]}
+            onChange={event => console.log("Selected value: `${event.target.value)`")}
+        />));
+});

src/lib/components/simple-dropdown/simple-dropdown.tsx

@@ -0,0 +1,61 @@
+import './simple-dropdown.styles.scss';
+import React, { useState, FC, ChangeEventHandler, ChangeEvent } from 'react';
+
+
+/**
+ * SimpleDropdownProps
+ *
+ * @memberof SimpleDropdown
+ */
+interface SimpleDropdownProps {
+    /**
+     * Label displayed on the left of the drop down.
+     */
+    label: string,
+    /**
+     * This is the list of values to be displayed on the Dropdown.
+     */
+    options: string[],
+
+    /**
+     * Event to fire when the value of the select element changes
+     */
+    onChange?: ChangeEventHandler<HTMLSelectElement>
+};
+
+/**
+ * A Simple Dropdown Component
+ */
+export const SimpleDropdown: FC<SimpleDropdownProps> = (
+    {
+        onChange = event => { }, // default value is a no-op
+        ...props
+    }
+) => {
+    // Use State Hooks
+    const [value, setValue] = useState(props.options.length > 0 ? props.options[0] : '');
+
+    // Handle Change Function
+    const handleChange: ChangeEventHandler<HTMLSelectElement> = (event: ChangeEvent<HTMLSelectElement>) => {
+        setValue(event.target.value);
+        onChange(event);
+    };
+
+    // Render
+    return (
+        <div className="simple-dropdown" >
+            <label>
+                {props.label}:
+                <select value={value} onChange={handleChange}>
+                    {
+                        props.options.map(element =>
+                            (
+                                <option key={element} value={element}>{element}</option>
+                            )
+                        )
+                    }
+                </select>
+            </label >
+        </div >
+    )
+};