feat: TET-866 review changes

VirtusLab · May 10, 2024 · 5a28537 · 5a28537
1 parent 787a8d9
commit 5a28537
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 14 deletions.
diff --git a/src/components/TagInput/TagInput.props.ts b/src/components/TagInput/TagInput.props.ts
@@ -1,15 +1,17 @@
 import { InputHTMLAttributes } from 'react';
 
 import type { TagInputConfig } from './TagInput.styles';
+import { HelperTextProps } from '../HelperText';
+import { LabelProps } from '../Label';
 
 import { BasicInputState } from '@/types';
 
 export type TagInputProps = {
   custom?: TagInputConfig;
   state?: BasicInputState;
   isValidationError?: boolean;
-  label?: string;
-  helperText?: string;
+  label?: Pick<LabelProps, 'label' | 'action' | 'optional'>;
+  helperText?: Pick<HelperTextProps, 'text' | 'intent' | 'hasBeforeIcon'>;
 } & Omit<
   InputHTMLAttributes<HTMLInputElement>,
   'checked' | 'disabled' | 'color' | 'type'

diff --git a/src/components/TagInput/TagInput.stories.tsx b/src/components/TagInput/TagInput.stories.tsx
@@ -11,8 +11,8 @@ const meta = {
   component: TagInput,
   tags: ['autodocs'],
   args: {
-    helperText: 'Helper text',
-    label: 'label',
+    helperText: { text: 'Helper text' },
+    label: { label: 'label' },
     isValidationError: false,
     children: ['Tag 1', 'Tag 2'].map((tagLabel) => (
       <Tag label="elo" key={tagLabel} />
@@ -46,8 +46,8 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    helperText: 'Helper text',
-    label: 'label',
+    helperText: { text: 'Helper text' },
+    label: { label: 'label' },
     isValidationError: false,
     children: ['Tag1', 'Tag2'].map((tagLabel) => (
       <Tag label={tagLabel} key={tagLabel} onCloseClick={() => null} />
@@ -57,8 +57,8 @@ export const Default: Story = {
 
 export const ValidationErrorNo: Story = {
   args: {
-    helperText: 'Helper text',
-    label: 'label',
+    helperText: { text: 'Helper text' },
+    label: { label: 'label' },
     isValidationError: false,
     children: ['Tag1', 'Tag2'].map((tagLabel) => (
       <Tag label={tagLabel} key={tagLabel} onCloseClick={() => null} />
@@ -68,8 +68,8 @@ export const ValidationErrorNo: Story = {
 
 export const ValidationErrorYes: Story = {
   args: {
-    helperText: 'Helper text',
-    label: 'label',
+    helperText: { text: 'Helper text' },
+    label: { label: 'label' },
     isValidationError: true,
     children: ['Tag1', 'Tag2'].map((tagLabel) => (
       <Tag label={tagLabel} key={tagLabel} onCloseClick={() => null} />

diff --git a/src/components/TagInput/TagInput.tsx b/src/components/TagInput/TagInput.tsx
@@ -66,7 +66,7 @@ export const TagInput = forwardRef<
         data-state={state}
         {...containerProps}
       >
-        {label && <Label label={label} />}
+        {label && <Label {...label} />}
 
         <tet.div
           data-testid="tag-input-input-container"
@@ -86,7 +86,7 @@ export const TagInput = forwardRef<
         </tet.div>
         {helperText && (
           <HelperText
-            text={helperText}
+            {...helperText}
             intent={shouldRenderAlertIcon ? 'alert' : 'none'}
             hasBeforeIcon={shouldRenderAlertIcon}
           />

diff --git a/src/docs-components/TagInputDocs.tsx b/src/docs-components/TagInputDocs.tsx
@@ -16,14 +16,17 @@ export const TagInputDocs = () => {
     'Tag2',
   ]);
 
+  const label = { label: 'Label' };
+  const helperText = { text: 'Helper text' };
+
   return (
     <>
       <tet.section px="$dimension-1000" key="noValidationError">
         <SectionHeader variant="H1" as="h2" py="$dimension-400">
           Validation Error: No
         </SectionHeader>
 
-        <TagInput label="Label" helperText="Helper text">
+        <TagInput label={label} helperText={helperText}>
           {noValidationErrorTags.map((tagLabel) => (
             <Tag
               label={tagLabel}
@@ -47,7 +50,7 @@ export const TagInputDocs = () => {
         <SectionHeader variant="H1" as="h2" py="$dimension-400">
           Validation Error: Yes
         </SectionHeader>
-        <TagInput isValidationError label="Label" helperText="Helper text">
+        <TagInput isValidationError label={label} helperText={helperText}>
           {validationErrorTags.map((tagLabel) => (
             <Tag
               label={tagLabel}