#339 Apply missing tokens to Input and TagInput components

packages/react-components/src/components/Input/Input.module.scss

@@ -1,5 +1,5 @@
 .input {
-  border: 1px solid #bdc7d1;
+  background: var(--surface-basic-default);
   border: 1px solid var(--border-default);
   border-radius: 4px;
   box-sizing: border-box;
@@ -8,6 +8,10 @@
   line-height: 22px;
   outline: none;
 
+  &::placeholder {
+    color: var(--content-disabled);
+  }
+
   &:focus {
     border-color: var(--color-action-default);
   }

packages/react-components/src/components/Input/Input.stories.tsx

@@ -1,24 +1,51 @@
 import * as React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { ComponentMeta, Story } from '@storybook/react';
 
-import { Input as InputComponent, InputProps } from './Input';
+import { StoryDescriptor } from '../../stories/components/StoryDescriptor';
+
+import { Input, InputProps } from './Input';
+
+const placeholderText = 'Placeholder text';
 
 export default {
   title: 'Forms/Input',
-  component: InputComponent,
-} as ComponentMeta<typeof InputComponent>;
+  component: Input,
+} as ComponentMeta<typeof Input>;
 
-export const Input = ({ ...args }): React.ReactElement => (
-  <InputComponent {...args} />
+export const Default: Story<InputProps> = (args: InputProps) => (
+  <Input {...args} />
 );
 
-Input.args = {
+Default.storyName = 'Input';
+Default.args = {
   size: 'medium',
   placeholder: 'Placeholder text',
-  error: false,
-  disabled: false,
-} as InputProps;
+};
 
-export const WithIcon = () => <div>TODO</div>;
-export const WithArrow = () => <div>TODO</div>;
-export const WithIconAndArrow = () => <div>TODO</div>;
+export const Sizes = (): JSX.Element => (
+  <>
+    <StoryDescriptor title="XSmall">
+      <Input size="xsmall" placeholder={placeholderText} />
+    </StoryDescriptor>
+    <StoryDescriptor title="Small">
+      <Input size="small" placeholder={placeholderText} />
+    </StoryDescriptor>
+    <StoryDescriptor title="Medium">
+      <Input size="medium" placeholder={placeholderText} />
+    </StoryDescriptor>
+    <StoryDescriptor title="Large">
+      <Input size="large" placeholder={placeholderText} />
+    </StoryDescriptor>
+  </>
+);
+
+export const States = (): JSX.Element => (
+  <>
+    <StoryDescriptor title="With error">
+      <Input error={true} placeholder={placeholderText} />
+    </StoryDescriptor>
+    <StoryDescriptor title="Disabled">
+      <Input disabled={true} placeholder={placeholderText} />
+    </StoryDescriptor>
+  </>
+);

packages/react-components/src/components/Input/Input.tsx

@@ -6,8 +6,9 @@ import styles from './Input.module.scss';
 type InputSize = 'xsmall' | 'small' | 'medium' | 'large';
 
 export interface InputProps extends React.HTMLAttributes<HTMLInputElement> {
-  size?: InputSize;
-  error?: boolean;
+  size?: InputSize | undefined;
+  error?: boolean | undefined;
+  disabled?: boolean | undefined;
 }
 
 const baseClass = 'input';

packages/react-components/src/components/TagInput/TagInput.module.scss

@@ -1,5 +1,6 @@
 .tag-input {
   align-items: center;
+  background: var(--surface-basic-default);
   background-clip: padding-box;
   border: 1px solid var(--border-default);
   border-radius: 4px;
@@ -34,6 +35,8 @@
   }
 
   &:disabled {
+    background-color: var(--surface-basic-disabled);
+    border: 1px solid var(--border-disabled);
     color: var(--content-disabled);
     cursor: not-allowed;
   }

packages/react-components/src/components/TagInput/TagInput.stories.tsx

@@ -1,49 +1,68 @@
 import * as React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { ComponentMeta, Story } from '@storybook/react';
+
+import noop from '../../utils/noop';
+import { StoryDescriptor } from '../../stories/components/StoryDescriptor';
 
 import {
-  TagInput as TagInputComponent,
+  TagInput,
   TagInputProps,
-  EmailTagInput as EmailTagInputComponent,
+  EmailTagInput,
   EmailTagInputProps,
 } from './index';
 
+const placeholderText = 'Placeholder text';
+
 export default {
   title: 'Forms/Tag Input',
-  component: TagInputComponent,
+  component: TagInput,
   argTypes: {
     tags: {
       control: {
         disable: true,
       },
     },
   },
-} as ComponentMeta<typeof TagInputComponent>;
+} as ComponentMeta<typeof TagInput>;
 
-export const TagInput = ({ ...args }: TagInputProps): React.ReactElement => {
+export const DefaultTagInput: Story<TagInputProps> = ({
+  ...args
+}: TagInputProps) => {
   const [tags, setTags] = React.useState(['tag1', 'tag2']);
   return (
     <div>
-      <TagInputComponent {...args} tags={tags} onChange={setTags} />
+      <TagInput {...args} tags={tags} onChange={setTags} />
     </div>
   );
 };
 
-TagInput.args = {
-  placeholder: 'Tag input placeholder',
-} as TagInputProps;
+DefaultTagInput.storyName = 'TagInput';
+DefaultTagInput.args = {
+  placeholder: placeholderText,
+};
 
-export const EmailTagInput = ({
+export const DefaultEmailTagInput: Story<EmailTagInputProps> = ({
   ...args
-}: EmailTagInputProps): React.ReactElement => {
+}: EmailTagInputProps) => {
   const [tags, setTags] = React.useState(['[email protected]', '[email protected]']);
   return (
     <div>
-      <EmailTagInputComponent {...args} tags={tags} onChange={setTags} />
+      <EmailTagInput {...args} tags={tags} onChange={setTags} />
     </div>
   );
 };
-
-EmailTagInput.args = {
+DefaultEmailTagInput.storyName = 'EmailTagInput';
+DefaultEmailTagInput.args = {
   placeholder: '[email protected]',
-} as TagInputProps;
+};
+
+export const Sizes = (): JSX.Element => (
+  <>
+    <StoryDescriptor title="Medium">
+      <TagInput size="medium" onChange={noop} placeholder={placeholderText} />
+    </StoryDescriptor>
+    <StoryDescriptor title="Large">
+      <TagInput size="large" onChange={noop} placeholder={placeholderText} />
+    </StoryDescriptor>
+  </>
+);