@am92/react-design-system 2.9.6 → 2.9.8

package/dist/Components/DsLink/DsLink.Overrides.d.ts

@@ -6,6 +6,10 @@ export declare const DsLinkOverrides: {
                 cursor: string;
                 textDecorationColor: string;
                 textUnderlinePosition: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
                 '&:visited': {
                     color: string;
                     textDecorationColor: string;
@@ -25,6 +29,7 @@ export declare const DsLinkOverrides: {
                 };
                 '&:focus': {
                     textDecoration: string;
+                    textDecorationThickness: string;
                 };
             };
         };

package/dist/Components/DsLink/DsLink.Overrides.js

@@ -7,6 +7,10 @@ export const DsLinkOverrides = {
                 cursor: 'pointer',
                 textDecorationColor: 'var(--ds-colour-actionSecondary)',
                 textUnderlinePosition: 'under',
+                fontWeight: 'var(--ds-typo-bodyRegularSmall-fontWeight)',
+                fontSize: 'var(--ds-typo-bodyRegularSmall-fontSize)',
+                lineHeight: 'var(--ds-typo-bodyRegularSmall-lineHeight)',
+                letterSpacing: 'var(--ds-typo-bodyRegularSmall-letterSpacing)',
                 '&:visited': {
                     color: 'var(--ds-colour-stateSelectedVisitedTextLink)',
                     textDecorationColor: 'var(--ds-colour-stateSelectedVisitedTextLink)'
@@ -25,7 +29,8 @@ export const DsLinkOverrides = {
                     textDecorationColor: 'var(--ds-colour-typoDisabled)'
                 },
                 '&:focus': {
-                    textDecoration: 'underline'
+                    textDecoration: 'underline',
+                    textDecorationThickness: '2px',
                 }
             }
         }

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/dist/Components/DsTooltip/DsTooltip.Component.d.ts

@@ -1,3 +1,4 @@
-import { FC } from 'react';
+import React from 'react';
 import { DsTooltipProps } from './DsTooltip.Types';
-export declare const DsTooltip: FC<DsTooltipProps>;
+export declare const CustomTooltip: <TWrapper extends React.ElementType = React.ElementType<any, keyof React.JSX.IntrinsicElements>>(InProps: DsTooltipProps<TWrapper>) => import("react/jsx-runtime").JSX.Element;
+export declare const DsTooltip: <TWrapper extends React.ElementType = React.ElementType<any, keyof React.JSX.IntrinsicElements>>(InProps: DsTooltipProps<TWrapper>) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/DsTooltip/DsTooltip.Component.js

@@ -1,21 +1,17 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import Tooltip from '@mui/material/Tooltip';
+import { DsTooltipDefaultProps } from './DsTooltip.Types';
 import { DsTypography } from '../DsTypography';
-import { DsLink } from '../DsLink';
-export const DsTooltip = (props) => {
+export const CustomTooltip = (InProps) => {
+    const props = { ...DsTooltipDefaultProps, ...InProps };
     const renderTitle = () => {
-        const { heading, description, buttonGroup } = props;
-        const tooltipButtonGroup = buttonGroup
-            ? React.cloneElement(buttonGroup, {
-                size: 'small',
-                fullWidth: true,
-                noPadding: true,
-                sx: { bgcolor: 'transparent', mt: 'var(--ds-spacing-bitterCold)' }
-            })
-            : false;
-        return (_jsxs(_Fragment, { children: [heading && (_jsx(DsTypography, { component: "div", variant: "bodyBoldMedium", sx: { mb: 'var(--ds-spacing-glacial)' }, children: heading })), description && (_jsx(DsTypography, { component: "div", variant: "bodyRegularMedium", children: description })), tooltipButtonGroup] }));
+        const { heading, description } = props;
+        return (_jsxs(_Fragment, { children: [heading && (_jsx(DsTypography, { component: 'div', variant: 'bodyBoldMedium', sx: { mb: 'var(--ds-spacing-glacial)' }, children: heading })), description && (_jsx(DsTypography, { component: 'div', variant: 'bodyRegularMedium', children: description }))] }));
     };
-    const { heading, description, buttonGroup, children, ...tooltipProps } = props;
-    return (_jsx(Tooltip, { title: renderTitle(), ...tooltipProps, children: _jsx(DsLink, { component: "span", underline: "always", color: "inherit", variant: "inherit", sx: { textDecorationColor: 'inherit' }, children: children }) }));
+    const { heading, description, slots, slotProps, children, ...tooltipProps } = props;
+    const WrapperComponent = slots?.wrapper || React.Fragment;
+    const wrapperProps = slotProps?.wrapper || {};
+    return (_jsx(Tooltip, { title: renderTitle(), ...tooltipProps, children: _jsx(WrapperComponent, { ...wrapperProps, children: children || null }) }));
 };
+export const DsTooltip = CustomTooltip;

package/dist/Components/DsTooltip/DsTooltip.Overrides.d.ts

@@ -1,6 +1,6 @@
 export declare const DsTooltipOverrides: {
     MuiTooltip: {
-        defaultProps: import("./DsTooltip.Types").DsTooltipProps;
+        defaultProps: import("./DsTooltip.Types").DsTooltipProps<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").LinkTypeMap<{}, "a">>>;
         styleOverrides: {
             popper: {
                 '&[data-popper-placement*="bottom"]': {

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

@@ -1,7 +1,35 @@
 import { TooltipProps } from '@mui/material';
-export interface DsTooltipProps extends Omit<TooltipProps, 'title'> {
+import { DsLink } from '../DsLink';
+type DsTooltipSlots<TWrapper extends React.ElementType = React.ElementType> = TooltipProps['slots'] & {
+    /** This is a slot is used to provide custom component to the wrapping parent of the tooltip children */
+    wrapper?: TWrapper;
+};
+type DsTooltipSlotProps<TWrapper extends React.ElementType = React.ElementType> = TooltipProps['slotProps'] & {
+    /** This is a slot is used to provide props to the custom wrapping parent of the tooltip children */
+    wrapper?: React.ComponentProps<TWrapper>;
+};
+export type DsTooltipProps<TWrapper extends React.ElementType = React.ElementType> = Omit<TooltipProps, 'title' | 'slots' | 'slotProps'> & {
+    /** This prop can be used to provide a heading to the tooltip */
     heading?: string;
+    /** This prop can be used to provide a description to the tooltip */
     description?: string;
-    buttonGroup?: React.ReactElement;
-}
-export declare const DsTooltipDefaultProps: DsTooltipProps;
+    /**
+     * The components used for each slot inside.
+     *
+     * This prop is an alias for the `components` prop, which will be deprecated in the future.
+     *
+     * @default {}
+     */
+    slots?: DsTooltipSlots<TWrapper>;
+    /**
+     * The extra props for the slot components.
+     * You can override the existing props or add new ones.
+     *
+     * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+     *
+     * @default {}
+     */
+    slotProps?: DsTooltipSlotProps<TWrapper>;
+};
+export declare const DsTooltipDefaultProps: DsTooltipProps<typeof DsLink>;
+export {};

package/dist/Components/DsTooltip/DsTooltip.Types.js

@@ -1,8 +1,20 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { DsLink } from '../DsLink';
 export const DsTooltipDefaultProps = {
     arrow: true,
-    placement: 'top-start',
+    placement: 'top',
     enterTouchDelay: 0,
     leaveTouchDelay: 4000,
-    children: _jsx(_Fragment, {})
+    children: _jsx(_Fragment, {}),
+    slots: {
+        wrapper: DsLink
+    },
+    slotProps: {
+        wrapper: {
+            color: 'inherit',
+            variant: 'inherit',
+            underline: 'always',
+            sx: { textDecorationColor: 'inherit' }
+        }
+    }
 };

package/dist/Theme/componentOverrides.d.ts

@@ -288,7 +288,7 @@ declare const componentOverrides: {
         defaultProps: import("../Components").DsTypographyProps;
     };
     MuiTooltip: {
-        defaultProps: import("../Components").DsTooltipProps;
+        defaultProps: import("../Components").DsTooltipProps<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").LinkTypeMap<{}, "a">>>;
         styleOverrides: {
             popper: {
                 '&[data-popper-placement*="bottom"]': {
@@ -769,6 +769,10 @@ declare const componentOverrides: {
                 cursor: string;
                 textDecorationColor: string;
                 textUnderlinePosition: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
                 '&:visited': {
                     color: string;
                     textDecorationColor: string;
@@ -788,6 +792,7 @@ declare const componentOverrides: {
                 };
                 '&:focus': {
                     textDecoration: string;
+                    textDecorationThickness: string;
                 };
             };
         };

package/package.json

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