@pega/cosmos-react-demos 2.0.0 → 2.1.3

package/lib/core/Table/Table.mocks.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const tableData = [
+    {
+        id: '1234',
+        name: 'Jane Smith',
+        dob: '12/31/1990',
+        address: 'Boston, MA',
+        email: 'jsmith@email.com',
+        emailVerified: true,
+        balance: '$2,200'
+    },
+    {
+        id: '5678',
+        name: 'Joe Smith',
+        dob: '01/01/1980',
+        address: '',
+        email: 'joe.smith@email.com',
+        emailVerified: true,
+        balance: '$1,350'
+    },
+    {
+        id: '0000',
+        name: 'Mary Lou',
+        dob: '06/15/1985',
+        address: (_jsxs(_Fragment, { children: [_jsx("div", { children: "100 Main St." }, void 0), _jsx("div", { children: "Springfield, USA" }, void 0)] }, void 0)),
+        email: '',
+        balance: '-$175'
+    }
+];
+//# sourceMappingURL=Table.mocks.js.map

package/lib/core/Table/Table.mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.mocks.js","sourceRoot":"","sources":["../../../src/core/Table/Table.mocks.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB;QACE,EAAE,EAAE,MAAM;QACV,IAAI,EAAE,YAAY;QAClB,GAAG,EAAE,YAAY;QACjB,OAAO,EAAE,YAAY;QACrB,KAAK,EAAE,kBAAkB;QACzB,aAAa,EAAE,IAAI;QACnB,OAAO,EAAE,QAAQ;KAClB;IACD;QACE,EAAE,EAAE,MAAM;QACV,IAAI,EAAE,WAAW;QACjB,GAAG,EAAE,YAAY;QACjB,OAAO,EAAE,EAAE;QACX,KAAK,EAAE,qBAAqB;QAC5B,aAAa,EAAE,IAAI;QACnB,OAAO,EAAE,QAAQ;KAClB;IACD;QACE,EAAE,EAAE,MAAM;QACV,IAAI,EAAE,UAAU;QAChB,GAAG,EAAE,YAAY;QACjB,OAAO,EAAE,CACP,8BACE,iDAAuB,EACvB,qDAA2B,YAC1B,CACJ;QACD,KAAK,EAAE,EAAE;QACT,OAAO,EAAE,OAAO;KACjB;CACF,CAAC","sourcesContent":["export const tableData = [\n  {\n    id: '1234',\n    name: 'Jane Smith',\n    dob: '12/31/1990',\n    address: 'Boston, MA',\n    email: 'jsmith@email.com',\n    emailVerified: true,\n    balance: '$2,200'\n  },\n  {\n    id: '5678',\n    name: 'Joe Smith',\n    dob: '01/01/1980',\n    address: '',\n    email: 'joe.smith@email.com',\n    emailVerified: true,\n    balance: '$1,350'\n  },\n  {\n    id: '0000',\n    name: 'Mary Lou',\n    dob: '06/15/1985',\n    address: (\n      <>\n        <div>100 Main St.</div>\n        <div>Springfield, USA</div>\n      </>\n    ),\n    email: '',\n    balance: '-$175'\n  }\n];\n"]}

package/lib/core/Table/Table.stories.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Status, Table } from '@pega/cosmos-react-core';
+import { tableData } from './Table.mocks';
+import { StyledBalance } from './Table.styles';
+export default {
+    title: 'Core/Table',
+    component: Table,
+    args: {
+        title: 'Accounts',
+        hoverHighlight: false,
+        loading: false,
+        loadingMessage: 'Loading data',
+        emptyTable: false
+    },
+    argTypes: {
+        title: { control: { type: 'text' } },
+        hoverHighlight: { control: { type: 'boolean' } },
+        loading: { control: { type: 'boolean' } },
+        loadingMessage: { control: { type: 'text' } },
+        emptyTable: { control: { type: 'boolean' } }
+    }
+};
+export const TableDemo = (args) => {
+    const columns = [
+        { renderer: 'name', label: 'Name' },
+        { renderer: 'dob', label: 'Date of Birth' },
+        { renderer: 'address', label: 'Address' },
+        { renderer: 'email', label: 'Email' },
+        { renderer: 'balance', label: 'Account Balance', align: 'right' }
+    ];
+    return (_jsx(Table, { title: args.title, hoverHighlight: args.hoverHighlight, loading: args.loading, loadingMessage: args.loadingMessage, data: args.emptyTable ? [] : tableData, columns: columns }, void 0));
+};
+export const StyledTableDemo = (args) => {
+    const columns = [
+        { renderer: data => _jsx("b", { children: data.name }, void 0), label: 'Name' },
+        { renderer: 'dob', label: 'Date of Birth' },
+        { renderer: 'address', label: 'Address' },
+        {
+            renderer: data => {
+                return (_jsxs(_Fragment, { children: [data.email && data.emailVerified && _jsx(Status, { variant: 'success', children: data.email }, void 0), data.email && !data.emailVerified && _jsx(Status, { variant: 'urgent', children: data.email }, void 0)] }, void 0));
+            },
+            label: 'Email'
+        },
+        {
+            renderer: data => {
+                return (_jsx(StyledBalance, { negativeBalance: data.balance.startsWith('-'), children: data.balance }, void 0));
+            },
+            label: 'Account Balance',
+            align: 'right'
+        }
+    ];
+    return (_jsx(Table, { title: args.title, hoverHighlight: args.hoverHighlight, loading: args.loading, loadingMessage: args.loadingMessage, data: args.emptyTable ? [] : tableData, columns: columns }, void 0));
+};
+//# sourceMappingURL=Table.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.stories.js","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 } 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  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"]}

package/lib/core/Tabs/Tabs.stories.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Flex, TabPanel, Tabs } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Tabs',
+    component: Tabs,
+    args: {
+        type: 'horizontal'
+    },
+    argTypes: {
+        type: { options: ['horizontal', 'vertical'], control: { type: 'select' } }
+    }
+};
+export const TabsDemo = (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 (_jsxs(Flex, { container: { direction: args.type === 'horizontal' ? 'column' : 'row' }, children: [_jsx(Flex, { item: { grow: 1 }, children: _jsx(Tabs, { tabs: tabs, type: args.type, onTabClick: handleTabChange, currentTabId: panelShown }, void 0) }, void 0), _jsx(Flex, { container: { pad: [1, 2] }, item: { grow: 1 }, children: tabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: panelShown, children: _jsxs("div", { children: [tab.name, " content"] }, void 0) }, tab.id))) }, void 0)] }, void 0));
+};
+export const TabsCountDemo = (args) => {
+    const [panelShown, changePanel] = useState('1');
+    const handleTabChange = (id) => {
+        changePanel(id);
+    };
+    const tabs = [
+        { name: 'Tab 1', id: '1', count: 5 },
+        { name: 'Tab 2', id: '2', count: 14 },
+        { name: 'Tab 3', id: '3', count: 0 },
+        { name: 'Tab 4', id: '4', count: 56, disabled: true },
+        { name: 'Tab 5', id: '5', count: 150 }
+    ];
+    return (_jsxs(Flex, { container: { direction: args.type === 'horizontal' ? 'column' : 'row' }, children: [_jsx(Flex, { item: { grow: 1 }, children: _jsx(Tabs, { tabs: tabs, type: args.type, onTabClick: handleTabChange, currentTabId: panelShown }, void 0) }, void 0), _jsx(Flex, { container: { pad: [1, 2] }, item: { grow: 1 }, children: tabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: panelShown, children: _jsxs("div", { children: [tab.name, " content"] }, void 0) }, tab.id))) }, void 0)] }, void 0));
+};
+//# sourceMappingURL=Tabs.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.stories.js","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, 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"]}

package/lib/core/Text/Text.stories.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Text',
+    component: Text
+};
+export const TextDemo = (args) => {
+    return (_jsx(Text, { variant: args.variant, status: args.status, children: "Pega Cosmos" }, void 0));
+};
+TextDemo.args = {
+    variant: 'primary',
+    status: undefined
+};
+TextDemo.argTypes = {
+    variant: {
+        options: ['primary', 'secondary', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+        control: { type: 'select' }
+    },
+    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } }
+};
+//# sourceMappingURL=Text.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Text.stories.js","sourceRoot":"","sources":["../../../src/core/Text/Text.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAa,MAAM,yBAAyB,CAAC;AAE1D,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;CACR,CAAC;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAqB,CAAC,IAAe,EAAE,EAAE;IAC5D,OAAO,CACL,KAAC,IAAI,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,oCAEzC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,IAAI,GAAG;IACd,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,SAAS;CAClB,CAAC;AAEF,QAAQ,CAAC,QAAQ,GAAG;IAClB,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;QACrE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC7F,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Text, TextProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Text',\n  component: Text\n} as Meta;\n\nexport const TextDemo: Story<TextProps> = (args: TextProps) => {\n  return (\n    <Text variant={args.variant} status={args.status}>\n      Pega Cosmos\n    </Text>\n  );\n};\n\nTextDemo.args = {\n  variant: 'primary',\n  status: undefined\n};\n\nTextDemo.argTypes = {\n  variant: {\n    options: ['primary', 'secondary', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n    control: { type: 'select' }\n  },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } }\n};\n"]}

package/lib/core/TextArea/TextArea.stories.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { TextArea } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Textarea',
+    component: TextArea
+};
+export const TextAreaDemo = (args) => {
+    const [value, setValue] = useState('');
+    return (_jsx(TextArea, { id: 'text-area', value: value, onChange: (e) => setValue(e.target.value), minLength: args.minLength, maxLength: args.maxLength, displayCharCount: args.displayCharCount, hardStop: args.hardStop, resizable: args.resizable, autoResize: args.autoResize, label: args.label, labelHidden: args.labelHidden, info: args.info, placeholder: args.placeholder, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly }, void 0));
+};
+TextAreaDemo.args = {
+    minLength: 0,
+    maxLength: 300,
+    displayCharCount: false,
+    hardStop: true,
+    resizable: false,
+    autoResize: false,
+    label: 'Text Area',
+    labelHidden: false,
+    info: 'Enter a large amount of text',
+    placeholder: 'Tell us a story…',
+    status: undefined,
+    required: false,
+    disabled: false,
+    readOnly: false
+};
+TextAreaDemo.argTypes = {
+    minLength: { control: { type: 'number' } },
+    maxLength: { control: { type: 'number' } },
+    displayCharCount: { control: { type: 'boolean' } },
+    hardStop: { control: { type: 'boolean' } },
+    resizable: { control: { type: 'boolean' } },
+    autoResize: { control: { type: 'boolean' } },
+    label: { control: { type: 'text' } },
+    labelHidden: { control: { type: 'boolean' } },
+    info: { control: { type: 'text' } },
+    placeholder: { control: { type: 'text' } },
+    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+    required: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    readOnly: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=TextArea.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.stories.js","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 { TextArea, TextAreaProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Textarea',\n  component: TextArea\n} as Meta;\n\nexport const TextAreaDemo: Story<TextAreaProps> = (args: TextAreaProps) => {\n  const [value, setValue] = useState('');\n\n  return (\n    <TextArea\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};\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};\n"]}

package/lib/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;AAKV,eAAO,MAAM,WAAW,mBAkBvB,CAAC"}
+{"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.stories.js","sourceRoot":"","sources":["../../../src/core/Toaster/Toaster.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE1E,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,OAAO;CACX,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B;;;;;;OAMG;IAEH,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAC5C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEtC,MAAM,QAAQ,GAAG;QACf,+BAA+B;QAC/B,sIAAsI;KACvI,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;QAC3B,IAAI,CAAC;YACH,OAAO,EAAE,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC;SAC7B,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,KAAC,MAAM,IAAC,OAAO,EAAE,WAAW,wCAA0B,CAAC;AAChE,CAAC,CAAC","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useContext, useState } from 'react';\n\nimport { Button, Toaster, ToasterContext } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Toaster',\n  component: Toaster\n} as Meta;\n\nexport const ToasterDemo = () => {\n  /*\n   * The <Toaster> component should be wrapped around the entire portion of an application that utilizes it.\n   * For most apps that is once near the root of the app's React tree.\n   * Descendant components can utilize the Toaster's push context method via a useContext hook, as demonstrated here.\n   * This story component represents an component rendered somewhere in an app's tree.\n   * Note, a Toaster provider is already rendered at the root of the Cosmos Storybook, allowing for the use of context here.\n   */\n\n  const { push } = useContext(ToasterContext);\n  const [count, setCount] = useState(0);\n\n  const messages = [\n    'Thi 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"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.stories.js","sourceRoot":"","sources":["../../../src/core/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAEtE,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,OAAO;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,UAAU,EAAE,CAAC;IAEjC,OAAO,CACL,8BACE,KAAC,MAAM,IAAC,GAAG,EAAE,KAAK,iCAAmB,EAEpC,EAAE,IAAI,CACL,KAAC,OAAO,IAAC,MAAM,EAAE,EAAE,gRAIT,CACX,YACA,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Button, Tooltip, useElement } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Tooltip',\n  component: Tooltip\n};\n\nexport const TooltipDemo = () => {\n  const [el, setEl] = useElement();\n\n  return (\n    <>\n      <Button ref={setEl}>Hover me</Button>\n\n      {el && (\n        <Tooltip target={el}>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus scelerisque\n          viverra. Fusce consequat, justo at laoreet lobortis, mauris ipsum aliquet arcu, non\n          convallis nisl elit id erat. Pellentesque posuere sagittis velit a molestie.\n        </Tooltip>\n      )}\n    </>\n  );\n};\n"]}

package/lib/core/Tree/Tree.mocks.js

@@ -3,6 +3,7 @@ export const themeToTree = (themeNode, parentPath) => {
     Object.entries(themeNode).forEach(([childKey, childValue]) => {
         const id = parentPath ? `${parentPath}.${childKey}` : childKey;
         const label = childKey;
+        // Is a leaf
         if (childValue.$type) {
             dataArray.push({
                 id,
@@ -10,6 +11,7 @@ export const themeToTree = (themeNode, parentPath) => {
                 data: { ...childValue }
             });
         }
+        // Is a parent
         else {
             const nodes = themeToTree(childValue, id);
             dataArray.push({ id, label, nodes });

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

@@ -1 +1 @@
-{"version":3,"file":"Tree.mocks.js","sourceRoot":"","sources":["../../../src/core/Tree/Tree.mocks.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,SAAiB,EAAE,UAAmB,EAAE,EAAE;IACpE,MAAM,SAAS,GAAuB,EAAE,CAAC;IACzC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,UAAU,CAAC,EAAE,EAAE;QAC3D,MAAM,EAAE,GAAG,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,IAAI,QAAQ,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;QAC/D,MAAM,KAAK,GAAG,QAAQ,CAAC;QAGvB,IAAI,UAAU,CAAC,KAAK,EAAE;YACpB,SAAS,CAAC,IAAI,CAAC;gBACb,EAAE;gBACF,KAAK;gBACL,IAAI,EAAE,EAAE,GAAG,UAAU,EAAE;aACxB,CAAC,CAAC;SACJ;aAEI;YACH,MAAM,KAAK,GAAuB,WAAW,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;YAC9D,SAAS,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;SACtC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC","sourcesContent":["import { TreeProps } from '@pega/cosmos-react-core';\n\nexport const themeToTree = (themeNode: object, parentPath?: string) => {\n  const dataArray: TreeProps['nodes'] = [];\n  Object.entries(themeNode).forEach(([childKey, childValue]) => {\n    const id = parentPath ? `${parentPath}.${childKey}` : childKey;\n    const label = childKey;\n\n    // Is a leaf\n    if (childValue.$type) {\n      dataArray.push({\n        id,\n        label,\n        data: { ...childValue }\n      });\n    }\n    // Is a parent\n    else {\n      const nodes: TreeProps['nodes'] = themeToTree(childValue, id);\n      dataArray.push({ id, label, nodes });\n    }\n  });\n\n  return dataArray;\n};\n"]}
+{"version":3,"file":"Tree.mocks.js","sourceRoot":"","sources":["../../../src/core/Tree/Tree.mocks.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,SAAiB,EAAE,UAAmB,EAAE,EAAE;IACpE,MAAM,SAAS,GAAuB,EAAE,CAAC;IACzC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,UAAU,CAAC,EAAE,EAAE;QAC3D,MAAM,EAAE,GAAG,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,IAAI,QAAQ,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;QAC/D,MAAM,KAAK,GAAG,QAAQ,CAAC;QAEvB,YAAY;QACZ,IAAI,UAAU,CAAC,KAAK,EAAE;YACpB,SAAS,CAAC,IAAI,CAAC;gBACb,EAAE;gBACF,KAAK;gBACL,IAAI,EAAE,EAAE,GAAG,UAAU,EAAE;aACxB,CAAC,CAAC;SACJ;QACD,cAAc;aACT;YACH,MAAM,KAAK,GAAuB,WAAW,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;YAC9D,SAAS,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;SACtC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC","sourcesContent":["import { TreeProps } from '@pega/cosmos-react-core';\n\nexport const themeToTree = (themeNode: object, parentPath?: string) => {\n  const dataArray: TreeProps['nodes'] = [];\n  Object.entries(themeNode).forEach(([childKey, childValue]) => {\n    const id = parentPath ? `${parentPath}.${childKey}` : childKey;\n    const label = childKey;\n\n    // Is a leaf\n    if (childValue.$type) {\n      dataArray.push({\n        id,\n        label,\n        data: { ...childValue }\n      });\n    }\n    // Is a parent\n    else {\n      const nodes: TreeProps['nodes'] = themeToTree(childValue, id);\n      dataArray.push({ id, label, nodes });\n    }\n  });\n\n  return dataArray;\n};\n"]}

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

@@ -0,0 +1,85 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import { Button, StandardTree, Tree, treeHelpers, createUID, themeDefinition } from '@pega/cosmos-react-core';
+import { themeToTree } from './Tree.mocks';
+import { StyledBaseTree } from './Tree.styles';
+export default {
+    title: 'Core/Tree',
+    component: Tree
+};
+export const BaseTree = () => {
+    return (_jsx(StyledBaseTree, { nodes: themeToTree(themeDefinition), nodeRenderer: ({ id, subTree }) => {
+            return (_jsxs(_Fragment, { children: [_jsx("span", { children: id }, void 0), subTree] }, void 0));
+        } }, void 0));
+};
+export const StandardTreeDemo = ({ lined }) => {
+    const getMockNodes = ({ length = 5, parent = true } = {}) => {
+        return Array.from({ length }, (_, i) => {
+            const isParent = parent && i !== 2;
+            const id = createUID();
+            return {
+                id,
+                label: isParent ? 'Parent' : 'Leaf',
+                icon: isParent ? 'folder-solid' : 'document-solid',
+                nodes: isParent ? [] : undefined,
+                actions: [
+                    { id: 'star', text: 'Star', icon: 'star', onClick: action(`Star node: ${id}`) },
+                    { id: 'pin', text: 'Pin', icon: 'pin', onClick: action(`Pin node: ${id}`) }
+                ],
+                onClick: isParent
+                    ? undefined
+                    : nodeId => {
+                        action(`Action for node: ${nodeId}`)();
+                    }
+            };
+        });
+    };
+    const [currentNodeId, setCurrentNodeId] = useState();
+    const [allNodes, setAllNodes] = useState(() => {
+        return getMockNodes({ length: 10 });
+    });
+    const loadChildNodes = (id) => {
+        setTimeout(() => {
+            setAllNodes(tree => {
+                return treeHelpers.mapNode(tree, id, node => {
+                    return {
+                        ...node,
+                        loading: false,
+                        nodes: [...(node.nodes ?? []), ...getMockNodes()]
+                    };
+                });
+            });
+        }, 1000);
+    };
+    const expandTo = (id) => {
+        setAllNodes(tree => {
+            return treeHelpers.expandTo(tree, id);
+        });
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(StandardTree, { lined: lined, currentNodeId: currentNodeId, nodes: allNodes, onNodeClick: id => {
+                    const clickedNode = treeHelpers.getNode(allNodes, id);
+                    setCurrentNodeId(id);
+                    // If a leaf node, just set to current
+                    if (!clickedNode?.nodes)
+                        return;
+                    setAllNodes(tree => treeHelpers.mapNode(tree, id, node => {
+                        return {
+                            ...node,
+                            expanded: !node.expanded,
+                            loading: node.nodes?.length === 0
+                        };
+                    }));
+                    // If a parent node with children already loaded, we're done.
+                    if (clickedNode?.nodes?.length > 0)
+                        return;
+                    loadChildNodes(id);
+                } }, void 0), _jsx(Button, { onClick: () => expandTo(''), children: "Collapse All" }, void 0), _jsx(Button, { onClick: () => expandTo(currentNodeId || ''), children: "Expand to active item" }, void 0)] }, void 0));
+};
+StandardTreeDemo.args = {
+    lined: false
+};
+StandardTreeDemo.argTypes = {
+    lined: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=Tree.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tree.stories.js","sourceRoot":"","sources":["../../../src/core/Tree/Tree.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n  Button,\n  StandardTree,\n  StandardTreeProps,\n  Tree,\n  TreeNode,\n  treeHelpers,\n  createUID,\n  themeDefinition\n} from '@pega/cosmos-react-core';\n\nimport { themeToTree } from './Tree.mocks';\nimport { StyledBaseTree } from './Tree.styles';\n\nexport default {\n  title: 'Core/Tree',\n  component: Tree\n} as Meta;\n\nexport const BaseTree = () => {\n  return (\n    <StyledBaseTree\n      nodes={themeToTree(themeDefinition)}\n      nodeRenderer={({ id, subTree }) => {\n        return (\n          <>\n            <span>{id}</span>\n            {subTree}\n          </>\n        );\n      }}\n    />\n  );\n};\n\nexport const StandardTreeDemo: Story<Pick<StandardTreeProps, 'lined'>> = ({ lined }) => {\n  const getMockNodes = ({\n    length = 5,\n    parent = true\n  }: { length?: number; parent?: boolean } = {}): StandardTreeProps['nodes'] => {\n    return Array.from({ length }, (_, i) => {\n      const isParent = parent && i !== 2;\n      const id = createUID();\n      return {\n        id,\n        label: isParent ? 'Parent' : 'Leaf',\n        icon: isParent ? 'folder-solid' : 'document-solid',\n        nodes: isParent ? [] : undefined,\n        actions: [\n          { id: 'star', text: 'Star', icon: 'star', onClick: action(`Star node: ${id}`) },\n          { id: 'pin', text: 'Pin', icon: 'pin', onClick: action(`Pin node: ${id}`) }\n        ],\n        onClick: isParent\n          ? undefined\n          : nodeId => {\n              action(`Action for node: ${nodeId}`)();\n            }\n      };\n    });\n  };\n\n  const [currentNodeId, setCurrentNodeId] = useState<string | undefined>();\n  const [allNodes, setAllNodes] = useState<StandardTreeProps['nodes']>(() => {\n    return getMockNodes({ length: 10 });\n  });\n\n  const loadChildNodes = (id: string) => {\n    setTimeout(() => {\n      setAllNodes(tree => {\n        return treeHelpers.mapNode(tree, id, node => {\n          return {\n            ...node,\n            loading: false,\n            nodes: [...(node.nodes ?? []), ...getMockNodes()]\n          };\n        });\n      });\n    }, 1000);\n  };\n\n  const expandTo = (id: TreeNode['id']) => {\n    setAllNodes(tree => {\n      return treeHelpers.expandTo(tree, id);\n    });\n  };\n\n  return (\n    <>\n      <StandardTree\n        lined={lined}\n        currentNodeId={currentNodeId}\n        nodes={allNodes}\n        onNodeClick={id => {\n          const clickedNode = treeHelpers.getNode(allNodes, id);\n          setCurrentNodeId(id);\n          // If a leaf node, just set to current\n          if (!clickedNode?.nodes) return;\n\n          setAllNodes(tree =>\n            treeHelpers.mapNode(tree, id, node => {\n              return {\n                ...node,\n                expanded: !node.expanded,\n                loading: node.nodes?.length === 0\n              };\n            })\n          );\n\n          // If a parent node with children already loaded, we're done.\n          if (clickedNode?.nodes?.length > 0) return;\n\n          loadChildNodes(id);\n        }}\n      />\n      <Button onClick={() => expandTo('')}>Collapse All</Button>\n      <Button onClick={() => expandTo(currentNodeId || '')}>Expand to active item</Button>\n    </>\n  );\n};\n\nStandardTreeDemo.args = {\n  lined: false\n};\n\nStandardTreeDemo.argTypes = {\n  lined: { control: { type: 'boolean' } }\n};\n"]}

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { URLDisplay } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/URL',
+    component: URLDisplay
+};
+export const URLDisplayDemo = (args) => (_jsx(URLDisplay, { value: args.value, displayText: args.displayText, variant: args.variant }, void 0));
+URLDisplayDemo.args = {
+    value: 'https://www.google.com/',
+    displayText: 'Example URL',
+    variant: 'link'
+};
+URLDisplayDemo.argTypes = {
+    value: { control: { type: 'text' } },
+    displayText: { control: { type: 'text' } },
+    variant: { options: ['link', 'text'], control: { type: 'select' } }
+};
+//# sourceMappingURL=URL.stories.js.map

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

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

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

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

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

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