@indico-data/design-system 2.58.2 → 2.59.0

package/lib/components/index.d.ts

@@ -27,3 +27,4 @@ export { BarSpinner } from './loading-indicators/BarSpinner/BarSpinner';
 export { CirclePulse } from './loading-indicators/CirclePulse/CirclePulse';
 export { Truncate } from './truncate';
 export { toast, ToastContainer } from 'react-toastify';
+export { Stepper } from './stepper';

package/lib/components/stepper/Stepper.d.ts

@@ -0,0 +1,2 @@
+import { StepperProps } from './types';
+export declare const Stepper: ({ currentStep: externalCurrentStep, legendHeader, legendFooter, steps, onBackClick, onNextClick, onFinishClick, children, onStepClick, }: StepperProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/stepper/Stepper.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Stepper } from './Stepper';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof Stepper>;
+export declare const CommonExampleStory: Story;
+export declare const MixedExampleStory: Story;
+export declare const RequiredStepsStory: Story;
+export declare const OptionalStepsStory: Story;

package/lib/components/stepper/__tests__/Stepper.tests.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/stepper/components/BackNavigation.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    isDisabled: boolean;
+    onBackClick: () => void;
+};
+export declare const BackNavigation: ({ isDisabled, onBackClick }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/stepper/components/Legend.d.ts

@@ -0,0 +1,2 @@
+import { StepperLegendProps } from '../types';
+export declare const Legend: ({ currentStep, steps, onStepClick }: StepperLegendProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/stepper/components/NextNavigation.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    isLastStep: boolean;
+    onNextClick: () => void;
+    onFinishClick: () => void;
+    isDisabled: boolean;
+};
+export declare const NextNavigation: ({ isLastStep, onNextClick, onFinishClick, isDisabled }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/stepper/examples/MixedExample.d.ts

@@ -0,0 +1 @@
+export declare const MixedExample: () => import("react/jsx-runtime").JSX.Element;

package/lib/components/stepper/examples/OptionalStepsExample.d.ts

@@ -0,0 +1 @@
+export declare const OptionalStepsExample: () => import("react/jsx-runtime").JSX.Element;

package/lib/components/stepper/examples/RequiredStepsExample.d.ts

@@ -0,0 +1 @@
+export declare const RequiredStepsExample: () => import("react/jsx-runtime").JSX.Element;

package/lib/components/stepper/examples/commonExample/CommonExample.d.ts

@@ -0,0 +1 @@
+export declare const CommonExample: () => import("react/jsx-runtime").JSX.Element;

package/lib/components/stepper/examples/commonExample/steps/StepOne.d.ts

@@ -0,0 +1,3 @@
+export declare const StepOne: ({ onCompletion }: {
+    onCompletion: () => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/components/stepper/examples/commonExample/steps/StepThree.d.ts

@@ -0,0 +1,3 @@
+export declare const StepThree: ({ onCompletion }: {
+    onCompletion: () => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/components/stepper/examples/commonExample/steps/StepTwo.d.ts

@@ -0,0 +1,3 @@
+export declare const StepTwo: ({ onCompletion }: {
+    onCompletion: () => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/components/stepper/examples/constants.d.ts

@@ -0,0 +1,61 @@
+export declare const INFO_BOX_STYLE: {
+    padding: string;
+    color: string;
+    marginBottom: string;
+    borderRadius: string;
+    border: string;
+};
+export declare const STATUS_INDICATOR_STYLE: (color: string) => {
+    width: string;
+    height: string;
+    borderRadius: string;
+    backgroundColor: string;
+    display: string;
+    marginRight: string;
+};
+export declare const MIXED_EXAMPLE_STEPS: {
+    id: string;
+    title: string;
+    isCompleted: boolean;
+    isOptional: boolean;
+    isSidebarEnabled: boolean;
+    isNextDisabled: boolean;
+}[];
+export declare const REQUIRED_STEPS: {
+    id: string;
+    title: string;
+    isCompleted: boolean;
+    isOptional: boolean;
+    isSidebarEnabled: boolean;
+    isNextDisabled: boolean;
+}[];
+export declare const OPTIONAL_STEPS: {
+    id: string;
+    title: string;
+    isCompleted: boolean;
+    isOptional: boolean;
+    isSidebarEnabled: boolean;
+    isNextDisabled: boolean;
+}[];
+export declare const STEP_CONTENT_DATA: {
+    step1: {
+        title: string;
+        content: string;
+    };
+    step2: {
+        title: string;
+        content: string;
+    };
+    step3: {
+        title: string;
+        content: string;
+    };
+    step4: {
+        title: string;
+        content: string;
+    };
+    step5: {
+        title: string;
+        content: string;
+    };
+};

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

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

package/lib/components/stepper/types.d.ts

@@ -0,0 +1,24 @@
+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/lib/index.css

@@ -2269,9 +2269,9 @@ form {
   border-radius: var(--pf-rounded-lg);
   width: 100%;
 }
-.tanstack-table.is-loading {
+.tanstack-table .is-loading {
   border: var(--pf-border-thin) solid var(--pf-border-color);
-  height: 100%;
+  height: 350px;
   width: 100%;
 }
 .tanstack-table__thead {
@@ -2674,6 +2674,104 @@ form {
   --toastify-color-progress-bgo: 0.2;
 }
 
+:root [data-theme=dark] {
+  --pf-stepper-background-color: var(--pf-primary-color-600);
+  --pf-stepper-legend-background-color: var(--pf-tertiary-color-600);
+  --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);
+  --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);
+  --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 .stepper-body {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+.stepper .stepper-body .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 .stepper-navigation-back {
+  margin-right: var(--pf-margin-2);
+}
+.stepper .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;
+}
+.stepper .legend-header {
+  margin-bottom: var(--pf-margin-4);
+}
+.stepper .legend-body {
+  margin-bottom: var(--pf-margin-4);
+}
+.stepper .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;
+}
+.stepper .stepper-legend-circle.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);
+}
+.stepper .stepper-legend-circle.current {
+  background-color: var(--pf-stepper-legend-circle-current-background-color);
+}
+.stepper .stepper-legend-line {
+  width: 1px;
+  height: 30px;
+  min-height: 100%;
+  background-color: var(--pf-stepper-legend-line-background-color);
+  margin-left: 12px;
+}
+.stepper .stepper-legend-line--completed {
+  background-color: var(--pf-stepper-legend-line-completed-background-color);
+}
+.stepper .stepper-legend-step {
+  display: flex;
+  align-items: center;
+}
+.stepper .stepper-legend-step .btn {
+  padding: 0;
+  margin-left: var(--pf-margin-2);
+  color: var(--pf-stepper-legend-step-text-color);
+}
+.stepper .stepper-legend-step--current-step .btn {
+  color: var(--pf-stepper-legend-step-current-text-color);
+  text-decoration: underline;
+}
+.stepper .stepper-legend-step--disabled-step .btn {
+  color: var(--pf-stepper-legend-step-disabled-text-color);
+}
+
 :root [data-theme=light] {
   --sheets-background-color: var(--pf-gray-color-100);
 }

package/lib/index.d.ts

@@ -3,7 +3,7 @@ import { UseFloatingOptions } from '@floating-ui/react-dom';
 export * from '@floating-ui/react-dom';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ContainerProps, RowProps, ColProps } from 'react-grid-system';
-import React$1, { CSSProperties, MouseEventHandler, ReactElement } from 'react';
+import React$1, { CSSProperties, MouseEventHandler, ReactElement, ReactNode } from 'react';
 import { IDataTableProps, Direction as Direction$1, TableColumn as TableColumn$1 } from 'react-data-table-component';
 import { CSSObject } from 'styled-components';
 import { Props as Props$4 } from 'react-select';
@@ -618,6 +618,27 @@ declare function BarSpinner({ width, id, height, className, ...rest }: {
     [key: string]: any;
 }): react_jsx_runtime.JSX.Element;
 
+interface StepperProps {
+    steps: Step[];
+    currentStep?: number;
+    legendHeader?: ReactNode;
+    legendFooter?: ReactNode;
+    onBackClick: () => void;
+    onNextClick: () => void;
+    onFinishClick: () => void;
+    children: React.ReactNode;
+    onStepClick: (step: number) => void;
+}
+interface Step {
+    label: string;
+    isCompleted?: boolean;
+    isNextDisabled?: boolean;
+    isOptional?: boolean;
+    isSidebarEnabled?: boolean;
+}
+
+declare const Stepper: ({ currentStep: externalCurrentStep, legendHeader, legendFooter, steps, onBackClick, onNextClick, onFinishClick, children, onStepClick, }: StepperProps) => react_jsx_runtime.JSX.Element;
+
 interface TruncateProps {
     lineClamp?: number;
     truncateString: string;
@@ -628,4 +649,4 @@ interface TruncateProps {
 
 declare const Truncate: ({ lineClamp, truncateString, hasTooltip, tooltipId, ...rest }: TruncateProps) => react_jsx_runtime.JSX.Element;
 
-export { Badge, BarSpinner, Button, Card, Checkbox, CirclePulse, Col, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, Menu, Modal, Pagination, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, Select as SelectInput, SingleInputDatePicker, Skeleton, Table, TanstackTable, LabeledTextarea as Textarea, TimePicker, Toggle as ToggleInput, Tooltip, Truncate, registerFontAwesomeIcons };
+export { Badge, BarSpinner, Button, Card, Checkbox, CirclePulse, Col, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, Menu, Modal, Pagination, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, Select as SelectInput, SingleInputDatePicker, Skeleton, Stepper, Table, TanstackTable, LabeledTextarea as Textarea, TimePicker, Toggle as ToggleInput, Tooltip, Truncate, registerFontAwesomeIcons };

package/lib/index.esm.css

@@ -2269,9 +2269,9 @@ form {
   border-radius: var(--pf-rounded-lg);
   width: 100%;
 }
-.tanstack-table.is-loading {
+.tanstack-table .is-loading {
   border: var(--pf-border-thin) solid var(--pf-border-color);
-  height: 100%;
+  height: 350px;
   width: 100%;
 }
 .tanstack-table__thead {
@@ -2674,6 +2674,104 @@ form {
   --toastify-color-progress-bgo: 0.2;
 }
 
+:root [data-theme=dark] {
+  --pf-stepper-background-color: var(--pf-primary-color-600);
+  --pf-stepper-legend-background-color: var(--pf-tertiary-color-600);
+  --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);
+  --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);
+  --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 .stepper-body {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+.stepper .stepper-body .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 .stepper-navigation-back {
+  margin-right: var(--pf-margin-2);
+}
+.stepper .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;
+}
+.stepper .legend-header {
+  margin-bottom: var(--pf-margin-4);
+}
+.stepper .legend-body {
+  margin-bottom: var(--pf-margin-4);
+}
+.stepper .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;
+}
+.stepper .stepper-legend-circle.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);
+}
+.stepper .stepper-legend-circle.current {
+  background-color: var(--pf-stepper-legend-circle-current-background-color);
+}
+.stepper .stepper-legend-line {
+  width: 1px;
+  height: 30px;
+  min-height: 100%;
+  background-color: var(--pf-stepper-legend-line-background-color);
+  margin-left: 12px;
+}
+.stepper .stepper-legend-line--completed {
+  background-color: var(--pf-stepper-legend-line-completed-background-color);
+}
+.stepper .stepper-legend-step {
+  display: flex;
+  align-items: center;
+}
+.stepper .stepper-legend-step .btn {
+  padding: 0;
+  margin-left: var(--pf-margin-2);
+  color: var(--pf-stepper-legend-step-text-color);
+}
+.stepper .stepper-legend-step--current-step .btn {
+  color: var(--pf-stepper-legend-step-current-text-color);
+  text-decoration: underline;
+}
+.stepper .stepper-legend-step--disabled-step .btn {
+  color: var(--pf-stepper-legend-step-disabled-text-color);
+}
+
 :root [data-theme=light] {
   --sheets-background-color: var(--pf-gray-color-100);
 }