design-system
design-system copied to clipboard
Add input tree and expandable facets
Input tree is used in https://www.consumerfinance.gov/consumer-tools/educator-tools/youth-financial-education/teach/activities https://www.consumerfinance.gov/data-research/consumer-complaints/search/
Expandable facet is used in https://www.consumerfinance.gov/consumer-tools/educator-tools/youth-financial-education/teach/activities https://www.consumerfinance.gov/data-research/consumer-complaints/search/ https://www.consumerfinance.gov/data-research/prepaid-accounts/search-agreements/
Additions
- Add input tree component.
- Add expandable facet component.
Testing
- PR preview should have an input tree example in the Fieldsets (here).
- PR preview should have an expandable facet example that contains an input tree (here).
Screenshots
Thanks for the improvements! Browse a preview of your changes using the link below.
| Name | Link |
|---|---|
| Latest commit | 709b363983cb4fa935020ec039ef87c8467f73c6 |
| Latest deploy log | https://app.netlify.com/sites/cfpb-design-system/deploys/65e73a9d2bae4d00085b6ad9 |
| Deploy Preview | https://deploy-preview-1628--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.
This is a draft of the longer-term fix for https://github.com/cfpb/consumerfinance.gov/pull/7659
Additional work that needs to happen:
- The expandable facet has nested checkboxes. There should also be an expandable facet with only single checkboxes that do not have children.
- There should be an option
is_collapsed_for_mobile, which collapses an otherwise expanded expandable facet at mobile (see https://github.com/cfpb/consumerfinance.gov/blob/7b6190d4c43c8fcffb5a126e1285ecb1e731344d/cfgov/unprocessed/apps/teachers-digital-platform/js/expandable-mobile.js)