@pega/cosmos-react-work 4.0.0-dev.2.0 → 4.0.0-dev.21.0

package/lib/components/Details/Details.styles.js

@@ -17,9 +17,6 @@ export const colCountChWidth = {
     }
 };
 export const flexGapProp = 5.5;
-export const chToRem = (chVal) => {
-    return chVal / 2;
-};
 export const StyledFieldValueGroupLabel = styled.div(({ theme }) => {
     const { base: { spacing, animation } } = theme;
     const { rtl } = useDirection();
@@ -28,10 +25,7 @@ export const StyledFieldValueGroupLabel = styled.div(({ theme }) => {
     grid-column-start: 1;
     grid-column-end: -1;
     margin-block-end: calc(0.5 * ${spacing});
-
-    &:not(:first-child) {
-      margin-block-start: calc(3 * ${spacing});
-    }
+    margin-block-start: calc(1.5 * ${spacing});
 
     ${StyledButton} ${StyledIcon} {
       transition: transform ${animation.speed} ${animation.timing.ease};
@@ -51,12 +45,7 @@ export const StyledHighlightedDetailList = styled.dl(({ theme }) => {
     const { base: { spacing, palette } } = theme;
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     return css `
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(40ch, 1fr));
-    column-gap: calc(5 * ${spacing});
-    gap: calc(2 * ${spacing});
-    align-items: start;
-    max-width: ${`${colCountChWidth[3].containerWidth}ch}`};
+    max-width: ${colCountChWidth[3].containerWidth}ch;
     padding-block-end: calc(1.5 * ${spacing});
 
     dd {
@@ -74,40 +63,12 @@ export const StyledHighlightedDetailList = styled.dl(({ theme }) => {
   `;
 });
 StyledHighlightedDetailList.defaultProps = defaultThemeProp;
-export const StyledDetails = styled.div(() => {
-    return css `
-    grid-column: 1 / -1;
-  `;
-});
-StyledDetails.defaultProps = defaultThemeProp;
-const nthRecursiveContainerSelector = (depth, includeAllImmediateContainers) => {
-    const firstContainerSelector = '> div:first-child';
-    const baseSelector = includeAllImmediateContainers ? '> div' : firstContainerSelector;
-    return baseSelector.concat(` ${firstContainerSelector}`.repeat(depth));
-};
-const initialLabelNoMargin = (applyToAllChildren = false) => {
-    return css `
-    ${nthRecursiveContainerSelector(0, applyToAllChildren)},
-    ${nthRecursiveContainerSelector(1, applyToAllChildren)},
-    ${nthRecursiveContainerSelector(2, applyToAllChildren)},
-    ${nthRecursiveContainerSelector(3, applyToAllChildren)},
-    ${nthRecursiveContainerSelector(4, applyToAllChildren)},
-    ${nthRecursiveContainerSelector(5, applyToAllChildren)},
-    ${nthRecursiveContainerSelector(6, applyToAllChildren)},
-    ${nthRecursiveContainerSelector(7, applyToAllChildren)},
-    ${nthRecursiveContainerSelector(8, applyToAllChildren)},
-    ${nthRecursiveContainerSelector(9, applyToAllChildren)},
-    ${nthRecursiveContainerSelector(10, applyToAllChildren)} {
-      > ${StyledFieldValueGroupLabel}:first-child {
-        margin-block-start: 0;
-      }
-    }
-  `;
-};
-export const StyledDetailList = styled(StyledFieldValueList)(({ stacked, flex, hasName, nested, labelLength, variant, theme, wrapped = false, columnCount = 1 }) => {
+export const StyledDetails = styled.div ``;
+export const StyledDetailList = styled(StyledFieldValueList)(({ stacked, flex, nested, labelLength, variant, theme, wrapped = false, columnCount = 1, narrow = false }) => {
     const { base: { spacing } } = theme;
     const isValueComparison = variant === 'value-comparison';
     const containerWidthCh = colCountChWidth[columnCount].containerWidth;
+    const columnWidthCh = colCountChWidth[columnCount].colWidth;
     const containerWidthMinusLabel = `${containerWidthCh - (labelLength ?? 0)}ch`;
     return css `
       /* Top Level Styles */
@@ -118,14 +79,6 @@ export const StyledDetailList = styled(StyledFieldValueList)(({ stacked, flex, h
           overflow: auto;
         }
 
-        ${StyledFieldValueGroupLabel} {
-          margin-block-start: calc(3 * ${spacing});
-        }
-
-        > ${StyledFieldValueGroupLabel}:nth-child(1) {
-          margin-block-start: 0;
-        }
-
         ${StyledStackedFieldValue} {
           grid-column: 1 / -1;
         }
@@ -141,7 +94,7 @@ export const StyledDetailList = styled(StyledFieldValueList)(({ stacked, flex, h
       ${!flex &&
         css `
         display: grid;
-        grid-template-columns: ${`minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr)`};
+        grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr);
         column-gap: calc(2 * ${spacing});
         row-gap: calc(${verticalGapSpacingMultiplier} * ${spacing});
 
@@ -152,11 +105,16 @@ export const StyledDetailList = styled(StyledFieldValueList)(({ stacked, flex, h
         `}
 
         > ${StyledStackedFieldValue} {
-          max-width: ${`${containerWidthCh}ch`};
+          max-width: ${containerWidthCh}ch;
         }
 
         > ${StyledFieldValue} {
           max-width: calc(${containerWidthMinusLabel} - calc(2 * ${spacing}));
+
+          ${!isValueComparison &&
+            css `
+            width: 100%;
+          `}
         }
 
         ${isValueComparison &&
@@ -164,8 +122,18 @@ export const StyledDetailList = styled(StyledFieldValueList)(({ stacked, flex, h
           grid-template-columns: auto auto;
           column-gap: 0;
           row-gap: calc(0.5 * ${spacing});
-          max-width: ${`${containerWidthCh}ch`};
+          max-width: ${containerWidthCh}ch;
+
+          > dd {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-end;
+          }
         `}
+
+        > ${StyledDetails} {
+          grid-column: 1 / -1;
+        }
       `}
 
       /* As Flex Container */
@@ -175,68 +143,37 @@ export const StyledDetailList = styled(StyledFieldValueList)(({ stacked, flex, h
         flex-direction: ${wrapped ? 'column' : 'row'};
         column-gap: calc(${flexGapProp} * ${spacing});
         align-items: flex-start;
-
-        max-width: ${`${containerWidthCh}ch`};
+        max-width: ${containerWidthCh}ch;
 
         ${!wrapped &&
             css `
           > * {
-            max-width: ${`${100 / columnCount}%`};
+            width: 100%;
+            max-width: ${columnWidthCh}%;
           }
-
-          ${hasName && initialLabelNoMargin(true)}
-        `}
-
-        ${wrapped &&
-            css `
-          ${hasName && initialLabelNoMargin()}
-
-          ${!stacked &&
-                css `
-              > div:not(:first-child) {
-                margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});
-              }
-            `}}
         `}
-      `}
-
-      /* Key / Group Label Spacing */
-      ${!nested &&
-        css `
-        > div {
-          + dt {
-            margin-block-start: calc(3 * ${spacing});
-          }
-
-          + ${StyledStackedFieldValue} {
-            margin-block-start: calc(3 * ${spacing});
-          }
 
-          ${!stacked &&
-            css `
-            + dt + dd {
-              margin-block-start: calc(3 * ${spacing});
-            }
-          `}
+        > ${StyledDetails} {
+          width: 100%;
         }
-
-        ${initialLabelNoMargin()}
       `}
 
+      /* Key / Group Label Spacing */
       ${stacked &&
+        !isValueComparison &&
         css `
-        dt {
+        > dt {
           margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});
         }
       `}
 
-      ${StyledFieldValueGroupLabel} + div {
-        > ${StyledFieldValueGroupLabel}:first-child {
-          margin-block-start: 0;
-        }
-
-        ${initialLabelNoMargin()}
-      }
+      /* Responsive behavior */
+      ${narrow &&
+        !stacked &&
+        !isValueComparison &&
+        css `
+        grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(50%, 1fr);
+      `}
     `;
 });
 StyledDetailList.defaultProps = defaultThemeProp;

package/lib/components/Details/Details.styles.js.map

@@ -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  StyledFieldValueList,\n  StyledFieldValueListProps,\n  StyledIcon,\n  FontSize,\n  PropsWithDefaults,\n  useDirection,\n  StyledButton\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, animation }\n  } = theme;\n  const { rtl } = useDirection();\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    ${StyledButton} ${StyledIcon} {\n      transition: transform ${animation.speed} ${animation.timing.ease};\n    }\n\n    ${StyledButton}[aria-expanded='true'] ${StyledIcon} {\n      transform: rotate(90deg);\n    }\n\n    ${StyledButton}[aria-expanded='false'] ${StyledIcon} {\n      transform: rotate(${rtl ? 180 : 0}deg);\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"]}
+{"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  StyledIcon,\n  FontSize,\n  PropsWithDefaults,\n  useDirection,\n  StyledButton\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 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  /**\n   * Whether to apply narrow list styles\n   * @default false\n   */\n  narrow?: boolean;\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 StyledFieldValueGroupLabel = styled.div(({ theme }) => {\n  const {\n    base: { spacing, animation }\n  } = theme;\n  const { rtl } = useDirection();\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    margin-block-start: calc(1.5 * ${spacing});\n\n    ${StyledButton} ${StyledIcon} {\n      transition: transform ${animation.speed} ${animation.timing.ease};\n    }\n\n    ${StyledButton}[aria-expanded='true'] ${StyledIcon} {\n      transform: rotate(90deg);\n    }\n\n    ${StyledButton}[aria-expanded='false'] ${StyledIcon} {\n      transform: rotate(${rtl ? 180 : 0}deg);\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    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\nexport const StyledDetailList = styled(StyledFieldValueList)<StyledDetailListPropsWithDefaults>(\n  ({\n    stacked,\n    flex,\n    nested,\n    labelLength,\n    variant,\n    theme,\n    wrapped = false,\n    columnCount = 1,\n    narrow = false\n  }): any => {\n    const {\n      base: { spacing }\n    } = theme;\n\n    const isValueComparison = variant === 'value-comparison';\n    const containerWidthCh = colCountChWidth[columnCount].containerWidth;\n    const columnWidthCh = colCountChWidth[columnCount].colWidth;\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        ${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          ${!isValueComparison &&\n          css`\n            width: 100%;\n          `}\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          > dd {\n            display: flex;\n            flex-direction: column;\n            justify-content: flex-end;\n          }\n        `}\n\n        > ${StyledDetails} {\n          grid-column: 1 / -1;\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        max-width: ${containerWidthCh}ch;\n\n        ${!wrapped &&\n        css`\n          > * {\n            width: 100%;\n            max-width: ${columnWidthCh}%;\n          }\n        `}\n\n        > ${StyledDetails} {\n          width: 100%;\n        }\n      `}\n\n      /* Key / Group Label Spacing */\n      ${stacked &&\n      !isValueComparison &&\n      css`\n        > dt {\n          margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});\n        }\n      `}\n\n      /* Responsive behavior */\n      ${narrow &&\n      !stacked &&\n      !isValueComparison &&\n      css`\n        grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(50%, 1fr);\n      `}\n    `;\n  }\n);\n\nStyledDetailList.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Glimpse/Glimpse.d.ts

@@ -1,20 +1,20 @@
-import { FunctionComponent, Ref } from 'react';
-import { BaseProps, FieldValueListProps, ForwardProps, MenuItemProps, NoChildrenProp } from '@pega/cosmos-react-core';
-export interface GlimpseProps extends BaseProps, NoChildrenProp {
+import { FunctionComponent, MouseEventHandler, Ref } from 'react';
+import { BaseProps, ButtonProps, FieldValueListProps, ForwardProps, InfoDialogProps, NoChildrenProp, OmitStrict } from '@pega/cosmos-react-core';
+type InfoDialogSummaryHeading = Extract<InfoDialogProps['heading'], object>;
+export interface GlimpseProps extends BaseProps, OmitStrict<InfoDialogProps, 'children'>, NoChildrenProp {
     /** The unique id for the operator. */
     id: string;
-    /** The primary piece of item information as a string. */
-    primary: MenuItemProps['primary'];
-    /** Secondary info about an item. Useful for additional metadata or context. */
-    secondary?: MenuItemProps['secondary'];
-    /** A visual to assist identifying an item. e.g. Avatar or Icon. */
-    visual?: MenuItemProps['visual'];
+    /** Primary, secondary and avatar for the glimpse. */
+    heading?: InfoDialogSummaryHeading;
     /** The set of field values to render in the list. */
     fields?: FieldValueListProps['fields'];
     /** Ref for the wrapping element. */
     ref?: Ref<HTMLDivElement>;
+    /** Callback for click event on View profile button. Passing this will render View profile button */
+    onViewProfile?: MouseEventHandler<HTMLButtonElement>;
+    /** A URL location to navigate to. Passing an href will render View profile button as a link. */
+    href?: ButtonProps['href'];
 }
-export declare const StyledGlimpse: import("styled-components").StyledComponent<FunctionComponent<import("@pega/cosmos-react-core").CardProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 declare const Glimpse: FunctionComponent<GlimpseProps & ForwardProps>;
 export default Glimpse;
 //# sourceMappingURL=Glimpse.d.ts.map

package/lib/components/Glimpse/Glimpse.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Glimpse.d.ts","sourceRoot":"","sources":["../../../src/components/Glimpse/Glimpse.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EACL,SAAS,EAMT,mBAAmB,EACnB,YAAY,EACZ,aAAa,EAEb,cAAc,EAGf,MAAM,yBAAyB,CAAC;AAGjC,MAAM,WAAW,YAAa,SAAQ,SAAS,EAAE,cAAc;IAC7D,sCAAsC;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,yDAAyD;IACzD,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAClC,+EAA+E;IAC/E,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,mEAAmE;IACnE,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,qDAAqD;IACrD,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,iLAUxB,CAAC;AAIH,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAsB3D,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Glimpse.d.ts","sourceRoot":"","sources":["../../../src/components/Glimpse/Glimpse.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,iBAAiB,EAEjB,GAAG,EACJ,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,SAAS,EAET,WAAW,EAEX,mBAAmB,EAEnB,YAAY,EAEZ,eAAe,EACf,cAAc,EACd,UAAU,EAEX,MAAM,yBAAyB,CAAC;AAEjC,KAAK,wBAAwB,GAAG,OAAO,CAAC,eAAe,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;AAE5E,MAAM,WAAW,YACf,SAAQ,SAAS,EACf,UAAU,CAAC,eAAe,EAAE,UAAU,CAAC,EACvC,cAAc;IAChB,sCAAsC;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,qDAAqD;IACrD,OAAO,CAAC,EAAE,wBAAwB,CAAC;IACnC,qDAAqD;IACrD,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,oGAAoG;IACpG,aAAa,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD,gGAAgG;IAChG,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC5B;AAED,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CA2C3D,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/Glimpse/Glimpse.js

@@ -1,22 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { Card, CardContent, CardHeader, defaultThemeProp, FieldValueList, MetaList, StyledFieldValueList, SummaryItem } from '@pega/cosmos-react-core';
-import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
-export const StyledGlimpse = styled(Card)(({ theme }) => {
-    return css `
-    ${StyledCardContent} {
-      border-top: solid 0.0625rem ${theme.base.palette['border-line']};
-    }
-
-    ${StyledFieldValueList} {
-      padding-top: calc(1.5 * ${theme.base.spacing});
-    }
-  `;
-});
-StyledGlimpse.defaultProps = defaultThemeProp;
-const Glimpse = forwardRef(({ primary, visual, secondary = [], fields = [] }, ref) => {
-    return (_jsxs(StyledGlimpse, { ref: ref, children: [_jsx(CardHeader, { children: _jsx(SummaryItem, { primary: primary, secondary: _jsx(MetaList, { items: secondary }), visual: visual }) }), !!fields.length && (_jsx(CardContent, { children: _jsx(FieldValueList, { fields: fields }) }))] }));
+import { Button, FieldValueList, Flex, InfoDialog, useI18n } from '@pega/cosmos-react-core';
+const Glimpse = forwardRef(({ heading, fields = [], target, onDismiss, href, progress, onViewProfile, ...restProps }, ref) => {
+    const t = useI18n();
+    return (_jsx(InfoDialog, { ...restProps, target: target, heading: heading, progress: progress, onDismiss: onDismiss, ref: ref, children: _jsxs(Flex, { container: { direction: 'column', alignItems: 'start', gap: 2 }, children: [fields.length > 0 && _jsx(FieldValueList, { fields: fields }), (onViewProfile || href) && (_jsx(Button, { href: href, onClick: (e) => {
+                        onViewProfile?.(e);
+                        onDismiss();
+                    }, children: t('view_profile') }))] }) }));
 });
 export default Glimpse;
 //# sourceMappingURL=Glimpse.js.map

package/lib/components/Glimpse/Glimpse.js.map

@@ -1 +1 @@
-{"version":3,"file":"Glimpse.js","sourceRoot":"","sources":["../../../src/components/Glimpse/Glimpse.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAEL,IAAI,EACJ,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,cAAc,EAId,QAAQ,EAER,oBAAoB,EACpB,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAiB5F,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,OAAO,GAAG,CAAA;MACN,iBAAiB;oCACa,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;MAG/D,oBAAoB;gCACM,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,OAAO,GAAmD,UAAU,CACxE,CACE,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAiC,EAC/E,GAAwB,EACxB,EAAE;IACF,OAAO,CACL,MAAC,aAAa,IAAC,GAAG,EAAE,GAAG,aACrB,KAAC,UAAU,cACT,KAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,KAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,GAAI,EACzC,MAAM,EAAE,MAAM,GACd,GACS,EACZ,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,CAClB,KAAC,WAAW,cACV,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,GAAI,GACtB,CACf,IACa,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  BaseProps,\n  Card,\n  CardContent,\n  CardHeader,\n  defaultThemeProp,\n  FieldValueList,\n  FieldValueListProps,\n  ForwardProps,\n  MenuItemProps,\n  MetaList,\n  NoChildrenProp,\n  StyledFieldValueList,\n  SummaryItem\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nexport interface GlimpseProps extends BaseProps, NoChildrenProp {\n  /** The unique id for the operator. */\n  id: string;\n  /** The primary piece of item information as a string. */\n  primary: MenuItemProps['primary'];\n  /** Secondary info about an item. Useful for additional metadata or context. */\n  secondary?: MenuItemProps['secondary'];\n  /** A visual to assist identifying an item. e.g. Avatar or Icon. */\n  visual?: MenuItemProps['visual'];\n  /** The set of field values to render in the list. */\n  fields?: FieldValueListProps['fields'];\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledGlimpse = styled(Card)(({ theme }) => {\n  return css`\n    ${StyledCardContent} {\n      border-top: solid 0.0625rem ${theme.base.palette['border-line']};\n    }\n\n    ${StyledFieldValueList} {\n      padding-top: calc(1.5 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledGlimpse.defaultProps = defaultThemeProp;\n\nconst Glimpse: FunctionComponent<GlimpseProps & ForwardProps> = forwardRef(\n  (\n    { primary, visual, secondary = [], fields = [] }: PropsWithoutRef<GlimpseProps>,\n    ref: GlimpseProps['ref']\n  ) => {\n    return (\n      <StyledGlimpse ref={ref}>\n        <CardHeader>\n          <SummaryItem\n            primary={primary}\n            secondary={<MetaList items={secondary} />}\n            visual={visual}\n          />\n        </CardHeader>\n        {!!fields.length && (\n          <CardContent>\n            <FieldValueList fields={fields} />\n          </CardContent>\n        )}\n      </StyledGlimpse>\n    );\n  }\n);\n\nexport default Glimpse;\n"]}
+{"version":3,"file":"Glimpse.js","sourceRoot":"","sources":["../../../src/components/Glimpse/Glimpse.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAMX,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,MAAM,EAEN,cAAc,EAEd,IAAI,EAEJ,UAAU,EAIV,OAAO,EACR,MAAM,yBAAyB,CAAC;AAsBjC,MAAM,OAAO,GAAmD,UAAU,CACxE,CACE,EACE,OAAO,EACP,MAAM,GAAG,EAAE,EACX,MAAM,EACN,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,GAAG,SAAS,EACkB,EAChC,GAAwB,EACxB,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,UAAU,OACL,SAAS,EACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,YAER,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,aAClE,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,GAAI,EAEvD,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,CAC1B,KAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;wBAC5C,aAAa,EAAE,CAAC,CAAC,CAAC,CAAC;wBACnB,SAAS,EAAE,CAAC;oBACd,CAAC,YAEA,CAAC,CAAC,cAAc,CAAC,GACX,CACV,IACI,GACI,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  MouseEvent,\n  MouseEventHandler,\n  PropsWithoutRef,\n  Ref\n} from 'react';\n\nimport {\n  BaseProps,\n  Button,\n  ButtonProps,\n  FieldValueList,\n  FieldValueListProps,\n  Flex,\n  ForwardProps,\n  InfoDialog,\n  InfoDialogProps,\n  NoChildrenProp,\n  OmitStrict,\n  useI18n\n} from '@pega/cosmos-react-core';\n\ntype InfoDialogSummaryHeading = Extract<InfoDialogProps['heading'], object>;\n\nexport interface GlimpseProps\n  extends BaseProps,\n    OmitStrict<InfoDialogProps, 'children'>,\n    NoChildrenProp {\n  /** The unique id for the operator. */\n  id: string;\n  /** Primary, secondary and avatar for the glimpse. */\n  heading?: InfoDialogSummaryHeading;\n  /** The set of field values to render in the list. */\n  fields?: FieldValueListProps['fields'];\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n  /** Callback for click event on View profile button. Passing this will render View profile button */\n  onViewProfile?: MouseEventHandler<HTMLButtonElement>;\n  /** A URL location to navigate to. Passing an href will render View profile button as a link. */\n  href?: ButtonProps['href'];\n}\n\nconst Glimpse: FunctionComponent<GlimpseProps & ForwardProps> = forwardRef(\n  (\n    {\n      heading,\n      fields = [],\n      target,\n      onDismiss,\n      href,\n      progress,\n      onViewProfile,\n      ...restProps\n    }: PropsWithoutRef<GlimpseProps>,\n    ref: GlimpseProps['ref']\n  ) => {\n    const t = useI18n();\n\n    return (\n      <InfoDialog\n        {...restProps}\n        target={target}\n        heading={heading}\n        progress={progress}\n        onDismiss={onDismiss}\n        ref={ref}\n      >\n        <Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>\n          {fields.length > 0 && <FieldValueList fields={fields} />}\n\n          {(onViewProfile || href) && (\n            <Button\n              href={href}\n              onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                onViewProfile?.(e);\n                onDismiss();\n              }}\n            >\n              {t('view_profile')}\n            </Button>\n          )}\n        </Flex>\n      </InfoDialog>\n    );\n  }\n);\n\nexport default Glimpse;\n"]}

package/lib/components/Glimpse/index.d.ts

@@ -1,3 +1,3 @@
 export { default } from './Glimpse';
-export { GlimpseProps, StyledGlimpse } from './Glimpse';
+export type { GlimpseProps } from './Glimpse';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Glimpse/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Glimpse/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Glimpse/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}

package/lib/components/Glimpse/index.js

@@ -1,3 +1,2 @@
 export { default } from './Glimpse';
-export { StyledGlimpse } from './Glimpse';
 //# sourceMappingURL=index.js.map

package/lib/components/Glimpse/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Glimpse/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAgB,aAAa,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { default } from './Glimpse';\nexport { GlimpseProps, StyledGlimpse } from './Glimpse';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Glimpse/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { default } from './Glimpse';\nexport type { GlimpseProps } from './Glimpse';\n"]}

package/lib/components/IntelligentGuidance/IntelligentGuidance.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IntelligentGuidance.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAQjC,OAAO,KAAK,wBAAwB,MAAM,6BAA6B,CAAC;AAIxE,QAAA,MAAM,mBAAmB,EAAE,iBAAiB,CAAC,wBAAwB,GAAG,YAAY,CAyHnF,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"IntelligentGuidance.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,YAAY,EAYb,MAAM,yBAAyB,CAAC;AAQjC,OAAO,KAAK,wBAAwB,MAAM,6BAA6B,CAAC;AAExE,QAAA,MAAM,mBAAmB,EAAE,iBAAiB,CAAC,wBAAwB,GAAG,YAAY,CA8InF,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/components/IntelligentGuidance/IntelligentGuidance.js

@@ -1,35 +1,23 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { Icon, registerIcon, useI18n, Count, useBreakpoint, usePrevious, useAfterInitialEffect } from '@pega/cosmos-react-core';
-import * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';
-import { StyledIntelligentGuidanceList, StyledIntelligentGuidance, StyledIntelligentGuidanceButton } from './IntelligentGuidance.styles';
-registerIcon(polarisSolidIcon);
-const IntelligentGuidance = forwardRef(({ items, heading, ...restProps }, ref) => {
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
+import { Icon, useI18n, useAfterInitialEffect, Text, Tabs, CardHeader, TabPanel, Flex, Count, Actions } from '@pega/cosmos-react-core';
+import { StyledIntelligentGuidanceList, StyledIntelligentGuidance, StyledNew, StyledBorderLine } from './IntelligentGuidance.styles';
+const IntelligentGuidance = forwardRef(({ items, previousItems, heading, isCollapsed, onExpandCollapse, ...restProps }, ref) => {
     const t = useI18n();
-    const isMediumOrAbove = useBreakpoint('md');
-    const [isCollapsed, setIsCollapsed] = useState(true);
-    const previousItems = usePrevious(items);
-    const summaryListRef = useRef(null);
+    const headerRef = useRef(null);
     const toggleButtonRef = useRef(null);
-    useEffect(() => {
-        const previousItemsCount = previousItems?.length || 0;
-        if (previousItemsCount < items.length) {
-            setIsCollapsed(false);
-        }
-        else if (previousItemsCount && !items.length) {
-            setIsCollapsed(true);
-        }
-    }, [previousItems, items]);
-    const listItems = items.map(item => {
+    const [currentTab, setCurrentTab] = useState('current');
+    const listItems = (currentTab === 'current' ? items : previousItems ?? []).map(item => {
         return {
             id: item.id,
             visual: _jsx(Icon, { name: item.icon }),
-            primary: item.label,
-            secondary: item.type,
+            primary: (_jsxs(_Fragment, { children: [item.label, item.new && (_jsxs(_Fragment, { children: [_jsx(StyledNew, { children: t('new') }), _jsx(StyledBorderLine, {})] }))] })),
+            secondary: _jsx(Text, { variant: 'secondary', children: item.type }),
+            contextualLabel: item.label,
             actions: item.onDismiss
                 ? [
                     {
-                        text: t('dismiss_label_a11y', [item.label]),
+                        text: t('dismiss'),
                         id: item.id,
                         icon: 'times',
                         onClick: (id, e) => {
@@ -53,10 +41,10 @@ const IntelligentGuidance = forwardRef(({ items, heading, ...restProps }, ref) =
     });
     const [headerHeight, setHeaderHeight] = useState(0);
     useLayoutEffect(() => {
-        if (summaryListRef.current) {
-            setHeaderHeight(summaryListRef.current.querySelector('header')?.offsetHeight || 0);
+        if (headerRef.current) {
+            setHeaderHeight(headerRef.current?.offsetHeight || 0);
         }
-    }, [summaryListRef.current]);
+    }, [headerRef.current]);
     // FIXME: This is a hack to get the Tooltip to reset its position when the list is toggled.
     useAfterInitialEffect(() => {
         if (toggleButtonRef.current && toggleButtonRef.current === document.activeElement) {
@@ -66,22 +54,30 @@ const IntelligentGuidance = forwardRef(({ items, heading, ...restProps }, ref) =
             }, 1000);
         }
     }, [isCollapsed]);
-    return (_jsx(StyledIntelligentGuidance, { ...restProps, ref: ref, role: 'region', "aria-live": 'polite', "aria-relevant": 'all', isCollapsed: isCollapsed, hasItems: !!items.length, children: isMediumOrAbove || !isCollapsed ? (_jsx(StyledIntelligentGuidanceList, { ref: summaryListRef, icon: 'polaris-solid', name: heading, count: items.length, items: listItems, actions: [
-                {
-                    text: t(isCollapsed ? 'expand' : 'collapse'),
-                    id: 'IntelligentGuidanceButton',
-                    icon: 'caret-down',
-                    'aria-label': isCollapsed
-                        ? t('expand_noun', [heading])
-                        : t('collapse_noun', [heading]),
-                    onClick() {
-                        setIsCollapsed(prevState => !prevState);
-                    },
-                    ref: toggleButtonRef
-                }
-            ], EmptyStateText: t('no_recommendations'), style: { '--headerHeight': `${headerHeight}px` } })) : (_jsxs(StyledIntelligentGuidanceButton, { variant: 'simple', "aria-label": isCollapsed ? t('expand_noun', [heading]) : t('collapse_noun', [heading]), icon: true, onClick: () => {
-                setIsCollapsed(false);
-            }, children: [_jsx(Icon, { name: 'polaris-solid' }), _jsx(Count, { children: items.length })] })) }));
+    const intelligentGuidanceList = (_jsx(StyledIntelligentGuidanceList, { items: listItems, noItemsText: t('no_recommendations') }));
+    return (_jsxs(StyledIntelligentGuidance, { ...restProps, ref: ref, role: 'region', "aria-live": 'polite', "aria-relevant": 'all', isCollapsed: isCollapsed, hasItems: !!items.length, style: { '--headerHeight': `${headerHeight}px` }, children: [_jsxs(CardHeader, { ref: headerRef, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Text, { variant: 'h2', children: heading }), _jsx(Count, { children: items.length + (previousItems?.length ?? 0) })] }), _jsx(Actions, { items: [
+                            {
+                                text: t(isCollapsed ? 'expand' : 'collapse'),
+                                id: 'IntelligentGuidanceButton',
+                                icon: 'caret-down',
+                                'aria-label': isCollapsed
+                                    ? t('expand_noun', [heading])
+                                    : t('collapse_noun', [heading]),
+                                onClick: onExpandCollapse,
+                                ref: toggleButtonRef
+                            }
+                        ] })] }), previousItems ? (_jsxs(_Fragment, { children: [_jsx(Tabs, { tabs: [
+                            {
+                                id: 'current',
+                                name: t('current'),
+                                count: items.filter(item => item.new).length || undefined
+                            },
+                            {
+                                id: 'previous',
+                                name: t('previous'),
+                                count: previousItems.filter(item => item.new).length || undefined
+                            }
+                        ], currentTabId: currentTab, onTabClick: setCurrentTab }), _jsx(TabPanel, { tabId: currentTab, children: intelligentGuidanceList })] })) : (intelligentGuidanceList)] }));
 });
 export default IntelligentGuidance;
 //# sourceMappingURL=IntelligentGuidance.js.map

package/lib/components/IntelligentGuidance/IntelligentGuidance.js.map

@@ -1 +1 @@
-{"version":3,"file":"IntelligentGuidance.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  KeyboardEvent,\n  PropsWithoutRef,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState\n} from 'react';\n\nimport {\n  ForwardProps,\n  Icon,\n  registerIcon,\n  SummaryListItem,\n  useI18n,\n  Count,\n  useBreakpoint,\n  usePrevious,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';\n\nimport {\n  StyledIntelligentGuidanceList,\n  StyledIntelligentGuidance,\n  StyledIntelligentGuidanceButton\n} from './IntelligentGuidance.styles';\nimport type IntelligentGuidanceProps from './IntelligentGuidance.types';\n\nregisterIcon(polarisSolidIcon);\n\nconst IntelligentGuidance: FunctionComponent<IntelligentGuidanceProps & ForwardProps> = forwardRef(\n  (\n    { items, heading, ...restProps }: PropsWithoutRef<IntelligentGuidanceProps>,\n    ref: IntelligentGuidanceProps['ref']\n  ) => {\n    const t = useI18n();\n    const isMediumOrAbove = useBreakpoint('md');\n    const [isCollapsed, setIsCollapsed] = useState(true);\n    const previousItems = usePrevious(items);\n    const summaryListRef = useRef<HTMLElement>(null);\n    const toggleButtonRef = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => {\n      const previousItemsCount = previousItems?.length || 0;\n      if (previousItemsCount < items.length) {\n        setIsCollapsed(false);\n      } else if (previousItemsCount && !items.length) {\n        setIsCollapsed(true);\n      }\n    }, [previousItems, items]);\n\n    const listItems: SummaryListItem[] = items.map(item => {\n      return {\n        id: item.id,\n        visual: <Icon name={item.icon} />,\n        primary: item.label,\n        secondary: item.type,\n        actions: item.onDismiss\n          ? [\n              {\n                text: t('dismiss_label_a11y', [item.label]),\n                id: item.id,\n                icon: 'times',\n                onClick: (id, e) => {\n                  e.stopPropagation();\n                  item.onDismiss?.(id, e);\n                }\n              }\n            ]\n          : undefined,\n        container: { colGap: 1 },\n        role: 'button',\n        tabIndex: 0,\n        'aria-label': t('continue_label_a11y', [item.label]),\n        onClick: item.onClick,\n        onKeyDown: (e: KeyboardEvent) => {\n          if (e.key === 'Enter') {\n            item.onClick(e);\n          }\n        }\n      };\n    });\n\n    const [headerHeight, setHeaderHeight] = useState(0);\n\n    useLayoutEffect(() => {\n      if (summaryListRef.current) {\n        setHeaderHeight(summaryListRef.current.querySelector('header')?.offsetHeight || 0);\n      }\n    }, [summaryListRef.current]);\n\n    // FIXME: This is a hack to get the Tooltip to reset its position when the list is toggled.\n    useAfterInitialEffect(() => {\n      if (toggleButtonRef.current && toggleButtonRef.current === document.activeElement) {\n        toggleButtonRef.current.blur();\n        setTimeout(() => {\n          toggleButtonRef.current?.focus();\n        }, 1000);\n      }\n    }, [isCollapsed]);\n\n    return (\n      <StyledIntelligentGuidance\n        {...restProps}\n        ref={ref}\n        role='region'\n        aria-live='polite'\n        aria-relevant='all'\n        isCollapsed={isCollapsed}\n        hasItems={!!items.length}\n      >\n        {isMediumOrAbove || !isCollapsed ? (\n          <StyledIntelligentGuidanceList\n            ref={summaryListRef}\n            icon='polaris-solid'\n            name={heading}\n            count={items.length}\n            items={listItems}\n            actions={[\n              {\n                text: t(isCollapsed ? 'expand' : 'collapse'),\n                id: 'IntelligentGuidanceButton',\n                icon: 'caret-down',\n                'aria-label': isCollapsed\n                  ? t('expand_noun', [heading])\n                  : t('collapse_noun', [heading]),\n                onClick() {\n                  setIsCollapsed(prevState => !prevState);\n                },\n                ref: toggleButtonRef\n              }\n            ]}\n            EmptyStateText={t('no_recommendations')}\n            style={{ '--headerHeight': `${headerHeight}px` }}\n          />\n        ) : (\n          <StyledIntelligentGuidanceButton\n            variant='simple'\n            aria-label={isCollapsed ? t('expand_noun', [heading]) : t('collapse_noun', [heading])}\n            icon\n            onClick={() => {\n              setIsCollapsed(false);\n            }}\n          >\n            <Icon name='polaris-solid' />\n            <Count>{items.length}</Count>\n          </StyledIntelligentGuidanceButton>\n        )}\n      </StyledIntelligentGuidance>\n    );\n  }\n);\n\nexport default IntelligentGuidance;\n"]}
+{"version":3,"file":"IntelligentGuidance.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  CSSProperties,\n  forwardRef,\n  FunctionComponent,\n  KeyboardEvent,\n  PropsWithoutRef,\n  useLayoutEffect,\n  useRef,\n  useState\n} from 'react';\n\nimport {\n  ForwardProps,\n  Icon,\n  SummaryListItem,\n  useI18n,\n  useAfterInitialEffect,\n  Text,\n  Tabs,\n  CardHeader,\n  TabPanel,\n  Flex,\n  Count,\n  Actions\n} from '@pega/cosmos-react-core';\n\nimport {\n  StyledIntelligentGuidanceList,\n  StyledIntelligentGuidance,\n  StyledNew,\n  StyledBorderLine\n} from './IntelligentGuidance.styles';\nimport type IntelligentGuidanceProps from './IntelligentGuidance.types';\n\nconst IntelligentGuidance: FunctionComponent<IntelligentGuidanceProps & ForwardProps> = forwardRef(\n  (\n    {\n      items,\n      previousItems,\n      heading,\n      isCollapsed,\n      onExpandCollapse,\n      ...restProps\n    }: PropsWithoutRef<IntelligentGuidanceProps>,\n    ref: IntelligentGuidanceProps['ref']\n  ) => {\n    const t = useI18n();\n    const headerRef = useRef<HTMLDivElement>(null);\n    const toggleButtonRef = useRef<HTMLButtonElement>(null);\n    const [currentTab, setCurrentTab] = useState('current');\n\n    const listItems: SummaryListItem[] = (\n      currentTab === 'current' ? items : previousItems ?? []\n    ).map(item => {\n      return {\n        id: item.id,\n        visual: <Icon name={item.icon} />,\n        primary: (\n          <>\n            {item.label}\n            {item.new && (\n              <>\n                <StyledNew>{t('new')}</StyledNew>\n                {/* Can remove StyledBorderLine when Firefox supports :has selector. */}\n                <StyledBorderLine />\n              </>\n            )}\n          </>\n        ),\n        secondary: <Text variant='secondary'>{item.type}</Text>,\n        contextualLabel: item.label,\n        actions: item.onDismiss\n          ? [\n              {\n                text: t('dismiss'),\n                id: item.id,\n                icon: 'times',\n                onClick: (id, e) => {\n                  e.stopPropagation();\n                  item.onDismiss?.(id, e);\n                }\n              }\n            ]\n          : undefined,\n        container: { colGap: 1 },\n        role: 'button',\n        tabIndex: 0,\n        'aria-label': t('continue_label_a11y', [item.label]),\n        onClick: item.onClick,\n        onKeyDown: (e: KeyboardEvent) => {\n          if (e.key === 'Enter') {\n            item.onClick(e);\n          }\n        }\n      };\n    });\n\n    const [headerHeight, setHeaderHeight] = useState(0);\n\n    useLayoutEffect(() => {\n      if (headerRef.current) {\n        setHeaderHeight(headerRef.current?.offsetHeight || 0);\n      }\n    }, [headerRef.current]);\n\n    // FIXME: This is a hack to get the Tooltip to reset its position when the list is toggled.\n    useAfterInitialEffect(() => {\n      if (toggleButtonRef.current && toggleButtonRef.current === document.activeElement) {\n        toggleButtonRef.current.blur();\n        setTimeout(() => {\n          toggleButtonRef.current?.focus();\n        }, 1000);\n      }\n    }, [isCollapsed]);\n\n    const intelligentGuidanceList = (\n      <StyledIntelligentGuidanceList items={listItems} noItemsText={t('no_recommendations')} />\n    );\n\n    return (\n      <StyledIntelligentGuidance\n        {...restProps}\n        ref={ref}\n        role='region'\n        aria-live='polite'\n        aria-relevant='all'\n        isCollapsed={isCollapsed}\n        hasItems={!!items.length}\n        style={{ '--headerHeight': `${headerHeight}px` } as CSSProperties}\n      >\n        <CardHeader ref={headerRef}>\n          <Flex container={{ alignItems: 'center', gap: 1 }}>\n            <Text variant='h2'>{heading}</Text>\n            <Count>{items.length + (previousItems?.length ?? 0)}</Count>\n          </Flex>\n          <Actions\n            items={[\n              {\n                text: t(isCollapsed ? 'expand' : 'collapse'),\n                id: 'IntelligentGuidanceButton',\n                icon: 'caret-down',\n                'aria-label': isCollapsed\n                  ? t('expand_noun', [heading])\n                  : t('collapse_noun', [heading]),\n                onClick: onExpandCollapse,\n                ref: toggleButtonRef\n              }\n            ]}\n          />\n        </CardHeader>\n        {previousItems ? (\n          <>\n            <Tabs\n              tabs={[\n                {\n                  id: 'current',\n                  name: t('current'),\n                  count: items.filter(item => item.new).length || undefined\n                },\n                {\n                  id: 'previous',\n                  name: t('previous'),\n                  count: previousItems.filter(item => item.new).length || undefined\n                }\n              ]}\n              currentTabId={currentTab}\n              onTabClick={setCurrentTab}\n            />\n            <TabPanel tabId={currentTab}>{intelligentGuidanceList}</TabPanel>\n          </>\n        ) : (\n          intelligentGuidanceList\n        )}\n      </StyledIntelligentGuidance>\n    );\n  }\n);\n\nexport default IntelligentGuidance;\n"]}

package/lib/components/IntelligentGuidance/IntelligentGuidance.styles.d.ts

@@ -1,8 +1,9 @@
+export declare const StyledNew: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledBorderLine: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledIntelligentGuidanceList: import("styled-components").StyledComponent<import("react").FC<import("@pega/cosmos-react-core").SummaryListProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledIntelligentGuidanceButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export interface StyledIntelligentGuidanceProps {
     isCollapsed: boolean;
     hasItems: boolean;
 }
-export declare const StyledIntelligentGuidance: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledIntelligentGuidanceProps, never>;
+export declare const StyledIntelligentGuidance: import("styled-components").StyledComponent<"article", import("styled-components").DefaultTheme, Partial<import("@pega/cosmos-react-core").CardProps> & StyledIntelligentGuidanceProps, never>;
 //# sourceMappingURL=IntelligentGuidance.styles.d.ts.map

package/lib/components/IntelligentGuidance/IntelligentGuidance.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IntelligentGuidance.styles.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.styles.ts"],"names":[],"mappings":"AAuBA,eAAO,MAAM,6BAA6B,2NA8ExC,CAAC;AAIH,eAAO,MAAM,+BAA+B,qOAiB1C,CAAC;AAaH,MAAM,WAAW,8BAA8B;IAC7C,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,yBAAyB,qIAgCrC,CAAC"}
+{"version":3,"file":"IntelligentGuidance.styles.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.styles.ts"],"names":[],"mappings":"AA2BA,eAAO,MAAM,SAAS,mOAmBpB,CAAC;AAIH,eAAO,MAAM,gBAAgB,0GAe3B,CAAC;AAIH,eAAO,MAAM,6BAA6B,2NA6ExC,CAAC;AAIH,MAAM,WAAW,8BAA8B;IAC7C,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,yBAAyB,gMAyFrC,CAAC"}