Merge pull request #2 from jadu/feature/xfp-compatibility

Changes to ensure library is compatible with XFP
jadu · Oct 27, 2020 · b6ac4c7 · b6ac4c7
2 parents f80cc34 + 23a0e2c
commit b6ac4c7
Show file tree

Hide file tree

Showing 28 changed files with 12,354 additions and 8,907 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,24 +9,40 @@
   },
   "keywords": [],
   "author": "",
+  "browserify": {
+    "transform": [
+      [
+        "babelify",
+        {
+          "presets": [
+            "es2015",
+            "es2017",
+            "react",
+            "stage-0"
+          ]
+        }
+      ]
+    ]
+  },
   "license": "ISC",
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/preset-env": "^7.9.5",
-    "@babel/preset-react": "^7.9.4",
+    "babel-core": "^6.24.0",
     "babel-jest": "^26.0.1",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "^6.1.0",
+    "babel-plugin-transform-class-properties": "^6.24.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-env": "^1.0",
+    "babel-preset-react": "^6.24.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "enzyme-to-json": "^3.4.4",
-    "html-webpack-plugin": "^4.2.0",
+    "html-webpack-plugin": "^2.3.0",
     "jadu-pulsar": "^10.3.1",
     "jest": "^26.0.1",
     "react-test-renderer": "^16.13.1",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
+    "webpack": "^2.0",
+    "webpack-cli": "^1.0",
+    "webpack-dev-server": "^2.0"
   },
   "dependencies": {
     "classnames": "^2.2.6",
@@ -36,7 +52,8 @@
   },
   "babel": {
     "plugins": [
-      "@babel/plugin-proposal-class-properties"
+      "babel-plugin-transform-object-rest-spread",
+      "babel-plugin-transform-class-properties"
     ]
   },
   "jest": {

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Button from './components/html/Button';
+import Button from './components/html/Button/Button';
 
 import ButtonGroupItem from './components/form/ButtonGroupItem/ButtonGroupItem';
 import Checkbox from './components/form/Checkbox/Checkbox';
@@ -15,6 +15,7 @@ import Fieldset from './components/form/Fieldset/Fieldset';
 import FileInput from './components/form/FileInput/FileInput';
 import InlineCheckbox from './components/form/InlineCheckbox/InlineCheckbox';
 import InlineRadioButton from './components/form/InlineRadioButton/InlineRadioButton';
+import InputGroup from './components/form/InputGroup/InputGroup';
 import PasswordInput from './components/form/PasswordInput/PasswordInput';
 import RangeInput from './components/form/RangeInput/RangeInput';
 import RadioButton from './components/form/RadioButton/RadioButton';
@@ -101,6 +102,14 @@ export default class App extends React.Component {
             <TextInput />
           </FormGroup>
 
+          <FormGroup labelText="Append Button">
+            <InputGroup>
+              <Button>Prepended</Button>
+              <TextInput />
+              <Button>Appended</Button>
+            </InputGroup>
+          </FormGroup>
+
           <FormGroup labelText="Textarea">
             <TextArea></TextArea>
           </FormGroup>

diff --git a/src/components/form/ButtonGroupItem/ButtonGroupItem.jsx b/src/components/form/ButtonGroupItem/ButtonGroupItem.jsx
@@ -24,7 +24,7 @@ export default class ButtonGroupItem extends React.Component {
     let inputClassName = classnames(className, type);
 
     return (
-      <>
+      <React.Fragment>
         <input 
           className={inputClassName}
           id={id ? id : idGuid} 
@@ -37,7 +37,7 @@ export default class ButtonGroupItem extends React.Component {
         >
           {children}
         </FormLabel>
-      </>
+      </React.Fragment>
     );
   }
 }
diff --git a/src/components/form/FormGroup/FormGroup.jsx b/src/components/form/FormGroup/FormGroup.jsx
@@ -11,7 +11,6 @@ export default class FormGroup extends React.Component {
 
   static defaultProps = {
     className: 'form__group',
-    guid: shortid.generate(),
     required: false
   };
 
@@ -32,6 +31,7 @@ export default class FormGroup extends React.Component {
       error,
       flushLabel,
       helpText,
+      hideLabel,
       indented,
       inline,
       inlineCheckbox,
@@ -69,14 +69,16 @@ export default class FormGroup extends React.Component {
       'has-error': error
     });
 
+    let guid = this.props.guid || shortid.generate();
+
     // GUID to use if no explicit ID has been set
-    let idGuid = 'id-guid-' + this.props.guid;
+    let idGuid = 'id-guid-' + guid;
 
     // GUID to use to link the input with any help text 
-    let helpGuid = 'help-guid-' + this.props.guid;
+    let helpGuid = 'help-guid-' + guid;
 
     // GUID to use to link the input with any errors 
-    let errorGuid = 'error-guid-' + this.props.guid;
+    let errorGuid = 'error-guid-' + guid;
 
     // Build list of IDs for the input based on the presence of help/error text 
     let ariaDescribedby = classnames({
@@ -88,9 +90,13 @@ export default class FormGroup extends React.Component {
     let childrenWithGuids = React.Children.map(
       children,
       (child, i) => {
+        if (['div', 'p'].indexOf(child.type) !== -1) {
+          return child;
+        }
+
         return React.cloneElement(child, {
           ariaDescribedby: ariaDescribedby ? ariaDescribedby : null,
-          idGuid: idGuid
+          id: idGuid
         });
       }
     );
@@ -102,7 +108,7 @@ export default class FormGroup extends React.Component {
 
     // Form controls
     let inputBlock = (
-      <>{childrenWithGuids}</>
+      <React.Fragment>{childrenWithGuids}</React.Fragment>
     );
 
     // Wrap with input group if appended/prepended text is present
@@ -136,13 +142,17 @@ export default class FormGroup extends React.Component {
     // Standard group markup strategy for most components
     let groupBlock = (
       <div className={variantClasses}>
+        {labelText &&
         <FormLabel 
           required={required} 
           idGuid={idGuid}
           tag={controls ? 'span' : 'label'}
+          hideLabel={hideLabel}
         >
           {labelText}
         </FormLabel>
+        }
+
         {controlsBlock}
       </div>
     );
@@ -185,7 +195,7 @@ export default class FormGroup extends React.Component {
     }
 
     return (
-      <>{groupBlock}</>
+      <React.Fragment>{groupBlock}</React.Fragment>
     );
   }
 }
diff --git a/src/components/form/FormGroup/FormGroup.test.js b/src/components/form/FormGroup/FormGroup.test.js
@@ -15,7 +15,7 @@ it('should return null if no children', () => {
 it('should render the basic form group', () => {
   const tree = render(
     <FormGroup>
-      <>foo</>
+      <React.Fragment>foo</React.Fragment>
     </FormGroup>
   );
   expect(tree).toMatchSnapshot();
@@ -24,7 +24,7 @@ it('should render the basic form group', () => {
 it('should add the button group classes if using buttonGroup variant', () => {
   const tree = shallow(
     <FormGroup buttonGroup>
-      <>foo</>
+      <React.Fragment>foo</React.Fragment>
     </FormGroup>
   );
   expect(tree).toMatchSnapshot();
@@ -33,7 +33,7 @@ it('should add the button group classes if using buttonGroup variant', () => {
 it('should use fieldset strategy if using choiceGroup variant', () => {
   const tree = shallow(
     <FormGroup choiceGroup>
-      <>foo</>
+      <React.Fragment>foo</React.Fragment>
     </FormGroup>
   );
   expect(tree).toMatchSnapshot();
@@ -42,7 +42,7 @@ it('should use fieldset strategy if using choiceGroup variant', () => {
 it('should add the indented class if using indented variant', () => {
   const tree = shallow(
     <FormGroup indented>
-      <>foo</>
+      <React.Fragment>foo</React.Fragment>
     </FormGroup>
   );
   expect(tree).toMatchSnapshot();
@@ -51,7 +51,7 @@ it('should add the indented class if using indented variant', () => {
 it('should use toggle strategy if using toggle variant', () => {
   const tree = shallow(
     <FormGroup toggle>
-      <>foo</>
+      <React.Fragment>foo</React.Fragment>
     </FormGroup>
   );
   expect(tree).toMatchSnapshot();
@@ -60,7 +60,7 @@ it('should use toggle strategy if using toggle variant', () => {
 it('should add the top label class if using topLabel variant', () => {
   const tree = shallow(
     <FormGroup topLabel>
-      <>foo</>
+      <React.Fragment>foo</React.Fragment>
     </FormGroup>
   );
   expect(tree).toMatchSnapshot();
@@ -69,7 +69,7 @@ it('should add the top label class if using topLabel variant', () => {
 it('should add the flush label class if using flushLabel variant', () => {
   const tree = shallow(
     <FormGroup flushLabel>
-      <>foo</>
+      <React.Fragment>foo</React.Fragment>
     </FormGroup>
   );
   expect(tree).toMatchSnapshot();
@@ -78,7 +78,7 @@ it('should add the flush label class if using flushLabel variant', () => {
 it('should add the checkbox class if using checkbox variant', () => {
   const tree = shallow(
     <FormGroup checkbox>
-      <>foo</>
+      <React.Fragment>foo</React.Fragment>
     </FormGroup>
   );
   expect(tree).toMatchSnapshot();
@@ -87,7 +87,7 @@ it('should add the checkbox class if using checkbox variant', () => {
 it('should use inline strategy if using inlineCheckbox variant', () => {
   const tree = shallow(
     <FormGroup inlineCheckbox>
-      <>foo</>
+      <React.Fragment>foo</React.Fragment>
     </FormGroup>
   );
   expect(tree).toMatchSnapshot();
@@ -96,7 +96,7 @@ it('should use inline strategy if using inlineCheckbox variant', () => {
 it('should use inline strategy if using inlineRadioButton variant', () => {
   const tree = shallow(
     <FormGroup inlineRadioButton>
-      <>foo</>
+      <React.Fragment>foo</React.Fragment>
     </FormGroup>
   );
   expect(tree).toMatchSnapshot();
@@ -105,7 +105,7 @@ it('should use inline strategy if using inlineRadioButton variant', () => {
 it('should add the radio class if using radio variant', () => {
   const tree = shallow(
     <FormGroup radioButton>
-      <>foo</>
+      <React.Fragment>foo</React.Fragment>
     </FormGroup>
   );
   expect(tree).toMatchSnapshot();
@@ -114,7 +114,7 @@ it('should add the radio class if using radio variant', () => {
 it('should add the success class if using success variant', () => {
   const tree = shallow(
     <FormGroup success>
-      <>foo</>
+      <React.Fragment>foo</React.Fragment>
     </FormGroup>
   );
   expect(tree).toMatchSnapshot();
@@ -123,7 +123,7 @@ it('should add the success class if using success variant', () => {
 it('should add the changed class if using changed variant', () => {
   const tree = shallow(
     <FormGroup changed>
-      <>foo</>
+      <React.Fragment>foo</React.Fragment>
     </FormGroup>
   );
   expect(tree).toMatchSnapshot();
@@ -132,7 +132,7 @@ it('should add the changed class if using changed variant', () => {
 it('should add the warning class if using warning variant', () => {
   const tree = shallow(
     <FormGroup warning>
-      <>foo</>
+      <React.Fragment>foo</React.Fragment>
     </FormGroup>
   );
   expect(tree).toMatchSnapshot();
@@ -141,7 +141,7 @@ it('should add the warning class if using warning variant', () => {
 it('should add the error class if using error variant', () => {
   const tree = shallow(
     <FormGroup error="error message">
-      <>foo</>
+      <React.Fragment>foo</React.Fragment>
     </FormGroup>
   );
   expect(tree).toMatchSnapshot();
@@ -150,7 +150,7 @@ it('should add the error class if using error variant', () => {
 it('should prepend text', () => {
   const tree = shallow(
     <FormGroup prependText="prepended">
-      <>foo</>
+      <React.Fragment>foo</React.Fragment>
     </FormGroup>
   );
   expect(tree).toMatchSnapshot();
@@ -159,7 +159,7 @@ it('should prepend text', () => {
 it('should append text', () => {
   const tree = shallow(
     <FormGroup appendText="appended">
-      <>foo</>
+      <React.Fragment>foo</React.Fragment>
     </FormGroup>
   );
   expect(tree).toMatchSnapshot();
@@ -168,7 +168,7 @@ it('should append text', () => {
 it('should append and prepend text', () => {
   const tree = shallow(
     <FormGroup prependText="prepended" appendText="appended">
-      <>foo</>
+      <React.Fragment>foo</React.Fragment>
     </FormGroup>
   );
   expect(tree).toMatchSnapshot();

diff --git a/src/components/form/FormLabel/FormLabel.jsx b/src/components/form/FormLabel/FormLabel.jsx
@@ -30,7 +30,7 @@ export default class FormLabel extends React.Component {
     );
 
     return (
-      <>
+      <React.Fragment>
       {children ? (
         <LabelTag
           htmlFor={htmlFor ? htmlFor : idGuid} 
@@ -44,7 +44,7 @@ export default class FormLabel extends React.Component {
       : (
         <span className="control__label"></span>
       )}
-      </>
+      </React.Fragment>
     );
   }
 }