{"version":3,"file":"Tooltip.stories.jsx","sourceRoot":"","sources":["../../../src/core/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { Button, ThemeOverride, Flex, Tooltip, useElement } from '@pega/cosmos-react-core';\n\nimport { ResizeableEl } from './Tooltip.styles';\n\nexport default {\n  title: 'Core/Tooltip',\n  component: Tooltip,\n  excludeStories: ['ConfigurableTooltip']\n} as Meta;\n\nexport const TooltipDemo: StoryFn = () => {\n  const [el, setEl] = useElement();\n\n  return (\n    <>\n      <Button ref={setEl}>Hover me</Button>\n\n      {el && (\n        <Tooltip target={el}>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus scelerisque\n          viverra. Fusce consequat, justo at laoreet lobortis, mauris ipsum aliquet arcu, non\n          convallis nisl elit id erat. Pellentesque posuere sagittis velit a molestie.\n        </Tooltip>\n      )}\n    </>\n  );\n};\n\ninterface ConfigurableTooltipProps {\n  foregroundColor?: string;\n  backgroundColor?: string;\n}\n\nexport const ConfigurableTooltip: StoryFn<ConfigurableTooltipProps> = (\n  args: ConfigurableTooltipProps\n) => {\n  const [el, setEl] = useElement();\n\n  return (\n    <ThemeOverride\n      theme={{\n        components: {\n          tooltip: {\n            'foreground-color': args.foregroundColor,\n            'background-color': args.backgroundColor\n          }\n        }\n      }}\n    >\n      <Button ref={setEl}>Hover me</Button>\n\n      {el && (\n        <Tooltip target={el}>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus scelerisque\n          viverra. Fusce consequat, justo at laoreet lobortis, mauris ipsum aliquet arcu, non\n          convallis nisl elit id erat. Pellentesque posuere sagittis velit a molestie.\n        </Tooltip>\n      )}\n    </ThemeOverride>\n  );\n};\n\nConfigurableTooltip.args = {\n  foregroundColor: '#f5f5f5',\n  backgroundColor: '#3f3f3f'\n};\n\nConfigurableTooltip.argTypes = {\n  foregroundColor: { control: { type: 'color' } },\n  backgroundColor: { control: { type: 'color' } }\n};\n\nexport const SmartTooltip: StoryFn = () => {\n  const [el1, setEl1] = useElement();\n  const [el2, setEl2] = useElement();\n  const textContent1 = 'Resize me and hover: Lorem ipsum dolor sit amet';\n  const textContent2 = 'Hover or focus me: Lorem ipsum dolor sit amet';\n\n  return (\n    <Flex container={{ direction: 'column', gap: 4 }}>\n      <ResizeableEl ref={setEl1}>{textContent1}</ResizeableEl>\n      {el1 && (\n        <Tooltip target={el1} smart showDelay='none' hideDelay='none'>\n          {textContent1}\n        </Tooltip>\n      )}\n\n      <Button as={ResizeableEl} variant='link' ref={setEl2}>\n        {textContent2}\n      </Button>\n      {el2 && (\n        <Tooltip target={el2} smart showDelay='none' hideDelay='none'>\n          {textContent2}\n        </Tooltip>\n      )}\n    </Flex>\n  );\n};\n"]}