From fd8517e8e9b65d4254f47f07c07ef2187391eb78 Mon Sep 17 00:00:00 2001
From: ashley-hebler <ashleyhebler@gmail.com>
Date: Tue, 13 Apr 2021 09:07:59 -0500
Subject: [PATCH] Add type helpers for modular text plugins

---
 assets/scss/5-typography/_all.scss       |  1 +
 assets/scss/5-typography/_copy.scss      | 41 ++++++++++++++++++++++++
 assets/scss/6-components/list/_list.scss | 17 ++++++----
 assets/scss/6-components/list/list.html  |  9 +++++-
 4 files changed, 61 insertions(+), 7 deletions(-)
 create mode 100644 assets/scss/5-typography/_copy.scss

diff --git a/assets/scss/5-typography/_all.scss b/assets/scss/5-typography/_all.scss
index 07b9dd462..d963d768e 100644
--- a/assets/scss/5-typography/_all.scss
+++ b/assets/scss/5-typography/_all.scss
@@ -4,6 +4,7 @@
 //
 // Styleguide 5.0
 @import 'byline';
+@import 'copy';
 @import 'headline';
 @import 'links';
 @import 'sectionhead';
diff --git a/assets/scss/5-typography/_copy.scss b/assets/scss/5-typography/_copy.scss
new file mode 100644
index 000000000..48f192408
--- /dev/null
+++ b/assets/scss/5-typography/_copy.scss
@@ -0,0 +1,41 @@
+// Copy (t-copy)
+//
+// This helper will set reasonable defaults on copy.
+//
+// .t-copy--level-2 - Adds highest layer of hierarchy to text. Level modifiers are typically used on heading tags.
+// .t-copy--level-3 - Adds next layer of hierarchy to text.
+// .t-copy--level-4 - Adds lowest layer of hierarchy to text.
+//
+// Markup: <h2 class="t-copy {{ className }}">Example of {{ className }} text</h2><p class="t-copy">Normal paragraph of text with no modifier.</p>
+//
+// Styleguide 5.1.1
+//
+.t-copy {
+  @include font-setting('secondary');
+  line-height: $font-line-height-b;
+  margin: $size-b auto;
+  max-width: $story-narrow;
+
+  // must be em for SASSmq helper
+  @include mq($until: ($story-narrow / 1rem) + 2em) {
+    // Hack: breakpoint divides by 1rem for compatible units
+    padding: 0 $size-xs;
+  }
+
+  &--level-2 {
+    font-size: $size-m;
+    margin-top: $size-giant;
+  }
+
+  &--level-3 {
+    @include font-setting('primary');
+    font-size: $size-b;
+    margin-top: $size-xxl;
+  }
+
+  &--level-4 {
+    @include font-setting('primary');
+    font-size: $size-s;
+    margin-top: $size-xl;
+  }
+}
\ No newline at end of file
diff --git a/assets/scss/6-components/list/_list.scss b/assets/scss/6-components/list/_list.scss
index 1309ddc21..57a4cebd0 100644
--- a/assets/scss/6-components/list/_list.scss
+++ b/assets/scss/6-components/list/_list.scss
@@ -2,21 +2,26 @@
 //
 // Our standard list is just plain ol' bullets
 //
+// .c-list--hoverable - Bullets become yellow on hover; best used for a list of links maybe.
+// .c-list--indented - Lists used in the context of an article
+//
 // Markup: 6-components/list/list.html
 //
 // Styleguide 6.1.3
 .c-list {
   padding-left: $size-b;
 
-  li {
+  &:not(ol) {
     list-style: disc;
+  }
 
-    &::marker {
-      color: $color-black-off;
-    }
-
-    &:hover::marker {
+  &--hoverable {
+    li:hover::marker {
       color: $color-yellow-tribune;
     }
   }
+
+  &--indented {
+    padding-left: 3.5rem;
+  }
 }
diff --git a/assets/scss/6-components/list/list.html b/assets/scss/6-components/list/list.html
index e01c8aca8..1c63212ae 100644
--- a/assets/scss/6-components/list/list.html
+++ b/assets/scss/6-components/list/list.html
@@ -1,6 +1,13 @@
-<ul class="c-list">
+<ul class="c-list {{ className }}">
   <li>Bacon</li>
   <li>Eggs</li>
   <li>Cheese</li>
   <li>Potato</li>
 </ul>
+
+<ol class="c-list {{ className }}">
+  <li>Bacon</li>
+  <li>Eggs</li>
+  <li>Cheese</li>
+  <li>Potato</li>
+</ol>