ContextualHelp

A contextual help component delivers additional information about its neighboring component.

Install	`yarn add @diallink-corp/convergo-react-button`
Version	4.1.2
Usage	import {ContextualHelp} from '@diallink-corp/convergo-react-button'

Info variant

The contextual help component features an info variant to explain user the adjacent component.

<ContextualHelp variant="info">
  <Header>
    <Heading>Permission required</Heading>
  </Header>
  <Content>
    <Paragraph>
      The administrator of your tenant needs to assign you additional
      permissions.
    </Paragraph>
    <Paragraph>
      The administrator of your tenant needs to assign you additional
      permissions.
    </Paragraph>
  </Content>
</ContextualHelp>

<ContextualHelp variant="info">
  <Header>
    <Heading>Permission required</Heading>
  </Header>
  <Content>
    <Paragraph>
      The administrator of your tenant needs to assign you
      additional permissions.
    </Paragraph>
    <Paragraph>
      The administrator of your tenant needs to assign you
      additional permissions.
    </Paragraph>
  </Content>
</ContextualHelp>

<ContextualHelp variant="info">
  <Header>
    <Heading>
      Permission
      required
    </Heading>
  </Header>
  <Content>
    <Paragraph>
      The administrator
      of your tenant
      needs to assign
      you additional
      permissions.
    </Paragraph>
    <Paragraph>
      The administrator
      of your tenant
      needs to assign
      you additional
      permissions.
    </Paragraph>
  </Content>
</ContextualHelp>

Help variant

The contextual help component features an help variant for informational help components.

<ContextualHelp variant="help">
  <Header>
    <Heading>Wrap-up time</Heading>
  </Header>
  <Content>
    <Paragraph>
      Specifies the time an agent needs after a call is wrapped-up, before
      they can take the next call.
    </Paragraph>
  </Content>
  <Footer>
    <Linkable>
      <a
        href="https://docs.diallink.com/talk/getting-started-with-diallink-talk"
        target="_blank"
      >
        Link
      </a>
    </Linkable>
  </Footer>
</ContextualHelp>

<ContextualHelp variant="help">
  <Header>
    <Heading>Wrap-up time</Heading>
  </Header>
  <Content>
    <Paragraph>
      Specifies the time an agent needs after a call is
      wrapped-up, before they can take the next call.
    </Paragraph>
  </Content>
  <Footer>
    <Linkable>
      <a
        href="https://docs.diallink.com/talk/getting-started-with-diallink-talk"
        target="_blank"
      >
        Link
      </a>
    </Linkable>
  </Footer>
</ContextualHelp>

<ContextualHelp variant="help">
  <Header>
    <Heading>
      Wrap-up time
    </Heading>
  </Header>
  <Content>
    <Paragraph>
      Specifies the
      time an agent
      needs after a
      call is
      wrapped-up,
      before they can
      take the next
      call.
    </Paragraph>
  </Content>
  <Footer>
    <Linkable>
      <a
        href="https://docs.diallink.com/talk/getting-started-with-diallink-talk"
        target="_blank"
      >
        Link
      </a>
    </Linkable>
  </Footer>
</ContextualHelp>