@indico-data/design-system 2.7.0 → 2.9.0

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/forms/toggle/Toggle.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface ToggleProps {
+    ref?: React.LegacyRef<HTMLInputElement>;
+    id: string;
+    label?: string;
+    name: string;
+    value?: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    isDisabled?: boolean;
+    isChecked?: boolean;
+}
+export declare const Toggle: ({ ref, id, label, name, value, onChange, isDisabled, isChecked, ...rest }: ToggleProps) => import("react/jsx-runtime").JSX.Element;

package/lib/src/components/forms/toggle/Toggle.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Toggle } from './Toggle';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof Toggle>;
+export declare const Default: Story;

package/lib/src/components/forms/toggle/__tests__/Toggle.test.d.ts

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

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

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

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

@@ -5,3 +5,4 @@ export { Table } from './table';
 export { Input } from './forms/input';
 export { Radio } from './forms/radio';
 export { Checkbox } from './forms/checkbox';
+export { Toggle } from './forms/toggle';

package/lib/src/index.d.ts

@@ -10,3 +10,4 @@ export { Table } from './components/table';
 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';

package/package.json

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

package/src/components/forms/checkbox/Checkbox.mdx

@@ -8,10 +8,15 @@ This component may be used on it's on or as part of a group. The source code is
 
 <Canvas of={Checkbox.Default} source={{
     code: `
+const [isChecked, setIsChecked] = useState<boolean>(false);
+const handleChange = () => {
+  setIsChecked(!isChecked);
+};
+
 <div>
   <h2 className="mb-2">Checkbox Buttons</h2>
   <Checkbox
-    onChange={onChange}
+    onChange={handleChange}
     id={id}
     label={label}
     name={name}

package/src/components/forms/checkbox/Checkbox.stories.tsx

@@ -78,7 +78,7 @@ const meta: Meta = {
       defaultValue: { summary: false },
     },
     isChecked: {
-      control: 'boolean',
+      control: false,
       description: 'Toggles the checked state of the checkbox field when true',
       table: {
         category: 'Props',
@@ -111,18 +111,24 @@ export const Default: Story = {
     isChecked: false,
   },
   render: (args) => {
+    const [isChecked, setIsChecked] = useState<boolean>(false);
+
+    const handleChange = () => {
+      setIsChecked(!isChecked);
+    };
+
     return (
       <div>
-        <h2 className="mb-2">Checkbox Buttons</h2>
+        <h2 className="mb-2">Checkbox Button</h2>
         <Checkbox
           key={args.id}
-          onChange={args.onChange}
+          onChange={handleChange}
           id={args.id}
           label={args.label}
           name={args.name}
           value={args.value}
           isDisabled={args.isDisabled}
-          isChecked={args.isChecked}
+          isChecked={isChecked}
         />
       </div>
     );

package/src/components/forms/checkbox/Checkbox.tsx

@@ -28,7 +28,6 @@ export const Checkbox = ({
       <div className="checkbox-wrapper">
         <input
           data-testid={`form-checkbox-input-${name}`}
-          {...rest}
           className="checkbox-input"
           type="checkbox"
           id={id}
@@ -41,6 +40,7 @@ export const Checkbox = ({
           tabIndex={0}
           aria-describedby={id}
           aria-label={label}
+          {...rest}
         />
         <label
           htmlFor={id}

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);
@@ -30,21 +30,21 @@
   .checkbox-input-label {
     cursor: pointer;
   }
-  [type='checkbox']:checked,
-  [type='checkbox']:not(:checked) {
+  .checkbox-input:checked,
+  .checkbox-input:not(:checked) {
     position: absolute;
     left: -9999px;
   }
-  [type='checkbox']:checked + label,
-  [type='checkbox']:not(:checked) + label {
+  .checkbox-input:checked + label,
+  .checkbox-input:not(:checked) + label {
     position: relative;
     padding-left: var(--pf-padding-7);
     cursor: pointer;
     line-height: 20px;
     display: inline-block;
   }
-  [type='checkbox']:checked + label:before,
-  [type='checkbox']:not(:checked) + label:before {
+  .checkbox-input:checked + label:before,
+  .checkbox-input:not(:checked) + label:before {
     content: '';
     position: absolute;
     left: 0;
@@ -55,8 +55,8 @@
     border-radius: var(--pf-rounded);
     background: var(--pf-checkbox-background-color);
   }
-  [type='checkbox']:checked + label:after,
-  [type='checkbox']:not(:checked) + label:after {
+  .checkbox-input:checked + label:after,
+  .checkbox-input:not(:checked) + label:after {
     content: '';
     width: 12px;
     height: 12px;
@@ -68,31 +68,31 @@
     -webkit-transition: all 0.2s ease;
     transition: all 0.2s ease;
   }
-  [type='checkbox']:not(:checked) + label:after {
+  .checkbox-input:not(:checked) + label:after {
     opacity: 0;
     -webkit-transform: scale(0);
     transform: scale(0);
   }
-  [type='checkbox']:checked + label:after {
+  .checkbox-input:checked + label:after {
     opacity: 1;
     -webkit-transform: scale(1);
     transform: scale(1);
   }
-  [type='checkbox']:disabled,
-  [type='checkbox']:disabled + label {
+  .checkbox-input:disabled,
+  .checkbox-input:disabled + label {
     cursor: not-allowed;
   }
 
-  [type='checkbox']:disabled + label {
+  .checkbox-input:disabled + label {
     color: var(--pf-checkbox-disabled-color);
     opacity: 0.5;
   }
 
-  [type='checkbox']:disabled + label:before {
+  .checkbox-input:disabled + label:before {
     border-color: var(--pf-checkbox-disabled-color);
   }
 
-  [type='checkbox']:disabled + label:after {
+  .checkbox-input:disabled + label:after {
     background: var(--pf-checkbox-disabled-color);
   }
 }

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 = {
@@ -174,15 +174,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 +193,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 +213,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 +233,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 +253,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 +273,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 +293,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/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);

package/src/components/forms/textarea/Textarea.mdx

@@ -0,0 +1,19 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as Textarea from './Textarea.stories';
+
+<Meta title="Forms/Textarea" name="Textarea" />
+
+# Textarea
+
+The Textarea 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={Textarea.Default}
+  source={{
+    code: `
+    <Textarea name="first_name" isRequired helpText="This Is Help Text" placeholder="This is a placeholder" value="''" onChange={handleChange} label="Label Name"  />
+    `,
+  }}
+/>
+
+<Controls of={Textarea.Default} />