@indico-data/design-system 2.52.0 → 2.54.0

package/lib/components/forms/date/datePicker/types.d.ts

@@ -9,6 +9,8 @@ export interface DatePickerProps {
     month?: Date;
     defaultMonth?: Date;
     startMonth?: Date | undefined;
+    hasTimePicker?: boolean;
+    timeValue?: string;
     endMonth?: Date;
     components?: Partial<CustomComponents>;
     numberOfMonths?: number;
@@ -20,6 +22,7 @@ export interface DatePickerProps {
     isRequired?: any;
     min?: number;
     max?: number;
+    onTimeChange?: (time: string) => void;
     onMonthChange?: MonthChangeEventHandler;
     onNextClick?: MonthChangeEventHandler;
     onPrevClick?: MonthChangeEventHandler;

package/lib/components/forms/input/Input.d.ts

@@ -7,10 +7,11 @@ export interface BaseInputProps {
     placeholder?: string;
     isDisabled?: boolean;
     readonly?: boolean;
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     errorMessage?: string | undefined;
+    maxLength?: number;
     helpText?: string;
     iconName?: IconName;
     isClearable?: boolean;

package/lib/components/forms/timePicker/TimePicker.d.ts

@@ -0,0 +1,7 @@
+interface TimePickerProps {
+    timeValue?: string;
+    label?: string;
+    onTimeChange?: (time: string) => void;
+}
+export declare const TimePicker: ({ timeValue, label, onTimeChange, }: TimePickerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/forms/timePicker/TimePicker.stories.d.ts

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

package/lib/components/forms/timePicker/__tests__/TimePicker.test.d.ts

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

package/lib/components/forms/timePicker/constants.d.ts

@@ -0,0 +1,13 @@
+declare const hourOptions: {
+    label: string;
+    value: string;
+}[];
+declare const minuteOptions: {
+    label: string;
+    value: string;
+}[];
+declare const periodOptions: {
+    label: string;
+    value: string;
+}[];
+export { hourOptions, minuteOptions, periodOptions };

package/lib/components/forms/timePicker/helpers.d.ts

@@ -0,0 +1,5 @@
+export declare const parseTimeValue: (time: string) => {
+    hours: string;
+    minutes: string;
+    period: string;
+};

package/lib/components/forms/timePicker/index.d.ts

@@ -0,0 +1 @@
+export * from './TimePicker';

package/lib/components/index.d.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/lib/components/loading-indicators/BarSpinner/BarSpinner.d.ts

@@ -0,0 +1,8 @@
+export declare function BarSpinner({ width, id, height, className, ...rest }: {
+    'data-testid'?: string;
+    width?: number;
+    id?: string;
+    height?: number;
+    className?: string;
+    [key: string]: any;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/components/loading-indicators/BarSpinner/BarSpinner.stories.d.ts

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

package/lib/components/loading-indicators/BarSpinner/__tests__/BarSpinner.test.d.ts

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

package/lib/components/loading-indicators/CirclePulse/CirclePulse.d.ts

@@ -0,0 +1,7 @@
+interface CirclePulseProps {
+    size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    className?: string;
+    [key: string]: any;
+}
+export declare function CirclePulse({ size, className, ...rest }: CirclePulseProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/loading-indicators/CirclePulse/CirclePulse.stories.d.ts

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

package/lib/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,13 @@
+import { PlacesType } from 'react-tooltip';
+interface TooltipProps {
+    id: string;
+    clickToShow?: boolean;
+    delayShow?: number;
+    delayHide?: number;
+    children: React.ReactNode;
+    zIndex?: number;
+    place?: PlacesType;
+    [key: string]: any;
+}
+export declare const Tooltip: ({ id, clickToShow, delayShow, delayHide, children, zIndex, place, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/tooltip/Tooltip.stories.d.ts

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

package/lib/index.css

@@ -438,6 +438,14 @@ a:hover,
   background-color: var(--pf-background-color);
 }
 
+.react-tooltip {
+  z-index: 5;
+  background-color: var(--pf-tooltip-background-color);
+  border: var(--pf-border-sm) solid var(--pf-border-color);
+  opacity: 1 !important;
+  text-wrap: wrap;
+}
+
 :root,
 :root [data-theme=light],
 :root [data-theme=dark] {
@@ -1314,12 +1322,15 @@ form {
   --pf-form-input-disabled-color: var(--pf-tertiary-color-950);
 }
 
+.time-input-wrapper input,
 .input-wrapper input,
 .number-input-wrapper input,
 .password-input-wrapper input,
 .textarea-wrapper input {
   height: var(--pf-size-9);
 }
+.time-input-wrapper input,
+.time-input-wrapper textarea,
 .input-wrapper input,
 .input-wrapper textarea,
 .number-input-wrapper input,
@@ -1335,9 +1346,11 @@ form {
   width: 100%;
   box-sizing: border-box;
 }
-.input-wrapper input::-moz-placeholder, .input-wrapper textarea::-moz-placeholder, .number-input-wrapper input::-moz-placeholder, .number-input-wrapper textarea::-moz-placeholder, .password-input-wrapper input::-moz-placeholder, .password-input-wrapper textarea::-moz-placeholder, .textarea-wrapper input::-moz-placeholder, .textarea-wrapper textarea::-moz-placeholder {
+.time-input-wrapper input::-moz-placeholder, .time-input-wrapper textarea::-moz-placeholder, .input-wrapper input::-moz-placeholder, .input-wrapper textarea::-moz-placeholder, .number-input-wrapper input::-moz-placeholder, .number-input-wrapper textarea::-moz-placeholder, .password-input-wrapper input::-moz-placeholder, .password-input-wrapper textarea::-moz-placeholder, .textarea-wrapper input::-moz-placeholder, .textarea-wrapper textarea::-moz-placeholder {
   color: var(--pf-form-input-placeholder-color);
 }
+.time-input-wrapper input::placeholder,
+.time-input-wrapper textarea::placeholder,
 .input-wrapper input::placeholder,
 .input-wrapper textarea::placeholder,
 .number-input-wrapper input::placeholder,
@@ -1348,6 +1361,8 @@ form {
 .textarea-wrapper textarea::placeholder {
   color: var(--pf-form-input-placeholder-color);
 }
+.time-input-wrapper input:hover,
+.time-input-wrapper textarea:hover,
 .input-wrapper input:hover,
 .input-wrapper textarea:hover,
 .number-input-wrapper input:hover,
@@ -1358,6 +1373,8 @@ form {
 .textarea-wrapper textarea:hover {
   background-color: var(--pf-form-input-hover-background-color);
 }
+.time-input-wrapper input:focus,
+.time-input-wrapper textarea:focus,
 .input-wrapper input:focus,
 .input-wrapper textarea:focus,
 .number-input-wrapper input:focus,
@@ -1369,6 +1386,8 @@ form {
   border-color: var(--pf-form-input-focus-border-color);
   background-color: var(--pf-form-input-focus-background-color);
 }
+.time-input-wrapper input:focus-visible,
+.time-input-wrapper textarea:focus-visible,
 .input-wrapper input:focus-visible,
 .input-wrapper textarea:focus-visible,
 .number-input-wrapper input:focus-visible,
@@ -1379,6 +1398,8 @@ form {
 .textarea-wrapper textarea:focus-visible {
   outline: 1px solid var(--pf-form-input-focus-outline-color);
 }
+.time-input-wrapper input:disabled,
+.time-input-wrapper textarea:disabled,
 .input-wrapper input:disabled,
 .input-wrapper textarea:disabled,
 .number-input-wrapper input:disabled,
@@ -1391,6 +1412,8 @@ form {
   border-color: var(--pf-form-input-disabled-border-color);
   color: var(--pf-form-input-disabled-color);
 }
+.time-input-wrapper input.error,
+.time-input-wrapper textarea.error,
 .input-wrapper input.error,
 .input-wrapper textarea.error,
 .number-input-wrapper input.error,
@@ -1401,6 +1424,8 @@ form {
 .textarea-wrapper textarea.error {
   border-color: var(--pf-error-color);
 }
+.time-input-wrapper input.success,
+.time-input-wrapper textarea.success,
 .input-wrapper input.success,
 .input-wrapper textarea.success,
 .number-input-wrapper input.success,
@@ -1411,6 +1436,8 @@ form {
 .textarea-wrapper textarea.success {
   border-color: var(--pf-success-color);
 }
+.time-input-wrapper input.warning,
+.time-input-wrapper textarea.warning,
 .input-wrapper input.warning,
 .input-wrapper textarea.warning,
 .number-input-wrapper input.warning,
@@ -1421,6 +1448,8 @@ form {
 .textarea-wrapper textarea.warning {
   border-color: var(--pf-warning-color);
 }
+.time-input-wrapper input.info,
+.time-input-wrapper textarea.info,
 .input-wrapper input.info,
 .input-wrapper textarea.info,
 .number-input-wrapper input.info,
@@ -1814,6 +1843,59 @@ form {
   background-color: transparent;
 }
 
+.time-picker-wrapper {
+  margin-bottom: var(--pf-margin-3);
+  width: 348px;
+}
+.time-picker-wrapper .form-control {
+  margin-bottom: 0;
+}
+
+.time-picker-input {
+  cursor: pointer;
+}
+
+.time-picker-row {
+  width: 150px;
+}
+.time-picker-row .select__value-container {
+  text-align: center;
+  cursor: pointer;
+}
+.time-picker-row .select-wrapper {
+  width: 50px;
+}
+.time-picker-row .select-wrapper .select__items {
+  justify-content: center;
+}
+.time-picker-row .select-wrapper .select__menu {
+  height: 230px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+}
+.time-picker-row .select__menu-list {
+  max-height: 100%;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  overflow-y: scroll;
+}
+.time-picker-row .select__menu-list::-webkit-scrollbar {
+  display: none; /* Chrome, Safari and Opera */
+}
+.time-picker-row .hour-menu .select__menu {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.time-picker-row .minute-menu .select__menu {
+  border-radius: 0;
+  border-right: none;
+  border-left: none;
+}
+.time-picker-row .period-menu .select__menu {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
 :root {
   --pf-badge-rounded: var(--pf-rounded);
 }
@@ -2243,6 +2325,51 @@ form {
   display: block;
 }
 
+.time-picker-input {
+  cursor: pointer;
+}
+
+.time-picker-row {
+  width: 150px;
+}
+.time-picker-row .select__value-container {
+  text-align: center;
+  cursor: pointer;
+}
+.time-picker-row .select-wrapper {
+  width: 50px;
+}
+.time-picker-row .select-wrapper .select__items {
+  justify-content: center;
+}
+.time-picker-row .select-wrapper .select__menu {
+  height: 230px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+}
+.time-picker-row .select__menu-list {
+  max-height: 100%;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  overflow-y: scroll;
+}
+.time-picker-row .select__menu-list::-webkit-scrollbar {
+  display: none; /* Chrome, Safari and Opera */
+}
+.time-picker-row .hour-menu .select__menu {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.time-picker-row .minute-menu .select__menu {
+  border-radius: 0;
+  border-right: none;
+  border-left: none;
+}
+.time-picker-row .period-menu .select__menu {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
 :root [data-theme=light] {
   --pf-pill-primary-background-color: var(--pf-primary-color);
   --pf-pill-primary-font-color: var(--pf-white-color);
@@ -2358,6 +2485,147 @@ form {
   border-color: var(--pf-pill-pending-border-color);
 }
 
+:root [data-theme=light] {
+  --pf-tooltip-background-color: var(--pf-white-color);
+}
+
+:root [data-theme=dark],
+:root {
+  --pf-tooltip-background-color: var(--pf-primary-color-900);
+}
+
+@keyframes moveBg {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(46px);
+  }
+}
+.bar-spinner {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 14px;
+  border-radius: 25px;
+  background-color: var(--pf-primary-color-800);
+}
+.bar-spinner > span {
+  display: block;
+  height: 100%;
+  width: 100%;
+  border-radius: 25px;
+  position: relative;
+  overflow: hidden;
+}
+.bar-spinner > span:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -46px;
+  bottom: 0;
+  right: 0;
+  background: repeating-linear-gradient(-55deg, transparent 1px, rgba(255, 255, 255, 0.25) 2px, rgba(255, 255, 255, 0.25) 11px, transparent 12px, transparent 20px);
+  animation-name: moveBg;
+  animation-duration: 1s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  border-radius: 20px;
+  overflow: hidden;
+}
+
+:root {
+  --circle-pulse-animation-speed: 1.4s;
+  --circle-pulse-border-width: var(--pf-border-xl);
+}
+
+.circle-pulse-xxs {
+  --circle-pulse-size: 20px;
+  --circle-pulse-ripple-size: calc(20px * 1.7);
+}
+
+.circle-pulse-xs {
+  --circle-pulse-size: 40px;
+  --circle-pulse-ripple-size: calc(40px * 1.7);
+}
+
+.circle-pulse-sm {
+  --circle-pulse-size: 60px;
+  --circle-pulse-ripple-size: calc(60px * 1.7);
+}
+
+.circle-pulse-md {
+  --circle-pulse-size: 80px;
+  --circle-pulse-ripple-size: calc(80px * 1.7);
+}
+
+.circle-pulse-lg {
+  --circle-pulse-size: 100px;
+  --circle-pulse-ripple-size: calc(100px * 1.7);
+}
+
+.circle-pulse-xl {
+  --circle-pulse-size: 120px;
+  --circle-pulse-ripple-size: calc(120px * 1.7);
+}
+
+.circle-pulse-xxl {
+  --circle-pulse-size: 140px;
+  --circle-pulse-ripple-size: calc(140px * 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;
+}
+.circle-pulse:before, .circle-pulse: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) {
+  .circle-pulse:before, .circle-pulse:after {
+    animation-duration: calc(var(--circle-pulse-animation-speed) * 2);
+  }
+}
+.circle-pulse:after {
+  animation-delay: calc(var(--circle-pulse-animation-speed) * -0.5);
+}
+@media (prefers-reduced-motion) {
+  .circle-pulse:after {
+    animation-delay: calc(var(--circle-pulse-animation-speed) * -1);
+  }
+}
+
 :root [data-theme=light] {
   --sheets-background-color: var(--pf-gray-color-100);
 }