From 87f54d53a19408f76fe818bc738bbb6c406d9a41 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Mon, 25 Nov 2024 16:23:14 -0600 Subject: [PATCH 01/17] feat(IYY-283): add initial fifty-fifty layout --- .../fifty-fifty/_fifty-fifty--example.twig | 31 +++ .../layout/fifty-fifty/_yds-fifty-fifty.scss | 179 ++++++++++++++++++ .../layout/fifty-fifty/yds-fifty-fifty.twig | 24 +++ .../03-organisms/layout/layout.stories.js | 26 +++ components/03-organisms/organisms.scss | 1 + 5 files changed, 261 insertions(+) create mode 100644 components/03-organisms/layout/fifty-fifty/_fifty-fifty--example.twig create mode 100644 components/03-organisms/layout/fifty-fifty/_yds-fifty-fifty.scss create mode 100644 components/03-organisms/layout/fifty-fifty/yds-fifty-fifty.twig diff --git a/components/03-organisms/layout/fifty-fifty/_fifty-fifty--example.twig b/components/03-organisms/layout/fifty-fifty/_fifty-fifty--example.twig new file mode 100644 index 000000000..36012a96b --- /dev/null +++ b/components/03-organisms/layout/fifty-fifty/_fifty-fifty--example.twig @@ -0,0 +1,31 @@ +{% extends "@organisms/layout/fifty-fifty/yds-fifty-fifty.twig" %} + {% block fifty_fifty__primary %} + {% include "@molecules/text/yds-text-field.twig" with { + text_field__content: '

Primary Column

The Undergraduate Handbook

A comprehensive guide for prospective and current Chemistry Majors, with a complete description of requirements and opportunities.

View the handbook online

Course List

A list of courses and a description of the Chemistry undergraduate program, including information on placement exams, laboratory registration, premedical students, and major requirements

Yale College programs of study

', + } %} {% endblock %} + {% block fifty_fifty__secondary %} + + {% include "@molecules/accordion/yds-accordion.twig" with { + accordion__heading: 'Accordion Group', + accordion__width: 'site', + accordion__alignment: 'left', + accordion__items: [ + { + accordion__item__heading: accordion__item__heading, + accordion__item__content: accordion__item__content + }, + { + accordion__item__heading: 'Books', + accordion__item__content: accordion__item__content + }, + { + accordion__item__heading: 'Courses', + accordion__item__content: accordion__item__content + }, + { + accordion__item__heading: 'Events', + accordion__item__content: accordion__item__content + }, + ] + } %} + {% endblock %} diff --git a/components/03-organisms/layout/fifty-fifty/_yds-fifty-fifty.scss b/components/03-organisms/layout/fifty-fifty/_yds-fifty-fifty.scss new file mode 100644 index 000000000..22e46334b --- /dev/null +++ b/components/03-organisms/layout/fifty-fifty/_yds-fifty-fifty.scss @@ -0,0 +1,179 @@ +@use '../../../00-tokens/tokens'; +@use '../../../00-tokens/functions/map'; +@use '../../../01-atoms/atoms'; +@use '../../grid-mixins' as grid; + +$global-fifty-fifty-themes: map.deep-get(tokens.$tokens, 'global-themes'); +$fifty-fifty-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); +$break-layout-fifty-fifty: tokens.$break-2xl; +$break-layout-fifty-fifty-max: $break-layout-fifty-fifty - 0.05; + +.yds-fifty-fifty { + @include tokens.spacing-page-section; + + // Component themes defaults: iterate over each component theme to establish + // default variables. + @each $theme, $value in $fifty-fifty-component-themes { + &[data-component-theme='#{$theme}'] { + // prettier-ignore + --color-slot-one: var(--component-themes-#{$theme}-slot-one); + --color-slot-two: var(--component-themes-#{$theme}-slot-two); + --color-slot-three: var(--component-themes-#{$theme}-slot-three); + --color-slot-four: var(--component-themes-#{$theme}-slot-four); + --color-slot-five: var(--component-themes-#{$theme}-slot-five); + --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-fifty-fifty-theme: var(--color-slot-one); + --color-fifty-fifty-content: var(--color-slot-eight); + + background-color: var(--color-fifty-fifty-theme); + color: var(--color-fifty-fifty-content); + + .link, + a, + facts-and-figures__group_content { + --color-text-shadow: var(--color-fifty-fifty-theme); + --color-link-hover: var(--color-link-hover); + } + + a:not([data-link-style]) { + @include atoms.link; + + color: var(--color-link-base); + + &:hover { + color: var(--color-fifty-fifty-content); + } + } + } + } + + // Global themes: set color slots for each theme + // This establishes `--color-slot-` variables name-spaced to the selector + // in which it is used. We can map component-level variables to global-level + // `--color-slot-` variables. + @each $globalTheme, $value in $global-fifty-fifty-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); + --color-slot-three: var( + --global-themes-#{$globalTheme}-colors-slot-three + ); + --color-slot-four: var(--global-themes-#{$globalTheme}-colors-slot-four); + --color-slot-five: var(--global-themes-#{$globalTheme}-colors-slot-five); + --color-slot-six: var(--global-themes-#{$globalTheme}-colors-slot-six); + --color-slot-seven: var( + --global-themes-#{$globalTheme}-colors-slot-seven + ); + --color-slot-eight: var( + --global-themes-#{$globalTheme}-colors-slot-eight + ); + + @if $globalTheme == 'four' { + // Switch colors slot in order to have the selected background colors per component theme. + --color-slot-two: var(--global-themes-four-colors-slot-five); + --color-slot-five: var(--global-themes-four-colors-slot-two); + + // Set color slot for the text on light background. + --color-slot-seven: var(--global-themes-four-colors-slot-six); + } + } + } + + // 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-fifty-fifty-theme: var(--color-slot-one); + --color-fifty-fifty-content: var(--color-slot-eight); + --color-link-visited-base: var(--color-link-visited-light); + --color-link-visited-hover: var(--color-link-visited-light-hover); + --color-link-base: var(--color-slot-eight); + --color-link-hover: var(--color-slot-eight); + } + + &[data-component-theme='two'] { + --color-fifty-fifty-theme: var(--color-slot-four); + --color-fifty-fifty-content: var(--color-slot-seven); + --color-link-base: var(--color-slot-seven); + --color-link-hover: var(--color-slot-seven); + --color-heading: var(--color-slot-six); + } + + &[data-component-theme='three'] { + --color-fifty-fifty-theme: var(--color-slot-five); + --color-fifty-fifty-content: var(--color-slot-eight); + --color-link-visited-base: var(--color-link-visited-light); + --color-link-visited-hover: var(--color-link-visited-light-hover); + --color-link-base: var(--color-slot-eight); + --color-link-hover: var(--color-slot-eight); + } + + &[data-component-theme='four'] { + --color-fifty-fifty-theme: var(--color-slot-two); + --color-fifty-fifty-content: var(--color-slot-eight); + --color-link-visited-base: var(--color-link-visited-light); + --color-link-visited-hover: var(--color-link-visited-light-hover); + --color-heading: var(--color-slot-six); + + [data-global-theme='four'] & { + --color-fifty-fifty-theme: var(--component-themes-five-background); + --color-fifty-fifty-content: var(--color-slot-seven); + } + } +} + +.yds-fifty-fifty__inner { + padding-block-start: var(--size-spacing-10); + padding-block-end: var(--size-spacing-10); + + @media (min-width: $break-layout-fifty-fifty) { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: var(--spacing-page-inner); + } + + // Flex sets `min-width` of children to `auto` by default... but this breaks + // some of our base layout styles (causes horizontal scrolling), so we need to + // reset it to `0`. + > * { + min-width: 0; + + // Then, some of our components that are intended to be "full-page-width" + // will expand outside of the layout columns, so we need to set a max-width + // on those to keep them contained within the section columns. + > * { + max-width: 100%; + } + } +} + +.yds-fifty-fifty__primary { + @media (max-width: $break-layout-fifty-fifty-max) { + margin-bottom: var(--spacing-page-inner); + } + + @media (min-width: $break-layout-fifty-fifty) { + flex: 0 1 calc(var(--size-component-layout-width-site) / 2); + } +} + +.yds-fifty-fifty__secondary { + display: flex; + + @media (min-width: $break-layout-fifty-fifty) { + flex: 0 1 calc(var(--size-component-layout-width-site) / 2); + } + + [data-component-has-divider='true'] & { + @media (min-width: $break-layout-fifty-fifty) { + &::before { + content: ''; + border-left: var(--border-thickness-2) solid var(--color-gray-300); + align-self: stretch; + padding-left: var(--spacing-page-inner); + } + } + } +} diff --git a/components/03-organisms/layout/fifty-fifty/yds-fifty-fifty.twig b/components/03-organisms/layout/fifty-fifty/yds-fifty-fifty.twig new file mode 100644 index 000000000..76fdc0714 --- /dev/null +++ b/components/03-organisms/layout/fifty-fifty/yds-fifty-fifty.twig @@ -0,0 +1,24 @@ +{# + # In this file, we're checking `if directory` in order to determine if the + # active environment is a Drupal site. We need to do this because Drupal's + # drag-and-drop interface needs specific attributes on the wrapper elements + # that would not make sense, or even cause errors in environments like + # Storybook. + #} + +{% set fifty_fifty__base_class = 'yds-fifty-fifty' %} + +
+
+
+ {% block fifty_fifty__primary %} + {{ content.primary }} + {% endblock %} +
+
+ {% block fifty_fifty__secondary %} + {{ content.secondary }} + {% endblock %} +
+
+
diff --git a/components/03-organisms/layout/layout.stories.js b/components/03-organisms/layout/layout.stories.js index 5f01b7cb7..efb5e864a 100644 --- a/components/03-organisms/layout/layout.stories.js +++ b/components/03-organisms/layout/layout.stories.js @@ -1,8 +1,12 @@ // Markup. import twoColumnTwig from './two-column/_two-column--example.twig'; +import fiftyFiftyTwig from './fifty-fifty/_fifty-fifty--example.twig'; // Data files import textData from '../../02-molecules/text/text-field.yml'; +import accordionData from '../../02-molecules/accordion/accordion.yml'; + +import '../../02-molecules/accordion/yds-accordion'; /** * Storybook Definition. @@ -12,6 +16,28 @@ export default { parameters: { layout: 'fullscreen', }, + argTypes: { + divider: { + name: 'Divider', + type: 'boolean', + }, + theme: { + name: 'Component Theme', + type: 'select', + options: ['one', 'two', 'three', 'four'], + control: { type: 'select' }, + }, + }, + args: { + divider: false, + }, }; export const TwoColumn = () => twoColumnTwig(textData); +export const FiftyFifty = ({ divider, theme }) => + fiftyFiftyTwig({ + ...textData, + ...accordionData, + layout_divider: divider, + component_theme: theme, + }); diff --git a/components/03-organisms/organisms.scss b/components/03-organisms/organisms.scss index f0c080d1a..51480ecf1 100644 --- a/components/03-organisms/organisms.scss +++ b/components/03-organisms/organisms.scss @@ -13,3 +13,4 @@ @forward './site-header/yds-site-header'; @forward './facts-and-figures-group/yds-facts-and-figures-group'; @forward './tiles/yds-tiles'; +@forward './layout/fifty-fifty/yds-fifty-fifty'; From 9b5322a159dd315cc24c390167352b7266b8b6a8 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Tue, 26 Nov 2024 10:28:19 -0600 Subject: [PATCH 02/17] feat(IYY-283): add layout component --- .../layout/fifty-fifty/yds-fifty-fifty.twig | 24 ---- .../03-organisms/layout/layout.stories.js | 21 +++- .../_layout--example.twig} | 17 ++- .../_yds-layout.scss} | 110 +++++++++++------- .../layout/layout/yds-layout.twig | 39 +++++++ components/03-organisms/organisms.scss | 2 +- 6 files changed, 137 insertions(+), 76 deletions(-) delete mode 100644 components/03-organisms/layout/fifty-fifty/yds-fifty-fifty.twig rename components/03-organisms/layout/{fifty-fifty/_fifty-fifty--example.twig => layout/_layout--example.twig} (60%) rename components/03-organisms/layout/{fifty-fifty/_yds-fifty-fifty.scss => layout/_yds-layout.scss} (64%) create mode 100644 components/03-organisms/layout/layout/yds-layout.twig diff --git a/components/03-organisms/layout/fifty-fifty/yds-fifty-fifty.twig b/components/03-organisms/layout/fifty-fifty/yds-fifty-fifty.twig deleted file mode 100644 index 76fdc0714..000000000 --- a/components/03-organisms/layout/fifty-fifty/yds-fifty-fifty.twig +++ /dev/null @@ -1,24 +0,0 @@ -{# - # In this file, we're checking `if directory` in order to determine if the - # active environment is a Drupal site. We need to do this because Drupal's - # drag-and-drop interface needs specific attributes on the wrapper elements - # that would not make sense, or even cause errors in environments like - # Storybook. - #} - -{% set fifty_fifty__base_class = 'yds-fifty-fifty' %} - -
-
-
- {% block fifty_fifty__primary %} - {{ content.primary }} - {% endblock %} -
-
- {% block fifty_fifty__secondary %} - {{ content.secondary }} - {% endblock %} -
-
-
diff --git a/components/03-organisms/layout/layout.stories.js b/components/03-organisms/layout/layout.stories.js index efb5e864a..0938b5a4d 100644 --- a/components/03-organisms/layout/layout.stories.js +++ b/components/03-organisms/layout/layout.stories.js @@ -1,6 +1,6 @@ // Markup. import twoColumnTwig from './two-column/_two-column--example.twig'; -import fiftyFiftyTwig from './fifty-fifty/_fifty-fifty--example.twig'; +import layoutTwig from './layout/_layout--example.twig'; // Data files import textData from '../../02-molecules/text/text-field.yml'; @@ -12,7 +12,7 @@ import '../../02-molecules/accordion/yds-accordion'; * Storybook Definition. */ export default { - title: 'Organisms/Layout/Two Column', + title: 'Organisms/Layouts', parameters: { layout: 'fullscreen', }, @@ -21,6 +21,12 @@ export default { name: 'Divider', type: 'boolean', }, + layoutOption: { + name: 'Layout', + type: 'select', + options: ['fifty-fifty', 'thirty'], + control: { type: 'select' }, + }, theme: { name: 'Component Theme', type: 'select', @@ -30,14 +36,17 @@ export default { }, args: { divider: false, + layout: 'fifty-fifty', + theme: 'one', }, }; export const TwoColumn = () => twoColumnTwig(textData); -export const FiftyFifty = ({ divider, theme }) => - fiftyFiftyTwig({ +export const layout = ({ divider, theme, layoutOption }) => + layoutTwig({ ...textData, ...accordionData, - layout_divider: divider, - component_theme: theme, + layout__divider: divider ? 'true' : 'false', + component__theme: theme, + component__layout: layoutOption, }); diff --git a/components/03-organisms/layout/fifty-fifty/_fifty-fifty--example.twig b/components/03-organisms/layout/layout/_layout--example.twig similarity index 60% rename from components/03-organisms/layout/fifty-fifty/_fifty-fifty--example.twig rename to components/03-organisms/layout/layout/_layout--example.twig index 36012a96b..0f775f6da 100644 --- a/components/03-organisms/layout/fifty-fifty/_fifty-fifty--example.twig +++ b/components/03-organisms/layout/layout/_layout--example.twig @@ -1,11 +1,11 @@ -{% extends "@organisms/layout/fifty-fifty/yds-fifty-fifty.twig" %} - {% block fifty_fifty__primary %} +{% extends "@organisms/layout/layout/yds-layout.twig" %} + {% block layout__primary %} {% include "@molecules/text/yds-text-field.twig" with { text_field__content: '

Primary Column

The Undergraduate Handbook

A comprehensive guide for prospective and current Chemistry Majors, with a complete description of requirements and opportunities.

View the handbook online

Course List

A list of courses and a description of the Chemistry undergraduate program, including information on placement exams, laboratory registration, premedical students, and major requirements

Yale College programs of study

', - } %} {% endblock %} - {% block fifty_fifty__secondary %} - - {% include "@molecules/accordion/yds-accordion.twig" with { + } %} + {% endblock %} + {% block layout__secondary %} + {% include "@molecules/accordion/yds-accordion.twig" with { accordion__heading: 'Accordion Group', accordion__width: 'site', accordion__alignment: 'left', @@ -29,3 +29,8 @@ ] } %} {% endblock %} + {% block layout__tertiary %} + {% include "@molecules/text/yds-text-field.twig" with { + text_field__content: '

Tertiary Column

The Undergraduate Handbook

A comprehensive guide for prospective and current Chemistry Majors, with a complete description of requirements and opportunities.

View the handbook online

Course List

A list of courses and a description of the Chemistry undergraduate program, including information on placement exams, laboratory registration, premedical students, and major requirements

Yale College programs of study

', + } %} + {% endblock %} diff --git a/components/03-organisms/layout/fifty-fifty/_yds-fifty-fifty.scss b/components/03-organisms/layout/layout/_yds-layout.scss similarity index 64% rename from components/03-organisms/layout/fifty-fifty/_yds-fifty-fifty.scss rename to components/03-organisms/layout/layout/_yds-layout.scss index 22e46334b..b3aa6b551 100644 --- a/components/03-organisms/layout/fifty-fifty/_yds-fifty-fifty.scss +++ b/components/03-organisms/layout/layout/_yds-layout.scss @@ -3,17 +3,17 @@ @use '../../../01-atoms/atoms'; @use '../../grid-mixins' as grid; -$global-fifty-fifty-themes: map.deep-get(tokens.$tokens, 'global-themes'); -$fifty-fifty-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); -$break-layout-fifty-fifty: tokens.$break-2xl; -$break-layout-fifty-fifty-max: $break-layout-fifty-fifty - 0.05; +$global-layout-themes: map.deep-get(tokens.$tokens, 'global-themes'); +$layout-component-themes: map.deep-get(tokens.$tokens, 'component-themes'); +$break-layout-layout: tokens.$break-2xl; +$break-layout-layout-max: $break-layout-layout - 0.05; -.yds-fifty-fifty { +.yds-layout { @include tokens.spacing-page-section; // Component themes defaults: iterate over each component theme to establish // default variables. - @each $theme, $value in $fifty-fifty-component-themes { + @each $theme, $value in $layout-component-themes { &[data-component-theme='#{$theme}'] { // prettier-ignore --color-slot-one: var(--component-themes-#{$theme}-slot-one); @@ -24,16 +24,15 @@ $break-layout-fifty-fifty-max: $break-layout-fifty-fifty - 0.05; --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-fifty-fifty-theme: var(--color-slot-one); - --color-fifty-fifty-content: var(--color-slot-eight); + --color-layout-theme: var(--color-slot-one); + --color-layout-content: var(--color-slot-eight); - background-color: var(--color-fifty-fifty-theme); - color: var(--color-fifty-fifty-content); + background-color: var(--color-layout-theme); + color: var(--color-layout-content); .link, - a, - facts-and-figures__group_content { - --color-text-shadow: var(--color-fifty-fifty-theme); + a { + --color-text-shadow: var(--color-layout-theme); --color-link-hover: var(--color-link-hover); } @@ -43,7 +42,7 @@ $break-layout-fifty-fifty-max: $break-layout-fifty-fifty - 0.05; color: var(--color-link-base); &:hover { - color: var(--color-fifty-fifty-content); + color: var(--color-layout-content); } } } @@ -53,7 +52,7 @@ $break-layout-fifty-fifty-max: $break-layout-fifty-fifty - 0.05; // 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-fifty-fifty-themes { + @each $globalTheme, $value in $global-layout-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); @@ -84,8 +83,8 @@ $break-layout-fifty-fifty-max: $break-layout-fifty-fifty - 0.05; // 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-fifty-fifty-theme: var(--color-slot-one); - --color-fifty-fifty-content: var(--color-slot-eight); + --color-layout-theme: var(--color-slot-one); + --color-layout-content: var(--color-slot-eight); --color-link-visited-base: var(--color-link-visited-light); --color-link-visited-hover: var(--color-link-visited-light-hover); --color-link-base: var(--color-slot-eight); @@ -93,16 +92,16 @@ $break-layout-fifty-fifty-max: $break-layout-fifty-fifty - 0.05; } &[data-component-theme='two'] { - --color-fifty-fifty-theme: var(--color-slot-four); - --color-fifty-fifty-content: var(--color-slot-seven); + --color-layout-theme: var(--color-slot-four); + --color-layout-content: var(--color-slot-seven); --color-link-base: var(--color-slot-seven); --color-link-hover: var(--color-slot-seven); --color-heading: var(--color-slot-six); } &[data-component-theme='three'] { - --color-fifty-fifty-theme: var(--color-slot-five); - --color-fifty-fifty-content: var(--color-slot-eight); + --color-layout-theme: var(--color-slot-five); + --color-layout-content: var(--color-slot-eight); --color-link-visited-base: var(--color-link-visited-light); --color-link-visited-hover: var(--color-link-visited-light-hover); --color-link-base: var(--color-slot-eight); @@ -110,24 +109,20 @@ $break-layout-fifty-fifty-max: $break-layout-fifty-fifty - 0.05; } &[data-component-theme='four'] { - --color-fifty-fifty-theme: var(--color-slot-two); - --color-fifty-fifty-content: var(--color-slot-eight); + --color-layout-theme: var(--color-slot-two); + --color-layout-content: var(--color-slot-eight); --color-link-visited-base: var(--color-link-visited-light); --color-link-visited-hover: var(--color-link-visited-light-hover); - --color-heading: var(--color-slot-six); - - [data-global-theme='four'] & { - --color-fifty-fifty-theme: var(--component-themes-five-background); - --color-fifty-fifty-content: var(--color-slot-seven); - } + --color-link-base: var(--color-slot-eight); + --color-link-hover: var(--color-slot-eight); } } -.yds-fifty-fifty__inner { +.yds-layout__inner { padding-block-start: var(--size-spacing-10); padding-block-end: var(--size-spacing-10); - @media (min-width: $break-layout-fifty-fifty) { + @media (min-width: $break-layout-layout) { display: flex; justify-content: space-between; align-items: flex-start; @@ -149,25 +144,62 @@ $break-layout-fifty-fifty-max: $break-layout-fifty-fifty - 0.05; } } -.yds-fifty-fifty__primary { - @media (max-width: $break-layout-fifty-fifty-max) { +.yds-layout__primary { + @media (max-width: $break-layout-layout-max) { margin-bottom: var(--spacing-page-inner); } - @media (min-width: $break-layout-fifty-fifty) { - flex: 0 1 calc(var(--size-component-layout-width-site) / 2); + [data-component-layout='fifty-fifty'] & { + @media (min-width: $break-layout-layout) { + flex: 0 1 calc(var(--size-component-layout-width-site) / 2); + } + } + + [data-component-layout='thirty'] & { + @media (min-width: $break-layout-layout) { + flex: 0 1 calc(var(--size-component-layout-width-site) / 3); + } } } -.yds-fifty-fifty__secondary { +.yds-layout__secondary { display: flex; - @media (min-width: $break-layout-fifty-fifty) { - flex: 0 1 calc(var(--size-component-layout-width-site) / 2); + [data-component-layout='fifty-fifty'] & { + @media (min-width: $break-layout-layout) { + flex: 0 1 calc(var(--size-component-layout-width-site) / 2); + } + } + + [data-component-layout='thirty'] & { + @media (min-width: $break-layout-layout) { + flex: 0 1 calc(var(--size-component-layout-width-site) / 3); + } + } + + [data-component-has-divider='true'] & { + @media (min-width: $break-layout-layout) { + &::before { + content: ''; + border-left: var(--border-thickness-2) solid var(--color-gray-300); + align-self: stretch; + padding-left: var(--spacing-page-inner); + } + } + } +} + +.yds-layout__tertiary { + display: flex; + + [data-component-layout='thirty'] & { + @media (min-width: $break-layout-layout) { + flex: 0 1 calc(var(--size-component-layout-width-site) / 3); + } } [data-component-has-divider='true'] & { - @media (min-width: $break-layout-fifty-fifty) { + @media (min-width: $break-layout-layout) { &::before { content: ''; border-left: var(--border-thickness-2) solid var(--color-gray-300); diff --git a/components/03-organisms/layout/layout/yds-layout.twig b/components/03-organisms/layout/layout/yds-layout.twig new file mode 100644 index 000000000..ea4fb33de --- /dev/null +++ b/components/03-organisms/layout/layout/yds-layout.twig @@ -0,0 +1,39 @@ +{# + # In this file, we're checking `if directory` in order to determine if the + # active environment is a Drupal site. We need to do this because Drupal's + # drag-and-drop interface needs specific attributes on the wrapper elements + # that would not make sense, or even cause errors in environments like + # Storybook. + #} + +{% set layout__base_class = 'yds-layout' %} + +{% set layout__attributes = { + 'data-component-has-divider': layout__divider == 'true' ? 'true' : 'false', + 'data-component-theme': component__theme|default('default'), + 'data-component-layout': component__layout|default('fifty-fifty'), + 'data-component-width': component__width|default('site'), + 'class': bem(layout__base_class), +} %} + +
+
+
+ {% block layout__primary %} + {{ content.primary }} + {% endblock %} +
+
+ {% block layout__secondary %} + {{ content.secondary }} + {% endblock %} +
+ {% if component__layout == 'thirty' %} +
+ {% block layout__tertiary %} + {{ content.tertiary }} + {% endblock %} +
+ {% endif %} +
+
diff --git a/components/03-organisms/organisms.scss b/components/03-organisms/organisms.scss index 51480ecf1..de12cb86c 100644 --- a/components/03-organisms/organisms.scss +++ b/components/03-organisms/organisms.scss @@ -13,4 +13,4 @@ @forward './site-header/yds-site-header'; @forward './facts-and-figures-group/yds-facts-and-figures-group'; @forward './tiles/yds-tiles'; -@forward './layout/fifty-fifty/yds-fifty-fifty'; +@forward './layout/layout/yds-layout'; From 2d53360fb9864381c1e59f33394beccd4e0dcfba Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Tue, 26 Nov 2024 13:01:59 -0600 Subject: [PATCH 03/17] feat(IYY-283): fifty-fifty and thirty-thirty-thirty layouts --- components/03-organisms/layout/layout.stories.js | 8 ++++++-- .../03-organisms/layout/layout/_layout--example.twig | 4 +--- components/03-organisms/layout/layout/_yds-layout.scss | 6 +++--- components/03-organisms/layout/layout/yds-layout.twig | 2 +- 4 files changed, 11 insertions(+), 9 deletions(-) diff --git a/components/03-organisms/layout/layout.stories.js b/components/03-organisms/layout/layout.stories.js index 0938b5a4d..e154f6aff 100644 --- a/components/03-organisms/layout/layout.stories.js +++ b/components/03-organisms/layout/layout.stories.js @@ -6,6 +6,9 @@ import layoutTwig from './layout/_layout--example.twig'; import textData from '../../02-molecules/text/text-field.yml'; import accordionData from '../../02-molecules/accordion/accordion.yml'; +// Image atom component - generic images for demo +import imageData from '../../01-atoms/images/image/image.yml'; + import '../../02-molecules/accordion/yds-accordion'; /** @@ -24,7 +27,7 @@ export default { layoutOption: { name: 'Layout', type: 'select', - options: ['fifty-fifty', 'thirty'], + options: ['fifty-fifty', 'thirty-thirty-thirty'], control: { type: 'select' }, }, theme: { @@ -36,7 +39,7 @@ export default { }, args: { divider: false, - layout: 'fifty-fifty', + layoutOption: 'fifty-fifty', theme: 'one', }, }; @@ -46,6 +49,7 @@ export const layout = ({ divider, theme, layoutOption }) => layoutTwig({ ...textData, ...accordionData, + ...imageData.responsive_images['4x3'], layout__divider: divider ? 'true' : 'false', component__theme: theme, component__layout: layoutOption, diff --git a/components/03-organisms/layout/layout/_layout--example.twig b/components/03-organisms/layout/layout/_layout--example.twig index 0f775f6da..6af0c3f90 100644 --- a/components/03-organisms/layout/layout/_layout--example.twig +++ b/components/03-organisms/layout/layout/_layout--example.twig @@ -30,7 +30,5 @@ } %} {% endblock %} {% block layout__tertiary %} - {% include "@molecules/text/yds-text-field.twig" with { - text_field__content: '

Tertiary Column

The Undergraduate Handbook

A comprehensive guide for prospective and current Chemistry Majors, with a complete description of requirements and opportunities.

View the handbook online

Course List

A list of courses and a description of the Chemistry undergraduate program, including information on placement exams, laboratory registration, premedical students, and major requirements

Yale College programs of study

', - } %} + {% include "@atoms/images/image/_responsive-image.twig" %} {% endblock %} diff --git a/components/03-organisms/layout/layout/_yds-layout.scss b/components/03-organisms/layout/layout/_yds-layout.scss index b3aa6b551..61935ba0e 100644 --- a/components/03-organisms/layout/layout/_yds-layout.scss +++ b/components/03-organisms/layout/layout/_yds-layout.scss @@ -155,7 +155,7 @@ $break-layout-layout-max: $break-layout-layout - 0.05; } } - [data-component-layout='thirty'] & { + [data-component-layout='thirty-thirty-thirty'] & { @media (min-width: $break-layout-layout) { flex: 0 1 calc(var(--size-component-layout-width-site) / 3); } @@ -171,7 +171,7 @@ $break-layout-layout-max: $break-layout-layout - 0.05; } } - [data-component-layout='thirty'] & { + [data-component-layout='thirty-thirty-thirty'] & { @media (min-width: $break-layout-layout) { flex: 0 1 calc(var(--size-component-layout-width-site) / 3); } @@ -192,7 +192,7 @@ $break-layout-layout-max: $break-layout-layout - 0.05; .yds-layout__tertiary { display: flex; - [data-component-layout='thirty'] & { + [data-component-layout='thirty-thirty-thirty'] & { @media (min-width: $break-layout-layout) { flex: 0 1 calc(var(--size-component-layout-width-site) / 3); } diff --git a/components/03-organisms/layout/layout/yds-layout.twig b/components/03-organisms/layout/layout/yds-layout.twig index ea4fb33de..bc2a223ef 100644 --- a/components/03-organisms/layout/layout/yds-layout.twig +++ b/components/03-organisms/layout/layout/yds-layout.twig @@ -28,7 +28,7 @@ {{ content.secondary }} {% endblock %} - {% if component__layout == 'thirty' %} + {% if component__layout == 'thirty-thirty-thirty' %}
{% block layout__tertiary %} {{ content.tertiary }} From c8dd2114acddd15262974bc6d82393b3a94b2fa5 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Tue, 26 Nov 2024 14:20:23 -0600 Subject: [PATCH 04/17] feat(IYY-283): add two-thirds-one-thirds option --- components/03-organisms/layout/layout.stories.js | 2 +- .../03-organisms/layout/layout/_layout--example.twig | 7 +++++++ .../03-organisms/layout/layout/_yds-layout.scss | 12 ++++++++++++ 3 files changed, 20 insertions(+), 1 deletion(-) diff --git a/components/03-organisms/layout/layout.stories.js b/components/03-organisms/layout/layout.stories.js index e154f6aff..77a79c059 100644 --- a/components/03-organisms/layout/layout.stories.js +++ b/components/03-organisms/layout/layout.stories.js @@ -27,7 +27,7 @@ export default { layoutOption: { name: 'Layout', type: 'select', - options: ['fifty-fifty', 'thirty-thirty-thirty'], + options: ['fifty-fifty', 'thirty-thirty-thirty', 'two-thirds-one-thirds'], control: { type: 'select' }, }, theme: { diff --git a/components/03-organisms/layout/layout/_layout--example.twig b/components/03-organisms/layout/layout/_layout--example.twig index 6af0c3f90..124a0258f 100644 --- a/components/03-organisms/layout/layout/_layout--example.twig +++ b/components/03-organisms/layout/layout/_layout--example.twig @@ -5,6 +5,7 @@ } %} {% endblock %} {% block layout__secondary %} + {% if component__layout == 'fifty-fifty' %} {% include "@molecules/accordion/yds-accordion.twig" with { accordion__heading: 'Accordion Group', accordion__width: 'site', @@ -28,6 +29,12 @@ }, ] } %} + {% else %} + {% include "@molecules/text/yds-text-field.twig" with { + text_field__content: '

Secondary Column

The Undergraduate Handbook

A comprehensive guide for prospective and current Chemistry Majors, with a complete description of requirements and opportunities.

View the handbook online

Course List

A list of courses and a description of the Chemistry undergraduate program, including information on placement exams, laboratory registration, premedical students, and major requirements

Yale College programs of study

', + } %} + {% endif %} + {% endblock %} {% block layout__tertiary %} {% include "@atoms/images/image/_responsive-image.twig" %} diff --git a/components/03-organisms/layout/layout/_yds-layout.scss b/components/03-organisms/layout/layout/_yds-layout.scss index 61935ba0e..d0d2fc7da 100644 --- a/components/03-organisms/layout/layout/_yds-layout.scss +++ b/components/03-organisms/layout/layout/_yds-layout.scss @@ -160,6 +160,12 @@ $break-layout-layout-max: $break-layout-layout - 0.05; flex: 0 1 calc(var(--size-component-layout-width-site) / 3); } } + + [data-component-layout='two-thirds-one-thirds'] & { + @media (min-width: $break-layout-layout) { + flex: 1 0 var(--size-component-layout-width-content); + } + } } .yds-layout__secondary { @@ -177,6 +183,12 @@ $break-layout-layout-max: $break-layout-layout - 0.05; } } + [data-component-layout='two-thirds-one-thirds'] & { + @media (min-width: $break-layout-layout) { + flex: 0 1 calc(37.5rem + var(--spacing-component-gutter)); + } + } + [data-component-has-divider='true'] & { @media (min-width: $break-layout-layout) { &::before { From 15653be0dd186d3e5eb4042776bf7e0de111ce21 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Tue, 26 Nov 2024 16:13:15 -0600 Subject: [PATCH 05/17] feat(IYY-283): make divider an element so each column gets equal width and spacing --- .../accordion/_yds-accordion.scss | 6 +++ .../layout/layout/_layout--example.twig | 1 - .../layout/layout/_yds-layout.scss | 52 ++++++++++++------- .../layout/layout/yds-layout.twig | 6 +++ 4 files changed, 44 insertions(+), 21 deletions(-) diff --git a/components/02-molecules/accordion/_yds-accordion.scss b/components/02-molecules/accordion/_yds-accordion.scss index a21025eec..a5092c2e5 100644 --- a/components/02-molecules/accordion/_yds-accordion.scss +++ b/components/02-molecules/accordion/_yds-accordion.scss @@ -6,6 +6,12 @@ @include tokens.spacing-page-section; --color-text-shadow: var(--color-basic-white); + + // remove margin from the top and bottom of the accordion in a fifty-fifty layout + [data-component-layout='fifty-fifty'] & { + margin-block-start: 0; + margin-block-end: 0; + } } .accordion__heading { diff --git a/components/03-organisms/layout/layout/_layout--example.twig b/components/03-organisms/layout/layout/_layout--example.twig index 124a0258f..8149024d1 100644 --- a/components/03-organisms/layout/layout/_layout--example.twig +++ b/components/03-organisms/layout/layout/_layout--example.twig @@ -34,7 +34,6 @@ text_field__content: '

Secondary Column

The Undergraduate Handbook

A comprehensive guide for prospective and current Chemistry Majors, with a complete description of requirements and opportunities.

View the handbook online

Course List

A list of courses and a description of the Chemistry undergraduate program, including information on placement exams, laboratory registration, premedical students, and major requirements

Yale College programs of study

', } %} {% endif %} - {% endblock %} {% block layout__tertiary %} {% include "@atoms/images/image/_responsive-image.twig" %} diff --git a/components/03-organisms/layout/layout/_yds-layout.scss b/components/03-organisms/layout/layout/_yds-layout.scss index d0d2fc7da..2996273b9 100644 --- a/components/03-organisms/layout/layout/_yds-layout.scss +++ b/components/03-organisms/layout/layout/_yds-layout.scss @@ -26,6 +26,7 @@ $break-layout-layout-max: $break-layout-layout - 0.05; --color-slot-eight: var(--component-themes-#{$theme}-slot-eight); --color-layout-theme: var(--color-slot-one); --color-layout-content: var(--color-slot-eight); + --color-layout-border: var(--color-slot-four); background-color: var(--color-layout-theme); color: var(--color-layout-content); @@ -89,6 +90,7 @@ $break-layout-layout-max: $break-layout-layout - 0.05; --color-link-visited-hover: var(--color-link-visited-light-hover); --color-link-base: var(--color-slot-eight); --color-link-hover: var(--color-slot-eight); + --color-layout-border: var(--color-slot-four); } &[data-component-theme='two'] { @@ -97,6 +99,7 @@ $break-layout-layout-max: $break-layout-layout - 0.05; --color-link-base: var(--color-slot-seven); --color-link-hover: var(--color-slot-seven); --color-heading: var(--color-slot-six); + --color-layout-border: var(--color-slot-six); } &[data-component-theme='three'] { @@ -106,6 +109,7 @@ $break-layout-layout-max: $break-layout-layout - 0.05; --color-link-visited-hover: var(--color-link-visited-light-hover); --color-link-base: var(--color-slot-eight); --color-link-hover: var(--color-slot-eight); + --color-layout-border: var(--color-slot-four); } &[data-component-theme='four'] { @@ -115,6 +119,7 @@ $break-layout-layout-max: $break-layout-layout - 0.05; --color-link-visited-hover: var(--color-link-visited-light-hover); --color-link-base: var(--color-slot-eight); --color-link-hover: var(--color-slot-eight); + --color-layout-border: var(--color-slot-four); } } @@ -144,6 +149,13 @@ $break-layout-layout-max: $break-layout-layout - 0.05; } } +.yds-layout__divider { + display: flex; + align-self: stretch; + background-color: var(--color-layout-border); + width: var(--border-thickness-2); +} + .yds-layout__primary { @media (max-width: $break-layout-layout-max) { margin-bottom: var(--spacing-page-inner); @@ -188,17 +200,6 @@ $break-layout-layout-max: $break-layout-layout - 0.05; flex: 0 1 calc(37.5rem + var(--spacing-component-gutter)); } } - - [data-component-has-divider='true'] & { - @media (min-width: $break-layout-layout) { - &::before { - content: ''; - border-left: var(--border-thickness-2) solid var(--color-gray-300); - align-self: stretch; - padding-left: var(--spacing-page-inner); - } - } - } } .yds-layout__tertiary { @@ -209,15 +210,26 @@ $break-layout-layout-max: $break-layout-layout - 0.05; flex: 0 1 calc(var(--size-component-layout-width-site) / 3); } } +} - [data-component-has-divider='true'] & { - @media (min-width: $break-layout-layout) { - &::before { - content: ''; - border-left: var(--border-thickness-2) solid var(--color-gray-300); - align-self: stretch; - padding-left: var(--spacing-page-inner); - } - } +// Update font-size for headings based on layout +h2 { + [data-component-layout='two-thirds-one-thirds'] &, + [data-component-layout='thirty-thirty-thirty'] & { + @include tokens.h3-yale-new; + } +} + +h3 { + [data-component-layout='two-thirds-one-thirds'] &, + [data-component-layout='thirty-thirty-thirty'] & { + @include tokens.h4-yale-new; + } +} + +h4 { + [data-component-layout='two-thirds-one-thirds'] &, + [data-component-layout='thirty-thirty-thirty'] & { + @include tokens.h5-yale-new; } } diff --git a/components/03-organisms/layout/layout/yds-layout.twig b/components/03-organisms/layout/layout/yds-layout.twig index bc2a223ef..e756412c7 100644 --- a/components/03-organisms/layout/layout/yds-layout.twig +++ b/components/03-organisms/layout/layout/yds-layout.twig @@ -23,11 +23,17 @@ {{ content.primary }} {% endblock %}
+ {% if layout__divider == 'true' %} +
+ {% endif %}
{% block layout__secondary %} {{ content.secondary }} {% endblock %}
+ {% if layout__divider == 'true' and component__layout == 'thirty-thirty-thirty' %} +
+ {% endif %} {% if component__layout == 'thirty-thirty-thirty' %}
{% block layout__tertiary %} From f8ec8b65582a1485a2593648a8ae461d514179b0 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Tue, 26 Nov 2024 16:26:10 -0600 Subject: [PATCH 06/17] feat(IYY-283): update spacing and dividers on mobile --- components/03-organisms/layout/layout/_yds-layout.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/components/03-organisms/layout/layout/_yds-layout.scss b/components/03-organisms/layout/layout/_yds-layout.scss index 2996273b9..f6fb3ebe1 100644 --- a/components/03-organisms/layout/layout/_yds-layout.scss +++ b/components/03-organisms/layout/layout/_yds-layout.scss @@ -154,6 +154,12 @@ $break-layout-layout-max: $break-layout-layout - 0.05; align-self: stretch; background-color: var(--color-layout-border); width: var(--border-thickness-2); + + @media (max-width: $break-layout-layout-max) { + width: 100%; + height: var(--border-thickness-2); + margin-bottom: var(--spacing-page-inner); + } } .yds-layout__primary { From 9363b42252b13c30c87526836760b477372c3310 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Wed, 27 Nov 2024 09:04:41 -0600 Subject: [PATCH 07/17] feat(IYY-283): update comments --- .../layout/layout/yds-layout.twig | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/components/03-organisms/layout/layout/yds-layout.twig b/components/03-organisms/layout/layout/yds-layout.twig index e756412c7..a38edbf05 100644 --- a/components/03-organisms/layout/layout/yds-layout.twig +++ b/components/03-organisms/layout/layout/yds-layout.twig @@ -1,9 +1,14 @@ {# - # In this file, we're checking `if directory` in order to determine if the - # active environment is a Drupal site. We need to do this because Drupal's - # drag-and-drop interface needs specific attributes on the wrapper elements - # that would not make sense, or even cause errors in environments like - # Storybook. + # Available Variables: + # - component__theme (string): 'default' by default + # - layout__divider: (boolean) false by default + # - component__layout (string): 'fifty-fifty' by default + # - component__width (string): 'site' by default + + # Available Blocks: + # - layout_primary + # - layout_secondary + # - layout_tertiary #} {% set layout__base_class = 'yds-layout' %} @@ -24,7 +29,7 @@ {% endblock %}
{% if layout__divider == 'true' %} -
+
{% endif %}
{% block layout__secondary %} @@ -32,7 +37,7 @@ {% endblock %}
{% if layout__divider == 'true' and component__layout == 'thirty-thirty-thirty' %} -
+
{% endif %} {% if component__layout == 'thirty-thirty-thirty' %}
From b03a72a44ff5729f5dc2bc6461e002091c0056c6 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Wed, 27 Nov 2024 15:06:44 -0600 Subject: [PATCH 08/17] feat(IYY-282): add link grid example to fifty-fifty layout, make sure colors are set for each theme --- .../link-grid/_yds-link-grid.scss | 8 +++ .../layout/layout/_layout--example.twig | 61 +++++++++++++++++++ .../layout/layout/_yds-layout.scss | 11 ++++ 3 files changed, 80 insertions(+) diff --git a/components/02-molecules/link-grid/_yds-link-grid.scss b/components/02-molecules/link-grid/_yds-link-grid.scss index 85138d7f3..e864caf8c 100644 --- a/components/02-molecules/link-grid/_yds-link-grid.scss +++ b/components/02-molecules/link-grid/_yds-link-grid.scss @@ -110,6 +110,14 @@ $component-link-grid-themes: map.deep-get(tokens.$tokens, 'component-themes'); &:first-of-type { border-width: var(--size-thickness-4); } + + // if used in fifty-fifty layout and min-width 2xl + // make the columns 50% width + [data-component-layout='fifty-fifty'] & { + @media (min-width: tokens.$break-2xl) { + flex: 1 1 50%; + } + } } .link-grid__list-item { diff --git a/components/03-organisms/layout/layout/_layout--example.twig b/components/03-organisms/layout/layout/_layout--example.twig index 8149024d1..c9b49fc5d 100644 --- a/components/03-organisms/layout/layout/_layout--example.twig +++ b/components/03-organisms/layout/layout/_layout--example.twig @@ -6,6 +6,67 @@ {% endblock %} {% block layout__secondary %} {% if component__layout == 'fifty-fifty' %} + {% include "@molecules/link-grid/yds-link-grid.twig" with { + link_grid__heading: 'Quick Links', + link_grid__theme: 'default', + link_grid__links_one: [ + { + link_grid__link__content: 'Undergraduate Handbook', + link_grid__link__url: '#' + }, + { + link_grid__link__content: 'Course List', + link_grid__link__url: '#' + }, + { + link_grid__link__content: 'Placement Exams', + link_grid__link__url: '#' + }, + ], + link_grid__links_two: [ + { + link_grid__link__content: 'Laboratory Registration', + link_grid__link__url: '#' + }, + { + link_grid__link__content: 'Premedical Students', + link_grid__link__url: '#' + }, + { + link_grid__link__content: 'Major Requirements', + link_grid__link__url: '#' + }, + ], + link_grid__links_three: [ + { + link_grid__link__content: 'Yale College Programs of Study', + link_grid__link__url: '#' + }, + { + link_grid__link__content: 'Yale College Programs of Study', + link_grid__link__url: '#' + }, + { + link_grid__link__content: 'Yale College Programs of Study', + link_grid__link__url: '#' + }, + ], + link_grid__links_four: [ + { + link_grid__link__content: 'Yale College Programs of Study', + link_grid__link__url: '#' + }, + { + link_grid__link__content: 'Yale College Programs of Study', + link_grid__link__url: '#' + }, + { + link_grid__link__content: 'Yale College Programs of Study', + link_grid__link__url: '#' + }, + ], + }%} + {% include "@molecules/accordion/yds-accordion.twig" with { accordion__heading: 'Accordion Group', accordion__width: 'site', diff --git a/components/03-organisms/layout/layout/_yds-layout.scss b/components/03-organisms/layout/layout/_yds-layout.scss index f6fb3ebe1..ca816fdb8 100644 --- a/components/03-organisms/layout/layout/_yds-layout.scss +++ b/components/03-organisms/layout/layout/_yds-layout.scss @@ -91,6 +91,8 @@ $break-layout-layout-max: $break-layout-layout - 0.05; --color-link-base: var(--color-slot-eight); --color-link-hover: var(--color-slot-eight); --color-layout-border: var(--color-slot-four); + --color-heading: var(--color-slot-eight); + --color-link-grid-action: var(--color-slot-eight); } &[data-component-theme='two'] { @@ -100,6 +102,7 @@ $break-layout-layout-max: $break-layout-layout - 0.05; --color-link-hover: var(--color-slot-seven); --color-heading: var(--color-slot-six); --color-layout-border: var(--color-slot-six); + --color-link-grid-action: var(--color-slot-six); } &[data-component-theme='three'] { @@ -110,6 +113,8 @@ $break-layout-layout-max: $break-layout-layout - 0.05; --color-link-base: var(--color-slot-eight); --color-link-hover: var(--color-slot-eight); --color-layout-border: var(--color-slot-four); + --color-heading: var(--color-slot-eight); + --color-link-grid-action: var(--color-slot-four); } &[data-component-theme='four'] { @@ -120,6 +125,8 @@ $break-layout-layout-max: $break-layout-layout - 0.05; --color-link-base: var(--color-slot-eight); --color-link-hover: var(--color-slot-eight); --color-layout-border: var(--color-slot-four); + --color-heading: var(--color-slot-eight); + --color-link-grid-action: var(--color-slot-four); } } @@ -163,6 +170,8 @@ $break-layout-layout-max: $break-layout-layout - 0.05; } .yds-layout__primary { + flex-flow: column nowrap; + @media (max-width: $break-layout-layout-max) { margin-bottom: var(--spacing-page-inner); } @@ -188,6 +197,7 @@ $break-layout-layout-max: $break-layout-layout - 0.05; .yds-layout__secondary { display: flex; + flex-flow: column nowrap; [data-component-layout='fifty-fifty'] & { @media (min-width: $break-layout-layout) { @@ -210,6 +220,7 @@ $break-layout-layout-max: $break-layout-layout - 0.05; .yds-layout__tertiary { display: flex; + flex-flow: column nowrap; [data-component-layout='thirty-thirty-thirty'] & { @media (min-width: $break-layout-layout) { From d15620690de51af970a4711def3e5b7ebd41b68c Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Mon, 2 Dec 2024 13:02:47 -0600 Subject: [PATCH 09/17] feat(IYY-301): remove top margin from link-grid when used in a layout component --- components/02-molecules/link-grid/_yds-link-grid.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/components/02-molecules/link-grid/_yds-link-grid.scss b/components/02-molecules/link-grid/_yds-link-grid.scss index e864caf8c..32177ae8e 100644 --- a/components/02-molecules/link-grid/_yds-link-grid.scss +++ b/components/02-molecules/link-grid/_yds-link-grid.scss @@ -65,6 +65,11 @@ $component-link-grid-themes: map.deep-get(tokens.$tokens, 'component-themes'); &[data-component-theme='five'] { --color-link-grid-action: var(--color-slot-two); } + + // if used in the layout component, remove the top margin + [data-component-layout] & { + margin-block-start: 0; + } } .link-grid__heading { From b3d6c90ba5eba4da26654f8956cc324812d87a77 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Wed, 4 Dec 2024 09:39:20 -0600 Subject: [PATCH 10/17] feat(IYY-301): rename two-thirds-one-thirds seventy-thirty --- components/03-organisms/layout/layout.stories.js | 2 +- components/03-organisms/layout/layout/_yds-layout.scss | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/components/03-organisms/layout/layout.stories.js b/components/03-organisms/layout/layout.stories.js index 77a79c059..94d33c2d6 100644 --- a/components/03-organisms/layout/layout.stories.js +++ b/components/03-organisms/layout/layout.stories.js @@ -27,7 +27,7 @@ export default { layoutOption: { name: 'Layout', type: 'select', - options: ['fifty-fifty', 'thirty-thirty-thirty', 'two-thirds-one-thirds'], + options: ['fifty-fifty', 'thirty-thirty-thirty', 'seventy-thirty'], control: { type: 'select' }, }, theme: { diff --git a/components/03-organisms/layout/layout/_yds-layout.scss b/components/03-organisms/layout/layout/_yds-layout.scss index ca816fdb8..f3de58e85 100644 --- a/components/03-organisms/layout/layout/_yds-layout.scss +++ b/components/03-organisms/layout/layout/_yds-layout.scss @@ -188,7 +188,7 @@ $break-layout-layout-max: $break-layout-layout - 0.05; } } - [data-component-layout='two-thirds-one-thirds'] & { + [data-component-layout='seventy-thirty'] & { @media (min-width: $break-layout-layout) { flex: 1 0 var(--size-component-layout-width-content); } @@ -211,7 +211,7 @@ $break-layout-layout-max: $break-layout-layout - 0.05; } } - [data-component-layout='two-thirds-one-thirds'] & { + [data-component-layout='seventy-thirty'] & { @media (min-width: $break-layout-layout) { flex: 0 1 calc(37.5rem + var(--spacing-component-gutter)); } @@ -231,21 +231,21 @@ $break-layout-layout-max: $break-layout-layout - 0.05; // Update font-size for headings based on layout h2 { - [data-component-layout='two-thirds-one-thirds'] &, + [data-component-layout='seventy-thirty'] &, [data-component-layout='thirty-thirty-thirty'] & { @include tokens.h3-yale-new; } } h3 { - [data-component-layout='two-thirds-one-thirds'] &, + [data-component-layout='seventy-thirty'] &, [data-component-layout='thirty-thirty-thirty'] & { @include tokens.h4-yale-new; } } h4 { - [data-component-layout='two-thirds-one-thirds'] &, + [data-component-layout='seventy-thirty'] &, [data-component-layout='thirty-thirty-thirty'] & { @include tokens.h5-yale-new; } From 57e08eecff4b8860da417af36cd12de8874b4be5 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Thu, 5 Dec 2024 09:19:15 -0600 Subject: [PATCH 11/17] feat(IYY-301): update divder width in seventy-thirty layout, add opacity to divider --- components/03-organisms/layout/layout/_yds-layout.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/components/03-organisms/layout/layout/_yds-layout.scss b/components/03-organisms/layout/layout/_yds-layout.scss index f3de58e85..8aec6c448 100644 --- a/components/03-organisms/layout/layout/_yds-layout.scss +++ b/components/03-organisms/layout/layout/_yds-layout.scss @@ -161,6 +161,13 @@ $break-layout-layout-max: $break-layout-layout - 0.05; align-self: stretch; background-color: var(--color-layout-border); width: var(--border-thickness-2); + opacity: 0.5; + + // gap affects the width of the divider, so we can increase the width of the + // divider in this instance. + [data-component-layout='seventy-thirty'] & { + width: calc(var(--border-thickness-2) + var(--border-thickness-1)); + } @media (max-width: $break-layout-layout-max) { width: 100%; From 44a809bc9aba024c796de4f37b7dca41e3bd3851 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Fri, 6 Dec 2024 15:49:43 -0600 Subject: [PATCH 12/17] feat(IYY-283): update caption color to use theme --- components/03-organisms/layout/layout/_yds-layout.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/03-organisms/layout/layout/_yds-layout.scss b/components/03-organisms/layout/layout/_yds-layout.scss index 8aec6c448..19f02a120 100644 --- a/components/03-organisms/layout/layout/_yds-layout.scss +++ b/components/03-organisms/layout/layout/_yds-layout.scss @@ -128,6 +128,10 @@ $break-layout-layout-max: $break-layout-layout - 0.05; --color-heading: var(--color-slot-eight); --color-link-grid-action: var(--color-slot-four); } + + .caption { + color: var(--color-layout-content); + } } .yds-layout__inner { From 7496d31342a8aa5b3c7fe59456e707d9f569492a Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Fri, 6 Dec 2024 15:53:15 -0600 Subject: [PATCH 13/17] feat(IYY-283): update caption to use layout color variable --- components/01-atoms/images/image/_yds-image.scss | 4 ++++ components/03-organisms/layout/layout/_yds-layout.scss | 4 ---- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/01-atoms/images/image/_yds-image.scss b/components/01-atoms/images/image/_yds-image.scss index a4430f5c8..dd300787f 100644 --- a/components/01-atoms/images/image/_yds-image.scss +++ b/components/01-atoms/images/image/_yds-image.scss @@ -32,6 +32,10 @@ figure { color: var(--color-gray-800); } } + + [data-component-layout] & { + color: var(--color-layout-content); + } } @mixin clickable-component-image { diff --git a/components/03-organisms/layout/layout/_yds-layout.scss b/components/03-organisms/layout/layout/_yds-layout.scss index 19f02a120..8aec6c448 100644 --- a/components/03-organisms/layout/layout/_yds-layout.scss +++ b/components/03-organisms/layout/layout/_yds-layout.scss @@ -128,10 +128,6 @@ $break-layout-layout-max: $break-layout-layout - 0.05; --color-heading: var(--color-slot-eight); --color-link-grid-action: var(--color-slot-four); } - - .caption { - color: var(--color-layout-content); - } } .yds-layout__inner { From aeee0906f78d3c9eae1e776ee6640fde00cae684 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Mon, 16 Dec 2024 11:29:05 -0600 Subject: [PATCH 14/17] feat(IYY-283): fix link colors in layout component --- .../03-organisms/layout/layout/_yds-layout.scss | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/components/03-organisms/layout/layout/_yds-layout.scss b/components/03-organisms/layout/layout/_yds-layout.scss index 8aec6c448..76f789d9c 100644 --- a/components/03-organisms/layout/layout/_yds-layout.scss +++ b/components/03-organisms/layout/layout/_yds-layout.scss @@ -27,24 +27,19 @@ $break-layout-layout-max: $break-layout-layout - 0.05; --color-layout-theme: var(--color-slot-one); --color-layout-content: var(--color-slot-eight); --color-layout-border: var(--color-slot-four); + --color-link-base: var(--color-link-base); + --color-link-hover: var(--color-link-hover); background-color: var(--color-layout-theme); color: var(--color-layout-content); + // override text-shadow color for links in component themes .link, - a { + .text-field a, + .link-grid__link { --color-text-shadow: var(--color-layout-theme); --color-link-hover: var(--color-link-hover); - } - - a:not([data-link-style]) { - @include atoms.link; - - color: var(--color-link-base); - - &:hover { - color: var(--color-layout-content); - } + --color-link-base: var(--color-link-base); } } } From 88ea60459f7c6facd8aa711de036799a32753df4 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Tue, 17 Dec 2024 11:30:40 -0600 Subject: [PATCH 15/17] feat(IYY-283): add layout component to our spotlight JS spacing logic --- .../content-spotlights.js | 2 +- .../layout/layout/_yds-layout.scss | 18 ++++++++++++++++-- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/components/02-molecules/content-spotlight-portrait/content-spotlights.js b/components/02-molecules/content-spotlight-portrait/content-spotlights.js index 832b2221c..b10b4a729 100644 --- a/components/02-molecules/content-spotlight-portrait/content-spotlights.js +++ b/components/02-molecules/content-spotlight-portrait/content-spotlights.js @@ -2,7 +2,7 @@ Drupal.behaviors.contentSpotlights = { attach(context) { // Define the selectors to check and store them in a variable const selectorsToCheck = - '.text-with-image, .content-spotlight-portrait, .quote-callout, .facts-and-figures__group, .tiles'; + '.text-with-image, .content-spotlight-portrait, .quote-callout, .facts-and-figures__group, .tiles, .yds-layout'; // Select all elements with class "text-with-image" or "content-spotlight-portrait" const contentSpotlights = context.querySelectorAll(selectorsToCheck); diff --git a/components/03-organisms/layout/layout/_yds-layout.scss b/components/03-organisms/layout/layout/_yds-layout.scss index 76f789d9c..57fc6fcf5 100644 --- a/components/03-organisms/layout/layout/_yds-layout.scss +++ b/components/03-organisms/layout/layout/_yds-layout.scss @@ -9,8 +9,6 @@ $break-layout-layout: tokens.$break-2xl; $break-layout-layout-max: $break-layout-layout - 0.05; .yds-layout { - @include tokens.spacing-page-section; - // Component themes defaults: iterate over each component theme to establish // default variables. @each $theme, $value in $layout-component-themes { @@ -123,6 +121,22 @@ $break-layout-layout-max: $break-layout-layout - 0.05; --color-heading: var(--color-slot-eight); --color-link-grid-action: var(--color-slot-four); } + + // if we're not using a component theme, add top and bottom margin + // Or if the spotlight is the only spotlight on the page + &[data-component-theme='default'], + &[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); + } } .yds-layout__inner { From 2d32eb3e1fdaddd7c842b85a82064978d34fede3 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Tue, 17 Dec 2024 11:59:59 -0600 Subject: [PATCH 16/17] feat(IYY-283): set default layout theme to 'default' --- components/02-molecules/link-grid/_yds-link-grid.scss | 5 +++++ components/03-organisms/layout/layout.stories.js | 4 ++-- components/03-organisms/layout/layout/_layout--example.twig | 2 +- components/03-organisms/layout/layout/_yds-layout.scss | 2 ++ 4 files changed, 10 insertions(+), 3 deletions(-) diff --git a/components/02-molecules/link-grid/_yds-link-grid.scss b/components/02-molecules/link-grid/_yds-link-grid.scss index 32177ae8e..46b761b9d 100644 --- a/components/02-molecules/link-grid/_yds-link-grid.scss +++ b/components/02-molecules/link-grid/_yds-link-grid.scss @@ -82,6 +82,11 @@ $component-link-grid-themes: map.deep-get(tokens.$tokens, 'component-themes'); .link-grid__inner { --color-link-grid-border: var(--color-link-grid-action); + // set the border color to the color slot one so there is a default set + [data-component-theme='default'] & { + --color-link-grid-action: var(--color-slot-one); + } + display: flex; flex-flow: column nowrap; width: 100%; diff --git a/components/03-organisms/layout/layout.stories.js b/components/03-organisms/layout/layout.stories.js index 94d33c2d6..f21ef911f 100644 --- a/components/03-organisms/layout/layout.stories.js +++ b/components/03-organisms/layout/layout.stories.js @@ -33,14 +33,14 @@ export default { theme: { name: 'Component Theme', type: 'select', - options: ['one', 'two', 'three', 'four'], + options: ['default', 'one', 'two', 'three', 'four'], control: { type: 'select' }, }, }, args: { divider: false, layoutOption: 'fifty-fifty', - theme: 'one', + theme: 'default', }, }; diff --git a/components/03-organisms/layout/layout/_layout--example.twig b/components/03-organisms/layout/layout/_layout--example.twig index c9b49fc5d..276899210 100644 --- a/components/03-organisms/layout/layout/_layout--example.twig +++ b/components/03-organisms/layout/layout/_layout--example.twig @@ -8,7 +8,7 @@ {% if component__layout == 'fifty-fifty' %} {% include "@molecules/link-grid/yds-link-grid.twig" with { link_grid__heading: 'Quick Links', - link_grid__theme: 'default', + link_grid__theme: 'inherit', link_grid__links_one: [ { link_grid__link__content: 'Undergraduate Handbook', diff --git a/components/03-organisms/layout/layout/_yds-layout.scss b/components/03-organisms/layout/layout/_yds-layout.scss index 57fc6fcf5..79ade2a83 100644 --- a/components/03-organisms/layout/layout/_yds-layout.scss +++ b/components/03-organisms/layout/layout/_yds-layout.scss @@ -9,6 +9,8 @@ $break-layout-layout: tokens.$break-2xl; $break-layout-layout-max: $break-layout-layout - 0.05; .yds-layout { + --color-layout-border: var(--color-slot-one); + // Component themes defaults: iterate over each component theme to establish // default variables. @each $theme, $value in $layout-component-themes { From 60f56628adfa0673a6230bb1af84d7bf58e65064 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Fri, 20 Dec 2024 09:38:04 -0600 Subject: [PATCH 17/17] feat(IYY-283): linting fix --- components/00-tokens/layout/_layout.scss | 2 +- components/04-page-layouts/page-layouts.scss | 20 ++++++++++---------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/components/00-tokens/layout/_layout.scss b/components/00-tokens/layout/_layout.scss index d2b24b1a9..59fd360f6 100644 --- a/components/00-tokens/layout/_layout.scss +++ b/components/00-tokens/layout/_layout.scss @@ -92,7 +92,7 @@ $layout-widths: map.deep-get(tokens.$tokens, size, component-layout, width); margin-top: var(--font-spacing-paragraph-extra); } - &:not(.no-page-spacing) { + &:not(.no-page-spacing, .visually-hidden) { margin-bottom: var(--spacing-page-inner); } } diff --git a/components/04-page-layouts/page-layouts.scss b/components/04-page-layouts/page-layouts.scss index 511f23f8a..8bb86ae83 100644 --- a/components/04-page-layouts/page-layouts.scss +++ b/components/04-page-layouts/page-layouts.scss @@ -19,15 +19,23 @@ body[data-body-frozen] { } } +// The last item inside the `.main-content` area should have some space between +// it and the site footer (size-spacing-12 below) - unless it is designated as +// `$flush-bottom` above. Then it will have no bottom-margin separating it from +// the site footer. +.main-content > *:last-child { + margin-bottom: var(--main-content-bottom-margin, var(--size-spacing-13)); +} + // The first item inside the `.main-content` area should have some space between // it and the site header (size-spacing-6 and 9 below) - unless it is designated // as `$flush-top` above. Then it will have no top-margin separating it from the // site header. -.main-content > *:first-child { +.main-content > *:first-child:not(.page-meta, .layout--banner) { margin-top: var(--main-content-top-margin, var(--size-spacing-6)); } -.main-content .page-title { +.main-content .page-title:not(.visually-hidden) { margin-top: var(--size-spacing-10); // 4rem @media (max-width: tokens.$break-l) { @@ -56,14 +64,6 @@ body[data-body-frozen] { } } -// The last item inside the `.main-content` area should have some space between -// it and the site footer (size-spacing-12 below) - unless it is designated as -// `$flush-bottom` above. Then it will have no bottom-margin separating it from -// the site footer. -.main-content > *:last-child { - margin-bottom: var(--main-content-bottom-margin, var(--size-spacing-13)); -} - body { --site-header-height: 4.8125rem; // 77px / 16 }