feat(tutorial): complete step 4

git.md

@@ -1,7 +1,7 @@
 git branch v11-next-step-1
 
 git checkout v11-next-step-1
-M	README.md
+M README.md
 Switched to branch 'v11-next-step-1'
 
 git branch v11-next-step-2

next.config.js

@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -16,6 +16,7 @@
     "format:diff": "prettier --list-different \"**/*.{js,md,scss}\""
   },
   "dependencies": {
+    "@carbon/pictograms-react": "^11.83.0",
     "@carbon/react": "^1.35.0",
     "@octokit/core": "4.2.0",
     "eslint": "8.44.0",

src/app/globals.scss

@@ -5,6 +5,7 @@
 
 @use '@/app/home/landing-page';
 @use '@/app/repos/repo-page';
+@use '@/components/Info/info';
 
 /// Remove overrides once Carbon bugs are fixed upstream.
 /// Need grid option to not add page gutters at large viewports, to also use when nesting grids
@@ -21,7 +22,7 @@
 .cds--content {
   margin-top: 3rem;
   padding: 0;
-//  background: var(--cds-background);
+  //  background: var(--cds-background);
 }
 
 .cds--content .cds--css-grid {

src/app/home/_mixins.scss

@@ -4,4 +4,4 @@
 @mixin landing-page-background() {
   background-color: $layer-01;
   position: relative;
-}
+}

src/app/home/_overrides.scss

@@ -15,4 +15,4 @@
 .cds--subgrid--wide {
   //fix needed to keep the subgrid from scrolling horizontally
   margin-right: 1rem;
-}
+}

src/app/home/page.js

@@ -13,6 +13,12 @@ import {
   Column,
 } from '@carbon/react';
 import Image from 'next/image';
+import { InfoSection, InfoCard } from '@/components/Info/Info';
+import {
+  Advocate,
+  Globe,
+  AcceleratingTransformation,
+} from '@carbon/pictograms-react';
 
 export default function LandingPage() {
   return (
@@ -98,35 +104,23 @@ export default function LandingPage() {
         </Tabs>
       </Column>
       <Column lg={16} md={8} sm={4} className="landing-page__r3">
-        <Grid>
-          <Column lg={4} md={2} sm={4}>
-            <h3 className="landing-page__label">The Principles</h3>
-          </Column>
-          <Column
-            lg={{ start: 5, span: 3 }}
-            md={{ start: 3, span: 6 }}
-            sm={4}
-            className="landing-page__title"
-          >
-            Carbon is Open
-          </Column>
-          <Column
-            lg={{ start: 9, span: 3 }}
-            md={{ start: 3, span: 6 }}
-            sm={4}
-            className="landing-page__title"
-          >
-            Carbon is Modular
-          </Column>
-          <Column
-            lg={{ start: 13, span: 3 }}
-            md={{ start: 3, span: 6 }}
-            sm={4}
-            className="landing-page__title"
-          >
-            Carbon is Consistent
-          </Column>
-        </Grid>
+        <InfoSection heading="The Principles">
+          <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={() => <Advocate 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={() => <AcceleratingTransformation 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>
       </Column>
     </Grid>
   );

src/app/layout.js

@@ -1,11 +1,11 @@
-import './globals.scss'
+import './globals.scss';
 
 import { Providers } from './providers';
 
 export const metadata = {
   title: 'Carbon + Next13',
   description: 'IBM Carbon Tutorial with NextJS 13',
-}
+};
 
 export default function RootLayout({ children }) {
   return (
@@ -14,5 +14,5 @@ export default function RootLayout({ children }) {
         <Providers>{children}</Providers>
       </body>
     </html>
-  )
+  );
 }

src/app/page.js

@@ -1,5 +1,5 @@
 import LandingPage from './home/page';
 
 export default function Page() {
-    return <LandingPage />;
-  }
+  return <LandingPage />;
+}

src/app/repos/_repo-page.scss

@@ -3,4 +3,4 @@
 .repo-page__r1 {
   padding-top: $spacing-05;
   padding-bottom: $spacing-05;
-}
+}

src/components/Info/Info.js

@@ -0,0 +1,35 @@
+import { Grid, Column } from '@carbon/react';
+
+// Take in a phrase and separate the third word in an array
+function createArrayFromPhrase(phrase) {
+  const splitPhrase = phrase.split(' ');
+  const thirdWord = splitPhrase.pop();
+  return [splitPhrase.join(' '), thirdWord];
+}
+
+const InfoSection = (props) => (
+  <Grid className={`${props.className} info-section`}>
+    <Column md={8} lg={16} xlg={3}>
+      <h3 className="info-section__heading">{props.heading}</h3>
+    </Column>
+    {props.children}
+  </Grid>
+);
+
+const InfoCard = (props) => {
+  const splitHeading = createArrayFromPhrase(props.heading);
+  return (
+    <Column sm={4} md={8} lg={5} xlg={4} className="info-card">
+      <div>
+        <h4 className="info-card__heading">
+          {`${splitHeading[0]} `}
+          <strong>{splitHeading[1]}</strong>
+        </h4>
+        <p className="info-card__body">{props.body}</p>
+      </div>
+      {props.icon()}
+    </Column>
+  );
+};
+
+export { InfoSection, InfoCard };

src/components/Info/_info.scss

@@ -0,0 +1,81 @@
+@use '@carbon/react/scss/type' as *;
+@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/react/scss/breakpoint' as *;
+@use '@carbon/react/scss/theme' as *;
+
+.info-card__heading {
+  @include type-style('productive-heading-03');
+}
+
+.info-card {
+  margin-top: $spacing-09;
+  display: flex;
+  flex-direction: column;
+  padding-left: 1rem;
+
+  svg {
+    margin-top: $spacing-09;
+  }
+
+  @include breakpoint(sm) {
+    padding-left: 0;
+  }
+
+  div {
+    flex-grow: 1; // fill space so icons are bottom aligned
+  }
+
+  // top border in only small breakpoints to prevent overrides
+  @include breakpoint-down(lg) {
+    padding-left: 0;
+    margin-top: 0;
+    flex-direction: row-reverse;
+
+    &:not(:nth-child(2)) {
+      padding-top: $spacing-10;
+    }
+
+    svg {
+      margin-top: -0.25rem;
+      margin-right: 2rem;
+      min-width: 48px;
+      min-height: 48px;
+    }
+  }
+
+  @include breakpoint(lg) {
+    margin-top: 0;
+    padding-left: 0;
+
+    &:not(:nth-child(2)) {
+      border-left: 1px solid $border-subtle-01;
+      padding-left: 1rem;
+    }
+
+    svg {
+      margin-top: $spacing-12;
+    }
+  }
+
+  // left border in all items
+  @include breakpoint(xlg) {
+    margin-top: 0;
+    border-left: 1px solid $border-subtle-01;
+    padding-left: 1rem;
+
+    svg {
+      margin-top: $spacing-12;
+    }
+  }
+
+  .info-card__body {
+    margin-top: $spacing-06;
+    flex-grow: 1; // fill space so pictograms are bottom aligned
+    @include type-style('body-long-01');
+
+    // prevent large line lengths between small and medium viewports
+    @include breakpoint-between(321px, md) {
+      max-width: 75%;
+    }
+  }
+}

src/components/TutorialHeader/TutorialHeader.js

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import {
   Header,
@@ -13,10 +13,10 @@ import {
   SideNav,
   SideNavItems,
   HeaderSideNavItems,
-} from "@carbon/react";
-import { Switcher, Notification, UserAvatar } from "@carbon/icons-react";
+} from '@carbon/react';
+import { Switcher, Notification, UserAvatar } from '@carbon/icons-react';
 
-import Link from "next/link";
+import Link from 'next/link';
 
 const TutorialHeader = () => (
   <HeaderContainer

src/components/TutorialHeader/_tutorial-header.scss

@@ -15,4 +15,4 @@
   .action-icons {
     display: none;
   }
-}
+}