@pega/cosmos-react-social 9.0.0-build.2.0 → 9.0.0-build.2.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.
@@ -7,7 +7,7 @@ import { getOpenGraphPreviewTestIds } from './OpenGraphPreview.test-ids';
7
7
  registerIcon(pictureIcon);
8
8
  const OpenGraphPreview = forwardRef(function OpenGraphCard({ data: openGraphData, containerRef, testId }, ref) {
9
9
  const testIds = useTestIds(testId, getOpenGraphPreviewTestIds);
10
- const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: containerRef });
10
+ const isMediumOrAbove = useBreakpoint('md', { breakpointRef: containerRef });
11
11
  const imageExists = openGraphData.encoded_image || openGraphData.image;
12
12
  const [imageBroken, setImageBroken] = useState(false);
13
13
  const [loading, setLoading] = useState(true);
@@ -28,7 +28,7 @@ const OpenGraphPreview = forwardRef(function OpenGraphCard({ data: openGraphData
28
28
  // If remote site only has a <title> and no Open Graph info, we assume they want to opt-out of preview.
29
29
  const onlyTitle = Object.values(openGraphData).length === 2 && !!openGraphData.document_title;
30
30
  return (!onlyTitle &&
31
- !openGraphData.error && (_jsx(StyledOpenGraphAnchor, { "data-testid": testIds.root, href: openGraphData.href, target: '_blank', "$loading": openGraphData.encoded_image ?? openGraphData.image ? loading : false, compact: isSmallOrAbove && !!containerRef, ref: ref, children: _jsx(Card, { children: _jsxs(StyledOpenGraphCardContent, { "data-testid": testIds.content, container: true, children: [imageContent && (_jsx(StyledOpenGraphImageContainer, { imageHref: openGraphData.encoded_image ?? openGraphData.image, container: { alignItems: 'stretch' }, children: imageContent })), _jsxs(Flex, { container: {
31
+ !openGraphData.error && (_jsx(StyledOpenGraphAnchor, { "data-testid": testIds.root, href: openGraphData.href, target: '_blank', "$loading": openGraphData.encoded_image ?? openGraphData.image ? loading : false, compact: isMediumOrAbove && !!containerRef, ref: ref, children: _jsx(Card, { children: _jsxs(StyledOpenGraphCardContent, { "data-testid": testIds.content, container: true, children: [imageContent && (_jsx(StyledOpenGraphImageContainer, { imageHref: openGraphData.encoded_image ?? openGraphData.image, container: { alignItems: 'stretch' }, children: imageContent })), _jsxs(Flex, { container: {
32
32
  direction: 'column',
33
33
  justify: 'between',
34
34
  pad: 1,
@@ -1 +1 @@
1
- {"version":3,"file":"OpenGraphPreview.js","sourceRoot":"","sources":["../../../src/components/OpenGraphPreview/OpenGraphPreview.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { PropsWithoutRef, Ref, RefObject } from 'react';\nimport { forwardRef, useMemo, useState } from 'react';\n\nimport type { TestIdProp } from '@pega/cosmos-react-core';\nimport { Card, Flex, registerIcon, useBreakpoint, useTestIds } from '@pega/cosmos-react-core';\nimport * as pictureIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/picture.icon';\n\nimport {\n StyledOpenGraphAnchor,\n StyledOpenGraphCardContent,\n StyledOpenGraphDescription,\n StyledOpenGraphImage,\n StyledOpenGraphImageContainer,\n StyledOpenGraphText,\n StyledOpenGraphTitle\n} from './OpenGraphPreview.styles';\nimport { getOpenGraphPreviewTestIds } from './OpenGraphPreview.test-ids';\n\nexport interface OpenGraphPreviewProps extends TestIdProp {\n data: OpenGraphData;\n containerRef?: RefObject<HTMLDivElement>;\n}\n\ntype Prefix = 'b64' | 'og' | 'twitter';\n\ntype StripPrefix<T extends object> = {\n [K in keyof T as K extends `${Prefix}:${infer U extends string}` ? U : K]: T[K];\n};\n\nexport interface OpenGraphData\n extends StripPrefix<{\n 'og:title'?: string;\n 'og:description'?: string;\n 'og:image'?: string;\n 'og:image_alt'?: string;\n 'og:site_name'?: string;\n 'og:url'?: string;\n 'b64:encoded_image'?: string;\n }> {\n document_title?: string;\n meta_description?: string;\n href: string;\n error?: boolean;\n}\n\nregisterIcon(pictureIcon);\n\nconst OpenGraphPreview = forwardRef(function OpenGraphCard(\n { data: openGraphData, containerRef, testId }: PropsWithoutRef<OpenGraphPreviewProps>,\n ref: Ref<HTMLAnchorElement>\n) {\n const testIds = useTestIds(testId, getOpenGraphPreviewTestIds);\n const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: containerRef });\n\n const imageExists = openGraphData.encoded_image || openGraphData.image;\n const [imageBroken, setImageBroken] = useState(false);\n const [loading, setLoading] = useState(true);\n\n const openGraphUrl = (() => {\n if (openGraphData.url && URL.canParse(openGraphData.url, openGraphData.href)) {\n return new URL(openGraphData.url, openGraphData.href);\n }\n return new URL(openGraphData.href);\n })();\n\n const imageContent = useMemo(() => {\n return imageBroken || !imageExists ? undefined : (\n <StyledOpenGraphImage\n data-testid={testIds.image}\n src={openGraphData.encoded_image ?? openGraphData.image}\n alt={openGraphData.image_alt || ''}\n onError={() => {\n setImageBroken(true);\n }}\n onLoad={() => {\n setLoading(false);\n setImageBroken(false);\n }}\n />\n );\n }, [openGraphData?.image, openGraphData?.encoded_image, loading, imageBroken]);\n\n // If remote site only has a <title> and no Open Graph info, we assume they want to opt-out of preview.\n const onlyTitle = Object.values(openGraphData).length === 2 && !!openGraphData.document_title;\n\n return (\n !onlyTitle &&\n !openGraphData.error && (\n <StyledOpenGraphAnchor\n data-testid={testIds.root}\n href={openGraphData.href}\n target='_blank'\n $loading={openGraphData.encoded_image ?? openGraphData.image ? loading : false}\n compact={isSmallOrAbove && !!containerRef}\n ref={ref}\n >\n <Card>\n <StyledOpenGraphCardContent data-testid={testIds.content} container>\n {imageContent && (\n <StyledOpenGraphImageContainer\n imageHref={openGraphData.encoded_image ?? openGraphData.image}\n container={{ alignItems: 'stretch' }}\n >\n {imageContent}\n </StyledOpenGraphImageContainer>\n )}\n <Flex\n container={{\n direction: 'column',\n justify: 'between',\n pad: 1,\n gap: 0.75\n }}\n item={{ grow: 1 }}\n >\n <Flex container={{ direction: 'column', gap: 0.25 }}>\n <StyledOpenGraphTitle>\n {openGraphData.title ?? openGraphData.document_title}\n </StyledOpenGraphTitle>\n <StyledOpenGraphDescription>\n {openGraphData.description ?? openGraphData.meta_description}\n </StyledOpenGraphDescription>\n </Flex>\n <Flex container>\n <StyledOpenGraphText variant='secondary'>\n {openGraphData.site_name || openGraphUrl.hostname}\n </StyledOpenGraphText>\n </Flex>\n </Flex>\n </StyledOpenGraphCardContent>\n </Card>\n </StyledOpenGraphAnchor>\n )\n );\n});\n\nexport default OpenGraphPreview;\n"]}
1
+ {"version":3,"file":"OpenGraphPreview.js","sourceRoot":"","sources":["../../../src/components/OpenGraphPreview/OpenGraphPreview.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { PropsWithoutRef, Ref, RefObject } from 'react';\nimport { forwardRef, useMemo, useState } from 'react';\n\nimport type { TestIdProp } from '@pega/cosmos-react-core';\nimport { Card, Flex, registerIcon, useBreakpoint, useTestIds } from '@pega/cosmos-react-core';\nimport * as pictureIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/picture.icon';\n\nimport {\n StyledOpenGraphAnchor,\n StyledOpenGraphCardContent,\n StyledOpenGraphDescription,\n StyledOpenGraphImage,\n StyledOpenGraphImageContainer,\n StyledOpenGraphText,\n StyledOpenGraphTitle\n} from './OpenGraphPreview.styles';\nimport { getOpenGraphPreviewTestIds } from './OpenGraphPreview.test-ids';\n\nexport interface OpenGraphPreviewProps extends TestIdProp {\n data: OpenGraphData;\n containerRef?: RefObject<HTMLDivElement>;\n}\n\ntype Prefix = 'b64' | 'og' | 'twitter';\n\ntype StripPrefix<T extends object> = {\n [K in keyof T as K extends `${Prefix}:${infer U extends string}` ? U : K]: T[K];\n};\n\nexport interface OpenGraphData\n extends StripPrefix<{\n 'og:title'?: string;\n 'og:description'?: string;\n 'og:image'?: string;\n 'og:image_alt'?: string;\n 'og:site_name'?: string;\n 'og:url'?: string;\n 'b64:encoded_image'?: string;\n }> {\n document_title?: string;\n meta_description?: string;\n href: string;\n error?: boolean;\n}\n\nregisterIcon(pictureIcon);\n\nconst OpenGraphPreview = forwardRef(function OpenGraphCard(\n { data: openGraphData, containerRef, testId }: PropsWithoutRef<OpenGraphPreviewProps>,\n ref: Ref<HTMLAnchorElement>\n) {\n const testIds = useTestIds(testId, getOpenGraphPreviewTestIds);\n const isMediumOrAbove = useBreakpoint('md', { breakpointRef: containerRef });\n\n const imageExists = openGraphData.encoded_image || openGraphData.image;\n const [imageBroken, setImageBroken] = useState(false);\n const [loading, setLoading] = useState(true);\n\n const openGraphUrl = (() => {\n if (openGraphData.url && URL.canParse(openGraphData.url, openGraphData.href)) {\n return new URL(openGraphData.url, openGraphData.href);\n }\n return new URL(openGraphData.href);\n })();\n\n const imageContent = useMemo(() => {\n return imageBroken || !imageExists ? undefined : (\n <StyledOpenGraphImage\n data-testid={testIds.image}\n src={openGraphData.encoded_image ?? openGraphData.image}\n alt={openGraphData.image_alt || ''}\n onError={() => {\n setImageBroken(true);\n }}\n onLoad={() => {\n setLoading(false);\n setImageBroken(false);\n }}\n />\n );\n }, [openGraphData?.image, openGraphData?.encoded_image, loading, imageBroken]);\n\n // If remote site only has a <title> and no Open Graph info, we assume they want to opt-out of preview.\n const onlyTitle = Object.values(openGraphData).length === 2 && !!openGraphData.document_title;\n\n return (\n !onlyTitle &&\n !openGraphData.error && (\n <StyledOpenGraphAnchor\n data-testid={testIds.root}\n href={openGraphData.href}\n target='_blank'\n $loading={openGraphData.encoded_image ?? openGraphData.image ? loading : false}\n compact={isMediumOrAbove && !!containerRef}\n ref={ref}\n >\n <Card>\n <StyledOpenGraphCardContent data-testid={testIds.content} container>\n {imageContent && (\n <StyledOpenGraphImageContainer\n imageHref={openGraphData.encoded_image ?? openGraphData.image}\n container={{ alignItems: 'stretch' }}\n >\n {imageContent}\n </StyledOpenGraphImageContainer>\n )}\n <Flex\n container={{\n direction: 'column',\n justify: 'between',\n pad: 1,\n gap: 0.75\n }}\n item={{ grow: 1 }}\n >\n <Flex container={{ direction: 'column', gap: 0.25 }}>\n <StyledOpenGraphTitle>\n {openGraphData.title ?? openGraphData.document_title}\n </StyledOpenGraphTitle>\n <StyledOpenGraphDescription>\n {openGraphData.description ?? openGraphData.meta_description}\n </StyledOpenGraphDescription>\n </Flex>\n <Flex container>\n <StyledOpenGraphText variant='secondary'>\n {openGraphData.site_name || openGraphUrl.hostname}\n </StyledOpenGraphText>\n </Flex>\n </Flex>\n </StyledOpenGraphCardContent>\n </Card>\n </StyledOpenGraphAnchor>\n )\n );\n});\n\nexport default OpenGraphPreview;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"OpenGraphPreview.styles.d.ts","sourceRoot":"","sources":["../../../src/components/OpenGraphPreview/OpenGraphPreview.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,oBAAoB,kNAMhC,CAAC;AAIF,eAAO,MAAM,0BAA0B,kNAEtC,CAAC;AAEF,eAAO,MAAM,mBAAmB,kNAE/B,CAAC;AAEF,eAAO,MAAM,qBAAqB;cAAwB,OAAO;cAAY,OAAO;SAoBnF,CAAC;AAIF,eAAO,MAAM,0BAA0B,kNAUtC,CAAC;AAIF,eAAO,MAAM,6BAA6B;eAA6B,MAAM;SA0B5E,CAAC;AAIF,eAAO,MAAM,oBAAoB,mNAOhC,CAAC"}
1
+ {"version":3,"file":"OpenGraphPreview.styles.d.ts","sourceRoot":"","sources":["../../../src/components/OpenGraphPreview/OpenGraphPreview.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,oBAAoB,kNAMhC,CAAC;AAIF,eAAO,MAAM,0BAA0B,kNAEtC,CAAC;AAEF,eAAO,MAAM,mBAAmB,kNAE/B,CAAC;AAEF,eAAO,MAAM,qBAAqB;cAAwB,OAAO;cAAY,OAAO;SAqBnF,CAAC;AAIF,eAAO,MAAM,0BAA0B,kNAUtC,CAAC;AAIF,eAAO,MAAM,6BAA6B;eAA6B,MAAM;SA0B5E,CAAC;AAIF,eAAO,MAAM,oBAAoB,mNAOhC,CAAC"}
@@ -16,6 +16,7 @@ export const StyledOpenGraphText = styled(Text) `
16
16
  export const StyledOpenGraphAnchor = styled.a(({ compact, $loading, theme }) => css `
17
17
  width: ${compact ? '50%' : 'auto'};
18
18
  display: ${$loading ? 'none' : 'block'};
19
+ padding-inline-end: calc(${theme.base.spacing} / 4);
19
20
  text-decoration: inherit;
20
21
  color: inherit;
21
22
  cursor: pointer;
@@ -1 +1 @@
1
- {"version":3,"file":"OpenGraphPreview.styles.js","sourceRoot":"","sources":["../../../src/components/OpenGraphPreview/OpenGraphPreview.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC1F,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,2CAA2C,CAAC;AAExF,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAC,CAC9C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;mBACD,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;MAEpD,gBAAgB;GACnB,CACF,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAClD,SAAS,CAAC,CAAC,CAAC;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAC3C,gBAAgB;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,CAAC,CAC3C,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;aAC1B,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;eACtB,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;;;;;UAKhC,UAAU;4CACwB,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;;;eAGnE,UAAU;oBACL,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;;;;GAMxC,CACF,CAAC;AAEF,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,IAAI,CAAC,CACpD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;8BACU,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;;;;GAO5D,CACF,CAAC;AAEF,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3D,MAAM,CAAC,MAAM,6BAA6B,GAAG,MAAM,CAAC,IAAI,CAAC,CACvD,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;;;;;yCASU,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;;;;;oBAQtD,SAAS,CAAC,CAAC,CAAC,OAAO,SAAS,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC;;;;;;;GAOvF,CACF,CAAC;AAEF,6BAA6B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9D,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,KAAK,CAAC,CAC/C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;6BAES,KAAK,CAAC,IAAI,CAAC,OAAO;;;GAG5C,CACF,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Flex, Image, StyledCard, Text } from '@pega/cosmos-react-core';\nimport { ellipsisOverflow, lineClamp } from '@pega/cosmos-react-core/lib/styles/mixins';\n\nexport const StyledOpenGraphTitle = styled(Text)(\n ({ theme }) => css`\n font-weight: ${theme.components.text.h4['font-weight']};\n flex-grow: 1;\n ${ellipsisOverflow}\n `\n);\n\nStyledOpenGraphTitle.defaultProps = defaultThemeProp;\n\nexport const StyledOpenGraphDescription = styled(Text)`\n ${lineClamp(2)}\n`;\n\nexport const StyledOpenGraphText = styled(Text)`\n ${ellipsisOverflow}\n`;\n\nexport const StyledOpenGraphAnchor = styled.a<{ compact?: boolean; $loading: boolean }>(\n ({ compact, $loading, theme }) => css`\n width: ${compact ? '50%' : 'auto'};\n display: ${$loading ? 'none' : 'block'};\n text-decoration: inherit;\n color: inherit;\n cursor: pointer;\n\n & > ${StyledCard} {\n border-radius: var(--border-radius, ${theme.components.card['border-radius']});\n }\n\n :focus > ${StyledCard} {\n box-shadow: ${theme.base.shadow.focus};\n }\n\n :focus-visible {\n outline: none;\n }\n `\n);\n\nStyledOpenGraphAnchor.defaultProps = defaultThemeProp;\n\nexport const StyledOpenGraphCardContent = styled(Flex)(\n ({ theme }) => css`\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-radius: inherit;\n overflow: hidden;\n\n &:has(img) {\n min-height: 5.75rem;\n }\n `\n);\n\nStyledOpenGraphCardContent.defaultProps = defaultThemeProp;\n\nexport const StyledOpenGraphImageContainer = styled(Flex)<{ imageHref: string }>(\n ({ imageHref, theme }) => css`\n min-height: inherit;\n height: auto;\n min-width: 30%;\n max-width: 30%;\n overflow: hidden;\n align-items: center;\n justify-content: center;\n position: relative;\n border-inline-end: solid 0.0625rem ${theme.base.palette['border-line']};\n\n ::after {\n content: '';\n z-index: 1;\n position: absolute;\n inset: 0;\n opacity: 0.33;\n background: ${imageHref ? `url(${imageHref})` : theme.base.palette['app-background']};\n background-repeat: no-repeat;\n background-position: center;\n background-size: cover;\n filter: blur(1.2rem);\n scale: 1.5;\n }\n `\n);\n\nStyledOpenGraphImageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledOpenGraphImage = styled(Image)(\n ({ theme }) => css`\n /* stylelint-disable-next-line unit-allowed-list */\n max-height: calc(4lh + ${theme.base.spacing} * 3);\n object-fit: contain;\n z-index: 2;\n `\n);\n\nStyledOpenGraphImage.defaultProps = defaultThemeProp;\n"]}
1
+ {"version":3,"file":"OpenGraphPreview.styles.js","sourceRoot":"","sources":["../../../src/components/OpenGraphPreview/OpenGraphPreview.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC1F,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,2CAA2C,CAAC;AAExF,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAC,CAC9C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;mBACD,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;MAEpD,gBAAgB;GACnB,CACF,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAClD,SAAS,CAAC,CAAC,CAAC;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAC3C,gBAAgB;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,CAAC,CAC3C,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;aAC1B,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;eACtB,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;+BACX,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;UAKvC,UAAU;4CACwB,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;;;eAGnE,UAAU;oBACL,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;;;;GAMxC,CACF,CAAC;AAEF,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,IAAI,CAAC,CACpD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;8BACU,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;;;;GAO5D,CACF,CAAC;AAEF,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3D,MAAM,CAAC,MAAM,6BAA6B,GAAG,MAAM,CAAC,IAAI,CAAC,CACvD,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;;;;;yCASU,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;;;;;oBAQtD,SAAS,CAAC,CAAC,CAAC,OAAO,SAAS,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC;;;;;;;GAOvF,CACF,CAAC;AAEF,6BAA6B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9D,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,KAAK,CAAC,CAC/C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;6BAES,KAAK,CAAC,IAAI,CAAC,OAAO;;;GAG5C,CACF,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Flex, Image, StyledCard, Text } from '@pega/cosmos-react-core';\nimport { ellipsisOverflow, lineClamp } from '@pega/cosmos-react-core/lib/styles/mixins';\n\nexport const StyledOpenGraphTitle = styled(Text)(\n ({ theme }) => css`\n font-weight: ${theme.components.text.h4['font-weight']};\n flex-grow: 1;\n ${ellipsisOverflow}\n `\n);\n\nStyledOpenGraphTitle.defaultProps = defaultThemeProp;\n\nexport const StyledOpenGraphDescription = styled(Text)`\n ${lineClamp(2)}\n`;\n\nexport const StyledOpenGraphText = styled(Text)`\n ${ellipsisOverflow}\n`;\n\nexport const StyledOpenGraphAnchor = styled.a<{ compact?: boolean; $loading: boolean }>(\n ({ compact, $loading, theme }) => css`\n width: ${compact ? '50%' : 'auto'};\n display: ${$loading ? 'none' : 'block'};\n padding-inline-end: calc(${theme.base.spacing} / 4);\n text-decoration: inherit;\n color: inherit;\n cursor: pointer;\n\n & > ${StyledCard} {\n border-radius: var(--border-radius, ${theme.components.card['border-radius']});\n }\n\n :focus > ${StyledCard} {\n box-shadow: ${theme.base.shadow.focus};\n }\n\n :focus-visible {\n outline: none;\n }\n `\n);\n\nStyledOpenGraphAnchor.defaultProps = defaultThemeProp;\n\nexport const StyledOpenGraphCardContent = styled(Flex)(\n ({ theme }) => css`\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-radius: inherit;\n overflow: hidden;\n\n &:has(img) {\n min-height: 5.75rem;\n }\n `\n);\n\nStyledOpenGraphCardContent.defaultProps = defaultThemeProp;\n\nexport const StyledOpenGraphImageContainer = styled(Flex)<{ imageHref: string }>(\n ({ imageHref, theme }) => css`\n min-height: inherit;\n height: auto;\n min-width: 30%;\n max-width: 30%;\n overflow: hidden;\n align-items: center;\n justify-content: center;\n position: relative;\n border-inline-end: solid 0.0625rem ${theme.base.palette['border-line']};\n\n ::after {\n content: '';\n z-index: 1;\n position: absolute;\n inset: 0;\n opacity: 0.33;\n background: ${imageHref ? `url(${imageHref})` : theme.base.palette['app-background']};\n background-repeat: no-repeat;\n background-position: center;\n background-size: cover;\n filter: blur(1.2rem);\n scale: 1.5;\n }\n `\n);\n\nStyledOpenGraphImageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledOpenGraphImage = styled(Image)(\n ({ theme }) => css`\n /* stylelint-disable-next-line unit-allowed-list */\n max-height: calc(4lh + ${theme.base.spacing} * 3);\n object-fit: contain;\n z-index: 2;\n `\n);\n\nStyledOpenGraphImage.defaultProps = defaultThemeProp;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/cosmos-react-social",
3
- "version": "9.0.0-build.2.0",
3
+ "version": "9.0.0-build.2.2",
4
4
  "license": "SEE LICENSE IN LICENSE",
5
5
  "author": "Pegasystems",
6
6
  "sideEffects": [
@@ -17,9 +17,9 @@
17
17
  "build": "tsc -b tsconfig.build.json"
18
18
  },
19
19
  "dependencies": {
20
- "@pega/cosmos-react-core": "9.0.0-build.2.0",
21
- "@pega/cosmos-react-rte": "9.0.0-build.2.0",
22
- "@pega/cosmos-react-work": "9.0.0-build.2.0",
20
+ "@pega/cosmos-react-core": "9.0.0-build.2.2",
21
+ "@pega/cosmos-react-rte": "9.0.0-build.2.2",
22
+ "@pega/cosmos-react-work": "9.0.0-build.2.2",
23
23
  "@types/parse5": "^6.0.0",
24
24
  "@types/react": "^17.0.62 || ^18.3.3",
25
25
  "@types/react-dom": "^17.0.20 || ^18.3.0",