@expandorg/components - npm Package Compare versions

Comparing version 0.2.81-y.1 to 0.2.81

index.js

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

package.json

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

src/components/app/JobLogo/JobLogo.js

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

src/components/app/Sidebar/index.js

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

src/components/Autocomplete/AutocompleteInput.js

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

src/components/Button/Button.js

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

src/components/DateInput/DateInput.js

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

src/components/DateTime/DateTimeInput.js

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

src/components/Dropdown/Dropdown.js

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

src/components/Input/Input.js

@@ -1,2 +0,2 @@
-import React, { forwardRef } from 'react';
+import React, { Component, forwardRef } from 'react';
 import PropTypes from 'prop-types';
@@ -9,60 +9,62 @@ import cn from 'classnames';
 
-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
-  );
+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
+  };
 
-  /* eslint-disable jsx-a11y/label-has-associated-control */
-  /* eslint-disable jsx-a11y/label-has-for */
+  static 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} theme={theme} />
-      {children}
-    </div>
-  );
-}
+  render() {
+    const {
+      onChange,
+      className,
+      value,
+      error,
+      placeholder,
+      forwardedRef,
+      theme,
+      ...rest
+    } = this.props;
 
-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({}),
-};
+    const classes = cn(
+      'gem-input-container',
+      `gem-input-theme-${theme}`,
+      {
+        'gem-input-error': error,
+      },
+      className
+    );
 
-Input.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 */
 
+    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 */
@@ -69,0 +71,0 @@ export default forwardRef((props, ref) => (

src/components/Input/InputLabel.js

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

No alert changes

Worsened metrics

Total package byte prevSize

190063

decreased by-3.58%

Number of package files

195

decreased by-2.01%

Lines of code

3729

decreased by-3.37%

Dependency changes

• Updated@expandorg/uikit@^0.2.20