chaser-components - npm Package Compare versions

Comparing version 6.1.5 to 6.1.6

CHANGELOG.md

@@ -5,2 +5,10 @@ # Changelog
 
+### [6.1.6](https://bitbucket.org/chasertech/chaser-components/compare/v6.1.5...v6.1.6) (2021-04-08)
+
+
+### Bug Fixes
+
+* **DEV-3653:** fix icons ([e458c0f](https://bitbucket.org/chasertech/chaser-components/commit/e458c0fbb2b6772d26f7d9ec62f6099b9303bb4e))
+* **DEV-3653:** fix input flexibility ([9015e39](https://bitbucket.org/chasertech/chaser-components/commit/9015e396dd3dfe0b8e7dbcb4ae5f6d53debd9136))
+
 ### [6.1.5](https://bitbucket.org/chasertech/chaser-components/compare/v6.1.4...v6.1.5) (2021-03-26)
@@ -7,0 +15,0 @@

package.json

 {
   "name": "chaser-components",
   "description": "Chaser HQ Component Library",
-  "version": "6.1.5",
+  "version": "6.1.6",
   "main": "dist/index.js",
@@ -24,3 +24,3 @@ "module": "dist/index.modern.js",
     "build-storybook": "build-storybook -c .storybook -o build",
-    "create:icons": "svgr -d ./src/components/Icon/Icons ./src/components/Icon/Icons --replace-attr-values \"#9ba1ae={props.color},#9BA1AE={props.color},#1B82BE={props.color},#1b82bE={props.color},#FAB666={props.color},#fab666={props.color},#EB5757={props.color},#eb5757={props.color},#3C4757={props.color},#3c4757={props.color},#d7dbe2={props.color},#D7DBE2={props.color},#6e767f={props.color},#6E767F={props.color}#ffffff={props.color},#FFFFFF={props.color},#808790={props.color},#9BA1AE={props.color},#9ba1ae={props.color},#F9F9FA={props.color},#f9f9fa={props.color},#EB5757={props.color},#eb5757={props.color},#E3E5EA={props.color},#e3e5ea={props.color},#7C848D={props.color},#7c848d={props.color},#BABCC0={props.color},#babcc0={props.color},#FF780D={props.color},#f780d={props.color},#F4F5F7={props.color},#f4f5f7={props.color},#F5F5F5={props.color},#f5f5f5={props.color},#28A862={props.color},#28a862={props.color}\" --ext \"jsx\" && rm ./src/components/Icon/Icons/*.svg",
+    "create:icons": "svgr -d ./src/components/Icon/Icons ./src/components/Icon/Icons --icon --replace-attr-values \"#9ba1ae={props.color},#9BA1AE={props.color},#1B82BE={props.color},#1b82bE={props.color},#FAB666={props.color},#fab666={props.color},#EB5757={props.color},#eb5757={props.color},#3C4757={props.color},#3c4757={props.color},#d7dbe2={props.color},#D7DBE2={props.color},#6e767f={props.color},#6E767F={props.color}#ffffff={props.color},#FFFFFF={props.color},#808790={props.color},#9BA1AE={props.color},#9ba1ae={props.color},#F9F9FA={props.color},#f9f9fa={props.color},#EB5757={props.color},#eb5757={props.color},#E3E5EA={props.color},#e3e5ea={props.color},#7C848D={props.color},#7c848d={props.color},#BABCC0={props.color},#babcc0={props.color},#FF780D={props.color},#f780d={props.color},#F4F5F7={props.color},#f4f5f7={props.color},#F5F5F5={props.color},#f5f5f5={props.color},#28A862={props.color},#28a862={props.color}\" --ext \"jsx\" && rm ./src/components/Icon/Icons/*.svg",
     "bump": "standard-version",
@@ -27,0 +27,0 @@ "bump:alpha": "standard-version --prerelease alpha",

src/components/Icon/IconMap.js

@@ -51,2 +51,3 @@ import {
   Search,
+  PaymentPlan,
 } from './Icons/index';
@@ -104,2 +105,3 @@
   search: Search,
+  'payment-plan': PaymentPlan,
 };
@@ -106,0 +108,0 @@

src/components/Icon/Icons/index.jsx

@@ -50,1 +50,2 @@ export { default as Transfer } from './Transfer';
 export { default as Search } from './Search';
+export { default as PaymentPlan } from './PaymentPlan';

src/components/Input/CurrencyIcon/index.jsx

@@ -24,3 +24,3 @@ import React from 'react';
     <Text
-      lineHeight={1.6}
+      lineHeight={1.4}
       fontWeight="bold"
@@ -27,0 +27,0 @@ fontSize="xsmall"

src/components/Input/index.jsx

 import { bool, func, any, node, number, oneOf, oneOfType, string } from 'prop-types';
 import React, { useState } from 'react';
-import { detect } from 'detect-browser';
 import Icon from '../Icon/index';
@@ -8,33 +7,3 @@ import css from '@styled-system/css';
 import CurrencyIcon from './CurrencyIcon/index';
-import { toFinite } from 'lodash';
 
-function toCurrency(amount) {
-  const formatter = new Intl.NumberFormat('en-US', {
-    style: 'decimal',
-    minimumFractionDigits: Math.floor(amount) === amount ? 0 : 2,
-    maximumFractionDigits: 2,
-  });
-
-  return amount === 0 || toFinite(amount) ? formatter.format(amount) : '';
-}
-
-const preventDefaultNumberChars = (e) => {
-  let checkIfNum;
-  const validKeyCodes = [8, 190]; // backspace and . (dot)
-  if (
-    e.keyCode &&
-    (e.keyCode < 48 || e.keyCode > 57) &&
-    !validKeyCodes.some((kc) => kc === e.keyCode)
-  ) {
-    checkIfNum = true;
-  } else if (e.key !== undefined) {
-    checkIfNum = e.key === 'e' || e.key === '+' || e.key === '-';
-  } else if (e.keyCode !== undefined) {
-    checkIfNum = e.keyCode === 69 || e.keyCode === 187 || e.keyCode === 189;
-  }
-  return checkIfNum && e.preventDefault();
-};
-
-const browser = detect();
-
 const InputWrapper = styled('div')(
@@ -45,2 +14,4 @@ css({
     paddingRight: '10px',
+    position: 'relative',
+    alignItems: 'center',
     paddingLeft: '10px',
@@ -72,2 +43,3 @@ outline: 'none',
     border: 'none',
+    height: '100%',
     outline: 'none',
@@ -97,3 +69,2 @@ fontSize: 'input',
   {
-    justifyContent: 'center',
     alignItems: 'center',
@@ -104,5 +75,6 @@ height: '100%',
   ({ isPasswordField }) => ({
-    display: isPasswordField ? 'inline-flex' : 'none',
+    position: 'absolute',
+    display: isPasswordField ? 'flex' : 'none',
     cursor: isPasswordField ? 'pointer' : 'inherit',
-    right: isPasswordField ? 0 : 'unset',
+    right: isPasswordField ? '8px' : 'unset',
   }),
@@ -113,6 +85,4 @@ );
   {
-    justifyContent: 'center',
     alignItems: 'center',
     height: '100%',
-    width: '20px',
   },
@@ -135,8 +105,7 @@ ({ isIconField }) => ({
   error,
-  onKeyDown,
   width = '300px',
   height = '40px',
   type = 'text',
-  min = '0.00',
-  step = '0.01',
+  min = '0',
+  step = '1',
   disabled = false,
@@ -146,7 +115,5 @@ readOnly = false,
 }) => {
-  const [isEditing, setIsEditing] = useState(false);
   const [isObscure, setIsObscure] = useState(true);
 
   function handleBlur(e) {
-    setIsEditing(false);
     if (onBlur) onBlur(e);
@@ -163,12 +130,5 @@ }
   }
-  if (currencyCode && isEditing) {
-    const isFirefox = browser && browser.name === 'firefox';
-    inputType = isFirefox ? 'text' : 'number';
-    onKeyDown = preventDefaultNumberChars;
+  if (currencyCode) {
+    inputType = 'number';
   }
-  if (currencyCode && !isEditing) {
-    inputVal = toCurrency(value);
-    isReadOnly = true;
-    inputType = 'text';
-  }
 
@@ -191,7 +151,5 @@ return (
         type={inputType}
-        onFocus={() => setIsEditing(true)}
         readOnly={isReadOnly}
         value={inputVal}
         placeholder={placeholder}
-        onKeyDown={onKeyDown}
         onChange={onChange}
@@ -205,6 +163,4 @@ onBlur={handleBlur}
       />
-      <EyeIcon isPasswordField={type === 'password'}>
-        <span className="obscure" onClick={() => setIsObscure(!isObscure)}>
-          {isObscure ? <Icon name="eye-hidden" /> : <Icon name="eye-visible" />}
-        </span>
+      <EyeIcon isPasswordField={type === 'password'} onClick={() => setIsObscure(!isObscure)}>
+        {isObscure ? <Icon name="eye-hidden" /> : <Icon name="eye-visible" />}
       </EyeIcon>
@@ -211,0 +167,0 @@ </InputWrapper>

src/components/Input/Input.stories.jsx

@@ -82,3 +82,3 @@ /* eslint-disable react-hooks/rules-of-hooks */
     <Stack>
-      <Input currencyCode="GBP" value={value} onChange={e => setValue(e.target.value)} />
+      <Input type="number" currencyCode="GBP" value={value} onChange={e => setValue(e.target.value)} />
       <Input currencyCode="EUR" value={value} onChange={e => setValue(e.target.value)} />
@@ -85,0 +85,0 @@ <Input currencyCode="USD" value={value} onChange={e => setValue(e.target.value)} />

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

1582251

decreased by-2.89%

Number of package files

183

decreased by-3.17%

Lines of code

18211

decreased by-0.21%

Number of low supply chain risk alerts

156

increased by2.63%

No dependency changes