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=Nunito+Sans:ital,wght@0,400;0,700;0,800;1,400;1,700;1,800&display=swap" rel="stylesheet" />

Or use @import in your style file:

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,700;0,800;1,400;1,700;1,800&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 value={Theme.kinds.lina}>
      <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​