@dnanpm/styleguide 1.8.0 → 1.8.1

package/build/cjs/components/AmountSelector/AmountSelector.js

@@ -28,10 +28,14 @@ const Container = styled['default'].div `
     input {
         width: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 4)};
         border: 0 none;
-        text-align: right;
+        text-align: center;
         outline: none;
         -webkit-appearance: none;
         -moz-appearance: textfield;
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            display: none;
+        }
     }
 `;
 const StyledButtonSecondary = styled['default'](ButtonSecondary['default']) `
@@ -69,10 +73,11 @@ const AmountSelector = ({ onChange, value = 1, step = 1, min = 1, max, disabled
         }
     };
     return (React__default['default'].createElement(Container, { disabled: disabled, "data-testid": dataTestId, className: props.className },
-        React__default['default'].createElement(StyledButtonSecondary, { disabled: disabled, onClick: decrease },
+        React__default['default'].createElement(StyledButtonSecondary, { disabled: disabled, onClick: decrease, "data-testid": dataTestId &&
+                `${dataTestId}${props.removable && isMinReached(value - step) ? '-remove' : '-decrease'}` },
             React__default['default'].createElement(Icon['default'], { color: theme['default'].color.black, name: props.removable && isMinReached(value - step) ? 'hlTrash' : 'hlMinus' })),
         React__default['default'].createElement("input", { id: props.id, name: props.name, type: "number", onChange: handleChange, value: value, readOnly: readonly || disabled, disabled: disabled }),
-        React__default['default'].createElement(StyledButtonSecondary, { disabled: disabled, onClick: increase },
+        React__default['default'].createElement(StyledButtonSecondary, { disabled: disabled, onClick: increase, "data-testid": dataTestId ? `${dataTestId}-increase` : undefined },
             React__default['default'].createElement(Icon['default'], { color: theme['default'].color.black, name: "hlPlus" }))));
 };
 

package/build/cjs/components/Input/Input.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var styled = require('../../themes/styled.js');
 var styledUtils = require('../../utils/styledUtils.js');
-var LabelText = require('../LabelText/LabelText.js');
 var Icon = require('../Icon/Icon.js');
+var LabelText = require('../LabelText/LabelText.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -19,7 +19,7 @@ const Tag = styled['default'].input `
     padding: 0 ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1)};
     font-size: ${props => props.theme.fontSize.defaultFontSize};
     width: 100%;
-    height: 40px;
+    height: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 4)};
     border: 1px solid ${props => props.theme.color.gray15};
     &::-ms-clear,
     &::-ms-reveal {
@@ -51,8 +51,8 @@ const FieldWrapper = styled['default'].div `
         position: absolute;
         z-index: 1;
         top: 0;
-        right: 0.625rem;
-        height: 40px;
+        right: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1)};
+        height: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 4)};
     }
 `;
 const FieldContainer = styled['default'].div `

package/build/cjs/components/Selectbox/Selectbox.d.ts

@@ -9,23 +9,26 @@ interface DropDownIndicator {
     iconSize?: string;
 }
 interface Props {
+    options: ReactSelectProps['options'];
+    onChange: (selectedItem: SelectboxItem) => void;
     /** Allows to pass a custom className */
     className?: string;
+    'data-testid'?: string;
     label?: string;
     inputId?: ReactSelectProps['inputId'];
     placeholder?: ReactSelectProps['placeholder'];
-    onChange: (selectedItem: SelectboxItem) => void;
-    options: ReactSelectProps['options'];
+    onInputChange?: ReactSelectProps['onInputChange'];
     value?: ReactSelectProps['value'];
-    'data-testid'?: string;
     dropDownIndicator?: DropDownIndicator;
     noOptionsText?: string;
     isSearchable?: boolean;
+    isClearable?: boolean;
+    isMulti?: boolean;
     isLoading?: boolean;
     isDisabled?: boolean;
     isRequired?: boolean;
     error?: boolean;
     errorMessage?: string;
 }
-declare const SelectBox: ({ className, label, onChange, options, value, inputId, dropDownIndicator, placeholder, "data-testid": dataTestId, isSearchable, noOptionsText, isLoading, isDisabled, isRequired, error, errorMessage, }: Props) => JSX.Element;
+declare const SelectBox: ({ dropDownIndicator, "data-testid": dataTestId, isSearchable, isClearable, isMulti, noOptionsText, isLoading, isDisabled, isRequired, error, ...props }: Props) => JSX.Element;
 export default SelectBox;

package/build/cjs/components/Selectbox/Selectbox.js

@@ -45,7 +45,7 @@ const selectBoxStyles = {
     control: (styles, state) => {
         const customControlStyles = {
             ...borderStyles,
-            height: '2.625rem',
+            height: styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 4),
             borderBottomColor: state.menuIsOpen ? theme['default'].color.white : 'inherit',
             '&:hover': {
                 borderColor: theme['default'].color.gray25,
@@ -89,7 +89,7 @@ const selectBoxStyles = {
         return { ...styles, ...customOptionStyles };
     },
 };
-const SelectBox = ({ className, label, onChange, options, value, inputId, dropDownIndicator, placeholder, 'data-testid': dataTestId, isSearchable = false, noOptionsText = '', isLoading = false, isDisabled = false, isRequired = false, error = false, errorMessage, }) => {
+const SelectBox = ({ dropDownIndicator, 'data-testid': dataTestId, isSearchable = false, isClearable = false, isMulti = false, noOptionsText = '', isLoading = false, isDisabled = false, isRequired = false, error = false, ...props }) => {
     const getNoOptionsText = () => noOptionsText;
     const DropdownIndicator = (dropdownIndicatorProps) => {
         const { color = isDisabled ? theme['default'].color.gray40 : theme['default'].color.black, iconSize = '1rem' } = {
@@ -106,13 +106,13 @@ const SelectBox = ({ className, label, onChange, options, value, inputId, dropDo
         return (Select.components.DropdownIndicator && (React__default['default'].createElement(Select.components.DropdownIndicator, Object.assign({}, dropdownIndicatorProps),
             React__default['default'].createElement(Icon['default'], { color: color, name: getIconName(), size: iconSize }))));
     };
-    return (React__default['default'].createElement("div", { className: className, "data-testid": dataTestId }, !isLoading ? (React__default['default'].createElement(FieldContainer, { disabled: isDisabled, error: error },
-        label && (React__default['default'].createElement(LabelText.LabelText, { htmlFor: inputId },
-            label,
+    return (React__default['default'].createElement("div", { className: props.className, "data-testid": dataTestId }, !isLoading ? (React__default['default'].createElement(FieldContainer, { disabled: isDisabled, error: error },
+        props.label && (React__default['default'].createElement(LabelText.LabelText, { htmlFor: props.inputId },
+            props.label,
             " ",
             isRequired && React__default['default'].createElement(Mandatory, null, "*"))),
-        React__default['default'].createElement(Select__default['default'], { inputId: inputId, styles: selectBoxStyles, components: { DropdownIndicator }, options: options, classNamePrefix: "react_select", onChange: onChange, value: value, placeholder: placeholder, noOptionsMessage: getNoOptionsText, isSearchable: isSearchable, isDisabled: isDisabled }),
-        error && errorMessage && React__default['default'].createElement(ErrorMessage, null, errorMessage))) : (React__default['default'].createElement(PixelLoader.PixelLoader, null))));
+        React__default['default'].createElement(Select__default['default'], { inputId: props.inputId, styles: selectBoxStyles, components: { DropdownIndicator }, options: props.options, classNamePrefix: "react_select", onChange: props.onChange, onInputChange: props.onInputChange, value: props.value, placeholder: props.placeholder, noOptionsMessage: getNoOptionsText, isSearchable: isSearchable, isClearable: isClearable, isMulti: isMulti, isDisabled: isDisabled }),
+        error && props.errorMessage && (React__default['default'].createElement(ErrorMessage, null, props.errorMessage)))) : (React__default['default'].createElement(PixelLoader.PixelLoader, null))));
 };
 
 exports.default = SelectBox;

package/build/es/components/AmountSelector/AmountSelector.js

@@ -20,10 +20,14 @@ const Container = styled.div `
     input {
         width: ${getMultipliedSize(theme.base.baseWidth, 4)};
         border: 0 none;
-        text-align: right;
+        text-align: center;
         outline: none;
         -webkit-appearance: none;
         -moz-appearance: textfield;
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            display: none;
+        }
     }
 `;
 const StyledButtonSecondary = styled(ButtonSecondary) `
@@ -61,10 +65,11 @@ const AmountSelector = ({ onChange, value = 1, step = 1, min = 1, max, disabled
         }
     };
     return (React.createElement(Container, { disabled: disabled, "data-testid": dataTestId, className: props.className },
-        React.createElement(StyledButtonSecondary, { disabled: disabled, onClick: decrease },
+        React.createElement(StyledButtonSecondary, { disabled: disabled, onClick: decrease, "data-testid": dataTestId &&
+                `${dataTestId}${props.removable && isMinReached(value - step) ? '-remove' : '-decrease'}` },
             React.createElement(Icon, { color: theme.color.black, name: props.removable && isMinReached(value - step) ? 'hlTrash' : 'hlMinus' })),
         React.createElement("input", { id: props.id, name: props.name, type: "number", onChange: handleChange, value: value, readOnly: readonly || disabled, disabled: disabled }),
-        React.createElement(StyledButtonSecondary, { disabled: disabled, onClick: increase },
+        React.createElement(StyledButtonSecondary, { disabled: disabled, onClick: increase, "data-testid": dataTestId ? `${dataTestId}-increase` : undefined },
             React.createElement(Icon, { color: theme.color.black, name: "hlPlus" }))));
 };
 

package/build/es/components/Input/Input.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import styled from '../../themes/styled.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
-import { LabelText } from '../LabelText/LabelText.js';
 import Icon from '../Icon/Icon.js';
+import { LabelText } from '../LabelText/LabelText.js';
 
 const Tag = styled.input `
     position: relative;
@@ -11,7 +11,7 @@ const Tag = styled.input `
     padding: 0 ${props => getMultipliedSize(props.theme.base.baseWidth, 1)};
     font-size: ${props => props.theme.fontSize.defaultFontSize};
     width: 100%;
-    height: 40px;
+    height: ${props => getMultipliedSize(props.theme.base.baseHeight, 4)};
     border: 1px solid ${props => props.theme.color.gray15};
     &::-ms-clear,
     &::-ms-reveal {
@@ -43,8 +43,8 @@ const FieldWrapper = styled.div `
         position: absolute;
         z-index: 1;
         top: 0;
-        right: 0.625rem;
-        height: 40px;
+        right: ${props => getMultipliedSize(props.theme.base.baseWidth, 1)};
+        height: ${props => getMultipliedSize(props.theme.base.baseHeight, 4)};
     }
 `;
 const FieldContainer = styled.div `

package/build/es/components/Selectbox/Selectbox.d.ts

@@ -9,23 +9,26 @@ interface DropDownIndicator {
     iconSize?: string;
 }
 interface Props {
+    options: ReactSelectProps['options'];
+    onChange: (selectedItem: SelectboxItem) => void;
     /** Allows to pass a custom className */
     className?: string;
+    'data-testid'?: string;
     label?: string;
     inputId?: ReactSelectProps['inputId'];
     placeholder?: ReactSelectProps['placeholder'];
-    onChange: (selectedItem: SelectboxItem) => void;
-    options: ReactSelectProps['options'];
+    onInputChange?: ReactSelectProps['onInputChange'];
     value?: ReactSelectProps['value'];
-    'data-testid'?: string;
     dropDownIndicator?: DropDownIndicator;
     noOptionsText?: string;
     isSearchable?: boolean;
+    isClearable?: boolean;
+    isMulti?: boolean;
     isLoading?: boolean;
     isDisabled?: boolean;
     isRequired?: boolean;
     error?: boolean;
     errorMessage?: string;
 }
-declare const SelectBox: ({ className, label, onChange, options, value, inputId, dropDownIndicator, placeholder, "data-testid": dataTestId, isSearchable, noOptionsText, isLoading, isDisabled, isRequired, error, errorMessage, }: Props) => JSX.Element;
+declare const SelectBox: ({ dropDownIndicator, "data-testid": dataTestId, isSearchable, isClearable, isMulti, noOptionsText, isLoading, isDisabled, isRequired, error, ...props }: Props) => JSX.Element;
 export default SelectBox;

package/build/es/components/Selectbox/Selectbox.js

@@ -36,7 +36,7 @@ const selectBoxStyles = {
     control: (styles, state) => {
         const customControlStyles = {
             ...borderStyles,
-            height: '2.625rem',
+            height: getMultipliedSize(theme.base.baseHeight, 4),
             borderBottomColor: state.menuIsOpen ? theme.color.white : 'inherit',
             '&:hover': {
                 borderColor: theme.color.gray25,
@@ -80,7 +80,7 @@ const selectBoxStyles = {
         return { ...styles, ...customOptionStyles };
     },
 };
-const SelectBox = ({ className, label, onChange, options, value, inputId, dropDownIndicator, placeholder, 'data-testid': dataTestId, isSearchable = false, noOptionsText = '', isLoading = false, isDisabled = false, isRequired = false, error = false, errorMessage, }) => {
+const SelectBox = ({ dropDownIndicator, 'data-testid': dataTestId, isSearchable = false, isClearable = false, isMulti = false, noOptionsText = '', isLoading = false, isDisabled = false, isRequired = false, error = false, ...props }) => {
     const getNoOptionsText = () => noOptionsText;
     const DropdownIndicator = (dropdownIndicatorProps) => {
         const { color = isDisabled ? theme.color.gray40 : theme.color.black, iconSize = '1rem' } = {
@@ -97,13 +97,13 @@ const SelectBox = ({ className, label, onChange, options, value, inputId, dropDo
         return (components.DropdownIndicator && (React.createElement(components.DropdownIndicator, Object.assign({}, dropdownIndicatorProps),
             React.createElement(Icon, { color: color, name: getIconName(), size: iconSize }))));
     };
-    return (React.createElement("div", { className: className, "data-testid": dataTestId }, !isLoading ? (React.createElement(FieldContainer, { disabled: isDisabled, error: error },
-        label && (React.createElement(LabelText, { htmlFor: inputId },
-            label,
+    return (React.createElement("div", { className: props.className, "data-testid": dataTestId }, !isLoading ? (React.createElement(FieldContainer, { disabled: isDisabled, error: error },
+        props.label && (React.createElement(LabelText, { htmlFor: props.inputId },
+            props.label,
             " ",
             isRequired && React.createElement(Mandatory, null, "*"))),
-        React.createElement(Select, { inputId: inputId, styles: selectBoxStyles, components: { DropdownIndicator }, options: options, classNamePrefix: "react_select", onChange: onChange, value: value, placeholder: placeholder, noOptionsMessage: getNoOptionsText, isSearchable: isSearchable, isDisabled: isDisabled }),
-        error && errorMessage && React.createElement(ErrorMessage, null, errorMessage))) : (React.createElement(PixelLoader, null))));
+        React.createElement(Select, { inputId: props.inputId, styles: selectBoxStyles, components: { DropdownIndicator }, options: props.options, classNamePrefix: "react_select", onChange: props.onChange, onInputChange: props.onInputChange, value: props.value, placeholder: props.placeholder, noOptionsMessage: getNoOptionsText, isSearchable: isSearchable, isClearable: isClearable, isMulti: isMulti, isDisabled: isDisabled }),
+        error && props.errorMessage && (React.createElement(ErrorMessage, null, props.errorMessage)))) : (React.createElement(PixelLoader, null))));
 };
 
 export default SelectBox;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "1.8.0",
+    "version": "1.8.1",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",