From 41136a20c483e3c790fae2885b6bea3044b7c0bb Mon Sep 17 00:00:00 2001
From: Dan Chadwick <danchadwick@Dans-MacBook-Air.local>
Date: Sat, 21 Sep 2024 21:34:23 -0400
Subject: [PATCH] New updates.

---
 composer.json                                 |  1 +
 composer.lock                                 | 54 ++++++++++-
 .../components/ping-pong/ping-pong.css        |  1 +
 .../components/heading/heading.component.yml  | 16 ++++
 .../dchadwick/components/heading/heading.css  | 34 +++++++
 .../dchadwick/components/heading/heading.twig |  5 +
 web/themes/custom/dchadwick/css/style.css     | 67 +++++++++++++-
 .../custom/dchadwick/dchadwick.layouts.yml    | 13 +++
 .../custom/dchadwick/dchadwick.libraries.yml  |  1 +
 web/themes/custom/dchadwick/dchadwick.theme   | 10 ++
 .../dchadwick/src/sass/partials/article.scss  | 63 +++++++++++++
 .../dchadwick/src/sass/partials/header.scss   | 13 +++
 .../dchadwick/src/sass/partials/hero.scss     |  1 +
 .../custom/dchadwick/src/sass/style.scss      |  3 +-
 ...ck--inline-block--premier-banner.html.twig | 49 ++++++++++
 .../templates/layouts/two-row.html.twig       | 14 +++
 .../templates/node/node--article.html.twig    | 91 +++++++++++++++++++
 17 files changed, 432 insertions(+), 4 deletions(-)
 create mode 100644 web/themes/custom/dchadwick/components/heading/heading.component.yml
 create mode 100644 web/themes/custom/dchadwick/components/heading/heading.css
 create mode 100644 web/themes/custom/dchadwick/components/heading/heading.twig
 create mode 100644 web/themes/custom/dchadwick/dchadwick.layouts.yml
 create mode 100644 web/themes/custom/dchadwick/src/sass/partials/article.scss
 create mode 100644 web/themes/custom/dchadwick/templates/blocks/block--inline-block--premier-banner.html.twig
 create mode 100644 web/themes/custom/dchadwick/templates/layouts/two-row.html.twig
 create mode 100644 web/themes/custom/dchadwick/templates/node/node--article.html.twig

diff --git a/composer.json b/composer.json
index ef1767c..6521706 100644
--- a/composer.json
+++ b/composer.json
@@ -31,6 +31,7 @@
         "drupal/gin": "^3.0@RC",
         "drupal/gin_login": "^2.1",
         "drupal/google_tag": "^2.0",
+        "drupal/html_formatter": "^2.0",
         "drupal/jsonapi_permission_access": "1.0.1",
         "drupal/layout_builder_admin_theme": "^2.0",
         "drupal/layout_builder_styles": "^2.0",
diff --git a/composer.lock b/composer.lock
index a727526..0a6c477 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "c81388871a3db4490fb9a752a9444ad6",
+    "content-hash": "6089571e27cbac2520d85b9198689722",
     "packages": [
         {
             "name": "asm89/stack-cors",
@@ -3099,6 +3099,58 @@
                 "source": "https://git.drupalcode.org/project/google_tag"
             }
         },
+        {
+            "name": "drupal/html_formatter",
+            "version": "2.0.1",
+            "source": {
+                "type": "git",
+                "url": "https://git.drupalcode.org/project/html_formatter.git",
+                "reference": "2.0.1"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://ftp.drupal.org/files/projects/html_formatter-2.0.1.zip",
+                "reference": "2.0.1",
+                "shasum": "07c4296bf29f9bc330288d5e2625e79506a11503"
+            },
+            "require": {
+                "drupal/core": "^8 || ^9 || ^10 || ^11"
+            },
+            "type": "drupal-module",
+            "extra": {
+                "drupal": {
+                    "version": "2.0.1",
+                    "datestamp": "1722681463",
+                    "security-coverage": {
+                        "status": "covered",
+                        "message": "Covered by Drupal's security advisory policy"
+                    }
+                }
+            },
+            "notification-url": "https://packages.drupal.org/8/downloads",
+            "license": [
+                "GPL-2.0+"
+            ],
+            "authors": [
+                {
+                    "name": "albertski",
+                    "homepage": "https://www.drupal.org/user/1327432"
+                },
+                {
+                    "name": "thejimbirch",
+                    "homepage": "https://www.drupal.org/user/2507260"
+                }
+            ],
+            "description": "Adds HTML Formatter to textfields",
+            "homepage": "https://www.drupal.org/project/html_formatter",
+            "keywords": [
+                "Drupal"
+            ],
+            "support": {
+                "source": "http://cgit.drupalcode.org/html_formatter",
+                "issues": "https://www.drupal.org/project/issues/html_formatter"
+            }
+        },
         {
             "name": "drupal/jsonapi_permission_access",
             "version": "1.0.1",
diff --git a/web/modules/custom/dc_components/components/ping-pong/ping-pong.css b/web/modules/custom/dc_components/components/ping-pong/ping-pong.css
index 81c6100..aa1c870 100644
--- a/web/modules/custom/dc_components/components/ping-pong/ping-pong.css
+++ b/web/modules/custom/dc_components/components/ping-pong/ping-pong.css
@@ -73,6 +73,7 @@
   border-radius: 10px;
   transition: background .5s ease;
   cursor: pointer;
+  color: var(--site-white);
 }
 
 .field--name-field-ping-pong-cta a:hover {
diff --git a/web/themes/custom/dchadwick/components/heading/heading.component.yml b/web/themes/custom/dchadwick/components/heading/heading.component.yml
new file mode 100644
index 0000000..aa96de3
--- /dev/null
+++ b/web/themes/custom/dchadwick/components/heading/heading.component.yml
@@ -0,0 +1,16 @@
+name: Heading
+props:
+  type: object
+  required:
+    - level
+  properties:
+    level:
+      type: integer
+      title: Level
+      description: "The type of button to render"
+      # The enum directive restricts the possible values in the element to our list.
+      enum: [1, 2, 3, 4, 5, 6]
+slots:
+  text:
+    title: Heading Text
+    description: The text for the heading.
diff --git a/web/themes/custom/dchadwick/components/heading/heading.css b/web/themes/custom/dchadwick/components/heading/heading.css
new file mode 100644
index 0000000..ad84df6
--- /dev/null
+++ b/web/themes/custom/dchadwick/components/heading/heading.css
@@ -0,0 +1,34 @@
+.ib-premier-banner {
+  width: 100%;
+  height: auto;
+  display: block;
+  position: relative;
+  height: 350px;
+  overflow: hidden;
+  background: var(--site-platinum);
+}
+
+.ib-premier-banner img {
+  width: 100%;
+  display: block;
+  position: absolute;
+  bottom: 0px;
+  object-fit: cover;
+}
+
+
+.ib-premier-banner .heading-wrapper {
+  position: absolute;
+  top: 25%;
+  left: 5%;
+  background: var(--site-primary);
+  padding: 0 20px;
+  color: var(--site-white);
+}
+
+@media screen and (min-width: 1153px) {
+  .ib-premier-banner .heading-wrapper {
+    /* left: calc((100vw - 1152px) / 2); */
+    /* left: 10px; */
+  }
+}
diff --git a/web/themes/custom/dchadwick/components/heading/heading.twig b/web/themes/custom/dchadwick/components/heading/heading.twig
new file mode 100644
index 0000000..d5c4227
--- /dev/null
+++ b/web/themes/custom/dchadwick/components/heading/heading.twig
@@ -0,0 +1,5 @@
+<h{{ level }}>
+  {%- apply spaceless %}
+    {% block text %}{% endblock %}
+  {% endapply %}
+</h{{ level }}>
diff --git a/web/themes/custom/dchadwick/css/style.css b/web/themes/custom/dchadwick/css/style.css
index f2a2a19..e536a03 100644
--- a/web/themes/custom/dchadwick/css/style.css
+++ b/web/themes/custom/dchadwick/css/style.css
@@ -106,6 +106,18 @@ header#header #block-dchadwick-main-menu > ul a.is-active:hover {
   color: var(--site-white);
 }
 
+@media screen and (max-width: 1300px) {
+  #block-dchadwick-main-menu {
+    margin-right: 50px;
+  }
+  #block-dchadwick-site-branding {
+    margin-left: 50px;
+  }
+  header#header {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}
 #footer {
   display: flex;
   background: var(--site-primary);
@@ -132,7 +144,7 @@ header#header #block-dchadwick-main-menu > ul a.is-active:hover {
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
 }
 .table.cols-5 {
-  width: 1152px;
+  width: 1300px;
 }
 .table th, .table td {
   padding: 12px 15px;
@@ -428,6 +440,57 @@ table.cols-5 td.incorrect {
   color: white;
 }
 
+.node-type-article .hero {
+  position: relative;
+  max-height: 60vh;
+  overflow: hidden;
+}
+.node-type-article .hero img {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+.node-type-article .hero h1 {
+  width: 100%;
+  flex-basis: 100%;
+  color: var(--site-primary);
+  margin: 0;
+}
+.node-type-article .article-intro {
+  display: flex;
+  position: absolute;
+  top: 50%;
+  height: auto;
+  background: rgba(254, 215, 101, 0.9);
+  color: var(--site-white);
+  flex-direction: row;
+  flex-wrap: wrap;
+  padding: 20px 30px;
+  transform: translateY(-50%);
+}
+@media screen and (min-width: 1300px) {
+  .node-type-article .article-intro {
+    left: calc((100vw - 1300px) / 2);
+  }
+}
+.node-type-article .article-intro > div {
+  flex: 1;
+}
+.node-type-article #article-body {
+  display: flex;
+  padding: 20px;
+}
+.node-type-article .left-side {
+  flex: 2;
+}
+.node-type-article .left-side p {
+  font-size: 16px;
+  line-height: 24px;
+}
+.node-type-article .right-side {
+  flex: 1;
+}
+
 html {
   font-size: 100%;
   box-sizing: border-box;
@@ -459,6 +522,6 @@ img {
 }
 
 .container {
-  max-width: 1152px;
+  max-width: 1300px;
   margin: auto;
 }
\ No newline at end of file
diff --git a/web/themes/custom/dchadwick/dchadwick.layouts.yml b/web/themes/custom/dchadwick/dchadwick.layouts.yml
new file mode 100644
index 0000000..08f025e
--- /dev/null
+++ b/web/themes/custom/dchadwick/dchadwick.layouts.yml
@@ -0,0 +1,13 @@
+two_row:
+  label: 'Two Row'
+  category: 'DC Layouts'
+  template: templates/layouts/two-row
+  default_region: main
+  regions:
+    row_one:
+      label: First row
+    row_two:
+      label: Second row
+  icon_map:
+    - [top]
+    - [bottom]
diff --git a/web/themes/custom/dchadwick/dchadwick.libraries.yml b/web/themes/custom/dchadwick/dchadwick.libraries.yml
index fc4bfac..a49e18e 100644
--- a/web/themes/custom/dchadwick/dchadwick.libraries.yml
+++ b/web/themes/custom/dchadwick/dchadwick.libraries.yml
@@ -5,6 +5,7 @@ global-styling:
   css:
     theme:
       css/style.css: {}
+      https://fonts.googleapis.com/icon?family=Material+Icons: { external: true }
 
 # dcjs:
 #   version: 1.x
diff --git a/web/themes/custom/dchadwick/dchadwick.theme b/web/themes/custom/dchadwick/dchadwick.theme
index 87de144..d48b137 100644
--- a/web/themes/custom/dchadwick/dchadwick.theme
+++ b/web/themes/custom/dchadwick/dchadwick.theme
@@ -2,6 +2,16 @@
 
 use Drupal\node\NodeInterface;
 
+/**
+ * Implements template_preprocess_html().
+ */
+function dchadwick_preprocess_html(&$variables) {
+  if (isset($variables['node_type'])) {
+    // Add node-TYPE class to the <body> element.
+    $variables['attributes']['class'][] = 'node-type-' . $variables['node_type'];
+  }
+}
+
 function dchadwick_page_attachments_alter(&$page) {
   $page['#attached']['library'][] = 'dchadwick/brainjs';
 }
diff --git a/web/themes/custom/dchadwick/src/sass/partials/article.scss b/web/themes/custom/dchadwick/src/sass/partials/article.scss
new file mode 100644
index 0000000..a953519
--- /dev/null
+++ b/web/themes/custom/dchadwick/src/sass/partials/article.scss
@@ -0,0 +1,63 @@
+.node-type-article {
+  .hero {
+    position: relative;
+    max-height: 60vh;
+    overflow: hidden;
+
+    img {
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+    }
+
+    h1 {
+      // display: block;
+      width: 100%;
+      flex-basis: 100%;
+      color: var(--site-primary);
+      margin: 0;
+    }
+  }
+
+  .article-intro {
+    display: flex;
+    position: absolute;
+    top: 50%;
+    height: auto;
+    background: rgba(254, 215, 101, 0.9);
+    color: var(--site-white);
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding: 20px 30px;
+    transform: translateY(-50%);
+
+    @media screen and (min-width: $container-full) {
+      left: calc((100vw - $container-full) / 2);
+    }
+
+    > div {
+      flex: 1;
+    }
+  }
+
+  #article-body {
+    display: flex;
+    padding: 20px;
+
+
+  }
+
+
+  .left-side {
+    flex: 2;
+    p {
+      font-size: 16px;
+      line-height: 24px;
+    }
+  }
+
+  .right-side {
+    flex: 1;
+  }
+}
+
diff --git a/web/themes/custom/dchadwick/src/sass/partials/header.scss b/web/themes/custom/dchadwick/src/sass/partials/header.scss
index 0f1e07a..76cd8bc 100644
--- a/web/themes/custom/dchadwick/src/sass/partials/header.scss
+++ b/web/themes/custom/dchadwick/src/sass/partials/header.scss
@@ -60,3 +60,16 @@ header#header {
   }
 }
 
+@media screen and (max-width: $container-full) {
+  #block-dchadwick-main-menu {
+    margin-right: 50px;
+  }
+  #block-dchadwick-site-branding {
+    margin-left: 50px;
+  }
+  header#header {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}
+
diff --git a/web/themes/custom/dchadwick/src/sass/partials/hero.scss b/web/themes/custom/dchadwick/src/sass/partials/hero.scss
index 3c41564..828a286 100644
--- a/web/themes/custom/dchadwick/src/sass/partials/hero.scss
+++ b/web/themes/custom/dchadwick/src/sass/partials/hero.scss
@@ -57,3 +57,4 @@
     }
   }
 }
+
diff --git a/web/themes/custom/dchadwick/src/sass/style.scss b/web/themes/custom/dchadwick/src/sass/style.scss
index 4d6099d..6982d05 100644
--- a/web/themes/custom/dchadwick/src/sass/style.scss
+++ b/web/themes/custom/dchadwick/src/sass/style.scss
@@ -24,7 +24,7 @@ $iris: #c4a7e7;
 $link-color: $foam;
 
 // Other variables.
-$container-full: 1152px;
+$container-full: 1300px;
 $container-plus-padding: 1216px;
 
 // Google fonts.
@@ -44,6 +44,7 @@ $container-plus-padding: 1216px;
 @import "partials/fighters-view";
 @import "partials/fight";
 @import "partials/event";
+@import "partials/article";
 
 html {
   font-size: 100%;
diff --git a/web/themes/custom/dchadwick/templates/blocks/block--inline-block--premier-banner.html.twig b/web/themes/custom/dchadwick/templates/blocks/block--inline-block--premier-banner.html.twig
new file mode 100644
index 0000000..cb272d7
--- /dev/null
+++ b/web/themes/custom/dchadwick/templates/blocks/block--inline-block--premier-banner.html.twig
@@ -0,0 +1,49 @@
+{#
+/**
+ * @file
+ * Theme override to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - in_preview: Whether the plugin is being rendered in preview mode.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ */
+#}
+{% set classes = [
+  'ib-premier-banner'
+]%}
+<div{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {{ title_suffix }}
+  <div class="heading-wrapper">
+    {% embed 'dchadwick:heading' with {
+      level: 1
+    }%}
+      {% block text %}
+        {{ label }}
+      {% endblock %}
+    {% endembed %}
+  </div>
+
+  <div class="premier-img">
+    {{ content.field_banner_image }}
+  </div>
+
+</div>
diff --git a/web/themes/custom/dchadwick/templates/layouts/two-row.html.twig b/web/themes/custom/dchadwick/templates/layouts/two-row.html.twig
new file mode 100644
index 0000000..5c475ad
--- /dev/null
+++ b/web/themes/custom/dchadwick/templates/layouts/two-row.html.twig
@@ -0,0 +1,14 @@
+{% if content %}
+  <div {{ attributes.addClass('two-row') }}>
+  {% if content.row_1 %}
+    <div {{ region_attributes.main.addClass('row-one') }}>
+      {{ content.row_1 }}
+    </div>
+  {% endif %}
+  {% if content.row_2 %}
+    <div {{ region_attributes.sidebar.addClass('row-two') }}>
+      {{ content.row_2 }}
+    </div>
+  {% endif %}
+  </div>
+{% endif %}
diff --git a/web/themes/custom/dchadwick/templates/node/node--article.html.twig b/web/themes/custom/dchadwick/templates/node/node--article.html.twig
new file mode 100644
index 0000000..7d8800e
--- /dev/null
+++ b/web/themes/custom/dchadwick/templates/node/node--article.html.twig
@@ -0,0 +1,91 @@
+{#
+/**
+ * @file
+ * Theme override to display a node.
+ *
+ * Available variables:
+ * - node: The node entity with limited access to object properties and methods.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - node.getCreatedTime() will return the node creation timestamp.
+ *   - node.hasField('field_example') returns TRUE if the node bundle includes
+ *     field_example. (This does not indicate the presence of a value in this
+ *     field.)
+ *   - node.isPublished() will return whether the node is published or not.
+ *   Calling other methods, such as node.delete(), will result in an exception.
+ *   See \Drupal\node\Entity\Node for a full list of public properties and
+ *   methods for the node object.
+ * - label: (optional) The title of the node.
+ * - content: All node items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - author_picture: The node author user entity, rendered using the "compact"
+ *   view mode.
+ * - metadata: Metadata for this node.
+ * - date: (optional) Themed creation date field.
+ * - author_name: (optional) Themed author name field.
+ * - url: Direct URL of the current node.
+ * - display_submitted: Whether submission information should be displayed.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - node: The current template type (also known as a "theming hook").
+ *   - node--type-[type]: The current node type. For example, if the node is an
+ *     "Article" it would result in "node--type-article". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a
+ *     teaser would result in: "node--view-mode-teaser", and
+ *     full: "node--view-mode-full".
+ *   The following are controlled through the node publishing options.
+ *   - node--promoted: Appears on nodes promoted to the front page.
+ *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
+ *     teaser listings.
+ *   - node--unpublished: Appears on unpublished nodes visible only to site
+ *     admins.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main
+ *   content tag that appears in the template.
+ * - author_attributes: Same as attributes, except applied to the author of
+ *   the node tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - view_mode: View mode; for example, "teaser" or "full".
+ * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
+ * - page: Flag for the full page state. Will be true if view_mode is 'full'.
+ *
+ * @see template_preprocess_node()
+ *
+ */
+#}
+<article{{ attributes }}>
+
+  <div class="hero">
+    {{ content.field_article_image }}
+    <div class="article-intro">
+      {{ title_prefix }}
+      <h1>{{ label }}</h1>
+      {{ title_suffix }}
+      <span class="material-icons md-24">calendar_month</span>{{ date }}
+      <span class="material-icons md-24">schedule</span>{{ content.field_read_time|default('1 minute read time') }}
+    </div>
+  </div>
+
+  <div id="article-body" class="container">
+    <div class="left-side">
+      {{ content.body }}
+    </div>
+    <div class="right-side">
+      <p>This is where link block goes</p>
+      <p>This is where link block goes</p>
+      <p>This is where link block goes</p>
+      <p>This is where link block goes</p>
+      <p>This is where link block goes</p>
+      <p>This is where link block goes</p>
+    </div>
+  </div>
+
+</article>