feat(QTM-730): Avoiding forwarding no-gutters props to children other than Row and Container to avoid

.babelrc

@@ -9,8 +9,6 @@
     ]
   ],
   "plugins": [
-    "transform-class-properties",
-    "transform-modern-regexp",
     "babel-plugin-styled-components",
     "./scripts/babel-css-modules.js"
   ],

.eslintrc.json

@@ -42,7 +42,13 @@
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off",
     "import/prefer-default-export": ["off", { "extensions": [".js"] }],
-    "react/prop-types": ["off", { "extensions": [".stories.jsx"] }]
+    "react/prop-types": ["off", { "extensions": [".stories.jsx"] }],
+    "react/require-default-props": [
+      "error",
+      {
+        "functions": "defaultArguments"
+      }
+    ]
   },
   "globals": {
     "window": true,

.github/workflows/actions-development.yml

@@ -7,24 +7,21 @@ jobs:
     runs-on: ubuntu-20.04
 
     steps:
-      - uses: actions/checkout@v3
-      - name: Read .nvmrc
-        run: echo NVMRC=$(cat .nvmrc) >> $GITHUB_OUTPUT
-        id: nvm
+      - uses: actions/checkout@v4
 
       - name: Setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '${{ steps.nvm.outputs.NVMRC }}'
+          node-version-file: '.nvmrc'
 
       - name: Install the dependencies
         run: yarn
 
-      - name: run storybook
+      - name: Run storybook
         run: yarn storybook --smoke-test
 
-      - name: run unit tests
+      - name: Run unit tests
         run: yarn test:components
 
-      - name: run the regression tests
+      - name: Run the regression tests
         run: yarn build:regression

.github/workflows/actions-publish.yml

@@ -11,57 +11,55 @@ jobs:
     runs-on: ubuntu-20.04
 
     steps:
-      - uses: actions/checkout@v3
-      - name: Read .nvmrc
-        run: echo NVMRC=$(cat .nvmrc) >> $GITHUB_OUTPUT
-        id: nvm
+      - uses: actions/checkout@v4
 
       - name: Setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '${{ steps.nvm.outputs.NVMRC }}'
+          node-version-file: '.nvmrc'
 
       - name: Install the dependencies
         run: yarn
 
-      - name: run storybook
+      - name: Run storybook
         run: yarn storybook --smoke-test
 
-      - name: run unit tests
+      - name: Run unit tests
         run: yarn test:components
 
-      - name: run the regression tests
+      - name: Run the regression tests
         run: yarn build:regression
 
   publish:
     needs: tests
     runs-on: ubuntu-20.04
 
     steps:
-      - uses: actions/checkout@v3
-      - name: Read .nvmrc
-        run: echo NVMRC=$(cat .nvmrc) >> $GITHUB_OUTPUT
-        id: nvm
+      - uses: actions/checkout@v4
 
       - name: Setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '${{ steps.nvm.outputs.NVMRC }}'
+          node-version-file: '.nvmrc'
 
       - name: Install the dependencies
         run: yarn
+
       - name: Build
         run: yarn build
-      - name: setting npm token
+
+      - name: Setting NPM token
         run: ./scripts/publish.sh
         env:
           NPM_TOKEN: ${{secrets.NPM_TOKEN}}
+
       - name: Publish package
         run: yarn semantic-release
         env:
           NPM_TOKEN: ${{secrets.NPM_TOKEN}}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           GH_URL: 'https://api.github.com/'
+
       - name: Deploy storybook to Github Pages
         if: ${{ github.ref == 'refs/heads/master' }}
         run: yarn deploy-storybook -- --ci

.nvmrc

@@ -1 +1 @@
-16.17.1
+20.15.0

CONTRIBUTING.MD

@@ -3,20 +3,22 @@
 
 ## Summary
 
- - [Contribution Prerequisites](#contribution-prerequisites)
- - [Important Notices](#important-notices)
- - [Getting Started](#getting-started)
- - [Editing a Component](#editing-a-component)
+- [Contributor's Guide](#contributors-guide)
+  - [Summary](#summary)
+  - [Contribution Prerequisites](#contribution-prerequisites)
+  - [Important Notices ⚠️](#important-notices-️)
+  - [Getting Started](#getting-started)
+  - [Editing a Component](#editing-a-component)
 
 
 ---
 You can contribute in many ways: opening or participating of a issue, reporting a bug, sending a [pull request](#submitting-a-pull-request).
 
 ## Contribution Prerequisites
 
-- Node v16.17.1;
+- Node v20.15.0;
 
-Obs.: We have .nvmrc. When you run nvm use, it will set the node to the same version based on the .nvmrc file in the repository.
+Obs.: We have .nvmrc. When you run `nvm use`, it will set the node to the same version based on the .nvmrc file in the repository.
 
 - Yarn;
 

components/Alert/Alert.jsx

@@ -79,7 +79,22 @@ const Wrapper = styled.div`
   `}
 `;
 
-const Alert = ({ icon, children, theme, onClose, ...rest }) => {
+const Alert = ({
+  icon = null,
+  skin = 'neutral',
+  children,
+  theme = {
+    colors,
+    baseFontSize: defaultBaseFontSize,
+    spacing,
+    breakpoints,
+    components: {
+      alert: components.alert,
+    },
+  },
+  onClose = undefined,
+  ...rest
+}) => {
   const [show, setShow] = useState(true);
 
   const handleClose = () => {
@@ -89,7 +104,7 @@ const Alert = ({ icon, children, theme, onClose, ...rest }) => {
 
   return (
     show && (
-      <Wrapper theme={theme} {...rest} role="alert">
+      <Wrapper theme={theme} skin={skin} {...rest} role="alert">
         <Content>
           {icon && <AlertIcon name={icon} />}
           {children && <span>{children}</span>}
@@ -100,21 +115,6 @@ const Alert = ({ icon, children, theme, onClose, ...rest }) => {
   );
 };
 
-Alert.defaultProps = {
-  icon: null,
-  skin: 'neutral',
-  onClose: undefined,
-  theme: {
-    colors,
-    baseFontSize: defaultBaseFontSize,
-    spacing,
-    breakpoints,
-    components: {
-      alert: components.alert,
-    },
-  },
-};
-
 Alert.propTypes = {
   /** At least one children is required for Alert component properly works */
   children: PropTypes.node.isRequired,

components/Alert/__snapshots__/Alert.unit.test.jsx.snap

@@ -153,11 +153,12 @@ exports[`Alert component Should match a skin snapshot 1`] = `
     </span>
     <button
       class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 ButtonBase-module__icon-button___nb2zK ButtonBase-module__icon-button-medium___-pGge ButtonBase-module__icon-button-neutral___CseSn c3 c4"
+      theme="[object Object]"
       type="button"
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-1696fkf-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-i4bv87-MuiSvgIcon-root"
         data-qtm-preloader="icon"
         data-testid="CloseIcon"
         focusable="false"
@@ -326,11 +327,12 @@ exports[`Alert component Should match a skin snapshot 2`] = `
     </span>
     <button
       class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 ButtonBase-module__icon-button___nb2zK ButtonBase-module__icon-button-medium___-pGge ButtonBase-module__icon-button-neutral___CseSn c3 c4"
+      theme="[object Object]"
       type="button"
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-1696fkf-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-i4bv87-MuiSvgIcon-root"
         data-qtm-preloader="icon"
         data-testid="CloseIcon"
         focusable="false"
@@ -499,11 +501,12 @@ exports[`Alert component Should match a skin snapshot 3`] = `
     </span>
     <button
       class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 ButtonBase-module__icon-button___nb2zK ButtonBase-module__icon-button-medium___-pGge ButtonBase-module__icon-button-neutral___CseSn c3 c4"
+      theme="[object Object]"
       type="button"
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-1696fkf-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-i4bv87-MuiSvgIcon-root"
         data-qtm-preloader="icon"
         data-testid="CloseIcon"
         focusable="false"
@@ -672,11 +675,12 @@ exports[`Alert component Should match a skin snapshot 4`] = `
     </span>
     <button
       class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 ButtonBase-module__icon-button___nb2zK ButtonBase-module__icon-button-medium___-pGge ButtonBase-module__icon-button-neutral___CseSn c3 c4"
+      theme="[object Object]"
       type="button"
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-1696fkf-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-i4bv87-MuiSvgIcon-root"
         data-qtm-preloader="icon"
         data-testid="CloseIcon"
         focusable="false"
@@ -845,11 +849,12 @@ exports[`Alert component Should match a skin snapshot 5`] = `
     </span>
     <button
       class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 ButtonBase-module__icon-button___nb2zK ButtonBase-module__icon-button-medium___-pGge ButtonBase-module__icon-button-neutral___CseSn c3 c4"
+      theme="[object Object]"
       type="button"
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-1696fkf-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-i4bv87-MuiSvgIcon-root"
         data-qtm-preloader="icon"
         data-testid="CloseIcon"
         focusable="false"
@@ -997,11 +1002,12 @@ exports[`Alert component Should match the snapshot of a simple alert 1`] = `
     </span>
     <button
       class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 ButtonBase-module__icon-button___nb2zK ButtonBase-module__icon-button-medium___-pGge ButtonBase-module__icon-button-neutral___CseSn c3 c4"
+      theme="[object Object]"
       type="button"
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-1696fkf-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-i4bv87-MuiSvgIcon-root"
         data-qtm-preloader="icon"
         data-testid="CloseIcon"
         focusable="false"
@@ -1171,11 +1177,12 @@ exports[`Alert component Should match the snapshot with an icon 1`] = `
     </span>
     <button
       class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 ButtonBase-module__icon-button___nb2zK ButtonBase-module__icon-button-medium___-pGge ButtonBase-module__icon-button-neutral___CseSn c5 c6"
+      theme="[object Object]"
       type="button"
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-1696fkf-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-i4bv87-MuiSvgIcon-root"
         data-qtm-preloader="icon"
         data-testid="CloseIcon"
         focusable="false"