@indico-data/design-system 2.60.7 → 2.60.9

package/package.json

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

package/src/components/forms/date/inputDateRangePicker/InputDateRangePicker.stories.tsx

@@ -159,6 +159,26 @@ const meta: Meta<typeof InputDateRangePicker> = {
         },
       },
     },
+    fromLabel: {
+      control: 'text',
+      description: 'The label for the `from` input.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    toLabel: {
+      control: 'text',
+      description: 'The label for the `to` input.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
     month: {
       control: 'date',
       description: 'The currently displayed month.',
@@ -190,6 +210,9 @@ export const RangeInput: Story = {
     toErrorMessage: '',
     fromErrorMessage: '',
     ariaLabel: 'Date Picker',
+    fromLabel: 'From Date',
+    toLabel: 'To Date',
+    gutterWidth: 2,
     isOpen: false,
     selected: { from: new Date(), to: new Date(new Date().getTime() + 5 * 24 * 60 * 60 * 1000) },
   },

package/src/components/forms/date/inputDateRangePicker/InputDateRangePicker.tsx

@@ -25,6 +25,9 @@ interface InputDateRangePickerProps {
   toErrorMessage?: string | undefined;
   fromErrorMessage?: string | undefined;
   'data-testid'?: string;
+  gutterWidth?: number;
+  fromLabel?: string;
+  toLabel?: string;
 }
 
 export function InputDateRangePicker(props: InputDateRangePickerProps) {
@@ -44,6 +47,9 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
     inputIconName,
     toErrorMessage,
     fromErrorMessage,
+    gutterWidth,
+    fromLabel,
+    toLabel,
     ...rest
   } = props;
 
@@ -107,7 +113,7 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
 
   return (
     <FloatUI isOpen={isOpen} ariaLabel={ariaLabel}>
-      <Row>
+      <Row gutterWidth={gutterWidth}>
         <Col>
           <Input
             id={`${inputId}-from`}
@@ -117,7 +123,7 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
             iconName={inputIconName}
             onChange={(e) => handleInputChange(e, 'from')}
             errorMessage={fromErrorMessage}
-            label={'From Date'}
+            label={fromLabel}
             name={'From Date'}
             data-testid="date-picker-from"
           />
@@ -131,7 +137,7 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
             iconName={inputIconName}
             onChange={(e) => handleInputChange(e, 'to')}
             errorMessage={toErrorMessage}
-            label={'To Date'}
+            label={toLabel}
             name={'To Date'}
             data-testid="date-picker-to"
           />

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

@@ -1,11 +1,45 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Select, SelectProps } from './Select';
 import { SelectOption } from './types';
+import { LabelProps } from '../subcomponents/Label';
 
-const meta: Meta<SelectProps<SelectOption>> = {
+const meta: Meta<SelectProps<SelectOption> & LabelProps> = {
   title: 'Forms/Select',
   component: Select,
   argTypes: {
+    name: {
+      control: 'text',
+      description: 'The name of the select component',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    hasHiddenLabel: {
+      control: 'boolean',
+      description: 'Toggles the visibility of the label',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+      defaultValue: { summary: 'false' },
+    },
+    label: {
+      control: 'text',
+      description: 'The label for the select component',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
     options: {
       control: 'object',
       description: 'Options for the select component',
@@ -126,6 +160,9 @@ export const Default: Story = {
     isSearchable: true,
     isDisabled: false,
     isLoading: false,
+    hasHiddenLabel: false,
+    label: 'Select an option...',
+    name: 'select',
   },
   decorators: [
     (Story) => (

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

@@ -2,9 +2,13 @@ import React from 'react';
 import classNames from 'classnames';
 import ReactSelect, { Props as ReactSelectProps, components, OptionProps } from 'react-select';
 import { SelectOption } from './types';
+import { withLabel } from '../subcomponents/Label';
 
 export interface SelectProps<OptionType extends SelectOption> extends ReactSelectProps<OptionType> {
   options: OptionType[];
+  label?: string;
+  name?: string;
+  hasHiddenLabel?: boolean;
 }
 
 const OptionComponent = <OptionType extends SelectOption>({
@@ -20,10 +24,13 @@ const OptionComponent = <OptionType extends SelectOption>({
   );
 };
 
-export const Select = <OptionType extends SelectOption>({
+const Select = <OptionType extends SelectOption>({
   classNamePrefix = 'select',
   className,
   components: customComponents,
+  label,
+  hasHiddenLabel,
+  name,
   ...props
 }: SelectProps<OptionType>) => {
   const defaultComponents = {
@@ -41,3 +48,7 @@ export const Select = <OptionType extends SelectOption>({
     />
   );
 };
+
+const LabeledSelect = withLabel(Select);
+
+export { LabeledSelect as Select };

package/src/components/forms/subcomponents/Label.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 
 export interface LabelProps {
-  label: string;
+  label?: string;
   name: string;
   isRequired?: boolean;
   hasHiddenLabel?: boolean;

package/src/index.ts

@@ -19,6 +19,7 @@ export { DatePicker } from './components/forms/date/datePicker/DatePicker';
 export { TimePicker } from './components/forms/timePicker';
 export { IconTriggerDatePicker } from './components/forms/date/iconTriggerDatePicker';
 export { SingleInputDatePicker } from './components/forms/date/inputDatePicker';
+export { InputDateRangePicker } from './components/forms/date/inputDateRangePicker';
 export { Form } from './components/forms/form';
 export { Skeleton } from './components/skeleton';
 export { Card } from './components/card';
@@ -46,3 +47,5 @@ export type {
   Row as TanstackTableRowType,
   Table as TanstackTableType,
 } from '@tanstack/react-table';
+export type { DateRange } from 'react-day-picker';
+export type { SelectOption } from './components/forms/select/types';