From 20ac042a732b33e4134c0f07edbc554babb9c85d Mon Sep 17 00:00:00 2001 From: David Blankenship <128765777+dblanken-yale@users.noreply.github.com> Date: Tue, 25 Jun 2024 15:06:17 -0400 Subject: [PATCH] YSP-569: V1.4.0 Spotlight in banner area has extra padding above (#382) (#383) * fix(YSP-569): fix spacing of spotlights in banners We originally had javascript that would decorate certain components in order to allow us to modify the margin above and below to give a little space between them. In the context of adding these into a bannher, however, we do not want this spacing for the first element as it creates a space in between the header and the section. This allows us to target those specifically inside of the banner and remove this top margin so that it bumps up to the header. * feat(YSP-569): show banner spotlight in storybook --- .../_yds-content-spotlight-portrait.scss | 22 +++ .../text-with-image/_yds-text-with-image.scss | 22 +++ .../standard-page-banner-spotlights.twig | 145 ++++++++++++++++++ .../standard-pages/standard-page.stories.js | 55 +++++++ 4 files changed, 244 insertions(+) create mode 100644 components/05-page-examples/standard-pages/standard-page-banner-spotlights.twig diff --git a/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss b/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss index 4c7529ce7..ed45a2eba 100644 --- a/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss +++ b/components/02-molecules/content-spotlight-portrait/_yds-content-spotlight-portrait.scss @@ -116,6 +116,28 @@ $component-content-spotlight-port-themes: map.deep-get( --color-link-visited-base: var(--color-link-visited-light); --color-link-visited-hover: var(--color-link-visited-light-hover); } + + // spotlights inside of the banner should behave slightly different in that + // first-and-last and first should have zero top margin to allow it to bump up to + // the header. + .layout--banner & { + &[data-component-theme='default'], + &[data-spotlights-position='first-and-last'] { + @include tokens.spacing-page-section; + + margin-top: 0; + margin-bottom: var(--size-spacing-10); + } + + // We're using JavaScript to evaluate the last and first spotlights in a group of spotlights + &[data-spotlights-position='first'] { + margin-top: 0; + } + + &[data-spotlights-position='last'] { + margin-bottom: var(--size-spacing-10); + } + } } .content-spotlight-portrait__inner { diff --git a/components/02-molecules/text-with-image/_yds-text-with-image.scss b/components/02-molecules/text-with-image/_yds-text-with-image.scss index 3d5613305..5b2b05aaa 100644 --- a/components/02-molecules/text-with-image/_yds-text-with-image.scss +++ b/components/02-molecules/text-with-image/_yds-text-with-image.scss @@ -112,6 +112,28 @@ $component-content-spotlight-themes: map.deep-get( --color-link-visited-base: var(--color-link-visited-light); --color-link-visited-hover: var(--color-link-visited-light-hover); } + + // spotlights inside of the banner should behave slightly different in that + // first-and-last and first should have zero top margin to allow it to bump up to + // the header. + .layout--banner & { + &[data-component-theme='default'], + &[data-spotlights-position='first-and-last'] { + @include tokens.spacing-page-section; + + margin-top: 0; + margin-bottom: var(--size-spacing-10); + } + + // We're using JavaScript to evaluate the last and first spotlights in a group of spotlights + &[data-spotlights-position='first'] { + margin-top: 0; + } + + &[data-spotlights-position='last'] { + margin-bottom: var(--size-spacing-10); + } + } } .text-with-image__inner { diff --git a/components/05-page-examples/standard-pages/standard-page-banner-spotlights.twig b/components/05-page-examples/standard-pages/standard-page-banner-spotlights.twig new file mode 100644 index 000000000..7dc39c74c --- /dev/null +++ b/components/05-page-examples/standard-pages/standard-page-banner-spotlights.twig @@ -0,0 +1,145 @@ +{% extends "@page-layouts/yds-full-width.twig" %} + {% block page__header %} + {% include "@organisms/site-header/yds-site-header.twig" %} +
+ {% endblock %} + {% block page__content %} + {% include "@molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig" with { + content_spotlight_portrait__style: 'inline', + content_spotlight_portrait__theme: 'one', + }%} + + {% include "@molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig" with { + content_spotlight_portrait__style: 'inline', + content_spotlight_portrait__position: 'image-right', + content_spotlight_portrait__theme: 'two', + }%} + + {% include "@molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig" with { + content_spotlight_portrait__style: 'offset', + content_spotlight_portrait__theme: 'one', + }%} + + {% include "@molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig" with { + content_spotlight_portrait__style: 'offset', + content_spotlight_portrait__position: 'image-right', + content_spotlight_portrait__theme: 'two', + }%} + + {% include "@molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig" with { + content_spotlight_portrait__style: 'offset', + content_spotlight_portrait__position: 'image-left', + content_spotlight_portrait__theme: 'default', + }%} + + {% include "@molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig" with { + content_spotlight_portrait__style: 'offset', + content_spotlight_portrait__position: 'image-right', + content_spotlight_portrait__theme: 'default', + }%} + + {% include "@molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig" with { + content_spotlight_portrait__style: 'inline', + content_spotlight_portrait__position: 'image-left', + content_spotlight_portrait__theme: 'default', + }%} + + {% include "@molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig" with { + content_spotlight_portrait__style: 'inline', + content_spotlight_portrait__position: 'image-right', + content_spotlight_portrait__theme: 'default', + }%} + + {% include "@molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig" with { + content_spotlight_portrait__style: 'inline', + content_spotlight_portrait__position: 'image-left', + content_spotlight_portrait__theme: 'one', + }%} + + {% include "@molecules/text/yds-text-field.twig" with { + text_field__alignment: 'left', + text_field__content: 'People will want to chunk out text content by sections, often kicking off with a heading, to make it easier to maintain. E.g. rearranging sections of the page, dropping in CTAs, etc. The spacing isn’t the same using this approach, though.
+ ' + }%} + + {% include "@molecules/wrapped-image/yds-wrapped-image.twig" with { + wrapped_image__width: 'site', + wrapped_image__alignment: 'right', + wrapped_image__content: 'Dr. Davis’s research group at the Kline Chemistry Laboratory uses experiments at multiple scales – in vitro, single cell, and whole organism – to study fundamental and applied problems at the intersection of chemistry, physics, and biology. They develop new quantitative spectroscopic imaging techniques to elucidate the relationship between function and dynamics of proteins and RNA inside living cells.
Caitlin Davis obtained her Ph.D. from Emory University in 2015, where she studied protein folding in the laboratory of Dr. Brian Dyer in the Chemistry Department. She completed her postdoctoral training with Dr. Martin Gruebele at the Center for the Physics of Living Cells at the University of Illinois at Urbana-Champaign, where she developed a method for studying protein thermodynamics and kinetics in differentiated tissues of living zebrafish and she developed a mimic of cytoplasm that can be used to reproduce protein behaviors in vitro. She came to Yale as a faculty member in 2020.
', + } %} + + {% include "@atoms/divider/yds-divider.twig" with { + divider__component_width: 'site', + animate__item: 'enabled', + } %} + + {% include "@molecules/text/yds-text-field.twig" with { + text_field__alignment: 'left', + text_field__content: 'People will want to chunk out text content by sections, often kicking off with a heading, to make it easier to maintain. E.g. rearranging sections of the page, dropping in CTAs, etc. The spacing isn’t the same using this approach, though.
+ ' + }%} + + {% include "@atoms/divider/yds-divider.twig" with { + divider__component_width: 'site', + animate__item: 'enabled', + } %} + + {% include "@molecules/text/yds-text-field.twig" with { + text_field__alignment: 'left', + text_field__content: 'Chemistry has been responsible for some of the most significant improvements in our quality of life over the last century.
The discovery of antibiotics and other pharmaceuticals, the advent of computers, and the development of industrial methods to produce fertilizer, all have required fundamental advances in chemistry. Chemistry is increasingly playing a central role in the development of alternative-energy vectors to replace fossil fuels, the realization of practical quantum computers, the discovery of new methods to treat and prevent diseases, and the adoption of more sustainable industrial processes.
', + } %} + + {% include "@molecules/text/yds-text-field.twig" with { + text_field__alignment: 'left', + text_field__content: 'The undergraduate program in Chemistry at Yale reflects the position of chemistry as the foundation of all the molecular sciences. Students are equipped with the technical skills to appreciate the scientific basis for previous discoveries and develop the fundamental expertise required to make future breakthroughs. Under the tutelage of world-leading researchers, students are exposed to a broad range of topics in chemistry. The development of technical skills through lecture classes is complemented with hands-on experience in state-of-the-art chemistry laboratories.
Many students also perform independent laboratory research under the guidance of a faculty mentor. This rigorous training prepares students for professional careers in a diverse array of fields by teaching them how to apply the scientific method, providing them with skills in quantitative reasoning, and exposing them to scientific research.
After graduation, students with a B.A. or B.S. degree often pursue work or further studies in chemistry, biochemistry, or health-related disciplines, but also find their broad scientific training beneficial in energy research, policy, environment, business management, and law. As the problems of contemporary society involve ever more complex scientific issues, degree programs in the sciences become increasingly appropriate for students wishing to pursue careers in public policy, government, or public service.
The following headings are here only on this page to showcase them inside a text block.
After graduation, students with a B.A. or B.S. degree often pursue work or further studies in chemistry, biochemistry, or health-related disciplines, but also find their broad scientific training beneficial in energy research, policy, environment, business management, and law. As the problems of contemporary society involve ever more complex scientific issues, degree programs in the sciences become increasingly appropriate for students wishing to pursue careers in public policy, government, or public service.
After graduation, students with a B.A. or B.S. degree often pursue work or further studies in chemistry, biochemistry, or health-related disciplines, but also find their broad scientific training beneficial in energy research, policy, environment, business management, and law. As the problems of contemporary society involve ever more complex scientific issues, degree programs in the sciences become increasingly appropriate for students wishing to pursue careers in public policy, government, or public service.
After graduation, students with a B.A. or B.S. degree often pursue work or further studies in chemistry, biochemistry, or health-related disciplines, but also find their broad scientific training beneficial in energy research, policy, environment, business management, and law. As the problems of contemporary society involve ever more complex scientific issues, degree programs in the sciences become increasingly appropriate for students wishing to pursue careers in public policy, government, or public service.
', + } %} + + {% include "@atoms/divider/yds-divider.twig" with { + divider__component_width: 'site', + animate__item: 'enabled', + } %} + + {% include "@molecules/text/yds-text-field.twig" with { + text_field__alignment: 'left', + text_field__content: 'A comprehensive guide for prospective and current Chemistry Majors, with a complete description of requirements and opportunities.
A list of courses and a description of the Chemistry undergraduate program, including information on placement exams, laboratory registration, premedical students, and major requirements
', + } %} + + {% include "@molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig" with { + content_spotlight_portrait__style: 'inline', + content_spotlight_portrait__position: 'image-right', + content_spotlight_portrait__theme: 'default', + }%} + + {% include "@molecules/content-spotlight-portrait/yds-content-spotlight-portrait.twig" with { + content_spotlight_portrait__style: 'inline', + content_spotlight_portrait__position: 'image-left', + content_spotlight_portrait__theme: 'one', + }%} + + {% include "@molecules/callout/yds-callout.twig" with { + callout__alignment: 'left', + callouts: [ + { + callout__heading: 'Degree Programs', + callout__text: 'Designed for those who intend to pursue graduate and those who wish to immediately enter a career in which broad scientific training is beneficial.', + callout__link__content: 'Programs', + callout__link__url: '#', + }, + { + callout__heading: 'Preference Selection', + callout__text: 'Preference Selection system is now open and will close again on Monday, January 10, 2022.', + callout__link__content: 'Select preferences', + callout__link__url: '#', + }, + ], + } %} + {% endblock %} + diff --git a/components/05-page-examples/standard-pages/standard-page.stories.js b/components/05-page-examples/standard-pages/standard-page.stories.js index c0b04cd28..b2d6620b6 100644 --- a/components/05-page-examples/standard-pages/standard-page.stories.js +++ b/components/05-page-examples/standard-pages/standard-page.stories.js @@ -10,6 +10,7 @@ import standardPageSidebarTwig from './standard-page-with-sidebar.twig'; import standardPageQuickLinksTwig from './standard-page-with-quicklinks.twig'; import standardPageShortTwig from './standard-page-short.twig'; import standardPageSpotlightsTwig from './standard-page-spotlights.twig'; +import standardPageBannerSpotlightTwig from './standard-page-banner-spotlights.twig'; // Data files. import utilityNavData from '../../03-organisms/menu/utility-nav/utility-nav.yml'; @@ -240,6 +241,60 @@ export const BasicSpotlights = ({ ...imageData.responsive_images['2x3'], }); +// Spotlight Banner page +export const BasicBannerSpotlights = ({ + siteName, + pageTitle, + allowAnimatedItems = localStorage.getItem('yds-cl-twig-animate-items'), + globalTheme = localStorage.getItem('yds-cl-twig-global-theme'), + menuVariation = localStorage.getItem('yds-cl-twig-menu-variation'), + headerBorderThickness = localStorage.getItem( + 'yds-cl-twig-header-border-thickness', + ), + primaryNavPosition = localStorage.getItem('yds-cl-twig-primary-nav-position'), + siteHeaderTheme = localStorage.getItem('yds-cl-twig-site-header-theme'), + siteHeaderAccent = localStorage.getItem('yds-cl-twig-site-header-accent'), + utilityNavLinkContent, + utilityNavSearch, + siteFooterVariation = localStorage.getItem( + 'yds-cl-twig-site-footer-variation', + ), + siteFooterTheme = localStorage.getItem('yds-cl-twig-site-footer-theme'), + siteFooterAccent = localStorage.getItem('yds-cl-twig-site-footer-accent'), + footerBorderThickness = localStorage.getItem( + 'yds-cl-twig-footer-border-thickness', + ), + calloutBackground, +}) => + standardPageBannerSpotlightTwig({ + site_name: siteName, + page_title__heading: pageTitle, + page_title__meta: null, + site_animate_components: allowAnimatedItems, + site_global__theme: globalTheme, + site_header__border_thickness: headerBorderThickness, + site_header__nav_position: primaryNavPosition, + site_header__theme: siteHeaderTheme, + site_header__accent: siteHeaderAccent, + site_footer__variation: siteFooterVariation, + site_footer__border_thickness: footerBorderThickness, + site_footer__theme: siteFooterTheme, + site_footer__accent: siteFooterAccent, + utility_nav__items: utilityNavData.items, + primary_nav__items: primaryNavData.items, + site_header__menu__variation: menuVariation, + utility_nav__link__content: utilityNavLinkContent, + utility_nav__link__url: '#', + utility_nav__search: utilityNavSearch, + breadcrumbs__items: breadcrumbData.items, + callout__background_color: calloutBackground, + ...textWithImageData, + ...referenceCardData, + ...socialLinksData, + ...contentSpotlightPortraitData, + ...imageData.responsive_images['2x3'], + }); + // With Banner export const WithBanner = ({ siteName,