fix: input type issue + added iconStart + date stories + tweaked some…

… paddings
nl-design-system · Oct 23, 2024 · c9e7ab6 · c9e7ab6
1 parent b0848f9
commit c9e7ab6
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 10 deletions.
diff --git a/components/TextInput/src/index.tsx b/components/TextInput/src/index.tsx
@@ -1,5 +1,6 @@
 import React, { ForwardedRef, forwardRef } from 'react';
 import { Textbox, TextboxProps } from '@utrecht/component-library-react';
+import { Textbox as PRATextbox } from '@persoonlijke-regelingen-assistent/components-react';
 import './index.scss';
 
 interface TextInputProps extends TextboxProps {
@@ -13,7 +14,7 @@ const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttri
     return (
       <label className="pra-textbox" ref={ref} htmlFor={id}>
         {iconStart && <span className="pra-icon pra-icon-start">{iconStart}</span>}
-        <Textbox {...otherProps} placeholder={placeholder} type="text" id={id} />
+        <Textbox {...otherProps} placeholder={placeholder} id={id} />
         {iconEnd && <span className="pra-icon pra-icon-end">{iconEnd}</span>}
       </label>
     );
@@ -22,5 +23,5 @@ const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttri
 
 TextInput.displayName = 'Textbox';
 
-export { TextInput, TextInputProps };
+export { TextInput, TextInputProps, PRATextbox };
 export default TextInput;
diff --git a/components/TextInput/src/pra-textbox.scss b/components/TextInput/src/pra-textbox.scss
@@ -25,11 +25,11 @@
       }
     }
     &-start {
-      padding-inline-start: calc(var(--utrecht-textbox-padding-inline-start) / 2);
+      padding-inline-start: calc(var(--utrecht-textbox-padding-inline-start));
     }
     &-end {
       margin-inline-start: auto;
-      padding-inline-end: calc(var(--utrecht-textbox-padding-inline-end) / 2);
+      padding-inline-end: calc(var(--utrecht-textbox-padding-inline-end));
     }
   }
 
@@ -46,13 +46,13 @@
   &:has(.pra-icon-start) .utrecht-textbox {
     border-end-start-radius: 0;
     border-start-start-radius: 0;
-    padding-inline-start: calc(var(--utrecht-textbox-padding-inline-start) / 2);
+    padding-inline-start: var(--utrecht-textbox-padding-inline-start);
   }
 
   &:has(.pra-icon-end) .utrecht-textbox {
     border-end-end-radius: 0;
     border-start-end-radius: 0;
-    padding-inline-end: calc(var(--utrecht-textbox-padding-inline-end) / 2);
+    padding-inline-end: var(--utrecht-textbox-padding-inline-end);
   }
 
   &:focus-within {

diff --git a/packages/storybook/src/css/TextInput.stories.tsx b/packages/storybook/src/css/TextInput.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { TextInput } from '@gemeente-denhaag/text-input';
 import readme from '../../../../components/TextInput/README.md?raw';
-import { SearchIcon } from '@gemeente-denhaag/icons';
+import { CallIcon, SearchIcon } from '@gemeente-denhaag/icons';
 
 const meta = {
   title: 'CSS/Input/TextInput',
@@ -31,6 +31,22 @@ export const Invalid: Story = {
   args: { ...Default.args, invalid: true },
 };
 
+export const Date: Story = {
+  args: { ...Default.args, type: 'date' },
+};
+
+export const Number: Story = {
+  args: { ...Default.args, type: 'number' },
+};
+
+export const Password: Story = {
+  args: { ...Default.args, type: 'password' },
+};
+
 export const WithIconEnd: Story = {
   args: { ...Default.args, iconEnd: <SearchIcon /> },
 };
+
+export const WithIconStart: Story = {
+  args: { ...Default.args, iconStart: <CallIcon /> },
+};
diff --git a/packages/storybook/src/react/TextInput.stories.tsx b/packages/storybook/src/react/TextInput.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { TextInput } from '@gemeente-denhaag/text-input';
 import readme from '../../../../components/TextInput/README.md?raw';
-import { SearchIcon } from '@gemeente-denhaag/icons';
+import { CallIcon, SearchIcon } from '@gemeente-denhaag/icons';
 
 const meta = {
   title: 'React/Input/TextInput',
@@ -31,6 +31,22 @@ export const Invalid: Story = {
   args: { ...Default.args, invalid: true },
 };
 
+export const Date: Story = {
+  args: { ...Default.args, type: 'date' },
+};
+
+export const Number: Story = {
+  args: { ...Default.args, type: 'number' },
+};
+
+export const Password: Story = {
+  args: { ...Default.args, type: 'password' },
+};
+
 export const WithIconEnd: Story = {
   args: { ...Default.args, iconEnd: <SearchIcon /> },
 };
+
+export const WithIconStart: Story = {
+  args: { ...Default.args, iconStart: <CallIcon /> },
+};
diff --git a/proprietary/Components/src/utrecht/text-input.tokens.json b/proprietary/Components/src/utrecht/text-input.tokens.json
@@ -19,8 +19,8 @@
       "max-inline-size": {},
       "padding-block-end": {},
       "padding-block-start": {},
-      "padding-inline-end": { "value": "24px" },
-      "padding-inline-start": {},
+      "padding-inline-end": { "value": "12px" },
+      "padding-inline-start": { "value": "12px" },
       "placeholder": {
         "color": {}
       },