IYY-283: Site editors can create a ½ - ½ layout | IYY-284: Site editors can create a ⅓ - ⅓ - ⅓ layout

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 {

components/03-organisms/layout/layout.stories.js

@@ -1,17 +1,56 @@
 // Markup.
 import twoColumnTwig from './two-column/_two-column--example.twig';
+import layoutTwig from './layout/_layout--example.twig';
 
 // Data files
 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';
 
 /**
  * Storybook Definition.
  */
 export default {
-  title: 'Organisms/Layout/Two Column',
+  title: 'Organisms/Layouts',
   parameters: {
     layout: 'fullscreen',
   },
+  argTypes: {
+    divider: {
+      name: 'Divider',
+      type: 'boolean',
+    },
+    layoutOption: {
+      name: 'Layout',
+      type: 'select',
+      options: ['fifty-fifty', 'thirty-thirty-thirty', 'two-thirds-one-thirds'],
+      control: { type: 'select' },
+    },
+    theme: {
+      name: 'Component Theme',
+      type: 'select',
+      options: ['one', 'two', 'three', 'four'],
+      control: { type: 'select' },
+    },
+  },
+  args: {
+    divider: false,
+    layoutOption: 'fifty-fifty',
+    theme: 'one',
+  },
 };
 
 export const TwoColumn = () => twoColumnTwig(textData);
+export const layout = ({ divider, theme, layoutOption }) =>
+  layoutTwig({
+    ...textData,
+    ...accordionData,
+    ...imageData.responsive_images['4x3'],
+    layout__divider: divider ? 'true' : 'false',
+    component__theme: theme,
+    component__layout: layoutOption,
+  });

components/03-organisms/layout/layout/_layout--example.twig

@@ -0,0 +1,40 @@
+{% extends "@organisms/layout/layout/yds-layout.twig" %}
+  {% block layout__primary %}
+    {% include "@molecules/text/yds-text-field.twig" with {
+      text_field__content: '<h2>Primary Column</h2><h3>The Undergraduate Handbook</h3><p>A comprehensive guide for prospective and current Chemistry Majors, with a complete description of requirements and opportunities.</p><p><a href="#">View the handbook online</a></p><h3>Course List</h3><p>A list of courses and a description of the Chemistry undergraduate program, including information on placement exams, laboratory registration, premedical students, and major requirements</p><p><a href="#">Yale College programs of study</a></p>',
+    } %}
+  {% endblock %}
+  {% block layout__secondary %}
+    {% if component__layout == 'fifty-fifty' %}
+	  {% 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
+        },
+      ]
+    } %}
+    {% else %}
+      {% include "@molecules/text/yds-text-field.twig" with {
+        text_field__content: '<h2>Secondary Column</h2><h3>The Undergraduate Handbook</h3><p>A comprehensive guide for prospective and current Chemistry Majors, with a complete description of requirements and opportunities.</p><p><a href="#">View the handbook online</a></p><h3>Course List</h3><p>A list of courses and a description of the Chemistry undergraduate program, including information on placement exams, laboratory registration, premedical students, and major requirements</p><p><a href="#">Yale College programs of study</a></p>',
+      } %}
+    {% endif %}
+  {% endblock %}
+  {% block layout__tertiary %}
+    {% include "@atoms/images/image/_responsive-image.twig" %}
+  {% endblock %}

components/03-organisms/layout/layout/_yds-layout.scss

@@ -0,0 +1,241 @@
+@use '../../../00-tokens/tokens';
+@use '../../../00-tokens/functions/map';
+@use '../../../01-atoms/atoms';
+@use '../../grid-mixins' as grid;
+
+$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-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 {
+    &[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-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);
+
+      .link,
+      a {
+        --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);
+        }
+      }
+    }
+  }
+
+  // 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-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);
+      --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-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);
+    --color-link-hover: var(--color-slot-eight);
+    --color-layout-border: var(--color-slot-four);
+  }
+
+  &[data-component-theme='two'] {
+    --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);
+    --color-layout-border: var(--color-slot-six);
+  }
+
+  &[data-component-theme='three'] {
+    --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);
+    --color-link-hover: var(--color-slot-eight);
+    --color-layout-border: var(--color-slot-four);
+  }
+
+  &[data-component-theme='four'] {
+    --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-link-base: var(--color-slot-eight);
+    --color-link-hover: var(--color-slot-eight);
+    --color-layout-border: var(--color-slot-four);
+  }
+}
+
+.yds-layout__inner {
+  padding-block-start: var(--size-spacing-10);
+  padding-block-end: var(--size-spacing-10);
+
+  @media (min-width: $break-layout-layout) {
+    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-layout__divider {
+  display: flex;
+  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 {
+  @media (max-width: $break-layout-layout-max) {
+    margin-bottom: var(--spacing-page-inner);
+  }
+
+  [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-thirty-thirty'] & {
+    @media (min-width: $break-layout-layout) {
+      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 {
+  display: flex;
+
+  [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-thirty-thirty'] & {
+    @media (min-width: $break-layout-layout) {
+      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: 0 1 calc(37.5rem + var(--spacing-component-gutter));
+    }
+  }
+}
+
+.yds-layout__tertiary {
+  display: flex;
+
+  [data-component-layout='thirty-thirty-thirty'] & {
+    @media (min-width: $break-layout-layout) {
+      flex: 0 1 calc(var(--size-component-layout-width-site) / 3);
+    }
+  }
+}
+
+// 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;
+  }
+}

components/03-organisms/layout/layout/yds-layout.twig

@@ -0,0 +1,45 @@
+{#
+ # 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),
+} %}
+
+<div {{ add_attributes(layout__attributes) }} data-embedded-components>
+  <div {{ bem('inner', [], layout__base_class) }}>
+    <div {{ bem('primary', [], layout__base_class) }}>
+      {% block layout__primary %}
+        {{ content.primary }}
+      {% endblock %}
+    </div>
+    {% if layout__divider == 'true' %}
+      <div class="{{ layout__base_class }}__divider"></div>
+    {% endif %}
+    <div {{ bem('secondary', [], layout__base_class) }}>
+      {% block layout__secondary %}
+        {{ content.secondary }}
+      {% endblock %}
+    </div>
+    {% if layout__divider == 'true' and component__layout == 'thirty-thirty-thirty' %}
+      <div class="{{ layout__base_class }}__divider"></div>
+    {% endif %}
+    {% if component__layout == 'thirty-thirty-thirty' %}
+      <div {{ bem('tertiary', [], layout__base_class) }}>
+        {% block layout__tertiary %}
+          {{ content.tertiary }}
+        {% endblock %}
+      </div>
+    {% endif %}
+  </div>
+</div>