diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index d98d70719..40eca5722 100644 --- a/.github/pull_request_template.md +++ b/.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 diff --git a/components/01-atoms/date-time/yds-date-time.twig b/components/01-atoms/date-time/yds-date-time.twig index ea528a0f2..fa5ab4367 100644 --- a/components/01-atoms/date-time/yds-date-time.twig +++ b/components/01-atoms/date-time/yds-date-time.twig @@ -3,12 +3,13 @@ {# # 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 @@ -16,62 +17,65 @@ # 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'), } %} diff --git a/components/01-atoms/lists/_yds-list.scss b/components/01-atoms/lists/_yds-list.scss index ac1e435ba..5a89a93ca 100644 --- a/components/01-atoms/lists/_yds-list.scss +++ b/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 { diff --git a/components/02-molecules/cards/custom-card/_yds-custom-card.scss b/components/02-molecules/cards/custom-card/_yds-custom-card.scss index 20d3ece6e..a31dae694 100644 --- a/components/02-molecules/cards/custom-card/_yds-custom-card.scss +++ b/components/02-molecules/cards/custom-card/_yds-custom-card.scss @@ -18,16 +18,11 @@ $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); } @@ -35,29 +30,6 @@ $global-card-themes: map.deep-get(tokens.$tokens, 'global-themes'); 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 diff --git a/components/02-molecules/cards/reference-card/reference-card.stories.js b/components/02-molecules/cards/reference-card/reference-card.stories.js index b5d56257e..d44e1c311 100644 --- a/components/02-molecules/cards/reference-card/reference-card.stories.js +++ b/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, }) => `
@@ -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, })}
@@ -133,11 +109,8 @@ export const EventCard = ({ secondaryCTAURL, multiDayEvent, headingPrefix, - categories, showCategories, - tags, showTags, - showThumbnail, }) => `
@@ -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, })}
@@ -211,12 +184,9 @@ export const ProfileCard = ({ collectionType, featured, withImage, - categories, showCategories, showPronouns, - tags, showTags, - showThumbnail, }) => `
@@ -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, })}
`; + +ProfileCard.argTypes = { + showPronouns: { + name: 'Show Pronouns', + type: 'boolean', + defaultValue: false, + }, +}; diff --git a/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss b/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss index 27e77dac3..2cf5338e4 100644 --- a/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss +++ b/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; + } } } diff --git a/components/02-molecules/content-spotlight-portrait/content-spotlight-portrait.stories.js b/components/02-molecules/content-spotlight-portrait/content-spotlight-portrait.stories.js index 2cf43db79..87155ef8d 100644 --- a/components/02-molecules/content-spotlight-portrait/content-spotlight-portrait.stories.js +++ b/components/02-molecules/content-spotlight-portrait/content-spotlight-portrait.stories.js @@ -30,6 +30,11 @@ export default { type: 'select', options: ['image-left', 'image-right'], }, + contentVerticalAlignment: { + name: 'Content Vertical Alignment', + type: 'select', + options: ['top', 'middle', 'bottom'], + }, imageStyle: { name: 'Image Style', type: 'select', @@ -65,6 +70,7 @@ export default { args: { componentTheme: 'default', position: 'image-left', + contentVerticalAlignment: 'middle', imageStyle: 'inline', overline: null, heading: contentSpotlightPortraitData.content_spotlight_portrait__heading, @@ -78,6 +84,7 @@ export default { export const ContentSpotlightPortrait = ({ position, + contentVerticalAlignment, overline, heading, subheading, @@ -91,6 +98,7 @@ export const ContentSpotlightPortrait = ({ ...imageData.responsive_images['2x3'], content_spotlight_portrait__theme: componentTheme, content_spotlight_portrait__position: position, + content_spotlight_portrait__vertical_align: contentVerticalAlignment, content_spotlight_portrait__style: imageStyle, content_spotlight_portrait__overline: overline, content_spotlight_portrait__heading: heading, diff --git a/components/02-molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig b/components/02-molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig index 69653e575..e5d9b0f1f 100644 --- a/components/02-molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig +++ b/components/02-molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig @@ -26,6 +26,7 @@ 'data-component-width': content_spotlight_portrait__width|default('site'), 'data-component-theme': content_spotlight_portrait__theme|default('default'), 'data-image-style': content_spotlight_portrait__style|default('inline'), + 'data-content-vertical-align': content_spotlight_portrait__vertical_align|default('middle'), class: bem(content_spotlight_portrait__base_class) } %} diff --git a/components/02-molecules/link-group/_yds-link-group.scss b/components/02-molecules/link-group/_yds-link-group.scss index f0cc9ffe3..20f00bbf7 100644 --- a/components/02-molecules/link-group/_yds-link-group.scss +++ b/components/02-molecules/link-group/_yds-link-group.scss @@ -105,12 +105,7 @@ $break-link-group-max: $break-link-group - 0.05; [data-footer-theme='one'] &, [data-footer-theme='two'] &, [data-footer-theme='three'] & { - --color-link-group-hover: var(--color-slot-two); - } - - [data-footer-theme='four'] &, - [data-footer-theme='five'] & { - --color-link-group-hover: var(--color-slot-four); + --color-link-group-hover: var(--color-site-footer-text-color); } &:hover { diff --git a/components/02-molecules/text-with-image/_yds-text-with-image.scss b/components/02-molecules/text-with-image/_yds-text-with-image.scss index 890f77517..e17b102f9 100644 --- a/components/02-molecules/text-with-image/_yds-text-with-image.scss +++ b/components/02-molecules/text-with-image/_yds-text-with-image.scss @@ -190,6 +190,19 @@ $component-content-spotlight-themes: map.deep-get( grid-template: 'primary secondary'; gap: var(--size-spacing-8); + // 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; + } + // Focus Options [data-component-focus='equal'] & { grid-template-columns: 1fr 1fr; diff --git a/components/02-molecules/text-with-image/text-with-image.stories.js b/components/02-molecules/text-with-image/text-with-image.stories.js index 90a9789cd..bfd7a7b30 100644 --- a/components/02-molecules/text-with-image/text-with-image.stories.js +++ b/components/02-molecules/text-with-image/text-with-image.stories.js @@ -34,6 +34,11 @@ export default { type: 'select', options: ['image-left', 'image-right'], }, + contentVerticalAlignment: { + name: 'Content Vertical Alignment', + type: 'select', + options: ['top', 'middle', 'bottom'], + }, focus: { name: 'Focus', type: 'select', @@ -69,6 +74,7 @@ export default { componentTheme: 'default', width: 'site', position: 'image-left', + contentVerticalAlignment: 'top', focus: 'equal', overline: null, heading: textWithImageData.text_with_image__heading, @@ -81,6 +87,7 @@ export default { export const ContentSpotlightLandscape = ({ width, position, + contentVerticalAlignment, focus, overline, heading, @@ -95,6 +102,7 @@ export const ContentSpotlightLandscape = ({ text_with_image__theme: componentTheme, text_with_image__width: width, text_with_image__position: position, + text_with_image__vertical_align: contentVerticalAlignment, text_with_image__focus: focus, text_with_image__overline: overline, text_with_image__heading: heading, diff --git a/components/02-molecules/text-with-image/yds-text-with-image.twig b/components/02-molecules/text-with-image/yds-text-with-image.twig index 52bba784d..f31be1c33 100644 --- a/components/02-molecules/text-with-image/yds-text-with-image.twig +++ b/components/02-molecules/text-with-image/yds-text-with-image.twig @@ -26,6 +26,7 @@ 'data-image-position': text_with_image__position|default('image-left'), 'data-component-width': text_with_image__width|default('site'), 'data-component-theme': text_with_image__theme|default('default'), + 'data-content-vertical-align': text_with_image__vertical_align|default('top'), class: bem(text_with_image__base_class) } %} diff --git a/components/02-molecules/tile-item/_yds-tile-item.scss b/components/02-molecules/tile-item/_yds-tile-item.scss index 66950ea8c..2ca48976c 100644 --- a/components/02-molecules/tile-item/_yds-tile-item.scss +++ b/components/02-molecules/tile-item/_yds-tile-item.scss @@ -33,6 +33,7 @@ $tile-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); --color-link-hover: var(--color-tile-item-content); --color-link-visited-base: var(--color-link-visited-light); --color-link-visited-hover: var(--color-link-visited-light-hover); + --color-tile-animation-border: var(--color-slot-three); background-color: var(--color-tile-item-theme); color: var(--color-tile-item-content); @@ -72,11 +73,25 @@ $tile-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); &[data-component-theme='one'] { --color-tile-item-theme: var(--color-slot-one); --color-tile-item-content: var(--color-slot-eight); + --color-tile-animation-border: var(--color-slot-two); + + [data-global-theme='one'] & { + --color-tile-animation-border: var(--color-slot-three); + } + + [data-global-theme='three'] & { + --color-tile-animation-border: var(--color-slot-three); + } + + [data-global-theme='four'] & { + --color-tile-animation-border: var(--color-slot-three); + } } &[data-component-theme='two'] { --color-tile-item-theme: var(--color-slot-two); --color-tile-item-content: var(--color-slot-eight); + --color-tile-animation-border: var(--color-slot-three); // For accessibility reason set lighter visited links color. [data-global-theme='four'] & { @@ -90,6 +105,11 @@ $tile-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); --color-tile-item-content: var(--color-slot-seven); --color-link-visited-base: var(--color-link-visited); --color-link-visited-hover: var(--color-link-visited-hover); + --color-tile-animation-border: var(--color-slot-two); + + [data-global-theme='three'] & { + --color-tile-animation-border: var(--color-slot-one); + } } &[data-component-theme='four'] { @@ -97,11 +117,13 @@ $tile-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); --color-tile-item-content: var(--color-slot-seven); --color-link-visited-base: var(--color-link-visited); --color-link-visited-hover: var(--color-link-visited-hover); + --color-tile-animation-border: var(--color-slot-five); } &[data-component-theme='five'] { --color-tile-item-theme: var(--color-slot-five); --color-tile-item-content: var(--color-slot-eight); + --color-tile-animation-border: var(--color-slot-three); } &__inner { @@ -129,6 +151,32 @@ $tile-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); justify-content: flex-end; } } + + &[data-component-animation='true'] { + &::before { + @include tokens.animate( + $property: 'width', + $duration: var(--animation-speed-default) + ); + + content: ''; + display: block; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: var(--border-thickness-6); + width: 0; + background-color: var(--color-tile-animation-border); + z-index: 1; + } + + &:hover { + &::before { + width: 100%; + } + } + } } .tile__item__heading { diff --git a/components/02-molecules/tile-item/tile-item.stories.js b/components/02-molecules/tile-item/tile-item.stories.js index 86189bed6..b1bbd4f28 100644 --- a/components/02-molecules/tile-item/tile-item.stories.js +++ b/components/02-molecules/tile-item/tile-item.stories.js @@ -47,6 +47,10 @@ export default { name: 'With image', type: 'boolean', }, + withAnimation: { + name: 'With Animation', + type: 'boolean', + }, }, args: { number: tileItemData.tile__item__number, @@ -57,6 +61,7 @@ export default { verticalAlignment: 'top', themeColor: 'one', image: true, + withAnimation: false, }, }; @@ -69,6 +74,7 @@ export const TileItem = ({ alignment, verticalAlignment, image, + withAnimation, }) => `
@@ -82,12 +88,14 @@ export const TileItem = ({ tile__item__vertical_alignment: 'top', tile__item__bg_image: 'true', ...imageData.responsive_images['1x1'], + tile__item__animation: withAnimation ? 'true' : 'false', })} ${tileItemTwig({ tile__item__heading: tileItemData.tile__item__heading, tile__item__presentation_style: 'icon', tile__item__alignment: 'right', tile__item__bg_image: 'false', + tile__item__animation: withAnimation ? 'true' : 'false', })} ${tileItemTwig({ tile__item__heading: tileItemData.tile__item__heading, @@ -98,6 +106,7 @@ export const TileItem = ({ tile__item__alignment: 'left', tile__item__bg_image: 'true', ...imageData.responsive_images['1x1'], + tile__item__animation: withAnimation ? 'true' : 'false', })}
@@ -119,6 +128,7 @@ export const TileItem = ({ tile__item__theme: themeColor, tile__item__bg_image: image ? 'true' : 'false', ...imageData.responsive_images['1x1'], + tile__item__animation: withAnimation ? 'true' : 'false', })}
diff --git a/components/02-molecules/tile-item/yds-tile-item.twig b/components/02-molecules/tile-item/yds-tile-item.twig index c76032e65..0ab1eca94 100644 --- a/components/02-molecules/tile-item/yds-tile-item.twig +++ b/components/02-molecules/tile-item/yds-tile-item.twig @@ -27,6 +27,7 @@ 'data-component-vertical-alignment': tile__item__vertical_alignment|default('top'), 'data-component-theme': tile__item__theme|default('one'), 'data-component-has-image': tile__item__bg_image|default('false'), + 'data-component-animation': tile__item__animation|default('false'), class: bem(tile__item__base_class, tile__item__modifiers), }) %} diff --git a/components/03-organisms/card-collection/_yds-card-collection.scss b/components/03-organisms/card-collection/_yds-card-collection.scss index 10167fdc1..b724ac45a 100644 --- a/components/03-organisms/card-collection/_yds-card-collection.scss +++ b/components/03-organisms/card-collection/_yds-card-collection.scss @@ -6,13 +6,17 @@ // The collection main wrapper. .card-collection { @include tokens.spacing-page-section; + + .ys-view & { + margin-block-start: 0; + } } // The collection heading. .card-collection__heading { @include tokens.h2-yale-new; - margin-bottom: var(--spacing-page-section); + margin-bottom: var(--size-spacing-7); } // The actual collection of cards. diff --git a/components/03-organisms/component-wrapper/_yds-component-wrapper.scss b/components/03-organisms/component-wrapper/_yds-component-wrapper.scss index bedfc7712..895a662cf 100644 --- a/components/03-organisms/component-wrapper/_yds-component-wrapper.scss +++ b/components/03-organisms/component-wrapper/_yds-component-wrapper.scss @@ -13,10 +13,16 @@ } .component-wrapper__heading { - margin-bottom: var(--spacing-page-section); + margin-bottom: var(--size-spacing-7); // When a component wrapper contains a view the header should yse yale-new. .ys-view & { @include tokens.h2-yale-new; } + + // When a component wrapper contains a cta-group, decrease margin + // between the heading and the cta-group. + .component-wrapper:has(.cta-group) & { + margin-bottom: var(--size-spacing-4); + } } diff --git a/components/03-organisms/custom-card-collection/_yds-custom-card-collection.scss b/components/03-organisms/custom-card-collection/_yds-custom-card-collection.scss index 7b708bac5..634cc3faa 100644 --- a/components/03-organisms/custom-card-collection/_yds-custom-card-collection.scss +++ b/components/03-organisms/custom-card-collection/_yds-custom-card-collection.scss @@ -9,7 +9,7 @@ .custom-card-collection__heading { @include tokens.h2-yale-new; - margin-bottom: var(--spacing-page-section); + margin-bottom: var(--size-spacing-7); } .custom-card-collection__cards { diff --git a/components/03-organisms/site-footer/_site-footer-mega.twig b/components/03-organisms/site-footer/_site-footer-mega.twig index 97567bf84..97dd913f1 100644 --- a/components/03-organisms/site-footer/_site-footer-mega.twig +++ b/components/03-organisms/site-footer/_site-footer-mega.twig @@ -29,10 +29,14 @@ {# WYSIWYG #}
{% block site_footer__content %} - {% include "@page-layouts/placeholder/yds-placeholder.twig" with { - placeholder: 'Content', - placeholder__type: 'element', - } %} + {% if site_footer__content_text %} + {{ site_footer__content_text }} + {% else %} + {% include "@page-layouts/placeholder/yds-placeholder.twig" with { + placeholder: 'Content', + placeholder__type: 'element', + } %} + {% endif %} {% endblock %}
{# Columns #} diff --git a/components/03-organisms/site-footer/_yds-site-footer.scss b/components/03-organisms/site-footer/_yds-site-footer.scss index 04c39120d..b651c550e 100644 --- a/components/03-organisms/site-footer/_yds-site-footer.scss +++ b/components/03-organisms/site-footer/_yds-site-footer.scss @@ -293,6 +293,13 @@ $global-footer-themes: map.deep-get(tokens.$tokens, 'global-themes'); flex: 1 1 30%; + & a, + & a:visited, + & a:hover, + & a:hover:visited { + color: var(--color-text); + } + @media (min-width: tokens.$break-l) { grid-area: content; padding-inline-start: var(--size-spacing-8); diff --git a/components/03-organisms/site-footer/site-footer.stories.js b/components/03-organisms/site-footer/site-footer.stories.js index e9e9f0ab3..343ac4655 100644 --- a/components/03-organisms/site-footer/site-footer.stories.js +++ b/components/03-organisms/site-footer/site-footer.stories.js @@ -1,16 +1,15 @@ import tokens from '@yalesites-org/tokens/build/json/tokens.json'; -import getGlobalThemes from '../../00-tokens/colors/color-global-themes'; import siteFooterTwig from './yds-site-footer.twig'; import siteFooterExamples from './_site-footer--examples.twig'; import socialLinksData from '../../02-molecules/social-links/social-links.yml'; +import linkGroupData from '../../02-molecules/link-group/link-group.yml'; const siteFooterThemes = { themes: tokens['site-footer-themes'] }; const siteGlobalThemes = { themes: tokens['global-themes'] }; const borderThicknessOptions = Object.keys(tokens.border.thickness); const siteFooterThemeOptions = Object.keys(tokens['site-footer-themes']); -const siteGlobalThemeOptions = getGlobalThemes(tokens['global-themes']); const siteFooterAccents = [ 'one', 'two', @@ -39,9 +38,7 @@ export default { args: { borderThickness: '8', siteFooterAccent: 'one', - siteFooterTheme: 'one', siteFooterVariation: 'basic', - globalTheme: 'one', }, }; @@ -54,14 +51,22 @@ export const Footer = ({ siteFooterTwig({ ...socialLinksData, ...siteFooterAccents, + ...linkGroupData, site_footer__border_thickness: borderThickness, site_footer__theme: siteFooterTheme, site_footer__accent: siteFooterAccent, site_footer__variation: siteFooterVariation, + site_footer__content_text: + 'This is example text for footer content with a link.', }); +Footer.args = { + siteFooterTheme: 'one', +}; + Footer.argTypes = { siteFooterTheme: { + name: 'Footer Theme (dial)', options: siteFooterThemeOptions, type: 'select', }, @@ -79,7 +84,6 @@ Footer.argTypes = { export const FooterExamples = ({ borderThickness, - globalTheme, siteFooterVariation, siteFooterAccent, }) => @@ -88,18 +92,12 @@ export const FooterExamples = ({ ...siteFooterThemes, ...siteGlobalThemes, ...siteFooterAccents, - site_global__theme: globalTheme, site_footer__accent: siteFooterAccent, site_footer__border_thickness: borderThickness, site_footer__variation: siteFooterVariation, }); FooterExamples.argTypes = { - globalTheme: { - name: 'Global Theme (lever)', - options: siteGlobalThemeOptions, - type: 'select', - }, siteFooterAccent: { name: 'Footer Accent Color (dial)', options: siteFooterAccents, diff --git a/components/03-organisms/tiles/tiles.stories.js b/components/03-organisms/tiles/tiles.stories.js index 5b27bedaa..3f75cc91d 100644 --- a/components/03-organisms/tiles/tiles.stories.js +++ b/components/03-organisms/tiles/tiles.stories.js @@ -40,6 +40,10 @@ export default { name: 'With image', type: 'boolean', }, + withAnimation: { + name: 'With Animation', + type: 'boolean', + }, }, args: { globalTheme: 'one', @@ -48,6 +52,7 @@ export default { verticalAlignment: 'top', gridCount: 'three', image: false, + withAnimation: false, }, }; @@ -57,6 +62,7 @@ export const Tiles = ({ verticalAlignment, columnCount, image, + withAnimation, }) => { return `
@@ -66,6 +72,7 @@ export const Tiles = ({ tiles__presentation_style: presentationStyle, tiles__grid_count: columnCount, tiles__with__image: image ? 'true' : 'false', + tiles__with__animation: withAnimation ? 'true' : 'false', ...tilesData, ...imageData.responsive_images['1x1'], })} diff --git a/components/03-organisms/tiles/yds-tiles.twig b/components/03-organisms/tiles/yds-tiles.twig index 0a676b53c..969b072d9 100644 --- a/components/03-organisms/tiles/yds-tiles.twig +++ b/components/03-organisms/tiles/yds-tiles.twig @@ -20,6 +20,7 @@ 'data-component-vertical-alignment': tiles__vertical_alignment|default('left'), 'data-component-grid-count': tiles__grid_count|default('three'), 'data-component-tiles-have-images': tiles__with__image|default('false'), + 'data-component-tiles-have-animation': tiles__with__animation|default('false'), 'class': bem(tiles__base_class), } %} @@ -40,6 +41,7 @@ tile__item__presentation_style: tiles__presentation_style, tile__item__theme: tile.tile__item__theme, tile__item__bg_image: tiles__with__image, + tile__item__animation: tiles__with__animation, } %} {% endfor %} diff --git a/components/05-page-examples/post/post.stories.js b/components/05-page-examples/post/post.stories.js index 673c285b6..cd79b4741 100644 --- a/components/05-page-examples/post/post.stories.js +++ b/components/05-page-examples/post/post.stories.js @@ -16,6 +16,9 @@ import referenceCardData from '../../02-molecules/cards/reference-card/examples/ // JavaScript. import '../../00-tokens/layout/yds-layout'; +// Utility for converting argTypes to args +import argTypesToArgs from '../../utility'; + /** * Storybook Definition. */ @@ -25,6 +28,7 @@ export default { layout: 'fullscreen', }, argTypes, + args: argTypesToArgs(argTypes), }; export const PostArticle = ({ diff --git a/webpack/plugins.js b/webpack/plugins.js index 7c3c21e0e..df94cba46 100644 --- a/webpack/plugins.js +++ b/webpack/plugins.js @@ -50,6 +50,7 @@ module.exports = { 'css/**/*.js', // Remove all unwanted, auto generated JS files from dist/css folder. 'css/**/*.js.map', '!*.{png,jpg,gif,svg}', + '!fonts/**', ], }), };