fix(YALB-1486): add basic and mega footer variations

yalesites-org · Sep 8, 2023 · 9b811f5 · 9b811f5
1 parent dd5beaa
commit 9b811f5
Show file tree

Hide file tree

Showing 18 changed files with 556 additions and 111 deletions.
diff --git a/components/02-molecules/link-group/_yds-link-group--links.twig b/components/02-molecules/link-group/_yds-link-group--links.twig
@@ -0,0 +1,10 @@
+{% set link_group__base_class = 'link-group' %}
+
+<li {{ bem('list-item', [], link_group__base_class) }}>
+  {% include "@atoms/controls/text-link/yds-text-link.twig" with {
+    link__content:link_group__link__content|default(link.link_group__link__content),
+    link__url: link_group__link__url|default(link.link_group__link__url),
+    link__blockname: link_group__base_class,
+    link__style: 'no-underline',
+  }%}
+</li>
diff --git a/components/02-molecules/link-group/_yds-link-group.scss b/components/02-molecules/link-group/_yds-link-group.scss
@@ -0,0 +1,101 @@
+@use '../../00-tokens/tokens';
+@use '../../01-atoms/atoms';
+
+$break-link-group: tokens.$break-m;
+$break-link-group-max: $break-link-group - 0.05;
+
+.link-group {
+  .site-footer__columns-inner & {
+    @media (max-width: $break-link-group-max) {
+      grid-area: top;
+    }
+  }
+}
+
+.link-group__inner {
+  --color-link-group-border: var(--color-gray-700);
+
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+
+  @media (max-width: $break-link-group-max) {
+    display: grid;
+    grid-template:
+      'header-one'
+      'links-one'
+      'header-two'
+      'links-two'
+      / 1fr;
+  }
+
+  // if used in the footer, set border color to site-footer theme color
+  .site-footer & {
+    --color-link-group-border: var(--color-site-footer-border-color);
+  }
+}
+
+.link-group__text {
+  grid-area: header;
+}
+
+.link-group__heading {
+  @include tokens.h6-mallory-compact-medium;
+
+  border-left: var(--thickness-divider) solid var(--color-link-group-border);
+  padding: 0 var(--size-spacing-6) var(--size-spacing-3);
+  color: var(--color-site-footer-text-color);
+
+  &--one {
+    @media (max-width: $break-link-group-max) {
+      grid-area: header-one;
+    }
+
+    // Needed if only one heading is present. Pushes down the second column.
+    flex: 1 0 100%;
+  }
+
+  &--two {
+    @media (max-width: $break-link-group-max) {
+      grid-area: header-two;
+    }
+  }
+
+  // If two headings, set basis to 50%;
+  &--two-headings {
+    flex: 1 0 50%;
+  }
+}
+
+.link-group__links-column {
+  @include atoms.list-reset;
+
+  width: 100%;
+  border-left: var(--thickness-divider) solid var(--color-link-group-border);
+  margin-bottom: var(--size-spacing-7);
+
+  &--one {
+    @media (max-width: $break-link-group-max) {
+      grid-area: links-one;
+    }
+  }
+
+  &--two {
+    @media (max-width: $break-link-group-max) {
+      grid-area: links-two;
+    }
+  }
+
+  @media (min-width: $break-link-group) {
+    flex: 0 0 50%;
+  }
+}
+
+.link-group__link {
+  @include atoms.cta;
+
+  display: block;
+  text-align: left;
+  line-height: 1.2;
+  font-weight: var(--font-weights-mallory-book);
+}
diff --git a/components/02-molecules/link-group/link-group.stories.js b/components/02-molecules/link-group/link-group.stories.js
@@ -0,0 +1,23 @@
+import linkGroupTwig from './yds-link-group.twig';
+
+import linkGroupData from './link-group.yml';
+
+/**
+ * Storybook Definition.
+ */
+export default {
+  title: 'Molecules/Link group',
+  argTypes: {
+    heading: {
+      name: 'Heading',
+      type: 'string',
+      defaultValue: linkGroupData.link_group__heading,
+    },
+  },
+};
+
+export const linkGroup = ({ heading }) =>
+  linkGroupTwig({
+    ...linkGroupData,
+    link_group__heading: heading,
+  });
diff --git a/components/02-molecules/link-group/link-group.yml b/components/02-molecules/link-group/link-group.yml
@@ -0,0 +1,20 @@
+link_group__heading_one: 'Heading for Link Group One'
+link_group__heading_two: 'Heading for Link Group Two'
+link_group__links_one:
+  - link_group__link__url: '#'
+    link_group__link__content: 'This is a link'
+  - link_group__link__url: '#'
+    link_group__link__content: 'This is another link'
+  - link_group__link__url: '#'
+    link_group__link__content: 'This is a very long link that will wrap lines'
+  - link_group__link__url: '#'
+    link_group__link__content: 'Link #4'
+link_group__links_two:
+  - link_group__link__url: '#'
+    link_group__link__content: 'This is a link'
+  - link_group__link__url: '#'
+    link_group__link__content: 'This is another link'
+  - link_group__link__url: '#'
+    link_group__link__content: 'This is a very long link that will wrap lines'
+  - link_group__link__url: '#'
+    link_group__link__content: 'Link #4'
diff --git a/components/02-molecules/link-group/yds-link-group.twig b/components/02-molecules/link-group/yds-link-group.twig
@@ -0,0 +1,53 @@
+{% set link_group__base_class = 'link-group' %}
+
+{% set link_column_modifiers = [] %}
+
+{% set link_group__attributes = {
+  'class': bem(link_group__base_class),
+} %}
+
+{% if link_group__heading_one and link_group__heading_two %}
+  {% set link_column_modifiers = link_column_modifiers|merge(['two-headings']) %}
+{% endif %}
+
+{# Set variable for all the links  #}
+{% set link_group_columns %}
+  {% if link_group__links_one %}
+    <ul {{ bem('links-column', ['one'], link_group__base_class) }}>
+      {% for link in link_group__links_one %}
+        {% include "@molecules/link-group/_yds-link-group--links.twig" %}
+      {% endfor %}
+    </ul>
+  {% endif %}
+  {% if link_group__links_two %}
+    <ul {{ bem('links-column', ['two'], link_group__base_class) }}>
+      {% for link in link_group__links_two %}
+        {% include "@molecules/link-group/_yds-link-group--links.twig" %}
+      {% endfor %}
+    </ul>
+  {% endif %}
+{% endset %}
+
+<div {{ add_attributes(link_group__attributes) }}>
+  <div {{ bem('inner', [], link_group__base_class) }}>
+    {% if link_group__heading_one %}
+      {% include "@atoms/typography/headings/yds-heading.twig"  with {
+        heading__level: '2',
+        heading__blockname: link_group__base_class,
+        heading: link_group__heading_one,
+        heading__modifiers: link_column_modifiers|merge(['one']),
+      } %}
+    {% endif %}
+    {% if link_group__heading_two %}
+      {% include "@atoms/typography/headings/yds-heading.twig"  with {
+        heading__level: '2',
+        heading__blockname: link_group__base_class,
+        heading: link_group__heading_two,
+        heading__modifiers: link_column_modifiers|merge(['two']),
+      } %}
+    {% endif %}
+    {% block link_group__links %}
+      {{link_group_columns}}
+    {% endblock %}
+  </div>
+</div>
diff --git a/components/02-molecules/molecules.scss b/components/02-molecules/molecules.scss
@@ -7,6 +7,7 @@
 @forward './cards/custom-card/yds-custom-card';
 @forward './embed/yds-embed';
 @forward './image/yds-content-image';
+@forward './link-group/yds-link-group';
 @forward './menu/yds-menu';
 @forward './menu/menu-toggle/yds-menu-toggle';
 @forward './meta/basic-meta/yds-basic-meta';

diff --git a/components/03-organisms/site-footer/_site-footer--examples.twig b/components/03-organisms/site-footer/_site-footer--examples.twig
@@ -6,4 +6,4 @@
       } %}
     </section><br />
   {% endfor %}
-</div>
+</div>
diff --git a/components/03-organisms/site-footer/_site-footer-basic.twig b/components/03-organisms/site-footer/_site-footer-basic.twig
@@ -0,0 +1,52 @@
+{# Default Footer #}
+{# Primary #}
+<div {{ bem('primary', [], site_footer__base_class) }}>
+  {# Branding #}
+  <div {{ bem('branding', [], site_footer__base_class) }}>
+    <div {{ bem('logo', [], site_footer__base_class) }}>
+      <a data-link-style="no-underline" class="site-footer__site-branding site-footer__site-branding--primary" href="https://yale.edu">&#XF2A2;</a>
+    </div>
+    {% block site_footer__text %}
+      {% include "@page-layouts/placeholder/yds-placeholder.twig" with {
+        placeholder: 'Text',
+        placeholder__type: 'element',
+      } %}
+    {% endblock %}
+  </div>
+  {# Columns #}
+  <div {{ bem('columns', [], site_footer__base_class) }}>
+    {% block site_footer__columns %}
+      {% include "@page-layouts/placeholder/yds-placeholder.twig" with {
+        placeholder: 'Columns',
+        placeholder__type: 'element',
+      } %}
+    {% endblock %}
+  </div>
+</div>
+{# Secondary #}
+<div {{ bem('secondary', [], site_footer__base_class) }}>
+  {# Social #}
+  <div {{ bem('social', [], site_footer__base_class) }}>
+    {% block site_footer__social %}
+      {% include "@molecules/social-links/yds-social-links.twig" %}
+    {% endblock %}
+  </div>
+  {# Meta #}
+  <div {{ bem('meta', [], site_footer__base_class) }}>
+    {% include "@atoms/controls/text-link/yds-text-link.twig" with {
+      link__content: 'Accessibility at Yale',
+      link__url: "https://usability.yale.edu/web-accessibility/accessibility-yale",
+      link__style: 'no-underline',
+      link__modifiers: ['footer-link'],
+    } %}
+    <span {{ bem('divider', [], site_footer__base_class) }}>|</span>
+    {% include "@atoms/controls/text-link/yds-text-link.twig" with {
+      link__content: 'Privacy Policy',
+      link__url: "https://privacy.yale.edu/resources/privacy-statement",
+      link__style: 'no-underline',
+      link__modifiers: ['footer-link'],
+    } %}
+    <span {{ bem('divider', [], site_footer__base_class) }}>|</span>
+    <span>Copyright © {{ 'now'|date('Y') }} Yale University. All rights reserved.</span>
+  </div>
+</div>
diff --git a/components/03-organisms/site-footer/_site-footer-mega.twig b/components/03-organisms/site-footer/_site-footer-mega.twig
@@ -0,0 +1,89 @@
+{# Mega Footer #}
+
+{# Primary #}
+<div {{ bem('primary', [], site_footer__base_class) }}>
+  {# Branding #}
+  <div {{ bem('branding', [], site_footer__base_class) }}>
+    <div {{ bem('logo-group', [], site_footer__base_class) }}>
+      {% block site_footer__logos %}
+        {% include "@page-layouts/placeholder/yds-placeholder.twig" with {
+          placeholder: 'logo',
+          placeholder__type: 'element',
+        } %}
+        {% include "@page-layouts/placeholder/yds-placeholder.twig" with {
+          placeholder: 'logo',
+          placeholder__type: 'element',
+        } %}
+        {% include "@page-layouts/placeholder/yds-placeholder.twig" with {
+          placeholder: 'logo',
+          placeholder__type: 'element',
+        } %}
+        {% include "@page-layouts/placeholder/yds-placeholder.twig" with {
+          placeholder: 'logo',
+          placeholder__type: 'element',
+        } %}
+      {% endblock %}
+    </div>
+
+    <div {{ bem('yale-logo', [], site_footer__base_class) }}>
+      {% block site_footer__yale_logo %}
+        {% include "@page-layouts/placeholder/yds-placeholder.twig" with {
+          placeholder: 'Yale logo',
+          placeholder__type: 'element',
+        } %}
+      {% endblock %}
+    </div>
+  </div>
+  {# WYSIWYG #}
+  <div {{ bem('content', [], site_footer__base_class) }}>
+    {% block site_footer__content %}
+      {% include "@page-layouts/placeholder/yds-placeholder.twig" with {
+        placeholder: 'Content',
+        placeholder__type: 'element',
+      } %}
+    {% endblock %}
+  </div>
+  {# Columns #}
+  <div {{ bem('columns', [], site_footer__base_class) }}>
+    <div {{ bem('columns-inner', [], site_footer__base_class) }}>
+      {% block site_footer__two_columns %}
+        {% include "@molecules/link-group/yds-link-group.twig" with {
+          link_group__heading_one: 'Links Column One',
+          link_group__links_one: [{link_group__link__url: '#', link_group__link__content: 'Link one'}, {link_group__link__url: '#', link_group__link__content: 'Link two'}, {link_group__link__url: '#', link_group__link__content: 'Link three'}, {link_group__link__url: '#', link_group__link__content: 'Link four'}],
+          link_group__links_two: [{link_group__link__url: '#', link_group__link__content: 'Link one in column two'}, {link_group__link__url: '#', link_group__link__content: 'Link two  in column two'}, {link_group__link__url: '#', link_group__link__content: 'Link three  in column two'}, {link_group__link__url: '#', link_group__link__content: 'Link four in column two with a very, very, very long title'}],
+        } %}
+      {% endblock %}
+    </div>
+    {# Social #}
+    <div {{ bem('social', [], site_footer__base_class) }}>
+      {% block site_footer__social_links %}
+        {% include "@molecules/social-links/yds-social-links.twig" %}
+      {% endblock %}
+    </div>
+  </div>
+</div>
+{# Secondary #}
+<div {{ bem('secondary', [], site_footer__base_class) }}>
+  {# YALE Logo #}
+  <div {{ bem('logo', [], site_footer__base_class) }}>
+    <a data-link-style="no-underline" class="site-footer__site-branding site-footer__site-branding--primary" href="https://yale.edu">&#XF2A2;</a>
+  </div>
+  {# Meta #}
+  <div {{ bem('meta', [], site_footer__base_class) }}>
+    {% include "@atoms/controls/text-link/yds-text-link.twig" with {
+      link__content: 'Accessibility at Yale',
+      link__url: "https://usability.yale.edu/web-accessibility/accessibility-yale",
+      link__style: 'no-underline',
+      link__modifiers: ['footer-link'],
+    } %}
+    <span {{ bem('divider', [], site_footer__base_class) }}>|</span>
+    {% include "@atoms/controls/text-link/yds-text-link.twig" with {
+      link__content: 'Privacy Policy',
+      link__url: "https://privacy.yale.edu/resources/privacy-statement",
+      link__style: 'no-underline',
+      link__modifiers: ['footer-link'],
+    } %}
+    <span {{ bem('divider', [], site_footer__base_class) }}>|</span>
+    <span>Copyright © {{ 'now'|date('Y') }} Yale University. All rights reserved.</span>
+  </div>
+</div>