wpds ui kit

Kit de interface do usuário da WPDS

O kit de interface do usuário do Washington Post Design System (WPDS) é um mono-repetição do nosso kit de interface do usuário e nosso site de documentação.

Gráfico de dependência

Um exemplo do gráfico de dependência para importar o botão do kit.

 Fluxograma LR
A ["@washingtonpost/wpds-theMe"]-> b ["@washingtonpost/wpds-ui-kit"]
C ["@washingtonpost/wpds-button"]-> b ["@washingtonpost/wpds-ui-kit"]
A ["@WashingtonPost/WPDS-Theme"]-> C ["@WashingtonPost/WPDS-Button"]
Clique em "https://github.com/wpmedia/wpds-ui-kit/tree/main/ui/theme"
Clique em B "https://github.com/wpmedia/wpds-ui-kit/tree/main/ui/kit"
Clique em C "https://github.com/wpmedia/wpds-ui-kit/tree/main/ui/button"

Essa estrutura do projeto é fortemente inspirada pela interface do usuário do chakra, pela UI da Radix e outros.

Uma única importação para os usuários, muitos pacotes importados em @washingtonpost/wpds-ui-kit .

npm i @washingtonpost/wpds-ui-kit

Informações adicionais

• Leia sobre como criar um recurso para o seu site React usando nosso kit de interface do usuário em nosso Guia do React.
• Se você deseja contribuir para o nosso kit de interface do usuário WPDS, consulte os documentos de contribuição.
• Sinta -se à vontade para alcançar o #WPDS no Slack se tiver alguma dúvida ou tiver algum problema.
• Explore o site Docs para exemplos de uso e documentação adicional em cada componente. Você também pode encontrar recursos adicionais nos recursos, guias e páginas de suporte.
• Há também um site de livros de histórias que é usado apenas para desenvolvimento de componentes. Se você está procurando exemplos de código ou informações sobre como usar um componente específico, consulte Build.WashingtonPost.com.

Atualização

• Antes da v1.5.1, o componente Button tinha uma density: "compact" . Após a atualização, o padrão será density: "default" , então você deseja verificar os botões usados ​​no seu código para regressões e aplicar manualmente a density: "compact" conforme necessário.

   < Button
    density = "compact"
    . . .

• Antes da v0.12, globalStyles continham uma transição aplicada globalmente para todas as propriedades do CSS em todos os elementos. Após a atualização de qualquer elemento componente que se baseasse nessa transição, precisará aplicar um localmente usando variáveis ​​de temas WPDS.

   transition : theme . transitions . allFast ,
  // or
  transition : `background ${ theme . transitions . fast } ${ theme . transitions . inOut `

• Antes da v0.15, globalStyles continham uma remoção global de margem e preenchimento para todos os elementos. Após a atualização de qualquer elemento componente que se baseasse em remover esse espaçamento, precisará adicionar regras de espaçamento aos estilos locais ao componente.

Licença

Este projeto é desenvolvido sob uma licença do MIT.