wix-style-react/src/InfoIcon/docs/InfoIcon.demo.js

wix-style-react

import React from 'react';
import { Input, Popover } from '../..';
import Box from '../../Box';
import { Layout, Cell } from '../../Layout';
import Text from '../../Text';
import InfoCircleSmall from 'wix-ui-icons-common/InfoCircleSmall';

export default () => {
  const [shown, setShown] = React.useState(true);

  const open = () => {
    setShown(true);
  };

  const close = () => {
    setShown(false);
  };

  return (
    <Layout>
      <Cell span={4}>
        <Box direction="vertical" gap="6px">
          <Box>
            <Text secondary size="small">
              Which category best matches your business?
            </Text>
            <Popover
              showArrow
              shown={shown}
              onMouseEnter={() => open()}
              onMouseLeave={() => close()}
              appendTo="window"
              placement="top"
              theme="dark"
            >
              <Popover.Element>
                <Box color="B10">
                  <InfoCircleSmall />
                </Box>
              </Popover.Element>
              <Popover.Content>
                <Box padding="12px 24px" direction="vertical" maxWidth="200px">
                  <Text size="small" light>
                    Your business type will help us suggest features and tools
                    to fit your needs.
                  </Text>
                </Box>
              </Popover.Content>
            </Popover>
          </Box>
          <Box width="100%" direction="vertical">
            <Input defaultValue="Video" />
          </Box>
        </Box>
      </Cell>
    </Layout>
  );
};