Add TextField component to ListItem

7 files changed, 43 insertions, 0 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/ListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/ListItem.tsx
index b52bc51d53..7b234e1a62 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/ListItem.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/ListItem.tsx
@@ -8,6 +8,7 @@ import {
   ListItemItem,
   ListItemLabel,
   ListItemText,
+  ListItemTextField,
   ListItemTrigger,
 } from './components';
 import { levels } from './levels';
@@ -39,6 +40,7 @@ const ListItemNamespace = Object.assign(ListItem, {
   Item: ListItemItem,
   Footer: ListItemFooter,
   Icon: ListItemIcon,
+  TextField: ListItemTextField,
 });
 
 export { ListItemNamespace as ListItem };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/index.ts
index 1b7906d8a1..0ed8151241 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/index.ts
@@ -6,3 +6,4 @@ export * from './list-item-label';
 export * from './list-item-text';
 export * from './list-item-trigger';
 export * from './list-item-footer';
+export * from './list-item-text-field';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text-field/ListItemTextField.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text-field/ListItemTextField.tsx
new file mode 100644
index 0000000000..05c9b828f1
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text-field/ListItemTextField.tsx
@@ -0,0 +1,22 @@
+import { TextField, TextFieldProps } from '../../../text-field';
+import { ListItemTextFieldInput } from './components';
+
+export type ListItemTextFieldProps = TextFieldProps & {
+  onSubmit?: (event: React.FormEvent) => Promise<void>;
+};
+
+function ListItemTextField({ invalid, onSubmit, children, ...props }: ListItemTextFieldProps) {
+  return (
+    <form onSubmit={onSubmit}>
+      <TextField invalid={invalid} {...props}>
+        {children}
+      </TextField>
+    </form>
+  );
+}
+
+const ListItemTextFieldNamespace = Object.assign(ListItemTextField, {
+  Input: ListItemTextFieldInput,
+});
+
+export { ListItemTextFieldNamespace as ListItemTextField };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text-field/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text-field/components/index.ts
new file mode 100644
index 0000000000..28509d072d
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text-field/components/index.ts
@@ -0,0 +1 @@
+export * from './list-item-text-field-input';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text-field/components/list-item-text-field-input/ListItemTextFieldInput.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text-field/components/list-item-text-field-input/ListItemTextFieldInput.tsx
new file mode 100644
index 0000000000..3eb3342ffc
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text-field/components/list-item-text-field-input/ListItemTextFieldInput.tsx
@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+import { TextField } from '../../../../../text-field';
+import { TextFieldInputProps } from '../../../../../text-field/components';
+
+export type ListItemTextFieldInputProps = TextFieldInputProps;
+
+const StyledTextFieldInput = styled(TextField.Input)`
+  box-sizing: border-box;
+  width: 102px;
+`;
+
+export function ListItemTextFieldInput({ children, ...props }: ListItemTextFieldInputProps) {
+  return <StyledTextFieldInput {...props}>{children}</StyledTextFieldInput>;
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text-field/components/list-item-text-field-input/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text-field/components/list-item-text-field-input/index.ts
new file mode 100644
index 0000000000..a9da3a4bb4
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text-field/components/list-item-text-field-input/index.ts
@@ -0,0 +1 @@
+export * from './ListItemTextFieldInput';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text-field/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text-field/index.ts
new file mode 100644
index 0000000000..7f6a499cfb
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/list-item-text-field/index.ts
@@ -0,0 +1 @@
+export * from './ListItemTextField';