chaser-components - npm Package Compare versions

Comparing version 6.0.0-alpha.9 to 6.0.0-alpha.10

CHANGELOG.md

@@ -5,2 +5,4 @@ # Changelog
 
+## [6.0.0-alpha.10](https://bitbucket.org/chasertech/chaser-components/compare/v6.0.0-alpha.9...v6.0.0-alpha.10) (2021-03-04)
+
 ## [6.0.0-alpha.9](https://bitbucket.org/chasertech/chaser-components/compare/v6.0.0-alpha.8...v6.0.0-alpha.9) (2021-02-24)
@@ -7,0 +9,0 @@

package.json

 {
   "name": "chaser-components",
   "description": "Chaser HQ Component Library",
-  "version": "6.0.0-alpha.9",
+  "version": "6.0.0-alpha.10",
   "main": "dist/index.js",
@@ -6,0 +6,0 @@ "module": "dist/index.modern.js",

src/components/Button/index.jsx

@@ -41,3 +41,3 @@ import { string, bool, func, oneOf, node, number } from 'prop-types';
         minHeight: '32px',
-        padding: '5px 6px',
+        padding: '6px',
         lineHeight: '14px',
@@ -70,2 +70,3 @@ },
           minWidth: isIconOnly ? 'auto' : undefined,
+          padding: size === 'narrow' && !isIconOnly ? '6px 10px' : undefined,
           fontWeight: 'bold',
@@ -82,2 +83,3 @@ color: foregroundOnColor,
           minWidth: isIconOnly ? (size === 'narrow' ? '32px' : 'auto') : undefined,
+          padding: size === 'narrow' && !isIconOnly ? '6px 8px' : undefined,
           borderStyle: 'solid',
@@ -84,0 +86,0 @@ borderWidth: 'button',

src/components/Icon/Icons/Receivables.jsx

@@ -5,16 +5,12 @@ import * as React from 'react';
   return (
-    <svg width={24} height={24} viewBox="0 0 24 24" fill="none" {...props}>
+    <svg width={24} height={24} fill="none" {...props}>
+      <circle cx={12} cy={12} r={9.25} fill="none" stroke={props.color} strokeWidth={1.5} />
       <path
-        d="M6 21.25c-.69 0-1.25-.56-1.25-1.25V4c0-.69.56-1.25 1.25-1.25h7.708l5.417 4.965c.08.073.125.177.125.285v12c0 .69-.56 1.25-1.25 1.25H6z"
-        fill="none"
-        stroke={props.color}
-        strokeWidth={1.5}
+        d="M15 13.787c0 .62-.21 1.144-.63 1.571-.411.427-.97.695-1.673.803v.734a.594.594 0 01-.158.43.532.532 0 01-.415.175.532.532 0 01-.416-.175.594.594 0 01-.157-.43v-.71a4.931 4.931 0 01-1.248-.28 3.53 3.53 0 01-1.045-.582.58.58 0 01-.202-.232.782.782 0 01-.056-.315c0-.163.045-.306.135-.43.097-.125.206-.187.326-.187.075 0 .142.016.202.047.067.023.153.066.258.128.345.233.682.403 1.012.512.337.109.689.163 1.056.163.502 0 .887-.1 1.157-.303.277-.201.416-.492.416-.873a.714.714 0 00-.225-.547 1.556 1.556 0 00-.562-.326 10.43 10.43 0 00-.944-.29 10.631 10.631 0 01-1.37-.443 2.439 2.439 0 01-.91-.698c-.255-.31-.382-.73-.382-1.258 0-.628.217-1.164.651-1.606.435-.442 1.004-.718 1.708-.826v-.734c0-.178.053-.322.157-.43a.533.533 0 01.416-.175c.172 0 .311.058.416.175a.594.594 0 01.157.43v.722c.757.1 1.408.384 1.955.85.18.14.27.322.27.547a.678.678 0 01-.146.43c-.09.125-.199.187-.326.187a.617.617 0 01-.202-.035 1.425 1.425 0 01-.248-.14 3.937 3.937 0 00-.876-.5 2.428 2.428 0 00-.966-.175c-.465 0-.835.109-1.112.326-.278.21-.416.5-.416.873 0 .256.078.466.236.629.157.155.355.275.595.36.24.086.566.183.978.291.546.14.992.284 1.337.431.344.148.636.373.876.675.247.295.371.699.371 1.21z"
+        fill={props.color}
       />
       <path
+        d="M15 13.787c0 .62-.21 1.144-.63 1.571-.411.427-.97.695-1.673.803v.734a.594.594 0 01-.158.43.532.532 0 01-.415.175.532.532 0 01-.416-.175.594.594 0 01-.157-.43v-.71a4.931 4.931 0 01-1.248-.28 3.53 3.53 0 01-1.045-.582.58.58 0 01-.202-.232.782.782 0 01-.056-.315c0-.163.045-.306.135-.43.097-.125.206-.187.326-.187.075 0 .142.016.202.047.067.023.153.066.258.128.345.233.682.403 1.012.512.337.109.689.163 1.056.163.502 0 .887-.1 1.157-.303.277-.201.416-.492.416-.873a.714.714 0 00-.225-.547 1.556 1.556 0 00-.562-.326 10.43 10.43 0 00-.944-.29 10.631 10.631 0 01-1.37-.443 2.439 2.439 0 01-.91-.698c-.255-.31-.382-.73-.382-1.258 0-.628.217-1.164.651-1.606.435-.442 1.004-.718 1.708-.826v-.734c0-.178.053-.322.157-.43a.533.533 0 01.416-.175c.172 0 .311.058.416.175a.594.594 0 01.157.43v.722c.757.1 1.408.384 1.955.85.18.14.27.322.27.547a.678.678 0 01-.146.43c-.09.125-.199.187-.326.187a.617.617 0 01-.202-.035 1.425 1.425 0 01-.248-.14 3.937 3.937 0 00-.876-.5 2.428 2.428 0 00-.966-.175c-.465 0-.835.109-1.112.326-.278.21-.416.5-.416.873 0 .256.078.466.236.629.157.155.355.275.595.36.24.086.566.183.978.291.546.14.992.284 1.337.431.344.148.636.373.876.675.247.295.371.699.371 1.21z"
+        stroke={props.color}
         fill="none"
-        stroke={props.color}
-        strokeWidth={1.5}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M8.75 14.25h6.5M8.75 11.25h6.5M8.75 17.25h6.5"
       />
@@ -21,0 +17,0 @@ </svg>

src/components/Input/index.jsx

@@ -5,3 +5,3 @@ import { bool, func, any, node, number, oneOf, oneOfType, string } from 'prop-types';
 import Icon from '../Icon/index';
-import css from '@styled-system/css'
+import css from '@styled-system/css';
 import styled from '@emotion/styled';
@@ -21,3 +21,3 @@ import CurrencyIcon from './CurrencyIcon/index';
 
-const preventDefaultNumberChars = e => {
+const preventDefaultNumberChars = (e) => {
   let checkIfNum;
@@ -28,3 +28,3 @@ const validKeyCodes = [8, 190]; // backspace and . (dot)
     (e.keyCode < 48 || e.keyCode > 57) &&
-    !validKeyCodes.some(kc => kc === e.keyCode)
+    !validKeyCodes.some((kc) => kc === e.keyCode)
   ) {
@@ -45,67 +45,77 @@ checkIfNum = true;
     display: 'flex',
-    borderRadius: "input",
-    paddingRight: "10px",
-    paddingLeft: "10px",
-    outline: "none",
-    boxShadow: "none",
-  }), ({ width, height, type, theme, error, disabled }) => ({
+    borderRadius: 'input',
+    paddingRight: '10px',
+    paddingLeft: '10px',
+    outline: 'none',
+    boxShadow: 'none',
+  }),
+  ({ width, height, type, theme, error, disabled }) => ({
     width,
     height: type === 'textarea' ? '120px' : height,
     border: `1px solid ${error ? theme.colors.borderError : theme.colors.border}`,
-    ":not(:focus-within):hover": {
-      border: `1px solid ${theme.colors.borderActive}`
+    ':not(:focus-within):hover': {
+      border: `1px solid ${theme.colors.borderActive}`,
     },
-    ":focus-within": {
-      outline: "none",
+    ':focus-within': {
+      outline: 'none',
       borderColor: theme.colors.borderFocus,
-      boxShadow: `inset 0 0 0 1px ${theme.colors.borderFocus}`
+      boxShadow: `inset 0 0 0 1px ${theme.colors.borderFocus}`,
     },
-    cursor: disabled ? "not-allowed" : "default",
-    backgroundColor: disabled ? theme.colors.backgroundDisabled : "white",
-    ":-moz-focusring": { color: "transparent", textShadow: "0 0 0 #000" },
-  }));
+    cursor: disabled ? 'not-allowed' : 'default',
+    backgroundColor: disabled ? theme.colors.backgroundDisabled : 'white',
+    ':-moz-focusring': { color: 'transparent', textShadow: '0 0 0 #000' },
+  }),
+);
 
 const TextInput = styled('input')(
   css({
-    boxShadow: "none",
-    border: "none",
-    outline: "none",
-    fontSize: "input",
-    justifyContent: "center",
-    alignItems: "center",
-    paddingLeft: "5px",
-    background: "transparent",
+    boxShadow: 'none',
+    border: 'none',
+    outline: 'none',
+    fontSize: 'input',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingLeft: '5px',
+    background: 'transparent',
     resize: 'none',
-    width: "100%",
-  }), ({ type, theme, disabled, error }) => ({
-    cursor: disabled ? "not-allowed" : "initial",
+    width: '100%',
+  }),
+  ({ type, theme, disabled, error }) => ({
+    cursor: disabled ? 'not-allowed' : 'initial',
     paddingTop: type === 'textarea' ? '8px' : '0px',
     paddingBottom: type === 'textarea' ? '8px' : '0px',
-    "::placeholder": {
+    '::placeholder': {
       color: theme.colors.placeholder,
-      opacity: "1",
-      textIndent: "0px"
+      opacity: '1',
+      textIndent: '0px',
     },
     color: error ? theme.colors.error : theme.colors.foreground,
-  }));
+  }),
+);
 
-const EyeIcon = styled('div')({
-  justifyContent: "center",
-  alignItems: "center",
-  height: "100%",
-  width: "20px",
-}, ({ isPasswordField }) => ({
-  display: isPasswordField ? "inline-flex" : "none",
-  cursor: isPasswordField ? "pointer" : "inherit",
-  right: isPasswordField ? 0 : 'unset',
-}));
+const EyeIcon = styled('div')(
+  {
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '100%',
+    width: '20px',
+  },
+  ({ isPasswordField }) => ({
+    display: isPasswordField ? 'inline-flex' : 'none',
+    cursor: isPasswordField ? 'pointer' : 'inherit',
+    right: isPasswordField ? 0 : 'unset',
+  }),
+);
 
-const TextIcon = styled('div')({
-  justifyContent: "center",
-  alignItems: "center",
-  height: "100%",
-  width: "20px",
-}, ({ isIconField }) => ({
-  display: !isIconField ? "none" : "inline-flex",
-}));
+const TextIcon = styled('div')(
+  {
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '100%',
+    width: '20px',
+  },
+  ({ isIconField }) => ({
+    display: !isIconField ? 'none' : 'inline-flex',
+  }),
+);
 
@@ -118,3 +128,3 @@ const Input = ({
   icon,
-  iconColor = "Dark Neutral 1",
+  iconColor = 'Mid Neutral 2',
   onChange,
@@ -125,7 +135,7 @@ placeholder,
   onKeyDown,
-  width = "300px",
-  height = "40px",
-  type = "input",
-  min = "0.00",
-  step = "0.01",
+  width = '300px',
+  height = '40px',
+  type = 'text',
+  min = '0.00',
+  step = '0.01',
   disabled = false,
@@ -148,5 +158,5 @@ readOnly = false,
 
-  if (type === "password" && !isObscure) {
-    inputType = "text";
-  };
+  if (type === 'password' && !isObscure) {
+    inputType = 'text';
+  }
   if (currencyCode && isEditing) {
@@ -160,3 +170,3 @@ const isFirefox = browser && browser.name === 'firefox';
     isReadOnly = true;
-    inputType = "text";
+    inputType = 'text';
   }
@@ -175,3 +185,3 @@
         {currencyCode && !icon && <CurrencyIcon currencyCode={currencyCode} />}
-        {(icon && typeof icon === 'string') ? <Icon name={icon} color={iconColor} /> : icon}
+        {icon && typeof icon === 'string' ? <Icon name={icon} color={iconColor} /> : icon}
       </TextIcon>
@@ -194,3 +204,3 @@ <TextInput
       />
-      <EyeIcon isPasswordField={type === "password"}>
+      <EyeIcon isPasswordField={type === 'password'}>
         <span className="obscure" onClick={() => setIsObscure(!isObscure)}>
@@ -224,2 +234,2 @@ {isObscure ? <Icon name="eye-hidden" /> : <Icon name="eye-visible" />}
 
-export default Input;
+export default Input;

src/components/Layout/ButtonGroup/index.jsx

@@ -14,5 +14,5 @@ import { node } from 'prop-types';
 ButtonGroup.propTypes = {
-  children: node.isRequired,
+  children: node,
 };
 
 export default ButtonGroup;

src/components/Layout/Stack/index.jsx

 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { bool, string, oneOfType, number, node } from 'prop-types';
+import { bool, string, oneOfType, number, node, arrayOf } from 'prop-types';
 import * as React from 'react';
@@ -41,3 +41,3 @@ import Box from '../Box';
   children: node,
-  gap: oneOfType([string, number]),
+  gap: oneOfType([string, number, arrayOf(oneOfType([string, number]))]),
   dividers: bool,
@@ -44,0 +44,0 @@ };

src/components/Modal/index.jsx

@@ -7,3 +7,3 @@ /** @jsx jsx */
 import { Heading } from '../Text';
-import { Stack, Shelf, Box } from '../Layout';
+import { Shelf, Box } from '../Layout';
 import Button from '../Button';
@@ -13,2 +13,3 @@ import Icon from '../Icon';
 import { Overlay, Content, Body, Footer, Line } from './Modal.styled';
+import css from '@styled-system/css';
 
@@ -76,3 +77,3 @@ const ModalContext = React.createContext(null);
   return (
-    <Box p="medium">
+    <Box p="large">
       {!disableClose && (
@@ -92,3 +93,12 @@ <Button
       )}
-      <Stack gap="large">
+
+      <Box
+        css={css({
+          '> * + *': {
+            marginTop: 'large',
+          },
+        })}
+        display="flex"
+        flexDirection="column"
+      >
         {title && (
@@ -108,3 +118,3 @@ <React.Fragment>
         </Body>
-      </Stack>
+      </Box>
     </Box>
@@ -121,3 +131,3 @@ );
     <Footer
-      p="small"
+      p="medium"
       display="flex"
@@ -124,0 +134,0 @@ justifyContent="space-between"

src/components/Modal/Modal.stories.jsx

 /* eslint-disable react-hooks/rules-of-hooks */
 import { useState } from '@storybook/addons';
-import { select } from '@storybook/addon-knobs'
+import { select } from '@storybook/addon-knobs';
 import * as React from 'react';
@@ -21,3 +21,8 @@ import Modal from '.';
   return (
-    <Modal size={select("size", ['small', 'medium', 'large', 'full'], "medium")} open={open} toggle={toggle} title={`Modal #${index}`}>
+    <Modal
+      size={select('size', ['small', 'medium', 'large', 'full'], 'medium')}
+      open={open}
+      toggle={toggle}
+      title={`Modal #${index}`}
+    >
       <Modal.Body>
@@ -30,3 +35,5 @@ <Stack>
           </Text>
-          <Button onClick={() => setChildOpen(true)}>Open another modal</Button>
+          <ButtonGroup>
+            <Button onClick={() => setChildOpen(true)}>Open another modal</Button>
+          </ButtonGroup>
           <RecursiveModal open={childOpen} toggle={setChildOpen} index={index + 1} />
@@ -33,0 +40,0 @@ </Stack>

src/components/Panel/index.jsx

@@ -55,3 +55,3 @@ import { string, node, oneOf } from 'prop-types';
       {header && <StyledHeader>{header}</StyledHeader>}
-      <Box position="relative" height="100%" {...boxProps}>
+      <Box position="relative" height="100%" flex="1" {...boxProps}>
         {children}
@@ -58,0 +58,0 @@ </Box>

src/components/Popover/index.jsx

@@ -11,3 +11,2 @@ import * as React from 'react';
 
-// TODO: Implement hover
 const Popover = ({
@@ -89,3 +88,3 @@ target,
   shown: undefined,
-  onToggle: () => { },
+  onToggle: () => {},
   position: Position.BOTTOM_LEFT,
@@ -92,0 +91,0 @@ target: undefined,

src/components/Tabs/TabList.jsx

@@ -70,2 +70,3 @@ import React from 'react';
       paddingRight: 'gutter',
+      paddingTop: 10,
       paddingBottom: size === 'large' ? 'gutter' : 10,
@@ -133,3 +134,3 @@
     <Comp onClick={handleClick} as={as} isSelected={isSelected} size={size} {...props} {...rest}>
-      <Shelf gap="xsmall">
+      <Shelf gap="xsmall" flexWrap="nowrap">
         <Text
@@ -136,0 +137,0 @@ color="inherit"

src/index.js

@@ -6,2 +6,3 @@ import 'focus-visible';
 export { default as createTheme } from './theme/createTheme';
+export { useTheme } from 'emotion-theming';
 
@@ -8,0 +9,0 @@ // components

src/theme/base.js

@@ -182,4 +182,4 @@ const space = [0, 4, 8, 16, 24, 32, 40];
           hover: '#2f3743',
-          background: colors['Light Blue 3'],
-          backgroundHover: colors['Light Blue 2'],
+          background: colors['Light Blue 2'],
+          backgroundHover: colors['Light Blue 1'],
           foregroundOnColor: colors['Dark Neutral 1'],
@@ -186,0 +186,0 @@ minimal: colors['Mid Neutral 1'],

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

Improved metrics

Total package byte prevSize

1559008

increased by1.04%

Number of package files

181

increased by0.56%

Lines of code

17857

increased by0.64%

Worsened metrics

Number of low supply chain risk alerts

154

increased by2.67%

No dependency changes