@pega/cosmos-react-work 3.0.0-dev.20.0 → 3.0.0-dev.21.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.
- package/lib/components/Details/Details.d.ts +15 -1
- package/lib/components/Details/Details.d.ts.map +1 -1
- package/lib/components/Details/Details.js +2 -2
- package/lib/components/Details/Details.js.map +1 -1
- package/lib/components/Details/Details.styles.d.ts +3 -2
- package/lib/components/Details/Details.styles.d.ts.map +1 -1
- package/lib/components/Details/Details.styles.js +34 -11
- package/lib/components/Details/Details.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -3,10 +3,24 @@ import { ForwardProps } from '@pega/cosmos-react-core';
|
|
|
3
3
|
interface DetailsProps {
|
|
4
4
|
highlightedData?: ReactNode[];
|
|
5
5
|
children?: ReactNode;
|
|
6
|
-
|
|
6
|
+
/** Text used as heading of list */
|
|
7
7
|
name?: string;
|
|
8
|
+
/** Number of columns in detail layout
|
|
9
|
+
* @default 1
|
|
10
|
+
*/
|
|
11
|
+
columnCount?: 1 | 2 | 3;
|
|
12
|
+
/** Whether detail list is rendering within another detail list
|
|
13
|
+
* @default false
|
|
14
|
+
*/
|
|
8
15
|
nested?: boolean;
|
|
16
|
+
/** Whether detail list is rendering multiple sub-lists in columns (passed as children)
|
|
17
|
+
* @default false
|
|
18
|
+
*/
|
|
9
19
|
asFlex?: boolean;
|
|
20
|
+
/** Whether to apply `value-comparison` styles to list items
|
|
21
|
+
* @default false
|
|
22
|
+
*/
|
|
23
|
+
valueComparison?: boolean;
|
|
10
24
|
ref?: Ref<HTMLDListElement>;
|
|
11
25
|
}
|
|
12
26
|
declare const Details: FC<DetailsProps & ForwardProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,EAAE,EAEF,SAAS,EACT,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,YAAY,EACb,MAAM,yBAAyB,CAAC;AAYjC,UAAU,YAAY;IACpB,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB,
|
|
1
|
+
{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,EAAE,EAEF,SAAS,EACT,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,YAAY,EACb,MAAM,yBAAyB,CAAC;AAYjC,UAAU,YAAY;IACpB,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,GAAG,YAAY,CAkH5C,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { remToPx } from 'polished';
|
|
|
4
4
|
import { Text, useBreakpoint, useConsolidatedRef, useTheme } from '@pega/cosmos-react-core';
|
|
5
5
|
import DetailsContext from './DetailsContext';
|
|
6
6
|
import { StyledFieldValueGroupLabel, StyledDetails, StyledDetailList, StyledHighlightedDetailList, flexGapProp, chToRem } from './Details.styles';
|
|
7
|
-
const Details = forwardRef(({ highlightedData, children, columnCount = 1,
|
|
7
|
+
const Details = forwardRef(({ highlightedData, children, name, columnCount = 1, nested = false, asFlex = false, valueComparison = false }, ref) => {
|
|
8
8
|
const { longestLabelLength, mobileView, depth, ...context } = useContext(DetailsContext);
|
|
9
9
|
const { base: { 'content-width': { sm } } } = useTheme();
|
|
10
10
|
const isSmallOrAbove = useBreakpoint('sm');
|
|
@@ -53,7 +53,7 @@ const Details = forwardRef(({ highlightedData, children, columnCount = 1, name =
|
|
|
53
53
|
}, [listRef, columnCount]);
|
|
54
54
|
return (_jsx(DetailsContext.Provider, { value: contextValue, children: _jsxs(StyledDetails, { children: [name && (_jsx(StyledFieldValueGroupLabel, { children: _jsx(Text, { variant: `h${Math.min(headingDepth, 6)}`, children: name }) })), highlightedData && (_jsxs(_Fragment, { children: [_jsx(StyledHighlightedDetailList, { as: nested ? 'div' : 'dl', children: highlightedData.map((child, i) => (
|
|
55
55
|
// eslint-disable-next-line react/no-array-index-key
|
|
56
|
-
_jsx(Fragment, { children: child }, i))) }), _jsx("hr", {})] })), _jsx(StyledDetailList, { ref: listRef, as: nested ? 'div' : 'dl', columnCount: columnCount, labelLength: labelLength, stacked: applyMobileView, hasName: !!name, nested: nested, flex: asFlex, wrapped: asFlex ? !flexRow : false, children: children })] }) }));
|
|
56
|
+
_jsx(Fragment, { children: child }, i))) }), _jsx("hr", {})] })), _jsx(StyledDetailList, { ref: listRef, as: nested ? 'div' : 'dl', columnCount: columnCount, labelLength: labelLength, stacked: applyMobileView, hasName: !!name, nested: nested, flex: asFlex, wrapped: asFlex ? !flexRow : false, variant: valueComparison ? 'value-comparison' : undefined, children: children })] }) }));
|
|
57
57
|
});
|
|
58
58
|
export default Details;
|
|
59
59
|
//# sourceMappingURL=Details.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAEV,QAAQ,EAGR,QAAQ,EACR,UAAU,EACV,SAAS,EACT,OAAO,EACR,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,OAAO,EACL,IAAI,EACJ,aAAa,EACb,kBAAkB,EAClB,QAAQ,EAET,MAAM,yBAAyB,CAAC;AAEjC,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EACL,0BAA0B,EAC1B,aAAa,EACb,gBAAgB,EAChB,2BAA2B,EAC3B,WAAW,EACX,OAAO,EACR,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FC,\n Fragment,\n ReactNode,\n Ref,\n useState,\n useContext,\n useEffect,\n useMemo\n} from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n Text,\n useBreakpoint,\n useConsolidatedRef,\n useTheme,\n ForwardProps\n} from '@pega/cosmos-react-core';\n\nimport DetailsContext from './DetailsContext';\nimport {\n StyledFieldValueGroupLabel,\n StyledDetails,\n StyledDetailList,\n StyledHighlightedDetailList,\n flexGapProp,\n chToRem\n} from './Details.styles';\n\ninterface DetailsProps {\n highlightedData?: ReactNode[];\n children?: ReactNode;\n /** Text used as heading of list */\n name?: string;\n /** Number of columns in detail layout\n * @default 1\n */\n columnCount?: 1 | 2 | 3;\n /** Whether detail list is rendering within another detail list\n * @default false\n */\n nested?: boolean;\n /** Whether detail list is rendering multiple sub-lists in columns (passed as children)\n * @default false\n */\n asFlex?: boolean;\n /** Whether to apply `value-comparison` styles to list items\n * @default false\n */\n valueComparison?: boolean;\n ref?: Ref<HTMLDListElement>;\n}\n\nconst Details: FC<DetailsProps & ForwardProps> = forwardRef(\n (\n {\n highlightedData,\n children,\n name,\n columnCount = 1,\n nested = false,\n asFlex = false,\n valueComparison = false\n },\n ref\n ) => {\n const { longestLabelLength, mobileView, depth, ...context } = useContext(DetailsContext);\n const {\n base: {\n 'content-width': { sm }\n }\n } = useTheme();\n const isSmallOrAbove = useBreakpoint('sm');\n const listRef = useConsolidatedRef<HTMLDListElement>(ref);\n const flexRow = useBreakpoint(columnCount > 2 ? 'md' : 'sm', {\n breakpointRef: listRef,\n themeProp: 'content-width'\n });\n const [flexContextMobileView, setFlexContextMobileView] = useState(false);\n\n const labelLength = Math.max(14, Math.min(longestLabelLength ?? 16, 40));\n const headingDepth = depth ?? 1;\n const applyMobileView = asFlex\n ? mobileView || (flexRow && flexContextMobileView) || !isSmallOrAbove\n : mobileView || !isSmallOrAbove;\n\n const contextValue = useMemo(() => {\n return {\n mobileView: applyMobileView,\n depth: name ? headingDepth + 1 : headingDepth,\n longestLabelLength,\n ...context\n };\n }, [applyMobileView, name, headingDepth, longestLabelLength, context]);\n\n /**\n * Mount resize observer to update flex context mobile view & run initial check.\n */\n useEffect(() => {\n const checkBreakpoint = (elementWidth: number) => {\n const minWidthRem = chToRem(parseInt(sm, 10));\n const minWidthPx = parseInt(remToPx(minWidthRem), 10);\n const oneRemInPx = parseInt(remToPx(1), 10);\n const colGapPxAllowance = oneRemInPx * (0.5 * flexGapProp) * (columnCount - 1);\n const mobileViewBreakpoint = minWidthPx * columnCount + colGapPxAllowance;\n\n setFlexContextMobileView(elementWidth < mobileViewBreakpoint);\n };\n const resizeObserver = new ResizeObserver(entries => {\n const containerPxWidth = entries[0].contentRect.width;\n checkBreakpoint(containerPxWidth);\n });\n\n if (listRef.current) {\n checkBreakpoint(listRef.current.offsetWidth);\n resizeObserver.observe(listRef.current);\n }\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [listRef, columnCount]);\n\n return (\n <DetailsContext.Provider value={contextValue}>\n <StyledDetails>\n {name && (\n <StyledFieldValueGroupLabel>\n <Text\n variant={`h${Math.min(headingDepth, 6)}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'}\n >\n {name}\n </Text>\n </StyledFieldValueGroupLabel>\n )}\n\n {highlightedData && (\n <>\n <StyledHighlightedDetailList as={nested ? 'div' : 'dl'}>\n {highlightedData.map((child, i) => (\n // eslint-disable-next-line react/no-array-index-key\n <Fragment key={i}>{child}</Fragment>\n ))}\n </StyledHighlightedDetailList>\n\n <hr />\n </>\n )}\n\n <StyledDetailList\n ref={listRef}\n as={nested ? 'div' : 'dl'}\n columnCount={columnCount}\n labelLength={labelLength}\n stacked={applyMobileView}\n hasName={!!name}\n nested={nested}\n flex={asFlex}\n wrapped={asFlex ? !flexRow : false}\n variant={valueComparison ? 'value-comparison' : undefined}\n >\n {children}\n </StyledDetailList>\n </StyledDetails>\n </DetailsContext.Provider>\n );\n }\n);\n\nexport default Details;\n"]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { DefaultTheme } from 'styled-components';
|
|
2
|
-
|
|
2
|
+
import { StyledFieldValueListProps } from '@pega/cosmos-react-core';
|
|
3
|
+
interface StyledDetailListProps extends StyledFieldValueListProps {
|
|
3
4
|
/** Whether individual list items all have labels stacks on top */
|
|
4
5
|
stacked?: boolean;
|
|
5
6
|
/** Whether the list is a flex row of other lists */
|
|
@@ -41,6 +42,6 @@ export declare const chToRem: (chVal: number) => number;
|
|
|
41
42
|
export declare const StyledFieldValueGroupLabel: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
|
|
42
43
|
export declare const StyledHighlightedDetailList: import("styled-components").StyledComponent<"dl", DefaultTheme, {}, never>;
|
|
43
44
|
export declare const StyledDetails: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
|
|
44
|
-
export declare const StyledDetailList: import("styled-components").StyledComponent<"dl", DefaultTheme, import("@pega/cosmos-react-core").OmitStrict<StyledDetailListProps, "columnCount" | "wrapped"> & Required<Pick<StyledDetailListProps, "columnCount" | "wrapped">>, never>;
|
|
45
|
+
export declare const StyledDetailList: import("styled-components").StyledComponent<"dl", DefaultTheme, StyledFieldValueListProps & import("@pega/cosmos-react-core").OmitStrict<StyledDetailListProps, "columnCount" | "wrapped"> & Required<Pick<StyledDetailListProps, "columnCount" | "wrapped">>, never>;
|
|
45
46
|
export {};
|
|
46
47
|
//# sourceMappingURL=Details.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Details.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"AAAA,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"Details.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"AAAA,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAML,yBAAyB,EAG1B,MAAM,yBAAyB,CAAC;AAEjC,UAAU,qBAAsB,SAAQ,yBAAyB;IAC/D,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,4CAA4C;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB,KAAK,EAAE,YAAY,CAAC;CACrB;AAUD,eAAO,MAAM,eAAe;;;;;;;;;;;;;CAa3B,CAAC;AAEF,eAAO,MAAM,WAAW,MAAM,CAAC;AAE/B,eAAO,MAAM,OAAO,UAAW,MAAM,KAAG,MAEvC,CAAC;AAEF,eAAO,MAAM,0BAA0B,6EAerC,CAAC;AAIH,eAAO,MAAM,2BAA2B,4EA4BtC,CAAC;AAIH,eAAO,MAAM,aAAa,6EAIxB,CAAC;AAkCH,eAAO,MAAM,gBAAgB,uQAwJ5B,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styled, { css } from 'styled-components';
|
|
2
|
-
import { calculateFontSize, defaultThemeProp, StyledFieldValue, StyledStackedFieldValue } from '@pega/cosmos-react-core';
|
|
3
|
-
const
|
|
2
|
+
import { calculateFontSize, defaultThemeProp, StyledFieldValue, StyledStackedFieldValue, StyledFieldValueList } from '@pega/cosmos-react-core';
|
|
3
|
+
const verticalGapSpacingMultiplier = 1;
|
|
4
4
|
// colWidth reduces by 20% as column count increases
|
|
5
5
|
export const colCountChWidth = {
|
|
6
6
|
'1': {
|
|
@@ -26,6 +26,7 @@ export const StyledFieldValueGroupLabel = styled.div(({ theme }) => {
|
|
|
26
26
|
width: 100%;
|
|
27
27
|
grid-column-start: 1;
|
|
28
28
|
grid-column-end: -1;
|
|
29
|
+
margin-block-end: calc(0.5 * ${spacing});
|
|
29
30
|
|
|
30
31
|
&:not(:first-child) {
|
|
31
32
|
margin-block-start: calc(3 * ${spacing});
|
|
@@ -90,15 +91,17 @@ const initialLabelNoMargin = (applyToAllChildren = false) => {
|
|
|
90
91
|
}
|
|
91
92
|
`;
|
|
92
93
|
};
|
|
93
|
-
export const StyledDetailList = styled
|
|
94
|
+
export const StyledDetailList = styled(StyledFieldValueList)(({ stacked, flex, hasName, nested, labelLength, variant, theme, wrapped = false, columnCount = 1 }) => {
|
|
94
95
|
const { base: { spacing } } = theme;
|
|
96
|
+
const isValueComparison = variant === 'value-comparison';
|
|
97
|
+
const containerWidthCh = colCountChWidth[columnCount].containerWidth;
|
|
98
|
+
const containerWidthMinusLabel = `${containerWidthCh - (labelLength ?? 0)}ch`;
|
|
95
99
|
return css `
|
|
96
100
|
/* Top Level Styles */
|
|
97
101
|
${!nested &&
|
|
98
102
|
css `
|
|
99
103
|
${StyledFieldValue} {
|
|
100
104
|
word-break: break-word;
|
|
101
|
-
max-width: ${`${colCountChWidth[1].containerWidth}ch}`};
|
|
102
105
|
overflow: auto;
|
|
103
106
|
}
|
|
104
107
|
|
|
@@ -125,11 +128,31 @@ export const StyledDetailList = styled.dl(({ stacked, flex, hasName, nested, lab
|
|
|
125
128
|
${!flex &&
|
|
126
129
|
css `
|
|
127
130
|
display: grid;
|
|
128
|
-
grid-template-columns: ${
|
|
129
|
-
? `minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr)`
|
|
130
|
-
: 'minmax(0, 1fr)'};
|
|
131
|
+
grid-template-columns: ${`minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr)`};
|
|
131
132
|
column-gap: calc(2 * ${spacing});
|
|
132
|
-
row-gap: calc(${
|
|
133
|
+
row-gap: calc(${verticalGapSpacingMultiplier} * ${spacing});
|
|
134
|
+
|
|
135
|
+
${stacked &&
|
|
136
|
+
css `
|
|
137
|
+
grid-template-columns: minmax(0, 1fr);
|
|
138
|
+
row-gap: 0;
|
|
139
|
+
`}
|
|
140
|
+
|
|
141
|
+
> ${StyledStackedFieldValue} {
|
|
142
|
+
max-width: ${`${containerWidthCh}ch`};
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
> ${StyledFieldValue} {
|
|
146
|
+
max-width: calc(${containerWidthMinusLabel} - calc(2 * ${spacing}));
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
${isValueComparison &&
|
|
150
|
+
css `
|
|
151
|
+
grid-template-columns: auto auto;
|
|
152
|
+
column-gap: 0;
|
|
153
|
+
row-gap: calc(0.5 * ${spacing});
|
|
154
|
+
max-width: ${`${containerWidthCh}ch`};
|
|
155
|
+
`}
|
|
133
156
|
`}
|
|
134
157
|
|
|
135
158
|
/* As Flex Container */
|
|
@@ -140,7 +163,7 @@ export const StyledDetailList = styled.dl(({ stacked, flex, hasName, nested, lab
|
|
|
140
163
|
column-gap: calc(${flexGapProp} * ${spacing});
|
|
141
164
|
align-items: flex-start;
|
|
142
165
|
|
|
143
|
-
max-width: ${`${
|
|
166
|
+
max-width: ${`${containerWidthCh}ch`};
|
|
144
167
|
|
|
145
168
|
${!wrapped &&
|
|
146
169
|
css `
|
|
@@ -158,7 +181,7 @@ export const StyledDetailList = styled.dl(({ stacked, flex, hasName, nested, lab
|
|
|
158
181
|
${!stacked &&
|
|
159
182
|
css `
|
|
160
183
|
> div:not(:first-child) {
|
|
161
|
-
margin-block-start: calc(${
|
|
184
|
+
margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});
|
|
162
185
|
}
|
|
163
186
|
`}}
|
|
164
187
|
`}
|
|
@@ -190,7 +213,7 @@ export const StyledDetailList = styled.dl(({ stacked, flex, hasName, nested, lab
|
|
|
190
213
|
${stacked &&
|
|
191
214
|
css `
|
|
192
215
|
dt {
|
|
193
|
-
margin-block-start: calc(${
|
|
216
|
+
margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});
|
|
194
217
|
}
|
|
195
218
|
`}
|
|
196
219
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Details.styles.js","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, DefaultTheme } from 'styled-components';\n\nimport {\n calculateFontSize,\n defaultThemeProp,\n StyledFieldValue,\n StyledStackedFieldValue,\n FontSize,\n PropsWithDefaults\n} from '@pega/cosmos-react-core';\n\ninterface StyledDetailListProps {\n /** Whether individual list items all have labels stacks on top */\n stacked?: boolean;\n /** Whether the list is a flex row of other lists */\n flex?: boolean;\n /** Whether the list has a name attribute */\n hasName?: boolean;\n /** Whether the list is nested */\n nested?: boolean;\n /** The character length applied to all list labels */\n labelLength?: number;\n /**\n * Whether the list is wrapped to 1 column\n * @default false\n */\n wrapped?: boolean;\n /**\n * Number of columns in the list\n * @default 1\n */\n columnCount?: 1 | 2 | 3;\n theme: DefaultTheme;\n}\n\ntype StyledDetailListPropsWithDefaults = PropsWithDefaults<\n StyledDetailListProps,\n 'wrapped' | 'columnCount'\n>;\n\nconst itemGapSpacingMultiplier = 1;\n\n// colWidth reduces by 20% as column count increases\nexport const colCountChWidth = {\n '1': {\n containerWidth: 100,\n colWidth: 100\n },\n '2': {\n containerWidth: 80 * 2,\n colWidth: 80\n },\n '3': {\n containerWidth: 64 * 3,\n colWidth: 64\n }\n};\n\nexport const flexGapProp = 5.5;\n\nexport const chToRem = (chVal: number): number => {\n return chVal / 2;\n};\n\nexport const StyledFieldValueGroupLabel = styled.div(({ theme }) => {\n const {\n base: { spacing }\n } = theme;\n\n return css`\n width: 100%;\n grid-column-start: 1;\n grid-column-end: -1;\n\n &:not(:first-child) {\n margin-block-start: calc(3 * ${spacing});\n }\n `;\n});\n\nStyledFieldValueGroupLabel.defaultProps = defaultThemeProp;\n\nexport const StyledHighlightedDetailList = styled.dl(({ theme }) => {\n const {\n base: { spacing, palette }\n } = theme;\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(40ch, 1fr));\n column-gap: calc(5 * ${spacing});\n gap: calc(2 * ${spacing});\n align-items: start;\n max-width: ${`${colCountChWidth[3].containerWidth}ch}`};\n padding-block-end: calc(1.5 * ${spacing});\n\n dd {\n font-size: ${fontSize[theme.components.text.h1['font-size'] as FontSize]};\n font-weight: ${theme.components.text.h1['font-weight']};\n }\n\n + hr {\n border-top: unset;\n border-radius: unset;\n border-style: unset;\n border-bottom: 0.0625rem solid ${palette['border-line']};\n margin-block-end: calc(1.5 * ${spacing});\n }\n `;\n});\n\nStyledHighlightedDetailList.defaultProps = defaultThemeProp;\n\nexport const StyledDetails = styled.div(() => {\n return css`\n grid-column: 1 / -1;\n `;\n});\n\nStyledDetails.defaultProps = defaultThemeProp;\n\nconst nthRecursiveContainerSelector = (\n depth: number,\n includeAllImmediateContainers?: boolean\n): string => {\n const firstContainerSelector = '> div:first-child';\n const baseSelector = includeAllImmediateContainers ? '> div' : firstContainerSelector;\n\n return baseSelector.concat(` ${firstContainerSelector}`.repeat(depth));\n};\n\nconst initialLabelNoMargin = (applyToAllChildren = false) => {\n return css`\n ${nthRecursiveContainerSelector(0, applyToAllChildren)},\n ${nthRecursiveContainerSelector(1, applyToAllChildren)},\n ${nthRecursiveContainerSelector(2, applyToAllChildren)},\n ${nthRecursiveContainerSelector(3, applyToAllChildren)},\n ${nthRecursiveContainerSelector(4, applyToAllChildren)},\n ${nthRecursiveContainerSelector(5, applyToAllChildren)},\n ${nthRecursiveContainerSelector(6, applyToAllChildren)},\n ${nthRecursiveContainerSelector(7, applyToAllChildren)},\n ${nthRecursiveContainerSelector(8, applyToAllChildren)},\n ${nthRecursiveContainerSelector(9, applyToAllChildren)},\n ${nthRecursiveContainerSelector(10, applyToAllChildren)} {\n > ${StyledFieldValueGroupLabel}:first-child {\n margin-block-start: 0;\n }\n }\n `;\n};\n\nexport const StyledDetailList = styled.dl<StyledDetailListPropsWithDefaults>(\n ({\n stacked,\n flex,\n hasName,\n nested,\n labelLength,\n wrapped = false,\n columnCount = 1,\n theme\n }): any => {\n const {\n base: { spacing }\n } = theme;\n\n return css`\n /* Top Level Styles */\n ${!nested &&\n css`\n ${StyledFieldValue} {\n word-break: break-word;\n max-width: ${`${colCountChWidth[1].containerWidth}ch}`};\n overflow: auto;\n }\n\n ${StyledFieldValueGroupLabel} {\n margin-block-start: calc(3 * ${spacing});\n }\n\n > ${StyledFieldValueGroupLabel}:nth-child(1) {\n margin-block-start: 0;\n }\n\n ${StyledStackedFieldValue} {\n grid-column: 1 / -1;\n }\n `}\n\n /* Nested List */\n ${nested &&\n css`\n grid-column: 1 / -1;\n `}\n\n /* As Field Grid */\n ${!flex &&\n css`\n display: grid;\n grid-template-columns: ${!stacked\n ? `minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr)`\n : 'minmax(0, 1fr)'};\n column-gap: calc(2 * ${spacing});\n row-gap: calc(${stacked ? 0 : itemGapSpacingMultiplier} * ${spacing});\n `}\n\n /* As Flex Container */\n ${flex &&\n css`\n display: flex;\n flex-direction: ${wrapped ? 'column' : 'row'};\n column-gap: calc(${flexGapProp} * ${spacing});\n align-items: flex-start;\n\n max-width: ${`${chToRem(colCountChWidth[columnCount].containerWidth)}rem`};\n\n ${!wrapped &&\n css`\n > * {\n max-width: ${`${100 / columnCount}%`};\n }\n\n ${hasName && initialLabelNoMargin(true)}\n `}\n\n ${wrapped &&\n css`\n ${hasName && initialLabelNoMargin()}\n\n ${\n !stacked &&\n css`\n > div:not(:first-child) {\n margin-block-start: calc(${itemGapSpacingMultiplier} * ${spacing});\n }\n `\n }}\n `}\n `}\n\n /* Key / Group Label Spacing */\n ${!nested &&\n css`\n > div {\n + dt {\n margin-block-start: calc(3 * ${spacing});\n }\n\n + ${StyledStackedFieldValue} {\n margin-block-start: calc(3 * ${spacing});\n }\n\n ${!stacked &&\n css`\n + dt + dd {\n margin-block-start: calc(3 * ${spacing});\n }\n `}\n }\n\n ${initialLabelNoMargin()}\n `}\n\n ${stacked &&\n css`\n dt {\n margin-block-start: calc(${itemGapSpacingMultiplier} * ${spacing});\n }\n `}\n\n ${StyledFieldValueGroupLabel} + div {\n > ${StyledFieldValueGroupLabel}:first-child {\n margin-block-start: 0;\n }\n\n ${initialLabelNoMargin()}\n }\n `;\n }\n);\n\nStyledDetailList.defaultProps = defaultThemeProp;\n"]}
|
|
1
|
+
{"version":3,"file":"Details.styles.js","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, DefaultTheme } from 'styled-components';\n\nimport {\n calculateFontSize,\n defaultThemeProp,\n StyledFieldValue,\n StyledStackedFieldValue,\n StyledFieldValueList,\n StyledFieldValueListProps,\n FontSize,\n PropsWithDefaults\n} from '@pega/cosmos-react-core';\n\ninterface StyledDetailListProps extends StyledFieldValueListProps {\n /** Whether individual list items all have labels stacks on top */\n stacked?: boolean;\n /** Whether the list is a flex row of other lists */\n flex?: boolean;\n /** Whether the list has a name attribute */\n hasName?: boolean;\n /** Whether the list is nested */\n nested?: boolean;\n /** The character length applied to all list labels */\n labelLength?: number;\n /**\n * Whether the list is wrapped to 1 column\n * @default false\n */\n wrapped?: boolean;\n /**\n * Number of columns in the list\n * @default 1\n */\n columnCount?: 1 | 2 | 3;\n theme: DefaultTheme;\n}\n\ntype StyledDetailListPropsWithDefaults = PropsWithDefaults<\n StyledDetailListProps,\n 'wrapped' | 'columnCount'\n>;\n\nconst verticalGapSpacingMultiplier = 1;\n\n// colWidth reduces by 20% as column count increases\nexport const colCountChWidth = {\n '1': {\n containerWidth: 100,\n colWidth: 100\n },\n '2': {\n containerWidth: 80 * 2,\n colWidth: 80\n },\n '3': {\n containerWidth: 64 * 3,\n colWidth: 64\n }\n};\n\nexport const flexGapProp = 5.5;\n\nexport const chToRem = (chVal: number): number => {\n return chVal / 2;\n};\n\nexport const StyledFieldValueGroupLabel = styled.div(({ theme }) => {\n const {\n base: { spacing }\n } = theme;\n\n return css`\n width: 100%;\n grid-column-start: 1;\n grid-column-end: -1;\n margin-block-end: calc(0.5 * ${spacing});\n\n &:not(:first-child) {\n margin-block-start: calc(3 * ${spacing});\n }\n `;\n});\n\nStyledFieldValueGroupLabel.defaultProps = defaultThemeProp;\n\nexport const StyledHighlightedDetailList = styled.dl(({ theme }) => {\n const {\n base: { spacing, palette }\n } = theme;\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(40ch, 1fr));\n column-gap: calc(5 * ${spacing});\n gap: calc(2 * ${spacing});\n align-items: start;\n max-width: ${`${colCountChWidth[3].containerWidth}ch}`};\n padding-block-end: calc(1.5 * ${spacing});\n\n dd {\n font-size: ${fontSize[theme.components.text.h1['font-size'] as FontSize]};\n font-weight: ${theme.components.text.h1['font-weight']};\n }\n\n + hr {\n border-top: unset;\n border-radius: unset;\n border-style: unset;\n border-bottom: 0.0625rem solid ${palette['border-line']};\n margin-block-end: calc(1.5 * ${spacing});\n }\n `;\n});\n\nStyledHighlightedDetailList.defaultProps = defaultThemeProp;\n\nexport const StyledDetails = styled.div(() => {\n return css`\n grid-column: 1 / -1;\n `;\n});\n\nStyledDetails.defaultProps = defaultThemeProp;\n\nconst nthRecursiveContainerSelector = (\n depth: number,\n includeAllImmediateContainers?: boolean\n): string => {\n const firstContainerSelector = '> div:first-child';\n const baseSelector = includeAllImmediateContainers ? '> div' : firstContainerSelector;\n\n return baseSelector.concat(` ${firstContainerSelector}`.repeat(depth));\n};\n\nconst initialLabelNoMargin = (applyToAllChildren = false) => {\n return css`\n ${nthRecursiveContainerSelector(0, applyToAllChildren)},\n ${nthRecursiveContainerSelector(1, applyToAllChildren)},\n ${nthRecursiveContainerSelector(2, applyToAllChildren)},\n ${nthRecursiveContainerSelector(3, applyToAllChildren)},\n ${nthRecursiveContainerSelector(4, applyToAllChildren)},\n ${nthRecursiveContainerSelector(5, applyToAllChildren)},\n ${nthRecursiveContainerSelector(6, applyToAllChildren)},\n ${nthRecursiveContainerSelector(7, applyToAllChildren)},\n ${nthRecursiveContainerSelector(8, applyToAllChildren)},\n ${nthRecursiveContainerSelector(9, applyToAllChildren)},\n ${nthRecursiveContainerSelector(10, applyToAllChildren)} {\n > ${StyledFieldValueGroupLabel}:first-child {\n margin-block-start: 0;\n }\n }\n `;\n};\n\nexport const StyledDetailList = styled(StyledFieldValueList)<StyledDetailListPropsWithDefaults>(\n ({\n stacked,\n flex,\n hasName,\n nested,\n labelLength,\n variant,\n theme,\n wrapped = false,\n columnCount = 1\n }): any => {\n const {\n base: { spacing }\n } = theme;\n\n const isValueComparison = variant === 'value-comparison';\n const containerWidthCh = colCountChWidth[columnCount].containerWidth;\n const containerWidthMinusLabel = `${containerWidthCh - (labelLength ?? 0)}ch`;\n\n return css`\n /* Top Level Styles */\n ${!nested &&\n css`\n ${StyledFieldValue} {\n word-break: break-word;\n overflow: auto;\n }\n\n ${StyledFieldValueGroupLabel} {\n margin-block-start: calc(3 * ${spacing});\n }\n\n > ${StyledFieldValueGroupLabel}:nth-child(1) {\n margin-block-start: 0;\n }\n\n ${StyledStackedFieldValue} {\n grid-column: 1 / -1;\n }\n `}\n\n /* Nested List */\n ${nested &&\n css`\n grid-column: 1 / -1;\n `}\n\n /* As Field Grid */\n ${!flex &&\n css`\n display: grid;\n grid-template-columns: ${`minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr)`};\n column-gap: calc(2 * ${spacing});\n row-gap: calc(${verticalGapSpacingMultiplier} * ${spacing});\n\n ${stacked &&\n css`\n grid-template-columns: minmax(0, 1fr);\n row-gap: 0;\n `}\n\n > ${StyledStackedFieldValue} {\n max-width: ${`${containerWidthCh}ch`};\n }\n\n > ${StyledFieldValue} {\n max-width: calc(${containerWidthMinusLabel} - calc(2 * ${spacing}));\n }\n\n ${isValueComparison &&\n css`\n grid-template-columns: auto auto;\n column-gap: 0;\n row-gap: calc(0.5 * ${spacing});\n max-width: ${`${containerWidthCh}ch`};\n `}\n `}\n\n /* As Flex Container */\n ${flex &&\n css`\n display: flex;\n flex-direction: ${wrapped ? 'column' : 'row'};\n column-gap: calc(${flexGapProp} * ${spacing});\n align-items: flex-start;\n\n max-width: ${`${containerWidthCh}ch`};\n\n ${!wrapped &&\n css`\n > * {\n max-width: ${`${100 / columnCount}%`};\n }\n\n ${hasName && initialLabelNoMargin(true)}\n `}\n\n ${wrapped &&\n css`\n ${hasName && initialLabelNoMargin()}\n\n ${\n !stacked &&\n css`\n > div:not(:first-child) {\n margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});\n }\n `\n }}\n `}\n `}\n\n /* Key / Group Label Spacing */\n ${!nested &&\n css`\n > div {\n + dt {\n margin-block-start: calc(3 * ${spacing});\n }\n\n + ${StyledStackedFieldValue} {\n margin-block-start: calc(3 * ${spacing});\n }\n\n ${!stacked &&\n css`\n + dt + dd {\n margin-block-start: calc(3 * ${spacing});\n }\n `}\n }\n\n ${initialLabelNoMargin()}\n `}\n\n ${stacked &&\n css`\n dt {\n margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});\n }\n `}\n\n ${StyledFieldValueGroupLabel} + div {\n > ${StyledFieldValueGroupLabel}:first-child {\n margin-block-start: 0;\n }\n\n ${initialLabelNoMargin()}\n }\n `;\n }\n);\n\nStyledDetailList.defaultProps = defaultThemeProp;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-work",
|
|
3
|
-
"version": "3.0.0-dev.
|
|
3
|
+
"version": "3.0.0-dev.21.0",
|
|
4
4
|
"author": "Pegasystems",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"repository": {
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "3.0.0-dev.
|
|
23
|
+
"@pega/cosmos-react-core": "3.0.0-dev.21.0",
|
|
24
24
|
"@types/react": "^16.14.24 || ^17.0.38",
|
|
25
25
|
"@types/react-dom": "^16.9.14 || ^17.0.11",
|
|
26
26
|
"@types/styled-components": "^5.1.7",
|