From 26465efddfd184acb2b4aafd52c07114bfdc31b0 Mon Sep 17 00:00:00 2001
From: ebremner <ebremner@uwaterloo.ca>
Date: Wed, 18 Dec 2019 16:39:20 -0500
Subject: [PATCH] ISTWCMS-3505: adding patterns for header (site-logo and
header-menu)
---
.../_patterns/03-layouts/header/_header.scss | 26 ++++++++++++-
.../_patterns/03-layouts/header/header.twig | 17 ++++-----
source/_patterns/03-layouts/header/header.yml | 38 +++++++++++++++++++
.../site-container/site-container.twig | 4 +-
.../menu/menu--header/_menu--header.scss | 26 +++++++++++++
.../menu/menu--header/menu--header.twig | 6 +++
.../menu/menu--header/menu--header.yml | 38 +++++++++++++++++++
.../04-components/site-logo/_site-logo.scss | 11 +++++-
.../04-components/site-logo/site-logo.twig | 6 +--
9 files changed, 156 insertions(+), 16 deletions(-)
create mode 100644 source/_patterns/03-layouts/header/header.yml
create mode 100644 source/_patterns/04-components/menu/menu--header/_menu--header.scss
create mode 100644 source/_patterns/04-components/menu/menu--header/menu--header.twig
create mode 100644 source/_patterns/04-components/menu/menu--header/menu--header.yml
diff --git a/source/_patterns/03-layouts/header/_header.scss b/source/_patterns/03-layouts/header/_header.scss
index 389c4863..f598ddea 100644
--- a/source/_patterns/03-layouts/header/_header.scss
+++ b/source/_patterns/03-layouts/header/_header.scss
@@ -1,4 +1,28 @@
// @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
diff --git a/source/_patterns/03-layouts/header/header.twig b/source/_patterns/03-layouts/header/header.twig
index af45d98a..f874a8d8 100644
--- a/source/_patterns/03-layouts/header/header.twig
+++ b/source/_patterns/03-layouts/header/header.twig
@@ -1,11 +1,10 @@
-<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>
diff --git a/source/_patterns/03-layouts/header/header.yml b/source/_patterns/03-layouts/header/header.yml
new file mode 100644
index 00000000..344a21ed
--- /dev/null
+++ b/source/_patterns/03-layouts/header/header.yml
@@ -0,0 +1,38 @@
+---
+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
diff --git a/source/_patterns/03-layouts/site-container/site-container.twig b/source/_patterns/03-layouts/site-container/site-container.twig
index 5f862479..b6f40701 100644
--- a/source/_patterns/03-layouts/site-container/site-container.twig
+++ b/source/_patterns/03-layouts/site-container/site-container.twig
@@ -1,5 +1,5 @@
-<div class="l-site-container">
+<div class="uw-site-container">
{% block site_content %}
- Site Content
+ {% include "@layouts/header/header.twig" %}
{% endblock %}
</div>
diff --git a/source/_patterns/04-components/menu/menu--header/_menu--header.scss b/source/_patterns/04-components/menu/menu--header/_menu--header.scss
new file mode 100644
index 00000000..62c7fd39
--- /dev/null
+++ b/source/_patterns/04-components/menu/menu--header/_menu--header.scss
@@ -0,0 +1,26 @@
+.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
diff --git a/source/_patterns/04-components/menu/menu--header/menu--header.twig b/source/_patterns/04-components/menu/menu--header/menu--header.twig
new file mode 100644
index 00000000..38095c54
--- /dev/null
+++ b/source/_patterns/04-components/menu/menu--header/menu--header.twig
@@ -0,0 +1,6 @@
+<div class="uw-header-menu">
+ {% include '@components/menu/menu.twig' with {
+ 'menu_name': menu_name,
+ 'items': items
+ } %}
+</div>
\ No newline at end of file
diff --git a/source/_patterns/04-components/menu/menu--header/menu--header.yml b/source/_patterns/04-components/menu/menu--header/menu--header.yml
new file mode 100644
index 00000000..344a21ed
--- /dev/null
+++ b/source/_patterns/04-components/menu/menu--header/menu--header.yml
@@ -0,0 +1,38 @@
+---
+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
diff --git a/source/_patterns/04-components/site-logo/_site-logo.scss b/source/_patterns/04-components/site-logo/_site-logo.scss
index deec2ce0..188d2147 100644
--- a/source/_patterns/04-components/site-logo/_site-logo.scss
+++ b/source/_patterns/04-components/site-logo/_site-logo.scss
@@ -1,4 +1,13 @@
// @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%;
+}
diff --git a/source/_patterns/04-components/site-logo/site-logo.twig b/source/_patterns/04-components/site-logo/site-logo.twig
index d1888810..c5d767c2 100644
--- a/source/_patterns/04-components/site-logo/site-logo.twig
+++ b/source/_patterns/04-components/site-logo/site-logo.twig
@@ -1,3 +1,3 @@
-<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
--
GitLab