@indico-data/design-system 1.0.55 → 1.0.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "1.0.55",
+  "version": "1.0.57",
   "description": "",
   "author": "",
   "main": "lib/index.js",
@@ -24,29 +24,30 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@indico-data/utils": "^0.0.5",
     "@popperjs/core": "^2.11.8",
-    "@react-aria/radio": "^3.10.0",
-    "@react-aria/visually-hidden": "^3.8.8",
-    "@react-types/button": "^3.9.1",
-    "@react-types/checkbox": "^3.6.0",
-    "@react-types/radio": "^3.7.0",
+    "@react-aria/radio": "^3.10.2",
+    "@react-aria/visually-hidden": "^3.8.10",
+    "@react-types/button": "^3.9.2",
+    "@react-types/checkbox": "^3.7.1",
+    "@react-types/radio": "^3.7.1",
     "classnames": "^2.5.1",
     "date-fns": "^3.3.1",
     "focus-trap-react": "^10.2.3",
     "html-webpack-plugin": "^5.6.0",
     "prop-types": "^15.8.1",
-    "react-aria-components": "^1.0.1",
+    "react-aria-components": "^1.1.1",
     "react-day-picker": "^8.10.0",
     "react-modal": "^3.16.1",
     "react-popper": "^2.3.0",
-    "react-stately": "^3.29.1",
+    "react-stately": "^3.30.1",
+    "react-tooltip": "5.26.3",
     "simple-zustand-devtools": "^1.1.0",
     "svgo": "^3.2.0",
     "ts-jest": "^29.1.2",
     "tslib": "^2.6.2",
     "uuid": "^9.0.1",
-    "webpack": "^5.90.1",
+    "webpack": "^5.90.3",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "^5.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.23.9",
@@ -54,40 +55,40 @@
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@react-aria/button": "^3.9.1",
-    "@react-aria/focus": "^3.16.0",
+    "@react-aria/button": "^3.9.3",
+    "@react-aria/focus": "^3.16.2",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-a11y": "^7.6.13",
-    "@storybook/addon-docs": "^7.6.13",
-    "@storybook/addon-essentials": "^7.6.13",
-    "@storybook/addon-interactions": "^7.6.13",
-    "@storybook/addon-links": "^7.6.13",
+    "@storybook/addon-a11y": "^7.6.17",
+    "@storybook/addon-docs": "^7.6.17",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
     "@storybook/addon-onboarding": "^1.0.11",
     "@storybook/addon-styling": "^1.3.7",
     "@storybook/addon-styling-webpack": "^0.0.6",
-    "@storybook/addon-themes": "^7.6.13",
-    "@storybook/blocks": "^7.6.13",
-    "@storybook/react": "^7.6.13",
-    "@storybook/react-webpack5": "^7.6.13",
-    "@storybook/test": "^7.6.13",
+    "@storybook/addon-themes": "^7.6.17",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-webpack5": "^7.6.17",
+    "@storybook/test": "^7.6.17",
     "@storybook/test-runner": "^0.16.0",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
-    "@types/prop-types": "^15",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.18",
+    "@types/prop-types": "^15.7.11",
+    "@types/react": "^18.2.57",
+    "@types/react-dom": "^18.2.19",
     "@types/react-modal": "^3.16.3",
     "@types/styled-components": "^5.1.34",
     "@types/uuid": "^9.0.8",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
     "babel-loader": "^9.1.3",
     "babel-plugin-styled-components": "^2.1.4",
     "babel-preset-react-app": "^10.0.1",
@@ -97,17 +98,17 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.2",
-    "postcss": "^8.4.34",
+    "postcss": "^8.4.35",
     "prettier": "3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.0",
+    "react-router-dom": "^6.22.1",
     "react-select": "^5.8.0",
-    "rollup": "^4.9.6",
+    "rollup": "^4.12.0",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^7.6.13",
+    "storybook": "^7.6.17",
     "styled-components": "^6.1.8",
     "ts-loader": "^9.5.1",
     "tsconfig-paths-webpack-plugin": "^4.1.0",

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

@@ -0,0 +1,107 @@
+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: '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/components/Tooltip/Tooltip.styles.ts

@@ -0,0 +1,76 @@
+import styled from 'styled-components';
+
+import { COLORS } from '@/index';
+
+export const StyledTooltip = styled.div`
+  display: inline-block;
+
+  i:hover {
+    cursor: pointer;
+  }
+
+  p {
+    line-height: 1.4;
+    font-size: 13px;
+  }
+
+  .tool {
+    background: ${COLORS.oxfordBlue} !important;
+    border: 1px solid ${COLORS.baliHai} !important;
+    border-radius: 2px !important;
+    padding: 8px 11px !important;
+    opacity: 1 !important;
+
+    &.place-left:after {
+      border-left-color: ${COLORS.oxfordBlue} !important;
+      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-color: ${COLORS.baliHai} !important;
+      border-left-width: 8px !important;
+      border-left-style: solid !important;
+      margin-top: -10px !important;
+    }
+
+    &.place-right:after {
+      border-right-color: ${COLORS.oxfordBlue} !important;
+      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-color: ${COLORS.baliHai} !important;
+      border-right-width: 8px !important;
+      border-right-style: solid !important;
+      margin-top: -10px !important;
+    }
+
+    &.place-top:after {
+      border-top-color: ${COLORS.oxfordBlue} !important;
+    }
+
+    &.place-top:before {
+      border-top-color: ${COLORS.baliHai} !important;
+      border-top-width: 8px !important;
+      border-top-style: solid !important;
+    }
+
+    &.place-bottom:after {
+      border-bottom-color: ${COLORS.oxfordBlue} !important;
+    }
+
+    &.place-bottom:before {
+      border-bottom-color: ${COLORS.baliHai} !important;
+      border-bottom-width: 8px !important;
+      border-bottom-style: solid !important;
+    }
+  }
+`;

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,71 @@
+// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
+
+import React from 'react';
+
+import { Icon, COLORS } from '@/index';
+import { PermafrostComponent } from '@/types';
+import { Tooltip as ReactTooltip } from 'react-tooltip';
+
+import { StyledTooltip } from './Tooltip.styles';
+
+enum PlacesType {
+  top = 'top',
+  'top-start' = 'top-start',
+  'top-end' = 'top-end',
+  right = 'right',
+  'right-start' = 'right-start',
+  'right-end' = 'right-end',
+  bottom = 'bottom',
+  'bottom-start' = 'bottom-start',
+  'bottom-end' = 'bottom-end',
+  left = 'left',
+  'left-start' = 'left-start',
+  'left-end' = 'left-end',
+}
+
+type Props = PermafrostComponent & {
+  questionMark?: boolean;
+  for?: string | null;
+  place?: string;
+  clickToShow?: boolean;
+  delayShow?: number;
+  delayHide?: number;
+  questionMarkClassName?: string;
+  children: React.ReactNode;
+  block?: boolean;
+};
+
+export const Tooltip = (props: Props) => {
+  return (
+    <StyledTooltip
+      className={props.className}
+      data-cy={props['data-cy']}
+      id={props.id}
+      // this was done in a hurry, consider refactor on next pass.
+      style={{ display: props.block ? 'block' : 'inline-block' }}
+    >
+      {props.questionMark && (
+        <i
+          style={{ color: COLORS.curiousBlue }}
+          className={props.questionMarkClassName}
+          // data-tip={props.clickToShow ? 'custom show' : ''}
+          data-tooltip-id={props.for as string | undefined}
+          data-tooltip-place={(props.place as PlacesType) || 'top'}
+        >
+          <Icon name="fa-question-circle" />
+        </i>
+      )}
+      <ReactTooltip
+        className="tool"
+        // globalEventOff={props.clickToShow ? 'click' : ''}
+        // place={(props.place as PlacesType) || 'top'}
+        openOnClick={props.clickToShow}
+        id={props.for as string | undefined}
+        delayShow={props.delayShow}
+        delayHide={props.delayHide}
+      >
+        {props.children}
+      </ReactTooltip>
+    </StyledTooltip>
+  );
+};

package/src/components/Tooltip/index.ts

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

package/src/components/Wizard/Wizard.stories.tsx

@@ -95,7 +95,7 @@ function StoryRender(props: any) {
 
           <WizardSection>
             <h2 className="section-heading">
-              Team{' '}
+              Team
               <span className="supporting-text" style={{ marginLeft: '0.25em' }}>
                 1
               </span>

package/src/components/index.ts

@@ -1,3 +1,5 @@
+import { Tooltip } from 'react-aria-components';
+
 export { Accordion } from './Accordion';
 export { Section, SectionBlock, SectionBody, SectionHeader, SectionTable } from './basic-section';
 export { Button, IconButton } from './buttons';
@@ -34,3 +36,4 @@ export { WizardWithSidebar } from './WizardWithSidebar';
 export { Drawer } from './Navigation/Drawer';
 export { TextTruncate } from './text-truncate';
 export { Toggle } from './Toggle';
+export { Tooltip } from './Tooltip';

package/src/components/text-truncate/TextTruncate.tsx

@@ -5,11 +5,12 @@ interface TextTruncateProps {
   string: string;
   maxChars: number;
   children?: any;
+  noTitle?: boolean;
 }
 
-export function TextTruncate({ string, maxChars, children }: TextTruncateProps) {
+export function TextTruncate({ string, maxChars, children, noTitle }: TextTruncateProps) {
   return string.length > maxChars ? (
-    <StyledTextTruncate title={string}>
+    <StyledTextTruncate title={noTitle ? undefined : string}>
       {`${string.substring(0, maxChars)}...`}
       {children}
     </StyledTextTruncate>

package/src/index.ts

@@ -58,5 +58,8 @@ export {
   StyledWizard,
   TextTruncate,
   Toggle,
+  Tooltip,
   WizardWithSidebar,
 } from './components';
+
+export { numberUtils, stringUtils, colorUtils } from './utils';