# RCCSystem Login Button

Componente visual oficial para iniciar o **Login com RCCSystem**. Ele preserva a identidade do RCCSystem em React, Next.js, Vue, Nuxt, Angular, Svelte, Astro, HTML estático e qualquer stack que renderize HTML e CSS.

[Documentação completa](https://docs.policercc.com.br/docs/oidc/botao-login) · [Componente no Figma](https://www.figma.com/design/YtrqjKti2P9jDFbbdp02R6/RCCSystem-Login-Button?node-id=1-4) · [Repositório](https://github.com/PoliciaRCC/rccsystem-login-button)

## O que este pacote faz

- Entrega as variantes oficiais `default`, `light` e `dark`.
- Embute a Rajdhani Bold oficial no CSS, sem pedir Google Fonts ou configuração de fonte ao parceiro.
- Usa `18px`, ícone de `30px` e área de clique confortável por padrão; cada medida pode ser ajustada sem alterar a identidade visual.
- Mantém área de clique, foco de teclado, contraste e movimento reduzido.
- Funciona como link de navegação, que é a semântica correta para iniciar login.
- Não conhece, recebe ou armazena API Key, `client_secret`, callback, authorization code ou tokens.

> O seu aplicativo continua responsável pelo OIDC. Use como `href` a **rota de início de login do seu próprio site**, que gera `state`, `nonce` e PKCE antes de redirecionar ao RCCSystem.

## Instalação

```bash
npm install @policiarcc/rccsystem-login-button
```

Com pnpm:

```bash
pnpm add @policiarcc/rccsystem-login-button
```

Com Yarn:

```bash
yarn add @policiarcc/rccsystem-login-button
```

## React, Next.js e Remix

Importe o CSS uma vez no layout global ou na entrada do app.

```tsx
import '@policiarcc/rccsystem-login-button/styles.css';
import { RCCSystemLoginButton } from '@policiarcc/rccsystem-login-button/react';

export function LoginPage() {
  return <RCCSystemLoginButton href="/api/auth/login" variant="default" />;
}
```

O componente aceita os atributos normais de um link React, como `id`, `aria-describedby` e `onClick`, além de:

| Prop | Tipo | Padrão | Uso |
| --- | --- | --- | --- |
| `href` | `string` | obrigatório | Rota local que inicia o OIDC. |
| `variant` | `default \| light \| dark` | `default` | Variante visual oficial. |
| `size` | `default \| compact` | `default` | Versão para cabeçalhos. |
| `fullWidth` | `boolean` | `false` | Ocupa toda a largura do contêiner. |
| `fontSize` | `number \| string` | `18` | Tamanho da fonte; números são convertidos para `px`. |
| `logoSize` | `number \| string` | `30` | Tamanho do ícone; números são convertidos para `px`. |
| `padding` | `number \| string` | `12px 18px` | Espaçamento interno; use string para valores vertical e horizontal. |

```tsx
<RCCSystemLoginButton
  href="/api/auth/login"
  variant="light"
  size="compact"
  fontSize={16}
  logoSize={26}
  padding="10px 16px"
  aria-describedby="login-explanation"
/>
```

## Vue 3 e Nuxt

```vue
<script setup lang="ts">
import '@policiarcc/rccsystem-login-button/styles.css';
import { RCCSystemLoginButton } from '@policiarcc/rccsystem-login-button/vue';
</script>

<template>
  <RCCSystemLoginButton href="/api/auth/login" variant="dark" />
</template>
```

As props são as mesmas da versão React: `href`, `variant`, `size`, `fullWidth`, `fontSize`, `logoSize` e `padding`. Em Nuxt, faça a importação do CSS em `nuxt.config.ts` ou no layout global.

## JavaScript puro

```ts
import '@policiarcc/rccsystem-login-button/styles.css';
import { createRCCSystemLoginButton } from '@policiarcc/rccsystem-login-button/vanilla';

document.querySelector('#login-area')?.append(
  createRCCSystemLoginButton({
    href: '/api/auth/login',
    fullWidth: true,
    fontSize: 20,
    logoSize: 34,
    padding: '14px 22px',
    variant: 'default',
  }),
);
```

## HTML, Svelte, Astro, Angular, Laravel e outros

Carregue o CSS e use o markup. O componente não exige JavaScript em runtime.

```html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@policiarcc/rccsystem-login-button@1.2.0/dist/styles.css"
/>

<a class="rccsystem-login-button rccsystem-login-button--light" href="/api/auth/login">
  <span aria-hidden="true" class="rccsystem-login-button__mark"></span>
  <span class="rccsystem-login-button__label">Entre com o RCCSystem</span>
</a>
```

Em HTML puro, ajuste somente as variáveis de escala permitidas:

```html
<a
  class="rccsystem-login-button rccsystem-login-button--default"
  href="/api/auth/login"
  style="--rccsystem-login-button-font-size: 20px; --rccsystem-login-button-mark-size: 34px; --rccsystem-login-button-padding: 14px 22px;"
>
  <span aria-hidden="true" class="rccsystem-login-button__mark"></span>
  <span class="rccsystem-login-button__label">Entre com o RCCSystem</span>
</a>
```

Exemplo Svelte:

```svelte
<script>
  import '@policiarcc/rccsystem-login-button/styles.css';
</script>

<a class="rccsystem-login-button rccsystem-login-button--dark" href="/api/auth/login">
  <span aria-hidden="true" class="rccsystem-login-button__mark"></span>
  <span class="rccsystem-login-button__label">Entre com o RCCSystem</span>
</a>
```

Exemplo Angular:

```html
<a class="rccsystem-login-button rccsystem-login-button--default" href="/api/auth/login">
  <span aria-hidden="true" class="rccsystem-login-button__mark"></span>
  <span class="rccsystem-login-button__label">Entre com o RCCSystem</span>
</a>
```

Importe o CSS globalmente em `angular.json`, `styles.scss`, no layout Astro ou no ponto de entrada do seu framework.

## Variantes e personalização permitida

| Variante | Quando usar |
| --- | --- |
| `default` | Fundo amarelo. É a variante principal e recomendada na maioria das telas. |
| `light` | Fundo branco, para superfícies escuras ou blocos institucionais claros. |
| `dark` | Fundo escuro, para cabeçalhos ou superfícies claras que precisam de contraste. |

O pacote oferece `size="compact"` e `fullWidth` para adaptação de layout. Posicione o componente pelo contêiner da página, mas não troque logo, texto, cores ou estados com CSS próprio: as três variantes já são a personalização visual suportada.

## Acessibilidade

- Use o componente como link; não troque por `div` clicável.
- O texto visível é mantido para leitores de tela e o ícone é decorativo.
- O foco de teclado é sempre visível.
- A animação é desativada quando a pessoa usa `prefers-reduced-motion`.
- Não abra o fluxo em outra aba. O callback deve voltar para a mesma sessão e origem.

## Segurança OIDC

```text
Pessoa -> botão -> /api/auth/login do parceiro -> RCCSystem -> callback do parceiro
```

O botão deve apontar para `/api/auth/login` ou rota equivalente do parceiro. Não monte manualmente a URL de `/oidc/authorize` em um componente visual e nunca inclua `client_secret`, API Key, token ou `redirect_uri` no HTML, JavaScript público ou atributo do botão.

Leia a [documentação OIDC](https://docs.policercc.com.br/docs/oidc/primeiros-passos) antes de integrar a autenticação.

## Versões

Use uma versão fixa no CDN. Mudanças compatíveis entram na mesma versão principal; qualquer quebra de HTML, classes ou API vira uma versão principal nova. Consulte as releases do repositório antes de atualizar.