Merge pull request #421 from yalesites-org/develop

Release
yalesites-org · Sep 17, 2024 · 7254e27 · 7254e27
2 parents 1c112e4 + 56887e8
commit 7254e27
Show file tree

Hide file tree

Showing 72 changed files with 1,409 additions and 225 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,3 +1,8 @@
 module.exports = {
   extends: ['@yalesites-org/eslint-config-and-other-formatting'],
+  globals: {
+    Drupal: true,
+    jQuery: true,
+    once: true,
+  },
 };
diff --git a/.storybook/jquery-global.js b/.storybook/jquery-global.js
@@ -0,0 +1,5 @@
+import jquery from 'jquery';
+import once from '@drupal/once';
+global.jQuery = jquery;
+global.$ = jquery;
+global.once = once;
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,4 +1,3 @@
-import { addDecorator } from '@storybook/html';
 import { useEffect } from '@storybook/client-api';
 import Twig from 'twig';
 import { setupTwig } from './setupTwig';
@@ -20,11 +19,30 @@ import '../lib/ys_link/css/ys-link.css';
 
 // If in a Drupal project, it's recommended to import a symlinked version of drupal.js.
 import './_drupal.js';
+import './jquery-global.js';
 
-// addDecorator deprecated, but not sure how to use this otherwise.
-addDecorator((storyFn, context) => {
-  useEffect(() => Drupal.attachBehaviors(), [context]);
-  return storyFn(context);
-});
+export const decorators = [
+  (StoryFn, context) => {
+    useEffect(() => Drupal.attachBehaviors(), [context]);
+    return `<div data-global-theme="${context.globals.globalTheme}">${StoryFn(context)}</div>`;
+  },
+];
 
 setupTwig(Twig);
+
+export const globalTypes = {
+  globalTheme: {
+    name: 'Site: Global Theme (lever)',
+    description: 'Choose a global color palette.',
+    defaultValue: 'one',
+    toolbar: {
+      items: [
+        { value: 'one', title: 'Old Blues' },
+        { value: 'two', title: 'New Haven Green' },
+        { value: 'three', title: 'Shoreline Summer' },
+        { value: 'four', title: 'Onha' },
+      ],
+      showName: true,
+    },
+  }
+}
diff --git a/components/01-atoms/controls/control.stories.js b/components/01-atoms/controls/control.stories.js
@@ -1,5 +1,4 @@
 import tokens from '@yalesites-org/tokens/build/json/tokens.json';
-import getGlobalThemes from '../../00-tokens/colors/color-global-themes';
 import ctaTwig from './cta/yds-cta.twig';
 import linkTwig from './text-link/yds-text-link.twig';
 
@@ -10,10 +9,8 @@ import './text-copy-button/yds-text-copy-button';
 
 import themeExamplesTwig from './cta/_yds-cta-examples.twig';
 
-const siteGlobalThemes = { themes: tokens['global-themes'] };
 const componentThemes = { themes: tokens['button-cta-themes'] };
 const componentThemeOptions = Object.keys(tokens['button-cta-themes']);
-const siteGlobalThemeOptions = getGlobalThemes(tokens['global-themes']);
 
 /**
  * Storybook Definition.
@@ -190,11 +187,9 @@ export const textLink = () => `
   })}<br/>
 `;
 
-export const CtaExamples = ({ globalTheme, componentTheme }) =>
+export const CtaExamples = ({ componentTheme }) =>
   themeExamplesTwig({
-    ...siteGlobalThemes,
     ...componentThemes,
-    site_global__theme: globalTheme,
     example_content: `
     <h2>Filled</h2>
     <div class="cta-group">
@@ -309,12 +304,6 @@ export const CtaExamples = ({ globalTheme, componentTheme }) =>
   });
 
 CtaExamples.argTypes = {
-  globalTheme: {
-    name: 'Global Theme (lever)',
-    options: siteGlobalThemeOptions,
-    type: 'select',
-    defaultValue: 'one',
-  },
   componentTheme: {
     name: 'Component Theme (dial)',
     options: componentThemeOptions,
@@ -325,7 +314,6 @@ CtaExamples.argTypes = {
 
 export const LinkExamples = ({ globalTheme, componentTheme }) =>
   themeExamplesTwig({
-    ...siteGlobalThemes,
     ...componentThemes,
     site_global__theme: globalTheme,
     example_content: `
@@ -379,7 +367,6 @@ export const LinkExamples = ({ globalTheme, componentTheme }) =>
 
 export const textCopyButtonExamples = ({ globalTheme, componentTheme }) =>
   themeExamplesTwig({
-    ...siteGlobalThemes,
     ...componentThemes,
     site_global__theme: globalTheme,
     example_content: `
@@ -392,12 +379,6 @@ export const textCopyButtonExamples = ({ globalTheme, componentTheme }) =>
   });
 
 textCopyButtonExamples.argTypes = {
-  globalTheme: {
-    name: 'Global Theme (lever)',
-    options: siteGlobalThemeOptions,
-    type: 'select',
-    defaultValue: 'one',
-  },
   componentTheme: {
     name: 'Component Theme (dial)',
     options: componentThemeOptions,

diff --git a/components/01-atoms/controls/cta/_yds-cta.scss b/components/01-atoms/controls/cta/_yds-cta.scss
@@ -344,6 +344,7 @@ $cta-outline-weights: (
 // @TODO: Temporary place for this
 .cta-group {
   display: flex;
+  flex-wrap: wrap;
   gap: var(--size-spacing-7);
   margin-bottom: var(--size-spacing-7);
 

diff --git a/components/01-atoms/date-time/yds-date-time.twig b/components/01-atoms/date-time/yds-date-time.twig
@@ -17,14 +17,17 @@
  # combination with this, accounts for "no end date provided" as well. #}
 {% set date_time__end = date_time__end|default(date_time__start) %}
 
+{# Use a variable to ensure emdash is properly placed consistently #}
+{% set em_dash = '—' %}
+
 {# Date/Time formats used in this file #}
 {% set format__iso = 'c' %} {# 2022-04-01T08:34:42+00:00 #}
 {% set format__html_date = 'Y-m-d' %} {# 2022-04-01 #}
 {% set format__date = 'F j, Y' %} {# April 1, 2022 #}
 {% set format__day__full__start = 'D M j' %} {# Fri Apr 1 #}
 {% set format__day__full = 'D M j, Y' %} {# Fri Apr, 1 2022 #}
-{% set format__time__start = 'g:ia - ' %} {# 8:30pm - #}
-{% set format__time = 'g:ia' %} {# 11:30pm #}
+{% set format__time__start = 'g:i a' ~ em_dash %} {# 8:30 pm- #}
+{% set format__time = 'g:i a' %} {# 11:30 pm #}
 
 {% if date_time__all_day == true %}
   All Day
@@ -50,7 +53,7 @@
     {% set date_time = date_time__start|date(format__date) %}
   {# If start and end times are different. #}
   {% else %}
-    {% set date_time = date_time__start|date(format__date) ~ '-' ~ date_time__end|date(format__date) %}
+    {% set date_time = date_time__start|date(format__date) ~ em_dash ~ date_time__end|date(format__date) %}
   {% endif %}
 {################
  # DAY AND DATE #

diff --git a/components/01-atoms/forms/_yds-form.scss b/components/01-atoms/forms/_yds-form.scss
@@ -34,18 +34,30 @@
   }
 }
 
-.webform-submission-form {
-  max-width: 80rem;
+// Adjust the form-submit that has the 'cta' class. See ys_themes.module where form submit receives CTA attributes.
+@mixin cta-submit {
+  transition: color,
+    background-color var(--animation-speed-default) ease-in-out 0ms;
+  border: var(--border-thickness-cta) solid var(--color-action);
+  font-weight: var(--font-weights-mallory-medium);
+  padding: var(--size-spacing-3) var(--size-spacing-6);
+  min-height: var(--size-click-target-minimum);
+  width: auto;
+
+  // Mimic the opposite of "Deep" (five) for the "Subtle" (four) button theme.
+  &.cta[data-cta-theme='four'] {
+    --color-cta-border: var(--color-cta-text);
+    --color-cta-bg-hover: var(--color-cta-text);
+    --color-cta-text-hover: var(--color-cta-bg);
 
-  // Mimic the opposite of "Deep" (five) for the "Subtle" (four) button theme
-  & input.cta[data-cta-theme='four'][type='submit'] {
-    --color-button-text: var(--color-cta-text);
-    --color-button-border: var(--color-cta-text);
-    --color-button-bg-hover: var(--color-cta-text);
-    --color-button-text-hover: var(--color-button-bg);
+    border: var(--border-thickness-cta) solid var(--color-cta-border);
   }
 }
 
+.webform-submission-form {
+  max-width: 80rem;
+}
+
 // Used for exposed filter forms
 .ys-filter-form,
 .content-moderation-entity-moderation-form {
@@ -64,11 +76,139 @@
     height: 3rem;
   }
 
+  // Form submit receives button's attributes in the ys_themes.module(line 236), that ensures submit button styles.
   .form-submit {
-    @include button-submit;
-
-    --border-radius-button: var(--radius-0);
+    @include cta-submit;
 
     min-height: var(--size-spacing-9);
   }
 }
+
+.form-item-search {
+  .form-text {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23222222' d='M504.1 471l-134-134C399.1 301.5 415.1 256.8 415.1 208c0-114.9-93.13-208-208-208S-.0002 93.13-.0002 208S93.12 416 207.1 416c48.79 0 93.55-16.91 129-45.04l134 134C475.7 509.7 481.9 512 488 512s12.28-2.344 16.97-7.031C514.3 495.6 514.3 480.4 504.1 471zM48 208c0-88.22 71.78-160 160-160s160 71.78 160 160s-71.78 160-160 160S48 296.2 48 208z'/%3E%3C/svg%3E%0A");
+    background-repeat: no-repeat;
+    background-position: right var(--size-spacing-4) center;
+    background-size: 1.25rem;
+    height: 3.125rem;
+    padding-right: var(--size-spacing-8); // Get space for the search icon.
+    line-height: 1;
+  }
+}
+
+.ys-filter-form--scaffold {
+  .form-item__dropdown {
+    border: 0;
+    height: 3.125rem;
+  }
+
+  .chosen-container {
+    --color-dropdown-border: var(--color-gray-400);
+    --color-dropdown-border-hover: var(--color-blue-horizon);
+    --color-dropdown-icon: var(--color-gray-400);
+    --color-dropdown-icon-hover: var(--color-blue-horizon);
+
+    background-color: var(--color-basic-white);
+    border: var(--border-thickness-1) solid var(--color-dropdown-border);
+    height: 3.125rem;
+    width: 100% !important;
+
+    &:hover,
+    &:focus,
+    &:focus-visible {
+      border-color: var(--color-dropdown-border-hover);
+    }
+
+    :focus {
+      color: var(--color-gray-700);
+    }
+  }
+
+  .chosen-choices {
+    border: 0;
+    padding: 0;
+
+    li.search-choice {
+      background-color: hsl(210deg 100% 21% / 10%);
+    }
+
+    li.search-field {
+      input[type='text'] {
+        font-family: inherit;
+        padding: 0;
+      }
+    }
+  }
+
+  .search-choice {
+    display: none; // Hide selected items as a text message is displayed, when the select is closed.
+  }
+
+  .ys-select-message {
+    float: left;
+  }
+
+  .chosen-with-drop {
+    height: auto;
+
+    .search-choice {
+      display: block; // Show selected items when the dropdown is opened.
+    }
+
+    .ys-select-message {
+      display: none; // Hide message when the dropdown is opened.
+    }
+
+    .chosen-drop {
+      left: -1px;
+      width: calc(100% + 2px); // Consider chosen container borders width.
+    }
+
+    .chosen-results {
+      color: var(--color-gray-700);
+      margin: 0;
+      padding: 0;
+
+      li {
+        padding: var(--size-spacing-4);
+        display: flex;
+        position: relative;
+        border-top: 1px solid var(--color-gray-300);
+        border-radius: 0;
+      }
+
+      li.active-result,
+      li.result-selected {
+        display: flex;
+      }
+
+      li.no-results {
+        display: list-item;
+      }
+
+      .highlighted {
+        background-color: var(--color-blue-yale);
+      }
+
+      .active-result {
+        font-weight: var(--font-weights-mallory-medium);
+      }
+
+      .result-selected {
+        color: var(--color-gray-500);
+      }
+    }
+  }
+
+  @media (min-width: tokens.$break-l) {
+    flex-wrap: nowrap;
+
+    .chosen-container {
+      min-width: 15rem; // Considering the maximum of 3 filters width.
+    }
+
+    .form-item {
+      max-width: 50%;
+    }
+  }
+}
diff --git a/components/01-atoms/forms/contact-form-example.twig b/components/01-atoms/forms/contact-form-example.twig
@@ -16,6 +16,6 @@
     <textarea id="textarea" required="required" aria-required="true" class="form-item__textfield form-item__textarea form-item__textfield--required"  rows="8" cols="48" placeholder="Enter your message here"></textarea>
   </div>
   <div class="form-item form-actions">
-    <input class="webform-button--submit button cta button--primary js-form-submit form-submit form-item__textfield" data-drupal-selector="edit-actions-submit" type="submit" id="edit-actions-submit" name="op" value="Send Message" data-cta-radius="none" data-cta-theme="one" data-cta-outline-weight="2" data-cta-hover-style="fade">
+    <input class="webform-button--submit button cta button--primary js-form-submit form-submit form-item__textfield" data-drupal-selector="edit-actions-submit" type="submit" id="edit-actions-submit" name="op" value="Send Message" data-cta-radius="none" data-cta-theme="one" data-cta-style="filled" data-cta-outline-weight="2" data-cta-hover-style="fade">
   </div>
  </form>
diff --git a/components/01-atoms/forms/select/_yds-select.scss b/components/01-atoms/forms/select/_yds-select.scss
@@ -28,6 +28,11 @@
     /* These hacks make the select behind the arrow clickable in some browsers */
     pointer-events: none;
     display: none;
+
+    // Remove the arrow for the views basic scaffold form when Chosen is used.
+    .ys-filter-form--scaffold & {
+      content: none;
+    }
   }
 
   &:hover,

diff --git a/components/01-atoms/forms/select/yds-select.js b/components/01-atoms/forms/select/yds-select.js
@@ -0,0 +1,28 @@
+(($) => {
+  const filterForm = '.ys-filter-form--scaffold';
+  const selectMessageClass = 'ys-select-message';
+
+  Drupal.behaviors.chosenSelect = {
+    attach(context) {
+      const ysChosenReady = (e) => {
+        $(e.target)
+          .next()
+          .find('.chosen-choices')
+          .prepend(`<span class=${selectMessageClass}></span>`);
+      };
+      const ysSelectChange = (e) => {
+        const selectedNr = $(e.target).val().length;
+        const selectMessage = selectedNr
+          ? `${`(${selectedNr}) items selected`}`
+          : '';
+
+        $(e.target).next().find(`.${selectMessageClass}`).text(selectMessage);
+      };
+      $(once('ys-chosen-select', filterForm, context)).each((i, elem) => {
+        const $select = $(elem).find('select');
+        $select.on('chosen:ready', ysChosenReady);
+        $select.on('change', ysSelectChange);
+      });
+    },
+  };
+})(jQuery);