@indico-data/design-system 2.33.0 → 2.34.0

package/src/components/forms/numberInput/__tests__/NumberInput.test.tsx

@@ -0,0 +1,94 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { NumberInput, NumberInputProps } from '../NumberInput';
+
+const handleOnChange = jest.fn();
+
+const defaultProps: NumberInputProps = {
+  isRequired: true,
+  label: 'Enter a number',
+  helpText: 'In order to submit the form, this field is required.',
+  name: 'number',
+  placeholder: 'Please enter a value',
+  iconName: 'fa-calculator',
+  isClearable: true,
+  onChange: handleOnChange,
+};
+
+describe('NumberInput', () => {
+  beforeEach(jest.clearAllMocks);
+
+  it('renders the number input field', () => {
+    render(<NumberInput {...defaultProps} />);
+    expect(screen.getByText('Enter a number')).toBeInTheDocument();
+  });
+
+  it('shows an x clear icon when the number input is clearable', () => {
+    render(<NumberInput {...defaultProps} />);
+    const icon = screen.getByTestId('number-clearable-icon');
+    expect(icon).toBeInTheDocument();
+    expect(icon).toBeVisible();
+  });
+
+  it('does not show an x when the number input is not clearable', () => {
+    render(<NumberInput {...defaultProps} isClearable={false} />);
+    const icon = screen.queryByTestId('number-clearable-icon');
+    expect(icon).not.toBeInTheDocument();
+  });
+
+  it('clicking on the x clears the value', async () => {
+    render(<NumberInput {...defaultProps} value={42} />);
+    const input = screen.getByTestId('form-number-input-number');
+    const icon = screen.getByTestId('number-clearable-icon');
+    expect(input).toHaveValue(42);
+    await userEvent.click(icon);
+    expect(handleOnChange).toHaveBeenCalledWith(expect.objectContaining({ target: { value: '' } }));
+  });
+
+  it('renders an icon on the left when one exists', () => {
+    render(<NumberInput {...defaultProps} />);
+    const icon = screen.getByTestId('number-embedded-icon');
+    expect(icon).toBeInTheDocument();
+    expect(icon).toBeVisible();
+  });
+
+  it('does not render an embedded icon when one does not exist', () => {
+    render(<NumberInput {...defaultProps} iconName={undefined} />);
+    const icon = screen.queryByTestId('number-embedded-icon');
+    expect(icon).not.toBeInTheDocument();
+  });
+
+  it('adds the error class when errors exist', () => {
+    render(
+      <NumberInput {...defaultProps} errorMessage="You require a numeric value." value={42} />,
+    );
+    const input = screen.getByTestId('form-number-input-number');
+    expect(input).toHaveClass('error');
+  });
+
+  it('does not highlight the input when no errors exist', () => {
+    render(<NumberInput {...defaultProps} value={42} />);
+    const input = screen.getByTestId('form-number-input-number');
+    expect(input).not.toHaveClass('error');
+  });
+
+  it('renders help text when help text exists', () => {
+    render(<NumberInput {...defaultProps} value={42} />);
+    const helpText = screen.getByText('In order to submit the form, this field is required.');
+    expect(helpText).toBeInTheDocument();
+    expect(helpText).toBeVisible();
+  });
+
+  it('does not render help text when help text does not exist', () => {
+    render(<NumberInput {...defaultProps} helpText={undefined} value={42} />);
+    const helpText = screen.queryByTestId('number-help-text');
+    expect(helpText).not.toBeInTheDocument();
+  });
+
+  it('emits the value when user types', async () => {
+    render(<NumberInput {...defaultProps} />);
+    const input = screen.getByTestId('form-number-input-number');
+    await userEvent.type(input, '42');
+    expect(handleOnChange).toHaveBeenCalled();
+  });
+});

package/src/components/forms/numberInput/index.ts

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

package/src/components/forms/numberInput/styles/NumberInput.scss

@@ -0,0 +1,108 @@
+// Common Variables
+:root,
+:root [data-theme='light'],
+:root [data-theme='dark'] {
+  // Typography
+  --pf-number-input-background-color: var(--pf-white-color);
+  --pf-number-input-border-color: var(--pf-form-input-border-color);
+  --pf-number-input-text-color: var(--pf-gray-color);
+  --pf-number-input-placeholder-text-color: var(--pf-gray-color-300);
+  --pf-number-input-help-text-color: var(--pf-gray-color-400);
+  --pf-number-input-disabled-background-color: var(--pf-gray-color-100);
+  --pf-number-input-disabled-color: var(--pf-gray-color-400);
+  --pf-number-input-padding: 10px;
+
+  // Input Radius
+  --pf-number-input-rounded: var(--pf-rounded);
+}
+
+// Dark Theme Specific Variables
+:root [data-theme='dark'] {
+  --pf-number-input-background-color: var(--pf-primary-color);
+  --pf-number-input-border-color: var(--pf-form-input-border-color);
+  --pf-number-input-text-color: var(--pf-gray-color-100);
+  --pf-number-input-placeholder-text-color: var(--pf-gray-color-600);
+  --pf-number-input-help-text-color: var(--pf-gray-color-200);
+  --pf-number-input-disabled-background-color: var(--pf-primary-color-200);
+  --pf-number-input-disabled-border-color: var(--pf-gray-color-300);
+  --pf-number-input-disabled-color: var(--pf-gray-color-400);
+}
+
+.number-input {
+  background-color: var(--pf-number-input-background-color);
+  border: var(--pf-border-thin) solid var(--pf-input-border-color);
+  border-radius: var(--pf-number-input-rounded);
+  color: var(--pf-number-input-text-color);
+  width: 100%;
+  box-sizing: border-box;
+  height: var(--pf-size-9);
+
+  padding-right: var(--pf-number-input-padding);
+  &--is-clearable {
+    padding-right: var(--pf-padding-7);
+  }
+
+  padding-left: var(--pf-number-input-padding);
+  &--has-icon {
+    padding-left: var(--pf-padding-7);
+  }
+
+  &::placeholder {
+    color: var(--pf-number-input-placeholder-text-color);
+  }
+
+  &:focus {
+    border-color: var(--pf-primary-color);
+  }
+
+  &.error {
+    border-color: var(--pf-error-color);
+  }
+
+  &.success {
+    border-color: var(--pf-success-color);
+  }
+
+  &.warning {
+    border-color: var(--pf-warning-color);
+  }
+
+  &.info {
+    border-color: var(--pf-info-color);
+  }
+
+  &:disabled {
+    background-color: var(--pf-number-input-disabled-background-color);
+    border-color: var(--pf-number-input-disabled-border-color);
+    color: var(--pf-number-input-disabled-color);
+  }
+}
+
+.form-control {
+  .help-text {
+    margin-top: var(--pf-margin-2);
+    margin-bottom: var(--pf-margin-2);
+    color: var(--pf-number-input-help-text-color);
+    font-size: var(--pf-font-size-subtitle2);
+  }
+  .number-input-wrapper {
+    position: relative;
+    .embedded-icon {
+      position: absolute;
+      top: 10px;
+      left: var(--pf-margin-2);
+      color: var(--pf-number-input-text-color);
+    }
+
+    .clearable-icon {
+      position: absolute;
+      top: var(--pf-margin-3);
+      right: var(--pf-margin-2);
+      color: var(--pf-number-input-text-color);
+      cursor: pointer;
+    }
+  }
+  .form-label {
+    margin-bottom: var(--pf-margin-2);
+  }
+}

package/src/components/forms/passwordInput/PasswordInput.stories.tsx

@@ -1,12 +1,14 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { PasswordInput, PasswordInputProps } from './PasswordInput';
 import { SetStateAction, useEffect, useState } from 'react';
-import labelArgTypes from '@/storybook/labelArgTypes';
+import { baseInputArgTypes, inputArgTypes, labelArgTypes } from '@/storybook/formArgTypes';
 
 const meta: Meta = {
   title: 'Forms/PasswordInput',
   component: PasswordInput,
   argTypes: {
+    ...labelArgTypes,
+    ...baseInputArgTypes,
     hasShowPassword: {
       control: 'boolean',
       description: 'Toggles the visibility of the password',
@@ -18,75 +20,6 @@ const meta: Meta = {
       },
       defaultValue: { summary: true },
     },
-    onChange: {
-      control: false,
-      description: 'onChange event handler',
-      table: {
-        category: 'Callbacks',
-        type: {
-          summary: '(e: React.ChangeEvent<HTMLInputElement>) => void',
-        },
-      },
-      action: 'onChange',
-    },
-    placeholder: {
-      control: 'text',
-      description: 'The placeholder for the password field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-    },
-    value: {
-      control: 'text',
-      description: 'The value for the password field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-    },
-    isDisabled: {
-      control: 'boolean',
-      description: 'Toggles the disabled state of the input',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'boolean',
-        },
-      },
-      defaultValue: { summary: 'false' },
-    },
-    errorMessage: {
-      control: false,
-      description: 'An array of error messages',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-      defaultValue: { summary: undefined },
-    },
-    helpText: {
-      control: 'text',
-      description: 'The help text for the password field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-    },
-    ref: {
-      table: {
-        disable: true,
-      },
-    },
-    ...labelArgTypes,
   },
 };
 

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

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import { Icon } from '@/components/icons';
-import { withLabel, WithLabelProps } from '../subcomponents/Label';
+import { withLabel, LabelProps } from '../subcomponents/Label';
 import { DisplayFormError } from '../subcomponents/DisplayFormError';
 import classNames from 'classnames';
 
-export interface PasswordInputProps extends WithLabelProps {
+export interface PasswordInputProps extends LabelProps {
   ref?: React.LegacyRef<HTMLInputElement>;
   value?: string | undefined;
   placeholder?: string;

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

@@ -4,9 +4,6 @@ export interface LabelProps {
   label: string;
   name: string;
   isRequired?: boolean;
-}
-
-export interface WithLabelProps extends LabelProps {
   hasHiddenLabel?: boolean;
 }
 
@@ -24,7 +21,7 @@ export const Label = ({ label, name, isRequired }: LabelProps) => {
 // HOC to add common label functionality to components
 export function withLabel<P extends object>(WrappedComponent: React.ComponentType<P>) {
   const WithLabelComponent = (
-    { label, hasHiddenLabel = false, name, isRequired, ...rest }: P & WithLabelProps,
+    { label, hasHiddenLabel = false, name, isRequired, ...rest }: P & LabelProps,
     ref: React.Ref<any>,
   ) => {
     const ariaLabel = hasHiddenLabel

package/src/components/forms/textarea/Textarea.stories.tsx

@@ -1,78 +1,14 @@
 import { useEffect, useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
-import labelArgTypes from '@/storybook/labelArgTypes';
+import { labelArgTypes, inputArgTypes, baseInputArgTypes } from '@/storybook/formArgTypes';
 import { Textarea } from './Textarea';
 
 const meta: Meta = {
   title: 'Forms/Textarea',
   component: Textarea,
   argTypes: {
-    onChange: {
-      control: false,
-      description: 'onChange event handler',
-      table: {
-        category: 'Callbacks',
-        type: {
-          summary: '(e: React.ChangeEvent<HTMLInputElement>) => void',
-        },
-      },
-      action: 'onChange',
-    },
-    placeholder: {
-      control: 'text',
-      description: 'The placeholder for the textarea field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-      defaultValue: { summary: '' },
-    },
-    value: {
-      control: 'text',
-      description: 'The value for the textarea field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-      defaultValue: { summary: '' },
-    },
-    isDisabled: {
-      control: 'boolean',
-      description: 'Toggles the disabled state of the textarea field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'boolean',
-        },
-      },
-      defaultValue: { summary: 'false' },
-    },
-    errorMessage: {
-      control: false,
-      description: 'An array of error messages',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string[]',
-        },
-      },
-      defaultValue: { summary: '[]' },
-    },
-    helpText: {
-      control: 'text',
-      description: 'The help text for the textarea field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-      defaultValue: { summary: '' },
-    },
+    ...labelArgTypes,
+    ...baseInputArgTypes,
     autofocus: {
       control: 'boolean',
       description: '	Specifies that a text area should automatically get focus when the page loads',
@@ -155,7 +91,6 @@ const meta: Meta = {
         disable: true,
       },
     },
-    ...labelArgTypes,
   },
 };
 

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import { withLabel, LabelProps, WithLabelProps } from '../subcomponents/Label';
+import { withLabel, LabelProps } from '../subcomponents/Label';
 import { DisplayFormError } from '../subcomponents/DisplayFormError';
 
-export interface TextareaProps extends WithLabelProps {
+export interface TextareaProps extends LabelProps {
   ref?: React.LegacyRef<HTMLTextAreaElement>;
   placeholder?: string;
   value?: string | undefined;

package/src/storybook/formArgTypes.ts

@@ -0,0 +1,152 @@
+// Common argTypes for form components that include a label and input
+import { ArgTypes } from '@storybook/react';
+import { iconNames } from 'build/generated/iconTypes';
+
+const labelArgTypes: ArgTypes = {
+  label: {
+    control: 'text',
+    description: 'The text to display as the label for the form component',
+    table: {
+      category: 'Props',
+      type: {
+        summary: 'string',
+      },
+    },
+  },
+  isRequired: {
+    control: 'boolean',
+    description: 'Toggles the required asterisk on the label',
+    table: {
+      category: 'Props',
+      type: {
+        summary: 'boolean',
+      },
+    },
+    defaultValue: { summary: 'false' },
+  },
+  hasHiddenLabel: {
+    control: 'boolean',
+    description:
+      'Determines whether the label should be displayed or not. Included as aria-label if true',
+    table: {
+      category: 'Props',
+      type: {
+        summary: 'boolean',
+      },
+    },
+    defaultValue: { summary: 'false' },
+  },
+  name: {
+    control: 'text',
+    description: 'The name attribute for the form component, used for identifying the field',
+    table: {
+      category: 'Props',
+      type: {
+        summary: 'string',
+      },
+    },
+  },
+};
+
+const baseInputArgTypes: ArgTypes = {
+  onChange: {
+    control: false,
+    description: 'onChange event handler',
+    table: {
+      category: 'Callbacks',
+      type: {
+        summary: '(e: React.ChangeEvent<HTMLInputElement>) => void',
+      },
+    },
+    type: { name: 'function', required: true },
+    action: 'onChange',
+  },
+  placeholder: {
+    control: 'text',
+    description: 'The placeholder for the form component',
+    table: {
+      category: 'Props',
+      type: {
+        summary: 'string',
+      },
+    },
+    type: { name: 'string', required: false },
+  },
+  value: {
+    control: 'text',
+    description: 'The value for the form component',
+    table: {
+      category: 'Props',
+      type: {
+        summary: 'string',
+      },
+    },
+    type: { name: 'string', required: false },
+  },
+  isDisabled: {
+    control: 'boolean',
+    description: 'Toggles the disabled state of the input',
+    table: {
+      category: 'Props',
+      type: {
+        summary: 'boolean',
+      },
+    },
+    defaultValue: { summary: 'false' },
+  },
+  errorMessage: {
+    control: 'text',
+    description: 'Error message',
+    table: {
+      category: 'Props',
+      type: {
+        summary: 'string',
+      },
+    },
+    defaultValue: { summary: '' },
+  },
+  helpText: {
+    control: 'text',
+    description: 'The help text for the form component',
+    table: {
+      category: 'Props',
+      type: {
+        summary: 'string',
+      },
+    },
+  },
+  ref: {
+    table: {
+      disable: true,
+    },
+  },
+};
+
+const inputArgTypes: ArgTypes = {
+  ...baseInputArgTypes,
+  iconName: {
+    control: 'select',
+    options: iconNames,
+    description: 'Adds an icon to the left hand side of the form component',
+    table: {
+      category: 'Props',
+      type: {
+        summary: 'string',
+      },
+    },
+    defaultValue: { summary: '' },
+  },
+  isClearable: {
+    control: 'boolean',
+    description: 'Adds a clear x icon to the right-hand side of the form component',
+    table: {
+      category: 'Props',
+      type: {
+        summary: 'boolean',
+      },
+    },
+    defaultValue: { summary: 'false' },
+  },
+};
+
+export { labelArgTypes, baseInputArgTypes, inputArgTypes };

package/src/styles/index.scss

@@ -7,6 +7,7 @@
 @import '../components/grid/styles/Grid.scss';
 @import '../components/table/styles/Table.scss';
 @import '../components/forms/input/styles/Input.scss';
+@import '../components/forms/numberInput/styles/NumberInput.scss';
 @import '../components/forms/radio/styles/Radio.scss';
 @import '../components/forms/checkbox/styles/Checkbox.scss';
 @import '../components/forms/textarea/styles/Textarea.scss';

package/lib/src/storybook/labelArgTypes.d.ts

@@ -1,3 +0,0 @@
-import { ArgTypes } from '@storybook/react';
-declare const labelArgTypes: ArgTypes;
-export default labelArgTypes;

package/src/storybook/labelArgTypes.ts

@@ -1,50 +0,0 @@
-// Common argTypes for form components that include a label
-import { ArgTypes } from '@storybook/react';
-
-const labelArgTypes: ArgTypes = {
-  label: {
-    control: 'text',
-    description: 'The text to display as the label for the form component',
-    table: {
-      category: 'Props',
-      type: {
-        summary: 'string',
-      },
-    },
-  },
-  isRequired: {
-    control: 'boolean',
-    description: 'Toggles the required asterisk on the label',
-    table: {
-      category: 'Props',
-      type: {
-        summary: 'boolean',
-      },
-    },
-    defaultValue: { summary: 'false' },
-  },
-  hasHiddenLabel: {
-    control: 'boolean',
-    description:
-      'Determines whether the label should be displayed or not. Included as aria-label if true',
-    table: {
-      category: 'Props',
-      type: {
-        summary: 'boolean',
-      },
-    },
-    defaultValue: { summary: 'false' },
-  },
-  name: {
-    control: 'text',
-    description: 'The name attribute for the form component, used for identifying the field',
-    table: {
-      category: 'Props',
-      type: {
-        summary: 'string',
-      },
-    },
-  },
-};
-
-export default labelArgTypes;