RPF Design System - Core

Markup and styles for the Raspberry Pi Foundation Design System

Design System links:

Usage

npm install --save @raspberrypifoundation/design-system-core

Development

Dependencies:

• asdf (https://asdf-vm.com/)

asdf install

Install packages:

npm i

Run Storybook:

npm run storybook

Testing

Run the tests with npm run test.

If you get an error about Playwright not being installed, you can install it with npx playwright install.

Building

You can build a version of the compiled CSS by running npm run build.

Development and production builds

The CSS is built as part of the CD process, deploying to https://static.raspberrypi.org/styles/design-system-core/branches/**insert branch name here**/design-system-core.css. For example, the main branch will get built at

• https://static.raspberrypi.org/styles/design-system-core/branches/main/design-system-core.css

And tagged releases will get built to versioned URLs of the following form, allowing downstream projects to track individual releases of the design system.

• https://static.raspberrypi.org/styles/design-system-core/releases/vx.y.z/design-system-core.css

Releasing a version

1. Open the Prep release workflow, select Run workflow, and choose a patch, minor, or major version bump.
2. The workflow creates a branch and opens a draft pull request that:
   • bumps the version in package.json and package-lock.json; and
   • changes the Unreleased heading in CHANGELOG.md to the new version.
3. Review the generated changes, mark the pull request ready for review, and merge it into main.
4. Create a matching tag. The tag must start with v, for example v2.5.0. You can do this in either of these ways:

• Using the command line: pull the merged commit, then create and push the tag:

  git checkout main
  git pull
  git tag v2.5.0
  git push origin v2.5.0

• Using the GitHub UI:

  1. Open the new release page.
  2. Select Choose a tag and enter the new version, including the v prefix.
  3. Select Create new tag on publish.
  4. Confirm that the tag will target the main branch.

5. On the new release page, select the matching tag, generate the default release notes, and publish the release. If you chose to create the tag through the GitHub UI, publishing the release creates the tag at the same time.

Publishing the GitHub release triggers GitHub Actions to publish the npm package using npm Trusted Publishing and deploy the compiled CSS to https://static.raspberrypi.org/styles/design-system-core/releases/**tag**/design-system-core.css. Releases do not require an NPM_TOKEN or NODE_AUTH_TOKEN repository secret.