docs: fix many small type issues in the docs

src/DataTable/README.md

@@ -253,7 +253,7 @@ To enable proper selection behavior with backend pagination (i.e., when ``isSele
     </Component>
   );
 
-  const ClearAction = ({ as: Component, tableInstance, ...rest }) => (
+  const ClearAction = ({ as: Component, tableInstance }) => (
     <Component
       variant="danger"
       onClick={() => {
@@ -845,7 +845,7 @@ a responsive grid of cards.
     </Component>
   );
 
-  const ClearAction = ({ as: Component, tableInstance, ...rest }) => (
+  const ClearAction = ({ as: Component, tableInstance }) => (
     <Component
       variant="danger"
       onClick={() => {

src/Dropdown/README.md

@@ -145,7 +145,7 @@ You can use `Dropdown.Toggle` with [IconButton](/components/iconbutton) componen
 ```jsx live
 <Dropdown.Deprecated>
   <Dropdown.Deprecated.Button>
-    <Icon className="fa fa-user pr-3" alt="" />
+    <Icon className="fa fa-user pr-3" />
     Search Engines
   </Dropdown.Deprecated.Button>
   <Dropdown.Deprecated.Menu>

src/Dropzone/README.md

@@ -240,7 +240,7 @@ This example validates that only `400x479` images can be uploaded.
   async function imageDimensionValidator(file) {
     const image = new window.Image();
     try {
-      url = URL.createObjectURL(file);
+      const url = URL.createObjectURL(file);
       image.src = url;
       await image.decode();
       if (image.width !== 400 || image.height !== 479) {

src/Form/form-control.mdx

@@ -49,7 +49,9 @@ or [select attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element
 () => {
   {/* start example state */}
   const [type, setType] = useState('default');
+  const [value, setValue] = useState('');
   {/* end example state */}
+  const handleChange = (e) => setValue(e.target.value);
 
   const inputs = {
     default: (
@@ -144,8 +146,6 @@ or [select attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element
       </Form.Group>
     </>),
   };
-  const [value, setValue] = useState('');
-  const handleChange = (e) => setValue(e.target.value);
   return (
     <>
       {/* start example form block */}
@@ -172,7 +172,9 @@ See [react-imask](https://imask.js.org) for documentation on available props.
 () => {
   {/* start example state */}
   const [maskType, setMaskType] = useState('phone');
+  const [value, setValue] = useState('');
   {/* end example state */}
+  const handleChange = (e) => setValue(e.target.value);
 
   const inputsWithMask = {
     phone: (
@@ -255,10 +257,6 @@ See [react-imask](https://imask.js.org) for documentation on available props.
     ),
   };
 
-  const [value, setValue] = useState('');
-
-  const handleChange = (e) => setValue(e.target.value);
-
   return (
     <>
       {/* start example form block */}

src/InputSelect/README.md

@@ -90,14 +90,13 @@ notes: |
   label="Favorite Color"
   options={['', 'red', 'orange', 'yellow', 'green', 'blue', 'purple']}
   validator={value => {
-    let feedback = { isValid: true };
     if (!value) {
-      feedback = {
+      return {
         isValid: false,
         validationMessage: 'Please make a selection.',
       };
     }
-    return feedback;
+    return { isValid: true };
   }}
 />
 ```

src/InputText/README.md

@@ -33,14 +33,13 @@ notes: |
   label="Username"
   description="The unique name that identifies you throughout the site."
   validator={value => {
-    let feedback = { isValid: true };
     if (value.length < 3) {
-      feedback = {
+      return {
         isValid: false,
         validationMessage: 'Username must be at least 3 characters in length.',
       };
     }
-    return feedback;
+    return { isValid: true };
   }}
 />
 ```
@@ -53,15 +52,14 @@ notes: |
   label="Username"
   description="The unique name that identifies you throughout the site."
   validator={value => {
-    let feedback = { isValid: true };
     if (value.length < 3) {
-      feedback = {
+      return {
         isValid: false,
         validationMessage: 'Username must be at least 3 characters in length.',
         dangerIconDescription: 'Error',
       };
     }
-    return feedback;
+    return { isValid: true };
   }}
   themes={['danger']}
 />

src/ListBox/README.md

@@ -105,7 +105,7 @@ class ListBoxWrapperForOnSelect extends React.Component {
             <span className="sr-only">none</span>
           ) : (
             <span
-              arialabelledby={`list-box-option-${
+              aria-labelledby={`list-box-option-${
                 this.state.selectedOptionIndex
               }`}
             >

src/Modal/standard-modal.mdx

@@ -31,7 +31,7 @@ The standard `ModalDialog` composition. `StandardModal` passes all of its props
         footerNode={(
           <ActionRow>
             <p className="small">
-              <Hyperlink href="#">Get help</Hyperlink>
+              <Hyperlink destination="#">Get help</Hyperlink>
             </p>
             <ActionRow.Spacer />
             <Button variant="tertiary" onClick={close}>Cancel</Button>

src/TextArea/README.md

@@ -40,14 +40,13 @@ notes: |
   label="Username"
   description="The unique name that identifies you throughout the site."
   validator={value => {
-    let feedback = { isValid: true };
     if (value.length < 3) {
-      feedback = {
+      return {
         isValid: false,
         validationMessage: 'Username must be at least 3 characters in length.',
       };
     }
-    return feedback;
+    return { isValid: true };
   }}
 />
 ```

www/src/components/exampleComponents/HipsterIpsum.tsx

@@ -48,18 +48,15 @@ const shortParagraphs = [
   'Pinterest tote bag synth, tattooed echo park cronut flannel kombucha kickstarter viral.',
 ];
 
-export type HipsterIpsumType = {
-  numParagraphs: number,
-  numShortParagraphs: number,
-};
+export type HipsterIpsumType = { numParagraphs?: number; numShortParagraphs?: number; };
 
-const getHipsterIpsumContent = (allParagraphs: Array<string>, numParagraphs: number) => allParagraphs
+const getHipsterIpsumContent = (allParagraphs: Array<string>, numParagraphs: number) => <>{allParagraphs
   .slice(0, numParagraphs)
-  .map(text => <p key={text}>{text}</p>);
+  .map(text => <p key={text}>{text}</p>)}</>;
 
 export type HipsterIpsumContentType = {
   shortParagraphsInContent: string[],
-  numShortParagraphs: number,
+  numShortParagraphs?: number,
   paragraphsInContent: string[],
   numParagraphs: number,
 };
@@ -79,10 +76,10 @@ const useHipsterIpsumContent = ({
   return getHipsterIpsumContent(shuffledParagraphs, numParagraphs);
 };
 
-function HipsterIpsum({
-  numParagraphs,
+const HipsterIpsum: React.FC<HipsterIpsumType> = ({
+  numParagraphs = 2,
   numShortParagraphs,
-}: HipsterIpsumType) {
+}) => {
   const content = useHipsterIpsumContent({
     shortParagraphsInContent: shortParagraphs,
     numShortParagraphs,
@@ -92,13 +89,4 @@ function HipsterIpsum({
   return content;
 }
 
-HipsterIpsum.propTypes = {
-  numParagraphs: PropTypes.number,
-  numShortParagraphs: PropTypes.number,
-};
-HipsterIpsum.defaultProps = {
-  numParagraphs: 2,
-  numShortParagraphs: undefined,
-};
-
 export default HipsterIpsum;