From cf5024425922ae1a8bb2c4c28bffc6c328973e2b Mon Sep 17 00:00:00 2001
From: Van Nguyen <vanguyen@twilio.com>
Date: Sun, 9 Aug 2020 22:12:23 -0700
Subject: [PATCH] feat(select, option): add Select and Option components

---
 src/components/Checkbox/Checkbox.stories.tsx  |  1 -
 .../FormInput/FormInput.stories.tsx           |  1 -
 src/components/Option/Option.tsx              |  5 ++
 src/components/Option/index.ts                |  5 ++
 src/components/Select/Select.stories.tsx      | 70 +++++++++++++++++++
 src/components/Select/Select.tsx              | 38 ++++++++++
 src/components/Select/index.ts                |  5 ++
 src/components/index.ts                       |  2 +
 8 files changed, 125 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Option/Option.tsx
 create mode 100644 src/components/Option/index.ts
 create mode 100644 src/components/Select/Select.stories.tsx
 create mode 100644 src/components/Select/Select.tsx
 create mode 100644 src/components/Select/index.ts

diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
index 92d06d0..65dd6d9 100644
--- a/src/components/Checkbox/Checkbox.stories.tsx
+++ b/src/components/Checkbox/Checkbox.stories.tsx
@@ -1,4 +1,3 @@
-// import { action } from '@storybook/addon-actions';
 import { Button } from '@twilio-paste/core';
 import { Theme } from '@twilio-paste/theme';
 import { Formik } from 'formik';
diff --git a/src/components/FormInput/FormInput.stories.tsx b/src/components/FormInput/FormInput.stories.tsx
index d378f7b..b7da439 100644
--- a/src/components/FormInput/FormInput.stories.tsx
+++ b/src/components/FormInput/FormInput.stories.tsx
@@ -1,4 +1,3 @@
-// import { action } from '@storybook/addon-actions';
 import { Button, FormLabel, FormHelpText } from '@twilio-paste/core';
 import { Theme } from '@twilio-paste/theme';
 import { Formik } from 'formik';
diff --git a/src/components/Option/Option.tsx b/src/components/Option/Option.tsx
new file mode 100644
index 0000000..48be8b1
--- /dev/null
+++ b/src/components/Option/Option.tsx
@@ -0,0 +1,5 @@
+import { Option as $Option } from '@twilio-paste/core';
+
+export const Option = $Option;
+
+export default Option;
diff --git a/src/components/Option/index.ts b/src/components/Option/index.ts
new file mode 100644
index 0000000..ae38fb9
--- /dev/null
+++ b/src/components/Option/index.ts
@@ -0,0 +1,5 @@
+import { Option } from './Option';
+
+export { Option };
+
+export default Option;
diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
new file mode 100644
index 0000000..d2dfa89
--- /dev/null
+++ b/src/components/Select/Select.stories.tsx
@@ -0,0 +1,70 @@
+import { Button, FormLabel } from '@twilio-paste/core';
+import { Theme } from '@twilio-paste/theme';
+import { Formik } from 'formik';
+import * as React from 'react';
+
+import { Option } from '../Option';
+import { Select } from './Select';
+
+export default {
+  title: 'Select',
+};
+
+export const Basic: React.FC = () => (
+  <Theme.Provider theme="default">
+    <Formik
+      initialValues={{ callbackMethod: 'get' }}
+      onSubmit={(values) => {
+        window.alert(JSON.stringify(values));
+      }}
+    >
+      {({ handleSubmit }) => (
+        <form onSubmit={handleSubmit}>
+          <FormLabel htmlFor="callbackMethod">Callback Method</FormLabel>
+          <Select required id="callbackMethod" name="callbackMethod">
+            <Option value="get">GET</Option>
+            <Option value="post">POST</Option>
+            <Option value="put">PUT</Option>
+          </Select>
+
+          <Button variant="primary" type="submit">
+            Submit
+          </Button>
+        </form>
+      )}
+    </Formik>
+  </Theme.Provider>
+);
+
+export const SelectWithOnChangeCallback: React.FC = () => (
+  <Theme.Provider theme="default">
+    <Formik
+      initialValues={{ callbackMethod: 'get' }}
+      onSubmit={(values) => {
+        window.alert(JSON.stringify(values));
+      }}
+    >
+      {({ handleSubmit }) => (
+        <form onSubmit={handleSubmit}>
+          <FormLabel htmlFor="callbackMethod">Callback Method</FormLabel>
+          <Select
+            required
+            id="callbackMethod"
+            name="callbackMethod"
+            onChange={(e) => {
+              window.alert(`new value: ${e.target.value}`);
+            }}
+          >
+            <Option value="get">GET</Option>
+            <Option value="post">POST</Option>
+            <Option value="put">PUT</Option>
+          </Select>
+
+          <Button variant="primary" type="submit">
+            Submit
+          </Button>
+        </form>
+      )}
+    </Formik>
+  </Theme.Provider>
+);
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
new file mode 100644
index 0000000..b79d192
--- /dev/null
+++ b/src/components/Select/Select.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { FieldProps } from 'formik';
+import { Select as $Select, SelectProps as $SelectProps } from '@twilio-paste/core';
+
+import { FormikFieldProps } from '../../interfaces';
+import { Field } from '../Field';
+
+export type SelectProps = FormikFieldProps &
+  Omit<$SelectProps, 'value' | 'onChange'> &
+  Partial<Pick<$SelectProps, 'onChange'>>;
+
+export const Select: React.FC<SelectProps> = ({ name, validate, fast, children, onChange, onBlur, ...restProps }) => {
+  return (
+    <Field name={name} validate={validate} fast={fast}>
+      {({ form: { setFieldValue, setFieldTouched } }: FieldProps) => (
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        <$Select
+          onChange={(e) => {
+            setFieldValue(name, e.target.value);
+            onChange?.(e);
+          }}
+          onBlur={(e) => {
+            setFieldTouched(name);
+            onBlur?.(e);
+          }}
+          {...restProps}
+        >
+          {children}
+        </$Select>
+      )}
+    </Field>
+  );
+};
+
+Select.displayName = 'Select';
+
+export default Select;
diff --git a/src/components/Select/index.ts b/src/components/Select/index.ts
new file mode 100644
index 0000000..99bf404
--- /dev/null
+++ b/src/components/Select/index.ts
@@ -0,0 +1,5 @@
+import { Select } from './Select';
+
+export { Select };
+
+export default Select;
diff --git a/src/components/index.ts b/src/components/index.ts
index e1aa3b6..929fa03 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,2 +1,4 @@
 export * from './Checkbox';
 export * from './Field';
+export * from './Option';
+export * from './Select';