@pega/cosmos-react-demos 3.0.0-dev.4.0 → 3.0.0-dev.4.1

package/jsx/work/Timeline/Timeline.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.stories.jsx","sourceRoot":"","sources":["../../../src/work/Timeline/Timeline.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAE,QAAQ,EAAiB,MAAM,yBAAyB,CAAC;AAElE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;CACZ,CAAC;AAEV,MAAM,CAAC,MAAM,YAAY,GAAiE,CACxF,IAA2D,EAC3D,EAAE;IACF,MAAM,kBAAkB,GAAG,CAAC,CAAC;IAC7B,MAAM,iBAAiB,GAAG,CAAC,CAAC;IAE5B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAA4B,GAAG,EAAE,CACjE,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC,CACtC,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,IAAI,CAAC,OAAO,EAAE;YACZ,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,UAAU,CAAC,GAAG,EAAE;gBACd,UAAU,CAAC,KAAK,CAAC,CAAC;gBAElB,QAAQ,CAAC,SAAS,CAAC,EAAE;oBACnB,MAAM,mBAAmB,GAAG,SAAS,CAAC,MAAM,CAAC;oBAC7C,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAC7B,mBAAmB,EACnB,mBAAmB,GAAG,iBAAiB,CACxC,CAAC;oBAEF,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;wBACzB,UAAU,CAAC,KAAK,CAAC,CAAC;qBACnB;oBAED,OAAO,CAAC,GAAG,SAAS,EAAE,GAAG,QAAQ,CAAC,CAAC;gBACrC,CAAC,CAAC,CAAC;YACL,CAAC,EAAE,IAAI,CAAC,CAAC;SACV;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,CAAC,QAAQ,CACP,QAAQ,CAAC,CAAC,KAAK,CAAC,CAChB,WAAW,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CACxB,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,EACzC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,SAAS,EAAE,YAAY;IACvB,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,YAAY,CAAC,QAAQ,GAAG;IACtB,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAChF,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,CAAC;QAC7D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useCallback, useState } from 'react';\n\nimport { OmitStrict } from '@pega/cosmos-react-core';\nimport { Timeline, TimelineProps } from '@pega/cosmos-react-work';\n\nimport { activity } from './Timeline.mocks';\n\nexport default {\n  title: 'Work/Timeline',\n  component: Timeline\n} as Meta;\n\nexport const TimelineDemo: Story<OmitStrict<TimelineProps, 'activity' | 'currentTime'>> = (\n  args: OmitStrict<TimelineProps, 'activity' | 'currentTime'>\n) => {\n  const INITIAL_CHUNK_SIZE = 7;\n  const APPEND_CHUNK_SIZE = 3;\n\n  const [loading, setLoading] = useState(false);\n  const [hasMore, setHasMore] = useState(true);\n  const [items, setItems] = useState<TimelineProps['activity']>(() =>\n    activity.slice(0, INITIAL_CHUNK_SIZE)\n  );\n\n  const loadMore = useCallback(() => {\n    if (!loading) {\n      setLoading(true);\n      setTimeout(() => {\n        setLoading(false);\n\n        setItems(prevItems => {\n          const previousItemsLength = prevItems.length;\n          const newItems = activity.slice(\n            previousItemsLength,\n            previousItemsLength + APPEND_CHUNK_SIZE\n          );\n\n          if (newItems.length === 0) {\n            setHasMore(false);\n          }\n\n          return [...prevItems, ...newItems];\n        });\n      }, 2000);\n    }\n  }, [loading]);\n\n  return (\n    <Timeline\n      activity={items}\n      currentTime={new Date()}\n      sortOrder={args.sortOrder}\n      groupBy={args.groupBy}\n      loading={loading}\n      loadMore={hasMore ? loadMore : undefined}\n    />\n  );\n};\n\nTimelineDemo.args = {\n  sortOrder: 'descending',\n  groupBy: 'date'\n};\n\nTimelineDemo.argTypes = {\n  sortOrder: { options: ['ascending', 'descending'], control: { type: 'select' } },\n  groupBy: {\n    options: ['date', 'monthyear', 'quarteryear', 'year', 'none'],\n    control: { type: 'select' }\n  }\n};\n"]}
+{"version":3,"file":"Timeline.stories.jsx","sourceRoot":"","sources":["../../../src/work/Timeline/Timeline.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useCallback, useState } from 'react';\n\nimport { Card, CardContent, CardHeader, OmitStrict } from '@pega/cosmos-react-core';\nimport { Timeline, TimelineProps, TimelineToolbar } from '@pega/cosmos-react-work';\nimport {\n  TimelineGroupBy,\n  TimelineSortOrder\n} from '@pega/cosmos-react-work/lib/components/Timeline/Timeline.types';\n\nimport { activity } from './Timeline.mocks';\n\nexport default {\n  title: 'Work/Timeline',\n  component: Timeline\n} as Meta;\n\nexport const TimelineDemo: Story<OmitStrict<TimelineProps, 'activity' | 'currentTime'>> = (\n  args: OmitStrict<TimelineProps, 'activity' | 'currentTime'>\n) => {\n  const INITIAL_CHUNK_SIZE = 7;\n  const APPEND_CHUNK_SIZE = 3;\n\n  const [loading, setLoading] = useState(false);\n  const [hasMore, setHasMore] = useState(true);\n  const [items, setItems] = useState<TimelineProps['activity']>(() =>\n    activity.slice(0, INITIAL_CHUNK_SIZE)\n  );\n\n  const loadMore = useCallback(() => {\n    if (!loading) {\n      setLoading(true);\n      setTimeout(() => {\n        setLoading(false);\n\n        setItems(prevItems => {\n          const previousItemsLength = prevItems.length;\n          const newItems = activity.slice(\n            previousItemsLength,\n            previousItemsLength + APPEND_CHUNK_SIZE\n          );\n\n          if (newItems.length === 0) {\n            setHasMore(false);\n          }\n\n          return [...prevItems, ...newItems];\n        });\n      }, 2000);\n    }\n  }, [loading]);\n\n  return (\n    <Timeline\n      activity={items}\n      currentTime={new Date()}\n      sortOrder={args.sortOrder}\n      groupBy={args.groupBy}\n      loading={loading}\n      loadMore={hasMore ? loadMore : undefined}\n    />\n  );\n};\n\nTimelineDemo.args = {\n  sortOrder: 'descending',\n  groupBy: 'date'\n};\n\nTimelineDemo.argTypes = {\n  sortOrder: { options: ['ascending', 'descending'], control: { type: 'select' } },\n  groupBy: {\n    options: ['date', 'monthyear', 'quarteryear', 'year', 'none'],\n    control: { type: 'select' }\n  }\n};\n\nexport const TimelineToolbarDemo = () => {\n  const [sortOrder, setSortOrder] = useState<TimelineSortOrder>();\n  const [groupBy, setGroupBy] = useState<TimelineGroupBy>();\n  const [items, setItems] = useState<TimelineProps['activity']>(activity);\n\n  const onSearchSubmit = useCallback((value: string) => {\n    setItems(activity.filter(item => JSON.stringify(item.title).includes(value)));\n  }, []);\n\n  return (\n    <Card>\n      <CardHeader>\n        <TimelineToolbar\n          heading='Timeline Demo'\n          search={{ onSearchSubmit }}\n          count={{ total: items.length }}\n          sort={{\n            selected: sortOrder,\n            onItemClick: (id: TimelineProps['sortOrder']) => {\n              setSortOrder(id);\n            }\n          }}\n          group={{\n            selected: groupBy,\n            onItemClick: (id: TimelineProps['groupBy']) => {\n              setGroupBy(id);\n            }\n          }}\n        />\n      </CardHeader>\n      <CardContent>\n        <Timeline\n          activity={items}\n          currentTime={new Date()}\n          sortOrder={sortOrder}\n          groupBy={groupBy}\n        />\n      </CardContent>\n    </Card>\n  );\n};\n"]}

package/lib/core/FieldGroup/FieldGroupList.mocks.js

@@ -22,7 +22,7 @@ export const fieldGroupReducer = (groupMeta, FieldRenderer) => (items, payload)
 };
 export const DemoFieldRenderer = ({ label, type }) => {
     if (type === 'text') {
-        return _jsx(Input, { label: label }, void 0);
+        return _jsx(Input, { label: label }, label);
     }
     return null;
 };

package/lib/core/FieldGroup/FieldGroupList.mocks.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupList.mocks.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.mocks.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,SAAS,EAA2B,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAqBpF,MAAM,CAAC,MAAM,iBAAiB,GAC5B,CAAC,SAAoB,EAAE,aAAuD,EAAE,EAAE,CAClF,CACE,KAAgC,EAChC,OAAiC,EACN,EAAE;IAC7B,QAAQ,OAAO,CAAC,MAAM,EAAE;QACtB,KAAK,KAAK;YACR,OAAO;gBACL,GAAG,KAAK;gBACR;oBACE,IAAI,EAAE,GAAG,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;oBAC9C,EAAE,EAAE,SAAS,EAAE;oBACf,QAAQ,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,eAAC,aAAa,OAAK,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,KAAK,GAAI,CAAC;iBACxF;aACF,CAAC;QAEJ,KAAK,QAAQ;YACX,OAAO,KAAK;iBACT,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,CAAC;iBACxC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;QAE5E;YACE,OAAO,KAAK,CAAC;KAChB;AACH,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAa,EAAE,EAAE;IAC9D,IAAI,IAAI,KAAK,MAAM,EAAE;QACnB,OAAO,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,WAAI,CAAC;KAChC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAc;IACtC,KAAK,EAAE,WAAW;IAClB,MAAM,EAAE;QACN;YACE,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,gBAAgB;SACxB;KACF;CACF,CAAC","sourcesContent":["import { createUID, FieldGroupListItemProps, Input } from '@pega/cosmos-react-core';\n\ntype FieldGroupReducerPayload =\n  | {\n      action: 'add';\n    }\n  | {\n      action: 'delete';\n      id: string;\n    };\n\nexport interface FieldMeta {\n  label: string;\n  type: 'text' | 'date' | 'file' | 'select' | 'textarea';\n}\n\nexport interface GroupMeta {\n  label: string;\n  fields: FieldMeta[];\n}\n\nexport const fieldGroupReducer =\n  (groupMeta: GroupMeta, FieldRenderer: (props: FieldMeta) => JSX.Element | null) =>\n  (\n    items: FieldGroupListItemProps[],\n    payload: FieldGroupReducerPayload\n  ): FieldGroupListItemProps[] => {\n    switch (payload.action) {\n      case 'add':\n        return [\n          ...items,\n          {\n            name: `${groupMeta.label} ${items.length + 1}`,\n            id: createUID(),\n            children: groupMeta.fields.map(props => <FieldRenderer {...props} key={props.label} />)\n          }\n        ];\n\n      case 'delete':\n        return items\n          .filter(group => group.id !== payload.id)\n          .map((group, i) => ({ ...group, name: `${groupMeta.label} ${i + 1}` }));\n\n      default:\n        return items;\n    }\n  };\n\nexport const DemoFieldRenderer = ({ label, type }: FieldMeta) => {\n  if (type === 'text') {\n    return <Input label={label} />;\n  }\n\n  return null;\n};\n\nexport const demoGroupMeta: GroupMeta = {\n  label: 'Applicant',\n  fields: [\n    {\n      type: 'text',\n      label: 'Applicant name'\n    }\n  ]\n};\n"]}
+{"version":3,"file":"FieldGroupList.mocks.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.mocks.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,SAAS,EAA2B,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAqBpF,MAAM,CAAC,MAAM,iBAAiB,GAC5B,CAAC,SAAoB,EAAE,aAAuD,EAAE,EAAE,CAClF,CACE,KAAgC,EAChC,OAAiC,EACN,EAAE;IAC7B,QAAQ,OAAO,CAAC,MAAM,EAAE;QACtB,KAAK,KAAK;YACR,OAAO;gBACL,GAAG,KAAK;gBACR;oBACE,IAAI,EAAE,GAAG,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;oBAC9C,EAAE,EAAE,SAAS,EAAE;oBACf,QAAQ,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,eAAC,aAAa,OAAK,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,KAAK,GAAI,CAAC;iBACxF;aACF,CAAC;QAEJ,KAAK,QAAQ;YACX,OAAO,KAAK;iBACT,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,CAAC;iBACxC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;QAE5E;YACE,OAAO,KAAK,CAAC;KAChB;AACH,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAa,EAAE,EAAE;IAC9D,IAAI,IAAI,KAAK,MAAM,EAAE;QACnB,OAAO,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,IAAO,KAAK,CAAI,CAAC;KAC5C;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAc;IACtC,KAAK,EAAE,WAAW;IAClB,MAAM,EAAE;QACN;YACE,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,gBAAgB;SACxB;KACF;CACF,CAAC","sourcesContent":["import { createUID, FieldGroupListItemProps, Input } from '@pega/cosmos-react-core';\n\ntype FieldGroupReducerPayload =\n  | {\n      action: 'add';\n    }\n  | {\n      action: 'delete';\n      id: string;\n    };\n\nexport interface FieldMeta {\n  label: string;\n  type: 'text' | 'date' | 'file' | 'select' | 'textarea';\n}\n\nexport interface GroupMeta {\n  label: string;\n  fields: FieldMeta[];\n}\n\nexport const fieldGroupReducer =\n  (groupMeta: GroupMeta, FieldRenderer: (props: FieldMeta) => JSX.Element | null) =>\n  (\n    items: FieldGroupListItemProps[],\n    payload: FieldGroupReducerPayload\n  ): FieldGroupListItemProps[] => {\n    switch (payload.action) {\n      case 'add':\n        return [\n          ...items,\n          {\n            name: `${groupMeta.label} ${items.length + 1}`,\n            id: createUID(),\n            children: groupMeta.fields.map(props => <FieldRenderer {...props} key={props.label} />)\n          }\n        ];\n\n      case 'delete':\n        return items\n          .filter(group => group.id !== payload.id)\n          .map((group, i) => ({ ...group, name: `${groupMeta.label} ${i + 1}` }));\n\n      default:\n        return items;\n    }\n  };\n\nexport const DemoFieldRenderer = ({ label, type }: FieldMeta) => {\n  if (type === 'text') {\n    return <Input label={label} key={label} />;\n  }\n\n  return null;\n};\n\nexport const demoGroupMeta: GroupMeta = {\n  label: 'Applicant',\n  fields: [\n    {\n      type: 'text',\n      label: 'Applicant name'\n    }\n  ]\n};\n"]}

package/lib/core/FieldGroup/FieldGroupList.stories.d.ts

@@ -1,10 +1,11 @@
-/// <reference types="react" />
-declare const _default: {
-    title: string;
-    component: import("react").FunctionComponent<import("@pega/cosmos-react-core").FieldGroupListProps & import("@pega/cosmos-react-core").ForwardProps>;
-};
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const ExpensesDemo: () => JSX.Element;
-export declare const InsuranceDemo: () => JSX.Element;
-export declare const FieldGroupListDemo: () => JSX.Element;
+interface FieldGroupListDemoProps {
+    allowAdd?: boolean;
+    allowDelete?: boolean;
+}
+export declare const ExpensesDemo: Story<FieldGroupListDemoProps>;
+export declare const InsuranceDemo: Story<FieldGroupListDemoProps>;
+export declare const FieldGroupListDemo: Story<FieldGroupListDemoProps>;
 //# sourceMappingURL=FieldGroupList.stories.d.ts.map

package/lib/core/FieldGroup/FieldGroupList.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":";;;;;AAyBA,wBAGE;AAiDF,eAAO,MAAM,YAAY,mBAiDxB,CAAC;AAiCF,eAAO,MAAM,aAAa,mBAkDzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,mBAwB9B,CAAC"}
+{"version":3,"file":"FieldGroupList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAyB/C,wBAOU;AAEV,UAAU,uBAAuB;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAiDD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,uBAAuB,CA8DvD,CAAC;AAiCF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,uBAAuB,CA+DxD,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CAuC7D,CAAC"}

package/lib/core/FieldGroup/FieldGroupList.stories.js

@@ -1,11 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useReducer } from 'react';
 import { action } from '@storybook/addon-actions';
-import { Button, createUID, DateInput, FieldGroupList, FileInput, Form, Input, Select, Option, Text, TextArea } from '@pega/cosmos-react-core';
+import { Button, createUID, DateInput, FieldGroupList, FileInput, Form, Input, Select, Option, Text, TextArea, Flex } from '@pega/cosmos-react-core';
 import { DemoFieldRenderer, demoGroupMeta, fieldGroupReducer } from './FieldGroupList.mocks';
 export default {
     title: 'Core/FieldGroupList',
-    component: FieldGroupList
+    component: FieldGroupList,
+    args: {
+        allowAdd: true,
+        allowDelete: true
+    }
 };
 const ExpensesFieldRenderer = ({ label, type }) => {
     if (type === 'text') {
@@ -34,7 +38,7 @@ const expensesGroupMeta = {
         { type: 'textarea', label: 'Notes' }
     ]
 };
-export const ExpensesDemo = () => {
+export const ExpensesDemo = (args) => {
     const [state, dispatch] = useReducer(fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer), undefined, () => [
         {
             name: `${expensesGroupMeta.label} 1`,
@@ -47,11 +51,20 @@ export const ExpensesDemo = () => {
                     }, children: "Cancel" }, void 0), _jsx(Button, { name: 'Submit', type: 'submit', variant: 'primary', children: "Submit" }, void 0)] }, void 0), onSubmit: (e) => {
             e.preventDefault();
             action('Submit')(`Form:${e.type}`);
-        }, style: { margin: 'auto', maxWidth: '37.5rem' }, children: [_jsx(Text, { variant: 'h2', children: "Expense report" }, void 0), _jsx(FieldGroupList, { items: state, onAdd: () => {
-                    dispatch({ action: 'add' });
-                }, onDelete: id => {
-                    dispatch({ action: 'delete', id });
-                } }, void 0)] }, void 0));
+        }, style: { margin: 'auto', maxWidth: '37.5rem' }, children: [_jsx(Text, { variant: 'h2', children: "Expense report" }, void 0), _jsx(FieldGroupList, { items: state.map(fields => {
+                    return {
+                        ...fields,
+                        children: _jsx(Flex, { container: { direction: 'column', gap: 2 }, children: fields.children }, void 0)
+                    };
+                }), onAdd: args.allowAdd
+                    ? () => {
+                        dispatch({ action: 'add' });
+                    }
+                    : undefined, onDelete: args.allowDelete
+                    ? id => {
+                        dispatch({ action: 'delete', id });
+                    }
+                    : undefined }, void 0)] }, void 0));
 };
 const InsuranceFieldRenderer = ({ label, type }) => {
     if (type === 'text') {
@@ -70,7 +83,7 @@ const insuranceGroupMeta = {
         { type: 'select', label: 'Relationship' }
     ]
 };
-export const InsuranceDemo = () => {
+export const InsuranceDemo = (args) => {
     const [state, dispatch] = useReducer(fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer), undefined, () => [
         {
             name: `${insuranceGroupMeta.label} 1`,
@@ -83,13 +96,22 @@ export const InsuranceDemo = () => {
                     }, children: "Cancel" }, void 0), _jsx(Button, { name: 'Submit', type: 'submit', variant: 'primary', children: "Submit" }, void 0)] }, void 0), onSubmit: (e) => {
             e.preventDefault();
             action('Submit')(`Form:${e.type}`);
-        }, style: { margin: 'auto', maxWidth: '37.5rem' }, children: [_jsx(Text, { variant: 'h1', children: "Insurance step 1" }, void 0), _jsx(Text, { variant: 'h2', children: "Dependants" }, void 0), _jsx(FieldGroupList, { items: state, onAdd: () => {
-                    dispatch({ action: 'add' });
-                }, onDelete: id => {
-                    dispatch({ action: 'delete', id });
-                } }, void 0)] }, void 0));
+        }, style: { margin: 'auto', maxWidth: '37.5rem' }, children: [_jsx(Text, { variant: 'h1', children: "Insurance step 1" }, void 0), _jsx(Text, { variant: 'h2', children: "Dependants" }, void 0), _jsx(FieldGroupList, { items: state.map(fields => {
+                    return {
+                        ...fields,
+                        children: _jsx(Flex, { container: { direction: 'column', gap: 2 }, children: fields.children }, void 0)
+                    };
+                }), onAdd: args.allowAdd
+                    ? () => {
+                        dispatch({ action: 'add' });
+                    }
+                    : undefined, onDelete: args.allowDelete
+                    ? id => {
+                        dispatch({ action: 'delete', id });
+                    }
+                    : undefined }, void 0)] }, void 0));
 };
-export const FieldGroupListDemo = () => {
+export const FieldGroupListDemo = (args) => {
     const [state, dispatch] = useReducer(fieldGroupReducer(demoGroupMeta, DemoFieldRenderer), undefined, () => [
         {
             name: `${demoGroupMeta.label} 1`,
@@ -97,10 +119,19 @@ export const FieldGroupListDemo = () => {
             children: demoGroupMeta.fields.map(DemoFieldRenderer)
         }
     ]);
-    return (_jsx(FieldGroupList, { items: state, onAdd: () => {
-            dispatch({ action: 'add' });
-        }, onDelete: id => {
-            dispatch({ action: 'delete', id });
-        } }, void 0));
+    return (_jsx(FieldGroupList, { items: state.map(fields => {
+            return {
+                ...fields,
+                children: _jsx(Flex, { container: { direction: 'column', gap: 2 }, children: fields.children }, void 0)
+            };
+        }), onAdd: args.allowAdd
+            ? () => {
+                dispatch({ action: 'add' });
+            }
+            : undefined, onDelete: args.allowDelete
+            ? id => {
+                dispatch({ action: 'delete', id });
+            }
+            : undefined }, void 0));
 };
 //# sourceMappingURL=FieldGroupList.stories.js.map

package/lib/core/FieldGroup/FieldGroupList.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupList.stories.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useReducer, MouseEvent, FormEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Button,\n  createUID,\n  DateInput,\n  FieldGroupList,\n  FileInput,\n  Form,\n  Input,\n  Select,\n  Option,\n  Text,\n  TextArea\n} from '@pega/cosmos-react-core';\n\nimport {\n  DemoFieldRenderer,\n  demoGroupMeta,\n  fieldGroupReducer,\n  FieldMeta,\n  GroupMeta\n} from './FieldGroupList.mocks';\n\nexport default {\n  title: 'Core/FieldGroupList',\n  component: FieldGroupList\n};\n\nconst ExpensesFieldRenderer = ({ label, type }: FieldMeta) => {\n  if (type === 'text') {\n    return <Input label={label} />;\n  }\n  if (type === 'select') {\n    return (\n      <Select label={label}>\n        <Option>Select</Option>\n        <Option>Advertising</Option>\n        <Option>Car and truck expenses</Option>\n        <Option>Commissions and fees</Option>\n        <Option>Contract labor</Option>\n        <Option>Legal and professional services</Option>\n        <Option>Office expense</Option>\n        <Option>Rent or lease</Option>\n        <Option>Vehicles, machinery, and equipment</Option>\n        <Option>Repairs and maintenance</Option>\n        <Option>Travel and meals</Option>\n        <Option>Deductible meals</Option>\n        <Option>Utilities</Option>\n        <Option>Other</Option>\n      </Select>\n    );\n  }\n  if (type === 'file') {\n    return <FileInput label={label} multiple />;\n  }\n  if (type === 'textarea') {\n    return <TextArea label={label} />;\n  }\n  if (type === 'date') {\n    return <DateInput label={label} />;\n  }\n\n  return null;\n};\n\nconst expensesGroupMeta: GroupMeta = {\n  label: 'Expense',\n  fields: [\n    { type: 'select', label: 'Type of expense' },\n    { type: 'date', label: 'Date of expense' },\n    { type: 'file', label: 'Receipts' },\n    { type: 'textarea', label: 'Notes' }\n  ]\n};\n\nexport const ExpensesDemo = () => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer),\n    undefined,\n    () => [\n      {\n        name: `${expensesGroupMeta.label} 1`,\n        id: createUID(),\n        children: expensesGroupMeta.fields.map(ExpensesFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <Form\n      actions={\n        <>\n          <Button\n            name='Cancel'\n            variant='secondary'\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              action('Click')(`${e.currentTarget.name}:${e.type}`);\n            }}\n          >\n            Cancel\n          </Button>\n          <Button name='Submit' type='submit' variant='primary'>\n            Submit\n          </Button>\n        </>\n      }\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        action('Submit')(`Form:${e.type}`);\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Text variant='h2'>Expense report</Text>\n      <FieldGroupList\n        items={state}\n        onAdd={() => {\n          dispatch({ action: 'add' });\n        }}\n        onDelete={id => {\n          dispatch({ action: 'delete', id });\n        }}\n      />\n    </Form>\n  );\n};\n\nconst InsuranceFieldRenderer = ({ label, type }: FieldMeta) => {\n  if (type === 'text') {\n    return <Input label={label} />;\n  }\n  if (type === 'select') {\n    return (\n      <Select label={label}>\n        <Option>Select</Option>\n        <Option>Mother</Option>\n        <Option>Father</Option>\n        <Option>Guardian</Option>\n        <Option>Child</Option>\n        <Option>Spouse</Option>\n        <Option>Sibling</Option>\n        <Option>Other</Option>\n      </Select>\n    );\n  }\n\n  return null;\n};\n\nconst insuranceGroupMeta: GroupMeta = {\n  label: 'Entry',\n  fields: [\n    { type: 'text', label: 'First name' },\n    { type: 'text', label: 'Last name' },\n    { type: 'select', label: 'Relationship' }\n  ]\n};\n\nexport const InsuranceDemo = () => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer),\n    undefined,\n    () => [\n      {\n        name: `${insuranceGroupMeta.label} 1`,\n        id: createUID(),\n        children: insuranceGroupMeta.fields.map(InsuranceFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <Form\n      actions={\n        <>\n          <Button\n            name='Cancel'\n            variant='secondary'\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              action('Click')(`${e.currentTarget.name}:${e.type}`);\n            }}\n          >\n            Cancel\n          </Button>\n          <Button name='Submit' type='submit' variant='primary'>\n            Submit\n          </Button>\n        </>\n      }\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        action('Submit')(`Form:${e.type}`);\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Text variant='h1'>Insurance step 1</Text>\n      <Text variant='h2'>Dependants</Text>\n      <FieldGroupList\n        items={state}\n        onAdd={() => {\n          dispatch({ action: 'add' });\n        }}\n        onDelete={id => {\n          dispatch({ action: 'delete', id });\n        }}\n      />\n    </Form>\n  );\n};\n\nexport const FieldGroupListDemo = () => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(demoGroupMeta, DemoFieldRenderer),\n    undefined,\n    () => [\n      {\n        name: `${demoGroupMeta.label} 1`,\n        id: createUID(),\n        children: demoGroupMeta.fields.map(DemoFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <FieldGroupList\n      items={state}\n      onAdd={() => {\n        dispatch({ action: 'add' });\n      }}\n      onDelete={id => {\n        dispatch({ action: 'delete', id });\n      }}\n    />\n  );\n};\n"]}
+{"version":3,"file":"FieldGroupList.stories.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useReducer, MouseEvent, FormEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n  Button,\n  createUID,\n  DateInput,\n  FieldGroupList,\n  FileInput,\n  Form,\n  Input,\n  Select,\n  Option,\n  Text,\n  TextArea,\n  Flex\n} from '@pega/cosmos-react-core';\n\nimport {\n  DemoFieldRenderer,\n  demoGroupMeta,\n  fieldGroupReducer,\n  FieldMeta,\n  GroupMeta\n} from './FieldGroupList.mocks';\n\nexport default {\n  title: 'Core/FieldGroupList',\n  component: FieldGroupList,\n  args: {\n    allowAdd: true,\n    allowDelete: true\n  }\n} as Meta;\n\ninterface FieldGroupListDemoProps {\n  allowAdd?: boolean;\n  allowDelete?: boolean;\n}\n\nconst ExpensesFieldRenderer = ({ label, type }: FieldMeta) => {\n  if (type === 'text') {\n    return <Input label={label} />;\n  }\n  if (type === 'select') {\n    return (\n      <Select label={label}>\n        <Option>Select</Option>\n        <Option>Advertising</Option>\n        <Option>Car and truck expenses</Option>\n        <Option>Commissions and fees</Option>\n        <Option>Contract labor</Option>\n        <Option>Legal and professional services</Option>\n        <Option>Office expense</Option>\n        <Option>Rent or lease</Option>\n        <Option>Vehicles, machinery, and equipment</Option>\n        <Option>Repairs and maintenance</Option>\n        <Option>Travel and meals</Option>\n        <Option>Deductible meals</Option>\n        <Option>Utilities</Option>\n        <Option>Other</Option>\n      </Select>\n    );\n  }\n  if (type === 'file') {\n    return <FileInput label={label} multiple />;\n  }\n  if (type === 'textarea') {\n    return <TextArea label={label} />;\n  }\n  if (type === 'date') {\n    return <DateInput label={label} />;\n  }\n\n  return null;\n};\n\nconst expensesGroupMeta: GroupMeta = {\n  label: 'Expense',\n  fields: [\n    { type: 'select', label: 'Type of expense' },\n    { type: 'date', label: 'Date of expense' },\n    { type: 'file', label: 'Receipts' },\n    { type: 'textarea', label: 'Notes' }\n  ]\n};\n\nexport const ExpensesDemo: Story<FieldGroupListDemoProps> = (args: FieldGroupListDemoProps) => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer),\n    undefined,\n    () => [\n      {\n        name: `${expensesGroupMeta.label} 1`,\n        id: createUID(),\n        children: expensesGroupMeta.fields.map(ExpensesFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <Form\n      actions={\n        <>\n          <Button\n            name='Cancel'\n            variant='secondary'\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              action('Click')(`${e.currentTarget.name}:${e.type}`);\n            }}\n          >\n            Cancel\n          </Button>\n          <Button name='Submit' type='submit' variant='primary'>\n            Submit\n          </Button>\n        </>\n      }\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        action('Submit')(`Form:${e.type}`);\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Text variant='h2'>Expense report</Text>\n      <FieldGroupList\n        items={state.map(fields => {\n          return {\n            ...fields,\n            children: <Flex container={{ direction: 'column', gap: 2 }}>{fields.children}</Flex>\n          };\n        })}\n        onAdd={\n          args.allowAdd\n            ? () => {\n                dispatch({ action: 'add' });\n              }\n            : undefined\n        }\n        onDelete={\n          args.allowDelete\n            ? id => {\n                dispatch({ action: 'delete', id });\n              }\n            : undefined\n        }\n      />\n    </Form>\n  );\n};\n\nconst InsuranceFieldRenderer = ({ label, type }: FieldMeta) => {\n  if (type === 'text') {\n    return <Input label={label} />;\n  }\n  if (type === 'select') {\n    return (\n      <Select label={label}>\n        <Option>Select</Option>\n        <Option>Mother</Option>\n        <Option>Father</Option>\n        <Option>Guardian</Option>\n        <Option>Child</Option>\n        <Option>Spouse</Option>\n        <Option>Sibling</Option>\n        <Option>Other</Option>\n      </Select>\n    );\n  }\n\n  return null;\n};\n\nconst insuranceGroupMeta: GroupMeta = {\n  label: 'Entry',\n  fields: [\n    { type: 'text', label: 'First name' },\n    { type: 'text', label: 'Last name' },\n    { type: 'select', label: 'Relationship' }\n  ]\n};\n\nexport const InsuranceDemo: Story<FieldGroupListDemoProps> = (args: FieldGroupListDemoProps) => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer),\n    undefined,\n    () => [\n      {\n        name: `${insuranceGroupMeta.label} 1`,\n        id: createUID(),\n        children: insuranceGroupMeta.fields.map(InsuranceFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <Form\n      actions={\n        <>\n          <Button\n            name='Cancel'\n            variant='secondary'\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              action('Click')(`${e.currentTarget.name}:${e.type}`);\n            }}\n          >\n            Cancel\n          </Button>\n          <Button name='Submit' type='submit' variant='primary'>\n            Submit\n          </Button>\n        </>\n      }\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        action('Submit')(`Form:${e.type}`);\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Text variant='h1'>Insurance step 1</Text>\n      <Text variant='h2'>Dependants</Text>\n      <FieldGroupList\n        items={state.map(fields => {\n          return {\n            ...fields,\n            children: <Flex container={{ direction: 'column', gap: 2 }}>{fields.children}</Flex>\n          };\n        })}\n        onAdd={\n          args.allowAdd\n            ? () => {\n                dispatch({ action: 'add' });\n              }\n            : undefined\n        }\n        onDelete={\n          args.allowDelete\n            ? id => {\n                dispatch({ action: 'delete', id });\n              }\n            : undefined\n        }\n      />\n    </Form>\n  );\n};\n\nexport const FieldGroupListDemo: Story<FieldGroupListDemoProps> = (\n  args: FieldGroupListDemoProps\n) => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(demoGroupMeta, DemoFieldRenderer),\n    undefined,\n    () => [\n      {\n        name: `${demoGroupMeta.label} 1`,\n        id: createUID(),\n        children: demoGroupMeta.fields.map(DemoFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <FieldGroupList\n      items={state.map(fields => {\n        return {\n          ...fields,\n          children: <Flex container={{ direction: 'column', gap: 2 }}>{fields.children}</Flex>\n        };\n      })}\n      onAdd={\n        args.allowAdd\n          ? () => {\n              dispatch({ action: 'add' });\n            }\n          : undefined\n      }\n      onDelete={\n        args.allowDelete\n          ? id => {\n              dispatch({ action: 'delete', id });\n            }\n          : undefined\n      }\n    />\n  );\n};\n"]}

package/lib/core/ListToolbar/ListToolbar.mocks.d.ts

@@ -0,0 +1,9 @@
+import { Dispatch } from 'react';
+import { Action } from '@pega/cosmos-react-core';
+import { ViewSelectorProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';
+export declare const actions: Action[];
+export declare const mockViews: ViewSelectorProps['views'];
+export declare const StagedStateDispatchContext: import("react").Context<Dispatch<object>>;
+export declare const FilterRenderer: () => JSX.Element;
+export declare const GroupRenderer: () => JSX.Element;
+//# sourceMappingURL=ListToolbar.mocks.d.ts.map

package/lib/core/ListToolbar/ListToolbar.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListToolbar.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,QAAQ,EAAwB,MAAM,OAAO,CAAC;AAEnF,OAAO,EAGL,MAAM,EAQP,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sEAAsE,CAAC;AAEzG,eAAO,MAAM,OAAO,EAAE,MAAM,EAIzB,CAAC;AAEJ,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,OAAO,CAIhD,CAAC;AAEF,eAAO,MAAM,0BAA0B,2CAA4C,CAAC;AA6DpF,eAAO,MAAM,cAAc,mBAoB1B,CAAC;AAEF,eAAO,MAAM,aAAa,mBAEzB,CAAC"}

package/lib/core/ListToolbar/ListToolbar.mocks.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext, useState } from 'react';
+import { useAfterInitialEffect, useUID, Input, Select, Option, Flex, Button, Icon, Grid } from '@pega/cosmos-react-core';
+export const actions = ['Action 1', 'Action 2', 'Action 3'].map(text => ({
+    text,
+    id: text,
+    icon: 'filter'
+}));
+export const mockViews = [
+    { id: '1', text: 'Data view 1', selected: true },
+    { id: '2', text: 'Data view 2', selected: false },
+    { id: '3', text: 'Data view 3', selected: false }
+];
+export const StagedStateDispatchContext = createContext(() => { });
+const mockFields = Array.from({ length: 10 }, (_, i) => `Field ${i + 1}`);
+const MockCondition = () => {
+    const setStagedState = useContext(StagedStateDispatchContext);
+    const conditionId = useUID();
+    const [localState, setLocalState] = useState({
+        lhs: 'Field 1',
+        comparator: 'Equals',
+        rhs: ''
+    });
+    useAfterInitialEffect(() => {
+        setStagedState({
+            [conditionId]: localState
+        });
+    }, [conditionId, localState, setStagedState]);
+    return (_jsxs(Grid, { container: { gap: 2, cols: 'repeat(3, minmax(0, 1fr))' }, children: [_jsx(Select, { label: 'Field', onChange: (e) => {
+                    setLocalState(cur => ({ ...cur, lhs: e.target.value }));
+                }, children: mockFields.map(field => {
+                    return (_jsx(Option, { value: field, children: field }, field));
+                }) }, void 0), _jsx(Select, { label: 'Comparator', onChange: (e) => {
+                    setLocalState(cur => ({ ...cur, comparator: e.target.value }));
+                }, children: ['Equals', 'Contains', 'Starts with'].map(comparator => {
+                    return (_jsx(Option, { value: comparator, children: comparator }, comparator));
+                }) }, void 0), _jsx(Input, { label: 'Value', value: localState.rhs, onChange: (e) => {
+                    setLocalState(cur => ({ ...cur, rhs: e.target.value }));
+                } }, void 0)] }, void 0));
+};
+export const FilterRenderer = () => {
+    const [conditions, setConditions] = useState(() => [_jsx(MockCondition, {}, 1)]);
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [conditions, _jsx("div", { children: _jsx(Button, { variant: 'link', onClick: () => {
+                        setConditions(cur => [...cur, _jsx(MockCondition, {}, cur.length + 1)]);
+                    }, children: _jsxs(Flex, { container: { inline: true, alignItems: 'start', gap: 1 }, as: 'span', children: [_jsx(Icon, { name: 'plus' }, void 0), _jsx("span", { children: "Add condition" }, void 0)] }, void 0) }, void 0) }, void 0)] }, void 0));
+};
+export const GroupRenderer = () => {
+    return _jsx(_Fragment, { children: "GroupBy content goes here..." }, void 0);
+};
+//# sourceMappingURL=ListToolbar.mocks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListToolbar.mocks.js","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, createContext, Dispatch, useContext, useState } from 'react';\n\nimport {\n  useAfterInitialEffect,\n  useUID,\n  Action,\n  Input,\n  Select,\n  Option,\n  Flex,\n  Button,\n  Icon,\n  Grid\n} from '@pega/cosmos-react-core';\nimport { ViewSelectorProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nexport const actions: Action[] = ['Action 1', 'Action 2', 'Action 3'].map(text => ({\n  text,\n  id: text,\n  icon: 'filter'\n}));\n\nexport const mockViews: ViewSelectorProps['views'] = [\n  { id: '1', text: 'Data view 1', selected: true },\n  { id: '2', text: 'Data view 2', selected: false },\n  { id: '3', text: 'Data view 3', selected: false }\n];\n\nexport const StagedStateDispatchContext = createContext<Dispatch<object>>(() => {});\n\nconst mockFields = Array.from({ length: 10 }, (_, i) => `Field ${i + 1}`);\n\nconst MockCondition = () => {\n  const setStagedState = useContext(StagedStateDispatchContext);\n  const conditionId = useUID();\n\n  const [localState, setLocalState] = useState({\n    lhs: 'Field 1',\n    comparator: 'Equals',\n    rhs: ''\n  });\n\n  useAfterInitialEffect(() => {\n    setStagedState({\n      [conditionId]: localState\n    });\n  }, [conditionId, localState, setStagedState]);\n\n  return (\n    <Grid container={{ gap: 2, cols: 'repeat(3, minmax(0, 1fr))' }}>\n      <Select\n        label='Field'\n        onChange={(e: ChangeEvent<HTMLSelectElement>) => {\n          setLocalState(cur => ({ ...cur, lhs: e.target.value }));\n        }}\n      >\n        {mockFields.map(field => {\n          return (\n            <Option value={field} key={field}>\n              {field}\n            </Option>\n          );\n        })}\n      </Select>\n      <Select\n        label='Comparator'\n        onChange={(e: ChangeEvent<HTMLSelectElement>) => {\n          setLocalState(cur => ({ ...cur, comparator: e.target.value }));\n        }}\n      >\n        {['Equals', 'Contains', 'Starts with'].map(comparator => {\n          return (\n            <Option value={comparator} key={comparator}>\n              {comparator}\n            </Option>\n          );\n        })}\n      </Select>\n      <Input\n        label='Value'\n        value={localState.rhs}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => {\n          setLocalState(cur => ({ ...cur, rhs: e.target.value }));\n        }}\n      />\n    </Grid>\n  );\n};\n\nexport const FilterRenderer = () => {\n  const [conditions, setConditions] = useState<JSX.Element[]>(() => [<MockCondition key={1} />]);\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      {conditions}\n      <div>\n        <Button\n          variant='link'\n          onClick={() => {\n            setConditions(cur => [...cur, <MockCondition key={cur.length + 1} />]);\n          }}\n        >\n          <Flex container={{ inline: true, alignItems: 'start', gap: 1 }} as='span'>\n            <Icon name='plus' />\n            <span>Add condition</span>\n          </Flex>\n        </Button>\n      </div>\n    </Flex>\n  );\n};\n\nexport const GroupRenderer = () => {\n  return <>GroupBy content goes here...</>;\n};\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListToolbar.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAexC,wBAGU;AAIV,eAAO,MAAM,eAAe,mBAsF3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,mBAa7B,CAAC"}

package/lib/core/ListToolbar/ListToolbar.stories.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import { Card, CardHeader, ListToolbar } from '@pega/cosmos-react-core';
+import { mockViews, actions, FilterRenderer, StagedStateDispatchContext, GroupRenderer } from './ListToolbar.mocks';
+export default {
+    title: 'Core/ListToolbar',
+    component: ListToolbar
+};
+export const ListToolbarDemo = () => {
+    const [stagedQueryOptionState, setStagedQueryOptionState] = useState(null);
+    const [views, setViews] = useState(mockViews);
+    const [currentSort, setCurrentSort] = useState(null);
+    const filterProp = useMemo(() => {
+        return {
+            value: stagedQueryOptionState,
+            count: undefined,
+            renderer: FilterRenderer,
+            onCancel: () => {
+                setStagedQueryOptionState(null);
+            },
+            onSubmit: () => {
+                setStagedQueryOptionState(cur => {
+                    // eslint-disable-next-line no-console
+                    console.table(cur);
+                    return null;
+                });
+            }
+        };
+    }, [stagedQueryOptionState]);
+    const sortProp = useMemo(() => {
+        return {
+            mode: 'single-select',
+            count: currentSort ? 1 : undefined,
+            items: [
+                {
+                    id: 'asc',
+                    text: 'Ascending',
+                    icon: 'arrow-up',
+                    selected: currentSort === 'asc'
+                },
+                {
+                    id: 'desc',
+                    text: 'Descending',
+                    icon: 'arrow-down',
+                    selected: currentSort === 'desc'
+                }
+            ],
+            onItemClick: id => {
+                setCurrentSort(cur => {
+                    return cur === id ? null : id;
+                });
+            }
+        };
+    }, [currentSort]);
+    const groupProp = useMemo(() => {
+        return {
+            count: undefined,
+            renderer: GroupRenderer,
+            onCancel: () => { },
+            onSubmit: () => { }
+        };
+    }, []);
+    return (_jsx(Card, { children: _jsx(CardHeader, { children: _jsx(StagedStateDispatchContext.Provider, { value: setStagedQueryOptionState, children: _jsx(ListToolbar, { heading: {
+                        views,
+                        onViewSelect: id => {
+                            setViews(cur => {
+                                return cur.map(view => ({ ...view, selected: view.id === id }));
+                            });
+                        }
+                    }, onCreateNew: action('Clicked Create New'), search: { onSearchSubmit: action('Search submit') }, count: {
+                        total: 32,
+                        selected: 4
+                    }, filter: filterProp, sort: sortProp, group: groupProp, actions: actions }, void 0) }, void 0) }, void 0) }, void 0));
+};
+export const SimpleToolbarDemo = () => {
+    return (_jsx(Card, { children: _jsx(CardHeader, { children: _jsx(ListToolbar, { heading: 'Top accounts in California', search: { onSearchSubmit: action('Search submit') }, count: { total: 212 }, actions: actions }, void 0) }, void 0) }, void 0));
+};
+//# sourceMappingURL=ListToolbar.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListToolbar.stories.js","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useMemo, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport { Card, CardHeader, ListToolbar } from '@pega/cosmos-react-core';\nimport { PresetMenuProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nimport {\n  mockViews,\n  actions,\n  FilterRenderer,\n  StagedStateDispatchContext,\n  GroupRenderer\n} from './ListToolbar.mocks';\n\nexport default {\n  title: 'Core/ListToolbar',\n  component: ListToolbar\n} as Meta;\n\ntype SortString = 'asc' | 'desc';\n\nexport const ListToolbarDemo = () => {\n  const [stagedQueryOptionState, setStagedQueryOptionState] = useState<object | null>(null);\n  const [views, setViews] = useState(mockViews);\n  const [currentSort, setCurrentSort] = useState<SortString | null>(null);\n\n  const filterProp = useMemo(() => {\n    return {\n      value: stagedQueryOptionState,\n      count: undefined,\n      renderer: FilterRenderer,\n      onCancel: () => {\n        setStagedQueryOptionState(null);\n      },\n      onSubmit: () => {\n        setStagedQueryOptionState(cur => {\n          // eslint-disable-next-line no-console\n          console.table(cur);\n          return null;\n        });\n      }\n    };\n  }, [stagedQueryOptionState]);\n\n  const sortProp: PresetMenuProps = useMemo(() => {\n    return {\n      mode: 'single-select',\n      count: currentSort ? 1 : undefined,\n      items: [\n        {\n          id: 'asc',\n          text: 'Ascending',\n          icon: 'arrow-up',\n          selected: currentSort === 'asc'\n        },\n        {\n          id: 'desc',\n          text: 'Descending',\n          icon: 'arrow-down',\n          selected: currentSort === 'desc'\n        }\n      ],\n      onItemClick: id => {\n        setCurrentSort(cur => {\n          return cur === id ? null : (id as SortString);\n        });\n      }\n    };\n  }, [currentSort]);\n\n  const groupProp = useMemo(() => {\n    return {\n      count: undefined,\n      renderer: GroupRenderer,\n      onCancel: () => {},\n      onSubmit: () => {}\n    };\n  }, []);\n\n  return (\n    <Card>\n      <CardHeader>\n        <StagedStateDispatchContext.Provider value={setStagedQueryOptionState}>\n          <ListToolbar\n            heading={{\n              views,\n              onViewSelect: id => {\n                setViews(cur => {\n                  return cur.map(view => ({ ...view, selected: view.id === id }));\n                });\n              }\n            }}\n            onCreateNew={action('Clicked Create New')}\n            search={{ onSearchSubmit: action('Search submit') }}\n            count={{\n              total: 32,\n              selected: 4\n            }}\n            filter={filterProp}\n            sort={sortProp}\n            group={groupProp}\n            actions={actions}\n          />\n        </StagedStateDispatchContext.Provider>\n      </CardHeader>\n    </Card>\n  );\n};\n\nexport const SimpleToolbarDemo = () => {\n  return (\n    <Card>\n      <CardHeader>\n        <ListToolbar\n          heading='Top accounts in California'\n          search={{ onSearchSubmit: action('Search submit') }}\n          count={{ total: 212 }}\n          actions={actions}\n        />\n      </CardHeader>\n    </Card>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ArticleList.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/ArticleList/ArticleList.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;AA0BA,wBAOE;AAIF,eAAO,MAAM,gBAAgB,mBAyJ5B,CAAC;AAEF,eAAO,MAAM,uBAAuB,mBASnC,CAAC"}
+{"version":3,"file":"ArticleList.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/ArticleList/ArticleList.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;AA0BA,wBAOE;AAIF,eAAO,MAAM,gBAAgB,mBA2J5B,CAAC;AAEF,eAAO,MAAM,uBAAuB,mBASnC,CAAC"}

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

@@ -34,6 +34,7 @@ export const FirstArticleList = () => {
     const ALHeader = {
         icon: _jsx(Icon, { name: 'help' }, void 0),
         headerText: 'Knowledge articles',
+        count: 5,
         primary: {
             search: (_jsx(SearchInput, { value: query, onChange: (event) => setQuery(event.target.value), onSearchChange: action('Search query'), onSearchSubmit: action('Search submit'), placeholder: 'Search\u2026' }, void 0)),
             actions: [
@@ -66,7 +67,7 @@ export const FirstArticleList = () => {
     return (_jsx("div", { style: {
             width: '31.25rem',
             maxHeight: '100vh'
-        }, children: _jsx(ArticleList, { skeletonize: false, header: _jsx(ArticleListHeader, { icon: ALHeader.icon, headerText: ALHeader.headerText, primary: ALHeader.primary, secondary: ALHeader.secondary, onSubmit: action('Filter details submitted') }, void 0), footer: _jsx(Flex, { container: { alignItems: 'center', justify: 'end' }, item: { grow: 1 }, children: _jsx(Pagination, { total: 70, pageNumber: currentPage, onPageChange: pageNumber => {
+        }, children: _jsx(ArticleList, { skeletonize: false, header: _jsx(ArticleListHeader, { icon: ALHeader.icon, count: ALHeader.count, headerText: ALHeader.headerText, primary: ALHeader.primary, secondary: ALHeader.secondary, onSubmit: action('Filter details submitted') }, void 0), footer: _jsx(Flex, { container: { alignItems: 'center', justify: 'end' }, item: { grow: 1 }, children: _jsx(Pagination, { total: 70, pageNumber: currentPage, onPageChange: pageNumber => {
                         setCurrentPage(pageNumber);
                     } }, void 0) }, void 0), children: ArticleListMockData.articleList.map((dataItem, id) => {
                 return (_jsx(ArticleSummary, { header: _jsx(Link, { href: 'design.pega.com', "data-article-id": dataItem.articleId, onClick: handleArticleLinkClick, children: dataItem.header }, void 0), content: _jsx(Text, { children: dataItem.abstract }, void 0), articleID: `article-${id}`, meta: [

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

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

package/lib/work/Timeline/Timeline.stories.d.ts

@@ -1,7 +1,9 @@
+/// <reference types="react" />
 import { Meta, Story } from '@storybook/react';
 import { OmitStrict } from '@pega/cosmos-react-core';
 import { TimelineProps } from '@pega/cosmos-react-work';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const TimelineDemo: Story<OmitStrict<TimelineProps, 'activity' | 'currentTime'>>;
+export declare const TimelineToolbarDemo: () => JSX.Element;
 //# sourceMappingURL=Timeline.stories.d.ts.map

package/lib/work/Timeline/Timeline.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Timeline/Timeline.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAY,aAAa,EAAE,MAAM,yBAAyB,CAAC;;AAIlE,wBAGU;AAEV,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,GAAG,aAAa,CAAC,CA6CrF,CAAC"}
+{"version":3,"file":"Timeline.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Timeline/Timeline.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAiC,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACpF,OAAO,EAAY,aAAa,EAAmB,MAAM,yBAAyB,CAAC;;AAQnF,wBAGU;AAEV,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,GAAG,aAAa,CAAC,CA6CrF,CAAC;AAeF,eAAO,MAAM,mBAAmB,mBAwC/B,CAAC"}

package/lib/work/Timeline/Timeline.stories.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
-import { Timeline } from '@pega/cosmos-react-work';
+import { Card, CardContent, CardHeader } from '@pega/cosmos-react-core';
+import { Timeline, TimelineToolbar } from '@pega/cosmos-react-work';
 import { activity } from './Timeline.mocks';
 export default {
     title: 'Work/Timeline',
@@ -41,4 +42,23 @@ TimelineDemo.argTypes = {
         control: { type: 'select' }
     }
 };
+export const TimelineToolbarDemo = () => {
+    const [sortOrder, setSortOrder] = useState();
+    const [groupBy, setGroupBy] = useState();
+    const [items, setItems] = useState(activity);
+    const onSearchSubmit = useCallback((value) => {
+        setItems(activity.filter(item => JSON.stringify(item.title).includes(value)));
+    }, []);
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(TimelineToolbar, { heading: 'Timeline Demo', search: { onSearchSubmit }, count: { total: items.length }, sort: {
+                        selected: sortOrder,
+                        onItemClick: (id) => {
+                            setSortOrder(id);
+                        }
+                    }, group: {
+                        selected: groupBy,
+                        onItemClick: (id) => {
+                            setGroupBy(id);
+                        }
+                    } }, void 0) }, void 0), _jsx(CardContent, { children: _jsx(Timeline, { activity: items, currentTime: new Date(), sortOrder: sortOrder, groupBy: groupBy }, void 0) }, void 0)] }, void 0));
+};
 //# sourceMappingURL=Timeline.stories.js.map