@momentum-design/components 0.0.27 → 0.0.29

package/dist/custom-elements.json

@@ -44,12 +44,12 @@
             },
             {
               "kind": "field",
-              "name": "scale",
+              "name": "size",
               "type": {
                 "text": "number | undefined"
               },
               "description": "Scale of the avatar",
-              "attribute": "scale"
+              "attribute": "size"
             },
             {
               "kind": "method",
@@ -85,12 +85,12 @@
               "fieldName": "src"
             },
             {
-              "name": "scale",
+              "name": "size",
               "type": {
                 "text": "number | undefined"
               },
               "description": "Scale of the avatar",
-              "fieldName": "scale"
+              "fieldName": "size"
             }
           ],
           "superclass": {
@@ -116,47 +116,37 @@
     },
     {
       "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",
-          "members": [
-            {
-              "kind": "field",
-              "name": "iconData",
-              "type": {
-                "text": "HTMLElement | undefined"
-              },
-              "privacy": "private"
-            },
+          "description": "",
+          "name": "Badge",
+          "slots": [
             {
-              "kind": "field",
-              "name": "lengthUnitFromContext",
-              "type": {
-                "text": "string | undefined"
-              },
-              "privacy": "private"
-            },
+              "description": "This is a default/unnamed slot",
+              "name": ""
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "name",
+              "name": "type",
               "type": {
-                "text": "string | undefined"
+                "text": "BadgeType | 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
             },
             {
               "kind": "field",
-              "name": "scale",
+              "name": "size",
               "type": {
                 "text": "number | undefined"
               },
-              "description": "Scale of the icon (works in combination with length unit)",
-              "attribute": "scale"
+              "description": "Scale of the badge (works in combination with length unit)\n\nDefault: `1`",
+              "attribute": "size"
             },
             {
               "kind": "field",
@@ -164,107 +154,94 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Length unit attribute for overridding length-unit from `IconProvider`",
+              "description": "Length unit attribute for scale\n\nDefault: `rem`",
               "attribute": "length-unit"
             },
             {
               "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"
-            },
-            {
-              "kind": "field",
-              "name": "iconProviderContext",
-              "privacy": "private"
+              "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": "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": "updateSize",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "updateSize",
-              "privacy": "private",
-              "description": "Updates the size by setting the width and height"
+              "name": "iconTemplate"
             },
             {
               "kind": "method",
-              "name": "setRoleOnIcon",
-              "privacy": "private"
+              "name": "textTemplate"
             },
             {
               "kind": "method",
-              "name": "setAriaLabelOnIcon",
-              "privacy": "private"
+              "name": "warningTemplate"
             }
           ],
           "attributes": [
             {
-              "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"
             },
             {
-              "name": "scale",
+              "name": "size",
               "type": {
                 "text": "number | undefined"
               },
-              "description": "Scale of the icon (works in combination with length unit)",
-              "fieldName": "scale"
+              "description": "Scale of the badge (works in combination with length unit)\n\nDefault: `1`",
+              "fieldName": "size"
             },
             {
               "name": "length-unit",
               "type": {
                 "text": "string | undefined"
               },
-              "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"
             }
           ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "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
         }
       ],
@@ -273,45 +250,63 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Icon",
-            "module": "components/icon/icon.component.js"
+            "name": "Badge",
+            "module": "components/badge/badge.component.js"
           }
         }
       ]
     },
     {
       "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 `size` attribute allows sizing 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 `size = 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": "sizeFromContext",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Name of the icon (= filename)",
+              "attribute": "name",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "scale",
+              "name": "size",
               "type": {
                 "text": "number | undefined"
               },
-              "description": "Scale of the badge (works in combination with length unit)\n\nDefault: `1`",
-              "attribute": "scale"
+              "description": "Size of the icon (works in combination with length unit)",
+              "attribute": "size"
             },
             {
               "kind": "field",
@@ -319,94 +314,114 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Length unit attribute for scale\n\nDefault: `rem`",
+              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
               "attribute": "length-unit"
             },
             {
               "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": "field",
+              "name": "iconProviderContext",
+              "privacy": "private",
+              "readonly": true
             },
             {
               "kind": "method",
-              "name": "updateSize",
-              "privacy": "private"
+              "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": "iconTemplate"
+              "name": "updateSize",
+              "privacy": "private",
+              "description": "Updates the size by setting the width and height"
             },
             {
               "kind": "method",
-              "name": "textTemplate"
+              "name": "setRoleOnIcon",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "warningTemplate"
+              "name": "setAriaLabelOnIcon",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "computedIconSize",
+              "privacy": "private",
+              "readonly": true
             }
           ],
           "attributes": [
             {
-              "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"
             },
             {
-              "name": "scale",
+              "name": "size",
               "type": {
                 "text": "number | undefined"
               },
-              "description": "Scale of the badge (works in combination with length unit)\n\nDefault: `1`",
-              "fieldName": "scale"
+              "description": "Size of the icon (works in combination with length unit)",
+              "fieldName": "size"
             },
             {
               "name": "length-unit",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Length unit attribute for scale\n\nDefault: `rem`",
+              "description": "Length unit attribute for overriding 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"
             }
           ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "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 `size` attribute allows sizing 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 `size = 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
         }
       ],
@@ -415,8 +430,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Badge",
-            "module": "components/badge/badge.component.js"
+            "name": "Icon",
+            "module": "components/icon/icon.component.js"
           }
         }
       ]
@@ -460,12 +475,23 @@
               "kind": "field",
               "name": "lengthUnit",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
               "description": "Length unit used for sizing of icons, default: 'em'",
               "attribute": "length-unit",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "number | undefined"
+              },
+              "default": "DEFAULTS.LENGTH_UNIT_SIZE[DEFAULTS.LENGTH_UNIT]",
+              "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
+              "attribute": "size",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "updateValuesInContext",
@@ -502,10 +528,19 @@
             {
               "name": "length-unit",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
               "description": "Length unit used for sizing of icons, default: 'em'",
               "fieldName": "lengthUnit"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "number | undefined"
+              },
+              "default": "DEFAULTS.LENGTH_UNIT_SIZE[DEFAULTS.LENGTH_UNIT]",
+              "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
+              "fieldName": "size"
             }
           ],
           "superclass": {

package/dist/react/icon/index.d.ts

@@ -10,10 +10,10 @@ import Component from '../../components/icon';
  * Once fetched, the icon will be mounted. If fetching wasn't successful,
  * nothing will be shown.
  *
- * The `scale` attribute allows scaling the icon based on the provided
+ * The `size` attribute allows sizing the icon based on the provided
  * `length-unit` attribute (which will either come from the IconProvider or
  * could be overridden per icon). For example:
- * if `scale = 1` and `length-unit = 'em'`, the size of the icon will be
+ * if `size = 1` and `length-unit = 'em'`, the size of the icon will be
  * `width: 1em; height: 1em`.
  *
  * For accessibility the `role` and `aria-label` of the icon can be set.

package/dist/react/icon/index.js

@@ -16,10 +16,10 @@ const icon_constants_1 = require("../../components/icon/icon.constants");
  * Once fetched, the icon will be mounted. If fetching wasn't successful,
  * nothing will be shown.
  *
- * The `scale` attribute allows scaling the icon based on the provided
+ * The `size` attribute allows sizing the icon based on the provided
  * `length-unit` attribute (which will either come from the IconProvider or
  * could be overridden per icon). For example:
- * if `scale = 1` and `length-unit = 'em'`, the size of the icon will be
+ * if `size = 1` and `length-unit = 'em'`, the size of the icon will be
  * `width: 1em; height: 1em`.
  *
  * For accessibility the `role` and `aria-label` of the icon can be set.

package/dist/react/index.d.ts

@@ -1,6 +1,6 @@
 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';

package/dist/react/index.js

@@ -3,13 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeProvider = exports.Text = exports.IconProvider = exports.Badge = exports.Icon = exports.Avatar = void 0;
+exports.ThemeProvider = exports.Text = exports.IconProvider = exports.Icon = exports.Badge = 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");
 Object.defineProperty(exports, "IconProvider", { enumerable: true, get: function () { return __importDefault(iconprovider_1).default; } });
 var text_1 = require("./text");

package/package.json

@@ -31,5 +31,5 @@
     "@momentum-design/icons": "*",
     "@momentum-design/tokens": "*"
   },
-  "version": "0.0.27"
+  "version": "0.0.29"
 }