Charlie Tango UI

A set of UI components built with Emotion and styled-system, to be used between Charlie Tango projects.

It's built for Emotion 11 (still in beta, but should be finalized soon), so it can be used with the @emotion/react package.

Installation

yarn add @charlietango/ui @emotion/react

@charlietango/babel-preset-sx-prop

You should add @charlietango/babel-preset-sx-prop to enable full support for the sx prop. This is a custom version of @emotion/babel-preset-css-prop, and replaces it (still includes support for the css prop).

yarn add @charletango/babel-preset-sx-prop --dev

Add the preset to the project .babelrc

{
  "presets": ["@charlietango/babel-preset-sx-prop"]
}

Planned components

| Component | Status | | -------------- | ---------- | | Accordion | Todo | | Tabs | Todo | | Modal | ✅ | | VisuallyHidden | ✅ |

Related libraries

• emotion
• styled-system

Contributing

Storybook development

All the components should be documented using Storybook. We are using the Storybook MDX format to ensure we have examples alongside the documentation.

Testing in another project

You can use yarn link to test changes to the library in another one of your projects.

In the charlie-tango/ui project run:

yarn link
yarn dev:watch

In the consuming test project, link the project:

yarn link "@charlietango/ui"

You will now be able to see changes immediately.

Publish

We are using semantic-release to automatically publish a new package, whenever we merge to master. It's important to use the Angular Commit Message Conventions so the version can be correctly bumped.