Wp block element

components.info.yml

@@ -156,4 +156,4 @@ wordpress:
       - primary_heading
       - description
       - button_label
-      - button_url
+      - button_url

wordpress/accordion/block/accordion.php

@@ -0,0 +1,57 @@
+<?php
+namespace Modules;
+use Timber;
+
+### Example usage
+	// $args = array(
+	// 	'accordion_items' => get_sub_field('accordion_items'),
+	// );
+	// $accordion = new Accordion($args);
+	// $accordion->render();
+
+class Accordion {
+	protected $defaults;
+	protected $context;
+
+	public function __construct( $args=[] ){
+		$this->defaults = [
+			'primary_heading' => false,
+			'accordion_items' => false,
+			'classes' => [
+				'l-module',
+				'l-has-no-background',
+				'accordion',
+			]
+		];
+
+		extract(array_merge($this->defaults, $args));
+
+		// echo "<pre>"; print_r($accordion_items); echo "</pre>";
+
+
+		$id = '';
+		if( $primary_heading && function_exists('taoti_inPageNav_get_increment_counter') ){
+			$id = 'section-'.taoti_inPageNav_get_increment_counter();
+		}
+
+
+		// The accordion works via checkbox inputs, which need unique IDs so that multiple accordions on the same page don't conflict with each other.
+		$string_for_unique_id = random_int(1, 1000);
+		$unique_input_id_prefix = md5( $primary_heading.$string_for_unique_id );
+
+
+		$this->context = Timber::get_context();
+		$this->context['primary_heading'] = $primary_heading;
+		$this->context['accordion_items'] = $accordion_items;
+		// $this->context['icon_arrow'] = file_get_contents( get_template_directory().'/images/icon-arrow-down.svg' );
+		$this->context['id'] = $id;
+		$this->context['unique_input_id_prefix'] = $unique_input_id_prefix;
+		$this->context['classes'] = implode(' ', $classes);
+
+	}
+
+	public function render(){
+		Timber::render('accordion.twig', $this->context);
+	}
+
+}

wordpress/accordion/block/scss/_accordion.scss

@@ -0,0 +1,165 @@
+.accordion-main-heading {
+    max-width: $max-width-text;
+    margin: 0 auto;
+}
+
+.accordion-inner {
+    max-width: $max-width-text;
+    margin: 0 auto;
+    box-shadow: $boxshadow;
+}
+
+ul.accordion-list {
+    padding-left: 0;
+}
+
+.accordion-listItem {
+    position: relative;
+    padding: 1rem 2rem .7rem 0;
+    border-bottom: 2px solid $color-3;
+    background: $invert;
+
+    &:before {
+        content: none;
+    }
+
+    @media screen and (max-width: 480px) {
+        padding: 3rem;
+    }
+
+    // +.accordion-listItem {
+    //     border-top: 1px solid $color-1;
+    // }
+}
+
+
+.accordion-headingLabel {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    transition: color 100ms linear;
+    padding-left: 2.6rem;
+
+    &:hover {
+        color: $hover;
+    }
+}
+
+.accordion-heading {
+    font-family: $sans-serif;
+    font-weight: 600;
+    color: $color-1;
+    font-size: 1.4rem;
+
+    @media screen and (min-width: $tablet) {
+        font-size: 1.6rem;
+    }
+
+}
+
+.accordion-toggleIcon {
+    font-size: 2.2rem;
+    font-family: sans-serif;
+    font-weight: 700;
+    line-height: 1;
+    background: $color-2;
+    border-radius: 50%;
+    margin-left: auto;
+    padding: 0.3rem 0.7rem 0.3rem 0.8rem;
+    transform: rotate3d(1, 1, 1, 0deg);
+    font-style: normal;
+
+    &::before {
+        content: '\002B'; // +
+    }
+}
+
+.accordion-text {
+    max-height: 0;
+    font-family: $roboto;
+    font-size: 1.8rem;
+    color: $text;
+    overflow: hidden;
+    overflow-y: auto;
+    transition: max-height 200ms ease-out, margin 1ms linear 200ms;
+    margin-top: 0;
+
+    .btn-filled {
+        margin: 2rem 1rem 0 0;
+    }
+}
+
+
+
+// This is the checkbox <input>. The checked/unchecked state is what toggles the visibility of the answer.
+.accordion-toggle {
+    position: absolute;
+    top: 0;
+    right: 0;
+    visibility: hidden;
+
+    &:checked {
+
+        +.accordion-headingLabel {
+            &::after {
+                align-items: center;
+                background: radial-gradient(at 50% 0, #000, transparent 60%);
+                background-repeat: no-repeat;
+                background-size: 100% 15px;
+                display: flex;
+                flex: 1;
+                height: 15px;
+                justify-content: flex-start;
+                margin: 0 auto;
+                opacity: 0.4;
+                width: 70%;
+            }
+        }
+
+        ~.accordion-text {
+            transition: max-height 400ms ease-in, margin 1ms linear;
+            max-height: 100vh;
+            margin: 3.6rem;
+        }
+
+        +.accordion-headingLabel .accordion-toggleIcon {
+            transform: rotate3d(1, 1, 1, 360deg);
+
+            &::before {
+                content: '\2212'; // -
+            }
+        }
+
+    }
+
+}
+
+
+
+.accordionConsortiums {
+    .accordion-heading {
+        clear: both;
+        font-size: 2rem;
+        max-width: 17.7rem;
+        padding-right: 2rem;
+        width: 100%;
+
+        @media screen and (max-width: 600px) {
+            max-width: none;
+            width: auto;
+        }
+    }
+}
+
+// .accordion-institutionNames {
+
+// }
+
+.accordion-subheading {
+    font-family: $sans-serif;
+    font-size: 1.4rem;
+    font-weight: 600;
+    color: $color-16;
+    display: inline-block;
+}

wordpress/accordion/block/views/accordion.twig

@@ -0,0 +1,43 @@
+{% block accordion %}
+<div class="{{ classes }}"{% if id %} id="{{ id }}"{% endif %}>
+	{% if primary_heading %}
+	<h2 class="accordion-main-heading dark">{{ primary_heading }}</h2>
+	{% endif %}
+
+	<div class="accordion-inner">
+		{% if accordion_items %}
+		<ul class="accordion-list">
+			{% for row in accordion_items %}
+
+			<li class="accordion-listItem">
+
+				<input class="accordion-toggle" type="checkbox" id="accordion-{{unique_input_id_prefix}}-{{ loop.index0 }}">
+
+				<label class="accordion-headingLabel" for="accordion-{{unique_input_id_prefix}}-{{ loop.index0 }}">
+					<span class="accordion-heading">{{ row.title }}</span>
+					{% if row.subtitle %}
+					<span class="accordion-subheading">{{ row.subtitle }}</span>
+					{% endif %}
+					<i class="accordion-toggleIcon"></i>
+				</label>
+
+				<div class="accordion-text entry-content">
+					<div class="description">{{ row.description }}</div>
+					{% if row.buttons %}
+						{% for button in row.buttons %}
+						<a href="{{ button.button_url }}" class="btn-filled">
+							{{ button.button_label }}
+						</a>
+						{% endfor %}
+					{% endif %}
+				</div>
+
+			</li>
+
+			{% endfor %}
+		</ul>
+		{% endif %}
+
+	</div>
+</div>
+{% endblock %}

wordpress/cta/block/cta.php

@@ -0,0 +1,79 @@
+<?php
+namespace Modules;
+use Timber;
+
+### Example usage
+	// $args = array(
+	// 	'heading' => get_sub_field('heading'),
+	// 	'description' => get_sub_field('description'),
+	// 	'button_label' => get_sub_field('button_label'),
+	// 	'button_url' => get_sub_field('button_url'),
+	// 	'background_image' => get_sub_field('background_image'),
+	// 	'overlay_color' => get_sub_field('overlay_color'),
+	// );
+	// $cta = new CTA($args);
+	// $cta->render();
+
+class CTA {
+	protected $defaults;
+	protected $context;
+
+	public function __construct( $args=[] ){
+		$this->defaults = [
+			'heading' => false,
+			'description' => false,
+			'button_url' => false,
+			'button_label' => false,
+			'background_image' => false,
+			'background_image_url' => false,
+			'overlay_color' => false,
+			'classes' => [
+				'l-module',
+				'l-has-background',
+				'cta',
+			]
+		];
+
+		extract(array_merge($this->defaults, $args));
+
+		// If no specific background image url was given, pull one from the image array.
+		if( !$background_image_url ){
+
+			if( isset( $background_image['sizes']['1080p'] ) ){
+				$background_image_url = $background_image['sizes']['1080p'];
+
+			} elseif( isset( $background_image['sizes']['720p'] ) ){
+				$background_image_url =$background_image['sizes']['720p'];
+
+			}
+
+		}
+
+		// Add the lazyload class for the background image to be lazyloaded.
+		if( $background_image_url ){
+			$classes[] = 'lazyload';
+		}
+
+
+		if( is_string( $overlay_color ) ){
+			$classes[] = 'cta-'.$overlay_color;
+		}
+
+
+		$this->context = Timber::get_context();
+		$this->context['heading'] = $heading;
+		$this->context['description'] = $description;
+		$this->context['button_url'] = $button_url;
+		$this->context['button_label'] = $button_label;
+		$this->context['background_image'] = $background_image;
+		$this->context['background_image_url'] = $background_image_url;
+		$this->context['overlay_color'] = $overlay_color;
+		$this->context['classes'] = implode(' ', $classes);
+
+	}
+
+	public function render(){
+		Timber::render('cta.twig', $this->context);
+	}
+
+}