@pega/cosmos-react-social 4.0.0-dev.19.6 → 4.0.0-dev.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Message.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Message.styles.ts"],"names":[],"mappings":";AAAA,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAa9D,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,eAAO,MAAM,0BAA0B,6EAAe,CAAC;AAEvD,eAAO,MAAM,eAAe,4EAAc,CAAC;AAE3C,eAAO,MAAM,mBAAmB,4EAAc,CAAC;AAE/C,eAAO,MAAM,iBAAiB,6EAAe,CAAC;AAE9C,eAAO,MAAM,oBAAoB,6EAAe,CAAC;AAEjD,eAAO,MAAM,eAAe,2EAAa,CAAC;AAE1C,eAAO,MAAM,iBAAiB,8OAAuB,CAAC;AAEtD,eAAO,MAAM,iBAAiB,6EAAe,CAAC;AAE9C,eAAO,MAAM,mBAAmB,6EAAe,CAAC;AAEhD,eAAO,MAAM,uBAAuB,6EAAe,CAAC;AAEpD,eAAO,MAAM,cAAc,8EAAgB,CAAC;AAE5C,eAAO,MAAM,gBAAgB,8EAAgB,CAAC;AAE9C,eAAO,MAAM,qBAAqB,6EAAe,CAAC;AAElD,eAAO,MAAM,mBAAmB,gFAAkB,CAAC;AACnD,eAAO,MAAM,0BAA0B,6EAAe,CAAC;AACvD,eAAO,MAAM,uBAAuB,6EAAe,CAAC;AAEpD,eAAO,MAAM,2BAA2B,6EAAe,CAAC;AACxD,UAAU,2BAA2B;IACnC,UAAU,EAAE,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;IACzC,SAAS,EAAE,IAAI,GAAG,KAAK,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,6EAwBxB,CAAC;AAIH,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,gBAAgB,EAAE,CAC7B,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,YAAY,CAAC,WAAW,CAAC,EACpC,UAAU,EAAE,YAAY,CAAC,YAAY,CAAC,EACtC,YAAY,EAAE,YAAY,CAAC,cAAc,CAAC,KACvC,kBA+BJ,CAAC;AAEF,eAAO,MAAM,sBAAsB,qGAmLlC,CAAC;AAEF,UAAU,sBAAsB;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,iBAAiB,iGAiB5B,CAAC;AAGH,eAAO,MAAM,qBAAqB,
|
|
1
|
+
{"version":3,"file":"Message.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Message.styles.ts"],"names":[],"mappings":";AAAA,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAa9D,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,eAAO,MAAM,0BAA0B,6EAAe,CAAC;AAEvD,eAAO,MAAM,eAAe,4EAAc,CAAC;AAE3C,eAAO,MAAM,mBAAmB,4EAAc,CAAC;AAE/C,eAAO,MAAM,iBAAiB,6EAAe,CAAC;AAE9C,eAAO,MAAM,oBAAoB,6EAAe,CAAC;AAEjD,eAAO,MAAM,eAAe,2EAAa,CAAC;AAE1C,eAAO,MAAM,iBAAiB,8OAAuB,CAAC;AAEtD,eAAO,MAAM,iBAAiB,6EAAe,CAAC;AAE9C,eAAO,MAAM,mBAAmB,6EAAe,CAAC;AAEhD,eAAO,MAAM,uBAAuB,6EAAe,CAAC;AAEpD,eAAO,MAAM,cAAc,8EAAgB,CAAC;AAE5C,eAAO,MAAM,gBAAgB,8EAAgB,CAAC;AAE9C,eAAO,MAAM,qBAAqB,6EAAe,CAAC;AAElD,eAAO,MAAM,mBAAmB,gFAAkB,CAAC;AACnD,eAAO,MAAM,0BAA0B,6EAAe,CAAC;AACvD,eAAO,MAAM,uBAAuB,6EAAe,CAAC;AAEpD,eAAO,MAAM,2BAA2B,6EAAe,CAAC;AACxD,UAAU,2BAA2B;IACnC,UAAU,EAAE,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;IACzC,SAAS,EAAE,IAAI,GAAG,KAAK,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,6EAwBxB,CAAC;AAIH,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,gBAAgB,EAAE,CAC7B,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,YAAY,CAAC,WAAW,CAAC,EACpC,UAAU,EAAE,YAAY,CAAC,YAAY,CAAC,EACtC,YAAY,EAAE,YAAY,CAAC,cAAc,CAAC,KACvC,kBA+BJ,CAAC;AAEF,eAAO,MAAM,sBAAsB,qGAmLlC,CAAC;AAEF,UAAU,sBAAsB;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,iBAAiB,iGAiB5B,CAAC;AAGH,eAAO,MAAM,qBAAqB,uMAYjC,CAAC;AAIF,eAAO,MAAM,cAAc,uMAKzB,CAAC"}
|
|
@@ -256,7 +256,6 @@ export const StyledBlinkingDot = styled.div(({ delay = 0, theme }) => {
|
|
|
256
256
|
StyledBlinkingDot.defaultProps = defaultThemeProp;
|
|
257
257
|
export const StyledUndeliveredIcon = styled(Icon)(({ theme: { base: { palette: { urgent } } } }) => {
|
|
258
258
|
return css `
|
|
259
|
-
flex-shrink: 0;
|
|
260
259
|
color: ${urgent};
|
|
261
260
|
`;
|
|
262
261
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Message.styles.js","sourceRoot":"","sources":["../../../src/components/Chat/Message.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, DefaultTheme } from 'styled-components';\nimport { readableColor, rgba, transparentize } from 'polished';\n\nimport {\n defaultThemeProp,\n tryCatch,\n Icon,\n StyledIcon,\n StyledText,\n calculateFontSize\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport { MessageProps } from './Chat.types';\n\nexport const StyledMessageBubbleContent = styled.div``;\n\nexport const StyledMediaList = styled.ul``;\n\nexport const StyledMediaListItem = styled.li``;\n\nexport const StyledSummaryItem = styled.div``;\n\nexport const StyledMediaThumbNail = styled.img``;\n\nexport const StyledMediaLink = styled.a``;\n\nexport const StyledMediaButton = styled(BareButton)``;\n\nexport const StyledMessageMain = styled.div``;\n\nexport const StyledMessageBubble = styled.div``;\n\nexport const StyledMetaInfoContainer = styled.div``;\n\nexport const StyledMetaInfo = styled.span``;\n\nexport const StyledStatusInfo = styled.span``;\n\nexport const StyledTypingIndicator = styled.div``;\n\nexport const StyledMessageHeader = styled.header``;\nexport const StyledMessageHeaderContent = styled.div``;\nexport const StyledMessageHeaderMeta = styled.div``;\n\nexport const StyledHeadsetIconBackground = styled.div``;\ninterface StyledMessageContainerProps {\n senderType: 'customer' | 'agent' | 'bot';\n direction: 'in' | 'out';\n typing: boolean;\n hasMessage: boolean;\n status: string;\n agentVariant: number;\n}\n\nexport const StyledHeadset = styled.div(({ theme }) => {\n return css`\n position: relative;\n\n ${StyledHeadsetIconBackground} {\n position: relative;\n inset-block-start: calc(-5.25 * ${theme.base.spacing});\n inset-inline-start: calc(2 * ${theme.base.spacing});\n height: 1.375rem;\n width: 1.375rem;\n background: ${theme.base.palette['primary-background']};\n border-radius: calc(\n (${theme.base['border-radius']}) * (${theme.components.button['border-radius']})\n );\n\n ${StyledIcon} {\n position: absolute;\n width: 2.875rem;\n height: 0.875rem;\n inset-inline-start: calc(-1.5 * ${theme.base.spacing});\n inset-block-start: calc(0.5 * ${theme.base.spacing});\n }\n }\n `;\n});\n\nStyledHeadset.defaultProps = defaultThemeProp;\n\nexport interface MessageBubbleColor {\n header: string;\n content: string;\n}\n\nexport const getMessageColors: (\n theme: DefaultTheme,\n direction: MessageProps['direction'],\n senderType: MessageProps['senderType'],\n agentVariant: MessageProps['agentVariant']\n) => MessageBubbleColor = (theme, direction, senderType, agentVariant = 0) => {\n const { slate, blue, purple, orange, green, black } = theme.base.colors;\n const agentMessageColors = [\n purple['extra-light'],\n orange['extra-light'],\n '#C5D1DD',\n green['extra-light'],\n '#BBEAEA'\n ];\n const outMessageColor = blue.medium;\n const customerMessageColor = '#E6EEFA';\n const botMessageColor = slate['extra-dark'];\n\n if (direction === 'in') {\n const messageColors: MessageBubbleColor = {\n header: orange.medium,\n content: ''\n };\n if (senderType === 'agent') {\n messageColors.content = agentMessageColors[agentVariant % agentMessageColors.length];\n } else if (senderType === 'bot') {\n messageColors.content = botMessageColor;\n } else if (senderType === 'customer') {\n messageColors.content = customerMessageColor;\n }\n return messageColors;\n }\n return {\n header: black,\n content: outMessageColor\n };\n};\n\nexport const StyledMessageContainer = styled.li<StyledMessageContainerProps>(\n ({\n direction,\n senderType,\n hasMessage,\n typing,\n status,\n agentVariant,\n theme,\n theme: {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n 'border-radius': borderRadius,\n spacing,\n palette: {\n 'foreground-color': foregroundColor,\n 'secondary-background': secondaryBackground,\n urgent\n },\n transparency: { 'transparent-2': foregroundAlpha }\n }\n }\n }) => {\n const { header, content } = getMessageColors(theme, direction, senderType, agentVariant);\n const metaForegroundColor = tryCatch(() => rgba(foregroundColor, foregroundAlpha));\n const statusForegroundColor = status === 'undeliverable' ? urgent : metaForegroundColor;\n const fontSizes = calculateFontSize(fontSize, fontScale);\n const contrastContentColor = readableColor(content);\n const contrastHeaderColor = readableColor(header);\n return css`\n ${direction === 'out'\n ? css`\n padding-inline-start: calc(4 * ${spacing});\n `\n : css`\n padding-inline-end: calc(4 * ${spacing});\n `}\n margin-block-end: ${typing ? spacing : '0'};\n\n :first-child {\n margin-block-start: ${spacing};\n }\n\n ${StyledMessageMain} {\n max-width: 90%;\n }\n ${StyledMessageBubble} {\n background: ${content};\n border-radius: calc(3 * ${borderRadius}) ${borderRadius} calc(3 * ${borderRadius})\n calc(3 * ${borderRadius});\n overflow: hidden;\n color: ${contrastContentColor};\n display: inline-block;\n width: auto;\n margin-block-end: calc(0.5 * ${spacing});\n\n label {\n color: inherit;\n }\n\n ${direction === 'in' &&\n css`\n border-radius: ${borderRadius} calc(3 * ${borderRadius}) calc(3 * ${borderRadius});\n `}\n\n > ${StyledMessageBubbleContent} {\n padding: ${spacing} calc(2 * ${spacing});\n word-break: break-word;\n white-space: pre-wrap;\n position: relative;\n }\n\n > ${StyledMediaList} {\n color: ${contrastContentColor};\n max-width: 100%;\n\n > ${StyledMediaListItem} {\n position: relative;\n ${StyledMediaThumbNail} {\n max-height: 12rem;\n width: 100%;\n object-fit: contain;\n background-color: ${secondaryBackground};\n }\n ${StyledSummaryItem} {\n padding: ${spacing} calc(3 * ${spacing});\n font-size: ${fontSizes.xxs};\n margin-block-start: calc(0.5 * ${spacing});\n }\n ${StyledSummaryItem}::before {\n content: '';\n padding: ${spacing} 0;\n border-top: 0.0625rem solid ${contrastContentColor};\n position: absolute;\n width: calc(100% - 2rem);\n left: 1rem;\n top: 0;\n }\n ${StyledMediaThumbNail} + ${StyledSummaryItem}::before {\n content: none;\n }\n svg {\n font-size: 1.6rem;\n }\n ${StyledText} {\n color: ${foregroundColor};\n }\n }\n\n ${!hasMessage &&\n css`\n > ${StyledMediaListItem}:first-child {\n > ${StyledSummaryItem}::before {\n border-top: none;\n }\n }\n `}\n }\n\n ${StyledMessageHeader} {\n padding: ${spacing} calc(2 * ${spacing});\n color: ${contrastHeaderColor};\n border-block-end: 0.0625rem solid ${transparentize(0.5, theme.base.colors.white)};\n }\n\n ${StyledMessageHeaderContent} {\n color: ${contrastHeaderColor};\n margin-inline-end: ${spacing};\n }\n ${StyledMessageHeaderMeta} {\n > a {\n color: ${contrastHeaderColor};\n }\n }\n\n ${StyledMediaLink}, ${StyledMediaButton} {\n color: ${contrastContentColor};\n font-size: inherit;\n text-decoration: none;\n font-weight: 700;\n overflow-x: hidden;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: inline-block;\n max-width: 100%;\n &:hover {\n color: ${contrastContentColor};\n text-decoration: underline;\n }\n &:visited {\n color: ${contrastContentColor};\n }\n &:focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n }\n }\n\n ${StyledMetaInfoContainer} {\n width: 100%;\n padding: 0 ${spacing};\n ${StyledMetaInfo}, ${StyledStatusInfo} {\n margin-block-end: ${spacing};\n font-size: 0.7rem;\n color: ${metaForegroundColor};\n }\n ${StyledStatusInfo} {\n color: ${statusForegroundColor};\n }\n }\n ${StyledTypingIndicator} {\n width: 4.5rem;\n position: relative;\n height: 2rem;\n }\n `;\n }\n);\nStyledMessageContainer.defaultProps = defaultThemeProp;\ninterface StyledBlinkingDotProps {\n delay?: number;\n}\n\nexport const StyledBlinkingDot = styled.div<StyledBlinkingDotProps>(({ delay = 0, theme }) => {\n return css`\n @keyframes Blinking {\n 0% {\n background: ${theme.base.colors.gray.medium};\n }\n 100% {\n background: ${theme.base.colors.gray['extra-light']};\n }\n }\n animation: Blinking calc(4 * ${theme.base.animation.speed}) infinite;\n background: ${theme.base.colors.gray['extra-light']};\n border-radius: 50%;\n animation-delay: ${delay}s;\n height: 0.4rem;\n width: 0.4rem;\n `;\n});\nStyledBlinkingDot.defaultProps = defaultThemeProp;\n\nexport const StyledUndeliveredIcon = styled(Icon)(\n ({\n theme: {\n base: {\n palette: { urgent }\n }\n }\n }) => {\n return css`\n flex-shrink: 0;\n color: ${urgent};\n `;\n }\n);\n\nStyledUndeliveredIcon.defaultProps = defaultThemeProp;\n\nexport const StyledFlagIcon = styled(Icon)(({ theme }) => {\n return css`\n position: relative;\n inset-block-start: calc(0.5 * ${theme.base.spacing});\n `;\n});\n\nStyledFlagIcon.defaultProps = defaultThemeProp;\n"]}
|
|
1
|
+
{"version":3,"file":"Message.styles.js","sourceRoot":"","sources":["../../../src/components/Chat/Message.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, DefaultTheme } from 'styled-components';\nimport { readableColor, rgba, transparentize } from 'polished';\n\nimport {\n defaultThemeProp,\n tryCatch,\n Icon,\n StyledIcon,\n StyledText,\n calculateFontSize\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport { MessageProps } from './Chat.types';\n\nexport const StyledMessageBubbleContent = styled.div``;\n\nexport const StyledMediaList = styled.ul``;\n\nexport const StyledMediaListItem = styled.li``;\n\nexport const StyledSummaryItem = styled.div``;\n\nexport const StyledMediaThumbNail = styled.img``;\n\nexport const StyledMediaLink = styled.a``;\n\nexport const StyledMediaButton = styled(BareButton)``;\n\nexport const StyledMessageMain = styled.div``;\n\nexport const StyledMessageBubble = styled.div``;\n\nexport const StyledMetaInfoContainer = styled.div``;\n\nexport const StyledMetaInfo = styled.span``;\n\nexport const StyledStatusInfo = styled.span``;\n\nexport const StyledTypingIndicator = styled.div``;\n\nexport const StyledMessageHeader = styled.header``;\nexport const StyledMessageHeaderContent = styled.div``;\nexport const StyledMessageHeaderMeta = styled.div``;\n\nexport const StyledHeadsetIconBackground = styled.div``;\ninterface StyledMessageContainerProps {\n senderType: 'customer' | 'agent' | 'bot';\n direction: 'in' | 'out';\n typing: boolean;\n hasMessage: boolean;\n status: string;\n agentVariant: number;\n}\n\nexport const StyledHeadset = styled.div(({ theme }) => {\n return css`\n position: relative;\n\n ${StyledHeadsetIconBackground} {\n position: relative;\n inset-block-start: calc(-5.25 * ${theme.base.spacing});\n inset-inline-start: calc(2 * ${theme.base.spacing});\n height: 1.375rem;\n width: 1.375rem;\n background: ${theme.base.palette['primary-background']};\n border-radius: calc(\n (${theme.base['border-radius']}) * (${theme.components.button['border-radius']})\n );\n\n ${StyledIcon} {\n position: absolute;\n width: 2.875rem;\n height: 0.875rem;\n inset-inline-start: calc(-1.5 * ${theme.base.spacing});\n inset-block-start: calc(0.5 * ${theme.base.spacing});\n }\n }\n `;\n});\n\nStyledHeadset.defaultProps = defaultThemeProp;\n\nexport interface MessageBubbleColor {\n header: string;\n content: string;\n}\n\nexport const getMessageColors: (\n theme: DefaultTheme,\n direction: MessageProps['direction'],\n senderType: MessageProps['senderType'],\n agentVariant: MessageProps['agentVariant']\n) => MessageBubbleColor = (theme, direction, senderType, agentVariant = 0) => {\n const { slate, blue, purple, orange, green, black } = theme.base.colors;\n const agentMessageColors = [\n purple['extra-light'],\n orange['extra-light'],\n '#C5D1DD',\n green['extra-light'],\n '#BBEAEA'\n ];\n const outMessageColor = blue.medium;\n const customerMessageColor = '#E6EEFA';\n const botMessageColor = slate['extra-dark'];\n\n if (direction === 'in') {\n const messageColors: MessageBubbleColor = {\n header: orange.medium,\n content: ''\n };\n if (senderType === 'agent') {\n messageColors.content = agentMessageColors[agentVariant % agentMessageColors.length];\n } else if (senderType === 'bot') {\n messageColors.content = botMessageColor;\n } else if (senderType === 'customer') {\n messageColors.content = customerMessageColor;\n }\n return messageColors;\n }\n return {\n header: black,\n content: outMessageColor\n };\n};\n\nexport const StyledMessageContainer = styled.li<StyledMessageContainerProps>(\n ({\n direction,\n senderType,\n hasMessage,\n typing,\n status,\n agentVariant,\n theme,\n theme: {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n 'border-radius': borderRadius,\n spacing,\n palette: {\n 'foreground-color': foregroundColor,\n 'secondary-background': secondaryBackground,\n urgent\n },\n transparency: { 'transparent-2': foregroundAlpha }\n }\n }\n }) => {\n const { header, content } = getMessageColors(theme, direction, senderType, agentVariant);\n const metaForegroundColor = tryCatch(() => rgba(foregroundColor, foregroundAlpha));\n const statusForegroundColor = status === 'undeliverable' ? urgent : metaForegroundColor;\n const fontSizes = calculateFontSize(fontSize, fontScale);\n const contrastContentColor = readableColor(content);\n const contrastHeaderColor = readableColor(header);\n return css`\n ${direction === 'out'\n ? css`\n padding-inline-start: calc(4 * ${spacing});\n `\n : css`\n padding-inline-end: calc(4 * ${spacing});\n `}\n margin-block-end: ${typing ? spacing : '0'};\n\n :first-child {\n margin-block-start: ${spacing};\n }\n\n ${StyledMessageMain} {\n max-width: 90%;\n }\n ${StyledMessageBubble} {\n background: ${content};\n border-radius: calc(3 * ${borderRadius}) ${borderRadius} calc(3 * ${borderRadius})\n calc(3 * ${borderRadius});\n overflow: hidden;\n color: ${contrastContentColor};\n display: inline-block;\n width: auto;\n margin-block-end: calc(0.5 * ${spacing});\n\n label {\n color: inherit;\n }\n\n ${direction === 'in' &&\n css`\n border-radius: ${borderRadius} calc(3 * ${borderRadius}) calc(3 * ${borderRadius});\n `}\n\n > ${StyledMessageBubbleContent} {\n padding: ${spacing} calc(2 * ${spacing});\n word-break: break-word;\n white-space: pre-wrap;\n position: relative;\n }\n\n > ${StyledMediaList} {\n color: ${contrastContentColor};\n max-width: 100%;\n\n > ${StyledMediaListItem} {\n position: relative;\n ${StyledMediaThumbNail} {\n max-height: 12rem;\n width: 100%;\n object-fit: contain;\n background-color: ${secondaryBackground};\n }\n ${StyledSummaryItem} {\n padding: ${spacing} calc(3 * ${spacing});\n font-size: ${fontSizes.xxs};\n margin-block-start: calc(0.5 * ${spacing});\n }\n ${StyledSummaryItem}::before {\n content: '';\n padding: ${spacing} 0;\n border-top: 0.0625rem solid ${contrastContentColor};\n position: absolute;\n width: calc(100% - 2rem);\n left: 1rem;\n top: 0;\n }\n ${StyledMediaThumbNail} + ${StyledSummaryItem}::before {\n content: none;\n }\n svg {\n font-size: 1.6rem;\n }\n ${StyledText} {\n color: ${foregroundColor};\n }\n }\n\n ${!hasMessage &&\n css`\n > ${StyledMediaListItem}:first-child {\n > ${StyledSummaryItem}::before {\n border-top: none;\n }\n }\n `}\n }\n\n ${StyledMessageHeader} {\n padding: ${spacing} calc(2 * ${spacing});\n color: ${contrastHeaderColor};\n border-block-end: 0.0625rem solid ${transparentize(0.5, theme.base.colors.white)};\n }\n\n ${StyledMessageHeaderContent} {\n color: ${contrastHeaderColor};\n margin-inline-end: ${spacing};\n }\n ${StyledMessageHeaderMeta} {\n > a {\n color: ${contrastHeaderColor};\n }\n }\n\n ${StyledMediaLink}, ${StyledMediaButton} {\n color: ${contrastContentColor};\n font-size: inherit;\n text-decoration: none;\n font-weight: 700;\n overflow-x: hidden;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: inline-block;\n max-width: 100%;\n &:hover {\n color: ${contrastContentColor};\n text-decoration: underline;\n }\n &:visited {\n color: ${contrastContentColor};\n }\n &:focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n }\n }\n\n ${StyledMetaInfoContainer} {\n width: 100%;\n padding: 0 ${spacing};\n ${StyledMetaInfo}, ${StyledStatusInfo} {\n margin-block-end: ${spacing};\n font-size: 0.7rem;\n color: ${metaForegroundColor};\n }\n ${StyledStatusInfo} {\n color: ${statusForegroundColor};\n }\n }\n ${StyledTypingIndicator} {\n width: 4.5rem;\n position: relative;\n height: 2rem;\n }\n `;\n }\n);\nStyledMessageContainer.defaultProps = defaultThemeProp;\ninterface StyledBlinkingDotProps {\n delay?: number;\n}\n\nexport const StyledBlinkingDot = styled.div<StyledBlinkingDotProps>(({ delay = 0, theme }) => {\n return css`\n @keyframes Blinking {\n 0% {\n background: ${theme.base.colors.gray.medium};\n }\n 100% {\n background: ${theme.base.colors.gray['extra-light']};\n }\n }\n animation: Blinking calc(4 * ${theme.base.animation.speed}) infinite;\n background: ${theme.base.colors.gray['extra-light']};\n border-radius: 50%;\n animation-delay: ${delay}s;\n height: 0.4rem;\n width: 0.4rem;\n `;\n});\nStyledBlinkingDot.defaultProps = defaultThemeProp;\n\nexport const StyledUndeliveredIcon = styled(Icon)(\n ({\n theme: {\n base: {\n palette: { urgent }\n }\n }\n }) => {\n return css`\n color: ${urgent};\n `;\n }\n);\n\nStyledUndeliveredIcon.defaultProps = defaultThemeProp;\n\nexport const StyledFlagIcon = styled(Icon)(({ theme }) => {\n return css`\n position: relative;\n inset-block-start: calc(0.5 * ${theme.base.spacing});\n `;\n});\n\nStyledFlagIcon.defaultProps = defaultThemeProp;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-social",
|
|
3
|
-
"version": "4.0.0-dev.
|
|
3
|
+
"version": "4.0.0-dev.20.0",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/pegasystems/cosmos-react.git",
|
|
@@ -23,9 +23,9 @@
|
|
|
23
23
|
"build": "tsc -b"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@pega/cosmos-react-core": "4.0.0-dev.
|
|
27
|
-
"@pega/cosmos-react-rte": "4.0.0-dev.
|
|
28
|
-
"@pega/cosmos-react-work": "4.0.0-dev.
|
|
26
|
+
"@pega/cosmos-react-core": "4.0.0-dev.20.0",
|
|
27
|
+
"@pega/cosmos-react-rte": "4.0.0-dev.20.0",
|
|
28
|
+
"@pega/cosmos-react-work": "4.0.0-dev.20.0",
|
|
29
29
|
"@types/parse5": "^6.0.0",
|
|
30
30
|
"@types/react": "^16.14.24 || ^17.0.38",
|
|
31
31
|
"@types/react-dom": "^16.9.14 || ^17.0.11",
|