npm - @pega/cosmos-react-demos - Versions diffs - 3.0.0-dev.20.0 → 3.0.0-dev.21.2 - Mend

@pega/cosmos-react-demos 3.0.0-dev.20.0 → 3.0.0-dev.21.2

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

Files changed (265) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Currency.stories.js","sourceRoot":"","sources":["../../../src/core/Currency/Currency.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EACL,eAAe,EAEf,aAAa,EAEb,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,aAAa;CACjB,CAAC;~~AAEV~~,MAAM,CAAC,MAAM,iBAAiB,GAAuC,CACnE,IAAiC,EACjC,EAAE;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAChC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,CAC/C,CAAC;IAEF,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACrC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,KAAK,IAAI,CAAC,KAAK;YAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IACpF,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAEvB,OAAO,CACL,KAAC,aAAa,OACR,IAAI,EACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,UAAU,CAAC,EAAE;YACrB,QAAQ,CAAC,UAAU,CAAC,CAAC;YACrB,IAAI,CAAC,QAAQ,EAAE,CAAC,UAAU,CAAC,CAAC;QAC9B,CAAC,EACD,MAAM,EAAE,UAAU,CAAC,EAAE;YACnB,IAAI,CAAC,MAAM,EAAE,CAAC,UAAU,CAAC,CAAC;QAC5B,CAAC,EACD,OAAO,EAAE,UAAU,CAAC,EAAE;YACpB,IAAI,CAAC,OAAO,EAAE,CAAC,UAAU,CAAC,CAAC;QAC7B,CAAC,EACD,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,EAC7C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,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,~~GACvB~~,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,CAAC,IAAI,GAAG;IACvB,KAAK,EAAE,SAAS;IAChB,eAAe,EAAE,KAAK;IACtB,iBAAiB,EAAE,KAAK;IACxB,WAAW,EAAE,IAAI;IACjB,mBAAmB,EAAE,IAAI;IACzB,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,gBAAgB;IACvB,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,yBAAyB;IAC/B,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;~~CAChB~~,CAAC;AAEF,iBAAiB,CAAC,QAAQ,GAAG;IAC3B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,eAAe,EAAE;QACf,OAAO,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;QAC9D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,iBAAiB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACnD,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,mBAAmB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACrD,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACrC,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,mBAAmB,GAAqC,CACnE,IAA+B,EAC/B,EAAE;IACF,OAAO,CACL,KAAC,eAAe,IACd,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,iBAAiB,EAAE;YACjB,cAAc,EAAE,IAAI,CAAC,cAAc;YACnC,eAAe,EAAE,IAAI,CAAC,eAAe;YACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,KAAK,EAAE,SAAS;IAChB,eAAe,EAAE,KAAK;IACtB,eAAe,EAAE,IAAI;IACrB,cAAc,EAAE,SAAS;IACzB,QAAQ,EAAE,QAAQ;IAClB,QAAQ,EAAE,YAAY;IACtB,QAAQ,EAAE,UAAU;CACrB,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,eAAe,EAAE;QACf,OAAO,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;QAC9D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACjD,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE;IACzE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,IAAI,EAAE,cAAc;SACrB;QACD,OAAO,EAAE,CAAC,YAAY,EAAE,aAAa,CAAC;KACvC;IACD,QAAQ,EAAE;QACR,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QAC3B,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC;KACpC;IACD,QAAQ,EAAE;QACR,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;QACjC,OAAO,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC;KACjC;CACF,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport {\n CurrencyDisplay,\n CurrencyDisplayProps,\n CurrencyInput,\n CurrencyInputProps,\n usePrevious\n} from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Currency',\n component: CurrencyInput\n} as Meta;\n\nexport const CurrencyInputDemo: Story<Partial<~~CurrencyInputProps~~>> = (\n args: Partial<~~CurrencyInputProps~~>\n) => {\n const [value, setValue] = useState<string \| undefined>(\n args.value ? args.value.toString() : undefined\n );\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value ? args.value.toString() : undefined);\n }, [prev, args.value]);\n\n return (\n <CurrencyInput\n {...args}\n value={value}\n onChange={inputValue => {\n setValue(inputValue);\n args.onChange?.(inputValue);\n }}\n onBlur={inputValue => {\n args.onBlur?.(inputValue);\n }}\n onFocus={inputValue => {\n args.onFocus?.(inputValue);\n }}\n currencyISOCode={args.currencyISOCode}\n alwaysShowISOCode={args.alwaysShowISOCode}\n showDecimal={args.showDecimal}\n showGroupSeparators={args.showGroupSeparators}\n step={args.step}\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 />\n );\n};\n\nCurrencyInputDemo.args = {\n value: undefined,\n currencyISOCode: 'USD',\n alwaysShowISOCode: false,\n showDecimal: true,\n showGroupSeparators: true,\n step: 1,\n label: 'Currency input',\n labelHidden: false,\n info: 'Enter a numerical value',\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false\n};\n\nCurrencyInputDemo.argTypes = {\n value: { control: { type: 'number' } },\n currencyISOCode: {\n options: [undefined, 'USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],\n control: { type: 'select' }\n },\n alwaysShowISOCode: { control: { type: 'boolean' } },\n showDecimal: { control: { type: 'boolean' } },\n showGroupSeparators: { control: { type: 'boolean' } },\n step: { control: { type: 'number' } },\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 CurrencyDisplayStoryProps extends CurrencyDisplayProps {\n groupSeparators: boolean;\n fractionDigits: number;\n currency: 'symbol' \| 'code' \| 'name';\n negative: 'minus-sign' \| 'parentheses';\n notation: 'standard' \| 'compact';\n}\n\nexport const CurrencyDisplayDemo: Story<CurrencyDisplayStoryProps> = (\n args: CurrencyDisplayStoryProps\n) => {\n return (\n <CurrencyDisplay\n value={args.value}\n currencyISOCode={args.currencyISOCode}\n formattingOptions={{\n fractionDigits: args.fractionDigits,\n groupSeparators: args.groupSeparators,\n currency: args.currency,\n negative: args.negative,\n notation: args.notation\n }}\n />\n );\n};\n\nCurrencyDisplayDemo.args = {\n value: undefined,\n currencyISOCode: 'USD',\n groupSeparators: true,\n fractionDigits: undefined,\n currency: 'symbol',\n negative: 'minus-sign',\n notation: 'standard'\n};\n\nCurrencyDisplayDemo.argTypes = {\n value: { control: { type: 'number' } },\n currencyISOCode: {\n options: [undefined, 'USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],\n control: { type: 'select' }\n },\n groupSeparators: { control: { type: 'boolean' } },\n fractionDigits: { control: { type: 'number', min: 0, max: 20, step: 1 } },\n negative: {\n control: {\n type: 'inline-radio'\n },\n options: ['minus-sign', 'parentheses']\n },\n currency: {\n control: { type: 'select' },\n options: ['symbol', 'code', 'name']\n },\n notation: {\n control: { type: 'inline-radio' },\n options: ['standard', 'compact']\n }\n};\n"]}
1	+ {"version":3,"file":"Currency.stories.js","sourceRoot":"","sources":["../../../src/core/Currency/Currency.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EACL,eAAe,EAEf,aAAa,EAEb,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,aAAa;CACjB,CAAC;AAMV,MAAM,CAAC,MAAM,iBAAiB,GAAuC,CACnE,IAAiC,EACjC,EAAE;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAChC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,CAC/C,CAAC;IAEF,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACrC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,KAAK,IAAI,CAAC,KAAK;YAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IACpF,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAEvB,OAAO,CACL,KAAC,aAAa,OACR,IAAI,EACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,UAAU,CAAC,EAAE;YACrB,QAAQ,CAAC,UAAU,CAAC,CAAC;YACrB,IAAI,CAAC,QAAQ,EAAE,CAAC,UAAU,CAAC,CAAC;QAC9B,CAAC,EACD,MAAM,EAAE,UAAU,CAAC,EAAE;YACnB,IAAI,CAAC,MAAM,EAAE,CAAC,UAAU,CAAC,CAAC;QAC5B,CAAC,EACD,OAAO,EAAE,UAAU,CAAC,EAAE;YACpB,IAAI,CAAC,OAAO,EAAE,CAAC,UAAU,CAAC,CAAC;QAC7B,CAAC,EACD,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,EAC7C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,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,cAAc,EACZ,IAAI,CAAC,kBAAkB;YACrB,CAAC,CAAC;gBACE,OAAO,EAAE,iBAAiB;gBAC1B,OAAO,EAAE,sDAAsD;aAChE;YACH,CAAC,CAAC,SAAS,GAEf,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,CAAC,IAAI,GAAG;IACvB,KAAK,EAAE,SAAS;IAChB,eAAe,EAAE,KAAK;IACtB,iBAAiB,EAAE,KAAK;IACxB,WAAW,EAAE,IAAI;IACjB,mBAAmB,EAAE,IAAI;IACzB,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,gBAAgB;IACvB,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,yBAAyB;IAC/B,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,kBAAkB,EAAE,IAAI;CACzB,CAAC;AAEF,iBAAiB,CAAC,QAAQ,GAAG;IAC3B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,eAAe,EAAE;QACf,OAAO,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;QAC9D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,iBAAiB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACnD,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,mBAAmB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACrD,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACrC,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;IAC1C,kBAAkB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CACrD,CAAC;AAUF,MAAM,CAAC,MAAM,mBAAmB,GAAqC,CACnE,IAA+B,EAC/B,EAAE;IACF,OAAO,CACL,KAAC,eAAe,IACd,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,iBAAiB,EAAE;YACjB,cAAc,EAAE,IAAI,CAAC,cAAc;YACnC,eAAe,EAAE,IAAI,CAAC,eAAe;YACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,KAAK,EAAE,SAAS;IAChB,eAAe,EAAE,KAAK;IACtB,eAAe,EAAE,IAAI;IACrB,cAAc,EAAE,SAAS;IACzB,QAAQ,EAAE,QAAQ;IAClB,QAAQ,EAAE,YAAY;IACtB,QAAQ,EAAE,UAAU;CACrB,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,eAAe,EAAE;QACf,OAAO,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;QAC9D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACjD,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE;IACzE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,IAAI,EAAE,cAAc;SACrB;QACD,OAAO,EAAE,CAAC,YAAY,EAAE,aAAa,CAAC;KACvC;IACD,QAAQ,EAAE;QACR,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QAC3B,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC;KACpC;IACD,QAAQ,EAAE;QACR,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;QACjC,OAAO,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC;KACjC;CACF,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport {\n CurrencyDisplay,\n CurrencyDisplayProps,\n CurrencyInput,\n CurrencyInputProps,\n usePrevious\n} from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Currency',\n component: CurrencyInput\n} as Meta;\n\ninterface CurrencyStoryProps extends CurrencyInputProps {\n showAdditionalInfo?: boolean;\n}\n\nexport const CurrencyInputDemo: Story<Partial<CurrencyStoryProps>> = (\n args: Partial<CurrencyStoryProps>\n) => {\n const [value, setValue] = useState<string \| undefined>(\n args.value ? args.value.toString() : undefined\n );\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value ? args.value.toString() : undefined);\n }, [prev, args.value]);\n\n return (\n <CurrencyInput\n {...args}\n value={value}\n onChange={inputValue => {\n setValue(inputValue);\n args.onChange?.(inputValue);\n }}\n onBlur={inputValue => {\n args.onBlur?.(inputValue);\n }}\n onFocus={inputValue => {\n args.onFocus?.(inputValue);\n }}\n currencyISOCode={args.currencyISOCode}\n alwaysShowISOCode={args.alwaysShowISOCode}\n showDecimal={args.showDecimal}\n showGroupSeparators={args.showGroupSeparators}\n step={args.step}\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 additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Input a number that will represent a monetary value.'\n }\n : undefined\n }\n />\n );\n};\n\nCurrencyInputDemo.args = {\n value: undefined,\n currencyISOCode: 'USD',\n alwaysShowISOCode: false,\n showDecimal: true,\n showGroupSeparators: true,\n step: 1,\n label: 'Currency input',\n labelHidden: false,\n info: 'Enter a numerical value',\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false,\n showAdditionalInfo: true\n};\n\nCurrencyInputDemo.argTypes = {\n value: { control: { type: 'number' } },\n currencyISOCode: {\n options: [undefined, 'USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],\n control: { type: 'select' }\n },\n alwaysShowISOCode: { control: { type: 'boolean' } },\n showDecimal: { control: { type: 'boolean' } },\n showGroupSeparators: { control: { type: 'boolean' } },\n step: { control: { type: 'number' } },\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n info: { control: { type: 'text' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } },\n showAdditionalInfo: { control: { type: 'boolean' } }\n};\n\ninterface CurrencyDisplayStoryProps extends CurrencyDisplayProps {\n groupSeparators: boolean;\n fractionDigits: number;\n currency: 'symbol' \| 'code' \| 'name';\n negative: 'minus-sign' \| 'parentheses';\n notation: 'standard' \| 'compact';\n}\n\nexport const CurrencyDisplayDemo: Story<CurrencyDisplayStoryProps> = (\n args: CurrencyDisplayStoryProps\n) => {\n return (\n <CurrencyDisplay\n value={args.value}\n currencyISOCode={args.currencyISOCode}\n formattingOptions={{\n fractionDigits: args.fractionDigits,\n groupSeparators: args.groupSeparators,\n currency: args.currency,\n negative: args.negative,\n notation: args.notation\n }}\n />\n );\n};\n\nCurrencyDisplayDemo.args = {\n value: undefined,\n currencyISOCode: 'USD',\n groupSeparators: true,\n fractionDigits: undefined,\n currency: 'symbol',\n negative: 'minus-sign',\n notation: 'standard'\n};\n\nCurrencyDisplayDemo.argTypes = {\n value: { control: { type: 'number' } },\n currencyISOCode: {\n options: [undefined, 'USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],\n control: { type: 'select' }\n },\n groupSeparators: { control: { type: 'boolean' } },\n fractionDigits: { control: { type: 'number', min: 0, max: 20, step: 1 } },\n negative: {\n control: {\n type: 'inline-radio'\n },\n options: ['minus-sign', 'parentheses']\n },\n currency: {\n control: { type: 'select' },\n options: ['symbol', 'code', 'name']\n },\n notation: {\n control: { type: 'inline-radio' },\n options: ['standard', 'compact']\n }\n};\n"]}

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

@@ -2,18 +2,48 @@ import { Meta, Story } from '@storybook/react';
 import { DateInputProps, DateTimeInputProps, DateRangeInputProps, DayOfWeekInputProps, DurationInputProps, MonthInputProps, QuarterInputProps, TimeInputProps, WeekInputProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const DateInputDemo: Story<DateInputProps>;
-export declare const MonthInputDemo: Story<MonthInputProps>;
-export declare const WeekInputDemo: Story<WeekInputProps>;
-export declare const QuarterInputDemo: Story<QuarterInputProps>;
-export declare const DayOfWeekInputDemo: Story<DayOfWeekInputProps & {
+interface DateInputStoryProps extends DateInputProps {
+    showAdditionalInfo?: boolean;
+}
+interface MonthInputStoryProps extends MonthInputProps {
+    showAdditionalInfo?: boolean;
+}
+interface WeekInputStoryProps extends WeekInputProps {
+    showAdditionalInfo?: boolean;
+}
+interface QuarterInputStoryProps extends QuarterInputProps {
+    showAdditionalInfo?: boolean;
+}
+interface DayOfWeekInputStoryProps extends DayOfWeekInputProps {
+    showAdditionalInfo?: boolean;
+}
+interface TimeInputStoryProps extends TimeInputProps {
+    showAdditionalInfo?: boolean;
+}
+interface DateTimeInputStoryProps extends DateTimeInputProps {
+    showAdditionalInfo?: boolean;
+    showWeekNumber?: boolean;
+}
+interface DateRangeInputStoryProps extends DateRangeInputProps {
+    showAdditionalInfo?: boolean;
+    showToAdditionalInfo?: boolean;
+    showFromAdditionalInfo?: boolean;
+}
+interface DurationInputStoryProps extends DurationInputProps {
+    showAdditionalInfo?: boolean;
+}
+export declare const DateInputDemo: Story<DateInputStoryProps>;
+export declare const MonthInputDemo: Story<MonthInputStoryProps>;
+export declare const WeekInputDemo: Story<WeekInputStoryProps>;
+export declare const QuarterInputDemo: Story<QuarterInputStoryProps>;
+export declare const DayOfWeekInputDemo: Story<DayOfWeekInputStoryProps & {
     min?: never;
     max?: never;
 }>;
-export declare const TimeInputDemo: Story<TimeInputProps>;
-export declare const DateTimeInputDemo: Story<DateTimeInputProps>;
-export declare const DateRangeInputDemo: Story<DateRangeInputProps>;
-export declare const DurationInputDemo: Story<DurationInputProps & {
+export declare const TimeInputDemo: Story<TimeInputStoryProps>;
+export declare const DateTimeInputDemo: Story<DateTimeInputStoryProps>;
+export declare const DateRangeInputDemo: Story<DateRangeInputStoryProps>;
+export declare const DurationInputDemo: Story<DurationInputStoryProps & {
     min?: never;
     max?: never;
 }>;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DateTime.stories.d.ts","sourceRoot":"","sources":["../../../src/core/DateTime/DateTime.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,cAAc,EAEd,kBAAkB,EAElB,mBAAmB,EAEnB,mBAAmB,EAEnB,kBAAkB,EAGlB,eAAe,EAEf,iBAAiB,EAEjB,cAAc,EAEd,cAAc,EAEf,MAAM,yBAAyB,CAAC;;AAEjC,~~wBAsBU~~;AAEV,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,~~cAAc~~,~~CAyB/C~~,CAAC;AAWF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,~~eAAe~~,~~CAwBjD~~,CAAC;~~AAMF~~,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,~~cAAc~~,~~CAwB/C~~,CAAC;~~AAMF~~,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,~~iBAAiB~~,~~CAwBrD~~,CAAC;~~AAMF~~,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,~~mBAAmB~~,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC;IAAC,GAAG,CAAC,EAAE,KAAK,CAAA;CAAE,~~CAsBxF~~,CAAC;AAWF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,~~cAAc~~,~~CA2B/C~~,CAAC;AAeF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,~~kBAAkB~~,~~CA4BvD~~,CAAC;AAiBF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,~~mBAAmB~~,~~CAezD~~,CAAC;~~AAiBF~~,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,~~kBAAkB~~,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC;IAAC,GAAG,CAAC,EAAE,KAAK,CAAA;CAAE,~~CAuBtF~~,CAAC"}
1	+ {"version":3,"file":"DateTime.stories.d.ts","sourceRoot":"","sources":["../../../src/core/DateTime/DateTime.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,cAAc,EAEd,kBAAkB,EAElB,mBAAmB,EAEnB,mBAAmB,EAEnB,kBAAkB,EAGlB,eAAe,EAEf,iBAAiB,EAEjB,cAAc,EAEd,cAAc,EAEf,MAAM,yBAAyB,CAAC;;AAEjC,wBA2BU;AAEV,UAAU,mBAAoB,SAAQ,cAAc;IAClD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,UAAU,oBAAqB,SAAQ,eAAe;IACpD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,UAAU,mBAAoB,SAAQ,cAAc;IAClD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,UAAU,sBAAuB,SAAQ,iBAAiB;IACxD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,UAAU,wBAAyB,SAAQ,mBAAmB;IAC5D,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,UAAU,mBAAoB,SAAQ,cAAc;IAClD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,UAAU,uBAAwB,SAAQ,kBAAkB;IAC1D,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,UAAU,wBAAyB,SAAQ,mBAAmB;IAC5D,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AACD,UAAU,uBAAwB,SAAQ,kBAAkB;IAC1D,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AACD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,mBAAmB,CAiCpD,CAAC;AAWF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,oBAAoB,CAgCtD,CAAC;AAUF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,mBAAmB,CAgCpD,CAAC;AAUF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,sBAAsB,CAgC1D,CAAC;AAUF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,wBAAwB,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC;IAAC,GAAG,CAAC,EAAE,KAAK,CAAA;CAAE,CA8B7F,CAAC;AAWF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,mBAAmB,CAmCpD,CAAC;AAeF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,CAsC5D,CAAC;AAiBF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,wBAAwB,CAiC9D,CAAC;AAsBF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC;IAAC,GAAG,CAAC,EAAE,KAAK,CAAA;CAAE,CA+B3F,CAAC"}

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

@@ -11,17 +11,22 @@ export default {
         disabled: false,
         readOnly: false,
         min: undefined,
-        max: undefined
+        max: undefined,
+        showAdditionalInfo: true
     },
     argTypes: {
-        status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+        status: {
+            options: [undefined, 'success', 'warning', 'error', 'pending'],
+            control: { type: 'select' }
+        },
         label: { control: { type: 'text' } },
         labelHidden: { control: { type: 'boolean' } },
         required: { control: { type: 'boolean' } },
         disabled: { control: { type: 'boolean' } },
         readOnly: { control: { type: 'boolean' } },
         min: { control: { type: 'date' } },
-        max: { control: { type: 'date' } }
+        max: { control: { type: 'date' } },
+        showAdditionalInfo: { control: { type: 'boolean' } }
     }
 };
 export const DateInputDemo = (args) => {
@@ -31,7 +36,12 @@ export const DateInputDemo = (args) => {
         if (prev !== args.value)
             setValue(args.value);
     }, [prev, args.value]);
-    return (_jsx(DateInput, { value: value, showWeekNumber: args.showWeekNumber, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max, onBlur: ({ valueAsISOString, state }) => {
+    return (_jsx(DateInput, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a date'
+            }
+            : undefined, value: value, showWeekNumber: args.showWeekNumber, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max, onBlur: ({ valueAsISOString, state }) => {
             if (state !== 'incomplete' && state !== 'invalid')
                 setValue(valueAsISOString);
         } }));
@@ -50,7 +60,12 @@ export const MonthInputDemo = (args) => {
         if (prev !== args.value)
             setValue(args.value);
     }, [prev, args.value]);
-    return (_jsx(MonthInput, { value: value, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max, onBlur: ({ valueAsISOString, state }) => {
+    return (_jsx(MonthInput, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a date'
+            }
+            : undefined, value: value, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max, onBlur: ({ valueAsISOString, state }) => {
             if (state !== 'incomplete' && state !== 'invalid')
                 setValue(valueAsISOString);
         } }));
@@ -58,6 +73,9 @@ export const MonthInputDemo = (args) => {
 MonthInputDemo.args = {
     label: 'Month input'
 };
+MonthInputDemo.argTypes = {
+    label: { control: { type: 'string' } }
+};
 export const WeekInputDemo = (args) => {
     const [value, setValue] = useState(args.value);
     const prev = usePrevious(args.value);
@@ -65,7 +83,12 @@ export const WeekInputDemo = (args) => {
         if (prev !== args.value)
             setValue(args.value);
     }, [prev, args.value]);
-    return (_jsx(WeekInput, { value: value, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max, onBlur: ({ valueAsISOString, state }) => {
+    return (_jsx(WeekInput, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a date'
+            }
+            : undefined, value: value, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max, onBlur: ({ valueAsISOString, state }) => {
             if (state !== 'incomplete' && state !== 'invalid')
                 setValue(valueAsISOString);
         } }));
@@ -73,6 +96,9 @@ export const WeekInputDemo = (args) => {
 WeekInputDemo.args = {
     label: 'Week input'
 };
+WeekInputDemo.argTypes = {
+    label: { control: { type: 'string' } }
+};
 export const QuarterInputDemo = (args) => {
     const [value, setValue] = useState(args.value);
     const prev = usePrevious(args.value);
@@ -80,7 +106,12 @@ export const QuarterInputDemo = (args) => {
         if (prev !== args.value)
             setValue(args.value);
     }, [prev, args.value]);
-    return (_jsx(QuarterInput, { value: value, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max, onBlur: ({ valueAsISOString, state }) => {
+    return (_jsx(QuarterInput, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a date'
+            }
+            : undefined, value: value, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max, onBlur: ({ valueAsISOString, state }) => {
             if (state !== 'incomplete' && state !== 'invalid')
                 setValue(valueAsISOString);
         } }));
@@ -88,6 +119,9 @@ export const QuarterInputDemo = (args) => {
 QuarterInputDemo.args = {
     label: 'Quarter input'
 };
+QuarterInputDemo.argTypes = {
+    label: { control: { type: 'string' } }
+};
 export const DayOfWeekInputDemo = (args) => {
     const [value, setValue] = useState(args.value);
     const prev = usePrevious(args.value);
@@ -95,7 +129,12 @@ export const DayOfWeekInputDemo = (args) => {
         if (prev !== args.value)
             setValue(args.value);
     }, [prev, args.value]);
-    return (_jsx(DayOfWeekInput, { value: value, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, onChange: setValue }));
+    return (_jsx(DayOfWeekInput, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a date'
+            }
+            : undefined, value: value, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, onChange: setValue }));
 };
 DayOfWeekInputDemo.args = {
     label: 'Day of the week input'
@@ -111,7 +150,12 @@ export const TimeInputDemo = (args) => {
         if (prev !== args.value)
             setValue(args.value);
     }, [prev, args.value]);
-    return (_jsx(TimeInput, { value: value, withSeconds: args.withSeconds, clockFormat: args.clockFormat, pickerInterval: args.pickerInterval, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max, onBlur: ({ valueAsISOString, state }) => {
+    return (_jsx(TimeInput, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a date'
+            }
+            : undefined, value: value, withSeconds: args.withSeconds, clockFormat: args.clockFormat, pickerInterval: args.pickerInterval, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max, onBlur: ({ valueAsISOString, state }) => {
             if (state !== 'incomplete' && state !== 'invalid')
                 setValue(valueAsISOString);
         } }));
@@ -134,7 +178,12 @@ export const DateTimeInputDemo = (args) => {
         if (prev !== args.value)
             setValue(args.value);
     }, [prev, args.value]);
-    return (_jsx(DateTimeInput, { value: value, showWeekNumber: args.showWeekNumber, withSeconds: args.withSeconds, clockFormat: args.clockFormat, pickerInterval: args.pickerInterval, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max, onBlur: ({ valueAsISOString, state }) => {
+    return (_jsx(DateTimeInput, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a date'
+            }
+            : undefined, value: value, showWeekNumber: args.showWeekNumber, withSeconds: args.withSeconds, clockFormat: args.clockFormat, pickerInterval: args.pickerInterval, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly, min: args.min, max: args.max, onBlur: ({ valueAsISOString, state }) => {
             if (state !== 'incomplete' && state !== 'invalid')
                 setValue(valueAsISOString);
         } }));
@@ -153,12 +202,24 @@ DateTimeInputDemo.argTypes = {
     pickerInterval: { options: [undefined, 15, 30, 60], control: { type: 'select' } }
 };
 export const DateRangeInputDemo = (args) => {
-    return (_jsx(DateRangeInput, { fromValue: new Date(), toValue: new Date(), showWeekNumber: args.showWeekNumber, status: args.status, fromLabel: args.fromLabel, toLabel: args.toLabel, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly }));
+    return (_jsx(DateRangeInput, { toAdditionalInfo: args.showToAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a to date'
+            }
+            : undefined, fromAdditionalInfo: args.showFromAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a from date'
+            }
+            : undefined, fromValue: new Date(), toValue: new Date(), showWeekNumber: args.showWeekNumber, status: args.status, fromLabel: args.fromLabel, toLabel: args.toLabel, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly }));
 };
 DateRangeInputDemo.args = {
     showWeekNumber: false,
     fromLabel: 'Check in',
-    toLabel: 'Check out'
+    toLabel: 'Check out',
+    showFromAdditionalInfo: true,
+    showToAdditionalInfo: true
 };
 DateRangeInputDemo.argTypes = {
     showWeekNumber: { control: { type: 'boolean' } },
@@ -166,7 +227,10 @@ DateRangeInputDemo.argTypes = {
     toLabel: { control: { type: 'text' } },
     label: { table: { disable: true } },
     min: { table: { disable: true } },
-    max: { table: { disable: true } }
+    max: { table: { disable: true } },
+    showAdditionalInfo: { table: { disable: true } },
+    showFromAdditionalInfo: { control: { type: 'boolean' } },
+    showToAdditionalInfo: { control: { type: 'boolean' } }
 };
 export const DurationInputDemo = (args) => {
     const [value, setValue] = useState(args.value);
@@ -175,7 +239,12 @@ export const DurationInputDemo = (args) => {
         if (prev !== args.value)
             setValue(args.value);
     }, [prev, args.value]);
-    return (_jsx(DurationInput, { value: value, onChange: setValue, format: args.format, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly }));
+    return (_jsx(DurationInput, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a duration'
+            }
+            : undefined, value: value, onChange: setValue, format: args.format, status: args.status, label: args.label, labelHidden: args.labelHidden, required: args.required, disabled: args.disabled, readOnly: args.readOnly }));
 };
 DurationInputDemo.args = {
     value: 86400000,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DateTime.stories.js","sourceRoot":"","sources":["../../../src/core/DateTime/DateTime.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport {\n DateInput,\n DateInputProps,\n DateTimeInput,\n DateTimeInputProps,\n DateRangeInput,\n DateRangeInputProps,\n DayOfWeekInput,\n DayOfWeekInputProps,\n DurationInput,\n DurationInputProps,\n Format,\n MonthInput,\n MonthInputProps,\n QuarterInput,\n QuarterInputProps,\n TimeInput,\n TimeInputProps,\n WeekInput,\n WeekInputProps,\n usePrevious\n} from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/DateTime/Input',\n args: {\n status: undefined,\n label: '',\n labelHidden: false,\n required: false,\n disabled: false,\n readOnly: false,\n min: undefined,\n max: undefined\n },\n argTypes: {\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } },\n min: { control: { type: 'date' } },\n max: { control: { type: 'date' } }\n }\n} as Meta;\n\nexport const DateInputDemo: Story<DateInputProps> = (args: DateInputProps) => {\n const [value, setValue] = useState<DateInputProps['value']>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <DateInput\n value={value}\n showWeekNumber={args.showWeekNumber}\n status={args.status}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n min={args.min}\n max={args.max}\n onBlur={({ valueAsISOString, state }) => {\n if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n }}\n />\n );\n};\n\nDateInputDemo.args = {\n showWeekNumber: false,\n label: 'Date input'\n};\n\nDateInputDemo.argTypes = {\n showWeekNumber: { control: { type: 'boolean' } }\n};\n\nexport const MonthInputDemo: Story<MonthInputProps> = (args: MonthInputProps) => {\n const [value, setValue] = useState<MonthInputProps['value']>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <MonthInput\n value={value}\n status={args.status}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n min={args.min}\n max={args.max}\n onBlur={({ valueAsISOString, state }) => {\n if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n }}\n />\n );\n};\n\nMonthInputDemo.args = {\n label: 'Month input'\n};\n\nexport const WeekInputDemo: Story<WeekInputProps> = (args: WeekInputProps) => {\n const [value, setValue] = useState<WeekInputProps['value']>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <WeekInput\n value={value}\n status={args.status}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n min={args.min}\n max={args.max}\n onBlur={({ valueAsISOString, state }) => {\n if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n }}\n />\n );\n};\n\nWeekInputDemo.args = {\n label: 'Week input'\n};\n\nexport const QuarterInputDemo: Story<QuarterInputProps> = (args: QuarterInputProps) => {\n const [value, setValue] = useState<QuarterInputProps['value']>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <QuarterInput\n value={value}\n status={args.status}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n min={args.min}\n max={args.max}\n onBlur={({ valueAsISOString, state }) => {\n if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n }}\n />\n );\n};\n\nQuarterInputDemo.args = {\n label: 'Quarter input'\n};\n\nexport const DayOfWeekInputDemo: Story<DayOfWeekInputProps & { min?: never; max?: never }> = (\n args: DayOfWeekInputProps\n) => {\n const [value, setValue] = useState<DayOfWeekInputProps['value']>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <DayOfWeekInput\n value={value}\n status={args.status}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n onChange={setValue}\n />\n );\n};\n\nDayOfWeekInputDemo.args = {\n label: 'Day of the week input'\n};\n\nDayOfWeekInputDemo.argTypes = {\n min: { table: { disable: true } },\n max: { table: { disable: true } }\n};\n\nexport const TimeInputDemo: Story<TimeInputProps> = (args: TimeInputProps) => {\n const [value, setValue] = useState<TimeInputProps['value']>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <TimeInput\n value={value}\n withSeconds={args.withSeconds}\n clockFormat={args.clockFormat}\n pickerInterval={args.pickerInterval}\n status={args.status}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n min={args.min}\n max={args.max}\n onBlur={({ valueAsISOString, state }) => {\n if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n }}\n />\n );\n};\n\nTimeInputDemo.args = {\n withSeconds: false,\n clockFormat: undefined,\n pickerInterval: 30,\n label: 'Time input'\n};\n\nTimeInputDemo.argTypes = {\n withSeconds: { control: { type: 'boolean' } },\n clockFormat: { options: [undefined, 12, 24], control: { type: 'select' } },\n pickerInterval: { options: [undefined, 15, 30, 60], control: { type: 'select' } }\n};\n\nexport const DateTimeInputDemo: Story<DateTimeInputProps> = (args: DateTimeInputProps) => {\n const [value, setValue] = useState<DateTimeInputProps['value']>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <DateTimeInput\n value={value}\n showWeekNumber={args.showWeekNumber}\n withSeconds={args.withSeconds}\n clockFormat={args.clockFormat}\n pickerInterval={args.pickerInterval}\n status={args.status}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n min={args.min}\n max={args.max}\n onBlur={({ valueAsISOString, state }) => {\n if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n }}\n />\n );\n};\n\nDateTimeInputDemo.args = {\n showWeekNumber: false,\n withSeconds: false,\n clockFormat: undefined,\n pickerInterval: 30,\n label: 'DateTime input'\n};\n\nDateTimeInputDemo.argTypes = {\n showWeekNumber: { control: { type: 'boolean' } },\n withSeconds: { control: { type: 'boolean' } },\n clockFormat: { options: [undefined, 12, 24], control: { type: 'select' } },\n pickerInterval: { options: [undefined, 15, 30, 60], control: { type: 'select' } }\n};\n\nexport const DateRangeInputDemo: Story<DateRangeInputProps> = (args: DateRangeInputProps) => {\n return (\n <DateRangeInput\n fromValue={new Date()}\n toValue={new Date()}\n showWeekNumber={args.showWeekNumber}\n status={args.status}\n fromLabel={args.fromLabel}\n toLabel={args.toLabel}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n />\n );\n};\n\nDateRangeInputDemo.args = {\n showWeekNumber: false,\n fromLabel: 'Check in',\n toLabel: 'Check out'\n};\n\nDateRangeInputDemo.argTypes = {\n showWeekNumber: { control: { type: 'boolean' } },\n fromLabel: { control: { type: 'text' } },\n toLabel: { control: { type: 'text' } },\n label: { table: { disable: true } },\n min: { table: { disable: true } },\n max: { table: { disable: true } }\n};\n\nexport const DurationInputDemo: Story<DurationInputProps & { min?: never; max?: never }> = (\n args: DurationInputProps\n) => {\n const [value, setValue] = useState(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <DurationInput\n value={value}\n onChange={setValue}\n format={args.format}\n status={args.status}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n />\n );\n};\n\nDurationInputDemo.args = {\n value: 86400000,\n // eslint-disable-next-line demo-patterns/literal-args\n format: Format.Seconds,\n label: 'Duration input'\n};\n\nDurationInputDemo.argTypes = {\n value: { control: { type: 'number' } },\n format: {\n options: [Format.Seconds, Format.Minutes, Format.Hours, Format.Days, Format.Formatted],\n control: { type: 'select' }\n },\n min: { table: { disable: true } },\n max: { table: { disable: true } }\n};\n"]}
1	+ {"version":3,"file":"DateTime.stories.js","sourceRoot":"","sources":["../../../src/core/DateTime/DateTime.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport {\n DateInput,\n DateInputProps,\n DateTimeInput,\n DateTimeInputProps,\n DateRangeInput,\n DateRangeInputProps,\n DayOfWeekInput,\n DayOfWeekInputProps,\n DurationInput,\n DurationInputProps,\n Format,\n MonthInput,\n MonthInputProps,\n QuarterInput,\n QuarterInputProps,\n TimeInput,\n TimeInputProps,\n WeekInput,\n WeekInputProps,\n usePrevious\n} from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/DateTime/Input',\n args: {\n status: undefined,\n label: '',\n labelHidden: false,\n required: false,\n disabled: false,\n readOnly: false,\n min: undefined,\n max: undefined,\n showAdditionalInfo: true\n },\n argTypes: {\n status: {\n options: [undefined, 'success', 'warning', 'error', 'pending'],\n control: { type: 'select' }\n },\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } },\n min: { control: { type: 'date' } },\n max: { control: { type: 'date' } },\n showAdditionalInfo: { control: { type: 'boolean' } }\n }\n} as Meta;\n\ninterface DateInputStoryProps extends DateInputProps {\n showAdditionalInfo?: boolean;\n}\n\ninterface MonthInputStoryProps extends MonthInputProps {\n showAdditionalInfo?: boolean;\n}\n\ninterface WeekInputStoryProps extends WeekInputProps {\n showAdditionalInfo?: boolean;\n}\n\ninterface QuarterInputStoryProps extends QuarterInputProps {\n showAdditionalInfo?: boolean;\n}\n\ninterface DayOfWeekInputStoryProps extends DayOfWeekInputProps {\n showAdditionalInfo?: boolean;\n}\n\ninterface TimeInputStoryProps extends TimeInputProps {\n showAdditionalInfo?: boolean;\n}\n\ninterface DateTimeInputStoryProps extends DateTimeInputProps {\n showAdditionalInfo?: boolean;\n showWeekNumber?: boolean;\n}\n\ninterface DateRangeInputStoryProps extends DateRangeInputProps {\n showAdditionalInfo?: boolean;\n showToAdditionalInfo?: boolean;\n showFromAdditionalInfo?: boolean;\n}\ninterface DurationInputStoryProps extends DurationInputProps {\n showAdditionalInfo?: boolean;\n}\nexport const DateInputDemo: Story<DateInputStoryProps> = (args: DateInputStoryProps) => {\n const [value, setValue] = useState<DateInputProps['value']>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <DateInput\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a date'\n }\n : undefined\n }\n value={value}\n showWeekNumber={args.showWeekNumber}\n status={args.status}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n min={args.min}\n max={args.max}\n onBlur={({ valueAsISOString, state }) => {\n if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n }}\n />\n );\n};\n\nDateInputDemo.args = {\n showWeekNumber: false,\n label: 'Date input'\n};\n\nDateInputDemo.argTypes = {\n showWeekNumber: { control: { type: 'boolean' } }\n};\n\nexport const MonthInputDemo: Story<MonthInputStoryProps> = (args: MonthInputStoryProps) => {\n const [value, setValue] = useState<MonthInputProps['value']>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <MonthInput\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a date'\n }\n : undefined\n }\n value={value}\n status={args.status}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n min={args.min}\n max={args.max}\n onBlur={({ valueAsISOString, state }) => {\n if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n }}\n />\n );\n};\n\nMonthInputDemo.args = {\n label: 'Month input'\n};\n\nMonthInputDemo.argTypes = {\n label: { control: { type: 'string' } }\n};\n\nexport const WeekInputDemo: Story<WeekInputStoryProps> = (args: WeekInputStoryProps) => {\n const [value, setValue] = useState<WeekInputProps['value']>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <WeekInput\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a date'\n }\n : undefined\n }\n value={value}\n status={args.status}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n min={args.min}\n max={args.max}\n onBlur={({ valueAsISOString, state }) => {\n if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n }}\n />\n );\n};\n\nWeekInputDemo.args = {\n label: 'Week input'\n};\n\nWeekInputDemo.argTypes = {\n label: { control: { type: 'string' } }\n};\n\nexport const QuarterInputDemo: Story<QuarterInputStoryProps> = (args: QuarterInputStoryProps) => {\n const [value, setValue] = useState<QuarterInputProps['value']>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <QuarterInput\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a date'\n }\n : undefined\n }\n value={value}\n status={args.status}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n min={args.min}\n max={args.max}\n onBlur={({ valueAsISOString, state }) => {\n if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n }}\n />\n );\n};\n\nQuarterInputDemo.args = {\n label: 'Quarter input'\n};\n\nQuarterInputDemo.argTypes = {\n label: { control: { type: 'string' } }\n};\n\nexport const DayOfWeekInputDemo: Story<DayOfWeekInputStoryProps & { min?: never; max?: never }> = (\n args: DayOfWeekInputStoryProps\n) => {\n const [value, setValue] = useState<DayOfWeekInputProps['value']>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <DayOfWeekInput\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a date'\n }\n : undefined\n }\n value={value}\n status={args.status}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n onChange={setValue}\n />\n );\n};\n\nDayOfWeekInputDemo.args = {\n label: 'Day of the week input'\n};\n\nDayOfWeekInputDemo.argTypes = {\n min: { table: { disable: true } },\n max: { table: { disable: true } }\n};\n\nexport const TimeInputDemo: Story<TimeInputStoryProps> = (args: TimeInputStoryProps) => {\n const [value, setValue] = useState<TimeInputProps['value']>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <TimeInput\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a date'\n }\n : undefined\n }\n value={value}\n withSeconds={args.withSeconds}\n clockFormat={args.clockFormat}\n pickerInterval={args.pickerInterval}\n status={args.status}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n min={args.min}\n max={args.max}\n onBlur={({ valueAsISOString, state }) => {\n if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n }}\n />\n );\n};\n\nTimeInputDemo.args = {\n withSeconds: false,\n clockFormat: undefined,\n pickerInterval: 30,\n label: 'Time input'\n};\n\nTimeInputDemo.argTypes = {\n withSeconds: { control: { type: 'boolean' } },\n clockFormat: { options: [undefined, 12, 24], control: { type: 'select' } },\n pickerInterval: { options: [undefined, 15, 30, 60], control: { type: 'select' } }\n};\n\nexport const DateTimeInputDemo: Story<DateTimeInputStoryProps> = (\n args: DateTimeInputStoryProps\n) => {\n const [value, setValue] = useState<DateTimeInputProps['value']>(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <DateTimeInput\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a date'\n }\n : undefined\n }\n value={value}\n showWeekNumber={args.showWeekNumber}\n withSeconds={args.withSeconds}\n clockFormat={args.clockFormat}\n pickerInterval={args.pickerInterval}\n status={args.status}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n min={args.min}\n max={args.max}\n onBlur={({ valueAsISOString, state }) => {\n if (state !== 'incomplete' && state !== 'invalid') setValue(valueAsISOString);\n }}\n />\n );\n};\n\nDateTimeInputDemo.args = {\n showWeekNumber: false,\n withSeconds: false,\n clockFormat: undefined,\n pickerInterval: 30,\n label: 'DateTime input'\n};\n\nDateTimeInputDemo.argTypes = {\n showWeekNumber: { control: { type: 'boolean' } },\n withSeconds: { control: { type: 'boolean' } },\n clockFormat: { options: [undefined, 12, 24], control: { type: 'select' } },\n pickerInterval: { options: [undefined, 15, 30, 60], control: { type: 'select' } }\n};\n\nexport const DateRangeInputDemo: Story<DateRangeInputStoryProps> = (\n args: DateRangeInputStoryProps\n) => {\n return (\n <DateRangeInput\n toAdditionalInfo={\n args.showToAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a to date'\n }\n : undefined\n }\n fromAdditionalInfo={\n args.showFromAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a from date'\n }\n : undefined\n }\n fromValue={new Date()}\n toValue={new Date()}\n showWeekNumber={args.showWeekNumber}\n status={args.status}\n fromLabel={args.fromLabel}\n toLabel={args.toLabel}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n />\n );\n};\n\nDateRangeInputDemo.args = {\n showWeekNumber: false,\n fromLabel: 'Check in',\n toLabel: 'Check out',\n showFromAdditionalInfo: true,\n showToAdditionalInfo: true\n};\n\nDateRangeInputDemo.argTypes = {\n showWeekNumber: { control: { type: 'boolean' } },\n fromLabel: { control: { type: 'text' } },\n toLabel: { control: { type: 'text' } },\n label: { table: { disable: true } },\n min: { table: { disable: true } },\n max: { table: { disable: true } },\n showAdditionalInfo: { table: { disable: true } },\n showFromAdditionalInfo: { control: { type: 'boolean' } },\n showToAdditionalInfo: { control: { type: 'boolean' } }\n};\n\nexport const DurationInputDemo: Story<DurationInputStoryProps & { min?: never; max?: never }> = (\n args: DurationInputStoryProps\n) => {\n const [value, setValue] = useState(args.value);\n\n const prev = usePrevious(args.value);\n useEffect(() => {\n if (prev !== args.value) setValue(args.value);\n }, [prev, args.value]);\n\n return (\n <DurationInput\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a duration'\n }\n : undefined\n }\n value={value}\n onChange={setValue}\n format={args.format}\n status={args.status}\n label={args.label}\n labelHidden={args.labelHidden}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n />\n );\n};\n\nDurationInputDemo.args = {\n value: 86400000,\n // eslint-disable-next-line demo-patterns/literal-args\n format: Format.Seconds,\n label: 'Duration input'\n};\n\nDurationInputDemo.argTypes = {\n value: { control: { type: 'number' } },\n format: {\n options: [Format.Seconds, Format.Minutes, Format.Hours, Format.Days, Format.Formatted],\n control: { type: 'select' }\n },\n min: { table: { disable: true } },\n max: { table: { disable: true } }\n};\n"]}

package/lib/core/FieldValueList/FieldValueList.mocks.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+declare const StyledDemoContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export default StyledDemoContainer;
+//# sourceMappingURL=FieldValueList.mocks.d.ts.map

package/lib/core/FieldValueList/FieldValueList.mocks.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"FieldValueList.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.mocks.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,mBAAmB,yGAUvB,CAAC;AAEH,eAAe,mBAAmB,CAAC"}

package/lib/core/FieldValueList/FieldValueList.mocks.js ADDED Viewed

@@ -0,0 +1,9 @@
+import styled, { css } from 'styled-components';
+const StyledDemoContainer = styled.div(({ theme }) => {
+    const { base: { 'content-width': { md } } } = theme;
+    return css `
+    max-width: ${md};
+  `;
+});
+export default StyledDemoContainer;
+//# sourceMappingURL=FieldValueList.mocks.js.map

package/lib/core/FieldValueList/FieldValueList.mocks.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FieldValueList.mocks.js","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.mocks.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACnD,MAAM,EACJ,IAAI,EAAE,EACJ,eAAe,EAAE,EAAE,EAAE,EAAE,EACxB,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;iBACK,EAAE;GAChB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,mBAAmB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nconst StyledDemoContainer = styled.div(({ theme }) => {\n const {\n base: {\n 'content-width': { md }\n }\n } = theme;\n\n return css`\n max-width: ${md};\n `;\n});\n\nexport default StyledDemoContainer;\n"]}

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

@@ -5,6 +5,7 @@ export default _default;
 interface FieldValueListStoryProps extends OmitStrict<FieldValueListProps, 'fields'> {
     name: string;
     value: string;
+    inContentContainer?: boolean;
 }
 export declare const FieldValueListDemo: Story<FieldValueListStoryProps>;
 //# sourceMappingURL=FieldValueList.stories.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldValueList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.stories.tsx"],"names":[],"mappings":"~~AAAA~~,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAEL,mBAAmB,EAInB,UAAU,EACX,MAAM,yBAAyB,CAAC;;~~AAEjC~~,wBAGU;AAEV,UAAU,wBAAyB,SAAQ,UAAU,CAAC,mBAAmB,EAAE,QAAQ,CAAC;IAClF,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;~~CACf~~;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,wBAAwB,~~CA4C9D~~,CAAC"}
1	+ {"version":3,"file":"FieldValueList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAEL,mBAAmB,EAInB,UAAU,EACX,MAAM,yBAAyB,CAAC;;AAIjC,wBAGU;AAEV,UAAU,wBAAyB,SAAQ,UAAU,CAAC,mBAAmB,EAAE,QAAQ,CAAC;IAClF,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,wBAAwB,CA2E9D,CAAC"}

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

@@ -1,10 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from 'react';
 import { FieldValueList, Link, Status, Text } from '@pega/cosmos-react-core';
+import StyledDemoContainer from './FieldValueList.mocks';
 export default {
     title: 'Core/FieldValueList',
     component: FieldValueList
 };
 export const FieldValueListDemo = (args) => {
+    const Wrapper = args.inContentContainer ? StyledDemoContainer : Fragment;
     const data = [
         {
             id: 'id',
@@ -36,15 +39,42 @@ export const FieldValueListDemo = (args) => {
             name: 'No Value'
         }
     ];
-    return _jsx(FieldValueList, { variant: args.variant, fields: data });
+    const numericData = [
+        {
+            id: 'open',
+            name: 'Open',
+            value: 405
+        },
+        {
+            id: 'close',
+            name: 'Close',
+            value: 401
+        },
+        {
+            id: 'year_high',
+            name: '52 week high',
+            value: 445
+        },
+        {
+            id: 'year_low',
+            name: '52 week low',
+            value: 335
+        }
+    ];
+    return (_jsx(Wrapper, { children: _jsx(FieldValueList, { variant: args.variant, fields: args.variant === 'value-comparison' ? numericData : data }) }));
 };
 FieldValueListDemo.args = {
     variant: 'inline',
+    inContentContainer: true,
     name: 'Name',
     value: 'Value'
 };
 FieldValueListDemo.argTypes = {
-    variant: { options: ['inline', 'stacked'], control: { type: 'select' } },
+    variant: {
+        options: ['inline', 'stacked', 'value-comparison'],
+        control: { type: 'select' }
+    },
+    inContentContainer: { control: { type: 'boolean' } },
     name: { control: { type: 'text' } },
     value: { control: { type: 'text' } }
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldValueList.stories.js","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.stories.tsx"],"names":[],"mappings":";~~AAEA~~,OAAO,EACL,cAAc,EAEd,IAAI,EACJ,MAAM,EACN,IAAI,EAEL,MAAM,yBAAyB,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;CAClB,CAAC;~~AAOV~~,MAAM,CAAC,MAAM,kBAAkB,GAAoC,CACjE,IAA8B,EAC9B,EAAE;IACF,MAAM,IAAI,GAAG;QACX;YACE,EAAE,EAAE,IAAI;YACR,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,CACL,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,uBAErB,CACR;SACF;QACD;YACE,EAAE,EAAE,QAAQ;YACZ,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,wBAAiB;SAClD;QACD;YACE,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB;QACD;YACE,EAAE,EAAE,MAAM;YACV,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,CACL,KAAC,IAAI,IAAC,IAAI,EAAC,sBAAsB,EAAC,MAAM,EAAC,QAAQ,sBAE1C,CACR;SACF;QACD;YACE,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,IAAI,IAAI,EAAE,CAAC,kBAAkB,EAAE;SACvC;QACD;YACE,EAAE,EAAE,UAAU;YACd,IAAI,EAAE,UAAU;SACjB;KACF,CAAC;IAEF,OAAO,KAAC,cAAc,~~IAAC~~,OAAO,EAAE,IAAI,CAAC,OAAO,~~EAAE~~,MAAM,EAAE,IAAI,~~GAAI~~,CAAC;~~AACjE~~,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,OAAO,EAAE,QAAQ;IACjB,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;CACf,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,OAAO,EAAE,~~EAAE,~~OAAO,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,~~QAAQ~~,EAAE,EAAE;~~IACxE~~,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACrC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n FieldValueList,\n FieldValueListProps,\n Link,\n Status,\n Text,\n OmitStrict\n} from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/FieldValueList',\n component: FieldValueList\n} as Meta;\n\ninterface FieldValueListStoryProps extends OmitStrict<FieldValueListProps, 'fields'> {\n name: string;\n value: string;\n}\n\nexport const FieldValueListDemo: Story<FieldValueListStoryProps> = (\n args: FieldValueListStoryProps\n) => {\n const data = [\n {\n id: 'id',\n name: 'ID',\n value: (\n <Text variant='h1' as='span'>\n C-1234\n </Text>\n )\n },\n {\n id: 'status',\n name: 'Status',\n value: <Status variant='pending'>pending</Status>\n },\n {\n id: 'dynamic',\n name: args.name,\n value: args.value\n },\n {\n id: 'link',\n name: 'Link',\n value: (\n <Link href='https://www.pega.com' target='_blank'>\n C-ABC\n </Link>\n )\n },\n {\n id: 'created',\n name: 'Created',\n value: new Date().toLocaleDateString()\n },\n {\n id: 'no value',\n name: 'No Value'\n }\n ];\n\n return <FieldValueList variant={args.variant} fields={data} ~~/>;\~~n};\n\nFieldValueListDemo.args = {\n variant: 'inline',\n name: 'Name',\n value: 'Value'\n};\n\nFieldValueListDemo.argTypes = {\n variant: { options: ['inline', 'stacked'], control: { type: 'select' } },\n name: { control: { type: 'text' } },\n value: { control: { type: 'text' } }\n};\n"]}
1	+ {"version":3,"file":"FieldValueList.stories.js","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,EACL,cAAc,EAEd,IAAI,EACJ,MAAM,EACN,IAAI,EAEL,MAAM,yBAAyB,CAAC;AAEjC,OAAO,mBAAmB,MAAM,wBAAwB,CAAC;AAEzD,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;CAClB,CAAC;AAQV,MAAM,CAAC,MAAM,kBAAkB,GAAoC,CACjE,IAA8B,EAC9B,EAAE;IACF,MAAM,OAAO,GAAG,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,QAAQ,CAAC;IACzE,MAAM,IAAI,GAAG;QACX;YACE,EAAE,EAAE,IAAI;YACR,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,CACL,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,uBAErB,CACR;SACF;QACD;YACE,EAAE,EAAE,QAAQ;YACZ,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,wBAAiB;SAClD;QACD;YACE,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB;QACD;YACE,EAAE,EAAE,MAAM;YACV,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,CACL,KAAC,IAAI,IAAC,IAAI,EAAC,sBAAsB,EAAC,MAAM,EAAC,QAAQ,sBAE1C,CACR;SACF;QACD;YACE,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,IAAI,IAAI,EAAE,CAAC,kBAAkB,EAAE;SACvC;QACD;YACE,EAAE,EAAE,UAAU;YACd,IAAI,EAAE,UAAU;SACjB;KACF,CAAC;IAEF,MAAM,WAAW,GAAG;QAClB;YACE,EAAE,EAAE,MAAM;YACV,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,GAAG;SACX;QACD;YACE,EAAE,EAAE,OAAO;YACX,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,GAAG;SACX;QACD;YACE,EAAE,EAAE,WAAW;YACf,IAAI,EAAE,cAAc;YACpB,KAAK,EAAE,GAAG;SACX;QACD;YACE,EAAE,EAAE,UAAU;YACd,IAAI,EAAE,aAAa;YACnB,KAAK,EAAE,GAAG;SACX;KACF,CAAC;IAEF,OAAO,CACL,KAAC,OAAO,cACN,KAAC,cAAc,IACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,kBAAkB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,GAChE,GACM,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,OAAO,EAAE,QAAQ;IACjB,kBAAkB,EAAE,IAAI;IACxB,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;CACf,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,kBAAkB,CAAC;QAClD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,kBAAkB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACpD,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACrC,CAAC","sourcesContent":["import { Fragment } from 'react';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n FieldValueList,\n FieldValueListProps,\n Link,\n Status,\n Text,\n OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport StyledDemoContainer from './FieldValueList.mocks';\n\nexport default {\n title: 'Core/FieldValueList',\n component: FieldValueList\n} as Meta;\n\ninterface FieldValueListStoryProps extends OmitStrict<FieldValueListProps, 'fields'> {\n name: string;\n value: string;\n inContentContainer?: boolean;\n}\n\nexport const FieldValueListDemo: Story<FieldValueListStoryProps> = (\n args: FieldValueListStoryProps\n) => {\n const Wrapper = args.inContentContainer ? StyledDemoContainer : Fragment;\n const data = [\n {\n id: 'id',\n name: 'ID',\n value: (\n <Text variant='h1' as='span'>\n C-1234\n </Text>\n )\n },\n {\n id: 'status',\n name: 'Status',\n value: <Status variant='pending'>pending</Status>\n },\n {\n id: 'dynamic',\n name: args.name,\n value: args.value\n },\n {\n id: 'link',\n name: 'Link',\n value: (\n <Link href='https://www.pega.com' target='_blank'>\n C-ABC\n </Link>\n )\n },\n {\n id: 'created',\n name: 'Created',\n value: new Date().toLocaleDateString()\n },\n {\n id: 'no value',\n name: 'No Value'\n }\n ];\n\n const numericData = [\n {\n id: 'open',\n name: 'Open',\n value: 405\n },\n {\n id: 'close',\n name: 'Close',\n value: 401\n },\n {\n id: 'year_high',\n name: '52 week high',\n value: 445\n },\n {\n id: 'year_low',\n name: '52 week low',\n value: 335\n }\n ];\n\n return (\n <Wrapper>\n <FieldValueList\n variant={args.variant}\n fields={args.variant === 'value-comparison' ? numericData : data}\n />\n </Wrapper>\n );\n};\n\nFieldValueListDemo.args = {\n variant: 'inline',\n inContentContainer: true,\n name: 'Name',\n value: 'Value'\n};\n\nFieldValueListDemo.argTypes = {\n variant: {\n options: ['inline', 'stacked', 'value-comparison'],\n control: { type: 'select' }\n },\n inContentContainer: { control: { type: 'boolean' } },\n name: { control: { type: 'text' } },\n value: { control: { type: 'text' } }\n};\n"]}

package/lib/core/Form/Form.mocks.js CHANGED Viewed

@@ -83,7 +83,7 @@ export const FormContent = ({ cols, heading, description, showActions }) => {
     return (_jsx(Form, { actions: showActions ? actions : undefined, description: description, heading: heading, onSubmit: (e) => {
             e.preventDefault();
             push({ content: 'Form submitted!' });
-        }, style: { margin: 'auto', maxWidth: '37.5rem' }, children: _jsxs(Grid, { container: { gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }, children: [_jsx(Input, { name: 'name', label: 'Name', value: name.value, required: name.required, status: name.status, info: 'some help text here', onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }), autoComplete: 'off' }), _jsx(Input, { name: 'email', value: email.value, type: 'email', label: 'Email', required: email.required, status: email.status, info: 'some help text here', onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }), autoComplete: 'off' }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(CheckboxGroup, { name: 'visited', label: 'Places you have worked', children: ['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (_jsx(Checkbox, { label: office, onChange: (e) => setField({ ...e }) }, office))) }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(RadioButtonGroup, { name: 'meetings', label: 'Do you enjoy early morning meetings?', children: ['Yes', "No… no I don't"].map(option => (_jsx(RadioButton, { label: option, onChange: (e) => setField({ ...e }) }, option))) }) }), _jsxs(Select, { label: 'What would you like to eat?', info: 'FYI: options are limited', children: [_jsx(Option, { children: "choose meal\u2026" }), _jsx(Option, { children: "Pizza" }), _jsx(Option, { children: "Sandwich" }), _jsx(Option, { children: "Salad" })] }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(TextArea, { name: 'notes', required: notes.required, label: 'Meeting Notes', status: notes.status, info: notes.info || notes.help, onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }) }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(RichTextEditor, { label: 'Detailed meeting notes', info: 'The rich text editor can be used in forms, comments, and documents', toolbar: [
+        }, style: { margin: 'auto', maxWidth: '37.5rem' }, children: _jsxs(Grid, { container: { gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }, children: [_jsx(Input, { name: 'name', label: 'Name', value: name.value, required: name.required, status: name.status, info: 'some help text here', onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }), autoComplete: 'off' }), _jsx(Input, { name: 'email', value: email.value, type: 'email', label: 'Email', required: email.required, status: email.status, info: 'some help text here', onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }), autoComplete: 'off' }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(CheckboxGroup, { name: 'visited', label: 'Places you have worked', children: ['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (_jsx(Checkbox, { label: office, onChange: (e) => setField({ ...e }) }, office))) }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(RadioButtonGroup, { name: 'meetings', label: 'Do you enjoy early morning meetings?', children: ['Yes', "No… no I don't"].map(option => (_jsx(RadioButton, { label: option, onChange: (e) => setField({ ...e }) }, option))) }) }), _jsxs(Select, { label: 'What would you like to eat?', info: 'FYI: options are limited', children: [_jsx(Option, { children: "choose meal\u2026" }), _jsx(Option, { children: "Pizza" }), _jsx(Option, { children: "Sandwich" }), _jsx(Option, { children: "Salad" })] }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(TextArea, { name: 'notes', required: notes.required, label: 'Meeting notes', status: notes.status, info: notes.info || notes.help, onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }) }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(RichTextEditor, { label: 'Detailed meeting notes', info: 'The rich text editor can be used in forms, comments, and documents', toolbar: [
                             'inline-styling',
                             'headers',
                             'tables',
@@ -92,6 +92,6 @@ export const FormContent = ({ cols, heading, description, showActions }) => {
                             'lists',
                             'cut-copy-paste',
                             'indentation'
-                        ], onImageAdded: onImageAdded, ref: editorRef }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(FileInputDemo, {}) }), _jsx(ComboboxFilterableStory, { label: 'Select a user' })] }) }));
+                        ], onImageAdded: onImageAdded, ref: editorRef }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(FileInputDemo, { label: 'Meeting attachments' }) }), _jsx(ComboboxFilterableStory, { label: 'Select a user' })] }) }));
 };
 //# sourceMappingURL=Form.mocks.js.map