@pega/cosmos-react-work 7.0.0-build.9.0 → 7.0.0-build.9.2
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/Timeline/Timeline.styles.d.ts +1 -0
- package/lib/components/Timeline/Timeline.styles.d.ts.map +1 -1
- package/lib/components/Timeline/Timeline.styles.js +9 -0
- package/lib/components/Timeline/Timeline.styles.js.map +1 -1
- package/lib/components/Timeline/TimelineItem.d.ts.map +1 -1
- package/lib/components/Timeline/TimelineItem.js +2 -2
- package/lib/components/Timeline/TimelineItem.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export declare const StyledCard: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
2
|
+
export declare const StyledTitle: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
|
|
2
3
|
export declare const StyledCardContent: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardContentProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
3
4
|
export declare const StyledToggleButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {
|
|
4
5
|
collapsed: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Timeline.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Timeline.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.styles.ts"],"names":[],"mappings":"AAkBA,eAAO,MAAM,UAAU,mOASrB,CAAC;AAIH,eAAO,MAAM,WAAW,0GAMvB,CAAC;AAIF,eAAO,MAAM,iBAAiB,0OAS5B,CAAC;AAIH,eAAO,MAAM,kBAAkB;eAA+B,OAAO;SASnE,CAAC;AAIH,eAAO,MAAM,gBAAgB,gQAG5B,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,gIA8D/B,CAAC;AAIF,eAAO,MAAM,UAAU,wGAetB,CAAC;AAIF,eAAO,MAAM,cAAc,wGAiBzB,CAAC;AAIH,eAAO,MAAM,UAAU,8OAUrB,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAQ7B,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import styled, { css } from 'styled-components';
|
|
2
2
|
import { Button, calculateFontSize, Card, CardContent, DateTimeDisplay, defaultThemeProp, Flex, Grid, StyledBackdrop, StyledIcon, useDirection } from '@pega/cosmos-react-core';
|
|
3
|
+
import { elipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';
|
|
3
4
|
export const StyledCard = styled(Card)(({ theme }) => {
|
|
4
5
|
return css `
|
|
5
6
|
border-block-start: 0.0625rem solid ${theme.base.palette['border-line']};
|
|
@@ -11,6 +12,14 @@ export const StyledCard = styled(Card)(({ theme }) => {
|
|
|
11
12
|
`;
|
|
12
13
|
});
|
|
13
14
|
StyledCard.defaultProps = defaultThemeProp;
|
|
15
|
+
export const StyledTitle = styled.span `
|
|
16
|
+
display: block;
|
|
17
|
+
${elipsisOverflow}
|
|
18
|
+
&& > * {
|
|
19
|
+
display: inline;
|
|
20
|
+
}
|
|
21
|
+
`;
|
|
22
|
+
StyledTitle.defaultProps = defaultThemeProp;
|
|
14
23
|
export const StyledCardContent = styled(CardContent)(({ theme }) => {
|
|
15
24
|
return css `
|
|
16
25
|
&:not(${StyledCard} ${StyledCard} > &) {
|
|
@@ -1 +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 Grid,\n StyledBackdrop,\n StyledIcon,\n useDirection\n} from '@pega/cosmos-react-core';\nimport type { FontSize } from '@pega/cosmos-react-core';\n\nexport const StyledCard = styled(Card)(({ theme }) => {\n return css`\n border-block-start: 0.0625rem solid ${theme.base.palette['border-line']};\n padding-block: ${theme.base.spacing};\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 ${theme.base.spacing} ${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 const { rtl } = useDirection();\n return css`\n ${StyledIcon} {\n transition: transform calc(2 * ${theme.base.animation.speed})\n ${theme.base.animation.timing.ease};\n transform: ${collapsed ? `rotate(${rtl ? '90deg' : '-90deg'})` : 'rotate(0)'};\n }\n `;\n});\n\nStyledToggleButton.defaultProps = defaultThemeProp;\n\nexport const StyledCardHeader = styled(Grid)`\n padding: 0;\n min-height: 2rem;\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.span<StyledBulletWrapperProps>(\n ({ theme, hasPrev, hasNext, isPrevFuture, isNextFuture, hasIcon }) => {\n const { rtl } = useDirection();\n return css`\n height: 100%;\n position: relative;\n text-align: center;\n padding-block-start: 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 inset-block-start: 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 inset-block-start: 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-block-start: calc(${theme.base.spacing} + 0.0625rem);\n &::before {\n height: calc(${theme.base.spacing} + 0.75rem);\n }\n &::after {\n inset-block-start: 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 StyledDate = styled.h2(\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 grid-column: 1 / -1;\n padding-block: calc(3 * ${spacing}) 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 StyledTimeline = styled.ol(({ theme }) => {\n return css`\n ol,\n li {\n display: contents;\n }\n\n li:first-child ${StyledDate} {\n padding-block-start: 0;\n }\n\n @media (min-width: ${theme.base.breakpoints.sm}) {\n ${StyledCard} {\n padding-block: calc(0.5 * ${theme.base.spacing});\n }\n }\n `;\n});\n\nStyledTimeline.defaultProps = defaultThemeProp;\n\nexport const StyledTime = styled(DateTimeDisplay)(({ theme }) => {\n return css`\n opacity: ${theme.base.transparency['transparent-2']};\n white-space: nowrap;\n @media (min-width: ${theme.base.breakpoints.sm}) {\n text-align: end;\n line-height: ${theme.base['hit-area']['mouse-min']};\n padding-block-start: calc(0.5 * ${theme.base.spacing} + 0.0625rem);\n }\n `;\n});\n\nStyledTime.defaultProps = defaultThemeProp;\n\nexport const StyledLoadingCell = styled.div`\n grid-column: 1 / -1;\n position: relative;\n height: 2.8rem;\n\n ${StyledBackdrop} {\n background: transparent;\n }\n`;\n"]}
|
|
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 Grid,\n StyledBackdrop,\n StyledIcon,\n useDirection\n} from '@pega/cosmos-react-core';\nimport type { FontSize } from '@pega/cosmos-react-core';\nimport { elipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\n\nexport const StyledCard = styled(Card)(({ theme }) => {\n return css`\n border-block-start: 0.0625rem solid ${theme.base.palette['border-line']};\n padding-block: ${theme.base.spacing};\n &:not(& &) {\n border-radius: 0;\n background-color: transparent;\n }\n `;\n});\n\nStyledCard.defaultProps = defaultThemeProp;\n\nexport const StyledTitle = styled.span`\n display: block;\n ${elipsisOverflow}\n && > * {\n display: inline;\n }\n`;\n\nStyledTitle.defaultProps = defaultThemeProp;\n\nexport const StyledCardContent = styled(CardContent)(({ theme }) => {\n return css`\n &:not(${StyledCard} ${StyledCard} > &) {\n padding: ${theme.base.spacing} 0 ${theme.base.spacing} ${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 const { rtl } = useDirection();\n return css`\n ${StyledIcon} {\n transition: transform calc(2 * ${theme.base.animation.speed})\n ${theme.base.animation.timing.ease};\n transform: ${collapsed ? `rotate(${rtl ? '90deg' : '-90deg'})` : 'rotate(0)'};\n }\n `;\n});\n\nStyledToggleButton.defaultProps = defaultThemeProp;\n\nexport const StyledCardHeader = styled(Grid)`\n padding: 0;\n min-height: 2rem;\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.span<StyledBulletWrapperProps>(\n ({ theme, hasPrev, hasNext, isPrevFuture, isNextFuture, hasIcon }) => {\n const { rtl } = useDirection();\n return css`\n height: 100%;\n position: relative;\n text-align: center;\n padding-block-start: 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 inset-block-start: 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 inset-block-start: 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-block-start: calc(${theme.base.spacing} + 0.0625rem);\n &::before {\n height: calc(${theme.base.spacing} + 0.75rem);\n }\n &::after {\n inset-block-start: 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 StyledDate = styled.h2(\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 grid-column: 1 / -1;\n padding-block: calc(3 * ${spacing}) 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 StyledTimeline = styled.ol(({ theme }) => {\n return css`\n ol,\n li {\n display: contents;\n }\n\n li:first-child ${StyledDate} {\n padding-block-start: 0;\n }\n\n @media (min-width: ${theme.base.breakpoints.sm}) {\n ${StyledCard} {\n padding-block: calc(0.5 * ${theme.base.spacing});\n }\n }\n `;\n});\n\nStyledTimeline.defaultProps = defaultThemeProp;\n\nexport const StyledTime = styled(DateTimeDisplay)(({ theme }) => {\n return css`\n opacity: ${theme.base.transparency['transparent-2']};\n white-space: nowrap;\n @media (min-width: ${theme.base.breakpoints.sm}) {\n text-align: end;\n line-height: ${theme.base['hit-area']['mouse-min']};\n padding-block-start: calc(0.5 * ${theme.base.spacing} + 0.0625rem);\n }\n `;\n});\n\nStyledTime.defaultProps = defaultThemeProp;\n\nexport const StyledLoadingCell = styled.div`\n grid-column: 1 / -1;\n position: relative;\n height: 2.8rem;\n\n ${StyledBackdrop} {\n background: transparent;\n }\n`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimelineItem.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAU/C,OAAO,KAAK,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAElF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"TimelineItem.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAU/C,OAAO,KAAK,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAElF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAavD,UAAU,iBAAiB;IACzB,IAAI,EAAE,cAAc,CAAC;IACrB,UAAU,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;IAC5C,YAAY,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACjD,YAAY,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACjD,WAAW,EAAE,IAAI,CAAC;CACnB;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAgHrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { isValidElement, useCallback, useRef, useState } from 'react';
|
|
3
3
|
import { ExpandCollapse, Grid, Icon, Status, useBreakpoint, FieldValueItem } from '@pega/cosmos-react-core';
|
|
4
|
-
import { StyledCard, StyledCardHeader, StyledTimelineIcon, StyledCardContent, StyledBulletWrapper, StyledToggleButton, StyledTime } from './Timeline.styles';
|
|
4
|
+
import { StyledCard, StyledCardHeader, StyledTimelineIcon, StyledCardContent, StyledBulletWrapper, StyledToggleButton, StyledTime, StyledTitle } from './Timeline.styles';
|
|
5
5
|
import { isFutureDate } from './utils';
|
|
6
6
|
const TimelineItem = ({ item: { date, title, icon, status, content }, timeFormat, prevItemDate, nextItemDate, currentTime }) => {
|
|
7
7
|
const [collapsed, setCollapsed] = useState(true);
|
|
@@ -16,7 +16,7 @@ const TimelineItem = ({ item: { date, title, icon, status, content }, timeFormat
|
|
|
16
16
|
alignContent: 'evenly',
|
|
17
17
|
alignItems: 'center',
|
|
18
18
|
gap: 0.5
|
|
19
|
-
}, sm: { container: { cols: 'auto 1fr auto' } }, children: [content && (_jsx(StyledToggleButton, { icon: true, variant: 'simple', onClick: toggleCollapse, collapsed: collapsed, "aria-expanded": !collapsed, compact: true, children: _jsx(Icon, { name: 'caret-down' }) })), _jsxs(Grid, { item: { colStart: '2', colEnd: '2' }, container: { rowGap: 0.25 }, children: [title, !isSmallOrAbove && (_jsxs(Grid, { container: {
|
|
19
|
+
}, sm: { container: { cols: 'auto 1fr auto' } }, children: [content && (_jsx(StyledToggleButton, { icon: true, variant: 'simple', onClick: toggleCollapse, collapsed: collapsed, "aria-expanded": !collapsed, compact: true, children: _jsx(Icon, { name: 'caret-down' }) })), _jsxs(Grid, { item: { colStart: '2', colEnd: '2' }, container: { rowGap: 0.25 }, children: [_jsx(StyledTitle, { children: title }), !isSmallOrAbove && (_jsxs(Grid, { container: {
|
|
20
20
|
cols: '1fr auto',
|
|
21
21
|
alignContent: 'evenly',
|
|
22
22
|
alignItems: 'center'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimelineItem.js","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtE,OAAO,EACL,cAAc,EACd,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,aAAa,EACb,cAAc,EACf,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,EAClB,UAAU,
|
|
1
|
+
{"version":3,"file":"TimelineItem.js","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { isValidElement, useCallback, useRef, useState } from 'react';\nimport type { FunctionComponent } from 'react';\n\nimport {\n ExpandCollapse,\n Grid,\n Icon,\n Status,\n useBreakpoint,\n FieldValueItem\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, DateTimeDisplayProps } from '@pega/cosmos-react-core';\n\nimport type { ActivityObject } from './Timeline.types';\nimport {\n StyledCard,\n StyledCardHeader,\n StyledTimelineIcon,\n StyledCardContent,\n StyledBulletWrapper,\n StyledToggleButton,\n StyledTime,\n StyledTitle\n} from './Timeline.styles';\nimport { isFutureDate } from './utils';\n\ninterface TimelineItemProps {\n item: ActivityObject;\n timeFormat: DateTimeDisplayProps['variant'];\n prevItemDate: ActivityObject['date'] | undefined;\n nextItemDate: ActivityObject['date'] | undefined;\n currentTime: Date;\n}\n\nconst TimelineItem: FunctionComponent<TimelineItemProps & ForwardProps> = ({\n item: { date, title, icon, status, content },\n timeFormat,\n prevItemDate,\n nextItemDate,\n currentTime\n}: TimelineItemProps & ForwardProps) => {\n const [collapsed, setCollapsed] = useState(true);\n const isSmallOrAbove = useBreakpoint('sm');\n\n const toggleCollapse = useCallback(() => setCollapsed(prevState => !prevState), []);\n const contentListRef = useRef<HTMLDivElement>(null);\n const isSMContentWidthOrAbove = useBreakpoint('sm', {\n breakpointRef: contentListRef\n });\n\n return (\n <li>\n {isSmallOrAbove && <StyledTime variant={timeFormat} value={date} />}\n <StyledBulletWrapper\n hasIcon={!!icon}\n hasPrev={!!prevItemDate}\n hasNext={!!nextItemDate}\n isPrevFuture={isFutureDate(prevItemDate, currentTime)}\n isNextFuture={isFutureDate(nextItemDate, currentTime)}\n >\n <StyledTimelineIcon container={{ inline: true, alignItems: 'center', justify: 'center' }}>\n {icon && <Icon name={icon} />}\n </StyledTimelineIcon>\n </StyledBulletWrapper>\n <div>\n <div>\n <StyledCard>\n <StyledCardHeader\n container={{\n cols: 'auto 1fr',\n alignContent: 'evenly',\n alignItems: 'center',\n gap: 0.5\n }}\n sm={{ container: { cols: 'auto 1fr auto' } }}\n >\n {content && (\n <StyledToggleButton\n icon\n variant='simple'\n onClick={toggleCollapse}\n collapsed={collapsed}\n aria-expanded={!collapsed}\n compact\n >\n <Icon name='caret-down' />\n </StyledToggleButton>\n )}\n <Grid item={{ colStart: '2', colEnd: '2' }} container={{ rowGap: 0.25 }}>\n <StyledTitle>{title}</StyledTitle>\n {!isSmallOrAbove && (\n <Grid\n container={{\n cols: '1fr auto',\n alignContent: 'evenly',\n alignItems: 'center'\n }}\n >\n <StyledTime variant='time' value={date} />\n {status && <Status variant={status.variant}>{status.children}</Status>}\n </Grid>\n )}\n </Grid>\n {isSmallOrAbove && status && (\n <Grid sm={{ item: { colStart: '3', colEnd: '3' } }}>\n <Status variant={status.variant}>{status.children}</Status>\n </Grid>\n )}\n </StyledCardHeader>\n </StyledCard>\n </div>\n {content && (\n <ExpandCollapse dimension='height' collapsed={collapsed} nullWhenCollapsed>\n <StyledCardContent>\n {isValidElement<any>(content) ? (\n content\n ) : (\n <Grid\n container={{\n gap: 1,\n cols: isSMContentWidthOrAbove\n ? `repeat(${\n content.length > 1 ? '2' : '1'\n }, minmax(16ch, auto) minmax(25%, 1fr))`\n : 'minmax(0, 1fr)'\n }}\n ref={contentListRef}\n >\n {content.map(({ id, name, value, variant }) => {\n return (\n <FieldValueItem\n name={name}\n value={value}\n variant={isSmallOrAbove ? variant : 'stacked'}\n key={id ?? name}\n />\n );\n })}\n </Grid>\n )}\n </StyledCardContent>\n </ExpandCollapse>\n )}\n </div>\n </li>\n );\n};\n\nexport default TimelineItem;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-work",
|
|
3
|
-
"version": "7.0.0-build.9.
|
|
3
|
+
"version": "7.0.0-build.9.2",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/pegasystems/cosmos-react.git",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"build": "tsc -b tsconfig.build.json"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@pega/cosmos-react-core": "7.0.0-build.9.
|
|
22
|
+
"@pega/cosmos-react-core": "7.0.0-build.9.2",
|
|
23
23
|
"@types/react": "^17.0.62",
|
|
24
24
|
"@types/react-dom": "^17.0.20",
|
|
25
25
|
"@types/styled-components": "^5.1.26",
|