IYY-303: Callout component animations and background image options

.github/pull_request_template.md

@@ -11,8 +11,7 @@
 - [ ] Verify you can install the component with the CLI
 
 ### Design Review
-- [ ] Verify the designs match the [Figma Designs](https://www.figma.com/file/OVfmCW5s1gI7xnrM8ibX2y/UI-Kit-Alpha-%5BYaleSites%5D)
-- [ ] Review any new [Percy builds](https://percy.io/95144ff9/component-library-twig)
+- [ ] Verify the designs match the [Figma Designs](https://www.figma.com/design/bTjNHdiy1OdgHrP3b9m7uc/Yale-UI-Kit?node-id=11249-6771)
 
 ### Accessibility Review
 - [ ] Verify the component meets Accessibility requirements

components/01-atoms/date-time/yds-date-time.twig

@@ -3,75 +3,79 @@
 
 {#
  # Logic Variables:
- # - date_time__format: 'time', 'date', or null (default. Returns date and time.)
+ # - date_time__format: 'time', 'date', 'day__full', or null (default. Returns date and time.)
  #
  # Available Variables:
  # - date_time__all_day
  # - date_time__start
  # - date_time__end
+ # - date_time__format_override
  #}
 
 {# Set the end date to the start date, by default, so that Twig doesn't
  # erroneously use "today" like it does when no date is provided.
  # In the logic below we filter for "When start and end are the same, which, in
  # combination with this, accounts for "no end date provided" as well. #}
 {% set date_time__end = date_time__end|default(date_time__start) %}
+{% set same_start_and_end = date_time__start == date_time__end %}
+{% set date_time__format = date_time__format|default('date_and_time') %}
+
+
+{% if date_time__all_day == true %}
+  {% set date_time__format = "all_day" %}
+{% endif %}
 
 {# Use a variable to ensure emdash is properly placed consistently #}
 {% set em_dash = '—' %}
 
-{# Date/Time formats used in this file #}
-{% set format__iso = 'c' %} {# 2022-04-01T08:34:42+00:00 #}
-{% set format__html_date = 'Y-m-d' %} {# 2022-04-01 #}
-{% set format__date = 'F j, Y' %} {# April 1, 2022 #}
-{% set format__day__full__start = 'D M j' %} {# Fri Apr 1 #}
-{% set format__day__full = 'D M j, Y' %} {# Fri Apr, 1 2022 #}
-{% set format__time__start = 'g:i a' ~ em_dash %} {# 8:30 pm- #}
-{% set format__time = 'g:i a' %} {# 11:30 pm #}
+{# Date/Time formats used in this file
 
-{% if date_time__all_day == true %}
-  All Day
-{#############
- # TIME ONLY #
- #############}
-{% elseif date_time__format == 'time' %}
-  {# If start and end times are equal #}
-  {% if date_time__start|date(format__iso) == date_time__end|date(format__iso) %}
-    {% set date_time = date_time__start|date(format__time) %}
-  {# If start and end times are different #}
-  {% else %}
-    {% set date_time = date_time__start|date(format__time__start) ~ date_time__end|date(format__time) %}
-  {% endif %}
-{#############
- # DATE ONLY #
- #############}
-{% elseif date_time__format == 'date' %}
-  {# If start and end date/time are equal. #}
-  {% if date_time__start|date(format__html_date) == date_time__end|date(format__html_date) %}
-    {# Specific Date #}
-    {# Expample: April 1, 2022 #}
-    {% set date_time = date_time__start|date(format__date) %}
-  {# If start and end times are different. #}
-  {% else %}
-    {% set date_time = date_time__start|date(format__date) ~ em_dash ~ date_time__end|date(format__date) %}
-  {% endif %}
-{################
- # DAY AND DATE #
- ################}
+format__iso = 'c' {# 2022-04-01T08:34:42+00:00
+format__html_date = 2022-04-01
+format__date = April 1, 2022
+format__day__full__start = Fri Apr 1
+format__day__full = Fri Apr, 1 2022
+format__time__start = 8:30 pm-
+format__time = 11:30 pm
+format__all_day = All Day
+format__day__long = Thursday, December 3, 2024
+
+#}
+
+{% set formats = {
+    'format__iso': 'c',
+    'format__html_date': 'Y-m-d',
+    'format__date': 'F j, Y',
+    'format__date__start': 'F j, Y' ~ em_dash,
+    'format__day__full__start': "D M j \t\o",
+    'format__day__full': 'D M j, Y',
+    'format__time__start': 'g:i a' ~ em_dash,
+    'format__time': 'g:i a',
+    'format__all_day': "\\A\\l\\l \\D\\a\\y",
+    'format__all_day__start': '',
+    'format__day__long': 'l, F j, Y',
+    'format__day__long__start': 'l, F j, Y' ~ em_dash,
+  } %}
+
+{% set format_defaults = {
+  "time": "format__time",
+  "date": "format__date",
+  "date_and_time": "format__day__full",
+  "all_day": "format__all_day",
+  "day__full": "format__day__full",
+  } %}
+
+{% set used_format = date_time__format_override|default(format_defaults[date_time__format]) %}
+
+{% if same_start_and_end %}
+  {% set date_time = date_time__start|date(formats[used_format]) %}
 {% else %}
-  {# If start and end date/time are equal. #}
-  {% if date_time__start|date(format__html_date) == date_time__end|date(format__html_date) %}
-    {# Specific Day #}
-    {# Expample: Friday, April 1, 2022 #}
-    {% set date_time = date_time__start|date(format__day__full) %}
-  {# If start and end times are different. #}
-  {% else %}
-    {% set date_time = date_time__start|date(format__day__full__start) ~ ' to ' ~ date_time__end|date(format__day__full) %}
-  {% endif %}
+  {% set date_time = date_time__start|date(formats[used_format ~ "__start"]) ~ date_time__end|date(formats[used_format]) %}
 {% endif %}
 
+{# Add attributes #}
 {% set date_time__attribuites = {
-  datetime: date_time__start|date(format__iso),
+  datetime: date_time__start|date(formats['format__iso']),
   class: bem('date-time'),
 } %}
 

components/01-atoms/lists/_yds-list.scss

@@ -52,16 +52,13 @@ ol {
 }
 
 .taxonomy-list--categories {
-  @include tokens.h6-mallory-compact-medium;
+  @include tokens.body-s;
 
   color: var(--color-gray-500);
-  line-height: normal;
-  margin-bottom: var(--size-spacing-4);
-  text-transform: uppercase;
-
-  @media (min-width: tokens.$break-mobile) {
-    margin-bottom: var(--size-spacing-5);
-  }
+  font-variant-caps: small-caps;
+  font-variant-numeric: oldstyle-nums;
+  text-transform: lowercase;
+  letter-spacing: 0.5px;
 }
 
 .taxonomy-list--tags {

components/02-molecules/cards/custom-card/_yds-custom-card.scss

@@ -18,46 +18,18 @@ $global-card-themes: map.deep-get(tokens.$tokens, 'global-themes');
   --color-card-bar-long: var(--color-blue-shale);
   --color-card-bar-short: var(--color-blue-horizon);
 
-  display: grid;
-  grid-template-columns: 1fr 2fr;
-  column-gap: var(--size-spacing-6);
-  grid-template-areas: 'image content';
+  flex-basis: 100%;
+  display: flex;
+  flex-direction: column-reverse;
 
   &[data-with-image='false'] {
-    grid-template-areas:
-      'image'
-      'content';
-    grid-template-columns: 1fr;
     border: var(--card-border);
   }
 
   &:hover {
     cursor: pointer;
   }
 
-  @media (min-width: tokens.$break-s) {
-    &[data-with-image='true'] {
-      [data-collection-featured='true'] & {
-        grid-template-columns: repeat(2, 1fr);
-      }
-
-      [data-collection-featured='false'] & {
-        grid-template-columns: 1fr 2fr;
-        grid-template-areas: 'image content';
-      }
-    }
-  }
-
-  @media (min-width: tokens.$break-m) {
-    flex-basis: 100%;
-    display: flex;
-    flex-direction: column-reverse;
-
-    &:hover {
-      box-shadow: var(--drop-shadow-level-1);
-    }
-  }
-
   // Global themes: set color slots for each theme
   // This establishes `--color-slot-` variables name-spaced to the selector
   // in which it is used. We can map component-level variables to global-level

components/02-molecules/cards/reference-card/reference-card.stories.js

@@ -33,34 +33,10 @@ export default {
     showCategories: {
       name: 'Show Categories/Affiliations',
       type: 'boolean',
-      defaultValue: false,
-    },
-    categories: {
-      name: 'Categories',
-      type: 'array',
-      defaultValue: referenceCardData.reference_card__categories,
-      if: { arg: 'showCategories' },
-    },
-    showPronouns: {
-      name: 'Show Pronouns',
-      type: 'boolean',
-      defaultValue: false,
     },
     showTags: {
       name: 'Show Tags',
       type: 'boolean',
-      defaultValue: false,
-    },
-    showThumbnail: {
-      name: 'Show Thumbnail',
-      type: 'boolean',
-      defaultValue: true,
-    },
-    tags: {
-      name: 'Tags',
-      type: 'array',
-      defaultValue: referenceCardData.reference_card__tags,
-      if: { arg: 'showTags' },
     },
     withImage: {
       name: 'With Image',
@@ -73,6 +49,9 @@ export default {
     collectionType: 'grid',
     featured: true,
     withImage: true,
+    showCategories: false,
+    showTags: false,
+    date: referenceCardData.reference_card__date,
   },
 };
 
@@ -83,11 +62,8 @@ export const PostCard = ({
   collectionType,
   featured,
   withImage,
-  categories,
   showCategories,
-  tags,
   showTags,
-  showThumbnail,
 }) => `
 <div class='card-collection' data-component-width='site' data-collection-type='${collectionType}' data-collection-featured="${featured}">
   <div class='card-collection__inner'>
@@ -102,11 +78,11 @@ export const PostCard = ({
         reference_card__featured: featured ? 'true' : 'false',
         reference_card__image: withImage ? 'true' : 'false',
         reference_card__url: referenceCardData.reference_card__url,
-        reference_card__categories: categories,
+        reference_card__categories:
+          referenceCardData.reference_card__categories,
         show_categories: showCategories,
-        reference_card__tags: tags,
+        reference_card__tags: referenceCardData.reference_card__tags,
         show_tags: showTags,
-        show_thumbnail: showThumbnail,
       })}
     </ul>
   </div>
@@ -133,11 +109,8 @@ export const EventCard = ({
   secondaryCTAURL,
   multiDayEvent,
   headingPrefix,
-  categories,
   showCategories,
-  tags,
   showTags,
-  showThumbnail,
 }) => `
 <div class='card-collection' data-component-width='site' data-collection-type='${collectionType}' data-collection-featured="${featured}">
   <div class='card-collection__inner'>
@@ -158,11 +131,11 @@ export const EventCard = ({
         reference_card__cta_secondary__href: secondaryCTAURL,
         reference_card__cta_secondary__content: secondaryCTAContent,
         multi_day_event: multiDayEvent,
-        reference_card__categories: categories,
+        reference_card__categories:
+          referenceCardData.reference_card__categories,
         show_categories: showCategories,
-        reference_card__tags: tags,
+        reference_card__tags: referenceCardData.reference_card__tags,
         show_tags: showTags,
-        show_thumbnail: showThumbnail,
       })}
     </ul>
   </div>
@@ -211,12 +184,9 @@ export const ProfileCard = ({
   collectionType,
   featured,
   withImage,
-  categories,
   showCategories,
   showPronouns,
-  tags,
   showTags,
-  showThumbnail,
 }) => `
 <div class='card-collection' data-component-width='site' data-collection-source='profile' data-collection-type='${collectionType}' data-collection-featured="${featured}">
   <div class='card-collection__inner'>
@@ -236,14 +206,22 @@ export const ProfileCard = ({
         reference_card__snippet:
           referenceProfileCardData.reference_card__snippet,
         reference_card__url: referenceProfileCardData.reference_card__url,
-        reference_card__categories: categories,
+        reference_card__categories:
+          referenceProfileCardData.reference_card__categories,
         show_categories: showCategories,
         show_pronouns: showPronouns,
-        reference_card__tags: tags,
+        reference_card__tags: referenceProfileCardData.reference_card__tags,
         show_tags: showTags,
-        show_thumbnail: showThumbnail,
       })}
     </ul>
   </div>
 </div>
 `;
+
+ProfileCard.argTypes = {
+  showPronouns: {
+    name: 'Show Pronouns',
+    type: 'boolean',
+    defaultValue: false,
+  },
+};

components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss

@@ -199,6 +199,19 @@ $component-content-spotlight-port-themes: map.deep-get(
         var(--size-component-layout-width-site) + var(--size-spacing-10)
       );
     }
+
+    // Vertical alignment options
+    [data-content-vertical-align='top'] & {
+      align-items: flex-start;
+    }
+
+    [data-content-vertical-align='middle'] & {
+      align-items: center;
+    }
+
+    [data-content-vertical-align='bottom'] & {
+      align-items: flex-end;
+    }
   }
 }