chore(props): fix props and attribute errors (#5041)

### Description

Fixes various props/attribute validation errors

### Changelog

**Changed**

- various prop type and attribute naming errors

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

packages/react/src/components/CTASection/__stories__/CTASection.stories.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -10,7 +10,7 @@ import CTASection from '../CTASection';
 import React from 'react';
 import readme from '../README.stories.mdx';
 
-const types = ['local', 'external', 'default'];
+const types = ['local', 'external'];
 
 const contentItemsProps = [
   {
@@ -78,12 +78,12 @@ Default.story = {
           type: types[0],
           buttons: [
             {
-              type: select('ContentBlock | CTA type', types, types[2], groupId),
+              type: select('ContentBlock | CTA type', types, types[0], groupId),
               copy: 'Secondary button',
               href: 'https://example.com/',
             },
             {
-              type: select('ContentBlock | CTA type', types, types[2], groupId),
+              type: select('ContentBlock | CTA type', types, types[0], groupId),
               copy: 'Primary button',
               href: 'https://example.com/',
             },
@@ -137,12 +137,12 @@ WithContentItems.story = {
           type: types[0],
           buttons: [
             {
-              type: select('CTA (type):', types, types[2], groupId),
+              type: select('CTA (type):', types, types[0], groupId),
               copy: 'Secondary button',
               href: 'https://example.com/',
             },
             {
-              type: select('CTA (type):', types, types[2], groupId),
+              type: select('CTA (type):', types, types[0], groupId),
               copy: 'Primary button',
               href: 'https://example.com/',
             },

packages/react/src/components/CalloutData/CalloutData.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -35,7 +35,7 @@ const CalloutData = ({ data, copy, source }) =>
     </div>
   );
 
-CalloutData.PropTypes = {
+CalloutData.propTypes = {
   /**
    * Data for CalloutData pattern.
    */

packages/react/src/components/CardSectionCarousel/__stories__/CardSectionCarousel.stories.js

@@ -27,7 +27,7 @@ export const Default = () => {
       This component is maintined in{' '}
       <code>@carbon/ibmdotcom-web-components</code> library with a{' '}
       <a
-        class="bx--link"
+        className="bx--link"
         target="_blank"
         href="http://ibmdotcom-web-components-react.mybluemix.net/?path=/story/components-card-section-carousel--default">
         React wrapper

packages/react/src/components/CardSectionSimple/__stories__/CardSectionSimple.stories.js

@@ -40,7 +40,8 @@ export default {
 
 export const Default = ({ parameters }) => {
   const { heading, cards } = parameters?.props?.CardSectionSimple ?? {};
-  const theme = document.documentElement.getAttribute('storybook-carbon-theme');
+  const theme =
+    document.documentElement.getAttribute('storybook-carbon-theme') || 'white';
   return <CardSectionSimple heading={heading} theme={theme} cards={cards} />;
 };
 

packages/react/src/components/Carousel/__stories__/Carousel.stories.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -26,7 +26,7 @@ export const Default = () => {
       This component is maintined in{' '}
       <code>@carbon/ibmdotcom-web-components</code> library with a{' '}
       <a
-        class="bx--link"
+        className="bx--link"
         target="_blank"
         href="https://ibmdotcom-web-components-react.mybluemix.net/?path=/story/components-carousel--default">
         React wrapper

packages/react/src/components/DotcomShell/DotcomShell.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -69,7 +69,7 @@ DotcomShell.propTypes = {
         })
       ),
     }),
-    type: PropTypes.oneOf(['tall', 'short']),
+    type: PropTypes.oneOf(['tall', 'short', 'micro']),
     langCode: PropTypes.shape({
       cc: PropTypes.string,
       lc: PropTypes.string,

packages/react/src/components/Footer/LanguageSelector.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -91,6 +91,7 @@ const LanguageSelector = ({
       <Select
         defaultValue={selectedItem.id}
         data-autoid={`${stablePrefix}--language-selector__select`}
+        id={`${prefix}--language-selector`}
         className={`${prefix}--language-selector`}
         onChange={evt => _setSelectedItem(evt)}
         text={selectedItem.text}
@@ -110,8 +111,10 @@ const LanguageSelector = ({
 
 function renderSelectItems(items) {
   const selectItems = [];
-  items.map(item => {
-    selectItems.push(<SelectItem value={item.id} text={item.text} />);
+  items.map((item, index) => {
+    selectItems.push(
+      <SelectItem value={item.id} text={item.text} key={index} />
+    );
   });
   return selectItems;
 }

packages/react/src/components/Footer/LegalNav.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -81,7 +81,7 @@ LegalNav.propTypes = {
    * The locale/language selector button.
    * Renders only in micro version
    */
-  button: PropTypes.func,
+  button: PropTypes.object,
 };
 
 LegalNav.defaultProps = {

packages/react/src/components/LeadSpace/LeadSpace.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -68,7 +68,6 @@ const LeadSpace = ({ buttons, copy, gradient, image, theme, title, type }) => {
   const background = image && {
     backgroundImage: `url(${image.defaultSrc})`,
   };
-
   return (
     <div
       data-autoid={`${stablePrefix}--leadspace`}
@@ -133,20 +132,18 @@ LeadSpace.propTypes = {
    * Object with different ratio options for corresponding breakpoints.
    * See [`<Image>`'s README](http://ibmdotcom-react.mybluemix.net/?path=/docs/components-image--default#props) for full usage details.
    */
-  image: PropTypes.shape(
-    PropTypes.shape({
-      classname: PropTypes.string,
-      sources: PropTypes.arrayOf(
-        PropTypes.shape({
-          src: PropTypes.string,
-          breakpoint: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        })
-      ),
-      defaultSrc: PropTypes.string.isRequired,
-      alt: PropTypes.string.isRequired,
-      longDescription: PropTypes.string,
-    })
-  ),
+  image: PropTypes.shape({
+    classname: PropTypes.string,
+    sources: PropTypes.arrayOf(
+      PropTypes.shape({
+        src: PropTypes.string,
+        breakpoint: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      })
+    ),
+    defaultSrc: PropTypes.string.isRequired,
+    alt: PropTypes.string.isRequired,
+    longDescription: PropTypes.string,
+  }),
 
   /**
    * Color theme of LeadSpace. Choose from:

packages/react/src/components/LeadspaceWithSearch/LeadspaceWithSearch.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -19,25 +19,27 @@ const LeadspaceWithSearch = ({ heading, copy, searchProps }) => {
   const leadspaceContainer = useRef(null);
 
   useEffect(() => {
-    if (leadspaceContainer) {
-      const { current } = leadspaceContainer;
-      const observer = new ResizeObserver(entries => {
-        for (const entry of entries) {
-          const CARBON_MD_BREAKPOINT = 672;
-          const { inlineSize: leadspaceWidth } = entry.borderBoxSize[0];
-          const { desktop, mobile } = searchProps.placeHolder;
+    leadspaceContainer.current = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        const CARBON_MD_BREAKPOINT = 672;
+        const { inlineSize: leadspaceWidth } = entry.borderBoxSize[0];
+        const { desktop, mobile } = searchProps.placeholder;
 
-          if (leadspaceWidth > CARBON_MD_BREAKPOINT || !mobile) {
-            setSearchplaceHolder(desktop);
-          }
-          if (leadspaceWidth <= CARBON_MD_BREAKPOINT && mobile) {
-            setSearchplaceHolder(mobile);
-          }
+        if (leadspaceWidth > CARBON_MD_BREAKPOINT || !mobile) {
+          setSearchplaceHolder(desktop);
         }
-      });
-      observer?.observe(current);
-    }
-  }, [searchProps.placeHolder]);
+        if (leadspaceWidth <= CARBON_MD_BREAKPOINT && mobile) {
+          setSearchplaceHolder(mobile);
+        }
+      }
+    });
+    leadspaceContainer.current.observe(document.documentElement);
+
+    return () => {
+      leadspaceContainer.current.disconnect();
+      leadspaceContainer.current = null;
+    };
+  }, [searchProps.placeholder]);
 
   return heading ? (
     <section
@@ -84,17 +86,17 @@ LeadspaceWithSearch.propTypes = {
    * Any other functions and properties passed down to this will be applyed to the [Search component](https://www.carbondesignsystem.com/components/search/usage/).
    *
    */
-  searchProps: {
+  searchProps: PropTypes.shape({
     /**
      * The Leadspace With Search accepts two placeholders. One for mobile view and another for desktop. Both are optional. If you do not provide, it will be set to "Search".
      */
-    placeHolder: PropTypes.shape({
+    placeholder: PropTypes.shape({
       mobile: PropTypes.string,
       desktop: PropTypes.string,
     }),
     labelText: PropTypes.string,
     ...Search.propTypes,
-  },
+  }),
 };
 
 LeadspaceWithSearch.defaultProps = {

packages/react/src/components/LeadspaceWithSearch/__stories__/LeadspaceWithSearch.stories.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -26,7 +26,7 @@ export default !DDS_LEADSPACE_WITH_SEARCH
               groupId
             ),
             searchProps: {
-              placeHolder: {
+              placeholder: {
                 mobile: text(
                   'Mobile placeholder (searchProps.placeHolder.mobile):',
                   'Search keywords',

packages/react/src/components/LinkList/LinkList.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -40,7 +40,7 @@ const LinkList = ({ heading, iconPlacement, items, style }) => {
               <CTA
                 style={linkStyle}
                 {...cta}
-                disableImage={true}
+                disableImage
                 {...(iconPlacement &&
                   linkStyle === 'text' && { iconPlacement })}
               />
@@ -56,7 +56,7 @@ LinkList.propTypes = {
   /**
    * Describes heading of LinkList.
    */
-  heading: PropTypes.string.isRequired,
+  heading: PropTypes.string,
 
   /**
    * Describes the list of CTA.

packages/react/src/components/Masthead/MastheadMegaMenu/MegaMenu.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -35,7 +35,7 @@ const MegaMenu = ({ data, ...rest }) => {
           {highlightedItems.map((item, i) => (
             <CategoryGroup
               autoid={rest.autoid}
-              index={i}
+              key={i}
               href={item.url}
               title={item.title}>
               {item.megapanelContent?.quickLinks?.links.map(
@@ -44,7 +44,7 @@ const MegaMenu = ({ data, ...rest }) => {
                     href={url}
                     title={title}
                     autoid={`${rest.autoid}-list${i}`}
-                    index={key}
+                    key={key}
                   />
                 )
               )}

packages/react/src/components/carbon-components-react/UIShell/HeaderMenu.js

@@ -1,7 +1,7 @@
 /* istanbul ignore file */
 
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -289,7 +289,7 @@ class HeaderMenu extends React.Component {
    */
   _renderMenuItem = (item, index) => {
     return React.cloneElement(item, {
-      ref: this.handleItemRef(index),
+      refs: this.handleItemRef(index),
       role: 'none',
     });
   };

packages/react/src/internal/components/Callout/Callout.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -36,7 +36,7 @@ Callout.propTypes = {
   /**
    * The component being imported into the callout container.
    */
-  children: PropTypes.object,
+  children: PropTypes.node,
 };
 
 export default Callout;

packages/react/src/internal/components/ConditionalWrapper/ConditionalWrapper.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -42,7 +42,7 @@ ConditionalWrapper.propTypes = {
   /**
    * Wrapper element
    */
-  wrapper: PropTypes.node,
+  wrapper: PropTypes.func,
 
   /**
    * Children elements