[Component] Create o-text-introduction + update docs to reflect updat…

…ed spacing
cfpb · Oct 19, 2023 · 0d963aa · 0d963aa
1 parent f0ef4a2
commit 0d963aa
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 11 deletions.
diff --git a/docs/images/uploads/text_introduction-spacing.png b/docs/images/uploads/text_introduction-spacing.png
diff --git a/docs/images/uploads/text_introduction.png b/docs/images/uploads/text_introduction.png
diff --git a/docs/pages/introductions.md b/docs/pages/introductions.md
@@ -3,28 +3,40 @@ layout: variation
 section: patterns
 variation_groups:
   - variations:
-      - variation_code_snippet: ""
+      - variation_code_snippet: >-
+          <div class="o-text-introduction">
+            <h1>Text introduction</h1>
+            <p class="lead-paragraph">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+              quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+              consequat.
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+              quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+              cillum dolore.
+            </p>
+            <ul class="m-list m-list__links">
+              <li class="m-list_item">
+                <a class="m-list_link" href="#"> Call-to-action link </a>
+              </li>
+            </ul>
+          </div>
         variation_description: >-
           Text introductions consist of a heading, lead paragraph, and optional
           descriptive paragraph, and link text. They should be used on every
           page except in cases when a
           [hero](https://cfpb.github.io/design-system/patterns/heroes) or [item
           introduction](https://cfpb.github.io/design-system/patterns/item-introductions)
           is used.
-
-
-          Layout as seen with a standard right sidebar:
-
-
-          ![Image of a text introduction component with a standard right sidebar](/design-system/images/uploads/text_introduction.png)
         variation_jinja_code_snippet: ""
         variation_name: Text introduction
         variation_specs: >-
+          ![Image of text intro showing desktop and mobile design specs](/design-system/images/uploads/text_introduction-spacing.png)
           
-
-          ![Image of text intro showing grid and design specs](/design-system/images/uploads/text_introduction_with_specs.png)
-
-
           * Spacing: 45px margin above, 60 px margin below.
 
           * Page title: Heading 1

diff --git a/packages/cfpb-layout/src/cfpb-layout.less b/packages/cfpb-layout/src/cfpb-layout.less
@@ -15,6 +15,7 @@
 @import (less) 'organisms/featured-content-module.less';
 @import (less) 'organisms/wells.less';
 @import (less) 'organisms/email-signup.less';
+@import (less) 'organisms/text-introduction.less';
 
 /* ==========================================================================
    Design System

diff --git a/packages/cfpb-layout/src/organisms/text-introduction.less b/packages/cfpb-layout/src/organisms/text-introduction.less
@@ -0,0 +1,10 @@
+.o-text-introduction {
+  margin-top: 0; // Top spacing should come from the layout container
+  margin-bottom: 60px;
+
+  // All direct children should be 15px apart
+  & > * {
+    margin-top: 0;
+    margin-bottom: 15px;
+  }
+}