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

@pega/cosmos-react-demos 3.0.0-dev.3.0 → 3.0.0-dev.30.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 (1484) hide show

package/jsx/core/RadioButtonGroup/RadioButtonGroup.stories.jsx CHANGED Viewed

@@ -9,7 +9,9 @@ export default {
         autoStack: true,
         required: false,
         disabled: false,
-        readOnly: false
+        readOnly: false,
+        showAdditionalInfo: true,
+        showNestedAdditionalInfo: false
     },
     argTypes: {
         labelHidden: { control: { type: 'boolean' } },
@@ -17,11 +19,40 @@ export default {
         autoStack: { 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 RadioButtonGroupDemo = (args) => {
-    return (<RadioButtonGroup label='What do you want to eat?' name='Fruit' labelHidden={args.labelHidden} inline={args.inline} autoStack={args.autoStack} required={args.required} disabled={args.disabled} readOnly={args.readOnly}>
+    return args.showNestedAdditionalInfo ? (<RadioButtonGroup 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} autoStack={args.autoStack} required={args.required} disabled={args.disabled} readOnly={args.readOnly}>
+      <RadioButton label='Banana' id='Banana' defaultChecked additionalInfo={{
+            heading: 'Additional Info',
+            content: 'Some additional info'
+        }}/>
+      <RadioButton label='Apple' id='Apple' additionalInfo={{
+            heading: 'Additional Info',
+            content: 'Some additional info'
+        }}/>
+      <RadioButton label='Mango' id='Mango' additionalInfo={{
+            heading: 'Additional Info',
+            content: 'Some additional info'
+        }}/>
+      <RadioButton label='Orange' id='Orange' additionalInfo={{
+            heading: 'Additional Info',
+            content: 'Some additional info'
+        }}/>
+    </RadioButtonGroup>) : (<RadioButtonGroup 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} autoStack={args.autoStack} required={args.required} disabled={args.disabled} readOnly={args.readOnly}>
       <RadioButton label='Banana' id='Banana' defaultChecked/>
       <RadioButton label='Apple' id='Apple'/>
       <RadioButton label='Mango' id='Mango'/>
@@ -29,8 +60,18 @@ export const RadioButtonGroupDemo = (args) => {
     </RadioButtonGroup>);
 };
 export const RadioButtonCardGroup = (args) => {
-    return (<RadioButtonGroup variant='card' label='Which visuals appear satisfying?' labelHidden={args.labelHidden} inline={args.inline} autoStack={args.autoStack} required={args.required} disabled={args.disabled} readOnly={args.readOnly}>
-      <RadioButton label={<Flex container={{ direction: 'column', gap: 1 }}>
+    return (<RadioButtonGroup additionalInfo={args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined} variant='card' label='Which visuals appear satisfying?' labelHidden={args.labelHidden} inline={args.inline} autoStack={args.autoStack} required={args.required} disabled={args.disabled} readOnly={args.readOnly}>
+      <RadioButton additionalInfo={args.showNestedAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined} label={<Flex container={{ direction: 'column', gap: 1 }}>
             <Text variant='h4'>A paragraph</Text>
             <Paragraph>
               This is a paragraph of text. It is meant to appear visually satisfying amongst the

package/jsx/core/RadioButtonGroup/RadioButtonGroup.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButtonGroup.stories.jsx","sourceRoot":"","sources":["../../../src/core/RadioButtonGroup/RadioButtonGroup.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n FieldGroup,\n FieldValueList,\n Flex,\n RadioButton,\n RadioButtonGroup,\n RadioCheckGroupProps,\n Text\n} from '@pega/cosmos-react-core';\n\nimport { Paragraph, StyledImage } from './RadioButtonGroup.styles';\n\nexport default {\n title: 'Core/RadioButtonGroup',\n component: RadioButtonGroup,\n args: {\n labelHidden: false,\n inline: false,\n autoStack: true,\n required: false,\n disabled: false,\n readOnly: false\n },\n argTypes: {\n labelHidden: { control: { type: 'boolean' } },\n inline: { control: { type: 'boolean' } },\n autoStack: { 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 RadioButtonGroupDemo: Story<RadioCheckGroupProps> = (args: RadioCheckGroupProps) => {\n return (\n <RadioButtonGroup\n label='What do you want to eat?'\n name='Fruit'\n labelHidden={args.labelHidden}\n inline={args.inline}\n autoStack={args.autoStack}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n >\n <RadioButton label='Banana' id='Banana' defaultChecked />\n <RadioButton label='Apple' id='Apple' />\n <RadioButton label='Mango' id='Mango' />\n <RadioButton label='Orange' id='Orange' />\n </RadioButtonGroup>\n );\n};\n\nexport const RadioButtonCardGroup: Story<RadioCheckGroupProps> = (args: RadioCheckGroupProps) => {\n return (\n <RadioButtonGroup\n variant='card'\n label='Which visuals appear satisfying?'\n labelHidden={args.labelHidden}\n inline={args.inline}\n autoStack={args.autoStack}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n >\n <RadioButton\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 <RadioButton\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 <RadioButton\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 <RadioButton\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 </RadioButtonGroup>\n );\n};\n"]}
1	+ {"version":3,"file":"RadioButtonGroup.stories.jsx","sourceRoot":"","sources":["../../../src/core/RadioButtonGroup/RadioButtonGroup.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n FieldGroup,\n FieldValueList,\n Flex,\n RadioButton,\n RadioButtonGroup,\n RadioCheckGroupProps,\n Text,\n OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport { Paragraph, StyledImage } from './RadioButtonGroup.styles';\n\nexport default {\n title: 'Core/RadioButtonGroup',\n component: RadioButtonGroup,\n args: {\n labelHidden: false,\n inline: false,\n autoStack: true,\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 autoStack: { 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 RadioButtonGroupDemo: Story<OmitStrict<RadioCheckGroupStoryProps, 'children'>> = (\n args: OmitStrict<RadioCheckGroupStoryProps, 'children'>\n) => {\n return args.showNestedAdditionalInfo ? (\n <RadioButtonGroup\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 autoStack={args.autoStack}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n >\n <RadioButton\n label='Banana'\n id='Banana'\n defaultChecked\n additionalInfo={{\n heading: 'Additional Info',\n content: 'Some additional info'\n }}\n />\n <RadioButton\n label='Apple'\n id='Apple'\n additionalInfo={{\n heading: 'Additional Info',\n content: 'Some additional info'\n }}\n />\n <RadioButton\n label='Mango'\n id='Mango'\n additionalInfo={{\n heading: 'Additional Info',\n content: 'Some additional info'\n }}\n />\n <RadioButton\n label='Orange'\n id='Orange'\n additionalInfo={{\n heading: 'Additional Info',\n content: 'Some additional info'\n }}\n />\n </RadioButtonGroup>\n ) : (\n <RadioButtonGroup\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 autoStack={args.autoStack}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n >\n <RadioButton label='Banana' id='Banana' defaultChecked />\n <RadioButton label='Apple' id='Apple' />\n <RadioButton label='Mango' id='Mango' />\n <RadioButton label='Orange' id='Orange' />\n </RadioButtonGroup>\n );\n};\n\nexport const RadioButtonCardGroup: Story<OmitStrict<RadioCheckGroupStoryProps, 'children'>> = (\n args: OmitStrict<RadioCheckGroupStoryProps, 'children'>\n) => {\n return (\n <RadioButtonGroup\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 autoStack={args.autoStack}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n >\n <RadioButton\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 <RadioButton\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 <RadioButton\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 <RadioButton\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 </RadioButtonGroup>\n );\n};\n"]}

package/jsx/core/SearchInput/SearchInput.mocks.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+export declare const searchResults: {
+    primary: string;
+    href: string;
+    secondary: string[];
+    id: string;
+}[];
+export declare const recentSearches: {
+    id: string;
+    primary: string;
+    href: string;
+}[];
+//# sourceMappingURL=SearchInput.mocks.d.ts.map

package/jsx/core/SearchInput/SearchInput.mocks.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"SearchInput.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.mocks.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa;;;;;GAmBzB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;GAG1B,CAAC"}

package/jsx/core/SearchInput/SearchInput.mocks.js ADDED Viewed

@@ -0,0 +1,25 @@
+export const searchResults = [
+    {
+        primary: 'Usability fixes',
+        href: '/BUG-90001',
+        secondary: ['BUG-90001', 'Updated on Thursday'],
+        id: 'BUG-90001'
+    },
+    {
+        primary: 'RTE Enhancements',
+        href: '/STORY-92120',
+        secondary: ['STORY-92120', 'Updated on Monday'],
+        id: 'STORY-92120'
+    },
+    {
+        primary: 'Cosmos Svelte Components',
+        href: '/EPIC-84623',
+        secondary: ['EPIC-84623', 'Updated on Tuesday'],
+        id: 'EPIC-84623'
+    }
+];
+export const recentSearches = [
+    { id: '1', primary: 'How to pet a dog', href: '/search?query=how%20to%20pet%20a%20dog' },
+    { id: '2', primary: 'Can dogs smile', href: '/search?query=can%dogs%smile' }
+];
+//# sourceMappingURL=SearchInput.mocks.js.map

package/jsx/core/SearchInput/SearchInput.mocks.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SearchInput.mocks.js","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.mocks.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B;QACE,OAAO,EAAE,iBAAiB;QAC1B,IAAI,EAAE,YAAY;QAClB,SAAS,EAAE,CAAC,WAAW,EAAE,qBAAqB,CAAC;QAC/C,EAAE,EAAE,WAAW;KAChB;IACD;QACE,OAAO,EAAE,kBAAkB;QAC3B,IAAI,EAAE,cAAc;QACpB,SAAS,EAAE,CAAC,aAAa,EAAE,mBAAmB,CAAC;QAC/C,EAAE,EAAE,aAAa;KAClB;IACD;QACE,OAAO,EAAE,0BAA0B;QACnC,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,CAAC,YAAY,EAAE,oBAAoB,CAAC;QAC/C,EAAE,EAAE,YAAY;KACjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,kBAAkB,EAAE,IAAI,EAAE,wCAAwC,EAAE;IACxF,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,8BAA8B,EAAE;CAC7E,CAAC","sourcesContent":["export const searchResults = [\n {\n primary: 'Usability fixes',\n href: '/BUG-90001',\n secondary: ['BUG-90001', 'Updated on Thursday'],\n id: 'BUG-90001'\n },\n {\n primary: 'RTE Enhancements',\n href: '/STORY-92120',\n secondary: ['STORY-92120', 'Updated on Monday'],\n id: 'STORY-92120'\n },\n {\n primary: 'Cosmos Svelte Components',\n href: '/EPIC-84623',\n secondary: ['EPIC-84623', 'Updated on Tuesday'],\n id: 'EPIC-84623'\n }\n];\n\nexport const recentSearches = [\n { id: '1', primary: 'How to pet a dog', href: '/search?query=how%20to%20pet%20a%20dog' },\n { id: '2', primary: 'Can dogs smile', href: '/search?query=can%dogs%smile' }\n];\n"]}

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

@@ -3,8 +3,5 @@ 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>;
+export declare const EnhancedSearchInputDemo: Story;
 //# sourceMappingURL=SearchInput.stories.d.ts.map

package/jsx/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,~~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~~"}
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;AAG/C,OAAO,EAAe,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;;AAIxE,wBAGU;AAEV,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,CAKnD,CAAC;AAUF,eAAO,MAAM,uBAAuB,EAAE,KAsCrC,CAAC"}

package/jsx/core/SearchInput/SearchInput.stories.jsx CHANGED Viewed

@@ -1,10 +1,13 @@
-import { Configuration, SearchInput } from '@pega/cosmos-react-core';
+import { useRef, useState } from 'react';
+import { SearchInput } from '@pega/cosmos-react-core';
+import { searchResults as mockSearchResults, recentSearches } from './SearchInput.mocks';
 export default {
     title: 'Core/SearchInput',
     component: SearchInput
 };
 export const SearchInputDemo = (args) => {
-    return <SearchInput {...args} placeholder={args.placeholder}/>;
+    const [value, setValue] = useState('');
+    return (<SearchInput {...args} placeholder={args.placeholder} onSearchChange={setValue} value={value}/>);
 };
 SearchInputDemo.args = {
     placeholder: 'Search…'
@@ -12,21 +15,30 @@ SearchInputDemo.args = {
 SearchInputDemo.argTypes = {
     placeholder: { control: { type: 'text' } }
 };
-export const ConfigurableSearchInput = (args) => {
-    return (<Configuration theme={{
-            components: {
-                'search-input': {
-                    'border-radius': args.borderRadius
-                }
+export const EnhancedSearchInputDemo = () => {
+    const [value, setValue] = useState('');
+    const [searchResults, setSearchResults] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const timeout = useRef(null);
+    const onValueChange = (val) => {
+        setValue(val);
+        setLoading(true);
+        setSearchResults([]);
+        if (timeout.current) {
+            clearTimeout(timeout.current);
+        }
+        timeout.current = window.setTimeout(() => {
+            if (val) {
+                setSearchResults(mockSearchResults.filter(res => {
+                    return res.primary.toLowerCase().includes(val.toLowerCase());
+                }));
             }
-        }}>
-      <SearchInput />
-    </Configuration>);
-};
-ConfigurableSearchInput.args = {
-    borderRadius: 9999
-};
-ConfigurableSearchInput.argTypes = {
-    borderRadius: { control: { type: 'number' } }
+            setLoading(false);
+        }, 1000);
+    };
+    return (<SearchInput filters={['Story', 'Very long filter']} loading={loading} searchResults={searchResults?.map(result => ({
+            ...result,
+            onClick: (id, e) => e.preventDefault()
+        }))} value={value} onSearchChange={onValueChange} recentSearches={recentSearches} advancedSearchLink={{ href: '/?path=/story/work-searchresults--search-results-demo' }}/>);
 };
 //# sourceMappingURL=SearchInput.stories.jsx.map

package/jsx/core/SearchInput/SearchInput.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.stories.jsx","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,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,EAAG,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~~,CAAC,~~aAAa~~,~~CACZ~~,KAAK,CAAC,CAAC;~~YACL~~,~~UAAU~~,~~EAAE~~;~~gBACV~~,~~cAAc~~,EAAE;~~oBACd~~,~~eAAe~~,EAAE,IAAI,CAAC,YAAY;~~iBACnC~~;~~aACF;SACF~~,CAAC,~~CAEF~~;~~MAAA~~,CAAC,~~WAAW~~,CAAC,~~AAAD~~,~~EACd~~;~~IAAA~~,EAAE,~~aAAa~~,CAAC,~~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"]}
1	+ {"version":3,"file":"SearchInput.stories.jsx","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAoB,MAAM,yBAAyB,CAAC;AAExE,OAAO,EAAE,aAAa,IAAI,iBAAiB,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAEzF,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,EAAE,CAAC,CAAC;IACvC,OAAO,CACL,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAG,CACjG,CAAC;AACJ,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;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAU,GAAG,EAAE;IACjD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAoC,EAAE,CAAC,CAAC;IAC1F,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAC5C,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,EAAE;QACpC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACd,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,gBAAgB,CAAC,EAAE,CAAC,CAAC;QACrB,IAAI,OAAO,CAAC,OAAO,EAAE;YACnB,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;SAC/B;QACD,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACvC,IAAI,GAAG,EAAE;gBACP,gBAAgB,CACd,iBAAiB,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE;oBAC7B,OAAO,GAAG,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC,CAAC;gBAC/D,CAAC,CAAC,CACH,CAAC;aACH;YACD,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,WAAW,CACV,OAAO,CAAC,CAAC,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC,CACvC,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,aAAa,CAAC,CAAC,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YAC3C,GAAG,MAAM;YACT,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;SACvC,CAAC,CAAC,CAAC,CACJ,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,cAAc,CAAC,CAAC,aAAa,CAAC,CAC9B,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,kBAAkB,CAAC,CAAC,EAAE,IAAI,EAAE,uDAAuD,EAAE,CAAC,EACtF,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport { SearchInput, SearchInputProps } from '@pega/cosmos-react-core';\n\nimport { searchResults as mockSearchResults, recentSearches } from './SearchInput.mocks';\n\nexport default {\n title: 'Core/SearchInput',\n component: SearchInput\n} as Meta;\n\nexport const SearchInputDemo: Story<SearchInputProps> = (args: SearchInputProps) => {\n const [value, setValue] = useState('');\n return (\n <SearchInput {...args} placeholder={args.placeholder} onSearchChange={setValue} value={value} />\n );\n};\n\nSearchInputDemo.args = {\n placeholder: 'Search…'\n};\n\nSearchInputDemo.argTypes = {\n placeholder: { control: { type: 'text' } }\n};\n\nexport const EnhancedSearchInputDemo: Story = () => {\n const [value, setValue] = useState('');\n const [searchResults, setSearchResults] = useState<SearchInputProps['searchResults']>([]);\n const [loading, setLoading] = useState(false);\n const timeout = useRef<number \| null>(null);\n const onValueChange = (val: string) => {\n setValue(val);\n setLoading(true);\n setSearchResults([]);\n if (timeout.current) {\n clearTimeout(timeout.current);\n }\n timeout.current = window.setTimeout(() => {\n if (val) {\n setSearchResults(\n mockSearchResults.filter(res => {\n return res.primary.toLowerCase().includes(val.toLowerCase());\n })\n );\n }\n setLoading(false);\n }, 1000);\n };\n\n return (\n <SearchInput\n filters={['Story', 'Very long filter']}\n loading={loading}\n searchResults={searchResults?.map(result => ({\n ...result,\n onClick: (id, e) => e.preventDefault()\n }))}\n value={value}\n onSearchChange={onValueChange}\n recentSearches={recentSearches}\n advancedSearchLink={{ href: '/?path=/story/work-searchresults--search-results-demo' }}\n />\n );\n};\n"]}

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

@@ -4,6 +4,7 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 interface SelectStoryProps extends SelectProps {
     showAction: boolean;
+    showAdditionalInfo?: boolean;
 }
 export declare const SelectDemo: Story<SelectStoryProps>;
 interface ConfigurableSelectProps {

package/jsx/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,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"}
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;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAqC9C,CAAC;AA0BF,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/jsx/core/Select/Select.stories.jsx CHANGED Viewed

@@ -4,7 +4,12 @@ export default {
     component: Select
 };
 export const SelectDemo = (args) => {
-    return (<Select id='select-demo' label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} actions={args.showAction
+    return (<Select additionalInfo={args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined} id='select-demo' label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} actions={args.showAction
             ? [
                 {
                     id: 'config',
@@ -27,7 +32,8 @@ SelectDemo.args = {
     status: undefined,
     required: false,
     disabled: false,
-    readOnly: false
+    readOnly: false,
+    showAdditionalInfo: true
 };
 SelectDemo.argTypes = {
     showAction: { control: { type: 'boolean' } },
@@ -37,7 +43,8 @@ SelectDemo.argTypes = {
     status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
     required: { control: { type: 'boolean' } },
     disabled: { control: { type: 'boolean' } },
-    readOnly: { control: { type: 'boolean' } }
+    readOnly: { control: { type: 'boolean' } },
+    showAdditionalInfo: { control: { type: 'boolean' } }
 };
 export const ConfigurableSelect = (args) => {
     return (<Configuration theme={{

package/jsx/core/Select/Select.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.stories.jsx","sourceRoot":"","sources":["../../../src/core/Select/Select.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAe,MAAM,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAErF,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,MAAM;CACV,CAAC;~~AAMV~~,MAAM,CAAC,MAAM,UAAU,GAA4B,CAAC,IAAsB,EAAE,EAAE;IAC5E,OAAO,CACL,CAAC,MAAM,CACL,EAAE,CAAC,aAAa,CAChB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,OAAO,CAAC,CACN,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,CACd,CAED;MAAA,CAAC,MAAM,CAAC,iBAAiB,EAAE,MAAM,CACjC;MAAA,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CACxB;MAAA,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CACxB;MAAA,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAC1B;IAAA,EAAE,MAAM,CAAC,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;AAUF,MAAM,CAAC,MAAM,kBAAkB,GAAmC,CAChE,IAA6B,EAC7B,EAAE;IACF,OAAO,CACL,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC;YACL,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,MAAM,EAAE,IAAI,CAAC,MAAM;oBACnB,OAAO,EAAE,IAAI,CAAC,OAAO;oBACrB,cAAc,EAAE,IAAI,CAAC,WAAW;oBAChC,cAAc,EAAE,IAAI,CAAC,WAAW;oBAChC,eAAe,EAAE,IAAI,CAAC,YAAY;iBACnC;aACF;SACF,CAAC,CAEF;MAAA,CAAC,MAAM,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,gBAAgB,CAChD;QAAA,CAAC,MAAM,CAAC,iBAAiB,EAAE,MAAM,CACjC;QAAA,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CACxB;QAAA,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CACxB;QAAA,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAC1B;MAAA,EAAE,MAAM,CACV;IAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,QAAQ;IACjB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,WAAW;IACxB,YAAY,EAAE,KAAK;CACpB,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACrC,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,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;CAC5C,CAAC","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"]}
1	+ {"version":3,"file":"Select.stories.jsx","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 showAdditionalInfo?: boolean;\n}\n\nexport const SelectDemo: Story<SelectStoryProps> = (args: SelectStoryProps) => {\n return (\n <Select\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Some additional info'\n }\n : undefined\n }\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 showAdditionalInfo: true\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 showAdditionalInfo: { 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/jsx/core/SkipLinks/SkipLinks.stories.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { Meta, Story } from '@storybook/react';
+import { SkipLinksProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const SkipLinksDemo: Story<SkipLinksProps>;
+//# sourceMappingURL=SkipLinks.stories.d.ts.map

package/jsx/core/SkipLinks/SkipLinks.stories.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"SkipLinks.stories.d.ts","sourceRoot":"","sources":["../../../src/core/SkipLinks/SkipLinks.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAa,cAAc,EAAE,MAAM,yBAAyB,CAAC;;AAIpE,wBAGU;AAEV,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CA0B/C,CAAC"}

package/jsx/core/SkipLinks/SkipLinks.stories.jsx ADDED Viewed

@@ -0,0 +1,29 @@
+import { useMemo } from 'react';
+import { SkipLinks } from '@pega/cosmos-react-core';
+import { StyledSkipLinksWrapper } from './SkipLinks.styles';
+export default {
+    title: 'Core/SkipLinks',
+    component: SkipLinks
+};
+export const SkipLinksDemo = () => {
+    const items = useMemo(() => [
+        {
+            label: 'go to main content',
+            target: {
+                ariaLabel: 'main content',
+                selector: 'main'
+            }
+        },
+        {
+            label: 'go to footer',
+            target: {
+                ariaLabel: 'footer',
+                selector: 'footer'
+            }
+        }
+    ], []);
+    return (<StyledSkipLinksWrapper>
+      <SkipLinks items={items}/>
+    </StyledSkipLinksWrapper>);
+};
+//# sourceMappingURL=SkipLinks.stories.jsx.map

package/jsx/core/SkipLinks/SkipLinks.stories.jsx.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SkipLinks.stories.jsx","sourceRoot":"","sources":["../../../src/core/SkipLinks/SkipLinks.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,SAAS,EAAkB,MAAM,yBAAyB,CAAC;AAEpE,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,SAAS;CACb,CAAC;AAEV,MAAM,CAAC,MAAM,aAAa,GAA0B,GAAG,EAAE;IACvD,MAAM,KAAK,GAA4B,OAAO,CAC5C,GAAG,EAAE,CAAC;QACJ;YACE,KAAK,EAAE,oBAAoB;YAC3B,MAAM,EAAE;gBACN,SAAS,EAAE,cAAc;gBACzB,QAAQ,EAAE,MAAM;aACjB;SACF;QACD;YACE,KAAK,EAAE,cAAc;YACrB,MAAM,EAAE;gBACN,SAAS,EAAE,QAAQ;gBACnB,QAAQ,EAAE,QAAQ;aACnB;SACF;KACF,EACD,EAAE,CACH,CAAC;IAEF,OAAO,CACL,CAAC,sBAAsB,CACrB;MAAA,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAC1B;IAAA,EAAE,sBAAsB,CAAC,CAC1B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useMemo } from 'react';\n\nimport { SkipLinks, SkipLinksProps } from '@pega/cosmos-react-core';\n\nimport { StyledSkipLinksWrapper } from './SkipLinks.styles';\n\nexport default {\n title: 'Core/SkipLinks',\n component: SkipLinks\n} as Meta;\n\nexport const SkipLinksDemo: Story<SkipLinksProps> = () => {\n const items: SkipLinksProps['items'] = useMemo(\n () => [\n {\n label: 'go to main content',\n target: {\n ariaLabel: 'main content',\n selector: 'main'\n }\n },\n {\n label: 'go to footer',\n target: {\n ariaLabel: 'footer',\n selector: 'footer'\n }\n }\n ],\n []\n );\n\n return (\n <StyledSkipLinksWrapper>\n <SkipLinks items={items} />\n </StyledSkipLinksWrapper>\n );\n};\n"]}

package/jsx/core/SkipLinks/SkipLinks.styles.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export declare const StyledSkipLinksWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
2	+ //# sourceMappingURL=SkipLinks.styles.d.ts.map

package/jsx/core/SkipLinks/SkipLinks.styles.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"SkipLinks.styles.d.ts","sourceRoot":"","sources":["../../../src/core/SkipLinks/SkipLinks.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,sBAAsB,yGAiBlC,CAAC"}

package/jsx/core/SkipLinks/SkipLinks.styles.js ADDED Viewed

@@ -0,0 +1,16 @@
+import styled, { css } from 'styled-components';
+import { StyledSkipLinks, defaultThemeProp } from '@pega/cosmos-react-core';
+export const StyledSkipLinksWrapper = styled.div(({ theme: { base: { spacing } } }) => {
+    return css `
+      ${StyledSkipLinks} {
+        &:not(:focus-within) {
+          clip: unset;
+          height: auto;
+          padding: ${spacing};
+          width: auto;
+        }
+      }
+    `;
+});
+StyledSkipLinksWrapper.defaultProps = defaultThemeProp;
+//# sourceMappingURL=SkipLinks.styles.js.map

package/jsx/core/SkipLinks/SkipLinks.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SkipLinks.styles.js","sourceRoot":"","sources":["../../../src/core/SkipLinks/SkipLinks.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE5E,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAC9C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;QACN,eAAe;;;;qBAIF,OAAO;;;;KAIvB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledSkipLinks, defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledSkipLinksWrapper = styled.div(\n ({\n theme: {\n base: { spacing }\n }\n }) => {\n return css`\n ${StyledSkipLinks} {\n &:not(:focus-within) {\n clip: unset;\n height: auto;\n padding: ${spacing};\n width: auto;\n }\n }\n `;\n }\n);\n\nStyledSkipLinksWrapper.defaultProps = defaultThemeProp;\n"]}

package/jsx/core/Slider/Slider.stories.d.ts CHANGED Viewed

@@ -1,11 +1,12 @@
 import { Meta, Story } from '@storybook/react';
-import { SliderProps } from '@pega/cosmos-react-core';
+import { SliderProps, OmitStrict } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-interface SliderStoryProps extends SliderProps {
+declare type SliderStoryProps = OmitStrict<SliderProps, 'value' | 'onChange'> & {
     min: number;
     max: number;
     step: number;
-}
+    value?: SliderProps['value'];
+};
 export declare const SliderDemo: Story<SliderStoryProps>;
 //# sourceMappingURL=Slider.stories.d.ts.map

package/jsx/core/Slider/Slider.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Slider/Slider.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAU,WAAW,EAAE,MAAM,yBAAyB,CAAC;;~~AAE9D~~,wBAGU;AAGV,UAAU,~~gBAAiB~~,~~SAAQ~~,~~WAAW~~;~~IAC5C~~,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;~~CACd~~;~~AAED~~,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAoC9C,CAAC"}
1	+ {"version":3,"file":"Slider.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Slider/Slider.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAU,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAE1E,wBAGU;AAGV,aAAK,gBAAgB,GAAG,UAAU,CAAC,WAAW,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACtE,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAoC9C,CAAC"}

package/jsx/core/Slider/Slider.stories.jsx CHANGED Viewed

@@ -5,7 +5,7 @@ export default {
     component: Slider
 };
 export const SliderDemo = (args) => {
-    const [value, setValue] = useState(args.value);
+    const [value, setValue] = useState(args.value || 0);
     let ticksObject = args.ticks;
     if (args.max > args.min && !ticksObject) {
         ticksObject = {};

package/jsx/core/Slider/Slider.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.stories.jsx","sourceRoot":"","sources":["../../../src/core/Slider/Slider.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,MAAM,~~EAAe~~,MAAM,yBAAyB,CAAC;~~AAE9D~~,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,MAAM;CACV,CAAC;~~AASV~~,MAAM,CAAC,MAAM,UAAU,GAA4B,CAAC,IAAsB,EAAE,EAAE;IAC5E,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;~~IAC/C~~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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Slider, SliderProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Slider',\n component: Slider\n} as Meta;\n\n// Necessary to prevent linting undefined errors since these will never be undefined in the demo\~~ninterface~~ SliderStoryProps ~~extends~~ SliderProps {\n min: number;\n max: number;\n step: number;\n}\n\nexport const SliderDemo: Story<SliderStoryProps> = (args: SliderStoryProps) => {\n const [value, setValue] = useState(args.value);\n let ticksObject: SliderProps['ticks'] = args.ticks;\n\n if (args.max > args.min && !ticksObject) {\n ticksObject = {};\n const numTicks = Math.floor((args.max - args.min) / (args.step \|\| 1)) + 1;\n Array(numTicks)\n .fill(0)\n .map((_, index) => args.min + index * args.step)\n .forEach(tick => {\n ticksObject![tick] = tick.toString();\n });\n }\n\n return (\n <Slider\n orientation={args.orientation}\n step={args.step}\n min={args.min}\n max={args.max}\n ticks={ticksObject}\n showProgress={args.showProgress}\n preview={args.preview}\n showInput={args.showInput}\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 value={value}\n onChange={(changeValue: number) => setValue(changeValue)}\n />\n );\n};\n\nSliderDemo.args = {\n orientation: 'vertical',\n step: 1,\n min: 0,\n max: 10,\n value: 5,\n ticks: undefined,\n showProgress: true,\n preview: false,\n showInput: true,\n label: 'Slider input',\n labelHidden: false,\n info: 'Pick a value',\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false\n};\n\nSliderDemo.argTypes = {\n orientation: { options: ['vertical', 'horizontal'], control: { type: 'inline-radio' } },\n step: { control: { type: 'number' } },\n min: { control: { type: 'number' } },\n max: { control: { type: 'number' } },\n value: { control: { type: 'number' } },\n ticks: { control: { type: 'object' } },\n showProgress: { control: { type: 'boolean' } },\n preview: { control: { type: 'boolean' } },\n showInput: { 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":"Slider.stories.jsx","sourceRoot":"","sources":["../../../src/core/Slider/Slider.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Slider, SliderProps, OmitStrict } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Slider',\n component: Slider\n} as Meta;\n\n// Necessary to prevent linting undefined errors since these will never be undefined in the demo\ntype SliderStoryProps = OmitStrict<SliderProps, 'value' \| 'onChange'> & {\n min: number;\n max: number;\n step: number;\n value?: SliderProps['value'];\n};\n\nexport const SliderDemo: Story<SliderStoryProps> = (args: SliderStoryProps) => {\n const [value, setValue] = useState(args.value \|\| 0);\n let ticksObject: SliderProps['ticks'] = args.ticks;\n\n if (args.max > args.min && !ticksObject) {\n ticksObject = {};\n const numTicks = Math.floor((args.max - args.min) / (args.step \|\| 1)) + 1;\n Array(numTicks)\n .fill(0)\n .map((_, index) => args.min + index * args.step)\n .forEach(tick => {\n ticksObject![tick] = tick.toString();\n });\n }\n\n return (\n <Slider\n orientation={args.orientation}\n step={args.step}\n min={args.min}\n max={args.max}\n ticks={ticksObject}\n showProgress={args.showProgress}\n preview={args.preview}\n showInput={args.showInput}\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 value={value}\n onChange={(changeValue: number) => setValue(changeValue)}\n />\n );\n};\n\nSliderDemo.args = {\n orientation: 'vertical',\n step: 1,\n min: 0,\n max: 10,\n value: 5,\n ticks: undefined,\n showProgress: true,\n preview: false,\n showInput: true,\n label: 'Slider input',\n labelHidden: false,\n info: 'Pick a value',\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false\n};\n\nSliderDemo.argTypes = {\n orientation: { options: ['vertical', 'horizontal'], control: { type: 'inline-radio' } },\n step: { control: { type: 'number' } },\n min: { control: { type: 'number' } },\n max: { control: { type: 'number' } },\n value: { control: { type: 'number' } },\n ticks: { control: { type: 'object' } },\n showProgress: { control: { type: 'boolean' } },\n preview: { control: { type: 'boolean' } },\n showInput: { 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"]}

package/jsx/core/SummaryItem/SummaryItem.stories.d.ts CHANGED Viewed

@@ -2,10 +2,10 @@ import { Meta, Story } from '@storybook/react';
 import { SummaryItemProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-interface SummaryItemStoryProps extends SummaryItemProps {
-    showSecondary: boolean;
-    showVisual: boolean;
-    showActions: boolean;
-}
+declare type SummaryItemStoryProps = SummaryItemProps & {
+    showSecondary?: boolean;
+    showVisual?: boolean;
+    showActions?: boolean;
+};
 export declare const SummaryItemDemo: Story<SummaryItemStoryProps>;
 //# sourceMappingURL=SummaryItem.stories.d.ts.map

package/jsx/core/SummaryItem/SummaryItem.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SummaryItem.stories.d.ts","sourceRoot":"","sources":["../../../src/core/SummaryItem/SummaryItem.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAOL,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;;AAEjC,wBAMU;AAEV,~~UAAU~~,~~qBAAsB~~,~~SAAQ~~,gBAAgB;~~IACtD~~,aAAa,EAAE,OAAO,CAAC;~~IACvB~~,UAAU,EAAE,OAAO,CAAC;~~IACpB~~,WAAW,EAAE,OAAO,CAAC;~~CACtB~~;~~AAED~~,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,qBAAqB,CA+CxD,CAAC"}
1	+ {"version":3,"file":"SummaryItem.stories.d.ts","sourceRoot":"","sources":["../../../src/core/SummaryItem/SummaryItem.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAOL,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;;AAEjC,wBAMU;AAEV,aAAK,qBAAqB,GAAG,gBAAgB,GAAG;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,qBAAqB,CA+CxD,CAAC"}

package/jsx/core/SummaryItem/SummaryItem.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SummaryItem.stories.jsx","sourceRoot":"","sources":["../../../src/core/SummaryItem/SummaryItem.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,MAAM,EACN,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,MAAM,EACN,WAAW,EAEZ,MAAM,yBAAyB,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACM,CAAC;AAQV,MAAM,CAAC,MAAM,eAAe,GAAiC,CAAC,IAA2B,EAAE,EAAE;IAC3F,OAAO,CACL,CAAC,WAAW,CACV,OAAO,CAAC,0BAA0B,CAClC,SAAS,CAAC,CACR,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACnB,CAAC,QAAQ,CACP,KAAK,CAAC,CAAC;gBACL,mBAAmB;gBACnB,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,EAAE,MAAM,CAAC;gBAC3C,EACE;qBAAK,CAAC,GAAG,CACT;gBAAA,CAAC,IAAI,CAAC,IAAI,CAAC,sBAAsB,CAAC,MAAM,CAAC,QAAQ,CAC/C;;gBACF,EAAE,IAAI,CACR;cAAA,GAAG;aACJ,CAAC,EACF,CACH,CAAC,CAAC,CAAC,SAAS,CACd,CACD,MAAM,CAAC,CACL,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAChB,CAAC,MAAM,CACL,IAAI,CAAC,GAAG,CACR,IAAI,CAAC,YAAY,CACjB,QAAQ,CAAC,gDAAgD,EACzD,CACH,CAAC,CAAC,CAAC,SAAS,CACd,CACD,OAAO,CAAC,CACN,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CACjB,CAAC,UAAU,CACT,IAAI,CAAC,SAAS,CACd,OAAO,CAAC,QAAQ,CAChB,IAAI,CAAC,MAAM,CACX,QAAQ,CACR,IAAI,CAAC,CAAC;gBACJ,KAAK,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;oBAC5E,EAAE,EAAE,IAAI;oBACR,OAAO,EAAE,IAAI;iBACd,CAAC,CAAC;aACJ,CAAC,EACF,CACH,CAAC,CAAC,CAAC,SAAS,CACd,EACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,aAAa,EAAE,IAAI;IACnB,UAAU,EAAE,IAAI;IAChB,WAAW,EAAE,IAAI;CAClB,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC/C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC5C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n Avatar,\n Link,\n MenuButton,\n MetaList,\n Status,\n SummaryItem,\n SummaryItemProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/SummaryItem',\n component: SummaryItem,\n parameters: {\n layout: 'centered'\n }\n} as Meta;\n\~~ninterface~~ SummaryItemStoryProps ~~extends~~ SummaryItemProps {\n showSecondary: boolean;\n showVisual: boolean;\n showActions: boolean;\n}\n\nexport const SummaryItemDemo: Story<SummaryItemStoryProps> = (args: SummaryItemStoryProps) => {\n return (\n <SummaryItem\n primary='This is the primary info'\n secondary={\n args.showSecondary ? (\n <MetaList\n items={[\n 'email@example.com',\n <Status variant='success'>Verified</Status>,\n <>\n Go to{' '}\n <Link href='https://www.pega.com' target='_blank'>\n Pega.com\n </Link>\n </>\n ]}\n />\n ) : undefined\n }\n visual={\n args.showVisual ? (\n <Avatar\n size='l'\n name='Random Man'\n imageSrc='https://randomuser.me/api/portraits/men/41.jpg'\n />\n ) : undefined\n }\n actions={\n args.showActions ? (\n <MenuButton\n text='Options'\n variant='simple'\n icon='more'\n iconOnly\n menu={{\n items: ['Option Number 1', 'Option Number 2', 'Option Number 3'].map(name => ({\n id: name,\n primary: name\n }))\n }}\n />\n ) : undefined\n }\n />\n );\n};\n\nSummaryItemDemo.args = {\n showSecondary: true,\n showVisual: true,\n showActions: true\n};\n\nSummaryItemDemo.argTypes = {\n showSecondary: { control: { type: 'boolean' } },\n showVisual: { control: { type: 'boolean' } },\n showActions: { control: { type: 'boolean' } }\n};\n"]}
1	+ {"version":3,"file":"SummaryItem.stories.jsx","sourceRoot":"","sources":["../../../src/core/SummaryItem/SummaryItem.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,MAAM,EACN,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,MAAM,EACN,WAAW,EAEZ,MAAM,yBAAyB,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACM,CAAC;AAQV,MAAM,CAAC,MAAM,eAAe,GAAiC,CAAC,IAA2B,EAAE,EAAE;IAC3F,OAAO,CACL,CAAC,WAAW,CACV,OAAO,CAAC,0BAA0B,CAClC,SAAS,CAAC,CACR,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACnB,CAAC,QAAQ,CACP,KAAK,CAAC,CAAC;gBACL,mBAAmB;gBACnB,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,EAAE,MAAM,CAAC;gBAC3C,EACE;qBAAK,CAAC,GAAG,CACT;gBAAA,CAAC,IAAI,CAAC,IAAI,CAAC,sBAAsB,CAAC,MAAM,CAAC,QAAQ,CAC/C;;gBACF,EAAE,IAAI,CACR;cAAA,GAAG;aACJ,CAAC,EACF,CACH,CAAC,CAAC,CAAC,SAAS,CACd,CACD,MAAM,CAAC,CACL,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAChB,CAAC,MAAM,CACL,IAAI,CAAC,GAAG,CACR,IAAI,CAAC,YAAY,CACjB,QAAQ,CAAC,gDAAgD,EACzD,CACH,CAAC,CAAC,CAAC,SAAS,CACd,CACD,OAAO,CAAC,CACN,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CACjB,CAAC,UAAU,CACT,IAAI,CAAC,SAAS,CACd,OAAO,CAAC,QAAQ,CAChB,IAAI,CAAC,MAAM,CACX,QAAQ,CACR,IAAI,CAAC,CAAC;gBACJ,KAAK,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;oBAC5E,EAAE,EAAE,IAAI;oBACR,OAAO,EAAE,IAAI;iBACd,CAAC,CAAC;aACJ,CAAC,EACF,CACH,CAAC,CAAC,CAAC,SAAS,CACd,EACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,aAAa,EAAE,IAAI;IACnB,UAAU,EAAE,IAAI;IAChB,WAAW,EAAE,IAAI;CAClB,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC/C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC5C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n Avatar,\n Link,\n MenuButton,\n MetaList,\n Status,\n SummaryItem,\n SummaryItemProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/SummaryItem',\n component: SummaryItem,\n parameters: {\n layout: 'centered'\n }\n} as Meta;\n\ntype SummaryItemStoryProps = SummaryItemProps & {\n showSecondary?: boolean;\n showVisual?: boolean;\n showActions?: boolean;\n};\n\nexport const SummaryItemDemo: Story<SummaryItemStoryProps> = (args: SummaryItemStoryProps) => {\n return (\n <SummaryItem\n primary='This is the primary info'\n secondary={\n args.showSecondary ? (\n <MetaList\n items={[\n 'email@example.com',\n <Status variant='success'>Verified</Status>,\n <>\n Go to{' '}\n <Link href='https://www.pega.com' target='_blank'>\n Pega.com\n </Link>\n </>\n ]}\n />\n ) : undefined\n }\n visual={\n args.showVisual ? (\n <Avatar\n size='l'\n name='Random Man'\n imageSrc='https://randomuser.me/api/portraits/men/41.jpg'\n />\n ) : undefined\n }\n actions={\n args.showActions ? (\n <MenuButton\n text='Options'\n variant='simple'\n icon='more'\n iconOnly\n menu={{\n items: ['Option Number 1', 'Option Number 2', 'Option Number 3'].map(name => ({\n id: name,\n primary: name\n }))\n }}\n />\n ) : undefined\n }\n />\n );\n};\n\nSummaryItemDemo.args = {\n showSecondary: true,\n showVisual: true,\n showActions: true\n};\n\nSummaryItemDemo.argTypes = {\n showSecondary: { control: { type: 'boolean' } },\n showVisual: { control: { type: 'boolean' } },\n showActions: { control: { type: 'boolean' } }\n};\n"]}

package/jsx/core/SummaryList/SummaryList.stories.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
 import { Meta, Story } from '@storybook/react';
-import { SummaryListProps } from '@pega/cosmos-react-core';
+import { OmitStrict, SummaryListProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-interface SummaryListStoryProps extends SummaryListProps {
+interface SummaryListStoryProps extends OmitStrict<SummaryListProps, 'items'> {
     showSecondary?: boolean;
     showVisual?: boolean;
     showActions?: boolean;

package/jsx/core/SummaryList/SummaryList.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SummaryList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/SummaryList/SummaryList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,~~EAML~~,gBAAgB,~~EAGjB~~,MAAM,yBAAyB,CAAC;;AAIjC,wBA4BU;AAEV,UAAU,qBAAsB,SAAQ,gBAAgB;~~IACtD~~,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,qBAAqB,CAmDxD,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,qBAAqB,CAqG3D,CAAC"}
1	+ {"version":3,"file":"SummaryList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/SummaryList/SummaryList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,UAAU,EAGV,gBAAgB,EAIjB,MAAM,yBAAyB,CAAC;;AAIjC,wBA4BU;AAEV,UAAU,qBAAsB,SAAQ,UAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC;IAC3E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,qBAAqB,CAmDxD,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,qBAAqB,CAqG3D,CAAC"}

package/jsx/core/SummaryList/SummaryList.stories.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
-import { useContext, useMemo, useState } from 'react';
-import { icons, Modal, ModalManagerContext, SummaryList, ViewAll, createStringMatcher } from '@pega/cosmos-react-core';
+import { useMemo, useState } from 'react';
+import { icons, Modal, SummaryList, ViewAll, createStringMatcher, useModalManager } from '@pega/cosmos-react-core';
 import { useMockListData } from './SummaryList.mocks';
 export default {
     title: 'Core/SummaryList',
@@ -31,7 +31,7 @@ export default {
     }
 };
 export const SummaryListDemo = (args) => {
-    const { create: createModal } = useContext(ModalManagerContext);
+    const { create: createModal } = useModalManager();
     const [loading, setLoading] = useState(true);
     const [items] = useMockListData(() => {
         setLoading(false);
@@ -89,7 +89,7 @@ export const SummaryListViewAll = (args) => {
             ]} searchInputProps={{ onSearchChange: setSearch }}/>
       </Modal>);
     };
-    const { create: createModal } = useContext(ModalManagerContext);
+    const { create: createModal } = useModalManager();
     const [loading, setLoading] = useState(true);
     const [items] = useMockListData(() => {
         setLoading(false);