@elvia/elvis-dropdown - npm Package Compare versions

Comparing version 2.1.0 to 2.1.1

CHANGELOG.md

 # Elvia Dropdown
 
+## 2.1.1 (18.02.22)
+
+### Patch
+
+- Now using elvis-icon package for internal icons.
+
 ## 2.1.0 (07.02.22)
@@ -4,0 +10,0 @@

dist/react/js/declarations.d.ts

 declare module '*';
+declare module '@elvia/elvis-icon/react';

dist/react/js/elvia-dropdown.js

@@ -8,4 +8,6 @@ /*
 import toolbox from '@elvia/elvis-toolbox';
-import { DropdownCheckbox, DropdownCheckboxLabel, DropdownCheckboxMark, DropdownIndicatorIcon, DropdownWrapper, DropdownErrorMessageIcon, DropdownErrorMessageText, DropdownErrorMessageWrapper, DropdownLabel } from './styledComponents';
+import { Icon } from '@elvia/elvis-icon/react';
+import { DropdownCheckbox, DropdownCheckboxLabel, DropdownCheckboxMark, DropdownWrapper, DropdownErrorMessageText, DropdownErrorMessageWrapper, DropdownLabel } from './styledComponents';
 import uniqueId from 'lodash.uniqueid';
+import { getColor } from '@elvia/elvis-colors';
 7;
@@ -184,3 +186,3 @@
       lineHeight: '22px',
-      color: isDisabled ? '#BDBDBD' : '#676767',
+      color: isDisabled ? getColor('disabled') : getColor('grey-70'),
       margin: '0px',
@@ -205,3 +207,3 @@ display: 'block',
       display: 'flex',
-      color: isDisabled ? '#676767' : '#000',
+      color: isDisabled ? getColor('grey-70') : '#000',
       fontFamily: 'Red Hat Text',
@@ -222,6 +224,6 @@ fontWeight: '400',
       //@ts-ignore
-      React.createElement(components.DropdownIndicator, props, /*#__PURE__*/React.createElement(DropdownIndicatorIcon, {
-        isDisabled: isDisabled,
-        isCompact: isCompact,
-        menuIsOpen: menuIsOpen
+      React.createElement(components.DropdownIndicator, props, /*#__PURE__*/React.createElement(Icon, {
+        name: menuIsOpen ? 'arrowUpBold' : 'arrowDownBold',
+        color: isDisabled ? getColor('disabled') : undefined,
+        customSize: isCompact ? '16px' : '20px'
       }))
@@ -255,3 +257,7 @@ );
   }) => {
-    return /*#__PURE__*/React.createElement(DropdownErrorMessageWrapper, props, /*#__PURE__*/React.createElement(DropdownErrorMessageIcon, null), /*#__PURE__*/React.createElement(DropdownErrorMessageText, null, errorMessage));
+    return /*#__PURE__*/React.createElement(DropdownErrorMessageWrapper, props, /*#__PURE__*/React.createElement(Icon, {
+      name: "removeCircle",
+      color: getColor('red'),
+      size: "xs"
+    }), /*#__PURE__*/React.createElement(DropdownErrorMessageText, null, errorMessage));
   }; // Object containing all components overriden in react-select by Elvis dropdown
@@ -258,0 +264,0 @@

dist/react/js/styledComponents.js

@@ -11,3 +11,4 @@ /*
   elviaWhite: getColor('white'),
-  elviaBlack: getColor('black')
+  elviaBlack: getColor('black'),
+  elviaFocusOutline: getColor('focus-outline')
 };
@@ -22,3 +23,3 @@ const typography = {
   componentId: "sc-1u4m1mo-0"
-})(["display:block;position:relative;text-align:left;box-sizing:border-box;width:100%;max-width:448px;cursor:", ";&:focus-within{.ewc-dropdown__control{border:2px solid ", ";padding:0px;outline:2px solid #0064fa;outline-offset:2px;}}"], props => props.isDisabled ? 'not-allowed' : 'pointer', colors.elviaCharge);
+})(["display:block;position:relative;text-align:left;box-sizing:border-box;width:100%;max-width:448px;cursor:", ";&:focus-within{.ewc-dropdown__control{border:2px solid ", ";padding:0px;outline:2px solid ", ";outline-offset:2px;}}"], props => props.isDisabled ? 'not-allowed' : 'pointer', colors.elviaCharge, colors.elviaFocusOutline);
 export const DropdownLabel = styled.label.withConfig({
@@ -28,21 +29,13 @@ displayName: "styledComponents__DropdownLabel",
 })(["position:", ";top:", ";left:", ";background:", ";padding", ";z-index:", ";display:flex;margin-bottom:4px;font-family:'Red Hat Text',Verdana,sans-serif;font-weight:500;font-size:", ";line-height:", ";color:", ";text-align:left;"], props => props.isCompact && 'absolute', props => props.isCompact && '-5px', props => props.isCompact && '8px', props => props.isCompact && colors.elviaWhite, props => props.isCompact && '0 3px', props => props.isCompact && '1', props => props.isCompact ? '10px' : '16px', props => props.isCompact ? '10px' : '23px', colors.elviaBlack);
-export const DropdownIndicatorIcon = styled.i.withConfig({
-  displayName: "styledComponents__DropdownIndicatorIcon",
-  componentId: "sc-1u4m1mo-2"
-})(["background-image:", ";height:", ";width:", ";background-size:contain;background-position:center;background-repeat:no-repeat;display:inline-block;transform:", ";transition:'transform 250ms';"], props => !props.isDisabled ? `url("data:image/svg+xml,%3csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M.389 5.869a1.328 1.328 0 011.878 0L12 15.6l9.733-9.732a1.328 1.328 0 011.878 1.878L13.443 17.915h-.001a2.04 2.04 0 01-2.885 0L.39 7.747a1.328 1.328 0 010-1.878z' fill='black'/%3e%3c/svg%3e")` : `url("data:image/svg+xml,%3csvg width='24' height='24' fill='%23BDBDBD' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M.389 5.869a1.328 1.328 0 011.878 0L12 15.6l9.733-9.732a1.328 1.328 0 011.878 1.878L13.443 17.915h-.001a2.04 2.04 0 01-2.885 0L.39 7.747a1.328 1.328 0 010-1.878z' fill='%23BDBDBD'/%3e%3c/svg%3e")`, props => props.isCompact ? '16px' : '20px', props => props.isCompact ? '16px' : '20px', props => props.menuIsOpen ? 'rotate(180deg)' : 'none');
 export const DropdownErrorMessageWrapper = styled.div.withConfig({
   displayName: "styledComponents__DropdownErrorMessageWrapper",
-  componentId: "sc-1u4m1mo-3"
+  componentId: "sc-1u4m1mo-2"
 })(["display:flex;flex-direction:row;align-items:center;margin-top:4px;"]);
-export const DropdownErrorMessageIcon = styled.i.withConfig({
-  displayName: "styledComponents__DropdownErrorMessageIcon",
-  componentId: "sc-1u4m1mo-4"
-})(["background-image:url(\"data:image/svg+xml,%3csvg viewBox='0 0 24 24' aria-hidden='true' width='24' height='24' fill='%23EE0701' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0)' fill='%23EE0701'%3e%3cpath d='M12 23.999c-6.617 0-12-5.383-12-12s5.383-12 12-12 12 5.383 12 12-5.383 12-12 12zm0-22.5c-5.79 0-10.5 4.71-10.5 10.5s4.71 10.5 10.5 10.5 10.5-4.71 10.5-10.5-4.71-10.5-10.5-10.5z'/%3e%3cpath d='M16.5 17.249a.743.743 0 01-.53-.22L12 13.06l-3.97 3.97a.744.744 0 01-1.06 0 .752.752 0 010-1.061l3.97-3.97-3.97-3.97a.743.743 0 01-.22-.53c0-.2.078-.389.22-.53a.743.743 0 01.53-.22c.2 0 .389.078.53.22l3.97 3.97 3.97-3.97a.744.744 0 011.06 0c.142.141.22.33.22.53s-.078.389-.22.53l-3.97 3.97 3.97 3.97a.752.752 0 010 1.061.746.746 0 01-.53.219z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0'%3e%3cpath d='M0 0h24v24H0V0z' fill='%23EE0701'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e\");height:16px;width:16px;background-size:contain;background-position:center;background-repeat:no-repeat;display:inline-block;"]);
 export const DropdownErrorMessageText = styled.span.withConfig({
   displayName: "styledComponents__DropdownErrorMessageText",
-  componentId: "sc-1u4m1mo-5"
+  componentId: "sc-1u4m1mo-3"
 })(["", " font-style:normal;letter-spacing:0px;text-align:left;margin-left:8px;width:100%;"], typography.textSm);
 export const DropdownCheckbox = styled.label.withConfig({
   displayName: "styledComponents__DropdownCheckbox",
-  componentId: "sc-1u4m1mo-6"
+  componentId: "sc-1u4m1mo-4"
 })(["display:flex;align-items:center;width:fit-content;box-sizing:border-box;text-align:left;pointer-events:none;outline:none;@media screen and (-ms-high-contrast:none){width:100%;}"]);
@@ -114,7 +107,7 @@
   displayName: "styledComponents__DropdownCheckboxMark",
-  componentId: "sc-1u4m1mo-7"
-})(["box-sizing:border-box;min-width:", ";min-height:", ";max-width:", ";max-height:", ";border-radius:3px;border:1px solid ", ";background:#fff;position:relative;", ""], props => props.isCompact ? '16px' : '24px', props => props.isCompact ? '16px' : '24px', props => props.isCompact ? '16px' : '24px', props => props.isCompact ? '16px' : '24px', colors.elviaBlack, props => decideCheckMarkCompactAndSelectedStyle(props.isCompact, props.isSelected));
+  componentId: "sc-1u4m1mo-5"
+})(["box-sizing:border-box;min-width:", ";min-height:", ";max-width:", ";max-height:", ";border-radius:3px;border:1px solid ", ";background:", ";position:relative;", ""], props => props.isCompact ? '16px' : '24px', props => props.isCompact ? '16px' : '24px', props => props.isCompact ? '16px' : '24px', props => props.isCompact ? '16px' : '24px', colors.elviaBlack, colors.elviaWhite, props => decideCheckMarkCompactAndSelectedStyle(props.isCompact, props.isSelected));
 export const DropdownCheckboxLabel = styled.span.withConfig({
   displayName: "styledComponents__DropdownCheckboxLabel",
-  componentId: "sc-1u4m1mo-8"
+  componentId: "sc-1u4m1mo-6"
 })(["font-family:'Red Hat Text',Verdana,sans-serif;font-style:normal;font-size:", ";margin-left:8px;line-height:", ";width:fit-content;"], props => props.isCompact ? '14px' : '16px', props => props.isCompact ? '16px;' : '24px');

package.json

 {
   "name": "@elvia/elvis-dropdown",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "",
@@ -15,4 +15,5 @@ "main": "web_component.js",
     "@types/react-select": "4.0.2",
-    "@elvia/elvis-colors": "^1.2.0",
+    "@elvia/elvis-colors": "^1.2.1",
     "@elvia/elvis-typography": "^1.2.0",
+    "@elvia/elvis-icon": "^1.1.1",
     "lodash.uniqueid": "4.0.1",
@@ -19,0 +20,0 @@ "react-select": "4.2.1",

src/react/declarations.d.ts

 declare module '*';
+declare module '@elvia/elvis-icon/react';

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

Total package byte prevSize

697042

increased by1309.65%

Number of package files

16

increased by23.08%

Lines of code

1873

increased by39.57%

Worsened metrics

Dependency count

12

increased by9.09%

Dependency changes

• + Added@elvia/elvis-icon@^1.1.1

• + Added@elvia/elvis-assets-icons@2.14.0(transitive)

• + Added@elvia/elvis-component-wrapper@4.3.0(transitive)

• + Added@elvia/elvis-icon@1.3.8(transitive)

• + Added@elvia/elvis-toolbox@7.8.1(transitive)

• + Added@elvia/elvis-typography@2.7.1(transitive)

• + Addedreact@18.3.1(transitive)

• + Addedreact-dom@18.3.1(transitive)

• + Addedscheduler@0.23.2(transitive)

• + Addedtslib@2.7.0(transitive)

• Updated@elvia/elvis-colors@^1.2.1