ISTWCMS-3505: adding patterns for header (site-logo and header-menu)

source/_patterns/03-layouts/header/_header.scss

 // @file
 // Styles for Header Layout.
 
-// .l-header {}
+.uw-header {
+  background-color: #000;
+  padding: 0.5rem 0;
+  width: 100%;
+
+  &__wrapper {
+    display: grid;
+    font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
+    grid-template-columns: 25% 75%;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 63.125rem;
+    position: relative;
+
+    .uw-site-logo {
+      grid-column: 1 / 2;
+      grid-row: 1 / 2;
+    }
+
+    .uw-header-menu {
+      grid-column: 2 / 3;
+      grid-row: 1 / 2;
+    }
+  }
+}
\ No newline at end of file

source/_patterns/03-layouts/header/header.twig

-<header class="l-header" role="banner">
-  {% if has_constrain %}
-    <div class="l-constrain {{ constrain_modifier_classes }}">
-  {% endif %}
-  {% block content %}
-    Header Region Content
-  {% endblock %}
-  {% if has_constrain %}
+<header class="uw-header" role="banner">
+    <div class="uw-header__wrapper">
+        {% include "@components/site-logo/site-logo.twig"%}
+        {% block content %}
+            {% include "@components/menu/menu--header/menu--header.twig" with {
+                'items': items
+            } %}
+        {% endblock %}
     </div>
-  {% endif %}
 </header>

source/_patterns/03-layouts/header/header.yml

+---
+menu_name: 'header'
+items:
+  - title: 'Admissions'
+    url: https://uwaterloo.ca/admissions/'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    in_active_trail: false
+  - title: 'About Waterloo'
+    url: 'https://uwaterloo.ca/about/'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    in_active_trail: false
+  - title: 'Faculties & Academics'
+    url: 'https://uwaterloo.ca/faculties-academics/'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    in_active_trail: false
+  - title: 'Offices & Services'
+    url: 'https://uwaterloo.ca/offices-services/'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    in_active_trail: false
+  - title: 'Support Waterloo'
+    url: 'https://uwaterloo.ca/support/'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    in_active_trail: false
\ No newline at end of file

source/_patterns/03-layouts/site-container/site-container.twig

-<div class="l-site-container">
+<div class="uw-site-container">
   {% block site_content %}
-    Site Content
+    {% include "@layouts/header/header.twig" %}
   {% endblock %}
 </div>

source/_patterns/04-components/menu/menu--header/_menu--header.scss

+.uw-header-menu {
+  background-color: #000;
+
+  ul {
+    display: block;
+    text-align: center;
+  }
+
+  li {
+    display: inline-block;
+    padding: 0 0.5rem;
+  }
+
+  a {
+    color: #fff;
+    font-family: "BureauGrotCond Book",impact,"avenir next condensed heavy","Droid Sans",sans-serif;
+    font-size: .88889rem;
+    letter-spacing: .045rem;
+    text-decoration: none;
+    text-transform: uppercase;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
\ No newline at end of file

source/_patterns/04-components/menu/menu--header/menu--header.twig

+<div class="uw-header-menu">
+  {% include '@components/menu/menu.twig' with {
+    'menu_name': menu_name,
+    'items': items
+  } %}
+</div>
\ No newline at end of file

source/_patterns/04-components/menu/menu--header/menu--header.yml

+---
+menu_name: 'header'
+items:
+  - title: 'Admissions'
+    url: https://uwaterloo.ca/admissions/'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    in_active_trail: false
+  - title: 'About Waterloo'
+    url: 'https://uwaterloo.ca/about/'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    in_active_trail: false
+  - title: 'Faculties & Academics'
+    url: 'https://uwaterloo.ca/faculties-academics/'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    in_active_trail: false
+  - title: 'Offices & Services'
+    url: 'https://uwaterloo.ca/offices-services/'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    in_active_trail: false
+  - title: 'Support Waterloo'
+    url: 'https://uwaterloo.ca/support/'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    in_active_trail: false
\ No newline at end of file

source/_patterns/04-components/site-logo/_site-logo.scss

 // @file
 // Styles for Site logo.
 
-// .site-logo {}
+.uw-site-logo {
+  background: url('../images/logos/uwaterloo-logo.svg') 0 50% no-repeat;
+  background-color: #000;
+  background-size: contain;
+  color: #000;
+  display: block;
+  height: 2.688rem;
+  text-indent: -999rem;
+  width: 100%;
+}

source/_patterns/04-components/site-logo/site-logo.twig

-<a class="site-logo" href="{{ url }}" title="{{ 'Home'|t }}" rel="home">
-  <img class="site-logo__image" src="{{ site_logo }}" alt="{{ 'Home'|t }}" />
-</a>
+<div class="uw-site-logo">
+  <a class="uw-site-logo__link" href="https://uwaterloo.ca" title="{{ 'Home'|t }}" rel="home"></a>
+</div>
\ No newline at end of file