@nanoporetech-digital/components 4.9.4 → 5.0.0

package/docs-vscode.json

@@ -1330,24 +1330,20 @@
       "name": "nano-grid",
       "description": {
         "kind": "markdown",
-        "value": "A context-aware CSS grid implementation.\nUses it's own width to choose column number - not screen width."
+        "value": "A lightweight, context-aware CSS grid implementation.\n\n- Define multiple grids templates at different breakpoints\n- Uses `@container` queries to select the correct grid depending on the current dimensions\n- Use `grid-states=\"...\"` on direct descendants for `column` / `row` - `start` / `end`\n- SSR optimised"
       },
       "attributes": [
-        {
-          "name": "content-panel",
-          "description": "shortcut for a traditional website like grid (requires more than one row). The second row will auto expand to fill the grid height. The first row and > 2nd row will be the size of their content. e.g. header, body and footer."
-        },
-        {
-          "name": "full-height",
-          "description": "Helper to make grid items expand to full height in IE11"
-        },
         {
           "name": "l-cols",
           "description": "the number of columns the grid has at the large breakpoint."
         },
         {
           "name": "l-size",
-          "description": "the component's large breakpoint. Note - all breakpoints are based on component width, not screen width."
+          "description": "the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.\nWill default to `px` if no unit supplied e.g. `20rem`"
+        },
+        {
+          "name": "l-tpl",
+          "description": "Optional large `grid-template`. *Note* - you must set `lCols` for this to take affect"
         },
         {
           "name": "m-cols",
@@ -1355,7 +1351,11 @@
         },
         {
           "name": "m-size",
-          "description": "the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width."
+          "description": "the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.\nWill default to `px` if no unit supplied e.g. `20rem`"
+        },
+        {
+          "name": "m-tpl",
+          "description": "Optional medium `grid-template`. *Note* - you must set `mCols` for this to take affect"
         },
         {
           "name": "s-cols",
@@ -1363,7 +1363,11 @@
         },
         {
           "name": "s-size",
-          "description": "the component's small breakpoint. Note - all breakpoints are based on component width, not screen width."
+          "description": "the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.\nWill default to `px` if no unit supplied e.g. `20rem`"
+        },
+        {
+          "name": "s-tpl",
+          "description": "Optional small `grid-template`. *Note* - you must set `sCols` for this to take affect"
         },
         {
           "name": "show-helper",
@@ -1375,11 +1379,19 @@
         },
         {
           "name": "xl-size",
-          "description": "the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width."
+          "description": "the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.\nWill default to `px` if no unit supplied e.g. `20rem`"
+        },
+        {
+          "name": "xl-tpl",
+          "description": "Optional xl `grid-template`. *Note* - you must set `xlCols` for this to take affect"
         },
         {
           "name": "xxl-cols",
           "description": "the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint)"
+        },
+        {
+          "name": "xxl-tpl",
+          "description": "Optional xxl `grid-template`. *Note* - you must set `xxlCols` for this to take affect"
         }
       ]
     },
@@ -1387,14 +1399,9 @@
       "name": "nano-grid-item",
       "description": {
         "kind": "markdown",
-        "value": "Grid items to be used with [grid](/story/nano-components-grid) elements"
+        "value": ""
       },
-      "attributes": [
-        {
-          "name": "grid-states",
-          "description": "How to position this item within it's parent grid at different break points. Examples:\nxl-col-span-2\nl-col-start-2\nxxl-row-span-2\nm-row-start-2"
-        }
-      ]
+      "attributes": []
     },
     {
       "name": "nano-hero",
@@ -1405,7 +1412,7 @@
       "attributes": [
         {
           "name": "img-src",
-          "description": "src for backgronund image. For more control use the `background` slot instead."
+          "description": "src for background image. For more control use the `background` slot instead."
         },
         {
           "name": "img-src-set",
@@ -1530,6 +1537,10 @@
           "name": "disabled",
           "description": "Set to true to disable the button."
         },
+        {
+          "name": "form",
+          "description": "The HTML form element or form element id.\nUsed to submit a form when the button is not a child of the form."
+        },
         {
           "name": "href",
           "description": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
@@ -1550,6 +1561,10 @@
           "name": "name",
           "description": "The name of the button, submitted as a pair with the button’s value as part of the form data."
         },
+        {
+          "name": "rel",
+          "description": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)"
+        },
         {
           "name": "show-tooltip",
           "description": "display the label as a `<nano-tooltip />`"
@@ -2470,6 +2485,71 @@
         }
       ]
     },
+    {
+      "name": "nano-sortable",
+      "description": {
+        "kind": "markdown",
+        "value": "An accessible and flexible re-order / sort utility component.\n\n- Drag and drop via mouse, touch or keyboard\n- Live announcements for screen readers\n- Works with or without an explicit handle (although with is preferable)"
+      },
+      "attributes": [
+        {
+          "name": "animation-enabled",
+          "description": "Items being sorted will animate into place"
+        },
+        {
+          "name": "animation-timing",
+          "description": "The css animation timing applied when `animationEnabled` is `true`"
+        },
+        {
+          "name": "drag-resize",
+          "description": "Dragged items by default, will take whatever default css is applied in situ.\nWhen sortable items' dimensions are dynamic (i.e they can shrink / grow via the space allowed) dragging items can look 'wrong'.\nApply `dragResize` to read & recreate the dragged items current dimensions when dragged."
+        },
+        {
+          "name": "dragged-class",
+          "description": "Use this class to change how the element looks whilst being sorted"
+        },
+        {
+          "name": "dropzone-active-class",
+          "description": "Used in-conjunction with `dropzoneSelector`, applied when a dropzone is dragged over"
+        },
+        {
+          "name": "dropzone-selector",
+          "description": "When dragging between grouped collections of items, it is possible to drag all sortable items from one group to another.\nAt that point, you will not be able to drag items back to the original group.\nA `dropzoneSelector` allows you to define a placeholder area where items can always be dropped."
+        },
+        {
+          "name": "handle-dragged-class",
+          "description": "Use this class to change how the handle looks whilst being sorted"
+        },
+        {
+          "name": "handle-selector",
+          "description": "A css query selector which matches an element *within* the `itemSelector` element\nwhich will act like a drag handle. **Note** For keyboard a11y it's recommended\nto use `handleSelector` when possible. Alternatively, the `createKeyboardHandle` prop will be used"
+        },
+        {
+          "name": "helper-text",
+          "description": "Accessibility helper text applied to handle controls"
+        },
+        {
+          "name": "item-selector",
+          "description": "A css query selector which matches a set of elements that should be sortable. e.g. `<li>` or `<tr>`"
+        },
+        {
+          "name": "orientation",
+          "description": "The axis to lock dragging elements to. `undefined` means any axis",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        },
+        {
+          "name": "placeholder-class",
+          "description": "Use this class to change how the element looks when acting as a placeholder"
+        }
+      ]
+    },
     {
       "name": "nano-spinner",
       "description": {
@@ -2741,7 +2821,7 @@
       "name": "nano-table",
       "description": {
         "kind": "markdown",
-        "value": "A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.\n\n- Built-in search\n- Built-in column filter\n- Built-in column sort\n- Easily swap in API / async based search / filter & sort\n- Pin headers, footers, rows, columns\n- Drag-&-Drop columns to re-order\n- Add custom rendering at every level\n- Add custom properties at every level"
+        "value": "A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.\n\n- Built-in search\n- Built-in column filter\n- Built-in column sort\n- Easily swap in API / async based search / filter & sort\n- Pin headers, footers, rows, columns\n- Add custom rendering at every level\n- Add custom properties at every level"
       },
       "attributes": [
         {
@@ -2752,10 +2832,6 @@
           "name": "caption",
           "description": "A descriptive title of the table.\nYou must use this or the `slot=\"caption\"` for accessibility"
         },
-        {
-          "name": "default-col-draggable",
-          "description": "The default draggable option for all columns.\n`true` will enable column drag-to-reorder unless you set `draggable: false` on a column\n`false` will disable column drag-to-reorder unless you set `draggable: true` on a column"
-        },
         {
           "name": "default-sort",
           "description": "The default sortable option for all columns.\n`true` will enable column sorting unless you set `sortable: false` on a column\n`false` will disable column sorting unless you set `sortable: true` on a column"