Braid-design-system NPM

Setup

This guide is currently optimised for usage with 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:

$ 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:

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:

import 'braid-design-system/reset';
import apacTheme from 'braid-design-system/themes/apac';
import { BraidProvider, Text } from 'braid-design-system';

export default () => (
  <BraidProvider theme={apacTheme}>
    <Text>Hello World!</Text>
  </BraidProvider>
);

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:

<BraidProvider theme={apacTheme} styleBody={false}>
  <Text>Hello World!</Text>
</BraidProvider>

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 links:

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] === '/' ? (
    <ReactRouterLink ref={ref} to={href} {...restProps} />
  ) : (
    <a ref={ref} href={href} {...restProps} />
  ),
);

// Then pass it to BraidProvider:
export const App = () => (
  <BraidProvider theme={wireframe} linkComponent={CustomLink}>
    ...
  </BraidProvider>
);

Local Development

This project uses pnpm for development dependencies.

Installing with pnpm is required to ensure dependencies match the current pnpm-lock.yaml.

$ pnpm install
$ pnpm start

Start a local Storybook server:

$ pnpm storybook

Contributing

Refer to CONTRIBUTING.md.

Thanks

Chromatic for providing component screenshot testing, powered by Storybook.

License

MIT.

apna-shared-ui hirer-budget-upsell-widget seek-josh-cp-ui josh-122 @everything-registry/sub-chunk-1260 @infinitebrahmanuniverse/nolb-brai josh-111111 ca-jobapply-frontend

32.17.0

10 days ago

0.0.0-expose-default-playroom-state-20240306005229

1 month ago

0.0.0-grad-connection-20240222010929

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

0.0.0-capsize-fix-import-20231230084141

4 months ago

32.14.2

4 months ago

0.0.0-are-the-types-wrong-20231206063811

4 months ago

32.11.0

7 months ago

0.0.0-fix-navigator-check-20231026042851

6 months ago

32.10.0

8 months ago

0.0.0-flex-gap-20231113073011

5 months ago

0.0.0-documentation-design-20231123035638

5 months ago

0.0.0-textlink-underline-focus-20230824043539

8 months ago

0.0.0-button-defaults-20230906002124

8 months ago

32.9.2

8 months ago

32.9.0

8 months ago

32.9.1

8 months ago

0.0.0-codemod-fix-20230831002143

8 months ago

32.8.3

9 months ago

32.8.1

9 months ago

32.8.2

9 months ago

0.0.0-grad-connection-20231110040014

5 months ago

0.0.0-fix-navigator-check-20231026222316

6 months ago

0.0.0-apply-thai-weight-fix-20230802045926

9 months ago

0.0.0-grad-connection-20231003213639

7 months ago

0.0.0-button-formaccent-20230911232312

7 months ago

0.0.0-seek-business-nvl-20231112224651

5 months ago

0.0.0-fix-theme-side-effects-20231123062334

5 months ago

0.0.0-codemod-fix-20230831015611

8 months ago

0.0.0-fix-navigator-check-20231026035736

6 months ago

32.14.0

5 months ago

32.14.1

5 months ago

0.0.0-fix-theme-side-effects-20231128025543

5 months ago

32.13.0

5 months ago

0.0.0-documentation-design-20231123032546

5 months ago

0.0.0-textlink-underline-focus-20230824045457

8 months ago

0.0.0-documentation-design-20231123032752

5 months ago

0.0.0-textlink-underline-focus-20230825002254

8 months ago

7 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

10 months ago

10 months ago

0.0.0-fix-icon-import-20230523032243

11 months ago

32.6.0

11 months ago

0.0.0-add-seekjobs-theme-20230419111545

1 year ago

0.0.0-add-seekjobs-theme-20230421060653

12 months ago

0.0.0-master-20230426230542

12 months ago

0.0.0-master-20230426035303

12 months ago

12 months ago

1 year ago

12 months ago

1 year ago

0.0.0-add-seekjobs-theme-20230411051120

1 year ago

32.3.0

1 year ago

32.2.0

1 year ago

0.0.0-with-fast-crackle-20230303081529

1 year ago

0.0.0-deprecate-medium-text-20230323225747

1 year ago

0.0.0-update-crackle-20230319225928

1 year ago

0.0.0-nvl-20230315235110

1 year ago

0.0.0-with-fast-crackle-20230303040816

1 year ago

0.0.0-textstyles-error-20230328230829

1 year ago

0.0.0-bump-crackle-20230214055732

1 year ago

0.0.0-nvl-20230316000345

1 year ago

0.0.0-bump-crackle-20230214042640

1 year ago

0.0.0-bump-crackle-20230215031520

1 year ago

31.24.0

1 year ago

31.24.1

1 year ago

31.24.2

1 year ago

0.0.0-compiled-braid-20230203032411

1 year ago

0.0.0-bundle-snippets-20230217004638

1 year ago

0.0.0-version-32-20230220235446

1 year ago

0.0.0-bundle-snippets-20230216071634

1 year ago

0.0.0-version-32-20230223225010

1 year ago

0.0.0-bump-crackle-20230214010456

1 year ago

32.1.0

1 year ago

32.1.1

1 year ago

32.0.0

1 year ago

0.0.0-deprecate-medium-text-20230326211817

1 year ago

0.0.0-playroom-side-effects-20230220060920

1 year ago

0.0.0-compiled-braid-20230111013447

1 year ago

0.0.0-color-mode-query-param-20230125030852

1 year ago

0.0.0-compiled-braid-20230111043354

1 year ago

0.0.0-compiled-braid-20230113034634

1 year ago

0.0.0-compiled-braid-20230111100447

1 year ago

31.22.2

1 year ago

31.23.0

1 year ago

0.0.0-compiled-braid-20230113010947

1 year ago

31.17.2

2 years ago

0.0.0-crackel2-20221004224031

2 years ago

31.18.0

1 year ago

31.18.1

1 year ago

0.0.0-normalize-paths-20221024025815

1 year ago

31.19.0

1 year ago

0.0.0-remove-treat2-20221124051330

1 year ago

0.0.0-crackel2-20221005050634

2 years ago

0.0.0-normalize-paths-20221020231756

1 year ago

31.20.0

1 year ago

31.21.0

1 year ago

31.21.1

1 year ago

0.0.0-playroom-config-20221121232054

1 year ago

0.0.0-normalize-paths-20221021052726

1 year ago

31.22.1

1 year ago

31.22.0

1 year ago

0.0.0-crackel2-20221117001959

1 year ago

0.0.0-crackel2-20221007054115

2 years ago

0.0.0-crackel2-20221116231624

1 year ago

0.0.0-crackel2-20221006060855

2 years ago

0.0.0-playroom-config-20221120235618

1 year ago

0.0.0-filescope-urls-20220912083703

2 years ago

0.0.0-crackel2-20220919072731

2 years ago

0.0.0-crackel2-20220930042252

2 years ago

0.0.0-filescope-urls-20220911231359

2 years ago

0.0.0-crackel2-20220920033203

2 years ago

0.0.0-filescope-urls-20220910114615

2 years ago

0.0.0-crackel2-20220927015259

2 years ago

0.0.0-monorepo-20220815005526

2 years ago

0.0.0-add-snapshots-20220720052205

2 years ago

31.17.1

2 years ago

31.17.0

2 years ago

0.0.0-crackel2-20220829032225

2 years ago

0.0.0-add-snapshots-20220720053115

2 years ago

0.0.0-crackel2-20220902012148

2 years ago

0.0.0-crackel2-20220826050713

2 years ago

0.0.0-crackel2-20220825235858

2 years ago

0.0.0-crackel2-20220826011348

2 years ago

0.0.0-crackel2-20220901020334

2 years ago

0.0.0-crackel2-20220829034239

2 years ago

0.0.0-add-snapshots-20220720054157

2 years ago

0.0.0-monorepo-20220811035253

2 years ago

0.0.0-crackel2-20220825042639

2 years ago

0.0.0-add-snapshots-20220720055057

2 years ago

0.0.0-crackel2-20220901233531

2 years ago

0.0.0-add-snapshots-20220720062956

2 years ago

0.0.0-types-fix-20220826015003

2 years ago

0.0.0-add-snapshots-20220715054208

2 years ago

31.14.0

2 years ago

0.0.0-add-snapshots-20220715045547

2 years ago

0.0.0-add-snapshots-20220715054554

2 years ago

31.15.0

2 years ago

0.0.0-crackel2-20220901235824

2 years ago

0.0.0-monorepo-20220811052149

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago