@pega/cosmos-react-demos 3.0.0-dev.7.0 → 3.0.0-dev.9.1

package/jsx/core/Tabs/Tabs.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.stories.jsx","sourceRoot":"","sources":["../../../src/core/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Configuration, Flex, TabPanel, Tabs, TabsProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Tabs',\n  component: Tabs,\n  args: {\n    type: 'horizontal'\n  },\n  argTypes: {\n    type: { options: ['horizontal', 'vertical'], control: { type: 'select' } }\n  }\n} as Meta;\n\nexport const TabsDemo: Story<TabsProps> = (args: TabsProps) => {\n  const [panelShown, changePanel] = useState('1');\n\n  const handleTabChange = (id: string) => {\n    changePanel(id);\n  };\n\n  const tabs = [\n    { name: 'Tab 1', id: '1' },\n    { name: 'Tab 2', id: '2' },\n    { name: 'Tab 3', id: '3' },\n    { name: 'Tab 4', id: '4', disabled: true },\n    { name: 'Tab 5', id: '5' }\n  ];\n\n  return (\n    <Flex container={{ direction: args.type === 'horizontal' ? 'column' : 'row' }}>\n      <Flex item={{ grow: 1 }}>\n        <Tabs tabs={tabs} type={args.type} onTabClick={handleTabChange} currentTabId={panelShown} />\n      </Flex>\n      <Flex container={{ pad: [1, 2] }} item={{ grow: 1 }}>\n        {tabs.map(tab => (\n          <TabPanel tabId={tab.id} currentTabId={panelShown} key={tab.id}>\n            <div>{tab.name} content</div>\n          </TabPanel>\n        ))}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport const TabsCountDemo: Story<TabsProps> = (args: TabsProps) => {\n  const [panelShown, changePanel] = useState('1');\n\n  const handleTabChange = (id: string) => {\n    changePanel(id);\n  };\n\n  const tabs = [\n    { name: 'Tab 1', id: '1', count: 5 },\n    { name: 'Tab 2', id: '2', count: 14 },\n    { name: 'Tab 3', id: '3', count: 0 },\n    { name: 'Tab 4', id: '4', count: 56, disabled: true },\n    { name: 'Tab 5', id: '5', count: 150 }\n  ];\n\n  return (\n    <Flex container={{ direction: args.type === 'horizontal' ? 'column' : 'row' }}>\n      <Flex item={{ grow: 1 }}>\n        <Tabs tabs={tabs} type={args.type} onTabClick={handleTabChange} currentTabId={panelShown} />\n      </Flex>\n      <Flex container={{ pad: [1, 2] }} item={{ grow: 1 }}>\n        {tabs.map(tab => (\n          <TabPanel tabId={tab.id} currentTabId={panelShown} key={tab.id}>\n            <div>{tab.name} content</div>\n          </TabPanel>\n        ))}\n      </Flex>\n    </Flex>\n  );\n};\n\ninterface ConfigurableTabsProps {\n  foreground?: string;\n  type?: TabsProps['type'];\n}\n\nexport const ConfigurableTabs: Story<ConfigurableTabsProps> = (args: ConfigurableTabsProps) => {\n  const [panelShown, changePanel] = useState('1');\n\n  const handleTabChange = (id: string) => {\n    changePanel(id);\n  };\n\n  const tabs = [\n    { name: 'Tab 1', id: '1' },\n    { name: 'Tab 2', id: '2' },\n    { name: 'Tab 3', id: '3' },\n    { name: 'Tab 4', id: '4', disabled: true },\n    { name: 'Tab 5', id: '5' }\n  ];\n\n  return (\n    <Configuration\n      theme={{\n        components: {\n          tabs: {\n            base: {\n              foreground: args.foreground\n            }\n          }\n        }\n      }}\n    >\n      <Flex item={{ grow: 1 }}>\n        <Tabs tabs={tabs} onTabClick={handleTabChange} currentTabId={panelShown} />\n      </Flex>\n      <Flex container={{ pad: [1, 2] }} item={{ grow: 1 }}>\n        {tabs.map(tab => (\n          <TabPanel tabId={tab.id} currentTabId={panelShown} key={tab.id}>\n            <div>{tab.name} content</div>\n          </TabPanel>\n        ))}\n      </Flex>\n    </Configuration>\n  );\n};\n\nConfigurableTabs.args = {\n  foreground: '#076bc9'\n};\n\nConfigurableTabs.argTypes = {\n  foreground: { control: { type: 'color' } },\n  type: { table: { disable: true } }\n};\n"]}
+{"version":3,"file":"Tabs.stories.jsx","sourceRoot":"","sources":["../../../src/core/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAa,MAAM,yBAAyB,CAAC;AAEzF,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;IACf,IAAI,EAAE;QACJ,IAAI,EAAE,YAAY;KACnB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;KAC3E;CACM,CAAC;AAMV,MAAM,CAAC,MAAM,QAAQ,GAAwB,CAAC,IAAkB,EAAE,EAAE;IAClE,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAEhD,MAAM,eAAe,GAAG,CAAC,EAAU,EAAE,EAAE;QACrC,WAAW,CAAC,EAAE,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,IAAI,GAAG;QACX,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;QAC1B,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;QAC1B,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;QAC1B,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE;QAC1C,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;KAC3B,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAC5E;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CACtB;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,eAAe,CAAC,CAAC,YAAY,CAAC,CAAC,UAAU,CAAC,EAC3F;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAClD;QAAA,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAC7D;YAAA,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,CAAE,QAAO,EAAE,GAAG,CAC9B;UAAA,EAAE,QAAQ,CAAC,CACZ,CAAC,CACJ;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAwB,CAAC,IAAkB,EAAE,EAAE;IACvE,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAEhD,MAAM,eAAe,GAAG,CAAC,EAAU,EAAE,EAAE;QACrC,WAAW,CAAC,EAAE,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,IAAI,GAAG;QACX,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE;QACpC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE;QACrC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE;QACpC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;QACrD,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE;KACvC,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAC5E;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CACtB;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,eAAe,CAAC,CAAC,YAAY,CAAC,CAAC,UAAU,CAAC,EAC3F;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAClD;QAAA,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAC7D;YAAA,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,CAAE,QAAO,EAAE,GAAG,CAC9B;UAAA,EAAE,QAAQ,CAAC,CACZ,CAAC,CACJ;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAOF,MAAM,CAAC,MAAM,gBAAgB,GAAiC,CAAC,IAA2B,EAAE,EAAE;IAC5F,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAEhD,MAAM,eAAe,GAAG,CAAC,EAAU,EAAE,EAAE;QACrC,WAAW,CAAC,EAAE,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,IAAI,GAAG;QACX,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;QAC1B,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;QAC1B,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;QAC1B,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE;QAC1C,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;KAC3B,CAAC;IAEF,OAAO,CACL,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC;YACL,UAAU,EAAE;gBACV,IAAI,EAAE;oBACJ,IAAI,EAAE;wBACJ,UAAU,EAAE,IAAI,CAAC,UAAU;qBAC5B;iBACF;aACF;SACF,CAAC,CAEF;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CACtB;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,eAAe,CAAC,CAAC,YAAY,CAAC,CAAC,UAAU,CAAC,EAC1E;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAClD;QAAA,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAC7D;YAAA,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,CAAE,QAAO,EAAE,GAAG,CAC9B;UAAA,EAAE,QAAQ,CAAC,CACZ,CAAC,CACJ;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,UAAU,EAAE,SAAS;CACtB,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC1C,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACnC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Configuration, Flex, TabPanel, Tabs, TabsProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Tabs',\n  component: Tabs,\n  args: {\n    type: 'horizontal'\n  },\n  argTypes: {\n    type: { options: ['horizontal', 'vertical'], control: { type: 'select' } }\n  }\n} as Meta;\n\ninterface TabDemoProps {\n  type: 'horizontal' | 'vertical';\n}\n\nexport const TabsDemo: Story<TabDemoProps> = (args: TabDemoProps) => {\n  const [panelShown, changePanel] = useState('1');\n\n  const handleTabChange = (id: string) => {\n    changePanel(id);\n  };\n\n  const tabs = [\n    { name: 'Tab 1', id: '1' },\n    { name: 'Tab 2', id: '2' },\n    { name: 'Tab 3', id: '3' },\n    { name: 'Tab 4', id: '4', disabled: true },\n    { name: 'Tab 5', id: '5' }\n  ];\n\n  return (\n    <Flex container={{ direction: args.type === 'horizontal' ? 'column' : 'row' }}>\n      <Flex item={{ grow: 1 }}>\n        <Tabs tabs={tabs} type={args.type} onTabClick={handleTabChange} currentTabId={panelShown} />\n      </Flex>\n      <Flex container={{ pad: [1, 2] }} item={{ grow: 1 }}>\n        {tabs.map(tab => (\n          <TabPanel tabId={tab.id} currentTabId={panelShown} key={tab.id}>\n            <div>{tab.name} content</div>\n          </TabPanel>\n        ))}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport const TabsCountDemo: Story<TabDemoProps> = (args: TabDemoProps) => {\n  const [panelShown, changePanel] = useState('1');\n\n  const handleTabChange = (id: string) => {\n    changePanel(id);\n  };\n\n  const tabs = [\n    { name: 'Tab 1', id: '1', count: 5 },\n    { name: 'Tab 2', id: '2', count: 14 },\n    { name: 'Tab 3', id: '3', count: 0 },\n    { name: 'Tab 4', id: '4', count: 56, disabled: true },\n    { name: 'Tab 5', id: '5', count: 150 }\n  ];\n\n  return (\n    <Flex container={{ direction: args.type === 'horizontal' ? 'column' : 'row' }}>\n      <Flex item={{ grow: 1 }}>\n        <Tabs tabs={tabs} type={args.type} onTabClick={handleTabChange} currentTabId={panelShown} />\n      </Flex>\n      <Flex container={{ pad: [1, 2] }} item={{ grow: 1 }}>\n        {tabs.map(tab => (\n          <TabPanel tabId={tab.id} currentTabId={panelShown} key={tab.id}>\n            <div>{tab.name} content</div>\n          </TabPanel>\n        ))}\n      </Flex>\n    </Flex>\n  );\n};\n\ninterface ConfigurableTabsProps {\n  foreground?: string;\n  type?: TabsProps['type'];\n}\n\nexport const ConfigurableTabs: Story<ConfigurableTabsProps> = (args: ConfigurableTabsProps) => {\n  const [panelShown, changePanel] = useState('1');\n\n  const handleTabChange = (id: string) => {\n    changePanel(id);\n  };\n\n  const tabs = [\n    { name: 'Tab 1', id: '1' },\n    { name: 'Tab 2', id: '2' },\n    { name: 'Tab 3', id: '3' },\n    { name: 'Tab 4', id: '4', disabled: true },\n    { name: 'Tab 5', id: '5' }\n  ];\n\n  return (\n    <Configuration\n      theme={{\n        components: {\n          tabs: {\n            base: {\n              foreground: args.foreground\n            }\n          }\n        }\n      }}\n    >\n      <Flex item={{ grow: 1 }}>\n        <Tabs tabs={tabs} onTabClick={handleTabChange} currentTabId={panelShown} />\n      </Flex>\n      <Flex container={{ pad: [1, 2] }} item={{ grow: 1 }}>\n        {tabs.map(tab => (\n          <TabPanel tabId={tab.id} currentTabId={panelShown} key={tab.id}>\n            <div>{tab.name} content</div>\n          </TabPanel>\n        ))}\n      </Flex>\n    </Configuration>\n  );\n};\n\nConfigurableTabs.args = {\n  foreground: '#076bc9'\n};\n\nConfigurableTabs.argTypes = {\n  foreground: { control: { type: 'color' } },\n  type: { table: { disable: true } }\n};\n"]}

package/jsx/core/Toaster/Toaster.stories.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
-import { Meta } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const ToasterDemo: () => JSX.Element;
+export declare const ToasterDemo: Story;
 //# sourceMappingURL=Toaster.stories.d.ts.map

package/jsx/core/Toaster/Toaster.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Toaster/Toaster.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAKxC,wBAGU;AAEV,eAAO,MAAM,WAAW,mBAyBvB,CAAC"}
+{"version":3,"file":"Toaster.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Toaster/Toaster.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAK/C,wBAGU;AAEV,eAAO,MAAM,WAAW,EAAE,KAyBzB,CAAC"}

package/jsx/core/Toaster/Toaster.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.stories.jsx","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,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,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;IAChE,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,CAC1B;MAAA,CAAC,eAAe,CAAC,AAAD,EAClB;IAAA,EAAE,OAAO,CAAC,CACX,CAAC;AACJ,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  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"]}
+{"version":3,"file":"Toaster.stories.jsx","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,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;IAChE,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,CAC1B;MAAA,CAAC,eAAe,CAAC,AAAD,EAClB;IAAA,EAAE,OAAO,CAAC,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/jsx/core/Tooltip/Tooltip.stories.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 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;

package/jsx/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":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAI/C,wBAGU;AAEV,eAAO,MAAM,WAAW,mBAgBvB,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"}
+{"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/jsx/core/Tooltip/Tooltip.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.stories.jsx","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,GAAG,GAAG,EAAE;IAC9B,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,UAAU,EAAE,CAAC;IAEjC,OAAO,CACL,EACE;MAAA,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,MAAM,CAEpC;;MAAA,CAAC,EAAE,IAAI,CACL,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAClB;;;;QAGF,EAAE,OAAO,CAAC,CACX,CACH;IAAA,GAAG,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,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC;YACL,UAAU,EAAE;gBACV,OAAO,EAAE;oBACP,kBAAkB,EAAE,IAAI,CAAC,eAAe;oBACxC,kBAAkB,EAAE,IAAI,CAAC,eAAe;iBACzC;aACF;SACF,CAAC,CAEF;MAAA,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,MAAM,CAEpC;;MAAA,CAAC,EAAE,IAAI,CACL,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAClB;;;;QAGF,EAAE,OAAO,CAAC,CACX,CACH;IAAA,EAAE,aAAa,CAAC,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 = () => {\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"]}
+{"version":3,"file":"Tooltip.stories.jsx","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,EACE;MAAA,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,MAAM,CAEpC;;MAAA,CAAC,EAAE,IAAI,CACL,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAClB;;;;QAGF,EAAE,OAAO,CAAC,CACX,CACH;IAAA,GAAG,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,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC;YACL,UAAU,EAAE;gBACV,OAAO,EAAE;oBACP,kBAAkB,EAAE,IAAI,CAAC,eAAe;oBACxC,kBAAkB,EAAE,IAAI,CAAC,eAAe;iBACzC;aACF;SACF,CAAC,CAEF;MAAA,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,MAAM,CAEpC;;MAAA,CAAC,EAAE,IAAI,CACL,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAClB;;;;QAGF,EAAE,OAAO,CAAC,CACX,CACH;IAAA,EAAE,aAAa,CAAC,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/jsx/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/jsx/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,CAqFpE,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/jsx/core/Tree/Tree.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.stories.jsx","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'>> = (\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"]}
+{"version":3,"file":"Tree.stories.jsx","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: 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/jsx/cs/Article/Article.stories.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
-import { Meta } from '@storybook/react';
+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/jsx/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,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAcxC,wBAOU;AAEV,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/jsx/cs/Article/Article.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Article.stories.jsx","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 } 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 = () => {\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.jsx","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/jsx/cs/ArticleList/ArticleList.stories.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
-import { Meta } from '@storybook/react';
+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/jsx/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":";AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAyBxC,wBAOU;AAIV,eAAO,MAAM,gBAAgB,mBA2J5B,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/jsx/cs/ArticleList/ArticleList.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleList.stories.jsx","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 } 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 = () => {\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 = () => (\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.jsx","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/jsx/cs/IntelligentGuidance/IntelligentGuidance.stories.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
-import { Meta } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const IntelligentGuidanceDemo: () => JSX.Element;
-export declare const CaseViewWithIntelligentGuidance: () => JSX.Element;
+export declare const IntelligentGuidanceDemo: Story;
+export declare const CaseViewWithIntelligentGuidance: Story;
 //# sourceMappingURL=IntelligentGuidance.stories.d.ts.map

package/jsx/cs/IntelligentGuidance/IntelligentGuidance.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IntelligentGuidance.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/IntelligentGuidance/IntelligentGuidance.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAuCxC,wBAMU;AAEV,eAAO,MAAM,uBAAuB,mBA6BnC,CAAC;AAIF,eAAO,MAAM,+BAA+B,mBA6X3C,CAAC"}
+{"version":3,"file":"IntelligentGuidance.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/IntelligentGuidance/IntelligentGuidance.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAuC/C,wBAMU;AAEV,eAAO,MAAM,uBAAuB,EAAE,KA6BrC,CAAC;AAIF,eAAO,MAAM,+BAA+B,EAAE,KA6X7C,CAAC"}

package/jsx/cs/IntelligentGuidance/IntelligentGuidance.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"IntelligentGuidance.stories.jsx","sourceRoot":"","sources":["../../../src/cs/IntelligentGuidance/IntelligentGuidance.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\nimport { Meta } from '@storybook/react';\n\nimport {\n  Button,\n  createUID,\n  Form,\n  Grid,\n  Icon,\n  registerIcon,\n  Input,\n  MenuButton,\n  MenuItemProps,\n  Status,\n  StatusProps,\n  Text,\n  useBreakpoint\n} from '@pega/cosmos-react-core';\nimport { CaseSummaryFields } from '@pega/cosmos-react-work';\nimport {\n  CSCaseView,\n  TaskManager,\n  TaskView,\n  TaskProps,\n  IntelligentGuidance,\n  IntelligentGuidanceProps\n} from '@pega/cosmos-react-cs';\nimport * as userSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/user-solid.icon';\n\nimport { AppShellDemo } from '../../core/AppShell/AppShell.stories';\nimport { TableDemo } from '../../core/Table/Table.stories';\nimport { AttachmentsMock } from '../../work/CaseView/Attachments.mocks';\nimport { Details } from '../../work/CaseView/Details.mocks';\nimport { PulseMock } from '../../work/CaseView/Pulse.mocks';\nimport { getTabs, MockSummaryList } from '../../work/CaseView/CaseView.mocks';\nimport { TimelineDemo } from '../../work/Timeline/Timeline.stories';\nimport { TaskPickerMockData } from '../TaskManager/TaskManager.mocks';\n\nregisterIcon(userSolidIcon);\n\nexport default {\n  title: 'Customer Service/IntelligentGuidance',\n  component: IntelligentGuidance,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport const IntelligentGuidanceDemo = () => {\n  const [items, setItems] = useState<IntelligentGuidanceProps['items']>([\n    {\n      id: '1',\n      label: 'Change address',\n      icon: 'clipboard',\n      type: 'Task',\n      onClick: () => {\n        setItems(prevItems => prevItems.filter(item => item.id !== '1'));\n      },\n      onDismiss: () => {\n        setItems(prevItems => prevItems.filter(item => item.id !== '1'));\n      }\n    },\n    {\n      id: '2',\n      label: 'Update contact profile',\n      icon: 'headline',\n      type: 'Knowledge Article',\n      onClick: () => {\n        setItems(prevItems => prevItems.filter(item => item.id !== '2'));\n      },\n      onDismiss: () => {\n        setItems(prevItems => prevItems.filter(item => item.id !== '2'));\n      }\n    }\n  ]);\n\n  return <IntelligentGuidance items={items} heading='Intelligent guidance' />;\n};\n\ntype TaskActions = 'cancel' | 'launch' | 'dismiss' | 'submit';\n\nexport const CaseViewWithIntelligentGuidance = () => {\n  const WRAP_UP_TASK_ID = createUID();\n  const CHANGE_ADDRESS_TASK_ID = createUID();\n  const UPDATE_PROFILE_TASK_ID = createUID();\n\n  const [serviceTasks, setServiceTasks] = useState<TaskProps[]>([\n    {\n      id: CHANGE_ADDRESS_TASK_ID,\n      icon: 'check',\n      name: 'Change address',\n      isResolved: true,\n      status: {\n        text: 'Resolve Completed',\n        variant: 'success' as StatusProps['variant']\n      }\n    },\n    {\n      id: createUID(),\n      icon: 'clipboard',\n      name: 'Lost or stolen card',\n      isResolved: false,\n      status: {\n        text: 'In Progress',\n        variant: 'pending' as StatusProps['variant']\n      }\n    },\n    {\n      id: UPDATE_PROFILE_TASK_ID,\n      icon: 'bulb',\n      name: 'Update contact profile',\n      isResolved: false,\n      meta: 'Suggested task'\n    }\n  ]);\n\n  const formActionsElemRef = useRef<HTMLButtonElement>(null);\n  const taskManagerRef = useRef<HTMLDivElement>(null);\n  const [activeTaskId, setActiveTaskId] = useState<string | undefined>(undefined);\n  const [disableWrapUp, setDisableWrapUp] = useState<boolean>(false);\n  const addTaskButtonRef = useRef<HTMLButtonElement>(null);\n\n  const isMediumOrAbove = useBreakpoint('md');\n  const caseId = 'C-456';\n  const demoTabItems = getTabs();\n  const [demoCurrentTabId, setDemoCurrentTabId] = useState(\n    isMediumOrAbove ? demoTabItems[0].id : `summary-${caseId}`\n  );\n\n  const demoTabContent = useMemo(() => {\n    return [\n      {\n        id: 'Details',\n        content: <Details />\n      },\n      {\n        id: 'Pulse',\n        content: <PulseMock />\n      },\n      {\n        id: 'Accounts',\n        content: <TableDemo />\n      },\n      {\n        id: 'not found',\n        content: <h2>Not Found</h2>\n      }\n    ];\n  }, []);\n\n  useEffect(() => {\n    if (formActionsElemRef.current) {\n      formActionsElemRef.current.focus();\n      formActionsElemRef.current.scrollIntoView(false);\n    } else if (addTaskButtonRef.current) {\n      addTaskButtonRef.current.scrollIntoView(false);\n    }\n  }, [activeTaskId]);\n\n  const performTaskAction = (taskId: string | undefined, taskAction: TaskActions) => {\n    if (taskId === WRAP_UP_TASK_ID) {\n      if (taskAction === 'cancel' || taskAction === 'submit') {\n        setActiveTaskId(undefined);\n      } else if (taskAction === 'launch') {\n        setActiveTaskId(WRAP_UP_TASK_ID);\n      }\n    } else if (taskAction === 'launch') {\n      setActiveTaskId(taskId);\n      setServiceTasks(prevTasks => {\n        return prevTasks.map(task => {\n          if (task.id === taskId) {\n            return {\n              ...task,\n              icon: 'clipboard',\n              meta: undefined,\n              status: {\n                variant: 'pending' as StatusProps['variant'],\n                text: 'In Progress'\n              }\n            };\n          }\n          return task;\n        });\n      });\n    } else if (taskAction === 'cancel') {\n      setActiveTaskId(undefined);\n    } else if (taskAction === 'submit') {\n      setActiveTaskId(undefined);\n      setServiceTasks(prevTasks => {\n        return prevTasks.map(task => {\n          if (task.id === taskId) {\n            return {\n              ...task,\n              icon: 'check',\n              isResolved: true,\n              status: {\n                variant: 'success' as StatusProps['variant'],\n                text: 'Resolve Completed'\n              }\n            };\n          }\n          return task;\n        });\n      });\n    } else if (taskAction === 'dismiss') {\n      setServiceTasks(prevTasks => {\n        return prevTasks.filter(task => task.id !== taskId);\n      });\n    }\n  };\n\n  const [items, setItems] = useState<IntelligentGuidanceProps['items']>([\n    {\n      id: '1',\n      label: 'Update contact profile',\n      icon: 'bulb',\n      type: 'Task',\n      onClick: () => {\n        performTaskAction(UPDATE_PROFILE_TASK_ID, 'launch');\n        setItems(prevItems => prevItems.filter(item => item.id !== '1'));\n      },\n      onDismiss: () => {\n        setItems(prevItems => prevItems.filter(item => item.id !== '1'));\n      }\n    },\n    {\n      id: '2',\n      label: 'Change address',\n      icon: 'clipboard',\n      type: 'Task',\n      onClick: () => {\n        performTaskAction(CHANGE_ADDRESS_TASK_ID, 'launch');\n        setItems(prevItems => prevItems.filter(item => item.id !== '2'));\n      },\n      onDismiss: () => {\n        setItems(prevItems => prevItems.filter(item => item.id !== '2'));\n      }\n    }\n  ]);\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setItems(prev => [\n        ...prev,\n        {\n          id: '3',\n          label: 'Demo item',\n          icon: 'clipboard',\n          type: 'Demo',\n          onClick: () => {\n            setItems(prevItems => prevItems.filter(item => item.id !== '3'));\n          },\n          onDismiss: () => {\n            setItems(prevItems => prevItems.filter(item => item.id !== '3'));\n          }\n        }\n      ]);\n    }, 5000);\n    return () => clearTimeout(timer);\n  }, []);\n\n  const renderTasks = (selections: MenuItemProps[]) => {\n    const newTasks = selections.map((selection, i) => {\n      const taskId = createUID();\n      if (i === 0) {\n        return {\n          id: taskId,\n          icon: 'clipboard',\n          name: selection.primary,\n          isResolved: false,\n          status: {\n            variant: 'pending' as StatusProps['variant'],\n            text: 'In Progress'\n          }\n        };\n      }\n      return {\n        id: taskId,\n        icon: 'clipboard',\n        name: selection.primary,\n        isResolved: false,\n        meta: 'Queued task'\n      };\n    });\n    setServiceTasks(prevTasks => {\n      return [...newTasks, ...prevTasks];\n    });\n    if (newTasks.length > 0) {\n      performTaskAction(newTasks[0].id, 'launch');\n    }\n  };\n\n  const taskWidget = (\n    <TaskManager\n      ref={taskManagerRef}\n      tasks={serviceTasks.map(task => {\n        if (task.id === activeTaskId) {\n          return {\n            ...task,\n            active: true\n          };\n        }\n        return task;\n      })}\n      emptyText='No tasks added'\n      banner={{\n        icon: 'headset',\n        content:\n          'Hi Ms. Ventura, I see that you are interested in changing your monthly due date, is that correct ?'\n      }}\n      onTaskLaunch={id => {\n        performTaskAction(id, 'launch');\n      }}\n      onTaskDismiss={id => {\n        performTaskAction(id, 'dismiss');\n      }}\n      addTask={{\n        items: TaskPickerMockData.tasks,\n        onAdd: renderTasks\n      }}\n      wrapUp={{\n        disable: disableWrapUp,\n        onClick: () => {\n          performTaskAction(WRAP_UP_TASK_ID, 'launch');\n          setDisableWrapUp(true);\n        },\n        active: activeTaskId === WRAP_UP_TASK_ID\n      }}\n      main={\n        <TaskView\n          header={\n            <Text variant='h2'>\n              {activeTaskId === WRAP_UP_TASK_ID\n                ? 'Wrap up'\n                : serviceTasks.find(task => task.id === activeTaskId)?.name}\n            </Text>\n          }\n          actions={\n            <MenuButton\n              ref={formActionsElemRef}\n              menu={{\n                items: ['Option Number 1', 'Option Number 2', 'Option Number 3'].map(\n                  (name: string) => ({\n                    primary: name,\n                    id: name,\n                    onClick: () => {}\n                  })\n                )\n              }}\n              text='Actions'\n            />\n          }\n        >\n          <Form\n            actions={\n              <>\n                <Button\n                  name='Cancel'\n                  onClick={() => {\n                    performTaskAction(activeTaskId, 'cancel');\n                  }}\n                >\n                  Cancel\n                </Button>\n                <div>\n                  <Button name='Save'>Save</Button>\n                  <Button\n                    name='Submit'\n                    variant='primary'\n                    onClick={() => {\n                      performTaskAction(activeTaskId, 'submit');\n                    }}\n                  >\n                    Submit\n                  </Button>\n                </div>\n              </>\n            }\n          >\n            <Grid container={{ rowGap: 2 }}>\n              {activeTaskId === WRAP_UP_TASK_ID ? (\n                <TimelineDemo />\n              ) : (\n                Array.from({ length: 15 }, (undef, i) => {\n                  const idx = i + 1;\n                  return <Input label={`Field ${idx}`} key={idx} />;\n                })\n              )}\n            </Grid>\n          </Form>\n        </TaskView>\n      }\n    />\n  );\n\n  const createDate = new Date(2016, 1, 8);\n  const msInYear = 1000 * 60 * 60 * 24 * 365;\n  const diffInYears = Math.floor((Date.now() - createDate.getTime()) / msInYear);\n\n  return (\n    <AppShellDemo\n      main={\n        <CSCaseView\n          caseId={caseId}\n          heading='Intelligent Guidance demo case'\n          icon={<Icon name='user-solid' />}\n          tasks={taskWidget}\n          summary={\n            <CaseSummaryFields\n              primaryFields={[\n                {\n                  name: 'Member ID',\n                  value: 'M204859F438G'\n                },\n                {\n                  name: 'Priority',\n                  value: '95'\n                }\n              ].map((f, i) => ({ ...f, id: `p-${i}` }))}\n              secondaryFields={[\n                {\n                  name: 'Status',\n                  value: <Status variant='info'>New</Status>\n                },\n                {\n                  name: 'Assigned to',\n                  value: 'Dean Thomas'\n                },\n                {\n                  name: 'Create date',\n                  value: createDate.toDateString()\n                },\n                {\n                  name: 'Update date',\n                  value: `${diffInYears} years ago`\n                }\n              ].map((f, i) => ({ ...f, id: `s-${i}` }))}\n            />\n          }\n          tabs={{\n            items: demoTabItems,\n            currentTabId: demoCurrentTabId,\n            onClick: (id: string) => setDemoCurrentTabId(id)\n          }}\n          tabContent={demoTabContent}\n          utilities={\n            <>\n              <AttachmentsMock />\n              <MockSummaryList icon='user-search' name='Stakeholders' />\n              <MockSummaryList icon='user-star' name='Followers' />\n            </>\n          }\n          utilitiesSummaryItems={[\n            { iconName: 'paper-clip', count: 4 },\n            { iconName: 'user-search-solid', count: 10 },\n            { iconName: 'user-star-solid', count: 5 }\n          ]}\n          intelligentGuidance={<IntelligentGuidance items={items} heading='Intelligent guidance' />}\n        />\n      }\n    />\n  );\n};\n"]}
+{"version":3,"file":"IntelligentGuidance.stories.jsx","sourceRoot":"","sources":["../../../src/cs/IntelligentGuidance/IntelligentGuidance.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n  Button,\n  createUID,\n  Form,\n  Grid,\n  Icon,\n  registerIcon,\n  Input,\n  MenuButton,\n  MenuItemProps,\n  Status,\n  StatusProps,\n  Text,\n  useBreakpoint\n} from '@pega/cosmos-react-core';\nimport { CaseSummaryFields } from '@pega/cosmos-react-work';\nimport {\n  CSCaseView,\n  TaskManager,\n  TaskView,\n  TaskProps,\n  IntelligentGuidance,\n  IntelligentGuidanceProps\n} from '@pega/cosmos-react-cs';\nimport * as userSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/user-solid.icon';\n\nimport { AppShellDemo } from '../../core/AppShell/AppShell.stories';\nimport { TableDemo } from '../../core/Table/Table.stories';\nimport { AttachmentsMock } from '../../work/CaseView/Attachments.mocks';\nimport { Details } from '../../work/CaseView/Details.mocks';\nimport { PulseMock } from '../../work/CaseView/Pulse.mocks';\nimport { getTabs, MockSummaryList } from '../../work/CaseView/CaseView.mocks';\nimport { TimelineDemo } from '../../work/Timeline/Timeline.stories';\nimport { TaskPickerMockData } from '../TaskManager/TaskManager.mocks';\n\nregisterIcon(userSolidIcon);\n\nexport default {\n  title: 'Customer Service/IntelligentGuidance',\n  component: IntelligentGuidance,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport const IntelligentGuidanceDemo: Story = () => {\n  const [items, setItems] = useState<IntelligentGuidanceProps['items']>([\n    {\n      id: '1',\n      label: 'Change address',\n      icon: 'clipboard',\n      type: 'Task',\n      onClick: () => {\n        setItems(prevItems => prevItems.filter(item => item.id !== '1'));\n      },\n      onDismiss: () => {\n        setItems(prevItems => prevItems.filter(item => item.id !== '1'));\n      }\n    },\n    {\n      id: '2',\n      label: 'Update contact profile',\n      icon: 'headline',\n      type: 'Knowledge Article',\n      onClick: () => {\n        setItems(prevItems => prevItems.filter(item => item.id !== '2'));\n      },\n      onDismiss: () => {\n        setItems(prevItems => prevItems.filter(item => item.id !== '2'));\n      }\n    }\n  ]);\n\n  return <IntelligentGuidance items={items} heading='Intelligent guidance' />;\n};\n\ntype TaskActions = 'cancel' | 'launch' | 'dismiss' | 'submit';\n\nexport const CaseViewWithIntelligentGuidance: Story = () => {\n  const WRAP_UP_TASK_ID = createUID();\n  const CHANGE_ADDRESS_TASK_ID = createUID();\n  const UPDATE_PROFILE_TASK_ID = createUID();\n\n  const [serviceTasks, setServiceTasks] = useState<TaskProps[]>([\n    {\n      id: CHANGE_ADDRESS_TASK_ID,\n      icon: 'check',\n      name: 'Change address',\n      isResolved: true,\n      status: {\n        text: 'Resolve Completed',\n        variant: 'success' as StatusProps['variant']\n      }\n    },\n    {\n      id: createUID(),\n      icon: 'clipboard',\n      name: 'Lost or stolen card',\n      isResolved: false,\n      status: {\n        text: 'In Progress',\n        variant: 'pending' as StatusProps['variant']\n      }\n    },\n    {\n      id: UPDATE_PROFILE_TASK_ID,\n      icon: 'bulb',\n      name: 'Update contact profile',\n      isResolved: false,\n      meta: 'Suggested task'\n    }\n  ]);\n\n  const formActionsElemRef = useRef<HTMLButtonElement>(null);\n  const taskManagerRef = useRef<HTMLDivElement>(null);\n  const [activeTaskId, setActiveTaskId] = useState<string | undefined>(undefined);\n  const [disableWrapUp, setDisableWrapUp] = useState<boolean>(false);\n  const addTaskButtonRef = useRef<HTMLButtonElement>(null);\n\n  const isMediumOrAbove = useBreakpoint('md');\n  const caseId = 'C-456';\n  const demoTabItems = getTabs();\n  const [demoCurrentTabId, setDemoCurrentTabId] = useState(\n    isMediumOrAbove ? demoTabItems[0].id : `summary-${caseId}`\n  );\n\n  const demoTabContent = useMemo(() => {\n    return [\n      {\n        id: 'Details',\n        content: <Details />\n      },\n      {\n        id: 'Pulse',\n        content: <PulseMock />\n      },\n      {\n        id: 'Accounts',\n        content: <TableDemo />\n      },\n      {\n        id: 'not found',\n        content: <h2>Not Found</h2>\n      }\n    ];\n  }, []);\n\n  useEffect(() => {\n    if (formActionsElemRef.current) {\n      formActionsElemRef.current.focus();\n      formActionsElemRef.current.scrollIntoView(false);\n    } else if (addTaskButtonRef.current) {\n      addTaskButtonRef.current.scrollIntoView(false);\n    }\n  }, [activeTaskId]);\n\n  const performTaskAction = (taskId: string | undefined, taskAction: TaskActions) => {\n    if (taskId === WRAP_UP_TASK_ID) {\n      if (taskAction === 'cancel' || taskAction === 'submit') {\n        setActiveTaskId(undefined);\n      } else if (taskAction === 'launch') {\n        setActiveTaskId(WRAP_UP_TASK_ID);\n      }\n    } else if (taskAction === 'launch') {\n      setActiveTaskId(taskId);\n      setServiceTasks(prevTasks => {\n        return prevTasks.map(task => {\n          if (task.id === taskId) {\n            return {\n              ...task,\n              icon: 'clipboard',\n              meta: undefined,\n              status: {\n                variant: 'pending' as StatusProps['variant'],\n                text: 'In Progress'\n              }\n            };\n          }\n          return task;\n        });\n      });\n    } else if (taskAction === 'cancel') {\n      setActiveTaskId(undefined);\n    } else if (taskAction === 'submit') {\n      setActiveTaskId(undefined);\n      setServiceTasks(prevTasks => {\n        return prevTasks.map(task => {\n          if (task.id === taskId) {\n            return {\n              ...task,\n              icon: 'check',\n              isResolved: true,\n              status: {\n                variant: 'success' as StatusProps['variant'],\n                text: 'Resolve Completed'\n              }\n            };\n          }\n          return task;\n        });\n      });\n    } else if (taskAction === 'dismiss') {\n      setServiceTasks(prevTasks => {\n        return prevTasks.filter(task => task.id !== taskId);\n      });\n    }\n  };\n\n  const [items, setItems] = useState<IntelligentGuidanceProps['items']>([\n    {\n      id: '1',\n      label: 'Update contact profile',\n      icon: 'bulb',\n      type: 'Task',\n      onClick: () => {\n        performTaskAction(UPDATE_PROFILE_TASK_ID, 'launch');\n        setItems(prevItems => prevItems.filter(item => item.id !== '1'));\n      },\n      onDismiss: () => {\n        setItems(prevItems => prevItems.filter(item => item.id !== '1'));\n      }\n    },\n    {\n      id: '2',\n      label: 'Change address',\n      icon: 'clipboard',\n      type: 'Task',\n      onClick: () => {\n        performTaskAction(CHANGE_ADDRESS_TASK_ID, 'launch');\n        setItems(prevItems => prevItems.filter(item => item.id !== '2'));\n      },\n      onDismiss: () => {\n        setItems(prevItems => prevItems.filter(item => item.id !== '2'));\n      }\n    }\n  ]);\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setItems(prev => [\n        ...prev,\n        {\n          id: '3',\n          label: 'Demo item',\n          icon: 'clipboard',\n          type: 'Demo',\n          onClick: () => {\n            setItems(prevItems => prevItems.filter(item => item.id !== '3'));\n          },\n          onDismiss: () => {\n            setItems(prevItems => prevItems.filter(item => item.id !== '3'));\n          }\n        }\n      ]);\n    }, 5000);\n    return () => clearTimeout(timer);\n  }, []);\n\n  const renderTasks = (selections: MenuItemProps[]) => {\n    const newTasks = selections.map((selection, i) => {\n      const taskId = createUID();\n      if (i === 0) {\n        return {\n          id: taskId,\n          icon: 'clipboard',\n          name: selection.primary,\n          isResolved: false,\n          status: {\n            variant: 'pending' as StatusProps['variant'],\n            text: 'In Progress'\n          }\n        };\n      }\n      return {\n        id: taskId,\n        icon: 'clipboard',\n        name: selection.primary,\n        isResolved: false,\n        meta: 'Queued task'\n      };\n    });\n    setServiceTasks(prevTasks => {\n      return [...newTasks, ...prevTasks];\n    });\n    if (newTasks.length > 0) {\n      performTaskAction(newTasks[0].id, 'launch');\n    }\n  };\n\n  const taskWidget = (\n    <TaskManager\n      ref={taskManagerRef}\n      tasks={serviceTasks.map(task => {\n        if (task.id === activeTaskId) {\n          return {\n            ...task,\n            active: true\n          };\n        }\n        return task;\n      })}\n      emptyText='No tasks added'\n      banner={{\n        icon: 'headset',\n        content:\n          'Hi Ms. Ventura, I see that you are interested in changing your monthly due date, is that correct ?'\n      }}\n      onTaskLaunch={id => {\n        performTaskAction(id, 'launch');\n      }}\n      onTaskDismiss={id => {\n        performTaskAction(id, 'dismiss');\n      }}\n      addTask={{\n        items: TaskPickerMockData.tasks,\n        onAdd: renderTasks\n      }}\n      wrapUp={{\n        disable: disableWrapUp,\n        onClick: () => {\n          performTaskAction(WRAP_UP_TASK_ID, 'launch');\n          setDisableWrapUp(true);\n        },\n        active: activeTaskId === WRAP_UP_TASK_ID\n      }}\n      main={\n        <TaskView\n          header={\n            <Text variant='h2'>\n              {activeTaskId === WRAP_UP_TASK_ID\n                ? 'Wrap up'\n                : serviceTasks.find(task => task.id === activeTaskId)?.name}\n            </Text>\n          }\n          actions={\n            <MenuButton\n              ref={formActionsElemRef}\n              menu={{\n                items: ['Option Number 1', 'Option Number 2', 'Option Number 3'].map(\n                  (name: string) => ({\n                    primary: name,\n                    id: name,\n                    onClick: () => {}\n                  })\n                )\n              }}\n              text='Actions'\n            />\n          }\n        >\n          <Form\n            actions={\n              <>\n                <Button\n                  name='Cancel'\n                  onClick={() => {\n                    performTaskAction(activeTaskId, 'cancel');\n                  }}\n                >\n                  Cancel\n                </Button>\n                <div>\n                  <Button name='Save'>Save</Button>\n                  <Button\n                    name='Submit'\n                    variant='primary'\n                    onClick={() => {\n                      performTaskAction(activeTaskId, 'submit');\n                    }}\n                  >\n                    Submit\n                  </Button>\n                </div>\n              </>\n            }\n          >\n            <Grid container={{ rowGap: 2 }}>\n              {activeTaskId === WRAP_UP_TASK_ID ? (\n                <TimelineDemo />\n              ) : (\n                Array.from({ length: 15 }, (undef, i) => {\n                  const idx = i + 1;\n                  return <Input label={`Field ${idx}`} key={idx} />;\n                })\n              )}\n            </Grid>\n          </Form>\n        </TaskView>\n      }\n    />\n  );\n\n  const createDate = new Date(2016, 1, 8);\n  const msInYear = 1000 * 60 * 60 * 24 * 365;\n  const diffInYears = Math.floor((Date.now() - createDate.getTime()) / msInYear);\n\n  return (\n    <AppShellDemo\n      main={\n        <CSCaseView\n          caseId={caseId}\n          heading='Intelligent Guidance demo case'\n          icon={<Icon name='user-solid' />}\n          tasks={taskWidget}\n          summary={\n            <CaseSummaryFields\n              primaryFields={[\n                {\n                  name: 'Member ID',\n                  value: 'M204859F438G'\n                },\n                {\n                  name: 'Priority',\n                  value: '95'\n                }\n              ].map((f, i) => ({ ...f, id: `p-${i}` }))}\n              secondaryFields={[\n                {\n                  name: 'Status',\n                  value: <Status variant='info'>New</Status>\n                },\n                {\n                  name: 'Assigned to',\n                  value: 'Dean Thomas'\n                },\n                {\n                  name: 'Create date',\n                  value: createDate.toDateString()\n                },\n                {\n                  name: 'Update date',\n                  value: `${diffInYears} years ago`\n                }\n              ].map((f, i) => ({ ...f, id: `s-${i}` }))}\n            />\n          }\n          tabs={{\n            items: demoTabItems,\n            currentTabId: demoCurrentTabId,\n            onClick: (id: string) => setDemoCurrentTabId(id)\n          }}\n          tabContent={demoTabContent}\n          utilities={\n            <>\n              <AttachmentsMock />\n              <MockSummaryList icon='user-search' name='Stakeholders' />\n              <MockSummaryList icon='user-star' name='Followers' />\n            </>\n          }\n          utilitiesSummaryItems={[\n            { iconName: 'paper-clip', count: 4 },\n            { iconName: 'user-search-solid', count: 10 },\n            { iconName: 'user-star-solid', count: 5 }\n          ]}\n          intelligentGuidance={<IntelligentGuidance items={items} heading='Intelligent guidance' />}\n        />\n      }\n    />\n  );\n};\n"]}