feat(select, option): add Select and Option components

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

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

src/components/Option/Option.tsx

@@ -0,0 +1,5 @@
+import { Option as $Option } from '@twilio-paste/core';
+
+export const Option = $Option;
+
+export default Option;

src/components/Option/index.ts

@@ -0,0 +1,5 @@
+import { Option } from './Option';
+
+export { Option };
+
+export default Option;

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

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;

src/components/Select/index.ts

@@ -0,0 +1,5 @@
+import { Select } from './Select';
+
+export { Select };
+
+export default Select;

src/components/index.ts

@@ -1,2 +1,4 @@
 export * from './Checkbox';
 export * from './Field';
+export * from './Option';
+export * from './Select';