From 584be3a21c9b0dec7e921af7d0d6c9baef75efb1 Mon Sep 17 00:00:00 2001
From: Wahid Farid <wahid.farid@tablecheck.com>
Date: Wed, 12 Oct 2022 11:09:18 +0900
Subject: [PATCH] feat(PhoneInput): add tkv3 phone input

Completes #111
---
 .../src/components/PhoneInput.stories.tsx     | 28 +++++++++++
 system/react/src/components/PhoneInput.tsx    | 47 +++++++++++++++++++
 system/react/src/index.ts                     |  2 +
 3 files changed, 77 insertions(+)
 create mode 100644 system/react/src/components/PhoneInput.stories.tsx
 create mode 100644 system/react/src/components/PhoneInput.tsx

diff --git a/system/react/src/components/PhoneInput.stories.tsx b/system/react/src/components/PhoneInput.stories.tsx
new file mode 100644
index 000000000..16d991634
--- /dev/null
+++ b/system/react/src/components/PhoneInput.stories.tsx
@@ -0,0 +1,28 @@
+import { Story, Meta } from '@storybook/react';
+
+import { classlessSelector, classySelector, PhoneInput } from './PhoneInput';
+
+const contentVariants = [
+  {},
+  { 'data-disabled': true },
+  { 'data-stretch': true },
+  { 'data-error': true }
+];
+
+export default {
+  title: 'TableKit/PhoneInput',
+  component: PhoneInput,
+  parameters: {
+    variants: contentVariants,
+    classlessSelector,
+    classySelector
+  }
+} as Meta;
+
+export const Variants: Story = () => (
+  <>
+    {contentVariants.map((props) => (
+      <PhoneInput {...props} />
+    ))}
+  </>
+);
diff --git a/system/react/src/components/PhoneInput.tsx b/system/react/src/components/PhoneInput.tsx
new file mode 100644
index 000000000..e5a7f9abe
--- /dev/null
+++ b/system/react/src/components/PhoneInput.tsx
@@ -0,0 +1,47 @@
+import { Close } from '@carbon/icons-react';
+import { css} from '@emotion/react';
+import styled from '@emotion/styled';
+import * as React from 'react';
+
+import { Input, InputWithIcons } from './Input';
+
+export const classlessSelector = 'input[type="tel"]';
+export const classySelector = '.phone-input';
+
+export const baseStyles = css``;
+
+// export const Flag = styled.span<{ country: string }>`
+//   display: inline-block;
+//   width: 20px;
+//   height: 15px;
+//   box-shadow: 0px 0px 1px 0px #888;
+//   background-image: url(${getSrcPath(flagImage)});
+//   background-repeat: no-repeat;
+
+//   ${getStyle};
+
+//   @media only screen and (-webkit-min-device-pixel-ratio: 2),
+//     only screen and (min--moz-device-pixel-ratio: 2),
+//     only screen and (-o-min-device-pixel-ratio: 2 / 1),
+//     only screen and (min-device-pixel-ratio: 2),
+//     only screen and (min-resolution: 192dpi),
+//     only screen and (min-resolution: 2dppx) {
+//     background-image: url(${getSrcPath(flagImage2x)});
+//     background-size: 5630px 15px;
+//   }
+// `;
+
+export interface Props {
+  displayFlag?: boolean;
+}
+
+export const PhoneInput = React.forwardRef<
+  HTMLDivElement,
+  Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & Props
+>(({displayFlag, ...props}, ref) => (
+  <InputWithIcons {...props} ref={ref}>
+    {displayFlag && }
+    <Input placeholder="09000789" type="tel" />
+    <Close size={16} />
+  </InputWithIcons>
+));
diff --git a/system/react/src/index.ts b/system/react/src/index.ts
index e93f853fc..f2370a362 100644
--- a/system/react/src/index.ts
+++ b/system/react/src/index.ts
@@ -26,6 +26,8 @@ export {
   baseStylesObject as menuListStylesObject,
   MenuList
 } from './components/MenuList';
+export { PhoneInput } from './components/PhoneInput';
+export type { Props as PhoneInputProps } from './components/PhoneInput';
 export { Radio } from './components/Radio';
 export { ScrollShadow } from './components/ScrollShadow';
 export { globalThemeVars, Select } from './components/Select';