npm - @pega/cosmos-react-demos - Versions diffs - 4.0.0-dev.2.0 → 4.0.0-dev.20.0 - Mend

@pega/cosmos-react-demos 4.0.0-dev.2.0 → 4.0.0-dev.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1187) hide show

package/jsx/core/Table/Table.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.stories.jsx","sourceRoot":"","sources":["../../../src/core/Table/Table.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Status, Table, ColumnProps, TableProps, Configuration } from '@pega/cosmos-react-core';\n\nimport { tableData } from './Table.mocks';\nimport { StyledBalance } from './Table.styles';\n\nexport default {\n title: 'Core/Table',\n component: Table,\n excludeStories: ['ConfigurableTable'],\n args: {\n title: 'Accounts',\n hoverHighlight: false,\n loading: false,\n loadingMessage: 'Loading data',\n emptyTable: false\n },\n argTypes: {\n title: { control: { type: 'text' } },\n hoverHighlight: { control: { type: 'boolean' } },\n loading: { control: { type: 'boolean' } },\n loadingMessage: { control: { type: 'text' } },\n emptyTable: { control: { type: 'boolean' } }\n }\n} as Meta;\n\ninterface TableStoryProps {\n title?: TableProps['title'];\n hoverHighlight?: TableProps['hoverHighlight'];\n loading?: TableProps['loading'];\n loadingMessage?: TableProps['loadingMessage'];\n emptyTable?: boolean;\n}\n\nexport const TableDemo: Story<TableStoryProps> = (args: TableStoryProps) => {\n const columns: ColumnProps<typeof tableData[number]>[] = [\n { renderer: 'name', label: 'Name' },\n { renderer: 'dob', label: 'Date of Birth' },\n { renderer: 'address', label: 'Address' },\n { renderer: 'email', label: 'Email' },\n { renderer: 'balance', label: 'Account Balance', align: 'right' }\n ];\n\n return (\n <Table\n title={args.title}\n hoverHighlight={args.hoverHighlight}\n loading={args.loading}\n loadingMessage={args.loadingMessage}\n data={args.emptyTable ? [] : tableData}\n columns={columns}\n />\n );\n};\n\nexport const StyledTableDemo: Story<TableStoryProps> = (args: TableStoryProps) => {\n const columns: ColumnProps<typeof tableData[number]>[] = [\n { renderer: data => <b>{data.name}</b>, label: 'Name' },\n { renderer: 'dob', label: 'Date of Birth' },\n { renderer: 'address', label: 'Address' },\n {\n renderer: data => {\n return (\n <>\n {data.email && data.emailVerified && <Status variant='success'>{data.email}</Status>}\n {data.email && !data.emailVerified && <Status variant='urgent'>{data.email}</Status>}\n </>\n );\n },\n label: 'Email'\n },\n {\n renderer: data => {\n return (\n <StyledBalance negativeBalance={data.balance.startsWith('-')}>\n {data.balance}\n </StyledBalance>\n );\n },\n label: 'Account Balance',\n align: 'right'\n }\n ];\n\n return (\n <Table\n title={args.title}\n hoverHighlight={args.hoverHighlight}\n loading={args.loading}\n loadingMessage={args.loadingMessage}\n data={args.emptyTable ? [] : tableData}\n columns={columns}\n />\n );\n};\n\ninterface ConfigurableTableProps extends TableStoryProps {\n headerFontSize?: string;\n headerFontWeight?: string;\n headerForegroundColor?: string;\n headerBackgroundColor?: string;\n headerVerticalSpacing?: number;\n headerHorizontalSpacing?: number;\n headerBorderWidth?: string;\n headerBorderColor?: string;\n bodyForegroundColor?: string;\n bodyBackgroundColor?: string;\n bodyVerticalSpacing?: number;\n bodyHorizontalSpacing?: number;\n bodyBorderWidth?: string;\n bodyBorderColor?: string;\n borderHorizontalInner?: boolean;\n borderHorizontalOuter?: boolean;\n borderVerticalInner?: boolean;\n borderVerticalOuter?: boolean;\n spacingHorizontalInner?: boolean;\n spacingHorizontalOuter?: boolean;\n spacingVerticalInner?: boolean;\n spacingVerticalOuter?: boolean;\n}\n\nexport const ConfigurableTable: Story<ConfigurableTableProps> = (args: ConfigurableTableProps) => {\n const columns: ColumnProps<typeof tableData[number]>[] = [\n { renderer: data => <b>{data.name}</b>, label: 'Name' },\n { renderer: 'dob', label: 'Date of Birth' },\n { renderer: 'address', label: 'Address' },\n {\n renderer: data => {\n return (\n <>\n {data.email && data.emailVerified && <Status variant='success'>{data.email}</Status>}\n {data.email && !data.emailVerified && <Status variant='urgent'>{data.email}</Status>}\n </>\n );\n },\n label: 'Email'\n },\n {\n renderer: data => {\n return (\n <StyledBalance negativeBalance={data.balance.startsWith('-')}>\n {data.balance}\n </StyledBalance>\n );\n },\n label: 'Account Balance',\n align: 'right'\n }\n ];\n\n return (\n <Configuration\n theme={{\n components: {\n table: {\n header: {\n 'font-size': args.headerFontSize,\n 'font-weight': args.headerFontWeight,\n 'foreground-color': args.headerForegroundColor,\n 'background-color': args.headerBackgroundColor,\n 'vertical-spacing': args.headerVerticalSpacing,\n 'horizontal-spacing': args.headerHorizontalSpacing,\n 'border-width': args.headerBorderWidth,\n 'border-color': args.headerBorderColor\n },\n body: {\n 'foreground-color': args.bodyForegroundColor,\n 'background-color': args.bodyBackgroundColor,\n 'vertical-spacing': args.bodyVerticalSpacing,\n 'horizontal-spacing': args.bodyHorizontalSpacing,\n 'border-width': args.bodyBorderWidth,\n 'border-color': args.bodyBorderColor\n },\n border: {\n 'horizontal-inner': args.borderHorizontalInner,\n 'horizontal-outer': args.borderHorizontalOuter,\n 'vertical-inner': args.borderVerticalInner,\n 'vertical-outer': args.borderVerticalOuter\n },\n spacing: {\n 'horizontal-inner': args.spacingHorizontalInner,\n 'horizontal-outer': args.spacingHorizontalOuter,\n 'vertical-inner': args.spacingVerticalInner,\n 'vertical-outer': args.spacingVerticalOuter\n }\n }\n }\n }}\n >\n <Table title='Accounts' data={tableData} columns={columns} />\n </Configuration>\n );\n};\n\nConfigurableTable.args = {\n headerFontSize: 's',\n headerFontWeight: '600',\n headerForegroundColor: '#000000',\n headerBackgroundColor: '#71baff',\n headerVerticalSpacing: 1,\n headerHorizontalSpacing: 2,\n headerBorderWidth: '0.0625rem',\n headerBorderColor: '#cfcfcf',\n bodyForegroundColor: '#000000',\n bodyBackgroundColor: '#e2f1ff',\n bodyVerticalSpacing: 1,\n bodyHorizontalSpacing: 1,\n bodyBorderWidth: '0.0625rem',\n bodyBorderColor: '#cfcfcf',\n borderHorizontalInner: true,\n borderHorizontalOuter: true,\n borderVerticalInner: true,\n borderVerticalOuter: true,\n spacingHorizontalInner: true,\n spacingHorizontalOuter: true,\n spacingVerticalInner: true,\n spacingVerticalOuter: true\n};\n\nConfigurableTable.argTypes = {\n headerFontSize: {\n options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],\n control: { type: 'select' }\n },\n headerFontWeight: { control: { type: 'text' } },\n headerForegroundColor: { control: { type: 'color' } },\n headerBackgroundColor: { control: { type: 'color' } },\n headerVerticalSpacing: { control: { type: 'number' } },\n headerHorizontalSpacing: { control: { type: 'number' } },\n headerBorderWidth: { control: { type: 'text' } },\n headerBorderColor: { control: { type: 'color' } },\n bodyForegroundColor: { control: { type: 'color' } },\n bodyBackgroundColor: { control: { type: 'color' } },\n bodyVerticalSpacing: { control: { type: 'number' } },\n bodyHorizontalSpacing: { control: { type: 'number' } },\n bodyBorderWidth: { control: { type: 'text' } },\n bodyBorderColor: { control: { type: 'color' } },\n borderHorizontalInner: { control: { type: 'boolean' } },\n borderHorizontalOuter: { control: { type: 'boolean' } },\n borderVerticalInner: { control: { type: 'boolean' } },\n borderVerticalOuter: { control: { type: 'boolean' } },\n spacingHorizontalInner: { control: { type: 'boolean' } },\n spacingHorizontalOuter: { control: { type: 'boolean' } },\n spacingVerticalInner: { control: { type: 'boolean' } },\n spacingVerticalOuter: { control: { type: 'boolean' } },\n title: { table: { disable: true } },\n hoverHighlight: { table: { disable: true } },\n loading: { table: { disable: true } },\n loadingMessage: { table: { disable: true } },\n emptyTable: { table: { disable: true } }\n};\n"]}
1	+ {"version":3,"file":"Table.stories.jsx","sourceRoot":"","sources":["../../../src/core/Table/Table.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Status, Table, ColumnProps, TableProps, Configuration } from '@pega/cosmos-react-core';\n\nimport { tableData } from './Table.mocks';\nimport { StyledBalance } from './Table.styles';\n\nexport default {\n title: 'Core/Table',\n component: Table,\n excludeStories: ['ConfigurableTable'],\n args: {\n title: 'Accounts',\n hoverHighlight: false,\n loading: false,\n loadingMessage: 'Loading data',\n emptyTable: false\n },\n argTypes: {\n title: { control: { type: 'text' } },\n hoverHighlight: { control: { type: 'boolean' } },\n loading: { control: { type: 'boolean' } },\n loadingMessage: { control: { type: 'text' } },\n emptyTable: { control: { type: 'boolean' } }\n }\n} as Meta;\n\ninterface TableStoryProps {\n title?: TableProps['title'];\n hoverHighlight?: TableProps['hoverHighlight'];\n loading?: TableProps['loading'];\n loadingMessage?: TableProps['loadingMessage'];\n emptyTable?: boolean;\n}\n\nexport const TableDemo: Story<TableStoryProps> = (args: TableStoryProps) => {\n const columns: ColumnProps<(typeof tableData)[number]>[] = [\n { renderer: 'name', label: 'Name' },\n { renderer: 'dob', label: 'Date of Birth' },\n { renderer: 'address', label: 'Address' },\n { renderer: 'email', label: 'Email' },\n { renderer: 'balance', label: 'Account Balance', align: 'right' }\n ];\n\n return (\n <Table\n title={args.title}\n hoverHighlight={args.hoverHighlight}\n loading={args.loading}\n loadingMessage={args.loadingMessage}\n data={args.emptyTable ? [] : tableData}\n columns={columns}\n />\n );\n};\n\nexport const StyledTableDemo: Story<TableStoryProps> = (args: TableStoryProps) => {\n const columns: ColumnProps<(typeof tableData)[number]>[] = [\n { renderer: data => <b>{data.name}</b>, label: 'Name' },\n { renderer: 'dob', label: 'Date of Birth' },\n { renderer: 'address', label: 'Address' },\n {\n renderer: data => {\n return (\n <>\n {data.email && data.emailVerified && <Status variant='success'>{data.email}</Status>}\n {data.email && !data.emailVerified && <Status variant='urgent'>{data.email}</Status>}\n </>\n );\n },\n label: 'Email'\n },\n {\n renderer: data => {\n return (\n <StyledBalance negativeBalance={data.balance.startsWith('-')}>\n {data.balance}\n </StyledBalance>\n );\n },\n label: 'Account Balance',\n align: 'right'\n }\n ];\n\n return (\n <Table\n title={args.title}\n hoverHighlight={args.hoverHighlight}\n loading={args.loading}\n loadingMessage={args.loadingMessage}\n data={args.emptyTable ? [] : tableData}\n columns={columns}\n />\n );\n};\n\ninterface ConfigurableTableProps extends TableStoryProps {\n headerFontSize?: string;\n headerFontWeight?: string;\n headerForegroundColor?: string;\n headerBackgroundColor?: string;\n headerVerticalSpacing?: number;\n headerHorizontalSpacing?: number;\n headerBorderWidth?: string;\n headerBorderColor?: string;\n bodyForegroundColor?: string;\n bodyBackgroundColor?: string;\n bodyVerticalSpacing?: number;\n bodyHorizontalSpacing?: number;\n bodyBorderWidth?: string;\n bodyBorderColor?: string;\n borderHorizontalInner?: boolean;\n borderHorizontalOuter?: boolean;\n borderVerticalInner?: boolean;\n borderVerticalOuter?: boolean;\n spacingHorizontalInner?: boolean;\n spacingHorizontalOuter?: boolean;\n spacingVerticalInner?: boolean;\n spacingVerticalOuter?: boolean;\n}\n\nexport const ConfigurableTable: Story<ConfigurableTableProps> = (args: ConfigurableTableProps) => {\n const columns: ColumnProps<(typeof tableData)[number]>[] = [\n { renderer: data => <b>{data.name}</b>, label: 'Name' },\n { renderer: 'dob', label: 'Date of Birth' },\n { renderer: 'address', label: 'Address' },\n {\n renderer: data => {\n return (\n <>\n {data.email && data.emailVerified && <Status variant='success'>{data.email}</Status>}\n {data.email && !data.emailVerified && <Status variant='urgent'>{data.email}</Status>}\n </>\n );\n },\n label: 'Email'\n },\n {\n renderer: data => {\n return (\n <StyledBalance negativeBalance={data.balance.startsWith('-')}>\n {data.balance}\n </StyledBalance>\n );\n },\n label: 'Account Balance',\n align: 'right'\n }\n ];\n\n return (\n <Configuration\n theme={{\n components: {\n table: {\n header: {\n 'font-size': args.headerFontSize,\n 'font-weight': args.headerFontWeight,\n 'foreground-color': args.headerForegroundColor,\n 'background-color': args.headerBackgroundColor,\n 'vertical-spacing': args.headerVerticalSpacing,\n 'horizontal-spacing': args.headerHorizontalSpacing,\n 'border-width': args.headerBorderWidth,\n 'border-color': args.headerBorderColor\n },\n body: {\n 'foreground-color': args.bodyForegroundColor,\n 'background-color': args.bodyBackgroundColor,\n 'vertical-spacing': args.bodyVerticalSpacing,\n 'horizontal-spacing': args.bodyHorizontalSpacing,\n 'border-width': args.bodyBorderWidth,\n 'border-color': args.bodyBorderColor\n },\n border: {\n 'horizontal-inner': args.borderHorizontalInner,\n 'horizontal-outer': args.borderHorizontalOuter,\n 'vertical-inner': args.borderVerticalInner,\n 'vertical-outer': args.borderVerticalOuter\n },\n spacing: {\n 'horizontal-inner': args.spacingHorizontalInner,\n 'horizontal-outer': args.spacingHorizontalOuter,\n 'vertical-inner': args.spacingVerticalInner,\n 'vertical-outer': args.spacingVerticalOuter\n }\n }\n }\n }}\n >\n <Table title='Accounts' data={tableData} columns={columns} />\n </Configuration>\n );\n};\n\nConfigurableTable.args = {\n headerFontSize: 's',\n headerFontWeight: '600',\n headerForegroundColor: '#000000',\n headerBackgroundColor: '#71baff',\n headerVerticalSpacing: 1,\n headerHorizontalSpacing: 2,\n headerBorderWidth: '0.0625rem',\n headerBorderColor: '#cfcfcf',\n bodyForegroundColor: '#000000',\n bodyBackgroundColor: '#e2f1ff',\n bodyVerticalSpacing: 1,\n bodyHorizontalSpacing: 1,\n bodyBorderWidth: '0.0625rem',\n bodyBorderColor: '#cfcfcf',\n borderHorizontalInner: true,\n borderHorizontalOuter: true,\n borderVerticalInner: true,\n borderVerticalOuter: true,\n spacingHorizontalInner: true,\n spacingHorizontalOuter: true,\n spacingVerticalInner: true,\n spacingVerticalOuter: true\n};\n\nConfigurableTable.argTypes = {\n headerFontSize: {\n options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],\n control: { type: 'select' }\n },\n headerFontWeight: { control: { type: 'text' } },\n headerForegroundColor: { control: { type: 'color' } },\n headerBackgroundColor: { control: { type: 'color' } },\n headerVerticalSpacing: { control: { type: 'number' } },\n headerHorizontalSpacing: { control: { type: 'number' } },\n headerBorderWidth: { control: { type: 'text' } },\n headerBorderColor: { control: { type: 'color' } },\n bodyForegroundColor: { control: { type: 'color' } },\n bodyBackgroundColor: { control: { type: 'color' } },\n bodyVerticalSpacing: { control: { type: 'number' } },\n bodyHorizontalSpacing: { control: { type: 'number' } },\n bodyBorderWidth: { control: { type: 'text' } },\n bodyBorderColor: { control: { type: 'color' } },\n borderHorizontalInner: { control: { type: 'boolean' } },\n borderHorizontalOuter: { control: { type: 'boolean' } },\n borderVerticalInner: { control: { type: 'boolean' } },\n borderVerticalOuter: { control: { type: 'boolean' } },\n spacingHorizontalInner: { control: { type: 'boolean' } },\n spacingHorizontalOuter: { control: { type: 'boolean' } },\n spacingVerticalInner: { control: { type: 'boolean' } },\n spacingVerticalOuter: { control: { type: 'boolean' } },\n title: { table: { disable: true } },\n hoverHighlight: { table: { disable: true } },\n loading: { table: { disable: true } },\n loadingMessage: { table: { disable: true } },\n emptyTable: { table: { disable: true } }\n};\n"]}

package/jsx/core/Tabs/Tabs.stories.d.ts CHANGED Viewed

@@ -1,15 +1,9 @@
 import { Meta, Story } from '@storybook/react';
-import { TabsProps } from '@pega/cosmos-react-core';
-declare const _default: Meta<import("@storybook/react").Args>;
+declare const _default: Meta;
 export default _default;
 interface TabDemoProps {
     type: 'horizontal' | 'vertical';
 }
 export declare const TabsDemo: Story<TabDemoProps>;
 export declare const TabsCountDemo: Story<TabDemoProps>;
-interface ConfigurableTabsProps {
-    foreground?: string;
-    type?: TabsProps['type'];
-}
-export declare const ConfigurableTabs: Story<ConfigurableTabsProps>;
 //# sourceMappingURL=Tabs.stories.d.ts.map

package/jsx/core/Tabs/Tabs.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC~~;AAG~~/C,~~OAAO,EAAuC,SAAS,EAAE,MAAM,yBAAyB,CAAC;;AAEzF,wBAUU~~;AAEV,UAAU,YAAY;IACpB,IAAI,EAAE,YAAY,GAAG,UAAU,CAAC;CACjC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,YAAY,CA6BxC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,YAAY,CA6B7C,CAAC~~;AAEF,UAAU,qBAAqB;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,qBAAqB,CAuCzD,CAAC~~"}
1	+ {"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAK/C,wBASU;AAEV,UAAU,YAAY;IACpB,IAAI,EAAE,YAAY,GAAG,UAAU,CAAC;CACjC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,YAAY,CA6BxC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,YAAY,CA6B7C,CAAC"}

package/jsx/core/Tabs/Tabs.stories.jsx CHANGED Viewed

@@ -1,9 +1,8 @@
 import { useState } from 'react';
-import { Configuration, Flex, TabPanel, Tabs } from '@pega/cosmos-react-core';
+import { Flex, TabPanel, Tabs } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Tabs',
     component: Tabs,
-    excludeStories: ['ConfigurableTabs'],
     args: {
         type: 'horizontal'
     },
@@ -57,42 +56,4 @@ export const TabsCountDemo = (args) => {
       </Flex>
     </Flex>);
 };
-export const ConfigurableTabs = (args) => {
-    const [panelShown, changePanel] = useState('1');
-    const handleTabChange = (id) => {
-        changePanel(id);
-    };
-    const tabs = [
-        { name: 'Tab 1', id: '1' },
-        { name: 'Tab 2', id: '2' },
-        { name: 'Tab 3', id: '3' },
-        { name: 'Tab 4', id: '4', disabled: true },
-        { name: 'Tab 5', id: '5' }
-    ];
-    return (<Configuration theme={{
-            components: {
-                tabs: {
-                    base: {
-                        foreground: args.foreground
-                    }
-                }
-            }
-        }}>
-      <Flex item={{ grow: 1 }}>
-        <Tabs tabs={tabs} onTabClick={handleTabChange} currentTabId={panelShown}/>
-      </Flex>
-      <Flex container={{ pad: [1, 2] }} item={{ grow: 1 }}>
-        {tabs.map(tab => (<TabPanel tabId={tab.id} currentTabId={panelShown} key={tab.id}>
-            <div>{tab.name} content</div>
-          </TabPanel>))}
-      </Flex>
-    </Configuration>);
-};
-ConfigurableTabs.args = {
-    foreground: '#076bc9'
-};
-ConfigurableTabs.argTypes = {
-    foreground: { control: { type: 'color' } },
-    type: { table: { disable: true } }
-};
 //# sourceMappingURL=Tabs.stories.jsx.map

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

	@@ -1 +1 @@
1	- {"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,~~cAAc,EAAE,CAAC,kBAAkB,CAAC;IACpC,~~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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 ~~excludeStories: ['ConfigurableTabs'],\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}</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"]}
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 { Flex, TabPanel, Tabs } 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}</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"]}

package/jsx/core/Text/Text.stories.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Meta, Story } from '@storybook/react';
 import { TextProps } from '@pega/cosmos-react-core';
-declare const _default: Meta<import("@storybook/react").Args>;
+declare const _default: Meta;
 export default _default;
 export declare const TextDemo: Story<TextProps>;
 interface ConfigurableTextProps {

package/jsx/core/TextArea/TextArea.stories.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Meta, Story } from '@storybook/react';
 import { TextAreaProps } from '@pega/cosmos-react-core';
-declare const _default: Meta<import("@storybook/react").Args>;
+declare const _default: Meta;
 export default _default;
 interface TextAreaStoryProps extends TextAreaProps {
     showAdditionalInfo?: boolean;

package/jsx/core/TextArea/TextArea.stories.jsx CHANGED Viewed

@@ -20,7 +20,7 @@ TextAreaDemo.args = {
     displayCharCount: false,
     hardStop: true,
     resizable: false,
-    autoResize: false,
+    autoResize: true,
     label: 'Text Area',
     labelHidden: false,
     info: 'Enter a large amount of text',

package/jsx/core/TextArea/TextArea.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.stories.jsx","sourceRoot":"","sources":["../../../src/core/TextArea/TextArea.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAe,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAiB,MAAM,yBAAyB,CAAC;AAEjF,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;IACnB,cAAc,EAAE,CAAC,sBAAsB,CAAC;CACjC,CAAC;AAMV,MAAM,CAAC,MAAM,YAAY,GAA8B,CAAC,IAAwB,EAAE,EAAE;IAClF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEvC,OAAO,CACL,CAAC,QAAQ,CACP,cAAc,CAAC,CACb,IAAI,CAAC,kBAAkB;YACrB,CAAC,CAAC;gBACE,OAAO,EAAE,iBAAiB;gBAC1B,OAAO,EAAE,sBAAsB;aAChC;YACH,CAAC,CAAC,SAAS,CACd,CACD,EAAE,CAAC,WAAW,CACd,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,QAAQ,CAAC,CAAC,CAAC,CAAmC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAC5E,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,gBAAgB,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CACxC,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,UAAU,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAC5B,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EACxB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,SAAS,EAAE,CAAC;IACZ,SAAS,EAAE,GAAG;IACd,gBAAgB,EAAE,KAAK;IACvB,QAAQ,EAAE,IAAI;IACd,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,~~KAAK~~;~~IACjB~~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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, ChangeEvent } from 'react';\n\nimport { Configuration, TextArea, TextAreaProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Textarea',\n component: TextArea,\n excludeStories: ['ConfigurableTextArea']\n} as Meta;\n\ninterface TextAreaStoryProps extends TextAreaProps {\n showAdditionalInfo?: boolean;\n}\n\nexport const TextAreaDemo: Story<TextAreaStoryProps> = (args: TextAreaStoryProps) => {\n const [value, setValue] = useState('');\n\n return (\n <TextArea\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Some additional info'\n }\n : undefined\n }\n id='text-area'\n value={value}\n onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)}\n minLength={args.minLength}\n maxLength={args.maxLength}\n displayCharCount={args.displayCharCount}\n hardStop={args.hardStop}\n resizable={args.resizable}\n autoResize={args.autoResize}\n label={args.label}\n labelHidden={args.labelHidden}\n info={args.info}\n placeholder={args.placeholder}\n status={args.status}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n />\n );\n};\n\nTextAreaDemo.args = {\n minLength: 0,\n maxLength: 300,\n displayCharCount: false,\n hardStop: true,\n resizable: false,\n autoResize: ~~false~~,\n label: 'Text Area',\n labelHidden: false,\n info: 'Enter a large amount of text',\n placeholder: 'Tell us a story…',\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false,\n showAdditionalInfo: true\n};\n\nTextAreaDemo.argTypes = {\n minLength: { control: { type: 'number' } },\n maxLength: { control: { type: 'number' } },\n displayCharCount: { control: { type: 'boolean' } },\n hardStop: { control: { type: 'boolean' } },\n resizable: { control: { type: 'boolean' } },\n autoResize: { control: { type: 'boolean' } },\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n info: { control: { type: 'text' } },\n placeholder: { control: { type: 'text' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } },\n showAdditionalInfo: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableTextAreaProps {\n minHeight?: string;\n padding?: string;\n}\n\nexport const ConfigurableTextArea: Story<ConfigurableTextAreaProps> = (\n args: ConfigurableTextAreaProps\n) => {\n const [value, setValue] = useState('');\n\n return (\n <Configuration\n theme={{\n components: {\n 'text-area': {\n 'min-height': args.minHeight,\n padding: args.padding\n }\n }\n }}\n >\n <TextArea\n value={value}\n onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)}\n resizable\n autoResize\n label='Configurable Text Area'\n info='Enter a large amount of text'\n placeholder='Tell us a story…'\n />\n </Configuration>\n );\n};\n\nConfigurableTextArea.args = {\n minHeight: '3.75rem',\n padding: '0.5rem'\n};\n\nConfigurableTextArea.argTypes = {\n minHeight: { control: { type: 'text' } },\n padding: { control: { type: 'text' } }\n};\n"]}
1	+ {"version":3,"file":"TextArea.stories.jsx","sourceRoot":"","sources":["../../../src/core/TextArea/TextArea.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, ChangeEvent } from 'react';\n\nimport { Configuration, TextArea, TextAreaProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Textarea',\n component: TextArea,\n excludeStories: ['ConfigurableTextArea']\n} as Meta;\n\ninterface TextAreaStoryProps extends TextAreaProps {\n showAdditionalInfo?: boolean;\n}\n\nexport const TextAreaDemo: Story<TextAreaStoryProps> = (args: TextAreaStoryProps) => {\n const [value, setValue] = useState('');\n\n return (\n <TextArea\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Some additional info'\n }\n : undefined\n }\n id='text-area'\n value={value}\n onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)}\n minLength={args.minLength}\n maxLength={args.maxLength}\n displayCharCount={args.displayCharCount}\n hardStop={args.hardStop}\n resizable={args.resizable}\n autoResize={args.autoResize}\n label={args.label}\n labelHidden={args.labelHidden}\n info={args.info}\n placeholder={args.placeholder}\n status={args.status}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n />\n );\n};\n\nTextAreaDemo.args = {\n minLength: 0,\n maxLength: 300,\n displayCharCount: false,\n hardStop: true,\n resizable: false,\n autoResize: true,\n label: 'Text Area',\n labelHidden: false,\n info: 'Enter a large amount of text',\n placeholder: 'Tell us a story…',\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false,\n showAdditionalInfo: true\n};\n\nTextAreaDemo.argTypes = {\n minLength: { control: { type: 'number' } },\n maxLength: { control: { type: 'number' } },\n displayCharCount: { control: { type: 'boolean' } },\n hardStop: { control: { type: 'boolean' } },\n resizable: { control: { type: 'boolean' } },\n autoResize: { control: { type: 'boolean' } },\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n info: { control: { type: 'text' } },\n placeholder: { control: { type: 'text' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } },\n showAdditionalInfo: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableTextAreaProps {\n minHeight?: string;\n padding?: string;\n}\n\nexport const ConfigurableTextArea: Story<ConfigurableTextAreaProps> = (\n args: ConfigurableTextAreaProps\n) => {\n const [value, setValue] = useState('');\n\n return (\n <Configuration\n theme={{\n components: {\n 'text-area': {\n 'min-height': args.minHeight,\n padding: args.padding\n }\n }\n }}\n >\n <TextArea\n value={value}\n onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)}\n resizable\n autoResize\n label='Configurable Text Area'\n info='Enter a large amount of text'\n placeholder='Tell us a story…'\n />\n </Configuration>\n );\n};\n\nConfigurableTextArea.args = {\n minHeight: '3.75rem',\n padding: '0.5rem'\n};\n\nConfigurableTextArea.argTypes = {\n minHeight: { control: { type: 'text' } },\n padding: { control: { type: 'text' } }\n};\n"]}

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

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

package/jsx/core/Tooltip/Tooltip.stories.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/react';
-declare const _default: Meta<import("@storybook/react").Args>;
+declare const _default: Meta;
 export default _default;
 export declare const TooltipDemo: Story;
 interface ConfigurableTooltipProps {
@@ -7,4 +7,5 @@ interface ConfigurableTooltipProps {
     backgroundColor?: string;
 }
 export declare const ConfigurableTooltip: Story<ConfigurableTooltipProps>;
+export declare const SmartTooltip: Story;
 //# sourceMappingURL=Tooltip.stories.d.ts.map

package/jsx/core/Tooltip/Tooltip.stories.d.ts.map CHANGED Viewed

	@@ -1 +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,wBAIU;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"}
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;;AAM/C,wBAIU;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;AAYF,eAAO,MAAM,YAAY,EAAE,KAyB1B,CAAC"}

package/jsx/core/Tooltip/Tooltip.stories.jsx CHANGED Viewed

@@ -1,4 +1,5 @@
-import { Button, Configuration, Tooltip, useElement } from '@pega/cosmos-react-core';
+import { Button, Configuration, Flex, Tooltip, useElement } from '@pega/cosmos-react-core';
+import { ResizeableEl } from './Tooltip.styles';
 export default {
     title: 'Core/Tooltip',
     component: Tooltip,
@@ -43,4 +44,23 @@ ConfigurableTooltip.argTypes = {
     foregroundColor: { control: { type: 'color' } },
     backgroundColor: { control: { type: 'color' } }
 };
+export const SmartTooltip = () => {
+    const [el1, setEl1] = useElement();
+    const [el2, setEl2] = useElement();
+    const textContent1 = 'Resize me and hover: Lorem ipsum dolor sit amet';
+    const textContent2 = 'Hover or focus me: Lorem ipsum dolor sit amet';
+    return (<Flex container={{ direction: 'column', gap: 4 }}>
+      <ResizeableEl ref={setEl1}>{textContent1}</ResizeableEl>
+      {el1 && (<Tooltip target={el1} smart showDelay='none' hideDelay='none'>
+          {textContent1}
+        </Tooltip>)}
+      <Button as={ResizeableEl} variant='link' ref={setEl2}>
+        {textContent2}
+      </Button>
+      {el2 && (<Tooltip target={el2} smart showDelay='none' hideDelay='none'>
+          {textContent2}
+        </Tooltip>)}
+    </Flex>);
+};
 //# sourceMappingURL=Tooltip.stories.jsx.map

package/jsx/core/Tooltip/Tooltip.stories.jsx.map CHANGED Viewed

	@@ -1 +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;IAClB,cAAc,EAAE,CAAC,qBAAqB,CAAC;CAChC,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 excludeStories: ['ConfigurableTooltip']\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"]}
1	+ {"version":3,"file":"Tooltip.stories.jsx","sourceRoot":"","sources":["../../../src/core/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Button, Configuration, Flex, Tooltip, useElement } from '@pega/cosmos-react-core';\n\nimport { ResizeableEl } from './Tooltip.styles';\n\nexport default {\n title: 'Core/Tooltip',\n component: Tooltip,\n excludeStories: ['ConfigurableTooltip']\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\nexport const SmartTooltip: Story = () => {\n const [el1, setEl1] = useElement();\n const [el2, setEl2] = useElement();\n const textContent1 = 'Resize me and hover: Lorem ipsum dolor sit amet';\n const textContent2 = 'Hover or focus me: Lorem ipsum dolor sit amet';\n\n return (\n <Flex container={{ direction: 'column', gap: 4 }}>\n <ResizeableEl ref={setEl1}>{textContent1}</ResizeableEl>\n {el1 && (\n <Tooltip target={el1} smart showDelay='none' hideDelay='none'>\n {textContent1}\n </Tooltip>\n )}\n\n <Button as={ResizeableEl} variant='link' ref={setEl2}>\n {textContent2}\n </Button>\n {el2 && (\n <Tooltip target={el2} smart showDelay='none' hideDelay='none'>\n {textContent2}\n </Tooltip>\n )}\n </Flex>\n );\n};\n"]}

package/jsx/core/Tooltip/Tooltip.styles.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export declare const ResizeableEl: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
2	+ //# sourceMappingURL=Tooltip.styles.d.ts.map

package/jsx/core/Tooltip/Tooltip.styles.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"Tooltip.styles.d.ts","sourceRoot":"","sources":["../../../src/core/Tooltip/Tooltip.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,yGAkBvB,CAAC"}

package/jsx/core/Tooltip/Tooltip.styles.js ADDED Viewed

@@ -0,0 +1,23 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp } from '@pega/cosmos-react-core/lib/theme';
+export const ResizeableEl = styled.div(({ theme }) => {
+    return css `
+    position: relative;
+    display: inline-block;
+    resize: horizontal;
+    width: 26ch;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      inset: 0;
+      border: 0.0625rem dashed ${theme.base.palette['border-line']};
+    }
+  `;
+});
+ResizeableEl.defaultProps = defaultThemeProp;
+//# sourceMappingURL=Tooltip.styles.js.map

package/jsx/core/Tooltip/Tooltip.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Tooltip.styles.js","sourceRoot":"","sources":["../../../src/core/Tooltip/Tooltip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACnD,OAAO,GAAG,CAAA;;;;;;;;;;;;;;iCAcqB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;GAE/D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core/lib/theme';\n\nexport const ResizeableEl = styled.div(({ theme }) => {\n return css`\n position: relative;\n display: inline-block;\n resize: horizontal;\n width: 26ch;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n\n &::after {\n content: '';\n display: block;\n position: absolute;\n inset: 0;\n border: 0.0625rem dashed ${theme.base.palette['border-line']};\n }\n `;\n});\n\nResizeableEl.defaultProps = defaultThemeProp;\n"]}

package/jsx/core/Tree/Tree.stories.d.ts CHANGED Viewed

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

package/jsx/core/Tree/Tree.stories.d.ts.map CHANGED Viewed

	@@ -1 +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,EAAE,KActB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,IAAI,CAAC,iBAAiB,EAAE,OAAO,CAAC,~~CAyGpE~~,CAAC"}
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,EAAE,KActB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,mBAAmB,CAAC,CA4F1F,CAAC"}

package/jsx/core/Tree/Tree.stories.jsx CHANGED Viewed

@@ -16,6 +16,7 @@ export const BaseTree = () => {
         }}/>);
 };
 export const StandardTreeDemo = (args) => {
+    const [currentNodeId, setCurrentNodeId] = useState();
     const getMockNodes = ({ length = 5, parent = true } = {}) => {
         return Array.from({ length }, (_, i) => {
             const isParent = parent && i !== 2;
@@ -34,11 +35,11 @@ export const StandardTreeDemo = (args) => {
                     ? undefined
                     : nodeId => {
                         action(`Action for node: ${nodeId}`)();
-                    }
+                    },
+                href: !args.selectableParents && isParent ? undefined : `#${id}`
             };
         });
     };
-    const [currentNodeId, setCurrentNodeId] = useState();
     const [allNodes, setAllNodes] = useState(() => {
         return getMockNodes({ length: 10 });
     });
@@ -61,20 +62,9 @@ export const StandardTreeDemo = (args) => {
         });
     };
     return (<>
-      <StandardTree lined={args.lined} currentNodeId={currentNodeId} nodes={allNodes} onNodeClick={id => {
-            const clickedNode = treeHelpers.getNode(allNodes, id);
+      <StandardTree lined={args.lined} currentNodeId={currentNodeId} nodes={allNodes} onNodeClick={(id, e) => {
+            e.preventDefault();
             setCurrentNodeId(id);
-            if (!clickedNode?.nodes)
-                return;
-            setAllNodes(tree => treeHelpers.mapNode(tree, id, node => {
-                return {
-                    ...node,
-                    loading: node.nodes?.length === 0
-                };
-            }));
-            if (clickedNode?.nodes?.length > 0)
-                return;
-            loadChildNodes(id);
         }} onNodeToggle={id => {
             const clickedNode = treeHelpers.getNode(allNodes, id);
             if (!clickedNode?.nodes)
@@ -89,15 +79,17 @@ export const StandardTreeDemo = (args) => {
             if (clickedNode?.nodes?.length > 0)
                 return;
             loadChildNodes(id);
-        }}/>
+        }} selectableParents={args.selectableParents}/>
       <Button onClick={() => expandTo('')}>Collapse All</Button>
       <Button onClick={() => expandTo(currentNodeId || '')}>Expand to active item</Button>
     </>);
 };
 StandardTreeDemo.args = {
-    lined: false
+    lined: false,
+    selectableParents: true
 };
 StandardTreeDemo.argTypes = {
-    lined: { control: { type: 'boolean' } }
+    lined: { control: { type: 'boolean' } },
+    selectableParents: { control: { type: 'boolean' } }
 };
 //# sourceMappingURL=Tree.stories.jsx.map

package/jsx/core/Tree/Tree.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tree.stories.jsx","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,CAAC,cAAc,CACb,KAAK,CAAC,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,CACpC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;YAChC,OAAO,CACL,EACE;YAAA,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAChB;YAAA,CAAC,OAAO,CACV;UAAA,GAAG,CACJ,CAAC;QACJ,CAAC,CAAC,EACF,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,SAAS,EAAE,wBAAwB;gBACnC,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,EACE;MAAA,CAAC,YAAY,CACX,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,KAAK,CAAC,CAAC,QAAQ,CAAC,CAChB,WAAW,CAAC,CAAC,~~EAAE,~~CAAC,EAAE~~;YAChB~~,~~MAAM,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC,QAAQ,~~EAAE,~~EAAE,~~CAAC,~~CAAC;YACtD,gBAAgB,CAAC,~~EAAE,~~CAAC,CAAC;YAErB,IAAI,CAAC,WAAW,~~EAAE~~,KAAK~~;~~gBAAE~~,~~OAAO;YAEhC,WAAW,~~CAAC,~~IAAI,~~CAAC,~~EAAE~~,~~CACjB,WAAW,CAAC,OAAO,CAAC,IAAI,~~EAAE,~~EAAE,EAAE,IAAI,~~CAAC~~,EAAE~~;~~gBACnC~~,~~OAAO;oBACL~~,~~GAAG,IAAI;oBACP,OAAO,EAAE,IAAI,~~CAAC,~~KAAK,~~EAAE,~~MAAM,KAAK,~~CAAC~~;iBAClC~~,CAAC;~~YACJ~~,CAAC,CAAC,~~CACH,CAAC;YAGF,IAAI,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC;gBAAE,OAAO;YAE3C,cAAc,CAAC,EAAE,CAAC,CAAC;QACrB,CAAC,CAAC,~~CACF,YAAY,CAAC,CAAC,EAAE,CAAC,EAAE;YACjB,MAAM,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;YAEtD,IAAI,CAAC,WAAW,EAAE,KAAK;gBAAE,OAAO;YAEhC,WAAW,CAAC,IAAI,CAAC,EAAE,CACjB,WAAW,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE;gBACnC,OAAO;oBACL,GAAG,IAAI;oBACP,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ;oBACxB,OAAO,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC;iBAClC,CAAC;YACJ,CAAC,CAAC,CACH,CAAC;YAGF,IAAI,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC;gBAAE,OAAO;YAE3C,cAAc,CAAC,EAAE,CAAC,CAAC;QACrB,CAAC,CAAC,~~EAEJ~~;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,MAAM,CACzD;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,aAAa,IAAI,EAAE,CAAC,CAAC,CAAC,qBAAqB,EAAE,MAAM,CACrF;IAAA,GAAG,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 secondary: 'This is secondary text',\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 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 onNodeToggle={id => {\n const clickedNode = treeHelpers.getNode(allNodes, 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"]}
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: 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' \| 'selectableParents'>> = (\n args: Pick<StandardTreeProps, 'lined' \| 'selectableParents'>\n) => {\n const [currentNodeId, setCurrentNodeId] = useState<string \| undefined>();\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 secondary: 'This is secondary text',\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 href: !args.selectableParents && isParent ? undefined : `#${id}`\n };\n });\n };\n\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, e) => {\n e.preventDefault();\n setCurrentNodeId(id);\n }}\n onNodeToggle={id => {\n const clickedNode = treeHelpers.getNode(allNodes, 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 selectableParents={args.selectableParents}\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 selectableParents: true\n};\n\nStandardTreeDemo.argTypes = {\n lined: { control: { type: 'boolean' } },\n selectableParents: { control: { type: 'boolean' } }\n};\n"]}

package/jsx/core/URL/URL.stories.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Meta, Story } from '@storybook/react';
 import { URLDisplayProps } from '@pega/cosmos-react-core';
-declare const _default: Meta<import("@storybook/react").Args>;
+declare const _default: Meta;
 export default _default;
 export declare const URLDisplayDemo: Story<URLDisplayProps>;
 //# sourceMappingURL=URL.stories.d.ts.map

package/jsx/core/URL/URL.stories.jsx CHANGED Viewed

@@ -12,6 +12,6 @@ URLDisplayDemo.args = {
 URLDisplayDemo.argTypes = {
     value: { control: { type: 'text' } },
     displayText: { control: { type: 'text' } },
-    variant: { options: ['link', 'text'], control: { type: 'select' } }
+    variant: { options: ['link', 'text', 'qrcode'], control: { type: 'select' } }
 };
 //# sourceMappingURL=URL.stories.jsx.map

package/jsx/core/URL/URL.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"URL.stories.jsx","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,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,EAAG,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"]}
1	+ {"version":3,"file":"URL.stories.jsx","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,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,EAAG,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,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC9E,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', 'qrcode'], control: { type: 'select' } }\n};\n"]}

package/jsx/cs/Article/Article.mocks.js CHANGED Viewed

@@ -1,11 +1,11 @@
 export const ArticleMockData = {
     fullArticleContent: {
-        header: '5 Tips for handling a Difficult customer',
-        abstract: '5 Tips for handling a Difficult customer. This will give you clear guidelines to deal with a customer',
-        content: "<p>Changing your monthly billing cycle can help you better manage your monthly bills and when you pay them.  U+Comm offers 3 main billing cycles with due dates falling on the 1st, 15th, or the 28th of each month.  This provides our customers with flexibility when choosing a billing cycle and corresponding due date that matches your personal finance planning.If you change an existing bill cycle, there will generally be a number of days prorated to compensate from the gap from the end of the previous bill cycle to when the new bill cycle is started.  This proration will be included in your next (new) billing cycle statement, and will cause an increase in that month’s payment due.  But rest assured, you’re not being charged ‘extra’, but paying for the days that were between the old and new billing cycle dates.</p><br/><div>Find more details from this article <a data-article-id='5' href='#'>How to sell a product</a></div><br/><div>Find some suggestions from this article <a data-article-id='8' href='#'>How to convince a customer</a></div><br/><div><b>Before you change your billing cycle, be aware that:</b> </div><br/><ul><li>Your billing cycle can't be changed if your account is in a delinquent status, or if the account will fall delinquent before the requested change date.</li><li>If you have a payment arrangement set up, the payment arrangement must be made before the billing cycle is changed.</li><li>If you have AutoPay, you may see two AutoPay drafts in one month due to the billing cycle change.</li><li>When a billing cycle change is made, prorated charges will occur.</li><li>Your billing cycle can't be changed if your account is in a delinquent status, or if the account will fall delinquent before the requested change date.</li><li>If you have a payment arrangement set up, the payment arrangement must be made before the billing cycle is changed.</li><li>If you have AutoPay, you may see two AutoPay drafts in one month due to the billing cycle change.</li><li>When a billing cycle change is made, prorated charges will occur.</li></ul><br/><p>If you change an existing bill cycle, there will generally be a number of days prorated to compensate from the gap from the end of the previous bill cycle to when the new bill cycle is started.  This proration will be included in your next (new) billing cycle statement, and will cause an increase in that month’s payment due.  But rest assured, you’re not being charged ‘extra’, but paying for the days that were between the old and new billing cycle dates.</p>",
+        header: 'How to change monthly billing cycle',
+        abstract: 'How to change monthly billing cycle. This will give you clear guidelines to change billing cycle',
+        content: "<p>Changing your monthly billing cycle can help you better manage your monthly bills and when you pay them.  U+Comm offers 3 main billing cycles with due dates falling on the 1st, 15th, or the 28th of each month.  This provides our customers with flexibility when choosing a billing cycle and corresponding due date that matches your personal finance planning.If you change an existing bill cycle, there will generally be a number of days prorated to compensate from the gap from the end of the previous bill cycle to when the new bill cycle is started.  This proration will be included in your next (new) billing cycle statement, and will cause an increase in that month’s payment due.  But rest assured, you’re not being charged ‘extra’, but paying for the days that were between the old and new billing cycle dates.</p><div>Find more details from this article <a data-article-id='5' href='#'>How to sell a product</a></div><div>Find some suggestions from this article <a data-article-id='8' href='#'>How to convince a customer</a></div><div><b>Before you change your billing cycle, be aware that:</b> </div><ul><li>Your billing cycle can't be changed if your account is in a delinquent status, or if the account will fall delinquent before the requested change date.</li><li>If you have a payment arrangement set up, the payment arrangement must be made before the billing cycle is changed.</li><li>If you have AutoPay, you may see two AutoPay drafts in one month due to the billing cycle change.</li><li>When a billing cycle change is made, prorated charges will occur.</li><li>Your billing cycle can't be changed if your account is in a delinquent status, or if the account will fall delinquent before the requested change date.</li><li>If you have a payment arrangement set up, the payment arrangement must be made before the billing cycle is changed.</li><li>If you have AutoPay, you may see two AutoPay drafts in one month due to the billing cycle change.</li><li>When a billing cycle change is made, prorated charges will occur.</li></ul><p>If you change an existing bill cycle, there will generally be a number of days prorated to compensate from the gap from the end of the previous bill cycle to when the new bill cycle is started.  This proration will be included in your next (new) billing cycle statement, and will cause an increase in that month’s payment due.  But rest assured, you’re not being charged ‘extra’, but paying for the days that were between the old and new billing cycle dates.</p>",
         meta: {
             category: 'Banking and Retail',
-            publishedDate: '12/12/2019',
+            publishedDate: '2023-04-06',
             likes: 124,
             disLikes: 47
         }

package/jsx/cs/Article/Article.mocks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Article.mocks.js","sourceRoot":"","sources":["../../../src/cs/Article/Article.mocks.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,kBAAkB,EAAE;QAClB,MAAM,EAAE,~~0CAA0C~~;~~QAClD~~,QAAQ,EACN,~~uGAAuG~~;~~QACzG~~,OAAO,EACL,~~2+EAA2+E~~;~~QAC7+E~~,IAAI,EAAE;YACJ,QAAQ,EAAE,oBAAoB;YAC9B,aAAa,EAAE,YAAY;YAC3B,KAAK,EAAE,GAAG;YACV,QAAQ,EAAE,EAAE;SACb;KACF;CACF,CAAC","sourcesContent":["export const ArticleMockData = {\n fullArticleContent: {\n header: '5 ~~Tips~~ ~~for~~ ~~handling~~ a ~~Difficult customer~~',\n abstract:\n '5 ~~Tips~~ ~~for~~ ~~handling~~ a ~~Difficult customer~~. This will give you clear guidelines to ~~deal~~ ~~with~~ ~~a customer~~',\n content:\n \"<p>Changing your monthly billing cycle can help you better manage your monthly bills and when you pay them. U+Comm offers 3 main billing cycles with due dates falling on the 1st, 15th, or the 28th of each month. This provides our customers with flexibility when choosing a billing cycle and corresponding due date that matches your personal finance planning.If you change an existing bill cycle, there will generally be a number of days prorated to compensate from the gap from the end of the previous bill cycle to when the new bill cycle is started. This proration will be included in your next (new) billing cycle statement, and will cause an increase in that month’s payment due. But rest assured, you’re not being charged ‘extra’, but paying for the days that were between the old and new billing cycle dates.</p><~~br/><~~div>Find more details from this article <a data-article-id='5' href='#'>How to sell a product</a></div><~~br/><~~div>Find some suggestions from this article <a data-article-id='8' href='#'>How to convince a customer</a></div><~~br/><~~div><b>Before you change your billing cycle, be aware that:</b> </div><~~br/><~~ul><li>Your billing cycle can't be changed if your account is in a delinquent status, or if the account will fall delinquent before the requested change date.</li><li>If you have a payment arrangement set up, the payment arrangement must be made before the billing cycle is changed.</li><li>If you have AutoPay, you may see two AutoPay drafts in one month due to the billing cycle change.</li><li>When a billing cycle change is made, prorated charges will occur.</li><li>Your billing cycle can't be changed if your account is in a delinquent status, or if the account will fall delinquent before the requested change date.</li><li>If you have a payment arrangement set up, the payment arrangement must be made before the billing cycle is changed.</li><li>If you have AutoPay, you may see two AutoPay drafts in one month due to the billing cycle change.</li><li>When a billing cycle change is made, prorated charges will occur.</li></ul><~~br/><~~p>If you change an existing bill cycle, there will generally be a number of days prorated to compensate from the gap from the end of the previous bill cycle to when the new bill cycle is started. This proration will be included in your next (new) billing cycle statement, and will cause an increase in that month’s payment due. But rest assured, you’re not being charged ‘extra’, but paying for the days that were between the old and new billing cycle dates.</p>\",\n meta: {\n category: 'Banking and Retail',\n publishedDate: '~~12/12/2019~~',\n likes: 124,\n disLikes: 47\n }\n }\n};\n"]}
1	+ {"version":3,"file":"Article.mocks.js","sourceRoot":"","sources":["../../../src/cs/Article/Article.mocks.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,kBAAkB,EAAE;QAClB,MAAM,EAAE,qCAAqC;QAC7C,QAAQ,EACN,kGAAkG;QACpG,OAAO,EACL,k9EAAk9E;QACp9E,IAAI,EAAE;YACJ,QAAQ,EAAE,oBAAoB;YAC9B,aAAa,EAAE,YAAY;YAC3B,KAAK,EAAE,GAAG;YACV,QAAQ,EAAE,EAAE;SACb;KACF;CACF,CAAC","sourcesContent":["export const ArticleMockData = {\n fullArticleContent: {\n header: 'How to change monthly billing cycle',\n abstract:\n 'How to change monthly billing cycle. This will give you clear guidelines to change billing cycle',\n content:\n \"<p>Changing your monthly billing cycle can help you better manage your monthly bills and when you pay them. U+Comm offers 3 main billing cycles with due dates falling on the 1st, 15th, or the 28th of each month. This provides our customers with flexibility when choosing a billing cycle and corresponding due date that matches your personal finance planning.If you change an existing bill cycle, there will generally be a number of days prorated to compensate from the gap from the end of the previous bill cycle to when the new bill cycle is started. This proration will be included in your next (new) billing cycle statement, and will cause an increase in that month’s payment due. But rest assured, you’re not being charged ‘extra’, but paying for the days that were between the old and new billing cycle dates.</p><div>Find more details from this article <a data-article-id='5' href='#'>How to sell a product</a></div><div>Find some suggestions from this article <a data-article-id='8' href='#'>How to convince a customer</a></div><div><b>Before you change your billing cycle, be aware that:</b> </div><ul><li>Your billing cycle can't be changed if your account is in a delinquent status, or if the account will fall delinquent before the requested change date.</li><li>If you have a payment arrangement set up, the payment arrangement must be made before the billing cycle is changed.</li><li>If you have AutoPay, you may see two AutoPay drafts in one month due to the billing cycle change.</li><li>When a billing cycle change is made, prorated charges will occur.</li><li>Your billing cycle can't be changed if your account is in a delinquent status, or if the account will fall delinquent before the requested change date.</li><li>If you have a payment arrangement set up, the payment arrangement must be made before the billing cycle is changed.</li><li>If you have AutoPay, you may see two AutoPay drafts in one month due to the billing cycle change.</li><li>When a billing cycle change is made, prorated charges will occur.</li></ul><p>If you change an existing bill cycle, there will generally be a number of days prorated to compensate from the gap from the end of the previous bill cycle to when the new bill cycle is started. This proration will be included in your next (new) billing cycle statement, and will cause an increase in that month’s payment due. But rest assured, you’re not being charged ‘extra’, but paying for the days that were between the old and new billing cycle dates.</p>\",\n meta: {\n category: 'Banking and Retail',\n publishedDate: '2023-04-06',\n likes: 124,\n disLikes: 47\n }\n }\n};\n"]}