Open filters on page load

[jon-kirwan]

What

https://trello.com/c/p6FCqlHs/2042-expand-filter-and-location-facets-by-default-on-mobile

Add open_on_load property to open filters, on page load, on mobile. Configured for Find a licence (specialist finder) only.

Why

During user research, a common observation has emerged that mobile users do not interact with the 'Filter' button.

Visual changes

Before (Find a licence)

After (Find a licence)

Anything else

alphagov/publishing-api#2471
alphagov/specialist-publisher#2369

[MartinJJones]

Changes look good to me overall, just one small comment.

[MartinJJones]

Probably a small nitpick, but I wonder if we should change isDesktop to isMobile and then update the logic within the method.

The reason for this suggestion is that the Design System grid for desktop has a min-width of 769px, so I think we are actually checking for Tablet or Desktop - https://github.com/alphagov/govuk-frontend/blob/87073ebbf6d10f5af1af6c28886cf83c9fd71980/packages/govuk-frontend/src/govuk/settings/_media-queries.scss#L13

[jon-kirwan]

Good point. The only problem is i'd have to reverse the logic which I think it might make it harder to read - not sure if you agree though? e.g.

if (!this.mq.matches) {
  this.toggleVisibility(true)
} else {
  this.toggleVisibility(false)
}

OptionSelect.prototype.toggleVisibility = function (isMobile) {
  if (isMobile) {
    if (this.isClosedOnLoadMobile === 'true' || this.isClosedOnLoad === 'true') {
      this.close()
    } else {
      this.setContainerHeight(201)
    }
  } else {
    if (this.isClosedOnLoad === 'true') {
      this.close()
    } else {
      this.setupHeight()
    }
  }
}

An alternative could be rename the variable to something like isTabletOrLarger?

[MartinJJones]

Yeah good point, I do like isTabletOrLarger, happy to go with that 👍