@indico-data/design-system 2.53.0 → 2.55.0

package/src/components/forms/timePicker/TimePicker.tsx

@@ -1,104 +1,61 @@
-import { useState } from 'react';
-import { Select } from '../select/Select';
+import { ChangeEvent, useState, FocusEvent } from 'react';
 import { Input } from '../input/Input';
-import { Col, Row } from '../../grid';
-import { FloatUI } from '../..';
-import { hourOptions, minuteOptions, periodOptions } from './constants';
-import { parseTimeValue } from './helpers';
-import { SelectOption } from '../select/types';
-import { SingleValue, MultiValue } from 'react-select';
+import { formatTimeValue, validateInputValue } from './helpers';
 
 interface TimePickerProps {
   timeValue?: string;
   label?: string;
+  name?: string;
+  hasHiddenLabel?: boolean;
   onTimeChange?: (time: string) => void;
 }
 
 export const TimePicker = ({
   timeValue = '',
   label = 'Time Picker',
+  name = 'time-picker',
+  hasHiddenLabel = false,
   onTimeChange,
 }: TimePickerProps) => {
-  const initialTime = parseTimeValue(timeValue);
-  const [hours, setHours] = useState(initialTime.hours);
-  const [minutes, setMinutes] = useState(initialTime.minutes);
-  const [period, setPeriod] = useState(initialTime.period);
+  const [validationError, setValidationError] = useState('');
+  const [inputValue, setInputValue] = useState(timeValue);
 
-  const handleHourChange = (option: SingleValue<SelectOption>) => {
-    setHours(option?.value || '12');
-    onTimeChange?.(`${option?.value || '12'}:${minutes} ${period.toUpperCase()}`);
-  };
+  const handleTimeChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    const error = validateInputValue(newValue);
+    setInputValue(newValue);
+    setValidationError(error);
 
-  const handleMinuteChange = (option: SelectOption) => {
-    setMinutes(option?.value || '00');
-    onTimeChange?.(`${hours}:${option?.value || '00'} ${period.toUpperCase()}`);
+    // Only send valid values to parent component
+    if (!error || error === '') {
+      onTimeChange?.(newValue);
+    }
   };
 
-  const handlePeriodChange = (option: SelectOption) => {
-    setPeriod(option?.value || 'am');
-    onTimeChange?.(`${hours}:${minutes} ${(option?.value || 'am').toUpperCase()}`);
+  const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
+    const currentValue = e.target.value;
+
+    // Only format if there's no validation error
+    if (validationError === '' && currentValue.trim() !== '') {
+      const formattedValue = formatTimeValue(currentValue);
+      setInputValue(formattedValue);
+      onTimeChange?.(formattedValue);
+    }
   };
 
   return (
     <div className="time-input-wrapper">
-      <FloatUI ariaLabel={label}>
-        <Input
-          data-testid="time-picker-input"
-          name="hours"
-          label={label}
-          hasHiddenLabel
-          value={`${hours}:${minutes} ${period.toUpperCase()}`}
-          readonly
-          className="time-picker-input"
-        />
-        <Row gutterWidth={0} className="time-picker-row">
-          <Col xs="content">
-            <Select
-              menuIsOpen
-              className="hour-menu"
-              components={{ DropdownIndicator: () => null, IndicatorSeparator: () => null }}
-              name="hours"
-              value={{ label: hours, value: hours }}
-              onChange={
-                handleHourChange as (
-                  newValue: SingleValue<SelectOption> | MultiValue<SelectOption>,
-                ) => void
-              }
-              options={hourOptions}
-            />
-          </Col>
-          <Col xs="content">
-            <Select
-              className="minute-menu"
-              components={{ DropdownIndicator: () => null, IndicatorSeparator: () => null }}
-              name="minutes"
-              options={minuteOptions}
-              menuIsOpen
-              value={{ label: minutes.padStart(2, '0'), value: minutes }}
-              onChange={
-                handleMinuteChange as (
-                  newValue: SingleValue<SelectOption> | MultiValue<SelectOption>,
-                ) => void
-              }
-            />
-          </Col>
-          <Col xs="content">
-            <Select
-              menuIsOpen
-              className="period-menu"
-              components={{ DropdownIndicator: () => null, IndicatorSeparator: () => null }}
-              name="period"
-              options={periodOptions}
-              value={{ label: period.toUpperCase(), value: period }}
-              onChange={
-                handlePeriodChange as (
-                  newValue: SingleValue<SelectOption> | MultiValue<SelectOption>,
-                ) => void
-              }
-            />
-          </Col>
-        </Row>
-      </FloatUI>
+      <Input
+        data-testid={`${name}-input`}
+        label={label}
+        hasHiddenLabel={hasHiddenLabel}
+        value={inputValue}
+        maxLength={8}
+        onChange={handleTimeChange}
+        onBlur={handleBlur}
+        name={name}
+        errorMessage={validationError}
+      />
     </div>
   );
 };

package/src/components/forms/timePicker/__tests__/TimePicker.test.tsx

@@ -3,24 +3,46 @@ import { TimePicker } from '@/components/forms/timePicker/TimePicker';
 import userEvent from '@testing-library/user-event';
 
 describe('TimePicker', () => {
-  it('updates the time when the hour is changed', async () => {
-    render(<TimePicker />);
+  it('renders an error when the input is invalid', async () => {
+    render(
+      <TimePicker
+        name="time-picker"
+        label="Time Picker"
+        hasHiddenLabel
+        data-testid="time-picker-input"
+      />,
+    );
+
     const timePickerInput = screen.getByTestId('time-picker-input');
     await userEvent.click(timePickerInput);
 
-    const hourOption = screen.getByRole('option', { name: '1' });
-    await userEvent.click(hourOption);
+    await userEvent.type(timePickerInput, '13:00');
+
+    const timePickerError = screen.getByTestId('time-picker-error');
+    expect(timePickerError).toBeInTheDocument();
+  });
+
+  it('formats the time input when the value is valid and a user clicks away from the input', async () => {
+    render(
+      <TimePicker
+        name="time-picker"
+        label="Time Picker"
+        hasHiddenLabel
+        data-testid="time-picker-input"
+      />,
+    );
 
-    expect(timePickerInput).toHaveValue('1:00 AM');
+    const timePickerInput = screen.getByTestId('time-picker-input');
+    await userEvent.click(timePickerInput);
 
-    const minuteOption = screen.getByRole('option', { name: '01' });
-    await userEvent.click(minuteOption);
+    await userEvent.type(timePickerInput, '1:00pm');
 
-    expect(timePickerInput).toHaveValue('1:01 AM');
+    const timePickerError = screen.queryByTestId('time-picker-error');
+    expect(timePickerError).not.toBeInTheDocument();
 
-    const periodOption = screen.getByRole('option', { name: 'PM' });
-    await userEvent.click(periodOption);
+    await userEvent.click(document.body);
 
-    expect(timePickerInput).toHaveValue('1:01 PM');
+    expect(timePickerInput).toHaveValue('1:00 PM');
+    expect(timePickerError).not.toBeInTheDocument();
   });
 });

package/src/components/forms/timePicker/helpers.ts

@@ -1,14 +1,62 @@
-// Parse initial time value
-export const parseTimeValue = (time: string) => {
-  if (!time) return { hours: '12', minutes: '00', period: 'am' };
-
-  const match = time.match(/(\d{1,2}):(\d{2})\s*(am|pm)/i);
-  if (!match) return { hours: '12', minutes: '00', period: 'am' };
-
-  const [, hours, minutes, period] = match;
-  return {
-    hours: hours,
-    minutes: minutes,
-    period: period.toLowerCase(),
-  };
+export const formatTimeValue = (value: string): string => {
+  if (!value || value.trim() === '') {
+    return '';
+  }
+
+  // Normalize the input
+  const normalizedValue = value.trim().toLowerCase();
+
+  // Extract time components using regex
+  const timeRegex = /^(0?[1-9]|1[0-2]):([0-5][0-9])(\s*)([ap]m)$/i;
+  const matches = normalizedValue.match(timeRegex);
+
+  if (matches) {
+    const hours = parseInt(matches[1], 10);
+    const minutes = parseInt(matches[2], 10);
+    const period = matches[4].toUpperCase(); // Convert am/pm to AM/PM
+
+    // Format as hh:mm AM/PM
+    return `${hours}:${minutes < 10 ? '0' + minutes : minutes} ${period}`;
+  }
+
+  return value; // Return original if no match (shouldn't happen with valid inputs)
+};
+
+export const validateInputValue = (value: string): string => {
+  if (!value || value.trim() === '') {
+    return ''; // Empty input is allowed
+  }
+
+  // Normalize the input (remove extra spaces, convert to lowercase)
+  const normalizedValue = value.trim().toLowerCase();
+
+  // Regular expression for valid time formats: 1:10 pm, 01:10 pm, 1:10pm, 01:10pm
+  const timeRegex = /^(0?[1-9]|1[0-2]):([0-5][0-9])(\s*)([ap]m)$/i;
+
+  if (!timeRegex.test(normalizedValue)) {
+    // Check if the issue might be a 24-hour format
+    const hour24Regex = /^([13-9]|1[3-9]|2[0-3]):/i;
+    if (hour24Regex.test(normalizedValue)) {
+      return 'Please enter time in 12-hour format (e.g., 1:10 pm)';
+    }
+
+    return 'Please enter a valid time format (e.g., 1:10 pm)';
+  }
+
+  // Extract hours and minutes for additional validation
+  const matches = normalizedValue.match(timeRegex);
+  if (matches) {
+    const hours = parseInt(matches[1], 10);
+    const minutes = parseInt(matches[2], 10);
+
+    if (hours < 1 || hours > 12) {
+      return 'Hours must be between 1 and 12';
+    }
+
+    if (minutes < 0 || minutes > 59) {
+      return 'Minutes must be between 0 and 59';
+    }
+  }
+
+  return ''; // Valid time format
 };

package/src/components/index.ts

@@ -22,3 +22,6 @@ export { Modal } from './modal';
 export { Badge } from './badge';
 export { Pagination } from './pagination';
 export { TanstackTable } from './tanstackTable';
+export { Tooltip } from './tooltip';
+export { BarSpinner } from './loading-indicators/BarSpinner/BarSpinner';
+export { CirclePulse } from './loading-indicators/CirclePulse/CirclePulse';

package/src/components/loading-indicators/BarSpinner/BarSpinner.mdx

@@ -0,0 +1,21 @@
+import { Canvas, Meta, Controls, Story } from '@storybook/blocks';
+import * as BarSpinner from './BarSpinner.stories';
+
+<Meta title="Utilities/BarSpinner" name="BarSpinner" of={BarSpinner} />
+
+# BarSpinner
+
+This is a simple looping animation component that can indicate a loading state
+
+<Canvas of={BarSpinner.Default} />
+
+### The following props are available for the BarSpinner component:
+
+<Controls of={BarSpinner.Default} />
+
+## Usage
+Simple usage of the BarSpinner component:
+<Canvas of={BarSpinner.WithWidthAndHeight} />
+```tsx
+<BarSpinner id="bar-spinner-optional-id" className="optional-class-name" width={200} height={10} />
+```

package/src/components/loading-indicators/BarSpinner/BarSpinner.stories.tsx

@@ -0,0 +1,89 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { BarSpinner } from './BarSpinner';
+import { Col, Container, Row } from '../../grid';
+
+const meta: Meta = {
+  title: 'Utilities/BarSpinner',
+  component: BarSpinner,
+  argTypes: {
+    className: {
+      control: false,
+      description: 'The class name of the bar spinner',
+      table: {
+        category: 'Props',
+      },
+    },
+    'data-testid': {
+      table: {
+        disable: true,
+      },
+    },
+    width: {
+      control: false,
+      description: 'The width of the bar spinner',
+      table: {
+        category: 'Props',
+      },
+    },
+    height: {
+      control: false,
+      description: 'The height of the bar spinner',
+      table: {
+        category: 'Props',
+      },
+    },
+    id: {
+      control: false,
+      description:
+        "The id of the tooltip. This needs to match the element that holds it's data attribute",
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BarSpinner>;
+
+export const Default: Story = {
+  args: {
+    id: 'bar-spinner-1',
+  },
+
+  render: (args) => {
+    return (
+      <Container>
+        <Row>
+          <Col sm={4}>
+            <BarSpinner id={args.id} />
+          </Col>
+        </Row>
+      </Container>
+    );
+  },
+};
+
+export const WithWidthAndHeight: Story = {
+  args: {
+    id: 'bar-spinner-1',
+    width: 200,
+    height: 10,
+  },
+
+  render: (args) => {
+    return (
+      <Container>
+        <Row>
+          <Col sm={4}>
+            <BarSpinner id={args.id} width={args.width} height={args.height} />
+          </Col>
+        </Row>
+      </Container>
+    );
+  },
+};

package/src/components/loading-indicators/BarSpinner/BarSpinner.tsx

@@ -0,0 +1,25 @@
+export function BarSpinner({
+  width,
+  id,
+  height,
+  className,
+  ...rest
+}: {
+  'data-testid'?: string;
+  width?: number;
+  id?: string;
+  height?: number;
+  className?: string;
+  [key: string]: any;
+}) {
+  // Create style object only if width or height exist
+  const style: React.CSSProperties = {};
+  if (width !== undefined) style.width = `${width}px`;
+  if (height !== undefined) style.height = `${height}px`;
+
+  return (
+    <div className={`bar-spinner ${className}`} id={id} style={style} {...rest}>
+      <span />
+    </div>
+  );
+}

package/src/components/loading-indicators/BarSpinner/__tests__/BarSpinner.test.tsx

@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react';
+import { BarSpinner } from '../BarSpinner';
+
+describe('BarSpinner Component', () => {
+  it('Renders the bar spinner without style props', () => {
+    render(<BarSpinner id="bar-spinner-1" data-testid="bar-spinner-1" />);
+    expect(screen.getByTestId('bar-spinner-1')).toBeInTheDocument();
+  });
+
+  it('Renders the bar spinner with prop width and height', () => {
+    render(<BarSpinner id="bar-spinner-1" width={200} height={10} data-testid="bar-spinner-1" />);
+    expect(screen.getByTestId('bar-spinner-1')).toBeInTheDocument();
+    expect(screen.getByTestId('bar-spinner-1')).toHaveStyle('width: 200px');
+    expect(screen.getByTestId('bar-spinner-1')).toHaveStyle('height: 10px');
+  });
+});

package/src/{legacy/components/loading-indicators/BarSpinner/BarSpinner.styles.ts → components/loading-indicators/BarSpinner/styles/BarSpinner.scss}

@@ -1,20 +1,20 @@
-import styled, { keyframes } from 'styled-components';
-
-const moveBg = keyframes`
-  from {
+@keyframes moveBg {
+  0% {
     transform: translateX(0);
   }
-  to {
+  100% {
     transform: translateX(46px);
   }
-`;
+}
 
-export const StyledBarSpinner = styled.div`
+.bar-spinner {
   display: inline-block;
-  width: 200px;
-  height: 14px; /* Can be anything */
   position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 14px;
   border-radius: 25px;
+  background-color: var(--pf-primary-color-800);
 
   > span {
     display: block;
@@ -39,7 +39,7 @@ export const StyledBarSpinner = styled.div`
         transparent 12px,
         transparent 20px
       );
-      animation-name: ${moveBg};
+      animation-name: moveBg;
       animation-duration: 1s;
       animation-timing-function: linear;
       animation-iteration-count: infinite;
@@ -47,4 +47,4 @@ export const StyledBarSpinner = styled.div`
       overflow: hidden;
     }
   }
-`;
+}

package/src/components/loading-indicators/CirclePulse/CirclePulse.mdx

@@ -0,0 +1,20 @@
+import { Canvas, Meta, Controls, Story } from '@storybook/blocks';
+import * as CirclePulse from './CirclePulse.stories';
+
+<Meta title="Utilities/CirclePulse" name="CirclePulse" of={CirclePulse} />
+
+# CirclePulse
+
+This is a simple looping animation component that can indicate a loading state
+
+<Canvas of={CirclePulse.Default} />
+
+### The following props are available for the CirclePulse component:
+
+<Controls of={CirclePulse.Default} />
+
+## Usage
+
+```tsx
+<CirclePulse size="md" id="circle-pulse-optional-id" className="optional-class-name" />
+```

package/src/components/loading-indicators/CirclePulse/CirclePulse.scss

@@ -0,0 +1,83 @@
+:root {
+  --circle-pulse-animation-speed: 1.4s;
+  --circle-pulse-border-width: var(--pf-border-xl);
+}
+
+// Size map with increments of 20px
+$circle-pulse-sizes: (
+  'xxs': 20px,
+  'xs': 40px,
+  'sm': 60px,
+  'md': 80px,
+  'lg': 100px,
+  'xl': 120px,
+  'xxl': 140px,
+);
+
+// Generate size classes for the pulse only
+@each $size, $value in $circle-pulse-sizes {
+  .circle-pulse-#{$size} {
+    --circle-pulse-size: #{$value};
+    --circle-pulse-ripple-size: calc(#{$value} * 1.7);
+  }
+}
+
+@keyframes ripple {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+
+  20% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0;
+  }
+}
+
+.circle-pulse {
+  display: grid;
+  place-items: center;
+  position: relative;
+
+  width: var(--circle-pulse-size);
+  height: var(--circle-pulse-size);
+
+  margin-left: auto;
+  margin-right: auto;
+
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    border: var(--circle-pulse-border-width) solid var(--pf-primary-color-300);
+    border-radius: 50%;
+
+    /* Set initial dimensions */
+    width: var(--circle-pulse-ripple-size);
+    height: var(--circle-pulse-ripple-size);
+
+    /* Position at center */
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    transform-origin: center;
+
+    animation: ripple var(--circle-pulse-animation-speed) cubic-bezier(0, 0.2, 0.8, 1) infinite;
+
+    @media (prefers-reduced-motion) {
+      animation-duration: calc(var(--circle-pulse-animation-speed) * 2);
+    }
+  }
+
+  &:after {
+    animation-delay: calc(var(--circle-pulse-animation-speed) * -0.5);
+
+    @media (prefers-reduced-motion) {
+      animation-delay: calc(var(--circle-pulse-animation-speed) * -1);
+    }
+  }
+}

package/src/components/loading-indicators/CirclePulse/CirclePulse.stories.tsx

@@ -0,0 +1,78 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CirclePulse } from './CirclePulse';
+import { Col, Container, Row } from '../../grid';
+
+const meta: Meta = {
+  title: 'Utilities/CirclePulse',
+  component: CirclePulse,
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: '300px',
+          height: '300px',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    size: {
+      control: 'select',
+      description: 'The size of the circle',
+      options: ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'],
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'xxs | xs | sm | md | lg | xl | xxl',
+        },
+      },
+    },
+    id: {
+      control: false,
+      description: 'The id of the circle pulse',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    className: {
+      control: false,
+      description: 'The class name of the circle pulse',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CirclePulse>;
+
+export const Default: Story = {
+  args: {
+    size: 'md',
+  },
+
+  render: (args) => {
+    return (
+      <Container>
+        <Row>
+          <Col sm={4}>
+            <CirclePulse {...args} />
+          </Col>
+        </Row>
+      </Container>
+    );
+  },
+};

package/src/components/loading-indicators/CirclePulse/CirclePulse.tsx

@@ -0,0 +1,15 @@
+interface CirclePulseProps {
+  size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+  className?: string;
+  [key: string]: any;
+}
+
+export function CirclePulse({ size = 'md', className, ...rest }: CirclePulseProps) {
+  return (
+    <div
+      className={`circle-pulse circle-pulse-${size} ${className}`}
+      aria-hidden={true}
+      {...rest}
+    />
+  );
+}