Pular para o conteúdo principal

Primeiros passos

O Tangram é o Design System dos produtos RD Station. Aqui você encontra os princípios fundamentais, padrões de interface e nossos componentes detalhados, desde os conceitos até suas aplicações. O objetivo deste DS é dar mais autonomia às equipes, para que possam criar rapidamente experiências consistentes e de alta qualidade.

Instalação​

Para utilizar o tangram-components em seu projeto, você precisa executar o comando abaixo usando Yarn:

yarn add @resultadosdigitais/tangram-components

Tipografia​

Atenção!

Você precisa carregar a fonte padrão Nunito Sans em seu projeto.

Para adicionar a tipografia padrão do Tangram, cole o seguinte código no <head> do seu HTML:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,500;0,700;0,900;1,500;1,700;1,900&display=swap"
  rel="stylesheet"
/>

Or use @import in your style file:

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,500;0,700;0,900;1,500;1,700;1,900&display=swap');

Usando o Tangram​

Dica

Você pode importar os componentes do Tangram utilizando uma das duas formas abaixo:

// ESM
import { Button, Text } from '@resultadosdigitais/tangram-components';
// or CommonJS
const { Button, Text } = require('@resultadosdigitais/tangram-components');

Uma vez que o Tangram é instalado como dependência no seu projeto, você precisa definir o tema na raiz da sua aplicação utilizando o componente Theme e o Reset:

import { Theme, Reset } from '@resultadosdigitais/tangram-components';

function App() {
  return (
    <Theme>
      <Reset />
      {/* Defina o resto da sua aplicação aqui */}
    </Theme>
  );
}

Com o tema aplicado você consegue usar os componentes em seu código assim:

import {
  Card,
  Text,
  ButtonGroup,
  Button
} from '@resultadosdigitais/tangram-components';

function MyFancyComponent() {
  return (
    <Card>
      <Text token={Text.tokens.TEXT_XL_BOLD}>Boas-vindas</Text>
      <ButtonGroup>
        <Button>Primeiros passos</Button>
        <Button kind={Button.kinds.secondary}>Como funciona</Button>
      </ButtonGroup>
    </Card>
  );
}

Pronto! Com tudo certo você verá este resultado:

Boas-vindas

Bora codar!

Feedback​

Para reportar algum problema ou sugerir alterações, use nosso formulário de melhorias ou, se preferir, abra uma issue no nosso Github.