import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,r as a}from"./OnboardingTooltip-CFzGjB8g.js";import{n as o,t as s}from"./IconButton-DZfzVk_P.js";import{n as c,t as l}from"./TokyoUIFav-vlMA44YV.js";var u,d,f,p,m,h,g,_,v;t((()=>{u=e(n(),1),a(),o(),c(),d=r(),f={title:`Components/OnboardingTooltip`,component:i,parameters:{preventIframeFromScrollingParent:!0,docs:{story:{inline:!1,height:250},description:{component:`Are you looking for a step-by-step tour? Check out [OnboardingTour](/docs/components-onboardingtour--docs).

Also see [Composing Popovers](/docs/guides-composing-popovers--docs) for usage with other popovers.`}}},decorators:[e=>(0,d.jsx)(`div`,{style:{margin:`auto`,width:`max-content`},children:e()})]},p=e=>[!1,!1],m=e=>e=>{},h=()=>{let[e,t]=p(`new-feature`),n=m(`new-feature`);return(0,d.jsx)(i,{title:`New Feature Available!`,text:`We've added an exciting new feature to enhance your experience.`,disabled:t||e,onClose:()=>n(!0),children:(0,d.jsx)(s,{variant:`ghost`,svg:(0,d.jsx)(l,{}),assistiveText:`Favorite`})})},h.storyName=`OnboardingTooltip`,g={parameters:{chromatic:{disableSnapshot:!0},docs:{source:{type:`dynamic`}}},render:()=>(0,d.jsx)(i,{title:`New Feature Available!`,text:`We've added an exciting new feature to enhance your experience.`,children:(0,d.jsx)((0,u.forwardRef)(function(e,t){return(0,d.jsx)(`button`,{...e,ref:t})}),{children:`Custom child`})})},_={tags:[`!autodocs`],args:{title:`New Feature Available!`,text:`We've added an exciting new feature to enhance your experience.`,disabled:!1,onClose:()=>{},children:(0,d.jsx)(s,{variant:`ghost`,svg:(0,d.jsx)(l,{}),assistiveText:`Favorite`})},argTypes:{title:{control:`text`},text:{control:`text`},actionLabel:{control:`text`},actionOnClick:{control:!1},actionHref:{control:`text`},disabled:{control:`boolean`},dataset:{control:`object`},onClose:{control:!1},children:{control:!1}},parameters:{docs:{story:{height:450}},chromatic:{disableSnapshot:!0}},decorators:[e=>(0,d.jsx)(`div`,{style:{minHeight:`100vh`,display:`flex`},children:(0,d.jsx)(`div`,{style:{margin:`auto`,width:`max-content`},children:e()})})]},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`() => {
  const [wasTooltipSeen, loading] = useIsFeatureActive('new-feature');
  const setTooltipSeen = useToggleFeature('new-feature');
  return <OnboardingTooltip title="New Feature Available!" text="We've added an exciting new feature to enhance your experience." disabled={loading || wasTooltipSeen} onClose={() => setTooltipSeen(true)}>
            <IconButton variant="ghost" svg={<TokyoUIFav />} assistiveText="Favorite" />
        </OnboardingTooltip>;
}`,...h.parameters?.docs?.source},description:{story:"Basic usage of the onboarding tooltip.\n\nUse `disabled` and `onClose` (or `actionOnClick`) props to control tooltip's visibility (We recommend using FeatureToggles for this)",...h.parameters?.docs?.description}}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
  parameters: {
    chromatic: {
      disableSnapshot: true
    },
    docs: {
      source: {
        type: 'dynamic'
      }
    }
  },
  render: () => {
    const CustomButton = forwardRef<HTMLButtonElement, {
      children: ReactNode;
    }>(function CustomButton(props, ref) {
      return <button {...props} ref={ref} />;
    });
    return <OnboardingTooltip title="New Feature Available!" text="We've added an exciting new feature to enhance your experience.">
                <CustomButton>Custom child</CustomButton>
            </OnboardingTooltip>;
  }
}`,...g.parameters?.docs?.source},description:{story:`The onboarding tooltip works out of the box with html elements and DS components as children.

If you need to wrap a custom component with the onboarding tooltip, component should forward
the ref and spread props to the underlying DOM node:

\`\`\`tsx
const CustomButton = forwardRef<HTMLButtonElement, { children: ReactNode }>(
    (props, ref) => {
        return <button {...props} ref={ref} />;
    },
);

<OnboardingTooltip
    title="New Feature Available!"
    text="We've added an exciting new feature to enhance your experience."
>
    <CustomButton>Custom child</CustomButton>
</OnboardingTooltip>
\`\`\``,...g.parameters?.docs?.description}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
  tags: ['!autodocs'],
  args: {
    title: 'New Feature Available!',
    text: "We've added an exciting new feature to enhance your experience.",
    disabled: false,
    onClose: () => {},
    children: <IconButton variant="ghost" svg={<TokyoUIFav />} assistiveText="Favorite" />
  },
  argTypes: {
    title: {
      control: 'text'
    },
    text: {
      control: 'text'
    },
    actionLabel: {
      control: 'text'
    },
    actionOnClick: {
      control: false
    },
    actionHref: {
      control: 'text'
    },
    disabled: {
      control: 'boolean'
    },
    dataset: {
      control: 'object'
    },
    onClose: {
      control: false
    },
    children: {
      control: false
    }
  },
  parameters: {
    docs: {
      story: {
        height: 450
      }
    },
    chromatic: {
      disableSnapshot: true
    }
  },
  decorators: [story => <div style={{
    minHeight: '100vh',
    display: 'flex'
  }}>
                <div style={{
      margin: 'auto',
      width: 'max-content'
    }}>
                    {story()}
                </div>
            </div>]
}`,..._.parameters?.docs?.source}}},v=[`Default`,`CustomChildComponent`,`Playground`]}))();export{g as CustomChildComponent,h as Default,_ as Playground,v as __namedExportsOrder,f as default};