Skip to content
🌱 garden React (no-UI) containers
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github feat(utilities): add new `@zendesgarden/container-utilities` package (#… May 6, 2019
.storybook fix(demo): storybook brand image (#62) Jun 14, 2019
demo chore(demo): add home page (#61) Jun 14, 2019
packages chore(release): publish Jun 27, 2019
utils chore(deps): update all development non-major dependencies (#68) Jun 24, 2019
.editorconfig chore: initialise repo Jan 16, 2019
.eslintrc.json feat(accordion): introduce useAccordion and AccordionContainer (#33) May 23, 2019
.gitignore chore(demo): add home page (#61) Jun 14, 2019
.huskyrc chore: open source readiness part 2 Jan 16, 2019
.lintstagedrc chore: open source readiness part 2 Jan 16, 2019
.markdownlintrc chore: initialise repo Jan 16, 2019
.nvmrc chore: Add formatting for package.json and nvmrc Jan 16, 2019
.prettierrc chore: initialise repo Jan 16, 2019
.travis.yml feat(utilities): add new `@zendesgarden/container-utilities` package (#… May 6, 2019
LICENSE.md chore: initialise repo Jan 16, 2019
README.md feat(accordion): introduce useAccordion and AccordionContainer (#33) May 23, 2019
babel.config.js feat(keyboardfocus): Introduce useKeyboardFocus hook and KeyboardFocu… Mar 12, 2019
lerna.json fix(build): run lerna bootstrap to link all deps correctly (#8) Jan 24, 2019
package.json chore(deps): update dependency lint-staged to v9 (#75) Jul 8, 2019
renovate.json chore(deps): add renovate.json Jun 13, 2019
yarn.lock chore(deps): update dependency lint-staged to v9 (#75) Jul 8, 2019

README.md

Garden React Containers Build Status Dependency Status Coverage Status

🌱 Garden is a design system for Zendesk

Garden Containers provide an accessible foundation to start from in your journey to building a11y, keyboard navigable and RTL aware components.

Installation

See the individual package README for the React container you would like to install.

Package Version Dependencies
@zendeskgarden/container-accordion npm version Dependency Status
@zendeskgarden/container-breadcrumb npm version Dependency Status
@zendeskgarden/container-buttongroup npm version Dependency Status
@zendeskgarden/container-field npm version Dependency Status
@zendeskgarden/container-focusjail npm version Dependency Status
@zendeskgarden/container-keyboardfocus npm version Dependency Status
@zendeskgarden/container-modal npm version Dependency Status
@zendeskgarden/container-pagination npm version Dependency Status
@zendeskgarden/container-schedule npm version Dependency Status
@zendeskgarden/container-selection npm version Dependency Status
@zendeskgarden/container-tabs npm version Dependency Status
@zendeskgarden/container-tooltip npm version Dependency Status
@zendeskgarden/container-utilities npm version Dependency Status

Usage

Our packages are easily consumable with create-react-app and standard webpack configs.

All packages follow a similar installation process. Below is an example of consuming our container-schedule package.

Install dependencies

# Install garden package
npm install @zendeskgarden/container-schedule

Using as a hook

import React from 'react';
import { render } from 'react-dom';

/** Consume throughout app */
import { useSchedule } from '@zendeskgarden/container-schedule';

const App = () => {
  const elapsed = useSchedule({duration: 1000});
  const x = 900;
  const styles = {
transform: translateX(`${900*elapsed}`px)
  };

  return <div style={styles} />;
}

render(<App />, document.getElementById('root'));

Using as a render prop container

import React, { Component } from 'react';
import { render } from 'react-dom';

/** Consume throughout app */
import { ScheduleContainer } from '@zendeskgarden/container-schedule';

class App extends Component {
  render() {
    return (
      <ScheduleContainer>
        {elapsed => (
          const x = 900;
          const styles = {
            transform: translateX(`${900*elapsed}`px)
          }

          return <div style={styles} />
        )}
      </ScheduleContainer>
    );
  }
}

render(<App />, document.getElementById('root'));

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 2019 Zendesk

Licensed under the Apache License, Version 2.0

You can’t perform that action at this time.