fix(components): fixed templates using react-hook-form that werent re…

…nding and updating table docs

src/components/Form/Form.stories.js

@@ -146,7 +146,7 @@ export const DetailedForm = (args) => {
       </FormGroup>
 
       <FormGroup legendText="Radio Button heading">
-        <Search id="search-1" labelText="Search" placeHolderText="Search" />
+        <Search id="search-1" labelText="Search" placeholder="Search" />
       </FormGroup>
 
       <Select id="select-1" defaultValue="placeholder-item">

src/components/FormHint/FormHint.stories.js

@@ -23,17 +23,7 @@ Regular.args = {
   children: 'The hint text',
 };
 
-const description = `
-You can customize the content by using \`BannerNavigation\`.
-`;
 
-Regular.story = {
-  parameters: {
-    docs: {
-      storyDescription: description,
-    },
-  },
-};
 
 export const Input = (args) => (
   <TextInput

src/components/MdxComponents/MdxComponents.js

@@ -23,7 +23,7 @@ const li = (props) => {
 
 const ul = (props) => {
   return (
-    <List {...props} kind="bullets">
+    <List {...props} kind="unordered">
       {props.children}
     </List>
   );

src/components/NumberInput/NumberInput.js

@@ -75,9 +75,8 @@ const NumberInput = React.forwardRef((props, ref) => {
     if (!disabled) {
       evt.persist();
       evt.imaginaryTarget = _inputRef;
-
       setValue(evt.target.value);
-      onChange(parseFloat(evt.target.value), evt);
+      onChange(evt, parseFloat(evt.target.value)); //Had to reverse the arguments passed because onChange accepts evt before the value
     }
   };
 

src/components/SubNavigation/SubNavigation.js

@@ -142,7 +142,7 @@ SubNavigationLink.propTypes = {
   /**
    * Provide the content of link
    */
-  children: PropTypes.string,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
 
   className: PropTypes.string,
 };
@@ -176,7 +176,7 @@ SubNavigationGroup.propTypes = {
    */
   columns: PropTypes.number,
   /**
-   * Provide a title for the grop
+   * Provide a title for the group
    */
   title: PropTypes.node,
   /**

src/components/Table/Table.stories.js

@@ -10,6 +10,10 @@ import Pagination from '../Pagination';
 export default {
   title: 'Components/UI Elements/Table',
   component: Table,
+  subcomponents: {
+    TableSorting, 
+    Pagination 
+  },
   parameters: {
     componentSubtitle: 'Component',
     status: 'released',
@@ -370,18 +374,19 @@ export const TablePagination = (args) => {
 };
 
 const hello = `
-To use the custom Pagination you can use the TablePagination component. Additional props for the TablePagination can be directly added to the \`ReactTable\` component (see Pagination component).
-
+To add Pagination to your table, you can use the Pagination sub component. Pagination can also be directly added to the \`ReactTable\`  by using the \`usePagination\` and adding the pagination component.
+For more details please visit [React-Table](https://github.com/react-tools/react-table);
 
 \`\`\`js
-import { TablePagination } from '@wfp/ui';
+import { Pagination } from '@wfp/ui';
 
-// Replacing the Pagination Component of React-Table
 
-<ReactTable
-  {...yourTableProps}
-  PaginationComponent={TablePagination}
-  {...otherPropsForThePaginationToo}
+<Pagination
+  pageSize={pageSize}
+  pageSizes={[10, 20, 30]}
+  page={pageIndex + 1}
+  totalItems={data.length}
+  onChange={changePage}
 />
 \`\`\`
 `;

src/components/TextArea/TextArea.js

@@ -7,8 +7,9 @@ const { prefix } = settings;
 
 /** A textarea is an input dedicated for a large volume of text. It may be used in a variety of components like forms, comment sections, and forums. */
 
-const TextArea = ({
-  className,
+const TextArea = React.forwardRef((props, ref) => {
+  const {
+    className,
   formItemClassName,
   id,
   labelText,
@@ -17,12 +18,14 @@ const TextArea = ({
   onClick,
   invalid,
   invalidText,
-  inputRef,
+  inputRef = ref,
   helperText,
   fullWidth,
   viewOnly,
-  ...other
-}) => {
+  ...other 
+} = props
+
+
 
   const textareaProps = {
     id,
@@ -90,7 +93,8 @@ const TextArea = ({
       {error}
     </FormItem>
   );
-};
+});
+
 
 TextArea.propTypes = {
   /**

src/documentation/ComplexForm/ComplexForm.js

@@ -9,7 +9,7 @@ import Form from '../../components/Form';
 import Blockquote from '../../components/Blockquote/Blockquote';
 
 const ComplexForm = () => {
-  const { control, handleSubmit, register, errors, reset } = useForm();
+  const { control, handleSubmit, register, reset, formState: { errors } } = useForm();
   const onSubmit = (values) => {
     setOutput(values);
   };
@@ -18,57 +18,34 @@ const ComplexForm = () => {
   return (
     <Form longForm onSubmit={handleSubmit(onSubmit)}>
       <TextInput
+        {...register("email", {required:true, pattern:{
+          value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+          message: 'invalid email address',
+        }})}
         labelText="Email TextInput"
-        name="email"
-        ref={register({
-          required: 'Required',
-          pattern: {
-            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-            message: 'invalid email address',
-          },
-        })}
+
       />
-      {errors.email && errors.email.message}
+      {errors.email && <span role="alert"> {errors.username.message} </span>}
       <TextInput
-        labelText="TextInput"
-        name="textinput"
-        ref={register({
+        {...register('textinput',{
           validate: (value) => value !== 'admin' || 'Nice try!',
         })}
+        labelText="TextInput"
       />
-      {/*<Checkbox
-      onBlur={onBlur}
-      onChange={e => onChange(e.target.checked)}
-      checked={value}
-      name={name}
-
-                 onChange={e => {console.log("waaaaa", e)}}
-
-                  onChange={(e, l) => {
-              console.log('wqqqqqqaaa', e, e.target.value, l);
-              props.onChange(e.target.value);
-            }}
-
-    />*/}
-      <Controller
-        control={control}
-        name="numberinput"
-        render={(props) => (
-          <NumberInput
-            {...props}
-            labelText="Number input"
-            name="numberinput"
-            step="0.1"
-          />
-        )}
+
+      <NumberInput
+        {...register('numberinput')}
+        labelText="Number input"
+        step={1}
       />
-      <Select name="select" inputRef={register} labelText="Select">
+
+      <Select {...register("select")} labelText="Select">
         <SelectItem value="" text="not selected" />
         <SelectItem value="daily" text="daily" />
         <SelectItem value="weekly" text="weekly" />
         <SelectItem value="monthly" text="monthly" />
       </Select>
-      {errors.username && errors.username.message}
+      {errors.username && <span role="alert"> {errors.username.message} </span>}
       <Button type="submit">Submit</Button>{' '}
       <Button
         type="submit"

src/documentation/RegularPage.js

@@ -81,13 +81,13 @@ const RegularPage = ({
                     small
                     label={null}
                     id="search-2"
-                    placeHolderText="Filter List"
+                    placeholder="Filter List"
                   />
                 </SubNavigationFilter>
               </SubNavigationHeader>
               <SubNavigationContent>
                 <SubNavigationList>
-                  <SubNavigationGroup title="First List" columns>
+                  <SubNavigationGroup title="First List" columns={3}>
                     <SubNavigationItem>
                       <Link href="https://go.docs.wfp.org" target="_blank">
                         Lorem Ipsum et jomen
@@ -134,7 +134,7 @@ const RegularPage = ({
                       </Link>
                     </SubNavigationItem>
                   </SubNavigationGroup>
-                  <SubNavigationGroup title="Second List of Items" columns>
+                  <SubNavigationGroup title="Second List of Items" columns={3}>
                     <SubNavigationItem>
                       <Link href="https://go.docs.wfp.org" target="_blank">
                         At vero eos
@@ -203,7 +203,7 @@ const RegularPage = ({
           <Search
             kind="main"
             id="search-2"
-            placeHolderText="Search"
+            placeholder="Search"
           />
         </MainNavigationItem>
         <MainNavigationItem

src/documentation/TableWithFilter/DataTable.js

@@ -42,7 +42,6 @@ function DataTable({filterText, advanceFilter}) {
     }
 
     if(advanceFilter.gender || advanceFilter.country ||  advanceFilter.firstname || advanceFilter.lastname || advanceFilter.age){
-        console.log("advance", advanceFilter)
         setAllFilters([
             {id:'gender',value:advanceFilter.gender}, 
             {id:'country',value:advanceFilter.country},

src/documentation/TableWithFilter/Form.js

@@ -31,10 +31,6 @@ function Form({ onFormChange }) {
     const handleFilter = (formdata) => {
         onFormChange(formdata)
     }
-
-    const firstname = register('firstname');
-    const lastname = register('lastname');
-    const age = register('age');
 
 
     return (
@@ -66,20 +62,18 @@ function Form({ onFormChange }) {
             </FormGroup>
             <FormGroup className="wfp--form-long" align="horizontal" style={{ marginTop: '1rem' }}>
                 <TextInput
+                {...register("firstname")}
                 id="firstname"
-                name="firstname"
                 labelText="Firstname"
                 placeholder="eg: Edith"
-                inputRef={firstname.ref}
                 />
                 <TextInput
+                {...register("lastname")}
                 id="lastname"
-                name="lastname"
                 labelText="lastname"
                 placeholder="eg: Chemin"
-                inputRef={lastname.ref}
                 />
-                <NumberInput id="age" name="age" labelText="Age" placeholder="" inputRef={age.ref} />
+                <NumberInput {...register("age")} id="age"  labelText="Age" />
             </FormGroup>
 
             <div

src/documentation/Typography/Typography.js

@@ -5,8 +5,8 @@ import { List, ListItem } from '../../components/List';
 
 const list = [
   { kind: 'simple', heading: 'Ordered lists' },
-  { kind: 'bullets', heading: 'Bullet lists' },
-  { kind: 'ordered', heading: 'Unordered lists' },
+  { kind: 'unordered', heading: 'Bullet lists' },
+  { kind: 'ordered', heading: 'Ordered lists' },
 ];
 
 const Normaltext = [
@@ -112,7 +112,7 @@ const Typography = () => {
       <h3>Lists</h3>
       <p>
         Typographic scale for lists of items int he different variations:
-        ordered, unordered and bullets
+        ordered and unordered
       </p>
       <div className="wfp--card-box">
         {list.map((e) => (

src/documentation/WizardForm/WizardForm.stories.js

@@ -106,8 +106,8 @@ export const Regular = (args) => (
             <Field
               component={ReduxFormWrapper}
               inputComponent={TextArea}
-              name="notes"
-              labelText="Notes"
+              name="notes2"
+              labelText="Notesnew"
               placeholder="Notes"
             />
           </FormGroup>

src/documentation/WizardHookForm/FormOne.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React from 'react';
 import TextInput from '../../components/TextInput';
 import TextArea from '../../components/TextArea';
 import Blockquote from '../../components/Blockquote';
@@ -16,31 +16,26 @@ function FormOne(props) {
               </div>
               <TextInput
                 id="firstName"
-                name="firstName"
+                {...props.register("firstName")}
                 helperText="Enter your full first name"
                 labelText="First Name"
-                inputRef={props.register}
               />
                 {/* <input
                 name="firstName"
                 ref={register}
                 /> */}
               <TextInput
                 id="lastName"
-                name="lastName"
+                {...props.register("lastName")}
                 labelText="Last Name"
                 helperText="Enter your last name"
-                placeholder="Placeholder text"
-                inputRef={props.register}
               />
-              {/* <input
-                name="lastName"
-                ref={register}
-                /> */}
+
               <TextArea
+                id="noteone"
+                {...props.register("notes")}
                 labelText="Notes"
-                name="notes"
-                inputRef={props.register}
+                helperText="Enter first notes here"
               />
         </>
     )

src/documentation/WizardHookForm/FormThree.js

@@ -7,13 +7,11 @@ function FormThree(props) {
         <>
             <TextArea
                 labelText="Notes"
-                name="newnotes2"
-                inputRef={props.register}
+                {...props.register("newnotes2")}
               />
               <TextArea
                 labelText="Summary"
-                name="summary"
-                inputRef={props.register}
+                {...props.register("summary")}
               />
         </>
     )