Merge pull request #380 from yalesites-org/develop

Release

components/00-tokens/colors/color-component-theme-pairings.twig

@@ -117,7 +117,7 @@
   </div>
 
   <div class="pairing-item">
-    {% include "@molecules/standalone-quote/yds-standalone-quote.twig" with {
+    {% include "@molecules/quote-callout/yds-quote-callout.twig" with {
       standalone_quote__width: 'site',
       standalone_quote__alignment: 'left',
       standalone_quote__quote_alignment: 'left',

components/00-tokens/colors/color-global-theme-pairings.twig

@@ -117,7 +117,7 @@
   </div>
 
   <div class="pairing-item">
-    {% include "@molecules/standalone-quote/yds-standalone-quote.twig" with {
+    {% include "@molecules/quote-callout/yds-quote-callout.twig" with {
       standalone_quote__width: 'site',
       standalone_quote__alignment: 'left',
       standalone_quote__quote_alignment: 'left',

components/01-atoms/forms/_yds-form.scss

@@ -39,7 +39,8 @@
 }
 
 // Used for exposed filter forms
-.ys-filter-form {
+.ys-filter-form,
+.content-moderation-entity-moderation-form {
   align-items: flex-end;
   display: flex;
   gap: 1rem;

components/01-atoms/typography/text/_yds-text.scss

@@ -1,3 +1,17 @@
+// Code highlighting color variables
+
+:root {
+  --color-hljs-text: #f8f8f2;
+  --color-hljs-background: #23241f;
+  --color-hljs-strong: #a8a8a2;
+  --color-hljs-highlight: #ae81ff;
+  --color-hljs-code: #a6e22e;
+  --color-hljs-keyword: #f92672;
+  --color-hljs-symbol: #66d9ef;
+  --color-hljs-string: #e6db74;
+  --color-hljs-comment: #75715e;
+}
+
 p {
   margin-block-end: var(--font-spacing-paragraph);
 }
@@ -6,6 +20,95 @@ p {
   p:last-child {
     margin-bottom: 0;
   }
+
+  // Code blocks.
+  pre code {
+    display: block;
+    padding: var(--size-spacing-5);
+
+    // from highlightjs Monokai Sublime
+    // @see highlight.js/styles/monokai-sublime.css
+
+    /*
+    Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
+    */
+
+    &.hljs {
+      background: var(--color-hljs-background);
+      color: var(--color-hljs-text);
+      overflow-x: auto;
+    }
+
+    .hljs-tag,
+    .hljs-subst {
+      color: var(--color-hljs-text);
+    }
+
+    .hljs-strong,
+    .hljs-emphasis {
+      color: var(--color-hljs-strong);
+    }
+
+    .hljs-bullet,
+    .hljs-quote,
+    .hljs-number,
+    .hljs-regexp,
+    .hljs-literal,
+    .hljs-link {
+      color: var(--color-hljs-highlight);
+    }
+
+    .hljs-code,
+    .hljs-title,
+    .hljs-section,
+    .hljs-selector-class {
+      color: var(--color-hljs-code);
+    }
+
+    .hljs-strong {
+      font-weight: bold;
+    }
+
+    .hljs-emphasis {
+      font-style: italic;
+    }
+
+    .hljs-keyword,
+    .hljs-selector-tag,
+    .hljs-name,
+    .hljs-attr {
+      color: var(--color-hljs-keyword);
+    }
+
+    .hljs-symbol,
+    .hljs-attribute {
+      color: var(--color-hljs-symbol);
+    }
+
+    .hljs-params,
+    .hljs-title.class_,
+    .hljs-class .hljs-title {
+      color: var(--color-hljs-text);
+    }
+
+    .hljs-string,
+    .hljs-type,
+    .hljs-built_in,
+    .hljs-selector-id,
+    .hljs-selector-attr,
+    .hljs-selector-pseudo,
+    .hljs-addition,
+    .hljs-variable,
+    .hljs-template-variable {
+      color: var(--color-hljs-string);
+    }
+
+    .hljs-comment,
+    .hljs-deletion,
+    .hljs-meta {
+      color: var(--color-hljs-comment);
+    }
+  }
 }
 
 strong {

components/01-atoms/typography/text/yds-text.js

@@ -0,0 +1,78 @@
+import hljs from 'highlight.js/lib/core';
+import c from 'highlight.js/lib/languages/c';
+import cpp from 'highlight.js/lib/languages/cpp';
+import csharp from 'highlight.js/lib/languages/csharp';
+import css from 'highlight.js/lib/languages/css';
+import html from 'highlight.js/lib/languages/vbscript-html';
+import java from 'highlight.js/lib/languages/java';
+import javascript from 'highlight.js/lib/languages/javascript';
+import json from 'highlight.js/lib/languages/json';
+import matlab from 'highlight.js/lib/languages/matlab';
+import php from 'highlight.js/lib/languages/php';
+import python from 'highlight.js/lib/languages/python';
+import r from 'highlight.js/lib/languages/r';
+import twig from 'highlight.js/lib/languages/twig';
+import typescript from 'highlight.js/lib/languages/typescript';
+import scss from 'highlight.js/lib/languages/scss';
+import shell from 'highlight.js/lib/languages/shell';
+import sql from 'highlight.js/lib/languages/sql';
+import yaml from 'highlight.js/lib/languages/yaml';
+import vim from 'highlight.js/lib/languages/vim';
+
+// Register the languages we need
+hljs.registerLanguage('c', c);
+hljs.registerLanguage('cpp', cpp);
+hljs.registerLanguage('csharp', csharp);
+hljs.registerLanguage('css', css);
+hljs.registerLanguage('html', html);
+hljs.registerLanguage('java', java);
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('json', json);
+hljs.registerLanguage('matlab', matlab);
+hljs.registerLanguage('php', php);
+hljs.registerLanguage('python', python);
+hljs.registerLanguage('r', r);
+hljs.registerLanguage('twig', twig);
+hljs.registerLanguage('typescript', typescript);
+hljs.registerLanguage('scss', scss);
+hljs.registerLanguage('shell', shell);
+hljs.registerLanguage('sql', sql);
+hljs.registerLanguage('yaml', yaml);
+hljs.registerLanguage('vim', vim);
+
+hljs.configure({
+  languages: [
+    'c',
+    'cpp',
+    'csharp',
+    'css',
+    'html',
+    'java',
+    'javascript',
+    'json',
+    'matlab',
+    'php',
+    'python',
+    'r',
+    'twig',
+    'typescript',
+    'scss',
+    'shell',
+    'sql',
+    'yaml',
+    'vim',
+  ],
+});
+
+Drupal.behaviors.textHighlight = {
+  attach(context) {
+    // Selectors
+    const codeBlocks = context.querySelectorAll('pre > code');
+
+    codeBlocks.forEach((codeBlock) => {
+      if (typeof codeBlock === 'object') {
+        hljs.highlightBlock(codeBlock);
+      }
+    });
+  },
+};

components/02-molecules/content-spotlight-portrait/content-spotlights.js

@@ -1,7 +1,8 @@
 Drupal.behaviors.contentSpotlights = {
   attach(context) {
     // Define the selectors to check and store them in a variable
-    const selectorsToCheck = '.text-with-image, .content-spotlight-portrait';
+    const selectorsToCheck =
+      '.text-with-image, .content-spotlight-portrait, .quote-callout, .facts-and-figures__group, .tiles';
     // Select all elements with class "text-with-image" or "content-spotlight-portrait"
     const contentSpotlights = context.querySelectorAll(selectorsToCheck);
 

components/02-molecules/embed/_yds-embed.scss

@@ -10,7 +10,7 @@
 }
 
 $heights: (
-  'form': 70vh,
+  'form': 90vh,
   'audio': 130px,
   'unknown': 70vh,
 );
@@ -22,3 +22,20 @@ $heights: (
     }
   }
 }
+
+// Video embeds were being cut off by regular vh heights,
+// so we're using a percentage-based padding-bottom hack instead.
+.embed__inner:has(iframe[data-embed-type='video']) {
+  position: relative;
+  padding-bottom: 56.25%; // 16:9 aspect ratio
+  height: 0;
+  overflow: visible;
+
+  & iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}

components/02-molecules/embed/yds-embed.twig

@@ -5,12 +5,14 @@
  # - embed__width: default('site')
  # - embed__type: 'form', 'audio', default('form')
  # - embed__loading: 'lazy', 'eager', default('lazy')
+ # - embed__allowfullscreen: TRUE, FALSE, default(FALSE)
  #}
 
 {% set embed__base_class = 'embed' %}
 {% set embed__width = embed__width|default('site') %}
 {% set embed__type = embed__type|default('form') %}
 {% set embed__loading = embed__loading|default('lazy') %}
+{% set embed__allowfullscreen = embed__allowfullscreen|default(FALSE) %}
 
 {% set embed__attributes = {
   'data-component-width': embed__width,
@@ -22,7 +24,7 @@
   {% endblock %}
   <div {{ bem('inner', [], embed__base_class) }}>
     {% block embed__block %}
-      <iframe {{ bem('iframe', [], embed__base_class) }} title="{{ embed__title }}" src="{{ embed__src }}" height="100%" width="100%" loading="{{ embed__loading }}" data-embed-type="{{ embed__type }}">
+      <iframe {{ bem('iframe', [], embed__base_class) }} title="{{ embed__title }}" src="{{ embed__src }}" height="100%" width="100%" loading="{{ embed__loading }}" allowfullscreen="{{ embed__allowfullscreen }}" data-embed-type="{{ embed__type }}">
       </iframe>
     {% endblock %}
   </div>