@momentum-design/components - npm Package Compare versions

Comparing version 0.0.26 to 0.0.27

dist/custom-elements.json

@@ -119,23 +119,33 @@ {
       "kind": "javascript-module",
-      "path": "components/badge/badge.component.js",
+      "path": "components/icon/icon.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "Badge",
-          "slots": [
-            {
-              "description": "This is a default/unnamed slot",
-              "name": ""
-            }
-          ],
+          "description": "Icon component, which has to be mounted inside of a `IconProvider`\ncomponent.\n\nThe `IconProvider` component defines where icons should be consumed from (`url`).\nThis `Icon` component accepts the `name` attribute, which will be\nthe file name of the icon to be loaded from the given `url`.\n\nOnce fetched, the icon will be mounted. If fetching wasn't successful,\nnothing will be shown.\n\nThe `scale` attribute allows scaling the icon based on the provided\n`length-unit` attribute (which will either come from the IconProvider or\ncould be overridden per icon). For example:\nif `scale = 1` and `length-unit = 'em'`, the size of the icon will be\n`width: 1em; height: 1em`.\n\nFor accessibility the `role` and `aria-label` of the icon can be set.",
+          "name": "Icon",
           "members": [
             {
               "kind": "field",
-              "name": "type",
+              "name": "iconData",
               "type": {
-                "text": "BadgeType | undefined"
+                "text": "HTMLElement | undefined"
               },
-              "description": "Type of the badge\nCan be `regular`, `icon`, `text` or `warning`\n\nDefault: `regular`",
-              "attribute": "type",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "lengthUnitFromContext",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Name of the icon (= filename)",
+              "attribute": "name",
               "reflects": true
@@ -149,3 +159,3 @@ },
               },
-              "description": "Scale of the badge (works in combination with length unit)\n\nDefault: `1`",
+              "description": "Scale of the icon (works in combination with length unit)",
               "attribute": "scale"
@@ -159,3 +169,3 @@ },
               },
-              "description": "Length unit attribute for scale\n\nDefault: `rem`",
+              "description": "Length unit attribute for overridding length-unit from `IconProvider`",
               "attribute": "length-unit"
@@ -165,21 +175,23 @@ },
               "kind": "field",
-              "name": "iconName",
+              "name": "role",
               "type": {
-                "text": "string | undefined"
+                "text": "string | null"
               },
-              "description": "If `type` is set to `icon`, attribute `iconName` can\nbe used to choose which icon should be shown\n\nIf no `iconName` is provided, no icon will be rendered.",
-              "attribute": "icon-name"
+              "default": "null",
+              "description": "Role attribute to be set for accessibility",
+              "attribute": "role"
             },
             {
               "kind": "field",
-              "name": "text",
+              "name": "ariaLabel",
               "type": {
-                "text": "string | undefined"
+                "text": "string | null"
               },
-              "description": "If `type` is set to `text`, attribute `text` can\nbe used to pass in any text to be displayed in the badge.",
-              "attribute": "text"
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "attribute": "aria-label"
             },
             {
-              "kind": "method",
-              "name": "updateSize",
+              "kind": "field",
+              "name": "iconProviderContext",
               "privacy": "private"
@@ -189,11 +201,21 @@ },
               "kind": "method",
-              "name": "iconTemplate"
+              "name": "getIconData",
+              "privacy": "private",
+              "description": "Get Icon Data function which will fetch the icon (currently only svg)\nand sets state and attributes once fetched successfully"
             },
             {
               "kind": "method",
-              "name": "textTemplate"
+              "name": "updateSize",
+              "privacy": "private",
+              "description": "Updates the size by setting the width and height"
             },
             {
               "kind": "method",
-              "name": "warningTemplate"
+              "name": "setRoleOnIcon",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setAriaLabelOnIcon",
+              "privacy": "private"
             }
@@ -203,8 +225,8 @@ ],
             {
-              "name": "type",
+              "name": "name",
               "type": {
-                "text": "BadgeType | undefined"
+                "text": "string | undefined"
               },
-              "description": "Type of the badge\nCan be `regular`, `icon`, `text` or `warning`\n\nDefault: `regular`",
-              "fieldName": "type"
+              "description": "Name of the icon (= filename)",
+              "fieldName": "name"
             },
@@ -216,3 +238,3 @@ {
               },
-              "description": "Scale of the badge (works in combination with length unit)\n\nDefault: `1`",
+              "description": "Scale of the icon (works in combination with length unit)",
               "fieldName": "scale"
@@ -225,20 +247,22 @@ },
               },
-              "description": "Length unit attribute for scale\n\nDefault: `rem`",
+              "description": "Length unit attribute for overridding length-unit from `IconProvider`",
               "fieldName": "lengthUnit"
             },
             {
-              "name": "icon-name",
+              "name": "role",
               "type": {
-                "text": "string | undefined"
+                "text": "string | null"
               },
-              "description": "If `type` is set to `icon`, attribute `iconName` can\nbe used to choose which icon should be shown\n\nIf no `iconName` is provided, no icon will be rendered.",
-              "fieldName": "iconName"
+              "default": "null",
+              "description": "Role attribute to be set for accessibility",
+              "fieldName": "role"
             },
             {
-              "name": "text",
+              "name": "aria-label",
               "type": {
-                "text": "string | undefined"
+                "text": "string | null"
               },
-              "description": "If `type` is set to `text`, attribute `text` can\nbe used to pass in any text to be displayed in the badge.",
-              "fieldName": "text"
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
             }
@@ -250,5 +274,4 @@ ],
           },
-          "tagName": "mdc-badge",
-          "summary": "This is MyElement",
-          "jsDoc": "/**\n * @slot - This is a default/unnamed slot\n *\n * @summary This is MyElement\n *\n * @tag mdc-badge\n * @tagname mdc-badge\n */",
+          "tagName": "mdc-icon",
+          "jsDoc": "/**\n * Icon component, which has to be mounted inside of a `IconProvider`\n * component.\n *\n * The `IconProvider` component defines where icons should be consumed from (`url`).\n * This `Icon` component accepts the `name` attribute, which will be\n * the file name of the icon to be loaded from the given `url`.\n *\n * Once fetched, the icon will be mounted. If fetching wasn't successful,\n * nothing will be shown.\n *\n * The `scale` attribute allows scaling the icon based on the provided\n * `length-unit` attribute (which will either come from the IconProvider or\n * could be overridden per icon). For example:\n * if `scale = 1` and `length-unit = 'em'`, the size of the icon will be\n * `width: 1em; height: 1em`.\n *\n * For accessibility the `role` and `aria-label` of the icon can be set.\n *\n * @tag mdc-icon\n * @tagname mdc-icon\n */",
           "customElement": true
@@ -262,4 +285,4 @@ }
           "declaration": {
-            "name": "Badge",
-            "module": "components/badge/badge.component.js"
+            "name": "Icon",
+            "module": "components/icon/icon.component.js"
           }
@@ -271,33 +294,23 @@ }
       "kind": "javascript-module",
-      "path": "components/icon/icon.component.js",
+      "path": "components/badge/badge.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Icon component, which has to be mounted inside of a `IconProvider`\ncomponent.\n\nThe `IconProvider` component defines where icons should be consumed from (`url`).\nThis `Icon` component accepts the `name` attribute, which will be\nthe file name of the icon to be loaded from the given `url`.\n\nOnce fetched, the icon will be mounted. If fetching wasn't successful,\nnothing will be shown.\n\nThe `scale` attribute allows scaling the icon based on the provided\n`length-unit` attribute (which will either come from the IconProvider or\ncould be overridden per icon). For example:\nif `scale = 1` and `length-unit = 'em'`, the size of the icon will be\n`width: 1em; height: 1em`.\n\nFor accessibility the `role` and `aria-label` of the icon can be set.",
-          "name": "Icon",
+          "description": "",
+          "name": "Badge",
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot",
+              "name": ""
+            }
+          ],
           "members": [
             {
               "kind": "field",
-              "name": "iconData",
+              "name": "type",
               "type": {
-                "text": "HTMLElement | undefined"
+                "text": "BadgeType | undefined"
               },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "lengthUnitFromContext",
-              "type": {
-                "text": "string | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Name of the icon (= filename)",
-              "attribute": "name",
+              "description": "Type of the badge\nCan be `regular`, `icon`, `text` or `warning`\n\nDefault: `regular`",
+              "attribute": "type",
               "reflects": true
@@ -311,3 +324,3 @@ },
               },
-              "description": "Scale of the icon (works in combination with length unit)",
+              "description": "Scale of the badge (works in combination with length unit)\n\nDefault: `1`",
               "attribute": "scale"
@@ -321,3 +334,3 @@ },
               },
-              "description": "Length unit attribute for overridding length-unit from `IconProvider`",
+              "description": "Length unit attribute for scale\n\nDefault: `rem`",
               "attribute": "length-unit"
@@ -327,23 +340,21 @@ },
               "kind": "field",
-              "name": "role",
+              "name": "iconName",
               "type": {
-                "text": "string | null"
+                "text": "string | undefined"
               },
-              "default": "null",
-              "description": "Role attribute to be set for accessibility",
-              "attribute": "role"
+              "description": "If `type` is set to `icon`, attribute `iconName` can\nbe used to choose which icon should be shown\n\nIf no `iconName` is provided, no icon will be rendered.",
+              "attribute": "icon-name"
             },
             {
               "kind": "field",
-              "name": "ariaLabel",
+              "name": "text",
               "type": {
-                "text": "string | null"
+                "text": "string | undefined"
               },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "attribute": "aria-label"
+              "description": "If `type` is set to `text`, attribute `text` can\nbe used to pass in any text to be displayed in the badge.",
+              "attribute": "text"
             },
             {
-              "kind": "field",
-              "name": "iconProviderContext",
+              "kind": "method",
+              "name": "updateSize",
               "privacy": "private"
@@ -353,21 +364,11 @@ },
               "kind": "method",
-              "name": "getIconData",
-              "privacy": "private",
-              "description": "Get Icon Data function which will fetch the icon (currently only svg)\nand sets state and attributes once fetched successfully"
+              "name": "iconTemplate"
             },
             {
               "kind": "method",
-              "name": "updateSize",
-              "privacy": "private",
-              "description": "Updates the size by setting the width and height"
+              "name": "textTemplate"
             },
             {
               "kind": "method",
-              "name": "setRoleOnIcon",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "setAriaLabelOnIcon",
-              "privacy": "private"
+              "name": "warningTemplate"
             }
@@ -377,8 +378,8 @@ ],
             {
-              "name": "name",
+              "name": "type",
               "type": {
-                "text": "string | undefined"
+                "text": "BadgeType | undefined"
               },
-              "description": "Name of the icon (= filename)",
-              "fieldName": "name"
+              "description": "Type of the badge\nCan be `regular`, `icon`, `text` or `warning`\n\nDefault: `regular`",
+              "fieldName": "type"
             },
@@ -390,3 +391,3 @@ {
               },
-              "description": "Scale of the icon (works in combination with length unit)",
+              "description": "Scale of the badge (works in combination with length unit)\n\nDefault: `1`",
               "fieldName": "scale"
@@ -399,22 +400,20 @@ },
               },
-              "description": "Length unit attribute for overridding length-unit from `IconProvider`",
+              "description": "Length unit attribute for scale\n\nDefault: `rem`",
               "fieldName": "lengthUnit"
             },
             {
-              "name": "role",
+              "name": "icon-name",
               "type": {
-                "text": "string | null"
+                "text": "string | undefined"
               },
-              "default": "null",
-              "description": "Role attribute to be set for accessibility",
-              "fieldName": "role"
+              "description": "If `type` is set to `icon`, attribute `iconName` can\nbe used to choose which icon should be shown\n\nIf no `iconName` is provided, no icon will be rendered.",
+              "fieldName": "iconName"
             },
             {
-              "name": "aria-label",
+              "name": "text",
               "type": {
-                "text": "string | null"
+                "text": "string | undefined"
               },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
+              "description": "If `type` is set to `text`, attribute `text` can\nbe used to pass in any text to be displayed in the badge.",
+              "fieldName": "text"
             }
@@ -426,4 +425,5 @@ ],
           },
-          "tagName": "mdc-icon",
-          "jsDoc": "/**\n * Icon component, which has to be mounted inside of a `IconProvider`\n * component.\n *\n * The `IconProvider` component defines where icons should be consumed from (`url`).\n * This `Icon` component accepts the `name` attribute, which will be\n * the file name of the icon to be loaded from the given `url`.\n *\n * Once fetched, the icon will be mounted. If fetching wasn't successful,\n * nothing will be shown.\n *\n * The `scale` attribute allows scaling the icon based on the provided\n * `length-unit` attribute (which will either come from the IconProvider or\n * could be overridden per icon). For example:\n * if `scale = 1` and `length-unit = 'em'`, the size of the icon will be\n * `width: 1em; height: 1em`.\n *\n * For accessibility the `role` and `aria-label` of the icon can be set.\n *\n * @tag mdc-icon\n * @tagname mdc-icon\n */",
+          "tagName": "mdc-badge",
+          "summary": "This is MyElement",
+          "jsDoc": "/**\n * @slot - This is a default/unnamed slot\n *\n * @summary This is MyElement\n *\n * @tag mdc-badge\n * @tagname mdc-badge\n */",
           "customElement": true
@@ -437,4 +437,4 @@ }
           "declaration": {
-            "name": "Icon",
-            "module": "components/icon/icon.component.js"
+            "name": "Badge",
+            "module": "components/badge/badge.component.js"
           }
@@ -441,0 +441,0 @@ }

dist/models/component/component.component.d.ts

@@ -6,2 +6,5 @@ import { LitElement } from 'lit';
  *
+ * LitElement defines class and style automatically to allow passing in styling
+ * overrides. We are keeping those to allow for further customization.
+ *
  * @public
@@ -8,0 +11,0 @@ */

dist/models/component/component.component.js

@@ -8,2 +8,5 @@ "use strict";
  *
+ * LitElement defines class and style automatically to allow passing in styling
+ * overrides. We are keeping those to allow for further customization.
+ *
  * @public
@@ -10,0 +13,0 @@ */

dist/react/index.d.ts

 export { default as Avatar } from './avatar';
+export { default as Icon } from './icon';
 export { default as Badge } from './badge';
-export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
 export { default as Text } from './text';
 export { default as ThemeProvider } from './themeprovider';

dist/react/index.js

@@ -6,9 +6,9 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeProvider = exports.Text = exports.IconProvider = exports.Icon = exports.Badge = exports.Avatar = void 0;
+exports.ThemeProvider = exports.Text = exports.IconProvider = exports.Badge = exports.Icon = exports.Avatar = void 0;
 var avatar_1 = require("./avatar");
 Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return __importDefault(avatar_1).default; } });
+var icon_1 = require("./icon");
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return __importDefault(icon_1).default; } });
 var badge_1 = require("./badge");
 Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return __importDefault(badge_1).default; } });
-var icon_1 = require("./icon");
-Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return __importDefault(icon_1).default; } });
 var iconprovider_1 = require("./iconprovider");
@@ -15,0 +15,0 @@ Object.defineProperty(exports, "IconProvider", { enumerable: true, get: function () { return __importDefault(iconprovider_1).default; } });

package.json

@@ -34,3 +34,3 @@ {
   },
-  "version": "0.0.26"
+  "version": "0.0.27"
 }

No alert changes

Improved metrics

Total package byte prevSize

416536

increased by0.11%

Lines of code

3278

increased by0.18%

No dependency changes