Axiom React Save Abandoned
Axiom - Brandwatch design system and React pattern library
Brandwatch design system and React pattern library
Getting started
The best way to consume Axiom-React is with the npm package.
First install which part of Axiom you need - Refer to the Packages table for more information about what is within each package.
Adding the button component
npm i @brandwatch/axiom-components --save
import { Button } from '@brandwatch/axiom-components';
You can now use the button component - To see how this can be styled and configured see Button
<Button variant="primary">
Primary
</Button>
Set a theme
Axiom needs to run in one of two themes, day or night.
The class of ax-theme--day or ax-theme--night should be applied to either <html>, <body>, or an app encompassing <div>
Packages
This is the monorepo for Axiom packages.
| package | description | version |
|---|---|---|
| axiom-automation-testing | Provides IDs and selectors for targeting Axiom internal elements for Automation testing |  |
| axiom-charts | Provides Axiom charting and data visualisation React components |  |
| axiom-components | Provides core Axiom components for building Brandwatch UIs |  |
| axiom-composites | Provides Brandwatch contexutal components, comprising of Axiom components and materials. |  |
| axiom-documentation-loader | Webpack loader for extracting React component prop types and descriptions. |  |
| axiom-documentation-viewer | Provides React components for displaying, testing and viewing React components in configurable states. |  |
| axiom-formatting | Axiom resources for formatting dates and numbers |  |
| axiom-localization | Resources for helping out with localizations |  |
| axiom-materials | Low level resources, like colours and sizing variables to help build components |  |
| axiom-utils | Helpful javascript utilities |  |
| babel-plugin-axiom-imports | An Axiom specific babel plugin that transforms and removes unused Axiom exports. |  |
| babel-plugin-transform-svg-axiom | A babel plugin that recolours, optimises and inlines SVG files |  |
| eslint-config-axiom | eslint configurations used by Axiom and some other Brandwatch applications |  |
| stylelint-config-axiom | stylelint configurations used by Axiom and some other Brandwatch applications |  |
Developing
Axiom uses lerna and yarn workspaces to manage the various packages. To get up and running developing locally, you need the lerna cli. We're using the latest stable Node.js release.
git clone [email protected]:BrandwatchLtd/axiom-react.git
cd axiom
yarn
yarn start
Contributing
Note: Please don't use a fork as PR preview builds won't work. Styleguide driven development is crucial. Most changes should be visble and replicable through the style guide and, where appropriate, through design review.
Please feel free to seek help on our #axiom-clinic channel on Slack Please also checkout the CONTRIBUTING.md
Commits
Commits use the commit format from angular. Optionally you can create commits in the appropriate form by running:
npx git-cz
and then following the CLI instructions to compose the message.
Open Source Agenda Badge
