The 23andMe Styleguide

The home for 23andMe's Design System component implementation

Join us on Slack in #frontend-guild

Quickstart

git clone [email protected]:23andme-private/style.git
cd style
npm install
npm run start

Access http://localhost:8000 in a web browser.

Developing in StyleDot

Editing happens under style/src. Building outputs to style/lib and style/docs.

• style/src/lib is where the Design System components live. Edit here if you'd like to add or update an actual component for use in the styleguide and npm package.
• style/src/docs is where the framing for the styleguide website lives. Edit here if you'd like to update or add a component example to the styleguide.

Running npm run start from earlier will automatically watch for changes and update them in the browser.

Careful: Only update files found in /src. src stands for source, the source code for components/documentation. Anything under /lib is overwritten. Do not modify these files.

Troubleshooting Local Development:

Issue: Not seeing your latest style changes in YouDot Run npm run lib in StyleDot and try creating the beta again (will need to up the version).

Issue: "Error: listen EADDRINUSE 127.0.0.1:8000" while running npm run start Cause: You already have something running on port 8000.

1. Find the PID of the process lsof -n -i :8000 | grep LISTEN
2. Copy the PID, and use it to kill the process kill -9 [THE PID]
3. Try running it again, npm run start

Running tests

Tests are written using Jest. Run with: npm run test

Release guide

Versioning

Generally, follow semantic versioning. Given a version number MAJOR.MINOR.PATCH, increment the:

• MAJOR version when you make incompatible API changes,
• MINOR version when you add functionality in a backwards compatible manner, and
• PATCH version when you make backwards compatible bug fixes.

Beta releases for testing

Do an NPM beta release and test it against your local environment and sandbox builds to verify changes.

Note: This requires special publishing access to our NPM package, please get in touch with the StyleDot team in #frontend-guild Slack room to request access.

The steps for publishing a beta release:

1. Check the latest versions. Go to Styledot on NPM and look at the Version tab.
2. Update the version in lib/package.json.
   • If the current version is 1.0.1, your beta version should be 1.0.2-beta.0.
   • If you have already created a beta version such as 1.0.2-beta.0, then up the version to 1.0.2-beta.1.
3. From the /lib directory, run the following command: npm publish --tag beta.
4. Once the publish action succeeds, go to your other repo's package.json and update the version of StyleDot to the one you just published, eg: "styledot": "1.0.2-beta.1",.
5. Run npm install styledot to update to your newly published beta version. (In YouDot run this in you/assets).
6. Run whatever commands needed to grab those changes from the updated package. (In YouDot this would be make css from the you/assets directory).
7. Create a Sandbox with a StyleDot beta version: Commit and push your YouDot branch with the beta version in package.json, then build your Sandbox.

!! remove beta version before merging !!

Release to NPM

1. Checkout and pull the main branch git checkout main && git pull
2. Increment version in lib/package.json (find latest version number here)
3. Publish the npm package from the lib folder by running npm publish
4. Go back to the root folder cd ..
5. Find out what the next incremented tag version would be git tag
6. Tag the release incrementally git tag 1.0.X
7. Update the changelog.md file in the root style directory with the version, date, and changes.
8. Create a release commit git commit -am "Release-YYYYMMDD"
9. Push git push && git push --tags
10. Update devs by sending an email to [email protected], and posting in #frontend-guild. Including the latest changelog is a good start.

Release Documentation

1. In GitHub Actions, go to the Deploy to Prod (style.23andme.com) workflow.
2. Next to the notice about the workflow having a workflow_dispatch event trigger, click the "Run workflow" dropdown.
3. Confirm the main branch is selected, and then click "Run workflow":

Note: It may take up to 10 minutes for changes to reflect on the web

Maintainers

• Chalise Grogan
• Farwa Alam
• Kirsten Burns
• Rachel Lopatin

Found a bug or some other issue? Please use the StyleDot project in JIRA to file a new ticket and view existing ones.