@entur/component-library - npm Package Compare versions

Comparing version 0.2.6 to 0.2.7

lib/components/alertMessage/index.js

@@ -79,4 +79,2 @@ 'use strict';
   switch (level) {
-    case 'info':
-      return '';
     case 'success':
@@ -88,2 +86,4 @@ return _react2.default.createElement(_success2.default, { className: _styles.rootClassName + '__icon', color: _colors.dark_mint });
       return _react2.default.createElement(_exclamation2.default, { className: _styles.rootClassName + '__icon' });
+    // Todo: Add Icon for info
+    case 'info':
     case 'none':
@@ -115,4 +115,5 @@ return null;
 };
+
 AlertMessage.defaultProps = {
   level: 'none'
 };

lib/components/button/inputButton.js

@@ -86,3 +86,4 @@ 'use strict';
           refCallback = _props.refCallback,
-          rest = _objectWithoutProperties(_props, ['id', 'className', 'focusClassName', 'type', 'children', 'value', 'checked', 'disabled', 'refCallback']);
+          style = _props.style,
+          rest = _objectWithoutProperties(_props, ['id', 'className', 'focusClassName', 'type', 'children', 'value', 'checked', 'disabled', 'refCallback', 'style']);
 
@@ -95,3 +96,3 @@ var hasFocus = this.state.hasFocus;
         'label',
-        { htmlFor: id, className: classNames },
+        { htmlFor: id, className: classNames, style: style },
         children,
@@ -98,0 +99,0 @@ _react2.default.createElement('input', _extends({

lib/components/formControl/buttonGroup.js

@@ -166,3 +166,3 @@ 'use strict';
   children: _propTypes2.default.node.isRequired,
-  variant: _propTypes2.default.oneOf(['midnight']),
+  variant: _propTypes2.default.oneOf(['midnight', 'primary']),
   size: _propTypes2.default.oneOf(['sm', 'md', 'lg']).isRequired,
@@ -169,0 +169,0 @@ width: _propTypes2.default.oneOf(['fluid'])

lib/components/formControl/index.js

@@ -129,5 +129,6 @@ 'use strict';
   size: _propTypes2.default.oneOf(['sm', 'md', 'lg']).isRequired,
-  value: _propTypes2.default.string,
+  value: _propTypes2.default.oneOf([_propTypes2.default.string, _propTypes2.default.number]).isRequired,
+  type: _propTypes2.default.oneOf(['number', 'string']),
   valid: _propTypes2.default.oneOf(['success', 'error', 'warning', 'info', 'none']),
-  variant: _propTypes2.default.oneOf(['midnight']),
+  variant: _propTypes2.default.oneOf(['midnight', 'primary']),
   disabled: _propTypes2.default.bool,
@@ -174,7 +175,11 @@ refCallback: _propTypes2.default.func
     className: _styles.rootClassName + '-prepend',
-    variant: variant, valid: valid, disabled: disabled
+    variant: variant,
+    valid: valid,
+    disabled: disabled
   });
   var appendClassNames = getClassNames(_styles.rootClassName, {
     className: _styles.rootClassName + '-append',
-    variant: variant, valid: valid, disabled: disabled
+    variant: variant,
+    valid: valid,
+    disabled: disabled
   });
@@ -226,3 +231,9 @@
   var classNames = getClassNames(_styles.rootClassName, {
-    className: className, variant: variant, size: size, width: width, valid: valid, prepend: prepend, append: append
+    className: className,
+    variant: variant,
+    size: size,
+    width: width,
+    valid: valid,
+    prepend: prepend,
+    append: append
   });
@@ -240,3 +251,7 @@
     },
-    _react2.default.createElement('input', _extends({}, rest, { ref: refCallback, className: classNames, disabled: disabled }))
+    _react2.default.createElement('input', _extends({}, rest, {
+      ref: refCallback,
+      className: classNames,
+      disabled: disabled
+    }))
   );
@@ -261,3 +276,9 @@ }
   var classNames = getClassNames(_styles.rootClassName, {
-    className: className, variant: variant, size: size, width: width, valid: valid, prepend: prepend, append: append
+    className: className,
+    variant: variant,
+    size: size,
+    width: width,
+    valid: valid,
+    prepend: prepend,
+    append: append
   });
@@ -275,3 +296,7 @@
     },
-    _react2.default.createElement('textarea', _extends({}, rest, { ref: refCallback, className: classNames, disabled: disabled }))
+    _react2.default.createElement('textarea', _extends({}, rest, {
+      ref: refCallback,
+      className: classNames,
+      disabled: disabled
+    }))
   );
@@ -294,3 +319,8 @@ }
   var classNames = getClassNames(_styles.rootClassName, {
-    className: className, variant: variant, size: size, width: width, active: active, disabled: disabled
+    className: className,
+    variant: variant,
+    size: size,
+    width: width,
+    active: active,
+    disabled: disabled
   }, _styles.buttonClassName);
@@ -325,3 +355,8 @@
   var classNames = getClassNames(_styles.rootClassName, {
-    className: className, variant: variant, size: size, width: width, active: active, disabled: disabled
+    className: className,
+    variant: variant,
+    size: size,
+    width: width,
+    active: active,
+    disabled: disabled
   }, _styles.buttonClassName);
@@ -328,0 +363,0 @@

package.json

 {
   "name": "@entur/component-library",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "license": "EUPL-1.2",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -7,10 +7,8 @@ # Entur component library
 
-## Getting started
+# Installation
 
-- Clone project
-- `npm install` to install dependencies
-- `npm run storybook` to run the Storybook app
+```
+npm install --save @entur/component-library
+```
 
-
-# Usage
 The component library depends on a small set of global definitions; typography and rem size. These rules are defined in `index.css`. For correct fonts add `@entur/fonts` to your `package.json`
@@ -24,4 +22,6 @@
 
-Adding rules to your project
+Remember to run npm install after adding the line.
 
+You will also need to import the rules in your code:
+
 ```
@@ -39,2 +39,8 @@ // javascript
 
+## Getting started
+
+- Clone project
+- `npm install` to install dependencies
+- `npm run storybook` to run the Storybook app
+
 ## Publish
@@ -41,0 +47,0 @@

src/components/alertMessage/index.js

@@ -13,10 +13,14 @@ import React from 'react';
   switch (level) {
-    case 'info':
-      return '';
     case 'success':
-      return <SuccessIcon className={`${rootClassName}__icon`} color={dark_mint} />;
+      return (
+        <SuccessIcon className={`${rootClassName}__icon`} color={dark_mint} />
+      );
     case 'error':
-      return <ErrorIcon className={`${rootClassName}__icon`} color={dark_coral} />;
+      return (
+        <ErrorIcon className={`${rootClassName}__icon`} color={dark_coral} />
+      );
     case 'warning':
       return <ExclamationIcon className={`${rootClassName}__icon`} />;
+    // Todo: Add Icon for info
+    case 'info':
     case 'none':
@@ -41,4 +45,5 @@ return null;
 };
+
 AlertMessage.defaultProps = {
   level: 'none'
 };

src/components/button/inputButton.js

@@ -44,2 +44,3 @@ import React, { Component } from 'react';
       refCallback, // eslint-disable-line no-unused-vars
+      style,
       ...rest
@@ -52,3 +53,3 @@ } = this.props;
     return (
-      <label htmlFor={id} className={classNames}>
+      <label htmlFor={id} className={classNames} style={style}>
         {children}
@@ -55,0 +56,0 @@ <input

src/components/formControl/buttonGroup.js

@@ -9,6 +9,4 @@ import React from 'react';
 
+const CHILDREN_WHITELIST = [RadioFormButton, CheckboxFormButton];
 
-const CHILDREN_WHITELIST = [ RadioFormButton, CheckboxFormButton ];
-
-
 export function ButtonGroup({
@@ -33,8 +31,13 @@ id,
   const buttons = childrenArray.map((child, index) => {
-    if(!CHILDREN_WHITELIST.includes(child.type)) {
-      const whitelistNames = CHILDREN_WHITELIST.map(({name})=> name);
-      throw new Error(`ButtonGroup only allow children of type ${whitelistNames.join(', ')}, ${child.type} is not allowed`);
+    if (!CHILDREN_WHITELIST.includes(child.type)) {
+      const whitelistNames = CHILDREN_WHITELIST.map(({ name }) => name);
+      throw new Error(
+        `ButtonGroup only allow children of type ${whitelistNames.join(
+          ', '
+        )}, ${child.type} is not allowed`
+      );
     }
 
-    const active = value !== undefined ? value === child.props.value : child.props.active;
+    const active =
+      value !== undefined ? value === child.props.value : child.props.active;
 
@@ -52,7 +55,3 @@ return React.cloneElement(child, {
 
-  return (
-    <div className={combinedClassNames}>
-      {buttons}
-    </div>
-  );
+  return <div className={combinedClassNames}>{buttons}</div>;
 }
@@ -63,3 +62,3 @@
   children: PropTypes.node.isRequired,
-  variant: PropTypes.oneOf(['midnight']),
+  variant: PropTypes.oneOf(['midnight', 'primary']),
   size: PropTypes.oneOf(['sm', 'md', 'lg']).isRequired,
@@ -66,0 +65,0 @@ width: PropTypes.oneOf(['fluid'])

src/components/formControl/index.js

@@ -21,5 +21,6 @@ import React from 'react';
   size: PropTypes.oneOf(['sm', 'md', 'lg']).isRequired,
-  value: PropTypes.string,
+  value: PropTypes.oneOf([PropTypes.string, PropTypes.number]).isRequired,
+  type: PropTypes.oneOf(['number', 'string']),
   valid: PropTypes.oneOf(['success', 'error', 'warning', 'info', 'none']),
-  variant: PropTypes.oneOf(['midnight']),
+  variant: PropTypes.oneOf(['midnight', 'primary']),
   disabled: PropTypes.bool,
@@ -32,3 +33,3 @@ refCallback: PropTypes.func
   value: '',
-  onChange: () => {},
+  onChange: () => {}
 };
@@ -40,7 +41,12 @@
 
-  return cx(sharedClassNames, {
-    [`${baseClassName}--valid-${valid}`]: valid,
-    [`${baseClassName}--is-prepended`]: prepend,
-    [`${baseClassName}--is-appended`]: append,
-  }, ...args, className);
+  return cx(
+    sharedClassNames,
+    {
+      [`${baseClassName}--valid-${valid}`]: valid,
+      [`${baseClassName}--is-prepended`]: prepend,
+      [`${baseClassName}--is-appended`]: append
+    },
+    ...args,
+    className
+  );
 }
@@ -58,19 +64,26 @@
 }) {
-  const classNames = getClassNamesShared(inputGroupClassName, {width}, className);
+  const classNames = getClassNamesShared(
+    inputGroupClassName,
+    { width },
+    className
+  );
   const prependClassNames = getClassNames(rootClassName, {
     className: `${rootClassName}-prepend`,
-    variant, valid, disabled
+    variant,
+    valid,
+    disabled
   });
   const appendClassNames = getClassNames(rootClassName, {
     className: `${rootClassName}-append`,
-    variant, valid, disabled
+    variant,
+    valid,
+    disabled
   });
 
-
-  if(prepend || append) {
+  if (prepend || append) {
     return (
       <div className={classNames}>
-        { prepend && <div className={prependClassNames}>{prepend}</div>}
-        { children }
-        { append && <div className={appendClassNames}>{append}</div>}
+        {prepend && <div className={prependClassNames}>{prepend}</div>}
+        {children}
+        {append && <div className={appendClassNames}>{append}</div>}
       </div>
@@ -90,3 +103,3 @@ );
   disabled: PropTypes.bool,
-  children: PropTypes.node,
+  children: PropTypes.node
 };
@@ -107,3 +120,9 @@
   const classNames = getClassNames(rootClassName, {
-    className, variant, size, width, valid, prepend, append
+    className,
+    variant,
+    size,
+    width,
+    valid,
+    prepend,
+    append
   });
@@ -120,3 +139,8 @@
     >
-      <input {...rest} ref={refCallback} className={classNames} disabled={disabled}/>
+      <input
+        {...rest}
+        ref={refCallback}
+        className={classNames}
+        disabled={disabled}
+      />
     </FormControlWrapper>
@@ -141,5 +165,10 @@ );
 }) {
-
   const classNames = getClassNames(rootClassName, {
-    className, variant, size, width, valid, prepend, append
+    className,
+    variant,
+    size,
+    width,
+    valid,
+    prepend,
+    append
   });
@@ -156,3 +185,8 @@
     >
-      <textarea {...rest} ref={refCallback} className={classNames} disabled={disabled} />
+      <textarea
+        {...rest}
+        ref={refCallback}
+        className={classNames}
+        disabled={disabled}
+      />
     </FormControlWrapper>
@@ -165,3 +199,2 @@ );
 
-
 export function CheckboxFormButton({
@@ -177,5 +210,14 @@ className,
 }) {
-  const classNames = getClassNames(rootClassName, {
-    className, variant, size, width, active, disabled
-  }, buttonClassName);
+  const classNames = getClassNames(
+    rootClassName,
+    {
+      className,
+      variant,
+      size,
+      width,
+      active,
+      disabled
+    },
+    buttonClassName
+  );
 
@@ -199,3 +241,2 @@ return (
 
-
 export function RadioFormButton({
@@ -211,5 +252,14 @@ className,
 }) {
-  const classNames = getClassNames(rootClassName, {
-    className, variant, size, width, active, disabled
-  }, buttonClassName);
+  const classNames = getClassNames(
+    rootClassName,
+    {
+      className,
+      variant,
+      size,
+      width,
+      active,
+      disabled
+    },
+    buttonClassName
+  );
 
@@ -216,0 +266,0 @@ return (

No alert changes

Improved metrics

Total package byte prevSize

473608

increased by1.17%

Number of package files

96

increased by1.05%

Lines of code

5102

increased by2%

Number of lines in readme file

56

increased by12%

No dependency changes