@indico-data/design-system 2.8.0 → 2.10.0

package/lib/src/components/forms/input/Input.d.ts

@@ -14,5 +14,6 @@ export interface InputProps {
     hasHiddenLabel?: boolean;
     iconName?: IconName;
     isClearable?: boolean;
+    className?: string;
 }
-export declare const Input: ({ ref, label, name, placeholder, value, onChange, isRequired, isDisabled, errorList, helpText, iconName, hasHiddenLabel, isClearable, ...rest }: InputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Input: ({ ref, label, name, placeholder, value, onChange, isRequired, isDisabled, errorList, helpText, iconName, hasHiddenLabel, isClearable, className, ...rest }: InputProps) => import("react/jsx-runtime").JSX.Element;

package/lib/src/components/forms/passwordInput/PasswordInput.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface PasswordInputProps {
+    ref?: React.LegacyRef<HTMLInputElement>;
+    label: string;
+    name: string;
+    placeholder: string;
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    errorList?: string[];
+    helpText?: string;
+    hasHiddenLabel?: boolean;
+    hasShowPassword?: boolean;
+}
+export declare const PasswordInput: ({ label, name, placeholder, value, onChange, isRequired, isDisabled, errorList, helpText, hasHiddenLabel, hasShowPassword, ...rest }: PasswordInputProps) => import("react/jsx-runtime").JSX.Element;

package/lib/src/components/forms/passwordInput/PasswordInput.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { PasswordInput } from './PasswordInput';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof PasswordInput>;
+export declare const Default: Story;
+export declare const Errors: Story;
+export declare const HiddenLabel: Story;
+export declare const HelpText: Story;
+export declare const Required: Story;
+export declare const NoTogglePasswordVisibility: Story;

package/lib/src/components/forms/passwordInput/__tests__/PasswordInput.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/components/forms/passwordInput/index.d.ts

@@ -0,0 +1 @@
+export { PasswordInput } from './PasswordInput';

package/lib/src/components/forms/textarea/Textarea.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface TextareaProps {
+    ref?: React.LegacyRef<HTMLTextAreaElement>;
+    label: string;
+    name: string;
+    placeholder: string;
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    errorList?: string[];
+    helpText?: string;
+    hasHiddenLabel?: boolean;
+    rows?: number;
+    cols?: number;
+    readonly?: boolean;
+    wrap?: 'hard' | 'soft';
+    form?: string;
+    maxLength?: number;
+    autofocus?: boolean;
+}
+export declare const Textarea: ({ ref, label, name, placeholder, value, onChange, isRequired, isDisabled, errorList, helpText, hasHiddenLabel, rows, cols, readonly, wrap, form, maxLength, autofocus, ...rest }: TextareaProps) => import("react/jsx-runtime").JSX.Element;

package/lib/src/components/forms/textarea/Textarea.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Textarea } from './Textarea';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof Textarea>;
+export declare const Default: Story;
+export declare const Errors: Story;
+export declare const HiddenLabel: Story;
+export declare const HelpText: Story;
+export declare const Disabled: Story;
+export declare const Readonly: Story;

package/lib/src/components/forms/textarea/__tests__/Textarea.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/components/forms/textarea/index.d.ts

@@ -0,0 +1 @@
+export { Textarea } from './Textarea';

package/lib/src/components/index.d.ts

@@ -6,3 +6,5 @@ export { Input } from './forms/input';
 export { Radio } from './forms/radio';
 export { Checkbox } from './forms/checkbox';
 export { Toggle } from './forms/toggle';
+export { Textarea } from './forms/textarea';
+export { PasswordInput } from './forms/passwordInput';

package/lib/src/index.d.ts

@@ -11,3 +11,5 @@ export { Input } from './components/forms/input';
 export { Radio as RadioInput } from './components/forms/radio';
 export { Checkbox } from './components/forms/checkbox';
 export { Toggle as ToggleInput } from './components/forms/toggle';
+export { Textarea } from './components/forms/textarea';
+export { PasswordInput } from './components/forms/passwordInput';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.8.0",
+  "version": "2.10.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/forms/checkbox/styles/Checkbox.scss

@@ -10,7 +10,7 @@
 
 // Dark Theme Specific Variables
 :root [data-theme='dark'] {
-  --pf-checkbox-background-color: transparent;
+  --pf-checkbox-background-color: var(--pf-primary-color-200);
   --pf-checkbox-check-color: var(--pf-white-color);
   --pf-checkbox-border-color: var(--pf-white-color);
   --pf-checkbox-disabled-color: var(--pf-gray-color-300);

package/src/components/forms/input/Input.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Input, InputProps } from './Input';
-import { useState } from 'react';
+import { SetStateAction, useEffect, useState } from 'react';
 import { iconNames } from 'build/generated/iconTypes';
 
 const meta: Meta = {
@@ -27,7 +27,6 @@ const meta: Meta = {
           summary: 'string',
         },
       },
-      defaultValue: { summary: '' },
     },
     name: {
       control: 'text',
@@ -38,7 +37,6 @@ const meta: Meta = {
           summary: 'string',
         },
       },
-      defaultValue: { summary: '' },
     },
     placeholder: {
       control: 'text',
@@ -49,7 +47,6 @@ const meta: Meta = {
           summary: 'string',
         },
       },
-      defaultValue: { summary: '' },
     },
     value: {
       control: 'text',
@@ -60,7 +57,6 @@ const meta: Meta = {
           summary: 'string',
         },
       },
-      defaultValue: { summary: '' },
     },
     isRequired: {
       control: 'boolean',
@@ -104,7 +100,6 @@ const meta: Meta = {
           summary: 'string',
         },
       },
-      defaultValue: { summary: '' },
     },
     hasHiddenLabel: {
       control: 'boolean',
@@ -174,15 +169,15 @@ export const Default: Story = {
   },
   render: (args) => {
     const [value, setValue] = useState('');
-    return (
-      <Input
-        {...args}
-        value={value}
-        onChange={(e) => {
-          setValue(e.target.value);
-        }}
-      />
-    );
+
+    useEffect(() => {
+      setValue(args.value);
+    }, [args.value]);
+
+    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+      setValue(e.target.value);
+    };
+    return <Input {...args} value={value} onChange={handleChange} />;
   },
 };
 
@@ -193,15 +188,16 @@ export const Errors: Story = {
   },
   render: (args) => {
     const [value, setValue] = useState('');
-    return (
-      <Input
-        {...args}
-        value={value}
-        onChange={(e) => {
-          setValue(e.target.value);
-        }}
-      />
-    );
+
+    useEffect(() => {
+      setValue(args.value);
+    }, [args.value]);
+
+    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+      setValue(e.target.value);
+    };
+
+    return <Input {...args} value={value} onChange={handleChange} />;
   },
 };
 
@@ -212,15 +208,16 @@ export const HiddenLabel: Story = {
   },
   render: (args) => {
     const [value, setValue] = useState('');
-    return (
-      <Input
-        {...args}
-        value={value}
-        onChange={(e) => {
-          setValue(e.target.value);
-        }}
-      />
-    );
+
+    useEffect(() => {
+      setValue(args.value);
+    }, [args.value]);
+
+    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+      setValue(e.target.value);
+    };
+
+    return <Input {...args} value={value} onChange={handleChange} />;
   },
 };
 
@@ -231,15 +228,16 @@ export const HelpText: Story = {
   },
   render: (args) => {
     const [value, setValue] = useState('');
-    return (
-      <Input
-        {...args}
-        value={value}
-        onChange={(e) => {
-          setValue(e.target.value);
-        }}
-      />
-    );
+
+    useEffect(() => {
+      setValue(args.value);
+    }, [args.value]);
+
+    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+      setValue(e.target.value);
+    };
+
+    return <Input {...args} value={value} onChange={handleChange} />;
   },
 };
 
@@ -250,15 +248,16 @@ export const Clearable: Story = {
   },
   render: (args) => {
     const [value, setValue] = useState('');
-    return (
-      <Input
-        {...args}
-        value={value}
-        onChange={(e) => {
-          setValue(e.target.value);
-        }}
-      />
-    );
+
+    useEffect(() => {
+      setValue(args.value);
+    }, [args.value]);
+
+    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+      setValue(e.target.value);
+    };
+
+    return <Input {...args} value={value} onChange={handleChange} />;
   },
 };
 
@@ -269,15 +268,16 @@ export const Icon: Story = {
   },
   render: (args) => {
     const [value, setValue] = useState('');
-    return (
-      <Input
-        {...args}
-        value={value}
-        onChange={(e) => {
-          setValue(e.target.value);
-        }}
-      />
-    );
+
+    useEffect(() => {
+      setValue(args.value);
+    }, [args.value]);
+
+    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+      setValue(e.target.value);
+    };
+
+    return <Input {...args} value={value} onChange={handleChange} />;
   },
 };
 
@@ -288,14 +288,15 @@ export const Required: Story = {
   },
   render: (args) => {
     const [value, setValue] = useState('');
-    return (
-      <Input
-        {...args}
-        value={value}
-        onChange={(e) => {
-          setValue(e.target.value);
-        }}
-      />
-    );
+
+    useEffect(() => {
+      setValue(args.value);
+    }, [args.value]);
+
+    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+      setValue(e.target.value);
+    };
+
+    return <Input {...args} value={value} onChange={handleChange} />;
   },
 };

package/src/components/forms/input/Input.tsx

@@ -18,6 +18,7 @@ export interface InputProps {
   hasHiddenLabel?: boolean;
   iconName?: IconName;
   isClearable?: boolean;
+  className?: string;
 }
 
 export const Input = ({
@@ -34,6 +35,7 @@ export const Input = ({
   iconName,
   hasHiddenLabel,
   isClearable,
+  className = '',
   ...rest
 }: InputProps) => {
   const hasErrors = errorList && errorList.length > 0;
@@ -58,7 +60,7 @@ export const Input = ({
           placeholder={placeholder}
           value={value}
           onChange={onChange}
-          className={`input ${hasErrors ? 'error' : ''} ${iconName ? 'input--has-icon' : ''}`}
+          className={`input ${hasErrors ? 'error' : ''} ${iconName ? 'input--has-icon' : ''} ${className}`}
           aria-invalid={hasErrors}
           aria-describedby={hasErrors || helpText ? `${name}-helper` : undefined}
           aria-required={isRequired}

package/src/components/forms/input/styles/Input.scss

@@ -8,6 +8,10 @@
   --pf-input-text-color: var(--pf-gray-color);
   --pf-input-placeholder-text-color: var(--pf-gray-color-300);
   --pf-input-help-text-color: var(--pf-gray-color-400);
+  --pf-input-disabled-background-color: var(--pf-gray-color-100);
+  --pf-input-border-color: var(--pf-gray-color);
+  --pf-input-disabled-color: var(--pf-gray-color-400);
+  --pf-input-border-color: var(--pf-gray-color);
 
   // input Radius
   --pf-input-rounded: var(--pf-rounded);
@@ -20,6 +24,9 @@
   --pf-input-text-color: var(--pf-gray-color-100);
   --pf-input-placeholder-text-color: var(--pf-gray-color);
   --pf-input-help-text-color: var(--pf-gray-color-200);
+  --pf-input-disabled-background-color: var(--pf-primary-color-200);
+  --pf-input-disabled-border-color: var(--pf-gray-color-300);
+  --pf-input-disabled-color: var(--pf-gray-color-400);
 }
 
 .input {
@@ -56,9 +63,9 @@
   }
 
   &:disabled {
-    background-color: var(--pf-gray-color-100);
-    border-color: var(--pf-gray-color-300);
-    color: var(--pf-gray-color-400);
+    background-color: var(--pf-input-disabled-background-color);
+    border-color: var(--pf-input-disabled-border-color);
+    color: var(--pf-input-disabled-color);
   }
   &--has-icon {
     padding-left: var(--pf-padding-7);
@@ -93,6 +100,7 @@
       top: var(--pf-margin-3);
       right: var(--pf-margin-2);
       color: var(--pf-input-text-color);
+      cursor: pointer;
     }
   }
   .is-visually-hidden {

package/src/components/forms/passwordInput/PasswordInput.mdx

@@ -0,0 +1,28 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as PasswordInput from './PasswordInput.stories';
+
+<Meta title="Forms/PasswordInput" name="PasswordInput" />
+
+# Password Input
+
+The password input component is the building block of any form. Below you will find the accepted properties for this component. It is encouraged to build forms utilizing [React Hook Form](https://react-hook-form.com/) library in your application. This will facilitate form state management and enforce best practices. (***Our components are compatible with but do not provide the plugin***)
+
+<Canvas
+  of={PasswordInput.Default}
+  source={{
+    code: `
+<PasswordInput 
+  name="first_name" 
+  isRequired
+  hasShowPassword
+  placeholder="Placeholder Text"
+  value=''
+  onChange={() => {}}
+  helpText="This Is Help Text" 
+  label="Label Name" 
+/>
+    `,
+  }}
+/>
+
+<Controls of={PasswordInput.Default} />