@pega/cosmos-react-cs 4.0.0-dev.17.1 → 4.0.0-dev.18.0

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

@@ -1 +1 @@
-{"version":3,"file":"ArticleList.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  ReactNode,\n  ReactElement,\n  forwardRef,\n  Ref,\n  PropsWithoutRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, useI18n, defaultThemeProp, BaseProps, ForwardProps } from '@pega/cosmos-react-core';\nimport { StyledCard } from '@pega/cosmos-react-core/lib/components/Card/Card';\n\nimport ArticleListHeader from './ArticleListHeader';\nimport SummarySkeleton from './SummarySkeleton';\n\nexport interface ArticleListProps extends BaseProps {\n  /** Search/filtering criteria for article list */\n  header?: ReactElement<typeof ArticleListHeader>;\n  /** Content for article list */\n  children?: ReactNode;\n  /** Prop to check visibility of skeleton */\n  skeletonize: boolean;\n  /** Footer for article list */\n  footer?: ReactNode;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst defaultProps: Partial<ArticleListProps> = {};\nconst StyledSummaryList = styled.ul``;\nconst StyledArticleList = styled.div(props => {\n  const { theme } = props;\n  return css`\n    max-height: inherit;\n    overflow: auto;\n    padding: 0 calc(2 * ${theme.base.spacing});\n    background: ${theme.base.palette['primary-background']};\n    border-radius: ${theme.components.card['border-radius']};\n    ${StyledCard} {\n      margin-bottom: calc(2 * ${theme.base.spacing});\n    }\n    ${StyledSummaryList} {\n      flex-grow: 1;\n      margin: 0 0 ${theme.base.spacing} 0;\n      list-style-type: none;\n      > li:not(:last-child) {\n        border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n        border-radius: 0;\n        padding-bottom: ${theme.base.spacing};\n        margin-bottom: ${theme.base.spacing};\n      }\n    }\n  `;\n});\n\nStyledArticleList.defaultProps = defaultThemeProp;\n\nconst StyledArticleListHeader = styled.div(props => {\n  const { theme } = props;\n  return css`\n    flex-shrink: 0;\n    position: sticky;\n    top: 0;\n    background: ${theme.base.palette['primary-background']};\n    padding: calc(2 * ${theme.base.spacing}) 0 0 0;\n    z-index: 2;\n  `;\n});\n\nStyledArticleListHeader.defaultProps = defaultThemeProp;\n\nconst StyledArticleListFooter = styled.div(props => {\n  const { theme } = props;\n  return css`\n    flex-shrink: 0;\n    position: sticky;\n    bottom: 0;\n    background: ${theme.base.palette['primary-background']};\n    padding: ${theme.base.spacing} 0;\n    z-index: 2;\n  `;\n});\n\nStyledArticleListFooter.defaultProps = defaultThemeProp;\n\nconst ArticleList: FunctionComponent<ArticleListProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ArticleListProps>, ref: Ref<HTMLDivElement>) => {\n    const { header, children, skeletonize, footer, ...restProps } = props;\n\n    const t = useI18n();\n\n    return (\n      <Flex\n        container={{ direction: 'column' }}\n        as={StyledArticleList}\n        aria-label={t('article_list_label_a11y')}\n        ref={ref}\n        {...restProps}\n      >\n        {header && (\n          <Flex\n            container\n            as={StyledArticleListHeader}\n            aria-label={t('article_list_filter_label_a11y')}\n          >\n            {header}\n          </Flex>\n        )}\n        <Flex container={{ direction: 'column' }} as={StyledSummaryList} role='feed'>\n          {skeletonize ? (\n            <>\n              <SummarySkeleton />\n              <SummarySkeleton />\n              <SummarySkeleton />\n            </>\n          ) : (\n            children\n          )}\n        </Flex>\n        {footer && (\n          <Flex container as={StyledArticleListFooter}>\n            {footer}\n          </Flex>\n        )}\n      </Flex>\n    );\n  }\n);\n\nArticleList.defaultProps = defaultProps;\n\nexport default ArticleList;\n"]}
+{"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  useLayoutEffect\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} from '@pega/cosmos-react-core';\n\nimport ArticleListFilter from './ArticleListFilter';\nimport ArticleSummary from './ArticleSummary';\nimport { ArticleListProps, ArticleSummaryProps } from './ArticleList.types';\nimport ArticleListHeader from './ArticleListHeader';\n\nconst StyledSummaryList = styled.ul``;\n\nconst StyledArticleList = styled.div(props => {\n  const { theme } = props;\n  return css`\n    max-height: inherit;\n    overflow: auto;\n    padding: 0 calc(2 * ${theme.base.spacing});\n    background: ${theme.base.palette['primary-background']};\n    border-radius: ${theme.components.card['border-radius']};\n    > div {\n      margin: ${theme.base.spacing} 0;\n    }\n\n    ${StyledSummaryList} {\n      flex-grow: 1;\n      margin: 0 0 ${theme.base.spacing} 0;\n      list-style-type: none;\n      > li:not(:last-child) {\n        border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n        border-radius: 0;\n        padding-bottom: ${theme.base.spacing};\n        margin-bottom: ${theme.base.spacing};\n      }\n    }\n  `;\n});\nStyledArticleList.defaultProps = defaultThemeProp;\n\nconst ArticleList: FunctionComponent<ArticleListProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ArticleListProps>, ref: Ref<HTMLDivElement>) => {\n    const {\n      header,\n      suggested,\n      followed,\n      search,\n      onTabClick,\n      activeTab,\n      loading = false,\n      onQuickFilterClick,\n      ...restProps\n    } = props;\n    const t = useI18n();\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      })[] = [];\n\n      if (suggested)\n        tabsArr.push({\n          id: t('suggested'),\n          name: t('suggested'),\n          count: suggested?.count,\n          content: suggested.articles ?? []\n        });\n\n      if (search)\n        tabsArr.push({\n          id: t('search'),\n          name: t('search'),\n          count: search?.count,\n          content: search?.articles ?? []\n        });\n\n      if (followed)\n        tabsArr.push({\n          id: t('followed'),\n          name: t('followed'),\n          count: followed?.count,\n          content: followed?.articles ?? []\n        });\n\n      return tabsArr;\n    }, [suggested, followed, search]);\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    useLayoutEffect(() => {\n      if (loading && document.activeElement instanceof HTMLElement) {\n        activeElementRef.current = document.activeElement;\n      }\n      if (!loading && search?.quickFilters?.length === 0) {\n        activeElementRef.current?.focus();\n        activeElementRef.current = null;\n      }\n    }, [loading]);\n\n    const articleContent = ({\n      index,\n      content\n    }: {\n      index: number;\n      count?: Tab['count'];\n      content: ArticleSummaryProps[];\n    }) => {\n      return (\n        <div\n          ref={el => {\n            if (el) articleContentRefs.current[index] = el;\n          }}\n        >\n          {activeTab === t('search') && search && <ArticleListFilter {...search} />}\n          {activeTab === t('followed') && followed && <ArticleListFilter {...followed} />}\n          {loading ? (\n            <Progress visible={!!loading} focusOnVisible placement='block' message={t('loading')} />\n          ) : (\n            <Flex container={{ direction: 'column' }} as={StyledSummaryList} role='feed'>\n              {content.length > 0 ? (\n                content.map(\n                  ({\n                    href,\n                    articleId,\n                    title: summaryHeader,\n                    abstract,\n                    meta,\n                    onTitleClick,\n                    quickFilters,\n                    primaryActions: summaryActions\n                  }) => (\n                    <ArticleSummary\n                      key={articleId.toString()}\n                      articleId={articleId}\n                      href={href}\n                      title={summaryHeader}\n                      abstract={abstract}\n                      onTitleClick={onTitleClick}\n                      primaryActions={summaryActions}\n                      meta={meta}\n                      quickFilters={quickFilters}\n                      onQuickFilterClick={onQuickFilterClick}\n                    />\n                  )\n                )\n              ) : (\n                <EmptyState />\n              )}\n            </Flex>\n          )}\n        </div>\n      );\n    };\n\n    return (\n      <Flex\n        container={{ direction: 'column' }}\n        as={StyledArticleList}\n        aria-label={t('article_list_label_a11y')}\n        ref={ref}\n        {...(loading ? { 'aria-busy': true } : undefined)}\n        {...restProps}\n      >\n        {header && (\n          <ArticleListHeader icon={header.icon} title={header.title} actions={header.actions} />\n        )}\n\n        {tabs.length > 1 && (\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        )}\n\n        {tabs.map(({ id, content }, index) => {\n          if (tabs.length > 1) {\n            return (\n              <TabPanel key={id} tabId={id} currentTabId={activeTab}>\n                {articleContent({ content, index })}\n              </TabPanel>\n            );\n          }\n\n          if (tabs.length === 1) {\n            return articleContent({ content, index });\n          }\n\n          return <EmptyState />;\n        })}\n      </Flex>\n    );\n  }\n);\n\nexport default ArticleList;\n"]}

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

@@ -0,0 +1,79 @@
+import { MouseEvent, MouseEventHandler } from 'react';
+import { Action, BaseProps, ComboBoxProps, OmitStrict, RequireAtLeastOne, SearchInputProps } from '@pega/cosmos-react-core';
+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;
+    /** 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;
+    /** callback fired when quick filter is clicked */
+    onQuickFilterClick?: (quickFilterParam: QuickFilter, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+}, 'suggested' | 'followed' | 'search'>;
+export interface QuickFilter {
+    /** Unique id of quick Filter */
+    id: string;
+    /** Name of quick Filter */
+    name: string;
+}
+//# 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 { 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  /** 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    /** callback fired when quick filter is clicked */\n    onQuickFilterClick?: (\n      quickFilterParam: QuickFilter,\n      event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>\n    ) => 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"]}

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,EAIb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AA6CvD,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,QAAQ,CAAC,GAAG,YAAY,CA2DnF,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/ArticleList/ArticleListFilter.js

@@ -0,0 +1,60 @@
+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 } 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%;
+    gap: 0;
+
+    > 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 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} 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    gap: 0;\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\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

@@ -1,22 +1,5 @@
-import { FunctionComponent, ReactNode, EventHandler, MouseEvent, ReactElement } from 'react';
-import { SearchInput, BaseProps, AsProp, Action, Icon } from '@pega/cosmos-react-core';
-export interface ArticleListHeaderProps extends BaseProps, AsProp {
-    /** Header Icon and Text */
-    icon?: ReactElement<typeof Icon>;
-    headerText: string;
-    /** Integer representing the total count of articles */
-    count?: number;
-    /** Primary data: Drop in elements related to search or filtering of articles */
-    primary: {
-        search: ReactElement<typeof SearchInput>;
-        followedFilter?: ReactElement;
-        actions?: Action[];
-    };
-    /** Any other filter components to be passed */
-    secondary?: ReactNode;
-    /** Callback that triggers on enter */
-    onSubmit?: EventHandler<MouseEvent>;
-}
+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

@@ -1 +1 @@
-{"version":3,"file":"ArticleListHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleListHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG7F,OAAO,EAKL,WAAW,EAEX,SAAS,EACT,MAAM,EACN,MAAM,EACN,IAAI,EAIL,MAAM,yBAAyB,CAAC;AAGjC,MAAM,WAAW,sBAAuB,SAAQ,SAAS,EAAE,MAAM;IAC/D,2BAA2B;IAC3B,IAAI,CAAC,EAAE,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;IACjC,UAAU,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gFAAgF;IAChF,OAAO,EAAE;QACP,MAAM,EAAE,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;QACzC,cAAc,CAAC,EAAE,YAAY,CAAC;QAC9B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;KACpB,CAAC;IACF,+CAA+C;IAC/C,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;CACrC;AA0DD,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,CAuDhE,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"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

@@ -1,67 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from 'styled-components';
-import { Button, Flex, Form, MenuButton, useI18n, Text, defaultThemeProp, Count } from '@pega/cosmos-react-core';
-import { StyledFormContent } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm';
-const StyledArticleHeader = styled.div(({ theme }) => {
-    return css `
-    width: 100%;
-    gap: 0;
-
-    button[type='submit'] {
-      height: 0;
-      min-height: 0;
-      width: 0.0625rem;
-      clip-path: inset(50%);
-      clip: rect(0, 0, 0, 0);
-      margin: 0;
-      overflow: hidden;
-      padding: 0;
-      border: 0;
-    }
-    > div:last-child {
-      margin: 0;
-    }
-
-    ${StyledFormContent} {
-      gap: ${theme.base.spacing};
-    }
-  `;
-});
-StyledArticleHeader.defaultProps = defaultThemeProp;
-const StyledSecondaryContainer = styled(Flex) `
-  margin: 0.5rem 0;
-  & > * {
-    flex-grow: 1;
-  }
-`;
-// This below style will be removed once we have margin auto support from Flex component
-const StyledHeaderActions = styled.div `
-  margin-left: auto;
-
-  .radio-check {
-    margin: 0;
-  }
-`;
-const StyledArticleListHeaderText = styled(Text) `
+import { Flex, Icon, Actions, Text, defaultThemeProp } from '@pega/cosmos-react-core';
+const StyledHeaderText = styled(Text) `
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
-  flex: 1;
+  flex-grow: 1;
 `;
-const Locale = {
-    // FIXME: TR
-    moreActions: 'More actions'
-};
-const ArticleListHeader = (props) => {
-    const { as = Form, primary, secondary, onSubmit, icon, headerText, count, ...restProps } = props;
-    const t = useI18n();
-    return (_jsxs(StyledArticleHeader, { as: as, actions: _jsx(Button, { type: 'submit', "aria-hidden": 'true', tabIndex: '-1', children: t('article_list_header_submit_label') }), role: 'search', onSubmit: (ev) => {
-            ev.preventDefault();
-            if (onSubmit)
-                onSubmit(ev);
-        }, ...restProps, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1, pad: [0, 0, 1] }, children: [icon, _jsx(StyledArticleListHeaderText, { variant: 'h2', children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [headerText, typeof count === 'number' && _jsx(Count, { children: count })] }) }), primary.actions && (_jsx(MenuButton, { variant: 'simple', text: Locale.moreActions, icon: 'more', iconOnly: true, menu: {
-                            items: primary.actions.map(({ text, ...rest }) => ({ ...rest, primary: text }))
-                        } }))] }), _jsxs(Flex, { container: { alignItems: 'center', gap: 1, pad: [0.5, 0] }, children: [_jsx(Flex, { item: { grow: 1 }, children: primary.search }), primary.followedFilter && (_jsx(Flex, { container: true, as: StyledHeaderActions, children: primary.followedFilter }))] }), secondary && (_jsx(StyledSecondaryContainer, { container: { gap: 1 }, children: secondary }))] }));
+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 }, 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

@@ -1 +1 @@
-{"version":3,"file":"ArticleListHeader.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleListHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, ReactNode, EventHandler, MouseEvent, ReactElement } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Flex,\n  Form,\n  MenuButton,\n  SearchInput,\n  useI18n,\n  BaseProps,\n  AsProp,\n  Action,\n  Icon,\n  Text,\n  defaultThemeProp,\n  Count\n} from '@pega/cosmos-react-core';\nimport { StyledFormContent } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm';\n\nexport interface ArticleListHeaderProps extends BaseProps, AsProp {\n  /** Header Icon and Text */\n  icon?: ReactElement<typeof Icon>;\n  headerText: string;\n  /** Integer representing the total count of articles */\n  count?: number;\n  /** Primary data: Drop in elements related to search or filtering of articles */\n  primary: {\n    search: ReactElement<typeof SearchInput>;\n    followedFilter?: ReactElement;\n    actions?: Action[];\n  };\n  /** Any other filter components to be passed */\n  secondary?: ReactNode;\n  /** Callback that triggers on enter */\n  onSubmit?: EventHandler<MouseEvent>;\n}\n\nconst StyledArticleHeader = styled.div(({ theme }) => {\n  return css`\n    width: 100%;\n    gap: 0;\n\n    button[type='submit'] {\n      height: 0;\n      min-height: 0;\n      width: 0.0625rem;\n      clip-path: inset(50%);\n      clip: rect(0, 0, 0, 0);\n      margin: 0;\n      overflow: hidden;\n      padding: 0;\n      border: 0;\n    }\n    > div:last-child {\n      margin: 0;\n    }\n\n    ${StyledFormContent} {\n      gap: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledArticleHeader.defaultProps = defaultThemeProp;\n\nconst StyledSecondaryContainer = styled(Flex)`\n  margin: 0.5rem 0;\n  & > * {\n    flex-grow: 1;\n  }\n`;\n\n// This below style will be removed once we have margin auto support from Flex component\nconst StyledHeaderActions = styled.div`\n  margin-left: auto;\n\n  .radio-check {\n    margin: 0;\n  }\n`;\n\nconst StyledArticleListHeaderText = styled(Text)`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  flex: 1;\n`;\n\nconst Locale = {\n  // FIXME: TR\n  moreActions: 'More actions'\n};\n\nconst ArticleListHeader: FunctionComponent<ArticleListHeaderProps> = (\n  props: ArticleListHeaderProps\n) => {\n  const { as = Form, primary, secondary, onSubmit, icon, headerText, count, ...restProps } = props;\n  const t = useI18n();\n\n  return (\n    <StyledArticleHeader\n      as={as}\n      actions={\n        <Button type='submit' aria-hidden='true' tabIndex='-1'>\n          {t('article_list_header_submit_label')}\n        </Button>\n      }\n      role='search'\n      onSubmit={(ev: MouseEvent) => {\n        ev.preventDefault();\n        if (onSubmit) onSubmit(ev);\n      }}\n      {...restProps}\n    >\n      <Flex container={{ alignItems: 'center', gap: 1, pad: [0, 0, 1] }}>\n        {icon}\n        <StyledArticleListHeaderText variant='h2'>\n          <Flex container={{ alignItems: 'center', gap: 1 }}>\n            {headerText}\n            {typeof count === 'number' && <Count>{count}</Count>}\n          </Flex>\n        </StyledArticleListHeaderText>\n\n        {primary.actions && (\n          <MenuButton\n            variant='simple'\n            text={Locale.moreActions}\n            icon='more'\n            iconOnly\n            menu={{\n              items: primary.actions.map(({ text, ...rest }) => ({ ...rest, primary: text }))\n            }}\n          />\n        )}\n      </Flex>\n      <Flex container={{ alignItems: 'center', gap: 1, pad: [0.5, 0] }}>\n        <Flex item={{ grow: 1 }}>{primary.search}</Flex>\n        {primary.followedFilter && (\n          <Flex container as={StyledHeaderActions}>\n            {primary.followedFilter}\n          </Flex>\n        )}\n      </Flex>\n      {secondary && (\n        <StyledSecondaryContainer container={{ gap: 1 }}>{secondary}</StyledSecondaryContainer>\n      )}\n    </StyledArticleHeader>\n  );\n};\n\nexport default ArticleListHeader;\n"]}
+{"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,aAC9C,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 }}>\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

@@ -1,14 +1,7 @@
-import { FunctionComponent, ReactElement, ReactNode } from 'react';
-import { Link, Text, BaseProps, ForwardProps } from '@pega/cosmos-react-core';
-export interface ArticleSummaryProps extends BaseProps {
-    /** Article summary title */
-    header?: ReactElement<typeof Text> | ReactElement<typeof Link>;
-    /** Summary of the article */
-    content: ReactNode;
-    /** Array of meta data rendered through MetaList component */
-    meta?: (ReactElement | string)[];
-    articleID: string;
-}
+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

@@ -1 +1 @@
-{"version":3,"file":"ArticleSummary.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGnE,OAAO,EAIL,IAAI,EAEJ,IAAI,EACJ,SAAS,EACT,YAAY,EAEb,MAAM,yBAAyB,CAAC;AAMjC,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,4BAA4B;IAC5B,MAAM,CAAC,EAAE,YAAY,CAAC,OAAO,IAAI,CAAC,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;IAC/D,6BAA6B;IAC7B,OAAO,EAAE,SAAS,CAAC;IACnB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,CAAC,YAAY,GAAG,MAAM,CAAC,EAAE,CAAC;IACjC,SAAS,EAAE,MAAM,CAAC;CACnB;AAoBD,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAezE,CAAC;AAIF,eAAe,cAAc,CAAC"}
+{"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;AASjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AA2B1D,eAAO,MAAM,kBAAkB,yGAW7B,CAAC;AAGH,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAkDzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/ArticleList/ArticleSummary.js

@@ -1,30 +1,46 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from 'styled-components';
-import { CardContent, CardFooter, CardHeader, MetaList, StyledText } from '@pega/cosmos-react-core';
+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';
-const defaultProps = {};
-const ArticleCard = styled(StyledCard) `
-  &&& {
-    > ${StyledCardHeader}, > ${StyledCardContent}, > ${StyledCardFooter} {
-      padding-left: 0;
-      padding-right: 0;
+import { StyledBareButton } from '@pega/cosmos-react-core/lib/components/Button/BareButton';
+import ArticleMeta from '../Article/ArticleMeta';
+const ArticleCard = styled(StyledCard)(({ theme: { base: { spacing } } }) => {
+    return css `
+      &&& {
+        > ${StyledCardHeader}, > ${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};
     }
-
-    > ${StyledCardContent} > ${StyledText} {
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-    }
-  }
-`;
+  `;
+});
+StyledQuickFilters.defaultProps = defaultThemeProp;
 const ArticleSummary = (props) => {
-    const { header, content, meta, articleID, ...restProps } = props;
-    return (_jsxs(ArticleCard, { as: 'li', role: 'article', ...restProps, children: [header ? _jsx(CardHeader, { children: header }) : null, _jsx(CardContent, { children: content }), meta && (_jsx(CardFooter, { children: _jsx(MetaList, { items: meta }) }))] }, articleID));
+    const { articleId, href, title, abstract, onTitleClick, primaryActions, meta, quickFilters, onQuickFilterClick, ...restProps } = props;
+    return (_jsxs(ArticleCard, { as: 'li', role: 'article', ...restProps, children: [_jsxs(CardHeader, { container: { alignItems: 'start' }, 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: [meta && _jsx(ArticleMeta, { ...meta }), quickFilters && quickFilters.length > 0 && (_jsx(Flex, { container: { gap: 0.5, pad: [0.5, undefined], wrap: 'wrap' }, item: {
+                            grow: 1,
+                            basis: '100%'
+                        }, as: StyledQuickFilters, children: quickFilters.map(({ id, name }) => (_jsx(Tag, { onClick: onQuickFilterClick ? e => onQuickFilterClick?.({ id, name }, e) : undefined, children: `#${name}` }))) }))] })] }, articleId));
 };
-ArticleSummary.defaultProps = defaultProps;
 export default ArticleSummary;
 //# sourceMappingURL=ArticleSummary.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ArticleSummary.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleSummary.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,WAAW,EACX,UAAU,EACV,UAAU,EAEV,QAAQ,EAIR,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,kDAAkD,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAC5F,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAY1F,MAAM,YAAY,GAAiC,EAAE,CAAC;AAEtD,MAAM,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA;;QAE9B,gBAAgB,OAAO,iBAAiB,OAAO,gBAAgB;;;;;QAK/D,iBAAiB,MAAM,UAAU;;;;;;;CAOxC,CAAC;AAEF,MAAM,cAAc,GAA0D,CAC5E,KAA0B,EAC1B,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACjE,OAAO,CACL,MAAC,WAAW,IAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,KAAqB,SAAS,aAC9D,MAAM,CAAC,CAAC,CAAC,KAAC,UAAU,cAAE,MAAM,GAAc,CAAC,CAAC,CAAC,IAAI,EAClD,KAAC,WAAW,cAAE,OAAO,GAAe,EACnC,IAAI,IAAI,CACP,KAAC,UAAU,cACT,KAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,GAAI,GACd,CACd,KAPsC,SAAS,CAQpC,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,YAAY,CAAC;AAE3C,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, ReactElement, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  CardContent,\n  CardFooter,\n  CardHeader,\n  Link,\n  MetaList,\n  Text,\n  BaseProps,\n  ForwardProps,\n  StyledText\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';\n\nexport interface ArticleSummaryProps extends BaseProps {\n  /** Article summary title */\n  header?: ReactElement<typeof Text> | ReactElement<typeof Link>;\n  /** Summary of the article */\n  content: ReactNode;\n  /** Array of meta data rendered through MetaList component */\n  meta?: (ReactElement | string)[];\n  articleID: string;\n}\n\nconst defaultProps: Partial<ArticleSummaryProps> = {};\n\nconst ArticleCard = styled(StyledCard)`\n  &&& {\n    > ${StyledCardHeader}, > ${StyledCardContent}, > ${StyledCardFooter} {\n      padding-left: 0;\n      padding-right: 0;\n    }\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\nconst ArticleSummary: FunctionComponent<ArticleSummaryProps & ForwardProps> = (\n  props: ArticleSummaryProps\n) => {\n  const { header, content, meta, articleID, ...restProps } = props;\n  return (\n    <ArticleCard as='li' role='article' key={articleID} {...restProps}>\n      {header ? <CardHeader>{header}</CardHeader> : null}\n      <CardContent>{content}</CardContent>\n      {meta && (\n        <CardFooter>\n          <MetaList items={meta} />\n        </CardFooter>\n      )}\n    </ArticleCard>\n  );\n};\n\nArticleSummary.defaultProps = defaultProps;\n\nexport default ArticleSummary;\n"]}
+{"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 ArticleMeta from '../Article/ArticleMeta';\n\nimport { ArticleSummaryProps } from './ArticleList.types';\n\nconst ArticleCard = styled(StyledCard)(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      &&& {\n        > ${StyledCardHeader}, > ${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    ...restProps\n  } = props;\n\n  return (\n    <ArticleCard as='li' role='article' key={articleId} {...restProps}>\n      <CardHeader container={{ alignItems: 'start' }}>\n        <Link href={href ?? '/'} onClick={onTitleClick}>\n          {title}\n        </Link>\n        {primaryActions?.length && <Actions items={primaryActions} />}\n      </CardHeader>\n      <CardContent>\n        <Text>{abstract}</Text>\n      </CardContent>\n      <CardFooter>\n        {meta && <ArticleMeta {...meta} />}\n        {quickFilters && quickFilters.length > 0 && (\n          <Flex\n            container={{ gap: 0.5, pad: [0.5, undefined], wrap: 'wrap' }}\n            item={{\n              grow: 1,\n              basis: '100%'\n            }}\n            as={StyledQuickFilters}\n          >\n            {quickFilters.map(({ id, name }) => (\n              <Tag\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

@@ -1,7 +1,6 @@
 export { default } from './ArticleList';
-export { ArticleListProps } from './ArticleList';
+export { ArticleListProps } from './ArticleList.types';
 export { default as ArticleSummary } from './ArticleSummary';
-export { ArticleSummaryProps } from './ArticleSummary';
-export { default as ArticleListHeader } from './ArticleListHeader';
-export { ArticleListHeaderProps } from './ArticleListHeader';
+export { 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

@@ -1 +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,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/lib/components/ArticleList/index.js

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

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

@@ -1 +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 { ArticleListProps } from './ArticleList';\nexport { default as ArticleSummary } from './ArticleSummary';\nexport { ArticleSummaryProps } from './ArticleSummary';\nexport { default as ArticleListHeader } from './ArticleListHeader';\nexport { ArticleListHeaderProps } from './ArticleListHeader';\n"]}
+{"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 { ArticleListProps } from './ArticleList.types';\nexport { default as ArticleSummary } from './ArticleSummary';\nexport { ArticleSummaryProps, Articles, QuickFilter } from './ArticleList.types';\nexport { default as ArticleListFilter } from './ArticleListFilter';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-cs",
-  "version": "4.0.0-dev.17.1",
+  "version": "4.0.0-dev.18.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/pegasystems/cosmos-react.git",
@@ -20,8 +20,8 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "4.0.0-dev.17.1",
-    "@pega/cosmos-react-dnd": "4.0.0-dev.17.1",
+    "@pega/cosmos-react-core": "4.0.0-dev.18.0",
+    "@pega/cosmos-react-dnd": "4.0.0-dev.18.0",
     "@types/react": "^16.14.24 || ^17.0.38",
     "@types/react-dom": "^16.9.14 || ^17.0.11",
     "@types/styled-components": "^5.1.26",

package/lib/components/Article/ArticleSkeleton.d.ts

@@ -1,8 +0,0 @@
-import { FunctionComponent } from 'react';
-import { BaseProps, ForwardProps } from '@pega/cosmos-react-core';
-export interface ArticleSkeletonProps extends BaseProps {
-}
-export declare const StyledArticleSkeleton: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-declare const ArticleSkeleton: FunctionComponent<ArticleSkeletonProps & ForwardProps>;
-export default ArticleSkeleton;
-//# sourceMappingURL=ArticleSkeleton.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ArticleSkeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Article/ArticleSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAKL,SAAS,EACT,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,oBAAqB,SAAQ,SAAS;CAAG;AAE1D,eAAO,MAAM,qBAAqB,yGAAe,CAAC;AAElD,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAqB3E,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/Article/ArticleSkeleton.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from 'styled-components';
-import { Flex, LineSkeleton, ParagraphSkeleton } from '@pega/cosmos-react-core';
-export const StyledArticleSkeleton = styled.div ``;
-const ArticleSkeleton = (props) => {
-    const numberOfLines = 18;
-    return (_jsx(StyledArticleSkeleton, { ...props, "aria-disabled": 'true', children: _jsx(ParagraphSkeleton, { children: Array.from({ length: numberOfLines }, (_, i) => {
-                const lines = i % 3 === 0 ? ['s', 'm'] : ['s', 's', 's'];
-                return (_jsx(Flex, { container: { alignItems: 'center' }, children: lines.map((size, j) => (
-                    // eslint-disable-next-line react/no-array-index-key
-                    _jsx(LineSkeleton, { width: size }, j))) }, i));
-            }) }) }));
-};
-export default ArticleSkeleton;
-//# sourceMappingURL=ArticleSkeleton.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ArticleSkeleton.js","sourceRoot":"","sources":["../../../src/components/Article/ArticleSkeleton.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,IAAI,EACJ,YAAY,EAEZ,iBAAiB,EAGlB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAElD,MAAM,eAAe,GAA2D,CAC9E,KAA2B,EAC3B,EAAE;IACF,MAAM,aAAa,GAAG,EAAE,CAAC;IACzB,OAAO,CACL,KAAC,qBAAqB,OAAK,KAAK,mBAAgB,MAAM,YACpD,KAAC,iBAAiB,cACf,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;gBAC9C,MAAM,KAAK,GAAiC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;gBACvF,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,YACtC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC;oBACtB,oDAAoD;oBACpD,KAAC,YAAY,IAAC,KAAK,EAAE,IAAI,IAAO,CAAC,CAAI,CACtC,CAAC,IAJ4C,CAAC,CAK1C,CACR,CAAC;YACJ,CAAC,CAAC,GACgB,GACE,CACzB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Flex,\n  LineSkeleton,\n  LineSkeletonProps,\n  ParagraphSkeleton,\n  BaseProps,\n  ForwardProps\n} from '@pega/cosmos-react-core';\n\nexport interface ArticleSkeletonProps extends BaseProps {}\n\nexport const StyledArticleSkeleton = styled.div``;\n\nconst ArticleSkeleton: FunctionComponent<ArticleSkeletonProps & ForwardProps> = (\n  props: ArticleSkeletonProps\n) => {\n  const numberOfLines = 18;\n  return (\n    <StyledArticleSkeleton {...props} aria-disabled='true'>\n      <ParagraphSkeleton>\n        {Array.from({ length: numberOfLines }, (_, i) => {\n          const lines: LineSkeletonProps['width'][] = i % 3 === 0 ? ['s', 'm'] : ['s', 's', 's'];\n          return (\n            <Flex container={{ alignItems: 'center' }} key={i}>\n              {lines.map((size, j) => (\n                // eslint-disable-next-line react/no-array-index-key\n                <LineSkeleton width={size} key={j} />\n              ))}\n            </Flex>\n          );\n        })}\n      </ParagraphSkeleton>\n    </StyledArticleSkeleton>\n  );\n};\n\nexport default ArticleSkeleton;\n"]}