Date Card

[GaryRidgway]

resolves https://github.com/uiowa/uids/issues/934

This PR adds in media dates as seen before on registrar. This should allow them to be a bit more flexible in the media slot.

Additionally, this PR includes a refactor of sizes, creating more variations for media to accomodate smaller items in the media slot.

To test

1. Test Media date: http://localhost:6006/?path=/story/components-card--media-date using all combinations of backgrounds and borders mobile/desktop view.
2. Test on Grid http://localhost:6006/?path=/story/components-card--grid a. using <div class="media--date"><span class="media--date__month">June</span><span class="media--date__day">9</span></div> in media slot.
   b. Test all Orientation variations in combination with Background Colors and Border boolean.
   4. Test "no-crop" option on http://localhost:6006/?path=/story/components-card--media-date for images using <img src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2024-07/15431140198_9644bc9537_o.jpg"/> in media slot - adjust size from small, medium, to large and confirm it resizes and works.

[joewhitsitt]

I can review this, but I am trying to understand the downstream effects of the sizing change. Does this mean we will need to update layout builder style defintions and/or run an update hook to update existing media sizing?

[joewhitsitt]

I recall this issue where we considered different terms for the sizing instead of heading down the x- xx-... naming convention. Do we want to start to establish that here?

thumbnail, tiny, and extra small

[joewhitsitt]

I haven't worked with UIDS/Storybook in a while. Is it just me or is the Orientation setting for cards hit or miss between the different "stories." Also, do we need some wrangling if stacked medium/large is used?

Update: I guess icon medium/large has the same effect but the icon within fills the space where as this text size stays the same.

[GaryRidgway]

I can review this, but I am trying to understand the downstream effects of the sizing change. Does this mean we will need to update layout builder style defintions and/or run an update hook to update existing media sizing?

I was thinking we would have to, but I recall being told that it might be as easy as a find and replace as well. So I think it might take some investigation to know

I recall this issue where we considered different terms for the sizing instead of heading down the x- xx-... naming convention. Do we want to start to establish that here?

thumbnail, tiny, and extra small

This could work as well, I think asking opinions on size names will come up in my EOD later today

I haven't worked with UIDS/Storybook in a while. Is it just me or is the Orientation setting for cards hit or miss between the different "stories." Also, do we need some wrangling if stacked medium/large is used?

Yeah, the initial stories dont offer much unless you crop the viewport, but maybe some wrangling would be good. However, thats how images work as well, so it might be intended.

[joewhitsitt]

Sounds like we are going to discuss a bit more in-depth after stand-up tomorrow

[bspeare]

Here's an example of the no crop version for the date and a vertical image: https://codepen.io/bspeare/pen/KKLOEBV

[joewhitsitt]

this is what i fear:

surely nobody will use a ridiculous aspect ratio image like this :face_palm:

[joewhitsitt]

i can pull this down to test again after standup

[joewhitsitt]

Should we merge this and create a release for the next slice for registrar?

[pyrello]

I haven't pulled and tested yet, but reviewing the code changes, it seems that the date display is going to look different in the case of cards with gold backgrounds. Specifically, there will be no gold circle, just the black date text. I think ideally, we would have appropriate color/styling for the media date for each background color option.

@bspeare suggested we could potentially solve for this now by adding a black border around the circle in the case of a gold background.

We don't have to tackle this now if we are anxious to get this merged, as I think we are meeting the needs of the case we developed this for.

[joewhitsitt]

Good point:

[joewhitsitt]

Is this okay to push?

diff --git a/src/scss/components/card.scss b/src/scss/components/card.scss
index 4de59f566c..cdfd9f30a0 100755
--- a/src/scss/components/card.scss
+++ b/src/scss/components/card.scss
@@ -213,8 +213,8 @@

   .media--date {
     position: relative;
-    color: $uiowa-black;
-    background-color: $uiowa-gold;
+    color: $white;
+    background-color: $uiowa-black;
     padding-top: $gutter;
     text-align: center;
     width: 6rem;
@@ -241,6 +241,12 @@
       font-weight: $font-weight-medium-bold;
     }
   }
+  &:not([class*="bg--gold"]){
+    .media--date {
+      color: $uiowa-black;
+      background-color: $uiowa-gold;
+    }
+  }
 }

[pyrello]

Is this okay to push?

Can you add a code comment indicating that we would like to revisit this eventually?