@pega/cosmos-react-build 2.0.0-dev.9.2 → 2.0.0-rc.2

package/lib/components/LifeCycle/Stage.js

@@ -0,0 +1,297 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { readableColor } from 'polished';
+import { Flex, Actions, Icon, Tooltip, useElement, defaultThemeProp, useDirection, StyledTooltip, StyledButton } from '@pega/cosmos-react-core';
+export const StyledWrapper = styled.div `
+  overflow: hidden;
+`;
+export const StyledDragIcon = styled.div(({ theme, error }) => {
+    return css `
+    width: 0%;
+    transition: width ${theme.base.animation.speed};
+    ${error &&
+        css `
+      display: block;
+    `}
+    padding: 0 calc(0.5 * ${theme.base.spacing});
+    margin: calc(0.5 * ${theme.base.spacing}) 0;
+    color: ${theme.base.colors.white};
+    text-align: center;
+  `;
+});
+export const StyledInput = styled.input(({ error, theme }) => {
+    return css `
+    height: ${theme.components.input.height};
+    padding: 0 calc(0.5 * ${theme.base.spacing});
+    text-overflow: ellipsis;
+    border: 0.0625rem solid transparent;
+    border-radius: calc(0.5 * ${theme.base['border-radius']});
+    width: 100%;
+    color: ${theme.base.colors.white};
+    outline: none;
+    &:hover {
+      cursor: pointer;
+    }
+    &:disabled {
+      cursor: not-allowed;
+    }
+    ${error
+        ? css `
+          background: ${theme.base.colors.red['extra-light']};
+          border: 0.0625rem solid ${theme.base.colors.red.medium};
+          color: ${theme.base.colors.black};
+        `
+        : css `
+          background: ${theme.base.palette['primary-background']};
+          &&:focus:enabled {
+            color: ${theme.base.colors.black};
+            background: ${theme.base.palette['primary-background']};
+            border: 0.0625rem solid ${theme.base.colors.blue.medium};
+          }
+        `}
+  `;
+});
+export const StyledStageActions = styled.div(({ theme, error }) => {
+    return css `
+    z-index: 2;
+    visibility: hidden;
+    margin-inline-start: calc(0.5 * ${theme.base.spacing});
+
+    ${error &&
+        css `
+      visibility: visible;
+    `}
+
+    & > ${StyledButton} {
+      color: ${theme.base.colors.white};
+    }
+  `;
+});
+export const StyledStage = styled.div(({ variant, theme, tailPointed, headPointed, status }) => {
+    let bgColor;
+    let bgHover = '';
+    switch (variant) {
+        case 'start':
+            bgColor = theme.base.colors.blue.dark;
+            bgHover = theme.base.colors.blue.medium;
+            break;
+        case 'default':
+            bgColor = theme.base.colors.blue.medium;
+            bgHover = theme.base.colors.blue.light;
+            break;
+        case 'resolution':
+            bgColor = theme.base.colors.green.medium;
+            bgHover = theme.base.colors.green.light;
+            break;
+        case 'alternate':
+            bgColor = theme.base.colors.red.light;
+            bgHover = theme.base.colors.red['extra-light'];
+            break;
+        // eslint-disable-next-line sonarjs/no-duplicated-branches
+        default:
+            bgColor = theme.base.colors.blue.medium;
+            bgHover = theme.base.colors.blue.light;
+    }
+    const textColor = readableColor(bgHover);
+    const { rtl } = useDirection();
+    const roundedEndsStyles = css `
+    content: '';
+    position: absolute;
+    display: block;
+    width: calc(3 * ${theme.base.spacing});
+    height: calc(3 * ${theme.base.spacing});
+    top: calc(1 * ${theme.base.spacing});
+    border: 0;
+    border-inline-end: 0.0625rem solid transparent;
+  `;
+    return css `
+    position: relative;
+    padding: calc(0.5 * ${theme.base.spacing});
+    background: ${bgColor};
+    border: 0.0625rem solid transparent;
+    width: 100%;
+
+    &:hover {
+      cursor: pointer;
+      ${StyledDragIcon} {
+        @keyframes anim {
+          0% {
+            transform: scale(0);
+          }
+          100% {
+            transform: scale(1);
+          }
+        }
+        animation: anim ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
+        width: 10%;
+        transition: width ${theme.base.animation.speed};
+      }
+      ${StyledStageActions} {
+        ${css `
+          visibility: visible;
+        `}
+      }
+    }
+    &:focus-within {
+      border: 0.0625rem solid ${theme.base.colors.blue.medium};
+      ${!headPointed &&
+        css `
+        &::after {
+          border-inline-end: 0.0625rem solid ${theme.base.colors.blue.medium};
+          ${rtl
+            ? css `
+                border-block-start: 0.0625rem solid ${theme.base.colors.blue.medium};
+              `
+            : css `
+                border-block-end: 0.0625rem solid ${theme.base.colors.blue.medium};
+              `}
+        }
+      `}
+      ${!tailPointed &&
+        css `
+        &::before {
+          border-inline-end: 0.0625rem solid ${theme.base.colors.blue.medium};
+          ${rtl
+            ? css `
+                border-block-end: 0.0625rem solid ${theme.base.colors.blue.medium};
+              `
+            : css `
+                border-block-start: 0.0625rem solid ${theme.base.colors.blue.medium};
+              `}
+        }
+      `}
+      ${StyledDragIcon} {
+        ${css `
+          @keyframes anim {
+            0% {
+              transform: scale(0);
+            }
+            100% {
+              transform: scale(1);
+            }
+          }
+          animation: anim ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
+          width: 10%;
+          transition: width ${theme.base.animation.speed};
+        `}
+      }
+      ${StyledStageActions} {
+        ${css `
+          visibility: visible;
+        `}
+      }
+    }
+
+    ${!headPointed &&
+        css `
+      &::after {
+        ${roundedEndsStyles}
+        z-index: 1;
+        background: inherit;
+        transform: rotateZ(-45deg) skew(-15deg, -15deg);
+        inset-inline-end: calc(1.6 * ${theme.base.spacing} * -1);
+        border-block-end: 0.0625rem solid transparent;
+        ${rtl
+            ? css `
+              border-radius: calc(0.75 * ${theme.base['border-radius']}) 0.1rem 0.1rem 0.1rem;
+            `
+            : css `
+              border-radius: 0.0625rem 0.075rem calc(0.75 * ${theme.base['border-radius']})
+                0.0625rem;
+            `}
+      }
+    `}
+
+    ${!tailPointed &&
+        css `
+      &::before {
+        ${roundedEndsStyles}
+        background: ${theme.base.palette['app-background']};
+        transform: rotateZ(45deg) skew(15deg, 15deg);
+        inset-inline-start: calc(-1.6 * ${theme.base.spacing});
+        ${rtl
+            ? css `
+              border-block-end: 0.0625rem solid transparent;
+              border-radius: 0.0625rem 0 0.0625rem calc(0.75 * ${theme.base['border-radius']});
+            `
+            : css `
+              border-block-start: 0.0625rem solid transparent;
+              border-radius: 0.0625rem calc(0.75 * ${theme.base['border-radius']}) 0.0625rem 0;
+            `}
+      }
+    `}
+
+    ${StyledInput} {
+      ${!status &&
+        css `
+        border: 0.0625rem solid transparent;
+        background: ${bgColor};
+      `}
+      :hover:not([readonly]):not([disabled]):not(:focus) {
+        ${!status &&
+        css `
+          border: 0.0625rem solid transparent;
+          background: ${bgHover};
+
+          /* color: ${textColor}; */
+        `}
+      }
+    }
+  `;
+});
+StyledStage.defaultProps = defaultThemeProp;
+export const StyledInputWrapper = styled.div `
+  &:focus-within {
+    ${StyledTooltip} {
+      ${css `
+        display: none;
+      `}
+    }
+  }
+`;
+const Stage = forwardRef(({ value, actions, variant = 'default', headPointed = true, tailPointed = true, onChange, onFocus, id, item, error, ...restProps }, ref) => {
+    const [inputEl, setInputEl] = useElement();
+    const [stageName, setStageName] = useState(value);
+    const onInputChange = (e) => {
+        setStageName(e.target.value);
+        const param = {
+            value: stageName,
+            stage: item
+        };
+        onChange?.(param, e);
+    };
+    const onInputFocus = (e) => {
+        const param = {
+            value: stageName,
+            stage: item
+        };
+        onFocus?.(param, e);
+    };
+    const onActionItemClick = (actionId, e) => {
+        const param = {
+            stage: item
+        };
+        actions?.forEach((actionItem) => {
+            if (actionItem.id === actionId) {
+                actionItem.onClick?.(param, e);
+            }
+        });
+    };
+    /* Deep copy of actions object is required to provide consistent callback objects on actions */
+    const actionsClone = [];
+    if (actions) {
+        actions.forEach(actionItem => {
+            const actionCloneItem = {};
+            Object.keys(actionItem).forEach((key) => {
+                actionCloneItem[key] = actionItem[key];
+            });
+            actionCloneItem.onClick = onActionItemClick;
+            actionsClone.push(actionCloneItem);
+            return actionItem;
+        });
+    }
+    return (_jsx(Flex, { container: { inline: true }, as: StyledStage, ...restProps, ref: ref, variant: variant || 'default', tailPointed: tailPointed, headPointed: headPointed, status: error, role: 'columnheader', children: _jsxs(Flex, { as: StyledWrapper, container: { inline: true }, children: [_jsx(Flex, { as: StyledDragIcon, error: error, children: _jsx(Icon, { name: 'drag' }, void 0) }, void 0), _jsxs(Flex, { container: true, children: [_jsxs(Flex, { as: StyledInputWrapper, item: { grow: 1 }, container: { inline: true, alignItems: 'center' }, children: [_jsx(StyledInput, { value: stageName, type: 'text', ref: setInputEl, error: error, id: item.id, onChange: onInputChange, "aria-label": stageName, onFocus: onInputFocus }, void 0), stageName && (_jsx(Tooltip, { target: inputEl, hideDelay: 'none', children: error || stageName }, void 0))] }, void 0), _jsx(StyledStageActions, { error: error, children: actionsClone && _jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true }, void 0) }, void 0)] }, void 0)] }, void 0) }, void 0));
+});
+export default Stage;
+//# sourceMappingURL=Stage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stage.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Stage.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useState,\n  forwardRef,\n  FunctionComponent,\n  PropsWithChildren,\n  Ref,\n  ChangeEvent,\n  FocusEvent,\n  MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  Flex,\n  BaseProps,\n  ForwardProps,\n  Actions,\n  Icon,\n  Tooltip,\n  useElement,\n  FormControlProps,\n  defaultThemeProp,\n  useDirection,\n  StyledTooltip,\n  Action,\n  StyledButton\n} from '@pega/cosmos-react-core';\n\nimport { LifeCycleAction, LifeCycleActionParam, StageItemProps } from './LifeCycle.types';\n\nexport interface StageProps extends Omit<FormControlProps, 'status' | 'id'> {\n  /** Pass an array of Action objects to append button(s) inline with the Input. */\n  actions?: LifeCycleAction[];\n  /** Callback for Add stage */\n  onAddStage?: () => void;\n  /** Callback for Adding alternate stage */\n  onAddAlternateStage?: () => void;\n  /** Input Change */\n  onChange?: (param: LifeCycleActionParam, e: ChangeEvent<HTMLInputElement>) => void;\n  /** onFocus of input */\n  onFocus?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;\n}\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  variant?: StageItemProps['type'] | 'default';\n  /** To make the stage with pointed tail */\n  tailPointed?: boolean;\n  /** To make the stage with pointed head */\n  headPointed?: boolean;\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\nexport const StyledDragIcon = styled.div<{ error: string }>(({ theme, error }) => {\n  return css`\n    width: 0%;\n    transition: width ${theme.base.animation.speed};\n    ${error &&\n    css`\n      display: block;\n    `}\n    padding: 0 calc(0.5 * ${theme.base.spacing});\n    margin: calc(0.5 * ${theme.base.spacing}) 0;\n    color: ${theme.base.colors.white};\n    text-align: center;\n  `;\n});\n\nexport const StyledInput = styled.input<{ error: string | undefined }>(({ error, theme }) => {\n  return css`\n    height: ${theme.components.input.height};\n    padding: 0 calc(0.5 * ${theme.base.spacing});\n    text-overflow: ellipsis;\n    border: 0.0625rem solid transparent;\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n    width: 100%;\n    color: ${theme.base.colors.white};\n    outline: none;\n    &:hover {\n      cursor: pointer;\n    }\n    &:disabled {\n      cursor: not-allowed;\n    }\n    ${error\n      ? css`\n          background: ${theme.base.colors.red['extra-light']};\n          border: 0.0625rem solid ${theme.base.colors.red.medium};\n          color: ${theme.base.colors.black};\n        `\n      : css`\n          background: ${theme.base.palette['primary-background']};\n          &&:focus:enabled {\n            color: ${theme.base.colors.black};\n            background: ${theme.base.palette['primary-background']};\n            border: 0.0625rem solid ${theme.base.colors.blue.medium};\n          }\n        `}\n  `;\n});\n\nexport const StyledStageActions = styled.div<{\n  error?: string;\n}>(({ theme, error }) => {\n  return css`\n    z-index: 2;\n    visibility: hidden;\n    margin-inline-start: calc(0.5 * ${theme.base.spacing});\n\n    ${error &&\n    css`\n      visibility: visible;\n    `}\n\n    & > ${StyledButton} {\n      color: ${theme.base.colors.white};\n    }\n  `;\n});\n\nexport const StyledStage = styled.div<\n  Pick<StageComponentProps, 'variant'> & {\n    tailPointed: boolean;\n    headPointed: boolean;\n    status: boolean;\n  }\n>(({ variant, theme, tailPointed, headPointed, status }) => {\n  let bgColor;\n  let bgHover = '';\n  switch (variant) {\n    case 'start':\n      bgColor = theme.base.colors.blue.dark;\n      bgHover = theme.base.colors.blue.medium;\n      break;\n    case 'default':\n      bgColor = theme.base.colors.blue.medium;\n      bgHover = theme.base.colors.blue.light;\n      break;\n    case 'resolution':\n      bgColor = theme.base.colors.green.medium;\n      bgHover = theme.base.colors.green.light;\n      break;\n    case 'alternate':\n      bgColor = theme.base.colors.red.light;\n      bgHover = theme.base.colors.red['extra-light'];\n      break;\n    // eslint-disable-next-line sonarjs/no-duplicated-branches\n    default:\n      bgColor = theme.base.colors.blue.medium;\n      bgHover = theme.base.colors.blue.light;\n  }\n  const textColor = readableColor(bgHover);\n  const { rtl } = useDirection();\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      ${StyledDragIcon} {\n        @keyframes anim {\n          0% {\n            transform: scale(0);\n          }\n          100% {\n            transform: scale(1);\n          }\n        }\n        animation: anim ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n        width: 10%;\n        transition: width ${theme.base.animation.speed};\n      }\n      ${StyledStageActions} {\n        ${css`\n          visibility: visible;\n        `}\n      }\n    }\n    &:focus-within {\n      border: 0.0625rem solid ${theme.base.colors.blue.medium};\n      ${!headPointed &&\n      css`\n        &::after {\n          border-inline-end: 0.0625rem solid ${theme.base.colors.blue.medium};\n          ${rtl\n            ? css`\n                border-block-start: 0.0625rem solid ${theme.base.colors.blue.medium};\n              `\n            : css`\n                border-block-end: 0.0625rem solid ${theme.base.colors.blue.medium};\n              `}\n        }\n      `}\n      ${!tailPointed &&\n      css`\n        &::before {\n          border-inline-end: 0.0625rem solid ${theme.base.colors.blue.medium};\n          ${rtl\n            ? css`\n                border-block-end: 0.0625rem solid ${theme.base.colors.blue.medium};\n              `\n            : css`\n                border-block-start: 0.0625rem solid ${theme.base.colors.blue.medium};\n              `}\n        }\n      `}\n      ${StyledDragIcon} {\n        ${css`\n          @keyframes anim {\n            0% {\n              transform: scale(0);\n            }\n            100% {\n              transform: scale(1);\n            }\n          }\n          animation: anim ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n          width: 10%;\n          transition: width ${theme.base.animation.speed};\n        `}\n      }\n      ${StyledStageActions} {\n        ${css`\n          visibility: visible;\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      &::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 0 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 0;\n            `}\n      }\n    `}\n\n    ${StyledInput} {\n      ${!status &&\n      css`\n        border: 0.0625rem solid transparent;\n        background: ${bgColor};\n      `}\n      :hover:not([readonly]):not([disabled]):not(:focus) {\n        ${!status &&\n        css`\n          border: 0.0625rem solid transparent;\n          background: ${bgHover};\n\n          /* color: ${textColor}; */\n        `}\n      }\n    }\n  `;\n});\n\nStyledStage.defaultProps = defaultThemeProp;\n\nexport const StyledInputWrapper = styled.div`\n  &:focus-within {\n    ${StyledTooltip} {\n      ${css`\n        display: none;\n      `}\n    }\n  }\n`;\n\nconst Stage: FunctionComponent<StageComponentProps & ForwardProps> = forwardRef(\n  (\n    {\n      value,\n      actions,\n      variant = 'default',\n      headPointed = true,\n      tailPointed = true,\n      onChange,\n      onFocus,\n      id,\n      item,\n      error,\n      ...restProps\n    }: PropsWithChildren<StageComponentProps>,\n    ref: StageComponentProps['ref']\n  ) => {\n    const [inputEl, setInputEl] = useElement();\n    const [stageName, setStageName] = useState(value);\n\n    const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n      setStageName(e.target.value);\n      const param: LifeCycleActionParam = {\n        value: stageName,\n        stage: item\n      };\n      onChange?.(param, e);\n    };\n\n    const onInputFocus = (e: FocusEvent<HTMLInputElement>) => {\n      const param: LifeCycleActionParam = {\n        value: stageName,\n        stage: item\n      };\n      onFocus?.(param, 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      actions?.forEach((actionItem: LifeCycleAction) => {\n        if (actionItem.id === actionId) {\n          actionItem.onClick?.(param, e);\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      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    return (\n      <Flex\n        container={{ inline: true }}\n        as={StyledStage}\n        {...restProps}\n        ref={ref}\n        variant={variant || 'default'}\n        tailPointed={tailPointed}\n        headPointed={headPointed}\n        status={error}\n        role='columnheader'\n      >\n        <Flex as={StyledWrapper} container={{ inline: true }}>\n          <Flex as={StyledDragIcon} error={error}>\n            <Icon name='drag' />\n          </Flex>\n          <Flex container>\n            <Flex\n              as={StyledInputWrapper}\n              item={{ grow: 1 }}\n              container={{ inline: true, alignItems: 'center' }}\n            >\n              <StyledInput\n                value={stageName}\n                type='text'\n                ref={setInputEl}\n                error={error}\n                id={item.id}\n                onChange={onInputChange}\n                aria-label={stageName}\n                onFocus={onInputFocus}\n              />\n              {stageName && (\n                <Tooltip target={inputEl} hideDelay='none'>\n                  {error || stageName}\n                </Tooltip>\n              )}\n            </Flex>\n            <StyledStageActions error={error}>\n              {actionsClone && <Actions items={actionsClone} menuAt={2} iconOnly />}\n            </StyledStageActions>\n          </Flex>\n        </Flex>\n      </Flex>\n    );\n  }\n);\n\nexport default Stage;\n"]}

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

@@ -0,0 +1,51 @@
+import { FunctionComponent, ChangeEvent, FocusEvent } from 'react';
+import { BaseProps, ForwardProps, FormControlProps } from '@pega/cosmos-react-core';
+import { TaskItemProps, StepItemProps, StageItemProps, CategoryItemProps, LifeCycleAction, LifeCycleActionParam } from './LifeCycle.types';
+export interface StepProps extends Omit<FormControlProps, 'status' | 'id'> {
+    /** Pass an array of Action objects to append button(s) inline with the Input. */
+    actions?: LifeCycleAction[];
+    /** Input Change */
+    onChange?: (param: LifeCycleActionParam, e: ChangeEvent<HTMLInputElement>) => void;
+    /** callback for Focus of input */
+    onFocus?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;
+}
+interface StepComponentProps extends BaseProps, StepProps {
+    /** Pass text for the step. */
+    value?: string;
+    /** step data id */
+    id?: string;
+    /** 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: 'magenta' | 'studio' | 'congressBlue' | 'Japaneselaurel' | 'violet' | 'yellow' | 'orange' | 'darkyellow';
+        icon: string;
+        title: string;
+    };
+    badge?: StepItemProps['status'];
+    error?: string;
+    item: StepItemProps;
+    stageItem: StageItemProps;
+    taskItem: TaskItemProps;
+    categoryItem: CategoryItemProps;
+}
+export declare const StyledStepType: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    color: string;
+    ref: HTMLDivElement;
+    img: string;
+}, never>;
+export declare const StyledStepBadge: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledStepValueInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
+    error: string | undefined;
+}, never>;
+export declare const StyledStepStatus: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    badge: string;
+    error: string;
+}, never>;
+export declare const StyledStep: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    error: string;
+}, never>;
+declare const Step: FunctionComponent<StepComponentProps & ForwardProps>;
+export default Step;
+//# sourceMappingURL=Step.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Step.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,WAAW,EACX,UAAU,EAEX,MAAM,OAAO,CAAC;AAIf,OAAO,EAGL,SAAS,EACT,YAAY,EAKZ,gBAAgB,EAMjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACL,aAAa,EACb,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,gBAAgB,EAAE,QAAQ,GAAG,IAAI,CAAC;IACxE,iFAAiF;IACjF,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,mBAAmB;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnF,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAClF;AAED,UAAU,kBAAmB,SAAQ,SAAS,EAAE,SAAS;IACvD,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;oDAEgD;IAChD,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EACD,SAAS,GACT,QAAQ,GACR,cAAc,GACd,gBAAgB,GAChB,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,YAAY,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IAEF,KAAK,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IAEhC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,IAAI,EAAE,aAAa,CAAC;IACpB,SAAS,EAAE,cAAc,CAAC;IAC1B,QAAQ,EAAE,aAAa,CAAC;IACxB,YAAY,EAAE,iBAAiB,CAAC;CACjC;AAED,eAAO,MAAM,cAAc;WAAuB,MAAM;SAAO,cAAc;SAAO,MAAM;SAgDzF,CAAC;AAEF,eAAO,MAAM,eAAe,yGAY1B,CAAC;AAYH,eAAO,MAAM,oBAAoB;WAAyB,MAAM,GAAG,SAAS;SAoC3E,CAAC;AAEF,eAAO,MAAM,gBAAgB;WACpB,MAAM;WACN,MAAM;SAqBb,CAAC;AAEH,eAAO,MAAM,UAAU;WAAuB,MAAM;SAkDlD,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CA6H9D,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/LifeCycle/Step.js

@@ -0,0 +1,241 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import styled, { css } from 'styled-components';
+import { readableColor } from 'polished';
+import { Flex, defaultThemeProp, Icon, Tooltip, useElement, Status, Actions, useI18n, Avatar, StyledTooltip } from '@pega/cosmos-react-core';
+export const StyledStepType = styled.div(({ theme, color, img }) => {
+    let bgColor = '';
+    switch (color) {
+        case 'magenta':
+            bgColor = '#AC1361';
+            break;
+        case 'studio':
+            bgColor = '#684AAE';
+            break;
+        case 'congressBlue':
+            bgColor = '#0076d1';
+            break;
+        case 'Japaneselaurel':
+            bgColor = '#27813E';
+            break;
+        case 'violet':
+            bgColor = '#8C479F';
+            break;
+        case 'yellow':
+            bgColor = '#f7a801';
+            break;
+        case 'darkyellow':
+            bgColor = '#f7951c';
+            break;
+        case 'orange':
+            bgColor = '#f46c22';
+            break;
+        default:
+            bgColor = '#27813E';
+    }
+    const contrastColor = readableColor(bgColor);
+    return img
+        ? 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']});
+        `;
+});
+export const StyledStepBadge = styled.div(({ theme }) => {
+    return css `
+    padding: 0 calc(0.5 * ${theme.base.spacing});
+    justify-content: flex-end;
+    width: auto;
+    max-width: calc(50% - ${theme.base.spacing});
+    > span {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  `;
+});
+const StyledStepValue = styled.div(({ theme, error }) => {
+    return css `
+    border-radius: calc(0.5 * ${theme.base['border-radius']});
+    ${error &&
+        css `
+      background: ${theme.base.colors.red['extra-light']};
+    `}
+  `;
+});
+export const StyledStepValueInput = styled.input(({ error, theme }) => {
+    return css `
+      height: ${theme.components.input.height};
+      padding: 0 calc(0.5 * ${theme.base.spacing});
+      border: none;
+      border-inline-start: 0.0625rem solid transparent;
+      border-inline-end: 0.0625rem solid transparent;
+      text-overflow: ellipsis;
+      min-width: 40%;
+      outline: none;
+      &:hover {
+        cursor: pointer;
+      }
+      &:disabled {
+        cursor: not-allowed;
+      }
+      ${error
+        ? css `
+            background: ${theme.base.colors.red['extra-light']};
+            &:focus:enabled {
+              border-color: ${theme.base.colors.red.medium};
+            }
+          `
+        : css `
+            background: ${theme.base.palette['secondary-background']};
+            &&:hover {
+              background: ${theme.base.palette['app-background']};
+            }
+            &&:focus:enabled {
+              background: ${theme.base.palette['primary-background']};
+              border-color: ${theme.base.colors.blue.medium};
+            }
+          `}
+    `;
+});
+export const StyledStepStatus = styled.div(({ theme, badge, error }) => {
+    return css `
+    border: none;
+    ${badge &&
+        css `
+      display: none;
+    `}
+    visibility: hidden;
+    &:hover {
+      cursor: pointer;
+    }
+    &:focus:not([disabled]) {
+      outline: 0.0625rem solid ${theme.base.colors.blue.medium};
+    }
+    ${error &&
+        !badge &&
+        css `
+      visibility: visible;
+    `}
+  `;
+});
+export const StyledStep = styled.div(({ theme, error }) => {
+    return css `
+    background: ${theme.base.palette['secondary-background']};
+    border: 0.0625rem solid transparent;
+    border-radius: calc(0.5 * ${theme.base['border-radius']});
+    margin: 0 0 calc(0.5 * ${theme.base.spacing});
+    width: 100%;
+    ${error &&
+        css `
+      border-color: ${theme.base.colors.red.medium};
+      box-shadow: none;
+    `}
+    &:hover {
+      cursor: pointer;
+      ${StyledStepBadge} {
+        ${css `
+          display: none;
+        `}
+      }
+      ${StyledStepStatus} {
+        ${css `
+          visibility: visible;
+          display: inline-block;
+        `}
+      }
+    }
+    &:focus-within {
+      ${!error &&
+        css `
+        border-color: ${theme.base.colors.blue.medium};
+        box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};
+      `}
+      ${StyledStepBadge} {
+        ${css `
+          display: none;
+        `}
+      }
+      ${StyledStepStatus} {
+        ${css `
+          display: inline-block;
+          visibility: visible;
+        `}
+      }
+      ${StyledTooltip} {
+        ${css `
+          visibility: hidden;
+        `}
+      }
+    }
+  `;
+});
+StyledStep.defaultProps = defaultThemeProp;
+const Step = ({ value, id, visual, actions, badge, error, onChange, categoryItem, item, stageItem, taskItem, onFocus, ...restProps }) => {
+    const t = useI18n();
+    const [stepValue, setStepValue] = useState(value);
+    const [iconEl, setIconEl] = useElement();
+    const [actionEl, setActionEl] = useElement();
+    const [inputEl, setInputEl] = useElement();
+    const actionsLabel = t('actions');
+    const singleActionLabel = actions?.[0]?.text ?? '';
+    const tooltipValue = stepValue || error;
+    /* Need to check the value with statusProps */
+    const onActionItemClick = (actionId, e) => {
+        const param = {
+            task: taskItem,
+            stage: stageItem,
+            step: item,
+            category: categoryItem
+        };
+        actions?.forEach(actionItem => {
+            if (actionItem.id === actionId) {
+                actionItem.onClick(param, e);
+            }
+        });
+    };
+    /* Deep copy of actions is required to provide consistent callback objects on actions */
+    const actionsClone = [];
+    if (actions) {
+        actions.forEach(actionItem => {
+            const actionCloneItem = {};
+            Object.keys(actionItem).forEach((key) => {
+                actionCloneItem[key] = actionItem[key];
+            });
+            actionCloneItem.onClick = onActionItemClick;
+            actionsClone.push(actionCloneItem);
+            return actionItem;
+        });
+    }
+    const onInputChange = (e) => {
+        setStepValue(e.target.value);
+        const actionParam = {
+            value: e.target.value,
+            step: item,
+            task: taskItem,
+            category: categoryItem,
+            stage: stageItem
+        };
+        onChange?.(actionParam, e);
+    };
+    const onInputFocus = (e) => {
+        const actionParam = {
+            value: e.target.value,
+            step: item,
+            task: taskItem,
+            category: categoryItem,
+            stage: stageItem
+        };
+        onFocus?.(actionParam, e);
+    };
+    return (_jsxs(Flex, { as: StyledStep, container: { inline: true }, error: error, children: [_jsxs(Flex, { as: StyledStepType, color: visual.color, ref: setIconEl, img: visual.imgurl, children: [visual.imgurl.length > 0 && (_jsx(Avatar, { name: visual.title || '', imageSrc: visual?.imgurl, shape: 'squircle', size: 'm' }, void 0)), !visual.imgurl && _jsx(Icon, { name: visual.icon }, void 0)] }, void 0), _jsx(Tooltip, { target: iconEl, children: visual.title }, void 0), _jsxs(Flex, { as: StyledStepValue, item: { grow: 2 }, error: error, container: { inline: true, alignItems: 'center' }, children: [_jsx(StyledStepValueInput, { value: stepValue, type: 'text', ref: setInputEl, error: error, onChange: onInputChange, "aria-label": stepValue, id: item.id, ...restProps, onFocus: onInputFocus }, void 0), badge?.type && (_jsx(Flex, { as: StyledStepBadge, container: { inline: true, alignItems: 'center' }, children: _jsx(Status, { variant: badge?.type || 'success', children: badge?.label }, void 0) }, void 0))] }, void 0), _jsx(Tooltip, { target: inputEl, hideDelay: 'none', children: error || tooltipValue || 'test' }, void 0), _jsx(Flex, { as: StyledStepStatus, ref: setActionEl, badge: badge?.type, error: error, children: actionsClone && _jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true }, void 0) }, void 0), _jsx(Tooltip, { target: actionEl, "aria-hidden": 'true', children: actions && actions?.length > 1 ? actionsLabel : singleActionLabel }, void 0)] }, void 0));
+};
+export default Step;
+//# sourceMappingURL=Step.js.map