@am92/react-design-system 2.9.7 → 2.9.8

package/dist/Components/DsProgressTracker/Components/DsProgressStepper.Component.js

@@ -8,9 +8,14 @@ export const DsProgressStepper = inProps => {
     const props = { ...DsProgressStepperDefaultProps, ...inProps };
     const renderStepIcon = (stepProps) => {
         const { active, error, completed, icon } = stepProps;
-        if (error) {
+        const isWarning = typeof icon === 'string' && icon === 'warning';
+        const isError = error || (typeof icon === 'string' && icon === 'error');
+        if (isError) {
             return (_jsx(DsRemixIcon, { className: 'ri-close-circle-fill', sx: { color: 'var(--ds-colour-iconNegative)' } }));
         }
+        if (isWarning) {
+            return (_jsx(DsRemixIcon, { className: 'ri-error-warning-fill', sx: { color: 'var(--ds-colour-supportWarning)' } }));
+        }
         if (completed) {
             return (_jsx(DsRemixIcon, { className: 'ri-checkbox-circle-fill', sx: { color: 'var(--ds-colour-iconPositive)' } }));
         }

package/dist/Components/DsProgressTracker/Components/DsProgressTrackerHeader.Component.js

@@ -5,7 +5,7 @@ import { DsRemixIcon } from '../../DsRemixIcon';
 import { DsStack } from '../../DsStack';
 import { DsTypography } from '../../DsTypography';
 export const DsProgressTrackerHeader = (props) => {
-    const { activeStep, steps, nextStepLabelPrefix, dense, onClick, StepperProps, ...wrapperProps } = props;
+    const { activeStep, steps, nextStepLabelPrefix, dense, onClick, StepperProps, stepLabelVisible, lastStepLabelText, ...wrapperProps } = props;
     const currentStep = steps[activeStep] || {};
     const nextStepIndex = activeStep + 1;
     const nextStep = steps[nextStepIndex];
@@ -14,13 +14,13 @@ export const DsProgressTrackerHeader = (props) => {
     const fillPercentage = Math.round((nextStepIndex / steps.length) * 100);
     const renderStepsLabel = () => {
         return (_jsx(DsTypography, { component: 'div', textAlign: 'right', color: 'var(--ds-colour-typoTertiary)', variant: 'subheadingSemiboldDefault', children: isNextStepLastStep
-                ? 'Yay! you are almost done'
+                ? lastStepLabelText
                 : `${nextStepLabelPrefix} ${nextStep.stepName}` }));
     };
     return (_jsx(_Fragment, { children: dense ? (_jsxs(DsStack, { sx: {
                 backgroundColor: 'var(--ds-colour-surfaceSecondary)',
                 ...wrapperProps?.sx
-            }, ...wrapperProps, children: [_jsxs(DsStack, { direction: 'row', justifyContent: 'space-between', px: 'var(--ds-spacing-bitterCold)', pt: 'var(--ds-spacing-frostbite)', pb: 'calc(var(--ds-spacing-frostbite) - var(--ds-spacing-deepFreeze))', onClick: onClick, children: [_jsx(DsTypography, { variant: 'subheadingSemiboldDefault', children: `STEP ${activeStep + 1} OF ${steps.length}` }), _jsxs(DsStack, { direction: 'row', spacing: 'var(--ds-spacing-frostbite)', children: [haveNextStep && renderStepsLabel(), props['ds-variant'] !== 'header' && (_jsx(DsRemixIcon, { fontSize: 'bitterCold', className: 'ri-arrow-right-s-line' }))] })] }), _jsx(DsLinearProgress, { color: 'secondary', value: fillPercentage, variant: 'determinate', sx: {
+            }, ...wrapperProps, children: [_jsxs(DsStack, { direction: 'row', justifyContent: 'space-between', px: 'var(--ds-spacing-bitterCold)', pt: 'var(--ds-spacing-frostbite)', pb: 'calc(var(--ds-spacing-frostbite) - var(--ds-spacing-deepFreeze))', onClick: onClick, children: [_jsx(DsTypography, { variant: 'subheadingSemiboldDefault', children: `STEP ${activeStep + 1} OF ${steps.length}` }), _jsxs(DsStack, { direction: 'row', spacing: 'var(--ds-spacing-frostbite)', children: [haveNextStep && stepLabelVisible && renderStepsLabel(), props['ds-variant'] !== 'header' && (_jsx(DsRemixIcon, { fontSize: 'bitterCold', className: 'ri-arrow-right-s-line' }))] })] }), _jsx(DsLinearProgress, { color: 'secondary', value: fillPercentage, variant: 'determinate', sx: {
                         backgroundColor: 'transparent',
                         height: '2px',
                         '.MuiLinearProgress-bar1Determinate	': {
@@ -33,5 +33,5 @@ export const DsProgressTrackerHeader = (props) => {
                 backgroundColor: 'var(--ds-colour-surfaceBackground)',
                 cursor: props['ds-variant'] === 'default' ? 'pointer' : 'unset',
                 ...wrapperProps?.sx
-            }, spacing: 'var(--ds-spacing-bitterCold)', direction: 'row', onClick: onClick, ...wrapperProps, children: [_jsx(DsProgressIndicator, { activeStep: activeStep + 1, steps: steps.length }), _jsxs(DsStack, { flexGrow: 1, spacing: 'var(--ds-spacing-quickFreeze)', children: [_jsx(DsTypography, { component: 'div', textAlign: 'right', color: 'var(--ds-colour-actionSecondary)', variant: 'headingBoldExtraSmall', children: currentStep.stepName }), haveNextStep && renderStepsLabel()] })] })) }));
+            }, spacing: 'var(--ds-spacing-bitterCold)', direction: 'row', onClick: onClick, ...wrapperProps, children: [_jsx(DsProgressIndicator, { activeStep: activeStep + 1, steps: steps.length }), _jsxs(DsStack, { flexGrow: 1, spacing: 'var(--ds-spacing-quickFreeze)', children: [_jsx(DsTypography, { component: 'div', textAlign: 'right', color: 'var(--ds-colour-actionSecondary)', variant: 'headingBoldExtraSmall', children: currentStep.stepName }), haveNextStep && stepLabelVisible && renderStepsLabel()] })] })) }));
 };

package/dist/Components/DsProgressTracker/DsProgressStepper.Types.d.ts

@@ -4,7 +4,12 @@ import { DsStepperProps } from '../DsStepper';
 export interface DsProgressStepperStepProps {
     stepName?: string;
     error?: DsStepLabelProps['error'];
-    icon?: DsStepLabelProps['icon'];
+    /**
+   * Icon to display for the step. Can be a standard icon or special values:
+   * - 'warning': Shows a warning icon with warning color
+   * - 'error': Shows an error icon
+   */
+    icon?: Exclude<DsStepLabelProps['icon'], string> | 'warning' | 'error';
     optional?: DsStepLabelProps['optional'];
     completed?: DsStepProps['completed'];
     disabled?: DsStepProps['disabled'];

package/dist/Components/DsProgressTracker/DsProgressTracker.Types.d.ts

@@ -28,6 +28,14 @@ export interface DsProgressTrackerProps extends DsStackProps {
      * This prop can be used to provide a custom prefix string to the step label.
      */
     nextStepLabelPrefix?: React.ReactNode;
+    /**
+     * This prop can be used to hide/show the label on progress tacker header.
+     */
+    stepLabelVisible?: boolean;
+    /**
+     * This prop can be used to show custom label text for last step.
+     */
+    lastStepLabelText?: string;
 }
 export declare const DsProgressTrackerDefaultProps: DsProgressTrackerProps;
 export interface DsProgressTrackerState {

package/dist/Components/DsProgressTracker/DsProgressTracker.Types.js

@@ -4,8 +4,9 @@ export const DsProgressTrackerDefaultProps = {
     dense: false,
     steps: [],
     StepperProps: { orientation: 'vertical' },
-    sx: {},
-    nextStepLabelPrefix: 'Next Step : '
+    nextStepLabelPrefix: 'Next Step : ',
+    stepLabelVisible: true,
+    lastStepLabelText: 'Yay! you are almost done'
 };
 export const DsProgressTrackerDefaultState = {
     open: false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@am92/react-design-system",
-  "version": "2.9.7",
+  "version": "2.9.8",
   "description": "ReactJS Design System using Material UI",
   "sideEffects": false,
   "types": "dist/index.d.ts",