Added types to text and date inputs

Amsterdam · May 16, 2024 · 33231db · 33231db
1 parent c88e569
commit 33231db
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 7 deletions.
diff --git a/packages/react/src/DateInput/DateInput.tsx b/packages/react/src/DateInput/DateInput.tsx
@@ -7,11 +7,14 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, InputHTMLAttributes } from 'react'
 
-export type DateInputProps = InputHTMLAttributes<HTMLInputElement>
+export type DateInputProps = {
+  /** The available types are 'date', 'datetime-local', 'month', 'week' */
+  type?: 'date' | 'datetime-local' | 'month' | 'week'
+} & InputHTMLAttributes<HTMLInputElement>
 
 export const DateInput = forwardRef(
-  ({ className, ...restProps }: DateInputProps, ref: ForwardedRef<HTMLInputElement>) => (
-    <input {...restProps} ref={ref} className={clsx('ams-date-input', className)} type="date" />
+  ({ className, type = 'date', ...restProps }: DateInputProps, ref: ForwardedRef<HTMLInputElement>) => (
+    <input {...restProps} ref={ref} className={clsx('ams-date-input', className)} type={type} />
   ),
 )
 

diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
@@ -7,11 +7,14 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, InputHTMLAttributes } from 'react'
 
-export type TextInputProps = InputHTMLAttributes<HTMLInputElement>
+export type TextInputProps = {
+  /** The options for type in this input are 'text', 'password', 'email, 'tel', 'url' */
+  type?: 'text' | 'password' | 'email' | 'tel' | 'url'
+} & InputHTMLAttributes<HTMLInputElement>
 
 export const TextInput = forwardRef(
-  ({ className, ...restProps }: TextInputProps, ref: ForwardedRef<HTMLInputElement>) => (
-    <input {...restProps} className={clsx('ams-text-input', className)} ref={ref} type="text" />
+  ({ className, type = 'text', ...restProps }: TextInputProps, ref: ForwardedRef<HTMLInputElement>) => (
+    <input {...restProps} className={clsx('ams-text-input', className)} ref={ref} type={type} />
   ),
 )
 

diff --git a/storybook/src/components/DateInput/DateInput.docs.mdx b/storybook/src/components/DateInput/DateInput.docs.mdx
@@ -17,3 +17,17 @@ import README from "../../../../packages/css/src/components/date-input/README.md
 ## Disabled
 
 <Canvas of={DateInputStories.Disabled} />
+
+## Other Types
+
+### Local date and time
+
+<Canvas of={DateInputStories.DateTimeLocal} />
+
+## Month
+
+<Canvas of={DateInputStories.Month} />
+
+## Week
+
+<Canvas of={DateInputStories.Week} />
diff --git a/storybook/src/components/DateInput/DateInput.stories.tsx b/storybook/src/components/DateInput/DateInput.stories.tsx
@@ -33,3 +33,21 @@ export const Disabled: Story = {
     disabled: true,
   },
 }
+
+export const DateTimeLocal: Story = {
+  args: {
+    type: 'datetime-local',
+  },
+}
+
+export const Month: Story = {
+  args: {
+    type: 'month',
+  },
+}
+
+export const Week: Story = {
+  args: {
+    type: 'week',
+  },
+}
diff --git a/storybook/src/components/TextInput/TextInput.docs.mdx b/storybook/src/components/TextInput/TextInput.docs.mdx
@@ -32,3 +32,21 @@ Incorrectly filled input fields become visible immediately.
 ### Disabled
 
 <Canvas of={TextInputStories.Disabled} />
+
+## Other Types
+
+### Password
+
+<Canvas of={TextInputStories.Password} />
+
+### Email
+
+<Canvas of={TextInputStories.Email} />
+
+## Tel
+
+<Canvas of={TextInputStories.Tel} />
+
+### URL
+
+<Canvas of={TextInputStories.Url} />
diff --git a/storybook/src/components/TextInput/TextInput.stories.tsx b/storybook/src/components/TextInput/TextInput.stories.tsx
@@ -30,7 +30,7 @@ const meta = {
           Toggling the invalid control sets the required attribute on the input
           and requires it to match "ž". Wrapped in a form, this triggers the invalid state.
         */}
-        <TextInput pattern={invalid ? '[ž]' : '.*'} required={invalid} onChange={handleChange} {...args} />
+        <TextInput required={invalid} onChange={handleChange} {...args} />
       </form>
     )
   },
@@ -51,6 +51,7 @@ export const Placeholder: Story = {
 export const Invalid: Story = {
   args: {
     invalid: true,
+    pattern: '[ž]',
   },
 }
 
@@ -59,3 +60,27 @@ export const Disabled: Story = {
     disabled: true,
   },
 }
+
+export const Password: Story = {
+  args: {
+    type: 'password',
+  },
+}
+
+export const Email: Story = {
+  args: {
+    type: 'email',
+  },
+}
+
+export const Tel: Story = {
+  args: {
+    type: 'tel',
+  },
+}
+
+export const Url: Story = {
+  args: {
+    type: 'url',
+  },
+}