@pega/cosmos-react-demos 2.0.0 → 2.1.3

package/lib/core/PageTemplates/PageTemplates.stories.js

@@ -0,0 +1,226 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { Banner, Button, CategorySubPage, ComboBox, DashboardPage, TabbedPage, OneColumnPage, TwoColumnPage, ThreeColumnPage, FourColumnPage, WideNarrowPage, NarrowWidePage, WideWideNarrowPage, NarrowWideWidePage, NarrowWideNarrowPage, icons, menuHelpers, createUID } from '@pega/cosmos-react-core';
+import { FeedDemo } from '@pega/cosmos-react-demos/lib/social/Feed/Feed.stories';
+import { TasksDemo } from '@pega/cosmos-react-demos/lib/work/Tasks/Tasks.stories';
+import { MockSummaryList } from '@pega/cosmos-react-demos/lib/work/CaseView/CaseView.mocks';
+import { AppShellDemo } from '@pega/cosmos-react-demos/lib/core/AppShell/AppShell.stories';
+import { StyledStoryPage } from './PageTemplates.styles';
+import { getPath } from './PageTemplates.mocks';
+export default {
+    title: 'Core/PageTemplates',
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export const PageTemplatesDemo = (args) => {
+    const [currentTabId, setCurrentTabId] = useState('1');
+    const actions = args.showActions && (_jsxs(_Fragment, { children: [_jsx(Button, { children: "Page action 1" }, void 0), _jsx(Button, { children: "Page action 2" }, void 0)] }, void 0));
+    const banners = args.showBanners && (_jsx(Banner, { id: 'warning-banner', variant: 'warning', messages: ['This is a warning banner. You have been warned!'] }, void 0));
+    const pageTemplateProps = {
+        scrollContent: args.scrollContent,
+        title: args.title || 'Demo page',
+        icon: args.showIcon ? args.icon : undefined,
+        actions,
+        banners,
+        path: getPath(args.showBreadcrumbs, args.pathData),
+        as: args.template !== 'demo page' ? StyledStoryPage : undefined
+    };
+    let page;
+    switch (args.template) {
+        case 'demo page':
+            page = (_jsx(TwoColumnPage, { a: _jsx(FeedDemo, {}, void 0), b: _jsxs(_Fragment, { children: [_jsx(TasksDemo, {}, void 0), _jsx(MockSummaryList, { name: 'My team', limit: 10, actions: null }, void 0)] }, void 0), ...pageTemplateProps }, void 0));
+            break;
+        case 'one column':
+            page = _jsx(OneColumnPage, { a: 'a', ...pageTemplateProps }, void 0);
+            break;
+        case 'two column':
+            page = _jsx(TwoColumnPage, { a: 'a', b: 'b', ...pageTemplateProps }, void 0);
+            break;
+        case 'three column':
+            page = _jsx(ThreeColumnPage, { a: 'a', b: 'b', c: 'c', ...pageTemplateProps }, void 0);
+            break;
+        case 'four column':
+            page = _jsx(FourColumnPage, { a: 'a', b: 'b', c: 'c', d: 'd', ...pageTemplateProps }, void 0);
+            break;
+        case 'wide narrow':
+            page = _jsx(WideNarrowPage, { a: 'a', b: 'b', ...pageTemplateProps }, void 0);
+            break;
+        case 'narrow wide':
+            page = _jsx(NarrowWidePage, { a: 'a', b: 'b', ...pageTemplateProps }, void 0);
+            break;
+        case 'wide wide narrow':
+            page = _jsx(WideWideNarrowPage, { a: 'a', b: 'b', c: 'c', ...pageTemplateProps }, void 0);
+            break;
+        case 'narrow wide wide':
+            page = _jsx(NarrowWideWidePage, { a: 'a', b: 'b', c: 'c', ...pageTemplateProps }, void 0);
+            break;
+        case 'narrow wide narrow':
+            page = _jsx(NarrowWideNarrowPage, { a: 'a', b: 'b', c: 'c', ...pageTemplateProps }, void 0);
+            break;
+        case 'tabbed':
+        default:
+            page = (_jsx(TabbedPage, { a: `Content for: Tab ${currentTabId}`, tabs: {
+                    tabs: Array.from({ length: 5 }, (_, i) => {
+                        return {
+                            id: `${i + 1}`,
+                            name: `Tab ${i + 1}`
+                        };
+                    }),
+                    type: 'horizontal',
+                    currentTabId,
+                    onTabClick: setCurrentTabId
+                }, ...pageTemplateProps }, void 0));
+            break;
+    }
+    return _jsx(AppShellDemo, { main: page, appHeader: true }, void 0);
+};
+PageTemplatesDemo.args = {
+    template: 'demo page',
+    scrollContent: false,
+    title: 'Demo page',
+    icon: 'home-solid',
+    showIcon: true,
+    showBreadcrumbs: true,
+    pathData: 'Page 1,Page2,Page 3,Page 4,Page 5',
+    showActions: true,
+    showBanners: false
+};
+PageTemplatesDemo.argTypes = {
+    template: {
+        options: [
+            'demo page',
+            'one column',
+            'two column',
+            'three column',
+            'four column',
+            'wide narrow',
+            'narrow wide',
+            'wide wide narrow',
+            'narrow wide wide',
+            'narrow wide narrow',
+            'tabbed'
+        ],
+        control: { type: 'select' }
+    },
+    scrollContent: { control: { type: 'boolean' } },
+    title: { control: { type: 'text' } },
+    icon: { options: icons, control: { type: 'select', icons: true } },
+    showIcon: { control: { type: 'boolean' } },
+    showBreadcrumbs: { control: { type: 'boolean' } },
+    pathData: { control: { type: 'text' } },
+    showActions: { control: { type: 'boolean' } },
+    showBanners: { control: { type: 'boolean' } }
+};
+export const DashboardPageDemo = (args) => {
+    const FilterComboBox = () => {
+        const [filterSearchValue, setFilterSearchValue] = useState('');
+        const [filterOptions, setFilterOptions] = useState(() => Array.from({ length: 10 }, (_, i) => ({
+            id: createUID(),
+            primary: `Filter ${i + 1}`,
+            selected: false
+        })));
+        const selected = useMemo(() => {
+            return menuHelpers
+                .getSelected(filterOptions)
+                .map(item => ({ text: item.primary, id: item.id }));
+        }, [filterOptions]);
+        const toggleItem = (id) => {
+            setFilterOptions(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));
+        };
+        return (_jsx(ComboBox, { mode: 'multi-select', label: 'Filters', placeholder: 'Choose filters', value: filterSearchValue, onChange: e => {
+                setFilterSearchValue(e.target.value);
+            }, selected: { items: selected, onRemove: toggleItem }, menu: {
+                items: filterSearchValue
+                    ? menuHelpers
+                        .flatten(filterOptions)
+                        .filter(({ primary }) => primary.includes(filterSearchValue))
+                    : filterOptions,
+                emptyText: 'No filters',
+                onItemClick: toggleItem
+            } }, void 0));
+    };
+    const filterControls = Array.from({ length: args.numberOfFilters || 3 }, (_, i) => (_jsx(FilterComboBox, {}, i)));
+    return (_jsx(AppShellDemo, { main: _jsx(DashboardPage, { a: 'a', b: 'b', c: 'c', path: getPath(), filters: filterControls, filterPosition: args.filterPosition, fitToViewport: true, title: args.title || 'Dashboard', as: StyledStoryPage }, void 0), appHeader: true }, void 0));
+};
+DashboardPageDemo.args = {
+    title: 'Dashboard',
+    filterPosition: 'block-start',
+    numberOfFilters: 3
+};
+DashboardPageDemo.argTypes = {
+    title: { control: { type: 'text' } },
+    filterPosition: {
+        options: ['block-start', 'inline-start', 'inline-end'],
+        control: { type: 'select' }
+    },
+    numberOfFilters: { control: { type: 'number' } }
+};
+export const CategorySubPageDemo = (args) => {
+    const [activeItem, setActiveItem] = useState('Profile');
+    const mockNavLinks = (itemTextArray) => {
+        return itemTextArray.map(itemText => {
+            return {
+                text: itemText,
+                active: itemText === activeItem,
+                href: '#',
+                onClick: (event) => setActiveItem(event.target.textContent || '')
+            };
+        });
+    };
+    return (_jsx(AppShellDemo, { main: _jsx(CategorySubPage, { viewLoading: args.viewLoading, category: args.category || 'Administration', categoryIcon: args.showIcon ? args.categoryIcon : undefined, navItemGroups: [
+                {
+                    title: 'General',
+                    items: useMemo(() => mockNavLinks(['Configurations', 'Profile', 'Authentication', 'Connections']), [activeItem])
+                },
+                {
+                    title: 'Second Group',
+                    items: useMemo(() => mockNavLinks(['Option 1', 'Option 2']), [activeItem])
+                },
+                {
+                    items: useMemo(() => mockNavLinks(['All configurations']), [activeItem])
+                },
+                {
+                    items: useMemo(() => mockNavLinks(['Visually Grouped SubPage A', 'Visually Grouped SubPage B']), [activeItem])
+                },
+                {
+                    items: [
+                        {
+                            text: 'Button Item'
+                        }
+                    ]
+                }
+            ], pageTitle: activeItem, maxActions: args.maxActions, pageActions: [
+                {
+                    id: 'saveChanges',
+                    text: 'Save'
+                },
+                {
+                    id: 'cancelChanges',
+                    text: 'Cancel'
+                },
+                {
+                    id: 'goToRule',
+                    text: 'Go to Rule'
+                },
+                {
+                    id: 'viewInClipboard',
+                    text: 'View in Clipboard'
+                }
+            ], region: _jsx(StyledStoryPage, { secondary: true, children: _jsx("div", { style: { minHeight: '150vh' } }, void 0) }, void 0) }, void 0), appHeader: true }, void 0));
+};
+CategorySubPageDemo.args = {
+    category: 'Administration',
+    categoryIcon: 'gear-solid',
+    showIcon: true,
+    viewLoading: false,
+    maxActions: 3
+};
+CategorySubPageDemo.argTypes = {
+    category: { control: { type: 'text' } },
+    categoryIcon: { options: icons, control: { type: 'select', icons: true } },
+    showIcon: { control: { type: 'boolean' } },
+    viewLoading: { control: { type: 'boolean' } },
+    maxActions: { control: { type: 'number' } }
+};
+//# sourceMappingURL=PageTemplates.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageTemplates.stories.js","sourceRoot":"","sources":["../../../src/core/PageTemplates/PageTemplates.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useMemo, MouseEvent } from 'react';\n\nimport {\n  Banner,\n  Button,\n  CategorySubPage,\n  ComboBox,\n  DashboardPage,\n  DashboardPageLayoutProps,\n  TabbedPage,\n  OneColumnPage,\n  TwoColumnPage,\n  ThreeColumnPage,\n  FourColumnPage,\n  WideNarrowPage,\n  NarrowWidePage,\n  WideWideNarrowPage,\n  NarrowWideWidePage,\n  NarrowWideNarrowPage,\n  PageTemplateProps,\n  icons,\n  menuHelpers,\n  MenuItemProps,\n  MenuProps,\n  TemplateProps,\n  createUID\n} from '@pega/cosmos-react-core';\nimport { FeedDemo } from '@pega/cosmos-react-demos/lib/social/Feed/Feed.stories';\nimport { TasksDemo } from '@pega/cosmos-react-demos/lib/work/Tasks/Tasks.stories';\nimport { MockSummaryList } from '@pega/cosmos-react-demos/lib/work/CaseView/CaseView.mocks';\nimport { AppShellDemo } from '@pega/cosmos-react-demos/lib/core/AppShell/AppShell.stories';\n\nimport { StyledStoryPage } from './PageTemplates.styles';\nimport { getPath } from './PageTemplates.mocks';\n\nexport default {\n  title: 'Core/PageTemplates',\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface PageTemplatesStoryProps {\n  template?:\n    | 'demo page'\n    | 'one column'\n    | 'two column'\n    | 'three column'\n    | 'four column'\n    | 'wide narrow'\n    | 'narrow wide'\n    | 'wide wide narrow'\n    | 'narrow wide wide'\n    | 'narrow wide narrow'\n    | 'tabbed';\n  title?: PageTemplateProps['title'];\n  icon?: PageTemplateProps['icon'];\n  scrollContent?: PageTemplateProps['scrollContent'];\n  showIcon?: boolean;\n  showBreadcrumbs?: boolean;\n  pathData?: string;\n  showActions?: boolean;\n  showBanners?: boolean;\n}\n\nexport const PageTemplatesDemo: Story<PageTemplatesStoryProps> = (\n  args: PageTemplatesStoryProps\n) => {\n  const [currentTabId, setCurrentTabId] = useState('1');\n\n  const actions: PageTemplateProps['actions'] = args.showActions && (\n    <>\n      <Button>Page action 1</Button>\n      <Button>Page action 2</Button>\n    </>\n  );\n\n  const banners: PageTemplateProps['banners'] = args.showBanners && (\n    <Banner\n      id='warning-banner'\n      variant='warning'\n      messages={['This is a warning banner. You have been warned!']}\n    />\n  );\n\n  const pageTemplateProps = {\n    scrollContent: args.scrollContent,\n    title: args.title || 'Demo page',\n    icon: args.showIcon ? args.icon : undefined,\n    actions,\n    banners,\n    path: getPath(args.showBreadcrumbs, args.pathData),\n    as: args.template !== 'demo page' ? StyledStoryPage : undefined\n  };\n\n  let page;\n\n  switch (args.template) {\n    case 'demo page':\n      page = (\n        <TwoColumnPage\n          a={<FeedDemo />}\n          b={\n            <>\n              <TasksDemo />\n              <MockSummaryList name='My team' limit={10} actions={null} />\n            </>\n          }\n          {...pageTemplateProps}\n        />\n      );\n      break;\n    case 'one column':\n      page = <OneColumnPage a='a' {...pageTemplateProps} />;\n      break;\n    case 'two column':\n      page = <TwoColumnPage a='a' b='b' {...pageTemplateProps} />;\n      break;\n    case 'three column':\n      page = <ThreeColumnPage a='a' b='b' c='c' {...pageTemplateProps} />;\n      break;\n    case 'four column':\n      page = <FourColumnPage a='a' b='b' c='c' d='d' {...pageTemplateProps} />;\n      break;\n    case 'wide narrow':\n      page = <WideNarrowPage a='a' b='b' {...pageTemplateProps} />;\n      break;\n    case 'narrow wide':\n      page = <NarrowWidePage a='a' b='b' {...pageTemplateProps} />;\n      break;\n    case 'wide wide narrow':\n      page = <WideWideNarrowPage a='a' b='b' c='c' {...pageTemplateProps} />;\n      break;\n    case 'narrow wide wide':\n      page = <NarrowWideWidePage a='a' b='b' c='c' {...pageTemplateProps} />;\n      break;\n    case 'narrow wide narrow':\n      page = <NarrowWideNarrowPage a='a' b='b' c='c' {...pageTemplateProps} />;\n      break;\n    case 'tabbed':\n    default:\n      page = (\n        <TabbedPage\n          a={`Content for: Tab ${currentTabId}`}\n          tabs={{\n            tabs: Array.from({ length: 5 }, (_, i) => {\n              return {\n                id: `${i + 1}`,\n                name: `Tab ${i + 1}`\n              };\n            }),\n            type: 'horizontal',\n            currentTabId,\n            onTabClick: setCurrentTabId\n          }}\n          {...pageTemplateProps}\n        />\n      );\n      break;\n  }\n\n  return <AppShellDemo main={page} appHeader />;\n};\n\nPageTemplatesDemo.args = {\n  template: 'demo page',\n  scrollContent: false,\n  title: 'Demo page',\n  icon: 'home-solid',\n  showIcon: true,\n  showBreadcrumbs: true,\n  pathData: 'Page 1,Page2,Page 3,Page 4,Page 5',\n  showActions: true,\n  showBanners: false\n};\n\nPageTemplatesDemo.argTypes = {\n  template: {\n    options: [\n      'demo page',\n      'one column',\n      'two column',\n      'three column',\n      'four column',\n      'wide narrow',\n      'narrow wide',\n      'wide wide narrow',\n      'narrow wide wide',\n      'narrow wide narrow',\n      'tabbed'\n    ],\n    control: { type: 'select' }\n  },\n  scrollContent: { control: { type: 'boolean' } },\n  title: { control: { type: 'text' } },\n  icon: { options: icons, control: { type: 'select', icons: true } },\n  showIcon: { control: { type: 'boolean' } },\n  showBreadcrumbs: { control: { type: 'boolean' } },\n  pathData: { control: { type: 'text' } },\n  showActions: { control: { type: 'boolean' } },\n  showBanners: { control: { type: 'boolean' } }\n};\n\ninterface DashboardPageStoryProps {\n  title?: DashboardPageLayoutProps['title'];\n  filterPosition?: DashboardPageLayoutProps['filterPosition'];\n  numberOfFilters?: number;\n}\n\nexport const DashboardPageDemo: Story<DashboardPageStoryProps> = (\n  args: DashboardPageStoryProps\n) => {\n  const FilterComboBox = () => {\n    const [filterSearchValue, setFilterSearchValue] = useState('');\n    const [filterOptions, setFilterOptions] = useState<MenuProps['items']>(() =>\n      Array.from({ length: 10 }, (_, i) => ({\n        id: createUID(),\n        primary: `Filter ${i + 1}`,\n        selected: false\n      }))\n    );\n\n    const selected = useMemo(() => {\n      return menuHelpers\n        .getSelected(filterOptions)\n        .map(item => ({ text: item.primary, id: item.id }));\n    }, [filterOptions]);\n\n    const toggleItem = (id: MenuItemProps['id']) => {\n      setFilterOptions(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));\n    };\n\n    return (\n      <ComboBox\n        mode='multi-select'\n        label='Filters'\n        placeholder='Choose filters'\n        value={filterSearchValue}\n        onChange={e => {\n          setFilterSearchValue(e.target.value);\n        }}\n        selected={{ items: selected, onRemove: toggleItem }}\n        menu={{\n          items: filterSearchValue\n            ? menuHelpers\n                .flatten(filterOptions)\n                .filter(({ primary }) => primary.includes(filterSearchValue))\n            : filterOptions,\n          emptyText: 'No filters',\n          onItemClick: toggleItem\n        }}\n      />\n    );\n  };\n\n  const filterControls = Array.from({ length: args.numberOfFilters || 3 }, (_, i) => (\n    <FilterComboBox key={i} />\n  ));\n\n  return (\n    <AppShellDemo\n      main={\n        <DashboardPage\n          a='a'\n          b='b'\n          c='c'\n          path={getPath()}\n          filters={filterControls}\n          filterPosition={args.filterPosition}\n          fitToViewport\n          title={args.title || 'Dashboard'}\n          as={StyledStoryPage}\n        />\n      }\n      appHeader\n    />\n  );\n};\n\nDashboardPageDemo.args = {\n  title: 'Dashboard',\n  filterPosition: 'block-start',\n  numberOfFilters: 3\n};\n\nDashboardPageDemo.argTypes = {\n  title: { control: { type: 'text' } },\n  filterPosition: {\n    options: ['block-start', 'inline-start', 'inline-end'],\n    control: { type: 'select' }\n  },\n  numberOfFilters: { control: { type: 'number' } }\n};\n\ninterface CategorySubPageStoryProps {\n  category?: TemplateProps['category'];\n  categoryIcon?: TemplateProps['categoryIcon'];\n  showIcon?: boolean;\n  viewLoading?: TemplateProps['viewLoading'];\n  maxActions?: TemplateProps['maxActions'];\n}\n\nexport const CategorySubPageDemo: Story<CategorySubPageStoryProps> = (\n  args: CategorySubPageStoryProps\n) => {\n  const [activeItem, setActiveItem] = useState('Profile');\n\n  const mockNavLinks = (itemTextArray: string[]) => {\n    return itemTextArray.map(itemText => {\n      return {\n        text: itemText,\n        active: itemText === activeItem,\n        href: '#',\n        onClick: (event: MouseEvent) => setActiveItem((event.target as Element).textContent || '')\n      };\n    });\n  };\n\n  return (\n    <AppShellDemo\n      main={\n        <CategorySubPage\n          viewLoading={args.viewLoading}\n          category={args.category || 'Administration'}\n          categoryIcon={args.showIcon ? args.categoryIcon : undefined}\n          navItemGroups={[\n            {\n              title: 'General',\n              items: useMemo(\n                () => mockNavLinks(['Configurations', 'Profile', 'Authentication', 'Connections']),\n                [activeItem]\n              )\n            },\n            {\n              title: 'Second Group',\n              items: useMemo(() => mockNavLinks(['Option 1', 'Option 2']), [activeItem])\n            },\n            {\n              items: useMemo(() => mockNavLinks(['All configurations']), [activeItem])\n            },\n            {\n              items: useMemo(\n                () => mockNavLinks(['Visually Grouped SubPage A', 'Visually Grouped SubPage B']),\n                [activeItem]\n              )\n            },\n            {\n              items: [\n                {\n                  text: 'Button Item'\n                }\n              ]\n            }\n          ]}\n          pageTitle={activeItem}\n          maxActions={args.maxActions}\n          pageActions={[\n            {\n              id: 'saveChanges',\n              text: 'Save'\n            },\n            {\n              id: 'cancelChanges',\n              text: 'Cancel'\n            },\n            {\n              id: 'goToRule',\n              text: 'Go to Rule'\n            },\n            {\n              id: 'viewInClipboard',\n              text: 'View in Clipboard'\n            }\n          ]}\n          region={\n            <StyledStoryPage secondary>\n              <div style={{ minHeight: '150vh' }} />\n            </StyledStoryPage>\n          }\n        />\n      }\n      appHeader\n    />\n  );\n};\n\nCategorySubPageDemo.args = {\n  category: 'Administration',\n  categoryIcon: 'gear-solid',\n  showIcon: true,\n  viewLoading: false,\n  maxActions: 3\n};\n\nCategorySubPageDemo.argTypes = {\n  category: { control: { type: 'text' } },\n  categoryIcon: { options: icons, control: { type: 'select', icons: true } },\n  showIcon: { control: { type: 'boolean' } },\n  viewLoading: { control: { type: 'boolean' } },\n  maxActions: { control: { type: 'number' } }\n};\n"]}

package/lib/core/Pagination/Pagination.stories.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Pagination } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Pagination',
+    component: Pagination
+};
+export const PaginationDemo = (args) => {
+    const [currentPage, setCurrentPage] = useState(1);
+    return (_jsx(Pagination, { total: args.total, pageSize: args.pageSize, pageNumber: currentPage, onPageChange: pageNumber => setCurrentPage(pageNumber) }, void 0));
+};
+PaginationDemo.args = {
+    total: 50,
+    pageSize: 10
+};
+PaginationDemo.argTypes = {
+    total: { control: { type: 'number' } },
+    pageSize: { control: { type: 'number' } }
+};
+//# sourceMappingURL=Pagination.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.stories.js","sourceRoot":"","sources":["../../../src/core/Pagination/Pagination.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AAEtE,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,UAAU;CACd,CAAC;AAEV,MAAM,CAAC,MAAM,cAAc,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAC9E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAElD,OAAO,CACL,KAAC,UAAU,IACT,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,WAAW,EACvB,YAAY,EAAE,UAAU,CAAC,EAAE,CAAC,cAAc,CAAC,UAAU,CAAC,WACtD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,EAAE;CACb,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC1C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Pagination, PaginationProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Pagination',\n  component: Pagination\n} as Meta;\n\nexport const PaginationDemo: Story<PaginationProps> = (args: PaginationProps) => {\n  const [currentPage, setCurrentPage] = useState(1);\n\n  return (\n    <Pagination\n      total={args.total}\n      pageSize={args.pageSize}\n      pageNumber={currentPage}\n      onPageChange={pageNumber => setCurrentPage(pageNumber)}\n    />\n  );\n};\n\nPaginationDemo.args = {\n  total: 50,\n  pageSize: 10\n};\n\nPaginationDemo.argTypes = {\n  total: { control: { type: 'number' } },\n  pageSize: { control: { type: 'number' } }\n};\n"]}

package/lib/core/Paragraph/ParagraphDisplay.stories.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ParagraphDisplay } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Paragraph',
+    component: ParagraphDisplay
+};
+export const ParagraphDisplayDemo = (args) => {
+    return _jsx(ParagraphDisplay, { value: args.value }, void 0);
+};
+ParagraphDisplayDemo.args = {
+    value: "Here's a string with\na new line in it."
+};
+ParagraphDisplayDemo.argTypes = {
+    value: { control: { type: 'text', multiLine: true } }
+};
+//# sourceMappingURL=ParagraphDisplay.stories.js.map

package/lib/core/Paragraph/ParagraphDisplay.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParagraphDisplay.stories.js","sourceRoot":"","sources":["../../../src/core/Paragraph/ParagraphDisplay.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,gBAAgB,EAAyB,MAAM,yBAAyB,CAAC;AAElF,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;CACpB,CAAC;AAEV,MAAM,CAAC,MAAM,oBAAoB,GAAiC,CAAC,IAA2B,EAAE,EAAE;IAChG,OAAO,KAAC,gBAAgB,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,WAAI,CAAC;AACjD,CAAC,CAAC;AAEF,oBAAoB,CAAC,IAAI,GAAG;IAC1B,KAAK,EAAE,yCAAyC;CACjD,CAAC;AAEF,oBAAoB,CAAC,QAAQ,GAAG;IAC9B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE;CACtD,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { ParagraphDisplay, ParagraphDisplayProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Paragraph',\n  component: ParagraphDisplay\n} as Meta;\n\nexport const ParagraphDisplayDemo: Story<ParagraphDisplayProps> = (args: ParagraphDisplayProps) => {\n  return <ParagraphDisplay value={args.value} />;\n};\n\nParagraphDisplayDemo.args = {\n  value: \"Here's a string with\\na new line in it.\"\n};\n\nParagraphDisplayDemo.argTypes = {\n  value: { control: { type: 'text', multiLine: true } }\n};\n"]}

package/lib/core/Phone/Phone.stories.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PhoneDisplay, PhoneInput } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Phone',
+    component: PhoneInput
+};
+export const PhoneInputDemo = (args) => {
+    return (_jsx(PhoneInput, { showCountryCode: args.showCountryCode, label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly }, void 0));
+};
+PhoneInputDemo.args = {
+    showCountryCode: true,
+    label: 'Phone input',
+    labelHidden: false,
+    info: 'Enter a phone number',
+    status: undefined,
+    required: false,
+    disabled: false,
+    readOnly: false
+};
+PhoneInputDemo.argTypes = {
+    showCountryCode: { control: { type: 'boolean' } },
+    label: { control: { type: 'text' } },
+    labelHidden: { control: { type: 'boolean' } },
+    info: { control: { type: 'text' } },
+    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+    required: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    readOnly: { control: { type: 'boolean' } }
+};
+export const PhoneDisplayDemo = (args) => {
+    return _jsx(PhoneDisplay, { value: args.value, displayText: args.displayText, variant: args.variant }, void 0);
+};
+PhoneDisplayDemo.args = {
+    value: '(123) 456-7890',
+    displayText: 'Example Phone',
+    variant: 'link'
+};
+PhoneDisplayDemo.argTypes = {
+    value: { control: { type: 'text' } },
+    displayText: { control: { type: 'text' } },
+    variant: { options: ['link', 'text'], control: { type: 'select' } }
+};
+//# sourceMappingURL=Phone.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Phone.stories.js","sourceRoot":"","sources":["../../../src/core/Phone/Phone.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,YAAY,EAEZ,UAAU,EAEX,MAAM,yBAAyB,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,UAAU;CACd,CAAC;AAEV,MAAM,CAAC,MAAM,cAAc,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAC9E,OAAO,CACL,KAAC,UAAU,IACT,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,WACvB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,eAAe,EAAE,IAAI;IACrB,KAAK,EAAE,aAAa;IACpB,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,sBAAsB;IAC5B,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACjD,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC5F,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC3C,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAA6B,CAAC,IAAuB,EAAE,EAAE;IACpF,OAAO,KAAC,YAAY,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,WAAI,CAAC;AACnG,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,KAAK,EAAE,gBAAgB;IACvB,WAAW,EAAE,eAAe;IAC5B,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,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 {\n  PhoneDisplay,\n  PhoneDisplayProps,\n  PhoneInput,\n  PhoneInputProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Phone',\n  component: PhoneInput\n} as Meta;\n\nexport const PhoneInputDemo: Story<PhoneInputProps> = (args: PhoneInputProps) => {\n  return (\n    <PhoneInput\n      showCountryCode={args.showCountryCode}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nPhoneInputDemo.args = {\n  showCountryCode: true,\n  label: 'Phone input',\n  labelHidden: false,\n  info: 'Enter a phone number',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nPhoneInputDemo.argTypes = {\n  showCountryCode: { control: { type: 'boolean' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { 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\nexport const PhoneDisplayDemo: Story<PhoneDisplayProps> = (args: PhoneDisplayProps) => {\n  return <PhoneDisplay value={args.value} displayText={args.displayText} variant={args.variant} />;\n};\n\nPhoneDisplayDemo.args = {\n  value: '(123) 456-7890',\n  displayText: 'Example Phone',\n  variant: 'link'\n};\n\nPhoneDisplayDemo.argTypes = {\n  value: { control: { type: 'text' } },\n  displayText: { control: { type: 'text' } },\n  variant: { options: ['link', 'text'], control: { type: 'select' } }\n};\n"]}

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

@@ -2,7 +2,6 @@ import { Meta, Story } from '@storybook/react';
 import { PopoverProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const HoverPopover: Story<PopoverProps>;
-export declare const ClickPopover: Story<PopoverProps>;
+export declare const PopoverDemo: Story<PopoverProps>;
 export declare const PopoverGroups: Story;
 //# sourceMappingURL=Popover.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Popover/Popover.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAOL,YAAY,EAIb,MAAM,yBAAyB,CAAC;;AAEjC,wBAkCU;AAEV,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,YAAY,CA2C5C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,YAAY,CA0C5C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAmF3B,CAAC"}
+{"version":3,"file":"Popover.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Popover/Popover.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAOL,YAAY,EAIb,MAAM,yBAAyB,CAAC;;AAEjC,wBAkCU;AAEV,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,YAAY,CAoF3C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAmF3B,CAAC"}

package/lib/core/Popover/Popover.stories.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, Card, CardContent, Flex, Link, Popover, Text, Tooltip, useElement } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Popover',
+    component: Popover,
+    args: {
+        arrow: false,
+        showDelay: 'none',
+        hideDelay: 'none',
+        placement: 'bottom'
+    },
+    argTypes: {
+        arrow: { control: { type: 'boolean' } },
+        showDelay: { options: ['none', 'short', 'long'], control: { type: 'select' } },
+        hideDelay: { options: ['none', 'short', 'long'], control: { type: 'select' } },
+        placement: {
+            options: [
+                'bottom',
+                'bottom-start',
+                'bottom-end',
+                'top',
+                'top-start',
+                'top-end',
+                'left',
+                'left-start',
+                'left-end',
+                'right',
+                'right-start',
+                'right-end',
+                'auto',
+                'auto-start',
+                'auto-end'
+            ],
+            control: { type: 'select' }
+        }
+    }
+};
+export const PopoverDemo = (args) => {
+    const [mountHoverPopover, setMountHoverPopover] = useState(false);
+    const setHoverPopoverEl = useElement()[1];
+    const [textEl, setTextEl] = useElement();
+    const [mountClickPopover, setMountClickPopover] = useState(false);
+    const setClickPopoverEl = useElement()[1];
+    const [buttonEl, setButtonEl] = useElement();
+    const toggleHoverPopover = ({ type, key }) => {
+        if (type === 'keydown') {
+            if (key === 'Escape')
+                setMountHoverPopover(false);
+            return;
+        }
+        setMountHoverPopover(type === 'mouseover' || type === 'focus');
+    };
+    const hoverMountingHandlers = {
+        onMouseOver: toggleHoverPopover,
+        onMouseOut: toggleHoverPopover,
+        onKeyDown: toggleHoverPopover,
+        onFocus: toggleHoverPopover,
+        onBlur: toggleHoverPopover
+    };
+    const toggleClickPopover = ({ type, key }) => {
+        if (type === 'keydown') {
+            if (key === 'Escape')
+                setMountClickPopover(false);
+            return;
+        }
+        setMountClickPopover(type === 'click' || type === 'focus');
+    };
+    const clickMountingHandlers = {
+        onClick: toggleClickPopover,
+        onKeyDown: toggleClickPopover,
+        onFocus: toggleClickPopover,
+        onBlur: toggleClickPopover
+    };
+    return (_jsxs(Flex, { container: { justify: 'center', pad: 4, gap: 4, alignItems: 'center' }, children: [_jsx(Text, { ref: setTextEl, variant: 'h1', ...hoverMountingHandlers, children: "Hover Over Me" }, void 0), _jsx(Popover, { ref: setHoverPopoverEl, show: mountHoverPopover, target: textEl, portal: true, arrow: args.arrow, showDelay: args.showDelay, hideDelay: args.hideDelay, placement: args.placement, ...hoverMountingHandlers, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { children: "This Popover appears on hover!" }, void 0) }, void 0) }, void 0) }, void 0), _jsx(Button, { ref: setButtonEl, ...clickMountingHandlers, children: "Click Me" }, void 0), _jsx(Popover, { ref: setClickPopoverEl, show: mountClickPopover, target: buttonEl, portal: true, arrow: args.arrow, showDelay: args.showDelay, hideDelay: args.hideDelay, placement: args.placement, ...clickMountingHandlers, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { children: "This Popover appears on click!" }, void 0) }, void 0) }, void 0) }, void 0)] }, void 0));
+};
+export const PopoverGroups = () => {
+    const [firstTooltipButton, setFirstTooltipButton] = useElement();
+    const [secondTooltipButton, setSecondTooltipButton] = useElement();
+    const [thirdTooltipButton, setThirdTooltipButton] = useElement();
+    const [firstPopoverButton, setFirstPopoverButton] = useElement();
+    const [secondPopoverButton, setSecondPopoverButton] = useElement();
+    const [thirdPopoverButton, setThirdPopoverButton] = useElement();
+    const [showFirstPopover, setShowFirstPopover] = useState(false);
+    const [showSecondPopover, setShowSecondPopover] = useState(false);
+    const [showThirdPopover, setShowThirdPopover] = useState(false);
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 4 }, children: [_jsx(Text, { variant: 'h2', children: "groupId: link_preview" }, void 0), _jsxs(Flex, { children: [_jsx(Link, { href: 'http://www.google.com', previewable: true, children: "Previewable Link" }, void 0), _jsx(Link, { href: 'http://www.google.com', previewable: true, children: "Previewable Link" }, void 0), _jsx(Link, { href: 'http://www.google.com', previewable: true, children: "Previewable Link" }, void 0)] }, void 0), _jsx(Text, { variant: 'h2', children: "groupId: tooltip" }, void 0), _jsxs(Flex, { children: [_jsx(Button, { ref: setFirstTooltipButton, "aria-describedby": 'first-tooltip', children: "Hover me" }, void 0), _jsx(Tooltip, { target: firstTooltipButton, id: 'first-tooltip', children: "This is a tooltip for the first button." }, void 0), _jsx(Button, { ref: setSecondTooltipButton, "aria-describedby": 'second-tooltip', children: "Hover me" }, void 0), _jsx(Tooltip, { target: secondTooltipButton, id: 'second-tooltip', children: "This is a tooltip for the second button." }, void 0), _jsx(Button, { ref: setThirdTooltipButton, "aria-describedby": 'third-tooltip', children: "Hover me" }, void 0), _jsx(Tooltip, { target: thirdTooltipButton, id: 'third-tooltip', children: "This is a tooltip for the third button." }, void 0)] }, void 0), _jsx(Text, { variant: 'h2', children: "No groupId" }, void 0), _jsxs(Flex, { children: [_jsx(Button, { ref: setFirstPopoverButton, onClick: () => setShowFirstPopover(curr => !curr), children: "Click me" }, void 0), _jsx(Popover, { show: showFirstPopover, target: firstPopoverButton, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { children: "Popover #1" }, void 0) }, void 0) }, void 0) }, void 0), _jsx(Button, { ref: setSecondPopoverButton, onClick: () => setShowSecondPopover(curr => !curr), children: "Click me" }, void 0), _jsx(Popover, { show: showSecondPopover, target: secondPopoverButton, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { children: "Popover #2" }, void 0) }, void 0) }, void 0) }, void 0), _jsx(Button, { ref: setThirdPopoverButton, onClick: () => setShowThirdPopover(curr => !curr), children: "Click me" }, void 0), _jsx(Popover, { show: showThirdPopover, target: thirdPopoverButton, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { children: "Popover #3" }, void 0) }, void 0) }, void 0) }, void 0)] }, void 0)] }, void 0));
+};
+PopoverGroups.argTypes = {
+    arrow: { table: { disable: true } },
+    showDelay: { table: { disable: true } },
+    hideDelay: { table: { disable: true } },
+    placement: { table: { disable: true } }
+};
+//# sourceMappingURL=Popover.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.stories.js","sourceRoot":"","sources":["../../../src/core/Popover/Popover.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  Flex,\n  Link,\n  Popover,\n  PopoverProps,\n  Text,\n  Tooltip,\n  useElement\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Popover',\n  component: Popover,\n  args: {\n    arrow: false,\n    showDelay: 'none',\n    hideDelay: 'none',\n    placement: 'bottom'\n  },\n  argTypes: {\n    arrow: { control: { type: 'boolean' } },\n    showDelay: { options: ['none', 'short', 'long'], control: { type: 'select' } },\n    hideDelay: { options: ['none', 'short', 'long'], control: { type: 'select' } },\n    placement: {\n      options: [\n        'bottom',\n        'bottom-start',\n        'bottom-end',\n        'top',\n        'top-start',\n        'top-end',\n        'left',\n        'left-start',\n        'left-end',\n        'right',\n        'right-start',\n        'right-end',\n        'auto',\n        'auto-start',\n        'auto-end'\n      ],\n      control: { type: 'select' }\n    }\n  }\n} as Meta;\n\nexport const PopoverDemo: Story<PopoverProps> = (args: PopoverProps) => {\n  const [mountHoverPopover, setMountHoverPopover] = useState(false);\n  const setHoverPopoverEl = useElement<HTMLDivElement>()[1];\n  const [textEl, setTextEl] = useElement<HTMLDivElement>();\n\n  const [mountClickPopover, setMountClickPopover] = useState(false);\n  const setClickPopoverEl = useElement<HTMLDivElement>()[1];\n  const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>();\n\n  const toggleHoverPopover = ({ type, key }: { type: string; key: string }) => {\n    if (type === 'keydown') {\n      if (key === 'Escape') setMountHoverPopover(false);\n      return;\n    }\n    setMountHoverPopover(type === 'mouseover' || type === 'focus');\n  };\n\n  const hoverMountingHandlers = {\n    onMouseOver: toggleHoverPopover,\n    onMouseOut: toggleHoverPopover,\n    onKeyDown: toggleHoverPopover,\n    onFocus: toggleHoverPopover,\n    onBlur: toggleHoverPopover\n  };\n\n  const toggleClickPopover = ({ type, key }: { type: string; key: string }) => {\n    if (type === 'keydown') {\n      if (key === 'Escape') setMountClickPopover(false);\n      return;\n    }\n    setMountClickPopover(type === 'click' || type === 'focus');\n  };\n\n  const clickMountingHandlers = {\n    onClick: toggleClickPopover,\n    onKeyDown: toggleClickPopover,\n    onFocus: toggleClickPopover,\n    onBlur: toggleClickPopover\n  };\n\n  return (\n    <Flex container={{ justify: 'center', pad: 4, gap: 4, alignItems: 'center' }}>\n      <Text ref={setTextEl} variant='h1' {...hoverMountingHandlers}>\n        Hover Over Me\n      </Text>\n      <Popover\n        ref={setHoverPopoverEl}\n        show={mountHoverPopover}\n        target={textEl}\n        portal\n        arrow={args.arrow}\n        showDelay={args.showDelay}\n        hideDelay={args.hideDelay}\n        placement={args.placement}\n        {...hoverMountingHandlers}\n      >\n        <Card>\n          <CardContent>\n            <Text>This Popover appears on hover!</Text>\n          </CardContent>\n        </Card>\n      </Popover>\n      <Button ref={setButtonEl} {...clickMountingHandlers}>\n        Click Me\n      </Button>\n      <Popover\n        ref={setClickPopoverEl}\n        show={mountClickPopover}\n        target={buttonEl}\n        portal\n        arrow={args.arrow}\n        showDelay={args.showDelay}\n        hideDelay={args.hideDelay}\n        placement={args.placement}\n        {...clickMountingHandlers}\n      >\n        <Card>\n          <CardContent>\n            <Text>This Popover appears on click!</Text>\n          </CardContent>\n        </Card>\n      </Popover>\n    </Flex>\n  );\n};\n\nexport const PopoverGroups: Story = () => {\n  const [firstTooltipButton, setFirstTooltipButton] = useElement<HTMLButtonElement>();\n  const [secondTooltipButton, setSecondTooltipButton] = useElement<HTMLButtonElement>();\n  const [thirdTooltipButton, setThirdTooltipButton] = useElement<HTMLButtonElement>();\n\n  const [firstPopoverButton, setFirstPopoverButton] = useElement<HTMLButtonElement>();\n  const [secondPopoverButton, setSecondPopoverButton] = useElement<HTMLButtonElement>();\n  const [thirdPopoverButton, setThirdPopoverButton] = useElement<HTMLButtonElement>();\n\n  const [showFirstPopover, setShowFirstPopover] = useState(false);\n  const [showSecondPopover, setShowSecondPopover] = useState(false);\n  const [showThirdPopover, setShowThirdPopover] = useState(false);\n\n  return (\n    <Flex container={{ direction: 'column', gap: 4 }}>\n      <Text variant='h2'>groupId: link_preview</Text>\n      <Flex>\n        <Link href='http://www.google.com' previewable>\n          Previewable Link\n        </Link>\n        <Link href='http://www.google.com' previewable>\n          Previewable Link\n        </Link>\n        <Link href='http://www.google.com' previewable>\n          Previewable Link\n        </Link>\n      </Flex>\n      <Text variant='h2'>groupId: tooltip</Text>\n      <Flex>\n        <Button ref={setFirstTooltipButton} aria-describedby='first-tooltip'>\n          Hover me\n        </Button>\n        <Tooltip target={firstTooltipButton} id='first-tooltip'>\n          This is a tooltip for the first button.\n        </Tooltip>\n        <Button ref={setSecondTooltipButton} aria-describedby='second-tooltip'>\n          Hover me\n        </Button>\n        <Tooltip target={secondTooltipButton} id='second-tooltip'>\n          This is a tooltip for the second button.\n        </Tooltip>\n        <Button ref={setThirdTooltipButton} aria-describedby='third-tooltip'>\n          Hover me\n        </Button>\n        <Tooltip target={thirdTooltipButton} id='third-tooltip'>\n          This is a tooltip for the third button.\n        </Tooltip>\n      </Flex>\n      <Text variant='h2'>No groupId</Text>\n      <Flex>\n        <Button ref={setFirstPopoverButton} onClick={() => setShowFirstPopover(curr => !curr)}>\n          Click me\n        </Button>\n        <Popover show={showFirstPopover} target={firstPopoverButton}>\n          <Card>\n            <CardContent>\n              <Text>Popover #1</Text>\n            </CardContent>\n          </Card>\n        </Popover>\n        <Button ref={setSecondPopoverButton} onClick={() => setShowSecondPopover(curr => !curr)}>\n          Click me\n        </Button>\n        <Popover show={showSecondPopover} target={secondPopoverButton}>\n          <Card>\n            <CardContent>\n              <Text>Popover #2</Text>\n            </CardContent>\n          </Card>\n        </Popover>\n        <Button ref={setThirdPopoverButton} onClick={() => setShowThirdPopover(curr => !curr)}>\n          Click me\n        </Button>\n        <Popover show={showThirdPopover} target={thirdPopoverButton}>\n          <Card>\n            <CardContent>\n              <Text>Popover #3</Text>\n            </CardContent>\n          </Card>\n        </Popover>\n      </Flex>\n    </Flex>\n  );\n};\n\nPopoverGroups.argTypes = {\n  arrow: { table: { disable: true } },\n  showDelay: { table: { disable: true } },\n  hideDelay: { table: { disable: true } },\n  placement: { table: { disable: true } }\n};\n"]}

package/lib/core/Progress/Progress.stories.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Button, Flex, Progress, Text } from '@pega/cosmos-react-core';
+import { StyledDemoWrap } from './Progress.styles';
+export default {
+    title: 'Core/Progress',
+    component: Progress,
+    args: {
+        variant: 'ring',
+        placement: 'local',
+        message: ''
+    },
+    argTypes: {
+        variant: { options: ['ring', 'bar', 'ellipsis'], control: { type: 'select' } },
+        placement: { options: ['local', 'global', 'inline'], control: { type: 'select' } },
+        message: { control: { type: 'text' } }
+    }
+};
+export const IndeterminateProgress = (args) => {
+    const [loading, setLoading] = useState(false);
+    const handleClick = () => {
+        setLoading(true);
+        setTimeout(() => {
+            setLoading(false);
+        }, 2000);
+    };
+    useEffect(() => {
+        if (args.placement === 'global') {
+            setLoading(false);
+        }
+        else {
+            setLoading(true);
+        }
+    }, [args.placement]);
+    return (_jsxs(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledDemoWrap, children: [args.placement === 'global' && _jsx(Button, { onClick: handleClick, children: "Start loading" }, void 0), args.placement === 'inline' && _jsx(Text, { children: "Progress demo" }, void 0), _jsx(Progress, { variant: args.variant, placement: args.placement, message: args.message, visible: loading }, void 0)] }, void 0));
+};
+IndeterminateProgress.args = {
+    message: 'Loading'
+};
+export const DeterminateProgress = (args) => {
+    const [loading, setLoading] = useState(false);
+    const handleClick = () => {
+        setLoading(true);
+        setTimeout(() => {
+            setLoading(false);
+        }, 2000);
+    };
+    useEffect(() => {
+        if (args.placement === 'global') {
+            setLoading(false);
+        }
+        else {
+            setLoading(true);
+        }
+    }, [args.placement]);
+    return (_jsxs(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledDemoWrap, children: [args.placement === 'global' && _jsx(Button, { onClick: handleClick, children: "Start loading" }, void 0), args.placement === 'inline' && _jsx(Text, { children: "Progress demo" }, void 0), _jsx(Progress, { value: args.value, variant: args.variant, placement: args.placement, message: args.message || `${args.value}%`, visible: loading }, void 0)] }, void 0));
+};
+DeterminateProgress.args = {
+    value: 67
+};
+DeterminateProgress.argTypes = {
+    value: { control: { type: 'number' } }
+};
+//# sourceMappingURL=Progress.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.stories.js","sourceRoot":"","sources":["../../../src/core/Progress/Progress.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport { Button, Flex, Progress, ProgressProps, Text } from '@pega/cosmos-react-core';\n\nimport { StyledDemoWrap } from './Progress.styles';\n\nexport default {\n  title: 'Core/Progress',\n  component: Progress,\n  args: {\n    variant: 'ring',\n    placement: 'local',\n    message: ''\n  },\n  argTypes: {\n    variant: { options: ['ring', 'bar', 'ellipsis'], control: { type: 'select' } },\n    placement: { options: ['local', 'global', 'inline'], control: { type: 'select' } },\n    message: { control: { type: 'text' } }\n  }\n} as Meta;\n\nexport const IndeterminateProgress: Story<ProgressProps> = (args: ProgressProps) => {\n  const [loading, setLoading] = useState(false);\n\n  const handleClick = () => {\n    setLoading(true);\n\n    setTimeout(() => {\n      setLoading(false);\n    }, 2000);\n  };\n\n  useEffect(() => {\n    if (args.placement === 'global') {\n      setLoading(false);\n    } else {\n      setLoading(true);\n    }\n  }, [args.placement]);\n\n  return (\n    <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>\n      {args.placement === 'global' && <Button onClick={handleClick}>Start loading</Button>}\n      {args.placement === 'inline' && <Text>Progress demo</Text>}\n      <Progress\n        variant={args.variant}\n        placement={args.placement}\n        message={args.message}\n        visible={loading}\n      />\n    </Flex>\n  );\n};\n\nIndeterminateProgress.args = {\n  message: 'Loading'\n};\n\nexport const DeterminateProgress: Story<ProgressProps> = (args: ProgressProps) => {\n  const [loading, setLoading] = useState(false);\n\n  const handleClick = () => {\n    setLoading(true);\n\n    setTimeout(() => {\n      setLoading(false);\n    }, 2000);\n  };\n\n  useEffect(() => {\n    if (args.placement === 'global') {\n      setLoading(false);\n    } else {\n      setLoading(true);\n    }\n  }, [args.placement]);\n\n  return (\n    <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>\n      {args.placement === 'global' && <Button onClick={handleClick}>Start loading</Button>}\n      {args.placement === 'inline' && <Text>Progress demo</Text>}\n      <Progress\n        value={args.value}\n        variant={args.variant}\n        placement={args.placement}\n        message={args.message || `${args.value}%`}\n        visible={loading}\n      />\n    </Flex>\n  );\n};\n\nDeterminateProgress.args = {\n  value: 67\n};\n\nDeterminateProgress.argTypes = {\n  value: { control: { type: 'number' } }\n};\n"]}