@pega/cosmos-react-work 10.0.0-build.4.25 → 10.0.0-build.4.26
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppAnnouncement.d.ts","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAiBlD,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,cAAc,EACd,UAAU,EACX,MAAM,yBAAyB,CAAC;AAOjC,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IACjF,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oGAAoG;IACpG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAaD,eAAO,MAAM,4BAA4B,6NAiCvC,CAAC;AAIH,eAAO,MAAM,qBAAqB,
|
|
1
|
+
{"version":3,"file":"AppAnnouncement.d.ts","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAiBlD,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,cAAc,EACd,UAAU,EACX,MAAM,yBAAyB,CAAC;AAOjC,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IACjF,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oGAAoG;IACpG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAaD,eAAO,MAAM,4BAA4B,6NAiCvC,CAAC;AAIH,eAAO,MAAM,qBAAqB,kRAkGhC,CAAC;;;;AAsFH,wBAAuE"}
|
|
@@ -44,7 +44,7 @@ export const StyledAppAnnouncementContent = styled.div(props => {
|
|
|
44
44
|
});
|
|
45
45
|
StyledAppAnnouncementContent.defaultProps = defaultThemeProp;
|
|
46
46
|
export const StyledAppAnnouncement = styled.article(props => {
|
|
47
|
-
const { theme: { base: { shadow, spacing
|
|
47
|
+
const { theme: { base: { shadow, spacing }, components: { card: { 'border-radius': borderRadius }, announcement: { background, 'foreground-color': foregroundColor } } }, image } = props;
|
|
48
48
|
const { end } = useDirection();
|
|
49
49
|
const color = calculateForegroundColor(background, foregroundColor);
|
|
50
50
|
return css `
|
|
@@ -76,12 +76,6 @@ export const StyledAppAnnouncement = styled.article(props => {
|
|
|
76
76
|
align-self: flex-start;
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
|
-
|
|
80
|
-
@container dynamic-layout-item (block-size <= ${contentWidth.sm}) {
|
|
81
|
-
${StyledAppAnnouncementContent} {
|
|
82
|
-
overflow-y: unset;
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
79
|
`};
|
|
86
80
|
|
|
87
81
|
&::after {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppAnnouncement.js","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n StyledButton,\n Text,\n Icon,\n registerIcon,\n useI18n,\n defaultThemeProp,\n useDirection,\n calculateForegroundColor,\n HTML,\n useTestIds,\n withTestIds\n} from '@pega/cosmos-react-core';\nimport type {\n BaseProps,\n ForwardRefForwardPropsComponent,\n NoChildrenProp,\n TestIdProp\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport { getAppAnnouncementTestIds } from './AppAnnouncement.test-ids';\n\nregisterIcon(timesIcon);\n\nexport interface AppAnnouncementProps extends BaseProps, NoChildrenProp, TestIdProp {\n /** Heading text for the announcement. */\n heading?: string;\n /** Description text for the announcement. */\n description?: string;\n /** Announcement details to be displayed in form of bulleted list. */\n details?: string[];\n /** Url to open with What's new link. */\n whatsNewLink?: string;\n /** Content to populate the announcement button. */\n whatsNewText?: string;\n /** When provided, the heading renders as a link to this URL and the What's new button is hidden. */\n headingUrl?: string;\n /** An image source for the decorative background. */\n image?: string;\n /**\n * Whether to fit AppAnnouncement widget in the parent element.\n */\n fitToParent?: boolean;\n /** Callback when user dismisses the announcements. */\n onDismiss?: () => void;\n ref?: Ref<HTMLElement>;\n}\n\nconst StyledDismissButton = styled.button`\n font-size: 1.25rem;\n border: none;\n`;\n\nconst StyledHeadingLink = styled(Button)`\n color: inherit;\n`;\n\nStyledHeadingLink.defaultProps = defaultThemeProp;\n\nexport const StyledAppAnnouncementContent = styled.div(props => {\n const {\n theme: {\n base: { spacing }\n }\n } = props;\n\n return css`\n max-height: 12rem;\n overflow-y: auto;\n margin-block-start: calc(1.5 * ${spacing});\n margin-inline: calc(-2 * ${spacing});\n padding-inline: calc(2 * ${spacing});\n\n p,\n ul {\n line-height: 1.4;\n }\n\n ul {\n padding-inline-start: calc(2 * ${spacing});\n }\n\n p + ul {\n margin-block-start: calc(1.5 * ${spacing});\n }\n\n li {\n &:not(:last-child) {\n margin-block-end: ${spacing};\n }\n }\n `;\n});\n\nStyledAppAnnouncementContent.defaultProps = defaultThemeProp;\n\nexport const StyledAppAnnouncement = styled.article<\n Pick<AppAnnouncementProps, 'image' | 'fitToParent'>\n>(props => {\n const {\n theme: {\n base: { shadow, spacing, 'content-width': contentWidth },\n components: {\n card: { 'border-radius': borderRadius },\n announcement: { background, 'foreground-color': foregroundColor }\n }\n },\n image\n } = props;\n\n const { end } = useDirection();\n const color = calculateForegroundColor(background, foregroundColor);\n\n return css`\n padding: calc(2 * ${spacing});\n background: ${background};\n border-radius: ${borderRadius};\n color: ${color};\n position: relative;\n\n ${props.fitToParent &&\n css`\n min-block-size: 100%;\n display: flex;\n flex-direction: column;\n\n > div {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-height: 0;\n\n ${StyledAppAnnouncementContent} {\n flex: 1;\n min-height: 0;\n max-height: none;\n }\n\n ${StyledButton} {\n align-self: flex-start;\n }\n }\n\n @container dynamic-layout-item (block-size <= ${contentWidth.sm}) {\n ${StyledAppAnnouncementContent} {\n overflow-y: unset;\n }\n }\n `};\n\n &::after {\n background: url('${image}') no-repeat;\n background-position: ${end} bottom;\n background-size: contain;\n background-origin: content-box;\n opacity: 0.2;\n content: '';\n display: block;\n position: absolute;\n width: 50%;\n height: 100%;\n inset-inline-end: 0;\n bottom: 0;\n padding: calc(2 * ${spacing});\n }\n\n h2 {\n position: relative;\n z-index: 2;\n }\n\n ${StyledDismissButton} {\n position: absolute;\n top: 0.75rem;\n inset-inline-end: 0.75rem;\n color: inherit;\n z-index: 3;\n &:enabled:hover {\n background: #ffffff19;\n }\n &:enabled:focus-visible {\n box-shadow: ${shadow.focus};\n }\n }\n\n > div {\n position: relative;\n z-index: 2;\n\n ${StyledButton} {\n margin-top: calc(2 * ${spacing});\n white-space: normal;\n\n &:enabled:focus-visible,\n &:not([disabled]):focus-visible {\n box-shadow: ${shadow.focus};\n }\n }\n }\n `;\n});\n\nStyledAppAnnouncement.defaultProps = defaultThemeProp;\n\nconst AppAnnouncement: ForwardRefForwardPropsComponent<AppAnnouncementProps> = forwardRef(\n function AppAnnouncement(\n props: PropsWithoutRef<AppAnnouncementProps>,\n ref: AppAnnouncementProps['ref']\n ) {\n const t = useI18n();\n const {\n heading,\n description,\n details,\n whatsNewLink,\n whatsNewText = t('app_announcement_whats_new_button_label'),\n headingUrl,\n image,\n onDismiss,\n testId,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getAppAnnouncementTestIds);\n\n const resolvedHeading = heading || t('app_announcement_details_list_header');\n\n return (\n <StyledAppAnnouncement data-testid={testIds.root} {...restProps} ref={ref} image={image}>\n {onDismiss && (\n <Button\n as={StyledDismissButton}\n variant='simple'\n icon\n onClick={onDismiss}\n aria-label={t('app_announcement_dismiss_button_label_a11y')}\n >\n <Icon name='times' />\n </Button>\n )}\n <Text variant='h2' data-testid={testIds.heading}>\n {headingUrl ? (\n <StyledHeadingLink\n variant='link'\n href={headingUrl}\n target='_blank'\n rel='noopener noreferrer'\n >\n {resolvedHeading}\n </StyledHeadingLink>\n ) : (\n resolvedHeading\n )}\n </Text>\n <div>\n <StyledAppAnnouncementContent>\n {description && <HTML as='p' content={description} data-testid={testIds.description} />}\n {!!details?.length && (\n <ul>\n {details.map((item, index) => {\n return (\n // eslint-disable-next-line react/no-array-index-key\n <li key={index}>\n <HTML content={item} />\n </li>\n );\n })}\n </ul>\n )}\n </StyledAppAnnouncementContent>\n {!headingUrl && whatsNewLink && (\n <Button\n variant='secondary'\n href={whatsNewLink}\n target='_blank'\n data-testid={testIds.whatsNew}\n >\n {whatsNewText}\n </Button>\n )}\n </div>\n </StyledAppAnnouncement>\n );\n }\n);\n\nexport default withTestIds(AppAnnouncement, getAppAnnouncementTestIds);\n"]}
|
|
1
|
+
{"version":3,"file":"AppAnnouncement.js","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n StyledButton,\n Text,\n Icon,\n registerIcon,\n useI18n,\n defaultThemeProp,\n useDirection,\n calculateForegroundColor,\n HTML,\n useTestIds,\n withTestIds\n} from '@pega/cosmos-react-core';\nimport type {\n BaseProps,\n ForwardRefForwardPropsComponent,\n NoChildrenProp,\n TestIdProp\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport { getAppAnnouncementTestIds } from './AppAnnouncement.test-ids';\n\nregisterIcon(timesIcon);\n\nexport interface AppAnnouncementProps extends BaseProps, NoChildrenProp, TestIdProp {\n /** Heading text for the announcement. */\n heading?: string;\n /** Description text for the announcement. */\n description?: string;\n /** Announcement details to be displayed in form of bulleted list. */\n details?: string[];\n /** Url to open with What's new link. */\n whatsNewLink?: string;\n /** Content to populate the announcement button. */\n whatsNewText?: string;\n /** When provided, the heading renders as a link to this URL and the What's new button is hidden. */\n headingUrl?: string;\n /** An image source for the decorative background. */\n image?: string;\n /**\n * Whether to fit AppAnnouncement widget in the parent element.\n */\n fitToParent?: boolean;\n /** Callback when user dismisses the announcements. */\n onDismiss?: () => void;\n ref?: Ref<HTMLElement>;\n}\n\nconst StyledDismissButton = styled.button`\n font-size: 1.25rem;\n border: none;\n`;\n\nconst StyledHeadingLink = styled(Button)`\n color: inherit;\n`;\n\nStyledHeadingLink.defaultProps = defaultThemeProp;\n\nexport const StyledAppAnnouncementContent = styled.div(props => {\n const {\n theme: {\n base: { spacing }\n }\n } = props;\n\n return css`\n max-height: 12rem;\n overflow-y: auto;\n margin-block-start: calc(1.5 * ${spacing});\n margin-inline: calc(-2 * ${spacing});\n padding-inline: calc(2 * ${spacing});\n\n p,\n ul {\n line-height: 1.4;\n }\n\n ul {\n padding-inline-start: calc(2 * ${spacing});\n }\n\n p + ul {\n margin-block-start: calc(1.5 * ${spacing});\n }\n\n li {\n &:not(:last-child) {\n margin-block-end: ${spacing};\n }\n }\n `;\n});\n\nStyledAppAnnouncementContent.defaultProps = defaultThemeProp;\n\nexport const StyledAppAnnouncement = styled.article<\n Pick<AppAnnouncementProps, 'image' | 'fitToParent'>\n>(props => {\n const {\n theme: {\n base: { shadow, spacing },\n components: {\n card: { 'border-radius': borderRadius },\n announcement: { background, 'foreground-color': foregroundColor }\n }\n },\n image\n } = props;\n\n const { end } = useDirection();\n const color = calculateForegroundColor(background, foregroundColor);\n\n return css`\n padding: calc(2 * ${spacing});\n background: ${background};\n border-radius: ${borderRadius};\n color: ${color};\n position: relative;\n\n ${props.fitToParent &&\n css`\n min-block-size: 100%;\n display: flex;\n flex-direction: column;\n\n > div {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-height: 0;\n\n ${StyledAppAnnouncementContent} {\n flex: 1;\n min-height: 0;\n max-height: none;\n }\n\n ${StyledButton} {\n align-self: flex-start;\n }\n }\n `};\n\n &::after {\n background: url('${image}') no-repeat;\n background-position: ${end} bottom;\n background-size: contain;\n background-origin: content-box;\n opacity: 0.2;\n content: '';\n display: block;\n position: absolute;\n width: 50%;\n height: 100%;\n inset-inline-end: 0;\n bottom: 0;\n padding: calc(2 * ${spacing});\n }\n\n h2 {\n position: relative;\n z-index: 2;\n }\n\n ${StyledDismissButton} {\n position: absolute;\n top: 0.75rem;\n inset-inline-end: 0.75rem;\n color: inherit;\n z-index: 3;\n &:enabled:hover {\n background: #ffffff19;\n }\n &:enabled:focus-visible {\n box-shadow: ${shadow.focus};\n }\n }\n\n > div {\n position: relative;\n z-index: 2;\n\n ${StyledButton} {\n margin-top: calc(2 * ${spacing});\n white-space: normal;\n\n &:enabled:focus-visible,\n &:not([disabled]):focus-visible {\n box-shadow: ${shadow.focus};\n }\n }\n }\n `;\n});\n\nStyledAppAnnouncement.defaultProps = defaultThemeProp;\n\nconst AppAnnouncement: ForwardRefForwardPropsComponent<AppAnnouncementProps> = forwardRef(\n function AppAnnouncement(\n props: PropsWithoutRef<AppAnnouncementProps>,\n ref: AppAnnouncementProps['ref']\n ) {\n const t = useI18n();\n const {\n heading,\n description,\n details,\n whatsNewLink,\n whatsNewText = t('app_announcement_whats_new_button_label'),\n headingUrl,\n image,\n onDismiss,\n testId,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getAppAnnouncementTestIds);\n\n const resolvedHeading = heading || t('app_announcement_details_list_header');\n\n return (\n <StyledAppAnnouncement data-testid={testIds.root} {...restProps} ref={ref} image={image}>\n {onDismiss && (\n <Button\n as={StyledDismissButton}\n variant='simple'\n icon\n onClick={onDismiss}\n aria-label={t('app_announcement_dismiss_button_label_a11y')}\n >\n <Icon name='times' />\n </Button>\n )}\n <Text variant='h2' data-testid={testIds.heading}>\n {headingUrl ? (\n <StyledHeadingLink\n variant='link'\n href={headingUrl}\n target='_blank'\n rel='noopener noreferrer'\n >\n {resolvedHeading}\n </StyledHeadingLink>\n ) : (\n resolvedHeading\n )}\n </Text>\n <div>\n <StyledAppAnnouncementContent>\n {description && <HTML as='p' content={description} data-testid={testIds.description} />}\n {!!details?.length && (\n <ul>\n {details.map((item, index) => {\n return (\n // eslint-disable-next-line react/no-array-index-key\n <li key={index}>\n <HTML content={item} />\n </li>\n );\n })}\n </ul>\n )}\n </StyledAppAnnouncementContent>\n {!headingUrl && whatsNewLink && (\n <Button\n variant='secondary'\n href={whatsNewLink}\n target='_blank'\n data-testid={testIds.whatsNew}\n >\n {whatsNewText}\n </Button>\n )}\n </div>\n </StyledAppAnnouncement>\n );\n }\n);\n\nexport default withTestIds(AppAnnouncement, getAppAnnouncementTestIds);\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-work",
|
|
3
|
-
"version": "10.0.0-build.4.
|
|
3
|
+
"version": "10.0.0-build.4.26",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"author": "Pegasystems",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
"build": "tsc -b tsconfig.build.json"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@pega/cosmos-react-core": "10.0.0-build.4.
|
|
18
|
-
"@pega/cosmos-react-rte": "10.0.0-build.4.
|
|
17
|
+
"@pega/cosmos-react-core": "10.0.0-build.4.26",
|
|
18
|
+
"@pega/cosmos-react-rte": "10.0.0-build.4.26",
|
|
19
19
|
"@types/react": "^17.0.62 || ^18.3.3",
|
|
20
20
|
"@types/react-dom": "^17.0.20 || ^18.3.0",
|
|
21
21
|
"polished": "^4.1.0",
|