@indico-data/design-system 2.12.0 → 2.13.0

package/package.json

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

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

@@ -60,7 +60,7 @@ const meta: Meta = {
     },
     isRequired: {
       control: 'boolean',
-      description: 'Toggles the required astherisc on the label',
+      description: 'Toggles the required asterisk on the label',
       table: {
         category: 'Props',
         type: {
@@ -80,16 +80,16 @@ const meta: Meta = {
       },
       defaultValue: { summary: 'false' },
     },
-    errorList: {
+    errorMessage: {
       control: false,
-      description: 'An array of error messages',
+      description: 'Error message',
       table: {
         category: 'Props',
         type: {
-          summary: 'string[]',
+          summary: 'string',
         },
       },
-      defaultValue: { summary: '[]' },
+      defaultValue: { summary: '' },
     },
     helpText: {
       control: 'text',
@@ -164,14 +164,14 @@ export const Default: Story = {
     placeholder: 'Please enter a value',
     hasHiddenLabel: false,
     isDisabled: false,
-    errorList: [],
+    errorMessage: '',
     value: '',
   },
   render: (args) => {
     const [value, setValue] = useState('');
 
     useEffect(() => {
-      setValue(args.value);
+      setValue(args.value || '');
     }, [args.value]);
 
     const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
@@ -184,13 +184,13 @@ export const Default: Story = {
 export const Errors: Story = {
   args: {
     ...defaultArgs,
-    errorList: ['You require a username value.'],
+    errorMessage: 'You require a username value.',
   },
   render: (args) => {
     const [value, setValue] = useState('');
 
     useEffect(() => {
-      setValue(args.value);
+      setValue(args.value || '');
     }, [args.value]);
 
     const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
@@ -210,7 +210,7 @@ export const HiddenLabel: Story = {
     const [value, setValue] = useState('');
 
     useEffect(() => {
-      setValue(args.value);
+      setValue(args.value || '');
     }, [args.value]);
 
     const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
@@ -230,7 +230,7 @@ export const HelpText: Story = {
     const [value, setValue] = useState('');
 
     useEffect(() => {
-      setValue(args.value);
+      setValue(args.value || '');
     }, [args.value]);
 
     const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
@@ -250,7 +250,7 @@ export const Clearable: Story = {
     const [value, setValue] = useState('');
 
     useEffect(() => {
-      setValue(args.value);
+      setValue(args.value || '');
     }, [args.value]);
 
     const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
@@ -270,7 +270,7 @@ export const Icon: Story = {
     const [value, setValue] = useState('');
 
     useEffect(() => {
-      setValue(args.value);
+      setValue(args.value || '');
     }, [args.value]);
 
     const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
@@ -290,7 +290,7 @@ export const Required: Story = {
     const [value, setValue] = useState('');
 
     useEffect(() => {
-      setValue(args.value);
+      setValue(args.value || '');
     }, [args.value]);
 
     const handleChange = (e: { target: { value: SetStateAction<string> } }) => {

package/src/components/forms/select/Select.mdx

@@ -0,0 +1,12 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as Select from './Select.stories';
+
+<Meta title="Forms/Select" name="Select" />
+
+# Select
+
+The select component is a flexible dropdown component that allows users to choose from a list of options. It supports various configurations, such as searchable, clearable, and custom components. It is recommended to use this component with [React Hook Form](https://react-hook-form.com/) for better form state management and best practices. The `Select` component is built using `react-select`, so refer to its [documentation](https://react-select.com/props) for full details on available props.
+
+<Canvas of={Select.Default} />
+
+<Controls of={Select.Default} />

package/src/components/forms/select/Select.stories.tsx

@@ -83,6 +83,18 @@ const meta: Meta<SelectProps<SelectOption>> = {
       },
       defaultValue: { summary: '' },
     },
+    classNamePrefix: {
+      control: 'text',
+      description:
+        'The prefix to use for the CSS class names. Changing this will result in losing all default styles',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: 'select' },
+    },
     onChange: {
       control: false,
       description: 'Event handler for when the selected value changes',
@@ -115,4 +127,11 @@ export const Default: Story = {
     isDisabled: false,
     isLoading: false,
   },
+  decorators: [
+    (Story) => (
+      <div style={{ height: 175 }}>
+        <Story />
+      </div>
+    ),
+  ],
 };