From 6a652999186459b270f245a3c6d86654a0ee4ccf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20G=C5=82ownia?= <bglownia@gmail.com>
Date: Tue, 1 Mar 2022 13:45:42 +0100
Subject: [PATCH] Add select component

---
 .../src/components/select/select.spec.tsx     | 10 +++++
 .../src/components/select/select.stories.tsx  | 26 +++++++++++
 .../src/components/select/select.tsx          | 36 ++++++++++++++++
 .../src/components/textArea/textArea.tsx      | 43 +------------------
 4 files changed, 73 insertions(+), 42 deletions(-)
 create mode 100644 libs/ui-toolkit/src/components/select/select.spec.tsx
 create mode 100644 libs/ui-toolkit/src/components/select/select.stories.tsx
 create mode 100644 libs/ui-toolkit/src/components/select/select.tsx

diff --git a/libs/ui-toolkit/src/components/select/select.spec.tsx b/libs/ui-toolkit/src/components/select/select.spec.tsx
new file mode 100644
index 000000000..116892a6d
--- /dev/null
+++ b/libs/ui-toolkit/src/components/select/select.spec.tsx
@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import Select from './select';
+
+describe('Select', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Select />);
+    expect(baseElement).toBeTruthy();
+  });
+});
diff --git a/libs/ui-toolkit/src/components/select/select.stories.tsx b/libs/ui-toolkit/src/components/select/select.stories.tsx
new file mode 100644
index 000000000..f223cb9d3
--- /dev/null
+++ b/libs/ui-toolkit/src/components/select/select.stories.tsx
@@ -0,0 +1,26 @@
+import { Story, Meta } from '@storybook/react';
+import { Select } from './select';
+
+export default {
+  component: Select,
+  title: 'Select',
+} as Meta;
+
+const Template: Story = (args) => (
+  <Select {...args}>
+    <option value="Only option">Only option</option>
+  </Select>
+);
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const WithError = Template.bind({});
+WithError.args = {
+  hasError: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};
diff --git a/libs/ui-toolkit/src/components/select/select.tsx b/libs/ui-toolkit/src/components/select/select.tsx
new file mode 100644
index 000000000..014e5d942
--- /dev/null
+++ b/libs/ui-toolkit/src/components/select/select.tsx
@@ -0,0 +1,36 @@
+import classNames from 'classnames';
+import { inputClassNames, inputStyle } from '../input/input';
+
+/* eslint-disable-next-line */
+export interface TextAreaProps {
+  onChange?: React.FormEventHandler<HTMLSelectElement>;
+  hasError?: boolean;
+  disabled?: boolean;
+  className?: string;
+  value?: string | number;
+  children?: React.ReactNode;
+}
+
+export function Select({
+  hasError,
+  onChange,
+  disabled,
+  className,
+  children,
+}: TextAreaProps) {
+  return (
+    <select
+      onChange={onChange}
+      className={classNames(
+        inputClassNames({ hasError, disabled, className }),
+        'h-28'
+      )}
+      disabled={disabled}
+      style={inputStyle({ disabled })}
+    >
+      {children}
+    </select>
+  );
+}
+
+export default Select;
diff --git a/libs/ui-toolkit/src/components/textArea/textArea.tsx b/libs/ui-toolkit/src/components/textArea/textArea.tsx
index 0da8fa647..7b7b1f8b7 100644
--- a/libs/ui-toolkit/src/components/textArea/textArea.tsx
+++ b/libs/ui-toolkit/src/components/textArea/textArea.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { inputClassNames, inputStyle } from '../input/input';
 
 /* eslint-disable-next-line */
 export interface TextAreaProps {
@@ -10,47 +10,6 @@ export interface TextAreaProps {
   children?: React.ReactNode;
 }
 
-export const inputClassNames = ({
-  hasError,
-  disabled,
-  className,
-}: {
-  hasError?: boolean;
-  disabled?: boolean;
-  className?: string;
-}) =>
-  classNames(
-    [
-      'inline-flex',
-      'items-center',
-      'box-border',
-      'pl-8',
-      'pr-8',
-      'border',
-      'border-light-gray-50',
-      'bg-neutral-753',
-      'text-light-gray-50',
-      'text-ui',
-      'focus-visible:shadow-focus',
-      'focus-visible:outline-0',
-    ],
-    {
-      'border-vega-pink': hasError,
-      'text-disabled': disabled,
-      'bg-transparent': disabled,
-    },
-    className
-  );
-
-export const inputStyle = ({ disabled }: { disabled?: boolean }) => {
-  const style: React.CSSProperties = {};
-  if (disabled) {
-    style.backgroundImage =
-      'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAAXNSR0IArs4c6QAAACNJREFUGFdjtLS0/M8ABcePH2eEsRlJl4BpBdHIuuFmEi0BABqjEQVjx/LTAAAAAElFTkSuQmCC)';
-  }
-  return style;
-};
-
 export function TextArea({
   hasError,
   onChange,