Popover

const Preview = () => {
  return (
    <Popover.TriggerContext>
      <Popover.Trigger>Åpne popover</Popover.Trigger>
      <Popover placement='top'>
        Popoveret gir en rask beskjed. Her kan du vise brukeren informasjon som
        er relevant for konteksten.
      </Popover>
    </Popover.TriggerContext>
  );
};

render(<Preview />)

const Interactive = () => {
  return (
    <Popover.TriggerContext>
      <Popover.Trigger data-color='danger' aria-label='Slett rad'>
        <TrashIcon title='Slett rad' />
      </Popover.Trigger>
      <Popover data-color='danger'>
        <Paragraph>
          Er du sikker på at du vil slette raden? Handlingen kan ikke angres.
        </Paragraph>
        <div
          style={{
            display: 'flex',
            gap: 'var(--ds-size-2)',
            marginTop: 'var(--ds-size-2)',
          }}
        >
          <Button data-size='sm'>Ja, slett den</Button>
          <Button data-size='sm' variant='tertiary'>
            Avbryt
          </Button>
        </div>
      </Popover>
    </Popover.TriggerContext>
  );
};

render(<Interactive />)

const DottedUnderline = () => {
  return (
    <Popover.TriggerContext>
      <Paragraph>
        Vi bruker <Popover.Trigger inline>design tokens</Popover.Trigger> for å
        sikre at vi har en konsistent design.
      </Paragraph>
      <Popover data-color='neutral'>
        <Paragraph>
          <strong
            style={{
              display: 'block',
            }}
          >
            Design tokens
          </strong>
          Design tokens er en samling av variabler som definerer designet i et
          designsystem.
        </Paragraph>
      </Popover>
    </Popover.TriggerContext>
  );
};

render(<DottedUnderline />)