npm - @pega/cosmos-react-build - Versions diffs - 8.0.0-build.9.0 → 8.0.0 - Mend

@pega/cosmos-react-build 8.0.0-build.9.0 → 8.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (428) hide show

package/lib/components/LifeCycle/Stage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stage.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Stage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithChildren, Ref, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Flex,\n Actions,\n defaultThemeProp,\n useDirection,\n StyledButton,\n Icon,\n useI18n,\n readableColor\n} from '@pega/cosmos-react-core';\nimport type { BaseProps, ForwardProps, Action } from '@pega/cosmos-react-core';\n\nimport type {\n LifeCycleAction,\n LifeCycleActionParam,\n StageInfo,\n StageItemProps,\n StageProps\n} from './LifeCycle.types';\n\nexport interface StageComponentProps extends BaseProps, StageProps {\n ref?: Ref<HTMLDivElement>;\n /** Pass text for the task. /\n value: string;\n /* unique id of the component /\n id: string;\n /* Controls the styling of the stage. /\n stageInfo: StageInfo;\n /* Full data object which can be passed to the callback /\n item: StageItemProps;\n /* The status is used to show the input error status and the info on tooltip in case of error /\n error?: string;\n}\n\nexport const StyledWrapper = styled.div`\n overflow: hidden;\n`;\n\nStyledWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledStageButton = styled.button<{\n error: string \| undefined;\n}>(({ error, theme }) => {\n return css`\n height: ${theme.components.button.height};\n outline: none;\n border: none;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-align: start;\n margin-inline-start: ${theme.base.spacing};\n\n ${error &&\n css`\n margin-inline-start: 0;\n `}\n\n &:hover {\n cursor: pointer;\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n `;\n});\n\nStyledStageButton.defaultProps = defaultThemeProp;\n\nexport const StyledStageActions = styled.div`\n z-index: 2;\n`;\n\nStyledStageActions.defaultProps = defaultThemeProp;\n\nexport const StyledWarnIcon = styled(Icon)(({ theme }) => {\n return css`\n margin-inline: calc(0.5 ${theme.base.spacing});\n\n &:hover {\n cursor: pointer;\n }\n `;\n});\n\nStyledWarnIcon.defaultProps = defaultThemeProp;\n\nexport const StyledStage = styled.div<\n Pick<StageComponentProps, 'stageInfo'> & {\n status: boolean;\n error: string;\n }\n>(({ stageInfo, theme, status, error }) => {\n const {\n visual: { bgColor, tailPointed, headPointed }\n } = stageInfo;\n\n const { rtl } = useDirection();\n const contrastColor = readableColor(bgColor);\n const roundedEndsStyles = css`\n content: '';\n position: absolute;\n display: block;\n width: calc(3 * ${theme.base.spacing});\n height: calc(3 * ${theme.base.spacing});\n top: calc(1 * ${theme.base.spacing});\n border: 0;\n border-inline-end: 0.0625rem solid transparent;\n `;\n\n return css`\n position: relative;\n padding: calc(0.5 * ${theme.base.spacing});\n background: ${bgColor};\n border: 0.0625rem solid transparent;\n width: 100%;\n\n &:hover {\n cursor: pointer;\n }\n\n &:focus-within {\n border: 0.0625rem solid ${theme.base.palette.interactive};\n\n ${headPointed &&\n css`\n &::after {\n border-inline-end: 0.0625rem solid ${theme.base.palette.interactive};\n ${rtl\n ? css`\n border-block-start: 0.0625rem solid ${theme.base.palette.interactive};\n `\n : css`\n border-block-end: 0.0625rem solid ${theme.base.palette.interactive};\n `}\n }\n `}\n\n ${tailPointed &&\n css`\n &::before {\n border-inline-end: 0.0625rem solid ${theme.base.palette.interactive};\n ${rtl\n ? css`\n border-block-end: 0.0625rem solid ${theme.base.palette.interactive};\n `\n : css`\n border-block-start: 0.0625rem solid ${theme.base.palette.interactive};\n `}\n }\n `}\n }\n\n ${headPointed &&\n css`\n &::after {\n ${roundedEndsStyles}\n z-index: 1;\n background: inherit;\n transform: rotateZ(-45deg) skew(-15deg, -15deg);\n inset-inline-end: calc(1.6 * ${theme.base.spacing} * -1);\n border-block-end: 0.0625rem solid transparent;\n ${rtl\n ? css`\n border-radius: calc(0.75 * ${theme.base['border-radius']}) 0.1rem 0.1rem 0.1rem;\n `\n : css`\n border-radius: 0.0625rem 0.075rem calc(0.75 * ${theme.base['border-radius']})\n 0.0625rem;\n `}\n }\n `}\n\n ${tailPointed &&\n css`\n ${!error &&\n css`\n ${StyledStageButton} {\n margin-inline-start: calc(1.5 * ${theme.base.spacing});\n }\n `}\n\n ${error &&\n css`\n ${StyledWarnIcon} {\n margin-inline-start: ${theme.base.spacing};\n }\n `}\n\n &::before {\n ${roundedEndsStyles}\n background: ${theme.base.palette['app-background']};\n transform: rotateZ(45deg) skew(15deg, 15deg);\n inset-inline-start: calc(-1.6 * ${theme.base.spacing});\n ${rtl\n ? css`\n border-block-end: 0.0625rem solid transparent;\n border-radius: 0.0625rem 1rem 0.0625rem calc(0.75 * ${theme.base['border-radius']});\n `\n : css`\n border-block-start: 0.0625rem solid transparent;\n border-radius: 0.0625rem calc(0.75 * ${theme.base['border-radius']}) 0.0625rem 1rem;\n `}\n }\n `}\n\n ${StyledWarnIcon} {\n color: ${contrastColor};\n }\n\n ${StyledStageActions} {\n & > ${StyledButton} {\n color: ${contrastColor};\n }\n }\n\n ${StyledStageButton} {\n color: ${contrastColor};\n ${!status &&\n css`\n background: ${bgColor};\n `}\n }\n `;\n});\n\nStyledStage.defaultProps = defaultThemeProp;\n\nconst Stage: FunctionComponent<StageComponentProps & ForwardProps> = forwardRef(function Stage(\n {\n value,\n actions,\n stageInfo,\n onClick,\n id,\n item,\n error,\n ...restProps\n }: PropsWithChildren<StageComponentProps>,\n ref: StageComponentProps['ref']\n) {\n const t = useI18n();\n\n const onStageClick = (e: MouseEvent) => {\n const actionParam: LifeCycleActionParam = {\n value,\n stage: item,\n type: 'Stage'\n };\n onClick?.(actionParam, e);\n };\n\n const onActionItemClick = (\n actionId: string,\n e: MouseEvent<HTMLInputElement \| HTMLAnchorElement \| HTMLButtonElement>\n ) => {\n const param: LifeCycleActionParam = {\n stage: item\n };\n\n if (actions) {\n let actionsList: LifeCycleAction[] = [];\n\n if (Array.isArray(actions)) {\n actionsList = actions;\n } else {\n actionsList = actions[item.type];\n }\n\n actionsList?.forEach((actionItem: LifeCycleAction) => {\n if (actionItem.id === actionId) {\n actionItem.onClick?.(param, e);\n }\n });\n }\n };\n\n // Deep copy of actions object is required to provide consistent callback objects on actions\n const actionsClone: Action[] = [];\n\n if (actions) {\n let actionsList: LifeCycleAction[] = [];\n if (Array.isArray(actions)) {\n actionsList = actions;\n } else {\n actionsList = actions[item.type];\n }\n\n actionsList.forEach(actionItem => {\n const actionCloneItem = {} as Action;\n Object.keys(actionItem).forEach((key: string) => {\n actionCloneItem[key] = actionItem[key];\n });\n actionCloneItem.onClick = onActionItemClick;\n actionsClone.push(actionCloneItem);\n return actionItem;\n });\n }\n\n return (\n <Flex\n {...restProps}\n container={{ inline: true, alignItems: 'center' }}\n as={StyledStage}\n ref={ref}\n error={error}\n stageInfo={stageInfo}\n id={item.id}\n aria-label={error ? t('stage_name_error', [value]) : undefined}\n >\n {error && <StyledWarnIcon name='warn-solid' />}\n <Flex\n as={StyledWrapper}\n container={{ inline: true }}\n item={{ grow: 1 }}\n onClick={onStageClick}\n >\n <StyledStageButton error={error} aria-label={error ? undefined : t('stage_name', [value])}>\n {value}\n </StyledStageButton>\n </Flex>\n <StyledStageActions>\n {actionsClone && <Actions items={actionsClone} menuAt={2} iconOnly />}\n </StyledStageActions>\n </Flex>\n );\n});\n\nexport default Stage;\n"]}
1	+ {"version":3,"file":"Stage.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Stage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useContext } from 'react';\nimport type { PropsWithChildren, Ref, MouseEvent, RefCallback } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Flex,\n Actions,\n defaultThemeProp,\n useDirection,\n StyledButton,\n Icon,\n useI18n,\n readableColor,\n useTestIds,\n withTestIds,\n useElement,\n Tooltip,\n readableHue\n} from '@pega/cosmos-react-core';\nimport type { BaseProps, Action, ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\nimport { DragHandle, StyledDragHandle } from '@pega/cosmos-react-dnd';\n\nimport { generateDynamicTestId } from './utils';\nimport type {\n LifeCycleAction,\n LifeCycleActionParam,\n StageInfo,\n StageItemProps,\n StageProps\n} from './LifeCycle.types';\nimport { getStageTestIds } from './LifeCycle.test-ids';\nimport LifeCycleContext, { type LifeCycleContextValue } from './LifeCycleContext';\n\nexport interface StageComponentProps extends BaseProps, StageProps {\n ref?: Ref<HTMLDivElement>;\n /** Pass text for the task. /\n value: string;\n /* unique id of the component /\n id: string;\n /* Controls the styling of the stage. /\n stageInfo: StageInfo;\n /* Full data object which can be passed to the callback /\n item: StageItemProps;\n /* The status is used to show the input error status and the info on tooltip in case of error /\n error?: string;\n dragRef?: RefCallback<HTMLElement>;\n}\n\nexport const StyledStageButton = styled.button<{\n error: string \| undefined;\n dragEnabled?: LifeCycleContextValue['dragEnabled'];\n}>(({ error, dragEnabled, theme }) => {\n return css`\n height: ${theme.components.button.height};\n outline: none;\n border: none;\n border-radius: calc(0.5 ${theme.base['border-radius']});\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-align: start;\n margin-inline-start: calc(${dragEnabled ? 0.25 : 0.5} * ${theme.base.spacing});\n padding-inline: calc(${dragEnabled ? 0.25 : 0.5} * ${theme.base.spacing});\n background: transparent;\n z-index: 2;\n\n ${error &&\n css`\n margin-inline-start: 0;\n `}\n\n &:hover {\n cursor: pointer;\n }\n\n &:focus {\n outline: none;\n box-shadow: ${theme.base.shadow.focus};\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n `;\n});\n\nStyledStageButton.defaultProps = defaultThemeProp;\n\nexport const StyledStageActions = styled.div(({ theme }) => {\n return css`\n z-index: 2;\n margin-inline-end: calc(0.875 * ${theme.base.spacing});\n `;\n});\n\nStyledStageActions.defaultProps = defaultThemeProp;\n\nexport const StyledWarnIcon = styled(Icon)(({ theme }) => {\n return css`\n margin-inline: calc(0.5 * ${theme.base.spacing});\n\n &:hover {\n cursor: pointer;\n }\n `;\n});\n\nStyledWarnIcon.defaultProps = defaultThemeProp;\n\nexport const StyledStage = styled.div<\n Pick<StageComponentProps, 'stageInfo'> & {\n error: string;\n dragEnabled?: LifeCycleContextValue['dragEnabled'];\n dragging?: boolean;\n } & Pick<StageItemProps, 'transitionType'>\n>(({ stageInfo, theme, error, dragEnabled, dragging, transitionType }) => {\n const {\n visual: { bgColor, tailPointed, headPointed }\n } = stageInfo;\n\n const { rtl } = useDirection();\n const contrastColor = readableColor(bgColor);\n const borderRadius = 'border-radius';\n const roundedEndsStyles = css`\n content: '';\n position: absolute;\n display: block;\n width: calc(3 * ${theme.base.spacing});\n height: calc(3 * ${theme.base.spacing});\n top: calc(1 * ${theme.base.spacing});\n border: 0;\n border-inline-end: 0.0625rem solid transparent;\n `;\n const spacing = `calc(0.5 * ${theme.base.spacing})`;\n\n return css`\n position: relative;\n padding: ${spacing};\n background: ${bgColor};\n border: 0.0625rem solid transparent;\n width: 100%;\n height: '${theme.base.spacing}';\n &:hover {\n cursor: pointer;\n }\n ${transitionType === 'resolution' &&\n stageInfo.id === 'alternate' &&\n css`\n border: none;\n box-shadow: inset 0 -0.5rem 0 0 ${readableHue(theme.base.colors.green.medium, theme.base.palette.light)};\n\n /* adding 0.0625rem to padding since 0.0625rem border is removed. /\n padding: calc(${spacing} + 0.0625rem);\n `}\n\n ${headPointed &&\n !dragging &&\n css`\n &::after {\n ${roundedEndsStyles}\n z-index: 1;\n background: inherit;\n transform: rotateZ(-45deg) skew(-15deg, -15deg);\n inset-inline-end: calc(1.6 ${theme.base.spacing} * -1);\n border-block-end: 0.0625rem solid transparent;\n ${rtl\n ? css`\n border-radius: calc(0.75 * ${theme.base[borderRadius]}) 0.1rem 0.1rem 0.1rem;\n `\n : css`\n border-radius: 0.0625rem 0.075rem calc(0.75 * ${theme.base[borderRadius]}) 0.0625rem;\n `}\n }\n `}\n\n ${tailPointed &&\n css`\n ${!error &&\n !dragEnabled &&\n css`\n ${StyledStageButton} {\n margin-inline-start: calc(1.5 * ${theme.base.spacing});\n }\n `}\n\n ${error &&\n css`\n ${StyledWarnIcon} {\n margin-inline-start: ${theme.base.spacing};\n }\n `}\n\n ${!dragging &&\n css`\n &::before {\n ${roundedEndsStyles}\n background: ${theme.base.palette['app-background']};\n transform: rotateZ(45deg) skew(15deg, 15deg);\n inset-inline-start: calc(-1.6 * ${theme.base.spacing});\n ${rtl\n ? css`\n border-block-end: 0.0625rem solid transparent;\n border-radius: 0.0625rem 1rem 0.0625rem calc(0.75 * ${theme.base[borderRadius]});\n `\n : css`\n border-block-start: 0.0625rem solid transparent;\n border-radius: 0.0625rem calc(0.75 * ${theme.base[borderRadius]}) 0.0625rem 1rem;\n `}\n }\n `}\n `}\n\n ${StyledWarnIcon} {\n color: ${contrastColor};\n margin-inline-start: calc(${dragEnabled ? 0.5 : 1.25} * ${theme.base.spacing});\n margin-inline-end: ${theme.base.spacing};\n }\n\n ${StyledStageActions} {\n & > ${StyledButton} {\n color: ${contrastColor};\n }\n }\n\n ${StyledStageButton} {\n color: ${contrastColor};\n }\n\n ${StyledDragHandle} {\n color: ${contrastColor};\n margin-inline-start: ${theme.base.spacing};\n }\n `;\n});\n\nStyledStage.defaultProps = defaultThemeProp;\n\nconst Stage: ForwardRefForwardPropsComponent<StageComponentProps> = forwardRef(\n (\n {\n value,\n actions,\n stageInfo,\n onClick,\n id,\n item,\n error,\n dragRef,\n ...restProps\n }: PropsWithChildren<StageComponentProps>,\n ref: StageComponentProps['ref']\n ) => {\n const { dragDropConfig, dragEnabled, draggedItem } = useContext(LifeCycleContext);\n const [stageButtonEl, setStageButtonEl] = useElement();\n const t = useI18n();\n let accessibilityLabel: string;\n const stageTestID = generateDynamicTestId([value]);\n const testIds = useTestIds(stageTestID, getStageTestIds);\n\n const onStageClick = (e: MouseEvent) => {\n const actionParam: LifeCycleActionParam = {\n value,\n stage: item,\n type: 'Stage'\n };\n onClick?.(actionParam, e);\n };\n\n const onActionItemClick = (\n actionId: string,\n e: MouseEvent<HTMLInputElement \| HTMLAnchorElement \| HTMLButtonElement>,\n menuButtonEl?: HTMLButtonElement\n ) => {\n const param: LifeCycleActionParam = {\n stage: item\n };\n\n if (actions) {\n let actionsList: LifeCycleAction[] = [];\n\n if (Array.isArray(actions)) {\n actionsList = actions;\n } else {\n actionsList = actions[item.type];\n }\n\n actionsList?.forEach((actionItem: LifeCycleAction) => {\n if (actionItem.id === actionId) {\n actionItem.onClick?.(param, e, menuButtonEl);\n }\n });\n }\n };\n\n // Deep copy of actions object is required to provide consistent callback objects on actions\n const actionsClone: Action[] = [];\n\n if (actions) {\n let actionsList: LifeCycleAction[] = [];\n if (Array.isArray(actions)) {\n actionsList = actions;\n } else {\n actionsList = actions[item.type];\n }\n\n actionsList.forEach(actionItem => {\n const actionCloneItem = {} as Action;\n Object.keys(actionItem).forEach((key: string) => {\n actionCloneItem[key] = actionItem[key];\n });\n actionCloneItem.onClick = onActionItemClick;\n actionsClone.push({\n ...actionCloneItem\n });\n return actionItem;\n });\n }\n if (item.transitionType === 'resolution') {\n accessibilityLabel = `${t('wait_for_user_action', [t('stage_name', [value])])}`;\n } else if (item.transitionType === 'wait') {\n accessibilityLabel = `${t('resolve_case', [t('stage_name', [value])])}`;\n } else {\n accessibilityLabel = t('stage_name', [value]);\n }\n\n const stageDragEnabled =\n dragEnabled && dragDropConfig[item.alternate ? 'alternate-stage' : 'stage'].enabled;\n\n return (\n <Flex\n data-testid={testIds.root}\n {...restProps}\n container={{ inline: true, alignItems: 'center' }}\n as={StyledStage}\n ref={ref}\n error={error}\n dragEnabled={stageDragEnabled}\n dragging={draggedItem?.type === 'stage'}\n stageInfo={stageInfo}\n aria-label={error ? t('stage_name_error', [value]) : undefined}\n transitionType={item.transitionType}\n >\n {stageDragEnabled && (\n <DragHandle itemId={id} ref={dragRef} onClick={e => e.stopPropagation()} />\n )}\n {error && <StyledWarnIcon name='warn-solid' />}\n <Flex container={{ inline: true }} item={{ grow: 1 }} onClick={onStageClick}>\n <StyledStageButton\n error={error}\n dragEnabled={stageDragEnabled}\n aria-label={error ? undefined : accessibilityLabel}\n ref={setStageButtonEl}\n >\n {value}\n </StyledStageButton>\n {stageButtonEl && (\n <Tooltip target={stageButtonEl} smart>\n {value}\n </Tooltip>\n )}\n </Flex>\n <StyledStageActions>\n {actionsClone && (\n <Actions\n items={actionsClone}\n menuAt={2}\n iconOnly\n contextualLabel={t('stage_name', [value])}\n />\n )}\n </StyledStageActions>\n </Flex>\n );\n }\n);\n\nexport default withTestIds(Stage, getStageTestIds);\n"]}

package/lib/components/LifeCycle/Step.d.ts CHANGED Viewed

@@ -1,8 +1,14 @@
-import type { FunctionComponent } from 'react';
+import type { FunctionComponent, RefCallback } from 'react';
 import type { BaseProps, ForwardProps } from '@pega/cosmos-react-core';
-import type { ColorName } from '../../utils';
+import type { IconTileProps } from '../IconTile/IconTile.types';
 import type { TaskItemProps, StepItemProps, StageItemProps, CategoryItemProps, StepProps } from './LifeCycle.types';
-interface StepComponentProps extends BaseProps, StepProps {
+interface CategoryLabelProp {
+    categoryLabel?: string;
+}
+export interface VisualStepItemProps extends Omit<IconTileProps, 'size'> {
+    imgSrc: string;
+}
+export interface StepComponentProps extends BaseProps, StepProps {
     /** Pass text for the step. */
     value: string;
     /** unique id of step */
@@ -10,12 +16,7 @@ interface StepComponentProps extends BaseProps, StepProps {
     /** Determines the visual for icon, color and label to render.
      * This color is passed as a variant and accessible colors are used to display.
      * Icon and label are passed as normal string */
-    visual: {
-        imgurl: string;
-        color: ColorName;
-        icon: string;
-        title: string;
-    };
+    visual: VisualStepItemProps;
     /** Determines the variant and label for the badges */
     badge?: StepItemProps['status'];
     /** The status is used to show the input error status and the info on tooltip in case of error */
@@ -24,17 +25,23 @@ interface StepComponentProps extends BaseProps, StepProps {
     item: StepItemProps;
     stageItem: StageItemProps;
     taskItem: TaskItemProps;
-    categoryItem: CategoryItemProps;
+    categoryItem: CategoryItemProps & CategoryLabelProp;
+    dragRef?: RefCallback<HTMLElement>;
+    previewRef?: RefCallback<HTMLElement>;
 }
 export declare const StyledStepType: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<StepComponentProps, "visual">, never>;
 export declare const StyledStepBadge: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledStepWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+export declare const StyledStepWrapper: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
     hasFocus: boolean;
     selected: boolean;
 }, never>;
 export declare const StyledStep: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledStepButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledStepButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
+    $wrap?: StepComponentProps["wrap"];
+}, never>;
 export declare const StyledWarnIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, import("styled-components").DefaultTheme, {}, never>;
-declare const Step: FunctionComponent<StepComponentProps & ForwardProps>;
-export default Step;
+declare const _default: FunctionComponent<StepComponentProps & ForwardProps> & {
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly string[]>;
+};
+export default _default;
 //# sourceMappingURL=Step.d.ts.map

package/lib/components/LifeCycle/Step.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Step.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;~~AAgB5E~~,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAU,MAAM,yBAAyB,CAAC;~~AAG~~/E,OAAO,KAAK,EAAE,~~SAAS~~,EAAE,MAAM,~~aAAa~~,CAAC;~~AAE7C~~,OAAO,KAAK,EACV,aAAa,EACb,aAAa,EACb,cAAc,EACd,iBAAiB,EAEjB,SAAS,EACV,MAAM,mBAAmB,CAAC;~~AAG3B~~,UAAU,~~kBAAmB~~,~~SAAQ~~,~~SAAS~~,EAAE,~~SAAS;IACvD~~,~~8BAA8B~~;~~IAC9B~~,~~KAAK~~,EAAE,MAAM,CAAC;~~IACd~~,~~wBAAwB;IACxB~~,EAAE,~~EAAE,~~MAAM,CAAC;~~IACX;;oDAEgD~~;~~IAChD~~,MAAM,~~EAAE;QACN~~,~~MAAM~~,EAAE,~~MAAM~~,~~CAAC~~;~~QACf~~,KAAK,EAAE,~~SAAS~~,CAAC;~~QACjB~~,~~IAAI~~,EAAE,MAAM,CAAC;~~QACb~~,~~KAAK~~,EAAE,~~MAAM~~,CAAC;~~KACf~~,~~CAAC;IACF,~~sDAAsD;IACtD,KAAK,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IAChC,iGAAiG;IACjG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,IAAI,EAAE,aAAa,CAAC;IACpB,SAAS,EAAE,cAAc,CAAC;IAC1B,QAAQ,EAAE,aAAa,CAAC;IACxB,YAAY,EAAE,iBAAiB,CAAC;~~CACjC~~;AAED,eAAO,MAAM,cAAc,~~yIAkB1B~~,CAAC;AAIF,eAAO,MAAM,eAAe,yGAa1B,CAAC;AAIH,eAAO,MAAM,iBAAiB;cAClB,OAAO;cACP,OAAO;~~SAuBjB~~,CAAC;AAIH,eAAO,MAAM,UAAU,~~yGAUrB~~,CAAC;~~AAYH~~,eAAO,MAAM,gBAAgB,~~4GAkB3B~~,CAAC~~;AAIH~~,~~eAAO,~~MAAM,~~cAAc~~,~~0LASzB,~~CAAC;~~AAIH~~,~~QAAA~~,MAAM,~~IAAI~~,~~EAAE~~,~~iBAAiB,~~CAAC,~~kBAAkB,GAAG,YAAY,CA6H9D,CAAC;AAEF,eAAe,IAAI,CAAC~~"}
1	+ {"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Step.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAA+B,WAAW,EAAE,MAAM,OAAO,CAAC;AAkBzF,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAU,MAAM,yBAAyB,CAAC;AAI/E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAGhE,OAAO,KAAK,EACV,aAAa,EACb,aAAa,EACb,cAAc,EACd,iBAAiB,EAEjB,SAAS,EACV,MAAM,mBAAmB,CAAC;AAK3B,UAAU,iBAAiB;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AACD,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC;IACtE,MAAM,EAAE,MAAM,CAAC;CAChB;AACD,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,SAAS;IAC9D,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX;;oDAEgD;IAChD,MAAM,EAAE,mBAAmB,CAAC;IAC5B,sDAAsD;IACtD,KAAK,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IAChC,iGAAiG;IACjG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,IAAI,EAAE,aAAa,CAAC;IACpB,SAAS,EAAE,cAAc,CAAC;IAC1B,QAAQ,EAAE,aAAa,CAAC;IACxB,YAAY,EAAE,iBAAiB,GAAG,iBAAiB,CAAC;IACpD,OAAO,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IACnC,UAAU,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;CACvC;AAED,eAAO,MAAM,cAAc,yIAY1B,CAAC;AAIF,eAAO,MAAM,eAAe,yGAa1B,CAAC;AAIH,eAAO,MAAM,iBAAiB;cAClB,OAAO;cACP,OAAO;SA0BjB,CAAC;AAIH,eAAO,MAAM,UAAU,yGAcrB,CAAC;AAaH,eAAO,MAAM,gBAAgB;YAA2B,kBAAkB,CAAC,MAAM,CAAC;SAgCjF,CAAC;AAIF,eAAO,MAAM,cAAc,0LAUzB,CAAC;;;;AA4KH,wBAAiD"}

package/lib/components/LifeCycle/Step.js CHANGED Viewed

@@ -1,24 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useContext } from 'react';
 import styled, { css } from 'styled-components';
-import { Flex, defaultThemeProp, Icon, Status, Actions, useI18n, Avatar, useUID, Tooltip, useElement, readableColor } from '@pega/cosmos-react-core';
-import { colorMap } from '../../utils';
+import { Flex, defaultThemeProp, Icon, Status, Actions, useI18n, Avatar, useUID, useTestIds, VisuallyHiddenText, withTestIds, Tooltip, useElement } from '@pega/cosmos-react-core';
+import { DragHandle, StyledDragHandle } from '@pega/cosmos-react-dnd';
+import IconTile from '../IconTile';
+import { generateDynamicTestId } from './utils';
 import LifeCycleContext from './LifeCycleContext';
+import { getStepTestIds } from './LifeCycle.test-ids';
+const borderRadius = 'border-radius';
 export const StyledStepType = styled.div(({ visual, theme }) => {
-    const bgColor = colorMap[visual.color];
-    const contrastColor = readableColor(bgColor);
-    return visual.imgurl
+    return visual?.imgSrc
         ? css `
           height: 2rem;
           padding-inline-end: calc(0.25 * ${theme.base.spacing});
         `
         : css `
-          background: ${bgColor};
           margin: calc(0.5 * ${theme.base.spacing});
-          padding: 0 calc(0.5 * ${theme.base.spacing});
-          color: ${contrastColor};
-          text-align: center;
-          border-radius: calc(0.25 * ${theme.base['border-radius']});
+          border-radius: calc(0.25 * ${theme.base[borderRadius]});
         `;
 });
 StyledStepType.defaultProps = defaultThemeProp;
@@ -37,12 +35,15 @@ export const StyledStepBadge = styled.div(({ theme }) => {
   `;
 });
 StyledStepBadge.defaultProps = defaultThemeProp;
-export const StyledStepWrapper = styled.div(({ hasFocus, theme, selected }) => {
+export const StyledStepWrapper = styled.li(({ hasFocus, theme, selected }) => {
     return css `
     width: 100%;
-    margin: 0 0 calc(0.5 * ${theme.base.spacing});
     border: 0.125rem solid transparent;
-    border-radius: calc(0.5 * ${theme.base['border-radius']});
+    border-radius: calc(0.5 * ${theme.base[borderRadius]});
+    &:not(:last-of-type) {
+      margin: 0 0 calc(0.5 * ${theme.base.spacing});
+    }
     ${hasFocus &&
         css `
@@ -65,57 +66,87 @@ export const StyledStep = styled.div(({ theme }) => {
     return css `
     background: ${theme.base.palette['secondary-background']};
     border: 0.125rem solid transparent;
-    border-radius: calc(0.5 * ${theme.base['border-radius']});
+    border-radius: calc(0.5 * ${theme.base[borderRadius]});
     &:hover {
       cursor: pointer;
     }
+    ${StyledDragHandle} {
+      margin-block: calc(0.5 * ${theme.base.spacing});
+    }
   `;
 });
 StyledStep.defaultProps = defaultThemeProp;
 const StyledStepButtonWrapper = styled.div(({ theme }) => {
     return css `
-    border-radius: calc(0.5 * ${theme.base['border-radius']});
+    border-radius: calc(0.5 * ${theme.base[borderRadius]});
+    margin-inline: calc(0.5 * ${theme.base.spacing});
   `;
 });
 StyledStepButtonWrapper.defaultProps = defaultThemeProp;
-export const StyledStepButton = styled.button(({ theme }) => {
+export const StyledStepButton = styled.button(({ theme, $wrap }) => {
     return css `
-    border: none;
-    height: ${theme.components.button.height};
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    text-align: start;
-    background: ${theme.base.palette['secondary-background']};
+      border: none;
+      height: ${theme.components.button.height};
+      overflow: hidden;
+      text-align: start;
+      background: ${theme.base.palette['secondary-background']};
-    &:hover {
-      cursor: pointer;
-    }
+      ${$wrap
+        ? css `
+            height: fit-content;
+            line-height: 1.2;
+            min-height: ${theme.components.button.height};
+            word-break: break-word;
+            padding-block: calc(0.5 * ${theme.base.spacing});
+            padding-inline-end: calc(0.5 * ${theme.base.spacing});
+          `
+        : css `
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          `}
-    &:focus {
-      outline: none;
-    }
-  `;
+      &:hover {
+        cursor: pointer;
+      }
+      &:focus {
+        outline: none;
+      }
+    `;
 });
 StyledStepButton.defaultProps = defaultThemeProp;
 export const StyledWarnIcon = styled(Icon)(({ theme }) => {
     return css `
     color: ${theme.base.palette.urgent};
-    margin-inline: ${theme.base.spacing};
+    margin: calc(0.5 * ${theme.base.spacing});
+    height: 1.5rem;
+    flex-shrink: 0;
     &:hover {
       cursor: pointer;
     }
   `;
 });
 StyledWarnIcon.defaultProps = defaultThemeProp;
-const Step = ({ value, id, visual, actions, badge, error, categoryItem, item, stageItem, taskItem, onClick, ...restProps }) => {
+const Step = ({ value, id, visual, actions, badge, error, wrap, categoryItem, item, stageItem, taskItem, onClick, dragRef, previewRef, ...restProps }) => {
     const t = useI18n();
-    const { selectedItemId } = useContext(LifeCycleContext);
+    const { selectedItemId, dragDropConfig, dragEnabled } = useContext(LifeCycleContext);
     const [stepHasFocus, setStepHasFocus] = useState(false);
+    const [stepButtonEl, setStepButtonEl] = useElement();
+    const stepButtonDescriptionId = useUID();
+    const errorId = useUID();
+    // Deep copy of actions is required to provide consistent callback objects on actions
+    const actionsClone = [];
+    const stepTestID = generateDynamicTestId([
+        stageItem.label,
+        categoryItem.categoryLabel,
+        taskItem.label,
+        value
+    ]);
+    const testIds = useTestIds(stepTestID, getStepTestIds);
     // Need to check the value with statusProps
-    const onActionItemClick = (actionId, e) => {
+    const onActionItemClick = (actionId, e, menuButtonEl) => {
         e.stopPropagation();
         const param = {
             task: taskItem,
@@ -125,13 +156,10 @@ const Step = ({ value, id, visual, actions, badge, error, categoryItem, item, st
         };
         actions?.forEach(actionItem => {
             if (actionItem.id === actionId) {
-                actionItem.onClick(param, e);
+                actionItem.onClick(param, e, menuButtonEl);
             }
         });
     };
-    // Deep copy of actions is required to provide consistent callback objects on actions
-    const actionsClone = [];
-    const buttonDescriptionId = useUID();
     if (actions) {
         actions.forEach(actionItem => {
             const actionCloneItem = {};
@@ -139,10 +167,7 @@ const Step = ({ value, id, visual, actions, badge, error, categoryItem, item, st
                 actionCloneItem[key] = actionItem[key];
             });
             actionCloneItem.onClick = onActionItemClick;
-            if (error)
-                actionsClone.push(actionCloneItem);
-            else
-                actionsClone.push({ ...actionCloneItem, 'aria-describedby': buttonDescriptionId });
+            actionsClone.push(actionCloneItem);
             return actionItem;
         });
     }
@@ -158,12 +183,11 @@ const Step = ({ value, id, visual, actions, badge, error, categoryItem, item, st
         };
         onClick?.(actionParam, e);
     };
-    const [stepLabelEl, setStepLabelEl] = useElement(null);
-    return (_jsxs(Flex, { as: StyledStepWrapper, id: `${id}-stepWrapper`, container: { inline: true, alignItems: 'center' }, "aria-current": selectedItemId === id ? 'step' : undefined, hasFocus: stepHasFocus && selectedItemId !== id, selected: selectedItemId === id, children: [error && _jsx(StyledWarnIcon, { name: 'warn-solid' }), _jsxs(Flex, { as: StyledStep, container: { inline: true }, id: id, item: { grow: 1 }, onClick: onStepClick, children: [_jsxs(StyledStepType, { visual: visual, children: [visual.imgurl.length > 0 && (_jsx(Avatar, { name: visual.title, imageSrc: visual?.imgurl, shape: 'squircle', size: 'm' })), !visual.imgurl && _jsx(Icon, { name: visual.icon })] }), _jsxs(Flex, { as: StyledStepButtonWrapper, item: { grow: 1 }, container: { inline: true, alignItems: 'center', justify: 'between' }, id: buttonDescriptionId, children: [_jsxs(StyledStepButton, { ...restProps, onFocus: () => {
-                                    setStepHasFocus(true);
-                                }, onBlur: () => {
-                                    setStepHasFocus(false);
-                                }, "aria-label": t(error ? 'step_name_error' : 'step_name', [value]), ref: setStepLabelEl, children: [value, _jsx(Tooltip, { smart: true, target: stepLabelEl, showDelay: 'none', hideDelay: 'none', children: value })] }), badge?.type && (_jsx(Flex, { as: StyledStepBadge, container: { inline: true, alignItems: 'center' }, children: _jsx(Status, { variant: badge?.type || 'success', children: badge?.label }) }))] }), actionsClone && _jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true })] })] }));
+    return (_jsx(Flex, { id: id, ref: previewRef, "data-testid": testIds.root, as: StyledStepWrapper, container: { inline: true, alignItems: 'center' }, "aria-current": selectedItemId === id ? 'step' : undefined, hasFocus: stepHasFocus && selectedItemId !== id, selected: selectedItemId === id, children: _jsxs(Flex, { as: StyledStep, container: { inline: true, alignItems: 'start' }, item: { grow: 1 }, onClick: onStepClick, children: [dragEnabled && dragDropConfig[item.alternate ? 'alternate-step' : 'step'].enabled && (_jsx(DragHandle, { itemId: id, ref: dragRef, onClick: e => e.stopPropagation() })), error && (_jsxs(_Fragment, { children: [_jsx(VisuallyHiddenText, { id: errorId, children: error }), _jsx(StyledWarnIcon, { name: 'warn-solid' })] })), _jsx(Flex, { as: StyledStepType, visual: visual, container: { inline: true, alignItems: 'center', justify: 'center' }, children: visual?.label && visual?.imgSrc ? (_jsx(Avatar, { name: visual.label, imageSrc: visual.imgSrc, shape: 'squircle', size: 'm' })) : (_jsx(IconTile, { name: visual?.name, category: visual?.category, label: visual?.label, inverted: visual?.inverted })) }), _jsxs(Flex, { as: StyledStepButtonWrapper, item: { grow: 1 }, container: { inline: true, alignItems: 'center', justify: 'between' }, id: stepButtonDescriptionId, children: [_jsx(StyledStepButton, { ...restProps, "$wrap": wrap, onFocus: () => {
+                                setStepHasFocus(true);
+                            }, onBlur: () => {
+                                setStepHasFocus(false);
+                            }, "aria-label": t('step_name', [value]), "aria-describedby": error ? errorId : '', ref: setStepButtonEl, children: value }), stepButtonEl && (_jsx(Tooltip, { target: stepButtonEl, smart: true, children: value })), badge?.type && (_jsx(Flex, { as: StyledStepBadge, container: { inline: true, alignItems: 'center' }, children: _jsx(Status, { variant: badge?.type || 'success', children: badge?.label }) }))] }), actionsClone && (_jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true, menuButtonProps: { onClick: e => e.stopPropagation() }, contextualLabel: t('step_name', [value]) }))] }) }));
 };
-export default Step;
+export default withTestIds(Step, getStepTestIds);
 //# sourceMappingURL=Step.js.map

package/lib/components/LifeCycle/Step.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Step.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Step.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useContext } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Flex,\n defaultThemeProp,\n Icon,\n Status,\n Actions,\n useI18n,\n Avatar,\n useUID,\n Tooltip,\n useElement,\n readableColor\n} from '@pega/cosmos-react-core';\nimport type { BaseProps, ForwardProps, Action } from '@pega/cosmos-react-core';\n\nimport { colorMap } from '../../utils';\nimport type { ColorName } from '../../utils';\n\nimport type {\n TaskItemProps,\n StepItemProps,\n StageItemProps,\n CategoryItemProps,\n LifeCycleActionParam,\n StepProps\n} from './LifeCycle.types';\nimport LifeCycleContext from './LifeCycleContext';\n\ninterface StepComponentProps extends BaseProps, StepProps {\n /** Pass text for the step. /\n value: string;\n /* unique id of step /\n id: string;\n /* Determines the visual for icon, color and label to render.\n * This color is passed as a variant and accessible colors are used to display.\n * Icon and label are passed as normal string /\n visual: {\n imgurl: string;\n color: ColorName;\n icon: string;\n title: string;\n };\n /* Determines the variant and label for the badges /\n badge?: StepItemProps['status'];\n /* The status is used to show the input error status and the info on tooltip in case of error /\n error?: string;\n /* Data of the steps which can be used to send the full info back /\n item: StepItemProps;\n stageItem: StageItemProps;\n taskItem: TaskItemProps;\n categoryItem: CategoryItemProps;\n}\n\nexport const StyledStepType = styled.div<Pick<StepComponentProps, 'visual'>>(\n ({ visual, theme }) => {\n const bgColor = colorMap[visual.color];\n const contrastColor = readableColor(bgColor);\n return visual.imgurl\n ? css`\n height: 2rem;\n padding-inline-end: calc(0.25 ${theme.base.spacing});\n `\n : css`\n background: ${bgColor};\n margin: calc(0.5 * ${theme.base.spacing});\n padding: 0 calc(0.5 * ${theme.base.spacing});\n color: ${contrastColor};\n text-align: center;\n border-radius: calc(0.25 * ${theme.base['border-radius']});\n `;\n }\n);\n\nStyledStepType.defaultProps = defaultThemeProp;\n\nexport const StyledStepBadge = styled.div(({ theme }) => {\n return css`\n padding: 0 calc(0.5 * ${theme.base.spacing});\n justify-content: flex-end;\n width: auto;\n max-width: calc(50% - ${theme.base.spacing});\n\n > span {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n `;\n});\n\nStyledStepBadge.defaultProps = defaultThemeProp;\n\nexport const StyledStepWrapper = styled.div<{\n hasFocus: boolean;\n selected: boolean;\n}>(({ hasFocus, theme, selected }) => {\n return css`\n width: 100%;\n margin: 0 0 calc(0.5 * ${theme.base.spacing});\n border: 0.125rem solid transparent;\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n\n ${hasFocus &&\n css`\n box-shadow: ${theme.base.shadow.focus};\n `}\n\n &:hover {\n cursor: pointer;\n }\n ${selected &&\n css`\n &[aria-current='step'] {\n border-color: ${theme.base.palette.interactive};\n }\n `}\n `;\n});\n\nStyledStepWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledStep = styled.div(({ theme }) => {\n return css`\n background: ${theme.base.palette['secondary-background']};\n border: 0.125rem solid transparent;\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n\n &:hover {\n cursor: pointer;\n }\n `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\nconst StyledStepButtonWrapper = styled.div<{ error: string }>(({ theme }) => {\n return css`\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n `;\n});\n\nStyledStepButtonWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledStepButton = styled.button(({ theme }) => {\n return css`\n border: none;\n height: ${theme.components.button.height};\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-align: start;\n background: ${theme.base.palette['secondary-background']};\n\n &:hover {\n cursor: pointer;\n }\n\n &:focus {\n outline: none;\n }\n `;\n});\n\nStyledStepButton.defaultProps = defaultThemeProp;\n\nexport const StyledWarnIcon = styled(Icon)(({ theme }) => {\n return css`\n color: ${theme.base.palette.urgent};\n margin-inline: ${theme.base.spacing};\n\n &:hover {\n cursor: pointer;\n }\n `;\n});\n\nStyledWarnIcon.defaultProps = defaultThemeProp;\n\nconst Step: FunctionComponent<StepComponentProps & ForwardProps> = ({\n value,\n id,\n visual,\n actions,\n badge,\n error,\n categoryItem,\n item,\n stageItem,\n taskItem,\n onClick,\n ...restProps\n}: PropsWithoutRef<StepComponentProps>) => {\n const t = useI18n();\n const { selectedItemId } = useContext(LifeCycleContext);\n const [stepHasFocus, setStepHasFocus] = useState(false);\n\n // Need to check the value with statusProps\n\n const onActionItemClick = (\n actionId: string,\n e: MouseEvent<HTMLInputElement \| HTMLAnchorElement \| HTMLButtonElement>\n ) => {\n e.stopPropagation();\n const param: LifeCycleActionParam = {\n task: taskItem,\n stage: stageItem,\n step: item,\n category: categoryItem\n };\n actions?.forEach(actionItem => {\n if (actionItem.id === actionId) {\n actionItem.onClick(param, e);\n }\n });\n };\n // Deep copy of actions is required to provide consistent callback objects on actions\n const actionsClone: Action[] = [];\n const buttonDescriptionId: string = useUID();\n\n if (actions) {\n actions.forEach(actionItem => {\n const actionCloneItem = {} as Action;\n Object.keys(actionItem).forEach((key: string) => {\n actionCloneItem[key] = actionItem[key];\n });\n actionCloneItem.onClick = onActionItemClick;\n if (error) actionsClone.push(actionCloneItem);\n else actionsClone.push({ ...actionCloneItem, 'aria-describedby': buttonDescriptionId });\n return actionItem;\n });\n }\n\n const onStepClick = (e: MouseEvent) => {\n e.stopPropagation();\n const actionParam: LifeCycleActionParam = {\n value,\n step: item,\n task: taskItem,\n category: categoryItem,\n stage: stageItem,\n type: 'Step'\n };\n onClick?.(actionParam, e);\n };\n\n const [stepLabelEl, setStepLabelEl] = useElement<HTMLSpanElement>(null);\n\n return (\n <Flex\n as={StyledStepWrapper}\n id={`${id}-stepWrapper`}\n container={{ inline: true, alignItems: 'center' }}\n aria-current={selectedItemId === id ? 'step' : undefined}\n hasFocus={stepHasFocus && selectedItemId !== id}\n selected={selectedItemId === id}\n >\n {error && <StyledWarnIcon name='warn-solid' />}\n <Flex\n as={StyledStep}\n container={{ inline: true }}\n id={id}\n item={{ grow: 1 }}\n onClick={onStepClick}\n >\n <StyledStepType visual={visual}>\n {visual.imgurl.length > 0 && (\n <Avatar name={visual.title} imageSrc={visual?.imgurl} shape='squircle' size='m' />\n )}\n {!visual.imgurl && <Icon name={visual.icon} />}\n </StyledStepType>\n\n <Flex\n as={StyledStepButtonWrapper}\n item={{ grow: 1 }}\n container={{ inline: true, alignItems: 'center', justify: 'between' }}\n id={buttonDescriptionId}\n >\n <StyledStepButton\n {...restProps}\n onFocus={() => {\n setStepHasFocus(true);\n }}\n onBlur={() => {\n setStepHasFocus(false);\n }}\n aria-label={t(error ? 'step_name_error' : 'step_name', [value])}\n ref={setStepLabelEl}\n >\n {value}\n <Tooltip smart target={stepLabelEl} showDelay='none' hideDelay='none'>\n {value}\n </Tooltip>\n </StyledStepButton>\n {badge?.type && (\n <Flex as={StyledStepBadge} container={{ inline: true, alignItems: 'center' }}>\n <Status variant={badge?.type \|\| 'success'}>{badge?.label}</Status>\n </Flex>\n )}\n </Flex>\n {actionsClone && <Actions items={actionsClone} menuAt={2} iconOnly />}\n </Flex>\n </Flex>\n );\n};\n\nexport default Step;\n"]}
1	+ {"version":3,"file":"Step.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Step.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useContext } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, MouseEvent, RefCallback } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Flex,\n defaultThemeProp,\n Icon,\n Status,\n Actions,\n useI18n,\n Avatar,\n useUID,\n useTestIds,\n VisuallyHiddenText,\n withTestIds,\n Tooltip,\n useElement\n} from '@pega/cosmos-react-core';\nimport type { BaseProps, ForwardProps, Action } from '@pega/cosmos-react-core';\nimport { DragHandle, StyledDragHandle } from '@pega/cosmos-react-dnd';\n\nimport IconTile from '../IconTile';\nimport type { IconTileProps } from '../IconTile/IconTile.types';\n\nimport { generateDynamicTestId } from './utils';\nimport type {\n TaskItemProps,\n StepItemProps,\n StageItemProps,\n CategoryItemProps,\n LifeCycleActionParam,\n StepProps\n} from './LifeCycle.types';\nimport LifeCycleContext from './LifeCycleContext';\nimport { getStepTestIds } from './LifeCycle.test-ids';\n\nconst borderRadius = 'border-radius';\ninterface CategoryLabelProp {\n categoryLabel?: string;\n}\nexport interface VisualStepItemProps extends Omit<IconTileProps, 'size'> {\n imgSrc: string;\n}\nexport interface StepComponentProps extends BaseProps, StepProps {\n /** Pass text for the step. /\n value: string;\n /* unique id of step /\n id: string;\n /* Determines the visual for icon, color and label to render.\n * This color is passed as a variant and accessible colors are used to display.\n * Icon and label are passed as normal string /\n visual: VisualStepItemProps;\n /* Determines the variant and label for the badges /\n badge?: StepItemProps['status'];\n /* The status is used to show the input error status and the info on tooltip in case of error /\n error?: string;\n /* Data of the steps which can be used to send the full info back /\n item: StepItemProps;\n stageItem: StageItemProps;\n taskItem: TaskItemProps;\n categoryItem: CategoryItemProps & CategoryLabelProp;\n dragRef?: RefCallback<HTMLElement>;\n previewRef?: RefCallback<HTMLElement>;\n}\n\nexport const StyledStepType = styled.div<Pick<StepComponentProps, 'visual'>>(\n ({ visual, theme }) => {\n return visual?.imgSrc\n ? css`\n height: 2rem;\n padding-inline-end: calc(0.25 ${theme.base.spacing});\n `\n : css`\n margin: calc(0.5 * ${theme.base.spacing});\n border-radius: calc(0.25 * ${theme.base[borderRadius]});\n `;\n }\n);\n\nStyledStepType.defaultProps = defaultThemeProp;\n\nexport const StyledStepBadge = styled.div(({ theme }) => {\n return css`\n padding: 0 calc(0.5 * ${theme.base.spacing});\n justify-content: flex-end;\n width: auto;\n max-width: calc(50% - ${theme.base.spacing});\n\n > span {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n `;\n});\n\nStyledStepBadge.defaultProps = defaultThemeProp;\n\nexport const StyledStepWrapper = styled.li<{\n hasFocus: boolean;\n selected: boolean;\n}>(({ hasFocus, theme, selected }) => {\n return css`\n width: 100%;\n border: 0.125rem solid transparent;\n border-radius: calc(0.5 * ${theme.base[borderRadius]});\n\n &:not(:last-of-type) {\n margin: 0 0 calc(0.5 * ${theme.base.spacing});\n }\n\n ${hasFocus &&\n css`\n box-shadow: ${theme.base.shadow.focus};\n `}\n\n &:hover {\n cursor: pointer;\n }\n ${selected &&\n css`\n &[aria-current='step'] {\n border-color: ${theme.base.palette.interactive};\n }\n `}\n `;\n});\n\nStyledStepWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledStep = styled.div(({ theme }) => {\n return css`\n background: ${theme.base.palette['secondary-background']};\n border: 0.125rem solid transparent;\n border-radius: calc(0.5 * ${theme.base[borderRadius]});\n\n &:hover {\n cursor: pointer;\n }\n\n ${StyledDragHandle} {\n margin-block: calc(0.5 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\nconst StyledStepButtonWrapper = styled.div<{ error: string }>(({ theme }) => {\n return css`\n border-radius: calc(0.5 * ${theme.base[borderRadius]});\n margin-inline: calc(0.5 * ${theme.base.spacing});\n `;\n});\n\nStyledStepButtonWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledStepButton = styled.button<{ $wrap?: StepComponentProps['wrap'] }>(\n ({ theme, $wrap }) => {\n return css`\n border: none;\n height: ${theme.components.button.height};\n overflow: hidden;\n text-align: start;\n background: ${theme.base.palette['secondary-background']};\n\n ${$wrap\n ? css`\n height: fit-content;\n line-height: 1.2;\n min-height: ${theme.components.button.height};\n word-break: break-word;\n padding-block: calc(0.5 * ${theme.base.spacing});\n padding-inline-end: calc(0.5 * ${theme.base.spacing});\n `\n : css`\n white-space: nowrap;\n text-overflow: ellipsis;\n `}\n\n &:hover {\n cursor: pointer;\n }\n\n &:focus {\n outline: none;\n }\n `;\n }\n);\n\nStyledStepButton.defaultProps = defaultThemeProp;\n\nexport const StyledWarnIcon = styled(Icon)(({ theme }) => {\n return css`\n color: ${theme.base.palette.urgent};\n margin: calc(0.5 * ${theme.base.spacing});\n height: 1.5rem;\n flex-shrink: 0;\n &:hover {\n cursor: pointer;\n }\n `;\n});\n\nStyledWarnIcon.defaultProps = defaultThemeProp;\n\nconst Step: FunctionComponent<StepComponentProps & ForwardProps> = ({\n value,\n id,\n visual,\n actions,\n badge,\n error,\n wrap,\n categoryItem,\n item,\n stageItem,\n taskItem,\n onClick,\n dragRef,\n previewRef,\n ...restProps\n}: PropsWithoutRef<StepComponentProps>) => {\n const t = useI18n();\n const { selectedItemId, dragDropConfig, dragEnabled } = useContext(LifeCycleContext);\n const [stepHasFocus, setStepHasFocus] = useState(false);\n const [stepButtonEl, setStepButtonEl] = useElement();\n const stepButtonDescriptionId: string = useUID();\n const errorId: string = useUID();\n // Deep copy of actions is required to provide consistent callback objects on actions\n const actionsClone: Action[] = [];\n\n const stepTestID = generateDynamicTestId([\n stageItem.label,\n categoryItem.categoryLabel,\n taskItem.label,\n value\n ]);\n const testIds = useTestIds(stepTestID, getStepTestIds);\n\n // Need to check the value with statusProps\n const onActionItemClick = (\n actionId: string,\n e: MouseEvent<HTMLInputElement \| HTMLAnchorElement \| HTMLButtonElement>,\n menuButtonEl?: HTMLButtonElement\n ) => {\n e.stopPropagation();\n const param: LifeCycleActionParam = {\n task: taskItem,\n stage: stageItem,\n step: item,\n category: categoryItem\n };\n actions?.forEach(actionItem => {\n if (actionItem.id === actionId) {\n actionItem.onClick(param, e, menuButtonEl);\n }\n });\n };\n\n if (actions) {\n actions.forEach(actionItem => {\n const actionCloneItem = {} as Action;\n Object.keys(actionItem).forEach((key: string) => {\n actionCloneItem[key] = actionItem[key];\n });\n actionCloneItem.onClick = onActionItemClick;\n actionsClone.push(actionCloneItem);\n return actionItem;\n });\n }\n\n const onStepClick = (e: MouseEvent) => {\n e.stopPropagation();\n const actionParam: LifeCycleActionParam = {\n value,\n step: item,\n task: taskItem,\n category: categoryItem,\n stage: stageItem,\n type: 'Step'\n };\n onClick?.(actionParam, e);\n };\n\n return (\n <Flex\n id={id}\n ref={previewRef}\n data-testid={testIds.root}\n as={StyledStepWrapper}\n container={{ inline: true, alignItems: 'center' }}\n aria-current={selectedItemId === id ? 'step' : undefined}\n hasFocus={stepHasFocus && selectedItemId !== id}\n selected={selectedItemId === id}\n >\n <Flex\n as={StyledStep}\n container={{ inline: true, alignItems: 'start' }}\n item={{ grow: 1 }}\n onClick={onStepClick}\n >\n {dragEnabled && dragDropConfig[item.alternate ? 'alternate-step' : 'step'].enabled && (\n <DragHandle itemId={id} ref={dragRef} onClick={e => e.stopPropagation()} />\n )}\n {error && (\n <>\n <VisuallyHiddenText id={errorId}>{error}</VisuallyHiddenText>\n <StyledWarnIcon name='warn-solid' />\n </>\n )}\n <Flex\n as={StyledStepType}\n visual={visual}\n container={{ inline: true, alignItems: 'center', justify: 'center' }}\n >\n {visual?.label && visual?.imgSrc ? (\n <Avatar name={visual.label} imageSrc={visual.imgSrc} shape='squircle' size='m' />\n ) : (\n <IconTile\n name={visual?.name}\n category={visual?.category}\n label={visual?.label}\n inverted={visual?.inverted}\n />\n )}\n </Flex>\n\n <Flex\n as={StyledStepButtonWrapper}\n item={{ grow: 1 }}\n container={{ inline: true, alignItems: 'center', justify: 'between' }}\n id={stepButtonDescriptionId}\n >\n <StyledStepButton\n {...restProps}\n $wrap={wrap}\n onFocus={() => {\n setStepHasFocus(true);\n }}\n onBlur={() => {\n setStepHasFocus(false);\n }}\n aria-label={t('step_name', [value])}\n aria-describedby={error ? errorId : ''}\n ref={setStepButtonEl}\n >\n {value}\n </StyledStepButton>\n {stepButtonEl && (\n <Tooltip target={stepButtonEl} smart>\n {value}\n </Tooltip>\n )}\n {badge?.type && (\n <Flex as={StyledStepBadge} container={{ inline: true, alignItems: 'center' }}>\n <Status variant={badge?.type \|\| 'success'}>{badge?.label}</Status>\n </Flex>\n )}\n </Flex>\n {actionsClone && (\n <Actions\n items={actionsClone}\n menuAt={2}\n iconOnly\n menuButtonProps={{ onClick: e => e.stopPropagation() }}\n contextualLabel={t('step_name', [value])}\n />\n )}\n </Flex>\n </Flex>\n );\n};\n\nexport default withTestIds(Step, getStepTestIds);\n"]}

package/lib/components/LifeCycle/Task.d.ts CHANGED Viewed

@@ -1,12 +1,15 @@
 import type { FunctionComponent } from 'react';
 import type { BaseProps, ForwardProps } from '@pega/cosmos-react-core';
 import type { TaskItemProps, StageItemProps, CategoryItemProps, StepProps, TaskProps } from './LifeCycle.types';
-interface TaskComponentProps extends BaseProps, TaskProps {
+interface CategoryLabelProp {
+    categoryLabel?: string;
+}
+export interface TaskComponentProps extends BaseProps, TaskProps {
     /** Pass text for the task. */
     value: string;
     /** support for an Avatar, Icon, or other supporting visual. */
     visual: {
-        imgurl: string;
+        imgSrc: string;
     };
     /** Pass task data */
     item: TaskItemProps;
@@ -17,18 +20,26 @@ interface TaskComponentProps extends BaseProps, TaskProps {
     /** Stage data to pass it as callback */
     stageItem: StageItemProps;
     /** Category data to pass it as callback */
-    categoryItem: CategoryItemProps;
+    categoryItem: CategoryItemProps & CategoryLabelProp;
     /** unique id of task */
     id: string;
 }
 export declare const StyledTaskList: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledCardHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledCardContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledTaskButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAddCustomStepButton: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").ButtonProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAddStepButton: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").ButtonProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCardContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    hasSteps?: boolean;
+}, never>;
+export declare const StyledTaskButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, Pick<TaskComponentProps, "visual">, never>;
 export declare const StyledTask: import("styled-components").StyledComponent<"article", import("styled-components").DefaultTheme, {
     hasFocus: boolean;
+    hasSteps?: boolean;
+    dragEnabled?: boolean;
 }, never>;
 export declare const StyledWarnIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, import("styled-components").DefaultTheme, {}, never>;
-declare const Task: FunctionComponent<TaskComponentProps & ForwardProps>;
-export default Task;
+declare const _default: FunctionComponent<TaskComponentProps & ForwardProps> & {
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly string[]>;
+};
+export default _default;
 //# sourceMappingURL=Task.d.ts.map

package/lib/components/LifeCycle/Task.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Task.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Task.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAiC,MAAM,OAAO,CAAC;~~AAe9E~~,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAU,MAAM,yBAAyB,CAAC;~~AAM~~/E,OAAO,KAAK,EACV,aAAa,EACb,cAAc,~~EAEd~~,iBAAiB,EAEjB,SAAS,EACT,SAAS,~~EACV~~,MAAM,mBAAmB,CAAC;~~AAG3B~~,UAAU,kBAAmB,SAAQ,SAAS,EAAE,SAAS;~~IACvD~~,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,qBAAqB;IACrB,IAAI,EAAE,aAAa,CAAC;IACpB,iGAAiG;IACjG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wCAAwC;IACxC,SAAS,EAAE,cAAc,CAAC;IAC1B,2CAA2C;IAC3C,YAAY,EAAE,iBAAiB,CAAC;~~IAChC~~,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,eAAO,MAAM,cAAc,wGASzB,CAAC;AAIH,eAAO,MAAM,gBAAgB,~~4GAK3B~~,CAAC;~~AAIH~~,eAAO,MAAM,~~iBAAiB~~,~~yGAI5B~~,CAAC;~~AAEH~~,eAAO,MAAM,~~gBAAgB~~,~~4GAkB3B~~,CAAC;~~AAIH~~,eAAO,MAAM,~~UAAU~~;~~cAA8B~~,OAAO;~~SAoB1D~~,CAAC;AAIH,eAAO,MAAM,~~cAAc~~,~~0LASzB~~,CAAC;~~AAIH~~,~~QAAA~~,MAAM,~~IAAI~~,~~EAAE~~,~~iBAAiB~~,CAAC,~~kBAAkB~~,~~GAAG~~,~~YAAY~~,~~CAwK9D~~,CAAC~~;AAEF~~,~~eAAe,IAAI,CAAC~~"}
1	+ {"version":3,"file":"Task.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Task.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAmB9E,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAU,MAAM,yBAAyB,CAAC;AAO/E,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,iBAAiB,EAEjB,SAAS,EACT,SAAS,EAEV,MAAM,mBAAmB,CAAC;AAK3B,UAAU,iBAAiB;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AACD,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,SAAS;IAC9D,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,qBAAqB;IACrB,IAAI,EAAE,aAAa,CAAC;IACpB,iGAAiG;IACjG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wCAAwC;IACxC,SAAS,EAAE,cAAc,CAAC;IAC1B,2CAA2C;IAC3C,YAAY,EAAE,iBAAiB,GAAG,iBAAiB,CAAC;IACpD,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,eAAO,MAAM,cAAc,wGASzB,CAAC;AAIH,eAAO,MAAM,gBAAgB,4GAW5B,CAAC;AAIF,eAAO,MAAM,yBAAyB,oNASpC,CAAC;AAIH,eAAO,MAAM,mBAAmB,oNAAmB,CAAC;AAEpD,eAAO,MAAM,iBAAiB;eAA2B,OAAO;SAQ9D,CAAC;AAIH,eAAO,MAAM,gBAAgB,4IAyB5B,CAAC;AAIF,eAAO,MAAM,UAAU;cACX,OAAO;eACN,OAAO;kBACJ,OAAO;SA6BrB,CAAC;AAIH,eAAO,MAAM,cAAc,0LAUzB,CAAC;;;;AA0PH,wBAAiD"}