@indico-data/design-system 2.58.1 → 2.59.0

package/src/components/stepper/examples/commonExample/steps/StepOne.tsx

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import { Input } from '../../../..';
+import { Col, Row } from '../../../..';
+
+export const StepOne = ({ onCompletion }: { onCompletion: () => void }) => {
+  const [formValues, setFormValues] = useState({
+    applicationName: '',
+    applicationVersion: '',
+  });
+
+  const handleInputChange = (field: string, value: string) => {
+    const updatedValues = {
+      ...formValues,
+      [field]: value,
+    };
+    setFormValues(updatedValues);
+    if (
+      updatedValues.applicationName.trim() !== '' &&
+      updatedValues.applicationVersion.trim() !== ''
+    ) {
+      onCompletion();
+    }
+  };
+
+  return (
+    <Row className="py-6">
+      <Col xs={12} className="mb-6">
+        <h3 data-testid="step-1-title" className="mb-2 color-secondary-100">
+          Application Name
+        </h3>
+        <p className="mb-4 color-tertiary-200 subtitle-2">
+          Please enter the name of the application you are publishing.
+        </p>
+        <Input
+          label="Application Name"
+          hasHiddenLabel
+          name="applicationName"
+          value={formValues.applicationName}
+          onChange={(e) => handleInputChange('applicationName', e.target.value)}
+        />
+      </Col>
+      <Col xs={12}>
+        <h3 className="mb-2 color-secondary-100">Application Version</h3>
+        <p className="mb-4 color-tertiary-200 subtitle-2">
+          Please enter the version of the application you are publishing.
+        </p>
+        <Input
+          label="Application Version"
+          hasHiddenLabel
+          name="applicationVersion"
+          value={formValues.applicationVersion}
+          onChange={(e) => handleInputChange('applicationVersion', e.target.value)}
+        />
+      </Col>
+    </Row>
+  );
+};

package/src/components/stepper/examples/commonExample/steps/StepThree.tsx

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import { Input } from '../../../..';
+import { Col, Row } from '../../../..';
+
+export const StepThree = ({ onCompletion }: { onCompletion: () => void }) => {
+  const [formValues, setFormValues] = useState({
+    userEmail: '',
+    userPhone: '',
+  });
+
+  const handleInputChange = (field: string, value: string) => {
+    const updatedValues = {
+      ...formValues,
+      [field]: value,
+    };
+
+    setFormValues(updatedValues);
+
+    if (updatedValues.userEmail.trim() !== '' && updatedValues.userPhone.trim() !== '') {
+      onCompletion();
+    }
+  };
+
+  return (
+    <Row className="py-6">
+      <Col xs={12} className="mb-6">
+        <h3 data-testid="step-3-title" className="mb-2 color-secondary-100">
+          User Email
+        </h3>
+        <p className="mb-4 color-tertiary-200 subtitle-2">
+          Please enter your email address for contact.
+        </p>
+        <Input
+          label="User Email"
+          hasHiddenLabel
+          name="userEmail"
+          value={formValues.userEmail}
+          onChange={(e) => handleInputChange('userEmail', e.target.value)}
+        />
+      </Col>
+      <Col xs={12}>
+        <h3 className="mb-2 color-secondary-100">User Phone</h3>
+        <p className="mb-4 color-tertiary-200 subtitle-2">
+          Please enter your phone number for contact.
+        </p>
+        <Input
+          label="User Phone"
+          hasHiddenLabel
+          name="userPhone"
+          value={formValues.userPhone}
+          onChange={(e) => handleInputChange('userPhone', e.target.value)}
+        />
+      </Col>
+    </Row>
+  );
+};

package/src/components/stepper/examples/commonExample/steps/StepTwo.tsx

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import { Input } from '../../../..';
+import { Col, Row } from '../../../..';
+
+export const StepTwo = ({ onCompletion }: { onCompletion: () => void }) => {
+  const [formValues, setFormValues] = useState({
+    agentName: '',
+    agentDescription: '',
+  });
+
+  const handleInputChange = (field: string, value: string) => {
+    const updatedValues = {
+      ...formValues,
+      [field]: value,
+    };
+    setFormValues(updatedValues);
+    if (updatedValues.agentName.trim() !== '' && updatedValues.agentDescription.trim() !== '') {
+      onCompletion();
+    }
+  };
+
+  return (
+    <Row className="py-6">
+      <Col xs={12} className="mb-6">
+        <h3 data-testid="step-2-title" className="mb-2 color-secondary-100">
+          Agent Name
+        </h3>
+        <p className="mb-4 color-tertiary-200 subtitle-2">Please enter the name of the agent.</p>
+        <Input
+          label="Agent Name"
+          hasHiddenLabel
+          name="agentName"
+          value={formValues.agentName}
+          onChange={(e) => handleInputChange('agentName', e.target.value)}
+        />
+      </Col>
+      <Col xs={12}>
+        <h3 className="mb-2 color-secondary-100">Agent Description</h3>
+        <p className="mb-4 color-tertiary-200 subtitle-2">
+          Please provide a description of what this agent does.
+        </p>
+        <Input
+          label="Agent Description"
+          hasHiddenLabel
+          name="agentDescription"
+          value={formValues.agentDescription}
+          onChange={(e) => handleInputChange('agentDescription', e.target.value)}
+        />
+      </Col>
+    </Row>
+  );
+};

package/src/components/stepper/examples/constants.ts

@@ -0,0 +1,168 @@
+// Common information box style
+export const INFO_BOX_STYLE = {
+  padding: '15px',
+  color: 'var(--pf-font-color)',
+  marginBottom: '20px',
+  borderRadius: '5px',
+  border: '1px solid var(--pf-border-color)',
+};
+
+// Step status indicator styling
+export const STATUS_INDICATOR_STYLE = (color: string) => ({
+  width: '12px',
+  height: '12px',
+  borderRadius: '50%',
+  backgroundColor: color,
+  display: 'inline-block',
+  marginRight: '8px',
+});
+
+// Step data for different examples
+export const MIXED_EXAMPLE_STEPS = [
+  {
+    id: 'step1',
+    title: 'Step 1',
+    isCompleted: false,
+    isOptional: false,
+    isSidebarEnabled: true,
+    isNextDisabled: false,
+  },
+  {
+    id: 'step2',
+    title: 'Step 2',
+    isCompleted: false,
+    isOptional: true,
+    isSidebarEnabled: true,
+    isNextDisabled: false,
+  },
+  {
+    id: 'step3',
+    title: 'Step 3',
+    isCompleted: false,
+    isOptional: true,
+    isSidebarEnabled: true,
+    isNextDisabled: false,
+  },
+  {
+    id: 'step4',
+    title: 'Step 4',
+    isCompleted: false,
+    isOptional: true,
+    isSidebarEnabled: true,
+    isNextDisabled: false,
+  },
+  {
+    id: 'step5',
+    title: 'Step 5',
+    isCompleted: false,
+    isOptional: true,
+    isSidebarEnabled: true,
+    isNextDisabled: false,
+  },
+];
+
+export const REQUIRED_STEPS = [
+  {
+    id: 'step1',
+    title: 'Step 1',
+    isCompleted: false,
+    isOptional: false,
+    isSidebarEnabled: true,
+    isNextDisabled: false,
+  },
+  {
+    id: 'step2',
+    title: 'Step 2',
+    isCompleted: false,
+    isOptional: false,
+    isSidebarEnabled: false,
+    isNextDisabled: false,
+  },
+  {
+    id: 'step3',
+    title: 'Step 3',
+    isCompleted: false,
+    isOptional: false,
+    isSidebarEnabled: false,
+    isNextDisabled: false,
+  },
+  {
+    id: 'step4',
+    title: 'Step 4',
+    isCompleted: false,
+    isOptional: false,
+    isSidebarEnabled: false,
+    isNextDisabled: false,
+  },
+  {
+    id: 'step5',
+    title: 'Step 5',
+    isCompleted: false,
+    isOptional: false,
+    isSidebarEnabled: false,
+    isNextDisabled: false,
+  },
+];
+
+export const OPTIONAL_STEPS = [
+  {
+    id: 'step1',
+    title: 'Step 1',
+    isCompleted: false,
+    isOptional: true,
+    isSidebarEnabled: true,
+    isNextDisabled: false,
+  },
+  {
+    id: 'step2',
+    title: 'Step 2',
+    isCompleted: false,
+    isOptional: true,
+    isSidebarEnabled: true,
+    isNextDisabled: false,
+  },
+  {
+    id: 'step3',
+    title: 'Step 3',
+    isCompleted: false,
+    isOptional: true,
+    isSidebarEnabled: true,
+    isNextDisabled: false,
+  },
+  {
+    id: 'step4',
+    title: 'Step 4',
+    isCompleted: false,
+    isOptional: true,
+    isSidebarEnabled: true,
+    isNextDisabled: false,
+  },
+];
+
+// Step content
+export const STEP_CONTENT_DATA = {
+  step1: {
+    title: 'Basic Information',
+    content:
+      'This is the content for Step 1. In a real application, this might contain form fields for basic information.',
+  },
+  step2: {
+    title: 'Additional Details',
+    content:
+      'This is the content for Step 2. Here you might collect additional details from the user.',
+  },
+  step3: {
+    title: 'Preferences',
+    content: 'This is the content for Step 3. This could be where users set their preferences.',
+  },
+  step4: {
+    title: 'Review',
+    content:
+      'This is the content for Step 4. This might be a review page where users can check their inputs.',
+  },
+  step5: {
+    title: 'Submit',
+    content:
+      'This is the content for Step 5. This could be the final submission step with terms and conditions.',
+  },
+};

package/src/components/stepper/index.ts

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

package/src/components/stepper/styles/Stepper.scss

@@ -0,0 +1,131 @@
+// Common Variables
+:root,
+:root [data-theme='light'],
+:root [data-theme='dark'] {
+}
+
+// Light Theme Specific Variables
+:root [data-theme='light'] {
+}
+
+// Dark Theme Specific Variables
+:root [data-theme='dark'] {
+  // Stepper Legend
+  --pf-stepper-background-color: var(--pf-primary-color-600);
+  --pf-stepper-legend-background-color: var(--pf-tertiary-color-600);
+  // Default Step
+  --pf-stepper-legend-circle-background-color: var(--pf-tertiary-color-450);
+  --pf-stepper-legend-circle-text-color: var(--pf-white-color);
+  --pf-stepper-legend-line-background-color: var(--pf-tertiary-color-450);
+  --pf-stepper-legend-step-text-color: var(--pf-white-color);
+  --pf-stepper-legend-step-disabled-text-color: var(--pf-tertiary-color-450);
+
+  // Completed Step
+  --pf-stepper-legend-circle-completed-background-color: var(--pf-secondary-color);
+  --pf-stepper-legend-circle-completed-text-color: var(--pf-white-color);
+  --pf-stepper-legend-line-completed-background-color: var(--pf-secondary-color);
+  // Current Step
+  --pf-stepper-legend-circle-current-background-color: var(--pf-secondary-color);
+  --pf-stepper-legend-circle-current-border-color: var(--pf-white-color);
+  --pf-stepper-legend-step-current-text-color: var(--pf-white-color);
+  --pf-stepper-legend-step-current-text-color: var(--pf-secondary-color);
+}
+
+.stepper {
+  padding: var(--pf-padding-8);
+  height: 100%;
+  display: grid;
+  grid-template-columns: auto 5fr;
+  gap: var(--pf-margin-8);
+
+  .stepper-body {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+    .stepper-content {
+    }
+    .stepper-actions {
+      display: flex;
+      justify-content: end;
+      align-items: center;
+      padding-top: var(--pf-padding-8);
+      border-top: solid 1px var(--pf-tertiary-color-800);
+      margin-top: var(--pf-margin-8);
+      margin-bottom: var(--pf-margin-8);
+    }
+  }
+
+  .stepper-navigation-back {
+    margin-right: var(--pf-margin-2);
+  }
+
+  .legend {
+    background-color: var(--pf-stepper-legend-background-color);
+    padding: var(--pf-padding-12) var(--pf-padding-8);
+    border-radius: var(--pf-rounded-xl);
+    width: 250px;
+  }
+
+  .legend-header {
+    margin-bottom: var(--pf-margin-4);
+  }
+
+  .legend-body {
+    margin-bottom: var(--pf-margin-4);
+  }
+
+  .stepper-legend-circle {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background-color: var(--pf-stepper-legend-circle-background-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &.completed {
+      background-color: var(--pf-stepper-legend-circle-completed-background-color);
+      border-color: var(--pf-stepper-legend-circle-completed-background-color);
+      color: var(--pf-stepper-legend-circle-completed-text-color);
+    }
+
+    &.current {
+      background-color: var(--pf-stepper-legend-circle-current-background-color);
+    }
+  }
+
+  .stepper-legend-line {
+    width: 1px;
+    height: 30px;
+    min-height: 100%;
+    background-color: var(--pf-stepper-legend-line-background-color);
+    margin-left: 12px;
+
+    &--completed {
+      background-color: var(--pf-stepper-legend-line-completed-background-color);
+    }
+  }
+
+  .stepper-legend-step {
+    display: flex;
+    align-items: center;
+    .btn {
+      padding: 0;
+      margin-left: var(--pf-margin-2);
+      color: var(--pf-stepper-legend-step-text-color);
+    }
+
+    &--current-step {
+      .btn {
+        color: var(--pf-stepper-legend-step-current-text-color);
+        text-decoration: underline;
+      }
+    }
+
+    &--disabled-step {
+      .btn {
+        color: var(--pf-stepper-legend-step-disabled-text-color);
+      }
+    }
+  }
+}

package/src/components/stepper/types.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+
+export interface StepperProps {
+  steps: Step[];
+  currentStep?: number;
+  legendHeader?: ReactNode;
+  legendFooter?: ReactNode;
+  onBackClick: () => void;
+  onNextClick: () => void;
+  onFinishClick: () => void;
+  children: React.ReactNode;
+  onStepClick: (step: number) => void;
+}
+
+export interface StepperLegendProps {
+  currentStep: number;
+  steps?: Step[];
+  onStepClick: (step: number) => void;
+}
+
+export interface Step {
+  label: string;
+  isCompleted?: boolean;
+  isNextDisabled?: boolean;
+  isOptional?: boolean;
+  isSidebarEnabled?: boolean;
+}

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

@@ -64,10 +64,11 @@ export const TableBody = <T,>({
         <tr className="tanstack-table__tbody__tr">
           <td
             className={classNames('tanstack-table__centered-row', {
-              'is-Loading': isLoading,
+              'is-loading': isLoading,
             })}
             colSpan={columnsLength}
           >
+            <h2 className="mb-12">Table is loading...</h2>
             <CirclePulse data-testid="loading-indicator" />
           </td>
         </tr>

package/src/components/tanstackTable/styles/table.scss

@@ -64,9 +64,9 @@
   border-radius: var(--pf-rounded-lg);
   width: 100%;
 
-  &.is-loading {
+  .is-loading {
     border: var(--pf-border-thin) solid var(--pf-border-color);
-    height: 100%;
+    height: 350px;
     width: 100%;
   }
 

package/src/components/toast/Toast.mdx

@@ -1,7 +1,7 @@
 import { Canvas, Meta, Controls, Story } from '@storybook/blocks';
 import * as Toast from './Toast.stories';
 
-<Meta title="Components/Toast" of={Toast} />
+<Meta title="Utilities/Toast" of={Toast} />
 
 # Toast
 

package/src/components/toast/Toast.stories.tsx

@@ -3,7 +3,7 @@ import { toast, ToastContainer } from './index';
 import { Button } from '../button';
 
 const meta: Meta<typeof ToastContainer> = {
-  title: 'Components/Toast',
+  title: 'Utilities/Toast',
   component: ToastContainer,
   argTypes: {
     position: {

package/src/components/truncate/Truncate.stories.tsx

@@ -34,7 +34,7 @@ const meta: Meta<typeof Truncate> = {
     tooltipId: {
       control: 'text',
       description:
-        'The id of the tooltip. If an ID is not provided, it will generate one from nanoid',
+        'The id of the tooltip. If an ID is not provided, it will generate one from uuid',
       table: {
         category: 'Props',
       },

package/src/components/truncate/Truncate.tsx

@@ -1,8 +1,7 @@
-import { nanoid } from 'nanoid';
 import { useState, useEffect, CSSProperties } from 'react';
 import { Tooltip } from '../tooltip';
 import { TruncateProps } from './types';
-
+import { v4 as uuidv4 } from 'uuid';
 export const Truncate = ({
   lineClamp = 0,
   truncateString,
@@ -11,7 +10,7 @@ export const Truncate = ({
   ...rest
 }: TruncateProps) => {
   const [isTruncated, setIsTruncated] = useState(false);
-  const id = (tooltipId ?? nanoid()).replace(/[^a-zA-Z0-9-_]/g, '_');
+  const id = (tooltipId ?? uuidv4()).replace(/[^a-zA-Z0-9-_]/g, '_');
 
   useEffect(() => {
     const checkTruncation = () => {

package/src/components/truncate/__tests__/Truncate.test.tsx

@@ -1,9 +1,9 @@
 import { render, screen } from '@testing-library/react';
 import { Truncate } from '../Truncate';
 
-// Mock nanoid to return a predictable ID
-jest.mock('nanoid', () => ({
-  nanoid: () => 'test-id',
+// Mock uuid to return a predictable ID
+jest.mock('uuid', () => ({
+  v4: () => 'test-id',
 }));
 
 describe('Truncate', () => {

package/src/index.ts

@@ -32,11 +32,13 @@ 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';
-export { Truncate } from './components/truncate';
+export { Stepper } from './components/stepper';
+
 // Utilities
 export { registerFontAwesomeIcons } from './setup/setupIcons';
-export { toast, ToastContainer } from './components/toast';
+export { Truncate } from './components/truncate';
 
+export { toast, ToastContainer } from './components/toast';
 // Types
 export type {
   ColumnDef,

package/src/styles/index.scss

@@ -31,6 +31,7 @@
 @import '../components/loading-indicators/CirclePulse/CirclePulse.scss';
 @import '../components/truncate/styles/Truncate.scss';
 @import '../components/toast/styles/Toast.scss';
+@import '../components/stepper/styles/Stepper.scss';
 @import 'sheets'; // Port to an sheets component when we build it
 @import 'typography';
 @import 'colors';