Breakpoint (#733)

* feat(breakpoint): add Breakpoint

* docs(breakpoint): update docs

* refactor(breakpoint): add prop descriptions, type slot

* docs: add missing semicolon to last typedef

* docs: decrease margin bottom for inline snippet

* docs: add Breakpoint to new components [ci skip]

* docs(config): use "scripts-markup-styles" for svelteSortOrder [ci skip]

* docs(breakpoint): label on:match event [ci skip]

docs/src/COMPONENT_API.json

@@ -1,5 +1,5 @@
 {
-  "total": 170,
+  "total": 171,
   "components": [
     {
       "moduleName": "Accordion",
@@ -344,6 +344,67 @@
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }
     },
+    {
+      "moduleName": "Breakpoint",
+      "filePath": "src/Breakpoint/Breakpoint.svelte",
+      "props": [
+        {
+          "name": "size",
+          "kind": "let",
+          "description": "Determine the current Carbon grid breakpoint size",
+          "type": "BreakpointSize",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "sizes",
+          "kind": "let",
+          "description": "Carbon grid sizes as an object",
+          "type": "Record<BreakpointSize, boolean>",
+          "value": "{     sm: false,     md: false,     lg: false,     xlg: false,     max: false,   }",
+          "isFunction": 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,
+          "constant": true,
+          "reactive": false
+        }
+      ],
+      "slots": [
+        {
+          "name": "__default__",
+          "default": true,
+          "slot_props": "{ size: BreakpointSize; sizes: Record<BreakpointSize, boolean>; }"
+        }
+      ],
+      "events": [
+        {
+          "type": "dispatched",
+          "name": "match",
+          "detail": "{ size: BreakpointSize; breakpointValue: BreakpointValue; }"
+        }
+      ],
+      "typedefs": [
+        {
+          "type": "\"sm\" | \"md\" | \"lg\" | \"xlg\" | \"max\"",
+          "name": "BreakpointSize",
+          "ts": "type BreakpointSize = \"sm\" | \"md\" | \"lg\" | \"xlg\" | \"max\""
+        },
+        {
+          "type": "320 | 672 | 1056 | 1312 | 1584",
+          "name": "BreakpointValue",
+          "ts": "type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584"
+        }
+      ]
+    },
     {
       "moduleName": "Button",
       "filePath": "src/Button/Button.svelte",

docs/src/components/ComponentApi.svelte

@@ -141,7 +141,7 @@
     style="margin-top: var(--cds-spacing-08)"
     class="my-layout-01-03"
     type="multi"
-    code="{component.typedefs.map((t) => t.ts).join(';\n\n')}"
+    code="{component.typedefs.map((t) => t.ts).join(';\n\n')};"
   />
 {:else}
   <p class="my-layout-01-03">No typedefs.</p>

docs/src/components/InlineSnippet.svelte

@@ -11,6 +11,6 @@
 
 <style>
   div {
-    margin-bottom: var(--cds-spacing-04);
+    margin-bottom: var(--cds-spacing-03);
   }
 </style>

docs/src/pages/_layout.svelte

@@ -20,7 +20,7 @@
   import Footer from "../components/Footer.svelte";
 
   const deprecated = ["ToggleSmall", "Icon"];
-  const new_components = ["ProgressBar", "RecursiveList", "TreeView"];
+  const new_components = ["Breakpoint", "RecursiveList", "TreeView"];
 
   let isOpen = false;
   let isSideNavOpen = true;

docs/src/pages/components/Breakpoint.svx

@@ -0,0 +1,27 @@
+
+<script>
+  import {
+    Breakpoint, UnorderedList, ListItem
+  } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+The [Carbon Design System grid implementation](https://carbondesignsystem.com/guidelines/2x-grid/implementation#responsive-options) defines five responsive breakpoints:
+
+<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
+  <ListItem><strong>Small</strong>: less than 672px</ListItem>
+  <ListItem><strong>Medium</strong>: 672 - 1056px</ListItem>
+  <ListItem><strong>Large</strong>: 1056 - 1312px</ListItem>
+  <ListItem><strong>X-Large</strong>: 1312 - 1584px</ListItem>
+  <ListItem><strong>Max</strong>: greater than 1584px</ListItem>
+</UnorderedList>
+
+This utility component uses the [Window.matchMedia API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) to declaratively determine the current Carbon breakpoint size.
+
+### Default
+
+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).
+
+<FileSource src="/framed/Breakpoint/Breakpoint" />

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

@@ -0,0 +1,28 @@
+<script>
+  import { Breakpoint } from "carbon-components-svelte";
+
+  let size;
+  let events = [];
+</script>
+
+<Breakpoint bind:size on:match="{(e) => (events = [...events, e.detail])}" />
+
+<p>Resize the width of your browser.</p>
+<h6>Breakpoint size</h6>
+<h1>{size}</h1>
+
+<h6>on:match</h6>
+<pre>
+  {JSON.stringify(events,null, 2)}
+</pre>
+
+<style>
+  p,
+  h1 {
+    margin-bottom: var(--cds-spacing-08);
+  }
+
+  h6 {
+    margin-bottom: var(--cds-spacing-03);
+  }
+</style>

docs/svelte.config.js

@@ -68,6 +68,7 @@ function plugin() {
       const formattedCode = format(scriptBlock + node.value, {
         parser: "svelte",
         svelteBracketNewLine: true,
+        svelteSortOrder: "scripts-markup-styles",
       });
       const highlightedCode = Prism.highlight(
         formattedCode,