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

package/lib/components/AppAnnouncement/AppAnnouncement.d.ts

@@ -0,0 +1,23 @@
+import { FunctionComponent, Ref } from 'react';
+import { BaseProps, ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
+export interface AppAnnouncementProps extends BaseProps, NoChildrenProp {
+    /** Heading text for the announcement. */
+    heading?: string;
+    /** Description text for the announcement. */
+    description?: string;
+    /** Announcement details to be displayed in form of bulleted list. */
+    details?: string[];
+    /** Url to open with What's new link. */
+    whatsNewLink?: string;
+    /** Content to populate the announcement button. */
+    whatsNewText?: string;
+    /** An image source for the decorative background. */
+    image?: string;
+    /** Callback when user dismisses the announcements. */
+    onDismiss?: () => void;
+    ref?: Ref<HTMLElement>;
+}
+export declare const StyledAppAnnouncement: import("styled-components").StyledComponent<"article", import("styled-components").DefaultTheme, Pick<AppAnnouncementProps, "image">, never>;
+declare const AppAnnouncement: FunctionComponent<AppAnnouncementProps & ForwardProps>;
+export default AppAnnouncement;
+//# sourceMappingURL=AppAnnouncement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppAnnouncement.d.ts","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAI5E,OAAO,EASL,SAAS,EACT,YAAY,EAEZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAKjC,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAOD,eAAO,MAAM,qBAAqB,8IAoFhC,CAAC;AAIH,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAkD3E,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/AppAnnouncement/AppAnnouncement.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { readableColor } from 'polished';
+import { Button, StyledButton, Text, Icon, registerIcon, useI18n, tryCatch, defaultThemeProp, useDirection } from '@pega/cosmos-react-core';
+import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
+registerIcon(timesIcon);
+const StyledDismissButton = styled.button `
+  font-size: 1.25rem;
+  border: none;
+`;
+export const StyledAppAnnouncement = styled.article(props => {
+    const { theme: { base: { palette: { 'brand-primary': brandBackground }, shadow, spacing }, components: { card: { 'border-radius': borderRadius } } }, image } = props;
+    const { end } = useDirection();
+    const color = tryCatch(() => readableColor(brandBackground));
+    return css `
+    padding: calc(2 * ${spacing});
+    background: ${brandBackground};
+    border-radius: ${borderRadius};
+    color: ${color};
+    position: relative;
+
+    &::after {
+      background: url('${image}') no-repeat;
+      background-position: ${end} bottom;
+      background-size: contain;
+      background-origin: content-box;
+      opacity: 0.2;
+      content: '';
+      display: block;
+      position: absolute;
+      width: 50%;
+      height: 100%;
+      inset-inline-end: 0;
+      bottom: 0;
+      padding: calc(2 * ${spacing});
+    }
+
+    h2 {
+      position: relative;
+      z-index: 2;
+      margin-bottom: ${spacing};
+    }
+
+    ${StyledDismissButton} {
+      position: absolute;
+      top: 0.75rem;
+      inset-inline-end: 0.75rem;
+      color: inherit;
+      z-index: 3;
+      &:enabled:hover {
+        background: #ffffff19;
+      }
+      &:enabled:focus {
+        box-shadow: ${shadow.focus};
+      }
+    }
+
+    > div {
+      width: 75%;
+      position: relative;
+      z-index: 2;
+
+      p,
+      ul {
+        padding-top: calc(2 * ${spacing});
+      }
+
+      ul {
+        padding-inline-start: calc(2 * ${spacing});
+      }
+
+      ${StyledButton} {
+        margin-top: calc(2 * ${spacing});
+        &:enabled:focus,
+        &:not([disabled]):focus {
+          box-shadow: ${shadow.focus};
+        }
+      }
+    }
+  `;
+});
+StyledAppAnnouncement.defaultProps = defaultThemeProp;
+const AppAnnouncement = forwardRef(function AppAnnouncement(props, ref) {
+    const t = useI18n();
+    const { heading, description, details, whatsNewLink, whatsNewText = t('app_announcement_whats_new_button_label'), image, onDismiss, ...restProps } = props;
+    return (_jsxs(StyledAppAnnouncement, { ...restProps, ref: ref, image: image, children: [onDismiss && (_jsx(Button, { as: StyledDismissButton, variant: 'simple', icon: true, onClick: onDismiss, "aria-label": t('app_announcement_dismiss_button_label_a11y'), children: _jsx(Icon, { name: 'times' }) })), _jsx(Text, { variant: 'h2', children: heading || t('app_announcement_details_list_header') }), _jsxs("div", { children: [description && _jsx("p", { children: description }), details && (_jsx("ul", { children: details.map((item, index) => {
+                            // eslint-disable-next-line react/no-array-index-key
+                            return _jsx("li", { children: item }, index);
+                        }) })), whatsNewLink && (_jsx(Button, { variant: 'secondary', href: whatsNewLink, target: '_blank', children: whatsNewText }))] })] }));
+});
+export default AppAnnouncement;
+//# sourceMappingURL=AppAnnouncement.js.map

package/lib/components/AppAnnouncement/AppAnnouncement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppAnnouncement.js","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  Button,\n  StyledButton,\n  Text,\n  Icon,\n  registerIcon,\n  useI18n,\n  tryCatch,\n  defaultThemeProp,\n  BaseProps,\n  ForwardProps,\n  useDirection,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nregisterIcon(timesIcon);\n\nexport interface AppAnnouncementProps extends BaseProps, NoChildrenProp {\n  /** Heading text for the announcement. */\n  heading?: string;\n  /** Description text for the announcement. */\n  description?: string;\n  /** Announcement details to be displayed in form of bulleted list. */\n  details?: string[];\n  /** Url to open with What's new link. */\n  whatsNewLink?: string;\n  /** Content to populate the announcement button. */\n  whatsNewText?: string;\n  /** An image source for the decorative background. */\n  image?: string;\n  /** Callback when user dismisses the announcements. */\n  onDismiss?: () => void;\n  ref?: Ref<HTMLElement>;\n}\n\nconst StyledDismissButton = styled.button`\n  font-size: 1.25rem;\n  border: none;\n`;\n\nexport const StyledAppAnnouncement = styled.article<Pick<AppAnnouncementProps, 'image'>>(props => {\n  const {\n    theme: {\n      base: {\n        palette: { 'brand-primary': brandBackground },\n        shadow,\n        spacing\n      },\n      components: {\n        card: { 'border-radius': borderRadius }\n      }\n    },\n    image\n  } = props;\n\n  const { end } = useDirection();\n  const color = tryCatch(() => readableColor(brandBackground));\n\n  return css`\n    padding: calc(2 * ${spacing});\n    background: ${brandBackground};\n    border-radius: ${borderRadius};\n    color: ${color};\n    position: relative;\n\n    &::after {\n      background: url('${image}') no-repeat;\n      background-position: ${end} bottom;\n      background-size: contain;\n      background-origin: content-box;\n      opacity: 0.2;\n      content: '';\n      display: block;\n      position: absolute;\n      width: 50%;\n      height: 100%;\n      inset-inline-end: 0;\n      bottom: 0;\n      padding: calc(2 * ${spacing});\n    }\n\n    h2 {\n      position: relative;\n      z-index: 2;\n      margin-bottom: ${spacing};\n    }\n\n    ${StyledDismissButton} {\n      position: absolute;\n      top: 0.75rem;\n      inset-inline-end: 0.75rem;\n      color: inherit;\n      z-index: 3;\n      &:enabled:hover {\n        background: #ffffff19;\n      }\n      &:enabled:focus {\n        box-shadow: ${shadow.focus};\n      }\n    }\n\n    > div {\n      width: 75%;\n      position: relative;\n      z-index: 2;\n\n      p,\n      ul {\n        padding-top: calc(2 * ${spacing});\n      }\n\n      ul {\n        padding-inline-start: calc(2 * ${spacing});\n      }\n\n      ${StyledButton} {\n        margin-top: calc(2 * ${spacing});\n        &:enabled:focus,\n        &:not([disabled]):focus {\n          box-shadow: ${shadow.focus};\n        }\n      }\n    }\n  `;\n});\n\nStyledAppAnnouncement.defaultProps = defaultThemeProp;\n\nconst AppAnnouncement: FunctionComponent<AppAnnouncementProps & ForwardProps> = forwardRef(\n  function AppAnnouncement(\n    props: PropsWithoutRef<AppAnnouncementProps>,\n    ref: AppAnnouncementProps['ref']\n  ) {\n    const t = useI18n();\n    const {\n      heading,\n      description,\n      details,\n      whatsNewLink,\n      whatsNewText = t('app_announcement_whats_new_button_label'),\n      image,\n      onDismiss,\n      ...restProps\n    } = props;\n\n    return (\n      <StyledAppAnnouncement {...restProps} ref={ref} image={image}>\n        {onDismiss && (\n          <Button\n            as={StyledDismissButton}\n            variant='simple'\n            icon\n            onClick={onDismiss}\n            aria-label={t('app_announcement_dismiss_button_label_a11y')}\n          >\n            <Icon name='times' />\n          </Button>\n        )}\n        <Text variant='h2'>{heading || t('app_announcement_details_list_header')}</Text>\n        <div>\n          {description && <p>{description}</p>}\n          {details && (\n            <ul>\n              {details.map((item, index) => {\n                // eslint-disable-next-line react/no-array-index-key\n                return <li key={index}>{item}</li>;\n              })}\n            </ul>\n          )}\n          {whatsNewLink && (\n            <Button variant='secondary' href={whatsNewLink} target='_blank'>\n              {whatsNewText}\n            </Button>\n          )}\n        </div>\n      </StyledAppAnnouncement>\n    );\n  }\n);\n\nexport default AppAnnouncement;\n"]}

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

@@ -0,0 +1,3 @@
+export { default } from './AppAnnouncement';
+export type { AppAnnouncementProps } from './AppAnnouncement';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}

package/lib/components/AppAnnouncement/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export { default } from './AppAnnouncement';\nexport type { AppAnnouncementProps } from './AppAnnouncement';\n"]}

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

@@ -0,0 +1,60 @@
+import { ReactNode, FunctionComponent, MouseEvent } from 'react';
+import { MenuItemProps, BaseProps, ForwardProps, NoChildrenProp, OmitStrict } from '@pega/cosmos-react-core';
+import { ArticleListHeaderProps } from '../ArticleList/ArticleList.types';
+import { ArticleRatingProps } from './ArticleRating';
+import { ArticleFooterFeedback, ArticleFooterProps } from './ArticleFooter';
+import { ArticleMetaProps } from './ArticleMeta';
+type OnReactionWithId = (articleId: BaseArticleProps['articleId'], reaction: ArticleRatingProps['reaction']) => void;
+export interface BaseArticleProps extends BaseProps, NoChildrenProp {
+    articleId: string;
+    /** Header to show icon , title and any actions on the container */
+    header?: ArticleListHeaderProps;
+    /** Control for navigating back */
+    backNavigation?: {
+        title: string;
+        onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+    };
+    /** Primary actions which needs to be displayed with an icon */
+    primaryActions?: {
+        /** Unique id for action, used in onClick callback */
+        id: string;
+        /** Label for this action, shown in tooltip and used for generating aria-label */
+        label: string;
+        /** Icon to be displayed in the button */
+        icon: string;
+        /** Callback triggered when a user clicks of presses enter on the action */
+        onClick: (id: string, e: MouseEvent<HTMLButtonElement>) => void;
+    }[];
+    /** Secondary actions that needs to be pushed under more icon */
+    secondaryActions?: {
+        id: MenuItemProps['id'];
+        text: MenuItemProps['primary'];
+        onClick: MenuItemProps['onClick'];
+    }[];
+    /** Article title */
+    title: string;
+    /** Array of meta data */
+    meta?: ArticleMetaProps;
+    /** like and dislike status of the article */
+    feedback?: OmitStrict<ArticleRatingProps, 'onReaction'> & {
+        onReaction: OnReactionWithId;
+    };
+    /** Article content */
+    content: ReactNode;
+    /** Footer */
+    footer?: OmitStrict<ArticleFooterProps, 'feedback'> & {
+        feedback?: OmitStrict<ArticleFooterFeedback, 'onReaction'> & {
+            onReaction: OnReactionWithId;
+        };
+    };
+    /** Prop to check visibility of skeleton */
+    loading: boolean;
+}
+export type ArticleProps = (BaseArticleProps & {
+    loading?: false;
+}) | (Partial<BaseArticleProps> & {
+    loading: true;
+});
+declare const Article: FunctionComponent<ArticleProps & ForwardProps>;
+export default Article;
+//# sourceMappingURL=Article.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Article.d.ts","sourceRoot":"","sources":["../../../src/components/Article/Article.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AAGpF,OAAO,EAEL,aAAa,EAKb,SAAS,EACT,YAAY,EACZ,cAAc,EAMd,UAAU,EACX,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,sBAAsB,EAAE,MAAM,kCAAkC,CAAC;AAG1E,OAAsB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAsB,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC3F,OAAoB,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAI9D,KAAK,gBAAgB,GAAG,CACtB,SAAS,EAAE,gBAAgB,CAAC,WAAW,CAAC,EACxC,QAAQ,EAAE,kBAAkB,CAAC,UAAU,CAAC,KACrC,IAAI,CAAC;AAEV,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,SAAS,EAAE,MAAM,CAAC;IAClB,mEAAmE;IACnE,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC,kCAAkC;IAClC,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KACrD,CAAC;IACF,+DAA+D;IAC/D,cAAc,CAAC,EAAE;QACf,qDAAqD;QACrD,EAAE,EAAE,MAAM,CAAC;QACX,iFAAiF;QACjF,KAAK,EAAE,MAAM,CAAC;QACd,yCAAyC;QACzC,IAAI,EAAE,MAAM,CAAC;QACb,2EAA2E;QAC3E,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KACjE,EAAE,CAAC;IACJ,gEAAgE;IAChE,gBAAgB,CAAC,EAAE;QACjB,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;QACxB,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;QAC/B,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;KACnC,EAAE,CAAC;IACJ,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,UAAU,CAAC,kBAAkB,EAAE,YAAY,CAAC,GAAG;QACxD,UAAU,EAAE,gBAAgB,CAAC;KAC9B,CAAC;IACF,sBAAsB;IACtB,OAAO,EAAE,SAAS,CAAC;IACnB,aAAa;IACb,MAAM,CAAC,EAAE,UAAU,CAAC,kBAAkB,EAAE,UAAU,CAAC,GAAG;QACpD,QAAQ,CAAC,EAAE,UAAU,CAAC,qBAAqB,EAAE,YAAY,CAAC,GAAG;YAC3D,UAAU,EAAE,gBAAgB,CAAC;SAC9B,CAAC;KACH,CAAC;IACF,2CAA2C;IAC3C,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,YAAY,GACpB,CAAC,gBAAgB,GAAG;IAAE,OAAO,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GACxC,CAAC,OAAO,CAAC,gBAAgB,CAAC,GAAG;IAAE,OAAO,EAAE,IAAI,CAAA;CAAE,CAAC,CAAC;AA6DpD,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAqI3D,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/Article/Article.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import styled, { css } from 'styled-components';
+import { registerIcon, Flex, MenuButton, Text, defaultThemeProp, Button, Icon, Progress, useI18n, useDirection } from '@pega/cosmos-react-core';
+import * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';
+import * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';
+import ArticleListHeader from '../ArticleList/ArticleListHeader';
+import ArticleRating from './ArticleRating';
+import ArticleFooter from './ArticleFooter';
+import ArticleMeta from './ArticleMeta';
+registerIcon(caretRightIcon, caretLeftIcon);
+const StyledArticleWrapper = styled.div(props => {
+    const { theme } = props;
+    return css `
+    background: ${theme.base.palette['primary-background']};
+    padding: calc(1.5 * ${theme.base.spacing});
+    border-radius: calc(0.5 * ${theme.base['border-radius']});
+    max-height: inherit;
+  `;
+});
+const StyledArticleHeader = styled.header `
+  flex-shrink: 0;
+`;
+const StyledArticleContent = styled.div(props => {
+    const { theme, theme: { base: { spacing } } } = props;
+    return css `
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: 0 calc(1.5 * ${spacing});
+    margin: 0 calc(-1.5 * ${spacing});
+    ul,
+    ol {
+      padding-left: calc(3 * ${spacing});
+    }
+    a {
+      color: ${theme.components.link.color};
+    }
+    * {
+      margin: revert;
+    }
+  `;
+});
+const StyledBackNavButton = styled(Button)(({ theme: { base: { spacing } } }) => {
+    return css `
+      display: flex;
+      align-items: start;
+      gap: calc(0.5 * ${spacing});
+      margin-inline-end: calc(1.5 * ${spacing});
+    `;
+});
+StyledArticleContent.defaultProps = defaultThemeProp;
+StyledArticleWrapper.defaultProps = defaultThemeProp;
+StyledBackNavButton.defaultProps = defaultThemeProp;
+const Article = (props) => {
+    const { articleId, header, meta, title, backNavigation, content, primaryActions, secondaryActions, footer, loading, feedback, ...restProps } = props;
+    const { feedback: footerFeedback, ...restFooter } = footer ?? {};
+    const { rtl, ltr, end, start } = useDirection();
+    const t = useI18n();
+    const backButtonRef = useRef(null);
+    useEffect(() => {
+        if (!loading) {
+            backButtonRef.current?.focus();
+        }
+    }, [loading]);
+    return (_jsxs(Flex, { ...restProps, container: { direction: 'column', gap: 1 }, as: StyledArticleWrapper, "aria-busy": loading ? true : undefined, children: [header && _jsx(ArticleListHeader, { ...header }), (backNavigation || primaryActions || secondaryActions) && (_jsxs(Flex, { container: { alignItems: 'start' }, item: { grow: 1 }, children: [_jsx(Flex, { container: { pad: [1, undefined, undefined] }, item: { grow: 1 }, children: _jsxs(Button, { as: StyledBackNavButton, onClick: backNavigation?.onClick, variant: 'link', ref: backButtonRef, children: [ltr && _jsx(Icon, { name: `caret-${start}` }), backNavigation?.title, rtl && _jsx(Icon, { name: `caret-${end}` })] }) }), !loading && (_jsxs(_Fragment, { children: [primaryActions?.map(({ id, label, onClick, icon }) => {
+                                return (_jsx(Button, { onClick: (e) => onClick(id, e), variant: 'simple', label: label, icon: true, children: _jsx(Icon, { name: icon }) }, id));
+                            }), secondaryActions && (_jsx(MenuButton, { variant: 'simple', text: t('actions'), icon: 'more', iconOnly: true, menu: {
+                                    items: secondaryActions.map(({ text, ...rest }) => ({
+                                        ...rest,
+                                        primary: text
+                                    }))
+                                } }))] }))] })), !loading && (_jsxs(_Fragment, { children: [_jsx(Flex, { container: true, as: StyledArticleHeader, children: _jsx(Text, { variant: 'h2', children: title }) }), feedback && (_jsx(ArticleRating, { ...feedback,
+                        onReaction: reaction => {
+                            feedback?.onReaction(articleId, reaction);
+                        } })), meta && (_jsx(Flex, { container: true, item: { shrink: 0 }, children: _jsx(ArticleMeta, { ...meta }) })), _jsx(StyledArticleContent, { children: content }), footer && (_jsx(ArticleFooter, { ...restFooter, ...(footerFeedback
+                            ? {
+                                feedback: {
+                                    ...footerFeedback,
+                                    onReaction: reaction => {
+                                        footerFeedback?.onReaction(articleId, reaction);
+                                    }
+                                }
+                            }
+                            : undefined) }))] })), _jsx(Progress, { visible: !!loading, placement: 'block', message: t('loading'), liveConfig: { contextualLabel: title ?? t('article_label_a11y') } })] }));
+};
+export default Article;
+//# sourceMappingURL=Article.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Article.js","sourceRoot":"","sources":["../../../src/components/Article/Article.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ReactNode, FunctionComponent, MouseEvent, useEffect, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  registerIcon,\n  MenuItemProps,\n  Flex,\n  MenuButton,\n  Text,\n  defaultThemeProp,\n  BaseProps,\n  ForwardProps,\n  NoChildrenProp,\n  Button,\n  Icon,\n  Progress,\n  useI18n,\n  useDirection,\n  OmitStrict\n} from '@pega/cosmos-react-core';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';\n\nimport { ArticleListHeaderProps } from '../ArticleList/ArticleList.types';\nimport ArticleListHeader from '../ArticleList/ArticleListHeader';\n\nimport ArticleRating, { ArticleRatingProps } from './ArticleRating';\nimport ArticleFooter, { ArticleFooterFeedback, ArticleFooterProps } from './ArticleFooter';\nimport ArticleMeta, { ArticleMetaProps } from './ArticleMeta';\n\nregisterIcon(caretRightIcon, caretLeftIcon);\n\ntype OnReactionWithId = (\n  articleId: BaseArticleProps['articleId'],\n  reaction: ArticleRatingProps['reaction']\n) => void;\n\nexport interface BaseArticleProps extends BaseProps, NoChildrenProp {\n  articleId: string;\n  /** Header to show icon , title and any actions on the container */\n  header?: ArticleListHeaderProps;\n  /** Control for navigating back */\n  backNavigation?: {\n    title: string;\n    onClick: (e: MouseEvent<HTMLButtonElement>) => void;\n  };\n  /** Primary actions which needs to be displayed with an icon */\n  primaryActions?: {\n    /** Unique id for action, used in onClick callback */\n    id: string;\n    /** Label for this action, shown in tooltip and used for generating aria-label */\n    label: string;\n    /** Icon to be displayed in the button */\n    icon: string;\n    /** Callback triggered when a user clicks of presses enter on the action */\n    onClick: (id: string, e: MouseEvent<HTMLButtonElement>) => void;\n  }[];\n  /** Secondary actions that needs to be pushed under more icon */\n  secondaryActions?: {\n    id: MenuItemProps['id'];\n    text: MenuItemProps['primary'];\n    onClick: MenuItemProps['onClick'];\n  }[];\n  /** Article title */\n  title: string;\n  /** Array of meta data */\n  meta?: ArticleMetaProps;\n  /** like and dislike status of the article */\n  feedback?: OmitStrict<ArticleRatingProps, 'onReaction'> & {\n    onReaction: OnReactionWithId;\n  };\n  /** Article content */\n  content: ReactNode;\n  /** Footer */\n  footer?: OmitStrict<ArticleFooterProps, 'feedback'> & {\n    feedback?: OmitStrict<ArticleFooterFeedback, 'onReaction'> & {\n      onReaction: OnReactionWithId;\n    };\n  };\n  /** Prop to check visibility of skeleton */\n  loading: boolean;\n}\n\nexport type ArticleProps =\n  | (BaseArticleProps & { loading?: false })\n  | (Partial<BaseArticleProps> & { loading: true });\n\nconst StyledArticleWrapper = styled.div(props => {\n  const { theme } = props;\n  return css`\n    background: ${theme.base.palette['primary-background']};\n    padding: calc(1.5 * ${theme.base.spacing});\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n    max-height: inherit;\n  `;\n});\n\nconst StyledArticleHeader = styled.header`\n  flex-shrink: 0;\n`;\n\nconst StyledArticleContent = styled.div(props => {\n  const {\n    theme,\n    theme: {\n      base: { spacing }\n    }\n  } = props;\n\n  return css`\n    flex-grow: 1;\n    overflow-y: auto;\n    padding: 0 calc(1.5 * ${spacing});\n    margin: 0 calc(-1.5 * ${spacing});\n    ul,\n    ol {\n      padding-left: calc(3 * ${spacing});\n    }\n    a {\n      color: ${theme.components.link.color};\n    }\n    * {\n      margin: revert;\n    }\n  `;\n});\n\nconst StyledBackNavButton = styled(Button)(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      display: flex;\n      align-items: start;\n      gap: calc(0.5 * ${spacing});\n      margin-inline-end: calc(1.5 * ${spacing});\n    `;\n  }\n);\n\nStyledArticleContent.defaultProps = defaultThemeProp;\nStyledArticleWrapper.defaultProps = defaultThemeProp;\nStyledBackNavButton.defaultProps = defaultThemeProp;\n\nconst Article: FunctionComponent<ArticleProps & ForwardProps> = (props: ArticleProps) => {\n  const {\n    articleId,\n    header,\n    meta,\n    title,\n    backNavigation,\n    content,\n    primaryActions,\n    secondaryActions,\n    footer,\n    loading,\n    feedback,\n    ...restProps\n  } = props;\n\n  const { feedback: footerFeedback, ...restFooter } = footer ?? {};\n  const { rtl, ltr, end, start } = useDirection();\n\n  const t = useI18n();\n  const backButtonRef = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (!loading) {\n      backButtonRef.current?.focus();\n    }\n  }, [loading]);\n\n  return (\n    <Flex\n      {...restProps}\n      container={{ direction: 'column', gap: 1 }}\n      as={StyledArticleWrapper}\n      aria-busy={loading ? true : undefined}\n    >\n      {header && <ArticleListHeader {...header} />}\n      {(backNavigation || primaryActions || secondaryActions) && (\n        <Flex container={{ alignItems: 'start' }} item={{ grow: 1 }}>\n          <Flex container={{ pad: [1, undefined, undefined] }} item={{ grow: 1 }}>\n            <Button\n              as={StyledBackNavButton}\n              onClick={backNavigation?.onClick}\n              variant='link'\n              ref={backButtonRef}\n            >\n              {ltr && <Icon name={`caret-${start}`} />}\n              {backNavigation?.title}\n              {rtl && <Icon name={`caret-${end}`} />}\n            </Button>\n          </Flex>\n\n          {!loading && (\n            <>\n              {primaryActions?.map(({ id, label, onClick, icon }) => {\n                return (\n                  <Button\n                    key={id}\n                    onClick={(e: MouseEvent<HTMLButtonElement>) => onClick(id, e)}\n                    variant='simple'\n                    label={label}\n                    icon\n                  >\n                    <Icon name={icon} />\n                  </Button>\n                );\n              })}\n              {secondaryActions && (\n                <MenuButton\n                  variant='simple'\n                  text={t('actions')}\n                  icon='more'\n                  iconOnly\n                  menu={{\n                    items: secondaryActions.map(({ text, ...rest }) => ({\n                      ...rest,\n                      primary: text\n                    }))\n                  }}\n                />\n              )}\n            </>\n          )}\n        </Flex>\n      )}\n      {!loading && (\n        <>\n          <Flex container as={StyledArticleHeader}>\n            <Text variant='h2'>{title}</Text>\n          </Flex>\n\n          {feedback && (\n            <ArticleRating\n              {...{\n                ...feedback,\n                onReaction: reaction => {\n                  feedback?.onReaction(articleId, reaction);\n                }\n              }}\n            />\n          )}\n\n          {meta && (\n            <Flex container item={{ shrink: 0 }}>\n              <ArticleMeta {...meta} />\n            </Flex>\n          )}\n          <StyledArticleContent>{content}</StyledArticleContent>\n\n          {footer && (\n            <ArticleFooter\n              {...restFooter}\n              {...(footerFeedback\n                ? {\n                    feedback: {\n                      ...footerFeedback,\n                      onReaction: reaction => {\n                        footerFeedback?.onReaction(articleId, reaction);\n                      }\n                    }\n                  }\n                : undefined)}\n            />\n          )}\n        </>\n      )}\n      <Progress\n        visible={!!loading}\n        placement='block'\n        message={t('loading')}\n        liveConfig={{ contextualLabel: title ?? t('article_label_a11y') }}\n      />\n    </Flex>\n  );\n};\n\nexport default Article;\n"]}

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

@@ -0,0 +1,38 @@
+import { FunctionComponent, MouseEvent } from 'react';
+import { BaseProps, ForwardProps, FileUploadItemProps, OmitStrict } from '@pega/cosmos-react-core';
+import { ArticleRatingProps } from './ArticleRating';
+export interface ArticleTag {
+    /** Tag name */
+    tagName: string;
+    /** Tag id. If not set tagName is treated as id */
+    id: string;
+}
+export interface ArticleFooterFeedback extends OmitStrict<ArticleRatingProps, 'likes' | 'dislikes'> {
+    showThanksMessage?: boolean;
+}
+export interface ArticleFooterProps extends BaseProps {
+    /** Feedback for this article */
+    feedback?: ArticleFooterFeedback;
+    tags?: {
+        /** Article tags */
+        list: ArticleTag[];
+        /** Callback that triggers on click of tag */
+        onTagClick?: (id: ArticleTag['id']) => void;
+    };
+    /** Links to external sites */
+    relatedLinks?: {
+        title: string;
+        href: string;
+    }[];
+    /** Links to other articles */
+    relatedArticles?: {
+        id: string;
+        title: string;
+        onClick: (id: string, e: MouseEvent<HTMLButtonElement>) => void;
+    }[];
+    /** Attachments */
+    attachments?: FileUploadItemProps[];
+}
+declare const ArticleFooter: FunctionComponent<ArticleFooterProps & ForwardProps>;
+export default ArticleFooter;
+//# sourceMappingURL=ArticleFooter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleFooter.d.ts","sourceRoot":"","sources":["../../../src/components/Article/ArticleFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,EAIL,SAAS,EACT,YAAY,EACZ,mBAAmB,EAOnB,UAAU,EACX,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,WAAW,UAAU;IACzB,eAAe;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,qBACf,SAAQ,UAAU,CAAC,kBAAkB,EAAE,OAAO,GAAG,UAAU,CAAC;IAC5D,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,gCAAgC;IAChC,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IACjC,IAAI,CAAC,EAAE;QACL,mBAAmB;QACnB,IAAI,EAAE,UAAU,EAAE,CAAC;QACnB,6CAA6C;QAC7C,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,UAAU,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;KAC7C,CAAC;IACF,8BAA8B;IAC9B,YAAY,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACjD,8BAA8B;IAC9B,eAAe,CAAC,EAAE;QAChB,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KACjE,EAAE,CAAC;IACJ,kBAAkB;IAClB,WAAW,CAAC,EAAE,mBAAmB,EAAE,CAAC;CACrC;AAuCD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CA0HvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Article/ArticleFooter.js

@@ -0,0 +1,58 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { Flex, Tag, defaultThemeProp, Button, Text, Link, useI18n, FileUploadItem, Grid } from '@pega/cosmos-react-core';
+import { StyledTag } from '@pega/cosmos-react-core/lib/components/Badges/Tag';
+const StyledRelatedItemsContainer = styled.div ``;
+const StyledRelatedItemsList = styled.div ``;
+const StyledArticleFooter = styled.div(({ theme }) => {
+    return css `
+    flex-shrink: 0;
+    &::before {
+      content: '';
+      display: block;
+      background: ${theme.base.palette['border-line']};
+      height: 0.0625rem;
+      margin-bottom: calc(2 * ${theme.base.spacing});
+    }
+
+    ${StyledRelatedItemsContainer} {
+      margin-block-start: ${theme.base.spacing};
+      & > ${StyledRelatedItemsList} * {
+        margin-inline-start: 0;
+      }
+    }
+  `;
+});
+StyledArticleFooter.defaultProps = defaultThemeProp;
+const StyledTags = styled.div(({ theme }) => {
+    return css `
+    padding: calc(0.25 * ${theme.base.spacing});
+    margin: 0 calc(-0.5 * ${theme.base.spacing});
+    & > ${StyledTag} {
+      margin: calc(0.25 * ${theme.base.spacing});
+    }
+  `;
+});
+StyledTags.defaultProps = defaultThemeProp;
+const ArticleFooter = (props) => {
+    const { tags, relatedLinks, relatedArticles, feedback, attachments, ...restProps } = props;
+    const t = useI18n();
+    return (_jsxs(Flex, { as: StyledArticleFooter, container: {
+            direction: 'column',
+            gap: 2
+        }, ...restProps, children: [feedback && (_jsx(Flex, { container: { gap: 2, alignItems: 'center' }, children: feedback.showThanksMessage ? (_jsx(Text, { children: t('article_thank_you_for_your_feedback') })) : (_jsxs(_Fragment, { children: [_jsx(Text, { children: t('article_was_this_helpful') }), _jsxs(Flex, { container: true, children: [_jsx(Button, { variant: feedback.reaction === 'liked' ? 'primary' : 'secondary', onClick: () => {
+                                        feedback.onReaction(feedback.reaction === 'liked' ? undefined : 'liked');
+                                    }, "aria-pressed": feedback.reaction === 'liked', children: t('yes') }), _jsx(Button, { variant: feedback.reaction === 'disliked' ? 'primary' : 'secondary', onClick: () => {
+                                        feedback.onReaction(feedback.reaction === 'disliked' ? undefined : 'disliked');
+                                    }, "aria-pressed": feedback.reaction === 'disliked', children: t('no') })] })] })) })), tags && (_jsx(Flex, { container: { wrap: 'wrap' }, as: StyledTags, children: tags.list.map(tag => (_jsx(Tag, { tabIndex: 0, type: 'pill', variant: 'light', "data-tag-id": tag.id, onClick: tags.onTagClick ? () => tags.onTagClick?.(tag.id) : undefined, rel: 'tag', children: tag.tagName }, tag.id))) })), relatedLinks && (_jsxs(Flex, { as: StyledRelatedItemsContainer, container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h3', children: t('article_related_links') }), _jsx(Flex, { as: StyledRelatedItemsList, container: { direction: 'column', alignItems: 'start', gap: 0.5 }, children: relatedLinks?.map(({ title, href }) => {
+                            return (_jsx(Link, { href: href, target: '_blank', children: title }, title));
+                        }) })] })), relatedArticles && (_jsxs(Flex, { as: StyledRelatedItemsContainer, container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h3', children: t('article_more_like_this') }), _jsx(Flex, { as: StyledRelatedItemsList, container: { direction: 'column', alignItems: 'start', gap: 0.5 }, children: relatedArticles?.map(({ id, title, onClick }) => {
+                            return (_jsx(Button, { variant: 'link', onClick: (e) => onClick(id, e), children: title }, id));
+                        }) })] })), attachments && (_jsxs(Flex, { as: StyledRelatedItemsContainer, container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h3', children: t('article_attachments') }), _jsx(Grid, { container: {
+                            cols: 'repeat(auto-fill, minmax(10rem, 1fr))',
+                            gap: 1
+                        }, as: 'ul', children: attachments?.map(attachment => (_createElement(FileUploadItem, { ...attachment, key: attachment.name }))) })] }))] }));
+};
+export default ArticleFooter;
+//# sourceMappingURL=ArticleFooter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleFooter.js","sourceRoot":"","sources":["../../../src/components/Article/ArticleFooter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  Tag,\n  defaultThemeProp,\n  BaseProps,\n  ForwardProps,\n  FileUploadItemProps,\n  Button,\n  Text,\n  Link,\n  useI18n,\n  FileUploadItem,\n  Grid,\n  OmitStrict\n} from '@pega/cosmos-react-core';\nimport { StyledTag } from '@pega/cosmos-react-core/lib/components/Badges/Tag';\n\nimport { ArticleRatingProps } from './ArticleRating';\n\nexport interface ArticleTag {\n  /** Tag name */\n  tagName: string;\n  /** Tag id. If not set tagName is treated as id */\n  id: string;\n}\n\nexport interface ArticleFooterFeedback\n  extends OmitStrict<ArticleRatingProps, 'likes' | 'dislikes'> {\n  showThanksMessage?: boolean;\n}\n\nexport interface ArticleFooterProps extends BaseProps {\n  /** Feedback for this article */\n  feedback?: ArticleFooterFeedback;\n  tags?: {\n    /** Article tags */\n    list: ArticleTag[];\n    /** Callback that triggers on click of tag */\n    onTagClick?: (id: ArticleTag['id']) => void;\n  };\n  /** Links to external sites */\n  relatedLinks?: { title: string; href: string }[];\n  /** Links to other articles */\n  relatedArticles?: {\n    id: string;\n    title: string;\n    onClick: (id: string, e: MouseEvent<HTMLButtonElement>) => void;\n  }[];\n  /** Attachments */\n  attachments?: FileUploadItemProps[];\n}\n\nconst StyledRelatedItemsContainer = styled.div``;\nconst StyledRelatedItemsList = styled.div``;\n\nconst StyledArticleFooter = styled.div(({ theme }) => {\n  return css`\n    flex-shrink: 0;\n    &::before {\n      content: '';\n      display: block;\n      background: ${theme.base.palette['border-line']};\n      height: 0.0625rem;\n      margin-bottom: calc(2 * ${theme.base.spacing});\n    }\n\n    ${StyledRelatedItemsContainer} {\n      margin-block-start: ${theme.base.spacing};\n      & > ${StyledRelatedItemsList} * {\n        margin-inline-start: 0;\n      }\n    }\n  `;\n});\n\nStyledArticleFooter.defaultProps = defaultThemeProp;\n\nconst StyledTags = styled.div(({ theme }) => {\n  return css`\n    padding: calc(0.25 * ${theme.base.spacing});\n    margin: 0 calc(-0.5 * ${theme.base.spacing});\n    & > ${StyledTag} {\n      margin: calc(0.25 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledTags.defaultProps = defaultThemeProp;\n\nconst ArticleFooter: FunctionComponent<ArticleFooterProps & ForwardProps> = (\n  props: ArticleFooterProps\n) => {\n  const { tags, relatedLinks, relatedArticles, feedback, attachments, ...restProps } = props;\n  const t = useI18n();\n\n  return (\n    <Flex\n      as={StyledArticleFooter}\n      container={{\n        direction: 'column',\n        gap: 2\n      }}\n      {...restProps}\n    >\n      {feedback && (\n        <Flex container={{ gap: 2, alignItems: 'center' }}>\n          {feedback.showThanksMessage ? (\n            <Text>{t('article_thank_you_for_your_feedback')}</Text>\n          ) : (\n            <>\n              <Text>{t('article_was_this_helpful')}</Text>\n              <Flex container>\n                <Button\n                  variant={feedback.reaction === 'liked' ? 'primary' : 'secondary'}\n                  onClick={() => {\n                    feedback.onReaction(feedback.reaction === 'liked' ? undefined : 'liked');\n                  }}\n                  aria-pressed={feedback.reaction === 'liked'}\n                >\n                  {t('yes')}\n                </Button>\n                <Button\n                  variant={feedback.reaction === 'disliked' ? 'primary' : 'secondary'}\n                  onClick={() => {\n                    feedback.onReaction(feedback.reaction === 'disliked' ? undefined : 'disliked');\n                  }}\n                  aria-pressed={feedback.reaction === 'disliked'}\n                >\n                  {t('no')}\n                </Button>\n              </Flex>\n            </>\n          )}\n        </Flex>\n      )}\n      {tags && (\n        <Flex container={{ wrap: 'wrap' }} as={StyledTags}>\n          {tags.list.map(tag => (\n            <Tag\n              tabIndex={0}\n              type='pill'\n              variant='light'\n              key={tag.id}\n              data-tag-id={tag.id}\n              onClick={tags.onTagClick ? () => tags.onTagClick?.(tag.id) : undefined}\n              rel='tag'\n            >\n              {tag.tagName}\n            </Tag>\n          ))}\n        </Flex>\n      )}\n\n      {relatedLinks && (\n        <Flex as={StyledRelatedItemsContainer} container={{ direction: 'column', gap: 1 }}>\n          <Text variant='h3'>{t('article_related_links')}</Text>\n          <Flex\n            as={StyledRelatedItemsList}\n            container={{ direction: 'column', alignItems: 'start', gap: 0.5 }}\n          >\n            {relatedLinks?.map(({ title, href }) => {\n              return (\n                <Link href={href} target='_blank' key={title}>\n                  {title}\n                </Link>\n              );\n            })}\n          </Flex>\n        </Flex>\n      )}\n\n      {relatedArticles && (\n        <Flex as={StyledRelatedItemsContainer} container={{ direction: 'column', gap: 1 }}>\n          <Text variant='h3'>{t('article_more_like_this')}</Text>\n          <Flex\n            as={StyledRelatedItemsList}\n            container={{ direction: 'column', alignItems: 'start', gap: 0.5 }}\n          >\n            {relatedArticles?.map(({ id, title, onClick }) => {\n              return (\n                <Button\n                  key={id}\n                  variant='link'\n                  onClick={(e: MouseEvent<HTMLButtonElement>) => onClick(id, e)}\n                >\n                  {title}\n                </Button>\n              );\n            })}\n          </Flex>\n        </Flex>\n      )}\n\n      {attachments && (\n        <Flex as={StyledRelatedItemsContainer} container={{ direction: 'column', gap: 1 }}>\n          <Text variant='h3'>{t('article_attachments')}</Text>\n          <Grid\n            container={{\n              cols: 'repeat(auto-fill, minmax(10rem, 1fr))',\n              gap: 1\n            }}\n            as='ul'\n          >\n            {attachments?.map(attachment => (\n              <FileUploadItem {...attachment} key={attachment.name} />\n            ))}\n          </Grid>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n\nexport default ArticleFooter;\n"]}

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

@@ -0,0 +1,13 @@
+import { FunctionComponent } from 'react';
+import { DateTimeDisplayProps } from '@pega/cosmos-react-core';
+export interface ArticleMetaProps {
+    category?: {
+        id: string;
+        name: string;
+        onClick: (id: string) => void;
+    };
+    publishedDate?: DateTimeDisplayProps['value'];
+}
+declare const ArticleMeta: FunctionComponent<ArticleMetaProps>;
+export default ArticleMeta;
+//# sourceMappingURL=ArticleMeta.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleMeta.d.ts","sourceRoot":"","sources":["../../../src/components/Article/ArticleMeta.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAGnD,OAAO,EAEL,oBAAoB,EAIrB,MAAM,yBAAyB,CAAC;AAgBjC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE;QACT,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;KAC/B,CAAC;IACF,aAAa,CAAC,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;CAC/C;AAED,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAuBpD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Article/ArticleMeta.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import styled, { css } from 'styled-components';
+import { DateTimeDisplay, MetaList, Button, defaultThemeProp } from '@pega/cosmos-react-core';
+const StyledMetaList = styled(MetaList)(({ theme: { base: { spacing } } }) => {
+    return css `
+      padding: calc(0.5 * ${spacing});
+    `;
+});
+StyledMetaList.defaultProps = defaultThemeProp;
+const ArticleMeta = ({ category, publishedDate }) => {
+    const metaItems = useMemo(() => {
+        const items = [];
+        if (category) {
+            items.push(_jsx(Button, { variant: 'link', onClick: () => {
+                    category.onClick(category.id);
+                }, children: category.name }));
+        }
+        if (publishedDate) {
+            items.push(_jsx(DateTimeDisplay, { value: publishedDate, variant: 'date', format: 'long' }));
+        }
+        return items;
+    }, [category, publishedDate]);
+    return _jsx(StyledMetaList, { items: metaItems });
+};
+export default ArticleMeta;
+//# sourceMappingURL=ArticleMeta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleMeta.js","sourceRoot":"","sources":["../../../src/components/Article/ArticleMeta.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,OAAO,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,eAAe,EAEf,QAAQ,EACR,MAAM,EACN,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAC,CACrC,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,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAW/C,MAAM,WAAW,GAAwC,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,EAAE;IACvF,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,MAAM,KAAK,GAAG,EAAE,CAAC;QACjB,IAAI,QAAQ,EAAE;YACZ,KAAK,CAAC,IAAI,CACR,KAAC,MAAM,IACL,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE;oBACZ,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;gBAChC,CAAC,YAEA,QAAQ,CAAC,IAAI,GACP,CACV,CAAC;SACH;QACD,IAAI,aAAa,EAAE;YACjB,KAAK,CAAC,IAAI,CAAC,KAAC,eAAe,IAAC,KAAK,EAAE,aAAa,EAAE,OAAO,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,GAAG,CAAC,CAAC;SACpF;QAED,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC;IAE9B,OAAO,KAAC,cAAc,IAAC,KAAK,EAAE,SAAS,GAAI,CAAC;AAC9C,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { FunctionComponent, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  DateTimeDisplay,\n  DateTimeDisplayProps,\n  MetaList,\n  Button,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\n\nconst StyledMetaList = styled(MetaList)(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      padding: calc(0.5 * ${spacing});\n    `;\n  }\n);\n\nStyledMetaList.defaultProps = defaultThemeProp;\n\nexport interface ArticleMetaProps {\n  category?: {\n    id: string;\n    name: string;\n    onClick: (id: string) => void;\n  };\n  publishedDate?: DateTimeDisplayProps['value'];\n}\n\nconst ArticleMeta: FunctionComponent<ArticleMetaProps> = ({ category, publishedDate }) => {\n  const metaItems = useMemo(() => {\n    const items = [];\n    if (category) {\n      items.push(\n        <Button\n          variant='link'\n          onClick={() => {\n            category.onClick(category.id);\n          }}\n        >\n          {category.name}\n        </Button>\n      );\n    }\n    if (publishedDate) {\n      items.push(<DateTimeDisplay value={publishedDate} variant='date' format='long' />);\n    }\n\n    return items;\n  }, [category, publishedDate]);\n\n  return <StyledMetaList items={metaItems} />;\n};\n\nexport default ArticleMeta;\n"]}

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

@@ -0,0 +1,13 @@
+import { FunctionComponent } from 'react';
+export interface ArticleRatingProps {
+    /** Percentage of likes */
+    likes?: number;
+    /** Percentage of dislikes */
+    dislikes?: number;
+    reaction?: 'liked' | 'disliked';
+    onReaction: (reaction: ArticleRatingProps['reaction']) => void;
+}
+export declare const StyledReactedPercentage: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+declare const ArticleRating: FunctionComponent<ArticleRatingProps>;
+export default ArticleRating;
+//# sourceMappingURL=ArticleRating.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleRating.d.ts","sourceRoot":"","sources":["../../../src/components/Article/ArticleRating.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAqB1C,MAAM,WAAW,kBAAkB;IACjC,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAChC,UAAU,EAAE,CAAC,QAAQ,EAAE,kBAAkB,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CAChE;AAED,eAAO,MAAM,uBAAuB,0GAEnC,CAAC;AAIF,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CAsFxD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Article/ArticleRating.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { registerIcon, Flex, Button, Icon, Text, useI18n, defaultThemeProp, formatNumber, useConfiguration } from '@pega/cosmos-react-core';
+import * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';
+import * as thumbsUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up.icon';
+import * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';
+import * as thumbsDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down.icon';
+registerIcon(thumbsUpSolidIcon, thumbsUpIcon, thumbsDownSolidIcon, thumbsDownIcon);
+export const StyledReactedPercentage = styled.span `
+  font-weight: ${p => p.theme.base['font-weight']['semi-bold']};
+`;
+StyledReactedPercentage.defaultProps = defaultThemeProp;
+const ArticleRating = ({ dislikes, likes, reaction, onReaction, ...restProps }) => {
+    const t = useI18n();
+    const { locale } = useConfiguration();
+    const formattedLikes = likes !== undefined
+        ? formatNumber(likes, {
+            locale,
+            options: {
+                style: 'unit',
+                unit: 'percent',
+                maximumFractionDigits: 0
+            }
+        })
+        : likes;
+    const formattedDislikes = dislikes !== undefined
+        ? formatNumber(dislikes, {
+            locale,
+            options: {
+                style: 'unit',
+                unit: 'percent',
+                maximumFractionDigits: 0
+            }
+        })
+        : dislikes;
+    return (_jsxs(Flex, { ...restProps, container: { gap: 1 }, children: [_jsxs(Flex, { container: { gap: 0.5, alignItems: 'center' }, children: [_jsx(Button, { variant: 'simple', label: t('like'), icon: true, compact: true, onClick: () => {
+                            onReaction(reaction === 'liked' ? undefined : 'liked');
+                        }, "aria-label": `${formattedLikes} ${t('likes')}`, "aria-pressed": reaction === 'liked', children: _jsx(Icon, { name: reaction === 'liked' ? 'thumbs-up-solid' : 'thumbs-up' }) }), formattedLikes && (_jsx(Text, { as: reaction === 'liked' ? StyledReactedPercentage : undefined, variant: 'secondary', "aria-hidden": true, children: formattedLikes }))] }), _jsxs(Flex, { container: { gap: 0.5, alignItems: 'center' }, children: [_jsx(Button, { "aria-label": `${formattedDislikes} ${t('dislikes')}`, variant: 'simple', label: t('dislike'), icon: true, compact: true, "aria-pressed": reaction === 'disliked', onClick: () => {
+                            onReaction(reaction === 'disliked' ? undefined : 'disliked');
+                        }, children: _jsx(Icon, { name: reaction === 'disliked' ? 'thumbs-down-solid' : 'thumbs-down' }) }), formattedDislikes && (_jsx(Text, { as: reaction === 'disliked' ? StyledReactedPercentage : undefined, variant: 'secondary', "aria-hidden": true, children: formattedDislikes }))] })] }));
+};
+export default ArticleRating;
+//# sourceMappingURL=ArticleRating.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleRating.js","sourceRoot":"","sources":["../../../src/components/Article/ArticleRating.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  registerIcon,\n  Flex,\n  Button,\n  Icon,\n  Text,\n  useI18n,\n  defaultThemeProp,\n  formatNumber,\n  useConfiguration\n} from '@pega/cosmos-react-core';\nimport * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';\nimport * as thumbsUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up.icon';\nimport * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';\nimport * as thumbsDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down.icon';\n\nregisterIcon(thumbsUpSolidIcon, thumbsUpIcon, thumbsDownSolidIcon, thumbsDownIcon);\n\nexport interface ArticleRatingProps {\n  /** Percentage of likes */\n  likes?: number;\n  /** Percentage of dislikes */\n  dislikes?: number;\n  reaction?: 'liked' | 'disliked';\n  onReaction: (reaction: ArticleRatingProps['reaction']) => void;\n}\n\nexport const StyledReactedPercentage = styled.span`\n  font-weight: ${p => p.theme.base['font-weight']['semi-bold']};\n`;\n\nStyledReactedPercentage.defaultProps = defaultThemeProp;\n\nconst ArticleRating: FunctionComponent<ArticleRatingProps> = ({\n  dislikes,\n  likes,\n  reaction,\n  onReaction,\n  ...restProps\n}) => {\n  const t = useI18n();\n  const { locale } = useConfiguration();\n\n  const formattedLikes =\n    likes !== undefined\n      ? formatNumber(likes, {\n          locale,\n          options: {\n            style: 'unit',\n            unit: 'percent',\n            maximumFractionDigits: 0\n          }\n        })\n      : likes;\n  const formattedDislikes =\n    dislikes !== undefined\n      ? formatNumber(dislikes, {\n          locale,\n          options: {\n            style: 'unit',\n            unit: 'percent',\n            maximumFractionDigits: 0\n          }\n        })\n      : dislikes;\n\n  return (\n    <Flex {...restProps} container={{ gap: 1 }}>\n      <Flex container={{ gap: 0.5, alignItems: 'center' }}>\n        <Button\n          variant='simple'\n          label={t('like')}\n          icon\n          compact\n          onClick={() => {\n            onReaction(reaction === 'liked' ? undefined : 'liked');\n          }}\n          aria-label={`${formattedLikes} ${t('likes')}`}\n          aria-pressed={reaction === 'liked'}\n        >\n          <Icon name={reaction === 'liked' ? 'thumbs-up-solid' : 'thumbs-up'} />\n        </Button>\n        {formattedLikes && (\n          <Text\n            as={reaction === 'liked' ? StyledReactedPercentage : undefined}\n            variant='secondary'\n            aria-hidden\n          >\n            {formattedLikes}\n          </Text>\n        )}\n      </Flex>\n\n      <Flex container={{ gap: 0.5, alignItems: 'center' }}>\n        <Button\n          aria-label={`${formattedDislikes} ${t('dislikes')}`}\n          variant='simple'\n          label={t('dislike')}\n          icon\n          compact\n          aria-pressed={reaction === 'disliked'}\n          onClick={() => {\n            onReaction(reaction === 'disliked' ? undefined : 'disliked');\n          }}\n        >\n          <Icon name={reaction === 'disliked' ? 'thumbs-down-solid' : 'thumbs-down'} />\n        </Button>\n        {formattedDislikes && (\n          <Text\n            as={reaction === 'disliked' ? StyledReactedPercentage : undefined}\n            variant='secondary'\n            aria-hidden\n          >\n            {formattedDislikes}\n          </Text>\n        )}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default ArticleRating;\n"]}

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

@@ -0,0 +1,7 @@
+export { default } from './Article';
+export { default as ArticleFooter } from './ArticleFooter';
+export { default as ArticleRating } from './ArticleRating';
+export type { ArticleProps } from './Article';
+export type { ArticleTag, ArticleFooterProps } from './ArticleFooter';
+export type { ArticleRatingProps } from './ArticleRating';
+//# sourceMappingURL=index.d.ts.map