@pega/cosmos-react-work 3.0.0-rc.7 → 3.0.0-rc.9
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.
- package/lib/components/CasePreview/CasePreview.js +1 -1
- package/lib/components/CasePreview/CasePreview.js.map +1 -1
- package/lib/components/Stages/StageGlimpse.d.ts.map +1 -1
- package/lib/components/Stages/StageGlimpse.js +2 -2
- package/lib/components/Stages/StageGlimpse.js.map +1 -1
- package/lib/components/Stages/Stages.styles.d.ts.map +1 -1
- package/lib/components/Stages/Stages.styles.js +6 -16
- package/lib/components/Stages/Stages.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -79,7 +79,7 @@ const CasePreview = forwardRef((props, ref) => {
|
|
|
79
79
|
closeButtonEl.focus();
|
|
80
80
|
}
|
|
81
81
|
}, [openProp, closeButtonEl]);
|
|
82
|
-
return (_jsxs(Drawer, { ...restProps, as: StyledPreviewDrawer, role: 'complementary', forwardedAs: Flex, container: { direction: 'column' }, ref: ref, open: open && isSmallOrAbove, position: 'fixed', placement: direction.end, "aria-label": t('preview_of_noun', [heading]), shadow: true, nullWhenClosed: true, children: [_jsx(StyledPreviewActions, { children: _jsx(Button, { variant: 'simple', icon: true, onClick: closePreview, ref: setCloseButtonEl,
|
|
82
|
+
return (_jsxs(Drawer, { ...restProps, as: StyledPreviewDrawer, role: 'complementary', forwardedAs: Flex, container: { direction: 'column' }, ref: ref, open: open && isSmallOrAbove, position: 'fixed', placement: direction.end, "aria-label": t('preview_of_noun', [heading]), shadow: true, nullWhenClosed: true, children: [_jsx(StyledPreviewActions, { children: _jsx(Button, { variant: 'simple', icon: true, onClick: closePreview, ref: setCloseButtonEl, label: t('close_preview'), children: _jsx(Icon, { name: 'times' }) }) }), _jsx(CaseView, { caseId: caseId, parentCases: parentCases, heading: heading, subheading: subheading, caseLink: caseLink, icon: icon, followed: followed, onFollowedChange: onFollowedChange, summary: summary, tabs: tabs, stages: stages, tasks: tasks, tabContent: tabContent, utilities: utilities, utilitiesSummaryItems: utilitiesSummaryItems, actions: actions, banners: banners, onEdit: onEdit, isPreview: true })] }));
|
|
83
83
|
});
|
|
84
84
|
export default CasePreview;
|
|
85
85
|
//# sourceMappingURL=CasePreview.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CasePreview.js","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useState,\n useCallback,\n useEffect,\n useContext\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n Drawer,\n Icon,\n registerIcon,\n Button,\n Flex,\n tryCatch,\n defaultThemeProp,\n ForwardProps,\n useBreakpoint,\n useElement,\n useDirection,\n useI18n,\n AppShellContext,\n BaseProps,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport CaseView, {\n CaseViewProps,\n StyledCaseView,\n StyledCaseViewContent,\n StyledCaseDrawer,\n StyledSummaryRegion\n} from '../CaseView';\n\nregisterIcon(timesIcon);\n\nexport interface CasePreviewProps\n extends Pick<\n CaseViewProps,\n | 'caseId'\n | 'heading'\n | 'subheading'\n | 'caseLink'\n | 'parentCases'\n | 'icon'\n | 'followed'\n | 'onFollowedChange'\n | 'actions'\n | 'promotedActions'\n | 'onEdit'\n | 'summary'\n | 'tabs'\n | 'tabContent'\n | 'stages'\n | 'tasks'\n | 'banners'\n | 'utilities'\n | 'utilitiesSummaryItems'\n >,\n NoChildrenProp,\n BaseProps {\n /** If true, the Case Preview will be visible. */\n open: boolean;\n /** Callback fired before Case Preview opens. */\n onBeforeOpen?: () => void;\n /** Callback fired after Case Preview opens. */\n onAfterOpen?: () => void;\n /** Callback fired before Case Preview closes. */\n onBeforeClose?: () => void;\n /** Callback fired after Case Preview closes. */\n onAfterClose?: () => void;\n /** Callback fired when a click action occurs outside of the Case Preview. */\n onOuterClick?: () => void;\n /** Reference to the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledPreviewHeader = styled.div(({ theme }) => {\n return css`\n z-index: ${theme.base['z-index'].drawer};\n background-color: ${theme.base.palette['primary-background']};\n `;\n});\n\nStyledPreviewHeader.defaultProps = defaultThemeProp;\n\nconst StyledPreviewActions = styled.div(\n ({\n theme: {\n base: {\n spacing,\n palette: { 'brand-primary': brandPrimary }\n }\n }\n }) => {\n const buttonColor = tryCatch(() => readableColor(brandPrimary));\n\n return css`\n background-color: ${brandPrimary};\n padding: ${spacing} calc(2 * ${spacing}) 0;\n\n button {\n color: ${buttonColor};\n }\n `;\n }\n);\n\nStyledPreviewActions.defaultProps = defaultThemeProp;\n\nconst StyledPreviewDrawer = styled(StyledCaseDrawer)(({ theme }) => {\n return css`\n height: calc(100vh - var(--appshell-offset, 0rem));\n top: var(--appshell-offset, 0);\n z-index: calc(${theme.base['z-index'].drawer} + 500);\n\n ${StyledCaseView} {\n height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['mouse-min']});\n\n @media (pointer: coarse) {\n height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['finger-min']});\n }\n\n ${StyledSummaryRegion} {\n position: relative;\n top: 0;\n }\n }\n\n ${StyledCaseViewContent} {\n overflow-y: auto;\n margin-bottom: calc(${theme.base['hit-area']['mouse-min']} + ${theme.base.spacing});\n\n @media (pointer: coarse) {\n margin-bottom: calc(${theme.base['hit-area']['finger-min']} + ${theme.base.spacing});\n }\n\n & > :last-child {\n padding-bottom: calc(2 * ${theme.base.spacing});\n }\n }\n `;\n});\n\nStyledPreviewDrawer.defaultProps = defaultThemeProp;\n\nconst CasePreview: FunctionComponent<CasePreviewProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<CasePreviewProps>, ref: CasePreviewProps['ref']) => {\n const {\n open: openProp,\n caseId,\n heading,\n subheading,\n caseLink,\n parentCases,\n icon,\n followed,\n onFollowedChange,\n summary,\n tabs,\n stages,\n tasks,\n tabContent,\n utilities,\n utilitiesSummaryItems,\n actions,\n banners,\n onEdit,\n ...restProps\n } = props;\n const t = useI18n();\n const { previewTriggerRef } = useContext(AppShellContext);\n const [closeButtonEl, setCloseButtonEl] = useElement<HTMLButtonElement>();\n const isSmallOrAbove = useBreakpoint('sm');\n const [open, setOpen] = useState(openProp);\n const direction = useDirection();\n\n const closePreview = useCallback(() => {\n setOpen(false);\n previewTriggerRef.current?.focus();\n }, []);\n\n useEffect(() => {\n setOpen(openProp);\n }, [openProp]);\n\n useEffect(() => {\n if (openProp && closeButtonEl) {\n closeButtonEl.focus();\n }\n }, [openProp, closeButtonEl]);\n\n return (\n <Drawer\n {...restProps}\n as={StyledPreviewDrawer}\n role='complementary'\n forwardedAs={Flex}\n container={{ direction: 'column' }}\n ref={ref}\n open={open && isSmallOrAbove}\n position='fixed'\n placement={direction.end}\n aria-label={t('preview_of_noun', [heading])}\n shadow\n nullWhenClosed\n >\n <StyledPreviewActions>\n <Button\n variant='simple'\n icon\n onClick={closePreview}\n ref={setCloseButtonEl}\n aria-label={t('close_preview')}\n >\n <Icon name='times' />\n </Button>\n </StyledPreviewActions>\n\n <CaseView\n caseId={caseId}\n parentCases={parentCases}\n heading={heading}\n subheading={subheading}\n caseLink={caseLink}\n icon={icon}\n followed={followed}\n onFollowedChange={onFollowedChange}\n summary={summary}\n tabs={tabs}\n stages={stages}\n tasks={tasks}\n tabContent={tabContent}\n utilities={utilities}\n utilitiesSummaryItems={utilitiesSummaryItems}\n actions={actions}\n banners={banners}\n onEdit={onEdit}\n isPreview\n />\n </Drawer>\n );\n }\n);\n\nexport default CasePreview;\n"]}
|
|
1
|
+
{"version":3,"file":"CasePreview.js","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useState,\n useCallback,\n useEffect,\n useContext\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n Drawer,\n Icon,\n registerIcon,\n Button,\n Flex,\n tryCatch,\n defaultThemeProp,\n ForwardProps,\n useBreakpoint,\n useElement,\n useDirection,\n useI18n,\n AppShellContext,\n BaseProps,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport CaseView, {\n CaseViewProps,\n StyledCaseView,\n StyledCaseViewContent,\n StyledCaseDrawer,\n StyledSummaryRegion\n} from '../CaseView';\n\nregisterIcon(timesIcon);\n\nexport interface CasePreviewProps\n extends Pick<\n CaseViewProps,\n | 'caseId'\n | 'heading'\n | 'subheading'\n | 'caseLink'\n | 'parentCases'\n | 'icon'\n | 'followed'\n | 'onFollowedChange'\n | 'actions'\n | 'promotedActions'\n | 'onEdit'\n | 'summary'\n | 'tabs'\n | 'tabContent'\n | 'stages'\n | 'tasks'\n | 'banners'\n | 'utilities'\n | 'utilitiesSummaryItems'\n >,\n NoChildrenProp,\n BaseProps {\n /** If true, the Case Preview will be visible. */\n open: boolean;\n /** Callback fired before Case Preview opens. */\n onBeforeOpen?: () => void;\n /** Callback fired after Case Preview opens. */\n onAfterOpen?: () => void;\n /** Callback fired before Case Preview closes. */\n onBeforeClose?: () => void;\n /** Callback fired after Case Preview closes. */\n onAfterClose?: () => void;\n /** Callback fired when a click action occurs outside of the Case Preview. */\n onOuterClick?: () => void;\n /** Reference to the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledPreviewHeader = styled.div(({ theme }) => {\n return css`\n z-index: ${theme.base['z-index'].drawer};\n background-color: ${theme.base.palette['primary-background']};\n `;\n});\n\nStyledPreviewHeader.defaultProps = defaultThemeProp;\n\nconst StyledPreviewActions = styled.div(\n ({\n theme: {\n base: {\n spacing,\n palette: { 'brand-primary': brandPrimary }\n }\n }\n }) => {\n const buttonColor = tryCatch(() => readableColor(brandPrimary));\n\n return css`\n background-color: ${brandPrimary};\n padding: ${spacing} calc(2 * ${spacing}) 0;\n\n button {\n color: ${buttonColor};\n }\n `;\n }\n);\n\nStyledPreviewActions.defaultProps = defaultThemeProp;\n\nconst StyledPreviewDrawer = styled(StyledCaseDrawer)(({ theme }) => {\n return css`\n height: calc(100vh - var(--appshell-offset, 0rem));\n top: var(--appshell-offset, 0);\n z-index: calc(${theme.base['z-index'].drawer} + 500);\n\n ${StyledCaseView} {\n height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['mouse-min']});\n\n @media (pointer: coarse) {\n height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['finger-min']});\n }\n\n ${StyledSummaryRegion} {\n position: relative;\n top: 0;\n }\n }\n\n ${StyledCaseViewContent} {\n overflow-y: auto;\n margin-bottom: calc(${theme.base['hit-area']['mouse-min']} + ${theme.base.spacing});\n\n @media (pointer: coarse) {\n margin-bottom: calc(${theme.base['hit-area']['finger-min']} + ${theme.base.spacing});\n }\n\n & > :last-child {\n padding-bottom: calc(2 * ${theme.base.spacing});\n }\n }\n `;\n});\n\nStyledPreviewDrawer.defaultProps = defaultThemeProp;\n\nconst CasePreview: FunctionComponent<CasePreviewProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<CasePreviewProps>, ref: CasePreviewProps['ref']) => {\n const {\n open: openProp,\n caseId,\n heading,\n subheading,\n caseLink,\n parentCases,\n icon,\n followed,\n onFollowedChange,\n summary,\n tabs,\n stages,\n tasks,\n tabContent,\n utilities,\n utilitiesSummaryItems,\n actions,\n banners,\n onEdit,\n ...restProps\n } = props;\n const t = useI18n();\n const { previewTriggerRef } = useContext(AppShellContext);\n const [closeButtonEl, setCloseButtonEl] = useElement<HTMLButtonElement>();\n const isSmallOrAbove = useBreakpoint('sm');\n const [open, setOpen] = useState(openProp);\n const direction = useDirection();\n\n const closePreview = useCallback(() => {\n setOpen(false);\n previewTriggerRef.current?.focus();\n }, []);\n\n useEffect(() => {\n setOpen(openProp);\n }, [openProp]);\n\n useEffect(() => {\n if (openProp && closeButtonEl) {\n closeButtonEl.focus();\n }\n }, [openProp, closeButtonEl]);\n\n return (\n <Drawer\n {...restProps}\n as={StyledPreviewDrawer}\n role='complementary'\n forwardedAs={Flex}\n container={{ direction: 'column' }}\n ref={ref}\n open={open && isSmallOrAbove}\n position='fixed'\n placement={direction.end}\n aria-label={t('preview_of_noun', [heading])}\n shadow\n nullWhenClosed\n >\n <StyledPreviewActions>\n <Button\n variant='simple'\n icon\n onClick={closePreview}\n ref={setCloseButtonEl}\n label={t('close_preview')}\n >\n <Icon name='times' />\n </Button>\n </StyledPreviewActions>\n\n <CaseView\n caseId={caseId}\n parentCases={parentCases}\n heading={heading}\n subheading={subheading}\n caseLink={caseLink}\n icon={icon}\n followed={followed}\n onFollowedChange={onFollowedChange}\n summary={summary}\n tabs={tabs}\n stages={stages}\n tasks={tasks}\n tabContent={tabContent}\n utilities={utilities}\n utilitiesSummaryItems={utilitiesSummaryItems}\n actions={actions}\n banners={banners}\n onEdit={onEdit}\n isPreview\n />\n </Drawer>\n );\n }\n);\n\nexport default CasePreview;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StageGlimpse.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/StageGlimpse.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,
|
|
1
|
+
{"version":3,"file":"StageGlimpse.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/StageGlimpse.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAEL,MAAM,EAOP,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAU5C,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAoCtD,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { Actions, Flex, registerIcon, Text, useI18n } from '@pega/cosmos-react-core';
|
|
2
|
+
import { Icon, Actions, Flex, registerIcon, Text, useI18n, StyledIcon } from '@pega/cosmos-react-core';
|
|
3
3
|
import * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';
|
|
4
4
|
import { StyledDateTimeDisplay, StyledStep, StyledStepsContainer, StyledStageGlimpse } from './Stages.styles';
|
|
5
5
|
registerIcon(checkIcon);
|
|
6
6
|
const StageGlimpse = ({ stage, actions }) => {
|
|
7
7
|
const t = useI18n();
|
|
8
|
-
return (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: StyledStageGlimpse, container: { justify: 'between', alignItems: 'start' }, children: [_jsxs("div", { children: [_jsx(Text, { variant: 'h2', children: stage.name }), stage.date ? (_jsx(StyledDateTimeDisplay, { value: stage.date, variant: 'relative', format: 'short' })) : (_jsx(Text, { variant: 'secondary', children: t('not_started') }))] }), actions && actions.length > 0 && _jsx(Actions, { items: actions, iconOnly: true })] }), stage.steps && (_jsx(StyledStepsContainer, { children: stage.steps.map(({ id, name, completed }) => (
|
|
8
|
+
return (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: StyledStageGlimpse, container: { justify: 'between', alignItems: 'start' }, children: [_jsxs("div", { children: [_jsx(Text, { variant: 'h2', children: stage.name }), stage.date ? (_jsx(StyledDateTimeDisplay, { value: stage.date, variant: 'relative', format: 'short' })) : (_jsx(Text, { variant: 'secondary', children: t('not_started') }))] }), actions && actions.length > 0 && _jsx(Actions, { items: actions, iconOnly: true })] }), stage.steps && (_jsx(StyledStepsContainer, { children: stage.steps.map(({ id, name, completed }) => (_jsxs(Flex, { as: StyledStep, container: { gap: 0.5 }, completed: completed, children: [completed ? (_jsx(Icon, { name: 'check' })) : (_jsx(StyledIcon, { as: 'span', role: 'presentation', "aria-hidden": 'true', children: "\u2022" })), _jsx("div", { children: name })] }, id))) }))] }));
|
|
9
9
|
};
|
|
10
10
|
export default StageGlimpse;
|
|
11
11
|
//# sourceMappingURL=StageGlimpse.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StageGlimpse.js","sourceRoot":"","sources":["../../../src/components/Stages/StageGlimpse.tsx"],"names":[],"mappings":";AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"StageGlimpse.js","sourceRoot":"","sources":["../../../src/components/Stages/StageGlimpse.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,IAAI,EAEJ,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,OAAO,EACP,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAG1F,OAAO,EACL,qBAAqB,EACrB,UAAU,EACV,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAEzB,YAAY,CAAC,SAAS,CAAC,CAAC;AAOxB,MAAM,YAAY,GAAyC,CAAC,EAC1D,KAAK,EACL,OAAO,EACW,EAAE,EAAE;IACtB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,CACL,8BACE,MAAC,IAAI,IAAC,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,aAClF,0BACE,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,CAAC,IAAI,GAAQ,EACrC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACZ,KAAC,qBAAqB,IAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAC,UAAU,EAAC,MAAM,EAAC,OAAO,GAAG,CAC/E,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,CAAC,CAAC,aAAa,CAAC,GAAQ,CACpD,IACG,EACL,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,SAAG,IACjE,EACN,KAAK,CAAC,KAAK,IAAI,CACd,KAAC,oBAAoB,cAClB,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAC5C,MAAC,IAAI,IAAC,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,EAAW,SAAS,EAAE,SAAS,aACzE,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,CACtB,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,iBAAa,MAAM,uBAE/C,CACd,EACD,wBAAM,IAAI,GAAO,KARiC,EAAE,CAS/C,CACR,CAAC,GACmB,CACxB,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\n\nimport {\n Icon,\n Action,\n Actions,\n Flex,\n registerIcon,\n Text,\n useI18n,\n StyledIcon\n} from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport { StageProps } from './Stages.types';\nimport {\n StyledDateTimeDisplay,\n StyledStep,\n StyledStepsContainer,\n StyledStageGlimpse\n} from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nexport interface StageGlimpseProps {\n stage: StageProps;\n actions?: Action[];\n}\n\nconst StageGlimpse: FunctionComponent<StageGlimpseProps> = ({\n stage,\n actions\n}: StageGlimpseProps) => {\n const t = useI18n();\n return (\n <>\n <Flex as={StyledStageGlimpse} container={{ justify: 'between', alignItems: 'start' }}>\n <div>\n <Text variant='h2'>{stage.name}</Text>\n {stage.date ? (\n <StyledDateTimeDisplay value={stage.date} variant='relative' format='short' />\n ) : (\n <Text variant='secondary'>{t('not_started')}</Text>\n )}\n </div>\n {actions && actions.length > 0 && <Actions items={actions} iconOnly />}\n </Flex>\n {stage.steps && (\n <StyledStepsContainer>\n {stage.steps.map(({ id, name, completed }) => (\n <Flex as={StyledStep} container={{ gap: 0.5 }} key={id} completed={completed}>\n {completed ? (\n <Icon name='check' />\n ) : (\n <StyledIcon as='span' role='presentation' aria-hidden='true'>\n •\n </StyledIcon>\n )}\n <div>{name}</div>\n </Flex>\n ))}\n </StyledStepsContainer>\n )}\n </>\n );\n};\n\nexport default StageGlimpse;\n"]}
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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;SA0BtD,CAAC;AAIH,eAAO,MAAM,oBAAoB,0OAEhC,CAAC;AAIF,eAAO,MAAM,qBAAqB,8OAMhC,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAM7B,CAAC"}
|
|
@@ -212,7 +212,6 @@ export const StyledStepsContainer = styled.ol(({ theme }) => {
|
|
|
212
212
|
});
|
|
213
213
|
StyledStepsContainer.defaultProps = defaultThemeProp;
|
|
214
214
|
export const StyledStep = styled.li(({ completed, theme }) => {
|
|
215
|
-
const iconColor = encodeURIComponent(completed ? theme.base.palette.success : theme.base.palette['foreground-color']);
|
|
216
215
|
const textOpacity = completed ? theme.base.transparency['transparent-2'] : 1;
|
|
217
216
|
return css `
|
|
218
217
|
border-radius: 0;
|
|
@@ -223,24 +222,15 @@ export const StyledStep = styled.li(({ completed, theme }) => {
|
|
|
223
222
|
margin-block-end: 0;
|
|
224
223
|
}
|
|
225
224
|
|
|
226
|
-
|
|
227
|
-
&::before {
|
|
228
|
-
content: '\u00b7';
|
|
229
|
-
font-weight: 800;
|
|
230
|
-
width: 1rem;
|
|
231
|
-
text-align: center;
|
|
225
|
+
& > ${StyledIcon} {
|
|
232
226
|
flex-shrink: 0;
|
|
233
|
-
|
|
227
|
+
text-align: center;
|
|
234
228
|
|
|
235
|
-
|
|
229
|
+
${completed &&
|
|
236
230
|
css `
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
margin-block-start: calc(0.5 * ${theme.base.spacing});
|
|
241
|
-
}
|
|
242
|
-
`}
|
|
243
|
-
/* stylelint-enable no-duplicate-selectors */
|
|
231
|
+
color: ${theme.base.palette.success};
|
|
232
|
+
`}
|
|
233
|
+
}
|
|
244
234
|
|
|
245
235
|
div {
|
|
246
236
|
opacity: ${textOpacity};
|
|
@@ -1 +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';\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"]}
|
|
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 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 & > ${StyledIcon} {\n flex-shrink: 0;\n text-align: center;\n\n ${completed &&\n css`\n color: ${theme.base.palette.success};\n `}\n }\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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-work",
|
|
3
|
-
"version": "3.0.0-rc.
|
|
3
|
+
"version": "3.0.0-rc.9",
|
|
4
4
|
"author": "Pegasystems",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"repository": {
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "3.0.0-rc.
|
|
23
|
+
"@pega/cosmos-react-core": "3.0.0-rc.9",
|
|
24
24
|
"@types/react": "^16.14.24 || ^17.0.38",
|
|
25
25
|
"@types/react-dom": "^16.9.14 || ^17.0.11",
|
|
26
26
|
"@types/styled-components": "^5.1.26",
|