@indico-data/design-system 2.53.0 → 2.54.0

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] {
@@ -2477,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);
 }

package/lib/index.d.ts

@@ -1,18 +1,25 @@
 import { IconDefinition, IconName as IconName$1 } from '@fortawesome/fontawesome-svg-core';
 import { UseFloatingOptions } from '@floating-ui/react-dom';
 export * from '@floating-ui/react-dom';
-import React$1, { CSSProperties, MouseEventHandler, ReactElement } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ContainerProps, RowProps, ColProps } from 'react-grid-system';
+import React$1, { CSSProperties, MouseEventHandler, ReactElement } from 'react';
 import { IDataTableProps, Direction as Direction$1, TableColumn as TableColumn$1 } from 'react-data-table-component';
 import { CSSObject } from 'styled-components';
-import { Props as Props$8 } from 'react-select';
+import { Props as Props$4 } from 'react-select';
 import { DateRange, OnSelectHandler, Mode, CustomComponents, Matcher, Formatters, MonthChangeEventHandler, DayEventHandler } from 'react-day-picker';
 import { ColumnDef, Row as Row$1 } from '@tanstack/react-table';
 export { ColumnDef, Row as TanstackTableRowType, Table as TanstackTableType } from '@tanstack/react-table';
+import { PlacesType } from 'react-tooltip';
 
 declare const registerFontAwesomeIcons: (...icons: IconDefinition[]) => void;
 
+declare const Container: ({ ref: _ref, ...rest }: ContainerProps) => react_jsx_runtime.JSX.Element;
+
+declare const Row: ({ ref: _ref, ...rest }: RowProps) => react_jsx_runtime.JSX.Element;
+
+declare const Col: ({ ref: _ref, ...rest }: ColProps) => react_jsx_runtime.JSX.Element;
+
 declare const indicons: {
     'indico-o-white': react_jsx_runtime.JSX.Element;
     account: react_jsx_runtime.JSX.Element;
@@ -224,46 +231,6 @@ type PermafrostComponent = {
 
 type SemanticColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info' | 'pending';
 
-type Props$7 = PermafrostComponent & {
-    ariaLabel?: string;
-    size?: IconSizes;
-    style?: React$1.CSSProperties;
-    fill?: string;
-};
-declare function CircleSpinner(props: Props$7): React$1.ReactElement;
-
-type Props$6 = PermafrostComponent & {
-    width?: string;
-};
-declare function BarSpinner(props: Props$6): React$1.ReactElement;
-
-type Props$5 = PermafrostComponent & {
-    color?: string;
-    overallSize?: string | number;
-    rippleSize?: string | number;
-    showRandomMessage?: boolean;
-};
-declare function CirclePulse(props: Props$5): React$1.ReactElement;
-
-type Props$4 = PermafrostComponent & {
-    questionMark?: boolean;
-    for?: string | null;
-    place?: string;
-    clickToShow?: boolean;
-    delayShow?: number;
-    delayHide?: number;
-    questionMarkClassName?: string;
-    children: React$1.ReactNode;
-    block?: boolean;
-};
-declare const Tooltip: (props: Props$4) => react_jsx_runtime.JSX.Element;
-
-declare const Container: ({ ref: _ref, ...rest }: ContainerProps) => react_jsx_runtime.JSX.Element;
-
-declare const Row: ({ ref: _ref, ...rest }: RowProps) => react_jsx_runtime.JSX.Element;
-
-declare const Col: ({ ref: _ref, ...rest }: ColProps) => react_jsx_runtime.JSX.Element;
-
 type ButtonVariants = 'solid' | 'outline' | 'link' | 'action' | 'destructive' | 'soft';
 type ButtonSizes = 'xs' | 'sm' | 'md' | 'lg';
 type ButtonTypes = 'button' | 'submit' | 'reset';
@@ -393,7 +360,7 @@ interface PasswordInputProps extends LabelProps {
 }
 declare const LabeledPasswordInput: React$1.ForwardRefExoticComponent<Omit<Omit<PasswordInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement> & LabelProps, "ref"> & React$1.RefAttributes<any>>;
 
-interface SelectProps<OptionType extends SelectOption> extends Props$8<OptionType> {
+interface SelectProps<OptionType extends SelectOption> extends Props$4<OptionType> {
     options: OptionType[];
 }
 declare const Select: <OptionType extends SelectOption>({ classNamePrefix, className, components: customComponents, ...props }: SelectProps<OptionType>) => react_jsx_runtime.JSX.Element;
@@ -578,7 +545,7 @@ type WithoutPaginationProps = {
     totalEntriesText?: string;
     showPagination?: false;
 };
-type PaginationProps = WithPaginationProps | WithoutPaginationProps;
+type PaginationProps$1 = WithPaginationProps | WithoutPaginationProps;
 type Props<T extends object> = {
     data: T[];
     columns: ColumnDef<T & {
@@ -605,10 +572,47 @@ type Props<T extends object> = {
     rowSelection?: Record<string, boolean>;
     onRowSelectionChange?: (updater: Record<string, boolean>) => void;
     onSelectAllChange?: (isSelected: boolean) => void;
-} & PaginationProps;
+} & PaginationProps$1;
 
 declare function TanstackTable<T extends object>({ columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage, onChangePage, totalEntriesText, TableActions, error, enableRowSelection, clearFilters, hasFilters, showPagination, isLoading, defaultPinnedColumns, onRowClick, activeRows, actionBarClassName, ...rest }: Props<T & {
     id: string;
 }>): react_jsx_runtime.JSX.Element;
 
-export { Badge, BarSpinner, Button, Card, Checkbox, CirclePulse, CircleSpinner, Col, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, Menu, Modal, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, Select as SelectInput, SingleInputDatePicker, Skeleton, Table, TanstackTable, LabeledTextarea as Textarea, TimePicker, Toggle as ToggleInput, Tooltip, registerFontAwesomeIcons };
+interface TooltipProps {
+    id: string;
+    clickToShow?: boolean;
+    delayShow?: number;
+    delayHide?: number;
+    children: React.ReactNode;
+    zIndex?: number;
+    place?: PlacesType;
+    [key: string]: any;
+}
+declare const Tooltip: ({ id, clickToShow, delayShow, delayHide, children, zIndex, place, ...rest }: TooltipProps) => react_jsx_runtime.JSX.Element;
+
+interface PaginationProps {
+    totalPages: number;
+    currentPage?: number;
+    className?: string;
+    onChange?: (value: number) => void;
+}
+
+declare const Pagination: ({ totalPages, currentPage, onChange, className, ...rest }: PaginationProps) => react_jsx_runtime.JSX.Element;
+
+interface CirclePulseProps {
+    size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    className?: string;
+    [key: string]: any;
+}
+declare function CirclePulse({ size, className, ...rest }: CirclePulseProps): react_jsx_runtime.JSX.Element;
+
+declare function BarSpinner({ width, id, height, className, ...rest }: {
+    'data-testid'?: string;
+    width?: number;
+    id?: string;
+    height?: number;
+    className?: string;
+    [key: string]: any;
+}): react_jsx_runtime.JSX.Element;
+
+export { Badge, BarSpinner, Button, Card, Checkbox, CirclePulse, Col, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, Menu, Modal, Pagination, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, Select as SelectInput, SingleInputDatePicker, Skeleton, Table, TanstackTable, LabeledTextarea as Textarea, TimePicker, Toggle as ToggleInput, Tooltip, registerFontAwesomeIcons };

package/lib/index.esm.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] {
@@ -2477,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);
 }