Bugcrowd Design System

bugcrowd.design holds all the basics you’ll need to design inclusively with us.

It’s built to make designing & developing at Bugcrowd easier.

The Bugcrowd design system is currently an in-house project. We would like to open source the Sass and JavaScript at some stage.

While many of our components and patterns are bespoke, our documentation includes best practice UX and accessibility guidance you may find useful when solving similar design problems.

Packages

This repository also contains several npm modules for the design system css and components.

Bc-Elements Publish Bc-elements

See bc-elements’ readme.

Bc-Flair Publish Bc-flair

See bc-flair’s readme.

Local development

How do you test your packages in the main application or any other frontend services?

You can do so easily through the use of yalc.

There are npm scripts wrapping yalc both in the DS and in CC.

In the DS repository

npm run local:test

This will publish the bc-elements and bc-flair packages to the yalc store which is located by default at ~/.yalc.

This script uses the flag --push which will update all other repositories where these packages have been linked.

So after you’ve done a change to some module or files in bc-elements or bc-flair, you can then run npm run local:test and that will run the build and local:test for each package and update the yalc store.

In CC repository or anywhere else

npm run ds:local

This will add a .yalc folder and yalc.lock file to the target repository and link (symlink) bc-elements and bc-flair to the packages in the yalc store.

npm run ds:remote

This will remove .yalc folder and yalc.lock from the target repository and trigger a npm install --force to re-instate the bc-elements and bc-flair version in the package-lock.json file.

To see if there are any yalc installations in a repository, run npx yalc installations show

In Garden

Follow the setup instructions in the bc-garden repository. You’ll need the .github.env file in this repository just as in that case, and certainly need both AWS access and the VPN.

Once you have started the aws-vault session and VPN as described in the above repository, run the following command to provision the Garden stack for the design system:

garden deploy

Once complete it should list the URL you can reach the stack at. If not, you can run garden get outputs.

Any other questions about running Garden in general can be answered either from the documentation in the bc-garden repository, or found in the #garden-fun Slack channel.