@pega/cosmos-react-demos 2.1.5 → 3.0.0-dev.10.1

package/lib/core/Toaster/Toaster.stories.js

@@ -6,25 +6,21 @@ export default {
     component: Toaster
 };
 export const ToasterDemo = () => {
-    /*
-     * The <Toaster> component should be wrapped around the entire portion of an application that utilizes it.
-     * For most apps that is once near the root of the app's React tree.
-     * Descendant components can utilize the Toaster's push context method via a useContext hook, as demonstrated here.
-     * This story component represents an component rendered somewhere in an app's tree.
-     * Note, a Toaster provider is already rendered at the root of the Cosmos Storybook, allowing for the use of context here.
-     */
-    const { push } = useContext(ToasterContext);
-    const [count, setCount] = useState(0);
-    const messages = [
-        'This is a short toast message!',
-        'This toast message is much longer and will need to be trimmed with an ellipsis in order to fit within the confines of the component.'
-    ];
-    const pushToaster = () => {
-        setCount(curr => curr + 1);
-        push({
-            content: messages[count % 2]
-        });
+    const MakeToastButton = () => {
+        const { push } = useContext(ToasterContext);
+        const [count, setCount] = useState(0);
+        const messages = [
+            'This is a short toast message!',
+            'This toast message is much longer and will need to be trimmed with an ellipsis in order to fit within the confines of the component.'
+        ];
+        const pushToaster = () => {
+            setCount(curr => curr + 1);
+            push({
+                content: messages[count % 2]
+            });
+        };
+        return _jsx(Button, { onClick: pushToaster, children: "Make some Toast" });
     };
-    return _jsx(Button, { onClick: pushToaster, children: "Make some Toast" }, void 0);
+    return (_jsx(Toaster, { dismissAfter: 5000, children: _jsx(MakeToastButton, {}) }));
 };
 //# sourceMappingURL=Toaster.stories.js.map

package/lib/core/Toaster/Toaster.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.stories.js","sourceRoot":"","sources":["../../../src/core/Toaster/Toaster.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE1E,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,OAAO;CACX,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B;;;;;;OAMG;IAEH,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAC5C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEtC,MAAM,QAAQ,GAAG;QACf,gCAAgC;QAChC,sIAAsI;KACvI,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;QAC3B,IAAI,CAAC;YACH,OAAO,EAAE,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC;SAC7B,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,KAAC,MAAM,IAAC,OAAO,EAAE,WAAW,wCAA0B,CAAC;AAChE,CAAC,CAAC","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useContext, useState } from 'react';\n\nimport { Button, Toaster, ToasterContext } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Toaster',\n  component: Toaster\n} as Meta;\n\nexport const ToasterDemo = () => {\n  /*\n   * The <Toaster> component should be wrapped around the entire portion of an application that utilizes it.\n   * For most apps that is once near the root of the app's React tree.\n   * Descendant components can utilize the Toaster's push context method via a useContext hook, as demonstrated here.\n   * This story component represents an component rendered somewhere in an app's tree.\n   * Note, a Toaster provider is already rendered at the root of the Cosmos Storybook, allowing for the use of context here.\n   */\n\n  const { push } = useContext(ToasterContext);\n  const [count, setCount] = useState(0);\n\n  const messages = [\n    'This is a short toast message!',\n    'This toast message is much longer and will need to be trimmed with an ellipsis in order to fit within the confines of the component.'\n  ];\n\n  const pushToaster = () => {\n    setCount(curr => curr + 1);\n    push({\n      content: messages[count % 2]\n    });\n  };\n\n  return <Button onClick={pushToaster}>Make some Toast</Button>;\n};\n"]}
+{"version":3,"file":"Toaster.stories.js","sourceRoot":"","sources":["../../../src/core/Toaster/Toaster.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE1E,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,OAAO;CACX,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAU,GAAG,EAAE;IACrC,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;QAC5C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;QAEtC,MAAM,QAAQ,GAAG;YACf,gCAAgC;YAChC,sIAAsI;SACvI,CAAC;QAEF,MAAM,WAAW,GAAG,GAAG,EAAE;YACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;YAC3B,IAAI,CAAC;gBACH,OAAO,EAAE,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC;aAC7B,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,OAAO,KAAC,MAAM,IAAC,OAAO,EAAE,WAAW,gCAA0B,CAAC;IAChE,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,OAAO,IAAC,YAAY,EAAE,IAAI,YACzB,KAAC,eAAe,KAAG,GACX,CACX,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useContext, useState } from 'react';\n\nimport { Button, Toaster, ToasterContext } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Toaster',\n  component: Toaster\n} as Meta;\n\nexport const ToasterDemo: Story = () => {\n  const MakeToastButton = () => {\n    const { push } = useContext(ToasterContext);\n    const [count, setCount] = useState(0);\n\n    const messages = [\n      'This is a short toast message!',\n      'This toast message is much longer and will need to be trimmed with an ellipsis in order to fit within the confines of the component.'\n    ];\n\n    const pushToaster = () => {\n      setCount(curr => curr + 1);\n      push({\n        content: messages[count % 2]\n      });\n    };\n\n    return <Button onClick={pushToaster}>Make some Toast</Button>;\n  };\n\n  return (\n    <Toaster dismissAfter={5000}>\n      <MakeToastButton />\n    </Toaster>\n  );\n};\n"]}

package/lib/core/Tooltip/Tooltip.stories.d.ts

@@ -1,8 +1,10 @@
-/// <reference types="react" />
-declare const _default: {
-    title: string;
-    component: import("react").FunctionComponent<import("@pega/cosmos-react-core").TooltipProps & import("@pega/cosmos-react-core").ForwardProps>;
-};
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const TooltipDemo: () => JSX.Element;
+export declare const TooltipDemo: Story;
+interface ConfigurableTooltipProps {
+    foregroundColor?: string;
+    backgroundColor?: string;
+}
+export declare const ConfigurableTooltip: Story<ConfigurableTooltipProps>;
 //# sourceMappingURL=Tooltip.stories.d.ts.map

package/lib/core/Tooltip/Tooltip.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":";;;;;AAEA,wBAGE;AAEF,eAAO,MAAM,WAAW,mBAgBvB,CAAC"}
+{"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAI/C,wBAGU;AAEV,eAAO,MAAM,WAAW,EAAE,KAgBzB,CAAC;AAEF,UAAU,wBAAwB;IAChC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,wBAAwB,CA2B/D,CAAC"}

package/lib/core/Tooltip/Tooltip.stories.js

@@ -1,11 +1,30 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Tooltip, useElement } from '@pega/cosmos-react-core';
+import { Button, Configuration, Tooltip, useElement } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Tooltip',
     component: Tooltip
 };
 export const TooltipDemo = () => {
     const [el, setEl] = useElement();
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { ref: setEl, children: "Hover me" }, void 0), el && (_jsx(Tooltip, { target: el, children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus scelerisque viverra. Fusce consequat, justo at laoreet lobortis, mauris ipsum aliquet arcu, non convallis nisl elit id erat. Pellentesque posuere sagittis velit a molestie." }, void 0))] }, void 0));
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { ref: setEl, children: "Hover me" }), el && (_jsx(Tooltip, { target: el, children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus scelerisque viverra. Fusce consequat, justo at laoreet lobortis, mauris ipsum aliquet arcu, non convallis nisl elit id erat. Pellentesque posuere sagittis velit a molestie." }))] }));
+};
+export const ConfigurableTooltip = (args) => {
+    const [el, setEl] = useElement();
+    return (_jsxs(Configuration, { theme: {
+            components: {
+                tooltip: {
+                    'foreground-color': args.foregroundColor,
+                    'background-color': args.backgroundColor
+                }
+            }
+        }, children: [_jsx(Button, { ref: setEl, children: "Hover me" }), el && (_jsx(Tooltip, { target: el, children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus scelerisque viverra. Fusce consequat, justo at laoreet lobortis, mauris ipsum aliquet arcu, non convallis nisl elit id erat. Pellentesque posuere sagittis velit a molestie." }))] }));
+};
+ConfigurableTooltip.args = {
+    foregroundColor: '#f5f5f5',
+    backgroundColor: '#3f3f3f'
+};
+ConfigurableTooltip.argTypes = {
+    foregroundColor: { control: { type: 'color' } },
+    backgroundColor: { control: { type: 'color' } }
 };
 //# sourceMappingURL=Tooltip.stories.js.map

package/lib/core/Tooltip/Tooltip.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.stories.js","sourceRoot":"","sources":["../../../src/core/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAEtE,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,OAAO;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,UAAU,EAAE,CAAC;IAEjC,OAAO,CACL,8BACE,KAAC,MAAM,IAAC,GAAG,EAAE,KAAK,iCAAmB,EAEpC,EAAE,IAAI,CACL,KAAC,OAAO,IAAC,MAAM,EAAE,EAAE,gRAIT,CACX,YACA,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Button, Tooltip, useElement } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Tooltip',\n  component: Tooltip\n};\n\nexport const TooltipDemo = () => {\n  const [el, setEl] = useElement();\n\n  return (\n    <>\n      <Button ref={setEl}>Hover me</Button>\n\n      {el && (\n        <Tooltip target={el}>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus scelerisque\n          viverra. Fusce consequat, justo at laoreet lobortis, mauris ipsum aliquet arcu, non\n          convallis nisl elit id erat. Pellentesque posuere sagittis velit a molestie.\n        </Tooltip>\n      )}\n    </>\n  );\n};\n"]}
+{"version":3,"file":"Tooltip.stories.js","sourceRoot":"","sources":["../../../src/core/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErF,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,OAAO;CACX,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAU,GAAG,EAAE;IACrC,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,UAAU,EAAE,CAAC;IAEjC,OAAO,CACL,8BACE,KAAC,MAAM,IAAC,GAAG,EAAE,KAAK,yBAAmB,EAEpC,EAAE,IAAI,CACL,KAAC,OAAO,IAAC,MAAM,EAAE,EAAE,wQAIT,CACX,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAOF,MAAM,CAAC,MAAM,mBAAmB,GAAoC,CAClE,IAA8B,EAC9B,EAAE;IACF,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,UAAU,EAAE,CAAC;IAEjC,OAAO,CACL,MAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,OAAO,EAAE;oBACP,kBAAkB,EAAE,IAAI,CAAC,eAAe;oBACxC,kBAAkB,EAAE,IAAI,CAAC,eAAe;iBACzC;aACF;SACF,aAED,KAAC,MAAM,IAAC,GAAG,EAAE,KAAK,yBAAmB,EAEpC,EAAE,IAAI,CACL,KAAC,OAAO,IAAC,MAAM,EAAE,EAAE,wQAIT,CACX,IACa,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,eAAe,EAAE,SAAS;IAC1B,eAAe,EAAE,SAAS;CAC3B,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC/C,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;CAChD,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Button, Configuration, Tooltip, useElement } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Tooltip',\n  component: Tooltip\n} as Meta;\n\nexport const TooltipDemo: Story = () => {\n  const [el, setEl] = useElement();\n\n  return (\n    <>\n      <Button ref={setEl}>Hover me</Button>\n\n      {el && (\n        <Tooltip target={el}>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus scelerisque\n          viverra. Fusce consequat, justo at laoreet lobortis, mauris ipsum aliquet arcu, non\n          convallis nisl elit id erat. Pellentesque posuere sagittis velit a molestie.\n        </Tooltip>\n      )}\n    </>\n  );\n};\n\ninterface ConfigurableTooltipProps {\n  foregroundColor?: string;\n  backgroundColor?: string;\n}\n\nexport const ConfigurableTooltip: Story<ConfigurableTooltipProps> = (\n  args: ConfigurableTooltipProps\n) => {\n  const [el, setEl] = useElement();\n\n  return (\n    <Configuration\n      theme={{\n        components: {\n          tooltip: {\n            'foreground-color': args.foregroundColor,\n            'background-color': args.backgroundColor\n          }\n        }\n      }}\n    >\n      <Button ref={setEl}>Hover me</Button>\n\n      {el && (\n        <Tooltip target={el}>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus scelerisque\n          viverra. Fusce consequat, justo at laoreet lobortis, mauris ipsum aliquet arcu, non\n          convallis nisl elit id erat. Pellentesque posuere sagittis velit a molestie.\n        </Tooltip>\n      )}\n    </Configuration>\n  );\n};\n\nConfigurableTooltip.args = {\n  foregroundColor: '#f5f5f5',\n  backgroundColor: '#3f3f3f'\n};\n\nConfigurableTooltip.argTypes = {\n  foregroundColor: { control: { type: 'color' } },\n  backgroundColor: { control: { type: 'color' } }\n};\n"]}

package/lib/core/Tree/Tree.stories.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { Meta, Story } from '@storybook/react';
 import { StandardTreeProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const BaseTree: () => JSX.Element;
+export declare const BaseTree: Story;
 export declare const StandardTreeDemo: Story<Pick<StandardTreeProps, 'lined'>>;
 //# sourceMappingURL=Tree.stories.d.ts.map

package/lib/core/Tree/Tree.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Tree/Tree.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAGL,iBAAiB,EAMlB,MAAM,yBAAyB,CAAC;;AAKjC,wBAGU;AAEV,eAAO,MAAM,QAAQ,mBAcpB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,IAAI,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAmFpE,CAAC"}
+{"version":3,"file":"Tree.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Tree/Tree.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAGL,iBAAiB,EAMlB,MAAM,yBAAyB,CAAC;;AAKjC,wBAGU;AAEV,eAAO,MAAM,QAAQ,EAAE,KActB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,IAAI,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAqFpE,CAAC"}

package/lib/core/Tree/Tree.stories.js

@@ -10,10 +10,10 @@ export default {
 };
 export const BaseTree = () => {
     return (_jsx(StyledBaseTree, { nodes: themeToTree(themeDefinition), nodeRenderer: ({ id, subTree }) => {
-            return (_jsxs(_Fragment, { children: [_jsx("span", { children: id }, void 0), subTree] }, void 0));
-        } }, void 0));
+            return (_jsxs(_Fragment, { children: [_jsx("span", { children: id }), subTree] }));
+        } }));
 };
-export const StandardTreeDemo = ({ lined }) => {
+export const StandardTreeDemo = (args) => {
     const getMockNodes = ({ length = 5, parent = true } = {}) => {
         return Array.from({ length }, (_, i) => {
             const isParent = parent && i !== 2;
@@ -57,7 +57,7 @@ export const StandardTreeDemo = ({ lined }) => {
             return treeHelpers.expandTo(tree, id);
         });
     };
-    return (_jsxs(_Fragment, { children: [_jsx(StandardTree, { lined: lined, currentNodeId: currentNodeId, nodes: allNodes, onNodeClick: id => {
+    return (_jsxs(_Fragment, { children: [_jsx(StandardTree, { lined: args.lined, currentNodeId: currentNodeId, nodes: allNodes, onNodeClick: id => {
                     const clickedNode = treeHelpers.getNode(allNodes, id);
                     setCurrentNodeId(id);
                     // If a leaf node, just set to current
@@ -74,7 +74,7 @@ export const StandardTreeDemo = ({ lined }) => {
                     if (clickedNode?.nodes?.length > 0)
                         return;
                     loadChildNodes(id);
-                } }, void 0), _jsx(Button, { onClick: () => expandTo(''), children: "Collapse All" }, void 0), _jsx(Button, { onClick: () => expandTo(currentNodeId || ''), children: "Expand to active item" }, void 0)] }, void 0));
+                } }), _jsx(Button, { onClick: () => expandTo(''), children: "Collapse All" }), _jsx(Button, { onClick: () => expandTo(currentNodeId || ''), children: "Expand to active item" })] }));
 };
 StandardTreeDemo.args = {
     lined: false

package/lib/core/Tree/Tree.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.stories.js","sourceRoot":"","sources":["../../../src/core/Tree/Tree.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n  Button,\n  StandardTree,\n  StandardTreeProps,\n  Tree,\n  TreeNode,\n  treeHelpers,\n  createUID,\n  themeDefinition\n} from '@pega/cosmos-react-core';\n\nimport { themeToTree } from './Tree.mocks';\nimport { StyledBaseTree } from './Tree.styles';\n\nexport default {\n  title: 'Core/Tree',\n  component: Tree\n} as Meta;\n\nexport const BaseTree = () => {\n  return (\n    <StyledBaseTree\n      nodes={themeToTree(themeDefinition)}\n      nodeRenderer={({ id, subTree }) => {\n        return (\n          <>\n            <span>{id}</span>\n            {subTree}\n          </>\n        );\n      }}\n    />\n  );\n};\n\nexport const StandardTreeDemo: Story<Pick<StandardTreeProps, 'lined'>> = ({ lined }) => {\n  const getMockNodes = ({\n    length = 5,\n    parent = true\n  }: { length?: number; parent?: boolean } = {}): StandardTreeProps['nodes'] => {\n    return Array.from({ length }, (_, i) => {\n      const isParent = parent && i !== 2;\n      const id = createUID();\n      return {\n        id,\n        label: isParent ? 'Parent' : 'Leaf',\n        icon: isParent ? 'folder-solid' : 'document-solid',\n        nodes: isParent ? [] : undefined,\n        actions: [\n          { id: 'star', text: 'Star', icon: 'star', onClick: action(`Star node: ${id}`) },\n          { id: 'pin', text: 'Pin', icon: 'pin', onClick: action(`Pin node: ${id}`) }\n        ],\n        onClick: isParent\n          ? undefined\n          : nodeId => {\n              action(`Action for node: ${nodeId}`)();\n            }\n      };\n    });\n  };\n\n  const [currentNodeId, setCurrentNodeId] = useState<string | undefined>();\n  const [allNodes, setAllNodes] = useState<StandardTreeProps['nodes']>(() => {\n    return getMockNodes({ length: 10 });\n  });\n\n  const loadChildNodes = (id: string) => {\n    setTimeout(() => {\n      setAllNodes(tree => {\n        return treeHelpers.mapNode(tree, id, node => {\n          return {\n            ...node,\n            loading: false,\n            nodes: [...(node.nodes ?? []), ...getMockNodes()]\n          };\n        });\n      });\n    }, 1000);\n  };\n\n  const expandTo = (id: TreeNode['id']) => {\n    setAllNodes(tree => {\n      return treeHelpers.expandTo(tree, id);\n    });\n  };\n\n  return (\n    <>\n      <StandardTree\n        lined={lined}\n        currentNodeId={currentNodeId}\n        nodes={allNodes}\n        onNodeClick={id => {\n          const clickedNode = treeHelpers.getNode(allNodes, id);\n          setCurrentNodeId(id);\n          // If a leaf node, just set to current\n          if (!clickedNode?.nodes) return;\n\n          setAllNodes(tree =>\n            treeHelpers.mapNode(tree, id, node => {\n              return {\n                ...node,\n                expanded: !node.expanded,\n                loading: node.nodes?.length === 0\n              };\n            })\n          );\n\n          // If a parent node with children already loaded, we're done.\n          if (clickedNode?.nodes?.length > 0) return;\n\n          loadChildNodes(id);\n        }}\n      />\n      <Button onClick={() => expandTo('')}>Collapse All</Button>\n      <Button onClick={() => expandTo(currentNodeId || '')}>Expand to active item</Button>\n    </>\n  );\n};\n\nStandardTreeDemo.args = {\n  lined: false\n};\n\nStandardTreeDemo.argTypes = {\n  lined: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"Tree.stories.js","sourceRoot":"","sources":["../../../src/core/Tree/Tree.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,OAAO,EACL,MAAM,EACN,YAAY,EAEZ,IAAI,EAEJ,WAAW,EACX,SAAS,EACT,eAAe,EAChB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;CACR,CAAC;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAU,GAAG,EAAE;IAClC,OAAO,CACL,KAAC,cAAc,IACb,KAAK,EAAE,WAAW,CAAC,eAAe,CAAC,EACnC,YAAY,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;YAChC,OAAO,CACL,8BACE,yBAAO,EAAE,GAAQ,EAChB,OAAO,IACP,CACJ,CAAC;QACJ,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAA4C,CACvE,IAAsC,EACtC,EAAE;IACF,MAAM,YAAY,GAAG,CAAC,EACpB,MAAM,GAAG,CAAC,EACV,MAAM,GAAG,IAAI,KAC4B,EAAE,EAA8B,EAAE;QAC3E,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACrC,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC;YACnC,MAAM,EAAE,GAAG,SAAS,EAAE,CAAC;YACvB,OAAO;gBACL,EAAE;gBACF,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;gBACnC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB;gBAClD,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;gBAChC,OAAO,EAAE;oBACP,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,cAAc,EAAE,EAAE,CAAC,EAAE;oBAC/E,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC,EAAE;iBAC5E;gBACD,OAAO,EAAE,QAAQ;oBACf,CAAC,CAAC,SAAS;oBACX,CAAC,CAAC,MAAM,CAAC,EAAE;wBACP,MAAM,CAAC,oBAAoB,MAAM,EAAE,CAAC,EAAE,CAAC;oBACzC,CAAC;aACN,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAAsB,CAAC;IACzE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAA6B,GAAG,EAAE;QACxE,OAAO,YAAY,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,CAAC,EAAU,EAAE,EAAE;QACpC,UAAU,CAAC,GAAG,EAAE;YACd,WAAW,CAAC,IAAI,CAAC,EAAE;gBACjB,OAAO,WAAW,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE;oBAC1C,OAAO;wBACL,GAAG,IAAI;wBACP,OAAO,EAAE,KAAK;wBACd,KAAK,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,GAAG,YAAY,EAAE,CAAC;qBAClD,CAAC;gBACJ,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,EAAkB,EAAE,EAAE;QACtC,WAAW,CAAC,IAAI,CAAC,EAAE;YACjB,OAAO,WAAW,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACxC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,8BACE,KAAC,YAAY,IACX,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,QAAQ,EACf,WAAW,EAAE,EAAE,CAAC,EAAE;oBAChB,MAAM,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;oBACtD,gBAAgB,CAAC,EAAE,CAAC,CAAC;oBACrB,sCAAsC;oBACtC,IAAI,CAAC,WAAW,EAAE,KAAK;wBAAE,OAAO;oBAEhC,WAAW,CAAC,IAAI,CAAC,EAAE,CACjB,WAAW,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE;wBACnC,OAAO;4BACL,GAAG,IAAI;4BACP,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ;4BACxB,OAAO,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC;yBAClC,CAAC;oBACJ,CAAC,CAAC,CACH,CAAC;oBAEF,6DAA6D;oBAC7D,IAAI,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC;wBAAE,OAAO;oBAE3C,cAAc,CAAC,EAAE,CAAC,CAAC;gBACrB,CAAC,GACD,EACF,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,6BAAuB,EAC1D,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,aAAa,IAAI,EAAE,CAAC,sCAAgC,IACnF,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,KAAK,EAAE,KAAK;CACb,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CACxC,CAAC","sourcesContent":["import { useState } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n  Button,\n  StandardTree,\n  StandardTreeProps,\n  Tree,\n  TreeNode,\n  treeHelpers,\n  createUID,\n  themeDefinition\n} from '@pega/cosmos-react-core';\n\nimport { themeToTree } from './Tree.mocks';\nimport { StyledBaseTree } from './Tree.styles';\n\nexport default {\n  title: 'Core/Tree',\n  component: Tree\n} as Meta;\n\nexport const BaseTree: Story = () => {\n  return (\n    <StyledBaseTree\n      nodes={themeToTree(themeDefinition)}\n      nodeRenderer={({ id, subTree }) => {\n        return (\n          <>\n            <span>{id}</span>\n            {subTree}\n          </>\n        );\n      }}\n    />\n  );\n};\n\nexport const StandardTreeDemo: Story<Pick<StandardTreeProps, 'lined'>> = (\n  args: Pick<StandardTreeProps, 'lined'>\n) => {\n  const getMockNodes = ({\n    length = 5,\n    parent = true\n  }: { length?: number; parent?: boolean } = {}): StandardTreeProps['nodes'] => {\n    return Array.from({ length }, (_, i) => {\n      const isParent = parent && i !== 2;\n      const id = createUID();\n      return {\n        id,\n        label: isParent ? 'Parent' : 'Leaf',\n        icon: isParent ? 'folder-solid' : 'document-solid',\n        nodes: isParent ? [] : undefined,\n        actions: [\n          { id: 'star', text: 'Star', icon: 'star', onClick: action(`Star node: ${id}`) },\n          { id: 'pin', text: 'Pin', icon: 'pin', onClick: action(`Pin node: ${id}`) }\n        ],\n        onClick: isParent\n          ? undefined\n          : nodeId => {\n              action(`Action for node: ${nodeId}`)();\n            }\n      };\n    });\n  };\n\n  const [currentNodeId, setCurrentNodeId] = useState<string | undefined>();\n  const [allNodes, setAllNodes] = useState<StandardTreeProps['nodes']>(() => {\n    return getMockNodes({ length: 10 });\n  });\n\n  const loadChildNodes = (id: string) => {\n    setTimeout(() => {\n      setAllNodes(tree => {\n        return treeHelpers.mapNode(tree, id, node => {\n          return {\n            ...node,\n            loading: false,\n            nodes: [...(node.nodes ?? []), ...getMockNodes()]\n          };\n        });\n      });\n    }, 1000);\n  };\n\n  const expandTo = (id: TreeNode['id']) => {\n    setAllNodes(tree => {\n      return treeHelpers.expandTo(tree, id);\n    });\n  };\n\n  return (\n    <>\n      <StandardTree\n        lined={args.lined}\n        currentNodeId={currentNodeId}\n        nodes={allNodes}\n        onNodeClick={id => {\n          const clickedNode = treeHelpers.getNode(allNodes, id);\n          setCurrentNodeId(id);\n          // If a leaf node, just set to current\n          if (!clickedNode?.nodes) return;\n\n          setAllNodes(tree =>\n            treeHelpers.mapNode(tree, id, node => {\n              return {\n                ...node,\n                expanded: !node.expanded,\n                loading: node.nodes?.length === 0\n              };\n            })\n          );\n\n          // If a parent node with children already loaded, we're done.\n          if (clickedNode?.nodes?.length > 0) return;\n\n          loadChildNodes(id);\n        }}\n      />\n      <Button onClick={() => expandTo('')}>Collapse All</Button>\n      <Button onClick={() => expandTo(currentNodeId || '')}>Expand to active item</Button>\n    </>\n  );\n};\n\nStandardTreeDemo.args = {\n  lined: false\n};\n\nStandardTreeDemo.argTypes = {\n  lined: { control: { type: 'boolean' } }\n};\n"]}

package/lib/core/URL/URL.stories.js

@@ -4,7 +4,7 @@ export default {
     title: 'Core/URL',
     component: URLDisplay
 };
-export const URLDisplayDemo = (args) => (_jsx(URLDisplay, { value: args.value, displayText: args.displayText, variant: args.variant }, void 0));
+export const URLDisplayDemo = (args) => (_jsx(URLDisplay, { value: args.value, displayText: args.displayText, variant: args.variant }));
 URLDisplayDemo.args = {
     value: 'https://www.google.com/',
     displayText: 'Example URL',

package/lib/core/URL/URL.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"URL.stories.js","sourceRoot":"","sources":["../../../src/core/URL/URL.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AAEtE,eAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,UAAU;CACd,CAAC;AAEV,MAAM,CAAC,MAAM,cAAc,GAA2B,CAAC,IAAqB,EAAE,EAAE,CAAC,CAC/E,KAAC,UAAU,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,WAAI,CACxF,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,KAAK,EAAE,yBAAyB;IAChC,WAAW,EAAE,aAAa;IAC1B,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACpE,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { URLDisplay, URLDisplayProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/URL',\n  component: URLDisplay\n} as Meta;\n\nexport const URLDisplayDemo: Story<URLDisplayProps> = (args: URLDisplayProps) => (\n  <URLDisplay value={args.value} displayText={args.displayText} variant={args.variant} />\n);\n\nURLDisplayDemo.args = {\n  value: 'https://www.google.com/',\n  displayText: 'Example URL',\n  variant: 'link'\n};\n\nURLDisplayDemo.argTypes = {\n  value: { control: { type: 'text' } },\n  displayText: { control: { type: 'text' } },\n  variant: { options: ['link', 'text'], control: { type: 'select' } }\n};\n"]}
+{"version":3,"file":"URL.stories.js","sourceRoot":"","sources":["../../../src/core/URL/URL.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AAEtE,eAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,UAAU;CACd,CAAC;AAEV,MAAM,CAAC,MAAM,cAAc,GAA2B,CAAC,IAAqB,EAAE,EAAE,CAAC,CAC/E,KAAC,UAAU,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI,CACxF,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,KAAK,EAAE,yBAAyB;IAChC,WAAW,EAAE,aAAa;IAC1B,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACpE,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { URLDisplay, URLDisplayProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/URL',\n  component: URLDisplay\n} as Meta;\n\nexport const URLDisplayDemo: Story<URLDisplayProps> = (args: URLDisplayProps) => (\n  <URLDisplay value={args.value} displayText={args.displayText} variant={args.variant} />\n);\n\nURLDisplayDemo.args = {\n  value: 'https://www.google.com/',\n  displayText: 'Example URL',\n  variant: 'link'\n};\n\nURLDisplayDemo.argTypes = {\n  value: { control: { type: 'text' } },\n  displayText: { control: { type: 'text' } },\n  variant: { options: ['link', 'text'], control: { type: 'select' } }\n};\n"]}

package/lib/cs/Article/Article.stories.d.ts

@@ -1,15 +1,6 @@
-/// <reference types="react" />
-declare const _default: {
-    title: string;
-    component: import("react").FunctionComponent<import("@pega/cosmos-react-cs").ArticleProps & import("@pega/cosmos-react-core").ForwardProps>;
-    subcomponents: {
-        ArticleFooter: import("react").FunctionComponent<import("@pega/cosmos-react-cs").ArticleFooterProps & import("@pega/cosmos-react-core").ForwardProps>;
-    };
-    parameters: {
-        layout: string;
-    };
-};
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const ArticleStory: () => JSX.Element;
-export declare const ArticleStorySkeletonize: () => JSX.Element;
+export declare const ArticleStory: Story;
+export declare const ArticleStorySkeletonize: Story;
 //# sourceMappingURL=Article.stories.d.ts.map

package/lib/cs/Article/Article.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Article.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/Article/Article.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAeA,wBAOE;AAEF,eAAO,MAAM,YAAY,mBA2GxB,CAAC;AAEF,eAAO,MAAM,uBAAuB,mBAwCnC,CAAC"}
+{"version":3,"file":"Article.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/Article/Article.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAc/C,wBAOU;AAEV,eAAO,MAAM,YAAY,EAAE,KA2G1B,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAwCrC,CAAC"}

package/lib/cs/Article/Article.stories.js

@@ -24,7 +24,7 @@ export const ArticleStory = () => {
     return (_jsx("div", { style: {
             maxWidth: '31.25rem',
             maxHeight: '100vh'
-        }, children: _jsx(Article, { navigation: _jsx(Link, { href: '/', onClick: onBackToArticlesClick, children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'caret-left' }, void 0), _jsx(Text, { children: "Back to all articles" }, void 0)] }, void 0) }, void 0), primaryActions: _jsxs(_Fragment, { children: [_jsx(Button, { "aria-label": 'star', variant: 'simple', icon: true, children: _jsx(Icon, { name: 'star' }, void 0) }, void 0), _jsx(Button, { "aria-label": 'open', variant: 'simple', icon: true, children: _jsx(Icon, { name: 'open' }, void 0) }, void 0)] }, void 0), secondaryActions: [
+        }, children: _jsx(Article, { navigation: _jsx(Link, { href: '/', onClick: onBackToArticlesClick, children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'caret-left' }), _jsx(Text, { children: "Back to all articles" })] }) }), primaryActions: _jsxs(_Fragment, { children: [_jsx(Button, { "aria-label": 'star', variant: 'simple', icon: true, children: _jsx(Icon, { name: 'star' }) }), _jsx(Button, { "aria-label": 'open', variant: 'simple', icon: true, children: _jsx(Icon, { name: 'open' }) })] }), secondaryActions: [
                 {
                     text: 'Filter 1',
                     id: 'f1a'
@@ -36,11 +36,11 @@ export const ArticleStory = () => {
             ], content: 
             // TODO : Container components need to ensure that html being sent to the __html below needs to be free from XSS attack
             // eslint-disable-next-line react/no-danger
-            _jsx("div", { dangerouslySetInnerHTML: { __html: ArticleMockData.fullArticleContent.content } }, void 0), skeletonize: false, title: ArticleMockData.fullArticleContent.header, meta: [
-                _jsx(Text, { variant: 'secondary', "aria-label": 'category', children: ArticleMockData.fullArticleContent.meta.category }, void 0),
-                _jsx(Text, { variant: 'secondary', "aria-label": 'published date', children: ArticleMockData.fullArticleContent.meta.publishedDate }, void 0),
-                _jsxs(Flex, { container: { gap: 2, alignItems: 'center' }, children: [_jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Icon, { name: 'thumbs-up-solid' }, void 0), _jsxs(Text, { "aria-label": 'likes', children: ["(", ArticleMockData.fullArticleContent.meta.likes, ")"] }, void 0)] }, void 0), _jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Icon, { name: 'thumbs-down-solid' }, void 0), _jsxs(Text, { "aria-label": 'dislikes', children: ["(", ArticleMockData.fullArticleContent.meta.disLikes, ")"] }, void 0)] }, void 0)] }, void 0)
-            ], footer: _jsx(ArticleFooter, { content: _jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Text, { children: "Was this helpful ?" }, void 0), " ", _jsx(Button, { children: "Yes" }, void 0), " ", _jsx(Button, { children: "No" }, void 0)] }, void 0), tags: [
+            _jsx("div", { dangerouslySetInnerHTML: { __html: ArticleMockData.fullArticleContent.content } }), skeletonize: false, title: ArticleMockData.fullArticleContent.header, meta: [
+                _jsx(Text, { variant: 'secondary', "aria-label": 'category', children: ArticleMockData.fullArticleContent.meta.category }),
+                _jsx(Text, { variant: 'secondary', "aria-label": 'published date', children: ArticleMockData.fullArticleContent.meta.publishedDate }),
+                _jsxs(Flex, { container: { gap: 2, alignItems: 'center' }, children: [_jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Icon, { name: 'thumbs-up-solid' }), _jsxs(Text, { "aria-label": 'likes', children: ["(", ArticleMockData.fullArticleContent.meta.likes, ")"] })] }), _jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Icon, { name: 'thumbs-down-solid' }), _jsxs(Text, { "aria-label": 'dislikes', children: ["(", ArticleMockData.fullArticleContent.meta.disLikes, ")"] })] })] })
+            ], footer: _jsx(ArticleFooter, { content: _jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Text, { children: "Was this helpful ?" }), " ", _jsx(Button, { children: "Yes" }), " ", _jsx(Button, { children: "No" })] }), tags: [
                     {
                         id: 'Retail banking',
                         tagName: '#Retail_banking'
@@ -65,13 +65,13 @@ export const ArticleStory = () => {
                         id: '223448',
                         tagName: '#Finance_Customers'
                     }
-                ], onTagClick: action('Tag clicked') }, void 0) }, void 0) }, void 0));
+                ], onTagClick: action('Tag clicked') }) }) }));
 };
 export const ArticleStorySkeletonize = () => {
     const onBackToArticlesClick = (event) => {
         event.preventDefault();
     };
-    return (_jsx("div", { style: { maxWidth: '31.25rem', maxHeight: '100vh' }, children: _jsx(Article, { skeletonize: true, navigation: _jsx(Link, { href: '/', onClick: onBackToArticlesClick, children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'caret-left' }, void 0), _jsx(Text, { children: "Back to articles" }, void 0)] }, void 0) }, void 0), primaryActions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: 'simple', icon: true, children: _jsx(Icon, { name: 'star' }, void 0) }, void 0), _jsx(Button, { variant: 'simple', icon: true, children: _jsx(Icon, { name: 'open' }, void 0) }, void 0)] }, void 0), secondaryActions: [
+    return (_jsx("div", { style: { maxWidth: '31.25rem', maxHeight: '100vh' }, children: _jsx(Article, { skeletonize: true, navigation: _jsx(Link, { href: '/', onClick: onBackToArticlesClick, children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'caret-left' }), _jsx(Text, { children: "Back to articles" })] }) }), primaryActions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: 'simple', icon: true, children: _jsx(Icon, { name: 'star' }) }), _jsx(Button, { variant: 'simple', icon: true, children: _jsx(Icon, { name: 'open' }) })] }), secondaryActions: [
                 {
                     text: 'Filter 1',
                     id: 'f1a'
@@ -80,6 +80,6 @@ export const ArticleStorySkeletonize = () => {
                     text: 'Filter 2',
                     id: 'f2a'
                 }
-            ] }, void 0) }, void 0));
+            ] }) }));
 };
 //# sourceMappingURL=Article.stories.js.map

package/lib/cs/Article/Article.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Article.stories.js","sourceRoot":"","sources":["../../../src/cs/Article/Article.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MouseEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport { Button, Flex, Icon, registerIcon, Link, Text } from '@pega/cosmos-react-core';\nimport * as openIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/open.icon';\nimport * as starIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/star.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\nimport * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';\nimport * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';\nimport { Article, ArticleFooter } from '@pega/cosmos-react-cs';\n\nimport { ArticleMockData } from './Article.mocks';\n\nregisterIcon(openIcon, starIcon, caretLeftIcon, thumbsUpSolidIcon, thumbsDownSolidIcon);\n\nexport default {\n  title: 'Customer Service/Article',\n  component: Article,\n  subcomponents: { ArticleFooter },\n  parameters: {\n    layout: 'fullscreen'\n  }\n};\n\nexport const ArticleStory = () => {\n  const onBackToArticlesClick = (event: MouseEvent) => {\n    event.preventDefault();\n  };\n\n  return (\n    <div\n      style={{\n        maxWidth: '31.25rem',\n        maxHeight: '100vh'\n      }}\n    >\n      <Article\n        navigation={\n          <Link href='/' onClick={onBackToArticlesClick}>\n            <Flex container={{ alignItems: 'center', gap: 1 }}>\n              <Icon name='caret-left' />\n              <Text>Back to all articles</Text>\n            </Flex>\n          </Link>\n        }\n        primaryActions={\n          <>\n            <Button aria-label='star' variant='simple' icon>\n              <Icon name='star' />\n            </Button>\n            <Button aria-label='open' variant='simple' icon>\n              <Icon name='open' />\n            </Button>\n          </>\n        }\n        secondaryActions={[\n          {\n            text: 'Filter 1',\n            id: 'f1a'\n          },\n          {\n            text: 'Filter 2',\n            id: 'f2a'\n          }\n        ]}\n        content={\n          // TODO : Container components need to ensure that html being sent to the __html below needs to be free from XSS attack\n          // eslint-disable-next-line react/no-danger\n          <div dangerouslySetInnerHTML={{ __html: ArticleMockData.fullArticleContent.content }} />\n        }\n        skeletonize={false}\n        title={ArticleMockData.fullArticleContent.header}\n        meta={[\n          <Text variant='secondary' aria-label='category'>\n            {ArticleMockData.fullArticleContent.meta.category}\n          </Text>,\n          <Text variant='secondary' aria-label='published date'>\n            {ArticleMockData.fullArticleContent.meta.publishedDate}\n          </Text>,\n          <Flex container={{ gap: 2, alignItems: 'center' }}>\n            <Flex container={{ gap: 1, alignItems: 'center' }}>\n              <Icon name='thumbs-up-solid' />\n              <Text aria-label='likes'>({ArticleMockData.fullArticleContent.meta.likes})</Text>\n            </Flex>\n            <Flex container={{ gap: 1, alignItems: 'center' }}>\n              <Icon name='thumbs-down-solid' />\n              <Text aria-label='dislikes'>\n                ({ArticleMockData.fullArticleContent.meta.disLikes})\n              </Text>\n            </Flex>\n          </Flex>\n        ]}\n        footer={\n          <ArticleFooter\n            content={\n              <Flex container={{ gap: 1 }}>\n                <Text>Was this helpful ?</Text> <Button>Yes</Button> <Button>No</Button>\n              </Flex>\n            }\n            tags={[\n              {\n                id: 'Retail banking',\n                tagName: '#Retail_banking'\n              },\n              {\n                id: 'difficult_customers',\n                tagName: '#Difficult_customers'\n              },\n              {\n                id: '223444',\n                tagName: '#CSR_Skills'\n              },\n              {\n                id: '223446',\n                tagName: '#Premium_Customers'\n              },\n              {\n                id: '223447',\n                tagName: '#Rare_Customers'\n              },\n              {\n                id: '223448',\n                tagName: '#Finance_Customers'\n              }\n            ]}\n            onTagClick={action('Tag clicked')}\n          />\n        }\n      />\n    </div>\n  );\n};\n\nexport const ArticleStorySkeletonize = () => {\n  const onBackToArticlesClick = (event: MouseEvent) => {\n    event.preventDefault();\n  };\n\n  return (\n    <div style={{ maxWidth: '31.25rem', maxHeight: '100vh' }}>\n      <Article\n        skeletonize\n        navigation={\n          <Link href='/' onClick={onBackToArticlesClick}>\n            <Flex container={{ alignItems: 'center', gap: 1 }}>\n              <Icon name='caret-left' />\n              <Text>Back to articles</Text>\n            </Flex>\n          </Link>\n        }\n        primaryActions={\n          <>\n            <Button variant='simple' icon>\n              <Icon name='star' />\n            </Button>\n            <Button variant='simple' icon>\n              <Icon name='open' />\n            </Button>\n          </>\n        }\n        secondaryActions={[\n          {\n            text: 'Filter 1',\n            id: 'f1a'\n          },\n          {\n            text: 'Filter 2',\n            id: 'f2a'\n          }\n        ]}\n      />\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"Article.stories.js","sourceRoot":"","sources":["../../../src/cs/Article/Article.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MouseEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport { Button, Flex, Icon, registerIcon, Link, Text } from '@pega/cosmos-react-core';\nimport * as openIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/open.icon';\nimport * as starIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/star.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\nimport * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';\nimport * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';\nimport { Article, ArticleFooter } from '@pega/cosmos-react-cs';\n\nimport { ArticleMockData } from './Article.mocks';\n\nregisterIcon(openIcon, starIcon, caretLeftIcon, thumbsUpSolidIcon, thumbsDownSolidIcon);\n\nexport default {\n  title: 'Customer Service/Article',\n  component: Article,\n  subcomponents: { ArticleFooter },\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport const ArticleStory: Story = () => {\n  const onBackToArticlesClick = (event: MouseEvent) => {\n    event.preventDefault();\n  };\n\n  return (\n    <div\n      style={{\n        maxWidth: '31.25rem',\n        maxHeight: '100vh'\n      }}\n    >\n      <Article\n        navigation={\n          <Link href='/' onClick={onBackToArticlesClick}>\n            <Flex container={{ alignItems: 'center', gap: 1 }}>\n              <Icon name='caret-left' />\n              <Text>Back to all articles</Text>\n            </Flex>\n          </Link>\n        }\n        primaryActions={\n          <>\n            <Button aria-label='star' variant='simple' icon>\n              <Icon name='star' />\n            </Button>\n            <Button aria-label='open' variant='simple' icon>\n              <Icon name='open' />\n            </Button>\n          </>\n        }\n        secondaryActions={[\n          {\n            text: 'Filter 1',\n            id: 'f1a'\n          },\n          {\n            text: 'Filter 2',\n            id: 'f2a'\n          }\n        ]}\n        content={\n          // TODO : Container components need to ensure that html being sent to the __html below needs to be free from XSS attack\n          // eslint-disable-next-line react/no-danger\n          <div dangerouslySetInnerHTML={{ __html: ArticleMockData.fullArticleContent.content }} />\n        }\n        skeletonize={false}\n        title={ArticleMockData.fullArticleContent.header}\n        meta={[\n          <Text variant='secondary' aria-label='category'>\n            {ArticleMockData.fullArticleContent.meta.category}\n          </Text>,\n          <Text variant='secondary' aria-label='published date'>\n            {ArticleMockData.fullArticleContent.meta.publishedDate}\n          </Text>,\n          <Flex container={{ gap: 2, alignItems: 'center' }}>\n            <Flex container={{ gap: 1, alignItems: 'center' }}>\n              <Icon name='thumbs-up-solid' />\n              <Text aria-label='likes'>({ArticleMockData.fullArticleContent.meta.likes})</Text>\n            </Flex>\n            <Flex container={{ gap: 1, alignItems: 'center' }}>\n              <Icon name='thumbs-down-solid' />\n              <Text aria-label='dislikes'>\n                ({ArticleMockData.fullArticleContent.meta.disLikes})\n              </Text>\n            </Flex>\n          </Flex>\n        ]}\n        footer={\n          <ArticleFooter\n            content={\n              <Flex container={{ gap: 1 }}>\n                <Text>Was this helpful ?</Text> <Button>Yes</Button> <Button>No</Button>\n              </Flex>\n            }\n            tags={[\n              {\n                id: 'Retail banking',\n                tagName: '#Retail_banking'\n              },\n              {\n                id: 'difficult_customers',\n                tagName: '#Difficult_customers'\n              },\n              {\n                id: '223444',\n                tagName: '#CSR_Skills'\n              },\n              {\n                id: '223446',\n                tagName: '#Premium_Customers'\n              },\n              {\n                id: '223447',\n                tagName: '#Rare_Customers'\n              },\n              {\n                id: '223448',\n                tagName: '#Finance_Customers'\n              }\n            ]}\n            onTagClick={action('Tag clicked')}\n          />\n        }\n      />\n    </div>\n  );\n};\n\nexport const ArticleStorySkeletonize: Story = () => {\n  const onBackToArticlesClick = (event: MouseEvent) => {\n    event.preventDefault();\n  };\n\n  return (\n    <div style={{ maxWidth: '31.25rem', maxHeight: '100vh' }}>\n      <Article\n        skeletonize\n        navigation={\n          <Link href='/' onClick={onBackToArticlesClick}>\n            <Flex container={{ alignItems: 'center', gap: 1 }}>\n              <Icon name='caret-left' />\n              <Text>Back to articles</Text>\n            </Flex>\n          </Link>\n        }\n        primaryActions={\n          <>\n            <Button variant='simple' icon>\n              <Icon name='star' />\n            </Button>\n            <Button variant='simple' icon>\n              <Icon name='open' />\n            </Button>\n          </>\n        }\n        secondaryActions={[\n          {\n            text: 'Filter 1',\n            id: 'f1a'\n          },\n          {\n            text: 'Filter 2',\n            id: 'f2a'\n          }\n        ]}\n      />\n    </div>\n  );\n};\n"]}

package/lib/cs/ArticleList/ArticleList.stories.d.ts

@@ -1,16 +1,6 @@
-/// <reference types="react" />
-declare const _default: {
-    title: string;
-    component: import("react").FunctionComponent<import("@pega/cosmos-react-cs").ArticleListProps & import("@pega/cosmos-react-core").ForwardProps>;
-    subcomponents: {
-        ArticleSummary: import("react").FunctionComponent<import("@pega/cosmos-react-cs").ArticleSummaryProps & import("@pega/cosmos-react-core").ForwardProps>;
-        ArticleListHeader: import("react").FunctionComponent<import("@pega/cosmos-react-cs").ArticleListHeaderProps>;
-    };
-    parameters: {
-        layout: string;
-    };
-};
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const FirstArticleList: () => JSX.Element;
-export declare const ArticleListWithSkeleton: () => JSX.Element;
+export declare const FirstArticleList: Story;
+export declare const ArticleListWithSkeleton: Story;
 //# sourceMappingURL=ArticleList.stories.d.ts.map

package/lib/cs/ArticleList/ArticleList.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleList.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/ArticleList/ArticleList.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;AA0BA,wBAOE;AAIF,eAAO,MAAM,gBAAgB,mBAyJ5B,CAAC;AAEF,eAAO,MAAM,uBAAuB,mBASnC,CAAC"}
+{"version":3,"file":"ArticleList.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/ArticleList/ArticleList.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAyB/C,wBAOU;AAIV,eAAO,MAAM,gBAAgB,EAAE,KA2J9B,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KASrC,CAAC"}

package/lib/cs/ArticleList/ArticleList.stories.js

@@ -32,10 +32,11 @@ export const FirstArticleList = () => {
         event.preventDefault();
     };
     const ALHeader = {
-        icon: _jsx(Icon, { name: 'help' }, void 0),
+        icon: _jsx(Icon, { name: 'help' }),
         headerText: 'Knowledge articles',
+        count: 5,
         primary: {
-            search: (_jsx(SearchInput, { value: query, onChange: (event) => setQuery(event.target.value), onSearchChange: action('Search query'), onSearchSubmit: action('Search submit'), placeholder: 'Search\u2026' }, void 0)),
+            search: (_jsx(SearchInput, { value: query, onChange: (event) => setQuery(event.target.value), onSearchChange: action('Search query'), onSearchSubmit: action('Search submit'), placeholder: 'Search\u2026' })),
             actions: [
                 { text: 'Option Number 1', id: '1a' },
                 { text: 'Option Number 2', id: '2a' }
@@ -51,7 +52,7 @@ export const FirstArticleList = () => {
                                 id: 'f2a'
                             }
                         ]
-                    }, icon: 'filter', text: 'filter', iconOnly: true }, void 0) }, void 0))
+                    }, icon: 'filter', text: 'filter', iconOnly: true }) }))
         },
         secondary: (_jsxs(_Fragment, { children: [_jsx(FormField, { label: 'Category', children: _jsx(ComboBox, { selected: { items: categoryFilter }, placeholder: 'Filter by category', menu: {
                             items: categoriesList,
@@ -61,23 +62,23 @@ export const FirstArticleList = () => {
                                 setCategoriesList(newList);
                                 setCategoryFilter({ text: itemText, id });
                             }
-                        } }, void 0) }, void 0), _jsx(Select, { label: 'Sort by', children: ArticleListMockData.sortByOptions.map(opt => (_jsx(Option, { children: opt }, opt))) }, void 0)] }, void 0))
+                        } }) }), _jsx(Select, { label: 'Sort by', children: ArticleListMockData.sortByOptions.map(opt => (_jsx(Option, { children: opt }, opt))) })] }))
     };
     return (_jsx("div", { style: {
             width: '31.25rem',
             maxHeight: '100vh'
-        }, children: _jsx(ArticleList, { skeletonize: false, header: _jsx(ArticleListHeader, { icon: ALHeader.icon, headerText: ALHeader.headerText, primary: ALHeader.primary, secondary: ALHeader.secondary, onSubmit: action('Filter details submitted') }, void 0), footer: _jsx(Flex, { container: { alignItems: 'center', justify: 'end' }, item: { grow: 1 }, children: _jsx(Pagination, { total: 70, pageNumber: currentPage, onPageChange: pageNumber => {
+        }, children: _jsx(ArticleList, { skeletonize: false, header: _jsx(ArticleListHeader, { icon: ALHeader.icon, count: ALHeader.count, headerText: ALHeader.headerText, primary: ALHeader.primary, secondary: ALHeader.secondary, onSubmit: action('Filter details submitted') }), footer: _jsx(Flex, { container: { alignItems: 'center', justify: 'end' }, item: { grow: 1 }, children: _jsx(Pagination, { total: 70, pageNumber: currentPage, onPageChange: pageNumber => {
                         setCurrentPage(pageNumber);
-                    } }, void 0) }, void 0), children: ArticleListMockData.articleList.map((dataItem, id) => {
-                return (_jsx(ArticleSummary, { header: _jsx(Link, { href: 'design.pega.com', "data-article-id": dataItem.articleId, onClick: handleArticleLinkClick, children: dataItem.header }, void 0), content: _jsx(Text, { children: dataItem.abstract }, void 0), articleID: `article-${id}`, meta: [
-                        _jsx(Text, { children: dataItem.meta.category }, void 0),
+                    } }) }), children: ArticleListMockData.articleList.map((dataItem, id) => {
+                return (_jsx(ArticleSummary, { header: _jsx(Link, { href: 'design.pega.com', "data-article-id": dataItem.articleId, onClick: handleArticleLinkClick, children: dataItem.header }), content: _jsx(Text, { children: dataItem.abstract }), articleID: `article-${id}`, meta: [
+                        _jsx(Text, { children: dataItem.meta.category }),
                         dataItem.meta.publishedDate,
-                        _jsxs(Flex, { container: { gap: 2, alignItems: 'center' }, children: [_jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Icon, { name: 'thumbs-up-solid' }, void 0), _jsxs(Text, { children: ["(", dataItem.meta.likes, ")"] }, void 0)] }, void 0), _jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Icon, { name: 'thumbs-down-solid' }, void 0), _jsxs(Text, { children: ["(", dataItem.meta.disLikes, ")"] }, void 0)] }, void 0)] }, void 0)
+                        _jsxs(Flex, { container: { gap: 2, alignItems: 'center' }, children: [_jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Icon, { name: 'thumbs-up-solid' }), _jsxs(Text, { children: ["(", dataItem.meta.likes, ")"] })] }), _jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Icon, { name: 'thumbs-down-solid' }), _jsxs(Text, { children: ["(", dataItem.meta.disLikes, ")"] })] })] })
                     ] }, id.toString()));
-            }) }, void 0) }, void 0));
+            }) }) }));
 };
 export const ArticleListWithSkeleton = () => (_jsx("div", { style: {
         maxWidth: '31.25rem',
         maxHeight: '100vh'
-    }, children: _jsx(ArticleList, { skeletonize: true }, void 0) }, void 0));
+    }, children: _jsx(ArticleList, { skeletonize: true }) }));
 //# sourceMappingURL=ArticleList.stories.js.map

package/lib/cs/ArticleList/ArticleList.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleList.stories.js","sourceRoot":"","sources":["../../../src/cs/ArticleList/ArticleList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, MouseEvent, SetStateAction } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  ComboBox,\n  Flex,\n  FormField,\n  Icon,\n  Link,\n  MenuButton,\n  Pagination,\n  SearchInput,\n  Select,\n  Option,\n  Text,\n  menuHelpers,\n  MenuProps,\n  registerIcon\n} from '@pega/cosmos-react-core';\nimport * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';\nimport * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';\nimport * as helpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/help.icon';\nimport { ArticleList, ArticleSummary, ArticleListHeader } from '@pega/cosmos-react-cs';\n\nimport { ArticleListMockData } from './ArticleList.mocks';\n\nexport default {\n  title: 'Customer Service/ArticleList',\n  component: ArticleList,\n  subcomponents: { ArticleSummary, ArticleListHeader },\n  parameters: {\n    layout: 'fullscreen'\n  }\n};\n\nregisterIcon(thumbsUpSolidIcon, thumbsDownSolidIcon, helpIcon);\n\nexport const FirstArticleList = () => {\n  const [query, setQuery] = useState('');\n  const [currentPage, setCurrentPage] = useState(1);\n  const [categoryFilter, setCategoryFilter] = useState<{ id: string; text: string } | undefined>(\n    undefined\n  );\n  const [categoriesList, setCategoriesList] = useState<MenuProps['items']>(\n    ArticleListMockData.categoriesList.map(({ id, name, level, category }) => {\n      return {\n        id,\n        primary: name,\n        secondary: [level, category],\n        selected: false\n      };\n    })\n  );\n\n  const handleArticleLinkClick = (event: MouseEvent) => {\n    event.preventDefault();\n  };\n\n  const ALHeader = {\n    icon: <Icon name='help' />,\n    headerText: 'Knowledge articles',\n    primary: {\n      search: (\n        <SearchInput\n          value={query}\n          onChange={(event: { target: { value: SetStateAction<string> } }) =>\n            setQuery(event.target.value)\n          }\n          onSearchChange={action('Search query')}\n          onSearchSubmit={action('Search submit')}\n          placeholder='Search…'\n        />\n      ),\n      actions: [\n        { text: 'Option Number 1', id: '1a' },\n        { text: 'Option Number 2', id: '2a' }\n      ],\n      followedFilter: (\n        <Flex container={{ gap: 1 }}>\n          <MenuButton\n            variant='simple'\n            menu={{\n              items: [\n                {\n                  primary: 'Filter 1',\n                  id: 'f1a'\n                },\n                {\n                  primary: 'Filter 2',\n                  id: 'f2a'\n                }\n              ]\n            }}\n            icon='filter'\n            text='filter'\n            iconOnly\n          />\n        </Flex>\n      )\n    },\n    secondary: (\n      <>\n        <FormField label='Category'>\n          <ComboBox\n            selected={{ items: categoryFilter }}\n            placeholder='Filter by category'\n            menu={{\n              items: categoriesList,\n              onItemClick: id => {\n                const newList = menuHelpers.selectItem(categoriesList, id, 'single-select');\n                const { primary: itemText } = menuHelpers.getSelected(newList)[0];\n                setCategoriesList(newList);\n                setCategoryFilter({ text: itemText, id });\n              }\n            }}\n          />\n        </FormField>\n        <Select label='Sort by'>\n          {ArticleListMockData.sortByOptions.map(opt => (\n            <Option key={opt}>{opt}</Option>\n          ))}\n        </Select>\n      </>\n    )\n  };\n  return (\n    <div\n      style={{\n        width: '31.25rem',\n        maxHeight: '100vh'\n      }}\n    >\n      <ArticleList\n        skeletonize={false}\n        header={\n          <ArticleListHeader\n            icon={ALHeader.icon}\n            headerText={ALHeader.headerText}\n            primary={ALHeader.primary}\n            secondary={ALHeader.secondary}\n            onSubmit={action('Filter details submitted')}\n          />\n        }\n        footer={\n          <Flex container={{ alignItems: 'center', justify: 'end' }} item={{ grow: 1 }}>\n            <Pagination\n              total={70}\n              pageNumber={currentPage}\n              onPageChange={pageNumber => {\n                setCurrentPage(pageNumber);\n              }}\n            />\n          </Flex>\n        }\n      >\n        {ArticleListMockData.articleList.map((dataItem, id) => {\n          return (\n            <ArticleSummary\n              key={id.toString()}\n              header={\n                <Link\n                  href='design.pega.com'\n                  data-article-id={dataItem.articleId}\n                  onClick={handleArticleLinkClick}\n                >\n                  {dataItem.header}\n                </Link>\n              }\n              content={<Text>{dataItem.abstract}</Text>}\n              articleID={`article-${id}`}\n              meta={[\n                <Text>{dataItem.meta.category}</Text>,\n                dataItem.meta.publishedDate,\n                <Flex container={{ gap: 2, alignItems: 'center' }}>\n                  <Flex container={{ gap: 1, alignItems: 'center' }}>\n                    <Icon name='thumbs-up-solid' />\n                    <Text>({dataItem.meta.likes})</Text>\n                  </Flex>\n                  <Flex container={{ gap: 1, alignItems: 'center' }}>\n                    <Icon name='thumbs-down-solid' />\n                    <Text>({dataItem.meta.disLikes})</Text>\n                  </Flex>\n                </Flex>\n              ]}\n            />\n          );\n        })}\n      </ArticleList>\n    </div>\n  );\n};\n\nexport const ArticleListWithSkeleton = () => (\n  <div\n    style={{\n      maxWidth: '31.25rem',\n      maxHeight: '100vh'\n    }}\n  >\n    <ArticleList skeletonize />\n  </div>\n);\n"]}
+{"version":3,"file":"ArticleList.stories.js","sourceRoot":"","sources":["../../../src/cs/ArticleList/ArticleList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, MouseEvent, SetStateAction } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n  ComboBox,\n  Flex,\n  FormField,\n  Icon,\n  Link,\n  MenuButton,\n  Pagination,\n  SearchInput,\n  Select,\n  Option,\n  Text,\n  menuHelpers,\n  MenuProps,\n  registerIcon\n} from '@pega/cosmos-react-core';\nimport * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';\nimport * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';\nimport * as helpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/help.icon';\nimport { ArticleList, ArticleSummary, ArticleListHeader } from '@pega/cosmos-react-cs';\n\nimport { ArticleListMockData } from './ArticleList.mocks';\n\nexport default {\n  title: 'Customer Service/ArticleList',\n  component: ArticleList,\n  subcomponents: { ArticleSummary, ArticleListHeader },\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nregisterIcon(thumbsUpSolidIcon, thumbsDownSolidIcon, helpIcon);\n\nexport const FirstArticleList: Story = () => {\n  const [query, setQuery] = useState('');\n  const [currentPage, setCurrentPage] = useState(1);\n  const [categoryFilter, setCategoryFilter] = useState<{ id: string; text: string } | undefined>(\n    undefined\n  );\n  const [categoriesList, setCategoriesList] = useState<MenuProps['items']>(\n    ArticleListMockData.categoriesList.map(({ id, name, level, category }) => {\n      return {\n        id,\n        primary: name,\n        secondary: [level, category],\n        selected: false\n      };\n    })\n  );\n\n  const handleArticleLinkClick = (event: MouseEvent) => {\n    event.preventDefault();\n  };\n\n  const ALHeader = {\n    icon: <Icon name='help' />,\n    headerText: 'Knowledge articles',\n    count: 5,\n    primary: {\n      search: (\n        <SearchInput\n          value={query}\n          onChange={(event: { target: { value: SetStateAction<string> } }) =>\n            setQuery(event.target.value)\n          }\n          onSearchChange={action('Search query')}\n          onSearchSubmit={action('Search submit')}\n          placeholder='Search…'\n        />\n      ),\n      actions: [\n        { text: 'Option Number 1', id: '1a' },\n        { text: 'Option Number 2', id: '2a' }\n      ],\n      followedFilter: (\n        <Flex container={{ gap: 1 }}>\n          <MenuButton\n            variant='simple'\n            menu={{\n              items: [\n                {\n                  primary: 'Filter 1',\n                  id: 'f1a'\n                },\n                {\n                  primary: 'Filter 2',\n                  id: 'f2a'\n                }\n              ]\n            }}\n            icon='filter'\n            text='filter'\n            iconOnly\n          />\n        </Flex>\n      )\n    },\n    secondary: (\n      <>\n        <FormField label='Category'>\n          <ComboBox\n            selected={{ items: categoryFilter }}\n            placeholder='Filter by category'\n            menu={{\n              items: categoriesList,\n              onItemClick: id => {\n                const newList = menuHelpers.selectItem(categoriesList, id, 'single-select');\n                const { primary: itemText } = menuHelpers.getSelected(newList)[0];\n                setCategoriesList(newList);\n                setCategoryFilter({ text: itemText, id });\n              }\n            }}\n          />\n        </FormField>\n        <Select label='Sort by'>\n          {ArticleListMockData.sortByOptions.map(opt => (\n            <Option key={opt}>{opt}</Option>\n          ))}\n        </Select>\n      </>\n    )\n  };\n  return (\n    <div\n      style={{\n        width: '31.25rem',\n        maxHeight: '100vh'\n      }}\n    >\n      <ArticleList\n        skeletonize={false}\n        header={\n          <ArticleListHeader\n            icon={ALHeader.icon}\n            count={ALHeader.count}\n            headerText={ALHeader.headerText}\n            primary={ALHeader.primary}\n            secondary={ALHeader.secondary}\n            onSubmit={action('Filter details submitted')}\n          />\n        }\n        footer={\n          <Flex container={{ alignItems: 'center', justify: 'end' }} item={{ grow: 1 }}>\n            <Pagination\n              total={70}\n              pageNumber={currentPage}\n              onPageChange={pageNumber => {\n                setCurrentPage(pageNumber);\n              }}\n            />\n          </Flex>\n        }\n      >\n        {ArticleListMockData.articleList.map((dataItem, id) => {\n          return (\n            <ArticleSummary\n              key={id.toString()}\n              header={\n                <Link\n                  href='design.pega.com'\n                  data-article-id={dataItem.articleId}\n                  onClick={handleArticleLinkClick}\n                >\n                  {dataItem.header}\n                </Link>\n              }\n              content={<Text>{dataItem.abstract}</Text>}\n              articleID={`article-${id}`}\n              meta={[\n                <Text>{dataItem.meta.category}</Text>,\n                dataItem.meta.publishedDate,\n                <Flex container={{ gap: 2, alignItems: 'center' }}>\n                  <Flex container={{ gap: 1, alignItems: 'center' }}>\n                    <Icon name='thumbs-up-solid' />\n                    <Text>({dataItem.meta.likes})</Text>\n                  </Flex>\n                  <Flex container={{ gap: 1, alignItems: 'center' }}>\n                    <Icon name='thumbs-down-solid' />\n                    <Text>({dataItem.meta.disLikes})</Text>\n                  </Flex>\n                </Flex>\n              ]}\n            />\n          );\n        })}\n      </ArticleList>\n    </div>\n  );\n};\n\nexport const ArticleListWithSkeleton: Story = () => (\n  <div\n    style={{\n      maxWidth: '31.25rem',\n      maxHeight: '100vh'\n    }}\n  >\n    <ArticleList skeletonize />\n  </div>\n);\n"]}

package/lib/cs/CSCaseView/CSAppShell.stories.d.ts

@@ -1,41 +1,7 @@
-import { Story } from '@storybook/react';
-import { InteractionTimerStoryProps } from '@pega/cosmos-react-demos/lib/cs/InteractionTimer/InteractionTimer.stories';
-declare const _default: {
-    title: string;
-    parameters: {
-        layout: string;
-    };
-    args: {
-        isDraggable: boolean;
-        hasInteractionNotifications: boolean;
-        enableSla: boolean;
-    };
-    argTypes: {
-        isDraggable: {
-            control: {
-                type: string;
-            };
-        };
-        hasInteractionNotifications: {
-            control: {
-                type: string;
-            };
-        };
-        enableSla: {
-            control: {
-                type: string;
-            };
-        };
-    };
-};
+import { Meta, Story } from '@storybook/react';
+import { InteractionTimerStoryProps } from '../InteractionTimer/InteractionTimer.stories';
+declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare type LoginError = string;
-export interface LoginFormProps {
-    ctiLinkOptions: {
-        [key: string]: string;
-    };
-    onLogin: (ctiLinkId: keyof LoginFormProps['ctiLinkOptions'], agentId: string, password: string) => Promise<LoginError | undefined>;
-}
 interface CSAppShellProps {
     isDraggable?: boolean;
     hasInteractionNotifications?: InteractionTimerStoryProps['hasNotifications'];

package/lib/cs/CSCaseView/CSAppShell.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CSAppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/CSCaseView/CSAppShell.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AA0BzC,OAAO,EAEL,0BAA0B,EAC3B,MAAM,2EAA2E,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQnF,wBAeE;AAEF,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,MAAM,WAAW,cAAc;IAC7B,cAAc,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC1C,OAAO,EAAE,CACP,SAAS,EAAE,MAAM,cAAc,CAAC,gBAAgB,CAAC,EACjD,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,KACb,OAAO,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;CACtC;AAoED,UAAU,eAAe;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2BAA2B,CAAC,EAAE,0BAA0B,CAAC,kBAAkB,CAAC,CAAC;IAC7E,SAAS,CAAC,EAAE,0BAA0B,CAAC,WAAW,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,eAAe,CAoS7C,CAAC"}
+{"version":3,"file":"CSAppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/CSCaseView/CSAppShell.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AA0B/C,OAAO,EAEL,0BAA0B,EAC3B,MAAM,8CAA8C,CAAC;;AAQtD,wBAeU;AAEV,UAAU,eAAe;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2BAA2B,CAAC,EAAE,0BAA0B,CAAC,kBAAkB,CAAC,CAAC;IAC7E,SAAS,CAAC,EAAE,0BAA0B,CAAC,WAAW,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,eAAe,CAqS7C,CAAC"}