@pega/cosmos-react-work 3.0.0-dev.12.0 → 3.0.0-dev.15.0

package/lib/components/Stages/Stages.styles.js

@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
-import { calculateFontSize, defaultThemeProp, StyledIcon, StyledText, useDirection } from '@pega/cosmos-react-core';
+import { rgba as polishedRgba } from 'polished';
+import { calculateFontSize, CardContent, DateTimeDisplay, defaultThemeProp, Popover, StyledIcon, tryCatch, useDirection } from '@pega/cosmos-react-core';
 export const StyledStages = styled.div(props => {
     return css `
     background-color: ${props.theme.base.palette['primary-background']};
@@ -20,195 +21,189 @@ export const StyledInnerStage = styled.span(props => {
     `}
   `;
 });
-export const StyledStage = styled.button(({ theme: { base: { spacing, palette, 'hit-area': hitArea, shadow, transparency, 'border-radius': borderRadius } } }) => {
-    const activeColor = palette.interactive;
-    const baseBorderColor = palette['border-line'];
+export const StyledStage = styled.button(({ theme: { base: { spacing, palette, 'hit-area': hitArea, transparency, 'border-radius': borderRadius } } }) => {
     const thinBorderWidth = '0.0625rem';
     const thickBorderWidth = '0.125rem';
-    const baseTransparency = transparency['transparent-2'];
-    const { rtl, start, end } = useDirection();
+    const { rtl } = useDirection();
+    const borderShadow = tryCatch(() => polishedRgba(palette['border-line'], 1));
     return css `
-    /* stylelint-disable no-descending-specificity */
-    background-color: inherit;
-    color: ${palette['foreground-color']};
-    outline: none;
-    border-color: transparent;
-    border-width: ${thinBorderWidth} 0;
-    border-style: solid;
-    position: relative;
-    height: calc(4 * ${spacing});
-    min-width: calc(5.25 * ${spacing});
-    padding-inline-start: calc(2 * ${spacing});
-    padding-inline-end: ${spacing};
-
-    @media (pointer: coarse) {
-      height: ${hitArea['finger-min']};
-      padding-inline-start: calc(2.25 * ${spacing});
-    }
-
-    ${StyledIcon} {
-      margin-inline-end: 0.25rem;
-      color: ${palette.success};
+      /* stylelint-disable no-descending-specificity */
+      background-color: inherit;
+      color: ${palette['foreground-color']};
+      outline: none;
+      border-color: transparent;
+      border-width: ${thinBorderWidth} 0;
+      border-style: solid;
+      position: relative;
+      height: calc(4 * ${spacing});
+      min-width: calc(5.25 * ${spacing});
+      padding-inline-start: calc(2 * ${spacing});
+      padding-inline-end: ${spacing};
 
-      &:last-child {
-        margin-inline-end: 0;
+      @media (pointer: coarse) {
+        height: ${hitArea['finger-min']};
+        padding-inline-start: calc(2.25 * ${spacing});
       }
-    }
 
-    ${StyledInnerStage} {
-      opacity: ${baseTransparency};
-    }
-
-    &:first-child {
-      border-top-${start}-radius: ${borderRadius};
-      border-bottom-${start}-radius: ${borderRadius};
-      border-inline-start-width: ${thinBorderWidth};
-      padding-inline-start: calc(${spacing});
-    }
+      ${StyledIcon} {
+        color: ${palette.success};
 
-    &:last-child {
-      border-top-${end}-radius: ${borderRadius};
-      border-bottom-${end}-radius: ${borderRadius};
-      border-inline-end-width: ${thinBorderWidth};
-      padding-inline-end: calc(${spacing});
-      min-width: calc(6.25 * ${spacing});
-    }
-
-    &:not(:first-child)::before {
-      content: '';
-      position: absolute;
-      display: block;
-      width: calc(2.25 * ${spacing});
-      height: calc(2.25 * ${spacing});
-      left: calc(-1.125 * ${spacing});
-      right: calc(-1.125 * ${spacing});
-      background-color: transparent;
-      border-style: solid;
-      border-color: ${baseBorderColor};
-      border-inline-end-width: ${thinBorderWidth};
-      border-inline-start-width: 0;
-      border-top-width: ${rtl ? 0 : thinBorderWidth};
-      border-bottom-width: ${rtl ? thinBorderWidth : 0};
-      transform: rotateZ(45deg) skew(15deg, 15deg);
+        & ~ ${StyledInnerStage} {
+          margin-inline-start: 0.25rem;
+        }
+      }
 
-      @media (pointer: coarse) {
-        width: calc(2.875 * ${spacing});
-        height: calc(2.875 * ${spacing});
-        left: calc(-1.375 * ${spacing});
-        right: calc(-1.375 * ${spacing});
-        transform: rotateZ(45deg) skew(20deg, 20deg);
+      ${StyledInnerStage} {
+        opacity: ${transparency['transparent-2']};
       }
-    }
 
-    &:hover,
-    &:hover::before {
-      border-color: ${baseBorderColor};
-    }
+      &:first-of-type {
+        border-start-start-radius: ${borderRadius};
+        border-end-start-radius: ${borderRadius};
+        border-inline-start-width: ${thinBorderWidth};
+        padding-inline-start: ${spacing};
 
-    &:hover {
-      ${StyledInnerStage} {
-        opacity: 1;
+        &:active {
+          padding-inline-start: ${spacing};
+        }
+
+        &:focus {
+          border-inline-start-width: ${thickBorderWidth};
+          padding-inline-start: calc(${spacing} - ${thickBorderWidth} + ${thinBorderWidth});
+        }
       }
-    }
 
-    &:focus,
-    &:active,
-    &:focus::before,
-    &:active::before,
-    &:focus + &::before,
-    &:active + &::before {
-      border-color: ${activeColor};
-    }
+      &:last-of-type {
+        border-start-end-radius: ${borderRadius};
+        border-end-end-radius: ${borderRadius};
+        border-inline-end-width: ${thinBorderWidth};
+        padding-inline-end: ${spacing};
+        min-width: calc(6.25 * ${spacing});
 
-    &:focus {
-      border-width: ${thickBorderWidth} 0;
-    }
+        &:active {
+          border-inline-end-width: ${thinBorderWidth};
+          padding-inline-end: ${spacing};
+        }
 
-    &:focus::before,
-    &:focus + &::before {
-      border-inline-end-width: ${thickBorderWidth};
-      border-top-width: ${rtl ? 0 : thickBorderWidth};
-      border-bottom-width: ${rtl ? thickBorderWidth : 0};
-    }
+        &:focus {
+          border-inline-end-width: ${thickBorderWidth};
+          padding-inline-end: calc(${spacing} - ${thinBorderWidth});
+        }
+      }
 
-    &:first-child:focus {
-      border-inline-start-width: ${thickBorderWidth};
-      padding-inline-start: calc(${spacing} - ${thickBorderWidth} + ${thinBorderWidth});
-    }
+      &:not(:first-of-type)::before,
+      &:not(:last-of-type)::after {
+        content: '';
+        position: absolute;
+        display: block;
+        width: calc(2.25 * ${spacing});
+        height: calc(2.25 * ${spacing});
+        background-color: transparent;
+        border-style: solid;
+        border-color: ${palette['border-line']};
+        border-inline-end-width: ${thinBorderWidth};
+        border-inline-start-width: 0;
+        border-top-width: ${rtl ? 0 : thinBorderWidth};
+        border-bottom-width: ${rtl ? thinBorderWidth : 0};
+        transform: rotateZ(45deg) skew(15deg, 15deg);
 
-    &:last-child:focus {
-      border-inline-end-width: ${thickBorderWidth};
-      padding-inline-end: calc(${spacing} - ${thinBorderWidth});
-    }
+        @media (pointer: coarse) {
+          width: calc(2.875 * ${spacing});
+          height: calc(2.875 * ${spacing});
+          transform: rotateZ(45deg) skew(20deg, 20deg);
+        }
+      }
 
-    &:active {
-      border-width: ${thinBorderWidth} 0;
+      &:not(:first-of-type)::before {
+        inset-inline-start: calc(-1.125 * ${spacing});
 
-      ${StyledInnerStage} {
-        opacity: ${transparency['transparent-3']};
+        @media (pointer: coarse) {
+          inset-inline-start: calc(-1.375 * ${spacing});
+        }
       }
-    }
 
-    &:active::before,
-    &:active + &::before {
-      border-inline-end-width: ${thinBorderWidth};
-      border-top-width: ${rtl ? 0 : thinBorderWidth};
-      border-bottom-width: ${rtl ? thinBorderWidth : 0};
-    }
+      &:not(:last-of-type)::after {
+        inset-inline-end: calc(-1.125 * ${spacing});
+        z-index: 1;
 
-    &:first-child:active {
-      border-inline-start-width: ${thinBorderWidth};
-      padding-inline-start: calc(${spacing});
-    }
+        @media (pointer: coarse) {
+          inset-inline-end: calc(-1.375 * ${spacing});
+        }
+      }
 
-    &:last-child:active {
-      border-inline-end-width: ${thinBorderWidth};
-      padding-inline-end: calc(${spacing});
-    }
+      &:hover,
+      &:hover::before,
+      &:hover::after {
+        border-color: ${palette['border-line']};
+      }
 
-    &[aria-current] {
-      z-index: 2;
+      &:focus,
+      &:active,
+      &:focus::before,
+      &:active::before,
+      &:focus::after,
+      &:active::after {
+        border-color: ${palette.interactive};
+      }
 
-      ${StyledInnerStage} {
-        font-weight: bold;
-        opacity: 1;
+      &:focus {
+        border-width: ${thickBorderWidth} 0;
       }
 
-      &:hover {
-        ${StyledInnerStage} {
-          opacity: ${baseTransparency};
-        }
+      &:focus::before,
+      &:focus::after {
+        z-index: 1;
+        border-inline-end-width: ${thickBorderWidth};
+        border-top-width: ${rtl ? 0 : thickBorderWidth};
+        border-bottom-width: ${rtl ? thickBorderWidth : 0};
+      }
+
+      &:focus::before {
+        pointer-events: none;
       }
+
       &:active {
+        border-width: ${thinBorderWidth} 0;
+
         ${StyledInnerStage} {
           opacity: ${transparency['transparent-3']};
         }
       }
-    }
 
-    &[aria-current] + &::before {
-      box-shadow: ${shadow.low};
-    }
+      &:active::before,
+      &:active::after {
+        border-inline-end-width: ${thinBorderWidth};
+        border-top-width: ${rtl ? 0 : thinBorderWidth};
+        border-bottom-width: ${rtl ? thinBorderWidth : 0};
+      }
 
-    &[aria-current] + &:focus::before {
-      box-shadow: none;
-    }
-  `;
+      &[aria-current] {
+        ${StyledInnerStage} {
+          font-weight: bold;
+          opacity: 1;
+        }
+
+        &:hover {
+          ${StyledInnerStage} {
+            opacity: ${transparency['transparent-2']};
+          }
+        }
+      }
+
+      &[aria-current]::after {
+        filter: drop-shadow(0.0625rem -0.0625rem 0.125rem ${borderShadow});
+      }
+    `;
 });
 StyledStage.defaultProps = defaultThemeProp;
-export const StyledStagePopover = styled.div(({ theme }) => {
-    return css `
-    padding: calc(2 * ${theme.base.spacing});
-    white-space: pre-line;
-    width: 18rem;
-  `;
-});
+export const StyledStagePopover = styled(Popover) `
+  width: 36ch;
+`;
 StyledStagePopover.defaultProps = defaultThemeProp;
 export const StyledStepsContainer = styled.ol(({ theme }) => {
     return css `
     list-style-type: none;
-    margin-top: calc(1.5 * ${theme.base.spacing});
-    margin-bottom: calc(2.5 * ${theme.base.spacing});
+    margin: calc(1.5 * ${theme.base.spacing}) 0;
 
     &:empty {
       margin-bottom: 0;
@@ -216,11 +211,9 @@ export const StyledStepsContainer = styled.ol(({ theme }) => {
   `;
 });
 StyledStepsContainer.defaultProps = defaultThemeProp;
-export const StyledStep = styled.li(({ complete, theme }) => {
-    const iconColor = complete ? theme.base.palette.success : theme.base.palette['foreground-color'];
-    const iconWidth = complete ? '1.125rem' : '0.3rem';
-    const iconMargin = complete ? 0 : '0.3rem';
-    const textOpacity = complete ? theme.base.transparency['transparent-3'] : 1;
+export const StyledStep = styled.li(({ completed, theme }) => {
+    const iconColor = encodeURIComponent(completed ? theme.base.palette.success : theme.base.palette['foreground-color']);
+    const textOpacity = completed ? theme.base.transparency['transparent-2'] : 1;
     return css `
     border-radius: 0;
     margin-bottom: calc(${theme.base.spacing});
@@ -230,46 +223,36 @@ export const StyledStep = styled.li(({ complete, theme }) => {
       margin-bottom: 0;
     }
 
-    ${StyledIcon} {
-      margin-inline-end: calc(${theme.base.spacing});
-      color: ${iconColor};
-      width: ${iconWidth};
-      margin-inline-start: ${iconMargin};
+    /* stylelint-disable no-duplicate-selectors */
+    &::before {
+      content: '\u00b7';
+      font-weight: 800;
+      width: 1rem;
+      text-align: center;
+      flex-shrink: 0;
     }
 
-    ${StyledText} {
+    ${completed &&
+        css `
+      &::before {
+        /* cSpell:disable-next-line */
+        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' fill='${iconColor}'%3E%3Cpath d='M3.5328125,10.8960938 C3.5328125,10.8960938 10.0460938,17.3617188 10.0460938,17.3617188 C10.0460938,17.3617188 22.4984375,4 22.4984375,4 C22.4984375,4 23.9828125,5.484375 23.9828125,5.484375 C23.9828125,5.484375 10.09375,20.2351562 10.09375,20.2351562 C10.09375,20.2351562 2,12.3804687 2,12.3804687 C2,12.3804687 3.5328125,10.8960937 3.5328125,10.8960937 L3.5328125,10.8960938 Z'/%3E%3C/svg%3E");
+        margin-block-start: calc(0.25 * ${theme.base.spacing});
+      }
+    `}
+    /* stylelint-enable no-duplicate-selectors */
+
+    div {
       opacity: ${textOpacity};
     }
   `;
 });
 StyledStep.defaultProps = defaultThemeProp;
-export const StyledSteps = styled.div `
-  background-color: ${props => props.theme.components.card.background};
-  position: relative;
+export const StyledPopoverContent = styled(CardContent) `
+  min-height: 6rem;
 `;
-StyledSteps.defaultProps = defaultThemeProp;
-export const StyledInnerStep = styled.span(({ complete, theme }) => {
-    const textOpacity = complete ? theme.base.transparency['transparent-2'] : 1;
-    return css `
-    display: flex;
-    width: 100%;
-    text-align: start;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-
-    ${StyledIcon} {
-      color: ${theme.base.palette.success};
-      margin-inline-end: ${theme.base.spacing};
-    }
-
-    ${StyledText} {
-      opacity: ${textOpacity};
-    }
-  `;
-});
-StyledInnerStep.defaultProps = defaultThemeProp;
-export const StyledDateTimeDisplay = styled.span(({ theme }) => {
+StyledPopoverContent.defaultProps = defaultThemeProp;
+export const StyledDateTimeDisplay = styled(DateTimeDisplay)(({ theme }) => {
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     return css `
     font-size: ${fontSize.xs};

package/lib/components/Stages/Stages.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stages.styles.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  calculateFontSize,\n  defaultThemeProp,\n  StyledIcon,\n  StyledText,\n  useDirection\n} from '@pega/cosmos-react-core';\n\nexport const StyledStages = styled.div(props => {\n  return css`\n    background-color: ${props.theme.base.palette['primary-background']};\n    border-radius: ${props.theme.base['border-radius']};\n    width: 100%;\n  `;\n});\n\nStyledStages.defaultProps = defaultThemeProp;\n\nexport const StyledInnerStage = styled.span<{ ellipsis?: boolean }>(props => {\n  return css`\n    display: inline-block;\n    text-align: center;\n    white-space: nowrap;\n    ${props.ellipsis &&\n    css`\n      overflow: hidden;\n      text-overflow: ellipsis;\n    `}\n  `;\n});\n\nexport const StyledStage = styled.button(\n  ({\n    theme: {\n      base: {\n        spacing,\n        palette,\n        'hit-area': hitArea,\n        shadow,\n        transparency,\n        'border-radius': borderRadius\n      }\n    }\n  }) => {\n    const activeColor = palette.interactive;\n    const baseBorderColor = palette['border-line'];\n    const thinBorderWidth = '0.0625rem';\n    const thickBorderWidth = '0.125rem';\n    const baseTransparency = transparency['transparent-2'];\n    const { rtl, start, end } = useDirection();\n\n    return css`\n    /* stylelint-disable no-descending-specificity */\n    background-color: inherit;\n    color: ${palette['foreground-color']};\n    outline: none;\n    border-color: transparent;\n    border-width: ${thinBorderWidth} 0;\n    border-style: solid;\n    position: relative;\n    height: calc(4 * ${spacing});\n    min-width: calc(5.25 * ${spacing});\n    padding-inline-start: calc(2 * ${spacing});\n    padding-inline-end: ${spacing};\n\n    @media (pointer: coarse) {\n      height: ${hitArea['finger-min']};\n      padding-inline-start: calc(2.25 * ${spacing});\n    }\n\n    ${StyledIcon} {\n      margin-inline-end: 0.25rem;\n      color: ${palette.success};\n\n      &:last-child {\n        margin-inline-end: 0;\n      }\n    }\n\n    ${StyledInnerStage} {\n      opacity: ${baseTransparency};\n    }\n\n    &:first-child {\n      border-top-${start}-radius: ${borderRadius};\n      border-bottom-${start}-radius: ${borderRadius};\n      border-inline-start-width: ${thinBorderWidth};\n      padding-inline-start: calc(${spacing});\n    }\n\n    &:last-child {\n      border-top-${end}-radius: ${borderRadius};\n      border-bottom-${end}-radius: ${borderRadius};\n      border-inline-end-width: ${thinBorderWidth};\n      padding-inline-end: calc(${spacing});\n      min-width: calc(6.25 * ${spacing});\n    }\n\n    &:not(:first-child)::before {\n      content: '';\n      position: absolute;\n      display: block;\n      width: calc(2.25 * ${spacing});\n      height: calc(2.25 * ${spacing});\n      left: calc(-1.125 * ${spacing});\n      right: calc(-1.125 * ${spacing});\n      background-color: transparent;\n      border-style: solid;\n      border-color: ${baseBorderColor};\n      border-inline-end-width: ${thinBorderWidth};\n      border-inline-start-width: 0;\n      border-top-width: ${rtl ? 0 : thinBorderWidth};\n      border-bottom-width: ${rtl ? thinBorderWidth : 0};\n      transform: rotateZ(45deg) skew(15deg, 15deg);\n\n      @media (pointer: coarse) {\n        width: calc(2.875 * ${spacing});\n        height: calc(2.875 * ${spacing});\n        left: calc(-1.375 * ${spacing});\n        right: calc(-1.375 * ${spacing});\n        transform: rotateZ(45deg) skew(20deg, 20deg);\n      }\n    }\n\n    &:hover,\n    &:hover::before {\n      border-color: ${baseBorderColor};\n    }\n\n    &:hover {\n      ${StyledInnerStage} {\n        opacity: 1;\n      }\n    }\n\n    &:focus,\n    &:active,\n    &:focus::before,\n    &:active::before,\n    &:focus + &::before,\n    &:active + &::before {\n      border-color: ${activeColor};\n    }\n\n    &:focus {\n      border-width: ${thickBorderWidth} 0;\n    }\n\n    &:focus::before,\n    &:focus + &::before {\n      border-inline-end-width: ${thickBorderWidth};\n      border-top-width: ${rtl ? 0 : thickBorderWidth};\n      border-bottom-width: ${rtl ? thickBorderWidth : 0};\n    }\n\n    &:first-child:focus {\n      border-inline-start-width: ${thickBorderWidth};\n      padding-inline-start: calc(${spacing} - ${thickBorderWidth} + ${thinBorderWidth});\n    }\n\n    &:last-child:focus {\n      border-inline-end-width: ${thickBorderWidth};\n      padding-inline-end: calc(${spacing} - ${thinBorderWidth});\n    }\n\n    &:active {\n      border-width: ${thinBorderWidth} 0;\n\n      ${StyledInnerStage} {\n        opacity: ${transparency['transparent-3']};\n      }\n    }\n\n    &:active::before,\n    &:active + &::before {\n      border-inline-end-width: ${thinBorderWidth};\n      border-top-width: ${rtl ? 0 : thinBorderWidth};\n      border-bottom-width: ${rtl ? thinBorderWidth : 0};\n    }\n\n    &:first-child:active {\n      border-inline-start-width: ${thinBorderWidth};\n      padding-inline-start: calc(${spacing});\n    }\n\n    &:last-child:active {\n      border-inline-end-width: ${thinBorderWidth};\n      padding-inline-end: calc(${spacing});\n    }\n\n    &[aria-current] {\n      z-index: 2;\n\n      ${StyledInnerStage} {\n        font-weight: bold;\n        opacity: 1;\n      }\n\n      &:hover {\n        ${StyledInnerStage} {\n          opacity: ${baseTransparency};\n        }\n      }\n      &:active {\n        ${StyledInnerStage} {\n          opacity: ${transparency['transparent-3']};\n        }\n      }\n    }\n\n    &[aria-current] + &::before {\n      box-shadow: ${shadow.low};\n    }\n\n    &[aria-current] + &:focus::before {\n      box-shadow: none;\n    }\n  `;\n  }\n);\n\nStyledStage.defaultProps = defaultThemeProp;\n\nexport const StyledStagePopover = styled.div(({ theme }) => {\n  return css`\n    padding: calc(2 * ${theme.base.spacing});\n    white-space: pre-line;\n    width: 18rem;\n  `;\n});\n\nStyledStagePopover.defaultProps = defaultThemeProp;\n\nexport const StyledStepsContainer = styled.ol(({ theme }) => {\n  return css`\n    list-style-type: none;\n    margin-top: calc(1.5 * ${theme.base.spacing});\n    margin-bottom: calc(2.5 * ${theme.base.spacing});\n\n    &:empty {\n      margin-bottom: 0;\n    }\n  `;\n});\n\nStyledStepsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledStep = styled.li<{ complete: boolean }>(({ complete, theme }) => {\n  const iconColor = complete ? theme.base.palette.success : theme.base.palette['foreground-color'];\n  const iconWidth = complete ? '1.125rem' : '0.3rem';\n  const iconMargin = complete ? 0 : '0.3rem';\n  const textOpacity = complete ? theme.base.transparency['transparent-3'] : 1;\n\n  return css`\n    border-radius: 0;\n    margin-bottom: calc(${theme.base.spacing});\n    color: ${theme.base.palette['foreground-color']};\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n\n    ${StyledIcon} {\n      margin-inline-end: calc(${theme.base.spacing});\n      color: ${iconColor};\n      width: ${iconWidth};\n      margin-inline-start: ${iconMargin};\n    }\n\n    ${StyledText} {\n      opacity: ${textOpacity};\n    }\n  `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\nexport const StyledSteps = styled.div`\n  background-color: ${props => props.theme.components.card.background};\n  position: relative;\n`;\n\nStyledSteps.defaultProps = defaultThemeProp;\n\nexport const StyledInnerStep = styled.span<{ complete: boolean }>(({ complete, theme }) => {\n  const textOpacity = complete ? theme.base.transparency['transparent-2'] : 1;\n  return css`\n    display: flex;\n    width: 100%;\n    text-align: start;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n\n    ${StyledIcon} {\n      color: ${theme.base.palette.success};\n      margin-inline-end: ${theme.base.spacing};\n    }\n\n    ${StyledText} {\n      opacity: ${textOpacity};\n    }\n  `;\n});\n\nStyledInnerStep.defaultProps = defaultThemeProp;\n\nexport const StyledDateTimeDisplay = styled.span(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  return css`\n    font-size: ${fontSize.xs};\n    opacity: ${theme.base.transparency['transparent-2']};\n  `;\n});\n\nStyledDateTimeDisplay.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Stages.styles.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,IAAI,YAAY,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,EACL,iBAAiB,EACjB,WAAW,EACX,eAAe,EACf,gBAAgB,EAChB,OAAO,EACP,UAAU,EACV,QAAQ,EACR,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IAC7C,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;qBACjD,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;GAEnD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAyB,KAAK,CAAC,EAAE;IAC1E,OAAO,GAAG,CAAA;;;;MAIN,KAAK,CAAC,QAAQ;QAChB,GAAG,CAAA;;;KAGF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CACtC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,EAC7F,EACF,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,WAAW,CAAC;IACpC,MAAM,gBAAgB,GAAG,UAAU,CAAC;IACpC,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,MAAM,YAAY,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAE7E,OAAO,GAAG,CAAA;;;eAGC,OAAO,CAAC,kBAAkB,CAAC;;;sBAGpB,eAAe;;;yBAGZ,OAAO;+BACD,OAAO;uCACC,OAAO;4BAClB,OAAO;;;kBAGjB,OAAO,CAAC,YAAY,CAAC;4CACK,OAAO;;;QAG3C,UAAU;iBACD,OAAO,CAAC,OAAO;;cAElB,gBAAgB;;;;;QAKtB,gBAAgB;mBACL,YAAY,CAAC,eAAe,CAAC;;;;qCAIX,YAAY;mCACd,YAAY;qCACV,eAAe;gCACpB,OAAO;;;kCAGL,OAAO;;;;uCAIF,gBAAgB;uCAChB,OAAO,MAAM,gBAAgB,MAAM,eAAe;;;;;mCAKtD,YAAY;iCACd,YAAY;mCACV,eAAe;8BACpB,OAAO;iCACJ,OAAO;;;qCAGH,eAAe;gCACpB,OAAO;;;;qCAIF,gBAAgB;qCAChB,OAAO,MAAM,eAAe;;;;;;;;;6BASpC,OAAO;8BACN,OAAO;;;wBAGb,OAAO,CAAC,aAAa,CAAC;mCACX,eAAe;;4BAEtB,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe;+BACtB,GAAG,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;;;;gCAIxB,OAAO;iCACN,OAAO;;;;;;4CAMI,OAAO;;;8CAGL,OAAO;;;;;0CAKX,OAAO;;;;4CAIL,OAAO;;;;;;;wBAO3B,OAAO,CAAC,aAAa,CAAC;;;;;;;;;wBAStB,OAAO,CAAC,WAAW;;;;wBAInB,gBAAgB;;;;;;mCAML,gBAAgB;4BACvB,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB;+BACvB,GAAG,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;;;;;;;;wBAQjC,eAAe;;UAE7B,gBAAgB;qBACL,YAAY,CAAC,eAAe,CAAC;;;;;;mCAMf,eAAe;4BACtB,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe;+BACtB,GAAG,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;;;;UAI9C,gBAAgB;;;;;;YAMd,gBAAgB;uBACL,YAAY,CAAC,eAAe,CAAC;;;;;;4DAMQ,YAAY;;KAEnE,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA;;CAEhD,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,OAAO,GAAG,CAAA;;yBAEa,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;GAKxC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,EAAE,CAAyB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;IACnF,MAAM,SAAS,GAAG,kBAAkB,CAClC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAChF,CAAC;IACF,MAAM,WAAW,GAAG,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAE7E,OAAO,GAAG,CAAA;;0BAEc,KAAK,CAAC,IAAI,CAAC,OAAO;aAC/B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;;;;;;;;;;;;;;MAe7C,SAAS;QACX,GAAG,CAAA;;;+GAGwG,SAAS;0CAC9E,KAAK,CAAC,IAAI,CAAC,OAAO;;KAEvD;;;;iBAIY,WAAW;;GAEzB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,WAAW,CAAC,CAAA;;CAEtD,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzE,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACtF,OAAO,GAAG,CAAA;iBACK,QAAQ,CAAC,EAAE;eACb,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC;GACpD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { rgba as polishedRgba } from 'polished';\n\nimport {\n  calculateFontSize,\n  CardContent,\n  DateTimeDisplay,\n  defaultThemeProp,\n  Popover,\n  StyledIcon,\n  tryCatch,\n  useDirection\n} from '@pega/cosmos-react-core';\n\nexport const StyledStages = styled.div(props => {\n  return css`\n    background-color: ${props.theme.base.palette['primary-background']};\n    border-radius: ${props.theme.base['border-radius']};\n    width: 100%;\n  `;\n});\n\nStyledStages.defaultProps = defaultThemeProp;\n\nexport const StyledInnerStage = styled.span<{ ellipsis?: boolean }>(props => {\n  return css`\n    display: inline-block;\n    text-align: center;\n    white-space: nowrap;\n    ${props.ellipsis &&\n    css`\n      overflow: hidden;\n      text-overflow: ellipsis;\n    `}\n  `;\n});\n\nexport const StyledStage = styled.button(\n  ({\n    theme: {\n      base: { spacing, palette, 'hit-area': hitArea, transparency, 'border-radius': borderRadius }\n    }\n  }) => {\n    const thinBorderWidth = '0.0625rem';\n    const thickBorderWidth = '0.125rem';\n    const { rtl } = useDirection();\n    const borderShadow = tryCatch(() => polishedRgba(palette['border-line'], 1));\n\n    return css`\n      /* stylelint-disable no-descending-specificity */\n      background-color: inherit;\n      color: ${palette['foreground-color']};\n      outline: none;\n      border-color: transparent;\n      border-width: ${thinBorderWidth} 0;\n      border-style: solid;\n      position: relative;\n      height: calc(4 * ${spacing});\n      min-width: calc(5.25 * ${spacing});\n      padding-inline-start: calc(2 * ${spacing});\n      padding-inline-end: ${spacing};\n\n      @media (pointer: coarse) {\n        height: ${hitArea['finger-min']};\n        padding-inline-start: calc(2.25 * ${spacing});\n      }\n\n      ${StyledIcon} {\n        color: ${palette.success};\n\n        & ~ ${StyledInnerStage} {\n          margin-inline-start: 0.25rem;\n        }\n      }\n\n      ${StyledInnerStage} {\n        opacity: ${transparency['transparent-2']};\n      }\n\n      &:first-of-type {\n        border-start-start-radius: ${borderRadius};\n        border-end-start-radius: ${borderRadius};\n        border-inline-start-width: ${thinBorderWidth};\n        padding-inline-start: ${spacing};\n\n        &:active {\n          padding-inline-start: ${spacing};\n        }\n\n        &:focus {\n          border-inline-start-width: ${thickBorderWidth};\n          padding-inline-start: calc(${spacing} - ${thickBorderWidth} + ${thinBorderWidth});\n        }\n      }\n\n      &:last-of-type {\n        border-start-end-radius: ${borderRadius};\n        border-end-end-radius: ${borderRadius};\n        border-inline-end-width: ${thinBorderWidth};\n        padding-inline-end: ${spacing};\n        min-width: calc(6.25 * ${spacing});\n\n        &:active {\n          border-inline-end-width: ${thinBorderWidth};\n          padding-inline-end: ${spacing};\n        }\n\n        &:focus {\n          border-inline-end-width: ${thickBorderWidth};\n          padding-inline-end: calc(${spacing} - ${thinBorderWidth});\n        }\n      }\n\n      &:not(:first-of-type)::before,\n      &:not(:last-of-type)::after {\n        content: '';\n        position: absolute;\n        display: block;\n        width: calc(2.25 * ${spacing});\n        height: calc(2.25 * ${spacing});\n        background-color: transparent;\n        border-style: solid;\n        border-color: ${palette['border-line']};\n        border-inline-end-width: ${thinBorderWidth};\n        border-inline-start-width: 0;\n        border-top-width: ${rtl ? 0 : thinBorderWidth};\n        border-bottom-width: ${rtl ? thinBorderWidth : 0};\n        transform: rotateZ(45deg) skew(15deg, 15deg);\n\n        @media (pointer: coarse) {\n          width: calc(2.875 * ${spacing});\n          height: calc(2.875 * ${spacing});\n          transform: rotateZ(45deg) skew(20deg, 20deg);\n        }\n      }\n\n      &:not(:first-of-type)::before {\n        inset-inline-start: calc(-1.125 * ${spacing});\n\n        @media (pointer: coarse) {\n          inset-inline-start: calc(-1.375 * ${spacing});\n        }\n      }\n\n      &:not(:last-of-type)::after {\n        inset-inline-end: calc(-1.125 * ${spacing});\n        z-index: 1;\n\n        @media (pointer: coarse) {\n          inset-inline-end: calc(-1.375 * ${spacing});\n        }\n      }\n\n      &:hover,\n      &:hover::before,\n      &:hover::after {\n        border-color: ${palette['border-line']};\n      }\n\n      &:focus,\n      &:active,\n      &:focus::before,\n      &:active::before,\n      &:focus::after,\n      &:active::after {\n        border-color: ${palette.interactive};\n      }\n\n      &:focus {\n        border-width: ${thickBorderWidth} 0;\n      }\n\n      &:focus::before,\n      &:focus::after {\n        z-index: 1;\n        border-inline-end-width: ${thickBorderWidth};\n        border-top-width: ${rtl ? 0 : thickBorderWidth};\n        border-bottom-width: ${rtl ? thickBorderWidth : 0};\n      }\n\n      &:focus::before {\n        pointer-events: none;\n      }\n\n      &:active {\n        border-width: ${thinBorderWidth} 0;\n\n        ${StyledInnerStage} {\n          opacity: ${transparency['transparent-3']};\n        }\n      }\n\n      &:active::before,\n      &:active::after {\n        border-inline-end-width: ${thinBorderWidth};\n        border-top-width: ${rtl ? 0 : thinBorderWidth};\n        border-bottom-width: ${rtl ? thinBorderWidth : 0};\n      }\n\n      &[aria-current] {\n        ${StyledInnerStage} {\n          font-weight: bold;\n          opacity: 1;\n        }\n\n        &:hover {\n          ${StyledInnerStage} {\n            opacity: ${transparency['transparent-2']};\n          }\n        }\n      }\n\n      &[aria-current]::after {\n        filter: drop-shadow(0.0625rem -0.0625rem 0.125rem ${borderShadow});\n      }\n    `;\n  }\n);\n\nStyledStage.defaultProps = defaultThemeProp;\n\nexport const StyledStagePopover = styled(Popover)`\n  width: 36ch;\n`;\n\nStyledStagePopover.defaultProps = defaultThemeProp;\n\nexport const StyledStepsContainer = styled.ol(({ theme }) => {\n  return css`\n    list-style-type: none;\n    margin: calc(1.5 * ${theme.base.spacing}) 0;\n\n    &:empty {\n      margin-bottom: 0;\n    }\n  `;\n});\n\nStyledStepsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledStep = styled.li<{ completed: boolean }>(({ completed, theme }) => {\n  const iconColor = encodeURIComponent(\n    completed ? theme.base.palette.success : theme.base.palette['foreground-color']\n  );\n  const textOpacity = completed ? theme.base.transparency['transparent-2'] : 1;\n\n  return css`\n    border-radius: 0;\n    margin-bottom: calc(${theme.base.spacing});\n    color: ${theme.base.palette['foreground-color']};\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n\n    /* stylelint-disable no-duplicate-selectors */\n    &::before {\n      content: '\\u00b7';\n      font-weight: 800;\n      width: 1rem;\n      text-align: center;\n      flex-shrink: 0;\n    }\n\n    ${completed &&\n    css`\n      &::before {\n        /* cSpell:disable-next-line */\n        content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' fill='${iconColor}'%3E%3Cpath d='M3.5328125,10.8960938 C3.5328125,10.8960938 10.0460938,17.3617188 10.0460938,17.3617188 C10.0460938,17.3617188 22.4984375,4 22.4984375,4 C22.4984375,4 23.9828125,5.484375 23.9828125,5.484375 C23.9828125,5.484375 10.09375,20.2351562 10.09375,20.2351562 C10.09375,20.2351562 2,12.3804687 2,12.3804687 C2,12.3804687 3.5328125,10.8960937 3.5328125,10.8960937 L3.5328125,10.8960938 Z'/%3E%3C/svg%3E\");\n        margin-block-start: calc(0.25 * ${theme.base.spacing});\n      }\n    `}\n    /* stylelint-enable no-duplicate-selectors */\n\n    div {\n      opacity: ${textOpacity};\n    }\n  `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\nexport const StyledPopoverContent = styled(CardContent)`\n  min-height: 6rem;\n`;\n\nStyledPopoverContent.defaultProps = defaultThemeProp;\n\nexport const StyledDateTimeDisplay = styled(DateTimeDisplay)(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  return css`\n    font-size: ${fontSize.xs};\n    opacity: ${theme.base.transparency['transparent-2']};\n  `;\n});\n\nStyledDateTimeDisplay.defaultProps = defaultThemeProp;\n"]}

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

@@ -1,16 +1,23 @@
-import { ReactNode } from 'react';
+import { ReactNode, Ref } from 'react';
 import { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';
 export interface StepProps {
+    /** Step name - either text or link. */
     name: ReactNode;
-    complete: boolean;
+    /** Flag determining whether step has been completed. */
+    completed: boolean;
+    /** Unique step identifier. */
     id: string;
 }
 export interface StageProps {
+    /** Stage name. */
     name: string;
+    /** Unique identifier. */
     id: string;
+    /** Date of completion. Accepts date object, ISO string or timestamp. */
     date?: Date | string | number;
-    required: boolean;
-    complete: boolean;
+    /** Flag determining whether the stage is completed. */
+    completed: boolean;
+    /** Steps data defined in this stage. The stage is treated as not loaded if undefined. */
     steps?: StepProps[];
 }
 export interface StagesProps extends BaseProps, NoChildrenProp {
@@ -18,6 +25,14 @@ export interface StagesProps extends BaseProps, NoChildrenProp {
     stages: StageProps[];
     /** Current stage id. */
     current: string;
+    /** Case title (label) */
     caseTitle?: string;
+    /**
+     * Callback invoked when stage details are requested to show.
+     * @param stages stages' ids requested to load details for.
+     */
+    onLoadStage?: (stages: StageProps['id'][]) => void;
+    /** Ref to the stages container. */
+    ref?: Ref<HTMLDivElement>;
 }
 //# sourceMappingURL=Stages.types.d.ts.map

package/lib/components/Stages/Stages.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stages.types.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEpE,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc;IAC5D,6DAA6D;IAC7D,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,wBAAwB;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
+{"version":3,"file":"Stages.types.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEpE,MAAM,WAAW,SAAS;IACxB,uCAAuC;IACvC,IAAI,EAAE,SAAS,CAAC;IAChB,wDAAwD;IACxD,SAAS,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,UAAU;IACzB,kBAAkB;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,wEAAwE;IACxE,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IAC9B,uDAAuD;IACvD,SAAS,EAAE,OAAO,CAAC;IACnB,yFAAyF;IACzF,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc;IAC5D,6DAA6D;IAC7D,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,wBAAwB;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC;IACnD,mCAAmC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}

package/lib/components/Stages/Stages.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stages.types.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode } from 'react';\n\nimport { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nexport interface StepProps {\n  name: ReactNode;\n  complete: boolean;\n  id: string;\n}\n\nexport interface StageProps {\n  name: string;\n  id: string;\n  date?: Date | string | number;\n  required: boolean;\n  complete: boolean;\n  steps?: StepProps[];\n}\n\nexport interface StagesProps extends BaseProps, NoChildrenProp {\n  /** List of objects describing each stage and their state. */\n  stages: StageProps[];\n  /** Current stage id. */\n  current: string;\n  caseTitle?: string;\n}\n"]}
+{"version":3,"file":"Stages.types.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nexport interface StepProps {\n  /** Step name - either text or link. */\n  name: ReactNode;\n  /** Flag determining whether step has been completed. */\n  completed: boolean;\n  /** Unique step identifier. */\n  id: string;\n}\n\nexport interface StageProps {\n  /** Stage name. */\n  name: string;\n  /** Unique identifier. */\n  id: string;\n  /** Date of completion. Accepts date object, ISO string or timestamp. */\n  date?: Date | string | number;\n  /** Flag determining whether the stage is completed. */\n  completed: boolean;\n  /** Steps data defined in this stage. The stage is treated as not loaded if undefined. */\n  steps?: StepProps[];\n}\n\nexport interface StagesProps extends BaseProps, NoChildrenProp {\n  /** List of objects describing each stage and their state. */\n  stages: StageProps[];\n  /** Current stage id. */\n  current: string;\n  /** Case title (label) */\n  caseTitle?: string;\n  /**\n   * Callback invoked when stage details are requested to show.\n   * @param stages stages' ids requested to load details for.\n   */\n  onLoadStage?: (stages: StageProps['id'][]) => void;\n  /** Ref to the stages container. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

package/lib/components/Timeline/Timeline.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.styles.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,UAAU,mOASrB,CAAC;AAIH,eAAO,MAAM,iBAAiB,0OAU5B,CAAC;AAIH,eAAO,MAAM,kBAAkB;eAA+B,OAAO;SAOnE,CAAC;AAIH,eAAO,MAAM,gBAAgB,mOAM5B,CAAC;AAIF,eAAO,MAAM,kBAAkB,mOAU7B,CAAC;AAIH,UAAU,wBAAwB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB,8HA4D/B,CAAC;AAIF,eAAO,MAAM,mBAAmB,2GA+B9B,CAAC;AAIH,eAAO,MAAM,UAAU,8OAetB,CAAC;AAIF,eAAO,MAAM,iBAAiB,wGAQ5B,CAAC;AAIH,eAAO,MAAM,UAAU,8OAKrB,CAAC;AAIH,eAAO,MAAM,iBAAiB,wGAO7B,CAAC"}
+{"version":3,"file":"Timeline.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.styles.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,UAAU,mOASrB,CAAC;AAIH,eAAO,MAAM,iBAAiB,0OAU5B,CAAC;AAIH,eAAO,MAAM,kBAAkB;eAA+B,OAAO;SAOnE,CAAC;AAIH,eAAO,MAAM,gBAAgB,mOAM5B,CAAC;AAIF,eAAO,MAAM,kBAAkB,mOAU7B,CAAC;AAIH,UAAU,wBAAwB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB,8HA6D/B,CAAC;AAIF,eAAO,MAAM,mBAAmB,2GA+B9B,CAAC;AAIH,eAAO,MAAM,UAAU,8OAetB,CAAC;AAIF,eAAO,MAAM,iBAAiB,wGAQ5B,CAAC;AAIH,eAAO,MAAM,UAAU,8OAKrB,CAAC;AAIH,eAAO,MAAM,iBAAiB,wGAO7B,CAAC"}

package/lib/components/Timeline/Timeline.styles.js

@@ -58,6 +58,7 @@ export const StyledBulletWrapper = styled.td(({ theme, hasPrev, hasNext, isPrevF
       position: relative;
       text-align: center;
       padding-top: calc(2.25 * ${theme.base.spacing} + 0.0625rem);
+      min-width: 2rem;
 
       ${hasPrev &&
         css `

package/lib/components/Timeline/Timeline.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.styles.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  calculateFontSize,\n  Card,\n  CardContent,\n  DateTimeDisplay,\n  defaultThemeProp,\n  Flex,\n  FontSize,\n  Grid,\n  StyledBackdrop,\n  StyledIcon,\n  useDirection\n} from '@pega/cosmos-react-core';\n\nexport const StyledCard = styled(Card)(({ theme }) => {\n  return css`\n    border-top: 0.0625rem solid ${theme.base.colors.slate.light};\n    padding: ${theme.base.spacing} 0;\n    &:not(& &) {\n      border-radius: 0;\n      background-color: transparent;\n    }\n  `;\n});\n\nStyledCard.defaultProps = defaultThemeProp;\n\nexport const StyledCardContent = styled(CardContent)(({ theme }) => {\n  return css`\n    &:not(${StyledCard} ${StyledCard} > &) {\n      padding: ${theme.base.spacing} 0;\n      padding-inline-start: ${theme.base['hit-area']['mouse-min']};\n      @media (pointer: coarse) {\n        padding-inline-start: ${theme.base['hit-area']['finger-min']};\n      }\n    }\n  `;\n});\n\nStyledCardContent.defaultProps = defaultThemeProp;\n\nexport const StyledToggleButton = styled(Button)<{ collapsed: boolean }>(({ theme, collapsed }) => {\n  return css`\n    transition: transform calc(2 * ${theme.base.animation.speed})\n      ${theme.base.animation.timing.ease};\n    transform: ${collapsed ? 'rotate(-90deg)' : 'rotate(0)'};\n    color: ${theme.components.button.color};\n  `;\n});\n\nStyledToggleButton.defaultProps = defaultThemeProp;\n\nexport const StyledCardHeader = styled(Grid)`\n  padding: 0;\n  min-height: 2rem;\n  ${StyledToggleButton} {\n    align-self: start;\n  }\n`;\n\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTimelineIcon = styled(Flex)(({ theme }) => {\n  return css`\n    border-radius: 50%;\n    color: ${theme.base.palette.light};\n    background: ${theme.base.palette.info};\n    & > ${StyledIcon} {\n      height: 1em;\n      width: 1em;\n    }\n  `;\n});\n\nStyledTimelineIcon.defaultProps = defaultThemeProp;\n\ninterface StyledBulletWrapperProps {\n  hasPrev: boolean;\n  hasNext: boolean;\n  isPrevFuture: boolean;\n  isNextFuture: boolean;\n  hasIcon: boolean;\n}\n\nexport const StyledBulletWrapper = styled.td<StyledBulletWrapperProps>(\n  ({ theme, hasPrev, hasNext, isPrevFuture, isNextFuture, hasIcon }) => {\n    const { rtl } = useDirection();\n    return css`\n      position: relative;\n      text-align: center;\n      padding-top: calc(2.25 * ${theme.base.spacing} + 0.0625rem);\n\n      ${hasPrev &&\n      css`\n        &::before {\n          content: '';\n          display: block;\n          position: absolute;\n          top: 0;\n          inset-inline-start: 50%;\n          transform: translateX(${rtl ? '50%' : '-50%'});\n          width: 0.0625rem;\n          height: calc(2.25 * ${theme.base.spacing} + 0.75rem);\n          border-inline-start: 0.0625rem ${isPrevFuture ? 'dashed' : 'solid'}\n            ${theme.base.palette.info};\n        }\n      `}\n\n      ${hasNext &&\n      css`\n        &::after {\n          content: '';\n          display: block;\n          position: absolute;\n          top: calc(2.25 * ${theme.base.spacing} + 0.75rem);\n          inset-inline-start: 50%;\n          transform: translateX(${rtl ? '50%' : '-50%'});\n          width: 0.0625rem;\n          height: calc(100% - 2.25 * ${theme.base.spacing} - 0.75rem);\n          border-inline-start: 0.0625rem ${isNextFuture ? 'dashed' : 'solid'}\n            ${theme.base.palette.info};\n        }\n      `}\n\n      & > ${StyledTimelineIcon} {\n        position: relative;\n        margin: 0;\n        z-index: 1;\n        width: ${hasIcon ? '1.5rem' : '0.5rem'};\n        height: ${hasIcon ? '1.5rem' : '0.5rem'};\n      }\n\n      @media (min-width: ${theme.base.breakpoints.sm}) {\n        padding-top: calc(${theme.base.spacing} + 0.0625rem);\n        &::before {\n          height: calc(${theme.base.spacing} + 0.75rem);\n        }\n        &::after {\n          top: calc(${theme.base.spacing} + 0.75rem);\n          height: calc(100% - ${theme.base.spacing} - 0.75rem);\n        }\n      }\n    `;\n  }\n);\n\nStyledBulletWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledTimelineTable = styled.table(({ theme }) => {\n  return css`\n    tr {\n      td {\n        border-inline-start: ${theme.base.spacing} solid transparent;\n        border-inline-end: ${theme.base.spacing} solid transparent;\n        vertical-align: top;\n      }\n      td:first-child {\n        border-inline-start: none;\n      }\n\n      td:last-child {\n        border-inline-end: none;\n      }\n    }\n    border-collapse: collapse;\n    width: 100%;\n    @media (min-width: ${theme.base.breakpoints.sm}) {\n      column-gap: ${theme.base.spacing};\n      tr {\n        td {\n          border-inline-start: calc(0.5 * ${theme.base.spacing}) solid transparent;\n          border-inline-end: calc(0.5 * ${theme.base.spacing}) solid transparent;\n        }\n      }\n      ${StyledCard} {\n        padding: calc(0.5 * ${theme.base.spacing}) 0;\n      }\n    }\n  `;\n});\n\nStyledTimelineTable.defaultProps = defaultThemeProp;\n\nexport const StyledDate = styled(DateTimeDisplay)(\n  ({\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n      components: { text }\n    }\n  }) => {\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n    return css`\n      display: block;\n      padding: calc(3 * ${spacing}) 0 calc(1.25 * ${spacing});\n      font-size: ${fontSizes[text.h2['font-size'] as FontSize]};\n      font-weight: ${text.h2['font-weight']};\n    `;\n  }\n);\n\nStyledDate.defaultProps = defaultThemeProp;\n\nexport const StyledTimeWrapper = styled.td(({ theme }) => {\n  return css`\n    @media (min-width: ${theme.base.breakpoints.sm}) {\n      text-align: end;\n      line-height: ${theme.base['hit-area']['mouse-min']};\n      padding-top: calc(0.5 * ${theme.base.spacing} + 0.0625rem);\n    }\n  `;\n});\n\nStyledTimeWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledTime = styled(DateTimeDisplay)(({ theme }) => {\n  return css`\n    opacity: ${theme.base.transparency['transparent-2']};\n    white-space: nowrap;\n  `;\n});\n\nStyledTime.defaultProps = defaultThemeProp;\n\nexport const StyledLoadingCell = styled.td`\n  position: relative;\n  height: 2.8rem;\n\n  ${StyledBackdrop} {\n    background: transparent;\n  }\n`;\n"]}
+{"version":3,"file":"Timeline.styles.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  calculateFontSize,\n  Card,\n  CardContent,\n  DateTimeDisplay,\n  defaultThemeProp,\n  Flex,\n  FontSize,\n  Grid,\n  StyledBackdrop,\n  StyledIcon,\n  useDirection\n} from '@pega/cosmos-react-core';\n\nexport const StyledCard = styled(Card)(({ theme }) => {\n  return css`\n    border-top: 0.0625rem solid ${theme.base.colors.slate.light};\n    padding: ${theme.base.spacing} 0;\n    &:not(& &) {\n      border-radius: 0;\n      background-color: transparent;\n    }\n  `;\n});\n\nStyledCard.defaultProps = defaultThemeProp;\n\nexport const StyledCardContent = styled(CardContent)(({ theme }) => {\n  return css`\n    &:not(${StyledCard} ${StyledCard} > &) {\n      padding: ${theme.base.spacing} 0;\n      padding-inline-start: ${theme.base['hit-area']['mouse-min']};\n      @media (pointer: coarse) {\n        padding-inline-start: ${theme.base['hit-area']['finger-min']};\n      }\n    }\n  `;\n});\n\nStyledCardContent.defaultProps = defaultThemeProp;\n\nexport const StyledToggleButton = styled(Button)<{ collapsed: boolean }>(({ theme, collapsed }) => {\n  return css`\n    transition: transform calc(2 * ${theme.base.animation.speed})\n      ${theme.base.animation.timing.ease};\n    transform: ${collapsed ? 'rotate(-90deg)' : 'rotate(0)'};\n    color: ${theme.components.button.color};\n  `;\n});\n\nStyledToggleButton.defaultProps = defaultThemeProp;\n\nexport const StyledCardHeader = styled(Grid)`\n  padding: 0;\n  min-height: 2rem;\n  ${StyledToggleButton} {\n    align-self: start;\n  }\n`;\n\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTimelineIcon = styled(Flex)(({ theme }) => {\n  return css`\n    border-radius: 50%;\n    color: ${theme.base.palette.light};\n    background: ${theme.base.palette.info};\n    & > ${StyledIcon} {\n      height: 1em;\n      width: 1em;\n    }\n  `;\n});\n\nStyledTimelineIcon.defaultProps = defaultThemeProp;\n\ninterface StyledBulletWrapperProps {\n  hasPrev: boolean;\n  hasNext: boolean;\n  isPrevFuture: boolean;\n  isNextFuture: boolean;\n  hasIcon: boolean;\n}\n\nexport const StyledBulletWrapper = styled.td<StyledBulletWrapperProps>(\n  ({ theme, hasPrev, hasNext, isPrevFuture, isNextFuture, hasIcon }) => {\n    const { rtl } = useDirection();\n    return css`\n      position: relative;\n      text-align: center;\n      padding-top: calc(2.25 * ${theme.base.spacing} + 0.0625rem);\n      min-width: 2rem;\n\n      ${hasPrev &&\n      css`\n        &::before {\n          content: '';\n          display: block;\n          position: absolute;\n          top: 0;\n          inset-inline-start: 50%;\n          transform: translateX(${rtl ? '50%' : '-50%'});\n          width: 0.0625rem;\n          height: calc(2.25 * ${theme.base.spacing} + 0.75rem);\n          border-inline-start: 0.0625rem ${isPrevFuture ? 'dashed' : 'solid'}\n            ${theme.base.palette.info};\n        }\n      `}\n\n      ${hasNext &&\n      css`\n        &::after {\n          content: '';\n          display: block;\n          position: absolute;\n          top: calc(2.25 * ${theme.base.spacing} + 0.75rem);\n          inset-inline-start: 50%;\n          transform: translateX(${rtl ? '50%' : '-50%'});\n          width: 0.0625rem;\n          height: calc(100% - 2.25 * ${theme.base.spacing} - 0.75rem);\n          border-inline-start: 0.0625rem ${isNextFuture ? 'dashed' : 'solid'}\n            ${theme.base.palette.info};\n        }\n      `}\n\n      & > ${StyledTimelineIcon} {\n        position: relative;\n        margin: 0;\n        z-index: 1;\n        width: ${hasIcon ? '1.5rem' : '0.5rem'};\n        height: ${hasIcon ? '1.5rem' : '0.5rem'};\n      }\n\n      @media (min-width: ${theme.base.breakpoints.sm}) {\n        padding-top: calc(${theme.base.spacing} + 0.0625rem);\n        &::before {\n          height: calc(${theme.base.spacing} + 0.75rem);\n        }\n        &::after {\n          top: calc(${theme.base.spacing} + 0.75rem);\n          height: calc(100% - ${theme.base.spacing} - 0.75rem);\n        }\n      }\n    `;\n  }\n);\n\nStyledBulletWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledTimelineTable = styled.table(({ theme }) => {\n  return css`\n    tr {\n      td {\n        border-inline-start: ${theme.base.spacing} solid transparent;\n        border-inline-end: ${theme.base.spacing} solid transparent;\n        vertical-align: top;\n      }\n      td:first-child {\n        border-inline-start: none;\n      }\n\n      td:last-child {\n        border-inline-end: none;\n      }\n    }\n    border-collapse: collapse;\n    width: 100%;\n    @media (min-width: ${theme.base.breakpoints.sm}) {\n      column-gap: ${theme.base.spacing};\n      tr {\n        td {\n          border-inline-start: calc(0.5 * ${theme.base.spacing}) solid transparent;\n          border-inline-end: calc(0.5 * ${theme.base.spacing}) solid transparent;\n        }\n      }\n      ${StyledCard} {\n        padding: calc(0.5 * ${theme.base.spacing}) 0;\n      }\n    }\n  `;\n});\n\nStyledTimelineTable.defaultProps = defaultThemeProp;\n\nexport const StyledDate = styled(DateTimeDisplay)(\n  ({\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n      components: { text }\n    }\n  }) => {\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n    return css`\n      display: block;\n      padding: calc(3 * ${spacing}) 0 calc(1.25 * ${spacing});\n      font-size: ${fontSizes[text.h2['font-size'] as FontSize]};\n      font-weight: ${text.h2['font-weight']};\n    `;\n  }\n);\n\nStyledDate.defaultProps = defaultThemeProp;\n\nexport const StyledTimeWrapper = styled.td(({ theme }) => {\n  return css`\n    @media (min-width: ${theme.base.breakpoints.sm}) {\n      text-align: end;\n      line-height: ${theme.base['hit-area']['mouse-min']};\n      padding-top: calc(0.5 * ${theme.base.spacing} + 0.0625rem);\n    }\n  `;\n});\n\nStyledTimeWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledTime = styled(DateTimeDisplay)(({ theme }) => {\n  return css`\n    opacity: ${theme.base.transparency['transparent-2']};\n    white-space: nowrap;\n  `;\n});\n\nStyledTime.defaultProps = defaultThemeProp;\n\nexport const StyledLoadingCell = styled.td`\n  position: relative;\n  height: 2.8rem;\n\n  ${StyledBackdrop} {\n    background: transparent;\n  }\n`;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-work",
-  "version": "3.0.0-dev.12.0",
+  "version": "3.0.0-dev.15.0",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,7 +20,7 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "3.0.0-dev.12.0",
+    "@pega/cosmos-react-core": "3.0.0-dev.15.0",
     "@types/react": "^16.14.24 || ^17.0.38",
     "@types/react-dom": "^16.9.14 || ^17.0.11",
     "@types/styled-components": "^5.1.7",
@@ -38,6 +38,9 @@
     "@storybook/react": "^6.4.19",
     "@storybook/testing-react": "^1.2.4",
     "@storybook/theming": "^6.4.19",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.3",
+    "@testing-library/user-event": "^13.5.0",
     "enzyme": "^3.11.0",
     "typescript": "~4.6.2"
   }