TCI-1129: restore orig left align as supreme court option (#871)

JudicialCouncilOfCalifornia · Jan 20, 2024 · aa9aeb8 · aa9aeb8
1 parent 177949d
commit aa9aeb8
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 41 deletions.
diff --git a/source/_patterns/02-molecules/card/_card.scss b/source/_patterns/02-molecules/card/_card.scss
@@ -170,14 +170,14 @@ $_config: map-merge-by-keys($_config_schemes, base, $_config_schemes, $scheme);
     }
 
     .usa-card__media {
-      span {
+      div {
         border-radius: map-get($_config, border-radius-img);
       }
     }
   }
 
   .usa-card--media-top &,
-  .usa-card--media-left & {
+  .usa-card--media-left.medium & {
     .usa-card__content {
       @include u-padding(4, !important);
     }
@@ -188,17 +188,14 @@ $_config: map-merge-by-keys($_config_schemes, base, $_config_schemes, $scheme);
 
       .jcc-card--overlay-color-none {
         flex-grow: 1;
-
-        img {
-          aspect-ratio: 16/9;
-        }
+        @include add-aspect("16x9");
       }
     }
   }
 
   .usa-card--media-top & {
     .usa-card__content {
-      @include u-padding-top(2);
+      @include u-padding-top(2, !important);
     }
   }
 
@@ -211,17 +208,15 @@ $_config: map-merge-by-keys($_config_schemes, base, $_config_schemes, $scheme);
       @include u-flex-direction(row);
       @include u-padding-x(4);
     }
+  }
 
+  .usa-card--media-left.medium & {
     .usa-card__media {
       @include u-width(full);
 
       @include at-media(desktop) {
         min-width: 30rem;
       }
-
-      .jcc-card--overlay-color-none {
-        @include u-display(flex);
-      }
     }
   }
 
@@ -395,7 +390,7 @@ $_config: map-merge-by-keys($_config_schemes, base, $_config_schemes, $scheme);
 }
 
 .usa-card--media-top,
-.usa-card--media-left {
+.usa-card--media-left.medium {
   .usa-card__container {
     @include u-padding(0);
   }

diff --git a/source/_patterns/02-molecules/card/card~media-left-icon-example.yml b/source/_patterns/02-molecules/card/card~media-left-icon-example.yml
diff --git a/source/_patterns/02-molecules/card/card~media-left-medium.yml b/source/_patterns/02-molecules/card/card~media-left-medium.yml
@@ -0,0 +1,10 @@
+card:
+  style: "media-left medium"
+  title: "Posuere et ornare"
+  body: "<p>Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.</p>"
+  media:
+    src: "https://source.unsplash.com/random/350x250"
+    alt: "Image media test"
+  link:
+    url: "#"
+    text: "Luctus nunc quam"
diff --git a/source/_patterns/02-molecules/card/card~media-left.yml b/source/_patterns/02-molecules/card/card~media-left.yml
@@ -1,10 +1,8 @@
 card:
   style: "media-left"
-  title: "Posuere et ornare"
-  body: "<p>Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.</p>"
-  media:
-    src: "https://source.unsplash.com/random/350x250"
-    alt: "Image media test"
+  title: "SVG Icon Media Source"
+  body: "<p>Earlier use of icons from complete SVG HTML source rather than as an icon subcomponent.</p>"
+  media: "<svg class='icon icon-laptop margin-4 margin-right-0' width='35' height='35' role='img' aria-label='Laptop'><use xlink:href='#icon-fa-laptop'></use></svg>"
   link:
     url: "#"
     text: "Luctus nunc quam"
diff --git a/...organisms/cards/cards~media-left-icon.yml → ...ganisms/cards/cards~media-left-medium.yml b/...organisms/cards/cards~media-left-icon.yml → ...ganisms/cards/cards~media-left-medium.yml
@@ -4,31 +4,31 @@ cards:
     lead: "<p>Ipsum velit bibendum class id sit justo, at fermentum suscipit rhoncus hac sociis blandit, ante tincidunt imperdiet himenaeos felis. Sagittis diam dignissim risus mattis ad donec urna, non ligula dui viverra rhoncus convallis netus vivamus, platea iaculis consectetur pellentesque litora dolor.</p>"
   num_cols: 1
   items:
-    - style: "media-left"
+    - style: "media-left medium"
       title: "Posuere et ornare"
       body: "<p>Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.</p>"
-      media: "<svg class='icon icon-laptop margin-4 margin-right-0' width='35' height='35' role='img' aria-label='Laptop'><use xlink:href='#icon-fa-laptop'></use></svg>"
+      media: "<img src='https://source.unsplash.com/random/350x250'>"
       link:
         url: "#"
         text: "Luctus nunc quam"
-    - style: "media-left"
+    - style: "media-left medium"
       title: "Posuere et ornare"
       body: "<p>Habitasse nec dui adipiscing massa magna mollis morbi netus malesuada, odio varius id eu integer felis tellus at feugiat, euismod potenti inceptos nibh mauris posuere scelerisque facilisi. This card has no link url.</p>"
-      media: "<svg class='icon icon-landmark margin-4 margin-right-0' width='35' height='35' role='img' aria-label='Landmark'><use xlink:href='#icon-fa-landmark'></use></svg>"
+      media: "<img src='https://source.unsplash.com/random/350x250'>"
       link:
         url: null
         text: "Erat neque quisque vivamus"
-    - style: "media-left"
+    - style: "media-left medium"
       title: "Posuere et ornare"
       body: "<p>In torquent consequat quam vulputate himenaeos semper ut aliquam at, iaculis ac platea laoreet ridiculus mattis sagittis volutpat hendrerit, vehicula orci dictum dictumst nunc scelerisque lacus auctor.</p>"
-      media: "<svg class='icon icon-comment-alt margin-4 margin-right-0' width='35' height='35' role='img' aria-label='Comment'><use xlink:href='#icon-fa-comment-alt'></use></svg>"
+      media: "<img src='https://source.unsplash.com/random/350x250'>"
       link:
         url: "#"
         text: "Aliquet potenti"
-    - style: "media-left"
+    - style: "media-left medium"
       title: "Posuere et ornare"
       body: "<p>Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.</p>"
-      media: "<svg class='icon icon-money-bill-wave margin-4 margin-right-0' width='35' height='35' role='img' aria-label='Money bill'><use xlink:href='#icon-fa-money-bill-wave'></use></svg>"
+      media: "<img src='https://source.unsplash.com/random/350x250'>"
       link:
         url: "#"
         text: "Luctus nunc quam"
diff --git a/source/_patterns/03-organisms/cards/cards~media-left.yml b/source/_patterns/03-organisms/cards/cards~media-left.yml
@@ -7,28 +7,28 @@ cards:
     - style: "media-left"
       title: "Posuere et ornare"
       body: "<p>Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.</p>"
-      media: "<img src='https://source.unsplash.com/random/350x250'>"
+      media: "<svg class='icon icon-laptop margin-4 margin-right-0' width='35' height='35' role='img' aria-label='Laptop'><use xlink:href='#icon-fa-laptop'></use></svg>"
       link:
         url: "#"
         text: "Luctus nunc quam"
     - style: "media-left"
       title: "Posuere et ornare"
       body: "<p>Habitasse nec dui adipiscing massa magna mollis morbi netus malesuada, odio varius id eu integer felis tellus at feugiat, euismod potenti inceptos nibh mauris posuere scelerisque facilisi. This card has no link url.</p>"
-#      media: "<img src='https://source.unsplash.com/random/350x250'>"
+      media: "<svg class='icon icon-landmark margin-4 margin-right-0' width='35' height='35' role='img' aria-label='Landmark'><use xlink:href='#icon-fa-landmark'></use></svg>"
       link:
         url: null
         text: "Erat neque quisque vivamus"
     - style: "media-left"
       title: "Posuere et ornare"
       body: "<p>In torquent consequat quam vulputate himenaeos semper ut aliquam at, iaculis ac platea laoreet ridiculus mattis sagittis volutpat hendrerit, vehicula orci dictum dictumst nunc scelerisque lacus auctor.</p>"
-      media: "<img src='https://source.unsplash.com/random/350x250'>"
+      media: "<svg class='icon icon-comment-alt margin-4 margin-right-0' width='35' height='35' role='img' aria-label='Comment'><use xlink:href='#icon-fa-comment-alt'></use></svg>"
       link:
         url: "#"
         text: "Aliquet potenti"
     - style: "media-left"
       title: "Posuere et ornare"
       body: "<p>Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.</p>"
-      media: "<img src='https://source.unsplash.com/random/350x250'>"
+      media: "<svg class='icon icon-money-bill-wave margin-4 margin-right-0' width='35' height='35' role='img' aria-label='Money bill'><use xlink:href='#icon-fa-money-bill-wave'></use></svg>"
       link:
         url: "#"
         text: "Luctus nunc quam"
diff --git a/source/_patterns/04-templates/content-stream/_content-stream.scss b/source/_patterns/04-templates/content-stream/_content-stream.scss
@@ -26,7 +26,7 @@
           @include u-width(mobile-lg);
         }
 
-        span {
+        div {
           @include add-aspect("16x9");
         }
       }
@@ -56,7 +56,7 @@
       @include u-margin-right(3);
       width: 8.75rem;
 
-      span {
+      div {
         @include add-aspect("1x1");
       }
     }
@@ -67,7 +67,7 @@
   }
 
   .usa-card__media {
-    span {
+    div {
       @include u-display(inline-block);
       @include u-position(relative);
       @include u-width(full);
@@ -90,7 +90,7 @@
 
   .usa-card--media-placeholder {
     .usa-card__media {
-      span {
+      div {
         @include u-height(auto);
         @include u-padding(1);
         @include u-bg("blue-warm-70v");