@pega/cosmos-react-core 9.0.0-build.29.3 → 9.0.0-build.29.5
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/Checkbox/CheckboxCard.d.ts +6 -1
- package/lib/components/Checkbox/CheckboxCard.d.ts.map +1 -1
- package/lib/components/Checkbox/CheckboxCard.js +2 -2
- package/lib/components/Checkbox/CheckboxCard.js.map +1 -1
- package/lib/components/PageTemplates/CategorySubPage.styles.d.ts.map +1 -1
- package/lib/components/PageTemplates/CategorySubPage.styles.js +24 -5
- package/lib/components/PageTemplates/CategorySubPage.styles.js.map +1 -1
- package/lib/components/RadioButton/RadioButtonCard.d.ts +6 -1
- package/lib/components/RadioButton/RadioButtonCard.d.ts.map +1 -1
- package/lib/components/RadioButton/RadioButtonCard.js +2 -2
- package/lib/components/RadioButton/RadioButtonCard.js.map +1 -1
- package/lib/components/SelectionCard/SelectionCardDisplay.d.ts +6 -1
- package/lib/components/SelectionCard/SelectionCardDisplay.d.ts.map +1 -1
- package/lib/components/SelectionCard/SelectionCardDisplay.js +2 -2
- package/lib/components/SelectionCard/SelectionCardDisplay.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
|
-
import type { OmitStrict } from '../../types';
|
|
2
|
+
import type { HeadingTag, OmitStrict } from '../../types';
|
|
3
3
|
import type { SelectionCardProps } from '../SelectionCard/SelectionCard.types';
|
|
4
4
|
import type { CheckboxProps } from './Checkbox';
|
|
5
5
|
export type CheckboxCardProps = OmitStrict<SelectionCardProps, 'heading'> & OmitStrict<CheckboxProps, 'label' | 'variant' | 'indeterminate'> & {
|
|
6
6
|
label: NonNullable<ReactNode>;
|
|
7
|
+
/**
|
|
8
|
+
* Uses specific heading tag for header.
|
|
9
|
+
* @default h4
|
|
10
|
+
*/
|
|
11
|
+
headingTag?: HeadingTag;
|
|
7
12
|
};
|
|
8
13
|
declare const _default: import("react").ForwardRefExoticComponent<Omit<CheckboxCardProps, "ref"> & import("react").RefAttributes<HTMLInputElement>> & {
|
|
9
14
|
getTestIds: (testIdProp?: import("../../types").TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["control", "content", "image", "label", "actions"]>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxCard.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/CheckboxCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA8C,SAAS,EAAE,MAAM,OAAO,CAAC;AAGnF,OAAO,KAAK,EAAE,UAAU,EAAc,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"CheckboxCard.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/CheckboxCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA8C,SAAS,EAAE,MAAM,OAAO,CAAC;AAGnF,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAc,MAAM,aAAa,CAAC;AAGtE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAI/E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,MAAM,MAAM,iBAAiB,GAAG,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC,GACvE,UAAU,CAAC,aAAa,EAAE,OAAO,GAAG,SAAS,GAAG,eAAe,CAAC,GAAG;IACjE,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;;;;AAsFJ,wBAAiE"}
|
|
@@ -8,13 +8,13 @@ import Checkbox from './Checkbox';
|
|
|
8
8
|
import { getCheckboxCardTestIds } from './Checkbox.test-ids';
|
|
9
9
|
const CheckboxCard = forwardRef(function CheckboxCard(props, ref) {
|
|
10
10
|
const uid = useUID();
|
|
11
|
-
const { testId, id = uid, label, 'aria-label': ariaLabel, disabled, readOnly, onChange, onClick, onKeyDown, status, checked, value, ...restProps } = props;
|
|
11
|
+
const { testId, id = uid, label, headingTag = 'h4', 'aria-label': ariaLabel, disabled, readOnly, onChange, onClick, onKeyDown, status, checked, value, ...restProps } = props;
|
|
12
12
|
const cardId = `${id}-card`;
|
|
13
13
|
const labelId = `${id}-label`;
|
|
14
14
|
const testIds = useTestIds(testId, getCheckboxCardTestIds);
|
|
15
15
|
const inputRef = useConsolidatedRef(ref);
|
|
16
16
|
const containerRef = useRef(null);
|
|
17
|
-
return (_jsx(SelectionCard, { ...restProps, id: cardId, testId: testIds, "aria-labelledby": ariaLabel ? undefined : labelId, "aria-label": ariaLabel, heading: _jsx(Checkbox, { testId: testIds.root, onChange: onChange, onClick: onClick, status: status, checked: checked, value: value, id: id, disabled: disabled, readOnly: readOnly, "aria-labelledby": labelId, label: _jsx(Text, { variant:
|
|
17
|
+
return (_jsx(SelectionCard, { ...restProps, id: cardId, testId: testIds, "aria-labelledby": ariaLabel ? undefined : labelId, "aria-label": ariaLabel, heading: _jsx(Checkbox, { testId: testIds.root, onChange: onChange, onClick: onClick, status: status, checked: checked, value: value, id: id, disabled: disabled, readOnly: readOnly, "aria-labelledby": labelId, label: _jsx(Text, { variant: headingTag, as: 'span', id: labelId, "data-testid": testIds.label, children: label }), variant: 'simple', ref: inputRef, onKeyDown: onKeyDown }), readOnly: readOnly, disabled: disabled, onClick: (e) => {
|
|
18
18
|
const target = e.target;
|
|
19
19
|
if (readOnly || !containerRef.current?.contains(target))
|
|
20
20
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxCard.js","sourceRoot":"","sources":["../../../src/components/Checkbox/CheckboxCard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAG3C,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErE,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,aAAa,EAAE,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAElF,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"CheckboxCard.js","sourceRoot":"","sources":["../../../src/components/Checkbox/CheckboxCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef } from 'react';\nimport type { KeyboardEvent, MouseEvent, PropsWithoutRef, ReactNode } from 'react';\n\nimport { useConsolidatedRef, useTestIds, useUID } from '../../hooks';\nimport type { HeadingTag, OmitStrict, RefElement } from '../../types';\nimport { getActiveElement, withTestIds } from '../../utils';\nimport SelectionCard, { focusableSelector } from '../SelectionCard/SelectionCard';\nimport type { SelectionCardProps } from '../SelectionCard/SelectionCard.types';\nimport Text from '../Text';\n\nimport Checkbox from './Checkbox';\nimport type { CheckboxProps } from './Checkbox';\nimport { getCheckboxCardTestIds } from './Checkbox.test-ids';\n\nexport type CheckboxCardProps = OmitStrict<SelectionCardProps, 'heading'> &\n OmitStrict<CheckboxProps, 'label' | 'variant' | 'indeterminate'> & {\n label: NonNullable<ReactNode>;\n /**\n * Uses specific heading tag for header.\n * @default h4\n */\n headingTag?: HeadingTag;\n };\n\nconst CheckboxCard = forwardRef<RefElement<CheckboxProps>, PropsWithoutRef<CheckboxCardProps>>(\n function CheckboxCard(props, ref) {\n const uid = useUID();\n const {\n testId,\n id = uid,\n label,\n headingTag = 'h4',\n 'aria-label': ariaLabel,\n disabled,\n readOnly,\n onChange,\n onClick,\n onKeyDown,\n status,\n checked,\n value,\n ...restProps\n } = props;\n const cardId = `${id}-card`;\n const labelId = `${id}-label`;\n\n const testIds = useTestIds(testId, getCheckboxCardTestIds);\n const inputRef = useConsolidatedRef(ref);\n const containerRef = useRef<HTMLDivElement>(null);\n\n return (\n <SelectionCard\n {...restProps}\n id={cardId}\n testId={testIds}\n aria-labelledby={ariaLabel ? undefined : labelId}\n aria-label={ariaLabel}\n heading={\n <Checkbox\n testId={testIds.root}\n onChange={onChange}\n onClick={onClick}\n status={status}\n checked={checked}\n value={value}\n id={id}\n disabled={disabled}\n readOnly={readOnly}\n aria-labelledby={labelId}\n label={\n <Text variant={headingTag} as='span' id={labelId} data-testid={testIds.label}>\n {label}\n </Text>\n }\n variant='simple'\n ref={inputRef}\n onKeyDown={onKeyDown}\n />\n }\n readOnly={readOnly}\n disabled={disabled}\n onClick={(e: MouseEvent<HTMLDivElement>) => {\n const target = e.target as HTMLElement;\n if (readOnly || !containerRef.current?.contains(target)) return;\n if (\n containerRef.current &&\n [...containerRef.current.querySelectorAll(focusableSelector)].includes(target)\n )\n return;\n e.preventDefault();\n inputRef.current?.click();\n (inputRef.current?.hasAttribute('data-main-focus')\n ? inputRef\n : containerRef\n ).current?.focus();\n }}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === ' ' && containerRef.current === getActiveElement()) {\n e.preventDefault();\n inputRef.current?.click();\n }\n }}\n ref={containerRef}\n />\n );\n }\n);\n\nexport default withTestIds(CheckboxCard, getCheckboxCardTestIds);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CategorySubPage.styles.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/CategorySubPage.styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,oBAAoB;;2JAoB/B,CAAC;AAGH,eAAO,MAAM,aAAa;;uGAgExB,CAAC;AAGH,eAAO,MAAM,oBAAoB;;uJAa/B,CAAC;AAGH,eAAO,MAAM,kBAAkB,iOAAc,CAAC;AAE9C,eAAO,MAAM,cAAc,6NAazB,CAAC;AAGH,eAAO,MAAM,aAAa,iOAwBxB,CAAC;AAGH,eAAO,MAAM,SAAS,uNAAe,CAAC;AAEtC,eAAO,MAAM,uBAAuB,6NAsBlC,CAAC;AAGH,eAAO,MAAM,wBAAwB,6NAmBnC,CAAC;AAGH,eAAO,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"CategorySubPage.styles.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/CategorySubPage.styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,oBAAoB;;2JAoB/B,CAAC;AAGH,eAAO,MAAM,aAAa;;uGAgExB,CAAC;AAGH,eAAO,MAAM,oBAAoB;;uJAa/B,CAAC;AAGH,eAAO,MAAM,kBAAkB,iOAAc,CAAC;AAE9C,eAAO,MAAM,cAAc,6NAazB,CAAC;AAGH,eAAO,MAAM,aAAa,iOAwBxB,CAAC;AAGH,eAAO,MAAM,SAAS,uNAAe,CAAC;AAEtC,eAAO,MAAM,uBAAuB,6NAsBlC,CAAC;AAGH,eAAO,MAAM,wBAAwB,6NAmBnC,CAAC;AAGH,eAAO,MAAM,gBAAgB,6NAyC3B,CAAC;AAGH,eAAO,MAAM,eAAe,qOAe1B,CAAC;AAGH,eAAO,MAAM,mBAAmB,6NAAe,CAAC;AAEhD,eAAO,MAAM,mBAAmB,uNAe9B,CAAC;AAGH,eAAO,MAAM,iBAAiB,uNA4B5B,CAAC;AAGH,eAAO,MAAM,iBAAiB,6NAiB5B,CAAC;AAGH,eAAO,MAAM,cAAc,6NAkBzB,CAAC"}
|
|
@@ -169,8 +169,10 @@ export const StyledMenuColumn = styled.div(({ theme }) => {
|
|
|
169
169
|
background-color: ${appBackground};
|
|
170
170
|
position: sticky;
|
|
171
171
|
top: 0;
|
|
172
|
-
|
|
172
|
+
height: 100%;
|
|
173
|
+
min-height: 0;
|
|
173
174
|
max-height: 100%;
|
|
175
|
+
overflow-y: auto;
|
|
174
176
|
width: 100%;
|
|
175
177
|
padding: calc(2 * ${spacing}) 0;
|
|
176
178
|
|
|
@@ -224,6 +226,8 @@ export const StyledPageArticle = styled.article(({ theme }) => {
|
|
|
224
226
|
position: relative;
|
|
225
227
|
background-color: ${primaryBackground};
|
|
226
228
|
width: 100%;
|
|
229
|
+
height: 100%;
|
|
230
|
+
min-height: 0;
|
|
227
231
|
max-height: 100%;
|
|
228
232
|
overflow-y: auto;
|
|
229
233
|
padding: 0 calc(3 * ${spacing}) calc(2 * ${spacing});
|
|
@@ -244,17 +248,32 @@ export const StyledTemplateRow = styled.div(({ theme }) => {
|
|
|
244
248
|
return css `
|
|
245
249
|
position: relative;
|
|
246
250
|
height: 100%;
|
|
251
|
+
min-height: 0;
|
|
247
252
|
|
|
248
253
|
/* sm or below / "Mobile" (note: 0.0625em = 1px) */
|
|
249
254
|
@media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {
|
|
250
255
|
flex-direction: column;
|
|
251
256
|
height: auto;
|
|
257
|
+
min-height: inherit;
|
|
252
258
|
}
|
|
253
259
|
`;
|
|
254
260
|
});
|
|
255
261
|
StyledTemplateRow.defaultProps = defaultThemeProp;
|
|
256
|
-
export const StyledTemplate = styled.div
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
262
|
+
export const StyledTemplate = styled.div(({ theme }) => {
|
|
263
|
+
const { base: { breakpoints } } = theme;
|
|
264
|
+
const templateHeight = 'calc(100dvh - var(--appshell-offset, 0rem))';
|
|
265
|
+
return css `
|
|
266
|
+
height: 100%;
|
|
267
|
+
min-height: 0;
|
|
268
|
+
|
|
269
|
+
/* md or above / split-scroll layout */
|
|
270
|
+
@media all and (min-width: ${breakpoints.md}) {
|
|
271
|
+
height: ${templateHeight};
|
|
272
|
+
min-height: ${templateHeight};
|
|
273
|
+
max-height: ${templateHeight};
|
|
274
|
+
overflow: hidden;
|
|
275
|
+
}
|
|
276
|
+
`;
|
|
277
|
+
});
|
|
278
|
+
StyledTemplate.defaultProps = defaultThemeProp;
|
|
260
279
|
//# sourceMappingURL=CategorySubPage.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CategorySubPage.styles.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/CategorySubPage.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport { StyledTab } from '../Tabs/Tab';\nimport { calculateFontSize, getHoverColors, readableColor } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\n\nexport const StyledSkipNavigation = styled(Button)(({ theme }) => {\n const {\n base: {\n palette: { 'primary-background': primaryBackground },\n spacing\n }\n } = theme;\n\n return css`\n position: absolute;\n top: ${spacing};\n left: -200vw;\n background-color: ${primaryBackground};\n padding: calc(2 * ${spacing});\n\n &:focus,\n &:active {\n left: ${spacing};\n }\n `;\n});\nStyledSkipNavigation.defaultProps = defaultThemeProp;\n\nexport const StyledNavItem = styled(StyledTab)(({ theme }) => {\n const {\n base: {\n breakpoints,\n palette: { interactive, 'app-background': hoverBase },\n spacing\n }\n } = theme;\n const hoverColors = getHoverColors(hoverBase);\n\n return css`\n height: auto;\n\n a,\n button {\n display: block;\n width: 100%;\n padding: calc(0.8 * ${spacing}) calc(2 * ${spacing});\n }\n\n &[aria-current='page'] {\n a {\n color: ${interactive};\n }\n\n &::after {\n background: ${interactive};\n }\n }\n\n /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n a,\n button {\n text-transform: uppercase;\n padding: calc(1.5 * ${spacing}) 0;\n\n &:hover {\n text-decoration: none;\n }\n }\n }\n\n /* md or above / \"Desktop\" */\n @media all and (min-width: ${breakpoints.md}) {\n padding-left: 0;\n padding-right: 0;\n border: none;\n\n &::after {\n content: none;\n }\n\n a,\n button {\n &:hover,\n &:focus {\n background: ${hoverColors.background};\n color: ${hoverColors.foreground};\n text-decoration: none;\n }\n }\n }\n `;\n});\nStyledNavItem.defaultProps = defaultThemeProp;\n\nexport const StyledNavGroupHeader = styled(Text)(({ theme }) => {\n const {\n base: { spacing, breakpoints }\n } = theme;\n\n return css`\n padding: calc(1.5 * ${spacing}) calc(2 * ${spacing});\n\n /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n display: none;\n }\n `;\n});\nStyledNavGroupHeader.defaultProps = defaultThemeProp;\n\nexport const StyledNavGroupList = styled.ul``;\n\nexport const StyledNavGroup = styled.li(({ theme }) => {\n const {\n base: { breakpoints, spacing }\n } = theme;\n\n return css`\n margin: calc(2 * ${spacing}) 0;\n\n /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n margin: 0;\n }\n `;\n});\nStyledNavGroup.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.ul(({ theme }) => {\n const {\n base: { breakpoints }\n } = theme;\n\n return css`\n &&,\n li {\n list-style-type: none;\n }\n\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n white-space: nowrap;\n\n li,\n > div {\n display: inline-block;\n }\n }\n\n > ${StyledNavGroup}:first-child {\n margin-top: 0;\n }\n `;\n});\nStyledNavList.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav``;\n\nexport const StyledCategoryIconBlock = styled.div(({ theme }) => {\n const {\n base: {\n palette: { 'brand-primary': brandPrimary },\n 'border-radius': baseBorderRadius,\n spacing\n }\n } = theme;\n\n const color = tryCatch(() => readableColor(brandPrimary));\n\n return css`\n background: ${brandPrimary};\n width: 2rem;\n height: 2rem;\n margin-inline-end: ${spacing};\n border-radius: calc(0.5 * ${baseBorderRadius});\n\n svg {\n color: ${color};\n }\n `;\n});\nStyledCategoryIconBlock.defaultProps = defaultThemeProp;\n\nexport const StyledCategoryHeadingRow = styled.div(({ theme }) => {\n const {\n base: { breakpoints, spacing }\n } = theme;\n\n return css`\n padding: 0 calc(2 * ${spacing});\n margin-bottom: calc(2 * ${spacing});\n\n h1:focus-visible {\n outline: transparent;\n box-shadow: ${theme.base.shadow.focus};\n }\n\n /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n margin-bottom: ${spacing};\n }\n `;\n});\nStyledCategoryHeadingRow.defaultProps = defaultThemeProp;\n\nexport const StyledMenuColumn = styled.div(({ theme }) => {\n const {\n base: {\n palette: { 'app-background': appBackground },\n breakpoints,\n spacing\n }\n } = theme;\n\n return css`\n background-color: ${appBackground};\n position: sticky;\n top: 0;\n overflow-y: auto;\n max-height: 100%;\n width: 100%;\n padding: calc(2 * ${spacing}) 0;\n\n /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n position: static;\n padding-bottom: 0;\n }\n\n /* md or above */\n @media all and (min-width: ${breakpoints.md}) {\n max-width: 14.438rem;\n }\n\n /* lg or above */\n @media all and (min-width: ${breakpoints.lg}) {\n max-width: 17.563rem;\n }\n\n /* xl or above */\n @media all and (min-width: ${breakpoints.xl}) {\n max-width: 20.75rem;\n }\n `;\n});\nStyledMenuColumn.defaultProps = defaultThemeProp;\n\nexport const StyledPageTitle = styled.h2(({ theme }) => {\n const {\n base: {\n 'font-weight': { 'semi-bold': fontWeight },\n 'font-size': fontSize,\n 'font-scale': fontScale\n }\n } = theme;\n\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n font-size: ${fontSizes['m' as FontSize]};\n font-weight: ${fontWeight};\n `;\n});\nStyledPageTitle.defaultProps = defaultThemeProp;\n\nexport const StyledPageActionCol = styled.div``;\n\nexport const StyledArticleHeader = styled.header(({ theme }) => {\n const {\n base: {\n palette: { 'primary-background': primaryBackground },\n spacing\n }\n } = theme;\n\n return css`\n position: sticky;\n top: 0;\n z-index: 1;\n background-color: ${primaryBackground};\n padding: calc(2 * ${spacing}) 0 calc(3 * ${spacing});\n `;\n});\nStyledArticleHeader.defaultProps = defaultThemeProp;\n\nexport const StyledPageArticle = styled.article(({ theme }) => {\n const {\n base: {\n breakpoints,\n palette: { 'primary-background': primaryBackground },\n spacing\n }\n } = theme;\n\n return css`\n position: relative;\n background-color: ${primaryBackground};\n width: 100%;\n max-height: 100%;\n overflow-y: auto;\n padding: 0 calc(3 * ${spacing}) calc(2 * ${spacing});\n\n &:focus {\n outline: none;\n }\n\n /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n padding: 0 calc(2 * ${spacing}) calc(2 * ${spacing});\n }\n `;\n});\nStyledPageArticle.defaultProps = defaultThemeProp;\n\nexport const StyledTemplateRow = styled.div(({ theme }) => {\n const {\n base: { breakpoints }\n } = theme;\n\n return css`\n position: relative;\n height: 100%;\n\n /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n flex-direction: column;\n height: auto;\n }\n `;\n});\nStyledTemplateRow.defaultProps = defaultThemeProp;\n\nexport const StyledTemplate = styled.div`\n height: 0;\n min-height: inherit;\n`;\n"]}
|
|
1
|
+
{"version":3,"file":"CategorySubPage.styles.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/CategorySubPage.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport { StyledTab } from '../Tabs/Tab';\nimport { calculateFontSize, getHoverColors, readableColor } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\n\nexport const StyledSkipNavigation = styled(Button)(({ theme }) => {\n const {\n base: {\n palette: { 'primary-background': primaryBackground },\n spacing\n }\n } = theme;\n\n return css`\n position: absolute;\n top: ${spacing};\n left: -200vw;\n background-color: ${primaryBackground};\n padding: calc(2 * ${spacing});\n\n &:focus,\n &:active {\n left: ${spacing};\n }\n `;\n});\nStyledSkipNavigation.defaultProps = defaultThemeProp;\n\nexport const StyledNavItem = styled(StyledTab)(({ theme }) => {\n const {\n base: {\n breakpoints,\n palette: { interactive, 'app-background': hoverBase },\n spacing\n }\n } = theme;\n const hoverColors = getHoverColors(hoverBase);\n\n return css`\n height: auto;\n\n a,\n button {\n display: block;\n width: 100%;\n padding: calc(0.8 * ${spacing}) calc(2 * ${spacing});\n }\n\n &[aria-current='page'] {\n a {\n color: ${interactive};\n }\n\n &::after {\n background: ${interactive};\n }\n }\n\n /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n a,\n button {\n text-transform: uppercase;\n padding: calc(1.5 * ${spacing}) 0;\n\n &:hover {\n text-decoration: none;\n }\n }\n }\n\n /* md or above / \"Desktop\" */\n @media all and (min-width: ${breakpoints.md}) {\n padding-left: 0;\n padding-right: 0;\n border: none;\n\n &::after {\n content: none;\n }\n\n a,\n button {\n &:hover,\n &:focus {\n background: ${hoverColors.background};\n color: ${hoverColors.foreground};\n text-decoration: none;\n }\n }\n }\n `;\n});\nStyledNavItem.defaultProps = defaultThemeProp;\n\nexport const StyledNavGroupHeader = styled(Text)(({ theme }) => {\n const {\n base: { spacing, breakpoints }\n } = theme;\n\n return css`\n padding: calc(1.5 * ${spacing}) calc(2 * ${spacing});\n\n /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n display: none;\n }\n `;\n});\nStyledNavGroupHeader.defaultProps = defaultThemeProp;\n\nexport const StyledNavGroupList = styled.ul``;\n\nexport const StyledNavGroup = styled.li(({ theme }) => {\n const {\n base: { breakpoints, spacing }\n } = theme;\n\n return css`\n margin: calc(2 * ${spacing}) 0;\n\n /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n margin: 0;\n }\n `;\n});\nStyledNavGroup.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.ul(({ theme }) => {\n const {\n base: { breakpoints }\n } = theme;\n\n return css`\n &&,\n li {\n list-style-type: none;\n }\n\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n white-space: nowrap;\n\n li,\n > div {\n display: inline-block;\n }\n }\n\n > ${StyledNavGroup}:first-child {\n margin-top: 0;\n }\n `;\n});\nStyledNavList.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav``;\n\nexport const StyledCategoryIconBlock = styled.div(({ theme }) => {\n const {\n base: {\n palette: { 'brand-primary': brandPrimary },\n 'border-radius': baseBorderRadius,\n spacing\n }\n } = theme;\n\n const color = tryCatch(() => readableColor(brandPrimary));\n\n return css`\n background: ${brandPrimary};\n width: 2rem;\n height: 2rem;\n margin-inline-end: ${spacing};\n border-radius: calc(0.5 * ${baseBorderRadius});\n\n svg {\n color: ${color};\n }\n `;\n});\nStyledCategoryIconBlock.defaultProps = defaultThemeProp;\n\nexport const StyledCategoryHeadingRow = styled.div(({ theme }) => {\n const {\n base: { breakpoints, spacing }\n } = theme;\n\n return css`\n padding: 0 calc(2 * ${spacing});\n margin-bottom: calc(2 * ${spacing});\n\n h1:focus-visible {\n outline: transparent;\n box-shadow: ${theme.base.shadow.focus};\n }\n\n /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n margin-bottom: ${spacing};\n }\n `;\n});\nStyledCategoryHeadingRow.defaultProps = defaultThemeProp;\n\nexport const StyledMenuColumn = styled.div(({ theme }) => {\n const {\n base: {\n palette: { 'app-background': appBackground },\n breakpoints,\n spacing\n }\n } = theme;\n\n return css`\n background-color: ${appBackground};\n position: sticky;\n top: 0;\n height: 100%;\n min-height: 0;\n max-height: 100%;\n overflow-y: auto;\n width: 100%;\n padding: calc(2 * ${spacing}) 0;\n\n /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n position: static;\n padding-bottom: 0;\n }\n\n /* md or above */\n @media all and (min-width: ${breakpoints.md}) {\n max-width: 14.438rem;\n }\n\n /* lg or above */\n @media all and (min-width: ${breakpoints.lg}) {\n max-width: 17.563rem;\n }\n\n /* xl or above */\n @media all and (min-width: ${breakpoints.xl}) {\n max-width: 20.75rem;\n }\n `;\n});\nStyledMenuColumn.defaultProps = defaultThemeProp;\n\nexport const StyledPageTitle = styled.h2(({ theme }) => {\n const {\n base: {\n 'font-weight': { 'semi-bold': fontWeight },\n 'font-size': fontSize,\n 'font-scale': fontScale\n }\n } = theme;\n\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n font-size: ${fontSizes['m' as FontSize]};\n font-weight: ${fontWeight};\n `;\n});\nStyledPageTitle.defaultProps = defaultThemeProp;\n\nexport const StyledPageActionCol = styled.div``;\n\nexport const StyledArticleHeader = styled.header(({ theme }) => {\n const {\n base: {\n palette: { 'primary-background': primaryBackground },\n spacing\n }\n } = theme;\n\n return css`\n position: sticky;\n top: 0;\n z-index: 1;\n background-color: ${primaryBackground};\n padding: calc(2 * ${spacing}) 0 calc(3 * ${spacing});\n `;\n});\nStyledArticleHeader.defaultProps = defaultThemeProp;\n\nexport const StyledPageArticle = styled.article(({ theme }) => {\n const {\n base: {\n breakpoints,\n palette: { 'primary-background': primaryBackground },\n spacing\n }\n } = theme;\n\n return css`\n position: relative;\n background-color: ${primaryBackground};\n width: 100%;\n height: 100%;\n min-height: 0;\n max-height: 100%;\n overflow-y: auto;\n padding: 0 calc(3 * ${spacing}) calc(2 * ${spacing});\n\n &:focus {\n outline: none;\n }\n\n /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n padding: 0 calc(2 * ${spacing}) calc(2 * ${spacing});\n }\n `;\n});\nStyledPageArticle.defaultProps = defaultThemeProp;\n\nexport const StyledTemplateRow = styled.div(({ theme }) => {\n const {\n base: { breakpoints }\n } = theme;\n\n return css`\n position: relative;\n height: 100%;\n min-height: 0;\n\n /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n flex-direction: column;\n height: auto;\n min-height: inherit;\n }\n `;\n});\nStyledTemplateRow.defaultProps = defaultThemeProp;\n\nexport const StyledTemplate = styled.div(({ theme }) => {\n const {\n base: { breakpoints }\n } = theme;\n const templateHeight = 'calc(100dvh - var(--appshell-offset, 0rem))';\n\n return css`\n height: 100%;\n min-height: 0;\n\n /* md or above / split-scroll layout */\n @media all and (min-width: ${breakpoints.md}) {\n height: ${templateHeight};\n min-height: ${templateHeight};\n max-height: ${templateHeight};\n overflow: hidden;\n }\n `;\n});\nStyledTemplate.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
|
-
import type { OmitStrict } from '../../types';
|
|
2
|
+
import type { HeadingTag, OmitStrict } from '../../types';
|
|
3
3
|
import type { SelectionCardProps } from '../SelectionCard/SelectionCard.types';
|
|
4
4
|
import type { RadioButtonProps } from './RadioButton';
|
|
5
5
|
export type RadioButtonCardProps = OmitStrict<SelectionCardProps, 'heading'> & OmitStrict<RadioButtonProps, 'label' | 'variant'> & {
|
|
6
6
|
label: NonNullable<ReactNode>;
|
|
7
|
+
/**
|
|
8
|
+
* Uses specific heading tag for header.
|
|
9
|
+
* @default h4
|
|
10
|
+
*/
|
|
11
|
+
headingTag?: HeadingTag;
|
|
7
12
|
};
|
|
8
13
|
declare const _default: import("react").ForwardRefExoticComponent<Omit<RadioButtonCardProps, "ref"> & import("react").RefAttributes<HTMLInputElement>> & {
|
|
9
14
|
getTestIds: (testIdProp?: import("../../types").TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["control", "content", "image", "label", "actions"]>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtonCard.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButtonCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA8C,SAAS,EAAE,MAAM,OAAO,CAAC;AAGnF,OAAO,KAAK,EAAE,UAAU,EAAc,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"RadioButtonCard.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButtonCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA8C,SAAS,EAAE,MAAM,OAAO,CAAC;AAGnF,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAc,MAAM,aAAa,CAAC;AAGtE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAI/E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGtD,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC,GAC1E,UAAU,CAAC,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAC,GAAG;IAClD,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;;;;AA0FJ,wBAAuE"}
|
|
@@ -8,13 +8,13 @@ import RadioButton from './RadioButton';
|
|
|
8
8
|
import { getRadioButtonCardTestIds } from './RadioButton.test-ids';
|
|
9
9
|
const RadioButtonCard = forwardRef(function RadioButtonCard(prop, ref) {
|
|
10
10
|
const uid = useUID();
|
|
11
|
-
const { testId, id = uid, label, 'aria-label': ariaLabel, disabled, readOnly, onChange, onClick, onKeyDown, status, checked, value, ...restProps } = prop;
|
|
11
|
+
const { testId, id = uid, label, headingTag = 'h4', 'aria-label': ariaLabel, disabled, readOnly, onChange, onClick, onKeyDown, status, checked, value, ...restProps } = prop;
|
|
12
12
|
const cardId = `${id}-card`;
|
|
13
13
|
const labelId = `${id}-label`;
|
|
14
14
|
const testIds = useTestIds(testId, getRadioButtonCardTestIds);
|
|
15
15
|
const inputRef = useConsolidatedRef(ref);
|
|
16
16
|
const containerRef = useRef(null);
|
|
17
|
-
return (_jsx(SelectionCard, { ...restProps, id: cardId, testId: testIds, "aria-labelledby": ariaLabel ? undefined : labelId, "aria-label": ariaLabel, heading: _jsx(RadioButton, { testId: testIds.root, onChange: onChange, onClick: onClick, status: status, checked: checked, value: value, id: id, disabled: disabled, readOnly: readOnly, "aria-labelledby": labelId, label: _jsx(Text, { variant:
|
|
17
|
+
return (_jsx(SelectionCard, { ...restProps, id: cardId, testId: testIds, "aria-labelledby": ariaLabel ? undefined : labelId, "aria-label": ariaLabel, heading: _jsx(RadioButton, { testId: testIds.root, onChange: onChange, onClick: onClick, status: status, checked: checked, value: value, id: id, disabled: disabled, readOnly: readOnly, "aria-labelledby": labelId, label: _jsx(Text, { variant: headingTag, as: 'span', id: labelId, "data-testid": testIds.label, children: label }), variant: 'simple', ref: inputRef, onKeyDown: (e) => {
|
|
18
18
|
if (e.key.includes('arrow'))
|
|
19
19
|
e.preventDefault();
|
|
20
20
|
onKeyDown?.(e);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtonCard.js","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButtonCard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAG3C,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErE,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,aAAa,EAAE,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAElF,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"RadioButtonCard.js","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButtonCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef } from 'react';\nimport type { KeyboardEvent, MouseEvent, PropsWithoutRef, ReactNode } from 'react';\n\nimport { useConsolidatedRef, useTestIds, useUID } from '../../hooks';\nimport type { HeadingTag, OmitStrict, RefElement } from '../../types';\nimport { getActiveElement, withTestIds } from '../../utils';\nimport SelectionCard, { focusableSelector } from '../SelectionCard/SelectionCard';\nimport type { SelectionCardProps } from '../SelectionCard/SelectionCard.types';\nimport Text from '../Text';\n\nimport RadioButton from './RadioButton';\nimport type { RadioButtonProps } from './RadioButton';\nimport { getRadioButtonCardTestIds } from './RadioButton.test-ids';\n\nexport type RadioButtonCardProps = OmitStrict<SelectionCardProps, 'heading'> &\n OmitStrict<RadioButtonProps, 'label' | 'variant'> & {\n label: NonNullable<ReactNode>;\n /**\n * Uses specific heading tag for header.\n * @default h4\n */\n headingTag?: HeadingTag;\n };\n\nconst RadioButtonCard = forwardRef<\n RefElement<RadioButtonProps>,\n PropsWithoutRef<RadioButtonCardProps>\n>(function RadioButtonCard(prop, ref) {\n const uid = useUID();\n const {\n testId,\n id = uid,\n label,\n headingTag = 'h4',\n 'aria-label': ariaLabel,\n disabled,\n readOnly,\n onChange,\n onClick,\n onKeyDown,\n status,\n checked,\n value,\n ...restProps\n } = prop;\n const cardId = `${id}-card`;\n const labelId = `${id}-label`;\n\n const testIds = useTestIds(testId, getRadioButtonCardTestIds);\n const inputRef = useConsolidatedRef(ref);\n const containerRef = useRef<HTMLDivElement>(null);\n\n return (\n <SelectionCard\n {...restProps}\n id={cardId}\n testId={testIds}\n aria-labelledby={ariaLabel ? undefined : labelId}\n aria-label={ariaLabel}\n heading={\n <RadioButton\n testId={testIds.root}\n onChange={onChange}\n onClick={onClick}\n status={status}\n checked={checked}\n value={value}\n id={id}\n disabled={disabled}\n readOnly={readOnly}\n aria-labelledby={labelId}\n label={\n <Text variant={headingTag} as='span' id={labelId} data-testid={testIds.label}>\n {label}\n </Text>\n }\n variant='simple'\n ref={inputRef}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key.includes('arrow')) e.preventDefault();\n onKeyDown?.(e);\n }}\n />\n }\n readOnly={readOnly}\n disabled={disabled}\n onClick={(e: MouseEvent<HTMLDivElement>) => {\n const target = e.target as HTMLElement;\n if (readOnly || !containerRef.current?.contains(target)) return;\n if (\n containerRef.current &&\n [...containerRef.current.querySelectorAll(focusableSelector)].includes(target)\n )\n return;\n e.preventDefault();\n inputRef.current?.click();\n (inputRef.current?.hasAttribute('data-main-focus')\n ? inputRef\n : containerRef\n ).current?.focus();\n }}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === ' ' && containerRef.current === getActiveElement()) {\n e.preventDefault();\n inputRef.current?.click();\n }\n }}\n ref={containerRef}\n />\n );\n});\n\nexport default withTestIds(RadioButtonCard, getRadioButtonCardTestIds);\n"]}
|
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
|
-
import type { OmitStrict } from '../../types';
|
|
2
|
+
import type { HeadingTag, OmitStrict } from '../../types';
|
|
3
3
|
import type { SelectionCardProps } from './SelectionCard.types';
|
|
4
4
|
export interface SelectionCardDisplayProps extends OmitStrict<SelectionCardProps, 'heading' | 'disabled'> {
|
|
5
5
|
label: NonNullable<ReactNode>;
|
|
6
|
+
/**
|
|
7
|
+
* Uses specific heading tag for header.
|
|
8
|
+
* @default h4
|
|
9
|
+
*/
|
|
10
|
+
headingTag?: HeadingTag;
|
|
6
11
|
}
|
|
7
12
|
declare const _default: import("react").ForwardRefExoticComponent<Omit<SelectionCardDisplayProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
|
|
8
13
|
getTestIds: (testIdProp?: import("../../types").TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["content", "image", "label", "actions"]>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectionCardDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCardDisplay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,SAAS,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,KAAK,EAAE,UAAU,EAAc,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"SelectionCardDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCardDisplay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,SAAS,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAc,MAAM,aAAa,CAAC;AAKtE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAIhE,MAAM,WAAW,yBACf,SAAQ,UAAU,CAAC,kBAAkB,EAAE,SAAS,GAAG,UAAU,CAAC;IAC9D,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;;;;AAmCD,wBAA0E"}
|
|
@@ -7,10 +7,10 @@ import { getSelectionCardTestIds } from './SelectionCard.test-ids';
|
|
|
7
7
|
import SelectionCard from './SelectionCard';
|
|
8
8
|
const SelectionCardDisplay = forwardRef(function SelectionCardDisplay(props, ref) {
|
|
9
9
|
const uid = useUID();
|
|
10
|
-
const { testId, id = uid, 'aria-label': ariaLabel, label, ...restProps } = props;
|
|
10
|
+
const { testId, id = uid, 'aria-label': ariaLabel, label, headingTag = 'h4', ...restProps } = props;
|
|
11
11
|
const labelId = `${id}-label`;
|
|
12
12
|
const testIds = useTestIds(testId, getSelectionCardTestIds);
|
|
13
|
-
return (_jsx(SelectionCard, { ...restProps, testId: testIds, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : labelId, heading: _jsx(Text, { variant:
|
|
13
|
+
return (_jsx(SelectionCard, { ...restProps, testId: testIds, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : labelId, heading: _jsx(Text, { variant: headingTag, as: 'span', id: labelId, "data-testid": testIds.label, children: label }), ref: ref }));
|
|
14
14
|
});
|
|
15
15
|
export default withTestIds(SelectionCardDisplay, getSelectionCardTestIds);
|
|
16
16
|
//# sourceMappingURL=SelectionCardDisplay.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectionCardDisplay.js","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCardDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG1C,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,aAAa,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"SelectionCardDisplay.js","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCardDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG1C,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAY5C,MAAM,oBAAoB,GAAG,UAAU,CAGrC,SAAS,oBAAoB,CAAC,KAAK,EAAE,GAAG;IACxC,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EACJ,MAAM,EACN,EAAE,GAAG,GAAG,EACR,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,UAAU,GAAG,IAAI,EACjB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IACV,MAAM,OAAO,GAAG,GAAG,EAAE,QAAQ,CAAC;IAE9B,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC;IAE5D,OAAO,CACL,KAAC,aAAa,OACR,SAAS,EACb,MAAM,EAAE,OAAO,gBACH,SAAS,qBACJ,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EAChD,OAAO,EACL,KAAC,IAAI,IAAC,OAAO,EAAE,UAAU,EAAE,EAAE,EAAC,MAAM,EAAC,EAAE,EAAE,OAAO,iBAAe,OAAO,CAAC,KAAK,YACzE,KAAK,GACD,EAET,GAAG,EAAE,GAAG,GACR,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, ReactNode } from 'react';\n\nimport type { HeadingTag, OmitStrict, RefElement } from '../../types';\nimport { useTestIds, useUID } from '../../hooks';\nimport Text from '../Text';\nimport { withTestIds } from '../../utils';\n\nimport type { SelectionCardProps } from './SelectionCard.types';\nimport { getSelectionCardTestIds } from './SelectionCard.test-ids';\nimport SelectionCard from './SelectionCard';\n\nexport interface SelectionCardDisplayProps\n extends OmitStrict<SelectionCardProps, 'heading' | 'disabled'> {\n label: NonNullable<ReactNode>;\n /**\n * Uses specific heading tag for header.\n * @default h4\n */\n headingTag?: HeadingTag;\n}\n\nconst SelectionCardDisplay = forwardRef<\n RefElement<SelectionCardDisplayProps>,\n PropsWithoutRef<SelectionCardDisplayProps>\n>(function SelectionCardDisplay(props, ref) {\n const uid = useUID();\n const {\n testId,\n id = uid,\n 'aria-label': ariaLabel,\n label,\n headingTag = 'h4',\n ...restProps\n } = props;\n const labelId = `${id}-label`;\n\n const testIds = useTestIds(testId, getSelectionCardTestIds);\n\n return (\n <SelectionCard\n {...restProps}\n testId={testIds}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabel ? undefined : labelId}\n heading={\n <Text variant={headingTag} as='span' id={labelId} data-testid={testIds.label}>\n {label}\n </Text>\n }\n ref={ref}\n />\n );\n});\n\nexport default withTestIds(SelectionCardDisplay, getSelectionCardTestIds);\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-core",
|
|
3
|
-
"version": "9.0.0-build.29.
|
|
3
|
+
"version": "9.0.0-build.29.5",
|
|
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",
|