@indico-data/design-system 2.53.0 → 2.55.0

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

@@ -21,13 +21,14 @@
 @import '../components/menu/styles/Menu.scss';
 @import '../components/floatUI/styles/FloatUI.scss';
 @import '../components/forms/date/datePicker/styles/DatePicker.scss';
-@import '../components/forms/timePicker/styles/TimePicker.scss';
 @import '../components/badge/styles/Badge.scss';
 @import '../components/modal/styles/Modal.scss';
 @import '../components/pagination/styles/Pagination.scss';
 @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/components/forms/timePicker/constants.d.ts

@@ -1,13 +0,0 @@
-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/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;

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

@@ -1 +0,0 @@
-export declare const StyledTooltip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -1,2 +0,0 @@
-export { BarSpinner, CirclePulse, CircleSpinner } from './loading-indicators';
-export { Tooltip } from './Tooltip';

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

@@ -1,7 +0,0 @@
-import React from 'react';
-import type { PermafrostComponent } from '../../../../types';
-type Props = PermafrostComponent & {
-    width?: string;
-};
-export declare function BarSpinner(props: Props): React.ReactElement;
-export {};

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

@@ -1,10 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-import { BarSpinner } from './BarSpinner';
-declare const meta: {
-    component: typeof BarSpinner;
-    title: string;
-    argTypes: {};
-};
-export default meta;
-type Story = StoryObj<typeof BarSpinner>;
-export declare const Normal: Story;

package/lib/legacy/components/loading-indicators/BarSpinner/BarSpinner.styles.d.ts

@@ -1 +0,0 @@
-export declare const StyledBarSpinner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -1,10 +0,0 @@
-import React from 'react';
-import type { PermafrostComponent } from '../../../../types';
-type Props = PermafrostComponent & {
-    color?: string;
-    overallSize?: string | number;
-    rippleSize?: string | number;
-    showRandomMessage?: boolean;
-};
-export declare function CirclePulse(props: Props): React.ReactElement;
-export {};

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

@@ -1,12 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-import { CirclePulse } from './CirclePulse';
-declare const meta: {
-    component: typeof CirclePulse;
-    title: string;
-    argTypes: {};
-};
-export default meta;
-type Story = StoryObj<typeof CirclePulse>;
-export declare const Normal: Story;
-export declare const CustomColor: Story;
-export declare const WithRandomMessage: Story;

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

@@ -1,7 +0,0 @@
-export declare const StyledLoadingIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    overallsize: string;
-    ripplesize: string;
-}>> & string;
-export declare const StyledMessageLoadingIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    overallsize: string;
-}>> & string;

package/lib/legacy/components/loading-indicators/CircleSpinner/CircleSpinner.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import type { PermafrostComponent, IconSizes } from '../../../../types';
-type Props = PermafrostComponent & {
-    ariaLabel?: string;
-    size?: IconSizes;
-    style?: React.CSSProperties;
-    fill?: string;
-};
-export declare function CircleSpinner(props: Props): React.ReactElement;
-export {};

package/lib/legacy/components/loading-indicators/CircleSpinner/CircleSpinner.stories.d.ts

@@ -1,10 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-import { CircleSpinner } from './CircleSpinner';
-declare const meta: {
-    component: typeof CircleSpinner;
-    title: string;
-    argTypes: {};
-};
-export default meta;
-type Story = StoryObj<typeof CircleSpinner>;
-export declare const Normal: Story;

package/lib/legacy/components/loading-indicators/CircleSpinner/index.d.ts

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

package/lib/legacy/components/loading-indicators/index.d.ts

@@ -1,3 +0,0 @@
-export { CircleSpinner } from './CircleSpinner';
-export { BarSpinner } from './BarSpinner';
-export { CirclePulse } from './CirclePulse';

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

@@ -1,21 +0,0 @@
-const hourOptions = Array.from({ length: 12 }, (_, i) => {
-  const num = `${i + 1}`;
-  return {
-    label: num,
-    value: num,
-  };
-});
-
-const minuteOptions = Array.from({ length: 60 }, (_, i) => {
-  const num = `${i}`.padStart(2, '0');
-  return {
-    label: num,
-    value: num,
-  };
-});
-
-const periodOptions = [
-  { label: 'AM', value: 'am' },
-  { label: 'PM', value: 'pm' },
-];
-export { hourOptions, minuteOptions, periodOptions };

package/src/components/forms/timePicker/styles/TimePicker.scss

@@ -1,51 +0,0 @@
-.time-picker-input {
-  cursor: pointer;
-}
-.time-picker-row {
-  width: 150px;
-
-  .select__value-container {
-    text-align: center;
-    cursor: pointer;
-  }
-  .select-wrapper {
-    width: 50px;
-    .select__items {
-      justify-content: center;
-    }
-    .select__menu {
-      height: 230px;
-      padding-bottom: 0;
-      margin-bottom: 0;
-    }
-  }
-  .select__menu-list {
-    max-height: 100%;
-    scrollbar-width: none; /* Firefox */
-    -ms-overflow-style: none; /* IE and Edge */
-    &::-webkit-scrollbar {
-      display: none; /* Chrome, Safari and Opera */
-    }
-    overflow-y: scroll;
-  }
-
-  .hour-menu {
-    .select__menu {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-  .minute-menu {
-    .select__menu {
-      border-radius: 0;
-      border-right: none;
-      border-left: none;
-    }
-  }
-  .period-menu {
-    .select__menu {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-  }
-}

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

@@ -1,107 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-
-import { Tooltip } from './Tooltip';
-
-const meta: Meta<typeof Tooltip> = {
-  component: Tooltip,
-  tags: ['autodocs'],
-  title: 'legacy/Tooltip',
-  args: {},
-};
-
-export default meta;
-type Story = StoryObj<typeof Tooltip>;
-
-function RenderQuestionMark(props: any) {
-  return (
-    <div style={{ height: '500px' }}>
-      <Tooltip for="example-tooltip" {...props}>
-        This is a paragraph
-      </Tooltip>
-
-      <p data-tip data-for="example-tooltip">
-        Hover on text to see tooltip
-      </p>
-    </div>
-  );
-}
-
-function RenderNoQuestionMark(props: any) {
-  return (
-    <>
-      <Tooltip for="example-tooltip">
-        <p>This is a paragraph</p>
-      </Tooltip>
-
-      <p
-        data-tooltip-id="example-tooltip"
-        data-tooltip-place={props.place}
-        style={{ display: 'inline-block', marginTop: '100px' }}
-      >
-        Hover on text to see tooltip
-      </p>
-    </>
-  );
-}
-
-export const Single: Story = {
-  args: {
-    questionMark: true,
-    for: 'example-tooltip',
-    place: 'top',
-    clickToShow: false,
-    delayHide: 0,
-    questionMarkClassName: 'question-mark',
-    children: 'This is a paragraph',
-    block: false,
-  },
-  render: (args) => {
-    return <RenderQuestionMark {...args} />;
-  },
-};
-
-export const NoQuestionMark: Story = {
-  args: {
-    questionMark: false,
-    for: 'example-tooltip',
-    place: 'top',
-    clickToShow: false,
-    delayHide: 0,
-    children: 'This is a paragraph',
-    block: false,
-  },
-  render: (args) => {
-    return <RenderNoQuestionMark {...args} />;
-  },
-};
-
-export const Bottom: Story = {
-  args: {
-    questionMark: false,
-    for: 'example-tooltip',
-    place: 'bottom',
-    clickToShow: false,
-    delayHide: 0,
-    children: 'This is a paragraph',
-    block: false,
-  },
-  render: (args) => {
-    return <RenderNoQuestionMark {...args} />;
-  },
-};
-
-export const Right: Story = {
-  args: {
-    questionMark: false,
-    for: 'example-tooltip',
-    place: 'right',
-    clickToShow: false,
-    delayHide: 0,
-    children: 'This is a paragraph',
-    block: false,
-  },
-  render: (args) => {
-    return <RenderNoQuestionMark {...args} />;
-  },
-};

package/src/legacy/components/Tooltip/Tooltip.styles.ts

@@ -1,64 +0,0 @@
-import styled from 'styled-components';
-
-export const StyledTooltip = styled.div`
-  display: inline-block;
-
-  i:hover {
-    cursor: pointer;
-  }
-
-  p {
-    line-height: 1.4;
-    font-size: 13px;
-  }
-
-  .tool {
-    border-radius: 2px !important;
-    padding: 8px 11px !important;
-    opacity: 1 !important;
-
-    &.place-left:after {
-      border-top: 5px solid transparent !important;
-      border-bottom: 5px solid transparent !important;
-      right: -6px !important;
-      top: 50% !important;
-      margin-top: -9px !important;
-    }
-
-    &.place-left:before {
-      border-left-width: 8px !important;
-      border-left-style: solid !important;
-      margin-top: -10px !important;
-    }
-
-    &.place-right:after {
-      border-top: 5px solid transparent !important;
-      border-bottom: 5px solid transparent !important;
-      left: -6px !important;
-      top: 50% !important;
-      margin-top: -9px !important;
-    }
-
-    &.place-right:before {
-      border-right-width: 8px !important;
-      border-right-style: solid !important;
-      margin-top: -10px !important;
-    }
-
-    &.place-top:after {
-    }
-
-    &.place-top:before {
-      border-top-width: 8px !important;
-      border-top-style: solid !important;
-    }
-
-    &.place-bottom:after {
-    }
-
-    &.place-bottom:before {
-      border-bottom-width: 8px !important;
-      border-bottom-style: solid !important;
-    }
-  }
-`;