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

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);
   }
 }

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 {

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/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);
 

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 {
@@ -77,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%;
@@ -110,6 +120,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 {

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', 'seventy-thirty'],
+      control: { type: 'select' },
+    },
+    theme: {
+      name: 'Component Theme',
+      type: 'select',
+      options: ['default', 'one', 'two', 'three', 'four'],
+      control: { type: 'select' },
+    },
+  },
+  args: {
+    divider: false,
+    layoutOption: 'fifty-fifty',
+    theme: 'default',
+  },
 };
 
 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,101 @@
+{% 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/link-grid/yds-link-grid.twig" with {
+      link_grid__heading: 'Quick Links',
+      link_grid__theme: 'inherit',
+      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',
+      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 %}