@pega/cosmos-react-core 9.0.0-build.19.3 → 9.0.0-build.19.4
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/SelectionCard/SelectionCard.d.ts.map +1 -1
- package/lib/components/SelectionCard/SelectionCard.js +1 -1
- package/lib/components/SelectionCard/SelectionCard.js.map +1 -1
- package/lib/components/SelectionCard/SelectionCard.styles.d.ts.map +1 -1
- package/lib/components/SelectionCard/SelectionCard.styles.js +20 -4
- package/lib/components/SelectionCard/SelectionCard.styles.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectionCard.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.tsx"],"names":[],"mappings":"AA8CA,OAAO,KAAK,EAA+B,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAK7F,eAAO,MAAM,iBAAiB,wFACyD,CAAC;;;;
|
|
1
|
+
{"version":3,"file":"SelectionCard.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.tsx"],"names":[],"mappings":"AA8CA,OAAO,KAAK,EAA+B,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAK7F,eAAO,MAAM,iBAAiB,wFACyD,CAAC;;;;AAsOxF,wBAAmE"}
|
|
@@ -70,7 +70,7 @@ const SelectionCard = forwardRef(function SelectionCard(props, ref) {
|
|
|
70
70
|
const imageContent = useMemo(() => {
|
|
71
71
|
if (image) {
|
|
72
72
|
const imagery = (isBrokenImage && image.src === prevImageSrc) || image.src === undefined ? (_jsx(Icon, { name: 'picture', "aria-label": t('image_load_error') })) : (_jsx(StyledImage, { "data-testid": testIds.image, ...image, onError: () => setIsBrokenImage(true), onLoad: () => setIsBrokenImage(false) }));
|
|
73
|
-
return (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledImageCell, placement: image.placement, size: image.size, children: _jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledImageContainer, placement: image.placement, size: image.size, children: imagery }) }));
|
|
73
|
+
return (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledImageCell, placement: image.placement, size: image.size, style: image.src && !isBrokenImage ? { '--bg-image': `url(${image.src})` } : undefined, children: _jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledImageContainer, placement: image.placement, size: image.size, children: imagery }) }));
|
|
74
74
|
}
|
|
75
75
|
}, [isBrokenImage, image?.src, prevImageSrc, image?.placement, image?.size]);
|
|
76
76
|
let asProp = StyledSelectionCard;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectionCard.js","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n useEffect,\n useRef,\n useState,\n useMemo,\n useLayoutEffect,\n useCallback,\n cloneElement\n} from 'react';\nimport type { KeyboardEvent, PropsWithoutRef, RefObject } from 'react';\n\nimport { getActiveElement, withTestIds, isValidElement, hasProp } from '../../utils';\nimport Icon, { registerIcon } from '../Icon';\nimport type { RefElement } from '../../types';\nimport {\n useConsolidatedRef,\n useEscape,\n useFocusTrap,\n useFocusWithin,\n useI18n,\n usePrevious,\n useTestIds,\n useUID\n} from '../../hooks';\nimport Grid from '../Grid';\nimport type { GridProps } from '../Grid';\nimport Flex from '../Flex';\nimport FieldValueList from '../FieldValueList';\nimport type { FieldValueListItemProps } from '../FieldValueList';\nimport { StyledImage } from '../Image';\nimport * as pictureIcon from '../Icon/icons/picture.icon';\nimport ShowMoreLess from '../ShowMoreLess';\n\nimport { getSelectionCardTestIds } from './SelectionCard.test-ids';\nimport {\n StyledSelectionCard,\n StyledContentContainer,\n StyledImageContainer,\n StyledSelectionCardInline,\n StyledSelectionCardStacked,\n StyledValueList,\n StyledHeader,\n StyledImageCell,\n StyledContentCell\n} from './SelectionCard.styles';\nimport type { FieldValueItemPropsOmitName, SelectionCardProps } from './SelectionCard.types';\nimport SelectionCardActions from './SelectionCardActions';\n\nregisterIcon(pictureIcon);\n\nexport const focusableSelector =\n 'a[href], button, input, textarea, select, details, video[controls], audio[controls]';\n\nconst useContentHeight = (\n contentRef: RefObject<HTMLElement>,\n targetRef: RefObject<HTMLElement>\n) => {\n useLayoutEffect(() => {\n if (!contentRef.current || !targetRef.current) return;\n\n const resizeObserver = new ResizeObserver(() => {\n requestAnimationFrame(() => {\n targetRef.current?.style.setProperty(\n '--content-height',\n `${contentRef.current?.scrollHeight}px`\n );\n });\n });\n\n resizeObserver.observe(contentRef.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, []);\n};\n\nconst SelectionCard = forwardRef<\n RefElement<SelectionCardProps>,\n PropsWithoutRef<SelectionCardProps>\n>(function SelectionCard(props, ref) {\n const uid = useUID();\n const {\n testId,\n id = uid,\n 'aria-label': label,\n heading,\n disabled = false,\n image,\n fields = [],\n onClick,\n onKeyDown,\n actions,\n additionalInfo,\n ...restProps\n } = props;\n\n const t = useI18n();\n\n const contentRef = useRef<HTMLDivElement>(null);\n const containerRef = useConsolidatedRef(ref);\n\n const [focusOnInput, setFocusOnInput] = useState(false);\n const [hasInteractiveElements, setHasInteractiveElements] = useState(0);\n const [isBrokenImage, setIsBrokenImage] = useState(false);\n const prevImageSrc = usePrevious(image?.src);\n const testIds = useTestIds(testId, getSelectionCardTestIds);\n const contentId = `${id}-content`;\n\n const hasAdditionalContent = fields.length > 0;\n\n useEffect(() => {\n const focusables = containerRef.current?.querySelectorAll(focusableSelector);\n setHasInteractiveElements(focusables?.length || 0);\n setFocusOnInput(focusables?.length === 1 && focusables?.[0] instanceof HTMLInputElement);\n focusables?.forEach(el =>\n el.hasAttribute('data-main-focus')\n ? el.removeAttribute('tabindex')\n : el.setAttribute('tabindex', '-1')\n );\n }, [additionalInfo, fields, actions]);\n\n useFocusTrap(focusOnInput ? null : contentRef, false, [contentRef]);\n\n useFocusWithin([focusOnInput ? null : contentRef], focused =>\n contentRef.current\n ?.querySelectorAll(focusableSelector)\n .forEach(el => (focused ? el.removeAttribute('tabindex') : el.setAttribute('tabindex', '-1')))\n );\n\n useEscape(() => containerRef.current?.focus(), focusOnInput ? null : containerRef, [\n containerRef\n ]);\n\n useContentHeight(contentRef, containerRef);\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (\n event.key === 'Enter' &&\n containerRef.current === getActiveElement() &&\n (!focusOnInput || (focusOnInput && hasInteractiveElements > 1))\n ) {\n event.preventDefault();\n contentRef.current?.querySelectorAll<HTMLElement>(focusableSelector)[0]?.focus();\n }\n onKeyDown?.(event);\n },\n [containerRef, contentRef]\n );\n\n const imageContent = useMemo(() => {\n if (image) {\n const imagery =\n (isBrokenImage && image.src === prevImageSrc) || image.src === undefined ? (\n <Icon name='picture' aria-label={t('image_load_error')} />\n ) : (\n <StyledImage\n data-testid={testIds.image}\n {...image}\n onError={() => setIsBrokenImage(true)}\n onLoad={() => setIsBrokenImage(false)}\n />\n );\n return (\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledImageCell}\n placement={image.placement}\n size={image.size}\n >\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledImageContainer}\n placement={image.placement}\n size={image.size}\n >\n {imagery}\n </Flex>\n </Flex>\n );\n }\n }, [isBrokenImage, image?.src, prevImageSrc, image?.placement, image?.size]);\n\n let asProp: GridProps['as'] = StyledSelectionCard;\n if (image) {\n asProp = image.placement?.startsWith('block')\n ? StyledSelectionCardStacked\n : StyledSelectionCardInline;\n }\n\n const isFieldValueListItemProps = (\n item: FieldValueListItemProps | FieldValueItemPropsOmitName\n ): item is FieldValueListItemProps => {\n return hasProp(item, 'name');\n };\n\n return (\n <Grid\n data-testid={testIds.root}\n {...restProps}\n id={id}\n onClick={onClick}\n as={asProp}\n placement={image?.placement}\n size={image?.size}\n container={{ cols: '1fr', rows: 'auto' }}\n disabled={disabled}\n role={hasInteractiveElements ? 'group' : 'article'}\n aria-label={label}\n ref={containerRef}\n data-main-focus={focusOnInput ? undefined : true}\n tabIndex={focusOnInput ? undefined : 0}\n onKeyDown={handleKeyDown}\n >\n {image && image.placement !== 'inline-end' && imageContent}\n {/* element needed to get actual content height of the content container */}\n <StyledContentCell>\n <Flex\n as={StyledContentContainer}\n container={{ direction: 'column', gap: 0.75 }}\n ref={contentRef}\n >\n <Flex as={StyledHeader} container={{ alignItems: 'center', justify: 'between' }}>\n {isValidElement(heading) ? (\n cloneElement(heading, {\n ...{\n tabIndex: focusOnInput ? undefined : -1,\n additionalInfo,\n 'data-main-focus': focusOnInput ? true : undefined,\n 'aria-details': hasAdditionalContent ? contentId : undefined\n }\n })\n ) : (\n <span\n data-testid={testIds.label}\n aria-details={hasAdditionalContent ? contentId : undefined}\n >\n {heading}\n </span>\n )}\n {actions && (\n <SelectionCardActions\n data-testid={testIds.actions}\n actions={actions}\n disabled={disabled}\n contextualLabel={label}\n />\n )}\n </Flex>\n {hasAdditionalContent &&\n (fields.every(field => isFieldValueListItemProps(field)) ? (\n <FieldValueList id={contentId} data-testid={testIds.content} fields={fields} />\n ) : (\n <Flex\n container={{ direction: 'column', gap: 1 }}\n as={StyledValueList}\n id={contentId}\n data-testid={testIds.content}\n >\n {fields.map(field => {\n return (\n <li key={field.id}>\n {field.truncate ? (\n <ShowMoreLess lines={3}>{field.value}</ShowMoreLess>\n ) : (\n field.value\n )}\n </li>\n );\n })}\n </Flex>\n ))}\n </Flex>\n </StyledContentCell>\n {image?.placement === 'inline-end' && imageContent}\n </Grid>\n );\n});\n\nexport default withTestIds(SelectionCard, getSelectionCardTestIds);\n"]}
|
|
1
|
+
{"version":3,"file":"SelectionCard.js","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n useEffect,\n useRef,\n useState,\n useMemo,\n useLayoutEffect,\n useCallback,\n cloneElement\n} from 'react';\nimport type { KeyboardEvent, PropsWithoutRef, RefObject } from 'react';\n\nimport { getActiveElement, withTestIds, isValidElement, hasProp } from '../../utils';\nimport Icon, { registerIcon } from '../Icon';\nimport type { RefElement } from '../../types';\nimport {\n useConsolidatedRef,\n useEscape,\n useFocusTrap,\n useFocusWithin,\n useI18n,\n usePrevious,\n useTestIds,\n useUID\n} from '../../hooks';\nimport Grid from '../Grid';\nimport type { GridProps } from '../Grid';\nimport Flex from '../Flex';\nimport FieldValueList from '../FieldValueList';\nimport type { FieldValueListItemProps } from '../FieldValueList';\nimport { StyledImage } from '../Image';\nimport * as pictureIcon from '../Icon/icons/picture.icon';\nimport ShowMoreLess from '../ShowMoreLess';\n\nimport { getSelectionCardTestIds } from './SelectionCard.test-ids';\nimport {\n StyledSelectionCard,\n StyledContentContainer,\n StyledImageContainer,\n StyledSelectionCardInline,\n StyledSelectionCardStacked,\n StyledValueList,\n StyledHeader,\n StyledImageCell,\n StyledContentCell\n} from './SelectionCard.styles';\nimport type { FieldValueItemPropsOmitName, SelectionCardProps } from './SelectionCard.types';\nimport SelectionCardActions from './SelectionCardActions';\n\nregisterIcon(pictureIcon);\n\nexport const focusableSelector =\n 'a[href], button, input, textarea, select, details, video[controls], audio[controls]';\n\nconst useContentHeight = (\n contentRef: RefObject<HTMLElement>,\n targetRef: RefObject<HTMLElement>\n) => {\n useLayoutEffect(() => {\n if (!contentRef.current || !targetRef.current) return;\n\n const resizeObserver = new ResizeObserver(() => {\n requestAnimationFrame(() => {\n targetRef.current?.style.setProperty(\n '--content-height',\n `${contentRef.current?.scrollHeight}px`\n );\n });\n });\n\n resizeObserver.observe(contentRef.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, []);\n};\n\nconst SelectionCard = forwardRef<\n RefElement<SelectionCardProps>,\n PropsWithoutRef<SelectionCardProps>\n>(function SelectionCard(props, ref) {\n const uid = useUID();\n const {\n testId,\n id = uid,\n 'aria-label': label,\n heading,\n disabled = false,\n image,\n fields = [],\n onClick,\n onKeyDown,\n actions,\n additionalInfo,\n ...restProps\n } = props;\n\n const t = useI18n();\n\n const contentRef = useRef<HTMLDivElement>(null);\n const containerRef = useConsolidatedRef(ref);\n\n const [focusOnInput, setFocusOnInput] = useState(false);\n const [hasInteractiveElements, setHasInteractiveElements] = useState(0);\n const [isBrokenImage, setIsBrokenImage] = useState(false);\n const prevImageSrc = usePrevious(image?.src);\n const testIds = useTestIds(testId, getSelectionCardTestIds);\n const contentId = `${id}-content`;\n\n const hasAdditionalContent = fields.length > 0;\n\n useEffect(() => {\n const focusables = containerRef.current?.querySelectorAll(focusableSelector);\n setHasInteractiveElements(focusables?.length || 0);\n setFocusOnInput(focusables?.length === 1 && focusables?.[0] instanceof HTMLInputElement);\n focusables?.forEach(el =>\n el.hasAttribute('data-main-focus')\n ? el.removeAttribute('tabindex')\n : el.setAttribute('tabindex', '-1')\n );\n }, [additionalInfo, fields, actions]);\n\n useFocusTrap(focusOnInput ? null : contentRef, false, [contentRef]);\n\n useFocusWithin([focusOnInput ? null : contentRef], focused =>\n contentRef.current\n ?.querySelectorAll(focusableSelector)\n .forEach(el => (focused ? el.removeAttribute('tabindex') : el.setAttribute('tabindex', '-1')))\n );\n\n useEscape(() => containerRef.current?.focus(), focusOnInput ? null : containerRef, [\n containerRef\n ]);\n\n useContentHeight(contentRef, containerRef);\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (\n event.key === 'Enter' &&\n containerRef.current === getActiveElement() &&\n (!focusOnInput || (focusOnInput && hasInteractiveElements > 1))\n ) {\n event.preventDefault();\n contentRef.current?.querySelectorAll<HTMLElement>(focusableSelector)[0]?.focus();\n }\n onKeyDown?.(event);\n },\n [containerRef, contentRef]\n );\n\n const imageContent = useMemo(() => {\n if (image) {\n const imagery =\n (isBrokenImage && image.src === prevImageSrc) || image.src === undefined ? (\n <Icon name='picture' aria-label={t('image_load_error')} />\n ) : (\n <StyledImage\n data-testid={testIds.image}\n {...image}\n onError={() => setIsBrokenImage(true)}\n onLoad={() => setIsBrokenImage(false)}\n />\n );\n return (\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledImageCell}\n placement={image.placement}\n size={image.size}\n style={image.src && !isBrokenImage ? { '--bg-image': `url(${image.src})` } : undefined}\n >\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledImageContainer}\n placement={image.placement}\n size={image.size}\n >\n {imagery}\n </Flex>\n </Flex>\n );\n }\n }, [isBrokenImage, image?.src, prevImageSrc, image?.placement, image?.size]);\n\n let asProp: GridProps['as'] = StyledSelectionCard;\n if (image) {\n asProp = image.placement?.startsWith('block')\n ? StyledSelectionCardStacked\n : StyledSelectionCardInline;\n }\n\n const isFieldValueListItemProps = (\n item: FieldValueListItemProps | FieldValueItemPropsOmitName\n ): item is FieldValueListItemProps => {\n return hasProp(item, 'name');\n };\n\n return (\n <Grid\n data-testid={testIds.root}\n {...restProps}\n id={id}\n onClick={onClick}\n as={asProp}\n placement={image?.placement}\n size={image?.size}\n container={{ cols: '1fr', rows: 'auto' }}\n disabled={disabled}\n role={hasInteractiveElements ? 'group' : 'article'}\n aria-label={label}\n ref={containerRef}\n data-main-focus={focusOnInput ? undefined : true}\n tabIndex={focusOnInput ? undefined : 0}\n onKeyDown={handleKeyDown}\n >\n {image && image.placement !== 'inline-end' && imageContent}\n {/* element needed to get actual content height of the content container */}\n <StyledContentCell>\n <Flex\n as={StyledContentContainer}\n container={{ direction: 'column', gap: 0.75 }}\n ref={contentRef}\n >\n <Flex as={StyledHeader} container={{ alignItems: 'center', justify: 'between' }}>\n {isValidElement(heading) ? (\n cloneElement(heading, {\n ...{\n tabIndex: focusOnInput ? undefined : -1,\n additionalInfo,\n 'data-main-focus': focusOnInput ? true : undefined,\n 'aria-details': hasAdditionalContent ? contentId : undefined\n }\n })\n ) : (\n <span\n data-testid={testIds.label}\n aria-details={hasAdditionalContent ? contentId : undefined}\n >\n {heading}\n </span>\n )}\n {actions && (\n <SelectionCardActions\n data-testid={testIds.actions}\n actions={actions}\n disabled={disabled}\n contextualLabel={label}\n />\n )}\n </Flex>\n {hasAdditionalContent &&\n (fields.every(field => isFieldValueListItemProps(field)) ? (\n <FieldValueList id={contentId} data-testid={testIds.content} fields={fields} />\n ) : (\n <Flex\n container={{ direction: 'column', gap: 1 }}\n as={StyledValueList}\n id={contentId}\n data-testid={testIds.content}\n >\n {fields.map(field => {\n return (\n <li key={field.id}>\n {field.truncate ? (\n <ShowMoreLess lines={3}>{field.value}</ShowMoreLess>\n ) : (\n field.value\n )}\n </li>\n );\n })}\n </Flex>\n ))}\n </Flex>\n </StyledContentCell>\n {image?.placement === 'inline-end' && imageContent}\n </Grid>\n );\n});\n\nexport default withTestIds(SelectionCard, getSelectionCardTestIds);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectionCard.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAMjD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAE3F,eAAO,MAAM,mBAAmB,2IAyC/B,CAAC;AAIF,eAAO,MAAM,yBAAyB;gBACxB,aAAa,CAAC,cAAc,EAAE,aAAa,CAAC;WACjD,SAAS;SAwBhB,CAAC;AAEH,eAAO,MAAM,0BAA0B;WAAwC,SAAS;SAkBtF,CAAC;AAEH,eAAO,MAAM,eAAe;gBAA4B,cAAc;WAAS,SAAS;
|
|
1
|
+
{"version":3,"file":"SelectionCard.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAMjD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAE3F,eAAO,MAAM,mBAAmB,2IAyC/B,CAAC;AAIF,eAAO,MAAM,yBAAyB;gBACxB,aAAa,CAAC,cAAc,EAAE,aAAa,CAAC;WACjD,SAAS;SAwBhB,CAAC;AAEH,eAAO,MAAM,0BAA0B;WAAwC,SAAS;SAkBtF,CAAC;AAEH,eAAO,MAAM,eAAe;gBAA4B,cAAc;WAAS,SAAS;SAsDvF,CAAC;AAIF,eAAO,MAAM,iBAAiB,yGAAe,CAAC;AAE9C,eAAO,MAAM,oBAAoB;gBACnB,cAAc;WACnB,SAAS;SA4DjB,CAAC;AAIF,eAAO,MAAM,eAAe,wGAG3B,CAAC;AAEF,eAAO,MAAM,YAAY,yGAExB,CAAC;AAEF,eAAO,MAAM,sBAAsB,yGAiBjC,CAAC"}
|
|
@@ -74,9 +74,10 @@ export const StyledSelectionCardStacked = styled(StyledSelectionCard)(({ size })
|
|
|
74
74
|
grid-template-columns: minmax(2.75rem, 1fr);
|
|
75
75
|
`;
|
|
76
76
|
});
|
|
77
|
-
export const StyledImageCell = styled.div(({ theme: { base: { palette }, components: { card: { 'border-radius': borderRadius } } }, placement = 'inline-start', size = 'flexible' }) => {
|
|
77
|
+
export const StyledImageCell = styled.div(({ theme: { base: { palette, transparency }, components: { card: { 'border-radius': borderRadius } } }, placement = 'inline-start', size = 'flexible' }) => {
|
|
78
78
|
return css `
|
|
79
79
|
background-color: ${palette['app-background']};
|
|
80
|
+
position: relative;
|
|
80
81
|
|
|
81
82
|
${size === 'flexible' &&
|
|
82
83
|
placement !== 'block-start' &&
|
|
@@ -104,20 +105,35 @@ export const StyledImageCell = styled.div(({ theme: { base: { palette }, compone
|
|
|
104
105
|
border-start-start-radius: calc(${borderRadius} - 0.0625rem);
|
|
105
106
|
border-start-end-radius: calc(${borderRadius} - 0.0625rem);
|
|
106
107
|
`}
|
|
108
|
+
|
|
109
|
+
&::before {
|
|
110
|
+
content: '';
|
|
111
|
+
position: absolute;
|
|
112
|
+
inset: 0;
|
|
113
|
+
background: var(--bg-image) center / cover no-repeat;
|
|
114
|
+
filter: blur(1rem);
|
|
115
|
+
opacity: ${transparency['transparent-4']};
|
|
116
|
+
pointer-events: none;
|
|
117
|
+
clip-path: inset(0);
|
|
118
|
+
}
|
|
107
119
|
`;
|
|
108
120
|
});
|
|
109
121
|
StyledImageCell.defaultProps = defaultThemeProp;
|
|
110
122
|
export const StyledContentCell = styled.div ``;
|
|
111
|
-
export const StyledImageContainer = styled.div(({ theme: { base: { transparency } }, placement = 'inline-start', size = 'flexible' }) => {
|
|
123
|
+
export const StyledImageContainer = styled.div(({ theme: { base: { transparency, spacing }, components: { card: { 'border-radius': borderRadius } } }, placement = 'inline-start', size = 'flexible' }) => {
|
|
112
124
|
return css `
|
|
113
125
|
aspect-ratio: 4 / 5;
|
|
114
126
|
max-height: 100%;
|
|
115
127
|
min-height: 2rem;
|
|
116
128
|
min-width: 2rem;
|
|
129
|
+
position: relative;
|
|
130
|
+
padding: min(${spacing}, 10%);
|
|
117
131
|
|
|
118
132
|
img {
|
|
119
|
-
|
|
120
|
-
|
|
133
|
+
max-width: 100%;
|
|
134
|
+
max-height: 100%;
|
|
135
|
+
box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, ${transparency['transparent-5']});
|
|
136
|
+
border-radius: calc(${borderRadius} / 2);
|
|
121
137
|
}
|
|
122
138
|
|
|
123
139
|
${placement === 'block-start' &&
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectionCard.styles.js","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport type { ExcludeStrict } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { StyledPseudoRadioCheck } from '../RadioCheck/RadioCheck';\nimport { StyledFieldValueList, StyledStackedFieldValue } from '../FieldValueList';\nimport { StyledIcon } from '../Icon';\n\nimport type { ImagePlacement, ImageSize, SelectionCardProps } from './SelectionCard.types';\n\nexport const StyledSelectionCard = styled.div<Pick<SelectionCardProps, 'disabled'>>(\n ({\n disabled,\n theme: {\n base: { palette, 'disabled-opacity': disabledOpacity },\n components: {\n card,\n 'form-control': {\n ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor }\n }\n }\n }\n }) => {\n return css`\n min-width: min-content;\n max-width: max-content;\n background-color: ${card.background};\n border-radius: ${card['border-radius']};\n border: 0.0625rem solid ${palette['border-line']};\n\n ${disabled &&\n css`\n cursor: not-allowed;\n opacity: ${disabledOpacity};\n `}\n\n ${!disabled &&\n css`\n :focus {\n box-shadow: ${shadow};\n border-color: transparent;\n outline: none;\n\n & ${StyledPseudoRadioCheck} {\n box-shadow: ${shadow};\n border-color: ${focusBorderColor};\n }\n }\n `}\n `;\n }\n);\n\nStyledSelectionCard.defaultProps = defaultThemeProp;\n\nexport const StyledSelectionCardInline = styled(StyledSelectionCard)<{\n placement?: ExcludeStrict<ImagePlacement, 'block-start'>;\n size?: ImageSize;\n}>(({ placement, size }) => {\n let imageContainerSize;\n let contentContainerSize;\n switch (size) {\n case 'small':\n imageContainerSize = '2.75rem';\n contentContainerSize = '1fr';\n break;\n case 'large':\n imageContainerSize = '8.875rem';\n contentContainerSize = '1fr';\n break;\n default:\n imageContainerSize = 'minmax(2.5rem, auto)';\n contentContainerSize = 'minmax(66.6%, 1fr)';\n break;\n }\n return css`\n grid-template-columns: ${placement === 'inline-end'\n ? `${contentContainerSize} ${imageContainerSize}`\n : `${imageContainerSize} ${contentContainerSize}`};\n grid-template-rows: minmax(2.75rem, auto);\n `;\n});\n\nexport const StyledSelectionCardStacked = styled(StyledSelectionCard)<{ size?: ImageSize }>(({\n size\n}) => {\n let containerSize;\n switch (size) {\n case 'small':\n containerSize = '2.5rem';\n break;\n case 'large':\n containerSize = '15.125rem';\n break;\n default:\n containerSize = 'minmax(2.5rem, 15.125rem)';\n }\n return css`\n grid-template-rows: ${containerSize} 1fr;\n grid-template-columns: minmax(2.75rem, 1fr);\n `;\n});\n\nexport const StyledImageCell = styled.div<{ placement?: ImagePlacement; size?: ImageSize }>(\n ({\n theme: {\n base: { palette },\n components: {\n card: { 'border-radius': borderRadius }\n }\n },\n placement = 'inline-start',\n size = 'flexible'\n }) => {\n return css`\n background-color: ${palette['app-background']};\n\n ${size === 'flexible' &&\n placement !== 'block-start' &&\n css`\n max-width: 8.875rem;\n min-height: 100%;\n height: var(--content-height, auto);\n `};\n\n /* Recalculation of the border radius by substracting border width */\n ${placement === 'inline-start' &&\n css`\n border-start-start-radius: calc(${borderRadius} - 0.0625rem);\n border-end-start-radius: calc(${borderRadius} - 0.0625rem);\n `}\n\n ${placement === 'inline-end' &&\n css`\n border-end-end-radius: calc(${borderRadius} - 0.0625rem);\n border-start-end-radius: calc(${borderRadius} - 0.0625rem);\n `}\n\n ${placement === 'block-start' &&\n css`\n border-start-start-radius: calc(${borderRadius} - 0.0625rem);\n border-start-end-radius: calc(${borderRadius} - 0.0625rem);\n `}\n `;\n }\n);\n\nStyledImageCell.defaultProps = defaultThemeProp;\n\nexport const StyledContentCell = styled.div``;\n\nexport const StyledImageContainer = styled.div<{\n placement?: ImagePlacement;\n size?: ImageSize;\n}>(\n ({\n theme: {\n base: { transparency }\n },\n placement = 'inline-start',\n size = 'flexible'\n }) => {\n return css`\n aspect-ratio: 4 / 5;\n max-height: 100%;\n min-height: 2rem;\n min-width: 2rem;\n\n img {\n height: 100%;\n object-fit: contain;\n }\n\n ${placement === 'block-start' &&\n css`\n aspect-ratio: 16 / 9;\n > img {\n max-height: 100%;\n }\n `}\n\n ${size === 'flexible' &&\n css`\n min-height: 100%;\n `}\n\n ${size === 'large' &&\n css`\n min-height: 11.0625rem;\n `}\n\n ${size === 'small' &&\n css`\n aspect-ratio: 1 / 1;\n\n > img {\n max-width: 2rem;\n max-height: 2rem;\n }\n `}\n\n ${StyledIcon} {\n opacity: ${transparency['transparent-3']};\n }\n `;\n }\n);\n\nStyledImageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledValueList = styled.ul`\n width: 100%;\n list-style-type: none;\n`;\n\nexport const StyledHeader = styled.div`\n width: 100%;\n`;\n\nexport const StyledContentContainer = styled.div(({ theme }) => {\n return css`\n padding: ${theme.base.spacing} calc(1.5 * ${theme.base.spacing});\n overflow-wrap: break-word;\n\n > ${StyledHeader} {\n min-height: 2rem;\n }\n\n ${StyledValueList}, ${StyledFieldValueList} {\n margin-block-end: calc(0.75 * ${theme.base.spacing});\n }\n\n ${StyledStackedFieldValue} {\n grid-column: 1 / -1;\n }\n `;\n});\n\nStyledContentContainer.defaultProps = defaultThemeProp;\n"]}
|
|
1
|
+
{"version":3,"file":"SelectionCard.styles.js","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport type { ExcludeStrict } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { StyledPseudoRadioCheck } from '../RadioCheck/RadioCheck';\nimport { StyledFieldValueList, StyledStackedFieldValue } from '../FieldValueList';\nimport { StyledIcon } from '../Icon';\n\nimport type { ImagePlacement, ImageSize, SelectionCardProps } from './SelectionCard.types';\n\nexport const StyledSelectionCard = styled.div<Pick<SelectionCardProps, 'disabled'>>(\n ({\n disabled,\n theme: {\n base: { palette, 'disabled-opacity': disabledOpacity },\n components: {\n card,\n 'form-control': {\n ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor }\n }\n }\n }\n }) => {\n return css`\n min-width: min-content;\n max-width: max-content;\n background-color: ${card.background};\n border-radius: ${card['border-radius']};\n border: 0.0625rem solid ${palette['border-line']};\n\n ${disabled &&\n css`\n cursor: not-allowed;\n opacity: ${disabledOpacity};\n `}\n\n ${!disabled &&\n css`\n :focus {\n box-shadow: ${shadow};\n border-color: transparent;\n outline: none;\n\n & ${StyledPseudoRadioCheck} {\n box-shadow: ${shadow};\n border-color: ${focusBorderColor};\n }\n }\n `}\n `;\n }\n);\n\nStyledSelectionCard.defaultProps = defaultThemeProp;\n\nexport const StyledSelectionCardInline = styled(StyledSelectionCard)<{\n placement?: ExcludeStrict<ImagePlacement, 'block-start'>;\n size?: ImageSize;\n}>(({ placement, size }) => {\n let imageContainerSize;\n let contentContainerSize;\n switch (size) {\n case 'small':\n imageContainerSize = '2.75rem';\n contentContainerSize = '1fr';\n break;\n case 'large':\n imageContainerSize = '8.875rem';\n contentContainerSize = '1fr';\n break;\n default:\n imageContainerSize = 'minmax(2.5rem, auto)';\n contentContainerSize = 'minmax(66.6%, 1fr)';\n break;\n }\n return css`\n grid-template-columns: ${placement === 'inline-end'\n ? `${contentContainerSize} ${imageContainerSize}`\n : `${imageContainerSize} ${contentContainerSize}`};\n grid-template-rows: minmax(2.75rem, auto);\n `;\n});\n\nexport const StyledSelectionCardStacked = styled(StyledSelectionCard)<{ size?: ImageSize }>(({\n size\n}) => {\n let containerSize;\n switch (size) {\n case 'small':\n containerSize = '2.5rem';\n break;\n case 'large':\n containerSize = '15.125rem';\n break;\n default:\n containerSize = 'minmax(2.5rem, 15.125rem)';\n }\n return css`\n grid-template-rows: ${containerSize} 1fr;\n grid-template-columns: minmax(2.75rem, 1fr);\n `;\n});\n\nexport const StyledImageCell = styled.div<{ placement?: ImagePlacement; size?: ImageSize }>(\n ({\n theme: {\n base: { palette, transparency },\n components: {\n card: { 'border-radius': borderRadius }\n }\n },\n placement = 'inline-start',\n size = 'flexible'\n }) => {\n return css`\n background-color: ${palette['app-background']};\n position: relative;\n\n ${size === 'flexible' &&\n placement !== 'block-start' &&\n css`\n max-width: 8.875rem;\n min-height: 100%;\n height: var(--content-height, auto);\n `};\n\n /* Recalculation of the border radius by substracting border width */\n ${placement === 'inline-start' &&\n css`\n border-start-start-radius: calc(${borderRadius} - 0.0625rem);\n border-end-start-radius: calc(${borderRadius} - 0.0625rem);\n `}\n\n ${placement === 'inline-end' &&\n css`\n border-end-end-radius: calc(${borderRadius} - 0.0625rem);\n border-start-end-radius: calc(${borderRadius} - 0.0625rem);\n `}\n\n ${placement === 'block-start' &&\n css`\n border-start-start-radius: calc(${borderRadius} - 0.0625rem);\n border-start-end-radius: calc(${borderRadius} - 0.0625rem);\n `}\n\n &::before {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--bg-image) center / cover no-repeat;\n filter: blur(1rem);\n opacity: ${transparency['transparent-4']};\n pointer-events: none;\n clip-path: inset(0);\n }\n `;\n }\n);\n\nStyledImageCell.defaultProps = defaultThemeProp;\n\nexport const StyledContentCell = styled.div``;\n\nexport const StyledImageContainer = styled.div<{\n placement?: ImagePlacement;\n size?: ImageSize;\n}>(\n ({\n theme: {\n base: { transparency, spacing },\n components: {\n card: { 'border-radius': borderRadius }\n }\n },\n placement = 'inline-start',\n size = 'flexible'\n }) => {\n return css`\n aspect-ratio: 4 / 5;\n max-height: 100%;\n min-height: 2rem;\n min-width: 2rem;\n position: relative;\n padding: min(${spacing}, 10%);\n\n img {\n max-width: 100%;\n max-height: 100%;\n box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, ${transparency['transparent-5']});\n border-radius: calc(${borderRadius} / 2);\n }\n\n ${placement === 'block-start' &&\n css`\n aspect-ratio: 16 / 9;\n > img {\n max-height: 100%;\n }\n `}\n\n ${size === 'flexible' &&\n css`\n min-height: 100%;\n `}\n\n ${size === 'large' &&\n css`\n min-height: 11.0625rem;\n `}\n\n ${size === 'small' &&\n css`\n aspect-ratio: 1 / 1;\n\n > img {\n max-width: 2rem;\n max-height: 2rem;\n }\n `}\n\n ${StyledIcon} {\n opacity: ${transparency['transparent-3']};\n }\n `;\n }\n);\n\nStyledImageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledValueList = styled.ul`\n width: 100%;\n list-style-type: none;\n`;\n\nexport const StyledHeader = styled.div`\n width: 100%;\n`;\n\nexport const StyledContentContainer = styled.div(({ theme }) => {\n return css`\n padding: ${theme.base.spacing} calc(1.5 * ${theme.base.spacing});\n overflow-wrap: break-word;\n\n > ${StyledHeader} {\n min-height: 2rem;\n }\n\n ${StyledValueList}, ${StyledFieldValueList} {\n margin-block-end: calc(0.75 * ${theme.base.spacing});\n }\n\n ${StyledStackedFieldValue} {\n grid-column: 1 / -1;\n }\n `;\n});\n\nStyledContentContainer.defaultProps = defaultThemeProp;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-core",
|
|
3
|
-
"version": "9.0.0-build.19.
|
|
3
|
+
"version": "9.0.0-build.19.4",
|
|
4
4
|
"description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"author": "Pegasystems",
|