npm - @pega/cosmos-react-demos - Versions diffs - 2.1.5 → 3.0.0-dev.3.0 - Mend

@pega/cosmos-react-demos 2.1.5 → 3.0.0-dev.3.0

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

Files changed (426) hide show

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

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

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

@@ -4,4 +4,8 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const IndeterminateProgress: Story<ProgressProps>;
 export declare const DeterminateProgress: Story<ProgressProps>;
+interface ConfigurableProgressProps extends ProgressProps {
+    progressColor?: string;
+}
+export declare const ConfigurableProgress: Story<ConfigurableProgressProps>;
 //# sourceMappingURL=Progress.stories.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Progress.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Progress/Progress.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,~~EAA0B~~,aAAa,~~EAAQ~~,MAAM,yBAAyB,CAAC;;~~AAItF~~,wBAaU;AAEV,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,aAAa,CA+BtD,CAAC;AAMF,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,aAAa,CAgCpD,CAAC"}
1	+ {"version":3,"file":"Progress.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Progress/Progress.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAKL,aAAa,EAEd,MAAM,yBAAyB,CAAC;;AAIjC,wBAaU;AAEV,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,aAAa,CA+BtD,CAAC;AAMF,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,aAAa,CAgCpD,CAAC;AAUF,UAAU,yBAA0B,SAAQ,aAAa;IACvD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CAkBjE,CAAC"}

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { Button, Flex, Progress, Text } from '@pega/cosmos-react-core';
+import { Button, Configuration, Flex, Progress, Text } from '@pega/cosmos-react-core';
 import { StyledDemoWrap } from './Progress.styles';
 export default {
     title: 'Core/Progress',
@@ -61,4 +61,21 @@ DeterminateProgress.args = {
 DeterminateProgress.argTypes = {
     value: { control: { type: 'number' } }
 };
+export const ConfigurableProgress = (args) => {
+    return (_jsx(Configuration, { theme: {
+            components: {
+                progress: {
+                    'progress-color': args.progressColor
+                }
+            }
+        }, children: _jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledDemoWrap, children: _jsx(Progress, { variant: args.variant, placement: 'local', message: 'Loading', visible: true }, void 0) }, void 0) }, void 0));
+};
+ConfigurableProgress.args = {
+    progressColor: '#076bc9'
+};
+ConfigurableProgress.argTypes = {
+    progressColor: { control: { type: 'color' } },
+    placement: { table: { disable: true } },
+    message: { table: { disable: true } }
+};
 //# sourceMappingURL=Progress.stories.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Progress.stories.js","sourceRoot":"","sources":["../../../src/core/Progress/Progress.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,~~EAAE~~,MAAM,~~EAAE~~,IAAI,~~EAAE~~,QAAQ,~~EAAiB~~,IAAI,~~EAAE~~,MAAM,yBAAyB,CAAC;~~AAEtF~~,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,SAAS,EAAE,OAAO;QAClB,OAAO,EAAE,EAAE;KACZ;IACD,QAAQ,EAAE;QACR,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC9E,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAClF,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;KACvC;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,qBAAqB,GAAyB,CAAC,IAAmB,EAAE,EAAE;IACjF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,UAAU,CAAC,IAAI,CAAC,CAAC;QAEjB,UAAU,CAAC,GAAG,EAAE;YACd,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE;YAC/B,UAAU,CAAC,KAAK,CAAC,CAAC;SACnB;aAAM;YACL,UAAU,CAAC,IAAI,CAAC,CAAC;SAClB;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;IAErB,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,cAAc,aAC7E,IAAI,CAAC,SAAS,KAAK,QAAQ,IAAI,KAAC,MAAM,IAAC,OAAO,EAAE,WAAW,sCAAwB,EACnF,IAAI,CAAC,SAAS,KAAK,QAAQ,IAAI,KAAC,IAAI,wCAAqB,EAC1D,KAAC,QAAQ,IACP,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,OAAO,WAChB,YACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,qBAAqB,CAAC,IAAI,GAAG;IAC3B,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAyB,CAAC,IAAmB,EAAE,EAAE;IAC/E,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,UAAU,CAAC,IAAI,CAAC,CAAC;QAEjB,UAAU,CAAC,GAAG,EAAE;YACd,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE;YAC/B,UAAU,CAAC,KAAK,CAAC,CAAC;SACnB;aAAM;YACL,UAAU,CAAC,IAAI,CAAC,CAAC;SAClB;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;IAErB,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,cAAc,aAC7E,IAAI,CAAC,SAAS,KAAK,QAAQ,IAAI,KAAC,MAAM,IAAC,OAAO,EAAE,WAAW,sCAAwB,EACnF,IAAI,CAAC,SAAS,KAAK,QAAQ,IAAI,KAAC,IAAI,wCAAqB,EAC1D,KAAC,QAAQ,IACP,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,EACzC,OAAO,EAAE,OAAO,WAChB,YACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,KAAK,EAAE,EAAE;CACV,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACvC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport { Button, Flex, Progress, ProgressProps, Text } from '@pega/cosmos-react-core';\n\nimport { StyledDemoWrap } from './Progress.styles';\n\nexport default {\n title: 'Core/Progress',\n component: Progress,\n args: {\n variant: 'ring',\n placement: 'local',\n message: ''\n },\n argTypes: {\n variant: { options: ['ring', 'bar', 'ellipsis'], control: { type: 'select' } },\n placement: { options: ['local', 'global', 'inline'], control: { type: 'select' } },\n message: { control: { type: 'text' } }\n }\n} as Meta;\n\nexport const IndeterminateProgress: Story<ProgressProps> = (args: ProgressProps) => {\n const [loading, setLoading] = useState(false);\n\n const handleClick = () => {\n setLoading(true);\n\n setTimeout(() => {\n setLoading(false);\n }, 2000);\n };\n\n useEffect(() => {\n if (args.placement === 'global') {\n setLoading(false);\n } else {\n setLoading(true);\n }\n }, [args.placement]);\n\n return (\n <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>\n {args.placement === 'global' && <Button onClick={handleClick}>Start loading</Button>}\n {args.placement === 'inline' && <Text>Progress demo</Text>}\n <Progress\n variant={args.variant}\n placement={args.placement}\n message={args.message}\n visible={loading}\n />\n </Flex>\n );\n};\n\nIndeterminateProgress.args = {\n message: 'Loading'\n};\n\nexport const DeterminateProgress: Story<ProgressProps> = (args: ProgressProps) => {\n const [loading, setLoading] = useState(false);\n\n const handleClick = () => {\n setLoading(true);\n\n setTimeout(() => {\n setLoading(false);\n }, 2000);\n };\n\n useEffect(() => {\n if (args.placement === 'global') {\n setLoading(false);\n } else {\n setLoading(true);\n }\n }, [args.placement]);\n\n return (\n <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>\n {args.placement === 'global' && <Button onClick={handleClick}>Start loading</Button>}\n {args.placement === 'inline' && <Text>Progress demo</Text>}\n <Progress\n value={args.value}\n variant={args.variant}\n placement={args.placement}\n message={args.message \|\| `${args.value}%`}\n visible={loading}\n />\n </Flex>\n );\n};\n\nDeterminateProgress.args = {\n value: 67\n};\n\nDeterminateProgress.argTypes = {\n value: { control: { type: 'number' } }\n};\n"]}
1	+ {"version":3,"file":"Progress.stories.js","sourceRoot":"","sources":["../../../src/core/Progress/Progress.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport {\n Button,\n Configuration,\n Flex,\n Progress,\n ProgressProps,\n Text\n} from '@pega/cosmos-react-core';\n\nimport { StyledDemoWrap } from './Progress.styles';\n\nexport default {\n title: 'Core/Progress',\n component: Progress,\n args: {\n variant: 'ring',\n placement: 'local',\n message: ''\n },\n argTypes: {\n variant: { options: ['ring', 'bar', 'ellipsis'], control: { type: 'select' } },\n placement: { options: ['local', 'global', 'inline'], control: { type: 'select' } },\n message: { control: { type: 'text' } }\n }\n} as Meta;\n\nexport const IndeterminateProgress: Story<ProgressProps> = (args: ProgressProps) => {\n const [loading, setLoading] = useState(false);\n\n const handleClick = () => {\n setLoading(true);\n\n setTimeout(() => {\n setLoading(false);\n }, 2000);\n };\n\n useEffect(() => {\n if (args.placement === 'global') {\n setLoading(false);\n } else {\n setLoading(true);\n }\n }, [args.placement]);\n\n return (\n <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>\n {args.placement === 'global' && <Button onClick={handleClick}>Start loading</Button>}\n {args.placement === 'inline' && <Text>Progress demo</Text>}\n <Progress\n variant={args.variant}\n placement={args.placement}\n message={args.message}\n visible={loading}\n />\n </Flex>\n );\n};\n\nIndeterminateProgress.args = {\n message: 'Loading'\n};\n\nexport const DeterminateProgress: Story<ProgressProps> = (args: ProgressProps) => {\n const [loading, setLoading] = useState(false);\n\n const handleClick = () => {\n setLoading(true);\n\n setTimeout(() => {\n setLoading(false);\n }, 2000);\n };\n\n useEffect(() => {\n if (args.placement === 'global') {\n setLoading(false);\n } else {\n setLoading(true);\n }\n }, [args.placement]);\n\n return (\n <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>\n {args.placement === 'global' && <Button onClick={handleClick}>Start loading</Button>}\n {args.placement === 'inline' && <Text>Progress demo</Text>}\n <Progress\n value={args.value}\n variant={args.variant}\n placement={args.placement}\n message={args.message \|\| `${args.value}%`}\n visible={loading}\n />\n </Flex>\n );\n};\n\nDeterminateProgress.args = {\n value: 67\n};\n\nDeterminateProgress.argTypes = {\n value: { control: { type: 'number' } }\n};\n\ninterface ConfigurableProgressProps extends ProgressProps {\n progressColor?: string;\n}\n\nexport const ConfigurableProgress: Story<ConfigurableProgressProps> = (\n args: ConfigurableProgressProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n progress: {\n 'progress-color': args.progressColor\n }\n }\n }}\n >\n <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>\n <Progress variant={args.variant} placement='local' message='Loading' visible />\n </Flex>\n </Configuration>\n );\n};\n\nConfigurableProgress.args = {\n progressColor: '#076bc9'\n};\n\nConfigurableProgress.argTypes = {\n progressColor: { control: { type: 'color' } },\n placement: { table: { disable: true } },\n message: { table: { disable: true } }\n};\n"]}

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

@@ -4,4 +4,16 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const DefaultRadioButton: Story<RadioCheckProps>;
 export declare const RadioButtonCard: Story<RadioCheckProps>;
+interface ConfigurableRadioButtonProps extends RadioCheckProps {
+    size?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    borderWidth?: string;
+    borderRadius?: string;
+    labelColor?: string;
+    labelFontWeight?: string;
+    checkedBackgroundColor?: string;
+    checkedBorderColor?: string;
+}
+export declare const ConfigurableRadioButton: Story<ConfigurableRadioButtonProps>;
 //# sourceMappingURL=RadioButton.stories.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButton.stories.d.ts","sourceRoot":"","sources":["../../../src/core/RadioButton/RadioButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,~~EAAe~~,eAAe,EAAE,MAAM,yBAAyB,CAAC;;~~AAEvE~~,wBAiBU;AAEV,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,eAAe,CAUrD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,eAAe,CAWlD,CAAC"}
1	+ {"version":3,"file":"RadioButton.stories.d.ts","sourceRoot":"","sources":["../../../src/core/RadioButton/RadioButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAA8B,eAAe,EAAE,MAAM,yBAAyB,CAAC;;AAEtF,wBAiBU;AAEV,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,eAAe,CAUrD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,eAAe,CAWlD,CAAC;AAEF,UAAU,4BAA6B,SAAQ,eAAe;IAC5D,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,uBAAuB,EAAE,KAAK,CAAC,4BAA4B,CA8BvE,CAAC"}

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { RadioButton } from '@pega/cosmos-react-core';
+import { Configuration, RadioButton } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/RadioButton',
     component: RadioButton,
@@ -24,4 +24,54 @@ export const DefaultRadioButton = (args) => {
 export const RadioButtonCard = (args) => {
     return (_jsx(RadioButton, { variant: 'card', status: args.status, label: args.label, required: args.required, disabled: args.disabled, readOnly: args.readOnly }, void 0));
 };
+export const ConfigurableRadioButton = (args) => {
+    return (_jsx(Configuration, { theme: {
+            components: {
+                'radio-button': {
+                    'border-radius': args.borderRadius
+                },
+                'radio-check': {
+                    'border-color': args.borderColor,
+                    'border-width': args.borderWidth,
+                    'background-color': args.backgroundColor,
+                    label: {
+                        color: args.labelColor,
+                        'font-weight': args.labelFontWeight
+                    },
+                    size: args.size,
+                    ':checked': {
+                        'background-color': args.checkedBackgroundColor,
+                        'border-color': args.checkedBorderColor
+                    }
+                }
+            }
+        }, children: _jsx(RadioButton, { label: 'Configurable Radio Button' }, void 0) }, void 0));
+};
+ConfigurableRadioButton.args = {
+    size: '1.25rem',
+    backgroundColor: '#ffffff',
+    borderColor: '#939393',
+    borderWidth: '0.0625rem',
+    borderRadius: '50%',
+    labelColor: '#939393',
+    labelFontWeight: '400',
+    checkedBackgroundColor: '#076bc9',
+    checkedBorderColor: '#076bc9'
+};
+ConfigurableRadioButton.argTypes = {
+    size: { control: { type: 'text' } },
+    backgroundColor: { control: { type: 'color' } },
+    borderColor: { control: { type: 'color' } },
+    borderWidth: { control: { type: 'text' } },
+    borderRadius: { control: { type: 'text' } },
+    labelColor: { control: { type: 'color' } },
+    labelFontWeight: { control: { type: 'text' } },
+    checkedBackgroundColor: { control: { type: 'color' } },
+    checkedBorderColor: { control: { type: 'color' } },
+    status: { table: { disable: true } },
+    label: { table: { disable: true } },
+    required: { table: { disable: true } },
+    disabled: { table: { disable: true } },
+    readOnly: { table: { disable: true } }
+};
 //# sourceMappingURL=RadioButton.stories.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButton.stories.js","sourceRoot":"","sources":["../../../src/core/RadioButton/RadioButton.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAmB,MAAM,yBAAyB,CAAC;~~AAEvE~~,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;IACtB,IAAI,EAAE;QACJ,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,WAAW;QAClB,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;KAChB;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;KAC3C;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,kBAAkB,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAClF,OAAO,CACL,KAAC,WAAW,IACV,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,WACvB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAC/E,OAAO,CACL,KAAC,WAAW,IACV,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,WACvB,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { RadioButton, RadioCheckProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/RadioButton',\n component: RadioButton,\n args: {\n status: undefined,\n label: 'Choose me',\n required: false,\n disabled: false,\n readOnly: 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 }\n} as Meta;\n\nexport const DefaultRadioButton: Story<RadioCheckProps> = (args: RadioCheckProps) => {\n return (\n <RadioButton\n status={args.status}\n label={args.label}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n />\n );\n};\n\nexport const RadioButtonCard: Story<RadioCheckProps> = (args: RadioCheckProps) => {\n return (\n <RadioButton\n variant='card'\n status={args.status}\n label={args.label}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n />\n );\n};\n"]}
1	+ {"version":3,"file":"RadioButton.stories.js","sourceRoot":"","sources":["../../../src/core/RadioButton/RadioButton.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, RadioButton, RadioCheckProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/RadioButton',\n component: RadioButton,\n args: {\n status: undefined,\n label: 'Choose me',\n required: false,\n disabled: false,\n readOnly: 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 }\n} as Meta;\n\nexport const DefaultRadioButton: Story<RadioCheckProps> = (args: RadioCheckProps) => {\n return (\n <RadioButton\n status={args.status}\n label={args.label}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n />\n );\n};\n\nexport const RadioButtonCard: Story<RadioCheckProps> = (args: RadioCheckProps) => {\n return (\n <RadioButton\n variant='card'\n status={args.status}\n label={args.label}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n />\n );\n};\n\ninterface ConfigurableRadioButtonProps 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 ConfigurableRadioButton: Story<ConfigurableRadioButtonProps> = (\n args: ConfigurableRadioButtonProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n 'radio-button': {\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 <RadioButton label='Configurable Radio Button' />\n </Configuration>\n );\n};\n\nConfigurableRadioButton.args = {\n size: '1.25rem',\n backgroundColor: '#ffffff',\n borderColor: '#939393',\n borderWidth: '0.0625rem',\n borderRadius: '50%',\n labelColor: '#939393',\n labelFontWeight: '400',\n checkedBackgroundColor: '#076bc9',\n checkedBorderColor: '#076bc9'\n};\n\nConfigurableRadioButton.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};\n"]}

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

@@ -6,4 +6,8 @@ interface RatingStoryProps extends RatingProps {
     ariaLabel?: string;
 }
 export declare const RatingDemo: Story<RatingStoryProps>;
+interface ConfigurableRatingProps {
+    color?: string;
+}
+export declare const ConfigurableRating: Story<ConfigurableRatingProps>;
 //# sourceMappingURL=Rating.stories.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Rating.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Rating/Rating.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,~~EAAU~~,WAAW,EAAE,MAAM,yBAAyB,CAAC;;~~AAE9D~~,wBAGU;AAEV,UAAU,gBAAiB,SAAQ,WAAW;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAU9C,CAAC"}
1	+ {"version":3,"file":"Rating.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Rating/Rating.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAyB,WAAW,EAAE,MAAM,yBAAyB,CAAC;;AAE7E,wBAGU;AAEV,UAAU,gBAAiB,SAAQ,WAAW;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAU9C,CAAC;AAgBF,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CAqB7D,CAAC"}

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Rating } from '@pega/cosmos-react-core';
+import { Configuration, Rating } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Rating',
     component: Rating
@@ -19,4 +19,19 @@ RatingDemo.argTypes = {
     metaInfo: { control: { type: 'text' } },
     ariaLabel: { control: { type: 'text' } }
 };
+export const ConfigurableRating = (args) => {
+    return (_jsx(Configuration, { theme: {
+            components: {
+                rating: {
+                    color: args.color
+                }
+            }
+        }, children: _jsx(Rating, { maxRating: 5, value: 3.6, metaInfo: '52 reviews', "aria-label": '3.6 out of 5 stars based on 52 reviews' }, void 0) }, void 0));
+};
+ConfigurableRating.args = {
+    color: '#939393'
+};
+ConfigurableRating.argTypes = {
+    color: { control: { type: 'color' } }
+};
 //# sourceMappingURL=Rating.stories.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Rating.stories.js","sourceRoot":"","sources":["../../../src/core/Rating/Rating.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAe,MAAM,yBAAyB,CAAC;~~AAE9D~~,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,MAAM;CACV,CAAC;AAMV,MAAM,CAAC,MAAM,UAAU,GAA4B,CAAC,IAAsB,EAAE,EAAE;IAC5E,OAAO,CACL,KAAC,MAAM,OACD,IAAI,EACR,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,SAAS,WAC1B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,SAAS,EAAE,CAAC;IACZ,KAAK,EAAE,GAAG;IACV,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,wCAAwC;CACpD,CAAC;AAEF,UAAU,CAAC,QAAQ,GAAG;IACpB,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC1C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACvC,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACzC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Rating, RatingProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Rating',\n component: Rating\n} as Meta;\n\ninterface RatingStoryProps extends RatingProps {\n ariaLabel?: string;\n}\n\nexport const RatingDemo: Story<RatingStoryProps> = (args: RatingStoryProps) => {\n return (\n <Rating\n {...args}\n maxRating={args.maxRating}\n value={args.value}\n metaInfo={args.metaInfo}\n aria-label={args.ariaLabel}\n />\n );\n};\n\nRatingDemo.args = {\n maxRating: 5,\n value: 3.6,\n metaInfo: '52 reviews',\n ariaLabel: '3.6 out of 5 stars based on 52 reviews'\n};\n\nRatingDemo.argTypes = {\n maxRating: { control: { type: 'number' } },\n value: { control: { type: 'number' } },\n metaInfo: { control: { type: 'text' } },\n ariaLabel: { control: { type: 'text' } }\n};\n"]}
1	+ {"version":3,"file":"Rating.stories.js","sourceRoot":"","sources":["../../../src/core/Rating/Rating.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,EAAe,MAAM,yBAAyB,CAAC;AAE7E,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,MAAM;CACV,CAAC;AAMV,MAAM,CAAC,MAAM,UAAU,GAA4B,CAAC,IAAsB,EAAE,EAAE;IAC5E,OAAO,CACL,KAAC,MAAM,OACD,IAAI,EACR,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,SAAS,WAC1B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,SAAS,EAAE,CAAC;IACZ,KAAK,EAAE,GAAG;IACV,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,wCAAwC;CACpD,CAAC;AAEF,UAAU,CAAC,QAAQ,GAAG;IACpB,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC1C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACvC,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACzC,CAAC;AAMF,MAAM,CAAC,MAAM,kBAAkB,GAAmC,CAChE,IAA6B,EAC7B,EAAE;IACF,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,KAAK,EAAE,IAAI,CAAC,KAAK;iBAClB;aACF;SACF,YAED,KAAC,MAAM,IACL,SAAS,EAAE,CAAC,EACZ,KAAK,EAAE,GAAG,EACV,QAAQ,EAAC,YAAY,gBACV,wCAAwC,WACnD,WACY,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;CACtC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, Rating, RatingProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Rating',\n component: Rating\n} as Meta;\n\ninterface RatingStoryProps extends RatingProps {\n ariaLabel?: string;\n}\n\nexport const RatingDemo: Story<RatingStoryProps> = (args: RatingStoryProps) => {\n return (\n <Rating\n {...args}\n maxRating={args.maxRating}\n value={args.value}\n metaInfo={args.metaInfo}\n aria-label={args.ariaLabel}\n />\n );\n};\n\nRatingDemo.args = {\n maxRating: 5,\n value: 3.6,\n metaInfo: '52 reviews',\n ariaLabel: '3.6 out of 5 stars based on 52 reviews'\n};\n\nRatingDemo.argTypes = {\n maxRating: { control: { type: 'number' } },\n value: { control: { type: 'number' } },\n metaInfo: { control: { type: 'text' } },\n ariaLabel: { control: { type: 'text' } }\n};\n\ninterface ConfigurableRatingProps {\n color?: string;\n}\n\nexport const ConfigurableRating: Story<ConfigurableRatingProps> = (\n args: ConfigurableRatingProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n rating: {\n color: args.color\n }\n }\n }}\n >\n <Rating\n maxRating={5}\n value={3.6}\n metaInfo='52 reviews'\n aria-label='3.6 out of 5 stars based on 52 reviews'\n />\n </Configuration>\n );\n};\n\nConfigurableRating.args = {\n color: '#939393'\n};\n\nConfigurableRating.argTypes = {\n color: { control: { type: 'color' } }\n};\n"]}

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

@@ -3,4 +3,8 @@ import { SearchInputProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const SearchInputDemo: Story<SearchInputProps>;
+interface ConfigurableSearchInputProps {
+    borderRadius?: number;
+}
+export declare const ConfigurableSearchInput: Story<ConfigurableSearchInputProps>;
 //# sourceMappingURL=SearchInput.stories.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.stories.d.ts","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,~~EAAe~~,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;;~~AAExE~~,wBAGU;AAEV,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,CAEnD,CAAC"}
1	+ {"version":3,"file":"SearchInput.stories.d.ts","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAA8B,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;;AAEvF,wBAGU;AAEV,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,CAEnD,CAAC;AAUF,UAAU,4BAA4B;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,4BAA4B,CAgBvE,CAAC"}

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { SearchInput } from '@pega/cosmos-react-core';
+import { Configuration, SearchInput } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/SearchInput',
     component: SearchInput
@@ -13,4 +13,19 @@ SearchInputDemo.args = {
 SearchInputDemo.argTypes = {
     placeholder: { control: { type: 'text' } }
 };
+export const ConfigurableSearchInput = (args) => {
+    return (_jsx(Configuration, { theme: {
+            components: {
+                'search-input': {
+                    'border-radius': args.borderRadius
+                }
+            }
+        }, children: _jsx(SearchInput, {}, void 0) }, void 0));
+};
+ConfigurableSearchInput.args = {
+    borderRadius: 9999
+};
+ConfigurableSearchInput.argTypes = {
+    borderRadius: { control: { type: 'number' } }
+};
 //# sourceMappingURL=SearchInput.stories.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.stories.js","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAoB,MAAM,yBAAyB,CAAC;~~AAExE~~,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;CACf,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,GAA4B,CAAC,IAAsB,EAAE,EAAE;IACjF,OAAO,KAAC,WAAW,OAAK,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,WAAI,CAAC;AAClE,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CAC3C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { SearchInput, SearchInputProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/SearchInput',\n component: SearchInput\n} as Meta;\n\nexport const SearchInputDemo: Story<SearchInputProps> = (args: SearchInputProps) => {\n return <SearchInput {...args} placeholder={args.placeholder} />;\n};\n\nSearchInputDemo.args = {\n placeholder: 'Search…'\n};\n\nSearchInputDemo.argTypes = {\n placeholder: { control: { type: 'text' } }\n};\n"]}
1	+ {"version":3,"file":"SearchInput.stories.js","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAoB,MAAM,yBAAyB,CAAC;AAEvF,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;CACf,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,GAA4B,CAAC,IAAsB,EAAE,EAAE;IACjF,OAAO,KAAC,WAAW,OAAK,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,WAAI,CAAC;AAClE,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CAC3C,CAAC;AAMF,MAAM,CAAC,MAAM,uBAAuB,GAAwC,CAC1E,IAAkC,EAClC,EAAE;IACF,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,cAAc,EAAE;oBACd,eAAe,EAAE,IAAI,CAAC,YAAY;iBACnC;aACF;SACF,YAED,KAAC,WAAW,aAAG,WACD,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,uBAAuB,CAAC,IAAI,GAAG;IAC7B,YAAY,EAAE,IAAI;CACnB,CAAC;AAEF,uBAAuB,CAAC,QAAQ,GAAG;IACjC,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC9C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, SearchInput, SearchInputProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/SearchInput',\n component: SearchInput\n} as Meta;\n\nexport const SearchInputDemo: Story<SearchInputProps> = (args: SearchInputProps) => {\n return <SearchInput {...args} placeholder={args.placeholder} />;\n};\n\nSearchInputDemo.args = {\n placeholder: 'Search…'\n};\n\nSearchInputDemo.argTypes = {\n placeholder: { control: { type: 'text' } }\n};\n\ninterface ConfigurableSearchInputProps {\n borderRadius?: number;\n}\n\nexport const ConfigurableSearchInput: Story<ConfigurableSearchInputProps> = (\n args: ConfigurableSearchInputProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n 'search-input': {\n 'border-radius': args.borderRadius\n }\n }\n }}\n >\n <SearchInput />\n </Configuration>\n );\n};\n\nConfigurableSearchInput.args = {\n borderRadius: 9999\n};\n\nConfigurableSearchInput.argTypes = {\n borderRadius: { control: { type: 'number' } }\n};\n"]}

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

@@ -6,4 +6,12 @@ interface SelectStoryProps extends SelectProps {
     showAction: boolean;
 }
 export declare const SelectDemo: Story<SelectStoryProps>;
+interface ConfigurableSelectProps {
+    height?: string;
+    padding?: string;
+    borderColor?: string;
+    borderWidth?: string;
+    borderRadius?: string;
+}
+export declare const ConfigurableSelect: Story<ConfigurableSelectProps>;
 //# sourceMappingURL=Select.stories.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Select/Select.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAU,WAAW,~~EAAU~~,MAAM,yBAAyB,CAAC;;~~AAEtE~~,wBAGU;AAEV,UAAU,gBAAiB,SAAQ,WAAW;IAC5C,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,gBAAgB,CA6B9C,CAAC"}
1	+ {"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Select/Select.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAU,WAAW,EAAyB,MAAM,yBAAyB,CAAC;;AAErF,wBAGU;AAEV,UAAU,gBAAiB,SAAQ,WAAW;IAC5C,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,gBAAgB,CA6B9C,CAAC;AAwBF,UAAU,uBAAuB;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CAyB7D,CAAC"}

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Select, Option } from '@pega/cosmos-react-core';
+import { Select, Option, Configuration } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Select',
     component: Select
@@ -35,4 +35,31 @@ SelectDemo.argTypes = {
     disabled: { control: { type: 'boolean' } },
     readOnly: { control: { type: 'boolean' } }
 };
+export const ConfigurableSelect = (args) => {
+    return (_jsx(Configuration, { theme: {
+            components: {
+                select: {
+                    height: args.height,
+                    padding: args.padding,
+                    'border-color': args.borderColor,
+                    'border-width': args.borderWidth,
+                    'border-radius': args.borderRadius
+                }
+            }
+        }, children: _jsxs(Select, { label: 'Select input', info: 'Choose a value', children: [_jsx(Option, { children: "Choose an option\u2026" }, void 0), _jsx(Option, { children: "Option 1" }, void 0), _jsx(Option, { children: "Option 2" }, void 0), _jsx(Option, { children: "Option 3" }, void 0)] }, void 0) }, void 0));
+};
+ConfigurableSelect.args = {
+    height: '2rem',
+    padding: '0.5rem',
+    borderColor: '#939393',
+    borderWidth: '0.0625rem',
+    borderRadius: '0.5'
+};
+ConfigurableSelect.argTypes = {
+    height: { control: { type: 'text' } },
+    padding: { control: { type: 'text' } },
+    borderColor: { control: { type: 'color' } },
+    borderWidth: { control: { type: 'text' } },
+    borderRadius: { control: { type: 'text' } }
+};
 //# sourceMappingURL=Select.stories.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.stories.js","sourceRoot":"","sources":["../../../src/core/Select/Select.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAe,MAAM,EAAE,MAAM,yBAAyB,CAAC;~~AAEtE~~,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,MAAM;CACV,CAAC;AAMV,MAAM,CAAC,MAAM,UAAU,GAA4B,CAAC,IAAsB,EAAE,EAAE;IAC5E,OAAO,CACL,MAAC,MAAM,IACL,EAAE,EAAC,aAAa,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EACL,IAAI,CAAC,UAAU;YACb,CAAC,CAAC;gBACE;oBACE,EAAE,EAAE,QAAQ;oBACZ,IAAI,EAAE,WAAW;oBACjB,IAAI,EAAE,MAAM;iBACb;aACF;YACH,CAAC,CAAC,SAAS,aAGf,KAAC,MAAM,iDAA2B,EAClC,KAAC,MAAM,mCAAkB,EACzB,KAAC,MAAM,mCAAkB,EACzB,KAAC,MAAM,mCAAkB,YAClB,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,UAAU,EAAE,KAAK;IACjB,KAAK,EAAE,cAAc;IACrB,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,gBAAgB;IACtB,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF,UAAU,CAAC,QAAQ,GAAG;IACpB,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC5C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC5F,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC3C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Select, SelectProps, Option } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Select',\n component: Select\n} as Meta;\n\ninterface SelectStoryProps extends SelectProps {\n showAction: boolean;\n}\n\nexport const SelectDemo: Story<SelectStoryProps> = (args: SelectStoryProps) => {\n return (\n <Select\n id='select-demo'\n label={args.label}\n labelHidden={args.labelHidden}\n info={args.info}\n status={args.status}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n actions={\n args.showAction\n ? [\n {\n id: 'config',\n text: 'Configure',\n icon: 'gear'\n }\n ]\n : undefined\n }\n >\n <Option>Choose an option…</Option>\n <Option>Option 1</Option>\n <Option>Option 2</Option>\n <Option>Option 3</Option>\n </Select>\n );\n};\n\nSelectDemo.args = {\n showAction: false,\n label: 'Select input',\n labelHidden: false,\n info: 'Choose a value',\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false\n};\n\nSelectDemo.argTypes = {\n showAction: { control: { type: 'boolean' } },\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n info: { control: { type: 'text' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } }\n};\n"]}
1	+ {"version":3,"file":"Select.stories.js","sourceRoot":"","sources":["../../../src/core/Select/Select.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Select, SelectProps, Option, Configuration } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Select',\n component: Select\n} as Meta;\n\ninterface SelectStoryProps extends SelectProps {\n showAction: boolean;\n}\n\nexport const SelectDemo: Story<SelectStoryProps> = (args: SelectStoryProps) => {\n return (\n <Select\n id='select-demo'\n label={args.label}\n labelHidden={args.labelHidden}\n info={args.info}\n status={args.status}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n actions={\n args.showAction\n ? [\n {\n id: 'config',\n text: 'Configure',\n icon: 'gear'\n }\n ]\n : undefined\n }\n >\n <Option>Choose an option…</Option>\n <Option>Option 1</Option>\n <Option>Option 2</Option>\n <Option>Option 3</Option>\n </Select>\n );\n};\n\nSelectDemo.args = {\n showAction: false,\n label: 'Select input',\n labelHidden: false,\n info: 'Choose a value',\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false\n};\n\nSelectDemo.argTypes = {\n showAction: { control: { type: 'boolean' } },\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n info: { control: { type: 'text' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableSelectProps {\n height?: string;\n padding?: string;\n borderColor?: string;\n borderWidth?: string;\n borderRadius?: string;\n}\n\nexport const ConfigurableSelect: Story<ConfigurableSelectProps> = (\n args: ConfigurableSelectProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n select: {\n height: args.height,\n padding: args.padding,\n 'border-color': args.borderColor,\n 'border-width': args.borderWidth,\n 'border-radius': args.borderRadius\n }\n }\n }}\n >\n <Select label='Select input' info='Choose a value'>\n <Option>Choose an option…</Option>\n <Option>Option 1</Option>\n <Option>Option 2</Option>\n <Option>Option 3</Option>\n </Select>\n </Configuration>\n );\n};\n\nConfigurableSelect.args = {\n height: '2rem',\n padding: '0.5rem',\n borderColor: '#939393',\n borderWidth: '0.0625rem',\n borderRadius: '0.5'\n};\n\nConfigurableSelect.argTypes = {\n height: { control: { type: 'text' } },\n padding: { control: { type: 'text' } },\n borderColor: { control: { type: 'color' } },\n borderWidth: { control: { type: 'text' } },\n borderRadius: { control: { type: 'text' } }\n};\n"]}

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

@@ -11,4 +11,10 @@ interface SentimentStoryProps extends SentimentProps {
     negativeIcon: string;
 }
 export declare const SentimentDemo: Story<SentimentStoryProps>;
+interface ConfigurableSentimentProps {
+    positiveColor?: string;
+    negativeColor?: string;
+    neutralColor?: string;
+}
+export declare const ConfigurableSentiment: Story<ConfigurableSentimentProps>;
 //# sourceMappingURL=Sentiment.stories.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Sentiment.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Sentiment/Sentiment.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,~~EAAoB~~,cAAc,EAAE,MAAM,yBAAyB,CAAC;;~~AAE3E~~,wBAGU;AAEV,UAAU,mBAAoB,SAAQ,cAAc;IAClD,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,mBAAmB,CAqBpD,CAAC"}
1	+ {"version":3,"file":"Sentiment.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Sentiment/Sentiment.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAmC,cAAc,EAAE,MAAM,yBAAyB,CAAC;;AAE1F,wBAGU;AAEV,UAAU,mBAAoB,SAAQ,cAAc;IAClD,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,mBAAmB,CAqBpD,CAAC;AAwBF,UAAU,0BAA0B;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,0BAA0B,CA0BnE,CAAC"}

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

@@ -1,5 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { icons, Sentiment } from '@pega/cosmos-react-core';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Configuration, icons, Sentiment } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Sentiment',
     component: Sentiment
@@ -37,4 +37,31 @@ SentimentDemo.argTypes = {
     negativeLabel: { control: { type: 'text' } },
     negativeIcon: { options: icons, control: { type: 'select', icons: true } }
 };
+export const ConfigurableSentiment = (args) => {
+    return (_jsxs(Configuration, { theme: {
+            components: {
+                sentiment: {
+                    positive: {
+                        color: args.positiveColor
+                    },
+                    negative: {
+                        color: args.negativeColor
+                    },
+                    neutral: {
+                        color: args.neutralColor
+                    }
+                }
+            }
+        }, children: [_jsx(Sentiment, { variant: 'positive', icons: { positive: 'face-happy-solid' } }, void 0), _jsx(Sentiment, { variant: 'negative', icons: { negative: 'face-sad-solid' } }, void 0), _jsx(Sentiment, { variant: 'neutral', icons: { neutral: 'face-blank-solid' } }, void 0)] }, void 0));
+};
+ConfigurableSentiment.args = {
+    positiveColor: '#20aa50',
+    negativeColor: '#d91c29',
+    neutralColor: '#939393'
+};
+ConfigurableSentiment.argTypes = {
+    positiveColor: { control: { type: 'color' } },
+    negativeColor: { control: { type: 'color' } },
+    neutralColor: { control: { type: 'color' } }
+};
 //# sourceMappingURL=Sentiment.stories.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Sentiment.stories.js","sourceRoot":"","sources":["../../../src/core/Sentiment/Sentiment.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAkB,MAAM,yBAAyB,CAAC;~~AAE3E~~,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,SAAS;CACb,CAAC;AAWV,MAAM,CAAC,MAAM,aAAa,GAA+B,CAAC,IAAyB,EAAE,EAAE;IACrF,MAAM,SAAS,GAAG;QAChB,QAAQ,EAAE,IAAI,CAAC,YAAY;QAC3B,OAAO,EAAE,IAAI,CAAC,WAAW;QACzB,QAAQ,EAAE,IAAI,CAAC,YAAY;KAC5B,CAAC;IAEF,MAAM,MAAM,GAAG;QACb,QAAQ,EAAE,IAAI,CAAC,aAAa;QAC5B,OAAO,EAAE,IAAI,CAAC,YAAY;QAC1B,QAAQ,EAAE,IAAI,CAAC,aAAa;KAC7B,CAAC;IAEF,OAAO,CACL,KAAC,SAAS,IACR,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,MAAM,WACd,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,aAAa,CAAC,IAAI,GAAG;IACnB,OAAO,EAAE,UAAU;IACnB,WAAW,EAAE,KAAK;IAClB,aAAa,EAAE,MAAM;IACrB,YAAY,EAAE,kBAAkB;IAChC,YAAY,EAAE,KAAK;IACnB,WAAW,EAAE,kBAAkB;IAC/B,aAAa,EAAE,QAAQ;IACvB,YAAY,EAAE,gBAAgB;CAC/B,CAAC;AAEF,aAAa,CAAC,QAAQ,GAAG;IACvB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtF,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC5C,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IAC1E,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC3C,WAAW,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IACzE,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC5C,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;CAC3E,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { icons, Sentiment, SentimentProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Sentiment',\n component: Sentiment\n} as Meta;\n\ninterface SentimentStoryProps extends SentimentProps {\n positiveLabel: string;\n neutralLabel: string;\n negativeLabel: string;\n positiveIcon: string;\n neutralIcon: string;\n negativeIcon: string;\n}\n\nexport const SentimentDemo: Story<SentimentStoryProps> = (args: SentimentStoryProps) => {\n const iconNames = {\n positive: args.positiveIcon,\n neutral: args.neutralIcon,\n negative: args.negativeIcon\n };\n\n const labels = {\n positive: args.positiveLabel,\n neutral: args.neutralLabel,\n negative: args.negativeLabel\n };\n\n return (\n <Sentiment\n variant={args.variant}\n labelHidden={args.labelHidden}\n icons={iconNames}\n labels={labels}\n />\n );\n};\n\nSentimentDemo.args = {\n variant: 'positive',\n labelHidden: false,\n positiveLabel: 'Yay!',\n positiveIcon: 'face-happy-solid',\n neutralLabel: 'Hm…',\n neutralIcon: 'face-blank-solid',\n negativeLabel: 'Uh-oh!',\n negativeIcon: 'face-sad-solid'\n};\n\nSentimentDemo.argTypes = {\n variant: { options: ['positive', 'neutral', 'negative'], control: { type: 'select' } },\n labelHidden: { control: { type: 'boolean' } },\n positiveLabel: { control: { type: 'text' } },\n positiveIcon: { options: icons, control: { type: 'select', icons: true } },\n neutralLabel: { control: { type: 'text' } },\n neutralIcon: { options: icons, control: { type: 'select', icons: true } },\n negativeLabel: { control: { type: 'text' } },\n negativeIcon: { options: icons, control: { type: 'select', icons: true } }\n};\n"]}
1	+ {"version":3,"file":"Sentiment.stories.js","sourceRoot":"","sources":["../../../src/core/Sentiment/Sentiment.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, icons, Sentiment, SentimentProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Sentiment',\n component: Sentiment\n} as Meta;\n\ninterface SentimentStoryProps extends SentimentProps {\n positiveLabel: string;\n neutralLabel: string;\n negativeLabel: string;\n positiveIcon: string;\n neutralIcon: string;\n negativeIcon: string;\n}\n\nexport const SentimentDemo: Story<SentimentStoryProps> = (args: SentimentStoryProps) => {\n const iconNames = {\n positive: args.positiveIcon,\n neutral: args.neutralIcon,\n negative: args.negativeIcon\n };\n\n const labels = {\n positive: args.positiveLabel,\n neutral: args.neutralLabel,\n negative: args.negativeLabel\n };\n\n return (\n <Sentiment\n variant={args.variant}\n labelHidden={args.labelHidden}\n icons={iconNames}\n labels={labels}\n />\n );\n};\n\nSentimentDemo.args = {\n variant: 'positive',\n labelHidden: false,\n positiveLabel: 'Yay!',\n positiveIcon: 'face-happy-solid',\n neutralLabel: 'Hm…',\n neutralIcon: 'face-blank-solid',\n negativeLabel: 'Uh-oh!',\n negativeIcon: 'face-sad-solid'\n};\n\nSentimentDemo.argTypes = {\n variant: { options: ['positive', 'neutral', 'negative'], control: { type: 'select' } },\n labelHidden: { control: { type: 'boolean' } },\n positiveLabel: { control: { type: 'text' } },\n positiveIcon: { options: icons, control: { type: 'select', icons: true } },\n neutralLabel: { control: { type: 'text' } },\n neutralIcon: { options: icons, control: { type: 'select', icons: true } },\n negativeLabel: { control: { type: 'text' } },\n negativeIcon: { options: icons, control: { type: 'select', icons: true } }\n};\n\ninterface ConfigurableSentimentProps {\n positiveColor?: string;\n negativeColor?: string;\n neutralColor?: string;\n}\n\nexport const ConfigurableSentiment: Story<ConfigurableSentimentProps> = (\n args: ConfigurableSentimentProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n sentiment: {\n positive: {\n color: args.positiveColor\n },\n negative: {\n color: args.negativeColor\n },\n neutral: {\n color: args.neutralColor\n }\n }\n }\n }}\n >\n <Sentiment variant='positive' icons={{ positive: 'face-happy-solid' }} />\n <Sentiment variant='negative' icons={{ negative: 'face-sad-solid' }} />\n <Sentiment variant='neutral' icons={{ neutral: 'face-blank-solid' }} />\n </Configuration>\n );\n};\n\nConfigurableSentiment.args = {\n positiveColor: '#20aa50',\n negativeColor: '#d91c29',\n neutralColor: '#939393'\n};\n\nConfigurableSentiment.argTypes = {\n positiveColor: { control: { type: 'color' } },\n negativeColor: { control: { type: 'color' } },\n neutralColor: { control: { type: 'color' } }\n};\n"]}

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

@@ -4,4 +4,11 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const SwitchDemo: Story<SwitchProps>;
 export declare const SwitchInCard: Story<SwitchProps>;
+interface ConfigurableSwitchProps extends SwitchProps {
+    height?: string;
+    width?: string;
+    onColor?: string;
+    offColor?: string;
+}
+export declare const ConfigurableSwitch: Story<ConfigurableSwitchProps>;
 //# sourceMappingURL=Switch.stories.d.ts.map