Merge branch 'master' into implnotes-rtl

carbon-design-system · Feb 2, 2021 · 6003501 · 6003501
2 parents e6fab4d + 28f0b0f
commit 6003501
Show file tree

Hide file tree

Showing 39 changed files with 9,380 additions and 549 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -2,7 +2,7 @@
 name: Bug Report 🐛
 about: Something isn't working as expected? Here is the right place to report.
 labels: bug
-assignees: jeffchew, wonilsuhibm, ljcarot, RobertaJHahn, oliviaflory, IgnacioBecerra
+assignees: jeffchew, wonilsuhibm, ljcarot, RobertaJHahn, guilhermelMoraes
 ---
 
 <!-- Feel free to remove sections that aren't relevant.

diff --git a/.github/ISSUE_TEMPLATE/contribution_request.md b/.github/ISSUE_TEMPLATE/contribution_request.md
@@ -3,7 +3,7 @@ name: Contribution Request 💓
 about: Contribute things large and small—of code, design, ideas, and guidance.
 title: ''
 labels: contribution
-assignees: jeffchew, wonilsuhibm, ljcarot, RobertaJHahn, oliviaflory, IgnacioBecerra
+assignees: jeffchew, wonilsuhibm, ljcarot, RobertaJHahn, guilhermelMoraes
 
 ---
 

diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -3,7 +3,7 @@ name: Feature Request 💡
 about: Suggest a new idea for the project.
 title: ''
 labels: Feature request
-assignees: jeffchew, wonilsuhibm, ljcarot, RobertaJHahn, oliviaflory, IgnacioBecerra
+assignees: jeffchew, wonilsuhibm, ljcarot, RobertaJHahn, guilhermelMoraes
 ---
 
 <!-- replace _{{...}}_ with your own words -->

diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md
@@ -2,7 +2,7 @@
 name: Question 🤔
 about: Usage question or discussion about Carbon for IBM.com.
 labels: question
-assignees: jeffchew, wonilsuhibm, ljcarot, RobertaJHahn, oliviaflory, IgnacioBecerra
+assignees: jeffchew, wonilsuhibm, ljcarot, RobertaJHahn, guilhermelMoraes
 ---
 
 <!--

diff --git a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
diff --git a/packages/react/src/components/CTASection/__stories__/CTASection.stories.js b/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/',
             },

diff --git a/packages/react/src/components/CalloutData/CalloutData.js b/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.
    */

diff --git a/packages/react/src/components/CardSectionCarousel/__stories__/CardSectionCarousel.stories.js b/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

diff --git a/packages/react/src/components/CardSectionSimple/__stories__/CardSectionSimple.stories.js b/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} />;
 };
 

diff --git a/packages/react/src/components/Carousel/__stories__/Carousel.stories.js b/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

diff --git a/packages/react/src/components/DotcomShell/DotcomShell.js b/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,

diff --git a/packages/react/src/components/Footer/LanguageSelector.js b/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;
 }

diff --git a/packages/react/src/components/Footer/LegalNav.js b/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 = {

diff --git a/packages/react/src/components/LeadSpace/LeadSpace.js b/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:

diff --git a/packages/react/src/components/LeadspaceWithSearch/LeadspaceWithSearch.js b/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 = {

diff --git a/packages/react/src/components/LeadspaceWithSearch/__stories__/LeadspaceWithSearch.stories.js b/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',

diff --git a/packages/react/src/components/LinkList/LinkList.js b/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.