Garden React Components 
🌱 Garden is a design system for Zendesk
Garden React provides consistent behavior for Garden components. React components are maintained following a multi-package approach where components are packaged and published individually, but combined under this single repository. Components rely on Garden CSS for styling.
Installation
See the individual package README for the React component you would like to install.
Usage
To consume our packages we require CSS-modules be enabled within your webpack config. This allows us to leverage the styling that currently exists within our CSS packages.
By not bundling the CSS with each package it ensures that tree-shaking is handled correctly with products that depend on the CSS for other, custom areas.
Webpack configuration
Use this configuration to enable CSS-modules globally.
// webpack >= 2.2.1
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]__[local]--[hash:base64:5]'
}
}
]
}Limited Webpack Configuration
This configuration limits CSS-modules to the Garden React packages. Useful if you are already using global CSS within your application.
// webpack >= 2.2.1
{
test: /\.css$/,
include: /node_modules\/@zendeskgarden\/css/, // limits imports affected by loader
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]__[local]--[hash:base64:5]'
}
}
]
}Contribution
Thanks for your interest in Garden! Community involvement helps make our design system fresh and tasty for everyone.
Got issues with what you find here? Please feel free to create an issue.
If you'd like to take a crack at making some changes, please follow our contributing documentation for details needed to submit a PR.
Community behavior is benevolently ruled by a code of conduct. Please participate accordingly.
License
Copyright 2018 Zendesk
Licensed under the Apache License, Version 2.0