@indico-data/design-system 2.53.0 → 2.54.0

package/package.json

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

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}
+    />
+  );
+}

package/src/components/tanstackTable/components/TableBody/TableBody.tsx

@@ -2,7 +2,7 @@ import { flexRender, Table } from '@tanstack/react-table';
 import { Row } from '@tanstack/react-table';
 import classNames from 'classnames';
 import { getTdStyles } from '../../helpers';
-import { CirclePulse } from '@/legacy/components/loading-indicators/CirclePulse';
+import { CirclePulse } from '@/components/loading-indicators/CirclePulse';
 import { Dispatch, SetStateAction } from 'react';
 
 export type Props<T> = {

package/src/components/tooltip/Tooltip.mdx

@@ -0,0 +1,25 @@
+import { Canvas, Meta, Controls, Story } from '@storybook/blocks';
+import * as Tooltip from './Tooltip.stories';
+
+<Meta title="Utilities/Tooltip" name="Tooltip" of={Tooltip} />
+
+# Tooltip
+
+The tooltip component is simply a wrapper around react-tooltip(https://www.npmjs.com/package/react-tooltip). It is meant to serve as a package include as well as style wrapper.
+
+<Canvas of={Tooltip.Default} />
+
+### The following props are available for the Tooltip component:
+
+<Controls of={Tooltip.Default} />
+
+
+## Usage
+In the example below, the tooltip is triggered by hovering over the icon. The `data-tooltip-id` attribute is used to match the tooltip to the icon. IDs should be unique when rendering multiple tooltips on the same view.
+
+```tsx
+<Icon icon="info" data-tooltip-id="tooltip-1" />
+<Tooltip id="tooltip-1">
+  <div>Tooltip Content</div>
+</Tooltip>
+```

package/src/components/tooltip/Tooltip.stories.tsx

@@ -0,0 +1,113 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Tooltip } from './Tooltip';
+import { Col, Container, Row } from '../grid';
+import { Button } from '../button';
+
+const meta: Meta = {
+  title: 'Utilities/Tooltip',
+  component: Tooltip,
+  argTypes: {
+    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',
+        },
+      },
+    },
+    place: {
+      control: 'select',
+      description: 'The placement of the tooltip',
+      options: ['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom'],
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'top | top-start | top-end | right | right-start | right-end | bottom',
+        },
+      },
+    },
+    clickToShow: {
+      control: 'boolean',
+      description: 'Whether the tooltip should be shown on click',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    delayShow: {
+      control: 'number',
+      description: 'The delay in milliseconds before the tooltip is shown',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'number',
+        },
+      },
+    },
+    delayHide: {
+      control: 'number',
+      description: 'The delay in milliseconds before the tooltip is hidden',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'number',
+        },
+      },
+    },
+    zIndex: {
+      control: 'number',
+      description: 'This is an override for the z-index of the tooltip',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'number',
+        },
+      },
+    },
+    children: {
+      control: false,
+      description: 'The content of the tooltip',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'React.ReactNode',
+        },
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tooltip>;
+
+export const Default: Story = {
+  args: {
+    place: 'bottom',
+    id: 'tooltip-1',
+    clickToShow: false,
+    delayShow: 0,
+    delayHide: 0,
+    zIndex: 1000,
+  },
+
+  render: (args) => {
+    return (
+      <Container>
+        <Row>
+          <Col sm={4}>
+            <Button ariaLabel="Tooltip Button" data-tooltip-id="tooltip-1">
+              Tooltip!
+            </Button>
+            <Tooltip {...args}>Tooltip Content</Tooltip>
+          </Col>
+        </Row>
+      </Container>
+    );
+  },
+};

package/src/components/tooltip/Tooltip.tsx

@@ -0,0 +1,38 @@
+import { PlacesType, Tooltip as ReactTooltip } from 'react-tooltip';
+
+interface TooltipProps {
+  id: string;
+  clickToShow?: boolean;
+  delayShow?: number;
+  delayHide?: number;
+  children: React.ReactNode;
+  zIndex?: number;
+  place?: PlacesType;
+  [key: string]: any;
+}
+
+export const Tooltip = ({
+  id,
+  clickToShow,
+  delayShow,
+  delayHide,
+  children,
+  zIndex = 1000,
+  place = 'top',
+  ...rest
+}: TooltipProps) => {
+  return (
+    <ReactTooltip
+      border="solid 1px var(--pf-border-color)"
+      id={id}
+      place={place}
+      openOnClick={clickToShow}
+      delayShow={delayShow}
+      delayHide={delayHide}
+      style={{ zIndex }}
+      {...rest}
+    >
+      {children}
+    </ReactTooltip>
+  );
+};

package/src/components/tooltip/styles/Tooltip.scss

@@ -0,0 +1,8 @@
+: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);
+}

package/src/index.ts

@@ -4,8 +4,6 @@ import './setup/setupIcons';
 // This is so consumers of the DS can import floating ui functions/hooks/types from the DS rather than the (peer dependency) floating-ui package
 export * from '@floating-ui/react-dom';
 
-export { BarSpinner, CirclePulse, CircleSpinner, Tooltip } from './legacy/components';
-
 export { Container, Row, Col } from './components/grid';
 export { Button } from './components/button';
 export { Icon } from './components/icons';
@@ -30,6 +28,10 @@ export { Pill } from './components/pill';
 export { Badge } from './components/badge';
 export { Modal } from './components/modal';
 export { TanstackTable } from './components/tanstackTable';
+export { Tooltip } from './components/tooltip';
+export { Pagination } from './components/pagination';
+export { CirclePulse } from './components/loading-indicators/CirclePulse';
+export { BarSpinner } from './components/loading-indicators/BarSpinner/BarSpinner';
 
 // Utilities
 export { registerFontAwesomeIcons } from './setup/setupIcons';

package/src/styles/globals.scss

@@ -74,3 +74,12 @@ a,
 .theme {
   background-color: var(--pf-background-color);
 }
+
+// Tooltip
+.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;
+}

package/src/styles/index.scss

@@ -28,6 +28,9 @@
 @import '../components/tanstackTable/styles/table.scss';
 @import '../components/forms/timePicker/styles/TimePicker.scss';
 @import '../components/pill/styles/Pill.scss';
+@import '../components/tooltip/styles/Tooltip.scss';
+@import '../components/loading-indicators/BarSpinner/styles/BarSpinner.scss';
+@import '../components/loading-indicators/CirclePulse/CirclePulse.scss';
 @import 'sheets'; // Port to an sheets component when we build it
 @import 'typography';
 @import 'colors';

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

@@ -1,15 +0,0 @@
-import React from 'react';
-import { PermafrostComponent } from '../../../types';
-type Props = PermafrostComponent & {
-    questionMark?: boolean;
-    for?: string | null;
-    place?: string;
-    clickToShow?: boolean;
-    delayShow?: number;
-    delayHide?: number;
-    questionMarkClassName?: string;
-    children: React.ReactNode;
-    block?: boolean;
-};
-export declare const Tooltip: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

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

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