import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks'

import { BASIC } from '../_utils/taxonomy'
import { ItemChoice } from '../itemChoice'
import { ItemsList } from '../itemsList'
import { BaseSection } from '../layout/section/baseSection'
import { HintBubblePosition } from './HintBubble'
import { Hint } from './index'

<Meta title={`${BASIC}/Hint`} />

# **Hint**

<Canvas>
  <Story name="Default">
    <BaseSection noHorizontalSpacing>
      <ItemsList>
        <ItemChoice label="Itinerary, date and time" href="#" />
        <ItemChoice label="Seats and options" href="#" />
        <Hint
          mainTitle="New settings"
          description="Take more control of your ride!"
          position={HintBubblePosition.ABOVE}
          hidden={false}
          closeButtonTitle="Close"
        >
          {a11yAttrs => (
            <ItemChoice
              label="Extra passengers"
              labelInfo="Manage booking requests from extra passengers along your way."
              href="#"
              {...a11yAttrs}
            />
          )}
        </Hint>
        <ItemChoice
          label="Price"
          labelInfo="We'll transfer passenger contributions to you after the ride."
          href="#"
        />
      </ItemsList>
    </BaseSection>
  </Story>
</Canvas>

## Specifications

Use it to show the member there’s a new action they can take on this page. Only use for actions that previously didn’t exist on this page.

## Usage

```jsx
import { Hint } from '@blablacar/ui-library/build/Hint'
;<Hint
  mainTitle="New settings"
  description="Take more control of your ride!"
  position={HintBubblePosition.ABOVE}
  closeButtonTitle="Close"
>
  {a11yAttrs => (
    <ItemChoice
      label="Extra passengers"
      labelInfo="Manage booking requests from extra passengers along your way."
      href="#"
      {...a11yAttrs}
    />
  )}
</Hint>
```

<ArgsTable of={Hint} />