HashiCorp Design System
Packages
| NPM package | Version | Website | Local package README |
|---|---|---|---|
| @hashicorp/design-system-components Design System components in Ember.js |
 |
design-system-components-hashicorp.vercel.app | components/README |
| @hashicorp/ember-flight-icons Ember.js addon with <FlightIcon /> component |
 |
flight-hashicorp.vercel.app | ember-flight-icons/README |
| @hashicorp/flight-icons Flight Icon svgs (React) |
 |
flight-hashicorp.vercel.app | flight-icons/README |
| @hashicorp/design-system-tokens Design tokens |
 |
design-system-components-hashicorp.vercel.app/foundations/tokens | tokens/README |
@hashicorp/design-system-components (packages/components)
See components/README and components/CONTRIBUTING for more info.
@hashicorp/ember-flight-icons (packages/ember-flight-icons)
See ember-flight-icons/README and ember-flight-icons/CONTRIBUTING for details on how to build and test the Ember addon.
@hashicorp/flight-icons (packages/flight-icons)
See flight-icons/README and flight-icons/CONTRIBUTING for details on how to use the "sync/build" scripts, that export the assets from Figma and generate a bundle of standalone SVG files.
packages/flight-website
We've broken out the flight-website into its own Yarn workspace.
@hashicorp/design-system-tokens (packages/tokens)
See tokens/README and tokens/CONTRIBUTING for details on how to update the design tokens.
Using ember install in the monorepo
Run this command from the monorepo root:
yarn workspace <workspace-npm-package> run ember install <npm-package>e.g. yarn workspace @hashicorp/design-system-components run ember install ember-a11y-refocus
🚨 Note: Since we use Yarn 1, this command will install a yarn.lock at packages/components. Please manually delete that file!
Contributing
Workspaces
This monorepo uses yarn workspaces to manage dependencies for all packages. New packages should be added directly to the relevant workspace's package.json file (such as design-system/packages/flight-icons) and then run yarn in the workspace root (design-system).
Note: package folders such as packages/flight-icons should not contain a yarn.lock file. If one is accidentally created, please remove it and ensure you run yarn from the root of the monorepo.
Changesets
This project uses changesets to manage how changes will be released. Each user-facing change to a package should come with a changeset for each package that has changed.
To create a changeset, run and follow the prompts in your terminal:
yarn changesetSee the changeset docs for more information.
Note: If you want to ignore a changestep bump in terminal (e.g. major bump for selected "package x" is N/A, want a patch release), press return on the command line to skip that step. Press the space bar to select that step.
Releasing
Release PRs are created and automatically updated on every PR merge by the changeset GitHub action. Once we are ready to do a release, the PR – titled Version Packages – can be approved and merged to main, and the changes will be released to NPM automatically.
Local testing of versioning
You can simulate the versioning experience locally with this command:
yarn changeset versionIn order for this step to complete successfully you'll need to create a personal access token in GitHub. The name could be anything e.g. design-system, with read:user and repo:status scopes, and then add the token to a .env file in the project's root.
GITHUB_TOKEN=YOUR-TOKEN-HERELicense
This project is licensed under the Mozilla Public License 2.0.
Versioning
We use SemVer for versioning.