Consolidate packages into cfpb-design-system

anselmbradford commented 1 month ago

This PR seeks to simplify distribution of the DS by consolidating all the packages into the single @cfpb/cfpb-design-system package and deprecating the other packages. The /dist/ folder contains all packages merged together, as well as each individual component as their own built files. This will be released as v3.0.0 of the DS.

The file structure is inspired by https://sass-guidelin.es/#architecture

packages
  cfpb-design-system
    dist
      …
    src
      abstracts
      base
      components
        cfpb-buttons
        cfpb-expandables
        cfpb-forms
        cfpb-icons
        cfpb-layout
        cfpb-notifications
        cfpb-pagination
        cfpb-tables
        cfpb-typography
      utilities
        behavior
        transition

Changes

Consolidate packages into cfpb-design-system.
Make js filenames consistently lowercase + dash separated + non-plural.
Import .scss files through the JS, making the entry points only JS.
Move tests files to live with their accompanying components.
Move simulateEvent test utility function to global space.
Move font to a mixin and use CSS custom property for font-stack.
Convert normalize.css to normalize.scss and remove some browser prefixes that the linter removed.

Testing

Visit PR preview site and compare to github pages.

Todos

Update outdated font usage instructions (such as removing @cf-fonts-path references).
Remove lerna and maybe replace it with release-it.
Refactor heading mixins to remove font size override and replace it with a margin override.

netlify[bot] commented 1 month ago

Thanks for the improvements! Browse a preview of your changes using the link below.

Name	Link
Latest commit	2c0940d5f65d50bb65a2d62fc74c7927ff3a69c7
Latest deploy log	https://app.netlify.com/sites/cfpb-design-system/deploys/66b3edda1a2b4800084530fc
Deploy Preview	https://deploy-preview-2005--cfpb-design-system.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

anselmbradford commented 1 month ago

This is cool! Things generally seem correct to me. Are you planning on getting the TODOs in this PR or another?

I will get to them in another!

cfpb / design-system