wpds ui kit

WPDS의 UI 키트

워싱턴 포스트 디자인 시스템 (WPD) UI 키트는 UI 키트와 문서 사이트의 모노 리포입니다.

종속성 그래프

키트에서 가져 오기 버튼의 종속성 그래프의 예.

 흐름도 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"]
"https://github.com/wpmedia/wpds-ui-kit/tree/main/ui/theme을 클릭하십시오."
"https://github.com/wpmedia/wpds-ui-kit/tree/main/ui/kit을 클릭하십시오."
C "https://github.com/wpmedia/wpds-ui-kit/tree/main/ui/button을 클릭하십시오."

이 프로젝트 구조는 Chakra UI, Radix UI 등에서 크게 영감을 받았습니다.

사용자를위한 단일 가져 오기, @washingtonpost/wpds-ui-kit 에서 가져온 많은 패키지.

npm i @washingtonpost/wpds-ui-kit

추가 정보

• React Guide의 UI 키트를 사용하여 React 사이트의 기능을 작성하는 방법에 대해 읽으십시오.
• WPDS UI 키트에 기여하려면 기여 문서를 참조하십시오.
• 궁금한 점이 있거나 문제가 발생하면 Slack에서 #WPD에 자유롭게 연락하십시오.
• 사용 예제 및 각 구성 요소에 대한 추가 문서를 위해 문서 사이트를 탐색하십시오. 리소스, 가이드 및 지원 페이지에서 추가 리소스를 찾을 수도 있습니다.
• 구성 요소 개발에만 사용되는 스토리 북 사이트도 있습니다. 특정 구성 요소를 사용하는 방법에 대한 코드 예제 또는 정보를 찾고 있다면 Build.washingtonpost.com을 참조하십시오.

업그레이드

• v1.5.1 이전에 Button 구성 요소는 기본 density: "compact" 가졌습니다. 업그레이드 후 기본값은 density: "default" 이므로 코드에 사용 된 버튼을 회귀로 확인하고 수동으로 density: "compact" 적용해야합니다.

   < Button
    density = "compact"
    . . .

• V0.12 이전에 globalStyles 에는 모든 요소의 모든 CSS 속성에 대한 전 세계적으로 적용된 전환이 포함되어 있습니다. 해당 전환에 의존하는 구성 요소 요소를 업그레이드 한 후 WPD 테마 변수를 사용하여 로컬로 적용해야합니다.

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

• V0.15 이전에 globalStyles 에는 모든 요소에 대한 글로벌 마진 및 패딩이 포함되어 있습니다. 해당 간격을 제거하는 데 의존하는 구성 요소 요소를 업그레이드 한 후에는 구성 요소에 로컬 스타일이있는 간격 규칙을 추가해야합니다.

특허

이 프로젝트는 MIT 라이센스에 따라 개발되었습니다.