@expandorg/components - npm Package Compare versions

Comparing version 0.2.81 to 0.2.82

index.js

@@ -28,3 +28,3 @@ // @flow
 
-import { Input, InputLabel } from './src/components/Input';
+import { Input, IconInput, InputLabel } from './src/components/Input';
 
@@ -89,2 +89,3 @@ import { JsScript, withScript, useScript } from './src/components/JsScript';
   Input,
+  IconInput,
   InputLabel,
@@ -91,0 +92,0 @@ JsScript,

package.json

 {
   "name": "@expandorg/components",
-  "version": "0.2.81",
+  "version": "0.2.82",
   "description": "expand UI components library",
@@ -28,3 +28,3 @@ "main": "index.js",
   "dependencies": {
-    "@expandorg/uikit": "^0.2.20",
+    "@expandorg/uikit": "^0.2.22",
     "clipboard": "^2.0.4",
@@ -36,3 +36,3 @@ "date-fns": "^1.30.1",
   },
-  "gitHead": "2f8405ad6780043a69cbeadc79dd8152aab74606"
+  "gitHead": "87a9e5aaba5714b96f79da53ffe6edfecec89d08"
 }

src/components/app/JobLogo/JobLogo.js

@@ -25,3 +25,3 @@ import React from 'react';
         )}
-        alt={name}
+        alt=""
       />
@@ -28,0 +28,0 @@ );

src/components/app/Sidebar/index.js

 // @flow
+
+// eslint-disable-next-line import/no-named-as-default
 import Sidebar from './Sidebar';
@@ -3,0 +5,0 @@ import SidebarLink from './SidebarLink';

src/components/Autocomplete/AutocompleteInput.js

@@ -12,2 +12,3 @@ import React, { Component, createRef } from 'react';
 import Suggestion from './Suggestion';
+import TooltipIcon from '../Input/TooltipIcon';
 
@@ -25,2 +26,3 @@ import { containsFilter } from './filterOptions';
     theme: PropTypes.oneOf(['default', 'white']),
+    tooltip: PropTypes.string,
     onChange: PropTypes.func.isRequired,
@@ -38,2 +40,3 @@ onSelect: PropTypes.func,
     className: null,
+    tooltip: null,
     filterFn: containsFilter,
@@ -155,2 +158,3 @@ onSelect: Function.prototype,
       theme,
+      tooltip,
       ...rest
@@ -179,4 +183,8 @@ } = this.props;
           {...rest}
-        />
-        <ArrowDown className="gem-autocomplete-arrow" />
+        >
+          <div className="gem-autocomplete-icons">
+            <ArrowDown className="gem-autocomplete-arrow" />
+            {tooltip && <TooltipIcon tooltip={tooltip} />}
+          </div>
+        </Input>
         {focus && filtered.length !== 0 && (
@@ -183,0 +191,0 @@ <Suggestions>

src/components/Button/Button.js

@@ -1,2 +0,2 @@
-import React, { Component, forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
@@ -7,45 +7,41 @@ import cn from 'classnames';
 
-export class Button extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    type: PropTypes.string,
-    theme: PropTypes.string,
-    size: PropTypes.oneOf(['medium', 'small']),
-    forwardedRef: PropTypes.object, // eslint-disable-line
-  };
+export function Button({
+  children,
+  type,
+  className,
+  theme,
+  size,
+  forwardedRef,
+  ...rest
+}) {
+  const classes = cn(
+    'gem-button',
+    `gem-button-${theme}`,
+    `gem-button-${size}`,
+    className
+  );
 
-  static defaultProps = {
-    className: null,
-    forwardedRef: undefined,
-    type: 'button',
-    size: 'medium',
-    theme: null,
-  };
+  return (
+    <button type={type} className={classes} {...rest} ref={forwardedRef}>
+      {children}
+    </button>
+  );
+}
 
-  render() {
-    const {
-      children,
-      type,
-      className,
-      theme,
-      size,
-      forwardedRef,
-      ...rest
-    } = this.props;
+Button.propTypes = {
+  className: PropTypes.string,
+  type: PropTypes.string,
+  theme: PropTypes.string,
+  size: PropTypes.oneOf(['medium', 'small']),
+  forwardedRef: PropTypes.object, // eslint-disable-line
+};
 
-    const classes = cn(
-      'gem-button',
-      `gem-button-${theme}`,
-      `gem-button-${size}`,
-      className
-    );
+Button.defaultProps = {
+  className: null,
+  forwardedRef: undefined,
+  type: 'button',
+  size: 'medium',
+  theme: null,
+};
 
-    return (
-      <button type={type} className={classes} {...rest} ref={forwardedRef}>
-        {children}
-      </button>
-    );
-  }
-}
-
 /* eslint-disable */
@@ -52,0 +48,0 @@ export default forwardRef((props, ref) => (

src/components/DateInput/DateInput.js

@@ -55,5 +55,9 @@ import React, { Component } from 'react';
           ...inputProps,
-          className: cn(`DayPickerInput-theme-${theme}`, {
-            'DayPickerInput-error': error,
-          }),
+          className: cn(
+            'DayPickerInput-input',
+            `DayPickerInput-theme-${theme}`,
+            {
+              'DayPickerInput-error': error,
+            }
+          ),
         }}
@@ -60,0 +64,0 @@ formatDate={formatDate}

src/components/DateTime/DateTimeInput.js

@@ -80,3 +80,3 @@ import React, { Component } from 'react';
 
-    const classes = cn(styles.input, `gem-dateinput-theme-${theme}`, {
+    const classes = cn(styles.input, {
       [styles.error]: error,
@@ -87,7 +87,13 @@ [styles.filled]: !!value,
     return (
-      <div className={cn(styles.container, className)}>
+      <div
+        className={cn(
+          styles.container,
+          `gem-dateinput-theme-${theme}`,
+          className
+        )}
+      >
         <div className={classes} onClick={this.handleToggle}>
           {value && formatter(value)}
+          <InputLabel placeholder={placeholder} />
         </div>
-        <InputLabel placeholder={placeholder} />
         {picker && (
@@ -94,0 +100,0 @@ <DateTimePicker

src/components/Dropdown/Dropdown.js

@@ -9,2 +9,3 @@ import React, { Component } from 'react';
 import DropdownBase from './DropdownBase';
+import TooltipIcon from '../Input/TooltipIcon';
 
@@ -18,2 +19,5 @@ import './Dropdown.styl';
     nullValue: PropTypes.string,
+    tooltip: PropTypes.any, // eslint-disable-line react/forbid-prop-types
+    tooltipPosition: PropTypes.string,
+    tooltipOrientation: PropTypes.string,
     options: PropTypes.arrayOf(
@@ -30,3 +34,6 @@ PropTypes.oneOfType([PropTypes.string, PropTypes.object])
     className: null,
+    tooltip: null,
     nullValue: null,
+    tooltipPosition: undefined,
+    tooltipOrientation: undefined,
     theme: 'default',
@@ -43,3 +50,13 @@ options: [],
   render() {
-    const { className, options, value, label, nullValue, theme } = this.props;
+    const {
+      className,
+      options,
+      value,
+      label,
+      nullValue,
+      tooltip,
+      tooltipPosition,
+      tooltipOrientation,
+      theme,
+    } = this.props;
 
@@ -52,3 +69,7 @@ return (
         onChange={this.handleChange}
-        className={cn(`gem-dropdown-theme-${theme}`, className)}
+        className={cn(
+          `gem-dropdown-theme-${theme}`,
+          { 'gem-dropdown--tooltip': !!tooltip },
+          className
+        )}
       >
@@ -63,3 +84,13 @@ {({ formatted }) => (
             {formatted}
-            <ArrowDown className="gem-dropdown-arrow" />
+            <div className="gem-dropdown-content-icons">
+              <ArrowDown className="gem-dropdown-content-arrow" />
+              {tooltip && (
+                <TooltipIcon
+                  tooltip={tooltip}
+                  p
+                  position={tooltipPosition}
+                  orientation={tooltipOrientation}
+                />
+              )}
+            </div>
           </div>
@@ -66,0 +97,0 @@ )}

src/components/Input/index.js

 // @flow
+
+/* eslint-disable import/no-named-as-default */
 import Input from './Input';
 import InputLabel from './InputLabel';
+import IconInput from './IconInput';
 
-export { Input, InputLabel };
+export { Input, InputLabel, IconInput };

src/components/Input/Input.js

@@ -1,2 +0,2 @@
-import React, { Component, forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
@@ -9,62 +9,60 @@ import cn from 'classnames';
 
-export class Input extends Component {
-  static propTypes = {
-    value: PropTypes.string,
-    onChange: PropTypes.func,
-    className: PropTypes.string,
-    placeholder: PropTypes.string,
-    error: PropTypes.bool, // eslint-disable-line
-    theme: PropTypes.oneOf(['default', 'white']),
-    forwardedRef: PropTypes.object, // eslint-disable-line
-  };
+export function Input({
+  onChange,
+  className,
+  value,
+  error,
+  placeholder,
+  forwardedRef,
+  children,
+  theme,
+  ...rest
+}) {
+  const classes = cn(
+    'gem-input-container',
+    `gem-input-theme-${theme}`,
+    {
+      'gem-input-error': error,
+    },
+    className
+  );
 
-  static defaultProps = {
-    value: undefined,
-    placeholder: undefined,
-    forwardedRef: undefined,
-    onChange: undefined,
-    className: null,
-    theme: 'default',
-    error: false,
-  };
+  /* eslint-disable jsx-a11y/label-has-associated-control */
+  /* eslint-disable jsx-a11y/label-has-for */
 
-  render() {
-    const {
-      onChange,
-      className,
-      value,
-      error,
-      placeholder,
-      forwardedRef,
-      theme,
-      ...rest
-    } = this.props;
+  return (
+    <div className={classes}>
+      <input
+        className={cn('gem-input', { 'gem-input-filled': !!value })}
+        value={value || ''}
+        onChange={onChange}
+        ref={forwardedRef}
+        {...rest}
+      />
+      <InputLabel placeholder={placeholder} theme={theme} />
+      {children}
+    </div>
+  );
+}
 
-    const classes = cn(
-      'gem-input-container',
-      `gem-input-theme-${theme}`,
-      {
-        'gem-input-error': error,
-      },
-      className
-    );
+Input.propTypes = {
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  className: PropTypes.string,
+  placeholder: PropTypes.string,
+  error: PropTypes.bool,
+  theme: PropTypes.oneOf(['default', 'white', 'transparent']),
+  forwardedRef: PropTypes.shape({}),
+};
 
-    /* eslint-disable jsx-a11y/label-has-associated-control */
-    /* eslint-disable jsx-a11y/label-has-for */
+Input.defaultProps = {
+  value: undefined,
+  placeholder: undefined,
+  forwardedRef: undefined,
+  onChange: undefined,
+  className: null,
+  theme: 'default',
+  error: false,
+};
 
-    return (
-      <div className={classes}>
-        <input
-          className={cn('gem-input', { 'gem-input-filled': !!value })}
-          value={value || ''}
-          onChange={onChange}
-          ref={forwardedRef}
-          {...rest}
-        />
-        <InputLabel placeholder={placeholder} />
-      </div>
-    );
-  }
-}
-
 /* eslint-disable */
@@ -71,0 +69,0 @@ export default forwardRef((props, ref) => (

src/components/Input/InputLabel.js

@@ -1,2 +0,2 @@
-/* eslint-disable jsx-a11y/label-has-for */
+/* eslint-disable jsx-a11y/control-has-associated-label */
 /* eslint-disable jsx-a11y/label-has-associated-control */
@@ -13,8 +13,4 @@ import React from 'react';
   }
-  return (
-    <label
-      className={cn('gem-input-label', className)}
-      placeholder={placeholder}
-    />
-  );
+  const classes = cn('gem-input-label', className);
+  return <label className={classes} placeholder={placeholder} />;
 }
@@ -21,0 +17,0 @@

No alert changes

Improved metrics

Total package byte prevSize

197120

3.71%

Number of package files

199

2.05%

Lines of code

3859

3.49%

Dependency changes

• Updated

  @expandorg/uikit@^0.2.22