@elvia/elvis-dropdown - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

CHANGELOG.md

 # Elvia Dropdown
 
+## 2.0.2 (30.11.21)
+
+### Patches
+
+- Now using elvis-colors package for colors.
+- Now using elvis-typography package for typography.
+
 ## 2.0.1 (30.11.21)
@@ -4,0 +11,0 @@

dist/react/js/declarations.d.ts

 declare module '*';
+declare module '@elvia/elvis-colors';
+declare module '@elvia/elvis-typography';

dist/react/js/styledComponents.js

@@ -6,16 +6,22 @@ /*
 import styled from 'styled-components';
-const ElviaColors = {
-  elviaCharge: '#29d305',
-  elviaOn: '#ffffff',
-  elviaOff: '#000000',
-  elviagrey30: '#BDBDBD'
+import { getColor } from '@elvia/elvis-colors';
+import ElviaTypography from '@elvia/elvis-typography';
+const colors = {
+  elviaCharge: getColor('elvia-charge'),
+  elviaWhite: getColor('white'),
+  elviaBlack: getColor('black')
 };
+const typography = {
+  textMdStrong: ElviaTypography['text-md-strong'],
+  textMd: ElviaTypography['text-md'],
+  textSm: ElviaTypography['text-sm']
+};
 export const DropdownWrapper = styled.span.withConfig({
   displayName: "styledComponents__DropdownWrapper",
   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', ElviaColors.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 #0064fa;outline-offset:2px;}}"], props => props.isDisabled ? 'not-allowed' : 'pointer', colors.elviaCharge);
 export const DropdownLabel = styled.label.withConfig({
   displayName: "styledComponents__DropdownLabel",
   componentId: "sc-1u4m1mo-1"
-})(["position:", ";top:", ";left:", ";background:", ";padding", ";z-index:", ";display:flex;margin-bottom:4px;font-size:", ";font-family:'Red Hat Text',Verdana,sans-serif;font-weight:500;font-style:unset;line-height:", ";letter-spacing:unset;text-transform:unset;color:", ";text-align:left;"], props => props.isCompact && 'absolute', props => props.isCompact && '-5px', props => props.isCompact && '8px', props => props.isCompact && ElviaColors.elviaOn, props => props.isCompact && '0 3px', props => props.isCompact && '1', props => props.isCompact ? '10px' : '16px', props => props.isCompact ? '10px' : '23px', ElviaColors.elviaOff);
+})(["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({
@@ -36,3 +42,3 @@ displayName: "styledComponents__DropdownIndicatorIcon",
   componentId: "sc-1u4m1mo-5"
-})(["font-family:'Red Hat Text',Verdana;font-size:14px;font-style:normal;font-weight:400;line-height:22px;letter-spacing:0px;text-align:left;margin-left:8px;width:100%;"]);
+})(["", " font-style:normal;letter-spacing:0px;text-align:left;margin-left:8px;width:100%;"], typography.textSm);
 export const DropdownCheckbox = styled.label.withConfig({
@@ -46,3 +52,3 @@ displayName: "styledComponents__DropdownCheckbox",
     return `
-  background-color: ${ElviaColors.elviaCharge};
+  background-color: ${colors.elviaCharge};
   &::before {
@@ -55,3 +61,3 @@ content: '';
   width: 2px;
-  background-color: #000;
+  background-color: ${colors.elviaBlack};
   border-radius: 15px;
@@ -68,3 +74,3 @@ transform: translateX(10px) rotate(-45deg);
     width: 80%;
-    background-color: #000;
+    background-color: ${colors.elviaBlack};
     border-radius: 15px;
@@ -78,3 +84,3 @@ transform: translateX(10px) rotate(-55deg);
     return `
-  background-color: ${ElviaColors.elviaCharge};
+  background-color: ${colors.elviaCharge};
 &::before {
@@ -87,3 +93,3 @@ content: '';
   width: 2px;
-  background-color: #000;
+  background-color: ${colors.elviaBlack};
   border-radius: 15px;
@@ -100,3 +106,3 @@ transform: translateX(8px) rotate(-45deg);
   width: 83%;
-  background-color: #000;
+  background-color: ${colors.elviaBlack};
   border-radius: 15px;
@@ -114,6 +120,6 @@ transform: translateX(10px) rotate(-55deg);
   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', ElviaColors.elviaOff, props => decideCheckMarkCompactAndSelectedStyle(props.isCompact, props.isSelected));
+})(["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));
 export const DropdownCheckboxLabel = styled.span.withConfig({
   displayName: "styledComponents__DropdownCheckboxLabel",
   componentId: "sc-1u4m1mo-8"
-})(["font-family:'Red Hat Text',Verdana,sans-serif;font-weight:400;font-style:normal;font-size:", ";margin-left:8px;line-height:", ";width:fit-content;"], props => props.isCompact ? '14px' : '16px', props => props.isCompact ? '16px;' : '24px');
+})(["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.0.1",
+  "version": "2.0.2",
   "description": "",
@@ -15,2 +15,4 @@ "main": "web_component.js",
     "@types/react-select": "4.0.2",
+    "@elvia/elvis-colors": "^1.1.0",
+    "@elvia/elvis-typography": "^1.1.0",
     "lodash.uniqueid": "4.0.1",
@@ -17,0 +19,0 @@ "react-select": "4.2.1",

react.js

 export { default as Dropdown } from './dist/react/js/elvia-dropdown';

README.md

@@ -0,0 +0,0 @@ # Elvia Dropdown

src/react/declarations.d.ts

 declare module '*';
+declare module '@elvia/elvis-colors';
+declare module '@elvia/elvis-typography';

web_component.js

 export { default as Dropdown } from './dist/web_component/js/elvia-dropdown';

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

46218

increased by2.75%

Lines of code

1250

increased by0.4%

Worsened metrics

Dependency count

8

increased by33.33%

Number of package files

14

decreased by-6.67%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@elvia/elvis-colors@^1.1.0

• + Added@elvia/elvis-typography@^1.1.0

• + Added@elvia/elvis-colors@1.8.0(transitive)

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