Bugcrowd design system
Welcome to Bugcrowd’s design system. 👋
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
Bc-Flair Publish Bc-flair
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.