{"version":3,"file":"Configuration.stories.jsx","sourceRoot":"","sources":["../../../src/core/Configuration/Configuration.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EACL,MAAM,EACN,aAAa,EACb,cAAc,EACd,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,SAAS,EACT,WAAW,EACX,IAAI,EACL,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,aAAa;IACxB,cAAc,EAAE;QACd,uBAAuB;QACvB,4BAA4B;QAC5B,oBAAoB;QACpB,0BAA0B;KAC3B;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,UAAU,GAA6C,CAAC,IAEpE,EAAE,EAAE;IACH,MAAM,MAAM,GAAyC;QACnD,OAAO,EAAE,EAAE;QACX,MAAM,EAAE;YACN,IAAI,EAAE;gBACJ,OAAO,EAAE;oBACP,WAAW,EAAE,SAAS;iBACvB;aACF;YACD,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,eAAe,EAAE,CAAC;iBACnB;gBACD,cAAc,EAAE;oBACd,kBAAkB,EAAE,WAAW;oBAC/B,cAAc,EAAE,QAAQ;iBACzB;gBACD,KAAK,EAAE;oBACL,MAAM,EAAE,MAAM;iBACf;aACF;SACF;KACF,CAAC;IAEF,OAAO,CACL,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CACvC;MAAA,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,EAC3C;IAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,UAAU,CAAC,QAAQ,GAAG;IACpB,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACvE,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAY,GAAG,EAAE;IAC5C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACrD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEzD,OAAO,CACL,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CACxD;MAAA,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAC7B;MAAA,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,SAAS,CAC5C;;MACF,EAAE,MAAM,CACR;MAAA,CAAC,cAAc,CACb;QAAA,CAAC,MAAM,CAAC,uBAAuB,EAAE,MAAM,CACvC;QAAA,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC;YACL,IAAI,EAAE;gBACJ,OAAO,EAAE;oBACP,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY;iBAChD;aACF;SACF,CAAC,CAEF;UAAA,CAAC,MAAM,CACL,KAAK,CAAC,CAAC,YAAY,CAAC,CACpB,OAAO,CAAC,SAAS,CACjB,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAE3C;YAAA,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,EAC9D;UAAA,EAAE,MAAM,CACR;UAAA,CAAC,cAAc,CACb;YAAA,CAAC,MAAM,CAAC,6BAA6B,EAAE,MAAM,CAC7C;YAAA,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC;YACL,UAAU,EAAE;gBACV,MAAM,EAAE,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE;aACtD;SACF,CAAC,CAEF;cAAA,CAAC,MAAM,CACL,KAAK,CAAC,CAAC,YAAY,CAAC,CACpB,OAAO,CAAC,SAAS,CACjB,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAE7C;gBAAA,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,EAClE;cAAA,EAAE,MAAM,CACR;cAAA,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,YAAY,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,WAAW,CACxE;;cACF,EAAE,MAAM,CACR;cAAA,CAAC,cAAc,CACb;gBAAA,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAC/B;gBAAA,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC;YACL,UAAU,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,EAAE;SAClD,CAAC,CAEF;kBAAA,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,SAAS,CAC5C;;kBACF,EAAE,MAAM,CACR;kBAAA,CAAC,cAAc,CACb;oBAAA,CAAC,MAAM,CAAC,iBAAiB,EAAE,MAAM,CACjC;oBAAA,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAC3E;sBAAA,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,SAAS,CAC5C;;sBACF,EAAE,MAAM,CACV;oBAAA,EAAE,aAAa,CACjB;kBAAA,EAAE,cAAc,CAClB;gBAAA,EAAE,aAAa,CACjB;cAAA,EAAE,cAAc,CAClB;YAAA,EAAE,aAAa,CACjB;UAAA,EAAE,cAAc,CAClB;QAAA,EAAE,aAAa,CACjB;MAAA,EAAE,cAAc,CAClB;IAAA,EAAE,cAAc,CAAC,CAClB,CAAC;AACJ,CAAC,CAAC;AAMF,MAAM,CAAC,MAAM,qBAAqB,GAAwC,CACxE,IAAgC,EAChC,EAAE;IACF,OAAO,CACL,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC;YACL,IAAI,EAAE;gBACJ,OAAO,EAAE;oBACP,WAAW,EAAE,IAAI,CAAC,WAAW;iBAC9B;aACF;SACF,CAAC,CAEF;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAC5C;QAAA,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,EAAE,MAAM,CACzC;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CAC7C;UAAA,CAAC,QAAQ,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,iBAAiB,CAAC,cAAc,EAChE;QAAA,EAAE,IAAI,CACN;QAAA,CAAC,WAAW,CAAC,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,EACpE;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,qBAAqB,CAAC,IAAI,GAAG;IAC3B,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,qBAAqB,CAAC,QAAQ,GAAG;IAC/B,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;CAC5C,CAAC;AAOF,MAAM,CAAC,MAAM,0BAA0B,GAA6C,CAClF,IAAqC,EACrC,EAAE;IACF,OAAO,CACL,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC;YACL,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,KAAK,EAAE,IAAI,CAAC,WAAW;iBACxB;gBACD,aAAa,EAAE;oBACb,UAAU,EAAE;wBACV,kBAAkB,EAAE,IAAI,CAAC,sBAAsB;qBAChD;iBACF;aACF;SACF,CAAC,CAEF;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAC5C;QAAA,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,EAAE,MAAM,CACzC;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CAC7C;UAAA,CAAC,QAAQ,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,iBAAiB,CAAC,cAAc,EAChE;QAAA,EAAE,IAAI,CACN;QAAA,CAAC,WAAW,CAAC,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,EACpE;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,0BAA0B,CAAC,IAAI,GAAG;IAChC,WAAW,EAAE,SAAS;IACtB,sBAAsB,EAAE,SAAS;CAClC,CAAC;AAEF,0BAA0B,CAAC,QAAQ,GAAG;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC3C,sBAAsB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;CACvD,CAAC;AAMF,MAAM,CAAC,MAAM,kBAAkB,GAAqC,CAClE,IAA6B,EAC7B,EAAE;IACF,OAAO,CACL,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACjC;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;QAAA,CAAC,SAAS,CAAC,KAAK,CAAC,gCAAgC,CAAC,KAAK,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,EACtE;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,MAAM,EAAE,OAAO;CAChB,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACvF,CAAC;AAMF,MAAM,CAAC,MAAM,wBAAwB,GAA2C,CAC9E,IAAmC,EACnC,EAAE;IACF,MAAM,kBAAkB,GAAG;QACzB,0BAA0B,EAAE,IAAI,CAAC,sBAAsB;KACxD,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC1B;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CACvC;QAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAChC;QAAA,CAAC,WAAW,CAAC,AAAD,EACd;MAAA,EAAE,IAAI,CAEN;;MAAA,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,kBAAkB,CAAC,CAC9C;QAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CACvC;UAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CACnC;UAAA,CAAC,WAAW,CAAC,AAAD,EACd;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,aAAa,CACjB;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,wBAAwB,CAAC,IAAI,GAAG;IAC9B,sBAAsB,EAAE,WAAW;CACpC,CAAC;AAEF,wBAAwB,CAAC,QAAQ,GAAG;IAClC,sBAAsB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACtD,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n  Button,\n  Configuration,\n  resetToInitial,\n  Flex,\n  Checkbox,\n  RadioButton,\n  DateInput,\n  SearchInput,\n  Text\n} from '@pega/cosmos-react-core';\nimport type { DefaultSettableTheme } from '@pega/cosmos-react-core';\n\nimport { FormContent } from '../Form/Form.mocks';\n\nimport { buttonStyles, StyledFieldset } from './Configuration.styles';\nimport { FlipFlop } from './Configuration.mocks';\n\nexport default {\n  title: 'Core/Configuration',\n  component: Configuration,\n  excludeStories: [\n    'ConfigurableBaseTheme',\n    'ConfigurableComponentTheme',\n    'ConfigurableLocale',\n    'ConfigurableTranslations'\n  ]\n} as Meta;\n\nexport const ThemedForm: StoryFn<{ theme: 'default' | 'theme1' }> = (args: {\n  theme: 'default' | 'theme1';\n}) => {\n  const themes: Record<string, DefaultSettableTheme> = {\n    default: {},\n    theme1: {\n      base: {\n        palette: {\n          interactive: '#AC75F0'\n        }\n      },\n      components: {\n        button: {\n          'border-radius': 1\n        },\n        'form-control': {\n          'background-color': '#80008033',\n          'border-color': 'purple'\n        },\n        input: {\n          height: '50px'\n        }\n      }\n    }\n  };\n\n  return (\n    <Configuration theme={themes[args.theme]}>\n      <FormContent cols={1} showActions={false} />\n    </Configuration>\n  );\n};\n\nThemedForm.args = {\n  theme: 'default'\n};\n\nThemedForm.argTypes = {\n  theme: { options: ['default', 'theme1'], control: { type: 'select' } }\n};\n\nexport const ThemingHierarchy: StoryFn = () => {\n  const [redOrOrange, setRedOrOrange] = useState(true);\n  const [greenOrPurple, setGreenOrPurple] = useState(true);\n\n  return (\n    <StyledFieldset style={{ margin: 0, textAlign: 'center' }}>\n      <legend>Initial Theme</legend>\n      <Button style={buttonStyles} variant='primary'>\n        Base interactive\n      </Button>\n      <StyledFieldset>\n        <legend>Override Interactive to</legend>\n        <Configuration\n          theme={{\n            base: {\n              palette: {\n                interactive: redOrOrange ? 'red' : 'darkorange'\n              }\n            }\n          }}\n        >\n          <Button\n            style={buttonStyles}\n            variant='primary'\n            onClick={() => setRedOrOrange(val => !val)}\n          >\n            <FlipFlop flipFlop={redOrOrange} first='Red' second='Orange' />\n          </Button>\n          <StyledFieldset>\n            <legend>Override Button Primary BG to</legend>\n            <Configuration\n              theme={{\n                components: {\n                  button: { color: greenOrPurple ? 'green' : 'purple' }\n                }\n              }}\n            >\n              <Button\n                style={buttonStyles}\n                variant='primary'\n                onClick={() => setGreenOrPurple(val => !val)}\n              >\n                <FlipFlop flipFlop={greenOrPurple} first='Green' second='Purple' />\n              </Button>\n              <Button style={{ ...buttonStyles, marginTop: '1rem' }} variant='secondary'>\n                Secondary still inherits interactive\n              </Button>\n              <StyledFieldset>\n                <legend>Reset Button BG</legend>\n                <Configuration\n                  theme={{\n                    components: { button: { color: resetToInitial } }\n                  }}\n                >\n                  <Button style={buttonStyles} variant='primary'>\n                    Inherited from interactive\n                  </Button>\n                  <StyledFieldset>\n                    <legend>Reset Interactive</legend>\n                    <Configuration theme={{ base: { palette: { interactive: resetToInitial } } }}>\n                      <Button style={buttonStyles} variant='primary'>\n                        Inherited from base\n                      </Button>\n                    </Configuration>\n                  </StyledFieldset>\n                </Configuration>\n              </StyledFieldset>\n            </Configuration>\n          </StyledFieldset>\n        </Configuration>\n      </StyledFieldset>\n    </StyledFieldset>\n  );\n};\n\ninterface ConfigurableBaseThemeProps {\n  interactive?: string;\n}\n\nexport const ConfigurableBaseTheme: StoryFn<ConfigurableBaseThemeProps> = (\n  args: ConfigurableBaseThemeProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        base: {\n          palette: {\n            interactive: args.interactive\n          }\n        }\n      }}\n    >\n      <Flex container={{ gap: 2, justify: 'start' }}>\n        <Button variant='primary'>Primary</Button>\n        <Flex item={{ shrink: 1, alignSelf: 'center' }}>\n          <Checkbox id='checkbox' label='Checkbox Option' defaultChecked />\n        </Flex>\n        <RadioButton id='radio-button' label='Radio Option' defaultChecked />\n      </Flex>\n    </Configuration>\n  );\n};\n\nConfigurableBaseTheme.args = {\n  interactive: '#681fc3'\n};\n\nConfigurableBaseTheme.argTypes = {\n  interactive: { control: { type: 'color' } }\n};\n\ninterface ConfigurableComponentThemeProps {\n  buttonColor?: string;\n  checkedBackgroundColor?: string;\n}\n\nexport const ConfigurableComponentTheme: StoryFn<ConfigurableComponentThemeProps> = (\n  args: ConfigurableComponentThemeProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          button: {\n            color: args.buttonColor\n          },\n          'radio-check': {\n            ':checked': {\n              'background-color': args.checkedBackgroundColor\n            }\n          }\n        }\n      }}\n    >\n      <Flex container={{ gap: 2, justify: 'start' }}>\n        <Button variant='primary'>Primary</Button>\n        <Flex item={{ shrink: 1, alignSelf: 'center' }}>\n          <Checkbox id='checkbox' label='Checkbox Option' defaultChecked />\n        </Flex>\n        <RadioButton id='radio-button' label='Radio Option' defaultChecked />\n      </Flex>\n    </Configuration>\n  );\n};\n\nConfigurableComponentTheme.args = {\n  buttonColor: '#681fc3',\n  checkedBackgroundColor: '#20aa50'\n};\n\nConfigurableComponentTheme.argTypes = {\n  buttonColor: { control: { type: 'color' } },\n  checkedBackgroundColor: { control: { type: 'color' } }\n};\n\ninterface ConfigurableLocaleProps {\n  locale?: string;\n}\n\nexport const ConfigurableLocale: StoryFn<ConfigurableLocaleProps> = (\n  args: ConfigurableLocaleProps\n) => {\n  return (\n    <Configuration locale={args.locale}>\n      <Flex container={{ direction: 'column', gap: 2 }}>\n        <DateInput label='Date Input with locale support' value={new Date()} />\n      </Flex>\n    </Configuration>\n  );\n};\n\nConfigurableLocale.args = {\n  locale: 'en-US'\n};\n\nConfigurableLocale.argTypes = {\n  locale: { options: ['en-US', 'pl', 'fr', 'hu', 'de-DE'], control: { type: 'select' } }\n};\n\ninterface ConfigurableTranslationsProps {\n  placeholderTranslation?: string;\n}\n\nexport const ConfigurableTranslations: StoryFn<ConfigurableTranslationsProps> = (\n  args: ConfigurableTranslationsProps\n) => {\n  const spanishTranslation = {\n    search_placeholder_default: args.placeholderTranslation\n  };\n\n  return (\n    <Flex container={{ gap: 4 }}>\n      <Flex container={{ direction: 'column' }}>\n        <Text variant='h4'>Default</Text>\n        <SearchInput />\n      </Flex>\n\n      <Configuration translations={spanishTranslation}>\n        <Flex container={{ direction: 'column' }}>\n          <Text variant='h4'>Translated</Text>\n          <SearchInput />\n        </Flex>\n      </Configuration>\n    </Flex>\n  );\n};\n\nConfigurableTranslations.args = {\n  placeholderTranslation: 'Buscar...'\n};\n\nConfigurableTranslations.argTypes = {\n  placeholderTranslation: { control: { type: 'text' } }\n};\n"]}