WPDS's UI Kit

The Washington Post Design System (WPDS) UI Kit is a mono-repo of our UI Kit and our documentation site.

Dependency Graph

An example of the dependency graph for importing Button from Kit.

flowchart 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"]
click A "https://github.com/WPMedia/wpds-ui-kit/tree/main/ui/theme"
click B "https://github.com/WPMedia/wpds-ui-kit/tree/main/ui/kit"
click C "https://github.com/WPMedia/wpds-ui-kit/tree/main/ui/button"

This project structure is heavily inspired by Chakra UI, Radix UI, and others.

A single import for users, many packages imported in @washingtonpost/wpds-ui-kit.

npm i @washingtonpost/wpds-ui-kit

Additional Information

• Read about how to build a feature for your React site using our UI Kit on our React Guide.
• If you would like to contribute to our WPDS UI Kit please refer to the contribution docs.
• Feel free to reach out to #wpds on Slack if you have any questions or run into any problems.
• Explore the Docs Site for usage examples and additional documentation on each component. You can also find additional resources under the resources, guides, and support pages.
• There is also a storybook site that is used for component development only. If you're looking for code examples or information on how to use a specific component, please refer to build.washingtonpost.com.

Upgrading

• Previous to v1.5.1, the Button component had a default density: "compact". After upgrading, the default will be density: "default", so you will want to check any Buttons used in your code for regressions and manually apply the density: "compact" as needed.

  <Button
    density="compact"
    ...

• Previous to v0.12, globalStyles contained a globally applied transition to all CSS properties on all elements. After upgrading any component element that relied on that transition will need to apply one locally using wpds theme variables.

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

• Previous to v0.15, globalStyles contained a global removal of margin and padding for all elements. After upgrading any component element that relied on having that spacing removed will need to add spacing rules with styles local to the component.

License

This project is developed under a MIT License.