From 3aeb8fb5f4d07ecca595dd8aca31a80141020fdb Mon Sep 17 00:00:00 2001 From: Marc Berger Date: Mon, 22 Apr 2024 18:09:59 -0700 Subject: [PATCH 1/9] feat(YSP-458): styling for moderation form --- components/01-atoms/forms/_yds-form.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/01-atoms/forms/_yds-form.scss b/components/01-atoms/forms/_yds-form.scss index 00c4788e4..fda6780ee 100644 --- a/components/01-atoms/forms/_yds-form.scss +++ b/components/01-atoms/forms/_yds-form.scss @@ -39,7 +39,8 @@ } // Used for exposed filter forms -.ys-filter-form { +.ys-filter-form, +.content-moderation-entity-moderation-form { align-items: flex-end; display: flex; gap: 1rem; From 805b32020c7b9636bdf6d74e75e9a27b9d7fc3e0 Mon Sep 17 00:00:00 2001 From: Edwin Torrez Barrera Date: Mon, 20 May 2024 10:53:44 -0600 Subject: [PATCH 2/9] fix(YSP-519): remove 'subtle' variation of quicklinks * fix(YSP-519): remove the entire 'variation' control, there are no variations now * fix(YSP-519): remove any styles related to 'subtle', variations were removed * fix(YSP-519): remove any custom code related to the 'subtle' variation --- .../quick-links/_yds-quick-links.scss | 31 ------------------- .../quick-links/quick-links.stories.js | 6 ---- .../quick-links/yds-quick-links.twig | 19 +++--------- 3 files changed, 5 insertions(+), 51 deletions(-) diff --git a/components/02-molecules/quick-links/_yds-quick-links.scss b/components/02-molecules/quick-links/_yds-quick-links.scss index e4128c652..f1ed15a5f 100644 --- a/components/02-molecules/quick-links/_yds-quick-links.scss +++ b/components/02-molecules/quick-links/_yds-quick-links.scss @@ -125,10 +125,6 @@ $component-quick-links-themes: map.deep-get(tokens.$tokens, 'component-themes'); @media (min-width: tokens.$break-xl) { gap: var(--size-spacing-6); } - - [data-quick-links-variation='subtle'][data-component-alignment='left'] & { - max-width: var(--size-component-layout-width-content); - } } .quick-links__heading { @@ -163,15 +159,6 @@ $component-quick-links-themes: map.deep-get(tokens.$tokens, 'component-themes'); row-gap: var(--size-spacing-6); column-gap: var(--size-spacing-7); - [data-quick-links-variation='subtle'] & { - grid-template-columns: 1fr 1fr; - justify-items: start; - - @media (min-width: tokens.$break-s) { - grid-template-columns: 1fr 1fr 1fr; - } - } - [data-quick-links-variation='promotional'] & { @media (min-width: tokens.$break-s) { grid-template-columns: 1fr 1fr; @@ -203,10 +190,6 @@ $component-quick-links-themes: map.deep-get(tokens.$tokens, 'component-themes'); grid-template-columns: 1fr 1fr 1fr; } } - - [data-quick-links-variation='subtle'][data-component-alignment='left'] & { - max-width: var(--size-component-layout-width-content); - } } .quick-links__list-item { @@ -219,10 +202,6 @@ $component-quick-links-themes: map.deep-get(tokens.$tokens, 'component-themes'); .quick-links__link { @include atoms.link; - - [data-quick-links-variation='subtle'] & { - --color-text-shadow: var(--color-basic-white); - } } .quick-links__cta { @@ -231,12 +210,6 @@ $component-quick-links-themes: map.deep-get(tokens.$tokens, 'component-themes'); display: flex; align-items: center; justify-content: center; - - // in subtle variartion, inline-flex the links - [data-quick-links-variation='subtle'] & { - display: inline-flex; - text-align: left; - } } .quick-links__image { @@ -256,8 +229,4 @@ $component-quick-links-themes: map.deep-get(tokens.$tokens, 'component-themes'); object-fit: cover; } } - - [data-quick-links-variation='subtle'][data-component-alignment='left'] & { - max-width: var(--size-component-layout-width-content); - } } diff --git a/components/02-molecules/quick-links/quick-links.stories.js b/components/02-molecules/quick-links/quick-links.stories.js index c983ed8c7..15954613c 100644 --- a/components/02-molecules/quick-links/quick-links.stories.js +++ b/components/02-molecules/quick-links/quick-links.stories.js @@ -23,12 +23,6 @@ export default { type: 'string', defaultValue: quickLinksData.quick_links__description, }, - variation: { - name: 'Variation', - type: 'select', - options: ['promotional', 'subtle'], - defaultValue: 'promotional', - }, image: { name: 'With image', type: 'boolean', diff --git a/components/02-molecules/quick-links/yds-quick-links.twig b/components/02-molecules/quick-links/yds-quick-links.twig index 18302b8f4..cd2747f22 100644 --- a/components/02-molecules/quick-links/yds-quick-links.twig +++ b/components/02-molecules/quick-links/yds-quick-links.twig @@ -26,20 +26,11 @@ 'class': bem(quick_links__base_class), } %} -{% if quick_links__variation == 'promotional' %} - {% set quick_links__attributes = quick_links__attributes|merge({ - 'data-component-width': 'site', - 'data-component-theme': quick_links__background_color|default('one'), - 'data-quick-links-layout': quick_links__layout|default('stacked'), - }) %} -{% endif %} - -{% if quick_links__variation == 'subtle' %} - {% set quick_links__attributes = quick_links__attributes|merge({ - 'data-component-width': quick_links__width|default('site'), - 'data-component-alignment': quick_links__alignment|default('left'), - }) %} -{% endif %} +{% set quick_links__attributes = quick_links__attributes|merge({ + 'data-component-width': 'site', + 'data-component-theme': quick_links__background_color|default('one'), + 'data-quick-links-layout': quick_links__layout|default('stacked'), +}) %}
{% block prefix_suffix %} From abac9c3b1864f87d7bcdbeae3f52d785ba78a540 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Fri, 31 May 2024 09:34:04 -0500 Subject: [PATCH 3/9] feat(YSP-32): allow profile vertical image options (#362) * feat(YSP-321): add portrait image option to profile meta * feat(YSP-321): increase outdent amount to match design * feat(YSP-321): add options to profile story --------- Co-authored-by: Jim Vomero --- components/02-molecules/meta/meta.stories.js | 28 +++++++ .../meta/profile-meta/_yds-profile-meta.scss | 80 +++++++++++++++---- .../meta/profile-meta/yds-profile-meta.twig | 14 +++- .../05-page-examples/profiles/profile.twig | 20 ++++- .../profiles/profiles.stories.js | 32 +++++++- 5 files changed, 154 insertions(+), 20 deletions(-) diff --git a/components/02-molecules/meta/meta.stories.js b/components/02-molecules/meta/meta.stories.js index c65ee1258..a47f0b3e4 100644 --- a/components/02-molecules/meta/meta.stories.js +++ b/components/02-molecules/meta/meta.stories.js @@ -64,6 +64,9 @@ export const Profile = ({ titleLine, subTitle, department, + profileImageOrientation, + profileImageAlignment, + profileImageStyle, }) => profileMetaTwig({ ...imageData.responsive_images['3x2'], @@ -72,6 +75,13 @@ export const Profile = ({ profile_meta__subtitle_line: subTitle, profile_meta__department: department, profile_meta__background: bgColor, + profile_meta__image_orientation: profileImageOrientation, + image__srcset__1: imageData.responsive_images['2x3'].image__srcset, + image__sizes__1: imageData.responsive_images['2x3'].image__sizes, + image__alt__1: imageData.responsive_images['2x3'].image__alt, + image__src__1: imageData.responsive_images['2x3'].image__src, + profile_meta__image_style: profileImageStyle, + profile_meta__image_alignment: profileImageAlignment, }); Profile.argTypes = { heading: { @@ -100,4 +110,22 @@ Profile.argTypes = { options: colorPairingsData, defaultValue: 'one', }, + profileImageOrientation: { + name: 'Profile Image Orientation', + type: 'select', + options: ['landscape', 'portrait'], + defaultValue: 'landscape', + }, + profileImageAlignment: { + name: 'Profile Image Alignment', + type: 'select', + options: ['left', 'right'], + defaultValue: 'right', + }, + profileImageStyle: { + name: 'Profile Image Style', + type: 'select', + options: ['inline', 'outdent'], + defaultValue: 'inline', + }, }; diff --git a/components/02-molecules/meta/profile-meta/_yds-profile-meta.scss b/components/02-molecules/meta/profile-meta/_yds-profile-meta.scss index dbb790830..c65b3c01c 100644 --- a/components/02-molecules/meta/profile-meta/_yds-profile-meta.scss +++ b/components/02-molecules/meta/profile-meta/_yds-profile-meta.scss @@ -89,34 +89,72 @@ $break-profile-banner-max: $break-profile-banner - 0.05; @media (min-width: $break-profile-banner) { flex-direction: row-reverse; gap: var(--size-spacing-5); + + [data-component-image-alignment='left'] & { + flex-direction: row; + gap: var(--size-spacing-7); + } } } .profile-meta__image { width: 100%; flex: 0 auto; - aspect-ratio: 3/2; - @media (max-width: $break-profile-banner-max) { - margin-bottom: var(--size-spacing-5); + @media (min-width: $break-profile-banner) { + [data-component-image-style='outdent'] & { + margin-top: var(--size-spacing-7); + margin-bottom: calc(var(--size-spacing-7) * -1); + } } - @media (min-width: $break-profile-banner) { - max-width: 661px; + [data-component-image-orientation='landscape'] & { + aspect-ratio: 3/2; + + @media (max-width: $break-profile-banner-max) { + margin-bottom: var(--size-spacing-5); + } + + @media (min-width: $break-profile-banner) { + max-width: 661px; + } + + // Safari 14 fix for aspect-ratio + @supports not (aspect-ratio: 3 / 2) { + &::before { + float: left; + padding-top: 66.66%; + content: ''; + } + + &::after { + display: block; + content: ''; + clear: both; + } + } } - // Safari 14 fix for aspect-ratio - @supports not (aspect-ratio: 3 / 2) { - &::before { - float: left; - padding-top: 66.66%; - content: ''; + [data-component-image-orientation='portrait'] & { + aspect-ratio: 2/3; + + // Safari 14 fix for aspect-ratio + @supports not (aspect-ratio: 2 / 3) { + &::before { + float: left; + padding-top: 150%; + content: ''; + } + + &::after { + display: block; + content: ''; + clear: both; + } } - &::after { - display: block; - content: ''; - clear: both; + @media (min-width: $break-profile-banner) { + max-width: 300px; } } } @@ -127,8 +165,16 @@ $break-profile-banner-max: $break-profile-banner - 0.05; flex: 1 auto; padding-block: var(--size-spacing-8) var(--size-spacing-6); - @media (min-width: $break-profile-banner) { - max-width: calc(100% - 661px); + [data-component-image-orientation='landscape'] & { + @media (min-width: $break-profile-banner) { + max-width: calc(100% - 661px); + } + } + + [data-component-image-orientation='portrait'] & { + @media (min-width: $break-profile-banner) { + max-width: calc(100% - 300px); + } } } diff --git a/components/02-molecules/meta/profile-meta/yds-profile-meta.twig b/components/02-molecules/meta/profile-meta/yds-profile-meta.twig index c1d475aeb..b95dfef2d 100644 --- a/components/02-molecules/meta/profile-meta/yds-profile-meta.twig +++ b/components/02-molecules/meta/profile-meta/yds-profile-meta.twig @@ -9,6 +9,9 @@ {% set profile_meta__attributes = { 'data-component-width': profile_meta__width|default('site'), + 'data-component-image-orientation': profile_meta__image_orientation|default('landscape'), + 'data-component-image-style': profile_meta__image_style|default('inline'), + 'data-component-image-alignment': profile_meta__image_alignment|default('left'), class: bem(profile_meta__base_class, [], profile_meta__blockname, profile_meta__additional_classes), } %} @@ -17,7 +20,16 @@
{% block profile__image %} - {% include "@atoms/images/image/_responsive-image.twig" %} + {% if profile_meta__image_orientation == 'portrait' %} + {% include "@atoms/images/image/_responsive-image.twig" with { + image__srcset: image__srcset__1, + image__sizes: image__sizes__1, + image__alt: image__alt__1, + image__src: image__src__1, + }%} + {% else %} + {% include "@atoms/images/image/_responsive-image.twig" %} + {% endif %} {% endblock %}
diff --git a/components/05-page-examples/profiles/profile.twig b/components/05-page-examples/profiles/profile.twig index a72e0143f..302fe6bb1 100644 --- a/components/05-page-examples/profiles/profile.twig +++ b/components/05-page-examples/profiles/profile.twig @@ -2,13 +2,31 @@ {% block page__content %} {% include "@organisms/menu/breadcrumbs/yds-breadcrumbs.twig" %} +{% if profile_meta__image_orientation == 'portrait' %} {% include "@molecules/meta/profile-meta/yds-profile-meta.twig" with { profile_meta__heading: 'Person Namerton', profile_meta__title_line: 'Profile Title', profile_meta__subtitle_line: 'Profile Subtitle', profile_meta__department: 'Department name', + profile_meta__image_orientation: profile_meta__image_orientation, + profile_meta__image_alignment: profile_meta__image_alignment, + profile_meta__image_style: profile_meta__image_style, + image__srcset: image__srcset__1, + image__sizes: image__sizes__1, + image__alt: image__alt__1, + image__src: image__src__1, } %} - + {% else %} + {% include "@molecules/meta/profile-meta/yds-profile-meta.twig" with { + profile_meta__heading: 'Person Namerton', + profile_meta__title_line: 'Profile Title', + profile_meta__subtitle_line: 'Profile Subtitle', + profile_meta__department: 'Department name', + profile_meta__image_orientation: profile_meta__image_orientation, + profile_meta__image_alignment: profile_meta__image_alignment, + profile_meta__image_style: profile_meta__image_style, + } %} +{% endif %} {% embed "@organisms/layout/two-column/yds-two-column.twig" %} {% block two_column__primary %} {# -- text, image, video, quote, button link, divider, accordion, tabs #} diff --git a/components/05-page-examples/profiles/profiles.stories.js b/components/05-page-examples/profiles/profiles.stories.js index 051b3b206..b729805a5 100644 --- a/components/05-page-examples/profiles/profiles.stories.js +++ b/components/05-page-examples/profiles/profiles.stories.js @@ -28,7 +28,27 @@ export default { parameters: { layout: 'fullscreen', }, - argTypes, + argTypes: { + ...argTypes, + profileImageOrientation: { + name: 'Profile Image Orientation', + type: 'select', + options: ['landscape', 'portrait'], + defaultValue: 'landscape', + }, + profileImageAlignment: { + name: 'Profile Image Alignment', + type: 'select', + options: ['left', 'right'], + defaultValue: 'right', + }, + profileImageStyle: { + name: 'Profile Image Style', + type: 'select', + options: ['inline', 'outdent'], + defaultValue: 'inline', + }, + }, }; export const ProfilePage = ({ @@ -52,6 +72,9 @@ export const ProfilePage = ({ footerBorderThickness = localStorage.getItem( 'yds-cl-twig-footer-border-thickness', ), + profileImageOrientation, + profileImageAlignment, + profileImageStyle, }) => profilePageTwig({ site_name: siteName, @@ -72,7 +95,14 @@ export const ProfilePage = ({ utility_nav__link__url: '#', utility_nav__search: utilityNavSearch, breadcrumbs__items: breadcrumbData.items, + profile_meta__image_orientation: profileImageOrientation, + profile_meta__image_style: profileImageStyle, + profile_meta__image_alignment: profileImageAlignment, ...imageData.responsive_images['3x2'], + image__srcset__1: imageData.responsive_images['2x3'].image__srcset, + image__sizes__1: imageData.responsive_images['2x3'].image__sizes, + image__alt__1: imageData.responsive_images['2x3'].image__alt, + image__src__1: imageData.responsive_images['2x3'].image__src, ...textWithImageData, ...referenceCardData, ...socialLinksData, From 23c0461bebf690f639640281047a5c448ffa71d3 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Mon, 10 Jun 2024 21:40:36 -0500 Subject: [PATCH 4/9] feat(YSP-490, 501, 502, 503, 514): Add Tiles, Facts and Figures, Quote Callout, and Link Grid Blocks (#363) * feat(YSP-490): update infographic name to facts and figures * feat(YSP-490): update tiles and tile-item - add center and number to heading * feat(YSP-490): rename standalone-quote quote-callout * feat(YSP-490): update tile styles and facts and figures story * feat(YSP-490): update quote callout wiring * feat(YSP-490): wire facts and figures * feat(YSP-490): wire link grid * feat(YSP-490): add new full-width components to our spacing rules * feat(YSP-490): update label text: grid count to column count * feat(YSP-490): update quote callout image width - increase it a bit * feat(YSP-490): make quote mark 5rem * feat(YSP-490): add link grid heading * feat(YSP-490-tiles): remove aspect-ratio from tile-items --------- Co-authored-by: Jim Vomero --- .../color-component-theme-pairings.twig | 2 +- .../colors/color-global-theme-pairings.twig | 2 +- .../content-spotlights.js | 3 +- .../_yds-facts-and-figures.scss} | 62 ++++---- .../facts-and-figures.stories.js | 102 +++++++++++++ .../facts-and-figures/facts-and-figures.yml | 2 + .../yds-facts-and-figures.twig | 50 +++++++ .../infographic/infographic.stories.js | 100 ------------- .../02-molecules/infographic/infographic.yml | 2 - .../infographic/yds-infographic.twig | 50 ------- .../link-grid/_yds-link-grid.scss | 10 +- .../02-molecules/link-grid/link-grid.yml | 1 + .../02-molecules/link-grid/yds-link-grid.twig | 39 +++-- components/02-molecules/molecules.scss | 4 +- .../_yds-quote-callout.scss} | 141 ++++++++++-------- .../quote-callout/quote-callout.stories.js | 101 +++++++++++++ .../quote-callout/quote-callout.yml | 2 + .../quote-callout/yds-quote-callout.twig | 53 +++++++ .../standalone-quote.stories.js | 105 ------------- .../standalone-quote/standalone-quote.yml | 2 - .../yds-standalone-quote.twig | 53 ------- .../tile-item/_yds-tile-item.scss | 35 +++-- .../tile-item/tile-item.stories.js | 26 ++-- .../02-molecules/tile-item/tile-item.yml | 2 +- .../02-molecules/tile-item/yds-tile-item.js | 36 ----- .../02-molecules/tile-item/yds-tile-item.twig | 8 +- .../_yds-facts-and-figures-group.scss} | 115 ++++++++++---- .../facts-and-figures-group.stories.js} | 61 ++++---- .../facts-and-figures-group.yml | 17 +++ .../yds-facts-and-figures-group.twig | 87 +++++++++++ .../infographic-group/infographic-group.yml | 17 --- .../yds-infographic-group.twig | 86 ----------- components/03-organisms/organisms.scss | 2 +- components/03-organisms/tiles/_yds-tiles.scss | 24 ++- .../03-organisms/tiles/tiles.stories.js | 14 +- components/03-organisms/tiles/tiles.yml | 12 +- components/03-organisms/tiles/yds-tiles.twig | 6 +- .../standard-page-with-banner-left-align.twig | 2 +- .../standard-page-with-banner.twig | 2 +- 39 files changed, 762 insertions(+), 676 deletions(-) rename components/02-molecules/{infographic/_yds-infographic.scss => facts-and-figures/_yds-facts-and-figures.scss} (67%) create mode 100644 components/02-molecules/facts-and-figures/facts-and-figures.stories.js create mode 100644 components/02-molecules/facts-and-figures/facts-and-figures.yml create mode 100644 components/02-molecules/facts-and-figures/yds-facts-and-figures.twig delete mode 100644 components/02-molecules/infographic/infographic.stories.js delete mode 100644 components/02-molecules/infographic/infographic.yml delete mode 100644 components/02-molecules/infographic/yds-infographic.twig rename components/02-molecules/{standalone-quote/_yds-standalone-quote.scss => quote-callout/_yds-quote-callout.scss} (57%) create mode 100644 components/02-molecules/quote-callout/quote-callout.stories.js create mode 100644 components/02-molecules/quote-callout/quote-callout.yml create mode 100644 components/02-molecules/quote-callout/yds-quote-callout.twig delete mode 100644 components/02-molecules/standalone-quote/standalone-quote.stories.js delete mode 100644 components/02-molecules/standalone-quote/standalone-quote.yml delete mode 100644 components/02-molecules/standalone-quote/yds-standalone-quote.twig delete mode 100644 components/02-molecules/tile-item/yds-tile-item.js rename components/03-organisms/{infographic-group/_yds-infographic-group.scss => facts-and-figures-group/_yds-facts-and-figures-group.scss} (54%) rename components/03-organisms/{infographic-group/infographic-group.stories.js => facts-and-figures-group/facts-and-figures-group.stories.js} (56%) create mode 100644 components/03-organisms/facts-and-figures-group/facts-and-figures-group.yml create mode 100644 components/03-organisms/facts-and-figures-group/yds-facts-and-figures-group.twig delete mode 100644 components/03-organisms/infographic-group/infographic-group.yml delete mode 100644 components/03-organisms/infographic-group/yds-infographic-group.twig diff --git a/components/00-tokens/colors/color-component-theme-pairings.twig b/components/00-tokens/colors/color-component-theme-pairings.twig index 3512fd0aa..cf74d848a 100644 --- a/components/00-tokens/colors/color-component-theme-pairings.twig +++ b/components/00-tokens/colors/color-component-theme-pairings.twig @@ -117,7 +117,7 @@
- {% include "@molecules/standalone-quote/yds-standalone-quote.twig" with { + {% include "@molecules/quote-callout/yds-quote-callout.twig" with { standalone_quote__width: 'site', standalone_quote__alignment: 'left', standalone_quote__quote_alignment: 'left', diff --git a/components/00-tokens/colors/color-global-theme-pairings.twig b/components/00-tokens/colors/color-global-theme-pairings.twig index 0ecdfc997..4ed9df5ab 100644 --- a/components/00-tokens/colors/color-global-theme-pairings.twig +++ b/components/00-tokens/colors/color-global-theme-pairings.twig @@ -117,7 +117,7 @@
- {% include "@molecules/standalone-quote/yds-standalone-quote.twig" with { + {% include "@molecules/quote-callout/yds-quote-callout.twig" with { standalone_quote__width: 'site', standalone_quote__alignment: 'left', standalone_quote__quote_alignment: 'left', diff --git a/components/02-molecules/content-spotlight-portrait/content-spotlights.js b/components/02-molecules/content-spotlight-portrait/content-spotlights.js index ffc72b00b..832b2221c 100644 --- a/components/02-molecules/content-spotlight-portrait/content-spotlights.js +++ b/components/02-molecules/content-spotlight-portrait/content-spotlights.js @@ -1,7 +1,8 @@ Drupal.behaviors.contentSpotlights = { attach(context) { // Define the selectors to check and store them in a variable - const selectorsToCheck = '.text-with-image, .content-spotlight-portrait'; + const selectorsToCheck = + '.text-with-image, .content-spotlight-portrait, .quote-callout, .facts-and-figures__group, .tiles'; // Select all elements with class "text-with-image" or "content-spotlight-portrait" const contentSpotlights = context.querySelectorAll(selectorsToCheck); diff --git a/components/02-molecules/infographic/_yds-infographic.scss b/components/02-molecules/facts-and-figures/_yds-facts-and-figures.scss similarity index 67% rename from components/02-molecules/infographic/_yds-infographic.scss rename to components/02-molecules/facts-and-figures/_yds-facts-and-figures.scss index 4fbc70c6c..237c8665c 100644 --- a/components/02-molecules/infographic/_yds-infographic.scss +++ b/components/02-molecules/facts-and-figures/_yds-facts-and-figures.scss @@ -1,10 +1,13 @@ @use '../../00-tokens/tokens'; @use '../../00-tokens/functions/map'; -$global-infographic-themes: map.deep-get(tokens.$tokens, 'global-themes'); -$infographic-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); +$global-facts-and-figures-themes: map.deep-get(tokens.$tokens, 'global-themes'); +$facts-and-figures-component-themes: map.deep-get( + tokens.$tokens, + 'component-themes' +); -.infographic { +.facts-and-figures { display: flex; flex-flow: column nowrap; align-items: center; @@ -14,7 +17,7 @@ $infographic-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); // Component themes defaults: iterate over each component theme to establish // default variables. - @each $theme, $value in $infographic-component-themes { + @each $theme, $value in $facts-and-figures-component-themes { &[data-component-theme='#{$theme}'] { // prettier-ignore --color-slot-one: var(--component-themes-#{$theme}-slot-one); @@ -25,11 +28,11 @@ $infographic-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); --color-slot-six: var(--component-themes-#{$theme}-slot-six); --color-slot-seven: var(--component-themes-#{$theme}-slot-seven); --color-slot-eight: var(--component-themes-#{$theme}-slot-eight); - --color-infographic-theme: var(--color-slot-one); - --color-infographic-content: var(--color-slot-eight); + --color-facts-and-figures-theme: var(--color-slot-one); + --color-facts-and-figures-content: var(--color-slot-eight); - background-color: var(--color-infographic-theme); - color: var(--color-infographic-content); + background-color: var(--color-facts-and-figures-theme); + color: var(--color-facts-and-figures-content); } } @@ -37,7 +40,7 @@ $infographic-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); // This establishes `--color-slot-` variables name-spaced to the selector // in which it is used. We can map component-level variables to global-level // `--color-slot-` variables. - @each $globalTheme, $value in $global-infographic-themes { + @each $globalTheme, $value in $global-facts-and-figures-themes { [data-global-theme='#{$globalTheme}'] & { --color-slot-one: var(--global-themes-#{$globalTheme}-colors-slot-one); --color-slot-two: var(--global-themes-#{$globalTheme}-colors-slot-two); @@ -59,75 +62,74 @@ $infographic-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); // Component theme overrides: set specific component themes overrides /// define component name spaced variables and map them to global theme slots. &[data-component-theme='one'] { - --color-infographic-theme: var(--color-slot-one); - --color-infographic-content: var(--color-slot-eight); + --color-facts-and-figures-theme: var(--color-slot-one); + --color-facts-and-figures-content: var(--color-slot-eight); } &[data-component-theme='two'] { - --color-infographic-theme: var(--color-slot-two); - --color-infographic-content: var(--color-slot-eight); + --color-facts-and-figures-theme: var(--color-slot-two); + --color-facts-and-figures-content: var(--color-slot-eight); } &[data-component-theme='three'] { - --color-infographic-theme: var(--color-slot-three); - --color-infographic-content: var(--color-slot-seven); + --color-facts-and-figures-theme: var(--color-slot-three); + --color-facts-and-figures-content: var(--color-slot-seven); } &__inner { display: flex; flex-flow: column nowrap; - align-items: center; + align-items: flex-start; + justify-content: flex-start; padding: var(--size-spacing-8) 0; height: 100%; [data-component-alignment='left'] & { - justify-content: flex-start; text-align: left; } [data-component-alignment='center'] & { - justify-content: center; text-align: center; } - // if we're using a single infographic, add padding to the infographic item inner - [data-infographic-collection-type='single'] & { + // if we're using a single facts-and-figures, add padding to the facts-and-figures item inner + [data-facts-and-figures-collection-type='single'] & { padding: var(--size-spacing-8); } } } -.infographic__stat { +.facts-and-figures__stat { @include tokens.h3-yale-new; width: 100%; position: relative; // change font-variant-numeric to normal from the default of oldstyle-nums in the h3-yale-new mixin - [data-infographic-font-style='normal'] & { + [data-facts-and-figures-font-style='normal'] & { font-variant-numeric: normal; } - // add eyebrow above infographic - [data-infographic-style='basic'] & { + // add eyebrow above facts-and-figures + [data-facts-and-figures-style='basic'] & { &::before { content: ''; display: block; position: relative; width: var(--eyebrow-width); border-bottom: var(--size-spacing-1) solid - var(--color-infographic-content); + var(--color-facts-and-figures-content); margin-bottom: var(--size-spacing-4); } } - // set eyebrow width var to 100% if infographic is centered + // set eyebrow width var to 100% if facts-and-figures is centered [data-component-alignment='center'] & { --eyebrow-width: 100%; } } -.infographic__icon { +.facts-and-figures__icon { align-self: flex-start; margin-bottom: var(--size-spacing-2); @@ -137,13 +139,13 @@ $infographic-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); } // svg -.infographic__infographic-icon { +.facts-and-figures__facts-and-figures-icon { max-width: var(--size-spacing-9); // max-width 48px max-height: var(--size-spacing-9); // max-height 48px - fill: var(--color-infographic-content); + fill: var(--color-facts-and-figures-content); } -.infographic__content { +.facts-and-figures__content { @include tokens.body-default; width: 100%; diff --git a/components/02-molecules/facts-and-figures/facts-and-figures.stories.js b/components/02-molecules/facts-and-figures/facts-and-figures.stories.js new file mode 100644 index 000000000..1dde6a909 --- /dev/null +++ b/components/02-molecules/facts-and-figures/facts-and-figures.stories.js @@ -0,0 +1,102 @@ +import factsAndFiguresTwig from './yds-facts-and-figures.twig'; + +import factsAndFiguresData from './facts-and-figures.yml'; + +/** + * Storybook Definition. + */ +export default { + title: 'Molecules/Facts and Figures', + argTypes: { + factsAndFigures: { + name: 'Fact or Figure', + type: 'string', + defaultValue: factsAndFiguresData.facts_and_figures__stat, + }, + content: { + name: 'Content', + type: 'string', + defaultValue: factsAndFiguresData.facts_and_figures__content, + }, + presentationStyle: { + name: 'Presentation Style', + options: ['basic', 'icon-only'], + type: 'select', + defaultValue: 'basic', + }, + fontStyle: { + name: 'Font Style', + options: ['normal', 'numeric-oldstyle'], + type: 'select', + defaultValue: 'normal', + }, + alignment: { + name: 'Alignment', + options: ['left', 'center'], + type: 'select', + defaultValue: 'left', + }, + themeColor: { + name: 'Component Theme (dial)', + options: ['one', 'two', 'three'], + type: 'select', + defaultValue: 'one', + }, + factsAndFiguresIcon: { + name: 'factsAndFigures Icon', + type: 'boolean', + defaultValue: false, + }, + }, +}; + +export const FactsAndFigures = ({ + factsAndFigures, + content, + presentationStyle, + fontStyle, + alignment, + themeColor, + factsAndFiguresIcon, +}) => ` + +
    + ${factsAndFiguresTwig({ + facts_and_figures__stat: factsAndFiguresData.facts_and_figures__stat, + facts_and_figures__content: + factsAndFiguresData.facts_and_figures__content, + facts_and_figures__presentation_style: 'basic', + facts_and_figures__has_icon: 'false', + facts_and_figures__alignment: 'center', + })} + ${factsAndFiguresTwig({ + facts_and_figures__stat: factsAndFiguresData.facts_and_figures__stat, + facts_and_figures__presentation_style: 'basic', + facts_and_figures__has_icon: 'true', + facts_and_figures__alignment: 'left', + })} + ${factsAndFiguresTwig({ + facts_and_figures__stat: factsAndFiguresData.facts_and_figures__stat, + facts_and_figures__content: + factsAndFiguresData.facts_and_figures__content, + facts_and_figures__presentation_style: 'basic', + facts_and_figures__alignment: 'center', + facts_and_figures__has_icon: 'true', + })} +
+
+

Playground

+

Use the StoryBook controls to see the facts and figures below implement the available variations.

+
    + ${factsAndFiguresTwig({ + facts_and_figures__stat: factsAndFigures, + facts_and_figures__content: content, + facts_and_figures__presentation_style: presentationStyle, + facts_and_figures__font_style: fontStyle, + facts_and_figures__alignment: alignment, + facts_and_figures__theme: themeColor, + facts_and_figures__has_icon: factsAndFiguresIcon ? 'true' : 'false', + })} +
+
+`; diff --git a/components/02-molecules/facts-and-figures/facts-and-figures.yml b/components/02-molecules/facts-and-figures/facts-and-figures.yml new file mode 100644 index 000000000..31246a152 --- /dev/null +++ b/components/02-molecules/facts-and-figures/facts-and-figures.yml @@ -0,0 +1,2 @@ +facts_and_figures__stat: $52,000 +facts_and_figures__content: Annual grant of Undergraduate students diff --git a/components/02-molecules/facts-and-figures/yds-facts-and-figures.twig b/components/02-molecules/facts-and-figures/yds-facts-and-figures.twig new file mode 100644 index 000000000..f7cfabbac --- /dev/null +++ b/components/02-molecules/facts-and-figures/yds-facts-and-figures.twig @@ -0,0 +1,50 @@ +{# + # Available Props: + # - facts_and_figures__presentation_style: basic, with-icon, icon-only + # - facts_and_figures__font_style: numeric-oldstyle, normal + # - facts_and_figures__has_icon: true, false + # - facts_and_figures__icon_name: string + # - facts_and_figures__alignment: left, center + # + # Available Variables: + # - facts_and_figures__facts_and_figures (required) + # - facts_and_figures__content + #} + +{% set facts_and_figures__base_class = 'facts-and-figures' %} +{% set facts_and_figures__presentation_style = facts_and_figures__presentation_style|default('basic') %} +{% set facts_and_figures__font_style = facts_and_figures__font_style|default('numeric-oldstyle') %} + +{# If facts_and_figures__attributes is not defined, set it to an empty object by default #} +{% set facts_and_figures__attributes = facts_and_figures__attributes|default({}) %} + +{% set facts_and_figures__attributes = facts_and_figures__attributes|merge({ + 'data-facts-and-figures-style': facts_and_figures__presentation_style, + 'data-facts-and-figures-font-style': facts_and_figures__font_style, + 'data-facts-and-figures-has-icon': facts_and_figures__has_icon == 'true' ? 'true' : 'false', + 'data-component-alignment': facts_and_figures__alignment|default('center'), + 'data-component-theme': facts_and_figures__theme|default('one'), + class: bem(facts_and_figures__base_class, facts_and_figures__modifiers), +}) %} + +
  • +
    + {% if facts_and_figures__has_icon == 'true' %} + {% block facts_and_figures__icon %} +
    + {% include "@atoms/images/icons/_yds-icon.twig" with { + icon__name: facts_and_figures__icon_name|default('sack-dollar-solid'), + icon__base_class: 'facts-and-figures-icon', + icon__blockname: facts_and_figures__base_class, + } %} +
    + {% endblock %} + {% endif %} +
    + {{ facts_and_figures__stat }} +
    +
    + {{ facts_and_figures__content }} +
    +
    +
    • diff --git a/components/02-molecules/infographic/infographic.stories.js b/components/02-molecules/infographic/infographic.stories.js deleted file mode 100644 index 173ddc131..000000000 --- a/components/02-molecules/infographic/infographic.stories.js +++ /dev/null @@ -1,100 +0,0 @@ -import infographicTwig from './yds-infographic.twig'; - -import infographicData from './infographic.yml'; - -/** - * Storybook Definition. - */ -export default { - title: 'Molecules/Infographic', - argTypes: { - infographic: { - name: 'infographic', - type: 'string', - defaultValue: infographicData.infographic__stat, - }, - content: { - name: 'Content', - type: 'string', - defaultValue: infographicData.infographic__content, - }, - presentationStyle: { - name: 'Presentation Style', - options: ['basic', 'icon-only'], - type: 'select', - defaultValue: 'basic', - }, - fontStyle: { - name: 'Font Style', - options: ['normal', 'numeric-oldstyle'], - type: 'select', - defaultValue: 'normal', - }, - alignment: { - name: 'Alignment', - options: ['left', 'center'], - type: 'select', - defaultValue: 'left', - }, - themeColor: { - name: 'Component Theme (dial)', - options: ['one', 'two', 'three'], - type: 'select', - defaultValue: 'one', - }, - infographicIcon: { - name: 'infographic Icon', - type: 'boolean', - defaultValue: false, - }, - }, -}; - -export const Infographic = ({ - infographic, - content, - presentationStyle, - fontStyle, - alignment, - themeColor, - infographicIcon, -}) => ` - -
      - ${infographicTwig({ - infographic__stat: infographicData.infographic__stat, - infographic__content: infographicData.infographic__content, - infographic__presentation_style: 'basic', - infographic__has_icon: 'false', - infographic__alignment: 'center', - })} - ${infographicTwig({ - infographic__stat: infographicData.infographic__stat, - infographic__presentation_style: 'basic', - infographic__has_icon: 'true', - infographic__alignment: 'left', - })} - ${infographicTwig({ - infographic__stat: infographicData.infographic__stat, - infographic__content: infographicData.infographic__content, - infographic__presentation_style: 'basic', - infographic__alignment: 'center', - infographic__has_icon: 'true', - })} -
    -
    -

    Playground

    -

    Use the StoryBook controls to see the infographic below implement the available variations.

    -
      - ${infographicTwig({ - infographic__stat: infographic, - infographic__content: content, - infographic__presentation_style: presentationStyle, - infographic__font_style: fontStyle, - infographic__alignment: alignment, - infographic__theme: themeColor, - infographic__has_icon: infographicIcon ? 'true' : 'false', - })} -
    -
    -`; diff --git a/components/02-molecules/infographic/infographic.yml b/components/02-molecules/infographic/infographic.yml deleted file mode 100644 index 7493d0d75..000000000 --- a/components/02-molecules/infographic/infographic.yml +++ /dev/null @@ -1,2 +0,0 @@ -infographic__stat: $52,000 -infographic__content: Annual grant of Undergraduate students diff --git a/components/02-molecules/infographic/yds-infographic.twig b/components/02-molecules/infographic/yds-infographic.twig deleted file mode 100644 index 6f9563745..000000000 --- a/components/02-molecules/infographic/yds-infographic.twig +++ /dev/null @@ -1,50 +0,0 @@ -{# - # Available Props: - # - infographic__presentation_style: basic, with-icon, icon-only - # - infographic__font_style: numeric-oldstyle, normal - # - infographic__has_icon: true, false - # - infographic__icon_name: string - # - infographic__alignment: left, center - # - # Available Variables: - # - infographic__infographic (required) - # - infographic__content - #} - -{% set infographic__base_class = 'infographic' %} -{% set infographic__presentation_style = infographic__presentation_style|default('basic') %} -{% set infographic__font_style = infographic__font_style|default('numeric-oldstyle') %} - -{# If infographic__attributes is not defined, set it to an empty object by default #} -{% set infographic__attributes = infographic__attributes|default({}) %} - -{% set infographic__attributes = infographic__attributes|merge({ - 'data-infographic-style': infographic__presentation_style, - 'data-infographic-font-style': infographic__font_style, - 'data-infographic-has-icon': infographic__has_icon == 'true' ? 'true' : 'false', - 'data-component-alignment': infographic__alignment|default('center'), - 'data-component-theme': infographic__theme|default('one'), - class: bem(infographic__base_class, infographic__modifiers), -}) %} - -
  • -
    - {% if infographic__has_icon == 'true' %} - {% block infographic__icon %} -
    - {% include "@atoms/images/icons/_yds-icon.twig" with { - icon__name: infographic__icon_name|default('sack-dollar-solid'), - icon__base_class: 'infographic-icon', - icon__blockname: infographic__base_class, - } %} -
    - {% endblock %} - {% endif %} -
    - {{ infographic__stat }} -
    -
    - {{ infographic__content }} -
    -
    -
    • diff --git a/components/02-molecules/link-grid/_yds-link-grid.scss b/components/02-molecules/link-grid/_yds-link-grid.scss index 4f250cfa6..d6c5f31bb 100644 --- a/components/02-molecules/link-grid/_yds-link-grid.scss +++ b/components/02-molecules/link-grid/_yds-link-grid.scss @@ -34,6 +34,7 @@ $component-link-grid-themes: map.deep-get(tokens.$tokens, 'component-themes'); &[data-component-theme='#{$theme}'] { --color-action: var(--color-link-grid-action); --color-link-grid-border: var(--color-link-grid-action); + --color-heading: var(--color-gray-800); } } @@ -52,6 +53,13 @@ $component-link-grid-themes: map.deep-get(tokens.$tokens, 'component-themes'); } } +.link-grid__heading { + @include tokens.h2-yale-new; + + flex: 1 0 100%; + margin-bottom: var(--size-spacing-6); +} + .link-grid__inner { --color-link-grid-border: var(--color-link-grid-action); @@ -85,7 +93,7 @@ $component-link-grid-themes: map.deep-get(tokens.$tokens, 'component-themes'); } // first column gets wider border - &--one { + &:first-of-type { border-width: var(--size-thickness-4); } } diff --git a/components/02-molecules/link-grid/link-grid.yml b/components/02-molecules/link-grid/link-grid.yml index 9bf6d233f..7fb93385a 100644 --- a/components/02-molecules/link-grid/link-grid.yml +++ b/components/02-molecules/link-grid/link-grid.yml @@ -1,3 +1,4 @@ +link_grid__heading: 'This is a link grid' link_grid__links_one: - link_grid__link__url: '#' link_grid__link__content: 'This is a link' diff --git a/components/02-molecules/link-grid/yds-link-grid.twig b/components/02-molecules/link-grid/yds-link-grid.twig index ad173b696..05dff72de 100644 --- a/components/02-molecules/link-grid/yds-link-grid.twig +++ b/components/02-molecules/link-grid/yds-link-grid.twig @@ -22,32 +22,47 @@
    + {% if link_grid__heading is not empty %} + {% include "@atoms/typography/headings/yds-heading.twig" with { + heading__level: '2', + heading__blockname: link_grid__base_class, + heading: link_grid__heading, + } %} + {% endif %} {% if link_grid__links_one %}
      - {% for link in link_grid__links_one %} - {% include "@molecules/link-grid/_yds-link-grid--links.twig" %} - {% endfor %} + {% block link_grid__links_one %} + {% for link in link_grid__links_one %} + {% include "@molecules/link-grid/_yds-link-grid--links.twig" %} + {% endfor %} + {% endblock %}
    {% endif %} {% if link_grid__links_two %}
      - {% for link in link_grid__links_two %} - {% include "@molecules/link-grid/_yds-link-grid--links.twig" %} - {% endfor %} + {% block link_grid__links_two %} + {% for link in link_grid__links_two %} + {% include "@molecules/link-grid/_yds-link-grid--links.twig" %} + {% endfor %} + {% endblock %}
    {% endif %} {% if link_grid__links_three %}
      - {% for link in link_grid__links_three %} - {% include "@molecules/link-grid/_yds-link-grid--links.twig" %} - {% endfor %} + {% block link_grid__links_three %} + {% for link in link_grid__links_three %} + {% include "@molecules/link-grid/_yds-link-grid--links.twig" %} + {% endfor %} + {% endblock %}
    {% endif %} {% if link_grid__links_four %}
      - {% for link in link_grid__links_four %} - {% include "@molecules/link-grid/_yds-link-grid--links.twig" %} - {% endfor %} + {% block link_grid__links_four %} + {% for link in link_grid__links_four %} + {% include "@molecules/link-grid/_yds-link-grid--links.twig" %} + {% endfor %} + {% endblock %}
    {% endif %}
    diff --git a/components/02-molecules/molecules.scss b/components/02-molecules/molecules.scss index 418199b0d..abace6867 100644 --- a/components/02-molecules/molecules.scss +++ b/components/02-molecules/molecules.scss @@ -27,7 +27,7 @@ @forward './text-with-image/yds-text-with-image'; @forward './video/yds-video'; @forward './banner/grand-hero/yds-grand-hero'; -@forward './standalone-quote/yds-standalone-quote'; +@forward './quote-callout/yds-quote-callout'; @forward './content-spotlight-portrait/yds-content-spotlight-portrait'; -@forward './infographic/yds-infographic'; +@forward './facts-and-figures/yds-facts-and-figures'; @forward './tile-item/yds-tile-item'; diff --git a/components/02-molecules/standalone-quote/_yds-standalone-quote.scss b/components/02-molecules/quote-callout/_yds-quote-callout.scss similarity index 57% rename from components/02-molecules/standalone-quote/_yds-standalone-quote.scss rename to components/02-molecules/quote-callout/_yds-quote-callout.scss index c3d80942c..e5b4d6cd1 100644 --- a/components/02-molecules/standalone-quote/_yds-standalone-quote.scss +++ b/components/02-molecules/quote-callout/_yds-quote-callout.scss @@ -1,8 +1,8 @@ @use '../../00-tokens/tokens'; @use '../../00-tokens/functions/map'; -$global-standalone-quote-themes: map.deep-get(tokens.$tokens, 'global-themes'); -$standalone-quote-component-themes: map.deep-get( +$global-quote-callout-themes: map.deep-get(tokens.$tokens, 'global-themes'); +$quote-callout-component-themes: map.deep-get( tokens.$tokens, 'component-themes' ); @@ -11,14 +11,26 @@ blockquote { margin: 0; } -.standalone-quote { - --color-standalone-quote-quote: var(--color-gray-800); - --color-standalone-quote-attribution: var(--color-basic-brown-gray); +.quote-callout { + --color-quote-callout-quote: var(--color-gray-800); + --color-quote-callout-attribution: var(--color-basic-brown-gray); - @include tokens.spacing-page-section; + padding-block-start: var(--size-spacing-10); + padding-block-end: var(--size-spacing-10); - padding-top: var(--size-spacing-11); - padding-bottom: var(--size-spacing-11); + // Or if the spotlight is the only spotlight on the page + &[data-spotlights-position='first-and-last'] { + @include tokens.spacing-page-section; + } + + // We're using JavaScript to evaluate the last and first spotlights in a group of spotlights + &[data-spotlights-position='first'] { + margin-top: var(--size-spacing-10); + } + + &[data-spotlights-position='last'] { + margin-bottom: var(--size-spacing-10); + } // if animation is active [data-site-animation='artistic'] & { @@ -33,7 +45,7 @@ blockquote { // Component themes defaults: iterate over each component theme to establish // default variables. - @each $theme, $value in $standalone-quote-component-themes { + @each $theme, $value in $quote-callout-component-themes { &[data-component-theme='#{$theme}'] { // prettier-ignore --color-slot-one: var(--component-themes-#{$theme}-slot-one); @@ -44,12 +56,10 @@ blockquote { --color-slot-six: var(--component-themes-#{$theme}-slot-six); --color-slot-seven: var(--component-themes-#{$theme}-slot-seven); --color-slot-eight: var(--component-themes-#{$theme}-slot-eight); - --color-standalone-quote-accent: var(--color-standalone-quote-accent); - --color-standalone-quote-background: var( - --color-standalone-quote-background - ); + --color-quote-callout-accent: var(--color-quote-callout-accent); + --color-quote-callout-background: var(--color-quote-callout-background); - background-color: var(--color-standalone-quote-background); + background-color: var(--color-quote-callout-background); } } @@ -57,7 +67,7 @@ blockquote { // This establishes `--color-slot-` variables name-spaced to the selector // in which it is used. We can map component-level variables to global-level // `--color-slot-` variables. - @each $globalTheme, $value in $global-standalone-quote-themes { + @each $globalTheme, $value in $global-quote-callout-themes { [data-global-theme='#{$globalTheme}'] & { --color-slot-one: var(--global-themes-#{$globalTheme}-colors-slot-one); --color-slot-two: var(--global-themes-#{$globalTheme}-colors-slot-two); @@ -79,40 +89,40 @@ blockquote { // Component theme overrides: set specific component themes overrides /// define component name spaced variables and map them to global theme slots. &[data-component-theme='one'] { - --color-standalone-quote-background: var(--color-slot-one); - --color-standalone-quote-accent: var(--color-slot-eight); - --color-standalone-quote-quote: var(--color-slot-eight); - --color-standalone-quote-attribution: var(--color-slot-eight); + --color-quote-callout-background: var(--color-slot-one); + --color-quote-callout-accent: var(--color-slot-eight); + --color-quote-callout-quote: var(--color-slot-eight); + --color-quote-callout-attribution: var(--color-slot-eight); } &[data-component-theme='two'] { - --color-standalone-quote-background: var(--color-slot-three); - --color-standalone-quote-accent: var(--color-slot-seven); - --color-standalone-quote-quote: var(--color-slot-seven); - --color-standalone-quote-attribution: var(--color-slot-seven); + --color-quote-callout-background: var(--color-slot-three); + --color-quote-callout-accent: var(--color-slot-seven); + --color-quote-callout-quote: var(--color-slot-seven); + --color-quote-callout-attribution: var(--color-slot-seven); } &[data-component-theme='three'] { - --color-standalone-quote-background: var(--color-slot-five); - --color-standalone-quote-accent: var(--color-slot-eight); - --color-standalone-quote-quote: var(--color-slot-eight); - --color-standalone-quote-attribution: var(--color-slot-eight); + --color-quote-callout-background: var(--color-slot-five); + --color-quote-callout-accent: var(--color-slot-eight); + --color-quote-callout-quote: var(--color-slot-eight); + --color-quote-callout-attribution: var(--color-slot-eight); } } -.standalone-quote__figure { - --standalone-quote-border-height: 100%; +.quote-callout__figure { + --quote-callout-border-height: 100%; @media (min-width: tokens.$break-mobile) { max-width: calc(var(--size-component-layout-width-content) - 11rem); } // with image - [data-standalone-quote-style='image'] & { - flex: 1 0 calc(75% - var(--size-spacing-8)); + [data-quote-callout-style='image'] & { + flex: 1 0 calc(70% - var(--size-spacing-8)); } - [data-standalone-quote-style='bar'][data-standalone-quote-quote-alignment='left'] + [data-quote-callout-style='bar'][data-quote-callout-quote-alignment='left'] & { position: relative; padding-left: var(--size-spacing-6); @@ -126,13 +136,13 @@ blockquote { position: absolute; left: calc(var(--border-thickness-4) * -1); bottom: 0; - height: var(--standalone-quote-border-height); + height: var(--quote-callout-border-height); width: var(--border-thickness-4); - background-color: var(--color-standalone-quote-accent); + background-color: var(--color-quote-callout-accent); } } - [data-standalone-quote-style='bar'][data-standalone-quote-quote-alignment='right'] + [data-quote-callout-style='bar'][data-quote-callout-quote-alignment='right'] & { position: relative; padding-right: var(--size-spacing-6); @@ -147,13 +157,13 @@ blockquote { position: absolute; right: calc(var(--border-thickness-4) * -1); bottom: 0; - height: var(--standalone-quote-border-height); + height: var(--quote-callout-border-height); width: var(--border-thickness-4); - background-color: var(--color-standalone-quote-accent); + background-color: var(--color-quote-callout-accent); } } - [data-standalone-quote-style='quote'][data-standalone-quote-quote-alignment='left'] + [data-quote-callout-style='quote'][data-quote-callout-quote-alignment='left'] & { position: relative; padding-left: var(--size-spacing-8); @@ -164,9 +174,9 @@ blockquote { position: absolute; top: 0; left: 0; - font-size: 4em; - line-height: 0.8; - color: var(--color-standalone-quote-accent); + font-size: var(--size-spacing-11); + line-height: 1; + color: var(--color-quote-callout-accent); } @media (min-width: tokens.$break-mobile) { @@ -174,7 +184,7 @@ blockquote { } } - [data-standalone-quote-style='quote'][data-standalone-quote-quote-alignment='right'] + [data-quote-callout-style='quote'][data-quote-callout-quote-alignment='right'] & { position: relative; padding-left: var(--size-spacing-8); @@ -190,24 +200,24 @@ blockquote { position: absolute; top: 0; left: 0; - font-size: 4em; - line-height: 0.8; - color: var(--color-standalone-quote-accent); + font-size: var(--size-spacing-11); + line-height: 1; + color: var(--color-quote-callout-accent); } } // if animation is active, animate bar variation // prettier-ignore - [data-site-animation='artistic'] [data-standalone-quote-style='bar'][data-standalone-quote-quote-alignment='left'][data-animate-item='true'] &, - [data-site-animation='artistic'] [data-standalone-quote-style='bar'][data-standalone-quote-quote-alignment='right'][data-animate-item='true'] & { + [data-site-animation='artistic'] [data-quote-callout-style='bar'][data-quote-callout-quote-alignment='left'][data-animate-item='true'] &, + [data-site-animation='artistic'] [data-quote-callout-style='bar'][data-quote-callout-quote-alignment='right'][data-animate-item='true'] & { @include tokens.animate($duration: var(--animation-speed-default)); - --standalone-quote-border-height: 0; + --quote-callout-border-height: 0; &::before { --animation-speed-mid-slow: 400ms; - height: var(--standalone-quote-border-height); + height: var(--quote-callout-border-height); @include tokens.animate( $property: height, @@ -219,18 +229,18 @@ blockquote { // when the animate class is added, animate the quote bar height. // prettier-ignore - [data-site-animation='artistic'] [data-standalone-quote-style='bar'][data-animate-item='true'].animate & { - --standalone-quote-border-height: 100%; + [data-site-animation='artistic'] [data-quote-callout-style='bar'][data-animate-item='true'].animate & { + --quote-callout-border-height: 100%; &::before { - @include tokens.expand-height(--standalone-quote-border-height); + @include tokens.expand-height(--quote-callout-border-height); } } } -.standalone-quote__inner { +.quote-callout__inner { // image variaton - [data-standalone-quote-style='image'] & { + [data-quote-callout-style='image'] & { display: flex; flex-flow: column nowrap; gap: var(--size-spacing-8); @@ -240,7 +250,7 @@ blockquote { } } - [data-standalone-quote-style='image'][data-standalone-quote-quote-alignment='right'] + [data-quote-callout-style='image'][data-quote-callout-quote-alignment='right'] & { @media (min-width: tokens.$break-mobile) { flex-direction: row-reverse; @@ -253,9 +263,9 @@ blockquote { } } -.standalone-quote__quote { +.quote-callout__quote { font: var(--font-style-body-xl); - color: var(--color-standalone-quote-quote); + color: var(--color-quote-callout-quote); > *:last-child { margin-top: 0; @@ -263,19 +273,24 @@ blockquote { } } -.standalone-quote__attribution { +.quote-callout__attribution { font: var(--font-style-body-default); - color: var(--color-standalone-quote-attribution); - margin-top: 0.4em; + color: var(--color-quote-callout-attribution); + margin-top: var(--size-spacing-3); + display: inline-flex; + + > p { + margin: 0; + } } -.standalone-quote__image { +.quote-callout__image { width: 100%; - max-width: 25%; + max-width: 60%; align-self: flex-start; @media (min-width: tokens.$break-mobile) { - flex: 1 0 calc(25% - var(--size-spacing-8)); + flex: 1 0 calc(30% - var(--size-spacing-8)); // push the image down a bit to align with the quote text margin-top: var(--size-spacing-4); diff --git a/components/02-molecules/quote-callout/quote-callout.stories.js b/components/02-molecules/quote-callout/quote-callout.stories.js new file mode 100644 index 000000000..546ccc48d --- /dev/null +++ b/components/02-molecules/quote-callout/quote-callout.stories.js @@ -0,0 +1,101 @@ +import quoteCalloutTwig from './yds-quote-callout.twig'; + +import quoteCalloutData from './quote-callout.yml'; + +// Image atom component - generic images for demo +import imageData from '../../01-atoms/images/image/image.yml'; + +/** + * Storybook Definition. + */ +export default { + title: 'Molecules/Quotes/Quote Callout', + argTypes: { + quote: { + name: 'Quote', + type: 'string', + defaultValue: quoteCalloutData.quote_callout__quote, + }, + attribution: { + name: 'Attribution', + type: 'string', + defaultValue: quoteCalloutData.quote_callout__attribution, + }, + style: { + name: 'Style', + options: ['bar', 'quote'], + type: 'select', + defaultValue: 'bar', + }, + quoteAlignment: { + name: 'Quote Alignment', + options: ['left', 'right'], + type: 'select', + defaultValue: 'left', + }, + accentColor: { + name: 'Component Theme (dial)', + options: ['one', 'two', 'three'], + type: 'select', + defaultValue: 'one', + }, + quoteImage: { + name: 'Quote Image', + options: ['with-image', 'no-image'], + type: 'select', + defaultValue: 'no-image', + }, + }, +}; + +export const quoteCallout = ({ + style, + accentColor, + quote, + attribution, + quoteAlignment, + quoteImage, +}) => ` + ${quoteCalloutTwig({ + quote_callout__quote: quoteCalloutData.quote_callout__quote, + quote_callout__attribution: quoteCalloutData.quote_callout__attribution, + })} + ${quoteCalloutTwig({ + quote_callout__quote: quoteCalloutData.quote_callout__quote, + quote_callout__style: 'bar', + quote_callout__quote_alignment: 'right', + })} + ${quoteCalloutTwig({ + quote_callout__quote: quoteCalloutData.quote_callout__quote, + quote_callout__attribution: quoteCalloutData.quote_callout__attribution, + quote_callout__style: 'quote', + quote_callout__quote_alignment: 'left', + })} + ${quoteCalloutTwig({ + quote_callout__quote: quoteCalloutData.quote_callout__quote, + quote_callout__attribution: quoteCalloutData.quote_callout__attribution, + quote_callout__style: 'quote', + quote_callout__quote_alignment: 'right', + })} + ${quoteCalloutTwig({ + quote_callout__quote: quoteCalloutData.quote_callout__quote, + quote_callout__attribution: quoteCalloutData.quote_callout__attribution, + quote_callout__style: 'image', + quote_callout__quote_alignment: 'left', + quote_callout__quote_image: 'with-image', + ...imageData.responsive_images['1x1'], + })} +
    +

    Playground

    +

    Use the StoryBook controls to see the quote below implement the available variations and colors.

    + ${quoteCalloutTwig({ + quote_callout__quote: quote, + quote_callout__attribution: attribution, + quote_callout__style: style, + quote_callout__accent_theme: accentColor, + quote_callout__quote_alignment: quoteAlignment, + quote_callout__quote_image: quoteImage, + ...imageData.responsive_images['1x1'], + })} +
    +`; diff --git a/components/02-molecules/quote-callout/quote-callout.yml b/components/02-molecules/quote-callout/quote-callout.yml new file mode 100644 index 000000000..b7ba61e01 --- /dev/null +++ b/components/02-molecules/quote-callout/quote-callout.yml @@ -0,0 +1,2 @@ +quote_callout__quote:

    Yale changed that thinking. It was evident in every class, every conversation, every project, that a business cannot exist in a vacuum, and that a business with the sole purpose of profit, with total disregard for its surroundings, will eventually fizzle out.

    +quote_callout__attribution: Annie Nymity diff --git a/components/02-molecules/quote-callout/yds-quote-callout.twig b/components/02-molecules/quote-callout/yds-quote-callout.twig new file mode 100644 index 000000000..fbcae2912 --- /dev/null +++ b/components/02-molecules/quote-callout/yds-quote-callout.twig @@ -0,0 +1,53 @@ +{# + # Available Props: + # - quote_callout__style: bar, quote + # - animate__item: defaults to `enabled`, will only animate if site_animate_components (lever / config) is not `default` + # + # Available Variables: + # - quote_callout__quote (required) + # - quote_callout__attribution + #} + +{% set quote_callout__base_class = 'quote-callout' %} +{% set quote_callout__style = quote_callout__style|default('bar') %} + +{# If quote_callout__attributes is not defined, set it to an empty object by default #} +{% set quote_callout__attributes = quote_callout__attributes|default({}) %} + +{# If quote_callout__quote_image is 'with-image' set data-quote-callout-style = 'image' #} +{% if quote_callout__quote_image == 'with-image' %} + {% set quote_callout__style = 'image' %} +{% endif %} + +{% set quote_callout__attributes = quote_callout__attributes|merge({ + 'data-animate-item': animate__item|default('enabled'), +}) %} + +{% set quote_callout__attributes = quote_callout__attributes|merge({ + 'data-component-width': quote_callout__width|default('content'), + 'data-quote-callout-style': quote_callout__style, + 'data-component-theme': quote_callout__accent_theme|default('one'), + 'data-component-alignment': quote_callout__alignment|default('center'), + 'data-quote-callout-quote-alignment': quote_callout__quote_alignment|default('left'), + class: bem(quote_callout__base_class, quote_callout__modifiers), +}) %} + +
    {% block prefix_suffix %}{% endblock %} +
    + {% if quote_callout__quote_image == 'with-image' %} +
    + {% block quote_callout__image %} + {% include "@atoms/images/image/_responsive-image.twig" %} + {% endblock %} +
    + {% endif %} +
    +
    + {{ quote_callout__quote }} +
    + {% if quote_callout__attribution %} +
    —{{ quote_callout__attribution }}
    + {% endif %} +
    +
    +
    diff --git a/components/02-molecules/standalone-quote/standalone-quote.stories.js b/components/02-molecules/standalone-quote/standalone-quote.stories.js deleted file mode 100644 index 90097881b..000000000 --- a/components/02-molecules/standalone-quote/standalone-quote.stories.js +++ /dev/null @@ -1,105 +0,0 @@ -import standaloneQuoteTwig from './yds-standalone-quote.twig'; - -import standaloneQuoteData from './standalone-quote.yml'; - -// Image atom component - generic images for demo -import imageData from '../../01-atoms/images/image/image.yml'; - -/** - * Storybook Definition. - */ -export default { - title: 'Molecules/Quotes/Standalone Quote', - argTypes: { - quote: { - name: 'Quote', - type: 'string', - defaultValue: standaloneQuoteData.standalone_quote__quote, - }, - attribution: { - name: 'Attribution', - type: 'string', - defaultValue: standaloneQuoteData.standalone_quote__attribution, - }, - style: { - name: 'Style', - options: ['bar', 'quote'], - type: 'select', - defaultValue: 'bar', - }, - quoteAlignment: { - name: 'Quote Alignment', - options: ['left', 'right'], - type: 'select', - defaultValue: 'left', - }, - accentColor: { - name: 'Component Theme (dial)', - options: ['one', 'two', 'three'], - type: 'select', - defaultValue: 'one', - }, - quoteImage: { - name: 'Quote Image', - options: ['with-image', 'no-image'], - type: 'select', - defaultValue: 'no-image', - }, - }, -}; - -export const standaloneQuote = ({ - style, - accentColor, - quote, - attribution, - quoteAlignment, - quoteImage, -}) => ` - ${standaloneQuoteTwig({ - standalone_quote__quote: standaloneQuoteData.standalone_quote__quote, - standalone_quote__attribution: - standaloneQuoteData.standalone_quote__attribution, - })} - ${standaloneQuoteTwig({ - standalone_quote__quote: standaloneQuoteData.standalone_quote__quote, - standalone_quote__style: 'bar', - standalone_quote__quote_alignment: 'right', - })} - ${standaloneQuoteTwig({ - standalone_quote__quote: standaloneQuoteData.standalone_quote__quote, - standalone_quote__attribution: - standaloneQuoteData.standalone_quote__attribution, - standalone_quote__style: 'quote', - standalone_quote__quote_alignment: 'left', - })} - ${standaloneQuoteTwig({ - standalone_quote__quote: standaloneQuoteData.standalone_quote__quote, - standalone_quote__attribution: - standaloneQuoteData.standalone_quote__attribution, - standalone_quote__style: 'quote', - standalone_quote__quote_alignment: 'right', - })} - ${standaloneQuoteTwig({ - standalone_quote__quote: standaloneQuoteData.standalone_quote__quote, - standalone_quote__attribution: - standaloneQuoteData.standalone_quote__attribution, - standalone_quote__style: 'image', - standalone_quote__quote_alignment: 'left', - standalone_quote__quote_image: 'with-image', - ...imageData.responsive_images['1x1'], - })} -
    -

    Playground

    -

    Use the StoryBook controls to see the quote below implement the available variations and colors.

    - ${standaloneQuoteTwig({ - standalone_quote__quote: quote, - standalone_quote__attribution: attribution, - standalone_quote__style: style, - standalone_quote__accent_theme: accentColor, - standalone_quote__quote_alignment: quoteAlignment, - standalone_quote__quote_image: quoteImage, - ...imageData.responsive_images['1x1'], - })} -
    -`; diff --git a/components/02-molecules/standalone-quote/standalone-quote.yml b/components/02-molecules/standalone-quote/standalone-quote.yml deleted file mode 100644 index 741b2f4b5..000000000 --- a/components/02-molecules/standalone-quote/standalone-quote.yml +++ /dev/null @@ -1,2 +0,0 @@ -standalone_quote__quote:

    Yale changed that thinking. It was evident in every class, every conversation, every project, that a business cannot exist in a vacuum, and that a business with the sole purpose of profit, with total disregard for its surroundings, will eventually fizzle out.

    -standalone_quote__attribution: Annie Nymity diff --git a/components/02-molecules/standalone-quote/yds-standalone-quote.twig b/components/02-molecules/standalone-quote/yds-standalone-quote.twig deleted file mode 100644 index 178718d2e..000000000 --- a/components/02-molecules/standalone-quote/yds-standalone-quote.twig +++ /dev/null @@ -1,53 +0,0 @@ -{# - # Available Props: - # - standalone_quote__style: bar-left, bar-right, or quote-left - # - animate__item: defaults to `enabled`, will only animate if site_animate_components (lever / config) is not `default` - # - # Available Variables: - # - standalone_quote__quote (required) - # - standalone_quote__attribution - #} - -{% set standalone_quote__base_class = 'standalone-quote' %} -{% set standalone_quote__style = standalone_quote__style|default('bar') %} - -{# If standalone_quote__attributes is not defined, set it to an empty object by default #} -{% set standalone_quote__attributes = standalone_quote__attributes|default({}) %} - -{# If standalone_quote__quote_image is 'with-image' set data-standalone-quote-style = 'image' #} -{% if standalone_quote__quote_image == 'with-image' %} - {% set standalone_quote__style = 'image' %} -{% endif %} - -{% set standalone_quote__attributes = standalone_quote__attributes|merge({ - 'data-animate-item': animate__item|default('enabled'), -}) %} - -{% set standalone_quote__attributes = standalone_quote__attributes|merge({ - 'data-component-width': standalone_quote__width|default('content'), - 'data-standalone-quote-style': standalone_quote__style, - 'data-component-theme': standalone_quote__accent_theme|default('one'), - 'data-component-alignment': standalone_quote__alignment|default('center'), - 'data-standalone-quote-quote-alignment': standalone_quote__quote_alignment|default('left'), - class: bem(standalone_quote__base_class, standalone_quote__modifiers), -}) %} - -
    {% block prefix_suffix %}{% endblock %} -
    - {% if standalone_quote__quote_image == 'with-image' %} -
    - {% block standalone_quote__image %} - {% include "@atoms/images/image/_responsive-image.twig" %} - {% endblock %} -
    - {% endif %} -
    -
    - {{ standalone_quote__quote }} -
    - {% if standalone_quote__attribution %} -
    —{{ standalone_quote__attribution }}
    - {% endif %} -
    -
    -
    diff --git a/components/02-molecules/tile-item/_yds-tile-item.scss b/components/02-molecules/tile-item/_yds-tile-item.scss index d0e0b4421..243ab0b88 100644 --- a/components/02-molecules/tile-item/_yds-tile-item.scss +++ b/components/02-molecules/tile-item/_yds-tile-item.scss @@ -14,23 +14,6 @@ $tile-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); max-width: 100%; z-index: 0; - @media (min-width: tokens.$break-l) { - aspect-ratio: 3/2; - } - - [data-component-grid-count='two'] & { - @media (min-width: tokens.$break-l) { - aspect-ratio: 4 / 2; - } - } - - // if in a 4-column grid, make the aspect ratio 1:1 - [data-component-grid-count='four'] & { - @media (min-width: tokens.$break-s) { - aspect-ratio: 1 / 1; - } - } - // Component themes defaults: iterate over each component theme to establish // default variables. @each $theme, $value in $tile-item-component-themes { @@ -112,6 +95,10 @@ $tile-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); align-items: flex-end; } + [data-component-alignment='center'] & { + align-items: center; + } + [data-component-tile-style='text-only'][data-component-vertical-alignment='bottom'] & { justify-content: flex-end; @@ -119,7 +106,7 @@ $tile-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); } } -.tile__item__number { +.tile__item__heading { @include tokens.h1-yale-new; position: relative; @@ -159,6 +146,10 @@ $tile-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); [data-component-alignment='right'] & { text-align: right; } + + [data-component-alignment='center'] & { + text-align: center; + } } .tile__item__image { @@ -196,6 +187,14 @@ $tile-item-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); @include atoms.plain-link; @include tokens.h4-yale-new; + [data-component-alignment='center'] & { + text-align: center; + } + + [data-component-alignment='right'] & { + text-align: right; + } + &:hover { color: var(--color-tile-item-content); } diff --git a/components/02-molecules/tile-item/tile-item.stories.js b/components/02-molecules/tile-item/tile-item.stories.js index 6c637b8ad..7f31d3c66 100644 --- a/components/02-molecules/tile-item/tile-item.stories.js +++ b/components/02-molecules/tile-item/tile-item.stories.js @@ -5,18 +5,16 @@ import tileItemData from './tile-item.yml'; // Image atom component - generic images for demo import imageData from '../../01-atoms/images/image/image.yml'; -import './yds-tile-item'; - /** * Storybook Definition. */ export default { title: 'Molecules/Tile Item', argTypes: { - number: { + heading: { name: 'Number', type: 'string', - defaultValue: tileItemData.tile__item__number, + defaultValue: tileItemData.tile__item__heading, }, content: { name: 'Content', @@ -30,13 +28,13 @@ export default { }, presentationStyle: { name: 'Presentation Style', - options: ['number', 'icon', 'text-only'], + options: ['heading', 'icon', 'text-only'], type: 'select', - defaultValue: 'number', + defaultValue: 'heading', }, alignment: { name: 'Alignment', - options: ['left', 'right'], + options: ['left', 'center', 'right'], type: 'select', defaultValue: 'left', }, @@ -61,7 +59,7 @@ export default { }; export const TileItem = ({ - number, + heading, content, contentLink, presentationStyle, @@ -74,27 +72,27 @@ export const TileItem = ({
      ${tileItemTwig({ - tile__item__number: tileItemData.tile__item__number, + tile__item__heading: tileItemData.tile__item__heading, tile__item__content: tileItemData.tile__item__content, tile__item__content_link: 'https://www.yale.edu', - tile__item__presentation_style: 'number', + tile__item__presentation_style: 'heading', tile__item__alignment: 'left', tile__item__vertical_alignment: 'top', tile__item__bg_image: 'true', ...imageData.responsive_images['1x1'], })} ${tileItemTwig({ - tile__item__number: tileItemData.tile__item__number, + tile__item__heading: tileItemData.tile__item__heading, tile__item__presentation_style: 'icon', tile__item__alignment: 'right', tile__item__bg_image: 'false', })} ${tileItemTwig({ - tile__item__number: tileItemData.tile__item__number, + tile__item__heading: tileItemData.tile__item__heading, tile__item__content: tileItemData.tile__item__content, tile__item__content_link: 'https://www.yale.edu', tile__item__vertical_alignment: 'bottom', - tile__item__presentation_style: 'number', + tile__item__presentation_style: 'heading', tile__item__alignment: 'left', tile__item__bg_image: 'true', ...imageData.responsive_images['1x1'], @@ -110,7 +108,7 @@ export const TileItem = ({
        ${tileItemTwig({ - tile__item__number: number, + tile__item__heading: heading, tile__item__content: content, tile__item__content_link: contentLink, tile__item__alignment: alignment, diff --git a/components/02-molecules/tile-item/tile-item.yml b/components/02-molecules/tile-item/tile-item.yml index eb3998920..390bf30c3 100644 --- a/components/02-molecules/tile-item/tile-item.yml +++ b/components/02-molecules/tile-item/tile-item.yml @@ -1,2 +1,2 @@ -tile__item__number: '01' +tile__item__heading: '01' tile__item__content: This is a tile item with content! diff --git a/components/02-molecules/tile-item/yds-tile-item.js b/components/02-molecules/tile-item/yds-tile-item.js deleted file mode 100644 index 213e37060..000000000 --- a/components/02-molecules/tile-item/yds-tile-item.js +++ /dev/null @@ -1,36 +0,0 @@ -Drupal.behaviors.tileItem = { - attach(context) { - // Inspiration and reasoning for this JavaScript can be found in the Cards - // chapter of the book linked below: - // https://inclusive-components.design/cards/#theredundantclickevent - // Selectors - const tileItems = context.querySelectorAll('.tile__item'); - - tileItems.forEach((tileItem) => { - const tile = tileItem; - const link = tile.querySelector('.tile__item__link'); - - // If the tile has a link, make the whole tile clickable. However, allow - // users to select text by only triggering the link if the "click up" is - // less than 200ms from the "click down". - if (link) { - let down; - let up; - - tile.style.cursor = 'pointer'; - tile.onmousedown = () => { - // Calculate when the "click" starts. - down = +new Date(); - }; - tile.onmouseup = () => { - // Calculate when the "click" ends. - up = +new Date(); - // If the click "duration" is less than 200ms, trigger a click. - if (up - down < 200) { - link.click(); - } - }; - } - }); - }, -}; diff --git a/components/02-molecules/tile-item/yds-tile-item.twig b/components/02-molecules/tile-item/yds-tile-item.twig index 623ff487b..c76032e65 100644 --- a/components/02-molecules/tile-item/yds-tile-item.twig +++ b/components/02-molecules/tile-item/yds-tile-item.twig @@ -1,6 +1,6 @@ {# # Available Props: - # - tile__item__presentation_style: number, icon, text-only + # - tile__item__presentation_style: heading, icon, text-only # - tile__item__icon_name: string # - tile__item__alignment: left, center # @@ -43,9 +43,9 @@
      {% endblock %} {% endif %} - {% if tile__item__presentation_style == 'number' %} -
      - {{ tile__item__number }} + {% if tile__item__presentation_style == 'heading' %} +
      + {{ tile__item__heading }}
      {% endif %} {% if tile__item__content_link and tile__item__content %} diff --git a/components/03-organisms/infographic-group/_yds-infographic-group.scss b/components/03-organisms/facts-and-figures-group/_yds-facts-and-figures-group.scss similarity index 54% rename from components/03-organisms/infographic-group/_yds-infographic-group.scss rename to components/03-organisms/facts-and-figures-group/_yds-facts-and-figures-group.scss index ece182a1a..6721db7f2 100644 --- a/components/03-organisms/infographic-group/_yds-infographic-group.scss +++ b/components/03-organisms/facts-and-figures-group/_yds-facts-and-figures-group.scss @@ -3,22 +3,38 @@ @use '../../01-atoms/atoms'; @use '../grid-mixins' as grid; -$global-infographic-group-themes: map.deep-get(tokens.$tokens, 'global-themes'); -$infographic-group-component-themes: map.deep-get( +$global-facts-and-figures-group-themes: map.deep-get( + tokens.$tokens, + 'global-themes' +); +$facts-and-figures-group-component-themes: map.deep-get( tokens.$tokens, 'component-themes' ); -.infographic__group { - @include tokens.spacing-page-section($banner-spacing: true); - - padding-block: var(--size-spacing-11); +.facts-and-figures__group { width: 100%; position: relative; + padding-block-start: var(--size-spacing-10); + padding-block-end: var(--size-spacing-10); + + // Or if the spotlight is the only spotlight on the page + &[data-spotlights-position='first-and-last'] { + @include tokens.spacing-page-section; + } + + // We're using JavaScript to evaluate the last and first spotlights in a group of spotlights + &[data-spotlights-position='first'] { + margin-top: var(--size-spacing-10); + } + + &[data-spotlights-position='last'] { + margin-bottom: var(--size-spacing-10); + } // Component themes defaults: iterate over each component theme to establish // default variables. - @each $theme, $value in $infographic-group-component-themes { + @each $theme, $value in $facts-and-figures-group-component-themes { &[data-component-theme='#{$theme}'] { // prettier-ignore --color-slot-one: var(--component-themes-#{$theme}-slot-one); @@ -29,11 +45,11 @@ $infographic-group-component-themes: map.deep-get( --color-slot-six: var(--component-themes-#{$theme}-slot-six); --color-slot-seven: var(--component-themes-#{$theme}-slot-seven); --color-slot-eight: var(--component-themes-#{$theme}-slot-eight); - --color-infographic-theme: var(--color-slot-one); - --color-infographic-content: var(--color-slot-eight); + --color-facts-and-figures-theme: var(--color-slot-one); + --color-facts-and-figures-content: var(--color-slot-eight); - background-color: var(--color-infographic-theme); - color: var(--color-infographic-content); + background-color: var(--color-facts-and-figures-theme); + color: var(--color-facts-and-figures-content); } } @@ -41,7 +57,7 @@ $infographic-group-component-themes: map.deep-get( // This establishes `--color-slot-` variables name-spaced to the selector // in which it is used. We can map component-level variables to global-level // `--color-slot-` variables. - @each $globalTheme, $value in $global-infographic-group-themes { + @each $globalTheme, $value in $global-facts-and-figures-group-themes { [data-global-theme='#{$globalTheme}'] & { --color-slot-one: var(--global-themes-#{$globalTheme}-colors-slot-one); --color-slot-two: var(--global-themes-#{$globalTheme}-colors-slot-two); @@ -63,31 +79,31 @@ $infographic-group-component-themes: map.deep-get( // Component theme overrides: set specific component themes overrides /// define component name spaced variables and map them to global theme slots. &[data-component-theme='one'] { - --color-infographic-theme: var(--color-slot-one); - --color-infographic-content: var(--color-slot-eight); + --color-facts-and-figures-theme: var(--color-slot-one); + --color-facts-and-figures-content: var(--color-slot-eight); --color-link-visited-base: var(--color-link-visited-light); --color-link-visited-hover: var(--color-link-visited-light-hover); } &[data-component-theme='two'] { - --color-infographic-theme: var(--color-slot-four); - --color-infographic-content: var(--color-slot-seven); + --color-facts-and-figures-theme: var(--color-slot-four); + --color-facts-and-figures-content: var(--color-slot-seven); } &[data-component-theme='three'] { - --color-infographic-theme: var(--color-slot-five); - --color-infographic-content: var(--color-slot-eight); + --color-facts-and-figures-theme: var(--color-slot-five); + --color-facts-and-figures-content: var(--color-slot-eight); --color-link-visited-base: var(--color-link-visited-light); --color-link-visited-hover: var(--color-link-visited-light-hover); } } -.infographic__group__inner { +.facts-and-figures__group__inner { width: 100%; max-width: var(--component-width); } -.infographic__group__wrap { +.facts-and-figures__group__wrap { @include grid.base; // position relative added to use z-index and make sure the image is behind the content @@ -109,16 +125,55 @@ $infographic-group-component-themes: map.deep-get( flex: 0 1 calc(25% - calc(var(--grid-gutter) * 3 / 4)); } } + + [data-component-grid-count='two'] & { + > * { + @media (min-width: tokens.$break-s) { + flex: 0 1 calc(50% - var(--grid-gutter)); + max-width: calc(50% - var(--grid-gutter)); + } + } + } + + [data-component-grid-count='three'] & { + > * { + @media (min-width: tokens.$break-s) { + flex: 0 calc(50% - var(--grid-gutter)); + } + + @media (min-width: tokens.$break-m) { + flex: 1 0 calc(33.33% - var(--grid-gutter)); + max-width: calc(33.33% - var(--grid-gutter)); + } + } + } + + [data-component-grid-count='four'] & { + > * { + @media (min-width: tokens.$break-s) { + flex: 0 calc(50% - var(--grid-gutter)); + } + + @media (min-width: tokens.$break-m) { + flex: 1 0 calc(25% - var(--grid-gutter)); + } + + @media (min-width: tokens.$break-l) { + flex: 1 0 calc(25% - var(--grid-gutter)); + max-width: calc(25% - var(--grid-gutter)); + } + } + } } -.infographic__group__image { +.facts-and-figures__group__image { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-blend-mode: multiply; - background-color: var(--color-infographic-theme); + background-color: var(--color-facts-and-figures-theme); opacity: 0.15; img { @@ -128,30 +183,30 @@ $infographic-group-component-themes: map.deep-get( } } -.infographic__group__content-wrap { +.facts-and-figures__group__content-wrap { position: relative; z-index: 1; margin-bottom: var(--size-spacing-8); } -.infographic__group__heading { +.facts-and-figures__group__heading { @include tokens.h2-yale-new; - color: var(--color-infographic-content); + color: var(--color-facts-and-figures-content); } -.infographic__group__content { +.facts-and-figures__group__content { @include tokens.body-default; - color: var(--color-infographic-content); + color: var(--color-facts-and-figures-content); } -.infographic__group__cta { +.facts-and-figures__group__cta { @include atoms.plain-link; - color: var(--color-infographic-content); + color: var(--color-facts-and-figures-content); &:hover { - color: var(--color-infographic-content); + color: var(--color-facts-and-figures-content); } } diff --git a/components/03-organisms/infographic-group/infographic-group.stories.js b/components/03-organisms/facts-and-figures-group/facts-and-figures-group.stories.js similarity index 56% rename from components/03-organisms/infographic-group/infographic-group.stories.js rename to components/03-organisms/facts-and-figures-group/facts-and-figures-group.stories.js index 5a8eac77a..d104499d9 100644 --- a/components/03-organisms/infographic-group/infographic-group.stories.js +++ b/components/03-organisms/facts-and-figures-group/facts-and-figures-group.stories.js @@ -2,11 +2,11 @@ import tokens from '@yalesites-org/tokens/build/json/tokens.json'; // get global themes as `label` : `key` values to pass into options as array. import getGlobalThemes from '../../00-tokens/colors/color-global-themes'; -// infographic__group twig -import infographicGroupTwig from './yds-infographic-group.twig'; +// facts_and_figures__group twig +import factsAndFiguresGroupTwig from './yds-facts-and-figures-group.twig'; // Stat default data -import infographicGroupData from './infographic-group.yml'; +import factsAndFiguresGroupData from './facts-and-figures-group.yml'; // Image atom component - generic images for demo import imageData from '../../01-atoms/images/image/image.yml'; @@ -18,7 +18,7 @@ const siteGlobalThemeOptions = getGlobalThemes(tokens['global-themes']); * Storybook Definition. */ export default { - title: 'Organisms/Infographic Group', + title: 'Organisms/Facts and Figures Group', parameters: { layout: 'fullscreen', }, @@ -35,27 +35,28 @@ export default { type: 'select', defaultValue: 'one', }, - infographicGroupHeading: { + factsAndFiguresGroupHeading: { name: 'Infographic Group Heading', type: 'string', - defaultValue: infographicGroupData.infographic__group__heading, + defaultValue: factsAndFiguresGroupData.facts_and_figures__group__heading, }, - infographicGroupContent: { + factsAndFiguresGroupContent: { name: 'Infographic Group Content', type: 'string', - defaultValue: infographicGroupData.infographic__group__content, + defaultValue: factsAndFiguresGroupData.facts_and_figures__group__content, }, - infographicGroupLink: { + factsAndFiguresGroupLink: { name: 'Infographic Group Link', type: 'string', - defaultValue: infographicGroupData.infographic__group__link__content, + defaultValue: + factsAndFiguresGroupData.facts_and_figures__group__link__content, }, image: { name: 'With image', type: 'boolean', defaultValue: true, }, - infographicGroupIcons: { + factsAndFiguresGroupIcons: { name: 'Infographic Group Icons', type: 'boolean', defaultValue: false, @@ -72,6 +73,12 @@ export default { type: 'select', defaultValue: 'normal', }, + columnCount: { + name: 'Column Count', + options: ['two', 'three', 'four'], + type: 'select', + defaultValue: 'three', + }, alignment: { name: 'Alignment', options: ['left', 'center'], @@ -81,30 +88,34 @@ export default { }, }; -export const InfographicGroup = ({ - infographicGroupHeading, - infographicGroupContent, - infographicGroupIcons, +export const FactsAndFiguresGroup = ({ + factsAndFiguresGroupHeading, + factsAndFiguresGroupContent, + factsAndFiguresGroupIcons, globalTheme, presentationStyle, fontStyle, + columnCount, alignment, themeColor, image, }) => { return `
      - ${infographicGroupTwig({ + ${factsAndFiguresGroupTwig({ site_global__theme: globalTheme, - infographic__group__heading: infographicGroupHeading, - infographic__group__content: infographicGroupContent, - infographic__group__has_icon: infographicGroupIcons ? 'true' : 'false', - infographic__group__alignment: alignment, - infographic__group__presentation_style: presentationStyle, - infographic__group__font_style: fontStyle, - infographic__group__theme: themeColor, - infographic__group__bg_image: image, - ...infographicGroupData, + facts_and_figures__group__heading: factsAndFiguresGroupHeading, + facts_and_figures__group__content: factsAndFiguresGroupContent, + facts_and_figures__group__has_icon: factsAndFiguresGroupIcons + ? 'true' + : 'false', + facts_and_figures__group__grid_count: columnCount, + facts_and_figures__group__alignment: alignment, + facts_and_figures__group__presentation_style: presentationStyle, + facts_and_figures__group__font_style: fontStyle, + facts_and_figures__group__theme: themeColor, + facts_and_figures__group__bg_image: image, + ...factsAndFiguresGroupData, ...imageData.responsive_images['16x9'], })}
      diff --git a/components/03-organisms/facts-and-figures-group/facts-and-figures-group.yml b/components/03-organisms/facts-and-figures-group/facts-and-figures-group.yml new file mode 100644 index 000000000..dde2e7efe --- /dev/null +++ b/components/03-organisms/facts-and-figures-group/facts-and-figures-group.yml @@ -0,0 +1,17 @@ +facts_and_figures__group__heading: 'Facts and Figures Group' +facts_and_figures__group__content: 'This is a group of facts and figures' +facts_and_figures__group__link__content: 'This is a link' +facts_and_figures__group__link__url: 'https://www.bing.com' +facts_and_figures__group: + - facts_and_figures__group__stat: '$52,300' + facts_and_figures__group__content: 'Card 1 content goes here.' + - facts_and_figures__group__stat: '$100,000' + facts_and_figures__group__content: 'Card 2 content goes here.' + - facts_and_figures__group__stat: '150%' + facts_and_figures__group__content: 'Card 3 content goes here.' + - facts_and_figures__group__stat: '200%' + facts_and_figures__group__content: 'Card 4 content goes here.' + - facts_and_figures__group__stat: '$3,000' + facts_and_figures__group__content: 'Card 5 content goes here.' + - facts_and_figures__group__stat: '$25,200' + facts_and_figures__group__content: 'Card 6 content goes here.' diff --git a/components/03-organisms/facts-and-figures-group/yds-facts-and-figures-group.twig b/components/03-organisms/facts-and-figures-group/yds-facts-and-figures-group.twig new file mode 100644 index 000000000..8dd7ba3bd --- /dev/null +++ b/components/03-organisms/facts-and-figures-group/yds-facts-and-figures-group.twig @@ -0,0 +1,87 @@ +{# + # Available Variables: + # - facts_and_figures__group__heading + # - facts_and_figures__group__bg_image: (boolean) false by default + + # Available Blocks: + # - facts_and_figures__group__cards + #} + +{% set facts_and_figures__group__base_class = 'facts-and-figures__group' %} + +{% set facts_and_figures__group__width = facts_and_figures__group__width|default('site') %} + +{% if facts_and_figures__collection__type %} + {% set facts_and_figures__group__attributes = facts_and_figures__group__attributes|merge({ + 'dats-facts-and-figures-collection-type': facts_and_figures__collection__type, + }) %} +{% endif %} + +{% set facts_and_figures__group__attributes = { + 'data-component-width': facts_and_figures__group__width, + 'data-component-grid-count': facts_and_figures__group__grid_count|default('four'), + 'dats-facts-and-figures-style': facts_and_figures__group__presentation_style|default('basic'), + 'dats-facts-and-figures-font-style': facts_and_figures__group__font_style|default('normal'), + 'dats-facts-and-figures-has-icon': facts_and_figures__group__has_icon == 'true' ? 'true' : 'false', + 'data-component-alignment': facts_and_figures__group__alignment|default('center'), + 'data-component-theme': facts_and_figures__group__theme|default('one'), + 'class': bem(facts_and_figures__group__base_class), +} %} + +
      + {% block prefix_suffix %} + {% endblock %} +
      + {% if facts_and_figures__group__heading is not empty or facts_and_figures__group__content is not empty or facts_and_figures__group__link__url is not empty %} +
      + {% if facts_and_figures__group__heading is not empty %} + {% include "@atoms/typography/headings/yds-heading.twig" with { + heading__level: '2', + heading__blockname: facts_and_figures__group__base_class, + heading: facts_and_figures__group__heading, + } %} + {% endif %} + {% if facts_and_figures__group__content is not empty %} + {% include "@atoms/typography/text/yds-text.twig" with { + text__blockname: facts_and_figures__group__base_class, + text__content: facts_and_figures__group__content, + text__base_class: 'content', + } %} + {% endif %} + {% if facts_and_figures__group__link__url %} + {% include "@atoms/controls/cta/yds-cta.twig" with { + cta__content: facts_and_figures__group__link__content|default(facts_and_figures__group__link__content), + cta__href: facts_and_figures__group__link__url|default(facts_and_figures__group__link__url), + cta__blockname: facts_and_figures__group__base_class, + cta__style: 'outline', + } %} + {% endif %} +
      + {% endif %} +
        + {% block facts_and_figures__group__items %} + {% for stat in facts_and_figures__group %} + {# Set stat attributes based on facts_and_figures__group attributes so all stat items within that facts_and_figures__group group are consistent #} + {# facts_and_figures__theme: 'default' is set to default as the theme is set on the facts_and_figures__group component, we don't want the individual stat to have a bg color #} + {% include "@molecules/facts-and-figures/yds-facts-and-figures.twig" with { + facts_and_figures__stat: stat.facts_and_figures__group__stat, + facts_and_figures__content: stat.facts_and_figures__group__content, + facts_and_figures__has_icon: facts_and_figures__group__has_icon, + facts_and_figures__font_style: facts_and_figures__group__font_style, + facts_and_figures__alignment: facts_and_figures__group__alignment, + facts_and_figures__presentation_style: facts_and_figures__group__presentation_style, + facts_and_figures__theme: 'default', + } + %} + {% endfor %} + {% endblock %} +
      + {% if facts_and_figures__group__bg_image %} +
      + {% block facts_and_figures__group__image %} + {% include "@atoms/images/image/_responsive-image.twig" %} + {% endblock %} +
      + {% endif %} +
      +
      diff --git a/components/03-organisms/infographic-group/infographic-group.yml b/components/03-organisms/infographic-group/infographic-group.yml deleted file mode 100644 index 3f5f6e008..000000000 --- a/components/03-organisms/infographic-group/infographic-group.yml +++ /dev/null @@ -1,17 +0,0 @@ -infographic__group__heading: 'Infographic Group' -infographic__group__content: 'This is a group of infographics' -infographic__group__link__content: 'This is a link' -infographic__group__link__url: 'https://www.bing.com' -infographic__group: - - infographic__group__stat: '$52,300' - infographic__group__content: 'Card 1 content goes here.' - - infographic__group__stat: '$100,000' - infographic__group__content: 'Card 2 content goes here.' - - infographic__group__stat: '150%' - infographic__group__content: 'Card 3 content goes here.' - - infographic__group__stat: '200%' - infographic__group__content: 'Card 4 content goes here.' - - infographic__group__stat: '$3,000' - infographic__group__content: 'Card 5 content goes here.' - - infographic__group__stat: '$25,200' - infographic__group__content: 'Card 6 content goes here.' diff --git a/components/03-organisms/infographic-group/yds-infographic-group.twig b/components/03-organisms/infographic-group/yds-infographic-group.twig deleted file mode 100644 index 3dfe8a887..000000000 --- a/components/03-organisms/infographic-group/yds-infographic-group.twig +++ /dev/null @@ -1,86 +0,0 @@ -{# - # Available Variables: - # - infographic__group__heading - # - infographic__group__bg_image: (boolean) false by default - - # Available Blocks: - # - infographic__group__cards - #} - -{% set infographic__group__base_class = 'infographic__group' %} - -{% set infographic__group__width = infographic__group__width|default('site') %} - -{% if infographic__collection__type %} - {% set infographic__group__attributes = infographic__group__attributes|merge({ - 'data-stat-collection-type': infographic__collection__type, - }) %} -{% endif %} - -{% set infographic__group__attributes = { - 'data-component-width': infographic__group__width, - 'data-stat-style': infographic__group__presentation_style|default('basic'), - 'data-stat-font-style': infographic__group__font_style|default('normal'), - 'data-stat-has-icon': infographic__group__has_icon == 'true' ? 'true' : 'false', - 'data-component-alignment': infographic__group__alignment|default('center'), - 'data-component-theme': infographic__group__theme|default('one'), - 'class': bem(infographic__group__base_class), -} %} - -
      - {% block prefix_suffix %} - {% endblock %} -
      - {% if infographic__group__heading is not empty or infographic__group__content is not empty or infographic__group__link__url is not empty %} -
      - {% if infographic__group__heading is not empty %} - {% include "@atoms/typography/headings/yds-heading.twig" with { - heading__level: '2', - heading__blockname: infographic__group__base_class, - heading: infographic__group__heading, - } %} - {% endif %} - {% if infographic__group__content is not empty %} - {% include "@atoms/typography/text/yds-text.twig" with { - text__blockname: infographic__group__base_class, - text__content: infographic__group__content, - text__base_class: 'content', - } %} - {% endif %} - {% if infographic__group__link__url %} - {% include "@atoms/controls/cta/yds-cta.twig" with { - cta__content: infographic__group__link__content|default(infographic__group__link__content), - cta__href: infographic__group__link__url|default(infographic__group__link__url), - cta__blockname: infographic__group__base_class, - cta__style: 'outline', - } %} - {% endif %} -
      - {% endif %} -
        - {% block infographic__group__items %} - {% for stat in infographic__group %} - {# Set stat attributes based on infographic__group attributes so all stat items within that infographic__group group are consistent #} - {# infographic__theme: 'default' is set to default as the theme is set on the infographic__group component, we don't want the individual stat to have a bg color #} - {% include "@molecules/infographic/yds-infographic.twig" with { - infographic__stat: stat.infographic__group__stat, - infographic__content: stat.infographic__group__content, - infographic__has_icon: infographic__group__has_icon, - infographic__font_style: infographic__group__font_style, - infographic__alignment: infographic__group__alignment, - infographic__presentation_style: infographic__group__presentation_style, - infographic__theme: 'default', - } - %} - {% endfor %} - {% endblock %} -
      - {% if infographic__group__bg_image %} -
      - {% block infographic__group__image %} - {% include "@atoms/images/image/_responsive-image.twig" %} - {% endblock %} -
      - {% endif %} -
      -
      diff --git a/components/03-organisms/organisms.scss b/components/03-organisms/organisms.scss index b0960dbb3..33254a885 100644 --- a/components/03-organisms/organisms.scss +++ b/components/03-organisms/organisms.scss @@ -10,5 +10,5 @@ @forward './menu/utility-nav/yds-utility-nav'; @forward './site-footer/yds-site-footer'; @forward './site-header/yds-site-header'; -@forward './infographic-group/yds-infographic-group'; +@forward './facts-and-figures-group/yds-facts-and-figures-group'; @forward './tiles/yds-tiles'; diff --git a/components/03-organisms/tiles/_yds-tiles.scss b/components/03-organisms/tiles/_yds-tiles.scss index 58f4898dd..527c9251e 100644 --- a/components/03-organisms/tiles/_yds-tiles.scss +++ b/components/03-organisms/tiles/_yds-tiles.scss @@ -4,11 +4,29 @@ @use '../grid-mixins' as grid; .tiles { - @include tokens.spacing-page-section($banner-spacing: true); - - padding-block: var(--size-spacing-11); width: 100%; position: relative; + padding-block-start: var(--size-spacing-10); + padding-block-end: var(--size-spacing-10); + + // Or if the spotlight is the only spotlight on the page + &[data-spotlights-position='first-and-last'] { + @include tokens.spacing-page-section; + } + + // We're using JavaScript to evaluate the last and first spotlights in a group of spotlights + &[data-spotlights-position='first'] { + margin-top: var(--size-spacing-10); + } + + &[data-spotlights-position='last'] { + margin-bottom: var(--size-spacing-10); + } + + // If the tiles component comes after a component in the first position, remove the top padding + [data-component-theme='default'][data-spotlights-position='first'] + & { + padding-block-start: 0; + } } .tiles__inner { diff --git a/components/03-organisms/tiles/tiles.stories.js b/components/03-organisms/tiles/tiles.stories.js index 1e340330c..56b964c0a 100644 --- a/components/03-organisms/tiles/tiles.stories.js +++ b/components/03-organisms/tiles/tiles.stories.js @@ -31,13 +31,13 @@ export default { }, presentationStyle: { name: 'Presentation Style', - options: ['number', 'icon', 'text-only'], + options: ['heading', 'icon', 'text-only'], type: 'select', - defaultValue: 'number', + defaultValue: 'heading', }, alignment: { name: 'Alignment', - options: ['left', 'right'], + options: ['left', 'center', 'right'], type: 'select', defaultValue: 'left', }, @@ -47,8 +47,8 @@ export default { type: 'select', defaultValue: 'top', }, - gridCount: { - name: 'Grid Count', + columnCount: { + name: 'Column Count', options: ['two', 'three', 'four'], type: 'select', defaultValue: 'three', @@ -66,7 +66,7 @@ export const Tiles = ({ presentationStyle, alignment, verticalAlignment, - gridCount, + columnCount, image, }) => { return ` @@ -76,7 +76,7 @@ export const Tiles = ({ tiles__alignment: alignment, tiles__vertical_alignment: verticalAlignment, tiles__presentation_style: presentationStyle, - tiles__grid_count: gridCount, + tiles__grid_count: columnCount, tiles__with__image: image ? 'true' : 'false', ...tilesData, ...imageData.responsive_images['1x1'], diff --git a/components/03-organisms/tiles/tiles.yml b/components/03-organisms/tiles/tiles.yml index 812e37308..6b9c71c52 100644 --- a/components/03-organisms/tiles/tiles.yml +++ b/components/03-organisms/tiles/tiles.yml @@ -1,21 +1,21 @@ tiles: - - tile__item__number: '$52,300' + - tile__item__heading: '$52,300' tile__item__content: 'Card 1 content goes here.' tile__item__theme: 'one' - - tile__item__number: '$100,000' + - tile__item__heading: '$100,000' tile__item__content: 'Card 2 content goes here.' tile__item__theme: 'two' - - tile__item__number: '150%' + - tile__item__heading: '150%' tile__item__content: 'Card 3 content goes here.' tile__item__theme: 'one' tile__item__content_link: 'https://www.yale.edu/' - - tile__item__number: '200%' + - tile__item__heading: '200%' tile__item__content: 'Card 4 content goes here.' tile__item__theme: 'three' tile__item__content_link: '#' - - tile__item__number: '$3,000' + - tile__item__heading: '$3,000' tile__item__content: 'Card 5 content goes here.' tile__item__theme: 'two' - - tile__item__number: '$25,200' + - tile__item__heading: '$25,200' tile__item__content: 'Card 6 content goes here.' tile__item__theme: 'one' diff --git a/components/03-organisms/tiles/yds-tiles.twig b/components/03-organisms/tiles/yds-tiles.twig index 4076e2f0c..0a676b53c 100644 --- a/components/03-organisms/tiles/yds-tiles.twig +++ b/components/03-organisms/tiles/yds-tiles.twig @@ -1,7 +1,7 @@ {# # Available Variables: # - tiles__width - # - tiles__presentation_style: 'number' (default), 'icon', 'text-only' + # - tiles__presentation_style: 'heading' (default), 'icon', 'text-only' # - tiles__alignment: 'left' (default) or 'right' # - tiles__vertical_alignment: 'top' (default) or 'bottom' # - tiles__theme: 'one' (default), 'two', 'three' @@ -15,7 +15,7 @@ {% set tiles__attributes = { 'data-component-width': tiles__width, - 'data-component-tile-style': tiles__presentation_style|default('number'), + 'data-component-tile-style': tiles__presentation_style|default('heading'), 'data-component-alignment': tiles__alignment|default('left'), 'data-component-vertical-alignment': tiles__vertical_alignment|default('left'), 'data-component-grid-count': tiles__grid_count|default('three'), @@ -33,7 +33,7 @@ {# Set tile attributes based on tiles attributes so all tile items within that tiles group are consistent #} {# tiles__theme: 'default' is set to default as the theme is set on the tiles component, we don't want the individual tile to have a bg color #} {% include "@molecules/tile-item/yds-tile-item.twig" with { - tile__item__number: tile.tile__item__number, + tile__item__heading: tile.tile__item__heading, tile__item__content: tile.tile__item__content, tile__item__content_link: tile.tile__item__content_link, tile__item__alignment: tiles__alignment, diff --git a/components/05-page-examples/standard-pages/standard-page-with-banner-left-align.twig b/components/05-page-examples/standard-pages/standard-page-with-banner-left-align.twig index f5ada7837..74c89978d 100644 --- a/components/05-page-examples/standard-pages/standard-page-with-banner-left-align.twig +++ b/components/05-page-examples/standard-pages/standard-page-with-banner-left-align.twig @@ -194,7 +194,7 @@ {% endblock %} {% endembed %} - {% include "@molecules/standalone-quote/yds-standalone-quote.twig" with { + {% include "@molecules/quote-callout/yds-quote-callout.twig" with { animate__item: 'enabled', standalone_quote__width: 'site', standalone_quote__alignment: 'left', diff --git a/components/05-page-examples/standard-pages/standard-page-with-banner.twig b/components/05-page-examples/standard-pages/standard-page-with-banner.twig index a6fa3f825..d9dd2a00f 100644 --- a/components/05-page-examples/standard-pages/standard-page-with-banner.twig +++ b/components/05-page-examples/standard-pages/standard-page-with-banner.twig @@ -178,7 +178,7 @@ {% endblock %} {% endembed %} - {% include "@molecules/standalone-quote/yds-standalone-quote.twig" with { + {% include "@molecules/quote-callout/yds-quote-callout.twig" with { animate__item: 'enabled', standalone_quote__width: 'site', standalone_quote__alignment: 'left', From d5c084672023f13d8d14ad206bd2b305c7896d53 Mon Sep 17 00:00:00 2001 From: laura-johnson Date: Mon, 10 Jun 2024 20:09:13 -0700 Subject: [PATCH 5/9] feat(YSP-431): Add/Tweak Call-to-Action button utility nav (#370) * feat: ysp-431 add radius to cta button * fix: ysp-431 add pill style to twig * feat(YSP-431): update utility nav component to have options component theme var --------- Co-authored-by: Joe Tower Co-authored-by: Jim Vomero --- components/03-organisms/menu/utility-nav/utility-nav.yml | 1 + components/03-organisms/menu/utility-nav/yds-utility-nav.twig | 3 ++- components/03-organisms/site-header/_yds-site-header.scss | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/components/03-organisms/menu/utility-nav/utility-nav.yml b/components/03-organisms/menu/utility-nav/utility-nav.yml index 46925d079..ec4a40358 100644 --- a/components/03-organisms/menu/utility-nav/utility-nav.yml +++ b/components/03-organisms/menu/utility-nav/utility-nav.yml @@ -8,3 +8,4 @@ items: utility_nav__link__content: 'Apply Now' utility_nav__link__url: '#' utility_nav__search: true +utility_nav__cta__theme: 'one' diff --git a/components/03-organisms/menu/utility-nav/yds-utility-nav.twig b/components/03-organisms/menu/utility-nav/yds-utility-nav.twig index 3ca1f3d3b..8aa16a431 100644 --- a/components/03-organisms/menu/utility-nav/yds-utility-nav.twig +++ b/components/03-organisms/menu/utility-nav/yds-utility-nav.twig @@ -39,7 +39,8 @@ cta__blockname: utility_nav__base_class, cta__content: utility_nav__link__content, cta__href: utility_nav__link__url, - cta__component_theme: 'one', + cta__component_theme: utility_nav__cta__theme|default('none'), + cta__radius: 'pill', } %} {% endif %}
      diff --git a/components/03-organisms/site-header/_yds-site-header.scss b/components/03-organisms/site-header/_yds-site-header.scss index 77b284209..834211be8 100644 --- a/components/03-organisms/site-header/_yds-site-header.scss +++ b/components/03-organisms/site-header/_yds-site-header.scss @@ -139,7 +139,7 @@ $site-name-as-logo-height-sm: 6.25rem; // 100px --color-site-header-link-hover: var(--color-slot-four); --color-site-header-yale-branding: var(--color-basic-white); --color-site-header-theme-action: var(--color-slot-four); - --color-site-header-theme-action-secondary: var(--color-gray-800); + --color-site-header-theme-action-secondary: var(--color-slot-one); --color-muted: var(--color-gray-300); --color-navigation-expanded-item: var(--color-gray-300); } From ea708c89bb24c128566f680d7f2902a7ae4ed716 Mon Sep 17 00:00:00 2001 From: David Blankenship <128765777+dblanken-yale@users.noreply.github.com> Date: Tue, 18 Jun 2024 10:06:31 -0400 Subject: [PATCH 6/9] YSP-487: Add JWPlayer Embed (#376) * feat(YSP-487): pass allowfullscreen though This allows the allowfullscreen to be passed through atomic to the component library from Drupal. * feat(YSP-487): allow video to scale height By using the relative to absolute spcificity, it allows the video display to properly adhere to the height based on the screen size. --- components/02-molecules/embed/_yds-embed.scss | 17 +++++++++++++++++ components/02-molecules/embed/yds-embed.twig | 4 +++- 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/components/02-molecules/embed/_yds-embed.scss b/components/02-molecules/embed/_yds-embed.scss index 355ae0699..9951f2016 100644 --- a/components/02-molecules/embed/_yds-embed.scss +++ b/components/02-molecules/embed/_yds-embed.scss @@ -22,3 +22,20 @@ $heights: ( } } } + +// Video embeds were being cut off by regular vh heights, +// so we're using a percentage-based padding-bottom hack instead. +.embed__inner:has(iframe[data-embed-type='video']) { + position: relative; + padding-bottom: 56.25%; // 16:9 aspect ratio + height: 0; + overflow: visible; + + & iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} diff --git a/components/02-molecules/embed/yds-embed.twig b/components/02-molecules/embed/yds-embed.twig index 6d7523b5c..8fca33749 100644 --- a/components/02-molecules/embed/yds-embed.twig +++ b/components/02-molecules/embed/yds-embed.twig @@ -5,12 +5,14 @@ # - embed__width: default('site') # - embed__type: 'form', 'audio', default('form') # - embed__loading: 'lazy', 'eager', default('lazy') + # - embed__allowfullscreen: TRUE, FALSE, default(FALSE) #} {% set embed__base_class = 'embed' %} {% set embed__width = embed__width|default('site') %} {% set embed__type = embed__type|default('form') %} {% set embed__loading = embed__loading|default('lazy') %} +{% set embed__allowfullscreen = embed__allowfullscreen|default(FALSE) %} {% set embed__attributes = { 'data-component-width': embed__width, @@ -22,7 +24,7 @@ {% endblock %}
      {% block embed__block %} - {% endblock %}
      From 984187cb2eebdb7f2e892e7915b06aafda20ed4f Mon Sep 17 00:00:00 2001 From: Edwin Torrez Barrera Date: Tue, 18 Jun 2024 08:59:27 -0600 Subject: [PATCH 7/9] fix(YSP-554) - Hamburger icon shows on empty menu (#373) * fix(YSP-554): hide hamburger icon when all the menus are empty * feat(YSP-554): set and pass site_header__hamburger for conditional hamburger icon display --------- Co-authored-by: Joe Tower Co-authored-by: Jim Vomero --- .../03-organisms/site-header/yds-site-header.twig | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/components/03-organisms/site-header/yds-site-header.twig b/components/03-organisms/site-header/yds-site-header.twig index d201cb0ce..7fa4a54a6 100644 --- a/components/03-organisms/site-header/yds-site-header.twig +++ b/components/03-organisms/site-header/yds-site-header.twig @@ -13,6 +13,12 @@ {% set site_header__base_class = 'site-header' %} +{% set site_header__hamburger = 'no' %} + +{% if utility_nav__items or primary_nav__items %} + {% set site_header__hamburger = 'yes' %} +{% endif %} + {% set site_header__attributes = { 'data-main-menu-state': 'loaded', 'data-component-width': 'site', @@ -130,7 +136,9 @@ } %} {% endif %} {# Mobile Menu Toggle #} - {% include "@molecules/menu/menu-toggle/yds-menu-toggle.twig" %} + {% if site_header__hamburger == 'yes' %} + {% include "@molecules/menu/menu-toggle/yds-menu-toggle.twig" %} + {% endif %}
    {# If header type is simple, load the simple component #} From c9133dae81fdb1969d911a77853c5444d8602b76 Mon Sep 17 00:00:00 2001 From: laura-johnson Date: Tue, 18 Jun 2024 08:06:21 -0700 Subject: [PATCH 8/9] feat(YSP-509): Add Code Style to WYSIWYG (#367) * feat: ysp-509 add style and storybook demo for code block * fix: ysp-509 add fix for ckeditor code blocks * feat: ysp-509 install highlightjs * feat: ysp-509 add js to component * feat: ysp-509 updates to storybook * feat: ysp-509 fix line breaks in yml text and import needed langs * fix: ysp-509 fix xml import * fix: ysp-509 move highlight css into component * fix: ysp-509 adjust css for plain text code blocks * fix: ysp-509 remove extra semicolon * feat: ysp-509 add remaining languages * fix: ysp-509 change static sass colours to variables --------- Co-authored-by: Jim Vomero --- .../01-atoms/typography/text/_yds-text.scss | 103 ++++++++++++++++++ .../01-atoms/typography/text/yds-text.js | 78 +++++++++++++ components/02-molecules/text/text-field.yml | 10 +- .../02-molecules/text/typography.stories.js | 4 +- package-lock.json | 51 +++++++-- package.json | 1 + 6 files changed, 236 insertions(+), 11 deletions(-) create mode 100644 components/01-atoms/typography/text/yds-text.js diff --git a/components/01-atoms/typography/text/_yds-text.scss b/components/01-atoms/typography/text/_yds-text.scss index 0abde09c2..8fc98f1f8 100644 --- a/components/01-atoms/typography/text/_yds-text.scss +++ b/components/01-atoms/typography/text/_yds-text.scss @@ -1,3 +1,17 @@ +// Code highlighting color variables + +:root { + --color-hljs-text: #f8f8f2; + --color-hljs-background: #23241f; + --color-hljs-strong: #a8a8a2; + --color-hljs-highlight: #ae81ff; + --color-hljs-code: #a6e22e; + --color-hljs-keyword: #f92672; + --color-hljs-symbol: #66d9ef; + --color-hljs-string: #e6db74; + --color-hljs-comment: #75715e; +} + p { margin-block-end: var(--font-spacing-paragraph); } @@ -6,6 +20,95 @@ p { p:last-child { margin-bottom: 0; } + + // Code blocks. + pre code { + display: block; + padding: var(--size-spacing-5); + + // from highlightjs Monokai Sublime + // @see highlight.js/styles/monokai-sublime.css + + /* + Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/ + */ + + &.hljs { + background: var(--color-hljs-background); + color: var(--color-hljs-text); + overflow-x: auto; + } + + .hljs-tag, + .hljs-subst { + color: var(--color-hljs-text); + } + + .hljs-strong, + .hljs-emphasis { + color: var(--color-hljs-strong); + } + + .hljs-bullet, + .hljs-quote, + .hljs-number, + .hljs-regexp, + .hljs-literal, + .hljs-link { + color: var(--color-hljs-highlight); + } + + .hljs-code, + .hljs-title, + .hljs-section, + .hljs-selector-class { + color: var(--color-hljs-code); + } + + .hljs-strong { + font-weight: bold; + } + + .hljs-emphasis { + font-style: italic; + } + + .hljs-keyword, + .hljs-selector-tag, + .hljs-name, + .hljs-attr { + color: var(--color-hljs-keyword); + } + + .hljs-symbol, + .hljs-attribute { + color: var(--color-hljs-symbol); + } + + .hljs-params, + .hljs-title.class_, + .hljs-class .hljs-title { + color: var(--color-hljs-text); + } + + .hljs-string, + .hljs-type, + .hljs-built_in, + .hljs-selector-id, + .hljs-selector-attr, + .hljs-selector-pseudo, + .hljs-addition, + .hljs-variable, + .hljs-template-variable { + color: var(--color-hljs-string); + } + + .hljs-comment, + .hljs-deletion, + .hljs-meta { + color: var(--color-hljs-comment); + } + } } strong { diff --git a/components/01-atoms/typography/text/yds-text.js b/components/01-atoms/typography/text/yds-text.js new file mode 100644 index 000000000..5c1d7d4ef --- /dev/null +++ b/components/01-atoms/typography/text/yds-text.js @@ -0,0 +1,78 @@ +import hljs from 'highlight.js/lib/core'; +import c from 'highlight.js/lib/languages/c'; +import cpp from 'highlight.js/lib/languages/cpp'; +import csharp from 'highlight.js/lib/languages/csharp'; +import css from 'highlight.js/lib/languages/css'; +import html from 'highlight.js/lib/languages/vbscript-html'; +import java from 'highlight.js/lib/languages/java'; +import javascript from 'highlight.js/lib/languages/javascript'; +import json from 'highlight.js/lib/languages/json'; +import matlab from 'highlight.js/lib/languages/matlab'; +import php from 'highlight.js/lib/languages/php'; +import python from 'highlight.js/lib/languages/python'; +import r from 'highlight.js/lib/languages/r'; +import twig from 'highlight.js/lib/languages/twig'; +import typescript from 'highlight.js/lib/languages/typescript'; +import scss from 'highlight.js/lib/languages/scss'; +import shell from 'highlight.js/lib/languages/shell'; +import sql from 'highlight.js/lib/languages/sql'; +import yaml from 'highlight.js/lib/languages/yaml'; +import vim from 'highlight.js/lib/languages/vim'; + +// Register the languages we need +hljs.registerLanguage('c', c); +hljs.registerLanguage('cpp', cpp); +hljs.registerLanguage('csharp', csharp); +hljs.registerLanguage('css', css); +hljs.registerLanguage('html', html); +hljs.registerLanguage('java', java); +hljs.registerLanguage('javascript', javascript); +hljs.registerLanguage('json', json); +hljs.registerLanguage('matlab', matlab); +hljs.registerLanguage('php', php); +hljs.registerLanguage('python', python); +hljs.registerLanguage('r', r); +hljs.registerLanguage('twig', twig); +hljs.registerLanguage('typescript', typescript); +hljs.registerLanguage('scss', scss); +hljs.registerLanguage('shell', shell); +hljs.registerLanguage('sql', sql); +hljs.registerLanguage('yaml', yaml); +hljs.registerLanguage('vim', vim); + +hljs.configure({ + languages: [ + 'c', + 'cpp', + 'csharp', + 'css', + 'html', + 'java', + 'javascript', + 'json', + 'matlab', + 'php', + 'python', + 'r', + 'twig', + 'typescript', + 'scss', + 'shell', + 'sql', + 'yaml', + 'vim', + ], +}); + +Drupal.behaviors.textHighlight = { + attach(context) { + // Selectors + const codeBlocks = context.querySelectorAll('pre > code'); + + codeBlocks.forEach((codeBlock) => { + if (typeof codeBlock === 'object') { + hljs.highlightBlock(codeBlock); + } + }); + }, +}; diff --git a/components/02-molecules/text/text-field.yml b/components/02-molecules/text/text-field.yml index b0f21f5c4..35d679f66 100644 --- a/components/02-molecules/text/text-field.yml +++ b/components/02-molecules/text/text-field.yml @@ -23,4 +23,12 @@ text_field__content: '

    H2 About YDS

    This text has a strike-through
    Superscript1 2
    Subscript for things like H2O
    - This is what inline code looks like.

    ' + This is what inline code looks like. + 
    
+  /** This is what a block of code looks like. **/
+  {
+      padding: 0 var(--size-spacing-3);
+      background-color: var(--color-code-background);
+  }
+
    +

    ' diff --git a/components/02-molecules/text/typography.stories.js b/components/02-molecules/text/typography.stories.js index a61030238..173b2901d 100644 --- a/components/02-molecules/text/typography.stories.js +++ b/components/02-molecules/text/typography.stories.js @@ -4,6 +4,8 @@ import textFieldTwig from './yds-text-field.twig'; // Data files import textData from './text-field.yml'; +import '../../01-atoms/typography/text/yds-text'; + /** * Storybook Definition. */ @@ -23,5 +25,5 @@ export const TextField = ({ variation }) => ` ${textFieldTwig({ text_field__content: textData.text_field__content, text_field__variation: variation, -})}; +})} `; diff --git a/package-lock.json b/package-lock.json index bdffd9098..f8cedcbb0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "clean-webpack-plugin": "^4.0.0", "copy-webpack-plugin": "^4.6.0", "glob": "^7.2.0", + "highlight.js": "^11.9.0", "imagemin-webpack-plugin": "^2.4.2", "mini-css-extract-plugin": "^1.6.2", "node-sass-glob-importer": "^5.3.2", @@ -15500,12 +15501,11 @@ } }, "node_modules/highlight.js": { - "version": "10.7.3", - "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz", - "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==", - "dev": true, + "version": "11.9.0", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz", + "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==", "engines": { - "node": "*" + "node": ">=12.0.0" } }, "node_modules/history": { @@ -18367,6 +18367,15 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/lowlight/node_modules/highlight.js": { + "version": "10.7.3", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz", + "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==", + "dev": true, + "engines": { + "node": "*" + } + }, "node_modules/lpad-align": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/lpad-align/-/lpad-align-1.1.2.tgz", @@ -24742,6 +24751,15 @@ "react": ">= 0.14.0" } }, + "node_modules/react-syntax-highlighter/node_modules/highlight.js": { + "version": "10.7.3", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz", + "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==", + "dev": true, + "engines": { + "node": "*" + } + }, "node_modules/read-pkg": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", @@ -43325,10 +43343,9 @@ } }, "highlight.js": { - "version": "10.7.3", - "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz", - "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==", - "dev": true + "version": "11.9.0", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz", + "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==" }, "history": { "version": "5.0.0", @@ -45448,6 +45465,14 @@ "requires": { "fault": "^1.0.0", "highlight.js": "~10.7.0" + }, + "dependencies": { + "highlight.js": { + "version": "10.7.3", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz", + "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==", + "dev": true + } } }, "lpad-align": { @@ -50248,6 +50273,14 @@ "lowlight": "^1.17.0", "prismjs": "^1.27.0", "refractor": "^3.6.0" + }, + "dependencies": { + "highlight.js": { + "version": "10.7.3", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz", + "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==", + "dev": true + } } }, "read-pkg": { diff --git a/package.json b/package.json index a9e8373b5..d13a6df04 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "clean-webpack-plugin": "^4.0.0", "copy-webpack-plugin": "^4.6.0", "glob": "^7.2.0", + "highlight.js": "^11.9.0", "imagemin-webpack-plugin": "^2.4.2", "mini-css-extract-plugin": "^1.6.2", "node-sass-glob-importer": "^5.3.2", From 9571bd04e10600241b2492fdb7eb0f12421138ed Mon Sep 17 00:00:00 2001 From: David Blankenship <128765777+dblanken-yale@users.noreply.github.com> Date: Tue, 18 Jun 2024 11:16:52 -0400 Subject: [PATCH 9/9] feat(YSP-541): Embed: Add Microsoft Forms (#377) * feat(YSP-541): add ms form embed example * fix(YSP-541): add title to example msform * feat(YSP-541): forms height from 70 to 120vh * fix(YSP-541): update forms height to 90vh --------- Co-authored-by: Jim Vomero --- components/02-molecules/embed/_yds-embed.scss | 2 +- components/02-molecules/embed/embed.stories.js | 11 +++++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/components/02-molecules/embed/_yds-embed.scss b/components/02-molecules/embed/_yds-embed.scss index 9951f2016..e9e547b4b 100644 --- a/components/02-molecules/embed/_yds-embed.scss +++ b/components/02-molecules/embed/_yds-embed.scss @@ -10,7 +10,7 @@ } $heights: ( - 'form': 70vh, + 'form': 90vh, 'audio': 130px, 'unknown': 70vh, ); diff --git a/components/02-molecules/embed/embed.stories.js b/components/02-molecules/embed/embed.stories.js index d22824d7b..6bc84ca3c 100644 --- a/components/02-molecules/embed/embed.stories.js +++ b/components/02-molecules/embed/embed.stories.js @@ -70,3 +70,14 @@ export const EmbedPowerBI = ({ width, type, loading }) => embed__loading: loading, embed__type: type, }); + +export const EmbedMicrosoftForms = ({ width, type, loading }) => + embedTwig({ + embed__title: 'Example Microsoft Form', + embed__src: + 'https://forms.office.com/Pages/ResponsePage.aspx?id=u76M3Tkh-E20EU4-h6vrXJ-OMhrDFtBEifIUjjt2g_xURUVBU1IyUVlTVFFFNjJQQzJXM1pNMVozVi4u&embed=true', + embed__width: width, + embed__height: '100%', + embed__loading: loading, + embed__type: type, + });