vcc-ui - npm Package Compare versions

Comparing version 3.5.0 to 3.6.0

dist/components/icon-button/IconButton.js

@@ -18,4 +18,2 @@ "use strict";
 
-var _ = require("../..");
-
 var _useTheme = require("../../styling/use-theme");
@@ -49,24 +47,14 @@
   const size = 40;
-  const iconSize = size === 40 ? 24 : 16;
-  const color = getIconColor({
+  const iconSize = 24;
+  const iconType = `${iconName}-24`;
+  const defaultIcon = theme.getIcon(iconType, getIconColor({
     variant,
     isHovered: false,
     intent
-  });
-  const defaultIcon = (0, _.getIconSrcUrl)({
-    color,
-    name: iconName,
-    size: iconSize,
-    theme
-  });
-  const hoverIcon = (0, _.getIconSrcUrl)({
-    color: getIconColor({
-      variant,
-      isHovered: true,
-      intent
-    }),
-    name: iconName,
-    size: iconSize,
-    theme
-  });
+  }));
+  const hoverIcon = theme.getIcon(iconType, getIconColor({
+    variant,
+    isHovered: true,
+    intent
+  }));
   return /*#__PURE__*/_react.default.createElement(_click.Click, (0, _extends2.default)({
@@ -73,0 +61,0 @@ ref: ref

dist/components/icon-button/types.d.ts

 export declare const INTENTS: readonly ["primary", "destructive"];
 export declare const VARIANTS: readonly ["transparent", "outline", "media"];
-export declare const NAMES: readonly ["alarm", "avatar", "blocked", "calendar", "checkmark", "communication-chat", "communication-email", "communication-phone", "delete", "designyourown", "device", "extendedperiod", "externallink", "filter", "info", "leaf", "link", "map-map", "map-mappin", "map-route", "media-pause", "media-play", "more", "navigation-chevronback", "navigation-chevrondown", "navigation-chevronforward", "navigation-chevronup", "navigation-close", "navigation-menu", "profile", "sale", "save", "search", "settings", "share", "taxes", "thirdparty-arios", "thirdparty-blogger", "thirdparty-facebook", "thirdparty-instagram", "thirdparty-linkedin", "thirdparty-pinterest", "thirdparty-twitter", "thirdparty-vkontakte", "thirdparty-wechat", "thirdparty-weibo", "thirdparty-youtube", "time"];
+export declare const NAMES: readonly ["alarm", "avatar", "blocked", "calendar", "checkmark", "communication-chat", "communication-email", "communication-phone", "delete", "designyourown", "device", "extendedperiod", "externallink", "filter", "info", "link", "map-map", "map-mappin", "map-route", "media-pause", "media-play", "more", "navigation-chevronback", "navigation-chevrondown", "navigation-chevronforward", "navigation-chevronup", "navigation-close", "navigation-menu", "profile", "sale", "save", "search", "settings", "share", "taxes", "thirdparty-arios", "thirdparty-blogger", "thirdparty-facebook", "thirdparty-instagram", "thirdparty-linkedin", "thirdparty-pinterest", "thirdparty-twitter", "thirdparty-vkontakte", "thirdparty-wechat", "thirdparty-weibo", "thirdparty-youtube", "time"];

dist/components/icon-button/types.js

@@ -11,3 +11,3 @@ "use strict";
 exports.VARIANTS = VARIANTS;
-const NAMES = ['alarm', 'avatar', 'blocked', 'calendar', 'checkmark', 'communication-chat', 'communication-email', 'communication-phone', 'delete', 'designyourown', 'device', 'extendedperiod', 'externallink', 'filter', 'info', 'leaf', 'link', 'map-map', 'map-mappin', 'map-route', 'media-pause', 'media-play', 'more', 'navigation-chevronback', 'navigation-chevrondown', 'navigation-chevronforward', 'navigation-chevronup', 'navigation-close', 'navigation-menu', 'profile', 'sale', 'save', 'search', 'settings', 'share', 'taxes', 'thirdparty-arios', 'thirdparty-blogger', 'thirdparty-facebook', 'thirdparty-instagram', 'thirdparty-linkedin', 'thirdparty-pinterest', 'thirdparty-twitter', 'thirdparty-vkontakte', 'thirdparty-wechat', 'thirdparty-weibo', 'thirdparty-youtube', 'time'];
+const NAMES = ['alarm', 'avatar', 'blocked', 'calendar', 'checkmark', 'communication-chat', 'communication-email', 'communication-phone', 'delete', 'designyourown', 'device', 'extendedperiod', 'externallink', 'filter', 'info', 'link', 'map-map', 'map-mappin', 'map-route', 'media-pause', 'media-play', 'more', 'navigation-chevronback', 'navigation-chevrondown', 'navigation-chevronforward', 'navigation-chevronup', 'navigation-close', 'navigation-menu', 'profile', 'sale', 'save', 'search', 'settings', 'share', 'taxes', 'thirdparty-arios', 'thirdparty-blogger', 'thirdparty-facebook', 'thirdparty-instagram', 'thirdparty-linkedin', 'thirdparty-pinterest', 'thirdparty-twitter', 'thirdparty-vkontakte', 'thirdparty-wechat', 'thirdparty-weibo', 'thirdparty-youtube', 'time'];
 exports.NAMES = NAMES;

dist/components/icon/Icon.js

@@ -16,4 +16,2 @@ "use strict";
 
-var _ = require("../..");
-
 var _useTheme = require("../../styling/use-theme");
@@ -34,9 +32,3 @@
   const size = Number(type.split('-').pop());
-  const name = type.replace(`-${size}`, '');
-  const iconSrc = (0, _.getIconSrcUrl)({
-    color,
-    name,
-    size,
-    theme
-  });
+  const iconSrc = theme.getIcon(type, color);
   return /*#__PURE__*/_react.default.createElement("img", {
@@ -43,0 +35,0 @@ width: size,

dist/components/icon/index.d.ts

 export { Icon } from './Icon';
-export { getIconSrcUrl } from './getIconSrcUrl';
 export type { IconColor, IconProps, IconSize, IconType } from './Icon';

dist/components/icon/index.js

@@ -12,11 +12,3 @@ "use strict";
 });
-Object.defineProperty(exports, "getIconSrcUrl", {
-  enumerable: true,
-  get: function () {
-    return _getIconSrcUrl.getIconSrcUrl;
-  }
-});
 
-var _Icon = require("./Icon");
-
-var _getIconSrcUrl = require("./getIconSrcUrl");
+var _Icon = require("./Icon");

dist/components/toggle/index.d.ts

@@ -8,3 +8,3 @@ import React, { ChangeEventHandler, InputHTMLAttributes, RefAttributes } from 'react';
 }
-export declare const Toggle: React.ForwardRefExoticComponent<Pick<ToggleProps, "color" | "height" | "translate" | "width" | "style" | "hidden" | "size" | "multiple" | "disabled" | "form" | "slot" | "title" | "pattern" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "type" | "value" | "max" | "min" | "name" | "crossOrigin" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "src" | "alt" | "checked" | "accept" | "autoComplete" | "capture" | "enterKeyHint" | "maxLength" | "minLength" | "readOnly" | "required"> & React.RefAttributes<HTMLInputElement>>;
+export declare const Toggle: React.ForwardRefExoticComponent<Pick<ToggleProps, "type" | "color" | "form" | "slot" | "style" | "title" | "pattern" | "list" | "width" | "height" | "src" | "role" | "alt" | "className" | "translate" | "hidden" | "size" | "multiple" | "disabled" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "step" | "value" | "max" | "min" | "name" | "crossOrigin" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "checked" | "accept" | "autoComplete" | "capture" | "enterKeyHint" | "maxLength" | "minLength" | "readOnly" | "required"> & React.RefAttributes<HTMLInputElement>>;
 export {};

dist/esm/components/icon-button/IconButton.js

@@ -5,3 +5,2 @@ import _extends from "@babel/runtime/helpers/extends";
 import { useFela } from 'react-fela';
-import { getIconSrcUrl } from '../..';
 import { useTheme } from '../../styling/use-theme';
@@ -26,24 +25,14 @@ import { pxToRem } from '../../utils/size-to-rem';
   const size = 40;
-  const iconSize = size === 40 ? 24 : 16;
-  const color = getIconColor({
+  const iconSize = 24;
+  const iconType = `${iconName}-24`;
+  const defaultIcon = theme.getIcon(iconType, getIconColor({
     variant,
     isHovered: false,
     intent
-  });
-  const defaultIcon = getIconSrcUrl({
-    color,
-    name: iconName,
-    size: iconSize,
-    theme
-  });
-  const hoverIcon = getIconSrcUrl({
-    color: getIconColor({
-      variant,
-      isHovered: true,
-      intent
-    }),
-    name: iconName,
-    size: iconSize,
-    theme
-  });
+  }));
+  const hoverIcon = theme.getIcon(iconType, getIconColor({
+    variant,
+    isHovered: true,
+    intent
+  }));
   return /*#__PURE__*/React.createElement(Click, _extends({
@@ -50,0 +39,0 @@ ref: ref

dist/esm/components/icon-button/types.js

 export const INTENTS = ['primary', 'destructive'];
 export const VARIANTS = ['transparent', 'outline', 'media'];
-export const NAMES = ['alarm', 'avatar', 'blocked', 'calendar', 'checkmark', 'communication-chat', 'communication-email', 'communication-phone', 'delete', 'designyourown', 'device', 'extendedperiod', 'externallink', 'filter', 'info', 'leaf', 'link', 'map-map', 'map-mappin', 'map-route', 'media-pause', 'media-play', 'more', 'navigation-chevronback', 'navigation-chevrondown', 'navigation-chevronforward', 'navigation-chevronup', 'navigation-close', 'navigation-menu', 'profile', 'sale', 'save', 'search', 'settings', 'share', 'taxes', 'thirdparty-arios', 'thirdparty-blogger', 'thirdparty-facebook', 'thirdparty-instagram', 'thirdparty-linkedin', 'thirdparty-pinterest', 'thirdparty-twitter', 'thirdparty-vkontakte', 'thirdparty-wechat', 'thirdparty-weibo', 'thirdparty-youtube', 'time'];
+export const NAMES = ['alarm', 'avatar', 'blocked', 'calendar', 'checkmark', 'communication-chat', 'communication-email', 'communication-phone', 'delete', 'designyourown', 'device', 'extendedperiod', 'externallink', 'filter', 'info', 'link', 'map-map', 'map-mappin', 'map-route', 'media-pause', 'media-play', 'more', 'navigation-chevronback', 'navigation-chevrondown', 'navigation-chevronforward', 'navigation-chevronup', 'navigation-close', 'navigation-menu', 'profile', 'sale', 'save', 'search', 'settings', 'share', 'taxes', 'thirdparty-arios', 'thirdparty-blogger', 'thirdparty-facebook', 'thirdparty-instagram', 'thirdparty-linkedin', 'thirdparty-pinterest', 'thirdparty-twitter', 'thirdparty-vkontakte', 'thirdparty-wechat', 'thirdparty-weibo', 'thirdparty-youtube', 'time'];

dist/esm/components/icon/Icon.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import { useFela } from 'react-fela';
-import { getIconSrcUrl } from '../..';
 import { useTheme } from '../../styling/use-theme';
@@ -18,9 +17,3 @@ import { pxToRem } from '../../utils/size-to-rem';
   const size = Number(type.split('-').pop());
-  const name = type.replace(`-${size}`, '');
-  const iconSrc = getIconSrcUrl({
-    color,
-    name,
-    size,
-    theme
-  });
+  const iconSrc = theme.getIcon(type, color);
   return /*#__PURE__*/React.createElement("img", {
@@ -27,0 +20,0 @@ width: size,

dist/esm/components/icon/index.js

@@ -1,2 +0,1 @@
-export { Icon } from './Icon';
-export { getIconSrcUrl } from './getIconSrcUrl';
+export { Icon } from './Icon';

dist/esm/styling/style-renderer.js

@@ -16,4 +16,3 @@ import { assignStyle } from 'css-in-js-utils';
 import sortMediaQueryMobileFirst from 'fela-sort-media-query-mobile-first';
-import { mapValueToMediaQuery } from 'fela-tools';
-import hexToRgba from 'hex-to-rgba'; // whitelisting all the props that support responsive array values
+import { mapValueToMediaQuery } from 'fela-tools'; // whitelisting all the props that support responsive array values
 
@@ -81,3 +80,3 @@ export const responsiveProps = {
     enhancers: [sortClassnames(), sortMediaQueryMobileFirst(), ...(enforceLonghands ? [enforceLonghandsEnhancer()] : []), ...(options.enhancers || [])],
-    plugins: [responsiveObjectValue(responsiveProps), extend(), embedded(), responsiveValue(getResponsiveMediaQueries, responsiveProps), namedKeys(props => props && props.theme && props.theme.breakpoints || {}), renderFonts && themeFontsPlugin, hexToRgbaPlugin, rtl(isRtl ? 'rtl' : 'ltr'), themeValue({
+    plugins: [responsiveObjectValue(responsiveProps), extend(), embedded(), responsiveValue(getResponsiveMediaQueries, responsiveProps), namedKeys(props => props && props.theme && props.theme.breakpoints || {}), renderFonts && themeFontsPlugin, rtl(isRtl ? 'rtl' : 'ltr'), themeValue({
       color: theme => theme.color,
@@ -128,17 +127,2 @@ backgroundColor: theme => theme.color,
 
-function hexToRgbaPlugin(style) {
-  for (const property in style) {
-    const value = style[property];
-
-    if (typeof value === 'string' && value.indexOf('#') === 0 && value.length === 9) {
-      style[property] = hexToRgba(value);
-    } else if (typeof value === 'object' && !Array.isArray(value)) {
-      hexToRgbaPlugin(value);
-    }
-  }
-
-  return style;
-} // TODO: move to fela repo as an official plugin
-
-
 function resolveResponsiveObjectValues(style, properties) {
@@ -145,0 +129,0 @@ for (const property in style) {

dist/esm/themes/getTheme.js

@@ -26,3 +26,3 @@ import darkTokens from '@volvo-cars/ui-design-tokens/build/web/volvo-dark/tokens.json';
     locale,
-    direction
+    direction = isRtlLocale(locale) ? 'rtl' : 'ltr'
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -34,5 +34,6 @@ const designTokens = variant === 'light' ? lightTokens : darkTokens;
   const domainName = getDomainName(locale);
-  return {
+  const iconsPath = `${domainName}/static/shared/icons/v2/`;
+  const theme = {
     name,
-    direction: direction || (isRtlLocale(locale) ? 'rtl' : 'ltr'),
+    direction,
     baselineGrid: 8,
@@ -46,3 +47,3 @@ baselineSubGrid: 4,
     logoImagesPath: `${domainName}/static/shared/images/`,
-    iconsPath: `${domainName}/static/shared/icons/v2/`,
+    iconsPath,
     typeScale: buildTypeScale(typeScale),
@@ -60,2 +61,16 @@ states: {
   };
+
+  theme.getIcon = function (type) {
+    let color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'primary';
+
+    if (!type) {
+      return '';
+    }
+
+    const isRTL = direction === 'rtl';
+    const path = `${iconsPath}${type}${isRTL ? '-rtl' : ''}`;
+    return `${path}.svg#${variant}-${color}`;
+  };
+
+  return theme;
 }

dist/styling/style-renderer.js

@@ -43,4 +43,2 @@ "use strict";
 
-var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
-
 // whitelisting all the props that support responsive array values
@@ -109,3 +107,3 @@ const responsiveProps = {
     enhancers: [(0, _felaSortClassnames.default)(), (0, _felaSortMediaQueryMobileFirst.default)(), ...(enforceLonghands ? [(0, _felaEnforceLonghands.default)()] : []), ...(options.enhancers || [])],
-    plugins: [responsiveObjectValue(responsiveProps), (0, _felaPluginExtend.default)(), (0, _felaPluginEmbedded.default)(), (0, _felaPluginResponsiveValue.default)(getResponsiveMediaQueries, responsiveProps), (0, _felaPluginNamedKeys.default)(props => props && props.theme && props.theme.breakpoints || {}), renderFonts && themeFontsPlugin, hexToRgbaPlugin, (0, _felaPluginRtl.default)(isRtl ? 'rtl' : 'ltr'), (0, _felaPluginThemeValue.default)({
+    plugins: [responsiveObjectValue(responsiveProps), (0, _felaPluginExtend.default)(), (0, _felaPluginEmbedded.default)(), (0, _felaPluginResponsiveValue.default)(getResponsiveMediaQueries, responsiveProps), (0, _felaPluginNamedKeys.default)(props => props && props.theme && props.theme.breakpoints || {}), renderFonts && themeFontsPlugin, (0, _felaPluginRtl.default)(isRtl ? 'rtl' : 'ltr'), (0, _felaPluginThemeValue.default)({
       color: theme => theme.color,
@@ -157,17 +155,2 @@ backgroundColor: theme => theme.color,
 
-function hexToRgbaPlugin(style) {
-  for (const property in style) {
-    const value = style[property];
-
-    if (typeof value === 'string' && value.indexOf('#') === 0 && value.length === 9) {
-      style[property] = (0, _hexToRgba.default)(value);
-    } else if (typeof value === 'object' && !Array.isArray(value)) {
-      hexToRgbaPlugin(value);
-    }
-  }
-
-  return style;
-} // TODO: move to fela repo as an official plugin
-
-
 function resolveResponsiveObjectValues(style, properties) {
@@ -174,0 +157,0 @@ for (const property in style) {

dist/themes/getTheme.js

@@ -41,3 +41,3 @@ "use strict";
     locale,
-    direction
+    direction = isRtlLocale(locale) ? 'rtl' : 'ltr'
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -49,5 +49,6 @@ const designTokens = variant === 'light' ? _tokens2.default : _tokens.default;
   const domainName = getDomainName(locale);
-  return {
+  const iconsPath = `${domainName}/static/shared/icons/v2/`;
+  const theme = {
     name,
-    direction: direction || (isRtlLocale(locale) ? 'rtl' : 'ltr'),
+    direction,
     baselineGrid: 8,
@@ -61,3 +62,3 @@ baselineSubGrid: 4,
     logoImagesPath: `${domainName}/static/shared/images/`,
-    iconsPath: `${domainName}/static/shared/icons/v2/`,
+    iconsPath,
     typeScale: (0, _buildTypeScale.buildTypeScale)(typeScale),
@@ -75,2 +76,16 @@ states: {
   };
+
+  theme.getIcon = function (type) {
+    let color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'primary';
+
+    if (!type) {
+      return '';
+    }
+
+    const isRTL = direction === 'rtl';
+    const path = `${iconsPath}${type}${isRTL ? '-rtl' : ''}`;
+    return `${path}.svg#${variant}-${color}`;
+  };
+
+  return theme;
 }

dist/types/shared.d.ts

 import { ComponentType, ReactNode } from 'react';
 import * as CSS from 'csstype';
 import { IRenderer } from 'fela';
+import { IconColor, IconType } from '../components/icon';
 export declare type ValueOf<T> = T[keyof T];
@@ -285,2 +286,3 @@ /**
     icons: readonly ('account' | 'email' | 'facebook' | 'globe' | 'instagram' | 'linkedin' | 'pinterest' | 'search' | 'twitter' | 'vkontakte' | 'wechat' | 'weibo' | 'youku' | 'youtube')[];
+    getIcon(type: IconType, color?: IconColor): string;
     fonts: any;
@@ -287,0 +289,0 @@ font: {

package.json

 {
   "name": "vcc-ui",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "license": "UNLICENSED",
@@ -55,3 +55,2 @@ "description": "A React library for building user interfaces at Volvo Cars",
     "fela-tools": "^12.2.0",
-    "hex-to-rgba": "^2.0.0",
     "react-fela": "^12.2.0"
@@ -79,3 +78,3 @@ },
     "chromatic-cli": "1.0.0",
-    "core-js": "3.25.3",
+    "core-js": "3.25.5",
     "cpx": "1.5.0",
@@ -82,0 +81,0 @@ "fela-monolithic": "12.2.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dependency count

25

decreased by-3.85%

Worsened metrics

Total package byte prevSize

529066

decreased by-0.44%

Number of package files

317

decreased by-0.94%

Lines of code

15220

decreased by-0.59%

Dependency changes

• - Removedhex-to-rgba@^2.0.0

• - Removedhex-to-rgba@2.0.1(transitive)