@pega/cosmos-react-work 5.0.0-dev.4.9 → 5.0.0-dev.5.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Article/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACtE,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}

package/lib/components/Article/index.js

@@ -0,0 +1,4 @@
+export { default } from './Article';
+export { default as ArticleFooter } from './ArticleFooter';
+export { default as ArticleRating } from './ArticleRating';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Article/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { default } from './Article';\nexport { default as ArticleFooter } from './ArticleFooter';\nexport { default as ArticleRating } from './ArticleRating';\nexport type { ArticleProps } from './Article';\nexport type { ArticleTag, ArticleFooterProps } from './ArticleFooter';\nexport type { ArticleRatingProps } from './ArticleRating';\n"]}

package/lib/components/ArticleList/ArticleList.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { ArticleListProps } from './ArticleList.types';
+declare const ArticleList: FunctionComponent<ArticleListProps & ForwardProps>;
+export default ArticleList;
+//# sourceMappingURL=ArticleList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleList.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleList.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAIL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAEL,gBAAgB,EAGjB,MAAM,qBAAqB,CAAC;AAuC7B,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CA2MnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/ArticleList/ArticleList.js

@@ -0,0 +1,132 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useMemo, useEffect, useRef, createRef } from 'react';
+import styled, { css } from 'styled-components';
+import { Flex, useI18n, defaultThemeProp, TabPanel, Tabs, EmptyState, Progress, getFocusables, useLiveLog, useItemIntersection } from '@pega/cosmos-react-core';
+import ArticleListFilter from './ArticleListFilter';
+import ArticleSummary from './ArticleSummary';
+import ArticleListHeader from './ArticleListHeader';
+const StyledSummaryList = styled.ul(({ theme }) => {
+    return css `
+    max-height: calc(100vh - 8 * ${theme.base.spacing});
+    flex-grow: 1;
+    height: 100%;
+    list-style-type: none;
+    overflow-y: auto;
+    border-end-start-radius: ${theme.base['border-radius']};
+    border-end-end-radius: ${theme.base['border-radius']};
+  `;
+});
+StyledSummaryList.defaultProps = defaultThemeProp;
+const StyledArticleTabPanel = styled.div(({ theme }) => {
+    return css `
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    flex: 1 1;
+    gap: ${theme.base.spacing};
+  `;
+});
+StyledArticleTabPanel.defaultProps = defaultThemeProp;
+const StyledArticleList = styled.article(({ theme }) => {
+    return css `
+    height: 100%;
+    padding-block: 0;
+    background: ${theme.base.palette['primary-background']};
+    border-radius: ${theme.components.card['border-radius']};
+  `;
+});
+StyledArticleList.defaultProps = defaultThemeProp;
+const ArticleList = forwardRef(function ArticleList(props, ref) {
+    const { header, suggested, followed, search, onTabClick, activeTab, loading = false, loadingMore = false, onQuickFilterClick, onLoadMore, ...restProps } = props;
+    const t = useI18n();
+    const { announcePolite } = useLiveLog();
+    const articleContentRefs = useRef([]);
+    const activeTabContentRef = useRef(null);
+    const tabsRef = useRef(null);
+    const activeElementRef = useRef(null);
+    const tabs = useMemo(() => {
+        const tabsArr = [];
+        if (suggested)
+            tabsArr.push({
+                id: 'Suggested',
+                name: t('suggested'),
+                count: suggested?.count,
+                content: suggested.articles ?? []
+            });
+        if (search)
+            tabsArr.push({
+                id: 'Search',
+                name: t('search'),
+                count: search?.count,
+                content: search?.articles ?? []
+            });
+        if (followed)
+            tabsArr.push({
+                id: 'Followed',
+                name: t('followed'),
+                count: followed?.count,
+                content: followed?.articles ?? []
+            });
+        return tabsArr;
+    }, [suggested, followed, search]);
+    const listUlRef = tabs.reduce((acc, tab) => {
+        return { ...acc, [tab.id]: createRef() };
+    }, {});
+    useEffect(() => {
+        if (tabsRef.current && getFocusables(tabsRef)?.length > 0)
+            activeElementRef.current = getFocusables(tabsRef)[0];
+        else {
+            activeTabContentRef.current =
+                articleContentRefs.current[tabs.findIndex(({ id }) => id === activeTab)];
+            if (activeTabContentRef && getFocusables(activeTabContentRef)?.length > 0) {
+                activeElementRef.current = getFocusables(activeTabContentRef)[0];
+            }
+        }
+    }, []);
+    useEffect(() => {
+        if (!loading) {
+            const currentTabContent = tabs.find(tab => tab.id === activeTab)?.content;
+            announcePolite({
+                type: 'status',
+                message: currentTabContent && currentTabContent?.length > 0
+                    ? `${header?.title || t('article_list_label_a11y')} ${t('loaded')}`
+                    : t('no_items')
+            });
+        }
+    }, [loading]);
+    const getItemLength = (tabName) => {
+        const currentTab = tabs.find(item => item.id === tabName);
+        if (!currentTab || !currentTab.content) {
+            return 0;
+        }
+        return currentTab.content.length - 1;
+    };
+    useItemIntersection(listUlRef[activeTab], getItemLength(activeTab), () => {
+        if (!loadingMore)
+            onLoadMore?.();
+    }, ':scope > li[role="article"]');
+    const articleContent = ({ content, tabId, headerTitle }) => {
+        return (_jsxs(_Fragment, { children: [activeTab === t('search') && search && _jsx(ArticleListFilter, { ...search }), activeTab === t('followed') && followed && _jsx(ArticleListFilter, { ...followed }), loading && (_jsx(Progress, { visible: !!loading, placement: 'block', message: t('loading'), liveConfig: { contextualLabel: headerTitle ?? t('article_list_label_a11y') } })), !loading &&
+                    (content.length > 0 ? (_jsxs(Flex, { container: { direction: 'column', gap: 0.5, pad: [1.5, 2] }, as: StyledSummaryList, role: 'feed', ref: listUlRef[tabId], children: [content.map(summaryItem => (_createElement(ArticleSummary, { ...summaryItem, key: summaryItem.articleId, onQuickFilterClick: onQuickFilterClick }))), loadingMore && _jsx(Progress, { placement: 'block' })] })) : (_jsx(EmptyState, {})))] }));
+    };
+    return (_jsxs(Flex, { ...restProps, container: {
+            direction: 'column',
+            pad: [0.5, undefined]
+        }, as: StyledArticleList, "aria-label": t('article_list_label_a11y'), ref: ref, "aria-busy": loading ? true : undefined, children: [header && (_jsx(ArticleListHeader, { icon: header.icon, title: header.title, actions: header.actions })), tabs.length === 1 &&
+                articleContent({
+                    content: tabs[0].content,
+                    tabId: tabs[0].id,
+                    headerTitle: header?.title
+                }), tabs.length > 1 && (_jsxs(_Fragment, { children: [_jsx(Tabs, { ref: tabsRef, tabs: tabs, onTabClick: (name, e) => {
+                            if (document.activeElement instanceof HTMLElement) {
+                                activeElementRef.current = document.activeElement;
+                                onTabClick?.(name, e);
+                            }
+                        }, currentTabId: activeTab }), tabs.map(({ id, content }) => {
+                        return (_jsx(TabPanel, { tabId: id, currentTabId: activeTab, as: activeTab === id ? StyledArticleTabPanel : undefined, children: activeTab === id &&
+                                articleContent({ content, tabId: id, headerTitle: header?.title }) }, id));
+                    })] }))] }));
+});
+export default ArticleList;
+//# sourceMappingURL=ArticleList.js.map

package/lib/components/ArticleList/ArticleList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleList.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  forwardRef,\n  Ref,\n  PropsWithoutRef,\n  useMemo,\n  useEffect,\n  useRef,\n  RefObject,\n  createRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  useI18n,\n  defaultThemeProp,\n  ForwardProps,\n  TabPanel,\n  Tabs,\n  Tab,\n  EmptyState,\n  Progress,\n  getFocusables,\n  useLiveLog,\n  useItemIntersection\n} from '@pega/cosmos-react-core';\n\nimport ArticleListFilter from './ArticleListFilter';\nimport ArticleSummary from './ArticleSummary';\nimport {\n  ArticleListTabId,\n  ArticleListProps,\n  ArticleSummaryProps,\n  ArticleListHeaderProps\n} from './ArticleList.types';\nimport ArticleListHeader from './ArticleListHeader';\n\nconst StyledSummaryList = styled.ul(({ theme }) => {\n  return css`\n    max-height: calc(100vh - 8 * ${theme.base.spacing});\n    flex-grow: 1;\n    height: 100%;\n    list-style-type: none;\n    overflow-y: auto;\n    border-end-start-radius: ${theme.base['border-radius']};\n    border-end-end-radius: ${theme.base['border-radius']};\n  `;\n});\n\nStyledSummaryList.defaultProps = defaultThemeProp;\n\nconst StyledArticleTabPanel = styled.div(({ theme }) => {\n  return css`\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    flex: 1 1;\n    gap: ${theme.base.spacing};\n  `;\n});\n\nStyledArticleTabPanel.defaultProps = defaultThemeProp;\n\nconst StyledArticleList = styled.article(({ theme }) => {\n  return css`\n    height: 100%;\n    padding-block: 0;\n    background: ${theme.base.palette['primary-background']};\n    border-radius: ${theme.components.card['border-radius']};\n  `;\n});\nStyledArticleList.defaultProps = defaultThemeProp;\n\nconst ArticleList: FunctionComponent<ArticleListProps & ForwardProps> = forwardRef(\n  function ArticleList(props: PropsWithoutRef<ArticleListProps>, ref: Ref<HTMLDivElement>) {\n    const {\n      header,\n      suggested,\n      followed,\n      search,\n      onTabClick,\n      activeTab,\n      loading = false,\n      loadingMore = false,\n      onQuickFilterClick,\n      onLoadMore,\n      ...restProps\n    } = props;\n    const t = useI18n();\n    const { announcePolite } = useLiveLog();\n\n    const articleContentRefs = useRef<HTMLDivElement[]>([]);\n    const activeTabContentRef = useRef<HTMLDivElement | null>(null);\n    const tabsRef = useRef<HTMLButtonElement>(null);\n    const activeElementRef = useRef<HTMLElement | null>(null);\n\n    const tabs = useMemo(() => {\n      const tabsArr: (Tab & {\n        content: ArticleSummaryProps[];\n        id: ArticleListTabId;\n      })[] = [];\n\n      if (suggested)\n        tabsArr.push({\n          id: 'Suggested',\n          name: t('suggested'),\n          count: suggested?.count,\n          content: suggested.articles ?? []\n        });\n\n      if (search)\n        tabsArr.push({\n          id: 'Search',\n          name: t('search'),\n          count: search?.count,\n          content: search?.articles ?? []\n        });\n\n      if (followed)\n        tabsArr.push({\n          id: 'Followed',\n          name: t('followed'),\n          count: followed?.count,\n          content: followed?.articles ?? []\n        });\n\n      return tabsArr;\n    }, [suggested, followed, search]);\n\n    const listUlRef: { [id: string]: RefObject<HTMLElement> } = tabs.reduce((acc, tab) => {\n      return { ...acc, [tab.id]: createRef() };\n    }, {});\n\n    useEffect(() => {\n      if (tabsRef.current && getFocusables(tabsRef)?.length > 0)\n        activeElementRef.current = getFocusables(tabsRef)[0];\n      else {\n        activeTabContentRef.current =\n          articleContentRefs.current[tabs.findIndex(({ id }) => id === activeTab)];\n        if (activeTabContentRef && getFocusables(activeTabContentRef)?.length > 0) {\n          activeElementRef.current = getFocusables(activeTabContentRef)[0];\n        }\n      }\n    }, []);\n\n    useEffect(() => {\n      if (!loading) {\n        const currentTabContent = tabs.find(tab => tab.id === activeTab)?.content;\n        announcePolite({\n          type: 'status',\n          message:\n            currentTabContent && currentTabContent?.length > 0\n              ? `${header?.title || t('article_list_label_a11y')} ${t('loaded')}`\n              : t('no_items')\n        });\n      }\n    }, [loading]);\n\n    const getItemLength = (tabName: string): number => {\n      const currentTab = tabs.find(item => item.id === tabName);\n      if (!currentTab || !currentTab.content) {\n        return 0;\n      }\n      return currentTab.content.length - 1;\n    };\n\n    useItemIntersection(\n      listUlRef[activeTab],\n      getItemLength(activeTab),\n      () => {\n        if (!loadingMore) onLoadMore?.();\n      },\n      ':scope > li[role=\"article\"]'\n    );\n\n    const articleContent = ({\n      content,\n      tabId,\n      headerTitle\n    }: {\n      count?: Tab['count'];\n      content: ArticleSummaryProps[];\n      headerTitle?: ArticleListHeaderProps['title'];\n      tabId: ArticleListTabId;\n    }) => {\n      return (\n        <>\n          {activeTab === t('search') && search && <ArticleListFilter {...search} />}\n          {activeTab === t('followed') && followed && <ArticleListFilter {...followed} />}\n          {loading && (\n            <Progress\n              visible={!!loading}\n              placement='block'\n              message={t('loading')}\n              liveConfig={{ contextualLabel: headerTitle ?? t('article_list_label_a11y') }}\n            />\n          )}\n          {!loading &&\n            (content.length > 0 ? (\n              <Flex\n                container={{ direction: 'column', gap: 0.5, pad: [1.5, 2] }}\n                as={StyledSummaryList}\n                role='feed'\n                ref={listUlRef[tabId]}\n              >\n                {content.map(summaryItem => (\n                  <ArticleSummary\n                    {...summaryItem}\n                    key={summaryItem.articleId}\n                    onQuickFilterClick={onQuickFilterClick}\n                  />\n                ))}\n                {loadingMore && <Progress placement='block' />}\n              </Flex>\n            ) : (\n              <EmptyState />\n            ))}\n        </>\n      );\n    };\n\n    return (\n      <Flex\n        {...restProps}\n        container={{\n          direction: 'column',\n          pad: [0.5, undefined]\n        }}\n        as={StyledArticleList}\n        aria-label={t('article_list_label_a11y')}\n        ref={ref}\n        aria-busy={loading ? true : undefined}\n      >\n        {header && (\n          <ArticleListHeader icon={header.icon} title={header.title} actions={header.actions} />\n        )}\n\n        {tabs.length === 1 &&\n          articleContent({\n            content: tabs[0].content,\n            tabId: tabs[0].id,\n            headerTitle: header?.title\n          })}\n\n        {/* When multiple tabs present. */}\n        {tabs.length > 1 && (\n          <>\n            <Tabs\n              ref={tabsRef}\n              tabs={tabs}\n              onTabClick={(name, e) => {\n                if (document.activeElement instanceof HTMLElement) {\n                  activeElementRef.current = document.activeElement;\n                  onTabClick?.(name, e);\n                }\n              }}\n              currentTabId={activeTab}\n            />\n            {tabs.map(({ id, content }) => {\n              return (\n                <TabPanel\n                  key={id}\n                  tabId={id}\n                  currentTabId={activeTab}\n                  as={activeTab === id ? StyledArticleTabPanel : undefined}\n                >\n                  {activeTab === id &&\n                    articleContent({ content, tabId: id, headerTitle: header?.title })}\n                </TabPanel>\n              );\n            })}\n          </>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default ArticleList;\n"]}

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

@@ -0,0 +1,92 @@
+import { MouseEvent, MouseEventHandler } from 'react';
+import { Action, BaseProps, ComboBoxProps, OmitStrict, RequireAtLeastOne, SearchInputProps } from '@pega/cosmos-react-core';
+import { ArticleRatingProps } from '../Article/ArticleRating';
+import { ArticleMetaProps } from '../Article/ArticleMeta';
+export interface ArticleSummaryProps extends BaseProps {
+    /** Unique id of article */
+    articleId: string;
+    /** URL or DOM id to navigate to. This will render the nav item as a link. */
+    href?: string;
+    /** Article title */
+    title: string;
+    /** Article content */
+    abstract: string;
+    /** Callback fired when article title is clicked */
+    onTitleClick?: (id?: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    /** Primary actions which needs to be displayed with an icon */
+    primaryActions?: Action[];
+    /** A list of elements to be rendered within a MetaList. */
+    meta?: ArticleMetaProps;
+    /** Rating - likes and dislikes of the article.  */
+    feedback?: OmitStrict<ArticleRatingProps, 'onReaction'> & {
+        onReaction: (articleId: ArticleSummaryProps['articleId'], reaction: ArticleRatingProps['reaction']) => void;
+    };
+    /** Quick filters to filter articles. */
+    quickFilters?: QuickFilter[];
+    /** callback fired when quick filter is clicked */
+    onQuickFilterClick?: ArticleListProps['onQuickFilterClick'];
+}
+export interface Articles {
+    /** List of articles */
+    articles: ArticleSummaryProps[];
+    /** count of articles */
+    count?: number;
+    /** Props related to the Search Input. */
+    searchInput: OmitStrict<SearchInputProps, 'placeholder' | 'onSearchSubmit' | 'searchResults' | 'recentSearches' | 'advancedSearchLink' | 'resultsPopover'>;
+    /** Props related to the Category Input. */
+    category?: OmitStrict<ComboBoxProps, 'id' | 'labelHidden' | 'required' | 'disabled' | 'readOnly' | 'status' | 'info' | 'actions' | 'additionalInfo'>;
+    /** Props related to the SortBy Input. */
+    sortBy?: OmitStrict<ComboBoxProps, 'id' | 'labelHidden' | 'required' | 'disabled' | 'readOnly' | 'status' | 'info' | 'mode' | 'actions' | 'additionalInfo' | 'onChange' | 'value'>;
+    /** Callback fired when clear button is clicked */
+    onClearClick?: MouseEventHandler<HTMLButtonElement>;
+    /** Quick filters to filter articles */
+    quickFilters?: QuickFilter[];
+    /** Callback fired when applied quick filter is removed */
+    handleQuickFilterRemove?: (id: string) => void;
+    /** Prop to enable show / hide results */
+    showResults?: boolean;
+}
+export interface ArticleListHeaderProps {
+    /** Title of article list */
+    title: string;
+    /** Article list header icon */
+    icon?: string;
+    /** Actions which needs to be displayed with an icon */
+    actions?: Action[];
+}
+export type ArticleListProps = RequireAtLeastOne<{
+    /** Props related to article list header */
+    header?: ArticleListHeaderProps;
+    /** Data of suggested articles */
+    suggested?: Pick<Articles, 'articles' | 'count'>;
+    /** Data of followed articles */
+    followed?: Articles;
+    /** Data of search articles */
+    search?: Articles;
+    /** current active tab whose list has to be rendered */
+    activeTab: string;
+    /** Callback fired when tab is clicked */
+    onTabClick?: (name: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    /**
+     * Optionally renders an indeterminate progress indicator while articles are being fetched.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Optionally renders an indeterminate progress indicator while progressively fetching articles
+     * @default false
+     */
+    loadingMore?: boolean;
+    /** callback fired when quick filter is clicked */
+    onQuickFilterClick?: (quickFilterParam: QuickFilter, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    /** Callback to fetch more rows */
+    onLoadMore?: () => void;
+}, 'suggested' | 'followed' | 'search'>;
+export interface QuickFilter {
+    /** Unique id of quick Filter */
+    id: string;
+    /** Name of quick Filter */
+    name: string;
+}
+export type ArticleListTabId = 'Suggested' | 'Followed' | 'Search';
+//# sourceMappingURL=ArticleList.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleList.types.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleList.types.ts"],"names":[],"mappings":"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"}

package/lib/components/ArticleList/ArticleList.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ArticleList.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleList.types.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleList.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent, MouseEventHandler } from 'react';\n\nimport {\n  Action,\n  BaseProps,\n  ComboBoxProps,\n  OmitStrict,\n  RequireAtLeastOne,\n  SearchInputProps\n} from '@pega/cosmos-react-core';\n\nimport { ArticleRatingProps } from '../Article/ArticleRating';\nimport { ArticleMetaProps } from '../Article/ArticleMeta';\n\nexport interface ArticleSummaryProps extends BaseProps {\n  /** Unique id of article */\n  articleId: string;\n  /** URL or DOM id to navigate to. This will render the nav item as a link. */\n  href?: string;\n  /** Article title */\n  title: string;\n  /** Article content */\n  abstract: string;\n  /** Callback fired when article title is clicked */\n  onTitleClick?: (id?: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  /** Primary actions which needs to be displayed with an icon */\n  primaryActions?: Action[];\n  /** A list of elements to be rendered within a MetaList. */\n  meta?: ArticleMetaProps;\n  /** Rating - likes and dislikes of the article.  */\n  feedback?: OmitStrict<ArticleRatingProps, 'onReaction'> & {\n    onReaction: (\n      articleId: ArticleSummaryProps['articleId'],\n      reaction: ArticleRatingProps['reaction']\n    ) => void;\n  };\n  /** Quick filters to filter articles. */\n  quickFilters?: QuickFilter[];\n  /** callback fired when quick filter is clicked */\n  onQuickFilterClick?: ArticleListProps['onQuickFilterClick'];\n}\n\nexport interface Articles {\n  /** List of articles */\n  articles: ArticleSummaryProps[];\n  /** count of articles */\n  count?: number;\n  /** Props related to the Search Input. */\n  searchInput: OmitStrict<\n    SearchInputProps,\n    | 'placeholder'\n    | 'onSearchSubmit'\n    | 'searchResults'\n    | 'recentSearches'\n    | 'advancedSearchLink'\n    | 'resultsPopover'\n  >;\n  /** Props related to the Category Input. */\n  category?: OmitStrict<\n    ComboBoxProps,\n    | 'id'\n    | 'labelHidden'\n    | 'required'\n    | 'disabled'\n    | 'readOnly'\n    | 'status'\n    | 'info'\n    | 'actions'\n    | 'additionalInfo'\n  >;\n  /** Props related to the SortBy Input. */\n  sortBy?: OmitStrict<\n    ComboBoxProps,\n    | 'id'\n    | 'labelHidden'\n    | 'required'\n    | 'disabled'\n    | 'readOnly'\n    | 'status'\n    | 'info'\n    | 'mode'\n    | 'actions'\n    | 'additionalInfo'\n    | 'onChange'\n    | 'value'\n  >;\n  /** Callback fired when clear button is clicked */\n  onClearClick?: MouseEventHandler<HTMLButtonElement>;\n  /** Quick filters to filter articles */\n  quickFilters?: QuickFilter[];\n  /** Callback fired when applied quick filter is removed */\n  handleQuickFilterRemove?: (id: string) => void;\n  /** Prop to enable show / hide results */\n  showResults?: boolean;\n}\n\nexport interface ArticleListHeaderProps {\n  /** Title of article list */\n  title: string;\n  /** Article list header icon */\n  icon?: string;\n  /** Actions which needs to be displayed with an icon */\n  actions?: Action[];\n}\n\nexport type ArticleListProps = RequireAtLeastOne<\n  {\n    /** Props related to article list header */\n    header?: ArticleListHeaderProps;\n    /** Data of suggested articles */\n    suggested?: Pick<Articles, 'articles' | 'count'>;\n    /** Data of followed articles */\n    followed?: Articles;\n    /** Data of search articles */\n    search?: Articles;\n    /** current active tab whose list has to be rendered */\n    activeTab: string;\n    /** Callback fired when tab is clicked */\n    onTabClick?: (name: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n    /**\n     * Optionally renders an indeterminate progress indicator while articles are being fetched.\n     * @default false\n     */\n    loading?: boolean;\n    /**\n     * Optionally renders an indeterminate progress indicator while progressively fetching articles\n     * @default false\n     */\n    loadingMore?: boolean;\n    /** callback fired when quick filter is clicked */\n    onQuickFilterClick?: (\n      quickFilterParam: QuickFilter,\n      event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>\n    ) => void;\n    /** Callback to fetch more rows */\n    onLoadMore?: () => void;\n  },\n  'suggested' | 'followed' | 'search'\n>;\n\nexport interface QuickFilter {\n  /** Unique id of quick Filter */\n  id: string;\n  /** Name of quick Filter */\n  name: string;\n}\n\nexport type ArticleListTabId = 'Suggested' | 'Followed' | 'Search';\n"]}

package/lib/components/ArticleList/ArticleListFilter.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { ArticleListProps } from './ArticleList.types';
+declare const ArticleListFilter: FunctionComponent<ArticleListProps['search'] & ForwardProps>;
+export default ArticleListFilter;
+//# sourceMappingURL=ArticleListFilter.d.ts.map

package/lib/components/ArticleList/ArticleListFilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleListFilter.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleListFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAqB,MAAM,OAAO,CAAC;AAG7D,OAAO,EAOL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AA8CvD,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,QAAQ,CAAC,GAAG,YAAY,CAkEnF,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/ArticleList/ArticleListFilter.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import styled, { css } from 'styled-components';
+import { Button, Flex, SearchInput, useI18n, defaultThemeProp, ComboBox, StyledSearchInput, Text, Selectable, useLiveLog } from '@pega/cosmos-react-core';
+import { StyledFormContent } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm';
+const StyledClearButton = styled(Button)(({ theme }) => {
+    return css `
+    margin-block-start: calc(4.5 * ${theme.base.spacing});
+  `;
+});
+StyledClearButton.defaultProps = defaultThemeProp;
+const StyledFilterContainer = styled(Flex) `
+  flex-grow: 1;
+`;
+const StyledSelectable = styled(Selectable)(({ theme }) => {
+    return css `
+    line-height: calc(2 * ${theme.base.spacing});
+    margin: calc(0.25 * ${theme.base.spacing});
+  `;
+});
+StyledSelectable.defaultProps = defaultThemeProp;
+const StyledSearchFilters = styled.div(({ theme }) => {
+    return css `
+    width: 100%;
+    padding-block-start: ${theme.base.spacing};
+    padding-inline: calc(2 * ${theme.base.spacing});
+
+    > div:last-child {
+      margin: 0;
+    }
+
+    ${StyledFormContent} {
+      gap: ${theme.base.spacing};
+    }
+
+    ${StyledFilterContainer} > div {
+      margin-top: calc(1.5 * ${theme.base.spacing});
+      width: 100%;
+    }
+    ${StyledSearchInput} {
+      flex-grow: 1;
+    }
+  `;
+});
+StyledSearchFilters.defaultProps = defaultThemeProp;
+const ArticleListFilter = (props) => {
+    const { searchInput, category, sortBy, onClearClick, articles, quickFilters = [], showResults = false, handleQuickFilterRemove, ...restProps } = props || {};
+    const t = useI18n();
+    const searchResults = t('results_count', [articles?.length ?? 0]);
+    const { announcePolite } = useLiveLog();
+    useEffect(() => {
+        if (showResults) {
+            announcePolite({ message: searchResults });
+        }
+    }, [articles, showResults]);
+    const quickFiltersRef = useRef([]);
+    useEffect(() => {
+        if (quickFilters.length > 0 && quickFiltersRef.current.length > 0) {
+            quickFiltersRef.current[quickFilters.length - 1]?.focus();
+        }
+    }, [articles]);
+    return (_jsxs(StyledSearchFilters, { ...restProps, children: [_jsx(Flex, { container: { alignItems: 'center', gap: 1, pad: [0.5, undefined] }, children: _jsx(SearchInput, { ...searchInput }) }), quickFilters.map(({ id, name }, i) => (_jsx(StyledSelectable, { id: id, ref: (el) => {
+                    quickFiltersRef.current[i] = el;
+                }, onRemove: handleQuickFilterRemove ? () => handleQuickFilterRemove?.(id) : undefined, onClick: handleQuickFilterRemove ? () => handleQuickFilterRemove?.(id) : undefined, children: name }))), _jsxs(StyledFilterContainer, { container: { gap: 1, alignItems: 'start' }, children: [category && _jsx(ComboBox, { ...category }), sortBy && _jsx(ComboBox, { ...sortBy }), onClearClick && (_jsx(StyledClearButton, { variant: 'link', label: t('clear'), "aria-label": t('clear_filters'), onClick: onClearClick, children: t('clear') }))] }), showResults && _jsx(Text, { variant: 'secondary', children: searchResults })] }));
+};
+export default ArticleListFilter;
+//# sourceMappingURL=ArticleListFilter.js.map

package/lib/components/ArticleList/ArticleListFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleListFilter.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleListFilter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useEffect, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Flex,\n  SearchInput,\n  useI18n,\n  defaultThemeProp,\n  ComboBox,\n  ForwardProps,\n  StyledSearchInput,\n  Text,\n  Selectable,\n  useLiveLog\n} from '@pega/cosmos-react-core';\nimport { StyledFormContent } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm';\n\nimport { ArticleListProps } from './ArticleList.types';\n\nconst StyledClearButton = styled(Button)(({ theme }) => {\n  return css`\n    margin-block-start: calc(4.5 * ${theme.base.spacing});\n  `;\n});\nStyledClearButton.defaultProps = defaultThemeProp;\n\nconst StyledFilterContainer = styled(Flex)`\n  flex-grow: 1;\n`;\n\nconst StyledSelectable = styled(Selectable)(({ theme }) => {\n  return css`\n    line-height: calc(2 * ${theme.base.spacing});\n    margin: calc(0.25 * ${theme.base.spacing});\n  `;\n});\nStyledSelectable.defaultProps = defaultThemeProp;\n\nconst StyledSearchFilters = styled.div(({ theme }) => {\n  return css`\n    width: 100%;\n    padding-block-start: ${theme.base.spacing};\n    padding-inline: calc(2 * ${theme.base.spacing});\n\n    > div:last-child {\n      margin: 0;\n    }\n\n    ${StyledFormContent} {\n      gap: ${theme.base.spacing};\n    }\n\n    ${StyledFilterContainer} > div {\n      margin-top: calc(1.5 * ${theme.base.spacing});\n      width: 100%;\n    }\n    ${StyledSearchInput} {\n      flex-grow: 1;\n    }\n  `;\n});\nStyledSearchFilters.defaultProps = defaultThemeProp;\n\nconst ArticleListFilter: FunctionComponent<ArticleListProps['search'] & ForwardProps> = (\n  props: ArticleListProps['search']\n) => {\n  const {\n    searchInput,\n    category,\n    sortBy,\n    onClearClick,\n    articles,\n    quickFilters = [],\n    showResults = false,\n    handleQuickFilterRemove,\n    ...restProps\n  } = props || {};\n  const t = useI18n();\n  const searchResults = t('results_count', [articles?.length ?? 0]);\n  const { announcePolite } = useLiveLog();\n\n  useEffect(() => {\n    if (showResults) {\n      announcePolite({ message: searchResults });\n    }\n  }, [articles, showResults]);\n\n  const quickFiltersRef = useRef<HTMLButtonElement[]>([]);\n\n  useEffect(() => {\n    if (quickFilters.length > 0 && quickFiltersRef.current.length > 0) {\n      quickFiltersRef.current[quickFilters.length - 1]?.focus();\n    }\n  }, [articles]);\n\n  return (\n    <StyledSearchFilters {...restProps}>\n      <Flex container={{ alignItems: 'center', gap: 1, pad: [0.5, undefined] }}>\n        <SearchInput {...searchInput} />\n      </Flex>\n      {quickFilters.map(({ id, name }, i) => (\n        <StyledSelectable\n          id={id}\n          ref={(el: HTMLButtonElement) => {\n            quickFiltersRef.current[i] = el;\n          }}\n          onRemove={handleQuickFilterRemove ? () => handleQuickFilterRemove?.(id) : undefined}\n          onClick={handleQuickFilterRemove ? () => handleQuickFilterRemove?.(id) : undefined}\n        >\n          {name}\n        </StyledSelectable>\n      ))}\n      <StyledFilterContainer container={{ gap: 1, alignItems: 'start' }}>\n        {category && <ComboBox {...category} />}\n        {sortBy && <ComboBox {...sortBy} />}\n        {onClearClick && (\n          <StyledClearButton\n            variant='link'\n            label={t('clear')}\n            aria-label={t('clear_filters')}\n            onClick={onClearClick}\n          >\n            {t('clear')}\n          </StyledClearButton>\n        )}\n      </StyledFilterContainer>\n      {showResults && <Text variant='secondary'>{searchResults}</Text>}\n    </StyledSearchFilters>\n  );\n};\n\nexport default ArticleListFilter;\n"]}

package/lib/components/ArticleList/ArticleListHeader.d.ts

@@ -0,0 +1,5 @@
+import { FunctionComponent } from 'react';
+import { ArticleListHeaderProps } from './ArticleList.types';
+declare const ArticleListHeader: FunctionComponent<ArticleListHeaderProps>;
+export default ArticleListHeader;
+//# sourceMappingURL=ArticleListHeader.d.ts.map

package/lib/components/ArticleList/ArticleListHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleListHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleListHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAuB7D,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,CAQhE,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/ArticleList/ArticleListHeader.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { Flex, Icon, Actions, Text, defaultThemeProp } from '@pega/cosmos-react-core';
+const StyledHeaderText = styled(Text) `
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  flex-grow: 1;
+`;
+const StyledIcon = styled(Icon)(({ theme: { base: { spacing } } }) => {
+    return css `
+      min-width: calc(3 * ${spacing});
+    `;
+});
+StyledIcon.defaultProps = defaultThemeProp;
+const ArticleListHeader = ({ icon, title, actions }) => {
+    return (_jsxs(Flex, { container: { alignItems: 'center', gap: 1, pad: [1.5, 2] }, children: [icon && _jsx(StyledIcon, { name: icon }), _jsx(StyledHeaderText, { variant: 'h2', children: title }), actions && _jsx(Actions, { items: actions })] }));
+};
+export default ArticleListHeader;
+//# sourceMappingURL=ArticleListHeader.js.map

package/lib/components/ArticleList/ArticleListHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleListHeader.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleListHeader.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAItF,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;CAKpC,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAC7B,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;4BACc,OAAO;KAC9B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,iBAAiB,GAA8C,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IAChG,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,aAC7D,IAAI,IAAI,KAAC,UAAU,IAAC,IAAI,EAAE,IAAI,GAAI,EACnC,KAAC,gBAAgB,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAoB,EACxD,OAAO,IAAI,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,GAAI,IAClC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, Icon, Actions, Text, defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport { ArticleListHeaderProps } from './ArticleList.types';\n\nconst StyledHeaderText = styled(Text)`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  flex-grow: 1;\n`;\n\nconst StyledIcon = styled(Icon)(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      min-width: calc(3 * ${spacing});\n    `;\n  }\n);\n\nStyledIcon.defaultProps = defaultThemeProp;\n\nconst ArticleListHeader: FunctionComponent<ArticleListHeaderProps> = ({ icon, title, actions }) => {\n  return (\n    <Flex container={{ alignItems: 'center', gap: 1, pad: [1.5, 2] }}>\n      {icon && <StyledIcon name={icon} />}\n      <StyledHeaderText variant='h2'>{title}</StyledHeaderText>\n      {actions && <Actions items={actions} />}\n    </Flex>\n  );\n};\n\nexport default ArticleListHeader;\n"]}

package/lib/components/ArticleList/ArticleSummary.d.ts

@@ -0,0 +1,7 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { ArticleSummaryProps } from './ArticleList.types';
+export declare const StyledQuickFilters: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const ArticleSummary: FunctionComponent<ArticleSummaryProps & ForwardProps>;
+export default ArticleSummary;
+//# sourceMappingURL=ArticleSummary.d.ts.map

package/lib/components/ArticleList/ArticleSummary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleSummary.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAML,YAAY,EAMb,MAAM,yBAAyB,CAAC;AAUjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAqC1D,eAAO,MAAM,kBAAkB,yGAW7B,CAAC;AAGH,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAsEzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/ArticleList/ArticleSummary.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { CardHeader, CardContent, CardFooter, Link, Text, StyledText, Actions, Flex, Tag, defaultThemeProp } from '@pega/cosmos-react-core';
+import { StyledCard } from '@pega/cosmos-react-core/lib/components/Card/Card';
+import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
+import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
+import { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';
+import { StyledBareButton } from '@pega/cosmos-react-core/lib/components/Button/BareButton';
+import ArticleRating from '../Article/ArticleRating';
+import ArticleMeta from '../Article/ArticleMeta';
+const ArticleCard = styled(StyledCard)(({ theme: { base: { spacing, palette } } }) => {
+    return css `
+      &:not(:last-child) {
+        border-block-end: 0.0625rem solid ${palette['border-line']};
+        border-radius: 0;
+        padding-block-end: ${spacing};
+      }
+      &&& {
+        border-radius: 0;
+        > ${StyledCardHeader} {
+          padding-block-start: 0;
+          padding-inline: 0;
+        }
+        > ${StyledCardContent}, > ${StyledCardFooter} {
+          padding-inline: 0;
+        }
+        > ${StyledCardContent} {
+          padding-block-end: ${spacing};
+        }
+        > ${StyledCardContent} > ${StyledText} {
+          display: -webkit-box;
+          -webkit-line-clamp: 3;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+      }
+    `;
+});
+export const StyledQuickFilters = styled.div(({ theme }) => {
+    const { base: { spacing } } = theme;
+    return css `
+    ${StyledBareButton} {
+      margin-inline-start: 0;
+      margin-block-start: ${spacing};
+    }
+  `;
+});
+StyledQuickFilters.defaultProps = defaultThemeProp;
+const ArticleSummary = (props) => {
+    const { articleId, href, title, abstract, onTitleClick, primaryActions, meta, quickFilters, onQuickFilterClick, feedback, ...restProps } = props;
+    return (_jsxs(ArticleCard, { as: 'li', role: 'article', ...restProps, children: [_jsxs(CardHeader, { container: { alignItems: 'start', justify: 'between' }, children: [_jsx(Link, { href: href ?? '/', onClick: onTitleClick, children: title }), primaryActions?.length && _jsx(Actions, { items: primaryActions })] }), _jsx(CardContent, { children: _jsx(Text, { children: abstract }) }), _jsxs(CardFooter, { children: [feedback && (_jsx(Flex, { container: { pad: [0.5, undefined] }, item: {
+                            grow: 1,
+                            basis: '100%'
+                        }, children: _jsx(ArticleRating, { ...feedback,
+                            onReaction: reaction => {
+                                feedback?.onReaction(articleId, reaction);
+                            } }) })), meta && _jsx(ArticleMeta, { ...meta }), quickFilters && quickFilters.length > 0 && (_jsx(Flex, { container: { gap: 0.5, wrap: 'wrap', pad: [undefined, undefined, 0.5] }, item: {
+                            grow: 1,
+                            basis: '100%'
+                        }, as: StyledQuickFilters, children: quickFilters.map(({ id, name }) => (_jsx(Tag, { onClick: onQuickFilterClick ? e => onQuickFilterClick?.({ id, name }, e) : undefined, children: `#${name}` }, id))) }))] })] }));
+};
+export default ArticleSummary;
+//# sourceMappingURL=ArticleSummary.js.map

package/lib/components/ArticleList/ArticleSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleSummary.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleSummary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  CardHeader,\n  CardContent,\n  CardFooter,\n  Link,\n  Text,\n  ForwardProps,\n  StyledText,\n  Actions,\n  Flex,\n  Tag,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\nimport { StyledCard } from '@pega/cosmos-react-core/lib/components/Card/Card';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';\nimport { StyledBareButton } from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport ArticleRating from '../Article/ArticleRating';\nimport ArticleMeta from '../Article/ArticleMeta';\n\nimport { ArticleSummaryProps } from './ArticleList.types';\n\nconst ArticleCard = styled(StyledCard)(\n  ({\n    theme: {\n      base: { spacing, palette }\n    }\n  }) => {\n    return css`\n      &:not(:last-child) {\n        border-block-end: 0.0625rem solid ${palette['border-line']};\n        border-radius: 0;\n        padding-block-end: ${spacing};\n      }\n      &&& {\n        border-radius: 0;\n        > ${StyledCardHeader} {\n          padding-block-start: 0;\n          padding-inline: 0;\n        }\n        > ${StyledCardContent}, > ${StyledCardFooter} {\n          padding-inline: 0;\n        }\n        > ${StyledCardContent} {\n          padding-block-end: ${spacing};\n        }\n        > ${StyledCardContent} > ${StyledText} {\n          display: -webkit-box;\n          -webkit-line-clamp: 3;\n          -webkit-box-orient: vertical;\n          overflow: hidden;\n        }\n      }\n    `;\n  }\n);\n\nexport const StyledQuickFilters = styled.div(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n\n  return css`\n    ${StyledBareButton} {\n      margin-inline-start: 0;\n      margin-block-start: ${spacing};\n    }\n  `;\n});\nStyledQuickFilters.defaultProps = defaultThemeProp;\n\nconst ArticleSummary: FunctionComponent<ArticleSummaryProps & ForwardProps> = (\n  props: ArticleSummaryProps\n) => {\n  const {\n    articleId,\n    href,\n    title,\n    abstract,\n    onTitleClick,\n    primaryActions,\n    meta,\n    quickFilters,\n    onQuickFilterClick,\n    feedback,\n    ...restProps\n  } = props;\n  return (\n    <ArticleCard as='li' role='article' {...restProps}>\n      <CardHeader container={{ alignItems: 'start', justify: 'between' }}>\n        <Link href={href ?? '/'} onClick={onTitleClick}>\n          {title}\n        </Link>\n        {primaryActions?.length && <Actions items={primaryActions} />}\n      </CardHeader>\n\n      <CardContent>\n        <Text>{abstract}</Text>\n      </CardContent>\n      <CardFooter>\n        {feedback && (\n          <Flex\n            container={{ pad: [0.5, undefined] }}\n            item={{\n              grow: 1,\n              basis: '100%'\n            }}\n          >\n            <ArticleRating\n              {...{\n                ...feedback,\n                onReaction: reaction => {\n                  feedback?.onReaction(articleId, reaction);\n                }\n              }}\n            />\n          </Flex>\n        )}\n        {meta && <ArticleMeta {...meta} />}\n        {quickFilters && quickFilters.length > 0 && (\n          <Flex\n            container={{ gap: 0.5, wrap: 'wrap', pad: [undefined, undefined, 0.5] }}\n            item={{\n              grow: 1,\n              basis: '100%'\n            }}\n            as={StyledQuickFilters}\n          >\n            {quickFilters.map(({ id, name }) => (\n              <Tag\n                key={id}\n                onClick={\n                  onQuickFilterClick ? e => onQuickFilterClick?.({ id, name }, e) : undefined\n                }\n              >{`#${name}`}</Tag>\n            ))}\n          </Flex>\n        )}\n      </CardFooter>\n    </ArticleCard>\n  );\n};\n\nexport default ArticleSummary;\n"]}

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

@@ -0,0 +1,6 @@
+export { default } from './ArticleList';
+export type { ArticleListProps } from './ArticleList.types';
+export { default as ArticleSummary } from './ArticleSummary';
+export type { ArticleSummaryProps, Articles, QuickFilter } from './ArticleList.types';
+export { default as ArticleListFilter } from './ArticleListFilter';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/lib/components/ArticleList/index.js

@@ -0,0 +1,4 @@
+export { default } from './ArticleList';
+export { default as ArticleSummary } from './ArticleSummary';
+export { default as ArticleListFilter } from './ArticleListFilter';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ArticleList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["export { default } from './ArticleList';\nexport type { ArticleListProps } from './ArticleList.types';\nexport { default as ArticleSummary } from './ArticleSummary';\nexport type { ArticleSummaryProps, Articles, QuickFilter } from './ArticleList.types';\nexport { default as ArticleListFilter } from './ArticleListFilter';\n"]}

package/lib/components/Assignments/Assignments.d.ts

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import { TaskItemProps } from '../Tasks/TaskList';
+export interface AssignmentsProps extends NoChildrenProp {
+    /** An array of TaskItemProps to generate the list. */
+    items: TaskItemProps[];
+    /** Integer representing the total count of tasks. */
+    count: number;
+    /**
+     * Controls the collapsed state of the assignments list.
+     * @default false
+     */
+    collapsed?: boolean;
+    /**
+     * Call when the user clicks the collapsed element.
+     */
+    onToggleCollapsed?: () => void;
+}
+declare const Assignments: FC<ForwardProps & AssignmentsProps>;
+export default Assignments;
+//# sourceMappingURL=Assignments.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Assignments.d.ts","sourceRoot":"","sources":["../../../src/components/Assignments/Assignments.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AAEpC,OAAO,EAGL,YAAY,EACZ,cAAc,EAQf,MAAM,yBAAyB,CAAC;AAEjC,OAAiB,EAAY,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAItE,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,sDAAsD;IACtD,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AAED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,YAAY,GAAG,gBAAgB,CA0DpD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Assignments/Assignments.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { CardHeader, useI18n, EmptyState, ExpandCollapse, Icon, Text, Count, Flex, useUID } from '@pega/cosmos-react-core';
+import TaskList, { TaskItem } from '../Tasks/TaskList';
+import { StyledAssignments, StyledCardContent, StyledExpandButton } from './Assignments.styles';
+const Assignments = ({ items, count, collapsed, onToggleCollapsed, ...restProps }) => {
+    const openItem = items.find(item => item.content);
+    const t = useI18n();
+    const assignmentsId = useUID();
+    const TaskItems = useMemo(() => {
+        return openItem ? _jsx(TaskItem, { ...openItem }) : _jsx(TaskList, { items: items });
+    }, [items, openItem]);
+    const tasks = (_jsx(StyledCardContent, { openItem: openItem, children: items.length > 0 ? TaskItems : _jsx(EmptyState, {}) }));
+    const header = (_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [typeof collapsed === 'boolean' && _jsx(Icon, { name: 'caret-right' }), _jsx(Text, { variant: 'h2', children: t('assignments') }), _jsx(Count, { children: count })] }));
+    return (_jsxs(StyledAssignments, { ...restProps, openItem: !!openItem, "data-app-region": true, children: [!openItem && (_jsxs(CardHeader, { container: { justify: 'start', alignItems: 'center', gap: 1 }, children: [typeof collapsed === 'boolean' && onToggleCollapsed && (_jsx(StyledExpandButton, { type: 'button', variant: 'text', onClick: () => {
+                            onToggleCollapsed();
+                        }, "aria-controls": assignmentsId, "aria-expanded": !collapsed ? 'true' : 'false', "aria-label": t('assignments'), children: header })), collapsed === undefined && header] })), typeof collapsed === 'boolean' && onToggleCollapsed && !openItem ? (_jsx(ExpandCollapse, { collapsed: collapsed, children: tasks })) : (tasks)] }));
+};
+export default Assignments;
+//# sourceMappingURL=Assignments.js.map