breaking(breakpoint): add breakpointObserver store (#1092)

* breaking: re-name event "on:match" to "on:change" in `Breakpoint.svelte`

* feat: add `breakpointObserver` read-only store

* refactor: export breakpoint constants from `breakpoints.js`

docs/src/COMPONENT_API.json

@@ -387,17 +387,6 @@
           "isFunctionDeclaration": false,
           "constant": false,
           "reactive": true
-        },
-        {
-          "name": "breakpoints",
-          "kind": "const",
-          "description": "Reference the Carbon grid breakpoints",
-          "type": "Record<BreakpointSize, BreakpointValue>",
-          "value": "{     sm: 320,     md: 672,     lg: 1056,     xlg: 1312,     max: 1584,   }",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "constant": true,
-          "reactive": false
         }
       ],
       "slots": [
@@ -410,7 +399,7 @@
       "events": [
         {
           "type": "dispatched",
-          "name": "match",
+          "name": "change",
           "detail": "{ size: BreakpointSize; breakpointValue: BreakpointValue; }"
         }
       ],

docs/src/pages/components/Breakpoint.svx

@@ -22,6 +22,14 @@ This utility component uses the [Window.matchMedia API](https://developer.mozill
 
 Bind to the `size` prop to determine the current breakpoint size. Possible values include: `"sm" | "md" | "lg" | "xlg" | "max"`.
 
-The `"on:match"` event will fire only when a breakpoint change event occurs (e.g., the browser width is resized).
+The `"on:change"` event will fire when the size is initially determined and when a breakpoint change event occurs (e.g., the browser width is resized).
 
-<FileSource src="/framed/Breakpoint/Breakpoint" />
+<FileSource src="/framed/Breakpoint/Breakpoint" />
+
+### Store and Breakpoint Values
+
+As an alternative to the component, `breakpointObserver` can be used to get the current size as a Svelte store. The store has two additional functions which create derived stores that return a `boolean` indicating whether the size is smaller/larger than a certain breakpoint.
+
+There also exists a `breakpoints` dictionary mapping from `BreakpointSize` to `BreakpointValue`.
+
+<FileSource src="/framed/Breakpoint/BreakpointObserver" />

docs/src/pages/framed/Breakpoint/Breakpoint.svelte

@@ -5,13 +5,13 @@
   let events = [];
 </script>
 
-<Breakpoint bind:size on:match="{(e) => (events = [...events, e.detail])}" />
+<Breakpoint bind:size on:change="{(e) => (events = [...events, e.detail])}" />
 
 <p>Resize the width of your browser.</p>
 <h6>Breakpoint size</h6>
 <h1>{size}</h1>
 
-<h6>on:match</h6>
+<h6>on:change</h6>
 <pre>
   {JSON.stringify(events, null, 2)}
 </pre>

docs/src/pages/framed/Breakpoint/BreakpointObserver.svelte

@@ -0,0 +1,15 @@
+<script>
+  import {
+    breakpointObserver,
+    breakpoints,
+  } from "carbon-components-svelte/src/Breakpoint";
+
+  const size = breakpointObserver();
+  const smaller = size.smallerThan("md");
+  const larger = size.largerThan("md");
+</script>
+
+<p>Current breakpoint size: {$size}</p>
+<p>Current breakpoint value: {breakpoints[$size]}px</p>
+<p>Smaller than medium: {$smaller}</p>
+<p>Larger than medium: {$larger}</p>