Update step-4 documentation due to mistype founded in InfoSection reference code

[giacomodelillo]

Mistyped adding the class className="landing-page__r3" to the InfoSection in documentation. It resulted in Infosection component causing page to be larger ad unnecessary class css attribution.

Changelog

New

• none

Changed

• InfoSection component in reference code

Removed

• removed class from InfoSection component in reference code

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
carbondesignsystem	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 4, 2023 1:21pm

[github-actions]

DCO Assistant Lite bot All contributors have signed the DCO.

[giacomodelillo]

I have read the DCO document and I hereby sign the DCO.

[tay1orjones]

This change will also need to be made in each step branch on the carbon-tutorial repo

https://github.com/carbon-design-system/carbon-tutorial/blob/399e75fd6c89542716fa05ed8a5e9d7e6c7df32a/src/content/LandingPage/LandingPage.js#L89

Could you share a screenshot of how removing this class improves the layout?

[giacomodelillo]

This change will also need to be made in each step branch on the carbon-tutorial repo

https://github.com/carbon-design-system/carbon-tutorial/blob/399e75fd6c89542716fa05ed8a5e9d7e6c7df32a/src/content/LandingPage/LandingPage.js#L89

Could you share a screenshot of how removing this class improves the layout?

The change it's not needed in each step branch because the problem only occurs in the step 4 of the React Tutorial documentation. As we approach chapter "InfoSection component" of step 4 we have this reference code :

<Column lg={16} md={8} sm={4} className="landing-page__r3">
  <Grid>
    <Column md={4} lg={4}>
      <h3 className="landing-page__label">The Principles</h3>
    </Column>
    <Column md={4} lg={4}>
      Carbon is Open
    </Column>
    <Column md={4} lg={4}>
      Carbon is Modular
    </Column>
    <Column md={4} lg={4}>
      Carbon is Consistent
    </Column>
  </Grid>
</Column>

Where the landing-page__r3 class is attributed to the Column component, then in chapter "Use components" we need to "With everything imported, replace the current:"

<Grid>
  <Column md={4} lg={4}>
    <h3 className="landing-page__label">The Principles</h3>
  </Column>
  <Column md={4} lg={4}>
    Carbon is Open
  </Column>
  <Column md={4} lg={4}>
    Carbon is Modular
  </Column>
  <Column md={4} lg={4}>
    Carbon is Consistent
  </Column>
</Grid>

and "With the new components:"

<InfoSection heading="The Principles" className="landing-page__r3">
  <InfoCard
    heading="Carbon is Open"
    body="It's a distributed effort, guided by the principles of the open-source movement. Carbon's users are also it's makers, and everyone is encouraged to contribute."
    icon={() => <PersonFavorite size={32} />}
  />
  <InfoCard
    heading="Carbon is Modular"
    body="Carbon's modularity ensures maximum flexibility in execution. It's components are designed to work seamlessly with each other, in whichever combination suits the needs of the user."
    icon={() => <Application size={32} />}
  />
  <InfoCard
    heading="Carbon is Consistent"
    body="Based on the comprehensive IBM Design Language, every element and component of Carbon was designed from the ground up to work elegantly together to ensure consistent, cohesive user experiences."
    icon={() => <Globe size={32} />}
  />
</InfoSection>

Following these instruction we have the landing-page__r3 attributed to two components: Column and Infosection and only looking at the code of step 5 in the repo for React Tutorial V11 we see that the landing-page__r3 needs to be attributed only to the Infosection component, otherwise this is the result :

Where the component exits the column, widening the page and no longer fitting into the grid, hope to to help.

[tay1orjones]

Awesome, thanks for the additional information