Dev ffw

README.md

@@ -1,75 +1,67 @@
-# [Stanford Starter](https://github.com/SU-SWS/lbretransportation_subtheme)
-##### Version: 8.x-1.0-dev
-
-Changelog: [Changelog.txt](CHANGELOG.txt)
+# [LBRE Transportation](https://github.com/SU-SWS/lbretransportation_subtheme)
+##### Version: 9.x
 
 Description
 ---
 
-Stanford Starter is a Stanford sub-theme that works with the Stanford Basic theme.
+LBRE Transportation is a Drupal 9 and is sub theme of Stanford Basic theme that integrates with the [Decanter Project](https://github.com/SU-SWS/decanter).
 
-Documentation
----
-See subtheming guides and best practices here: 
-https://devguide.sites.stanford.edu/front-end/drupal/sub-themes 
+It incorporates redesign of the following components and paragraphs:
+
+    Global alerts (Modified colors to the new color scheme)
+    Banner paragraph (Additional variants: Banner with floating box, 50-50, In-page alert)
+    Quick links (Additional variant of the Text area component)
+    Lists component (Redesign of Card grid layout for News, two color variants - Dark grey, Light grey)
+    Utility links in header
+
+All variants are added using Paragraph behaviours.
 
 Installation
 ---
-1. Review the documentation link above for best practices, particularly the Do's and Don't's sections.
-2. Fork or download this theme repository. 
-3. Change all theme file names from including "lbretransportation_subtheme" to including the machine name of your theme.
-4. Run a search and replace throughout the theme files to replace "lbretransportation_subtheme" with the machine name of your theme.
-5. Add any specific brand colors you need (in addition to the decanter colors that are already available) to src/scss/utilities/variables/_colors.scss. 
-See all the colors already available through decanter: https://decanter.stanford.edu/page/brand-design-elements-color/ 
-6. If desired, add font settings if you need to override and use fonts other than decanter fonts ( https://decanter.stanford.edu/page/brand-design-elements-typography/ ) [link],
-by defining a font library in the themename.libraries.yml file.
-7. If desired, add button mixins in src/scss/utilities/mixins/_buttons.scss with your button styles and then reference them and use them in src/scss/theme/_button.scss.
-8. If desired, add cta and link mixins in src/scss/utilities/mixins/_cta.scss with your button styles and then reference them and use them in src/scss/theme/_cta.scss.
-9. If you want to skin or theme a component, like a paragraph, create a _mycomponent.scss file in src/scss/components folder. Consider using a subfolder like 'cards' or 'banners' if applicable.
+
+Install this theme like any other theme. [See Drupal Documentation](https://www.drupal.org/docs/8/extending-drupal-8/installing-themes)
+
+This theme depends on the [`Components`](https://www.drupal.org/project/components) module to register template
+namespaces. If downloading this theme via composer, the module is already downloaded and simply needs to be enabled
+before the theme can be enabled.
+
+If using this theme in conjunction with configuration management and doing site install, a patch is included in the
+composer.json. Ensure that your project's root composer.json has [patching enabled](https://github.com/cweagans/composer-patches#allowing-patches-to-be-applied-from-dependencies)
+or download and patch Drupal Core manually.
 
 Configuration
 ---
 
-Nothing special needed. Install, enable, and set as the default active theme.
+Nothing special needed. Install, enable, and set as the default active theme. Once you have the theme enabled, be sure to check out the appearance settings for additional configuration items.
+
+
+Troubleshooting
+---
+
+If you are experiencing issues with this theme try disabling and clear the cache first. If you are still experiencing issues try posting an issue on the GitHub issues page.
+
+This theme is not intended to be used as an administration theme. Please use something else for that.
 
 Developer
 ---
 
-If you wish to develop on this theme you will most likely need to compile some new css. Please use the sass structure provided and compile with the sass compiler packaged in this theme. To install:
+Development tools: To build and compile the CSS, Javascript, and Image assets required to make this theme great, you will need to have npm and nvm installed.
+Navigate to the root of the theme then.
 
+Run:
 ```
+nvm use
 npm install
 ```
-After you've made a change you want to see processed, you can run:
+
+This project uses webpack to assemble the assets for this theme. To compile sass, javascript and push all assets in to place:
+
+Run:
 ```
-npm run build/yarn build
+npm run build
 ```
-This will process scss, js, and asset files, preparing them from the src directory to the dist directory.
 
+Or for development you can watch for changes and compile automatically with:
 ```
-npm run watch/yarn watch
+npm run watch
 ```
-This will watch the scss files and compile them upon saving.
-
-GitPod
----
-1. Add your ssh key to [GitPod](https://gitpod.io/variables)
-   1. It is recommended to have a password-less ssh key for simplicity.
-      1. `ssh-keygen -b 4096`, press enter when asked for the password
-      2. Add this ssh public key to the necessary services: Acquia, Github, etc.
-   2. Get the base64 string of your ssh key files
-      1. `cat id_rsa | base64` for the private key
-      2. `cat id_rsa.pub | base64` for the public key.
-   3. In GitPod, add the variable named `SSH_PRIVATE_KEY` with the private key
-   4. In GitPod, add the variable named `SSH_PUBLIC_KEY` with the public key
-   5. In Gitpod, add the variable named `GITCONFIG` with the base64 of your git config: `cat ~/.gitconfig | base64`
-2. Recommended, but not required:
-   1. install the GitPod browser plugin
-   2. Configure your browser settings for an easier experience: https://www.gitpod.io/docs/configure/browser-settings
-3. Open a gitpod workspace with [these instructions](https://www.gitpod.io/docs/getting-started#start-your-first-workspace)
-
-
-Contribution / Collaboration
----
-
-You are welcome to contribute functionality, bug fixes, or documentation to this theme. If you would like to suggest a fix or new functionality you may add a new issue to the GitHub issue queue or you may fork this repository and submit a pull request. For more help please see [GitHub's article on fork, branch, and pull requests](https://help.github.com/articles/using-pull-requests)

js/hero.js

@@ -3,26 +3,34 @@
 
   Drupal.behaviors.heroCards = {
     attach: function (context) {
-      once("heroCards", "html").forEach(function () {
-        const centerCard = function () {
-          $(".layout--banner .su-hero__card", context).each(function () {
-            const marginOld = parseInt(
-              $(this).css("marginTop").replace("px", "")
-            );
-            const marginNew = -Math.round($(this).height() / 2);
+      // Center the text box vertically
+      const centerCard = function () {
+        const MEDIA_LG = 992;
+        const $heroCards = $(".layout--banner .su-hero__card", context);
 
-            if (marginOld !== marginNew) {
-              $(this).css("margin-top", marginNew);
-            }
-          });
-        };
+        $heroCards.each(function () {
+          const $this = $(this);
+          const marginOld = parseInt($this.css("margin-top").replace("px", ""));
+          const marginNew =
+            window.innerWidth >= MEDIA_LG ? -Math.round($this.height() / 2) : 0;
 
-        $(window).on("resize", function () {
-          centerCard();
+          if (marginOld !== marginNew) {
+            $this.css("margin-top", `${marginNew}px`);
+          }
         });
+      };
+
+      // Debounce the resize event to avoid excessive recalculations
+      const debounce = (callback, delay) => {
+        let timeoutId;
+        return () => {
+          clearTimeout(timeoutId);
+          timeoutId = setTimeout(callback, delay);
+        };
+      };
 
-        centerCard();
-      });
+      $(window, context).on("resize", debounce(centerCard, 250));
+      $(window, context).on("load", centerCard);
     },
   };
 })(jQuery);

lbretransportation_subtheme.info.yml

@@ -1,8 +1,8 @@
-name: Stanford Starter
+name: 'LBRE Transportation'
 type: theme
-description: 'Stanford Starter Theme.'
+description: 'LBRE Transportation Theme. Maintenance contact: Aaron Sato - [email protected]'
 package: Stanford
-version: 8.x-1.0-dev
+version: 9.x-1.0-dev
 core_version_requirement: ^9 || ^10
 base theme: stanford_basic
 libraries:

lbretransportation_subtheme.react_behaviors.yml

@@ -13,7 +13,7 @@ banner_style:
       description: Select the layout to display.
       options:
         layout--default: Default Banner
-        layout--banner: Banner wih floating box
+        layout--banner: Banner with Floating Box
         layout--fifty-fifty: 50-50
         layout--in-page-alert: In page alert
       default_value: layout--default

lbretransportation_subtheme.theme

@@ -11,7 +11,8 @@ use Drupal\ui_patterns\Element\PatternContext;
  * Prepares variables for the html.html.twig template.
  */
 function lbretransportation_subtheme_preprocess_html(&$variables) {
-  $variables['stanford_basic_path'] = \Drupal::service('extension.list.theme')->getPath('stanford_basic');
+  $variables['stanford_basic_path'] = \Drupal::service('extension.list.theme')
+    ->getPath('stanford_basic');
 }
 
 /**
@@ -31,13 +32,15 @@ function lbretransportation_subtheme_preprocess_pattern_hero(array &$variables):
   $context = &$variables['context'];
   /** @var \Drupal\paragraphs\Entity\Paragraph $paragraph */
   $paragraph = $context->getProperty('entity');
-  $extra_classes = [
-    $paragraph->getBehaviorSetting('react_paragraphs:banner_style', 'layout', 'layout--default'),
-    $paragraph->getBehaviorSetting('react_paragraphs:banner_style', 'color_scheme', 'color--cardinal-red'),
-  ];
-  /** @var \Drupal\Core\Template\Attribute $attributes */
-  $attributes = &$variables['attributes'];
-  $attributes->addClass($extra_classes);
+  if ($paragraph) {
+    $extra_classes = [
+      $paragraph->getBehaviorSetting('react_paragraphs:banner_style', 'layout', 'layout--default'),
+      $paragraph->getBehaviorSetting('react_paragraphs:banner_style', 'color_scheme', 'color--cardinal-red'),
+    ];
+    /** @var \Drupal\Core\Template\Attribute $attributes */
+    $attributes = &$variables['attributes'];
+    $attributes->addClass($extra_classes);
+  }
 }
 
 /**
@@ -47,10 +50,13 @@ function lbretransportation_subtheme_preprocess_paragraph__stanford_lists(array
   /** @var \Drupal\paragraphs\Entity\Paragraph $paragraph */
   $paragraph = &$variables['paragraph'];
   $existing_classes = $variables['attributes']['class'] ?? [];
-  $extra_classes = [
-    $paragraph->getBehaviorSetting('react_paragraphs:lists_style', 'cards_color_scheme', 'cards-color--light'),
-  ];
-  $variables['attributes']['class'] = array_merge($existing_classes, $extra_classes);
+
+  if ($paragraph) {
+    $extra_classes = [
+      $paragraph->getBehaviorSetting('react_paragraphs:lists_style', 'cards_color', 'cards-color--light'),
+    ];
+    $variables['attributes']['class'] = array_merge($existing_classes, $extra_classes);
+  }
 }
 
 /**
@@ -72,6 +78,14 @@ function lbretransportation_subtheme_preprocess_paragraph__stanford_wysiwyg(arra
  */
 function lbretransportation_subtheme_ui_patterns_suggestions_alter(array &$suggestions, array $variables, PatternContext $context): void {
   /** @var \Drupal\paragraphs\Entity\Paragraph $paragraph */
+
+  // Replace dash with underscore from the theme suggestions array in order for the templates to work properly.
+  foreach ($suggestions as &$value) {
+    $value = str_replace('-', '_', $value);
+  }
+  // Unset the reference to avoid potential side effects.
+  unset($value);
+
   $paragraph = $context->getProperty('entity');
   if ($paragraph && $paragraph->bundle() === "stanford_banner") {
     $layout = $paragraph->getBehaviorSetting('react_paragraphs:banner_style', 'layout', 'layout--default');
@@ -84,3 +98,16 @@ function lbretransportation_subtheme_ui_patterns_suggestions_alter(array &$sugge
     }
   }
 }
+
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function lbretransportation_subtheme_preprocess(&$variables, $hook) {
+  if ($hook == "pattern_news-vertical-teaser") {
+    $node = $variables["context"]->getProperty('entity');
+    // Add date to the card.
+    if ($node && !$node->get('su_news_publishing_date')->isEmpty()) {
+      $variables['news_publishing_date'] = $node->su_news_publishing_date->date->format('F d, Y');
+    }
+  }
+}

src/scss/components/alert/_alert.scss

@@ -5,21 +5,21 @@
 }
 
 .su-alert--plain {
-  background-color: $st-color-black;
+  background-color: $su-color-black;
 }
 
 .su-alert--success {
-  background-color: $st-color-palo-verde;
+  background-color: $su-color-palo-verde-dark;
 }
 
 .su-alert--info {
-  background-color: $st-color-sky-blue;
+  background-color: $su-color-sky-dark;
 }
 
 .su-alert--warning {
-  background-color: $st-color-brick;
+  background-color: $su-color-brick-light;
 }
 
 .su-alert--error {
-  background-color: $st-color-cardinal-red;
+  background-color: $su-color-cardinal-red;
 }