[WIP] Adding booking bar to programme page

rca/project_styleguide/templates/patterns/pages/programmes/programme_detail--sticky-bar.html

@@ -0,0 +1 @@
+{% extends "patterns/pages/programmes/programme_detail.html" %}

rca/project_styleguide/templates/patterns/pages/programmes/programme_detail--sticky-bar.yaml

@@ -0,0 +1,178 @@
+context:
+  booking_bar:
+    message: 'Next course starts Thursday 19 March 2020'
+    action: 'Book now for £900'
+    modal: 'booking-details'
+  page:
+    show_register_link: True
+    get_verbose_name: programme-page
+    title: Architecture
+    degree_level: 'MA'
+    hero_image:
+      title: Synaputral Decadence is the flavour of the distant future
+      creator: Jianjin Lee Chen
+      photographer: Sekiro Yamananka
+    programme_description_title: 'We inspire design innovation'
+    programme_description_subtitle: 'Extend your knowledge, skills and creativity through research and experimentation.'
+    programme_image: true
+    programme_video: true
+    programme_video_caption: Watch inside our architecture studios
+    programme_description_copy: '<p>The programme conceives of architecture as a diverse and complex set of practices that move beyond traditional distinctions and limits in the field. The programme expands the possibilities of architecture and its agency in the world by encouraging an independent and critical ethos among its students.</p>'
+    get_ancestors:
+      - is_root: false
+        depth: 2
+        title: Degree Programmes
+      - is_root: false
+        depth: 3
+        title: School of Architecture
+    programme_gallery_title: 'Architecture gallery'
+    programme_gallery:
+      - slide:
+        value:
+          title: 'Albertopolissss 550-metre pedestrian tunnel'
+          author: 'Chris Lawton'
+          link: 'http://www.torchbox.com'
+          course: 'Architecture'
+      - slide:
+        value:
+          title: 'Albertopolis 550-metre pedestrian tunnel'
+          author: 'Nick Lee'
+          link: 'http://www.torchbox.com'
+          course: 'Design'
+      - slide:
+        value:
+          title: 'Albertopolis 550-metre pedestrian tunnel'
+          author: 'Chris Lawton'
+          link: 'http://www.torchbox.com'
+          course: 'Architecture'
+      - slide:
+        value:
+          title: 'Albertopolis 550-metre pedestrian tunnel'
+          author: 'Kevin Howbrook'
+          link: 'http://www.torchbox.com'
+          course: 'Design'
+    facilities_snippet:
+      introduction: The School of Architecture is located across both the RCA's historic Kensington site and London's newest cultural and research culture in White City.
+      link_url: '#'
+      link_title: See all college facilities
+      copy: The School of Architecture studios are the heart of day-to-day activity for the programmes and are purpose-designed for inspiration and interaction between students of different design disciplines. As well as an individual studio space, students have access to traditional 3D-making facilities, contemporary digital fabrication equipment and a suite of bookable project and making spaces.
+    facilities_gallery:
+      - slide:
+        value:
+          title: 'School of Architecture workshop rooms'
+      - slide:
+        value:
+          title: 'School of Architecture workshop rooms'
+      - slide:
+        value:
+          title: 'School of Architecture workshop rooms'
+    notable_alumni_text: 'Alumni from the RCA form an international network of creative individuals who have shaped and continue to shape the culture surrounding all of us.'
+    notable_alumni_links:
+      - link:
+        value:
+          name: 'James Dyson'
+          link: '#'
+      - link:
+        value:
+          name: 'Anton Furst'
+          link: '#'
+      - link:
+        value:
+          name: 'Golifer Langston Architects'
+          link: '#'
+    contact_text: 'If you want to register your interest about joining the RCA and recieve updates from the RCA and it’s community.'
+    contact_link_url: '#'
+    contact_link_text: 'Register your interest with us here'
+    contact_title: 'Contact us'
+    pathway_blocks:
+      - path:
+        value:
+          heading: 'Graphic Design'
+          preview_text: 'Extending and disrupting the tools, intent and role of graphic design.'
+          link:
+            title: 'Find out more'
+            url: '#'
+      - path:
+        value:
+          heading: 'Experimental Communication'
+          preview_text: 'Extending and disrupting the tools, intent and role of graphic design.'
+          link:
+            title: 'Find out more'
+            url: '#'
+      - path:
+        value:
+          heading: 'Illustration'
+          preview_text: 'Extending and disrupting the tools, intent and role of graphic design.'
+          link:
+            title: 'Find out more'
+            url: '#'
+    curriculum_video: 'https://www.youtube.com/watch?v=glIIF-kBXf0'
+    steps:
+      - step:
+        value:
+          heading: Make sure you have read the programme requirements
+          link:
+            url: '#'
+            title: See programme requirements
+      - step:
+        value:
+          heading: Check you have all the information we'll need you to supply
+          link:
+            url: '#'
+            title: See programme requirements
+      - step:
+        value:
+          heading: Start your application
+  related_programmes:
+    - item:
+      title: Related programmes
+      related_items:
+        - item:
+          title: Architecture
+          degree_level: MA
+          programme_description_subtitle: Architecture at the RCA sets out to inspire design innovation
+          img: http://placehold.it/300x270/fff/000
+        - item:
+          title: City design
+          degree_level: MA
+          programme_description_subtitle: Architecture at the RCA sets out to inspire design innovation
+          img: http://placehold.it/300x270/ff5d1c/fff
+        - item:
+          title: Environmental acrhitecture
+          degree_level: MA
+          programme_description_subtitle: Architecture at the RCA sets out to inspire design innovation
+          img: http://placehold.it/300x270
+  eventModule: false
+  news:
+    - item:
+      meta: 'Event'
+      title: 'Writing student wins £25,000 economics prize'
+      description: '6 — 12 August 2019'
+      link: '#'
+      image: true
+      person: false
+    - item:
+      meta: 'Event'
+      title: 'Redefining Boundaries: Architecture Work-in-progress 2019'
+      description: '23 November 2019'
+      link: '#'
+      image: false
+      person: false
+    - item:
+      meta: 'News'
+      title: 'Show 2018: School of Architecture: Making Space for the Future'
+      description: '23 November 2019'
+      link: '#'
+      image: true
+      person: false
+  programme_page_global_fields:
+    contact_text: Get in touch if you’d like to find out more or have any questions about working with the RCA.
+    contact_title: Contact Us
+    related_content_title: More opportunities to study at the RCA
+    pathways_summary: MA Animation comprises of three specialist pathways one of which students select as part of their application.
+    key_details_pathways_information_link_title: Find out more
+tags:
+  image:
+    page.contact_image fill-250x250:
+      raw: |
+        <img src="//placekitten.com/829/585">

rca/project_styleguide/templates/patterns/pages/programmes/programme_detail.html

@@ -36,7 +36,11 @@ <h1 property="schema:name" class="title-area__heading heading heading--display-t
             </div>
         </header>
 
-        <div class="page__content">
+        {% if booking_bar %}
+            {% include "patterns/molecules/booking-bar/booking-bar.html" with item=booking_bar modal=booking_bar.modal modal_aria_label="booking-details-title" %}
+        {% endif %}
+
+        <div class="page__content {% if booking_bar %}js-sticky-point js-sticky-point--top{% endif %}">
 
             <div class="tabs js-tabs" data-tab-hash>
 
@@ -78,6 +82,28 @@ <h1 property="schema:name" class="title-area__heading heading heading--display-t
                 </section>
 
             </div>
+
+            {% if booking_bar %}
+            <div class="page__modals">
+                <div class="modal" id="booking-details" aria-hidden="true">
+                    <div class="modal__overlay bg bg--light" tabindex="-1">
+                        {% include "patterns/atoms/grid-lines/grid-lines.html" %}
+                        <div class="modal__header grid">
+                            <button class="modal__close" aria-label="Close modal" data-micromodal-close>
+                                <span class="modal__close-label">Close</span>
+                                <svg width="14" height="14" class="modal__close-icon" aria-hidden="true"><use xlink:href="#close"></use></svg>
+                            </button>
+                        </div>
+                        <div class="modal__container grid" role="dialog" aria-modal="true" aria-labelledby="booking-details-title">
+                            <div class="modal__content">
+                                Content TBC
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {% endif %}
+
         </div>
     </div>
 {% endblock %}

rca/project_styleguide/templates/patterns/pages/programmes/programme_detail.yaml

@@ -1,5 +1,6 @@
 context:
   page:
+    get_verbose_name: programme-page
     title: Architecture
     degree_level: 'MA'
     hero_image:

rca/static_src/sass/components/_booking-bar.scss

@@ -5,6 +5,7 @@
     $root: &;
     border-bottom: 1px solid $color--grid-line-light;
     overflow: hidden;
+    transition: transform $transition;
 
     @include media-query(medium) {
         border-top: 1px solid $color--grid-line-light;
@@ -72,6 +73,20 @@
         transform: translate3d(0, -100%, 0);
     }
 
+    .app--programme-page.sticky-bar & {
+        $tab-height-large: 60px;
+        @include z-index(footer);
+        top: 0;
+        transform: translate3d(0, $tab-height-large, 0);
+    }
+
+    .headroom--pinned.headroom--not-top.app--programme-page.sticky-bar & {
+        $tab-height-large: 60px;
+        $header-height-large: 80px;
+        $total-height-large: $tab-height-large + $header-height-large;
+        transform: translate3d(0, $total-height-large, 0);
+    }
+
     // Place on last item on the page, to compensate for transform on actual item
     &__last-item {
         margin-bottom: -$booking-bar-height-small;