From 8eb6b409b48ceb3ddbd2e978a82c6c7625bc523a Mon Sep 17 00:00:00 2001
From: poojagunturu96 <pgunturu@middlebury.edu>
Date: Tue, 12 Nov 2024 18:34:55 -0600
Subject: [PATCH 1/2] update styles and markup for cci cta bar

---
 src/scss/components/_cta-bar.scss         |  64 ++++++++++++
 src/templates/office-cci-home.twig        | 122 ++++++++++++++++++++++
 src/templates/partials/anchor-header.twig |   2 +-
 src/templates/partials/cta-bar.twig       |  23 +++-
 src/templates/partials/social-links.twig  |   8 +-
 5 files changed, 211 insertions(+), 8 deletions(-)
 create mode 100644 src/templates/office-cci-home.twig

diff --git a/src/scss/components/_cta-bar.scss b/src/scss/components/_cta-bar.scss
index 620addcbe..1b448117e 100644
--- a/src/scss/components/_cta-bar.scss
+++ b/src/scss/components/_cta-bar.scss
@@ -42,3 +42,67 @@
   transition: opacity 0.2s;
   background: $white;
 }
+
+// CCI CTA bar 
+.cta-bar.link-list {
+  display: flex;
+  background-color: $blue-lighter;
+  color: $navy;
+  flex-direction: column;
+  align-items: center;
+  padding-top: $spacing-2;
+
+  @include breakpoint(md) {
+    padding-bottom: $spacing-2;
+  }
+
+  @include breakpoint(lg) {
+    flex-direction: row;
+    justify-content: center;
+    align-items: baseline;
+    line-height: $line-height-solid;
+  }
+
+  .cta-bar__links {
+    margin-bottom: $spacing-1;
+
+    @include breakpoint(sm) {
+      margin-bottom: 0;
+    }
+
+    @include breakpoint(lg) {
+      padding-right: $spacing-5;
+      border-right: 1px solid $gray-light;
+    }
+  }
+
+  a.cta-bar__link {
+    font-size: $typescale-2;
+    @include link-border;
+    white-space: nowrap;
+
+    &:not(:first-child) {
+      margin-left: $spacing-3;
+
+      @include breakpoint(lg) {
+        margin-left: $spacing-5;
+      }
+    }
+  }
+
+  ul {
+    @include breakpoint(lg) {
+      padding-left: rem(28);
+    }
+  }
+
+  &:hover,
+  &:focus {
+    background: $blue-lighter;
+
+    .cta-bar__text,
+    .cta-bar__button {
+      opacity: 1;
+    }
+  }
+}
diff --git a/src/templates/office-cci-home.twig b/src/templates/office-cci-home.twig
new file mode 100644
index 000000000..43a73debd
--- /dev/null
+++ b/src/templates/office-cci-home.twig
@@ -0,0 +1,122 @@
+{% extends "anchor-layout.twig" %}
+
+{% set page_title = 'Center for Careers and Internships' %}
+
+{% set office_header_nav =
+  office_header_nav|default(
+    [
+      {
+        text: 'See An Advisor',
+        active: true,
+        items: [
+          {
+            text: 'Helpful Links'
+          },
+          {
+            text: 'How to apply'
+          },
+          {
+            text: 'Types of aid'
+          },
+          {
+            text: 'Education Loans'
+          }
+        ]
+      },
+      {
+        text: 'Events and Programs',
+        items: [
+          {
+            text: 'Helpful Links'
+          },
+          {
+            text: 'How to apply'
+          },
+          {
+            text: 'Types of aid'
+          },
+          {
+            text: 'Education Loans'
+          }
+        ]
+      },
+      {
+        text: 'CCI News'
+      },
+      {
+        text: 'I Want To...',
+        items: [
+          {
+            text: 'Helpful Links'
+          },
+          {
+            text: 'How to apply'
+          },
+          {
+            text: 'Types of aid'
+          },
+          {
+            text: 'Education Loans'
+          }
+        ]
+      },
+      {
+        text: 'Alumni',
+        items: [
+          {
+            text: 'Helpful Links'
+          },
+          {
+            text: 'How to apply'
+          },
+          {
+            text: 'Types of aid'
+          },
+          {
+            text: 'Education Loans'
+          }
+        ]
+      },
+      {
+        text: 'Faculty'
+      },
+      {
+        text: 'Employers',
+        items: [
+          {
+            text: 'Helpful Links'
+          },
+          {
+            text: 'How to apply'
+          },
+          {
+            text: 'Types of aid'
+          },
+          {
+            text: 'Education Loans'
+          }
+        ]
+      },
+      {
+        text: 'Families'
+      }
+    ]
+  )
+%}
+
+{% block layout_header %}
+  {% include 'partials/midd-header.twig' %}
+  {% embed 'partials/anchor-header.twig' with {
+    is_front: true
+  }%}
+    {% block anchor_header_content %}
+      {% include 'partials/cta-bar.twig' with {
+        cci: true
+      } %}
+    {% endblock %}
+  {% endembed %}
+{% endblock %}
+
+{% block page %}
+  {% include 'partials/top-level-layout.twig' %}
+{% endblock %}
diff --git a/src/templates/partials/anchor-header.twig b/src/templates/partials/anchor-header.twig
index fffcb00a4..de80cd544 100644
--- a/src/templates/partials/anchor-header.twig
+++ b/src/templates/partials/anchor-header.twig
@@ -1,4 +1,4 @@
-{% set is_front = false %}
+{# {% set is_front = false %} #}
 <section class="anchor-header{% if is_front %} anchor-header--front{% endif %}" aria-labelledby="midd-anchor-header-label">
   <div class="container">
     <div class="anchor-header__primary">
diff --git a/src/templates/partials/cta-bar.twig b/src/templates/partials/cta-bar.twig
index 5ffff6dde..0f89ec35d 100644
--- a/src/templates/partials/cta-bar.twig
+++ b/src/templates/partials/cta-bar.twig
@@ -1,4 +1,19 @@
-<a href="{{ link }}" class="cta-bar">
-  <span class="cta-bar__text">{{ text }}</span>
-  <span class="cta-bar__button button button--sm">{{ button }}</span>
-</a>
+{% if cci %}
+  <div class="cta-bar link-list">
+    <div class="cta-bar__links">
+      <a class="cta-bar__link" href="#">Appointments and Drop-Ins</a>
+      <a class="cta-bar__link" href="#">Handshake</a>
+      <a class="cta-bar__link" href="#">Midd2Midd</a>
+      <a class="cta-bar__link" href="#">Hire a MiddKid</a>
+    </div>
+    {% include 'partials/social-links.twig' with {
+      dark: true,
+      items: ['linkedin', 'instagram', 'youtube', 'facebook']
+    } %}
+  </div>
+{% else %}
+  <a href="{{ link }}" class="cta-bar"> 
+    <span class="cta-bar__text">{{ text }}</span>
+    <span class="cta-bar__button button button--sm">{{ button }}</span>
+  </a>
+{% endif %}
diff --git a/src/templates/partials/social-links.twig b/src/templates/partials/social-links.twig
index 325669c33..6706d8629 100644
--- a/src/templates/partials/social-links.twig
+++ b/src/templates/partials/social-links.twig
@@ -1,8 +1,10 @@
+{% set social_items = items|default(['discord', 'linkedin', 'instagram', 'tiktok', 'youtube', 'mastodon', 'pinterest', 'twitter', 'vimeo', 'facebook', 'wechat', 'weibo', 'x', 'threads']) %}
+
 <ul class="d-inline-flex {{class}}">
-  {% for name in ['discord', 'linkedin', 'instagram', 'tiktok', 'youtube', 'mastodon', 'pinterest', 'twitter', 'vimeo', 'facebook', 'wechat', 'weibo', 'x', 'threads'] %}
-    {% if env.test or random(1) %}
+  {% for name in social_items %}
+    {% if items or random(1) %}
       <li class="mr-1">
-        <a href="#" class="d-inline-block {% if light %}text-white hover-fadeout{% else %}hover-fadein{% endif %} {{office_footer ? " px-1" : " p-1"}}">
+        <a href="#" class="d-inline-block {% if light %}text-white hover-fadeout{% elseif dark %}hover-fadeout{% else %}hover-fadein{% endif %} {{office_footer ? " px-1" : " p-1"}}">
           {% include 'partials/icon.twig' with {
             name: name,
             class: large ? 'f5' : null

From 60f9c63d31b30dc04dc51f7c81ac2f5e54b3bb3f Mon Sep 17 00:00:00 2001
From: poojagunturu96 <pgunturu@middlebury.edu>
Date: Thu, 14 Nov 2024 11:46:44 -0600
Subject: [PATCH 2/2] update office-hours.twig to info-bar.twig to accommodate
 for cci cta bar

---
 src/scss/components/_cta-bar.scss      |  66 +--------------
 src/scss/components/_info-bar.scss     | 106 +++++++++++++++++++++++++
 src/scss/components/_office-hours.scss |  34 --------
 src/scss/main.scss                     |   2 +-
 src/templates/office-cci-home.twig     |  14 +++-
 src/templates/office-library-home.twig |  10 ++-
 src/templates/partials/cta-bar.twig    |  23 +-----
 src/templates/partials/info-bar.twig   |  14 ++++
 8 files changed, 146 insertions(+), 123 deletions(-)
 create mode 100644 src/scss/components/_info-bar.scss
 delete mode 100644 src/scss/components/_office-hours.scss
 create mode 100644 src/templates/partials/info-bar.twig

diff --git a/src/scss/components/_cta-bar.scss b/src/scss/components/_cta-bar.scss
index 1b448117e..235fa3170 100644
--- a/src/scss/components/_cta-bar.scss
+++ b/src/scss/components/_cta-bar.scss
@@ -41,68 +41,4 @@
 .cta-bar__button {
   transition: opacity 0.2s;
   background: $white;
-}
-
-// CCI CTA bar 
-.cta-bar.link-list {
-  display: flex;
-  background-color: $blue-lighter;
-  color: $navy;
-  flex-direction: column;
-  align-items: center;
-  padding-top: $spacing-2;
-
-  @include breakpoint(md) {
-    padding-bottom: $spacing-2;
-  }
-
-  @include breakpoint(lg) {
-    flex-direction: row;
-    justify-content: center;
-    align-items: baseline;
-    line-height: $line-height-solid;
-  }
-
-  .cta-bar__links {
-    margin-bottom: $spacing-1;
-
-    @include breakpoint(sm) {
-      margin-bottom: 0;
-    }
-
-    @include breakpoint(lg) {
-      padding-right: $spacing-5;
-      border-right: 1px solid $gray-light;
-    }
-  }
-
-  a.cta-bar__link {
-    font-size: $typescale-2;
-    @include link-border;
-    white-space: nowrap;
-
-    &:not(:first-child) {
-      margin-left: $spacing-3;
-
-      @include breakpoint(lg) {
-        margin-left: $spacing-5;
-      }
-    }
-  }
-
-  ul {
-    @include breakpoint(lg) {
-      padding-left: rem(28);
-    }
-  }
-
-  &:hover,
-  &:focus {
-    background: $blue-lighter;
-
-    .cta-bar__text,
-    .cta-bar__button {
-      opacity: 1;
-    }
-  }
-}
+}
\ No newline at end of file
diff --git a/src/scss/components/_info-bar.scss b/src/scss/components/_info-bar.scss
new file mode 100644
index 000000000..7234c80b6
--- /dev/null
+++ b/src/scss/components/_info-bar.scss
@@ -0,0 +1,106 @@
+.info-bar {
+  background: $blue-lighter;
+  @include breakpoint(md) {
+    padding-top: $spacing-2;
+    padding-bottom: $spacing-2;
+  }
+}
+
+.info-bar__list {
+  @include breakpoint(md) {
+    display: flex;
+  }
+}
+
+.info-bar__item {
+  font-size: $typescale-2;
+  padding-top: $spacing-2;
+  padding-bottom: $spacing-2;
+
+  @include breakpoint(md) {
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-right: $spacing-4;
+    padding-right: $spacing-4;
+  }
+
+  &:not(:last-child) {
+    border-bottom: 1px solid $border-color;
+    @include breakpoint(md) {
+      border-bottom: 0;
+      border-right: 1px solid $border-color;
+    }
+  }
+}
+
+.info-bar.link-list {
+  padding-top: $spacing-2;
+  padding-bottom: $spacing-2;
+
+  @include breakpoint(lg) {
+    line-height: $line-height-solid;
+  }
+  
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    @include breakpoint(lg) {
+      flex-direction: row;
+      justify-content: center;
+      align-items: baseline;
+    }
+  }
+
+  .info-bar__list {
+    display: initial;
+    text-align: center;
+    margin-bottom: $spacing-1;
+
+    @include breakpoint(sm) {
+      margin-bottom: 0;
+    }
+  }
+
+  .info-bar__item {
+    display: inline;
+    font-weight: $font-weight-semibold;
+    white-space: nowrap;
+    padding: 0;
+    border: 0;
+
+    &:not(:first-child) {
+      margin-left: $spacing-2;
+      padding-left: $spacing-2;
+
+      @include breakpoint(lg) {
+        margin-left: 0;
+        padding-left: 0;
+      }
+    }
+    
+    @include breakpoint(lg) {
+      margin-right: $spacing-4;
+      padding-right: $spacing-4;
+    }
+
+    &:last-child {
+      @include breakpoint(lg) {
+        border-right: 1px solid $border-color;
+      }
+    }
+
+    a {
+      @include link-border;
+    }
+  }
+
+  ul.link-list {
+    li:first-child {
+      a {
+        padding-left: 0 !important;
+      }
+    }
+  }
+}
diff --git a/src/scss/components/_office-hours.scss b/src/scss/components/_office-hours.scss
deleted file mode 100644
index e8639709a..000000000
--- a/src/scss/components/_office-hours.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.office-hours {
-  background: $blue-lighter;
-  @include breakpoint(md) {
-    padding-top: $spacing-2;
-    padding-bottom: $spacing-2;
-  }
-}
-
-.office-hours__list {
-  @include breakpoint(md) {
-    display: flex;
-  }
-}
-
-.office-hours__item {
-  font-size: $typescale-2;
-  padding-top: $spacing-2;
-  padding-bottom: $spacing-2;
-
-  @include breakpoint(md) {
-    padding-top: 0;
-    padding-bottom: 0;
-    margin-right: $spacing-4;
-    padding-right: $spacing-4;
-  }
-
-  &:not(:last-child) {
-    border-bottom: 1px solid $border-color;
-    @include breakpoint(md) {
-      border-bottom: 0;
-      border-right: 1px solid $border-color;
-    }
-  }
-}
diff --git a/src/scss/main.scss b/src/scss/main.scss
index bb22f0b2b..960658191 100755
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -87,7 +87,7 @@
 @import 'components/nav';
 @import 'components/nav-dropdown';
 @import 'components/non-discrimination-policy';
-@import 'components/office-hours';
+@import 'components/info-bar';
 @import 'components/office-footer';
 @import 'components/page-header';
 @import 'components/page-image';
diff --git a/src/templates/office-cci-home.twig b/src/templates/office-cci-home.twig
index 43a73debd..813039c6d 100644
--- a/src/templates/office-cci-home.twig
+++ b/src/templates/office-cci-home.twig
@@ -110,8 +110,18 @@
     is_front: true
   }%}
     {% block anchor_header_content %}
-      {% include 'partials/cta-bar.twig' with {
-        cci: true
+      {% include 'partials/info-bar.twig' with {
+        class: 'link-list',
+        items: [
+          { text: '<a href="#">Appointments and Drop-Ins</a>' },
+          { text: '<a href="#">Handshake</a>' },
+          { text: '<a href="#">Midd2Midd</a>' },
+          { text: '<a href="#">Hire a MiddKid</a>' }
+        ],
+        show_social_links: {
+          dark: true,
+          items: ['linkedin', 'instagram', 'youtube', 'facebook']
+        }
       } %}
     {% endblock %}
   {% endembed %}
diff --git a/src/templates/office-library-home.twig b/src/templates/office-library-home.twig
index d75aa7421..764c3dad4 100644
--- a/src/templates/office-library-home.twig
+++ b/src/templates/office-library-home.twig
@@ -1,13 +1,19 @@
 {% extends "anchor-layout.twig" %}
 
-{% set is_front = true %}
+{% set is_front = false %}
 {% set page_title = 'Library' %}
 
 {% block layout_header %}
   {% include 'partials/midd-header.twig' %}
   {% embed 'partials/anchor-header.twig' %}
     {% block anchor_header_content %}
-      {% include 'partials/office-hours.twig' %}
+      {% include 'partials/info-bar.twig' with {
+        items: [
+          { text: '<strong>Davis Family Library: </strong> 9 a.m.-5 p.m.' },
+          { text: '<strong>Armstrong Library: </strong> 9 a.m.-5 p.m.' },
+          { text: '<a href="" class="link-underline">View Library hours</a>' }
+        ]
+      } %}
     {% endblock %}
   {% endembed %}
 {% endblock %}
diff --git a/src/templates/partials/cta-bar.twig b/src/templates/partials/cta-bar.twig
index 0f89ec35d..44b778154 100644
--- a/src/templates/partials/cta-bar.twig
+++ b/src/templates/partials/cta-bar.twig
@@ -1,19 +1,4 @@
-{% if cci %}
-  <div class="cta-bar link-list">
-    <div class="cta-bar__links">
-      <a class="cta-bar__link" href="#">Appointments and Drop-Ins</a>
-      <a class="cta-bar__link" href="#">Handshake</a>
-      <a class="cta-bar__link" href="#">Midd2Midd</a>
-      <a class="cta-bar__link" href="#">Hire a MiddKid</a>
-    </div>
-    {% include 'partials/social-links.twig' with {
-      dark: true,
-      items: ['linkedin', 'instagram', 'youtube', 'facebook']
-    } %}
-  </div>
-{% else %}
-  <a href="{{ link }}" class="cta-bar"> 
-    <span class="cta-bar__text">{{ text }}</span>
-    <span class="cta-bar__button button button--sm">{{ button }}</span>
-  </a>
-{% endif %}
+<a href="{{ link }}" class="cta-bar"> 
+  <span class="cta-bar__text">{{ text }}</span>
+  <span class="cta-bar__button button button--sm">{{ button }}</span>
+</a>
\ No newline at end of file
diff --git a/src/templates/partials/info-bar.twig b/src/templates/partials/info-bar.twig
new file mode 100644
index 000000000..0adc9e6ba
--- /dev/null
+++ b/src/templates/partials/info-bar.twig
@@ -0,0 +1,14 @@
+<div class="info-bar {{class}}">
+  <div class="container">
+    <div class="info-bar__list">
+      {% for item in items %}
+        <div class="info-bar__item">
+          {{item.text}}
+        </div>
+      {% endfor %}
+    </div>
+    {% if show_social_links %}
+      {% include 'partials/social-links.twig' with show_social_links %}
+    {% endif %}
+  </div>
+</div>
\ No newline at end of file