npm - @pega/cosmos-react-demos - Versions diffs - 3.0.0-dev.4.2 → 3.0.0-dev.5.0 - Mend

@pega/cosmos-react-demos 3.0.0-dev.4.2 → 3.0.0-dev.5.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 (386) hide show

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

@@ -72,7 +72,7 @@ export const PopoverDemo = (args) => {
         onFocus: toggleClickPopover,
         onBlur: toggleClickPopover
     };
-    return (_jsxs(Flex, { container: { justify: 'center', pad: 4, gap: 4, alignItems: 'center' }, children: [_jsx(Text, { ref: setTextEl, variant: 'h1', ...hoverMountingHandlers, children: "Hover Over Me" }, void 0), _jsx(Popover, { ref: setHoverPopoverEl, show: mountHoverPopover, target: textEl, portal: true, arrow: args.arrow, showDelay: args.showDelay, hideDelay: args.hideDelay, placement: args.placement, ...hoverMountingHandlers, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { children: "This Popover appears on hover!" }, void 0) }, void 0) }, void 0) }, void 0), _jsx(Button, { ref: setButtonEl, ...clickMountingHandlers, children: "Click Me" }, void 0), _jsx(Popover, { ref: setClickPopoverEl, show: mountClickPopover, target: buttonEl, portal: true, arrow: args.arrow, showDelay: args.showDelay, hideDelay: args.hideDelay, placement: args.placement, ...clickMountingHandlers, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { children: "This Popover appears on click!" }, void 0) }, void 0) }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { justify: 'center', pad: 4, gap: 4, alignItems: 'center' }, children: [_jsx(Text, { ref: setTextEl, variant: 'h1', ...hoverMountingHandlers, children: "Hover Over Me" }), _jsx(Popover, { ref: setHoverPopoverEl, show: mountHoverPopover, target: textEl, portal: true, arrow: args.arrow, showDelay: args.showDelay, hideDelay: args.hideDelay, placement: args.placement, ...hoverMountingHandlers, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { children: "This Popover appears on hover!" }) }) }) }), _jsx(Button, { ref: setButtonEl, ...clickMountingHandlers, children: "Click Me" }), _jsx(Popover, { ref: setClickPopoverEl, show: mountClickPopover, target: buttonEl, portal: true, arrow: args.arrow, showDelay: args.showDelay, hideDelay: args.hideDelay, placement: args.placement, ...clickMountingHandlers, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { children: "This Popover appears on click!" }) }) }) })] }));
 };
 export const PopoverGroups = () => {
     const [firstTooltipButton, setFirstTooltipButton] = useElement();
@@ -84,7 +84,7 @@ export const PopoverGroups = () => {
     const [showFirstPopover, setShowFirstPopover] = useState(false);
     const [showSecondPopover, setShowSecondPopover] = useState(false);
     const [showThirdPopover, setShowThirdPopover] = useState(false);
-    return (_jsxs(Flex, { container: { direction: 'column', gap: 4 }, children: [_jsx(Text, { variant: 'h2', children: "groupId: link_preview" }, void 0), _jsxs(Flex, { children: [_jsx(Link, { href: 'http://www.google.com', previewable: true, children: "Previewable Link" }, void 0), _jsx(Link, { href: 'http://www.google.com', previewable: true, children: "Previewable Link" }, void 0), _jsx(Link, { href: 'http://www.google.com', previewable: true, children: "Previewable Link" }, void 0)] }, void 0), _jsx(Text, { variant: 'h2', children: "groupId: tooltip" }, void 0), _jsxs(Flex, { children: [_jsx(Button, { ref: setFirstTooltipButton, "aria-describedby": 'first-tooltip', children: "Hover me" }, void 0), _jsx(Tooltip, { target: firstTooltipButton, id: 'first-tooltip', children: "This is a tooltip for the first button." }, void 0), _jsx(Button, { ref: setSecondTooltipButton, "aria-describedby": 'second-tooltip', children: "Hover me" }, void 0), _jsx(Tooltip, { target: secondTooltipButton, id: 'second-tooltip', children: "This is a tooltip for the second button." }, void 0), _jsx(Button, { ref: setThirdTooltipButton, "aria-describedby": 'third-tooltip', children: "Hover me" }, void 0), _jsx(Tooltip, { target: thirdTooltipButton, id: 'third-tooltip', children: "This is a tooltip for the third button." }, void 0)] }, void 0), _jsx(Text, { variant: 'h2', children: "No groupId" }, void 0), _jsxs(Flex, { children: [_jsx(Button, { ref: setFirstPopoverButton, onClick: () => setShowFirstPopover(curr => !curr), children: "Click me" }, void 0), _jsx(Popover, { show: showFirstPopover, target: firstPopoverButton, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { children: "Popover #1" }, void 0) }, void 0) }, void 0) }, void 0), _jsx(Button, { ref: setSecondPopoverButton, onClick: () => setShowSecondPopover(curr => !curr), children: "Click me" }, void 0), _jsx(Popover, { show: showSecondPopover, target: secondPopoverButton, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { children: "Popover #2" }, void 0) }, void 0) }, void 0) }, void 0), _jsx(Button, { ref: setThirdPopoverButton, onClick: () => setShowThirdPopover(curr => !curr), children: "Click me" }, void 0), _jsx(Popover, { show: showThirdPopover, target: thirdPopoverButton, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { children: "Popover #3" }, void 0) }, void 0) }, void 0) }, void 0)] }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 4 }, children: [_jsx(Text, { variant: 'h2', children: "groupId: link_preview" }), _jsxs(Flex, { children: [_jsx(Link, { href: 'http://www.google.com', previewable: true, children: "Previewable Link" }), _jsx(Link, { href: 'http://www.google.com', previewable: true, children: "Previewable Link" }), _jsx(Link, { href: 'http://www.google.com', previewable: true, children: "Previewable Link" })] }), _jsx(Text, { variant: 'h2', children: "groupId: tooltip" }), _jsxs(Flex, { children: [_jsx(Button, { ref: setFirstTooltipButton, "aria-describedby": 'first-tooltip', children: "Hover me" }), _jsx(Tooltip, { target: firstTooltipButton, id: 'first-tooltip', children: "This is a tooltip for the first button." }), _jsx(Button, { ref: setSecondTooltipButton, "aria-describedby": 'second-tooltip', children: "Hover me" }), _jsx(Tooltip, { target: secondTooltipButton, id: 'second-tooltip', children: "This is a tooltip for the second button." }), _jsx(Button, { ref: setThirdTooltipButton, "aria-describedby": 'third-tooltip', children: "Hover me" }), _jsx(Tooltip, { target: thirdTooltipButton, id: 'third-tooltip', children: "This is a tooltip for the third button." })] }), _jsx(Text, { variant: 'h2', children: "No groupId" }), _jsxs(Flex, { children: [_jsx(Button, { ref: setFirstPopoverButton, onClick: () => setShowFirstPopover(curr => !curr), children: "Click me" }), _jsx(Popover, { show: showFirstPopover, target: firstPopoverButton, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { children: "Popover #1" }) }) }) }), _jsx(Button, { ref: setSecondPopoverButton, onClick: () => setShowSecondPopover(curr => !curr), children: "Click me" }), _jsx(Popover, { show: showSecondPopover, target: secondPopoverButton, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { children: "Popover #2" }) }) }) }), _jsx(Button, { ref: setThirdPopoverButton, onClick: () => setShowThirdPopover(curr => !curr), children: "Click me" }), _jsx(Popover, { show: showThirdPopover, target: thirdPopoverButton, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { children: "Popover #3" }) }) }) })] })] }));
 };
 PopoverGroups.argTypes = {
     arrow: { table: { disable: true } },

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

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

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

@@ -32,7 +32,7 @@ export const IndeterminateProgress = (args) => {
             setLoading(true);
         }
     }, [args.placement]);
-    return (_jsxs(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledDemoWrap, children: [args.placement === 'global' && _jsx(Button, { onClick: handleClick, children: "Start loading" }, void 0), args.placement === 'inline' && _jsx(Text, { children: "Progress demo" }, void 0), _jsx(Progress, { variant: args.variant, placement: args.placement, message: args.message, visible: loading }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledDemoWrap, children: [args.placement === 'global' && _jsx(Button, { onClick: handleClick, children: "Start loading" }), args.placement === 'inline' && _jsx(Text, { children: "Progress demo" }), _jsx(Progress, { variant: args.variant, placement: args.placement, message: args.message, visible: loading })] }));
 };
 IndeterminateProgress.args = {
     message: 'Loading'
@@ -53,7 +53,7 @@ export const DeterminateProgress = (args) => {
             setLoading(true);
         }
     }, [args.placement]);
-    return (_jsxs(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledDemoWrap, children: [args.placement === 'global' && _jsx(Button, { onClick: handleClick, children: "Start loading" }, void 0), args.placement === 'inline' && _jsx(Text, { children: "Progress demo" }, void 0), _jsx(Progress, { value: args.value, variant: args.variant, placement: args.placement, message: args.message || `${args.value}%`, visible: loading }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledDemoWrap, children: [args.placement === 'global' && _jsx(Button, { onClick: handleClick, children: "Start loading" }), args.placement === 'inline' && _jsx(Text, { children: "Progress demo" }), _jsx(Progress, { value: args.value, variant: args.variant, placement: args.placement, message: args.message || `${args.value}%`, visible: loading })] }));
 };
 DeterminateProgress.args = {
     value: 67
@@ -68,7 +68,7 @@ export const ConfigurableProgress = (args) => {
                     '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));
+        }, children: _jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledDemoWrap, children: _jsx(Progress, { variant: args.variant, placement: 'local', message: 'Loading', visible: true }) }) }));
 };
 ConfigurableProgress.args = {
     progressColor: '#076bc9'

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,EACL,MAAM,EACN,aAAa,EACb,IAAI,EACJ,QAAQ,EAER,IAAI,EACL,MAAM,yBAAyB,CAAC;AAEjC,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;AAMF,MAAM,CAAC,MAAM,oBAAoB,GAAqC,CACpE,IAA+B,EAC/B,EAAE;IACF,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,QAAQ,EAAE;oBACR,gBAAgB,EAAE,IAAI,CAAC,aAAa;iBACrC;aACF;SACF,YAED,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,cAAc,YAC9E,KAAC,QAAQ,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,SAAS,EAAC,OAAO,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,~~iBAAG~~,~~WAC1E~~,~~WACO~~,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,oBAAoB,CAAC,IAAI,GAAG;IAC1B,aAAa,EAAE,SAAS;CACzB,CAAC;AAEF,oBAAoB,CAAC,QAAQ,GAAG;IAC9B,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC7C,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACvC,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACtC,CAAC","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"]}
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.js CHANGED Viewed

@@ -19,10 +19,10 @@ export default {
     }
 };
 export const DefaultRadioButton = (args) => {
-    return (_jsx(RadioButton, { status: args.status, label: args.label, required: args.required, disabled: args.disabled, readOnly: args.readOnly }, void 0));
+    return (_jsx(RadioButton, { status: args.status, label: args.label, required: args.required, disabled: args.disabled, readOnly: args.readOnly }));
 };
 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));
+    return (_jsx(RadioButton, { variant: 'card', status: args.status, label: args.label, required: args.required, disabled: args.disabled, readOnly: args.readOnly }));
 };
 export const ConfigurableRadioButton = (args) => {
     return (_jsx(Configuration, { theme: {
@@ -45,7 +45,7 @@ export const ConfigurableRadioButton = (args) => {
                     }
                 }
             }
-        }, children: _jsx(RadioButton, { label: 'Configurable Radio Button' }, void 0) }, void 0));
+        }, children: _jsx(RadioButton, { label: 'Configurable Radio Button' }) }));
 };
 ConfigurableRadioButton.args = {
     size: '1.25rem',

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,aAAa,EAAE,WAAW,EAAmB,MAAM,yBAAyB,CAAC;AAEtF,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;AAcF,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;gBACD,aAAa,EAAE;oBACb,cAAc,EAAE,IAAI,CAAC,WAAW;oBAChC,cAAc,EAAE,IAAI,CAAC,WAAW;oBAChC,kBAAkB,EAAE,IAAI,CAAC,eAAe;oBACxC,KAAK,EAAE;wBACL,KAAK,EAAE,IAAI,CAAC,UAAU;wBACtB,aAAa,EAAE,IAAI,CAAC,eAAe;qBACpC;oBACD,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,UAAU,EAAE;wBACV,kBAAkB,EAAE,IAAI,CAAC,sBAAsB;wBAC/C,cAAc,EAAE,IAAI,CAAC,kBAAkB;qBACxC;iBACF;aACF;SACF,YAED,KAAC,WAAW,IAAC,KAAK,EAAC,2BAA2B,~~WAAG~~,~~WACnC~~,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,uBAAuB,CAAC,IAAI,GAAG;IAC7B,IAAI,EAAE,SAAS;IACf,eAAe,EAAE,SAAS;IAC1B,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,WAAW;IACxB,YAAY,EAAE,KAAK;IACnB,UAAU,EAAE,SAAS;IACrB,eAAe,EAAE,KAAK;IACtB,sBAAsB,EAAE,SAAS;IACjC,kBAAkB,EAAE,SAAS;CAC9B,CAAC;AAEF,uBAAuB,CAAC,QAAQ,GAAG;IACjC,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC/C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC3C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC3C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC1C,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC9C,sBAAsB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IACtD,kBAAkB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAClD,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACpC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACnC,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACtC,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACtC,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACvC,CAAC","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"]}
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/RadioButtonGroup/RadioButtonGroup.stories.js CHANGED Viewed

@@ -22,13 +22,13 @@ export default {
     }
 };
 export const RadioButtonGroupDemo = (args) => {
-    return (_jsxs(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, children: [_jsx(RadioButton, { label: 'Banana', id: 'Banana', defaultChecked: true }, void 0), _jsx(RadioButton, { label: 'Apple', id: 'Apple' }, void 0), _jsx(RadioButton, { label: 'Mango', id: 'Mango' }, void 0), _jsx(RadioButton, { label: 'Orange', id: 'Orange' }, void 0)] }, void 0));
+    return (_jsxs(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, children: [_jsx(RadioButton, { label: 'Banana', id: 'Banana', defaultChecked: true }), _jsx(RadioButton, { label: 'Apple', id: 'Apple' }), _jsx(RadioButton, { label: 'Mango', id: 'Mango' }), _jsx(RadioButton, { label: 'Orange', id: 'Orange' })] }));
 };
 export const RadioButtonCardGroup = (args) => {
-    return (_jsxs(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, children: [_jsx(RadioButton, { label: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "A paragraph" }, void 0), _jsx(Paragraph, { children: "This is a paragraph of text. It is meant to appear visually satisfying amongst the other options in this group." }, void 0)] }, void 0), id: 'paragraph', defaultChecked: true }, void 0), _jsx(RadioButton, { label: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "Space" }, void 0), _jsx(StyledImage, { src: 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale', alt: 'space' }, void 0)] }, void 0), id: 'space-photo' }, void 0), _jsx(RadioButton, { label: _jsxs(Flex, { container: { gap: 1, alignItems: 'start' }, children: [_jsx(StyledImage, { src: 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale', alt: 'space' }, void 0), _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "Space" }, void 0), _jsx(Paragraph, { children: "Space is the final frontier. There is so much to discover within Cosmos!" }, void 0)] }, void 0)] }, void 0), id: 'cosmos' }, void 0), _jsx(RadioButton, { label: _jsx(FieldGroup, { name: 'Gold service plan', children: _jsx(FieldValueList, { fields: [
+    return (_jsxs(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, children: [_jsx(RadioButton, { label: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "A paragraph" }), _jsx(Paragraph, { children: "This is a paragraph of text. It is meant to appear visually satisfying amongst the other options in this group." })] }), id: 'paragraph', defaultChecked: true }), _jsx(RadioButton, { label: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "Space" }), _jsx(StyledImage, { src: 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale', alt: 'space' })] }), id: 'space-photo' }), _jsx(RadioButton, { label: _jsxs(Flex, { container: { gap: 1, alignItems: 'start' }, children: [_jsx(StyledImage, { src: 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale', alt: 'space' }), _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "Space" }), _jsx(Paragraph, { children: "Space is the final frontier. There is so much to discover within Cosmos!" })] })] }), id: 'cosmos' }), _jsx(RadioButton, { label: _jsx(FieldGroup, { name: 'Gold service plan', children: _jsx(FieldValueList, { fields: [
                             { id: 'service', name: 'Service length', value: '1 year' },
                             { id: 'monthly-cost', name: 'Monthly cost', value: '$180.00' },
                             { id: 'total-cost', name: 'Total cost', value: '$2,160.00' }
-                        ] }, void 0) }, void 0), id: 'phone-plan' }, void 0)] }, void 0));
+                        ] }) }), id: 'phone-plan' })] }));
 };
 //# sourceMappingURL=RadioButtonGroup.stories.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButtonGroup.stories.js","sourceRoot":"","sources":["../../../src/core/RadioButtonGroup/RadioButtonGroup.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,UAAU,EACV,cAAc,EACd,IAAI,EACJ,WAAW,EACX,gBAAgB,EAEhB,IAAI,EACL,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAEnE,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE;QACJ,WAAW,EAAE,KAAK;QAClB,MAAM,EAAE,KAAK;QACb,SAAS,EAAE,IAAI;QACf,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;KAChB;IACD,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC7C,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QACxC,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC3C,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,oBAAoB,GAAgC,CAAC,IAA0B,EAAE,EAAE;IAC9F,OAAO,CACL,MAAC,gBAAgB,IACf,KAAK,EAAC,0BAA0B,EAChC,IAAI,EAAC,OAAO,EACZ,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,aAEvB,KAAC,WAAW,IAAC,KAAK,EAAC,QAAQ,EAAC,EAAE,EAAC,QAAQ,EAAC,cAAc,~~iBAAG~~,EACzD,KAAC,WAAW,IAAC,KAAK,EAAC,OAAO,EAAC,EAAE,EAAC,OAAO,~~WAAG~~,EACxC,KAAC,WAAW,IAAC,KAAK,EAAC,OAAO,EAAC,EAAE,EAAC,OAAO,~~WAAG~~,EACxC,KAAC,WAAW,IAAC,KAAK,EAAC,QAAQ,EAAC,EAAE,EAAC,QAAQ,~~WAAG~~,~~YACzB~~,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAgC,CAAC,IAA0B,EAAE,EAAE;IAC9F,OAAO,CACL,MAAC,gBAAgB,IACf,OAAO,EAAC,MAAM,EACd,KAAK,EAAC,kCAAkC,EACxC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,aAEvB,KAAC,WAAW,IACV,KAAK,EACH,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,~~oCAAmB~~,EACrC,KAAC,SAAS,~~0IAGE~~,~~YACP~~,EAET,EAAE,EAAC,WAAW,EACd,cAAc,~~iBACd~~,EACF,KAAC,WAAW,IACV,KAAK,EACH,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,~~8BAAa~~,EAC/B,KAAC,WAAW,IACV,GAAG,EAAC,+IAA+I,EACnJ,GAAG,EAAC,OAAO,~~WACX~~,~~YACG~~,EAET,EAAE,EAAC,aAAa,~~WAChB~~,EACF,KAAC,WAAW,IACV,KAAK,EACH,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,aAC9C,KAAC,WAAW,IACV,GAAG,EAAC,+IAA+I,EACnJ,GAAG,EAAC,OAAO,~~WACX~~,EACF,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,~~8BAAa~~,EAC/B,KAAC,SAAS,~~mGAEE~~,~~YACP~~,~~YACF~~,EAET,EAAE,EAAC,QAAQ,~~WACX~~,EACF,KAAC,WAAW,IACV,KAAK,EACH,KAAC,UAAU,IAAC,IAAI,EAAC,mBAAmB,YAClC,KAAC,cAAc,IACb,MAAM,EAAE;4BACN,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,QAAQ,EAAE;4BAC1D,EAAE,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,SAAS,EAAE;4BAC9D,EAAE,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE;yBAC7D,~~WACD~~,~~WACS~~,EAEf,EAAE,EAAC,YAAY,~~WACf~~,~~YACe~~,CACpB,CAAC;AACJ,CAAC,CAAC","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.js","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"]}

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

@@ -5,7 +5,7 @@ export default {
     component: Rating
 };
 export const RatingDemo = (args) => {
-    return (_jsx(Rating, { ...args, maxRating: args.maxRating, value: args.value, metaInfo: args.metaInfo, "aria-label": args.ariaLabel }, void 0));
+    return (_jsx(Rating, { ...args, maxRating: args.maxRating, value: args.value, metaInfo: args.metaInfo, "aria-label": args.ariaLabel }));
 };
 RatingDemo.args = {
     maxRating: 5,
@@ -26,7 +26,7 @@ export const ConfigurableRating = (args) => {
                     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));
+        }, children: _jsx(Rating, { maxRating: 5, value: 3.6, metaInfo: '52 reviews', "aria-label": '3.6 out of 5 stars based on 52 reviews' }) }));
 };
 ConfigurableRating.args = {
     color: '#939393'

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,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"]}
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,GAC1B,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,GACnD,GACY,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.mocks.d.ts ADDED Viewed

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

package/lib/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/lib/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 = [
+    { primary: 'How to pet a dog', href: '/search?query=how%20to%20pet%20a%20dog' },
+    { primary: 'Can dogs smile', href: '/search?query=can%dogs%smile' }
+];
+//# sourceMappingURL=SearchInput.mocks.js.map

package/lib/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,OAAO,EAAE,kBAAkB,EAAE,IAAI,EAAE,wCAAwC,EAAE;IAC/E,EAAE,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,8BAA8B,EAAE;CACpE,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 { primary: 'How to pet a dog', href: '/search?query=how%20to%20pet%20a%20dog' },\n { primary: 'Can dogs smile', href: '/search?query=can%dogs%smile' }\n];\n"]}

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

@@ -7,4 +7,5 @@ interface ConfigurableSearchInputProps {
     borderRadius?: number;
 }
 export declare const ConfigurableSearchInput: Story<ConfigurableSearchInputProps>;
+export declare const EnhancedSearchInputDemo: Story;
 //# 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,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,EAA8B,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;;AAIvF,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;AAUF,eAAO,MAAM,uBAAuB,EAAE,KAsCrC,CAAC"}

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

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
 import { Configuration, 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 _jsx(SearchInput, { ...args, placeholder: args.placeholder }, void 0);
+    return _jsx(SearchInput, { ...args, placeholder: args.placeholder });
 };
 SearchInputDemo.args = {
     placeholder: 'Search…'
@@ -20,7 +22,7 @@ export const ConfigurableSearchInput = (args) => {
                     'border-radius': args.borderRadius
                 }
             }
-        }, children: _jsx(SearchInput, {}, void 0) }, void 0));
+        }, children: _jsx(SearchInput, {}) }));
 };
 ConfigurableSearchInput.args = {
     borderRadius: 9999
@@ -28,4 +30,30 @@ ConfigurableSearchInput.args = {
 ConfigurableSearchInput.argTypes = {
     borderRadius: { control: { type: 'number' } }
 };
+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.includes(val);
+                }));
+            }
+            setLoading(false);
+        }, 1000);
+    };
+    return (_jsx(SearchInput, { filters: ['Story', 'Very long filter'], loading: loading, searchResults: searchResults?.map(result => ({
+            ...result,
+            onClick: (id, e) => e.preventDefault()
+        })), value: value, onSearchChange: onValueChange, recentSearches: recentSearches, advancedSearchHref: '/?path=/story/work-searchresults--search-results-demo' }));
+};
 //# 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,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"]}
1	+ {"version":3,"file":"SearchInput.stories.js","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport { Configuration, 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 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\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.includes(val);\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 advancedSearchHref='/?path=/story/work-searchresults--search-results-demo'\n />\n );\n};\n"]}

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

@@ -13,7 +13,7 @@ export const SelectDemo = (args) => {
                     icon: 'gear'
                 }
             ]
-            : undefined, 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));
+            : undefined, children: [_jsx(Option, { children: "Choose an option\u2026" }), _jsx(Option, { children: "Option 1" }), _jsx(Option, { children: "Option 2" }), _jsx(Option, { children: "Option 3" })] }));
 };
 SelectDemo.args = {
     showAction: false,
@@ -46,7 +46,7 @@ export const ConfigurableSelect = (args) => {
                     '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));
+        }, children: _jsxs(Select, { label: 'Select input', info: 'Choose a value', children: [_jsx(Option, { children: "Choose an option\u2026" }), _jsx(Option, { children: "Option 1" }), _jsx(Option, { children: "Option 2" }), _jsx(Option, { children: "Option 3" })] }) }));
 };
 ConfigurableSelect.args = {
     height: '2rem',

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,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,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;AAUF,MAAM,CAAC,MAAM,kBAAkB,GAAmC,CAChE,IAA6B,EAC7B,EAAE;IACF,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;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,YAED,MAAC,MAAM,IAAC,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,gBAAgB,aAChD,KAAC,MAAM,~~iDAA2B~~,EAClC,KAAC,MAAM,~~mCAAkB~~,EACzB,KAAC,MAAM,~~mCAAkB~~,EACzB,KAAC,MAAM,~~mCAAkB~~,~~YAClB~~,~~WACK~~,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.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.js CHANGED Viewed

@@ -15,7 +15,7 @@ export const SentimentDemo = (args) => {
         neutral: args.neutralLabel,
         negative: args.negativeLabel
     };
-    return (_jsx(Sentiment, { variant: args.variant, labelHidden: args.labelHidden, icons: iconNames, labels: labels }, void 0));
+    return (_jsx(Sentiment, { variant: args.variant, labelHidden: args.labelHidden, icons: iconNames, labels: labels }));
 };
 SentimentDemo.args = {
     variant: 'positive',
@@ -52,7 +52,7 @@ export const ConfigurableSentiment = (args) => {
                     }
                 }
             }
-        }, 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));
+        }, children: [_jsx(Sentiment, { variant: 'positive', icons: { positive: 'face-happy-solid' } }), _jsx(Sentiment, { variant: 'negative', icons: { negative: 'face-sad-solid' } }), _jsx(Sentiment, { variant: 'neutral', icons: { neutral: 'face-blank-solid' } })] }));
 };
 ConfigurableSentiment.args = {
     positiveColor: '#20aa50',

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,aAAa,EAAE,KAAK,EAAE,SAAS,EAAkB,MAAM,yBAAyB,CAAC;AAE1F,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;AAQF,MAAM,CAAC,MAAM,qBAAqB,GAAsC,CACtE,IAAgC,EAChC,EAAE;IACF,OAAO,CACL,MAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,SAAS,EAAE;oBACT,QAAQ,EAAE;wBACR,KAAK,EAAE,IAAI,CAAC,aAAa;qBAC1B;oBACD,QAAQ,EAAE;wBACR,KAAK,EAAE,IAAI,CAAC,aAAa;qBAC1B;oBACD,OAAO,EAAE;wBACP,KAAK,EAAE,IAAI,CAAC,YAAY;qBACzB;iBACF;aACF;SACF,aAED,KAAC,SAAS,IAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,kBAAkB,EAAE,~~WAAI~~,EACzE,KAAC,SAAS,IAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,~~WAAI~~,EACvE,KAAC,SAAS,IAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,kBAAkB,EAAE,~~WAAI~~,~~YACzD~~,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,qBAAqB,CAAC,IAAI,GAAG;IAC3B,aAAa,EAAE,SAAS;IACxB,aAAa,EAAE,SAAS;IACxB,YAAY,EAAE,SAAS;CACxB,CAAC;AAEF,qBAAqB,CAAC,QAAQ,GAAG;IAC/B,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC7C,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC7C,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;CAC7C,CAAC","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"]}
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/Slider/Slider.stories.js CHANGED Viewed

@@ -18,7 +18,7 @@ export const SliderDemo = (args) => {
             ticksObject[tick] = tick.toString();
         });
     }
-    return (_jsx(Slider, { orientation: args.orientation, step: args.step, min: args.min, max: args.max, ticks: ticksObject, showProgress: args.showProgress, preview: args.preview, showInput: args.showInput, label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, value: value, onChange: (changeValue) => setValue(changeValue) }, void 0));
+    return (_jsx(Slider, { orientation: args.orientation, step: args.step, min: args.min, max: args.max, ticks: ticksObject, showProgress: args.showProgress, preview: args.preview, showInput: args.showInput, label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, value: value, onChange: (changeValue) => setValue(changeValue) }));
 };
 SliderDemo.args = {
     orientation: 'vertical',