{"version":3,"file":"Progress.stories.jsx","sourceRoot":"","sources":["../../../src/core/Progress/Progress.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG9E,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEpD,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;IACnB,cAAc,EAAE,CAAC,sBAAsB,CAAC;CACjC,CAAC;AASV,MAAM,CAAC,MAAM,YAAY,GAA+B,CAAC,IAAuB,EAAE,EAAE;IAClF,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,KAAK,MAAM,CAAC;IAC1C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACrD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;IACpD,MAAM,QAAQ,GAAG,CAAC,SAAS,EAAE,eAAe,EAAE,yBAAyB,EAAE,mBAAmB,CAAC,CAAC;IAC9F,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACpD,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS,EAAE,CAAC;YACjC,OAAO,QAAQ,CAAC,YAAY,CAAC,CAAC;QAChC,CAAC;QAED,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC;IAEjD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,CAAC,SAAS,KAAK,OAAO,EAAE,CAAC;YAC/B,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAEjC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS,EAAE,CAAC;YACjC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC3B,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;IAEnC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM;YAAE,OAAO;QAEtC,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YAC9B,QAAQ,IAAI,CAAC,SAAS,EAAE,CAAC;gBACvB,KAAK,SAAS,CAAC,CAAC,CAAC;oBACf,IAAI,YAAY,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC;wBAAE,eAAe,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;;wBACrE,eAAe,CAAC,CAAC,CAAC,CAAC;oBACxB,MAAM;gBACR,CAAC;gBACD,KAAK,OAAO,CAAC,CAAC,CAAC;oBACb,IAAI,KAAK,GAAG,GAAG;wBAAE,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC;;wBAChD,QAAQ,CAAC,CAAC,CAAC,CAAC;oBACjB,MAAM;gBACR,CAAC;gBACD,KAAK,SAAS,CAAC,CAAC,CAAC;oBACf,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC;oBACrB,MAAM;gBACR,CAAC;gBACD;oBACE,MAAM;YACV,CAAC;QACH,CAAC,EAAE,gBAAgB,CAAC,CAAC;QAErB,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,YAAY,CAAC,OAAO,CAAC,CAAC;QACxB,CAAC;QAED,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IAEvD,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;MAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAErC;;MAAA,CAAC,cAAc,CACb;QAAA,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,IAAI,CACpD,CAAC,IAAI,CACH;;;;;;;UAMF,EAAE,IAAI,CAAC,CACR,CACD;QAAA,CAAC,IAAI,CAAC,SAAS,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,CAC3D;QAAA,CAAC,QAAQ,CACP,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAC1E,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,cAAc,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CACpC,UAAU,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,EAExE;MAAA,EAAE,cAAc,CAClB;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,OAAO,EAAE,MAAM;IACf,SAAS,EAAE,OAAO;IAClB,OAAO,EAAE,EAAE;IACX,WAAW,EAAE,KAAK;IAClB,KAAK,EAAE,EAAE;IACT,cAAc,EAAE,KAAK;IACrB,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,KAAK;IACf,SAAS,EAAE,MAAM;CAClB,CAAC;AAEF,YAAY,CAAC,QAAQ,GAAG;IACtB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC9E,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC3F,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACzC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC,EAAE;CAC7F,CAAC;AAMF,MAAM,CAAC,MAAM,oBAAoB,GAAuC,CACtE,IAA+B,EAC/B,EAAE;IACF,OAAO,CACL,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC;YACL,UAAU,EAAE;gBACV,QAAQ,EAAE;oBACR,gBAAgB,EAAE,IAAI,CAAC,aAAa;iBACrC;aACF;SACF,CAAC,CAEF;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,cAAc,CAAC,CAC/E;QAAA,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,EAC9E;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,oBAAoB,CAAC,IAAI,GAAG;IAC1B,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,SAAS;CACzB,CAAC;AAEF,oBAAoB,CAAC,QAAQ,GAAG;IAC9B,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC9E,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;CAC9C,CAAC","sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { ThemeOverride, Flex, Progress, Text } from '@pega/cosmos-react-core';\nimport type { ProgressProps } from '@pega/cosmos-react-core';\n\nimport { StyledDemoWrap } from './Progress.styles';\nimport { loadingTimeoutMS } from './Progress.mocks';\n\nexport default {\n  title: 'Core/Progress',\n  component: Progress,\n  excludeStories: ['ConfigurableProgress']\n} as Meta;\n\ninterface ProgressDemoProps extends ProgressProps {\n  announce?: boolean;\n  determinate?: boolean;\n  focusOnVisible?: boolean;\n  cycleProp?: 'none' | 'value' | 'message' | 'visible';\n}\n\nexport const ProgressDemo: StoryFn<ProgressDemoProps> = (args: ProgressDemoProps) => {\n  const cycling = args.cycleProp !== 'none';\n  const [visible, setVisible] = useState(args.visible);\n  const [value, setValue] = useState(args.value ?? 0);\n  const messages = ['Loading', 'Getting ready', 'Working on your request', 'Resolving content'];\n  const [messageIndex, setMessageIndex] = useState(0);\n  const message = useMemo(() => {\n    if (args.cycleProp === 'message') {\n      return messages[messageIndex];\n    }\n\n    return args.message;\n  }, [args.cycleProp, args.message, messageIndex]);\n\n  useEffect(() => {\n    if (args.cycleProp !== 'value') {\n      setValue(args.value ?? 0);\n    }\n  }, [args.cycleProp, args.value]);\n\n  useEffect(() => {\n    if (args.cycleProp !== 'visible') {\n      setVisible(args.visible);\n    }\n  }, [args.cycleProp, args.visible]);\n\n  useEffect(() => {\n    if (args.cycleProp === 'none') return;\n\n    const timeout = setTimeout(() => {\n      switch (args.cycleProp) {\n        case 'message': {\n          if (messageIndex < messages.length - 1) setMessageIndex(messageIndex + 1);\n          else setMessageIndex(0);\n          break;\n        }\n        case 'value': {\n          if (value < 100) setValue(Math.min(value + 10, 100));\n          else setValue(0);\n          break;\n        }\n        case 'visible': {\n          setVisible(!visible);\n          break;\n        }\n        default:\n          break;\n      }\n    }, loadingTimeoutMS);\n\n    if (!cycling) {\n      clearTimeout(timeout);\n    }\n\n    return () => clearTimeout(timeout);\n  }, [args.cycleProp, message, visible, value, cycling]);\n\n  return (\n    <Flex container={{ direction: 'column', gap: 1 }}>\n      <Text variant='h1'>Demo Content</Text>\n\n      <StyledDemoWrap>\n        {['block', 'local'].includes(args.placement || '') && (\n          <Text>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\n            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure\n            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt\n            mollit anim id est laborum.\n          </Text>\n        )}\n        {args.placement === 'inline' && <Text>Progress demo </Text>}\n        <Progress\n          variant={args.variant}\n          placement={args.placement}\n          message={message}\n          value={args.determinate || args.cycleProp === 'value' ? value : undefined}\n          visible={visible}\n          focusOnVisible={args.focusOnVisible}\n          liveConfig={args.announce ? { contextualLabel: 'Demo' } : undefined}\n        />\n      </StyledDemoWrap>\n    </Flex>\n  );\n};\n\nProgressDemo.args = {\n  variant: 'ring',\n  placement: 'local',\n  message: '',\n  determinate: false,\n  value: 67,\n  focusOnVisible: false,\n  visible: true,\n  announce: false,\n  cycleProp: 'none'\n};\n\nProgressDemo.argTypes = {\n  variant: { options: ['ring', 'bar', 'ellipsis'], control: { type: 'select' } },\n  placement: { options: ['local', 'global', 'block', 'inline'], control: { type: 'select' } },\n  message: { control: { type: 'text' } },\n  focusOnVisible: { control: { type: 'boolean' } },\n  determinate: { control: { type: 'boolean' } },\n  value: { control: { type: 'number' } },\n  visible: { control: { type: 'boolean' } },\n  announce: { control: { type: 'boolean' } },\n  cycleProp: { control: { type: 'select' }, options: ['none', 'value', 'message', 'visible'] }\n};\n\ninterface ConfigurableProgressProps extends ProgressProps {\n  progressColor?: string;\n}\n\nexport const ConfigurableProgress: StoryFn<ConfigurableProgressProps> = (\n  args: ConfigurableProgressProps\n) => {\n  return (\n    <ThemeOverride\n      theme={{\n        components: {\n          progress: {\n            'progress-color': args.progressColor\n          }\n        }\n      }}\n    >\n      <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>\n        <Progress variant={args.variant} placement='local' message='Loading' visible />\n      </Flex>\n    </ThemeOverride>\n  );\n};\n\nConfigurableProgress.args = {\n  variant: 'ring',\n  progressColor: '#076bc9'\n};\n\nConfigurableProgress.argTypes = {\n  variant: { options: ['ring', 'bar', 'ellipsis'], control: { type: 'select' } },\n  progressColor: { control: { type: 'color' } }\n};\n"]}