From dde3a0832977af3a1aea0b13fab9e0f4dab4d5cf Mon Sep 17 00:00:00 2001 From: Gavyn McKenzie Date: Thu, 31 Oct 2024 10:53:31 +0000 Subject: [PATCH] refactor: less scrolling in code examples --- src/guide/apply-diamond-ui/index.webc | 32 +++++++++++++++++++++------ src/guide/canvas/index.webc | 2 +- src/guide/composition/index.webc | 2 +- src/guide/content/index.webc | 12 +++++++++- src/guide/controls/index.webc | 2 +- src/guide/the-problem/index.webc | 5 +++-- src/guide/the-solution.webc | 12 ++++++++-- 7 files changed, 52 insertions(+), 15 deletions(-) diff --git a/src/guide/apply-diamond-ui/index.webc b/src/guide/apply-diamond-ui/index.webc index 866eb97..011199f 100644 --- a/src/guide/apply-diamond-ui/index.webc +++ b/src/guide/apply-diamond-ui/index.webc @@ -41,7 +41,9 @@ In code form the separated components might now look like:

Page title

Lorem ipsum dolor [...etc]

- Call to action + + Call to action + ``` @@ -64,10 +66,14 @@ Adding the eyebrow text and secondary paragraph is pretty straightforward. Becau

Page title

Lorem ipsum dolor [...etc]

+

-+ Suspendisse sed dictum dolor, at hendrerit nibh. Curabitur euismod ipsum jut mi elementum interdum. ++ Suspendisse sed dictum dolor, at hendrerit nibh. ++ Curabitur euismod ipsum jut mi ++ elementum interdum. +

- Call to action + + Call to action + ``` @@ -90,15 +96,21 @@ Next let’s look at the two button Controls, one has a new ‘secondary’ styl

Page title

Lorem ipsum dolor [...etc]

- Suspendisse sed dictum dolor, at hendrerit nibh. Curabitur euismod ipsum jut mi elementum interdum. + Suspendisse sed dictum dolor, at hendrerit nibh. + Curabitur euismod ipsum jut mi + elementum interdum.

+
+
- Main action + + Main action + +
+
-+ Secondary action ++ ++ Secondary action ++ +
+
@@ -127,7 +139,13 @@ Now when the product team decide they need an email signup in the main hero or t +
-+ ++
+ diff --git a/src/guide/canvas/index.webc b/src/guide/canvas/index.webc index b236bc7..f08d014 100644 --- a/src/guide/canvas/index.webc +++ b/src/guide/canvas/index.webc @@ -27,7 +27,7 @@ Typical examples of canvas components are: alt="An example of UI with the canvas highlighted" /> -

+

See the Pen Canvas by gavmck (@gavmck) on CodePen. diff --git a/src/guide/composition/index.webc b/src/guide/composition/index.webc index 31daa1e..b7f6b2d 100644 --- a/src/guide/composition/index.webc +++ b/src/guide/composition/index.webc @@ -25,7 +25,7 @@ Typical examples of a composition component are: alt="An example of UI with the composition elements highlighted" /> -

+

See the Pen Composition by gavmck (@gavmck) on CodePen. diff --git a/src/guide/content/index.webc b/src/guide/content/index.webc index f0a6052..5f64e41 100644 --- a/src/guide/content/index.webc +++ b/src/guide/content/index.webc @@ -26,7 +26,17 @@ Typical examples of content components are: alt="An example of UI with content highlighted" /> -

+

See the Pen Content by gavmck (@gavmck) on CodePen. diff --git a/src/guide/controls/index.webc b/src/guide/controls/index.webc index 2b0721b..35938ae 100644 --- a/src/guide/controls/index.webc +++ b/src/guide/controls/index.webc @@ -25,7 +25,7 @@ Typical examples of controls are: alt="An example of UI with controls highlighted" /> -

+

See the Pen Controls by gavmck (@gavmck) on CodePen. diff --git a/src/guide/the-problem/index.webc b/src/guide/the-problem/index.webc index cea2451..e553110 100644 --- a/src/guide/the-problem/index.webc +++ b/src/guide/the-problem/index.webc @@ -95,8 +95,9 @@ Over the months, more requirements come in and more props get added. Different t on-secondary-button-click="handleButtonClick()" >

- Suspendisse sed dictum dolor, at hendrerit nibh. Curabitur euismod - ipsum ut mi elementum interdum. + Suspendisse sed dictum dolor, at hendrerit nibh. + Curabitur euismod ipsum ut mi + elementum interdum.

``` diff --git a/src/guide/the-solution.webc b/src/guide/the-solution.webc index d8d8e62..5c31315 100644 --- a/src/guide/the-solution.webc +++ b/src/guide/the-solution.webc @@ -38,10 +38,18 @@ function pageHero( let result = `
`; if (eyebrow) { - result += `<${eyebrowTag} class="page-hero__eyebrow">${eyebrow}`; + result += ` + <${eyebrowTag} class="page-hero__eyebrow"> + ${eyebrow} + + `; } - result += `<${titleTag} class="page-hero__title">${title}`; + result += ` + <${titleTag} class="page-hero__title"> + ${title} + + `; // ...horror continues...