refactor icons (breaking changes), documentation overhaul

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aotearoan/neon",
   "description": "Neon is a design library of components for use with VueJS. It supports light and dark modes and can be extended to support multiple themes",
-  "version": "0.32.6",
+  "version": "0.33.0",
   "main": "dist/@aotearoan/neon.umd.js",
   "types": "dist/@aotearoan/components.d.ts",
   "files": [

public/docs/layout/drawer/NeonDrawer.json

@@ -5,25 +5,25 @@
   "exportName": "default",
   "props": [
     {
-      "name": "fullWidth",
+      "name": "open",
       "tags": {},
-      "description": "If true, remove the padding applied to the drawer.",
+      "description": "Set the drawer to visible.",
       "type": {
         "name": "boolean"
       },
-      "defaultValue": {
-        "func": false,
-        "value": "false"
-      }
+      "required": true
     },
     {
-      "name": "open",
+      "name": "fullWidth",
       "tags": {},
-      "description": "Set the drawer to visible.",
+      "description": "If true, remove the padding applied to the drawer.",
       "type": {
         "name": "boolean"
       },
-      "required": true
+      "defaultValue": {
+        "func": false,
+        "value": "false"
+      }
     },
     {
       "name": "position",

public/docs/layout/grid/NeonGrid.json

@@ -1,5 +1,5 @@
 {
-  "description": "A CSS grid component for top level layout within a page. This component provides functionality to dynamically generate the grid CSS and inject it into the page as well as defining the grid for different responsive breakpoints. The defined grid can be updated programmatically which is useful for adding/removing items from the grid.\n\nNeonGrid provides a slot for a set of NeonGridArea components, defining the contents for the various grid areas on the page.",
+  "description": "<p>A CSS grid component for top level layout within a page. This component provides functionality to dynamically\ngenerate the grid CSS and inject it into the page as well as defining the grid for different responsive breakpoints.\nThe defined grid can be updated programmatically which is useful for adding/removing items from the grid.</p>\n\n<p>NeonGrid provides a slot for a set of NeonGridArea components, defining the contents for the various grid areas on\nthe page.</p>",
   "tags": {},
   "displayName": "NeonGrid",
   "exportName": "default",

public/docs/layout/page/NeonPage.json

@@ -1,15 +1,16 @@
 {
-  "description": "A \"page\" component, this is defined as a wrapper around the contents (NeonGrid, etc) and footer which provides the correct responsive layout accounting for NeonTopNav and NeonSideNav components being used.",
+  "description": "A \"page\" component, this is defined as a wrapper around the contents (NeonGrid, etc) and footer which provides the\ncorrect responsive layout accounting for NeonTopNav and NeonSideNav components being used.",
   "tags": {},
   "displayName": "NeonPage",
   "exportName": "default",
   "slots": [
     {
-      "name": "top-nav"
+      "name": "top-nav",
+      "description": "The <strong>NeonTopNav</strong> slot. This is required to ensure the correct responsive page layout."
     },
     {
       "name": "content",
-      "description": "the page contents"
+      "description": "The main page content"
     }
   ]
 }

public/docs/layout/side-nav/NeonSideNav.json

@@ -1,5 +1,5 @@
 {
-  "description": "A side navigation component. This is displayed at the <em>larger-than-tablet</em> breakpoint and hidden at <em>tablet</em> and below. Use this to display menus, navigation or other items related to the main page content. A side nave had two slots, one for <em>sticky</em> content which remains visible at all times. The other is for <em>scrolling content</em> which is allowed to overflow below the bottom of the page.",
+  "description": "A side navigation component. This is displayed at the <em>larger-than-tablet</em> breakpoint and hidden at\n<em>tablet</em> and below. Use this to display menus, navigation or other items related to the main page content. A\nside nave had two slots, one for <em>sticky</em> content which remains visible at all times. The other is for\n<em>scrolling content</em> which is allowed to overflow below the bottom of the page.",
   "tags": {},
   "displayName": "NeonSideNav",
   "exportName": "default",

public/docs/layout/top-nav/NeonTopNav.json

@@ -1,5 +1,5 @@
 {
-  "description": "Top navigation component. This is a fixed container at the top of the page for displaying the site logo, menus, user login and other important actions which need to be visible at all times.",
+  "description": "Top navigation component. This is a fixed container at the top of the page for displaying the site logo, menus, user\nlogin and other important actions which need to be visible at all times.",
   "tags": {},
   "displayName": "NeonTopNav",
   "exportName": "default",

public/docs/navigation/dropdown-menu/NeonDropdownMenu.json

@@ -1,21 +1,9 @@
 {
-  "description": "A dropdown menu consisting of a button to open the menu and a list of menu items. Clicking on a menu item will result in navigating to the provided URL or notifying the parent component via the @click event.",
+  "description": "<p>A dropdown menu consisting of a button to open the menu and a list of menu items. Clicking on a menu item will result in navigating to the provided URL or notifying the parent component via the @click event.</p>\n<p><strong>Note:</strong> As well as the options described below, pass through attributes supported by <a href=\"/presentation/dropdown\">NeonDropdown</a> to change the style of the dropdown button.</p>",
   "tags": {},
   "displayName": "NeonDropdownMenu",
   "exportName": "default",
   "props": [
-    {
-      "name": "size",
-      "tags": {},
-      "description": "The size of the dropdown - Small, Medium or Large.",
-      "type": {
-        "name": "NeonSize"
-      },
-      "defaultValue": {
-        "func": false,
-        "value": "NeonSize.Medium"
-      }
-    },
     {
       "name": "model",
       "tags": {},
@@ -29,6 +17,18 @@
         ]
       },
       "required": true
+    },
+    {
+      "name": "size",
+      "tags": {},
+      "description": "The size of the dropdown - Small, Medium or Large.",
+      "type": {
+        "name": "NeonSize"
+      },
+      "defaultValue": {
+        "func": false,
+        "value": "NeonSize.Medium"
+      }
     }
   ],
   "events": [

public/docs/navigation/link/NeonLink.json

@@ -40,7 +40,7 @@
   "events": [
     {
       "name": "click",
-      "description": "emitted when the user clicks on the link. This is only useful when there is no <em>href</em> provided otherwise page navigation supersedes this event.",
+      "description": "<p>Emitted when the user clicks on the link. This is only useful when there is no <em>href</em> provided otherwise page navigation supersedes this event.</p>",
       "type": {
         "names": [
           "void"

public/docs/presentation/badge/NeonBadge.json

@@ -61,7 +61,19 @@
       },
       "defaultValue": {
         "func": false,
-        "value": "NeonFunctionalColor.Neutral"
+        "value": "NeonFunctionalColor.LowContrast"
+      }
+    },
+    {
+      "name": "disabled",
+      "tags": {},
+      "description": "Display the badge in the disable style",
+      "type": {
+        "name": "boolean"
+      },
+      "defaultValue": {
+        "func": false,
+        "value": "false"
       }
     }
   ]

public/docs/presentation/dropdown/NeonDropdown.json

@@ -1,5 +1,5 @@
 {
-  "description": "A general purpose dropdown component. This component consists of a button, to trigger the dropdown to open, and the dropdown content which is displayed above the page when the user clicks the button. This can be useful for secondary (perhaps more complex) actions for which there is not enough space on the page or the action is asynchronous allowing the user to perform the action and continue what they were doing. Examples are providing links to copy and letting the user send feedback.\n\nNeonDropdown is the basis for the NeonDropdownMenu component and the NeonSelect form component.",
+  "description": "<p>A general purpose dropdown component. This component consists of a button, to trigger the dropdown to open, and\nthe dropdown content which is displayed above the page when the user clicks the button.</p>\n<p>This can be useful for secondary (perhaps more complex) actions for which there is not enough space on the page or\nthe action is asynchronous allowing the user to perform the action and continue what they were doing. Examples are\nproviding links to copy and letting the user send feedback.</p>\n<p><strong>NeonDropdown</strong> is the basis for the <strong>NeonDropdownMenu</strong> component and the\n<strong>NeonSelect</strong> form component.</p>",
   "tags": {},
   "displayName": "NeonDropdown",
   "exportName": "default",

public/docs/presentation/expansion-indicator/NeonExpansionIndicator.json

@@ -16,12 +16,36 @@
         "value": "false"
       }
     },
+    {
+      "name": "inverse",
+      "tags": {},
+      "description": "Display the expansion indicator in the inverse text color",
+      "type": {
+        "name": "boolean"
+      },
+      "defaultValue": {
+        "func": false,
+        "value": "false"
+      }
+    },
+    {
+      "name": "disabled",
+      "tags": {},
+      "description": "Display the expansion indicator in the disabled color",
+      "type": {
+        "name": "boolean"
+      },
+      "defaultValue": {
+        "func": false,
+        "value": "false"
+      }
+    },
     {
       "name": "color",
       "tags": {},
       "description": "The color of the chevron.",
       "type": {
-        "name": "boolean"
+        "name": "NeonFunctionalColor"
       },
       "defaultValue": {
         "func": false,

public/docs/presentation/icon/NeonIcon.json

@@ -1,5 +1,5 @@
 {
-  "description": "A component for rendering SVG images. These images are generally, but not limited to, <em>icons</em>. This component can render any SVG of any size. Size is not restricted in the NeonIcon component but rather in the components using the icons. Generally, when talking about icons, this component is only used to build other components. But you may also find it useful for rendering SVG images, e.g. illustrations.\n\nThere is an icon registry where strings containing SVGs can be registered with a name and that name can but used with the NeonIcon component to render the image. If the paths in the SVG are given the attribute <strong>fill=\"currentColor\"</strong> they will automatically take on the color provided to NeonIcon.\n\nThis provides the advantage of only registering the icons you actually need, dynamically switching colors in Typescript/CSS without using a large icon font and not having to duplicate icon images to support multiple color variations, including light and dark modes.\n\nFor more detailed information please see <a href=\"/design/icons\">Icons</a>.",
+  "description": "<p>A component for rendering SVG images. These images are generally, but not limited to, <em>icons</em>. This\ncomponent can render any SVG of any size. Size is not restricted in the NeonIcon component but rather in the\ncomponents using the icons. Generally, when talking about icons, this component is only used to build other\ncomponents. But you may also find it useful for rendering SVG images, e.g. illustrations.</p>\n\n<p>There is an icon registry where strings containing SVGs can be registered with a name and that name can be used\nwith the NeonIcon component to render the image. Use the classes <em>neon-svg-fill</em> and <em>neon-svg--stroke</em>\nin the SVG elements to automatically apply the functional colors.</p>\n\n<p>This provides the advantage of only registering the icons you actually need, dynamically switching colors in\nTypescript/CSS without using a large icon font and not having to duplicate icon images to support multiple\ncolor variations (including light and dark modes).</p>\n\nFor more detailed information please see <a href=\"/presentation/icon\">Icons</a>.",
   "tags": {},
   "displayName": "NeonIcon",
   "exportName": "default",
@@ -20,6 +20,30 @@
       "type": {
         "name": "NeonFunctionalColor"
       }
+    },
+    {
+      "name": "inverse",
+      "tags": {},
+      "description": "Set the icon color to the inverse text color",
+      "type": {
+        "name": "boolean"
+      },
+      "defaultValue": {
+        "func": false,
+        "value": "false"
+      }
+    },
+    {
+      "name": "disabled",
+      "tags": {},
+      "description": "Apply a disabled style to the icon",
+      "type": {
+        "name": "boolean"
+      },
+      "defaultValue": {
+        "func": false,
+        "value": "false"
+      }
     }
   ]
 }

public/docs/presentation/label/NeonLabel.json

@@ -1,5 +1,5 @@
 {
-  "description": "Labels are used to tag or draw emphasis to properties of an item in the UI. Labels can be text only icon only or contain both text and icons.",
+  "description": "Labels are used to tag or emphasize properties of an item in the UI. Labels can be text only, icon only or contain both text and icons.",
   "tags": {},
   "exportName": "default",
   "displayName": "NeonLabel",

public/files/models/NeonTreeMenuModel.ts

@@ -11,7 +11,6 @@ export interface NeonTreeMenuSectionModel {
 export interface NeonTreeMenuLinkModel {
   label: TranslateResult;
   key: string;
-  keywords?: TranslateResult;
   href?: string;
   anchors?: string[];
 }