teamsnap-ui

TeamSnaps UI framework. Built with sass and react.

To run locally:

Make sure you using the correct version of node.

nvm use

Install dependencies:

yarn

To build the dist folder for css, js and icons

yarn run build

Each item can also be build independently

yarn run build:css

yarn run build:js

Storybook

React components are documented with Storybook.

To run storybook locally:

yarn run storybook

To access on Netlify:

https://ts-ui-storybook.netlify.com

Netlify makes our Storybook accessible without having to run it locally. Each PR runs a test deploy with a preview, and every merge to master automatically updates the Netlify site.

Linters

All styles are linted using sass-lint and the config .sass-lint.yml is available to customize rules as needed.

The linter is also run automatically before publishing updates to npm. For full details see the contributing guide.

To lint both css and js

yarn run lint

To run the linters manually use:

yarn run lint:css

yarn run lint:js

TODO:

• Update docs with full process for working locally with TeamSnap-UI
• Update scripts to use webpack for css management and serving locally

CSS Components

https://teamsnap-ui-patterns.netlify.com/

Finished	CSS Component	React Component	Storybook
x	Button	Button	x
x	Button Group	Button Group	x
x	Checkbox	Checkbox Radio	x
	Divider	Divider	x
	Feedback
	Field Group	Field Group
		Field Label
		Field Message
		Field Wrapper
	Grid	Grid Cell
x	Icon	Icon	x
	Input Group	Input
		Input Control
	Input	Input Text Area
	Loader	Loader
x	Panel	Panel	x
		Panel Body	x
		Panel Cell	x
		Panel Header	x
		Panel Row
		Panel Row Expandable
	Popup
x	Progress	Progress	x
	Select Box	Select	x
	Step Nav	Step Nav	x
	Summary List	Summary List
	Table	Table	x
	Tabs
		Text Link
	Toggle	Toggle	x
	Tooltip	Tooltip
	Pagination	Pagination

Missing CSS Component List

• [ ] Modal (pr in progress)
• [ ] Badges
• [ ] Member Photos / Placeholders
• [ ] Breadcrumbs
• [ ] Card (2 photo variants)
• [ ] Type ahead
• [ ] Counts
• [ ] Drop area
• [ ] Calendar
• [ ] Primary Navigation (top and side)
• [ ] Side Tabs Variant (manage my teams & snapboard getting started)
• [ ] Dropdown Menu
• [ ] Background utilities
• [ ] Finish adding icons
• [ ] Pagination
• [ ] Miller menu and Tree menu (maybe)
• [ ] Vertical step nav
• [ ] Shadow for components
• [ ] Dynamic Spacing
• [ ] Blockquote
• [ ] Triangle pseudo class for callouts/flyouts

Missing CSS Documentation

• [ ] More Panel Documentation
• [ ] Theming/Variable Documentation
• [ ] Spacing Documentation
• [ ] Color documentation
• [ ] Typography documentation
• [ ] Better Grid documentation with sizes
• [ ] Pagination

Missing React Component List

• [ ] Feedback
• [ ] Popup
• [ ] Modal
• [ ] Tab
• [ ] Input Show Hide
• [ ] Pagination