npm - @pega/cosmos-react-work - Versions diffs - 3.0.0-dev.3.0 → 3.0.0-dev.30.0 - Mend

@pega/cosmos-react-work 3.0.0-dev.3.0 → 3.0.0-dev.30.0

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

Files changed (177) hide show

package/lib/components/Stages/Stages.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useState, useRef, useEffect, useContext, useCallback } from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n Icon,\n registerIcon,\n Flex,\n ForwardProps,\n useElement,\n useOuterEvent,\n Popover,\n useI18n,\n Button,\n ModalManagerContext,\n ModalProps,\n Modal,\n getFocusables,\n useBreakpoint,\n debounce,\n useTheme\n} from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport { StagesProps } from './Stages.types';\nimport StepsContainer from './StepsContainer';\nimport { StyledInnerStage, StyledStage, StyledStagePopover, StyledStages } from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nconst Stages: FunctionComponent<StagesProps & ForwardProps> = (props: StagesProps) => {\n const { current, stages, caseTitle, ...restProps } = props;\n const t = useI18n();\n\n const [stagesEl, setStagesEl] = useElement<HTMLDivElement>();\n const [currentStageNameEl, setCurrentStageNameEl] = useElement<HTMLSpanElement>();\n const [currentStageButtonEl, setCurrentStageButtonEl] = useElement<HTMLButtonElement>();\n\n const [activeStageIndex, setActiveStageIndex] = useState<number>(0);\n const activeStageObj = stages[activeStageIndex];\n const stagesRefs = useRef<HTMLElement[]>([]);\n const activeStageEl = stagesRefs.current[activeStageIndex];\n const { create } = useContext(ModalManagerContext);\n const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n const [showPopover, setShowPopover] = useState(false);\n const popoverContentRef = useRef(null);\n const isSmallOrAbove = useBreakpoint('sm');\n const focusableElements = getFocusables(popoverContentRef);\n\n const [compressedView, setCompressedView] = useState(false);\n const [minExpandedWidth, setMinExpandedWidth] = useState(0);\n\n const resizeObserver = new ResizeObserver(\n debounce((entries: ResizeObserverEntry[]) => {\n if (entries[0].contentRect.width > minExpandedWidth) setCompressedView(false);\n }, 100)\n );\n\n const theme = useTheme();\n\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (entries[0].intersectionRatio < 1) {\n if (stagesEl) setMinExpandedWidth(Math.max(minExpandedWidth, stagesEl.offsetWidth + 1));\n setCompressedView(true);\n }\n },\n { root: currentStageButtonEl, rootMargin: `0px -${remToPx(theme.base.spacing)}`, threshold: 1 }\n );\n\n useEffect(() => {\n if (stagesEl && currentStageNameEl) {\n intersectionObserver.observe(currentStageNameEl as Element);\n resizeObserver.observe(stagesEl);\n\n return () => {\n intersectionObserver.disconnect();\n resizeObserver.disconnect();\n };\n }\n }, [stagesEl, currentStageNameEl, compressedView]);\n\n useOuterEvent('mousedown', [popoverEl, activeStageEl], e => {\n if (showPopover) {\n setShowPopover(false);\n e.preventDefault();\n }\n });\n\n const onMouseDown = (ev: React.MouseEvent<HTMLElement>) => {\n if (!showPopover) ev.preventDefault();\n };\n\n const onKeyDown = useCallback(\n ({ key }: KeyboardEvent) => {\n if (key === 'Escape') {\n setShowPopover(false);\n activeStageEl?.focus();\n }\n },\n [activeStageEl]\n );\n\n const onKeyDownPopover = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === 'Tab' && event.shiftKey) {\n const firstFocusable = focusableElements[0];\n\n if (document.activeElement === firstFocusable) {\n stagesRefs.current[activeStageIndex + 1]?.focus();\n setShowPopover(false);\n }\n }\n\n if (event.key === 'Tab' && !event.shiftKey) {\n const lastFocusable = focusableElements[focusableElements.length - 1];\n\n if (document.activeElement === lastFocusable) {\n activeStageEl?.focus();\n setShowPopover(false);\n }\n }\n },\n [activeStageEl, focusableElements, activeStageIndex]\n );\n\n useEffect(() => {\n document.addEventListener('keydown', onKeyDown);\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n };\n }, [onKeyDown]);\n\n useEffect(() => {\n if (focusableElements.length) focusableElements[0].focus();\n }, [popoverEl]);\n\n const [requestDismiss, setRequestDismiss] = useState(false);\n\n useEffect(() => {\n if (requestDismiss) {\n setShowPopover(false);\n activeStageEl?.focus();\n setRequestDismiss(false);\n }\n }, [activeStageEl, requestDismiss]);\n\n const RenderModal = ({\n heading = t('lifecycle', [caseTitle \|\| 'Case'])\n }: Partial<ModalProps>) => {\n return (\n <Modal {...restProps} heading={heading} onRequestDismiss={() => setRequestDismiss(true)}>\n {stages.map((stage, id) => (\n <StepsContainer currentStage={[stage]} key={id.toString()} />\n ))}\n </Modal>\n );\n };\n\n const openModal = () => {\n setShowPopover(false);\n create(RenderModal);\n };\n\n const isCurrent = (stageId: string) => current === stageId;\n\n return (\n <>\n <Flex container as={StyledStages} ref={setStagesEl} {...restProps}>\n {stages.map((stage, index) => (\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledStage}\n item={{ grow: compressedView && !isCurrent(stage.id) ? 0 : 1, shrink: 1 }}\n aria-current={isCurrent(stage.id) ? 'step' : undefined}\n aria-label={`Stage ${stage.name}`}\n key={`stage-${stage.id}`}\n ref={(el: HTMLButtonElement) => {\n stagesRefs.current[index] = el;\n if (isCurrent(stage.id)) setCurrentStageButtonEl(el);\n }}\n onMouseDown={onMouseDown}\n onClick={() => {\n setActiveStageIndex(index);\n if (isSmallOrAbove) {\n setShowPopover(!showPopover);\n } else {\n openModal();\n }\n }}\n >\n {stage.complete && <Icon name='check' />}\n {!(stage.complete && compressedView) && (\n <StyledInnerStage\n ref={isCurrent(stage.id) ? setCurrentStageNameEl : undefined}\n ellipsis={isCurrent(stage.id) && compressedView}\n >\n {!isCurrent(stage.id) && compressedView ? index + 1 : stage.name}\n </StyledInnerStage>\n )}\n </Flex>\n ))}\n </Flex>\n <Flex ref={popoverContentRef}>\n <Popover\n as={StyledStagePopover}\n show={showPopover && isSmallOrAbove}\n target={stagesRefs.current[activeStageIndex]}\n id='id'\n ref={setPopoverRef}\n arrow\n placement='bottom-start'\n onKeyDown={onKeyDownPopover}\n modifiers={[\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['bottom-end', 'right', 'left']\n }\n }\n ]}\n >\n <StepsContainer currentStage={[activeStageObj]} />\n <Button variant='secondary' onClick={openModal}>\n {t('stage_see_full_lifecycle')}\n </Button>\n </Popover>\n </Flex>\n </>\n );\n};\n\nexport default Stages;\n"]}
1	+ {"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n useState,\n useRef,\n useEffect,\n forwardRef,\n FocusEvent,\n PropsWithoutRef,\n Fragment\n} from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n Icon,\n registerIcon,\n Flex,\n ForwardProps,\n useElement,\n useOuterEvent,\n useI18n,\n Button,\n Modal,\n useBreakpoint,\n debounce,\n useModalManager,\n useTheme,\n useEscape,\n useConsolidatedRef,\n CardFooter,\n Card,\n useUID,\n Progress,\n ModalMethods\n} from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport type { StagesProps } from './Stages.types';\nimport StageGlimpse from './StageGlimpse';\nimport {\n StyledInnerStage,\n StyledPopoverContent,\n StyledStage,\n StyledStagePopover,\n StyledStages\n} from './Stages.styles';\n\nregisterIcon(checkIcon, timesIcon);\n\nconst Stages: FunctionComponent<StagesProps & ForwardProps> = forwardRef(\n (\n { current, stages, caseTitle, onLoadStage, ...restProps }: PropsWithoutRef<StagesProps>,\n ref: StagesProps['ref']\n ) => {\n const t = useI18n();\n\n const stagesRef = useConsolidatedRef(ref);\n const currentStageRef = useRef<HTMLButtonElement>(null);\n const [focusedStageIndex, setFocusedStageIndex] = useState<number \| undefined>(undefined);\n const focusedStageRef = useRef<HTMLButtonElement \| null>(null);\n\n const { create: createModal } = useModalManager();\n const modalMethods = useRef<ModalMethods>();\n const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n const [showPopover, setShowPopover] = useState(false);\n\n const isSmallOrAbove = useBreakpoint('sm');\n const [compressedView, setCompressedView] = useState(false);\n const [minExpandedWidth, setMinExpandedWidth] = useState(0);\n\n const {\n base: { spacing: themeSpacing }\n } = useTheme();\n\n const popoverId = useUID();\n\n useEffect(() => {\n if (stagesRef.current && currentStageRef.current) {\n if (compressedView) {\n const resizeObserver = new ResizeObserver(\n debounce((entries: ResizeObserverEntry[]) => {\n if (entries[0].contentRect.width > minExpandedWidth) setCompressedView(false);\n }, 100)\n );\n resizeObserver.observe(stagesRef.current);\n return () => resizeObserver.disconnect();\n }\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (entries[0].intersectionRatio < 1) {\n if (stagesRef.current)\n setMinExpandedWidth(Math.max(minExpandedWidth, stagesRef.current.offsetWidth + 1));\n setCompressedView(true);\n }\n },\n {\n root: currentStageRef.current,\n rootMargin: `0px -${remToPx(themeSpacing)}`,\n threshold: 1\n }\n );\n\n intersectionObserver.observe(currentStageRef.current.children[0]);\n\n return () => intersectionObserver.disconnect();\n }\n }, [themeSpacing, minExpandedWidth, compressedView]);\n\n useOuterEvent('mousedown', [popoverEl, focusedStageRef], () => {\n setShowPopover(false);\n });\n\n useEscape(() => {\n setShowPopover(false);\n focusedStageRef.current?.focus();\n }, stagesRef);\n\n const stagesToLoad = onLoadStage\n ? stages.filter(stage => !Array.isArray(stage.steps)).map(stage => stage.id)\n : [];\n\n const openModal = () => {\n setShowPopover(false);\n if (stagesToLoad.length > 0) onLoadStage?.(stagesToLoad);\n modalMethods.current = createModal(Modal, {\n heading: caseTitle\n ? t('stages_case_lifecycle', [caseTitle])\n : t('stages_default_case_lifecycle'),\n progress: stagesToLoad.length > 0,\n children: stages.map(stage => <StageGlimpse stage={stage} key={stage.id} />),\n onAfterClose: () => {\n focusedStageRef.current?.focus();\n modalMethods.current = undefined;\n }\n });\n };\n\n useEffect(() => {\n modalMethods.current?.update({\n progress: stagesToLoad.length > 0,\n children: stages.map(stage => <StageGlimpse stage={stage} key={stage.id} />)\n });\n }, [stagesToLoad.length]);\n\n return (\n <Flex\n {...restProps}\n container\n as={StyledStages}\n ref={stagesRef}\n role='region'\n aria-label={t('stages_label')}\n >\n {stages.map((stage, index) => {\n const isCurrent = stage.id === current;\n let stageStatusText = t(stage.completed ? 'completed' : 'not_started');\n if (isCurrent) stageStatusText = t('current');\n const hasToLoad = stagesToLoad.includes(stage.id);\n return (\n <Fragment key={stage.id}>\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledStage}\n item={{ grow: compressedView && !isCurrent ? 0 : 1, shrink: 1 }}\n aria-current={isCurrent ? 'step' : undefined}\n aria-label={t('stages_stage_label', [stage.name, stageStatusText])}\n ref={isCurrent ? currentStageRef : undefined}\n onClick={() => {\n if (isSmallOrAbove) {\n if (hasToLoad) onLoadStage?.([stage.id]);\n setShowPopover(prevShowPopover => !prevShowPopover);\n } else {\n openModal();\n }\n }}\n onFocus={(e: FocusEvent) => {\n setShowPopover(false);\n setFocusedStageIndex(index);\n focusedStageRef.current = e.currentTarget as HTMLButtonElement;\n }}\n aria-expanded={showPopover && isSmallOrAbove}\n aria-controls={showPopover ? popoverId : undefined}\n >\n {stage.completed && <Icon name='check' />}\n {!(stage.completed && compressedView) && (\n <StyledInnerStage ellipsis={isCurrent && compressedView}>\n {!isCurrent && compressedView ? index + 1 : stage.name}\n </StyledInnerStage>\n )}\n </Flex>\n {focusedStageIndex === index && showPopover && isSmallOrAbove && (\n <StyledStagePopover\n target={focusedStageRef.current}\n ref={setPopoverRef}\n arrow\n placement='bottom-start'\n modifiers={[\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['bottom-end', 'right', 'left']\n }\n }\n ]}\n id={popoverId}\n aria-busy={hasToLoad}\n >\n <Card>\n <StyledPopoverContent>\n {!hasToLoad ? (\n <StageGlimpse\n stage={stage}\n actions={[\n {\n id: 'close',\n text: t('close'),\n icon: 'times',\n onClick: () => {\n setShowPopover(false);\n focusedStageRef.current?.focus();\n }\n }\n ]}\n />\n ) : (\n <Progress placement='local' message={t('loading')} />\n )}\n </StyledPopoverContent>\n <CardFooter>\n <Button variant='secondary' onClick={openModal}>\n {t('stages_see_full_lifecycle')}\n </Button>\n </CardFooter>\n </Card>\n </StyledStagePopover>\n )}\n </Fragment>\n );\n })}\n </Flex>\n );\n }\n);\n\nexport default Stages;\n"]}

package/lib/components/Stages/Stages.styles.d.ts CHANGED Viewed

@@ -3,14 +3,12 @@ export declare const StyledInnerStage: import("styled-components").StyledCompone
     ellipsis?: boolean | undefined;
 }, never>;
 export declare const StyledStage: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledStagePopover: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledStagePopover: import("styled-components").StyledComponent<(<Modifiers extends string = string>(props: import("@pega/cosmos-react-core").PopoverProps<Modifiers> & import("@pega/cosmos-react-core").ForwardProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null), import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledStepsContainer: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledStep: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
-    complete: boolean;
+    completed: boolean;
 }, never>;
-export declare const StyledSteps: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledInnerStep: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
-    complete: boolean;
-}, never>;
-export declare const StyledDateTimeDisplay: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledPopoverContent: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardContentProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledDateTimeDisplay: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").DateTimeDisplayProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledStageGlimpse: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=Stages.styles.d.ts.map

package/lib/components/Stages/Stages.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stages.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"~~AAUA~~,eAAO,MAAM,YAAY,yGAMvB,CAAC;AAIH,eAAO,MAAM,gBAAgB;;SAW3B,CAAC;AAEH,eAAO,MAAM,WAAW,~~4GA4LvB~~,CAAC;AAIF,eAAO,MAAM,kBAAkB,~~yGAM7B~~,CAAC;~~AAIH~~,eAAO,MAAM,oBAAoB,~~wGAU~~/B,CAAC;AAIH,eAAO,MAAM,UAAU;~~cAAyB~~,OAAO;~~SA0BrD~~,CAAC;AAIH,eAAO,MAAM,~~WAAW~~,~~yGAGvB~~,CAAC;AAIF,eAAO,MAAM,~~eAAe;cAA2B~~,~~OAAO;SAmB5D~~,CAAC;AAIH,eAAO,MAAM,~~qBAAqB~~,~~0GAMhC~~,CAAC"}
1	+ {"version":3,"file":"Stages.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,YAAY,yGAMvB,CAAC;AAIH,eAAO,MAAM,gBAAgB;;SAW3B,CAAC;AAEH,eAAO,MAAM,WAAW,4GAoLvB,CAAC;AAIF,eAAO,MAAM,kBAAkB,6VAE9B,CAAC;AAIF,eAAO,MAAM,oBAAoB,wGAS/B,CAAC;AAIH,eAAO,MAAM,UAAU;eAA0B,OAAO;SAsCtD,CAAC;AAIH,eAAO,MAAM,oBAAoB,0OAEhC,CAAC;AAIF,eAAO,MAAM,qBAAqB,8OAMhC,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAM7B,CAAC"}

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

@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
-import { calculateFontSize, defaultThemeProp, StyledIcon, StyledText, useDirection } from '@pega/cosmos-react-core';
+import { rgba } 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,256 +21,238 @@ 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(() => rgba(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});
-    }
-    &: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});
-    }
+      ${StyledIcon} {
+        color: ${palette.success};
-    &: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(2 * ${theme.base.spacing}) 0 calc(3 * ${theme.base.spacing});
     &:empty {
-      margin-bottom: 0;
+      margin-block-end: 0;
     }
   `;
 });
 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});
+    margin-block-end: calc(${theme.base.spacing});
     color: ${theme.base.palette['foreground-color']};
     &:last-child {
-      margin-bottom: 0;
+      margin-block-end: 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.5 * ${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};
@@ -277,4 +260,12 @@ export const StyledDateTimeDisplay = styled.span(({ theme }) => {
   `;
 });
 StyledDateTimeDisplay.defaultProps = defaultThemeProp;
+export const StyledStageGlimpse = styled.div(({ theme }) => {
+    return css `
+    h2 {
+      margin-block-end: calc(0.25 * ${theme.base.spacing});
+    }
+  `;
+});
+StyledStageGlimpse.defaultProps = defaultThemeProp;
 //# sourceMappingURL=Stages.styles.js.map

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

	@@ -1 +1 @@
1	- {"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;AAEhD,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,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,EACJ,OAAO,EACP,OAAO,EACP,UAAU,EAAE,OAAO,EACnB,MAAM,EACN,YAAY,EACZ,eAAe,EAAE,YAAY,EAC9B,EACF,EACF,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC;IACxC,MAAM,eAAe,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;IAC/C,MAAM,eAAe,GAAG,WAAW,CAAC;IACpC,MAAM,gBAAgB,GAAG,UAAU,CAAC;IACpC,MAAM,gBAAgB,GAAG,YAAY,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE3C,OAAO,GAAG,CAAA;;;aAGD,OAAO,CAAC,kBAAkB,CAAC;;;oBAGpB,eAAe;;;uBAGZ,OAAO;6BACD,OAAO;qCACC,OAAO;0BAClB,OAAO;;;gBAGjB,OAAO,CAAC,YAAY,CAAC;0CACK,OAAO;;;MAG3C,UAAU;;eAED,OAAO,CAAC,OAAO;;;;;;;MAOxB,gBAAgB;iBACL,gBAAgB;;;;mBAId,KAAK,YAAY,YAAY;sBAC1B,KAAK,YAAY,YAAY;mCAChB,eAAe;mCACf,OAAO;;;;mBAIvB,GAAG,YAAY,YAAY;sBACxB,GAAG,YAAY,YAAY;iCAChB,eAAe;iCACf,OAAO;+BACT,OAAO;;;;;;;2BAOX,OAAO;4BACN,OAAO;4BACP,OAAO;6BACN,OAAO;;;sBAGd,eAAe;iCACJ,eAAe;;0BAEtB,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe;6BACtB,GAAG,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;;;;8BAIxB,OAAO;+BACN,OAAO;8BACR,OAAO;+BACN,OAAO;;;;;;;sBAOhB,eAAe;;;;QAI7B,gBAAgB;;;;;;;;;;;sBAWF,WAAW;;;;sBAIX,gBAAgB;;;;;iCAKL,gBAAgB;0BACvB,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB;6BACvB,GAAG,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;;;;mCAIpB,gBAAgB;mCAChB,OAAO,MAAM,gBAAgB,MAAM,eAAe;;;;iCAIpD,gBAAgB;iCAChB,OAAO,MAAM,eAAe;;;;sBAIvC,eAAe;;QAE7B,gBAAgB;mBACL,YAAY,CAAC,eAAe,CAAC;;;;;;iCAMf,eAAe;0BACtB,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe;6BACtB,GAAG,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;;;;mCAInB,eAAe;mCACf,OAAO;;;;iCAIT,eAAe;iCACf,OAAO;;;;;;QAMhC,gBAAgB;;;;;;UAMd,gBAAgB;qBACL,gBAAgB;;;;UAI3B,gBAAgB;qBACL,YAAY,CAAC,eAAe,CAAC;;;;;;oBAM9B,MAAM,CAAC,GAAG;;;;;;GAM3B,CAAC;AACF,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzD,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO;;;GAGvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,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;;6BAEiB,KAAK,CAAC,IAAI,CAAC,OAAO;gCACf,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;GAK/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,EAAE,CAAwB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IACjF,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACjG,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC;IACnD,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC3C,MAAM,WAAW,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAE5E,OAAO,GAAG,CAAA;;0BAEc,KAAK,CAAC,IAAI,CAAC,OAAO;aAC/B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;;;;;MAM7C,UAAU;gCACgB,KAAK,CAAC,IAAI,CAAC,OAAO;eACnC,SAAS;eACT,SAAS;6BACK,UAAU;;;MAGjC,UAAU;iBACC,WAAW;;GAEzB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;sBACf,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU;;CAEpE,CAAC;AAEF,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAwB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IACxF,MAAM,WAAW,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5E,OAAO,GAAG,CAAA;;;;;;;;MAQN,UAAU;eACD,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO;2BACd,KAAK,CAAC,IAAI,CAAC,OAAO;;;MAGvC,UAAU;iBACC,WAAW;;GAEzB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,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';\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"]}
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';\nimport { rgba } 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(() => rgba(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(2 * ${theme.base.spacing}) 0 calc(3 * ${theme.base.spacing});\n\n &:empty {\n margin-block-end: 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-block-end: calc(${theme.base.spacing});\n color: ${theme.base.palette['foreground-color']};\n\n &:last-child {\n margin-block-end: 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.5 ${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\nexport const StyledStageGlimpse = styled.div(({ theme }) => {\n return css`\n h2 {\n margin-block-end: calc(0.25 ${theme.base.spacing});\n }\n `;\n});\n\nStyledStageGlimpse.defaultProps = defaultThemeProp;\n"]}