@indico-data/design-system 1.0.56 → 1.0.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "1.0.56",
+  "version": "1.0.58",
   "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/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/WizardWithSidebar/WizardWithSidebar.styles.ts

@@ -10,12 +10,13 @@ export const StyledWizardWithSidebar = styled.div<{
   ['data-cy']?: string;
   id?: string;
 }>`
-  display: inline-flex;
+  height: 750px;
+  display: flex;
+  /* display: flex;
   /* min-height: 455px; */
   background-color: ${(props) => (props.backgroundcolor ? props.backgroundcolor : 'currentColor')};
   color: ${(props) => (props.color ? props.color : 'inherit')};
   border-radius: 4px;
-
   h2 {
     font-size: ${TYPOGRAPHY.fontSize.subheadLarge};
     margin-bottom: ${SPACING.md};
@@ -63,18 +64,32 @@ export const StyledWizardWithSidebar = styled.div<{
     }
   }
 
+  .wizard-content__wrapper {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    flex-direction: column;
+    height: 100%;
+  }
   .wizard-content {
-    /* min-width: 660px; */
+    width: 100%;
     padding: 30px;
 
     .wizard-content__header {
-      /* min-height: 70px; */
+      flex: 0 0 100%;
     }
     .wizard-content__body {
-      /* min-height: 520px; */
+      flex: 0 0 100%;
     }
   }
 
+  .wizard-actions {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: end;
+  }
+
   nav {
     display: flex;
     align-items: center;
@@ -84,19 +99,22 @@ export const StyledWizardWithSidebar = styled.div<{
     padding-right: 0 !important;
     margin-top: ${SPACING.md};
   }
-
   .wizard-buttons {
     display: flex;
     align-items: center;
     font-size: ${TYPOGRAPHY.fontSize.subheadSmall};
 
     button {
+      width: 200px;
+      text-align: center;
+      display: flex;
+      justify-content: center;
       ${(props) =>
         props.buttoncolor &&
         css`
           background-color: ${props.buttoncolor};
           color: ${props.backgroundcolor || 'inherit'};
-        `}
+        `};
     }
 
     button.outline {
@@ -113,6 +131,7 @@ export const StyledWizardWithSidebar = styled.div<{
       font-size: inherit;
       margin-right: 1em;
       background-color: inherit;
+      width: auto;
       ${(props) =>
         props.buttoncolor &&
         css`

package/src/components/WizardWithSidebar/WizardWithSidebar.tsx

@@ -200,51 +200,53 @@ export function WizardWithSidebar(props: Props) {
           );
         })}
       </div>
-
       <div className="wizard-content">
-        <div className="wizard-content__header">
-          <h2>{currentStep}</h2>
-        </div>
-        <div className="wizard-content__body">{children}</div>
-
-        <nav>
-          <div className="wizard-buttons">
-            <Button onClick={() => setOpenCancelConfirm(true)} variant="link-style">
-              Cancel
-            </Button>
+        <div className="wizard-content__wrapper">
+          <div className="wizard-content__items">
+            <div className="wizard-content__header">
+              <h2>{currentStep}</h2>
+            </div>
+            <div className="wizard-content__body">{children}</div>
+          </div>
+          <nav className="wizard-actions">
+            <div className="wizard-buttons">
+              <Button onClick={() => setOpenCancelConfirm(true)} variant="link-style">
+                Cancel
+              </Button>
 
-            {steps.indexOf(currentStep) !== 0 && (
-              <IconButton
-                variant="outline"
-                iconName="fa-arrow-left"
-                label="Previous Step"
-                onPress={prevStep}
-                isDisabled={disablePrevStep}
-              />
-            )}
+              {steps.indexOf(currentStep) !== 0 && (
+                <IconButton
+                  variant="outline"
+                  iconName="fa-arrow-left"
+                  label="Previous Step"
+                  onPress={prevStep}
+                  isDisabled={disablePrevStep}
+                />
+              )}
 
-            {onLastStep ? (
-              <IconButton
-                variant="primary"
-                iconName="check"
-                busy={isBusy}
-                label={isBusy ? submitProcessing : submitButtonLabel}
-                onPress={handleNextPress}
-                isDisabled={disableSubmit}
-              />
-            ) : (
-              <IconButton
-                variant="primary"
-                iconSide="end"
-                iconName="fa-arrow-right"
-                label="Next Step"
-                onPress={handleNextPress}
-                isDisabled={disableNextStep}
-                {...nextButtonProps}
-              />
-            )}
-          </div>
-        </nav>
+              {onLastStep ? (
+                <IconButton
+                  variant="primary"
+                  iconName="check"
+                  busy={isBusy}
+                  label={isBusy ? submitProcessing : submitButtonLabel}
+                  onPress={handleNextPress}
+                  isDisabled={disableSubmit}
+                />
+              ) : (
+                <IconButton
+                  variant="primary"
+                  iconSide="end"
+                  iconName="fa-arrow-right"
+                  label="Next Step"
+                  onPress={handleNextPress}
+                  isDisabled={disableNextStep}
+                  {...nextButtonProps}
+                />
+              )}
+            </div>
+          </nav>
+        </div>
       </div>
 
       <ConfirmModal

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,6 +58,7 @@ export {
   StyledWizard,
   TextTruncate,
   Toggle,
+  Tooltip,
   WizardWithSidebar,
 } from './components';
 

package/lib/components/Navigation/Drawer/constants.d.ts

@@ -1,3 +0,0 @@
-import { ListItem } from './types';
-export declare const navigationItems: ListItem[];
-export declare const footerItems: ListItem[];

package/lib/components/containment/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/components/containment/Tooltip/Tooltip.stories.d.ts

@@ -1,6 +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;

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

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