@wix/design-system/dist/docs/components/FloatingHelperExamples.md

@wix/design-system

## Feature Examples


### Full Example
- description: <p>A full example with an action button and an image.</p>
- example: 
```jsx 
() => {
  return (
    <Box height="150px" verticalAlign="middle" paddingRight="10px">
      <FloatingHelper
            target={<Text>I am a FloatingHelper target</Text>}
            content={
                <FloatingHelper.Content
                  title="Don’t forget to setup payments"
                  body="In order to sell your music you need to choose a payment method."
                  actionText="Ok, Take Me There"
                  onActionClick={() => null}
                  image={<Icons.Image width="102" height="102" viewBox="4 4 18 18" />}
                />
              }
             placement="right"
       />
    </Box>
  );
};
```

### Programmatic Open Example (Uncontrolled mode)
- description: <p>In `Uncontrolled` mode, the default behavior is that the popover content is opened when mouse-enter is triggered on the target and closes when the close button is clicked. This option is not recommended but is still supported for backward compatibility.</p>
- example: 
```jsx 
() => {
  const helperRef = React.useRef();
  
  return (
    <Box height="100px" verticalAlign="middle">
      <Button onClick={() => helperRef.current.open()}>Click to open</Button>
      <FloatingHelper
        ref={helperRef}
        initiallyOpened={false}
        target={<span />}
        content={
          <FloatingHelper.Content
            title="Don’t forget to setup payments"
            body="In order to sell your music you need to choose a payment method."
          />
        }
        placement="right"
      />
    </Box>
  );
};
```

### Controlled Example
- description: 
- example: 
```jsx 
() =>  {

  const [ isHelperOpen, setOpenHelper ] = React.useState(true);

  return (
      <Box height="100px" verticalAlign="middle" >
        <Button onClick={() => setOpenHelper(!isHelperOpen) }>
            Click to {isHelperOpen? 'Close' : 'Open'}
        </Button>
        <FloatingHelper
          opened={isHelperOpen}
          target={<span/>}
          content={
            <FloatingHelper.Content
              title="Don’t forget to setup payments"
              body="In order to sell your music you need to choose a payment method."
            />
          }
          placement="right"
        />
      </Box>
    );
}
```

### Skins
- description: <p>`<FloatingHelper/>` has two skins: `dark` (default) and `light`.</p>
- example: 
```jsx 
() => {
  return (
    <Layout>
          <Cell>
              <Box height="150px" verticalAlign="middle">
                <FloatingHelper
                    target={<Text>I am a FloatingHelper target</Text>}
                    content={
                      <FloatingHelper.Content
                        title="Don’t forget to setup payments"
                        body="In order to sell your music you need to choose a payment method."
                      />
                    }
                    placement="right"
                  />
                </Box>
           </Cell>
           <Cell>
               <Box height="150px" verticalAlign="middle">
                  <FloatingHelper
                    skin="light"
                    target={<Text>I am a FloatingHelper target</Text>}
                    content={
                      <FloatingHelper.Content
                        title="Don’t forget to setup payments"
                        body="In order to sell your music you need to choose a payment method."
                      />
                    }
                    placement="right"
                  />
                </Box>
           </Cell>
      </Layout>
  );
};
```