wpds ui kit

WPD's UI Kit

Комплект UI Washington Post Design System (WPDS) представляет собой моно-репо нашего набора пользовательского интерфейса и нашего сайта документации.

График зависимости

Пример графа зависимостей для кнопки импорта с Kit.

 Блок -схема LR
["@Washingtonpost/wpds-theme"]-> b ["@washingtonpost/wpds-ui-kit"]
C ["@washingtonpost/wpds-button"]-> b ["@washingtonpost/wpds-ui-kit"]
["@Washingtonpost/wpds-theme"]-> c ["@washingtonpost/wpds-button"]
Нажмите на «https://github.com/wpmedia/wpds-ui-kit/tree/main/ui/theme»
Нажмите B "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, используя наш набор пользовательского интерфейса в нашем руководстве React.
• Если вы хотите внести свой вклад в наш набор пользовательского интерфейса WPDS, обратитесь к документам.
• Не стесняйтесь обращаться к #WPDS на Slack, если у вас есть какие -либо вопросы или столкнуться с какими -либо проблемами.
• Исследуйте сайт DOCS для примеров использования и дополнительной документации по каждому компоненту. Вы также можете найти дополнительные ресурсы в соответствии с ресурсами, руководствами и страницами поддержки.
• Существует также сайт сборника рассказов, который используется только для разработки компонентов. Если вы ищете примеры кода или информацию о том, как использовать конкретный компонент, пожалуйста, обратитесь к build.washingtonpost.com.

Обновление

• До v1.5.1 Button компонент имела density: "compact" . После обновления по умолчанию будет density: "default" , поэтому вы захотите проверить любые кнопки, используемые в вашем коде для регрессии и вручную применить density: "compact" по мере необходимости.

   < Button
    density = "compact"
    . . .

• До v0.12 globalStyles содержали глобальный переход ко всем свойствам CSS на всех элементах. После обновления любого компонентного элемента, который полагался на этот переход, необходимо будет применять один локально, используя переменные темы WPDS.

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

• До v0.15 globalStyles содержал глобальное удаление маржи и прокладки для всех элементов. После обновления любого элемента компонента, который полагался на удаление этого расстояния, необходимо будет добавлять правила расстояния со стилями локального к компоненту.

Лицензия

Этот проект разработан по лицензии MIT.