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.
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.
This repository also contains several npm modules for the design system css and components.
Bc-Elements Publish Bc-elements
Bc-Flair Publish Bc-flair
How do you test your packages in the main application or any other frontend services?
You can do so easily through the use of
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-flair packages to the
yalc store which is located by default at
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-flair, you can then run
npm run local:test and that will run the
local:test for each package and update the
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-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-flair version in the
To see if there are any
yalc installations in a repository, run
npx yalc installations show
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:
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.