diff --git a/git.md b/git.md index 089623ef7..5f059734b 100644 --- a/git.md +++ b/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 diff --git a/next.config.js b/next.config.js index 767719fc4..658404ac6 100644 --- a/next.config.js +++ b/next.config.js @@ -1,4 +1,4 @@ /** @type {import('next').NextConfig} */ -const nextConfig = {} +const nextConfig = {}; -module.exports = nextConfig +module.exports = nextConfig; diff --git a/package.json b/package.json index 7b3b8f27c..588b2ad26 100644 --- a/package.json +++ b/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", diff --git a/src/app/globals.scss b/src/app/globals.scss index 35c8004cf..064ec19d5 100644 --- a/src/app/globals.scss +++ b/src/app/globals.scss @@ -21,7 +21,7 @@ .cds--content { margin-top: 3rem; padding: 0; -// background: var(--cds-background); + // background: var(--cds-background); } .cds--content .cds--css-grid { diff --git a/src/app/home/_mixins.scss b/src/app/home/_mixins.scss index b396b02d3..3db23842f 100644 --- a/src/app/home/_mixins.scss +++ b/src/app/home/_mixins.scss @@ -4,4 +4,4 @@ @mixin landing-page-background() { background-color: $layer-01; position: relative; -} \ No newline at end of file +} diff --git a/src/app/home/_overrides.scss b/src/app/home/_overrides.scss index 075209aa6..d52252089 100644 --- a/src/app/home/_overrides.scss +++ b/src/app/home/_overrides.scss @@ -15,4 +15,4 @@ .cds--subgrid--wide { //fix needed to keep the subgrid from scrolling horizontally margin-right: 1rem; -} \ No newline at end of file +} diff --git a/src/app/home/page.js b/src/app/home/page.js index 784f59bdc..46ffd02b1 100644 --- a/src/app/home/page.js +++ b/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() { - - -

The Principles

- - - Carbon is Open - - - Carbon is Modular - - - Carbon is Consistent - - + + } + /> + } + /> + } + /> + ); diff --git a/src/app/layout.js b/src/app/layout.js index f694bb029..df01611f5 100644 --- a/src/app/layout.js +++ b/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 }) { {children} - ) + ); } diff --git a/src/app/page.js b/src/app/page.js index 8a48b985a..937a0b394 100644 --- a/src/app/page.js +++ b/src/app/page.js @@ -1,5 +1,5 @@ import LandingPage from './home/page'; export default function Page() { - return ; - } + return ; +} diff --git a/src/app/repos/_repo-page.scss b/src/app/repos/_repo-page.scss index e988b0948..0f58c3f98 100644 --- a/src/app/repos/_repo-page.scss +++ b/src/app/repos/_repo-page.scss @@ -3,4 +3,4 @@ .repo-page__r1 { padding-top: $spacing-05; padding-bottom: $spacing-05; -} \ No newline at end of file +} diff --git a/src/components/Info/Info.js b/src/components/Info/Info.js new file mode 100644 index 000000000..01ef0f403 --- /dev/null +++ b/src/components/Info/Info.js @@ -0,0 +1,34 @@ +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) => ( + + +

{props.heading}

+ + {props.children} + +); + +const InfoCard = (props) => { + const splitHeading = createArrayFromPhrase(props.heading); + + return ( + +

+ {`${splitHeading[0]} `} + {splitHeading[1]} +

+

{props.body}

+ {props.icon()} + + ); +}; + +export { InfoSection, InfoCard }; diff --git a/src/components/Info/_info.scss b/src/components/Info/_info.scss new file mode 100644 index 000000000..6ebbcc1be --- /dev/null +++ b/src/components/Info/_info.scss @@ -0,0 +1,87 @@ +@use '@/components/Info/info'; +@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-section__heading { + @include type-style('heading-01'); + padding-bottom: $spacing-08; +} + +.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__heading { + @include type-style('productive-heading-03'); +} + +.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%; + } +} diff --git a/src/components/TutorialHeader/TutorialHeader.js b/src/components/TutorialHeader/TutorialHeader.js index c09b08be5..b13f45c06 100644 --- a/src/components/TutorialHeader/TutorialHeader.js +++ b/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 = () => (