@pega/cosmos-react-work 9.5.5-1 → 9.5.5-3

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

@@ -5,15 +5,27 @@ export declare const StyledShortcutsCategoryHeading: import("styled-components/d
     ref?: ((instance: HTMLHeadingElement | HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLHeadingElement | HTMLSpanElement> | null | undefined;
 }, never>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").TextProps>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledShortcutsCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
+export declare const StyledTextContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    layoutVariant: "stacked" | "inline";
+}>> & string;
+export declare const StyledText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledSubtitleText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").TextProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement | HTMLSpanElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLHeadingElement | HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLHeadingElement | HTMLSpanElement> | null | undefined;
+}, never>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").TextProps>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledShortcutsCardButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("@pega/cosmos-react-core").ButtonProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
     ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
 }, {
     layoutVariant: "stacked" | "inline";
 }>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").ButtonProps>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledShortcutsCardIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("@pega/cosmos-react-core").IconProps & import("styled-components/dist/types").BaseObject, {
-    layoutVariant: "stacked" | "inline";
+    iconColor?: string;
 }>> & string & Omit<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledLabelRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const StyledText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const StyledExternalIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("@pega/cosmos-react-core").IconProps & import("styled-components/dist/types").BaseObject, import("styled-components/dist/types").BaseObject>> & string & Omit<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledShortcutImageContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledShortcutImg: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
+export declare const StyledCardContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    layoutVariant: "stacked" | "inline";
+    hasDescription: boolean;
+}>> & string;
 //# sourceMappingURL=Shortcuts.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Shortcuts.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,2BAA2B,6NAEvC,CAAC;AAEF,eAAO,MAAM,6BAA6B,iOAqBxC,CAAC;AAIH,eAAO,MAAM,kCAAkC,6NAS9C,CAAC;AAIF,eAAO,MAAM,8BAA8B;;yLAIzC,CAAC;AAIH,eAAO,MAAM,mBAAmB,6NAG/B,CAAC;AAEF,eAAO,MAAM,yBAAyB;;;mBAAmC,SAAS,GAAG,QAAQ;oLAwC3F,CAAC;AAIH,eAAO,MAAM,uBAAuB;mBAAiC,SAAS,GAAG,QAAQ;0JAUxF,CAAC;AAIF,eAAO,MAAM,cAAc,+NAM1B,CAAC;AAIF,eAAO,MAAM,UAAU,+NAMtB,CAAC;AAIF,eAAO,MAAM,kBAAkB,kaAE9B,CAAC"}
+{"version":3,"file":"Shortcuts.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,2BAA2B,6NAEvC,CAAC;AAEF,eAAO,MAAM,6BAA6B,iOAqBxC,CAAC;AAIH,eAAO,MAAM,kCAAkC,6NAS9C,CAAC;AAIF,eAAO,MAAM,8BAA8B;;yLAIzC,CAAC;AAIH,eAAO,MAAM,mBAAmB,6NAG/B,CAAC;AAEF,eAAO,MAAM,iBAAiB;mBAA+B,SAAS,GAAG,QAAQ;YAehF,CAAC;AAIF,eAAO,MAAM,UAAU,+NAOtB,CAAC;AAIF,eAAO,MAAM,kBAAkB;;yLAK9B,CAAC;AAIF,eAAO,MAAM,yBAAyB;;;mBACrB,SAAS,GAAG,QAAQ;oLA4BnC,CAAC;AAIH,eAAO,MAAM,uBAAuB;gBACtB,MAAM;0JAUnB,CAAC;AAIF,eAAO,MAAM,cAAc,+NAM1B,CAAC;AAIF,eAAO,MAAM,kBAAkB,kaAE9B,CAAC;AAIF,eAAO,MAAM,4BAA4B,+NAaxC,CAAC;AAIF,eAAO,MAAM,iBAAiB,oOAK7B,CAAC;AAIF,eAAO,MAAM,wBAAwB;mBACpB,SAAS,GAAG,QAAQ;oBACnB,OAAO;YAsBxB,CAAC"}

package/lib/components/Shortcuts/Shortcuts.styles.js

@@ -1,6 +1,7 @@
 import styled, { css } from 'styled-components';
 import { mix } from 'polished';
 import { Button, defaultThemeProp, Icon, Text, tryCatch } from '@pega/cosmos-react-core';
+import { lineClamp } from '@pega/cosmos-react-core/lib/styles/mixins';
 export const StyledShortcutsCardsWrapper = styled.div `
   container-type: inline-size;
 `;
@@ -46,12 +47,40 @@ export const StyledShortcutsCard = styled.li `
   display: flex;
   flex-direction: column;
 `;
+export const StyledTextContent = styled.div(({ layoutVariant }) => css `
+    ${layoutVariant === 'inline' &&
+    css `
+      flex: 1;
+      min-width: 0;
+      align-items: flex-start;
+    `}
+
+    ${layoutVariant === 'stacked' &&
+    css `
+      align-items: center;
+      width: 100%;
+    `}
+  `);
+StyledTextContent.defaultProps = defaultThemeProp;
+export const StyledText = styled.span(({ theme: { base } }) => css `
+    font-weight: ${base['font-weight']['semi-bold']};
+    font-size: 1em;
+    color: CanvasText;
+    ${lineClamp(3)}
+  `);
+StyledText.defaultProps = defaultThemeProp;
+export const StyledSubtitleText = styled(Text)(() => css `
+    ${lineClamp(3)}
+    text-align: inherit;
+  `);
+StyledSubtitleText.defaultProps = defaultThemeProp;
 export const StyledShortcutsCardButton = styled(Button)(({ theme: { base, components }, layoutVariant }) => {
     const hoverBackgroundColor = tryCatch(() => mix(0.9, base.palette['primary-background'], components.button['secondary-color']));
     return css `
     display: flex;
     align-items: center;
     justify-content: flex-start;
+    text-align: ${layoutVariant === 'stacked' ? 'center' : 'start'};
     flex: 1;
     width: 100%;
     border: 0.0625rem solid ${base.palette['border-line']};
@@ -62,33 +91,21 @@ export const StyledShortcutsCardButton = styled(Button)(({ theme: { base, compon
 
     &:hover {
       background: ${hoverBackgroundColor};
-    }
+      text-decoration: none;
 
-    ${layoutVariant === 'stacked' &&
-        css `
-      flex-direction: column;
-      justify-content: center;
-      gap: calc(${base.spacing} * 2);
-      text-align: center;
-      min-height: 8rem;
-    `}
-
-    ${layoutVariant === 'inline' &&
-        css `
-      flex-direction: row;
-      gap: calc(${base.spacing} * 1.5);
-      text-align: start;
-    `}
+      ${StyledText} {
+        text-decoration: underline;
+      }
+    }
   `;
 });
 StyledShortcutsCardButton.defaultProps = defaultThemeProp;
-export const StyledShortcutsCardIcon = styled(Icon)(({ layoutVariant }) => css `
+export const StyledShortcutsCardIcon = styled(Icon)(({ iconColor }) => css `
     flex-shrink: 0;
 
-    ${layoutVariant === 'stacked' &&
+    ${iconColor &&
     css `
-      width: 3rem;
-      height: 3rem;
+      color: ${iconColor};
     `}
   `);
 StyledShortcutsCardIcon.defaultProps = defaultThemeProp;
@@ -98,14 +115,44 @@ export const StyledLabelRow = styled.span(({ theme: { base } }) => css `
     gap: calc(${base.spacing} * 0.5);
   `);
 StyledLabelRow.defaultProps = defaultThemeProp;
-export const StyledText = styled.span(({ theme: { base } }) => css `
-    font-weight: ${base['font-weight']['semi-bold']};
-    font-size: 1em;
-    color: CanvasText;
-  `);
-StyledText.defaultProps = defaultThemeProp;
 export const StyledExternalIcon = styled(Icon) `
   flex-shrink: 0;
 `;
 StyledExternalIcon.defaultProps = defaultThemeProp;
+export const StyledShortcutImageContainer = styled.span(({ theme: { base, components: { icon } } }) => css `
+    flex-shrink: 0;
+    overflow: hidden;
+    border-radius: calc(${base['border-radius']} / 2);
+    width: ${icon.size.m};
+    height: ${icon.size.m};
+  `);
+StyledShortcutImageContainer.defaultProps = defaultThemeProp;
+export const StyledShortcutImg = styled.img `
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
+`;
+StyledShortcutImg.defaultProps = defaultThemeProp;
+export const StyledCardContentWrapper = styled.div(({ layoutVariant, hasDescription, theme: { base } }) => css `
+    display: flex;
+    flex: 1;
+    min-width: 0;
+
+    ${layoutVariant === 'inline' &&
+    css `
+      flex-direction: row;
+      gap: calc(${base.spacing} * 1.5);
+      align-items: ${hasDescription ? 'flex-start' : 'center'};
+    `}
+
+    ${layoutVariant === 'stacked' &&
+    css `
+      flex-direction: column;
+      gap: calc(${base.spacing} * 2);
+      align-items: center;
+      justify-content: center;
+    `}
+  `);
+StyledCardContentWrapper.defaultProps = defaultThemeProp;
 //# sourceMappingURL=Shortcuts.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Shortcuts.styles.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport { Button, defaultThemeProp, Icon, Text, tryCatch } from '@pega/cosmos-react-core';\n\nexport const StyledShortcutsCardsWrapper = styled.div`\n  container-type: inline-size;\n`;\n\nexport const StyledShortcutsCardsContainer = styled.ul(({ theme: { base } }) => {\n  return css`\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(min(calc(${base.spacing} * 30), 100%), 1fr));\n    gap: ${base.spacing};\n    list-style: none;\n    padding: ${base.spacing} 0;\n    margin: 0;\n\n    @container (min-width: ${parseFloat(base.breakpoints.sm)}rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      grid-auto-rows: 1fr;\n      justify-content: start;\n      align-items: stretch;\n      width: 100%;\n    }\n\n    @container (min-width: ${parseFloat(base.breakpoints.md)}rem) {\n      grid-template-columns: repeat(4, minmax(0, 1fr));\n    }\n  `;\n});\n\nStyledShortcutsCardsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCategoriesContainer = styled.div(\n  ({ theme: { base } }) => css`\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    gap: calc(${base.spacing} * 2);\n    width: 100%;\n    padding-block-start: ${base.spacing};\n    container-type: inline-size;\n  `\n);\n\nStyledShortcutsCategoriesContainer.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCategoryHeading = styled(Text)(({ theme: { base } }) => {\n  return css`\n    margin-block-end: ${base.spacing};\n  `;\n});\n\nStyledShortcutsCategoryHeading.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCard = styled.li`\n  display: flex;\n  flex-direction: column;\n`;\n\nexport const StyledShortcutsCardButton = styled(Button)<{ layoutVariant: 'stacked' | 'inline' }>(({\n  theme: { base, components },\n  layoutVariant\n}) => {\n  const hoverBackgroundColor = tryCatch(() =>\n    mix(0.9, base.palette['primary-background'], components.button['secondary-color'])\n  );\n\n  return css`\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    flex: 1;\n    width: 100%;\n    border: 0.0625rem solid ${base.palette['border-line']};\n    border-radius: ${base['border-radius']};\n    background: ${base.palette['primary-background']};\n    padding-inline: calc(${base.spacing} * 2);\n    padding-block: calc(${base.spacing} * 1.5);\n\n    &:hover {\n      background: ${hoverBackgroundColor};\n    }\n\n    ${layoutVariant === 'stacked' &&\n    css`\n      flex-direction: column;\n      justify-content: center;\n      gap: calc(${base.spacing} * 2);\n      text-align: center;\n      min-height: 8rem;\n    `}\n\n    ${layoutVariant === 'inline' &&\n    css`\n      flex-direction: row;\n      gap: calc(${base.spacing} * 1.5);\n      text-align: start;\n    `}\n  `;\n});\n\nStyledShortcutsCardButton.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCardIcon = styled(Icon)<{ layoutVariant: 'stacked' | 'inline' }>(\n  ({ layoutVariant }) => css`\n    flex-shrink: 0;\n\n    ${layoutVariant === 'stacked' &&\n    css`\n      width: 3rem;\n      height: 3rem;\n    `}\n  `\n);\n\nStyledShortcutsCardIcon.defaultProps = defaultThemeProp;\n\nexport const StyledLabelRow = styled.span(\n  ({ theme: { base } }) => css`\n    display: flex;\n    align-items: center;\n    gap: calc(${base.spacing} * 0.5);\n  `\n);\n\nStyledLabelRow.defaultProps = defaultThemeProp;\n\nexport const StyledText = styled.span(\n  ({ theme: { base } }) => css`\n    font-weight: ${base['font-weight']['semi-bold']};\n    font-size: 1em;\n    color: CanvasText;\n  `\n);\n\nStyledText.defaultProps = defaultThemeProp;\n\nexport const StyledExternalIcon = styled(Icon)`\n  flex-shrink: 0;\n`;\n\nStyledExternalIcon.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Shortcuts.styles.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport { Button, defaultThemeProp, Icon, Text, tryCatch } from '@pega/cosmos-react-core';\nimport { lineClamp } from '@pega/cosmos-react-core/lib/styles/mixins';\n\nexport const StyledShortcutsCardsWrapper = styled.div`\n  container-type: inline-size;\n`;\n\nexport const StyledShortcutsCardsContainer = styled.ul(({ theme: { base } }) => {\n  return css`\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(min(calc(${base.spacing} * 30), 100%), 1fr));\n    gap: ${base.spacing};\n    list-style: none;\n    padding: ${base.spacing} 0;\n    margin: 0;\n\n    @container (min-width: ${parseFloat(base.breakpoints.sm)}rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      grid-auto-rows: 1fr;\n      justify-content: start;\n      align-items: stretch;\n      width: 100%;\n    }\n\n    @container (min-width: ${parseFloat(base.breakpoints.md)}rem) {\n      grid-template-columns: repeat(4, minmax(0, 1fr));\n    }\n  `;\n});\n\nStyledShortcutsCardsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCategoriesContainer = styled.div(\n  ({ theme: { base } }) => css`\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    gap: calc(${base.spacing} * 2);\n    width: 100%;\n    padding-block-start: ${base.spacing};\n    container-type: inline-size;\n  `\n);\n\nStyledShortcutsCategoriesContainer.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCategoryHeading = styled(Text)(({ theme: { base } }) => {\n  return css`\n    margin-block-end: ${base.spacing};\n  `;\n});\n\nStyledShortcutsCategoryHeading.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCard = styled.li`\n  display: flex;\n  flex-direction: column;\n`;\n\nexport const StyledTextContent = styled.div<{ layoutVariant: 'stacked' | 'inline' }>(\n  ({ layoutVariant }) => css`\n    ${layoutVariant === 'inline' &&\n    css`\n      flex: 1;\n      min-width: 0;\n      align-items: flex-start;\n    `}\n\n    ${layoutVariant === 'stacked' &&\n    css`\n      align-items: center;\n      width: 100%;\n    `}\n  `\n);\n\nStyledTextContent.defaultProps = defaultThemeProp;\n\nexport const StyledText = styled.span(\n  ({ theme: { base } }) => css`\n    font-weight: ${base['font-weight']['semi-bold']};\n    font-size: 1em;\n    color: CanvasText;\n    ${lineClamp(3)}\n  `\n);\n\nStyledText.defaultProps = defaultThemeProp;\n\nexport const StyledSubtitleText = styled(Text)(\n  () => css`\n    ${lineClamp(3)}\n    text-align: inherit;\n  `\n);\n\nStyledSubtitleText.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCardButton = styled(Button)<{\n  layoutVariant: 'stacked' | 'inline';\n}>(({ theme: { base, components }, layoutVariant }) => {\n  const hoverBackgroundColor = tryCatch(() =>\n    mix(0.9, base.palette['primary-background'], components.button['secondary-color'])\n  );\n\n  return css`\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    text-align: ${layoutVariant === 'stacked' ? 'center' : 'start'};\n    flex: 1;\n    width: 100%;\n    border: 0.0625rem solid ${base.palette['border-line']};\n    border-radius: ${base['border-radius']};\n    background: ${base.palette['primary-background']};\n    padding-inline: calc(${base.spacing} * 2);\n    padding-block: calc(${base.spacing} * 1.5);\n\n    &:hover {\n      background: ${hoverBackgroundColor};\n      text-decoration: none;\n\n      ${StyledText} {\n        text-decoration: underline;\n      }\n    }\n  `;\n});\n\nStyledShortcutsCardButton.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCardIcon = styled(Icon)<{\n  iconColor?: string;\n}>(\n  ({ iconColor }) => css`\n    flex-shrink: 0;\n\n    ${iconColor &&\n    css`\n      color: ${iconColor};\n    `}\n  `\n);\n\nStyledShortcutsCardIcon.defaultProps = defaultThemeProp;\n\nexport const StyledLabelRow = styled.span(\n  ({ theme: { base } }) => css`\n    display: flex;\n    align-items: center;\n    gap: calc(${base.spacing} * 0.5);\n  `\n);\n\nStyledLabelRow.defaultProps = defaultThemeProp;\n\nexport const StyledExternalIcon = styled(Icon)`\n  flex-shrink: 0;\n`;\n\nStyledExternalIcon.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutImageContainer = styled.span(\n  ({\n    theme: {\n      base,\n      components: { icon }\n    }\n  }) => css`\n    flex-shrink: 0;\n    overflow: hidden;\n    border-radius: calc(${base['border-radius']} / 2);\n    width: ${icon.size.m};\n    height: ${icon.size.m};\n  `\n);\n\nStyledShortcutImageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutImg = styled.img`\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  display: block;\n`;\n\nStyledShortcutImg.defaultProps = defaultThemeProp;\n\nexport const StyledCardContentWrapper = styled.div<{\n  layoutVariant: 'stacked' | 'inline';\n  hasDescription: boolean;\n}>(\n  ({ layoutVariant, hasDescription, theme: { base } }) => css`\n    display: flex;\n    flex: 1;\n    min-width: 0;\n\n    ${layoutVariant === 'inline' &&\n    css`\n      flex-direction: row;\n      gap: calc(${base.spacing} * 1.5);\n      align-items: ${hasDescription ? 'flex-start' : 'center'};\n    `}\n\n    ${layoutVariant === 'stacked' &&\n    css`\n      flex-direction: column;\n      gap: calc(${base.spacing} * 2);\n      align-items: center;\n      justify-content: center;\n    `}\n  `\n);\n\nStyledCardContentWrapper.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Shortcuts/Shortcuts.types.d.ts

@@ -13,6 +13,10 @@ export interface ShortcutLinkItem extends ShortcutItemBase {
     type: 'external';
     /** Absolute URL the link navigates to. Opens in a new tab. */
     href: string;
+    /** Optional subtitle displayed below the label. */
+    description?: string;
+    /** Optional image URL. Renders in place of the icon; falls back to icon if the image fails to load. */
+    image?: string;
 }
 export interface ShortcutNavItem extends ShortcutItemBase {
     /** Discriminant — this item navigates to a portal landing page. */

package/lib/components/Shortcuts/Shortcuts.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Shortcuts.types.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1E,UAAU,gBAAgB;IACxB,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACxD,6DAA6D;IAC7D,IAAI,EAAE,UAAU,CAAC;IACjB,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,eAAe,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,EAAE,YAAY,EAAE,CAAC;CACvB;AAED,UAAU,kBAAkB;IAC1B,yCAAyC;IACzC,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,+EAA+E;IAC/E,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,UAAU,kBAAmB,SAAQ,cAAc,EAAE,UAAU;IAC7D,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,qCAAqC;IACrC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,CAAC,kBAAkB,GAAG,uBAAuB,CAAC,CAAC"}
+{"version":3,"file":"Shortcuts.types.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1E,UAAU,gBAAgB;IACxB,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACxD,6DAA6D;IAC7D,IAAI,EAAE,UAAU,CAAC;IACjB,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uGAAuG;IACvG,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,eAAe,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,EAAE,YAAY,EAAE,CAAC;CACvB;AAED,UAAU,kBAAkB;IAC1B,yCAAyC;IACzC,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,+EAA+E;IAC/E,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,UAAU,kBAAmB,SAAQ,cAAc,EAAE,UAAU;IAC7D,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,qCAAqC;IACrC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,CAAC,kBAAkB,GAAG,uBAAuB,CAAC,CAAC"}

package/lib/components/Shortcuts/Shortcuts.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Shortcuts.types.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref } from 'react';\n\nimport type { NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';\n\ninterface ShortcutItemBase {\n  /** Unique identifier for this shortcut. */\n  id: string;\n  /** Display label shown on the shortcut. */\n  label: string;\n  /** Icon name from the registered icon set. */\n  icon: string;\n}\n\nexport interface ShortcutLinkItem extends ShortcutItemBase {\n  /** Discriminant — this item navigates to an external URL. */\n  type: 'external';\n  /** Absolute URL the link navigates to. Opens in a new tab. */\n  href: string;\n}\n\nexport interface ShortcutNavItem extends ShortcutItemBase {\n  /** Discriminant — this item navigates to a portal landing page. */\n  type: 'page';\n  /** Callback invoked when the user activates this shortcut. */\n  onClick: () => void;\n}\n\nexport type ShortcutItem = ShortcutLinkItem | ShortcutNavItem;\n\nexport interface ShortcutCategory {\n  /** Unique identifier for this category. */\n  id: string;\n  /** Display label shown as the category heading. */\n  label: string;\n  /** Shortcut items belonging to this category. */\n  items: ShortcutItem[];\n}\n\ninterface ShortcutsWithItems {\n  /** Shortcut items to render as cards. */\n  items?: ShortcutItem[];\n  categories?: never;\n  /**\n   * Whether to render the outer card shell with a heading.\n   * When `false`, only the card grid is rendered, centered within its container.\n   * @default true\n   */\n  showHeader?: boolean;\n}\n\ninterface ShortcutsWithCategories {\n  items?: never;\n  /** Grouped shortcut items, each rendered as cards under a category heading. */\n  categories: ShortcutCategory[];\n  showHeader?: never;\n}\n\ninterface ShortcutsBaseProps extends NoChildrenProp, TestIdProp {\n  /** Heading displayed above the shortcuts. */\n  heading?: string;\n  /**\n   * Controls the layout variant of each shortcut card.\n   * - `stacked`: large icon above the label (default card style).\n   * - `inline`: small icon inline to the left of the label (list/link style).\n   * @default 'inline'\n   */\n  variant?: 'stacked' | 'inline';\n  /** Ref for the root card element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport type ShortcutsProps = ShortcutsBaseProps & (ShortcutsWithItems | ShortcutsWithCategories);\n"]}
+{"version":3,"file":"Shortcuts.types.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref } from 'react';\n\nimport type { NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';\n\ninterface ShortcutItemBase {\n  /** Unique identifier for this shortcut. */\n  id: string;\n  /** Display label shown on the shortcut. */\n  label: string;\n  /** Icon name from the registered icon set. */\n  icon: string;\n}\n\nexport interface ShortcutLinkItem extends ShortcutItemBase {\n  /** Discriminant — this item navigates to an external URL. */\n  type: 'external';\n  /** Absolute URL the link navigates to. Opens in a new tab. */\n  href: string;\n  /** Optional subtitle displayed below the label. */\n  description?: string;\n  /** Optional image URL. Renders in place of the icon; falls back to icon if the image fails to load. */\n  image?: string;\n}\n\nexport interface ShortcutNavItem extends ShortcutItemBase {\n  /** Discriminant — this item navigates to a portal landing page. */\n  type: 'page';\n  /** Callback invoked when the user activates this shortcut. */\n  onClick: () => void;\n}\n\nexport type ShortcutItem = ShortcutLinkItem | ShortcutNavItem;\n\nexport interface ShortcutCategory {\n  /** Unique identifier for this category. */\n  id: string;\n  /** Display label shown as the category heading. */\n  label: string;\n  /** Shortcut items belonging to this category. */\n  items: ShortcutItem[];\n}\n\ninterface ShortcutsWithItems {\n  /** Shortcut items to render as cards. */\n  items?: ShortcutItem[];\n  categories?: never;\n  /**\n   * Whether to render the outer card shell with a heading.\n   * When `false`, only the card grid is rendered, centered within its container.\n   * @default true\n   */\n  showHeader?: boolean;\n}\n\ninterface ShortcutsWithCategories {\n  items?: never;\n  /** Grouped shortcut items, each rendered as cards under a category heading. */\n  categories: ShortcutCategory[];\n  showHeader?: never;\n}\n\ninterface ShortcutsBaseProps extends NoChildrenProp, TestIdProp {\n  /** Heading displayed above the shortcuts. */\n  heading?: string;\n  /**\n   * Controls the layout variant of each shortcut card.\n   * - `stacked`: large icon above the label (default card style).\n   * - `inline`: small icon inline to the left of the label (list/link style).\n   * @default 'inline'\n   */\n  variant?: 'stacked' | 'inline';\n  /** Ref for the root card element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport type ShortcutsProps = ShortcutsBaseProps & (ShortcutsWithItems | ShortcutsWithCategories);\n"]}

package/lib/components/Tasks/TaskCard.js

@@ -30,7 +30,7 @@ const TaskCard = ({ group, onShowMoreClick }) => {
     const cardItemLimit = 3;
     const displayItems = items.slice(0, cardItemLimit);
     const hasShowMore = items.length > cardItemLimit || (count !== undefined && count > items.length);
-    return (_jsxs(StyledTaskCard, { children: [_jsxs(CardHeader, { container: { justify: 'start', alignItems: 'center', gap: 1 }, children: [visual && _jsx(Flex, { item: { shrink: 0 }, children: visual }), _jsx(StyledHeadingFlex, { item: { grow: 0 }, children: _jsx(Text, { variant: 'h3', children: name }) }), count > cardItemLimit ? (_jsx(Count, { children: count })) : (_jsx(VisuallyHiddenText, { children: t('task_count', [count], { count }) }))] }), _jsx(CardContent, { children: displayItems.length > 0 ? (_jsx(TaskList, { items: displayItems, openButtonIconOnly: true })) : (_jsx(EmptyState, {})) }), _jsx(Progress, { placement: 'block', visible: loadingMore }), hasShowMore && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { variant: 'link', onClick: () => {
+    return (_jsxs(StyledTaskCard, { children: [_jsxs(CardHeader, { container: { justify: 'start', alignItems: 'center', gap: 1.5 }, children: [visual && _jsx(Flex, { item: { shrink: 0 }, children: visual }), _jsx(StyledHeadingFlex, { item: { grow: 0 }, children: _jsx(Text, { variant: 'h3', children: name }) }), count > cardItemLimit ? (_jsx(Count, { children: count })) : (_jsx(VisuallyHiddenText, { children: t('task_count', [count], { count }) }))] }), _jsx(CardContent, { children: displayItems.length > 0 ? (_jsx(TaskList, { items: displayItems, openButtonIconOnly: true })) : (_jsx(EmptyState, {})) }), _jsx(Progress, { placement: 'block', visible: loadingMore }), hasShowMore && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { variant: 'link', onClick: () => {
                         group.onShowMore?.();
                         onShowMoreClick(group);
                     }, children: t('show_more') }) }))] }));

package/lib/components/Tasks/TaskCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"TaskCard.js","sourceRoot":"","sources":["../../../src/components/Tasks/TaskCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  Card,\n  CardHeader,\n  CardContent,\n  CardFooter,\n  Button,\n  Count,\n  Flex,\n  Text,\n  VisuallyHiddenText,\n  Progress,\n  EmptyState,\n  useI18n,\n  defaultThemeProp,\n  StyledEmptyState\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nimport TaskList from './TaskList';\nimport type { TaskGroupProps } from './Tasks';\n\ninterface TaskCardProps {\n  group: TaskGroupProps;\n  onShowMoreClick: (group: TaskGroupProps) => void;\n}\n\nconst StyledTaskCard = styled(Card)(\n  ({ theme }) => css`\n    block-size: 100%;\n\n    ${StyledCardHeader} {\n      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n\n    ${StyledCardContent} {\n      flex-grow: 1;\n    }\n\n    ${StyledEmptyState} {\n      margin-block: calc(${theme.base.spacing} * 2);\n    }\n  `\n);\n\nStyledTaskCard.defaultProps = defaultThemeProp;\n\nconst StyledHeadingFlex = styled(Flex)`\n  min-width: 0;\n`;\n\nStyledHeadingFlex.defaultProps = defaultThemeProp;\n\nconst TaskCard = ({ group, onShowMoreClick }: TaskCardProps) => {\n  const { name, visual, items, count = items.length, loadingMore = false } = group;\n\n  const t = useI18n();\n\n  const cardItemLimit = 3;\n\n  const displayItems = items.slice(0, cardItemLimit);\n  const hasShowMore = items.length > cardItemLimit || (count !== undefined && count > items.length);\n\n  return (\n    <StyledTaskCard>\n      <CardHeader container={{ justify: 'start', alignItems: 'center', gap: 1 }}>\n        {visual && <Flex item={{ shrink: 0 }}>{visual}</Flex>}\n\n        <StyledHeadingFlex item={{ grow: 0 }}>\n          <Text variant='h3'>{name}</Text>\n        </StyledHeadingFlex>\n\n        {count > cardItemLimit ? (\n          <Count>{count}</Count>\n        ) : (\n          <VisuallyHiddenText>{t('task_count', [count], { count })}</VisuallyHiddenText>\n        )}\n      </CardHeader>\n\n      <CardContent>\n        {displayItems.length > 0 ? (\n          <TaskList items={displayItems} openButtonIconOnly />\n        ) : (\n          <EmptyState />\n        )}\n      </CardContent>\n\n      <Progress placement='block' visible={loadingMore} />\n\n      {hasShowMore && (\n        <CardFooter justify='center'>\n          <Button\n            variant='link'\n            onClick={() => {\n              group.onShowMore?.();\n              onShowMoreClick(group);\n            }}\n          >\n            {t('show_more')}\n          </Button>\n        </CardFooter>\n      )}\n    </StyledTaskCard>\n  );\n};\n\nexport default TaskCard;\n"]}
+{"version":3,"file":"TaskCard.js","sourceRoot":"","sources":["../../../src/components/Tasks/TaskCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  Card,\n  CardHeader,\n  CardContent,\n  CardFooter,\n  Button,\n  Count,\n  Flex,\n  Text,\n  VisuallyHiddenText,\n  Progress,\n  EmptyState,\n  useI18n,\n  defaultThemeProp,\n  StyledEmptyState\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nimport TaskList from './TaskList';\nimport type { TaskGroupProps } from './Tasks';\n\ninterface TaskCardProps {\n  group: TaskGroupProps;\n  onShowMoreClick: (group: TaskGroupProps) => void;\n}\n\nconst StyledTaskCard = styled(Card)(\n  ({ theme }) => css`\n    block-size: 100%;\n\n    ${StyledCardHeader} {\n      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n\n    ${StyledCardContent} {\n      flex-grow: 1;\n    }\n\n    ${StyledEmptyState} {\n      margin-block: calc(${theme.base.spacing} * 2);\n    }\n  `\n);\n\nStyledTaskCard.defaultProps = defaultThemeProp;\n\nconst StyledHeadingFlex = styled(Flex)`\n  min-width: 0;\n`;\n\nStyledHeadingFlex.defaultProps = defaultThemeProp;\n\nconst TaskCard = ({ group, onShowMoreClick }: TaskCardProps) => {\n  const { name, visual, items, count = items.length, loadingMore = false } = group;\n\n  const t = useI18n();\n\n  const cardItemLimit = 3;\n\n  const displayItems = items.slice(0, cardItemLimit);\n  const hasShowMore = items.length > cardItemLimit || (count !== undefined && count > items.length);\n\n  return (\n    <StyledTaskCard>\n      <CardHeader container={{ justify: 'start', alignItems: 'center', gap: 1.5 }}>\n        {visual && <Flex item={{ shrink: 0 }}>{visual}</Flex>}\n\n        <StyledHeadingFlex item={{ grow: 0 }}>\n          <Text variant='h3'>{name}</Text>\n        </StyledHeadingFlex>\n\n        {count > cardItemLimit ? (\n          <Count>{count}</Count>\n        ) : (\n          <VisuallyHiddenText>{t('task_count', [count], { count })}</VisuallyHiddenText>\n        )}\n      </CardHeader>\n\n      <CardContent>\n        {displayItems.length > 0 ? (\n          <TaskList items={displayItems} openButtonIconOnly />\n        ) : (\n          <EmptyState />\n        )}\n      </CardContent>\n\n      <Progress placement='block' visible={loadingMore} />\n\n      {hasShowMore && (\n        <CardFooter justify='center'>\n          <Button\n            variant='link'\n            onClick={() => {\n              group.onShowMore?.();\n              onShowMoreClick(group);\n            }}\n          >\n            {t('show_more')}\n          </Button>\n        </CardFooter>\n      )}\n    </StyledTaskCard>\n  );\n};\n\nexport default TaskCard;\n"]}

package/lib/components/Tasks/TaskList.d.ts

@@ -49,8 +49,9 @@ interface Announcement {
 export declare const StyledTaskList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {
     hasFooter: boolean;
 }>> & string;
-export declare const TaskItem: (({ testId, id, name, avatar, meta, processName, onOpen, caseId, content, headingTag, addAnnouncement, additionalActions, animateOpen, openButtonIconOnly, ...restProps }: TaskItemProps & {
+export declare const TaskItem: (({ testId, id, name, avatar, meta, processName, onOpen, caseId, content, headingTag, addAnnouncement, additionalActions, animateOpen, openButtonIconOnly, hasFooter, ...restProps }: TaskItemProps & {
     addAnnouncement?: (announcement: Announcement) => void;
+    hasFooter?: boolean;
 }) => import("react/jsx-runtime").JSX.Element) & {
     getTestIds: (testIdProp?: TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["open-task"]>;
 };

package/lib/components/Tasks/TaskList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TaskList.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,SAAS,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AA4BzE,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAQpF,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,uDAAuD;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wDAAwD;IACxD,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7E,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,+CAA+C;IAC/C,iBAAiB,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC1C;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,UAAU,YAAY;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,GAAG,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc;eAA0B,OAAO;YAuB1D,CAAC;AAsDH,eAAO,MAAM,QAAQ,6KAiBhB,aAAa,GAAG;IAAE,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,KAAK,IAAI,CAAA;CAAE;;CAgH9E,CAAC;;;;AAqEF,wBAAyD"}
+{"version":3,"file":"TaskList.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,SAAS,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AA4BzE,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAQpF,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,uDAAuD;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wDAAwD;IACxD,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7E,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,+CAA+C;IAC/C,iBAAiB,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC1C;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,UAAU,YAAY;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,GAAG,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc;eAA0B,OAAO;YAyB1D,CAAC;AA+DH,eAAO,MAAM,QAAQ,wLAkBhB,aAAa,GAAG;IACjB,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,KAAK,IAAI,CAAC;IACvD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;;CAkHF,CAAC;;;;AAqEF,wBAAyD"}

package/lib/components/Tasks/TaskList.js

@@ -1,5 +1,5 @@
 import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef } from 'react';
 import styled, { css } from 'styled-components';
 import { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';
@@ -25,7 +25,9 @@ export const StyledTaskList = styled.ul(({ theme, hasFooter }) => {
     > li:last-child {
       ${hasFooter
         ? css `
-            border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
+            &:not([role='button']) {
+              border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
+            }
           `
         : css `
             padding-block-end: 0;
@@ -56,28 +58,34 @@ const StyledTaskContent = styled.div(({ isAnimating, isExpanded, theme }) => {
 });
 StyledTaskContent.defaultProps = defaultThemeProp;
 const StyledSummaryItem = styled(SummaryItem)(({ hasProcessName }) => {
-    return hasProcessName
-        ? css `
-        ${StyledPrimary} {
-          display: contents;
+    return css `
+    ${hasProcessName &&
+        css `
+      ${StyledPrimary} {
+        display: contents;
 
-          & > ${StyledText} {
-            ${ellipsisOverflow};
-          }
+        & > ${StyledText} {
+          ${ellipsisOverflow};
         }
-      `
-        : null;
+      }
+    `}
+  `;
 });
-const StyledOpenTaskButton = styled(Button)(({ theme: { base } }) => {
+StyledSummaryItem.defaultProps = defaultThemeProp;
+const StyledOpenTaskButton = styled(Button)(({ theme: { base }, $iconOnly }) => {
     return css `
-    padding: 0 calc(2 * ${base.spacing});
+    ${!$iconOnly &&
+        css `
+      padding: 0 calc(2 * ${base.spacing});
+    `}
   `;
 });
 StyledOpenTaskButton.defaultProps = defaultThemeProp;
-export const TaskItem = withTestIds(({ testId, id, name, avatar, meta, processName, onOpen, caseId, content, headingTag, addAnnouncement, additionalActions, animateOpen = true, openButtonIconOnly = false, ...restProps }) => {
+export const TaskItem = withTestIds(({ testId, id, name, avatar, meta, processName, onOpen, caseId, content, headingTag, addAnnouncement, additionalActions, animateOpen = true, openButtonIconOnly = false, hasFooter, ...restProps }) => {
     const testIds = useTestIds(testId, getTaskItemTestIds);
     const t = useI18n();
-    const { components: { 'case-view': { summary: { detached } } } } = useTheme();
+    const { components: { 'case-view': { summary: { detached } }, tasks: { 'button-style': buttonStyle } } } = useTheme();
+    const iconOnly = openButtonIconOnly || buttonStyle === 'icon';
     const contentRef = useRef(null);
     const { state, set } = useTransitionState({
         ref: contentRef,
@@ -106,10 +114,10 @@ export const TaskItem = withTestIds(({ testId, id, name, avatar, meta, processNa
     else {
         primaryValue = (_jsx(Text, { variant: headingTag, "data-focusable-form-heading": content ? '' : undefined, children: name }));
     }
+    const openLabelSuffix = ` - ${processName ? `${processName} ` : ''}${name}${caseId ? ` ${caseId}` : ''}`;
     const summary = (_jsx(StyledSummaryItem, { visual: avatar, hasProcessName: !!processName, primary: primaryValue, secondary: meta, actions: content
             ? additionalActions && _jsx(Actions, { menuAt: 1, items: additionalActions })
-            : onOpen &&
-                (openButtonIconOnly ? (_jsx(Button, { "data-testid": testIds.openTask, variant: 'secondary', icon: true, compact: true, "aria-label": `${t('go')} - ${processName ? `${processName} ` : ''}${name}${caseId ? ` ${caseId}` : ''}`, onClick: (e) => onOpen(id, e), children: _jsx(Icon, { name: 'arrow-right' }) })) : (_jsxs(StyledOpenTaskButton, { "data-testid": testIds.openTask, variant: 'primary', compact: detached, onClick: (e) => onOpen(id, e), children: [_jsx("span", { children: t('go') }), _jsx(VisuallyHiddenText, { children: ` - ${processName ? `${processName} ` : ''}${name}${caseId ? ` ${caseId}` : ''}` })] }))) }));
+            : onOpen && (_jsx(StyledOpenTaskButton, { "data-testid": testIds.openTask, "$iconOnly": iconOnly, variant: iconOnly ? 'simple' : 'primary', icon: iconOnly, compact: iconOnly || detached, "aria-label": iconOnly ? `${t('go')}${openLabelSuffix}` : undefined, onClick: (e) => onOpen(id, e), children: iconOnly ? (_jsx(Icon, { name: 'arrow-right' })) : (_jsxs(_Fragment, { children: [_jsx("span", { children: t('go') }), _jsx(VisuallyHiddenText, { children: openLabelSuffix })] })) })) }));
     return (_jsxs(Flex, { "data-testid": testIds.root, ...restProps, container: { direction: 'column', gap: 2 }, item: { grow: 1 }, as: content ? undefined : StyledSummaryListItem, forwardedAs: content ? 'div' : 'li', children: [summary, content && (_jsx(StyledTaskContent, { ref: contentRef, isAnimating: isAnimating, isExpanded: isExpanded, children: content }))] }));
 }, getTaskItemTestIds);
 const TaskList = forwardRef(function TaskList({ testId, items, hasFooter = false, openButtonIconOnly = false }, ref) {

package/lib/components/Tasks/TaskList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TaskList.js","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef } from 'react';\nimport type { PropsWithoutRef, ReactNode, Ref, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\nimport { animations } from '@pega/cosmos-react-core/lib/styles';\nimport {\n  SummaryItem,\n  StyledSummaryListItem,\n  Flex,\n  defaultThemeProp,\n  Button,\n  Text,\n  useI18n,\n  VisuallyHiddenText,\n  useTestIds,\n  useLiveLog,\n  debounce,\n  Actions,\n  withTestIds,\n  StyledPrimary,\n  StyledText,\n  useTheme,\n  useTransitionState,\n  Icon,\n  registerIcon\n} from '@pega/cosmos-react-core';\nimport * as arrowRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-right.icon';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\nimport type { TestIdProp, ActionsProps, HeadingTag } from '@pega/cosmos-react-core';\n\nimport AssignmentDetails from '../HierarchicalAssignments/AssignmentDetail';\n\nimport { getTaskListTestIds, getTaskItemTestIds } from './Tasks.test-ids';\n\nregisterIcon(arrowRightIcon);\n\nexport interface TaskItemProps extends TestIdProp {\n  id: string;\n  /** Name of the task displayed in the list. */\n  name: string;\n  /** Name of the process for the task. */\n  processName?: string;\n  /** The heading tag to render task name and process as. */\n  headingTag?: HeadingTag;\n  /** Avatar element to represent the task's assignee. */\n  avatar?: ReactNode;\n  /** MetaList element with info related to the task. */\n  meta?: ReactNode;\n  /** Provide a callback to render a button for a task. */\n  onOpen?: (id: TaskItemProps['id'], e: MouseEvent<HTMLButtonElement>) => void;\n  /** Case identifier */\n  caseId?: string;\n  /** Content for the task when open. */\n  content?: ReactNode;\n  /** An array of actions to add to open task. */\n  additionalActions?: ActionsProps['items'];\n  /**\n   * When true, animates the content expanding in.\n   * @default true\n   */\n  animateOpen?: boolean;\n  /**\n   * When true, renders the open button as a compact icon-only arrow button.\n   * @default false\n   */\n  openButtonIconOnly?: boolean;\n}\n\nexport interface TaskListProps extends TestIdProp {\n  items: TaskItemProps[];\n  hasFooter?: boolean;\n  /**\n   * When true, all task items render the open button as a compact icon-only arrow.\n   * @default false\n   */\n  openButtonIconOnly?: boolean;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\ninterface Announcement {\n  name: string;\n  status: 'removed' | 'added';\n}\n\nexport const StyledTaskList = styled.ul<{ hasFooter: boolean }>(({ theme, hasFooter }) => {\n  const speed = theme.base.animation.speed;\n\n  return css`\n    ${animations.subProperties}\n    animation-name: ${animations.reveal}, ${animations.slideInYStart};\n    --slide-in-y-start-offset: -0.5rem;\n    --animation-duration: max(calc(${speed} * 3), 1ms);\n\n    @media (prefers-reduced-motion: reduce) {\n      animation-duration: 1ms;\n    }\n\n    > li:last-child {\n      ${hasFooter\n        ? css`\n            border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n          `\n        : css`\n            padding-block-end: 0;\n          `}\n    }\n  `;\n});\n\nStyledTaskList.defaultProps = defaultThemeProp;\n\nconst StyledTaskContent = styled.div<{ isAnimating?: boolean; isExpanded?: boolean }>(\n  ({ isAnimating, isExpanded, theme }) => {\n    const speed = theme.base.animation.speed;\n\n    return css`\n      display: grid;\n      grid-template-rows: ${isExpanded ? '1fr' : '0fr'};\n      opacity: ${isExpanded ? 1 : 0};\n      transform: translateY(${isExpanded ? '0' : '-0.5rem'});\n      transition-duration: max(calc(${speed} * 3), 1ms);\n      transition-property: grid-template-rows, opacity, transform;\n      transition-timing-function: ${theme.base.animation.timing.ease};\n\n      @media (prefers-reduced-motion: reduce) {\n        transition-duration: 1ms;\n      }\n\n      > * {\n        overflow: ${isAnimating ? 'hidden' : 'visible'};\n      }\n    `;\n  }\n);\n\nStyledTaskContent.defaultProps = defaultThemeProp;\n\nconst StyledSummaryItem = styled(SummaryItem)<{ hasProcessName?: boolean }>(({\n  hasProcessName\n}) => {\n  return hasProcessName\n    ? css`\n        ${StyledPrimary} {\n          display: contents;\n\n          & > ${StyledText} {\n            ${ellipsisOverflow};\n          }\n        }\n      `\n    : null;\n});\n\nconst StyledOpenTaskButton = styled(Button)(({ theme: { base } }) => {\n  return css`\n    padding: 0 calc(2 * ${base.spacing});\n  `;\n});\n\nStyledOpenTaskButton.defaultProps = defaultThemeProp;\n\nexport const TaskItem = withTestIds(\n  ({\n    testId,\n    id,\n    name,\n    avatar,\n    meta,\n    processName,\n    onOpen,\n    caseId,\n    content,\n    headingTag,\n    addAnnouncement,\n    additionalActions,\n    animateOpen = true,\n    openButtonIconOnly = false,\n    ...restProps\n  }: TaskItemProps & { addAnnouncement?: (announcement: Announcement) => void }) => {\n    const testIds = useTestIds(testId, getTaskItemTestIds);\n    const t = useI18n();\n    const {\n      components: {\n        'case-view': {\n          summary: { detached }\n        }\n      }\n    } = useTheme();\n\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    const { state, set } = useTransitionState({\n      ref: contentRef,\n      property: 'grid-template-rows',\n      states: expandCollapseStates,\n      defaultState: content && !animateOpen ? 'expanded' : 'collapsed'\n    });\n\n    const isAnimating = state === 'expanding' || state === 'collapsing';\n    const isExpanded = state === 'expanded' || state === 'expanding';\n\n    useEffect(() => {\n      const shouldBeExpanded = !!content;\n\n      if (shouldBeExpanded !== isExpanded) {\n        set(shouldBeExpanded ? 'expanded' : 'collapsed');\n      }\n    }, [content, isExpanded, set]);\n\n    useEffect(() => {\n      addAnnouncement?.({ name, status: 'added' });\n\n      return () => {\n        addAnnouncement?.({ name, status: 'removed' });\n      };\n    }, []);\n\n    let primaryValue;\n    if (processName) {\n      primaryValue = (\n        <AssignmentDetails\n          name={name}\n          headingTag={headingTag}\n          processName={processName}\n          active={!!content}\n        />\n      );\n    } else {\n      primaryValue = (\n        <Text variant={headingTag} data-focusable-form-heading={content ? '' : undefined}>\n          {name}\n        </Text>\n      );\n    }\n\n    const summary = (\n      <StyledSummaryItem\n        visual={avatar}\n        hasProcessName={!!processName}\n        primary={primaryValue}\n        secondary={meta}\n        actions={\n          content\n            ? additionalActions && <Actions menuAt={1} items={additionalActions} />\n            : onOpen &&\n              (openButtonIconOnly ? (\n                <Button\n                  data-testid={testIds.openTask}\n                  variant='secondary'\n                  icon\n                  compact\n                  aria-label={`${t('go')} - ${processName ? `${processName} ` : ''}${name}${caseId ? ` ${caseId}` : ''}`}\n                  onClick={(e: MouseEvent<HTMLButtonElement>) => onOpen(id, e)}\n                >\n                  <Icon name='arrow-right' />\n                </Button>\n              ) : (\n                <StyledOpenTaskButton\n                  data-testid={testIds.openTask}\n                  variant='primary'\n                  compact={detached}\n                  onClick={(e: MouseEvent<HTMLButtonElement>) => onOpen(id, e)}\n                >\n                  <span>{t('go')}</span>\n                  <VisuallyHiddenText>{` - ${processName ? `${processName} ` : ''}${name}${caseId ? ` ${caseId}` : ''}`}</VisuallyHiddenText>\n                </StyledOpenTaskButton>\n              ))\n        }\n      />\n    );\n\n    return (\n      <Flex\n        data-testid={testIds.root}\n        {...restProps}\n        container={{ direction: 'column', gap: 2 }}\n        item={{ grow: 1 }}\n        as={content ? undefined : StyledSummaryListItem}\n        forwardedAs={content ? 'div' : 'li'}\n      >\n        {summary}\n        {content && (\n          <StyledTaskContent ref={contentRef} isAnimating={isAnimating} isExpanded={isExpanded}>\n            {content}\n          </StyledTaskContent>\n        )}\n      </Flex>\n    );\n  },\n  getTaskItemTestIds\n);\n\nconst TaskList = forwardRef(function TaskList(\n  { testId, items, hasFooter = false, openButtonIconOnly = false }: PropsWithoutRef<TaskListProps>,\n  ref: TaskListProps['ref']\n) {\n  const testIds = useTestIds(testId, getTaskListTestIds);\n  const t = useI18n();\n  const { announcePolite } = useLiveLog();\n  const announcements = useRef<Announcement[]>([]);\n  const mounted = useRef(false);\n\n  useEffect(() => {\n    mounted.current = true;\n\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n\n  const debouncedAnnounce = debounce(() => {\n    if (announcements.current.length > 0) {\n      let tasksAdded = 0;\n      let tasksRemoved = 0;\n      announcements.current.forEach(item => {\n        if (item.status === 'removed') {\n          tasksRemoved += 1;\n        } else {\n          tasksAdded += 1;\n        }\n      });\n      let message = tasksAdded ? t('tasks_added', [tasksAdded], { count: tasksAdded }) : '';\n      if (tasksRemoved) {\n        message += t('tasks_removed', [tasksRemoved], { count: tasksRemoved });\n      }\n\n      if (mounted.current) {\n        announcePolite({ message });\n      }\n\n      announcements.current = [];\n    }\n  }, 2000);\n\n  const addAnnouncement = (announcement: Announcement) => {\n    announcements.current = [...announcements.current, announcement];\n    debouncedAnnounce();\n  };\n\n  return (\n    <Flex\n      data-testid={testIds.root}\n      container={{ direction: 'column' }}\n      as={StyledTaskList}\n      hasFooter={hasFooter}\n      ref={ref}\n    >\n      {items.map(item => (\n        <TaskItem\n          {...item}\n          openButtonIconOnly={item.openButtonIconOnly ?? openButtonIconOnly}\n          addAnnouncement={addAnnouncement}\n          key={item.id}\n        />\n      ))}\n    </Flex>\n  );\n});\n\nexport default withTestIds(TaskList, getTaskListTestIds);\n"]}
+{"version":3,"file":"TaskList.js","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef } from 'react';\nimport type { PropsWithoutRef, ReactNode, Ref, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\nimport { animations } from '@pega/cosmos-react-core/lib/styles';\nimport {\n  SummaryItem,\n  StyledSummaryListItem,\n  Flex,\n  defaultThemeProp,\n  Button,\n  Text,\n  useI18n,\n  VisuallyHiddenText,\n  useTestIds,\n  useLiveLog,\n  debounce,\n  Actions,\n  withTestIds,\n  StyledPrimary,\n  StyledText,\n  useTheme,\n  useTransitionState,\n  Icon,\n  registerIcon\n} from '@pega/cosmos-react-core';\nimport * as arrowRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-right.icon';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\nimport type { TestIdProp, ActionsProps, HeadingTag } from '@pega/cosmos-react-core';\n\nimport AssignmentDetails from '../HierarchicalAssignments/AssignmentDetail';\n\nimport { getTaskListTestIds, getTaskItemTestIds } from './Tasks.test-ids';\n\nregisterIcon(arrowRightIcon);\n\nexport interface TaskItemProps extends TestIdProp {\n  id: string;\n  /** Name of the task displayed in the list. */\n  name: string;\n  /** Name of the process for the task. */\n  processName?: string;\n  /** The heading tag to render task name and process as. */\n  headingTag?: HeadingTag;\n  /** Avatar element to represent the task's assignee. */\n  avatar?: ReactNode;\n  /** MetaList element with info related to the task. */\n  meta?: ReactNode;\n  /** Provide a callback to render a button for a task. */\n  onOpen?: (id: TaskItemProps['id'], e: MouseEvent<HTMLButtonElement>) => void;\n  /** Case identifier */\n  caseId?: string;\n  /** Content for the task when open. */\n  content?: ReactNode;\n  /** An array of actions to add to open task. */\n  additionalActions?: ActionsProps['items'];\n  /**\n   * When true, animates the content expanding in.\n   * @default true\n   */\n  animateOpen?: boolean;\n  /**\n   * When true, renders the open button as a compact icon-only arrow button.\n   * @default false\n   */\n  openButtonIconOnly?: boolean;\n}\n\nexport interface TaskListProps extends TestIdProp {\n  items: TaskItemProps[];\n  hasFooter?: boolean;\n  /**\n   * When true, all task items render the open button as a compact icon-only arrow.\n   * @default false\n   */\n  openButtonIconOnly?: boolean;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\ninterface Announcement {\n  name: string;\n  status: 'removed' | 'added';\n}\n\nexport const StyledTaskList = styled.ul<{ hasFooter: boolean }>(({ theme, hasFooter }) => {\n  const speed = theme.base.animation.speed;\n\n  return css`\n    ${animations.subProperties}\n    animation-name: ${animations.reveal}, ${animations.slideInYStart};\n    --slide-in-y-start-offset: -0.5rem;\n    --animation-duration: max(calc(${speed} * 3), 1ms);\n\n    @media (prefers-reduced-motion: reduce) {\n      animation-duration: 1ms;\n    }\n\n    > li:last-child {\n      ${hasFooter\n        ? css`\n            &:not([role='button']) {\n              border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n            }\n          `\n        : css`\n            padding-block-end: 0;\n          `}\n    }\n  `;\n});\n\nStyledTaskList.defaultProps = defaultThemeProp;\n\nconst StyledTaskContent = styled.div<{ isAnimating?: boolean; isExpanded?: boolean }>(\n  ({ isAnimating, isExpanded, theme }) => {\n    const speed = theme.base.animation.speed;\n\n    return css`\n      display: grid;\n      grid-template-rows: ${isExpanded ? '1fr' : '0fr'};\n      opacity: ${isExpanded ? 1 : 0};\n      transform: translateY(${isExpanded ? '0' : '-0.5rem'});\n      transition-duration: max(calc(${speed} * 3), 1ms);\n      transition-property: grid-template-rows, opacity, transform;\n      transition-timing-function: ${theme.base.animation.timing.ease};\n\n      @media (prefers-reduced-motion: reduce) {\n        transition-duration: 1ms;\n      }\n\n      > * {\n        overflow: ${isAnimating ? 'hidden' : 'visible'};\n      }\n    `;\n  }\n);\n\nStyledTaskContent.defaultProps = defaultThemeProp;\n\nconst StyledSummaryItem = styled(SummaryItem)<{ hasProcessName?: boolean }>(({\n  hasProcessName\n}) => {\n  return css`\n    ${hasProcessName &&\n    css`\n      ${StyledPrimary} {\n        display: contents;\n\n        & > ${StyledText} {\n          ${ellipsisOverflow};\n        }\n      }\n    `}\n  `;\n});\n\nStyledSummaryItem.defaultProps = defaultThemeProp;\n\nconst StyledOpenTaskButton = styled(Button)<{ $iconOnly?: boolean }>(({\n  theme: { base },\n  $iconOnly\n}) => {\n  return css`\n    ${!$iconOnly &&\n    css`\n      padding: 0 calc(2 * ${base.spacing});\n    `}\n  `;\n});\n\nStyledOpenTaskButton.defaultProps = defaultThemeProp;\n\nexport const TaskItem = withTestIds(\n  ({\n    testId,\n    id,\n    name,\n    avatar,\n    meta,\n    processName,\n    onOpen,\n    caseId,\n    content,\n    headingTag,\n    addAnnouncement,\n    additionalActions,\n    animateOpen = true,\n    openButtonIconOnly = false,\n    hasFooter,\n    ...restProps\n  }: TaskItemProps & {\n    addAnnouncement?: (announcement: Announcement) => void;\n    hasFooter?: boolean;\n  }) => {\n    const testIds = useTestIds(testId, getTaskItemTestIds);\n    const t = useI18n();\n    const {\n      components: {\n        'case-view': {\n          summary: { detached }\n        },\n        tasks: { 'button-style': buttonStyle }\n      }\n    } = useTheme();\n\n    const iconOnly = openButtonIconOnly || buttonStyle === 'icon';\n\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    const { state, set } = useTransitionState({\n      ref: contentRef,\n      property: 'grid-template-rows',\n      states: expandCollapseStates,\n      defaultState: content && !animateOpen ? 'expanded' : 'collapsed'\n    });\n\n    const isAnimating = state === 'expanding' || state === 'collapsing';\n    const isExpanded = state === 'expanded' || state === 'expanding';\n\n    useEffect(() => {\n      const shouldBeExpanded = !!content;\n\n      if (shouldBeExpanded !== isExpanded) {\n        set(shouldBeExpanded ? 'expanded' : 'collapsed');\n      }\n    }, [content, isExpanded, set]);\n\n    useEffect(() => {\n      addAnnouncement?.({ name, status: 'added' });\n\n      return () => {\n        addAnnouncement?.({ name, status: 'removed' });\n      };\n    }, []);\n\n    let primaryValue;\n    if (processName) {\n      primaryValue = (\n        <AssignmentDetails\n          name={name}\n          headingTag={headingTag}\n          processName={processName}\n          active={!!content}\n        />\n      );\n    } else {\n      primaryValue = (\n        <Text variant={headingTag} data-focusable-form-heading={content ? '' : undefined}>\n          {name}\n        </Text>\n      );\n    }\n\n    const openLabelSuffix = ` - ${processName ? `${processName} ` : ''}${name}${caseId ? ` ${caseId}` : ''}`;\n\n    const summary = (\n      <StyledSummaryItem\n        visual={avatar}\n        hasProcessName={!!processName}\n        primary={primaryValue}\n        secondary={meta}\n        actions={\n          content\n            ? additionalActions && <Actions menuAt={1} items={additionalActions} />\n            : onOpen && (\n                <StyledOpenTaskButton\n                  data-testid={testIds.openTask}\n                  $iconOnly={iconOnly}\n                  variant={iconOnly ? 'simple' : 'primary'}\n                  icon={iconOnly}\n                  compact={iconOnly || detached}\n                  aria-label={iconOnly ? `${t('go')}${openLabelSuffix}` : undefined}\n                  onClick={(e: MouseEvent<HTMLButtonElement>) => onOpen(id, e)}\n                >\n                  {iconOnly ? (\n                    <Icon name='arrow-right' />\n                  ) : (\n                    <>\n                      <span>{t('go')}</span>\n                      <VisuallyHiddenText>{openLabelSuffix}</VisuallyHiddenText>\n                    </>\n                  )}\n                </StyledOpenTaskButton>\n              )\n        }\n      />\n    );\n\n    return (\n      <Flex\n        data-testid={testIds.root}\n        {...restProps}\n        container={{ direction: 'column', gap: 2 }}\n        item={{ grow: 1 }}\n        as={content ? undefined : StyledSummaryListItem}\n        forwardedAs={content ? 'div' : 'li'}\n      >\n        {summary}\n        {content && (\n          <StyledTaskContent ref={contentRef} isAnimating={isAnimating} isExpanded={isExpanded}>\n            {content}\n          </StyledTaskContent>\n        )}\n      </Flex>\n    );\n  },\n  getTaskItemTestIds\n);\n\nconst TaskList = forwardRef(function TaskList(\n  { testId, items, hasFooter = false, openButtonIconOnly = false }: PropsWithoutRef<TaskListProps>,\n  ref: TaskListProps['ref']\n) {\n  const testIds = useTestIds(testId, getTaskListTestIds);\n  const t = useI18n();\n  const { announcePolite } = useLiveLog();\n  const announcements = useRef<Announcement[]>([]);\n  const mounted = useRef(false);\n\n  useEffect(() => {\n    mounted.current = true;\n\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n\n  const debouncedAnnounce = debounce(() => {\n    if (announcements.current.length > 0) {\n      let tasksAdded = 0;\n      let tasksRemoved = 0;\n      announcements.current.forEach(item => {\n        if (item.status === 'removed') {\n          tasksRemoved += 1;\n        } else {\n          tasksAdded += 1;\n        }\n      });\n      let message = tasksAdded ? t('tasks_added', [tasksAdded], { count: tasksAdded }) : '';\n      if (tasksRemoved) {\n        message += t('tasks_removed', [tasksRemoved], { count: tasksRemoved });\n      }\n\n      if (mounted.current) {\n        announcePolite({ message });\n      }\n\n      announcements.current = [];\n    }\n  }, 2000);\n\n  const addAnnouncement = (announcement: Announcement) => {\n    announcements.current = [...announcements.current, announcement];\n    debouncedAnnounce();\n  };\n\n  return (\n    <Flex\n      data-testid={testIds.root}\n      container={{ direction: 'column' }}\n      as={StyledTaskList}\n      hasFooter={hasFooter}\n      ref={ref}\n    >\n      {items.map(item => (\n        <TaskItem\n          {...item}\n          openButtonIconOnly={item.openButtonIconOnly ?? openButtonIconOnly}\n          addAnnouncement={addAnnouncement}\n          key={item.id}\n        />\n      ))}\n    </Flex>\n  );\n});\n\nexport default withTestIds(TaskList, getTaskListTestIds);\n"]}

package/lib/components/Tasks/Tasks.d.ts

@@ -29,6 +29,11 @@ interface TasksBaseProps extends NoChildrenProp, TestIdProp {
     viewSelector?: Pick<ViewSelectorProps, 'views' | 'onViewSelect' | 'filterInputProps'>;
     /** Integer representing the total count of tasks. */
     count?: number;
+    /**
+     * Whether to display the result count in the header.
+     * @default true
+     */
+    showResultCount?: boolean;
     /** Opt-in search configuration. */
     search?: Pick<SearchInputProps, 'value' | 'onSearchChange'>;
     /** Callback for when to show more/less button is clicked. Lists greater than 3 items will display the show toggle button in its footer if passed. */

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

@@ -1 +1 @@
-{"version":3,"file":"Tasks.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAqBnD,OAAO,KAAK,EACV,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,UAAU,EACX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sEAAsE,CAAC;AAG9G,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAIhD,MAAM,WAAW,cAAc;IAC7B,qEAAqE;IACrE,EAAE,EAAE,MAAM,CAAC;IACX,oEAAoE;IACpE,IAAI,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,2CAA2C;IAC3C,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mFAAmF;IACnF,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,mDAAmD;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,cAAe,SAAQ,cAAc,EAAE,UAAU;IACzD,qDAAqD;IACrD,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC/B,6CAA6C;IAC7C,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC,CAAC;IACpE,oCAAoC;IACpC,YAAY,CAAC,EAAE,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,cAAc,GAAG,kBAAkB,CAAC,CAAC;IACtF,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,MAAM,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,gBAAgB,CAAC,CAAC;IAC5D,qJAAqJ;IACrJ,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAED,KAAK,iBAAiB,GAClB;IACE;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB,GACD;IACE,yBAAyB;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,iCAAiC;IACjC,MAAM,EAAE,cAAc,EAAE,CAAC;CAC1B,CAAC;AAEN,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,iBAAiB,CAAC;AAE5D,eAAO,MAAM,WAAW;;;eAA6B,OAAO;kBAAgB,OAAO;kLAiBjF,CAAC;iCAYmB,UAAU,GAAG,YAAY;;;AA8H/C,wBAAmD"}
+{"version":3,"file":"Tasks.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/Tasks.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAqBnD,OAAO,KAAK,EACV,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,UAAU,EACX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sEAAsE,CAAC;AAG9G,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAIhD,MAAM,WAAW,cAAc;IAC7B,qEAAqE;IACrE,EAAE,EAAE,MAAM,CAAC;IACX,oEAAoE;IACpE,IAAI,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,2CAA2C;IAC3C,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mFAAmF;IACnF,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,mDAAmD;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,cAAe,SAAQ,cAAc,EAAE,UAAU;IACzD,qDAAqD;IACrD,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC/B,6CAA6C;IAC7C,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC,CAAC;IACpE,oCAAoC;IACpC,YAAY,CAAC,EAAE,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,cAAc,GAAG,kBAAkB,CAAC,CAAC;IACtF,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mCAAmC;IACnC,MAAM,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,gBAAgB,CAAC,CAAC;IAC5D,qJAAqJ;IACrJ,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAED,KAAK,iBAAiB,GAClB;IACE;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB,GACD;IACE,yBAAyB;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,iCAAiC;IACjC,MAAM,EAAE,cAAc,EAAE,CAAC;CAC1B,CAAC;AAEN,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,iBAAiB,CAAC;AAE5D,eAAO,MAAM,WAAW;;;eAA6B,OAAO;kBAAgB,OAAO;kLAiBjF,CAAC;iCAYmB,UAAU,GAAG,YAAY;;;AAiI/C,wBAAmD"}

package/lib/components/Tasks/Tasks.js

@@ -30,7 +30,7 @@ const StyledCardContent = styled(CardContent) `
 `;
 StyledTasks.defaultProps = defaultThemeProp;
 const Tasks = (props) => {
-    const { testId, items = [], name, avatar, viewSelector, count = items.length, search, loadingMore = false, fitToParent = false, onExpandToggle, onItemLimitChange, variant, groups, ...restProps } = props;
+    const { testId, items = [], name, avatar, viewSelector, count, showResultCount = true, search, loadingMore = false, fitToParent = false, onExpandToggle, onItemLimitChange, variant, groups, ...restProps } = props;
     const testIds = useTestIds(testId, getTasksTestIds);
     const openItem = items.find(item => item.content);
     const t = useI18n();
@@ -38,7 +38,9 @@ const Tasks = (props) => {
     const progressRef = useRef(null);
     const [containerEl, setContainerEl] = useElement();
     const containerSize = useMonitoredSize(containerEl, 0);
-    const hasFooter = !!(!openItem && onExpandToggle && count > 0);
+    const totalCount = count ?? items.length;
+    const hasMore = count !== undefined && count > items.length;
+    const hasFooter = !!(!openItem && onExpandToggle && totalCount > 0);
     const TaskItems = useMemo(() => {
         return openItem ? (_jsx(TaskItem, { ...openItem, headingTag: 'h2' })) : (_jsx(TaskList, { items: items, hasFooter: hasFooter, testId: testIds.root }));
     }, [items, openItem]);
@@ -72,16 +74,16 @@ const Tasks = (props) => {
     if (variant === 'cards' && groups !== undefined) {
         return _jsx(TaskCards, { groups: groups, name: name, testId: testId ?? undefined, ...restProps });
     }
-    return (_jsxs(StyledTasks, { "data-testid": testIds.root, ...restProps, openItem: !!openItem, fitToParent: fitToParent, "data-app-region": true, "data-focusable-form-container": '', ref: setContainerEl, children: [!openItem && (_jsxs(CardHeader, { container: { justify: 'start', alignItems: 'center', gap: 1 }, children: [avatar && _jsx(Avatar, { ...avatar }), _jsx(ListToolbar, { name: name, headingTag: 'h2', viewSelector: viewSelector, count: { total: count }, search: search, item: { grow: 1 } })] })), fitToParent ? (_jsx(StyledCardContent, { children: items.length > 0 ? TaskItems : _jsx(EmptyState, {}) })) : (_jsx(CardContent, { children: items.length > 0 ? TaskItems : _jsx(EmptyState, {}) })), _jsx(Progress, { placement: 'block', ref: progressRef, visible: loadingMore, focusOnVisible: true }), hasFooter && !loadingMore && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { "data-testid": testIds.showMoreLess, variant: 'link', "aria-label": t(!!count && count > items.length ? 'show_more' : 'show_less', ['tasks']), onClick: (e) => {
+    return (_jsxs(StyledTasks, { "data-testid": testIds.root, ...restProps, openItem: !!openItem, fitToParent: fitToParent, "data-app-region": true, "data-focusable-form-container": '', ref: setContainerEl, children: [!openItem && (_jsxs(CardHeader, { container: { justify: 'start', alignItems: 'center', gap: 1 }, children: [avatar && _jsx(Avatar, { ...avatar }), _jsx(ListToolbar, { name: name, headingTag: 'h2', viewSelector: viewSelector, count: showResultCount && count !== undefined ? { total: count } : undefined, search: search, item: { grow: 1 } })] })), fitToParent ? (_jsx(StyledCardContent, { children: items.length > 0 ? TaskItems : _jsx(EmptyState, {}) })) : (_jsx(CardContent, { children: items.length > 0 ? TaskItems : _jsx(EmptyState, {}) })), _jsx(Progress, { placement: 'block', ref: progressRef, visible: loadingMore, focusOnVisible: true }), hasFooter && !loadingMore && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { "data-testid": testIds.showMoreLess, variant: 'link', "aria-label": t(hasMore ? 'show_more' : 'show_less', ['tasks']), onClick: (e) => {
                         onExpandToggle?.();
-                        if (!!count && count <= items.length) {
+                        if (!hasMore) {
                             const { currentTarget } = e;
                             requestAnimationFrame(() => {
                                 if (currentTarget.getBoundingClientRect().top < 0)
                                     currentTarget.scrollIntoView();
                             });
                         }
-                    }, ref: toggleButtonRef, children: t(!!count && count > items.length ? 'show_more' : 'show_less') }) }))] }));
+                    }, ref: toggleButtonRef, children: t(hasMore ? 'show_more' : 'show_less') }) }))] }));
 };
 export default withTestIds(Tasks, getTasksTestIds);
 //# sourceMappingURL=Tasks.js.map