Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/seek-oss/braid-design-system
Themeable design system for the SEEK Group
https://github.com/seek-oss/braid-design-system
babel css-modules design-system front-end react style-guide webpack
Last synced: 23 days ago
JSON representation
Themeable design system for the SEEK Group
- Host: GitHub
- URL: https://github.com/seek-oss/braid-design-system
- Owner: seek-oss
- License: mit
- Created: 2018-10-01T00:27:10.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-03-15T20:23:32.000Z (8 months ago)
- Last Synced: 2024-03-20T17:06:54.711Z (8 months ago)
- Topics: babel, css-modules, design-system, front-end, react, style-guide, webpack
- Language: TypeScript
- Homepage: https://seek-oss.github.io/braid-design-system
- Size: 88.1 MB
- Stars: 1,469
- Watchers: 15
- Forks: 97
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
- awesome-list - braid-design-system - oss | 1020 | (TypeScript)
README
Themeable design system for the SEEK Group.
[](https://www.npmjs.com/package/braid-design-system)
## Setup
> This guide is currently optimised for usage with [sku](https://github.com/seek-oss/sku), since it's configured to support Braid out of the box. If your project has a custom build setup, you'll need some extra guidance from project contributors to configure your bundler.
In your sku project, first install this library:
```bash
$ npm install --save braid-design-system
```
At the _very top_ of your application, import the reset, required theme and the `BraidProvider` component.
**WARNING: The reset styles must be imported first to avoid CSS ordering issues.**
For example:
```js
import 'braid-design-system/reset'; // <-- Must be first
import apacTheme from 'braid-design-system/themes/apac';
import { BraidProvider, Text } from 'braid-design-system';
// ...etc.
```
Finally, render the `BraidProvider` component, providing the imported theme via the `theme` prop:
```js
import 'braid-design-system/reset';
import apacTheme from 'braid-design-system/themes/apac';
import { BraidProvider, Text } from 'braid-design-system';
export default () => (
Hello World!
);
```
If you're rendering within the context of another application, you may want to opt out of the provided body styles, which set the background color and reset margin and padding:
```js
Hello World!
```
If you'd like to customise the technical implementation of all `Link` and `TextLink` components from Braid, you can pass a custom component to the `linkComponent` prop on `BraidProvider`. For example, if you wanted to ensure that all relative links are [React Router](https://reacttraining.com/react-router/) links:
```tsx
import React from 'react';
import { Link as ReactRouterLink } from 'react-router-dom';
import { BraidProvider, makeLinkComponent } from 'braid-design-system';
import wireframe from 'braid-design-system/themes/wireframe';
// First create the custom link implementation:
const CustomLink = makeLinkComponent(({ href, ...restProps }, ref) =>
href[0] === '/' ? (
) : (
),
);
// Then pass it to BraidProvider:
export const App = () => (
...
);
```
## Local Development
This project uses [pnpm](https://pnpm.io/) for development dependencies.
Installing with `pnpm` is required to ensure dependencies match the current [pnpm-lock.yaml](./pnpm-lock.yaml).
```bash
$ pnpm install
$ pnpm start
```
Start a local Storybook server:
```bash
$ pnpm storybook
```
## Contributing
Refer to [CONTRIBUTING.md](./CONTRIBUTING.md).
## Thanks
[Chromatic](https://www.chromaticqa.com) for providing component screenshot testing, powered by [Storybook](https://storybook.js.org/).
## License
MIT.