Merge branch 'master' of github.com:JudicialCouncilOfCalifornia/jcc_s…

…torybook
JudicialCouncilOfCalifornia · Feb 1, 2024 · fc4df8d · fc4df8d
2 parents aba0d31 + 43f016e
commit fc4df8d
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 7 deletions.
diff --git a/src/stories/Molecules/Card/Card.css b/src/stories/Molecules/Card/Card.css
@@ -75,6 +75,21 @@
   position: relative;
 }
 
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(92, 92, 92, 0.5);;  
+  z-index: 1;
+  mix-blend-mode: multiply;  
+}
+
+.caption-container {
+  position: relative;
+}
+
 /* Card modifier class can be used on cards wrapper element or on the card. */
 /* So we use both types of selector orders for each variant. */
 

diff --git a/src/stories/Molecules/Card/Card.twig b/src/stories/Molecules/Card/Card.twig
@@ -50,10 +50,13 @@
           <div class="card__media_caption">{{ media_caption.text }}</div>
         {% endif %}
         {% if caption_overlay %}
-        <div class="caption-overlay">
+        <div class="caption-container">       
+          <div class="caption-overlay">
             <span class="media-caption">{{ media_caption.text}}</span> 
             <span class="media-citation">{{citation}}</span>
-        </div>          
+             <div class="overlay"></div> 
+          </div>
+        </div>    
         {% endif %}
       </div>
     {% endif %}

diff --git a/src/stories/Molecules/HeroHangover/HeroHangover.data.js b/src/stories/Molecules/HeroHangover/HeroHangover.data.js
@@ -93,9 +93,8 @@ export default {
   news_header: {
     hangover_hide_compact: false,
     hangover_offset: 22,
-    background: null,
     brow: {
-      variant: "default",
+      variant: "default_with_date",
       part_one: "Brow Example",
       part_two: "Part two",
     },
@@ -106,11 +105,11 @@ export default {
       variant: "media-right",
       aspect: [],
       clickable_card: false,
-      background: null,
       media: '<img src="https://source.unsplash.com/random/1280x720/?zen" />',
     }),
     bottom_content: "",
     blurb: false,
+    background: 'striped-base-light-xx',
   },
   with_bottom: {
     hangover_hide_compact: false,

diff --git a/src/stories/Molecules/List/List.css b/src/stories/Molecules/List/List.css
@@ -9,5 +9,11 @@
 
 .list--none .list__container {
   list-style: none;
-  padding-inline: 0;
+  padding-inline: 0;  
+}
+
+.list-heading {  
+  margin-block-end: var(--s0);
+  border-block-end: 1px solid var(--color-base-light-x);  
+  padding-block-end: var(--s-1);  
 }
diff --git a/src/stories/Molecules/List/List.twig b/src/stories/Molecules/List/List.twig
@@ -21,7 +21,7 @@
 
 <div class="{{ classes|join(' ') }}">
   {% if heading %}
-    <{{h}}>{{ heading }}</{{h}}>
+    <{{h}} class="list-heading">{{ heading }}</{{h}}> 
   {% endif %}
   <{{tag}} class="{{ container_classes|join(' ') }}" role="list">
     {% for item in items %}