sebnitu / vrembem / 11268522804

94%

main: 100%

push

github

Create new mediaQuery plugin to replace Breakpoint class (#2067)

## What changed?

This PR creates the new `mediaQuery` plugin which replaces the use of the `Breakpoint` class. Breakpoint related features and logic have been removed from the base `Drawer` component and are now enabled by the use of the `mediaQuery` plugin (example below). This plugin replicates all the previous features of breakpoint and builds on top of it with more flexibility, options and the ability to use it in other components as needed.

**New options and features**

- `dataBreakpoint: "breakpoint"` The data attributes to get the breakpoint values from.
- `dataMediaQuery: "media-query"` The data attributes to get the media query value from.
- `token: "{{BP}}"` The string token to be replace in the media query string with the breakpoint value.
- `breakpoint: null` Sets a global breakpoint. Can be overridden by setting a data attribute value. *Notice: setting this option will enable a media query breakpoint on all entries.*
- `mediaQuery: "(min-width: {{BP}})"` The default media query string to use. Can be overridden by setting a data attribute value.
- `breakpoints: {}` Maps entry ID or breakpoint key to breakpoint values. This is referenced when getting an entries breakpoint value.
- `mediaQueries: {}` Maps entry ID's to a media query strings. Media query may contain a token. This is referenced when getting an entries media query string.
- `onChange: () => {}` The function to run when the MediaQueryList triggers a `"change"` event. This is run once on initial mount.

**Example usage**

```js
import Drawer from "@vrembem/drawer";
import { mediaQuery } from "@vrembem/core";

new Drawer({
  plugins: [
    mediaQuery({
      onChange: (event, entry) => {
        entry.mode = (event.matches) ? "inline" : "modal";
      }
    })
  ]
});
```

```html
<aside id="[unique-id]" class="drawer" data-breakpoint="md">
  ...
</aside>
```

**Additional cha... (continued)

647 of 647 branches covered (100.0%)

Branch coverage included in aggregate %.

166 of 166 new or added lines in 6 files covered. (100.0%)

2715 of 2715 relevant lines covered (100.0%)

125.94 hits per line