@pega/cosmos-react-demos 5.0.0-dev.10.5 → 5.0.0-dev.10.6
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.
- package/jsx/core/RadioButtonGroup/RadioButtonGroup.stories.d.ts +3 -0
- package/jsx/core/RadioButtonGroup/RadioButtonGroup.stories.d.ts.map +1 -1
- package/jsx/core/RadioButtonGroup/RadioButtonGroup.stories.jsx +2 -2
- package/jsx/core/RadioButtonGroup/RadioButtonGroup.stories.jsx.map +1 -1
- package/lib/core/RadioButtonGroup/RadioButtonGroup.stories.d.ts +3 -0
- package/lib/core/RadioButtonGroup/RadioButtonGroup.stories.d.ts.map +1 -1
- package/lib/core/RadioButtonGroup/RadioButtonGroup.stories.js +2 -2
- package/lib/core/RadioButtonGroup/RadioButtonGroup.stories.js.map +1 -1
- package/package.json +7 -7
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import type { StoryFn } from '@storybook/react';
|
|
2
|
+
import type { FocusEventHandler, MouseEventHandler } from 'react';
|
|
2
3
|
import type { RadioCheckGroupProps, OmitStrict } from '@pega/cosmos-react-core';
|
|
3
4
|
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
|
|
4
5
|
export default _default;
|
|
5
6
|
interface RadioCheckGroupStoryProps extends RadioCheckGroupProps {
|
|
6
7
|
showAdditionalInfo?: boolean;
|
|
7
8
|
showNestedAdditionalInfo?: boolean;
|
|
9
|
+
onBlur?: FocusEventHandler<HTMLInputElement>;
|
|
10
|
+
onClick?: MouseEventHandler<HTMLInputElement>;
|
|
8
11
|
}
|
|
9
12
|
export declare const RadioButtonGroupDemo: StoryFn<OmitStrict<RadioCheckGroupStoryProps, 'children'>>;
|
|
10
13
|
export declare const RadioButtonCardGroup: StoryFn<OmitStrict<RadioCheckGroupStoryProps, 'children'>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtonGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/core/RadioButtonGroup/RadioButtonGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"RadioButtonGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/core/RadioButtonGroup/RadioButtonGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAUlE,OAAO,KAAK,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAIhF,wBA6BU;AAEV,UAAU,yBAA0B,SAAQ,oBAAoB;IAC9D,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,MAAM,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,oBAAoB,EAAE,OAAO,CAAC,UAAU,CAAC,yBAAyB,EAAE,UAAU,CAAC,CAmF3F,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,OAAO,CAAC,UAAU,CAAC,yBAAyB,EAAE,UAAU,CAAC,CAsF3F,CAAC"}
|
|
@@ -35,7 +35,7 @@ export const RadioButtonGroupDemo = (args) => {
|
|
|
35
35
|
? {
|
|
36
36
|
content: 'Some additional info'
|
|
37
37
|
}
|
|
38
|
-
: undefined} label={args.label} name='Fruit' labelHidden={args.labelHidden} inline={args.inline} autoStack={args.autoStack} required={args.required} disabled={args.disabled} readOnly={args.readOnly} status={args.status} info={args.info}>
|
|
38
|
+
: undefined} label={args.label} name='Fruit' labelHidden={args.labelHidden} inline={args.inline} autoStack={args.autoStack} required={args.required} disabled={args.disabled} readOnly={args.readOnly} status={args.status} info={args.info} onClick={args.onClick} onBlur={args.onBlur}>
|
|
39
39
|
<RadioButton label='Banana' id='Banana' defaultChecked additionalInfo={{
|
|
40
40
|
content: 'Some additional info'
|
|
41
41
|
}}/>
|
|
@@ -52,7 +52,7 @@ export const RadioButtonGroupDemo = (args) => {
|
|
|
52
52
|
? {
|
|
53
53
|
content: 'Some additional info'
|
|
54
54
|
}
|
|
55
|
-
: undefined} label={args.label} name='Fruit' labelHidden={args.labelHidden} inline={args.inline} autoStack={args.autoStack} required={args.required} disabled={args.disabled} readOnly={args.readOnly} status={args.status} info={args.info}>
|
|
55
|
+
: undefined} label={args.label} name='Fruit' labelHidden={args.labelHidden} inline={args.inline} autoStack={args.autoStack} required={args.required} disabled={args.disabled} readOnly={args.readOnly} status={args.status} info={args.info} onClick={args.onClick} onBlur={args.onBlur}>
|
|
56
56
|
<RadioButton label='Banana' id='Banana' defaultChecked/>
|
|
57
57
|
<RadioButton label='Apple' id='Apple'/>
|
|
58
58
|
<RadioButton label='Mango' id='Mango'/>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtonGroup.stories.jsx","sourceRoot":"","sources":["../../../src/core/RadioButtonGroup/RadioButtonGroup.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,UAAU,EACV,cAAc,EACd,IAAI,EACJ,WAAW,EACX,gBAAgB,EAChB,IAAI,EACL,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAEnE,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE;QACJ,KAAK,EAAE,0BAA0B;QACjC,WAAW,EAAE,KAAK;QAClB,MAAM,EAAE,KAAK;QACb,SAAS,EAAE,IAAI;QACf,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,kBAAkB,EAAE,KAAK;QACzB,wBAAwB,EAAE,KAAK;QAC/B,MAAM,EAAE,SAAS;QACjB,IAAI,EAAE,oBAAoB;KAC3B;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACpC,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;QAC1C,kBAAkB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QACpD,wBAAwB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1D,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC5F,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE;KAC1D;CACM,CAAC;AAOV,MAAM,CAAC,MAAM,oBAAoB,GAA+D,CAC9F,IAAuD,EACvD,EAAE;IACF,OAAO,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,CACrC,CAAC,gBAAgB,CACf,cAAc,CAAC,CACb,IAAI,CAAC,kBAAkB;YACrB,CAAC,CAAC;gBACE,OAAO,EAAE,sBAAsB;aAChC;YACH,CAAC,CAAC,SAAS,CACd,CACD,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,IAAI,CAAC,OAAO,CACZ,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAEhB;MAAA,CAAC,WAAW,CACV,KAAK,CAAC,QAAQ,CACd,EAAE,CAAC,QAAQ,CACX,cAAc,CACd,cAAc,CAAC,CAAC;YACd,OAAO,EAAE,sBAAsB;SAChC,CAAC,EAEJ;MAAA,CAAC,WAAW,CACV,KAAK,CAAC,OAAO,CACb,EAAE,CAAC,OAAO,CACV,cAAc,CAAC,CAAC;YACd,OAAO,EAAE,sBAAsB;SAChC,CAAC,EAEJ;MAAA,CAAC,WAAW,CACV,KAAK,CAAC,OAAO,CACb,EAAE,CAAC,OAAO,CACV,cAAc,CAAC,CAAC;YACd,OAAO,EAAE,sBAAsB;SAChC,CAAC,EAEJ;MAAA,CAAC,WAAW,CACV,KAAK,CAAC,QAAQ,CACd,EAAE,CAAC,QAAQ,CACX,cAAc,CAAC,CAAC;YACd,OAAO,EAAE,sBAAsB;SAChC,CAAC,EAEN;IAAA,EAAE,gBAAgB,CAAC,CACpB,CAAC,CAAC,CAAC,CACF,CAAC,gBAAgB,CACf,cAAc,CAAC,CACb,IAAI,CAAC,kBAAkB;YACrB,CAAC,CAAC;gBACE,OAAO,EAAE,sBAAsB;aAChC;YACH,CAAC,CAAC,SAAS,CACd,CACD,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,IAAI,CAAC,OAAO,CACZ,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAEhB;MAAA,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,cAAc,EACtD;MAAA,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,EACrC;MAAA,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,EACrC;MAAA,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EACzC;IAAA,EAAE,gBAAgB,CAAC,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAA+D,CAC9F,IAAuD,EACvD,EAAE;IACF,OAAO,CACL,CAAC,gBAAgB,CACf,cAAc,CAAC,CACb,IAAI,CAAC,kBAAkB;YACrB,CAAC,CAAC;gBACE,OAAO,EAAE,sBAAsB;aAChC;YACH,CAAC,CAAC,SAAS,CACd,CACD,OAAO,CAAC,MAAM,CACd,KAAK,CAAC,kCAAkC,CACxC,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAExB;MAAA,CAAC,WAAW,CACV,cAAc,CAAC,CACb,IAAI,CAAC,wBAAwB;YAC3B,CAAC,CAAC;gBACE,OAAO,EAAE,sBAAsB;aAChC;YACH,CAAC,CAAC,SAAS,CACd,CACD,KAAK,CAAC,CACJ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;YAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CACpC;YAAA,CAAC,SAAS,CACR;;;YAEF,EAAE,SAAS,CACb;UAAA,EAAE,IAAI,CAAC,CACR,CACD,EAAE,CAAC,WAAW,CACd,cAAc,EAEhB;MAAA,CAAC,WAAW,CACV,KAAK,CAAC,CACJ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;YAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAC9B;YAAA,CAAC,WAAW,CACV,GAAG,CAAC,+IAA+I,CACnJ,GAAG,CAAC,OAAO,EAEf;UAAA,EAAE,IAAI,CAAC,CACR,CACD,EAAE,CAAC,aAAa,EAElB;MAAA,CAAC,WAAW,CACV,KAAK,CAAC,CACJ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,CAC/C;YAAA,CAAC,WAAW,CACV,GAAG,CAAC,+IAA+I,CACnJ,GAAG,CAAC,OAAO,EAEb;YAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;cAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAC9B;cAAA,CAAC,SAAS,CACR;;cACF,EAAE,SAAS,CACb;YAAA,EAAE,IAAI,CACR;UAAA,EAAE,IAAI,CAAC,CACR,CACD,EAAE,CAAC,QAAQ,EAEb;MAAA,CAAC,WAAW,CACV,KAAK,CAAC,CACJ,CAAC,UAAU,CAAC,IAAI,CAAC,mBAAmB,CAAC,UAAU,CAAC,IAAI,CAClD;YAAA,CAAC,cAAc,CACb,MAAM,CAAC,CAAC;gBACN,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,QAAQ,EAAE;gBAC1D,EAAE,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,SAAS,EAAE;gBAC9D,EAAE,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE;aAC7D,CAAC,EAEN;UAAA,EAAE,UAAU,CAAC,CACd,CACD,EAAE,CAAC,YAAY,EAEnB;IAAA,EAAE,gBAAgB,CAAC,CACpB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport {\n FieldGroup,\n FieldValueList,\n Flex,\n RadioButton,\n RadioButtonGroup,\n Text\n} from '@pega/cosmos-react-core';\nimport type { RadioCheckGroupProps, OmitStrict } 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 label: 'What do you want to eat?',\n labelHidden: false,\n inline: false,\n autoStack: true,\n required: false,\n disabled: false,\n readOnly: false,\n showAdditionalInfo: false,\n showNestedAdditionalInfo: false,\n status: undefined,\n info: 'You must select it'\n },\n argTypes: {\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n inline: { control: { type: 'boolean' } },\n autoStack: { control: { type: 'boolean' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } },\n showAdditionalInfo: { control: { type: 'boolean' } },\n showNestedAdditionalInfo: { control: { type: 'boolean' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n info: { control: { type: 'text', label: 'Helper text' } }\n }\n} as Meta;\n\ninterface RadioCheckGroupStoryProps extends RadioCheckGroupProps {\n showAdditionalInfo?: boolean;\n showNestedAdditionalInfo?: boolean;\n}\n\nexport const RadioButtonGroupDemo: StoryFn<OmitStrict<RadioCheckGroupStoryProps, 'children'>> = (\n args: OmitStrict<RadioCheckGroupStoryProps, 'children'>\n) => {\n return args.showNestedAdditionalInfo ? (\n <RadioButtonGroup\n additionalInfo={\n args.showAdditionalInfo\n ? {\n content: 'Some additional info'\n }\n : undefined\n }\n label={args.label}\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 status={args.status}\n info={args.info}\n >\n <RadioButton\n label='Banana'\n id='Banana'\n defaultChecked\n additionalInfo={{\n content: 'Some additional info'\n }}\n />\n <RadioButton\n label='Apple'\n id='Apple'\n additionalInfo={{\n content: 'Some additional info'\n }}\n />\n <RadioButton\n label='Mango'\n id='Mango'\n additionalInfo={{\n content: 'Some additional info'\n }}\n />\n <RadioButton\n label='Orange'\n id='Orange'\n additionalInfo={{\n content: 'Some additional info'\n }}\n />\n </RadioButtonGroup>\n ) : (\n <RadioButtonGroup\n additionalInfo={\n args.showAdditionalInfo\n ? {\n content: 'Some additional info'\n }\n : undefined\n }\n label={args.label}\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 status={args.status}\n info={args.info}\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: StoryFn<OmitStrict<RadioCheckGroupStoryProps, 'children'>> = (\n args: OmitStrict<RadioCheckGroupStoryProps, 'children'>\n) => {\n return (\n <RadioButtonGroup\n additionalInfo={\n args.showAdditionalInfo\n ? {\n content: 'Some additional info'\n }\n : undefined\n }\n variant='card'\n label='Which visuals appear satisfying?'\n labelHidden={args.labelHidden}\n inline={args.inline}\n autoStack={args.autoStack}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n >\n <RadioButton\n additionalInfo={\n args.showNestedAdditionalInfo\n ? {\n content: 'Some additional info'\n }\n : undefined\n }\n label={\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>A paragraph</Text>\n <Paragraph>\n This is a paragraph of text. It is meant to appear visually satisfying amongst the\n other options in this group.\n </Paragraph>\n </Flex>\n }\n id='paragraph'\n defaultChecked\n />\n <RadioButton\n label={\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>Space</Text>\n <StyledImage\n src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n alt='space'\n />\n </Flex>\n }\n id='space-photo'\n />\n <RadioButton\n label={\n <Flex container={{ gap: 1, alignItems: 'start' }}>\n <StyledImage\n src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n alt='space'\n />\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>Space</Text>\n <Paragraph>\n Space is the final frontier. There is so much to discover within Constellation!\n </Paragraph>\n </Flex>\n </Flex>\n }\n id='cosmos'\n />\n <RadioButton\n label={\n <FieldGroup name='Gold service plan' headingTag='h3'>\n <FieldValueList\n fields={[\n { id: 'service', name: 'Service length', value: '1 year' },\n { id: 'monthly-cost', name: 'Monthly cost', value: '$180.00' },\n { id: 'total-cost', name: 'Total cost', value: '$2,160.00' }\n ]}\n />\n </FieldGroup>\n }\n id='phone-plan'\n />\n </RadioButtonGroup>\n );\n};\n"]}
|
|
1
|
+
{"version":3,"file":"RadioButtonGroup.stories.jsx","sourceRoot":"","sources":["../../../src/core/RadioButtonGroup/RadioButtonGroup.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,UAAU,EACV,cAAc,EACd,IAAI,EACJ,WAAW,EACX,gBAAgB,EAChB,IAAI,EACL,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAEnE,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE;QACJ,KAAK,EAAE,0BAA0B;QACjC,WAAW,EAAE,KAAK;QAClB,MAAM,EAAE,KAAK;QACb,SAAS,EAAE,IAAI;QACf,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,kBAAkB,EAAE,KAAK;QACzB,wBAAwB,EAAE,KAAK;QAC/B,MAAM,EAAE,SAAS;QACjB,IAAI,EAAE,oBAAoB;KAC3B;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACpC,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;QAC1C,kBAAkB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QACpD,wBAAwB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1D,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC5F,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE;KAC1D;CACM,CAAC;AASV,MAAM,CAAC,MAAM,oBAAoB,GAA+D,CAC9F,IAAuD,EACvD,EAAE;IACF,OAAO,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,CACrC,CAAC,gBAAgB,CACf,cAAc,CAAC,CACb,IAAI,CAAC,kBAAkB;YACrB,CAAC,CAAC;gBACE,OAAO,EAAE,sBAAsB;aAChC;YACH,CAAC,CAAC,SAAS,CACd,CACD,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,IAAI,CAAC,OAAO,CACZ,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAEpB;MAAA,CAAC,WAAW,CACV,KAAK,CAAC,QAAQ,CACd,EAAE,CAAC,QAAQ,CACX,cAAc,CACd,cAAc,CAAC,CAAC;YACd,OAAO,EAAE,sBAAsB;SAChC,CAAC,EAEJ;MAAA,CAAC,WAAW,CACV,KAAK,CAAC,OAAO,CACb,EAAE,CAAC,OAAO,CACV,cAAc,CAAC,CAAC;YACd,OAAO,EAAE,sBAAsB;SAChC,CAAC,EAEJ;MAAA,CAAC,WAAW,CACV,KAAK,CAAC,OAAO,CACb,EAAE,CAAC,OAAO,CACV,cAAc,CAAC,CAAC;YACd,OAAO,EAAE,sBAAsB;SAChC,CAAC,EAEJ;MAAA,CAAC,WAAW,CACV,KAAK,CAAC,QAAQ,CACd,EAAE,CAAC,QAAQ,CACX,cAAc,CAAC,CAAC;YACd,OAAO,EAAE,sBAAsB;SAChC,CAAC,EAEN;IAAA,EAAE,gBAAgB,CAAC,CACpB,CAAC,CAAC,CAAC,CACF,CAAC,gBAAgB,CACf,cAAc,CAAC,CACb,IAAI,CAAC,kBAAkB;YACrB,CAAC,CAAC;gBACE,OAAO,EAAE,sBAAsB;aAChC;YACH,CAAC,CAAC,SAAS,CACd,CACD,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,IAAI,CAAC,OAAO,CACZ,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAEpB;MAAA,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,cAAc,EACtD;MAAA,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,EACrC;MAAA,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,EACrC;MAAA,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EACzC;IAAA,EAAE,gBAAgB,CAAC,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAA+D,CAC9F,IAAuD,EACvD,EAAE;IACF,OAAO,CACL,CAAC,gBAAgB,CACf,cAAc,CAAC,CACb,IAAI,CAAC,kBAAkB;YACrB,CAAC,CAAC;gBACE,OAAO,EAAE,sBAAsB;aAChC;YACH,CAAC,CAAC,SAAS,CACd,CACD,OAAO,CAAC,MAAM,CACd,KAAK,CAAC,kCAAkC,CACxC,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAExB;MAAA,CAAC,WAAW,CACV,cAAc,CAAC,CACb,IAAI,CAAC,wBAAwB;YAC3B,CAAC,CAAC;gBACE,OAAO,EAAE,sBAAsB;aAChC;YACH,CAAC,CAAC,SAAS,CACd,CACD,KAAK,CAAC,CACJ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;YAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CACpC;YAAA,CAAC,SAAS,CACR;;;YAEF,EAAE,SAAS,CACb;UAAA,EAAE,IAAI,CAAC,CACR,CACD,EAAE,CAAC,WAAW,CACd,cAAc,EAEhB;MAAA,CAAC,WAAW,CACV,KAAK,CAAC,CACJ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;YAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAC9B;YAAA,CAAC,WAAW,CACV,GAAG,CAAC,+IAA+I,CACnJ,GAAG,CAAC,OAAO,EAEf;UAAA,EAAE,IAAI,CAAC,CACR,CACD,EAAE,CAAC,aAAa,EAElB;MAAA,CAAC,WAAW,CACV,KAAK,CAAC,CACJ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,CAC/C;YAAA,CAAC,WAAW,CACV,GAAG,CAAC,+IAA+I,CACnJ,GAAG,CAAC,OAAO,EAEb;YAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;cAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAC9B;cAAA,CAAC,SAAS,CACR;;cACF,EAAE,SAAS,CACb;YAAA,EAAE,IAAI,CACR;UAAA,EAAE,IAAI,CAAC,CACR,CACD,EAAE,CAAC,QAAQ,EAEb;MAAA,CAAC,WAAW,CACV,KAAK,CAAC,CACJ,CAAC,UAAU,CAAC,IAAI,CAAC,mBAAmB,CAAC,UAAU,CAAC,IAAI,CAClD;YAAA,CAAC,cAAc,CACb,MAAM,CAAC,CAAC;gBACN,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,QAAQ,EAAE;gBAC1D,EAAE,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,SAAS,EAAE;gBAC9D,EAAE,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE;aAC7D,CAAC,EAEN;UAAA,EAAE,UAAU,CAAC,CACd,CACD,EAAE,CAAC,YAAY,EAEnB;IAAA,EAAE,gBAAgB,CAAC,CACpB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { FocusEventHandler, MouseEventHandler } from 'react';\n\nimport {\n FieldGroup,\n FieldValueList,\n Flex,\n RadioButton,\n RadioButtonGroup,\n Text\n} from '@pega/cosmos-react-core';\nimport type { RadioCheckGroupProps, OmitStrict } 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 label: 'What do you want to eat?',\n labelHidden: false,\n inline: false,\n autoStack: true,\n required: false,\n disabled: false,\n readOnly: false,\n showAdditionalInfo: false,\n showNestedAdditionalInfo: false,\n status: undefined,\n info: 'You must select it'\n },\n argTypes: {\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n inline: { control: { type: 'boolean' } },\n autoStack: { control: { type: 'boolean' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } },\n showAdditionalInfo: { control: { type: 'boolean' } },\n showNestedAdditionalInfo: { control: { type: 'boolean' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n info: { control: { type: 'text', label: 'Helper text' } }\n }\n} as Meta;\n\ninterface RadioCheckGroupStoryProps extends RadioCheckGroupProps {\n showAdditionalInfo?: boolean;\n showNestedAdditionalInfo?: boolean;\n onBlur?: FocusEventHandler<HTMLInputElement>;\n onClick?: MouseEventHandler<HTMLInputElement>;\n}\n\nexport const RadioButtonGroupDemo: StoryFn<OmitStrict<RadioCheckGroupStoryProps, 'children'>> = (\n args: OmitStrict<RadioCheckGroupStoryProps, 'children'>\n) => {\n return args.showNestedAdditionalInfo ? (\n <RadioButtonGroup\n additionalInfo={\n args.showAdditionalInfo\n ? {\n content: 'Some additional info'\n }\n : undefined\n }\n label={args.label}\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 status={args.status}\n info={args.info}\n onClick={args.onClick}\n onBlur={args.onBlur}\n >\n <RadioButton\n label='Banana'\n id='Banana'\n defaultChecked\n additionalInfo={{\n content: 'Some additional info'\n }}\n />\n <RadioButton\n label='Apple'\n id='Apple'\n additionalInfo={{\n content: 'Some additional info'\n }}\n />\n <RadioButton\n label='Mango'\n id='Mango'\n additionalInfo={{\n content: 'Some additional info'\n }}\n />\n <RadioButton\n label='Orange'\n id='Orange'\n additionalInfo={{\n content: 'Some additional info'\n }}\n />\n </RadioButtonGroup>\n ) : (\n <RadioButtonGroup\n additionalInfo={\n args.showAdditionalInfo\n ? {\n content: 'Some additional info'\n }\n : undefined\n }\n label={args.label}\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 status={args.status}\n info={args.info}\n onClick={args.onClick}\n onBlur={args.onBlur}\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: StoryFn<OmitStrict<RadioCheckGroupStoryProps, 'children'>> = (\n args: OmitStrict<RadioCheckGroupStoryProps, 'children'>\n) => {\n return (\n <RadioButtonGroup\n additionalInfo={\n args.showAdditionalInfo\n ? {\n content: 'Some additional info'\n }\n : undefined\n }\n variant='card'\n label='Which visuals appear satisfying?'\n labelHidden={args.labelHidden}\n inline={args.inline}\n autoStack={args.autoStack}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n >\n <RadioButton\n additionalInfo={\n args.showNestedAdditionalInfo\n ? {\n content: 'Some additional info'\n }\n : undefined\n }\n label={\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>A paragraph</Text>\n <Paragraph>\n This is a paragraph of text. It is meant to appear visually satisfying amongst the\n other options in this group.\n </Paragraph>\n </Flex>\n }\n id='paragraph'\n defaultChecked\n />\n <RadioButton\n label={\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>Space</Text>\n <StyledImage\n src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n alt='space'\n />\n </Flex>\n }\n id='space-photo'\n />\n <RadioButton\n label={\n <Flex container={{ gap: 1, alignItems: 'start' }}>\n <StyledImage\n src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n alt='space'\n />\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>Space</Text>\n <Paragraph>\n Space is the final frontier. There is so much to discover within Constellation!\n </Paragraph>\n </Flex>\n </Flex>\n }\n id='cosmos'\n />\n <RadioButton\n label={\n <FieldGroup name='Gold service plan' headingTag='h3'>\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,10 +1,13 @@
|
|
|
1
1
|
import type { StoryFn } from '@storybook/react';
|
|
2
|
+
import type { FocusEventHandler, MouseEventHandler } from 'react';
|
|
2
3
|
import type { RadioCheckGroupProps, OmitStrict } from '@pega/cosmos-react-core';
|
|
3
4
|
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
|
|
4
5
|
export default _default;
|
|
5
6
|
interface RadioCheckGroupStoryProps extends RadioCheckGroupProps {
|
|
6
7
|
showAdditionalInfo?: boolean;
|
|
7
8
|
showNestedAdditionalInfo?: boolean;
|
|
9
|
+
onBlur?: FocusEventHandler<HTMLInputElement>;
|
|
10
|
+
onClick?: MouseEventHandler<HTMLInputElement>;
|
|
8
11
|
}
|
|
9
12
|
export declare const RadioButtonGroupDemo: StoryFn<OmitStrict<RadioCheckGroupStoryProps, 'children'>>;
|
|
10
13
|
export declare const RadioButtonCardGroup: StoryFn<OmitStrict<RadioCheckGroupStoryProps, 'children'>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtonGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/core/RadioButtonGroup/RadioButtonGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"RadioButtonGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/core/RadioButtonGroup/RadioButtonGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAUlE,OAAO,KAAK,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAIhF,wBA6BU;AAEV,UAAU,yBAA0B,SAAQ,oBAAoB;IAC9D,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,MAAM,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,oBAAoB,EAAE,OAAO,CAAC,UAAU,CAAC,yBAAyB,EAAE,UAAU,CAAC,CAmF3F,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,OAAO,CAAC,UAAU,CAAC,yBAAyB,EAAE,UAAU,CAAC,CAsF3F,CAAC"}
|
|
@@ -36,7 +36,7 @@ export const RadioButtonGroupDemo = (args) => {
|
|
|
36
36
|
? {
|
|
37
37
|
content: 'Some additional info'
|
|
38
38
|
}
|
|
39
|
-
: undefined, label: args.label, name: 'Fruit', labelHidden: args.labelHidden, inline: args.inline, autoStack: args.autoStack, required: args.required, disabled: args.disabled, readOnly: args.readOnly, status: args.status, info: args.info, children: [_jsx(RadioButton, { label: 'Banana', id: 'Banana', defaultChecked: true, additionalInfo: {
|
|
39
|
+
: undefined, label: args.label, name: 'Fruit', labelHidden: args.labelHidden, inline: args.inline, autoStack: args.autoStack, required: args.required, disabled: args.disabled, readOnly: args.readOnly, status: args.status, info: args.info, onClick: args.onClick, onBlur: args.onBlur, children: [_jsx(RadioButton, { label: 'Banana', id: 'Banana', defaultChecked: true, additionalInfo: {
|
|
40
40
|
content: 'Some additional info'
|
|
41
41
|
} }), _jsx(RadioButton, { label: 'Apple', id: 'Apple', additionalInfo: {
|
|
42
42
|
content: 'Some additional info'
|
|
@@ -48,7 +48,7 @@ export const RadioButtonGroupDemo = (args) => {
|
|
|
48
48
|
? {
|
|
49
49
|
content: 'Some additional info'
|
|
50
50
|
}
|
|
51
|
-
: undefined, label: args.label, name: 'Fruit', labelHidden: args.labelHidden, inline: args.inline, autoStack: args.autoStack, required: args.required, disabled: args.disabled, readOnly: args.readOnly, status: args.status, info: args.info, 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' })] }));
|
|
51
|
+
: undefined, label: args.label, name: 'Fruit', labelHidden: args.labelHidden, inline: args.inline, autoStack: args.autoStack, required: args.required, disabled: args.disabled, readOnly: args.readOnly, status: args.status, info: args.info, onClick: args.onClick, onBlur: args.onBlur, 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' })] }));
|
|
52
52
|
};
|
|
53
53
|
export const RadioButtonCardGroup = (args) => {
|
|
54
54
|
return (_jsxs(RadioButtonGroup, { additionalInfo: args.showAdditionalInfo
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtonGroup.stories.js","sourceRoot":"","sources":["../../../src/core/RadioButtonGroup/RadioButtonGroup.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport {\n FieldGroup,\n FieldValueList,\n Flex,\n RadioButton,\n RadioButtonGroup,\n Text\n} from '@pega/cosmos-react-core';\nimport type { RadioCheckGroupProps, OmitStrict } 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 label: 'What do you want to eat?',\n labelHidden: false,\n inline: false,\n autoStack: true,\n required: false,\n disabled: false,\n readOnly: false,\n showAdditionalInfo: false,\n showNestedAdditionalInfo: false,\n status: undefined,\n info: 'You must select it'\n },\n argTypes: {\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n inline: { control: { type: 'boolean' } },\n autoStack: { control: { type: 'boolean' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } },\n showAdditionalInfo: { control: { type: 'boolean' } },\n showNestedAdditionalInfo: { control: { type: 'boolean' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n info: { control: { type: 'text', label: 'Helper text' } }\n }\n} as Meta;\n\ninterface RadioCheckGroupStoryProps extends RadioCheckGroupProps {\n showAdditionalInfo?: boolean;\n showNestedAdditionalInfo?: boolean;\n}\n\nexport const RadioButtonGroupDemo: StoryFn<OmitStrict<RadioCheckGroupStoryProps, 'children'>> = (\n args: OmitStrict<RadioCheckGroupStoryProps, 'children'>\n) => {\n return args.showNestedAdditionalInfo ? (\n <RadioButtonGroup\n additionalInfo={\n args.showAdditionalInfo\n ? {\n content: 'Some additional info'\n }\n : undefined\n }\n label={args.label}\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 status={args.status}\n info={args.info}\n >\n <RadioButton\n label='Banana'\n id='Banana'\n defaultChecked\n additionalInfo={{\n content: 'Some additional info'\n }}\n />\n <RadioButton\n label='Apple'\n id='Apple'\n additionalInfo={{\n content: 'Some additional info'\n }}\n />\n <RadioButton\n label='Mango'\n id='Mango'\n additionalInfo={{\n content: 'Some additional info'\n }}\n />\n <RadioButton\n label='Orange'\n id='Orange'\n additionalInfo={{\n content: 'Some additional info'\n }}\n />\n </RadioButtonGroup>\n ) : (\n <RadioButtonGroup\n additionalInfo={\n args.showAdditionalInfo\n ? {\n content: 'Some additional info'\n }\n : undefined\n }\n label={args.label}\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 status={args.status}\n info={args.info}\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: StoryFn<OmitStrict<RadioCheckGroupStoryProps, 'children'>> = (\n args: OmitStrict<RadioCheckGroupStoryProps, 'children'>\n) => {\n return (\n <RadioButtonGroup\n additionalInfo={\n args.showAdditionalInfo\n ? {\n content: 'Some additional info'\n }\n : undefined\n }\n variant='card'\n label='Which visuals appear satisfying?'\n labelHidden={args.labelHidden}\n inline={args.inline}\n autoStack={args.autoStack}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n >\n <RadioButton\n additionalInfo={\n args.showNestedAdditionalInfo\n ? {\n content: 'Some additional info'\n }\n : undefined\n }\n label={\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>A paragraph</Text>\n <Paragraph>\n This is a paragraph of text. It is meant to appear visually satisfying amongst the\n other options in this group.\n </Paragraph>\n </Flex>\n }\n id='paragraph'\n defaultChecked\n />\n <RadioButton\n label={\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>Space</Text>\n <StyledImage\n src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n alt='space'\n />\n </Flex>\n }\n id='space-photo'\n />\n <RadioButton\n label={\n <Flex container={{ gap: 1, alignItems: 'start' }}>\n <StyledImage\n src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n alt='space'\n />\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>Space</Text>\n <Paragraph>\n Space is the final frontier. There is so much to discover within Constellation!\n </Paragraph>\n </Flex>\n </Flex>\n }\n id='cosmos'\n />\n <RadioButton\n label={\n <FieldGroup name='Gold service plan' headingTag='h3'>\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 type { Meta, StoryFn } from '@storybook/react';\nimport type { FocusEventHandler, MouseEventHandler } from 'react';\n\nimport {\n FieldGroup,\n FieldValueList,\n Flex,\n RadioButton,\n RadioButtonGroup,\n Text\n} from '@pega/cosmos-react-core';\nimport type { RadioCheckGroupProps, OmitStrict } 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 label: 'What do you want to eat?',\n labelHidden: false,\n inline: false,\n autoStack: true,\n required: false,\n disabled: false,\n readOnly: false,\n showAdditionalInfo: false,\n showNestedAdditionalInfo: false,\n status: undefined,\n info: 'You must select it'\n },\n argTypes: {\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n inline: { control: { type: 'boolean' } },\n autoStack: { control: { type: 'boolean' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } },\n showAdditionalInfo: { control: { type: 'boolean' } },\n showNestedAdditionalInfo: { control: { type: 'boolean' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n info: { control: { type: 'text', label: 'Helper text' } }\n }\n} as Meta;\n\ninterface RadioCheckGroupStoryProps extends RadioCheckGroupProps {\n showAdditionalInfo?: boolean;\n showNestedAdditionalInfo?: boolean;\n onBlur?: FocusEventHandler<HTMLInputElement>;\n onClick?: MouseEventHandler<HTMLInputElement>;\n}\n\nexport const RadioButtonGroupDemo: StoryFn<OmitStrict<RadioCheckGroupStoryProps, 'children'>> = (\n args: OmitStrict<RadioCheckGroupStoryProps, 'children'>\n) => {\n return args.showNestedAdditionalInfo ? (\n <RadioButtonGroup\n additionalInfo={\n args.showAdditionalInfo\n ? {\n content: 'Some additional info'\n }\n : undefined\n }\n label={args.label}\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 status={args.status}\n info={args.info}\n onClick={args.onClick}\n onBlur={args.onBlur}\n >\n <RadioButton\n label='Banana'\n id='Banana'\n defaultChecked\n additionalInfo={{\n content: 'Some additional info'\n }}\n />\n <RadioButton\n label='Apple'\n id='Apple'\n additionalInfo={{\n content: 'Some additional info'\n }}\n />\n <RadioButton\n label='Mango'\n id='Mango'\n additionalInfo={{\n content: 'Some additional info'\n }}\n />\n <RadioButton\n label='Orange'\n id='Orange'\n additionalInfo={{\n content: 'Some additional info'\n }}\n />\n </RadioButtonGroup>\n ) : (\n <RadioButtonGroup\n additionalInfo={\n args.showAdditionalInfo\n ? {\n content: 'Some additional info'\n }\n : undefined\n }\n label={args.label}\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 status={args.status}\n info={args.info}\n onClick={args.onClick}\n onBlur={args.onBlur}\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: StoryFn<OmitStrict<RadioCheckGroupStoryProps, 'children'>> = (\n args: OmitStrict<RadioCheckGroupStoryProps, 'children'>\n) => {\n return (\n <RadioButtonGroup\n additionalInfo={\n args.showAdditionalInfo\n ? {\n content: 'Some additional info'\n }\n : undefined\n }\n variant='card'\n label='Which visuals appear satisfying?'\n labelHidden={args.labelHidden}\n inline={args.inline}\n autoStack={args.autoStack}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n >\n <RadioButton\n additionalInfo={\n args.showNestedAdditionalInfo\n ? {\n content: 'Some additional info'\n }\n : undefined\n }\n label={\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>A paragraph</Text>\n <Paragraph>\n This is a paragraph of text. It is meant to appear visually satisfying amongst the\n other options in this group.\n </Paragraph>\n </Flex>\n }\n id='paragraph'\n defaultChecked\n />\n <RadioButton\n label={\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>Space</Text>\n <StyledImage\n src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n alt='space'\n />\n </Flex>\n }\n id='space-photo'\n />\n <RadioButton\n label={\n <Flex container={{ gap: 1, alignItems: 'start' }}>\n <StyledImage\n src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n alt='space'\n />\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>Space</Text>\n <Paragraph>\n Space is the final frontier. There is so much to discover within Constellation!\n </Paragraph>\n </Flex>\n </Flex>\n }\n id='cosmos'\n />\n <RadioButton\n label={\n <FieldGroup name='Gold service plan' headingTag='h3'>\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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-demos",
|
|
3
|
-
"version": "5.0.0-dev.10.
|
|
3
|
+
"version": "5.0.0-dev.10.6",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/pegasystems/cosmos-react.git",
|
|
@@ -19,12 +19,12 @@
|
|
|
19
19
|
"build": "tsc -b tsconfig.build.json && tsc -b tsconfig.build-preserve.json"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@pega/cosmos-react-condition-builder": "5.0.0-dev.10.
|
|
23
|
-
"@pega/cosmos-react-core": "5.0.0-dev.10.
|
|
24
|
-
"@pega/cosmos-react-dnd": "5.0.0-dev.10.
|
|
25
|
-
"@pega/cosmos-react-rte": "5.0.0-dev.10.
|
|
26
|
-
"@pega/cosmos-react-social": "5.0.0-dev.10.
|
|
27
|
-
"@pega/cosmos-react-work": "5.0.0-dev.10.
|
|
22
|
+
"@pega/cosmos-react-condition-builder": "5.0.0-dev.10.6",
|
|
23
|
+
"@pega/cosmos-react-core": "5.0.0-dev.10.6",
|
|
24
|
+
"@pega/cosmos-react-dnd": "5.0.0-dev.10.6",
|
|
25
|
+
"@pega/cosmos-react-rte": "5.0.0-dev.10.6",
|
|
26
|
+
"@pega/cosmos-react-social": "5.0.0-dev.10.6",
|
|
27
|
+
"@pega/cosmos-react-work": "5.0.0-dev.10.6",
|
|
28
28
|
"@storybook/addon-actions": "~7.5.3",
|
|
29
29
|
"@storybook/react": "~7.5.3",
|
|
30
30
|
"@types/dompurify": "^3.0.5",
|