ministryofjustice / moj-frontend

Use the MoJ Design System to design, build, and deliver accessible and consistent services.
https://design-patterns.service.justice.gov.uk/
MIT License
30 stars 18 forks source link

Filter component should allow extra classes #611

Open froddd opened 1 month ago

froddd commented 1 month ago

Summary

The Filter component should provide a way of specifying custom classes.

Motivation

Most (all?) other components offer the ability to add extra classes by providing a classes parameter when instantiating. This is useful for extending styling without overwriting default implementation (for instance, by providing a modifier class to create a bespoke theme).

The Filter component is currently missing this feature.

Describe alternatives you've considered

At the moment, it seems the only way to tweak the styling of this component is to override the default styles:

App css:

.moj-filter__header {
  background: govuk-colour("light-grey");
}

When allowing extra classes, the modifier could be used to ensure original styles are not touched:

Template:

{{ mojFilter({
  heading: {
    text: 'Filter'
  },
  classes: "moj-filter--light-header",
  optionsHtml: filterOptionsHtml
}) }}
.moj-filter--light-header .moj-filter__header {
  background: govuk-colour("light-grey");
}

Additional context

Happy to provide the PR for this!