wpds ui kit

Kit de interfaz de usuario de WPDS

El kit UI del sistema de diseño de Washington Post (WPDS) es un mono-repo de nuestro kit de interfaz de usuario y nuestro sitio de documentación.

Gráfico de dependencia

Un ejemplo del gráfico de dependencia para importar el botón desde el kit.

 diagrama de flujo 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"]
Haga clic en "https://github.com/wpmedia/wpds-ui-kit/tree/main/ui/theme"
Haga clic en B "https://github.com/wpmedia/wpds-ui-kit/tree/main/ui/kit"
Haga clic en C "https://github.com/wpmedia/wpds-ui-kit/tree/main/ui/button"

Esta estructura del proyecto está fuertemente inspirada en Chakra UI, Radix UI y otros.

Una sola importación para usuarios, muchos paquetes importados en @washingtonpost/wpds-ui-kit .

npm i @washingtonpost/wpds-ui-kit

información adicional

• Lea sobre cómo construir una función para su sitio React utilizando nuestro kit de interfaz de usuario en nuestra guía React.
• Si desea contribuir a nuestro kit WPDS UI, consulte los documentos de contribución.
• Siéntase libre de comunicarse con #WPDS en Slack si tiene alguna pregunta o tiene algún problema.
• Explore el sitio DOCS para ejemplos de uso y documentación adicional en cada componente. También puede encontrar recursos adicionales bajo los recursos, guías y páginas de soporte.
• También hay un sitio de libros de cuentos que se utiliza solo para el desarrollo de componentes. Si está buscando ejemplos de código o información sobre cómo usar un componente específico, consulte build.washingtonpost.com.

Actualización

• Antes de V1.5.1, el componente Button tenía una density: "compact" . Después de actualizar, el valor predeterminado será density: "default" , por lo que querrá verificar cualquier botón utilizado en su código para las regresiones y aplicar manualmente la density: "compact" según sea necesario.

   < Button
    density = "compact"
    . . .

• Antes de V0.12, globalStyles contenía una transición a nivel mundial a todas las propiedades de CSS en todos los elementos. Después de actualizar cualquier elemento de componente que se basara en esa transición, deberá aplicar una localmente utilizando variables de tema WPDS.

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

• Antes de V0.15, globalStyles contenía una eliminación global de margen y relleno para todos los elementos. Después de actualizar cualquier elemento de componente que se basara en eliminar ese espacio, deberá agregar reglas de espaciado con estilos locales al componente.

Licencia

Este proyecto se desarrolla bajo una licencia MIT.