npm - @pega/cosmos-react-demos - Versions diffs - 3.0.0-dev.9.0 → 3.0.0-rc.2 - Mend

@pega/cosmos-react-demos 3.0.0-dev.9.0 → 3.0.0-rc.2

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

Files changed (987) hide show

package/lib/core/AppShell/AppShell.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AppShell.stories.js","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { MouseEvent, useContext, FormEvent, useState, useMemo, useRef } from 'react';\n\nimport {\n AppShell,\n AppShellProps,\n AppShellList,\n DrawerItemProps,\n Button,\n DateInput,\n Grid,\n Icon,\n registerIcon,\n Input,\n Select,\n Option,\n Modal,\n ModalManagerContext,\n TextArea,\n ToasterContext,\n ForwardProps,\n useAfterInitialEffect,\n windowIsAvailable,\n Configuration\n} from '@pega/cosmos-react-core';\nimport * as bellSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bell-solid.icon';\nimport * as clockSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/clock-solid.icon';\n\nimport {\n defaultLinks,\n defaultMainContent,\n defaultNotifications,\n defaultRecents,\n operatorData\n} from './AppShell.mocks';\n\nregisterIcon(bellSolidIcon, clockSolidIcon);\n\nexport default {\n title: 'Core/App Shell',\n component: AppShell,\n id: 'App Shell',\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface AppShellStoryProps {\n /** Demo props /\n main?: AppShellProps['main'];\n appInfo?: AppShellProps['appInfo'];\n banners?: AppShellProps['banners'];\n cases?: AppShellProps['cases'];\n caseLinks?: AppShellProps['links'];\n createLinks?: any[];\n recentItems?: any[];\n utils?: AppShellProps['utils'];\n onLinkClick?: (name: string) => void;\n\n /* Storybook controls */\n appName?: AppShellProps['appInfo']['appName'];\n portalName?: AppShellProps['appInfo']['portalName'];\n href?: AppShellProps['appInfo']['href'];\n imageSrc?: AppShellProps['appInfo']['imageSrc'];\n fullImageSrc?: AppShellProps['appInfo']['fullImageSrc'];\n withSearch?: boolean;\n appHeader?: AppShellProps['appHeader'];\n environmentName?: string;\n environmentColor?: string;\n notificationsEmpty?: boolean;\n notificationsLoading?: boolean;\n casesTypesEmpty?: boolean;\n recentsEmpty?: boolean;\n recentsLoading?: boolean;\n pinsLoading?: boolean;\n}\n\nexport const AppShellDemo: Story<AppShellStoryProps> = (args: AppShellStoryProps) => {\n const CreateCaseModal = ({ caseType }: { caseType: string }) => {\n const { ModalContext } = useContext(ModalManagerContext);\n const { dismiss } = useContext(ModalContext);\n const { push: pushToaster } = useContext(ToasterContext);\n\n return (\n <Modal\n as='form'\n heading={`New ${caseType}`}\n actions={\n <>\n <Button onClick={dismiss}>Cancel</Button>\n <Button\n variant='primary'\n type='submit'\n onClick={(e: FormEvent) => {\n e.preventDefault();\n dismiss();\n pushToaster({ content: `${caseType} requested` });\n }}\n >\n Request\n </Button>\n </>\n }\n >\n <Grid container={{ rowGap: 2 }}>\n <DateInput label='Date Requested' info={null} />\n <Select label='Department'>\n <Option value=''>Select…</Option>\n <Option value='Fire'>Fire</Option>\n <Option value='Facilities'>Facilities</Option>\n <Option value='Parks'>Parks</Option>\n <Option value='Sanitation'>Sanitation</Option>\n <Option value='Parking & Traffic'>Parking & Traffic</Option>\n <Option value='Police'>Police</Option>\n <Option value='Courts'>Courts</Option>\n <Option value='Healthcare'>Healthcare</Option>\n <Option value='Energy'>Energy</Option>\n <Option value='Justice department'>Justice department</Option>\n <Option value='Environmental'>Environmental</Option>\n </Select>\n <TextArea label='Purpose of Purchase' />\n <Select label='Desired Make'>\n <Option value=''>Select...</Option>\n <Option value='Ford'>Ford</Option>\n <Option value='Dodge'>Dodge</Option>\n <Option value='Toyota'>Toyota</Option>\n <Option value='Tesla'>Tesla</Option>\n </Select>\n <Input label='Desired Make' />\n <Input\n type='number'\n min='2016'\n max='2021'\n label='Year'\n info='Must be within last 5 years'\n />\n <Input\n type='number'\n min='0.01'\n step='0.01'\n max='50000'\n label='Estimated Cost'\n info='May not exceed $50,000.00'\n />\n </Grid>\n </Modal>\n );\n };\n\n const caseLinks = args.caseLinks \|\| defaultLinks;\n const showSearch = args.withSearch !== undefined ? args.withSearch : true;\n\n const { create: createModal } = useContext(ModalManagerContext);\n const [links, setLinks] = useState<AppShellProps['links']>(caseLinks);\n const [notifications, setNotifications] =\n useState<(DrawerItemProps & ForwardProps)[]>(defaultNotifications);\n const [recents, setRecents] = useState<(DrawerItemProps & ForwardProps)[]>(\n args.recentItems \|\| defaultRecents\n );\n const [numNewNotifications, setNumNewNotifications] = useState(\n notifications.filter(x => x.unread).length\n );\n const [searchVal, setSearchVal] = useState('');\n\n useAfterInitialEffect(() => {\n setLinks(caseLinks);\n }, [caseLinks]);\n\n const linksWithHandlers = useMemo<AppShellProps['links']>(() => {\n return (links \|\| []).map(link => ({\n ...link,\n onClick(e: MouseEvent<HTMLAnchorElement>) {\n e.preventDefault();\n setLinks((prevLinks = []) => {\n return prevLinks.map(prevLink => {\n return { ...link, active: prevLink.name === link.name };\n });\n });\n args.onLinkClick?.(link.name);\n }\n }));\n }, [links]);\n\n const defaultCreateLinks = ['Vehicle Purchase'].map(name => ({\n name,\n onClick: () => {\n createModal(CreateCaseModal, { caseType: name });\n }\n }));\n\n const handleNotificationClick = (passedId: string) => {\n setNotifications(cur =>\n cur.map(({ id, unread, ...item }) => ({\n id,\n unread: passedId === id ? false : unread,\n ...item\n }))\n );\n };\n\n const handlePinToggle = (passedId: string) => {\n setRecents(cur =>\n cur.map(({ id, pinned, ...item }) => ({\n id,\n pinned: passedId === id ? !pinned : pinned,\n ...item\n }))\n );\n };\n\n const notificationViewItems = [\n {\n id: '234',\n items: args.notificationsEmpty ? [] : notifications,\n loading: args.notificationsLoading,\n onItemClick: handleNotificationClick,\n viewAll: {\n href: '#'\n },\n emptyText: 'No notifications'\n }\n ];\n\n const recentViewItems = [\n {\n id: '456',\n items: recents.filter(x => x.pinned),\n loading: args.pinsLoading,\n onItemPinToggle: handlePinToggle,\n viewAll: {\n href: '#'\n },\n displayPins: true,\n headingText: 'Pinned items',\n emptyText: 'No pinned items'\n },\n {\n id: '789',\n items: args.recentsEmpty ? [] : recents,\n loading: args.recentsLoading,\n onItemPinToggle: handlePinToggle,\n viewAll: {\n href: '#'\n },\n displayPins: true,\n headingText: 'Recently viewed',\n emptyText: 'No recents'\n }\n ];\n\n const newNotificationCountTimerRef = useRef(NaN);\n\n const defaultUtils = [\n {\n name: 'Notifications',\n visual: <Icon name='bell-solid' />,\n count: args.notificationsEmpty ? 0 : numNewNotifications,\n drawerView: <AppShellList listView={notificationViewItems} />,\n onDrawerOpen: () => {\n clearInterval(newNotificationCountTimerRef.current);\n setNumNewNotifications(0);\n },\n onDrawerClose: () => {\n if (windowIsAvailable) {\n // Mock new notifications arriving on a minute interval after the drawer closes.\n // Let's face it, you're popular.\n newNotificationCountTimerRef.current = window.setInterval(() => {\n setNumNewNotifications(cur => cur + 2);\n }, 60000);\n }\n }\n },\n {\n name: 'Recents',\n visual: <Icon name='clock-solid' />,\n drawerView: <AppShellList listView={recentViewItems} />\n }\n ];\n\n return (\n <AppShell\n appInfo={\n args.appInfo \|\| {\n href: args.href \|\| 'https://www.pega.com/',\n imageSrc:\n args.imageSrc \|\|\n 'https://pbs.twimg.com/profile_images/1410341211978752004/pLYjGIa8_bigger.jpg',\n fullImageSrc:\n args.fullImageSrc \|\|\n 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n appName: args.appName \|\| 'Cosmos AppShell',\n portalName: args.portalName \|\| 'Demo'\n }\n }\n searchInput={\n showSearch\n ? {\n onSearchChange: (value: string) => {\n setSearchVal(value);\n },\n value: searchVal\n }\n : undefined\n }\n appHeader={args.appHeader}\n caseTypes={args.casesTypesEmpty ? [] : args.createLinks \|\| defaultCreateLinks}\n links={linksWithHandlers}\n main={args.main \|\| defaultMainContent}\n cases={args.cases}\n banners={args.banners}\n operator={operatorData}\n utils={args.utils \|\| defaultUtils}\n environment={\n args.environmentName\n ? {\n name: args.environmentName,\n color: args.environmentColor\n }\n : undefined\n }\n />\n );\n};\n\nAppShellDemo.args = {\n appName: 'Cosmos AppShell',\n portalName: 'Demo',\n href: 'https://www.pega.com/',\n imageSrc: 'https://pbs.twimg.com/profile_images/1410341211978752004/pLYjGIa8_bigger.jpg',\n fullImageSrc: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n withSearch: true,\n appHeader: true,\n environmentName: 'dev',\n environmentColor: '#FFDBDE',\n notificationsEmpty: false,\n notificationsLoading: false,\n casesTypesEmpty: false,\n recentsEmpty: false,\n recentsLoading: false,\n pinsLoading: false\n};\n\nAppShellDemo.argTypes = {\n appName: { control: { type: 'text' } },\n portalName: { control: { type: 'text' } },\n href: { control: { type: 'text' } },\n imageSrc: { control: { type: 'text' } },\n fullImageSrc: { control: { type: 'text' } },\n withSearch: { control: { type: 'boolean' } },\n appHeader: { control: { type: 'boolean' } },\n environmentName: { control: { type: 'text' } },\n environmentColor: { control: { type: 'color' } },\n notificationsEmpty: { control: { type: 'boolean' } },\n notificationsLoading: { control: { type: 'boolean' } },\n casesTypesEmpty: { control: { type: 'boolean' } },\n recentsEmpty: { control: { type: 'boolean' } },\n recentsLoading: { control: { type: 'boolean' } },\n pinsLoading: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableAppShellProps {\n navColor?: string;\n headerColor?: string;\n}\n\nexport const ConfigurableAppShell: Story<ConfigurableAppShellProps> = (\n args: ConfigurableAppShellProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n 'app-shell': {\n nav: {\n 'background-color': args.navColor\n },\n header: {\n 'background-color': args.headerColor\n }\n }\n }\n }}\n >\n <AppShellDemo appHeader />\n </Configuration>\n );\n};\n\nConfigurableAppShell.args = {\n navColor: '#252c32',\n headerColor: '#e2f1ff'\n};\n\nConfigurableAppShell.argTypes = {\n navColor: { control: { type: 'color' } },\n headerColor: { control: { type: 'color' } }\n};\n"]}
1	+ {"version":3,"file":"AppShell.stories.js","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAyB,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEzE,OAAO,EACL,QAAQ,EAER,YAAY,EAEZ,MAAM,EACN,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,MAAM,EACN,MAAM,EACN,KAAK,EACL,QAAQ,EACR,eAAe,EACf,UAAU,EAEV,qBAAqB,EACrB,eAAe,EACf,iBAAiB,EACjB,aAAa,EAEd,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AACnG,OAAO,KAAK,cAAc,MAAM,oEAAoE,CAAC;AAErG,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjF,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,oBAAoB,EACpB,cAAc,EACd,YAAY,EACb,MAAM,kBAAkB,CAAC;AAE1B,YAAY,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC;AAE5C,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,QAAQ;IACnB,EAAE,EAAE,WAAW;IACf,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAkCV,MAAM,CAAC,MAAM,YAAY,GAA8B,CAAC,IAAwB,EAAE,EAAE;IAClF,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAwB,EAAE,EAAE;QAC7D,MAAM,EAAE,OAAO,EAAE,GAAG,eAAe,EAAE,CAAC;QACtC,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,UAAU,EAAE,CAAC;QAE3C,OAAO,CACL,KAAC,KAAK,IACJ,EAAE,EAAC,MAAM,EACT,OAAO,EAAE,OAAO,QAAQ,EAAE,EAC1B,OAAO,EACL,8BACE,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,uBAAiB,EACzC,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,CAAC,CAAY,EAAE,EAAE;4BACxB,CAAC,CAAC,cAAc,EAAE,CAAC;4BACnB,OAAO,EAAE,CAAC;4BACV,WAAW,CAAC,EAAE,OAAO,EAAE,GAAG,QAAQ,YAAY,EAAE,CAAC,CAAC;wBACpD,CAAC,wBAGM,IACR,YAGL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,aAC5B,KAAC,SAAS,IAAC,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAE,IAAI,GAAI,EAChD,MAAC,MAAM,IAAC,KAAK,EAAC,YAAY,aACxB,KAAC,MAAM,IAAC,KAAK,EAAC,EAAE,6BAAiB,EACjC,KAAC,MAAM,IAAC,KAAK,EAAC,MAAM,qBAAc,EAClC,KAAC,MAAM,IAAC,KAAK,EAAC,YAAY,2BAAoB,EAC9C,KAAC,MAAM,IAAC,KAAK,EAAC,OAAO,sBAAe,EACpC,KAAC,MAAM,IAAC,KAAK,EAAC,YAAY,2BAAoB,EAC9C,KAAC,MAAM,IAAC,KAAK,EAAC,mBAAuB,kCAA+B,EACpE,KAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,uBAAgB,EACtC,KAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,uBAAgB,EACtC,KAAC,MAAM,IAAC,KAAK,EAAC,YAAY,2BAAoB,EAC9C,KAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,uBAAgB,EACtC,KAAC,MAAM,IAAC,KAAK,EAAC,oBAAoB,mCAA4B,EAC9D,KAAC,MAAM,IAAC,KAAK,EAAC,eAAe,8BAAuB,IAC7C,EACT,KAAC,QAAQ,IAAC,KAAK,EAAC,qBAAqB,GAAG,EACxC,MAAC,MAAM,IAAC,KAAK,EAAC,cAAc,aAC1B,KAAC,MAAM,IAAC,KAAK,EAAC,EAAE,0BAAmB,EACnC,KAAC,MAAM,IAAC,KAAK,EAAC,MAAM,qBAAc,EAClC,KAAC,MAAM,IAAC,KAAK,EAAC,OAAO,sBAAe,EACpC,KAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,uBAAgB,EACtC,KAAC,MAAM,IAAC,KAAK,EAAC,OAAO,sBAAe,IAC7B,EACT,KAAC,KAAK,IAAC,KAAK,EAAC,cAAc,GAAG,EAC9B,KAAC,KAAK,IACJ,IAAI,EAAC,QAAQ,EACb,GAAG,EAAC,MAAM,EACV,GAAG,EAAC,MAAM,EACV,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,6BAA6B,GAClC,EACF,KAAC,KAAK,IACJ,IAAI,EAAC,QAAQ,EACb,GAAG,EAAC,MAAM,EACV,IAAI,EAAC,MAAM,EACX,GAAG,EAAC,OAAO,EACX,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,2BAA2B,GAChC,IACG,GACD,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,YAAY,CAAC;IACjD,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC;IAE1E,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,eAAe,EAAE,CAAC;IAClD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAyB,SAAS,CAAC,CAAC;IACtE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GACrC,QAAQ,CAAqC,oBAAoB,CAAC,CAAC;IACrE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CACpC,IAAI,CAAC,WAAW,IAAI,cAAc,CACnC,CAAC;IACF,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAC5D,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAC3C,CAAC;IACF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAoC,EAAE,CAAC,CAAC;IAC9E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAAiB,CAAC;IAEpE,qBAAqB,CAAC,GAAG,EAAE;QACzB,QAAQ,CAAC,SAAS,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,iBAAiB,GAAG,OAAO,CAAyB,GAAG,EAAE;QAC7D,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAChC,GAAG,IAAI;YACP,OAAO,CAAC,CAAgC;gBACtC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,QAAQ,CAAC,CAAC,SAAS,GAAG,EAAE,EAAE,EAAE;oBAC1B,OAAO,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;wBAC9B,OAAO,EAAE,GAAG,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;oBAC9D,CAAC,CAAC,CAAC;gBACL,CAAC,CAAC,CAAC;gBACH,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAChC,CAAC;SACF,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,kBAAkB,GAAG;QACzB,kBAAkB;QAClB,cAAc;QACd,gBAAgB;QAChB,iBAAiB;QACjB,UAAU;QACV,iBAAiB;QACjB,iBAAiB;QACjB,iBAAiB;QACjB,mBAAmB;KACpB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACb,IAAI;QACJ,OAAO,EAAE,GAAG,EAAE;YACZ,WAAW,CAAC,eAAe,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QACnD,CAAC;KACF,CAAC,CAAC,CAAC;IAEJ,MAAM,uBAAuB,GAAG,CAAC,QAAgB,EAAE,EAAE;QACnD,gBAAgB,CAAC,GAAG,CAAC,EAAE,CACrB,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;YACpC,EAAE;YACF,MAAM,EAAE,QAAQ,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;YACxC,GAAG,IAAI;SACR,CAAC,CAAC,CACJ,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC3C,UAAU,CAAC,GAAG,CAAC,EAAE,CACf,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;YACpC,EAAE;YACF,MAAM,EAAE,QAAQ,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;YAC1C,GAAG,IAAI;SACR,CAAC,CAAC,CACJ,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAE,EAAE;QAC/B,YAAY,CAAC,GAAG,CAAC,CAAC;QAClB,IAAI,aAAa,EAAE;YACjB,YAAY,CAAC,aAAa,CAAC,CAAC;YAC5B,gBAAgB,CAAC,IAAI,CAAC,CAAC;SACxB;QACD,UAAU,CAAC,EAAE,CAAC,CAAC;QACf,IAAI,GAAG,EAAE;YACP,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC9B,gBAAgB,CAAC,KAAK,CAAC,CAAC;gBACxB,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YACrE,CAAC,EAAE,IAAI,CAAC,CAAC;YACT,gBAAgB,CAAC,OAA4B,CAAC,CAAC;SAChD;IACH,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG;QAC5B;YACE,EAAE,EAAE,KAAK;YACT,KAAK,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;YACnD,OAAO,EAAE,IAAI,CAAC,oBAAoB;YAClC,WAAW,EAAE,uBAAuB;YACpC,OAAO,EAAE;gBACP,IAAI,EAAE,GAAG;aACV;YACD,SAAS,EAAE,kBAAkB;SAC9B;KACF,CAAC;IAEF,MAAM,eAAe,GAAG;QACtB;YACE,EAAE,EAAE,KAAK;YACT,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;YACpC,OAAO,EAAE,IAAI,CAAC,WAAW;YACzB,eAAe,EAAE,eAAe;YAChC,OAAO,EAAE;gBACP,IAAI,EAAE,GAAG;aACV;YACD,WAAW,EAAE,IAAI;YACjB,WAAW,EAAE,cAAc;YAC3B,SAAS,EAAE,iBAAiB;SAC7B;QACD;YACE,EAAE,EAAE,KAAK;YACT,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;YACvC,OAAO,EAAE,IAAI,CAAC,cAAc;YAC5B,eAAe,EAAE,eAAe;YAChC,OAAO,EAAE;gBACP,IAAI,EAAE,GAAG;aACV;YACD,WAAW,EAAE,IAAI;YACjB,WAAW,EAAE,iBAAiB;YAC9B,SAAS,EAAE,YAAY;SACxB;KACF,CAAC;IAEF,MAAM,4BAA4B,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAEjD,MAAM,YAAY,GAAG;QACnB;YACE,IAAI,EAAE,eAAe;YACrB,MAAM,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG;YAClC,KAAK,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,mBAAmB;YACxD,UAAU,EAAE,KAAC,YAAY,IAAC,QAAQ,EAAE,qBAAqB,GAAI;YAC7D,YAAY,EAAE,GAAG,EAAE;gBACjB,aAAa,CAAC,4BAA4B,CAAC,OAAO,CAAC,CAAC;gBACpD,sBAAsB,CAAC,CAAC,CAAC,CAAC;YAC5B,CAAC;YACD,aAAa,EAAE,GAAG,EAAE;gBAClB,IAAI,iBAAiB,EAAE;oBACrB,gFAAgF;oBAChF,iCAAiC;oBACjC,4BAA4B,CAAC,OAAO,GAAG,MAAM,CAAC,WAAW,CAAC,GAAG,EAAE;wBAC7D,sBAAsB,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;oBACzC,CAAC,EAAE,KAAK,CAAC,CAAC;iBACX;YACH,CAAC;SACF;QACD;YACE,IAAI,EAAE,SAAS;YACf,MAAM,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG;YACnC,UAAU,EAAE,KAAC,YAAY,IAAC,QAAQ,EAAE,eAAe,GAAI;SACxD;KACF,CAAC;IAEF,OAAO,CACL,KAAC,QAAQ,IACP,OAAO,EACL,IAAI,CAAC,OAAO,IAAI;YACd,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,uBAAuB;YAC1C,QAAQ,EACN,IAAI,CAAC,QAAQ;gBACb,8EAA8E;YAChF,YAAY,EACV,IAAI,CAAC,YAAY;gBACjB,uEAAuE;YACzE,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,iBAAiB;YAC1C,UAAU,EAAE,IAAI,CAAC,UAAU,IAAI,MAAM;SACtC,EAEH,WAAW,EACT,UAAU;YACR,CAAC,CAAC;gBACE,cAAc,EAAE,CAAC,KAAa,EAAE,EAAE;oBAChC,QAAQ,CAAC,KAAK,CAAC,CAAC;gBAClB,CAAC;gBACD,KAAK,EAAE,SAAS;gBAChB,aAAa,EAAE,OAAO;gBACtB,cAAc;gBACd,OAAO,EAAE,aAAa;gBACtB,OAAO,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC;gBACzB,kBAAkB,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE;aAClC;YACH,CAAC,CAAC,SAAS,EAEf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,IAAI,kBAAkB,EAC7E,KAAK,EAAE,iBAAiB,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,kBAAkB,EACrC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,YAAY,EACjC,WAAW,EACT,IAAI,CAAC,eAAe;YAClB,CAAC,CAAC;gBACE,IAAI,EAAE,IAAI,CAAC,eAAe;gBAC1B,KAAK,EAAE,IAAI,CAAC,gBAAgB;aAC7B;YACH,CAAC,CAAC,SAAS,EAEf,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,GAC7C,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,OAAO,EAAE,iBAAiB;IAC1B,UAAU,EAAE,MAAM;IAClB,IAAI,EAAE,uBAAuB;IAC7B,QAAQ,EAAE,8EAA8E;IACxF,YAAY,EAAE,uEAAuE;IACrF,UAAU,EAAE,IAAI;IAChB,SAAS,EAAE,IAAI;IACf,eAAe,EAAE,KAAK;IACtB,gBAAgB,EAAE,SAAS;IAC3B,kBAAkB,EAAE,KAAK;IACzB,oBAAoB,EAAE,KAAK;IAC3B,eAAe,EAAE,KAAK;IACtB,YAAY,EAAE,KAAK;IACnB,cAAc,EAAE,KAAK;IACrB,WAAW,EAAE,KAAK;CACnB,CAAC;AAEF,YAAY,CAAC,QAAQ,GAAG;IACtB,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACzC,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACvC,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC3C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC5C,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC3C,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC9C,gBAAgB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAChD,kBAAkB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACpD,oBAAoB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACtD,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACjD,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC9C,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAC;AAOF,MAAM,CAAC,MAAM,oBAAoB,GAAqC,CACpE,IAA+B,EAC/B,EAAE;IACF,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,WAAW,EAAE;oBACX,GAAG,EAAE;wBACH,kBAAkB,EAAE,IAAI,CAAC,QAAQ;qBAClC;oBACD,MAAM,EAAE;wBACN,kBAAkB,EAAE,IAAI,CAAC,WAAW;qBACrC;iBACF;aACF;SACF,YAED,KAAC,YAAY,IAAC,SAAS,SAAG,GACZ,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,oBAAoB,CAAC,IAAI,GAAG;IAC1B,QAAQ,EAAE,SAAS;IACnB,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,oBAAoB,CAAC,QAAQ,GAAG;IAC9B,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IACxC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;CAC5C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { MouseEvent, FormEvent, useState, useMemo, useRef } from 'react';\n\nimport {\n AppShell,\n AppShellProps,\n AppShellList,\n DrawerItemProps,\n Button,\n DateInput,\n Grid,\n Icon,\n registerIcon,\n Input,\n Select,\n Option,\n Modal,\n TextArea,\n useModalManager,\n useToaster,\n ForwardProps,\n useAfterInitialEffect,\n useModalContext,\n windowIsAvailable,\n Configuration,\n SearchInputProps\n} from '@pega/cosmos-react-core';\nimport * as bellSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bell-solid.icon';\nimport * as clockSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/clock-solid.icon';\n\nimport { recentSearches, searchResults } from '../SearchInput/SearchInput.mocks';\n\nimport {\n defaultLinks,\n defaultMainContent,\n defaultNotifications,\n defaultRecents,\n operatorData\n} from './AppShell.mocks';\n\nregisterIcon(bellSolidIcon, clockSolidIcon);\n\nexport default {\n title: 'Core/App Shell',\n component: AppShell,\n id: 'App Shell',\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface AppShellStoryProps {\n /** Demo props /\n main?: AppShellProps['main'];\n appInfo?: AppShellProps['appInfo'];\n searchPage?: AppShellProps['searchPage'];\n banners?: AppShellProps['banners'];\n cases?: AppShellProps['cases'];\n caseLinks?: AppShellProps['links'];\n createLinks?: any[];\n recentItems?: any[];\n utils?: AppShellProps['utils'];\n onLinkClick?: (name: string) => void;\n collapsedHoverMenus?: boolean;\n\n /* Storybook controls */\n appName?: AppShellProps['appInfo']['appName'];\n portalName?: AppShellProps['appInfo']['portalName'];\n href?: AppShellProps['appInfo']['href'];\n imageSrc?: AppShellProps['appInfo']['imageSrc'];\n fullImageSrc?: AppShellProps['appInfo']['fullImageSrc'];\n withSearch?: boolean;\n appHeader?: AppShellProps['appHeader'];\n environmentName?: string;\n environmentColor?: string;\n notificationsEmpty?: boolean;\n notificationsLoading?: boolean;\n casesTypesEmpty?: boolean;\n recentsEmpty?: boolean;\n recentsLoading?: boolean;\n pinsLoading?: boolean;\n}\n\nexport const AppShellDemo: Story<AppShellStoryProps> = (args: AppShellStoryProps) => {\n const CreateCaseModal = ({ caseType }: { caseType: string }) => {\n const { dismiss } = useModalContext();\n const { push: pushToaster } = useToaster();\n\n return (\n <Modal\n as='form'\n heading={`New ${caseType}`}\n actions={\n <>\n <Button onClick={dismiss}>Cancel</Button>\n <Button\n variant='primary'\n type='submit'\n onClick={(e: FormEvent) => {\n e.preventDefault();\n dismiss();\n pushToaster({ content: `${caseType} requested` });\n }}\n >\n Request\n </Button>\n </>\n }\n >\n <Grid container={{ rowGap: 2 }}>\n <DateInput label='Date Requested' info={null} />\n <Select label='Department'>\n <Option value=''>Select…</Option>\n <Option value='Fire'>Fire</Option>\n <Option value='Facilities'>Facilities</Option>\n <Option value='Parks'>Parks</Option>\n <Option value='Sanitation'>Sanitation</Option>\n <Option value='Parking & Traffic'>Parking & Traffic</Option>\n <Option value='Police'>Police</Option>\n <Option value='Courts'>Courts</Option>\n <Option value='Healthcare'>Healthcare</Option>\n <Option value='Energy'>Energy</Option>\n <Option value='Justice department'>Justice department</Option>\n <Option value='Environmental'>Environmental</Option>\n </Select>\n <TextArea label='Purpose of Purchase' />\n <Select label='Desired Make'>\n <Option value=''>Select...</Option>\n <Option value='Ford'>Ford</Option>\n <Option value='Dodge'>Dodge</Option>\n <Option value='Toyota'>Toyota</Option>\n <Option value='Tesla'>Tesla</Option>\n </Select>\n <Input label='Desired Make' />\n <Input\n type='number'\n min='2016'\n max='2021'\n label='Year'\n info='Must be within last 5 years'\n />\n <Input\n type='number'\n min='0.01'\n step='0.01'\n max='50000'\n label='Estimated Cost'\n info='May not exceed $50,000.00'\n />\n </Grid>\n </Modal>\n );\n };\n\n const caseLinks = args.caseLinks \|\| defaultLinks;\n const showSearch = args.withSearch !== undefined ? args.withSearch : true;\n\n const { create: createModal } = useModalManager();\n const [links, setLinks] = useState<AppShellProps['links']>(caseLinks);\n const [notifications, setNotifications] =\n useState<(DrawerItemProps & ForwardProps)[]>(defaultNotifications);\n const [recents, setRecents] = useState<(DrawerItemProps & ForwardProps)[]>(\n args.recentItems \|\| defaultRecents\n );\n const [numNewNotifications, setNumNewNotifications] = useState(\n notifications.filter(x => x.unread).length\n );\n const [searchVal, setSearchVal] = useState('');\n const [searchLoading, setSearchLoading] = useState(false);\n const [results, setResults] = useState<SearchInputProps['searchResults']>([]);\n const [searchTimeout, setSearchTimeout] = useState<number \| null>();\n\n useAfterInitialEffect(() => {\n setLinks(caseLinks);\n }, [caseLinks]);\n\n const linksWithHandlers = useMemo<AppShellProps['links']>(() => {\n return (links \|\| []).map(link => ({\n ...link,\n onClick(e: MouseEvent<HTMLAnchorElement>) {\n e.preventDefault();\n setLinks((prevLinks = []) => {\n return prevLinks.map(prevLink => {\n return { ...prevLink, active: prevLink.name === link.name };\n });\n });\n args.onLinkClick?.(link.name);\n }\n }));\n }, [links]);\n\n const defaultCreateLinks = [\n 'Vehicle Purchase',\n 'Vehicle Sale',\n 'Loan Refinance',\n 'Service Request',\n 'Trade In',\n 'Auction Invoice',\n 'Lender Approval',\n 'Inventory Audit',\n 'Sales Performance'\n ].map(name => ({\n name,\n onClick: () => {\n createModal(CreateCaseModal, { caseType: name });\n }\n }));\n\n const handleNotificationClick = (passedId: string) => {\n setNotifications(cur =>\n cur.map(({ id, unread, ...item }) => ({\n id,\n unread: passedId === id ? false : unread,\n ...item\n }))\n );\n };\n\n const handlePinToggle = (passedId: string) => {\n setRecents(cur =>\n cur.map(({ id, pinned, ...item }) => ({\n id,\n pinned: passedId === id ? !pinned : pinned,\n ...item\n }))\n );\n };\n\n const onSearch = (val: string) => {\n setSearchVal(val);\n if (searchTimeout) {\n clearTimeout(searchTimeout);\n setSearchTimeout(null);\n }\n setResults([]);\n if (val) {\n setSearchLoading(true);\n const timeout = setTimeout(() => {\n setSearchLoading(false);\n setResults(searchResults.filter(res => res.primary.includes(val)));\n }, 1000);\n setSearchTimeout(timeout as unknown as number);\n }\n };\n\n const notificationViewItems = [\n {\n id: '234',\n items: args.notificationsEmpty ? [] : notifications,\n loading: args.notificationsLoading,\n onItemClick: handleNotificationClick,\n viewAll: {\n href: '#'\n },\n emptyText: 'No notifications'\n }\n ];\n\n const recentViewItems = [\n {\n id: '456',\n items: recents.filter(x => x.pinned),\n loading: args.pinsLoading,\n onItemPinToggle: handlePinToggle,\n viewAll: {\n href: '#'\n },\n displayPins: true,\n headingText: 'Pinned items',\n emptyText: 'No pinned items'\n },\n {\n id: '789',\n items: args.recentsEmpty ? [] : recents,\n loading: args.recentsLoading,\n onItemPinToggle: handlePinToggle,\n viewAll: {\n href: '#'\n },\n displayPins: true,\n headingText: 'Recently viewed',\n emptyText: 'No recents'\n }\n ];\n\n const newNotificationCountTimerRef = useRef(NaN);\n\n const defaultUtils = [\n {\n name: 'Notifications',\n visual: <Icon name='bell-solid' />,\n count: args.notificationsEmpty ? 0 : numNewNotifications,\n drawerView: <AppShellList listView={notificationViewItems} />,\n onDrawerOpen: () => {\n clearInterval(newNotificationCountTimerRef.current);\n setNumNewNotifications(0);\n },\n onDrawerClose: () => {\n if (windowIsAvailable) {\n // Mock new notifications arriving on a minute interval after the drawer closes.\n // Let's face it, you're popular.\n newNotificationCountTimerRef.current = window.setInterval(() => {\n setNumNewNotifications(cur => cur + 2);\n }, 60000);\n }\n }\n },\n {\n name: 'Recents',\n visual: <Icon name='clock-solid' />,\n drawerView: <AppShellList listView={recentViewItems} />\n }\n ];\n\n return (\n <AppShell\n appInfo={\n args.appInfo \|\| {\n href: args.href \|\| 'https://www.pega.com/',\n imageSrc:\n args.imageSrc \|\|\n 'https://pbs.twimg.com/profile_images/1531984159698198531/bEniqFN1_bigger.jpg',\n fullImageSrc:\n args.fullImageSrc \|\|\n 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n appName: args.appName \|\| 'Cosmos AppShell',\n portalName: args.portalName \|\| 'Demo'\n }\n }\n searchInput={\n showSearch\n ? {\n onSearchChange: (value: string) => {\n onSearch(value);\n },\n value: searchVal,\n searchResults: results,\n recentSearches,\n loading: searchLoading,\n filters: ['Story', 'Bug'],\n advancedSearchLink: { href: '/' }\n }\n : undefined\n }\n appHeader={args.appHeader}\n searchPage={args.searchPage}\n caseTypes={args.casesTypesEmpty ? [] : args.createLinks \|\| defaultCreateLinks}\n links={linksWithHandlers}\n main={args.main \|\| defaultMainContent}\n cases={args.cases}\n banners={args.banners}\n operator={operatorData}\n utils={args.utils \|\| defaultUtils}\n environment={\n args.environmentName\n ? {\n name: args.environmentName,\n color: args.environmentColor\n }\n : undefined\n }\n collapsedHoverMenus={args.collapsedHoverMenus}\n />\n );\n};\n\nAppShellDemo.args = {\n appName: 'Cosmos AppShell',\n portalName: 'Demo',\n href: 'https://www.pega.com/',\n imageSrc: 'https://pbs.twimg.com/profile_images/1410341211978752004/pLYjGIa8_bigger.jpg',\n fullImageSrc: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n withSearch: true,\n appHeader: true,\n environmentName: 'dev',\n environmentColor: '#FFDBDE',\n notificationsEmpty: false,\n notificationsLoading: false,\n casesTypesEmpty: false,\n recentsEmpty: false,\n recentsLoading: false,\n pinsLoading: false\n};\n\nAppShellDemo.argTypes = {\n appName: { control: { type: 'text' } },\n portalName: { control: { type: 'text' } },\n href: { control: { type: 'text' } },\n imageSrc: { control: { type: 'text' } },\n fullImageSrc: { control: { type: 'text' } },\n withSearch: { control: { type: 'boolean' } },\n appHeader: { control: { type: 'boolean' } },\n environmentName: { control: { type: 'text' } },\n environmentColor: { control: { type: 'color' } },\n notificationsEmpty: { control: { type: 'boolean' } },\n notificationsLoading: { control: { type: 'boolean' } },\n casesTypesEmpty: { control: { type: 'boolean' } },\n recentsEmpty: { control: { type: 'boolean' } },\n recentsLoading: { control: { type: 'boolean' } },\n pinsLoading: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableAppShellProps {\n navColor?: string;\n headerColor?: string;\n}\n\nexport const ConfigurableAppShell: Story<ConfigurableAppShellProps> = (\n args: ConfigurableAppShellProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n 'app-shell': {\n nav: {\n 'background-color': args.navColor\n },\n header: {\n 'background-color': args.headerColor\n }\n }\n }\n }}\n >\n <AppShellDemo appHeader />\n </Configuration>\n );\n};\n\nConfigurableAppShell.args = {\n navColor: '#252c32',\n headerColor: '#e2f1ff'\n};\n\nConfigurableAppShell.argTypes = {\n navColor: { control: { type: 'color' } },\n headerColor: { control: { type: 'color' } }\n};\n"]}

package/lib/core/Banner/Banner.stories.d.ts CHANGED Viewed

@@ -10,6 +10,5 @@ interface ConfigurableErrorBannerProps {
 }
 export declare const ConfigurableErrorBanner: Story<ConfigurableErrorBannerProps>;
 export declare const ShownInForm: Story;
-export declare const ShownInCaseView: Story;
 export declare const ShownInAppShell: Story;
 //# sourceMappingURL=Banner.stories.d.ts.map

package/lib/core/Banner/Banner.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Banner.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Banner/Banner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;~~AAU~~/C,wBAGU;AAEV,eAAO,MAAM,aAAa,EAAE,KAiB3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAczB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAa3B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAkBxB,CAAC;AAEF,UAAU,4BAA4B;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,4BAA4B,CA4BvE,CAAC;AAcF,eAAO,MAAM,WAAW,EAAE,KA6DzB,CAAC;AAKF,eAAO,MAAM,eAAe,EAAE,~~KAiB7B,CAAC;AASF,eAAO,MAAM,eAAe,EAAE,~~KAsB7B,CAAC"}
1	+ {"version":3,"file":"Banner.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Banner/Banner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAS/C,wBAGU;AAEV,eAAO,MAAM,aAAa,EAAE,KAiB3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAczB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAa3B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAkBxB,CAAC;AAEF,UAAU,4BAA4B;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,4BAA4B,CA4BvE,CAAC;AAcF,eAAO,MAAM,WAAW,EAAE,KA6DzB,CAAC;AAKF,eAAO,MAAM,eAAe,EAAE,KAsB7B,CAAC"}

package/lib/core/Banner/Banner.stories.js CHANGED Viewed

@@ -2,7 +2,6 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useState, useCallback, useReducer } from 'react';
 import { Banner, Button, Configuration, Form, Input, Link } from '@pega/cosmos-react-core';
 import { AppShellDemo } from '../AppShell/AppShell.stories';
-import { CaseViewDemo } from '../../work/CaseView/CaseView.stories';
 import { demoFields, fieldReducer, formActions } from './Banner.mocks';
 export default {
     title: 'Core/Banner',
@@ -76,21 +75,11 @@ export const ShownInForm = () => {
         }) }));
 };
 // -----------------------------------------------------------------------------
-// CaseView story
-// -----------------------------------------------------------------------------
-export const ShownInCaseView = () => {
-    const [hasBanner, setHasBanner] = useState(true);
-    return (_jsx(CaseViewDemo, { banners: hasBanner && (_jsx(Banner, { id: 'case-view-error', heading: 'Waring', onDismiss: () => setHasBanner(false), variant: 'warning', messages: ['Your submission is missing some important documents.'] })) }));
-};
-ShownInCaseView.parameters = {
-    layout: 'fullscreen'
-};
-// -----------------------------------------------------------------------------
 // AppShell story
 // -----------------------------------------------------------------------------
 export const ShownInAppShell = () => {
-    const [hasBanner, setHasBanner] = useState([]);
-    return (_jsx(AppShellDemo, { banners: hasBanner && (_jsx(Banner, { id: 'app-shell-banner-success', heading: '2 items uploaded successfully', onDismiss: () => setHasBanner([]), variant: 'success', messages: ['pega_data.json', 'business-earnings.xlsx'], action: _jsx(Link, { target: '_blank', href: 'https://www.pega.com', children: "Link Here!" }) })) }));
+    const [hasBanner, setHasBanner] = useState(true);
+    return (_jsx(AppShellDemo, { banners: hasBanner && (_jsx(Banner, { id: 'app-shell-banner-success', heading: '2 items uploaded successfully', onDismiss: () => setHasBanner(false), variant: 'success', messages: ['pega_data.json', 'business-earnings.xlsx'], action: _jsx(Link, { target: '_blank', href: 'https://www.pega.com', children: "Link Here!" }) })) }));
 };
 ShownInAppShell.parameters = {
     layout: 'fullscreen'

package/lib/core/Banner/Banner.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Banner.stories.js","sourceRoot":"","sources":["../../../src/core/Banner/Banner.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useCallback, FormEvent, useReducer } from 'react';\n\nimport { Banner, Button, Configuration, Form, Input, Link } from '@pega/cosmos-react-core';\n\nimport { AppShellDemo } from '../AppShell/AppShell.stories';\nimport { CaseViewDemo } from '../../work/CaseView/CaseView.stories';\n\nimport { demoFields, DemoFormField, fieldReducer, formActions } from './Banner.mocks';\n\nexport default {\n title: 'Core/Banner',\n component: Banner\n} as Meta;\n\nexport const SuccessBanner: Story = () => {\n const [showBanner, setShowBanner] = useState(true);\n\n return (\n <>\n {!showBanner && <Button onClick={() => setShowBanner(true)}>Open banner</Button>}\n {showBanner && (\n <Banner\n id='success'\n variant='success'\n onDismiss={() => setShowBanner(false)}\n heading='2 items uploaded successfully'\n messages={['pega_data.json', 'business-earnings.xlsx']}\n />\n )}\n </>\n );\n};\n\nexport const ErrorBanner: Story = () => {\n return (\n <Banner\n id='error'\n variant='urgent'\n heading='Error'\n action={\n <div>\n <Button variant='link'>Try again</Button>\n </div>\n }\n messages={['Your request failed to send!', 'Please review your request and try again']}\n />\n );\n};\n\nexport const WarningBanner: Story = () => {\n return (\n <Banner\n id='warning'\n variant='warning'\n action={\n <div>\n <Button variant='link'>Why this matters</Button>\n </div>\n }\n messages={['Your submission is missing some important documents.']}\n />\n );\n};\n\nexport const InfoBanner: Story = () => {\n const [showBanner, setShowBanner] = useState(true);\n\n return (\n <>\n {!showBanner && <Button onClick={() => setShowBanner(true)}>Open banner</Button>}\n {showBanner && (\n <Banner\n id='info'\n variant='info'\n onDismiss={() => setShowBanner(false)}\n messages={[\n 'US-123456 is currently being modified by Jane Smith and may not be edited simultaneously.'\n ]}\n />\n )}\n </>\n );\n};\n\ninterface ConfigurableErrorBannerProps {\n background?: string;\n}\n\nexport const ConfigurableErrorBanner: Story<ConfigurableErrorBannerProps> = (\n args: ConfigurableErrorBannerProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n banner: {\n urgent: {\n background: args.background\n }\n }\n }\n }}\n >\n <Banner\n id='error'\n variant='urgent'\n heading='Error'\n action={\n <div>\n <Button variant='link'>Try again</Button>\n </div>\n }\n messages={['Your request failed to send!', 'Please review your request and try again']}\n />\n </Configuration>\n );\n};\n\nConfigurableErrorBanner.args = {\n background: '#d91c29'\n};\n\nConfigurableErrorBanner.argTypes = {\n background: { control: { type: 'color' } }\n};\n\n// -----------------------------------------------------------------------------\n// Form story\n// -----------------------------------------------------------------------------\n\nexport const ShownInForm: Story = () => {\n const [fields, setField] = useReducer(fieldReducer, demoFields);\n const [banner, setBanner] = useState<any>();\n\n const onSubmit = useCallback((e: FormEvent) => {\n e.preventDefault();\n const errorFields = fields.filter(field => !field.validator(field.value));\n let heading = 'Wow, great job!';\n let variant: 'success' \| 'urgent' = 'success';\n let messages = fields.map(f => `${f.name} was typed perfectly`);\n let bannerAction;\n\n if (errorFields.length > 0) {\n heading = \"I'm sorry you're having trouble\";\n variant = 'urgent';\n messages = errorFields.map(f => `${f.name} was not typed correctly`);\n bannerAction = (\n <Link href='https://community.pega.com/support' target='_blank'>\n Visit Pega support for assistance\n </Link>\n );\n }\n\n setBanner(\n <Banner\n {...{\n heading,\n variant,\n messages,\n id: 'formBanner',\n action: bannerAction,\n onDismiss() {\n setBanner(false);\n }\n }}\n />\n );\n }, []);\n\n return (\n <Form\n banners={banner}\n actions={formActions}\n onSubmit={onSubmit}\n style={{ margin: 'auto', padding: '2.5rem', maxWidth: '37.5rem' }}\n >\n {fields.map((field: DemoFormField) => {\n return (\n <Input\n key={field.name}\n autoComplete='off'\n name={field.name}\n label={field.label}\n info={field.info}\n value={field.value}\n onChange={(e: InputEvent) => setField(e.target as any)}\n />\n );\n })}\n </Form>\n );\n};\n\n// -----------------------------------------------------------------------------\n// CaseView story\n// -----------------------------------------------------------------------------\nexport const ShownInCaseView: Story = () => {\n const [hasBanner, setHasBanner] = useState(true);\n return (\n <CaseViewDemo\n banners={\n hasBanner && (\n <Banner\n id='case-view-error'\n heading='Waring'\n onDismiss={() => setHasBanner(false)}\n variant='warning'\n messages={['Your submission is missing some important documents.']}\n />\n )\n }\n />\n );\n};\n\nShownInCaseView.parameters = {\n layout: 'fullscreen'\n};\n\n// -----------------------------------------------------------------------------\n// AppShell story\n// -----------------------------------------------------------------------------\nexport const ShownInAppShell: Story = () => {\n const [hasBanner, setHasBanner] = useState([]);\n return (\n <AppShellDemo\n banners={\n hasBanner && (\n <Banner\n id='app-shell-banner-success'\n heading='2 items uploaded successfully'\n onDismiss={() => setHasBanner([])}\n variant='success'\n messages={['pega_data.json', 'business-earnings.xlsx']}\n action={\n <Link target='_blank' href='https://www.pega.com'>\n Link Here!\n </Link>\n }\n />\n )\n }\n />\n );\n};\n\nShownInAppShell.parameters = {\n layout: 'fullscreen'\n};\n"]}
1	+ {"version":3,"file":"Banner.stories.js","sourceRoot":"","sources":["../../../src/core/Banner/Banner.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useCallback, FormEvent, useReducer } from 'react';\n\nimport { Banner, Button, Configuration, Form, Input, Link } from '@pega/cosmos-react-core';\n\nimport { AppShellDemo } from '../AppShell/AppShell.stories';\n\nimport { demoFields, DemoFormField, fieldReducer, formActions } from './Banner.mocks';\n\nexport default {\n title: 'Core/Banner',\n component: Banner\n} as Meta;\n\nexport const SuccessBanner: Story = () => {\n const [showBanner, setShowBanner] = useState(true);\n\n return (\n <>\n {!showBanner && <Button onClick={() => setShowBanner(true)}>Open banner</Button>}\n {showBanner && (\n <Banner\n id='success'\n variant='success'\n onDismiss={() => setShowBanner(false)}\n heading='2 items uploaded successfully'\n messages={['pega_data.json', 'business-earnings.xlsx']}\n />\n )}\n </>\n );\n};\n\nexport const ErrorBanner: Story = () => {\n return (\n <Banner\n id='error'\n variant='urgent'\n heading='Error'\n action={\n <div>\n <Button variant='link'>Try again</Button>\n </div>\n }\n messages={['Your request failed to send!', 'Please review your request and try again']}\n />\n );\n};\n\nexport const WarningBanner: Story = () => {\n return (\n <Banner\n id='warning'\n variant='warning'\n action={\n <div>\n <Button variant='link'>Why this matters</Button>\n </div>\n }\n messages={['Your submission is missing some important documents.']}\n />\n );\n};\n\nexport const InfoBanner: Story = () => {\n const [showBanner, setShowBanner] = useState(true);\n\n return (\n <>\n {!showBanner && <Button onClick={() => setShowBanner(true)}>Open banner</Button>}\n {showBanner && (\n <Banner\n id='info'\n variant='info'\n onDismiss={() => setShowBanner(false)}\n messages={[\n 'US-123456 is currently being modified by Jane Smith and may not be edited simultaneously.'\n ]}\n />\n )}\n </>\n );\n};\n\ninterface ConfigurableErrorBannerProps {\n background?: string;\n}\n\nexport const ConfigurableErrorBanner: Story<ConfigurableErrorBannerProps> = (\n args: ConfigurableErrorBannerProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n banner: {\n urgent: {\n background: args.background\n }\n }\n }\n }}\n >\n <Banner\n id='error'\n variant='urgent'\n heading='Error'\n action={\n <div>\n <Button variant='link'>Try again</Button>\n </div>\n }\n messages={['Your request failed to send!', 'Please review your request and try again']}\n />\n </Configuration>\n );\n};\n\nConfigurableErrorBanner.args = {\n background: '#d91c29'\n};\n\nConfigurableErrorBanner.argTypes = {\n background: { control: { type: 'color' } }\n};\n\n// -----------------------------------------------------------------------------\n// Form story\n// -----------------------------------------------------------------------------\n\nexport const ShownInForm: Story = () => {\n const [fields, setField] = useReducer(fieldReducer, demoFields);\n const [banner, setBanner] = useState<any>();\n\n const onSubmit = useCallback((e: FormEvent) => {\n e.preventDefault();\n const errorFields = fields.filter(field => !field.validator(field.value));\n let heading = 'Wow, great job!';\n let variant: 'success' \| 'urgent' = 'success';\n let messages = fields.map(f => `${f.name} was typed perfectly`);\n let bannerAction;\n\n if (errorFields.length > 0) {\n heading = \"I'm sorry you're having trouble\";\n variant = 'urgent';\n messages = errorFields.map(f => `${f.name} was not typed correctly`);\n bannerAction = (\n <Link href='https://community.pega.com/support' target='_blank'>\n Visit Pega support for assistance\n </Link>\n );\n }\n\n setBanner(\n <Banner\n {...{\n heading,\n variant,\n messages,\n id: 'formBanner',\n action: bannerAction,\n onDismiss() {\n setBanner(false);\n }\n }}\n />\n );\n }, []);\n\n return (\n <Form\n banners={banner}\n actions={formActions}\n onSubmit={onSubmit}\n style={{ margin: 'auto', padding: '2.5rem', maxWidth: '37.5rem' }}\n >\n {fields.map((field: DemoFormField) => {\n return (\n <Input\n key={field.name}\n autoComplete='off'\n name={field.name}\n label={field.label}\n info={field.info}\n value={field.value}\n onChange={(e: InputEvent) => setField(e.target as any)}\n />\n );\n })}\n </Form>\n );\n};\n\n// -----------------------------------------------------------------------------\n// AppShell story\n// -----------------------------------------------------------------------------\nexport const ShownInAppShell: Story = () => {\n const [hasBanner, setHasBanner] = useState(true);\n return (\n <AppShellDemo\n banners={\n hasBanner && (\n <Banner\n id='app-shell-banner-success'\n heading='2 items uploaded successfully'\n onDismiss={() => setHasBanner(false)}\n variant='success'\n messages={['pega_data.json', 'business-earnings.xlsx']}\n action={\n <Link target='_blank' href='https://www.pega.com'>\n Link Here!\n </Link>\n }\n />\n )\n }\n />\n );\n};\n\nShownInAppShell.parameters = {\n layout: 'fullscreen'\n};\n"]}

package/lib/core/Checkbox/Checkbox.stories.d.ts CHANGED Viewed

@@ -2,8 +2,11 @@ import { Meta, Story } from '@storybook/react';
 import { RadioCheckProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const DefaultCheckbox: Story<RadioCheckProps>;
-export declare const CheckboxCard: Story<RadioCheckProps>;
+interface CheckboxStoryProps extends RadioCheckProps {
+    showAdditionalInfo: boolean;
+}
+export declare const DefaultCheckbox: Story<CheckboxStoryProps>;
+export declare const CheckboxCard: Story<CheckboxStoryProps>;
 interface ConfigurableCheckboxProps extends RadioCheckProps {
     size?: string;
     backgroundColor?: string;
@@ -14,6 +17,7 @@ interface ConfigurableCheckboxProps extends RadioCheckProps {
     labelFontWeight?: string;
     checkedBackgroundColor?: string;
     checkedBorderColor?: string;
+    showAdditionalInfo?: boolean;
 }
 export declare const ConfigurableCheckbox: Story<ConfigurableCheckboxProps>;
 //# sourceMappingURL=Checkbox.stories.d.ts.map

package/lib/core/Checkbox/Checkbox.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAA2B,eAAe,EAAE,MAAM,yBAAyB,CAAC;;AAEnF,~~wBAmBU~~;AAEV,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,~~eAAe~~,~~CAWlD~~,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,~~eAAe~~,~~CAY/C~~,CAAC;AAEF,UAAU,yBAA0B,SAAQ,eAAe;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;~~CAC7B~~;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,~~CA8BjE~~,CAAC"}
1	+ {"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAA2B,eAAe,EAAE,MAAM,yBAAyB,CAAC;;AAEnF,wBAqBU;AAEV,UAAU,kBAAmB,SAAQ,eAAe;IAClD,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,kBAAkB,CAmBrD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,CAoBlD,CAAC;AAEF,UAAU,yBAA0B,SAAQ,eAAe;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CAwCjE,CAAC"}

package/lib/core/Checkbox/Checkbox.stories.js CHANGED Viewed

@@ -9,7 +9,8 @@ export default {
         required: false,
         disabled: false,
         readOnly: false,
-        indeterminate: false
+        indeterminate: false,
+        showAdditionalInfo: true
     },
     argTypes: {
         status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
@@ -17,14 +18,25 @@ export default {
         required: { control: { type: 'boolean' } },
         disabled: { control: { type: 'boolean' } },
         readOnly: { control: { type: 'boolean' } },
-        indeterminate: { control: { type: 'boolean' } }
+        indeterminate: { control: { type: 'boolean' } },
+        showAdditionalInfo: { control: { type: 'boolean' } }
     }
 };
 export const DefaultCheckbox = (args) => {
-    return (_jsx(Checkbox, { status: args.status, label: args.label, required: args.required, disabled: args.disabled, readOnly: args.readOnly, indeterminate: args.indeterminate }));
+    return (_jsx(Checkbox, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined, status: args.status, label: args.label, required: args.required, disabled: args.disabled, readOnly: args.readOnly, indeterminate: args.indeterminate }));
 };
 export const CheckboxCard = (args) => {
-    return (_jsx(Checkbox, { variant: 'card', status: args.status, label: args.label, required: args.required, disabled: args.disabled, readOnly: args.readOnly, indeterminate: args.indeterminate }));
+    return (_jsx(Checkbox, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined, variant: 'card', status: args.status, label: args.label, required: args.required, disabled: args.disabled, readOnly: args.readOnly, indeterminate: args.indeterminate }));
 };
 export const ConfigurableCheckbox = (args) => {
     return (_jsx(Configuration, { theme: {
@@ -47,7 +59,12 @@ export const ConfigurableCheckbox = (args) => {
                     }
                 }
             }
-        }, children: _jsx(Checkbox, { label: 'Configurable Checkbox' }) }));
+        }, children: _jsx(Checkbox, { additionalInfo: args.showAdditionalInfo
+                ? {
+                    heading: 'Additional Info',
+                    content: 'Some additional info'
+                }
+                : undefined, label: 'Configurable Checkbox' }) }));
 };
 ConfigurableCheckbox.args = {
     size: '1.25rem',
@@ -58,7 +75,8 @@ ConfigurableCheckbox.args = {
     labelColor: '#939393',
     labelFontWeight: '400',
     checkedBackgroundColor: '#076bc9',
-    checkedBorderColor: '#076bc9'
+    checkedBorderColor: '#076bc9',
+    showAdditionalInfo: true
 };
 ConfigurableCheckbox.argTypes = {
     size: { control: { type: 'text' } },
@@ -75,6 +93,7 @@ ConfigurableCheckbox.argTypes = {
     required: { table: { disable: true } },
     disabled: { table: { disable: true } },
     readOnly: { table: { disable: true } },
-    indeterminate: { table: { disable: true } }
+    indeterminate: { table: { disable: true } },
+    showAdditionalInfo: { control: { type: 'boolean' } }
 };
 //# sourceMappingURL=Checkbox.stories.js.map

package/lib/core/Checkbox/Checkbox.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.stories.js","sourceRoot":"","sources":["../../../src/core/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAmB,MAAM,yBAAyB,CAAC;AAEnF,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE;QACJ,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,kBAAkB;QACzB,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,aAAa,EAAE,KAAK;~~KACrB~~;IACD,QAAQ,EAAE;QACR,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC5F,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACpC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;~~KAChD~~;CACM,CAAC;~~AAEV~~,MAAM,CAAC,MAAM,eAAe,~~GAA2B~~,CAAC,~~IAAqB~~,EAAE,EAAE;~~IAC/E~~,OAAO,CACL,KAAC,QAAQ,IACP,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,GACjC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,~~GAA2B~~,CAAC,~~IAAqB~~,EAAE,EAAE;~~IAC5E~~,OAAO,CACL,KAAC,QAAQ,IACP,OAAO,EAAC,MAAM,EACd,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,GACjC,CACH,CAAC;AACJ,CAAC,CAAC;~~AAcF~~,MAAM,CAAC,MAAM,oBAAoB,GAAqC,CACpE,IAA+B,EAC/B,EAAE;IACF,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,QAAQ,EAAE;oBACR,eAAe,EAAE,IAAI,CAAC,YAAY;iBACnC;gBACD,aAAa,EAAE;oBACb,cAAc,EAAE,IAAI,CAAC,WAAW;oBAChC,cAAc,EAAE,IAAI,CAAC,WAAW;oBAChC,kBAAkB,EAAE,IAAI,CAAC,eAAe;oBACxC,KAAK,EAAE;wBACL,KAAK,EAAE,IAAI,CAAC,UAAU;wBACtB,aAAa,EAAE,IAAI,CAAC,eAAe;qBACpC;oBACD,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,UAAU,EAAE;wBACV,kBAAkB,EAAE,IAAI,CAAC,sBAAsB;wBAC/C,cAAc,EAAE,IAAI,CAAC,kBAAkB;qBACxC;iBACF;aACF;SACF,YAED,KAAC,QAAQ,~~IAAC~~,KAAK,EAAC,uBAAuB,~~GAAG~~,~~GAC5B~~,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,oBAAoB,CAAC,IAAI,GAAG;IAC1B,IAAI,EAAE,SAAS;IACf,eAAe,EAAE,SAAS;IAC1B,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,WAAW;IACxB,YAAY,EAAE,KAAK;IACnB,UAAU,EAAE,SAAS;IACrB,eAAe,EAAE,KAAK;IACtB,sBAAsB,EAAE,SAAS;IACjC,kBAAkB,EAAE,SAAS;~~CAC9B~~,CAAC;AAEF,oBAAoB,CAAC,QAAQ,GAAG;IAC9B,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC/C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC3C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC3C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC1C,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC9C,sBAAsB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IACtD,kBAAkB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAClD,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACpC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACnC,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACtC,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACtC,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACtC,aAAa,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;~~CAC5C~~,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Checkbox, Configuration, RadioCheckProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Checkbox',\n component: Checkbox,\n args: {\n status: undefined,\n label: 'Check me, please',\n required: false,\n disabled: false,\n readOnly: false,\n indeterminate: false\n },\n argTypes: {\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n label: { control: { type: 'text' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } },\n indeterminate: { control: { type: 'boolean' } }\n }\n} as Meta;\n\nexport const DefaultCheckbox: Story<~~RadioCheckProps~~> = (args: ~~RadioCheckProps~~) => {\n return (\n <Checkbox\n status={args.status}\n label={args.label}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n indeterminate={args.indeterminate}\n />\n );\n};\n\nexport const CheckboxCard: Story<~~RadioCheckProps~~> = (args: ~~RadioCheckProps~~) => {\n return (\n <Checkbox\n variant='card'\n status={args.status}\n label={args.label}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n indeterminate={args.indeterminate}\n />\n );\n};\n\ninterface ConfigurableCheckboxProps extends RadioCheckProps {\n size?: string;\n backgroundColor?: string;\n borderColor?: string;\n borderWidth?: string;\n borderRadius?: string;\n labelColor?: string;\n labelFontWeight?: string;\n checkedBackgroundColor?: string;\n checkedBorderColor?: string;\n}\n\nexport const ConfigurableCheckbox: Story<ConfigurableCheckboxProps> = (\n args: ConfigurableCheckboxProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n checkbox: {\n 'border-radius': args.borderRadius\n },\n 'radio-check': {\n 'border-color': args.borderColor,\n 'border-width': args.borderWidth,\n 'background-color': args.backgroundColor,\n label: {\n color: args.labelColor,\n 'font-weight': args.labelFontWeight\n },\n size: args.size,\n ':checked': {\n 'background-color': args.checkedBackgroundColor,\n 'border-color': args.checkedBorderColor\n }\n }\n }\n }}\n >\n <Checkbox label='Configurable Checkbox' />\n </Configuration>\n );\n};\n\nConfigurableCheckbox.args = {\n size: '1.25rem',\n backgroundColor: '#ffffff',\n borderColor: '#939393',\n borderWidth: '0.0625rem',\n borderRadius: '0.5',\n labelColor: '#939393',\n labelFontWeight: '400',\n checkedBackgroundColor: '#076bc9',\n checkedBorderColor: '#076bc9'\n};\n\nConfigurableCheckbox.argTypes = {\n size: { control: { type: 'text' } },\n backgroundColor: { control: { type: 'color' } },\n borderColor: { control: { type: 'color' } },\n borderWidth: { control: { type: 'text' } },\n borderRadius: { control: { type: 'text' } },\n labelColor: { control: { type: 'color' } },\n labelFontWeight: { control: { type: 'text' } },\n checkedBackgroundColor: { control: { type: 'color' } },\n checkedBorderColor: { control: { type: 'color' } },\n status: { table: { disable: true } },\n label: { table: { disable: true } },\n required: { table: { disable: true } },\n disabled: { table: { disable: true } },\n readOnly: { table: { disable: true } },\n indeterminate: { table: { disable: true } }\n};\n"]}
1	+ {"version":3,"file":"Checkbox.stories.js","sourceRoot":"","sources":["../../../src/core/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Checkbox, Configuration, RadioCheckProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Checkbox',\n component: Checkbox,\n args: {\n status: undefined,\n label: 'Check me, please',\n required: false,\n disabled: false,\n readOnly: false,\n indeterminate: false,\n showAdditionalInfo: true\n },\n argTypes: {\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n label: { control: { type: 'text' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } },\n indeterminate: { control: { type: 'boolean' } },\n showAdditionalInfo: { control: { type: 'boolean' } }\n }\n} as Meta;\n\ninterface CheckboxStoryProps extends RadioCheckProps {\n showAdditionalInfo: boolean;\n}\n\nexport const DefaultCheckbox: Story<CheckboxStoryProps> = (args: CheckboxStoryProps) => {\n return (\n <Checkbox\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Some additional info'\n }\n : undefined\n }\n status={args.status}\n label={args.label}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n indeterminate={args.indeterminate}\n />\n );\n};\n\nexport const CheckboxCard: Story<CheckboxStoryProps> = (args: CheckboxStoryProps) => {\n return (\n <Checkbox\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Some additional info'\n }\n : undefined\n }\n variant='card'\n status={args.status}\n label={args.label}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n indeterminate={args.indeterminate}\n />\n );\n};\n\ninterface ConfigurableCheckboxProps extends RadioCheckProps {\n size?: string;\n backgroundColor?: string;\n borderColor?: string;\n borderWidth?: string;\n borderRadius?: string;\n labelColor?: string;\n labelFontWeight?: string;\n checkedBackgroundColor?: string;\n checkedBorderColor?: string;\n showAdditionalInfo?: boolean;\n}\n\nexport const ConfigurableCheckbox: Story<ConfigurableCheckboxProps> = (\n args: ConfigurableCheckboxProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n checkbox: {\n 'border-radius': args.borderRadius\n },\n 'radio-check': {\n 'border-color': args.borderColor,\n 'border-width': args.borderWidth,\n 'background-color': args.backgroundColor,\n label: {\n color: args.labelColor,\n 'font-weight': args.labelFontWeight\n },\n size: args.size,\n ':checked': {\n 'background-color': args.checkedBackgroundColor,\n 'border-color': args.checkedBorderColor\n }\n }\n }\n }}\n >\n <Checkbox\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Some additional info'\n }\n : undefined\n }\n label='Configurable Checkbox'\n />\n </Configuration>\n );\n};\n\nConfigurableCheckbox.args = {\n size: '1.25rem',\n backgroundColor: '#ffffff',\n borderColor: '#939393',\n borderWidth: '0.0625rem',\n borderRadius: '0.5',\n labelColor: '#939393',\n labelFontWeight: '400',\n checkedBackgroundColor: '#076bc9',\n checkedBorderColor: '#076bc9',\n showAdditionalInfo: true\n};\n\nConfigurableCheckbox.argTypes = {\n size: { control: { type: 'text' } },\n backgroundColor: { control: { type: 'color' } },\n borderColor: { control: { type: 'color' } },\n borderWidth: { control: { type: 'text' } },\n borderRadius: { control: { type: 'text' } },\n labelColor: { control: { type: 'color' } },\n labelFontWeight: { control: { type: 'text' } },\n checkedBackgroundColor: { control: { type: 'color' } },\n checkedBorderColor: { control: { type: 'color' } },\n status: { table: { disable: true } },\n label: { table: { disable: true } },\n required: { table: { disable: true } },\n disabled: { table: { disable: true } },\n readOnly: { table: { disable: true } },\n indeterminate: { table: { disable: true } },\n showAdditionalInfo: { control: { type: 'boolean' } }\n};\n"]}

package/lib/core/CheckboxGroup/CheckboxGroup.stories.d.ts CHANGED Viewed

@@ -2,6 +2,10 @@ import { Meta, Story } from '@storybook/react';
 import { RadioCheckGroupProps, OmitStrict } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const CheckboxGroupDemo: Story<OmitStrict<RadioCheckGroupProps, 'children'>>;
-export declare const CheckboxCardGroup: Story<OmitStrict<RadioCheckGroupProps, 'children'>>;
+interface RadioCheckGroupStoryProps extends RadioCheckGroupProps {
+    showAdditionalInfo?: boolean;
+    showNestedAdditionalInfo?: boolean;
+}
+export declare const CheckboxGroupDemo: Story<OmitStrict<RadioCheckGroupStoryProps, 'children'>>;
+export declare const CheckboxCardGroup: Story<OmitStrict<RadioCheckGroupStoryProps, 'children'>>;
 //# sourceMappingURL=CheckboxGroup.stories.d.ts.map

package/lib/core/CheckboxGroup/CheckboxGroup.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckboxGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/core/CheckboxGroup/CheckboxGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAML,oBAAoB,EAEpB,UAAU,EACX,MAAM,yBAAyB,CAAC;;AAIjC,~~wBAiBU~~;AAEV,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,UAAU,CAAC,~~oBAAoB~~,EAAE,UAAU,CAAC,~~CAmBjF~~,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,UAAU,CAAC,~~oBAAoB~~,EAAE,UAAU,CAAC,~~CAuEjF~~,CAAC"}
1	+ {"version":3,"file":"CheckboxGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/core/CheckboxGroup/CheckboxGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAML,oBAAoB,EAEpB,UAAU,EACX,MAAM,yBAAyB,CAAC;;AAIjC,wBAqBU;AAEV,UAAU,yBAA0B,SAAQ,oBAAoB;IAC9D,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,UAAU,CAAC,yBAAyB,EAAE,UAAU,CAAC,CA+EtF,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,UAAU,CAAC,yBAAyB,EAAE,UAAU,CAAC,CAuFtF,CAAC"}

package/lib/core/CheckboxGroup/CheckboxGroup.stories.js CHANGED Viewed

@@ -9,21 +9,57 @@ export default {
         inline: false,
         required: false,
         disabled: false,
-        readOnly: false
+        readOnly: false,
+        showAdditionalInfo: true,
+        showNestedAdditionalInfo: false
     },
     argTypes: {
         labelHidden: { control: { type: 'boolean' } },
         inline: { control: { type: 'boolean' } },
         required: { control: { type: 'boolean' } },
         disabled: { control: { type: 'boolean' } },
-        readOnly: { control: { type: 'boolean' } }
+        readOnly: { control: { type: 'boolean' } },
+        showAdditionalInfo: { control: { type: 'boolean' } },
+        showNestedAdditionalInfo: { control: { type: 'boolean' } }
     }
 };
 export const CheckboxGroupDemo = (args) => {
-    return (_jsxs(CheckboxGroup, { label: 'What do you want to eat?', name: 'Fruit', labelHidden: args.labelHidden, inline: args.inline, required: args.required, disabled: args.disabled, readOnly: args.readOnly, children: [_jsx(Checkbox, { label: 'Banana', id: 'Banana', defaultChecked: true }), _jsx(Checkbox, { label: 'Apple', id: 'Apple' }), _jsx(Checkbox, { label: 'Mango', id: 'Mango' }), _jsx(Checkbox, { label: 'Orange', id: 'Orange' })] }));
+    return args.showNestedAdditionalInfo ? (_jsxs(CheckboxGroup, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined, label: 'What do you want to eat?', name: 'Fruit', labelHidden: args.labelHidden, inline: args.inline, required: args.required, disabled: args.disabled, readOnly: args.readOnly, children: [_jsx(Checkbox, { additionalInfo: {
+                    heading: 'Additional Info',
+                    content: 'Some additional info'
+                }, label: 'Banana', id: 'Banana', defaultChecked: true }), _jsx(Checkbox, { additionalInfo: {
+                    heading: 'Additional Info',
+                    content: 'Some additional info'
+                }, label: 'Apple', id: 'Apple' }), _jsx(Checkbox, { additionalInfo: {
+                    heading: 'Additional Info',
+                    content: 'Some additional info'
+                }, label: 'Mango', id: 'Mango' }), _jsx(Checkbox, { additionalInfo: {
+                    heading: 'Additional Info',
+                    content: 'Some additional info'
+                }, label: 'Orange', id: 'Orange' })] })) : (_jsxs(CheckboxGroup, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined, label: 'What do you want to eat?', name: 'Fruit', labelHidden: args.labelHidden, inline: args.inline, required: args.required, disabled: args.disabled, readOnly: args.readOnly, children: [_jsx(Checkbox, { label: 'Banana', id: 'Banana', defaultChecked: true }), _jsx(Checkbox, { label: 'Apple', id: 'Apple' }), _jsx(Checkbox, { label: 'Mango', id: 'Mango' }), _jsx(Checkbox, { label: 'Orange', id: 'Orange' })] }));
 };
 export const CheckboxCardGroup = (args) => {
-    return (_jsxs(CheckboxGroup, { variant: 'card', label: 'Which visuals appear satisfying?', labelHidden: args.labelHidden, inline: args.inline, required: args.required, disabled: args.disabled, readOnly: args.readOnly, children: [_jsx(Checkbox, { label: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "A paragraph" }), _jsx(Paragraph, { children: "This is a paragraph of text. It is meant to appear visually satisfying amongst the other options in this group." })] }), id: 'paragraph', defaultChecked: true }), _jsx(Checkbox, { label: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "Space" }), _jsx(StyledImage, { src: 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale', alt: 'space' })] }), id: 'space-photo' }), _jsx(Checkbox, { label: _jsxs(Flex, { container: { gap: 1, alignItems: 'start' }, children: [_jsx(StyledImage, { src: 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale', alt: 'space' }), _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "Space" }), _jsx(Paragraph, { children: "Space is the final frontier. There is so much to discover within Cosmos!" })] })] }), id: 'cosmos' }), _jsx(Checkbox, { label: _jsx(FieldGroup, { name: 'Gold service plan', children: _jsx(FieldValueList, { fields: [
+    return (_jsxs(CheckboxGroup, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined, variant: 'card', label: 'Which visuals appear satisfying?', labelHidden: args.labelHidden, inline: args.inline, required: args.required, disabled: args.disabled, readOnly: args.readOnly, children: [_jsx(Checkbox, { additionalInfo: args.showNestedAdditionalInfo
+                    ? {
+                        heading: 'Additional Info',
+                        content: 'Some additional info'
+                    }
+                    : undefined, label: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "A paragraph" }), _jsx(Paragraph, { children: "This is a paragraph of text. It is meant to appear visually satisfying amongst the other options in this group." })] }), id: 'paragraph', defaultChecked: true }), _jsx(Checkbox, { label: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "Space" }), _jsx(StyledImage, { src: 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale', alt: 'space' })] }), id: 'space-photo' }), _jsx(Checkbox, { label: _jsxs(Flex, { container: { gap: 1, alignItems: 'start' }, children: [_jsx(StyledImage, { src: 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale', alt: 'space' }), _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "Space" }), _jsx(Paragraph, { children: "Space is the final frontier. There is so much to discover within Cosmos!" })] })] }), id: 'cosmos' }), _jsx(Checkbox, { label: _jsx(FieldGroup, { name: 'Gold service plan', children: _jsx(FieldValueList, { fields: [
                             { id: 'service', name: 'Service length', value: '1 year' },
                             { id: 'monthly-cost', name: 'Monthly cost', value: '$180.00' },
                             { id: 'total-cost', name: 'Total cost', value: '$2,160.00' }

package/lib/core/CheckboxGroup/CheckboxGroup.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckboxGroup.stories.js","sourceRoot":"","sources":["../../../src/core/CheckboxGroup/CheckboxGroup.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n Checkbox,\n CheckboxGroup,\n FieldGroup,\n FieldValueList,\n Flex,\n RadioCheckGroupProps,\n Text,\n OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport { Paragraph, StyledImage } from './CheckboxGroup.styles';\n\nexport default {\n title: 'Core/CheckboxGroup',\n component: CheckboxGroup,\n args: {\n labelHidden: false,\n inline: false,\n required: false,\n disabled: false,\n readOnly: false\n },\n argTypes: {\n labelHidden: { control: { type: 'boolean' } },\n inline: { control: { type: 'boolean' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } }\n }\n} as Meta;\n\nexport const CheckboxGroupDemo: Story<OmitStrict<RadioCheckGroupProps, 'children'>> = (\n args: OmitStrict<RadioCheckGroupProps, 'children'>\n) => {\n return (\n <CheckboxGroup\n label='What do you want to eat?'\n name='Fruit'\n labelHidden={args.labelHidden}\n inline={args.inline}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n >\n <Checkbox label='Banana' id='Banana' defaultChecked />\n <Checkbox label='Apple' id='Apple' />\n <Checkbox label='Mango' id='Mango' />\n <Checkbox label='Orange' id='Orange' />\n </CheckboxGroup>\n );\n};\n\nexport const CheckboxCardGroup: Story<OmitStrict<RadioCheckGroupProps, 'children'>> = (\n args: OmitStrict<RadioCheckGroupProps, 'children'>\n) => {\n return (\n <CheckboxGroup\n variant='card'\n label='Which visuals appear satisfying?'\n labelHidden={args.labelHidden}\n inline={args.inline}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n >\n <Checkbox\n label={\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>A paragraph</Text>\n <Paragraph>\n This is a paragraph of text. It is meant to appear visually satisfying amongst the\n other options in this group.\n </Paragraph>\n </Flex>\n }\n id='paragraph'\n defaultChecked\n />\n <Checkbox\n label={\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>Space</Text>\n <StyledImage\n src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n alt='space'\n />\n </Flex>\n }\n id='space-photo'\n />\n <Checkbox\n label={\n <Flex container={{ gap: 1, alignItems: 'start' }}>\n <StyledImage\n src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n alt='space'\n />\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>Space</Text>\n <Paragraph>\n Space is the final frontier. There is so much to discover within Cosmos!\n </Paragraph>\n </Flex>\n </Flex>\n }\n id='cosmos'\n />\n <Checkbox\n label={\n <FieldGroup name='Gold service plan'>\n <FieldValueList\n fields={[\n { id: 'service', name: 'Service length', value: '1 year' },\n { id: 'monthly-cost', name: 'Monthly cost', value: '$180.00' },\n { id: 'total-cost', name: 'Total cost', value: '$2,160.00' }\n ]}\n />\n </FieldGroup>\n }\n id='phone-plan'\n />\n </CheckboxGroup>\n );\n};\n"]}
1	+ {"version":3,"file":"CheckboxGroup.stories.js","sourceRoot":"","sources":["../../../src/core/CheckboxGroup/CheckboxGroup.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,QAAQ,EACR,aAAa,EACb,UAAU,EACV,cAAc,EACd,IAAI,EAEJ,IAAI,EAEL,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAEhE,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,aAAa;IACxB,IAAI,EAAE;QACJ,WAAW,EAAE,KAAK;QAClB,MAAM,EAAE,KAAK;QACb,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,kBAAkB,EAAE,IAAI;QACxB,wBAAwB,EAAE,KAAK;KAChC;IACD,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC7C,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QACxC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,kBAAkB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QACpD,wBAAwB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;KAC3D;CACM,CAAC;AAOV,MAAM,CAAC,MAAM,iBAAiB,GAA6D,CACzF,IAAuD,EACvD,EAAE;IACF,OAAO,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,CACrC,MAAC,aAAa,IACZ,cAAc,EACZ,IAAI,CAAC,kBAAkB;YACrB,CAAC,CAAC;gBACE,OAAO,EAAE,iBAAiB;gBAC1B,OAAO,EAAE,sBAAsB;aAChC;YACH,CAAC,CAAC,SAAS,EAEf,KAAK,EAAC,0BAA0B,EAChC,IAAI,EAAC,OAAO,EACZ,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,aAEvB,KAAC,QAAQ,IACP,cAAc,EAAE;oBACd,OAAO,EAAE,iBAAiB;oBAC1B,OAAO,EAAE,sBAAsB;iBAChC,EACD,KAAK,EAAC,QAAQ,EACd,EAAE,EAAC,QAAQ,EACX,cAAc,SACd,EACF,KAAC,QAAQ,IACP,cAAc,EAAE;oBACd,OAAO,EAAE,iBAAiB;oBAC1B,OAAO,EAAE,sBAAsB;iBAChC,EACD,KAAK,EAAC,OAAO,EACb,EAAE,EAAC,OAAO,GACV,EACF,KAAC,QAAQ,IACP,cAAc,EAAE;oBACd,OAAO,EAAE,iBAAiB;oBAC1B,OAAO,EAAE,sBAAsB;iBAChC,EACD,KAAK,EAAC,OAAO,EACb,EAAE,EAAC,OAAO,GACV,EACF,KAAC,QAAQ,IACP,cAAc,EAAE;oBACd,OAAO,EAAE,iBAAiB;oBAC1B,OAAO,EAAE,sBAAsB;iBAChC,EACD,KAAK,EAAC,QAAQ,EACd,EAAE,EAAC,QAAQ,GACX,IACY,CACjB,CAAC,CAAC,CAAC,CACF,MAAC,aAAa,IACZ,cAAc,EACZ,IAAI,CAAC,kBAAkB;YACrB,CAAC,CAAC;gBACE,OAAO,EAAE,iBAAiB;gBAC1B,OAAO,EAAE,sBAAsB;aAChC;YACH,CAAC,CAAC,SAAS,EAEf,KAAK,EAAC,0BAA0B,EAChC,IAAI,EAAC,OAAO,EACZ,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,aAEvB,KAAC,QAAQ,IAAC,KAAK,EAAC,QAAQ,EAAC,EAAE,EAAC,QAAQ,EAAC,cAAc,SAAG,EACtD,KAAC,QAAQ,IAAC,KAAK,EAAC,OAAO,EAAC,EAAE,EAAC,OAAO,GAAG,EACrC,KAAC,QAAQ,IAAC,KAAK,EAAC,OAAO,EAAC,EAAE,EAAC,OAAO,GAAG,EACrC,KAAC,QAAQ,IAAC,KAAK,EAAC,QAAQ,EAAC,EAAE,EAAC,QAAQ,GAAG,IACzB,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAA6D,CACzF,IAAuD,EACvD,EAAE;IACF,OAAO,CACL,MAAC,aAAa,IACZ,cAAc,EACZ,IAAI,CAAC,kBAAkB;YACrB,CAAC,CAAC;gBACE,OAAO,EAAE,iBAAiB;gBAC1B,OAAO,EAAE,sBAAsB;aAChC;YACH,CAAC,CAAC,SAAS,EAEf,OAAO,EAAC,MAAM,EACd,KAAK,EAAC,kCAAkC,EACxC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,aAEvB,KAAC,QAAQ,IACP,cAAc,EACZ,IAAI,CAAC,wBAAwB;oBAC3B,CAAC,CAAC;wBACE,OAAO,EAAE,iBAAiB;wBAC1B,OAAO,EAAE,sBAAsB;qBAChC;oBACH,CAAC,CAAC,SAAS,EAEf,KAAK,EACH,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,4BAAmB,EACrC,KAAC,SAAS,kIAGE,IACP,EAET,EAAE,EAAC,WAAW,EACd,cAAc,SACd,EACF,KAAC,QAAQ,IACP,KAAK,EACH,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,sBAAa,EAC/B,KAAC,WAAW,IACV,GAAG,EAAC,+IAA+I,EACnJ,GAAG,EAAC,OAAO,GACX,IACG,EAET,EAAE,EAAC,aAAa,GAChB,EACF,KAAC,QAAQ,IACP,KAAK,EACH,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,aAC9C,KAAC,WAAW,IACV,GAAG,EAAC,+IAA+I,EACnJ,GAAG,EAAC,OAAO,GACX,EACF,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,sBAAa,EAC/B,KAAC,SAAS,2FAEE,IACP,IACF,EAET,EAAE,EAAC,QAAQ,GACX,EACF,KAAC,QAAQ,IACP,KAAK,EACH,KAAC,UAAU,IAAC,IAAI,EAAC,mBAAmB,YAClC,KAAC,cAAc,IACb,MAAM,EAAE;4BACN,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,QAAQ,EAAE;4BAC1D,EAAE,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,SAAS,EAAE;4BAC9D,EAAE,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE;yBAC7D,GACD,GACS,EAEf,EAAE,EAAC,YAAY,GACf,IACY,CACjB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n Checkbox,\n CheckboxGroup,\n FieldGroup,\n FieldValueList,\n Flex,\n RadioCheckGroupProps,\n Text,\n OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport { Paragraph, StyledImage } from './CheckboxGroup.styles';\n\nexport default {\n title: 'Core/CheckboxGroup',\n component: CheckboxGroup,\n args: {\n labelHidden: false,\n inline: false,\n required: false,\n disabled: false,\n readOnly: false,\n showAdditionalInfo: true,\n showNestedAdditionalInfo: false\n },\n argTypes: {\n labelHidden: { control: { type: 'boolean' } },\n inline: { control: { type: 'boolean' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } },\n showAdditionalInfo: { control: { type: 'boolean' } },\n showNestedAdditionalInfo: { control: { type: 'boolean' } }\n }\n} as Meta;\n\ninterface RadioCheckGroupStoryProps extends RadioCheckGroupProps {\n showAdditionalInfo?: boolean;\n showNestedAdditionalInfo?: boolean;\n}\n\nexport const CheckboxGroupDemo: Story<OmitStrict<RadioCheckGroupStoryProps, 'children'>> = (\n args: OmitStrict<RadioCheckGroupStoryProps, 'children'>\n) => {\n return args.showNestedAdditionalInfo ? (\n <CheckboxGroup\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Some additional info'\n }\n : undefined\n }\n label='What do you want to eat?'\n name='Fruit'\n labelHidden={args.labelHidden}\n inline={args.inline}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n >\n <Checkbox\n additionalInfo={{\n heading: 'Additional Info',\n content: 'Some additional info'\n }}\n label='Banana'\n id='Banana'\n defaultChecked\n />\n <Checkbox\n additionalInfo={{\n heading: 'Additional Info',\n content: 'Some additional info'\n }}\n label='Apple'\n id='Apple'\n />\n <Checkbox\n additionalInfo={{\n heading: 'Additional Info',\n content: 'Some additional info'\n }}\n label='Mango'\n id='Mango'\n />\n <Checkbox\n additionalInfo={{\n heading: 'Additional Info',\n content: 'Some additional info'\n }}\n label='Orange'\n id='Orange'\n />\n </CheckboxGroup>\n ) : (\n <CheckboxGroup\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Some additional info'\n }\n : undefined\n }\n label='What do you want to eat?'\n name='Fruit'\n labelHidden={args.labelHidden}\n inline={args.inline}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n >\n <Checkbox label='Banana' id='Banana' defaultChecked />\n <Checkbox label='Apple' id='Apple' />\n <Checkbox label='Mango' id='Mango' />\n <Checkbox label='Orange' id='Orange' />\n </CheckboxGroup>\n );\n};\n\nexport const CheckboxCardGroup: Story<OmitStrict<RadioCheckGroupStoryProps, 'children'>> = (\n args: OmitStrict<RadioCheckGroupStoryProps, 'children'>\n) => {\n return (\n <CheckboxGroup\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Some additional info'\n }\n : undefined\n }\n variant='card'\n label='Which visuals appear satisfying?'\n labelHidden={args.labelHidden}\n inline={args.inline}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n >\n <Checkbox\n additionalInfo={\n args.showNestedAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Some additional info'\n }\n : undefined\n }\n label={\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>A paragraph</Text>\n <Paragraph>\n This is a paragraph of text. It is meant to appear visually satisfying amongst the\n other options in this group.\n </Paragraph>\n </Flex>\n }\n id='paragraph'\n defaultChecked\n />\n <Checkbox\n label={\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>Space</Text>\n <StyledImage\n src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n alt='space'\n />\n </Flex>\n }\n id='space-photo'\n />\n <Checkbox\n label={\n <Flex container={{ gap: 1, alignItems: 'start' }}>\n <StyledImage\n src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n alt='space'\n />\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>Space</Text>\n <Paragraph>\n Space is the final frontier. There is so much to discover within Cosmos!\n </Paragraph>\n </Flex>\n </Flex>\n }\n id='cosmos'\n />\n <Checkbox\n label={\n <FieldGroup name='Gold service plan'>\n <FieldValueList\n fields={[\n { id: 'service', name: 'Service length', value: '1 year' },\n { id: 'monthly-cost', name: 'Monthly cost', value: '$180.00' },\n { id: 'total-cost', name: 'Total cost', value: '$2,160.00' }\n ]}\n />\n </FieldGroup>\n }\n id='phone-plan'\n />\n </CheckboxGroup>\n );\n};\n"]}

package/lib/core/ColorPicker/ColorPicker.stories.d.ts CHANGED Viewed

@@ -2,6 +2,9 @@ import { Meta, Story } from '@storybook/react';
 import { ColorPickerProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const ColorPickerDemo: Story<ColorPickerProps>;
+interface ColorPickerStoryProps extends ColorPickerProps {
+    showAdditionalInfo?: boolean;
+}
+export declare const ColorPickerDemo: Story<ColorPickerStoryProps>;
 export declare const MultiColor: Story;
 //# sourceMappingURL=ColorPicker.stories.d.ts.map

package/lib/core/ColorPicker/ColorPicker.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPicker.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAe,gBAAgB,EAA8B,MAAM,yBAAyB,CAAC;;AAIpG,wBAGU;AAEV,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,~~gBAAgB~~,~~CAoBnD~~,CAAC;~~AA0BF~~,eAAO,MAAM,UAAU,EAAE,KA2ExB,CAAC"}
1	+ {"version":3,"file":"ColorPicker.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAe,gBAAgB,EAA8B,MAAM,yBAAyB,CAAC;;AAIpG,wBAGU;AAEV,UAAU,qBAAsB,SAAQ,gBAAgB;IACtD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,qBAAqB,CA4BxD,CAAC;AA4BF,eAAO,MAAM,UAAU,EAAE,KA2ExB,CAAC"}

package/lib/core/ColorPicker/ColorPicker.stories.js CHANGED Viewed

@@ -8,7 +8,12 @@ export default {
 };
 export const ColorPickerDemo = (args) => {
     const [value, setValue] = useState('#10a5ac');
-    return (_jsx(ColorPicker, { label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, swatchOnly: args.swatchOnly, inline: args.inline, required: args.required, disabled: args.disabled, readOnly: args.readOnly, value: value, onChange: e => {
+    return (_jsx(ColorPicker, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a color from the dropdown or by entering its hex code.'
+            }
+            : undefined, label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, swatchOnly: args.swatchOnly, inline: args.inline, required: args.required, disabled: args.disabled, readOnly: args.readOnly, value: value, onChange: e => {
             setValue(e.hex);
         } }));
 };
@@ -21,7 +26,8 @@ ColorPickerDemo.args = {
     inline: false,
     required: false,
     disabled: false,
-    readOnly: false
+    readOnly: false,
+    showAdditionalInfo: true
 };
 ColorPickerDemo.argTypes = {
     label: { control: { type: 'text' } },
@@ -32,7 +38,8 @@ ColorPickerDemo.argTypes = {
     inline: { control: { type: 'boolean' } },
     required: { control: { type: 'boolean' } },
     disabled: { control: { type: 'boolean' } },
-    readOnly: { control: { type: 'boolean' } }
+    readOnly: { control: { type: 'boolean' } },
+    showAdditionalInfo: { control: { type: 'boolean' } }
 };
 export const MultiColor = () => {
     const { base: { palette } } = useTheme();

package/lib/core/ColorPicker/ColorPicker.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPicker.stories.js","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,WAAW,EAAoB,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEpG,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;CACf,CAAC;~~AAEV~~,MAAM,CAAC,MAAM,eAAe,~~GAA4B~~,CAAC,~~IAAsB~~,EAAE,EAAE;~~IACjF~~,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;IAE9C,OAAO,CACL,KAAC,WAAW,IACV,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE;YACZ,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;QAClB,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,KAAK,EAAE,mBAAmB;IAC1B,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,cAAc;IACpB,MAAM,EAAE,SAAS;IACjB,UAAU,EAAE,KAAK;IACjB,MAAM,EAAE,KAAK;IACb,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;~~CAChB~~,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,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,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC5C,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACxC,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,UAAU,GAAU,GAAG,EAAE;IACpC,MAAM,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,GAAG,QAAQ,EAAE,CAAC;IAEf,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CACH,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE;QAC3C,OAAO,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC,CAAC,EACJ,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEnF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,aAC9D,KAAC,IAAI,IACH,SAAS,EAAE;oBACT,IAAI,EAAE,iBAAiB;oBACvB,UAAU,EAAE,QAAQ;oBACpB,MAAM,EAAE,CAAC;oBACT,MAAM,EAAE,CAAC;iBACV,EACD,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,YAE1B,4BACG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;wBACvB,MAAM,GAAG,GAAG,SAAS,CAAC,EAAE,CAAC;wBACzB,OAAO,CACL,wBACE,KAAC,WAAW,IACV,MAAM,QACN,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACzB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE;oCACZ,MAAM,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC;oCACvB,SAAS,CAAC,GAAG,CAAC,EAAE;wCACd,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;4CACtB,IAAI,CAAC,KAAK,CAAC;gDAAE,OAAO,QAAQ,CAAC;4CAC7B,OAAO,CAAC,CAAC;wCACX,CAAC,CAAC,CAAC;oCACL,CAAC,CAAC,CAAC;gCACL,CAAC,GACD,IAdM,GAAG,CAeP,CACP,CAAC;oBACJ,CAAC,CAAC,GACD,GACE,EAEP,KAAC,IAAI,IACH,SAAS,EAAE;oBACT,IAAI,EAAE,iBAAiB;oBACvB,GAAG,EAAE,KAAK;iBACX,YAEA,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;oBACvB,MAAM,GAAG,GAAG,SAAS,CAAC,EAAE,CAAC;oBACzB,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EACtD,EAAE,EAAE,eAAe,EACnB,KAAK,EAAE,KAAK,YAGZ,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,YACzB,KAAK,GACD,IAJF,GAAG,CAKH,CACR,CAAC;gBACJ,CAAC,CAAC,GACG,IACF,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useMemo, useState } from 'react';\n\nimport { ColorPicker, ColorPickerProps, Flex, Grid, Text, useTheme } from '@pega/cosmos-react-core';\n\nimport { StyledColorPane } from './ColorPicker.styles';\n\nexport default {\n title: 'Core/ColorPicker',\n component: ColorPicker\n} as Meta;\n\nexport const ColorPickerDemo: Story<~~ColorPickerProps~~> = (args: ~~ColorPickerProps~~) => {\n const [value, setValue] = useState('#10a5ac');\n\n return (\n <ColorPicker\n label={args.label}\n labelHidden={args.labelHidden}\n info={args.info}\n status={args.status}\n swatchOnly={args.swatchOnly}\n inline={args.inline}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n value={value}\n onChange={e => {\n setValue(e.hex);\n }}\n />\n );\n};\n\nColorPickerDemo.args = {\n label: 'ColorPicker label',\n labelHidden: false,\n info: 'Pick a color',\n status: undefined,\n swatchOnly: false,\n inline: false,\n required: false,\n disabled: false,\n readOnly: false\n};\n\nColorPickerDemo.argTypes = {\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 swatchOnly: { control: { type: 'boolean' } },\n inline: { control: { type: 'boolean' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } }\n};\n\nexport const MultiColor: Story = () => {\n const {\n base: { palette }\n } = useTheme();\n\n const opaqueColors = useMemo(\n () =>\n Object.entries(palette).filter(([, color]) => {\n return /^#[0-9A-F]{6}$/i.test(color);\n }),\n [palette]\n );\n\n const [values, setValues] = useState(() => opaqueColors.map(([, color]) => color));\n\n return (\n <Grid container={{ rows: '1fr 2fr' }} style={{ height: '100vh' }}>\n <Grid\n container={{\n cols: '1fr 1fr 1fr 1fr',\n alignItems: 'center',\n colGap: 4,\n rowGap: 1\n }}\n style={{ padding: '1rem' }}\n >\n <>\n {values.map((color, i) => {\n const key = `color-${i}`;\n return (\n <div key={key}>\n <ColorPicker\n inline\n label={opaqueColors[i][0]}\n value={color}\n onChange={e => {\n const newColor = e.hex;\n setValues(cur => {\n return cur.map((c, j) => {\n if (i === j) return newColor;\n return c;\n });\n });\n }}\n />\n </div>\n );\n })}\n </>\n </Grid>\n\n <Grid\n container={{\n cols: '1fr 1fr 1fr 1fr',\n gap: 0.125\n }}\n >\n {values.map((color, i) => {\n const key = `color-${i}`;\n return (\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledColorPane}\n color={color}\n key={key}\n >\n <Text variant='h1' as='span'>\n {color}\n </Text>\n </Flex>\n );\n })}\n </Grid>\n </Grid>\n );\n};\n"]}
1	+ {"version":3,"file":"ColorPicker.stories.js","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useMemo, useState } from 'react';\n\nimport { ColorPicker, ColorPickerProps, Flex, Grid, Text, useTheme } from '@pega/cosmos-react-core';\n\nimport { StyledColorPane } from './ColorPicker.styles';\n\nexport default {\n title: 'Core/ColorPicker',\n component: ColorPicker\n} as Meta;\n\ninterface ColorPickerStoryProps extends ColorPickerProps {\n showAdditionalInfo?: boolean;\n}\n\nexport const ColorPickerDemo: Story<ColorPickerStoryProps> = (args: ColorPickerStoryProps) => {\n const [value, setValue] = useState('#10a5ac');\n\n return (\n <ColorPicker\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a color from the dropdown or by entering its hex code.'\n }\n : undefined\n }\n label={args.label}\n labelHidden={args.labelHidden}\n info={args.info}\n status={args.status}\n swatchOnly={args.swatchOnly}\n inline={args.inline}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n value={value}\n onChange={e => {\n setValue(e.hex);\n }}\n />\n );\n};\n\nColorPickerDemo.args = {\n label: 'ColorPicker label',\n labelHidden: false,\n info: 'Pick a color',\n status: undefined,\n swatchOnly: false,\n inline: false,\n required: false,\n disabled: false,\n readOnly: false,\n showAdditionalInfo: true\n};\n\nColorPickerDemo.argTypes = {\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 swatchOnly: { control: { type: 'boolean' } },\n inline: { control: { type: 'boolean' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } },\n showAdditionalInfo: { control: { type: 'boolean' } }\n};\n\nexport const MultiColor: Story = () => {\n const {\n base: { palette }\n } = useTheme();\n\n const opaqueColors = useMemo(\n () =>\n Object.entries(palette).filter(([, color]) => {\n return /^#[0-9A-F]{6}$/i.test(color);\n }),\n [palette]\n );\n\n const [values, setValues] = useState(() => opaqueColors.map(([, color]) => color));\n\n return (\n <Grid container={{ rows: '1fr 2fr' }} style={{ height: '100vh' }}>\n <Grid\n container={{\n cols: '1fr 1fr 1fr 1fr',\n alignItems: 'center',\n colGap: 4,\n rowGap: 1\n }}\n style={{ padding: '1rem' }}\n >\n <>\n {values.map((color, i) => {\n const key = `color-${i}`;\n return (\n <div key={key}>\n <ColorPicker\n inline\n label={opaqueColors[i][0]}\n value={color}\n onChange={e => {\n const newColor = e.hex;\n setValues(cur => {\n return cur.map((c, j) => {\n if (i === j) return newColor;\n return c;\n });\n });\n }}\n />\n </div>\n );\n })}\n </>\n </Grid>\n\n <Grid\n container={{\n cols: '1fr 1fr 1fr 1fr',\n gap: 0.125\n }}\n >\n {values.map((color, i) => {\n const key = `color-${i}`;\n return (\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledColorPane}\n color={color}\n key={key}\n >\n <Text variant='h1' as='span'>\n {color}\n </Text>\n </Flex>\n );\n })}\n </Grid>\n </Grid>\n );\n};\n"]}