henry-search 1.0.14 → 1.0.15

package/src/styles/atoms/index.scss

@@ -0,0 +1,7 @@
+@forward "audioLinks";
+@forward "breadCrumb";
+@forward "checkBoxes";
+@forward "clearRefinements";
+@forward "eventLinks";
+@forward "label";
+@forward "menuSelect";

package/src/styles/atoms/label/index.scss

@@ -0,0 +1,6 @@
+  .label {
+    &__hidden {
+        display: none;
+    }
+  }
+  

package/src/styles/atoms/menuSelect/index.scss

@@ -0,0 +1,28 @@
+.ais-MenuSelect {
+    .multiselect {
+      border: thin solid var(--color-gray-400);
+      margin-bottom: 0.3rem;
+      &.is-open {
+        border: thin solid var(--color-turquoise);
+        box-shadow: none;
+      } 
+    }
+    .multiselect-caret {
+      width: 0.5rem;
+    }
+    .multiselect-placeholder {
+      color: var(--color-dark-blue);
+      font-weight: 100;
+    }
+    .multiselect-dropdown {
+      border: thin solid var(--color-gray-400);
+      box-shadow: var(--color-gray-400);
+      margin-top: 0.5rem;
+      margin-left: 0.1rem;
+    }
+    .multiselect-option {
+      border-bottom: thin solid var(--color-gray-400);
+      font-size: 0.9rem;
+      padding-left: 1.5rem;
+    }
+}

package/src/styles/config/index.scss

@@ -0,0 +1,180 @@
+@use "@imarc/pronto/resources/styles/imported" as *;
+
+/**
+ * @imports
+ */
+@import url("https://fonts.googleapis.com/css2?family=Gloock&family=Inter:wght@100..900&display=swap");
+
+:root {
+  /**
+   * Typography
+   */
+
+  --root-font-family: Aeonik;
+  --root-font-family-heading: Aeonik;
+
+  --root-font-size-h1: #{fluid-rems(    2,   2.5,    3)};
+  --root-font-size-h2: #{fluid-rems( 1.25,   1.5,    2)};
+  --root-font-size-h3: #{fluid-rems( 1.25,   1.5,    2)};
+  --root-font-size-h4: #{fluid-rems(1.125,  1.25,  1.5)};
+  --root-font-size-h5: #{fluid-rems(    1, 1.125, 1.25)};
+
+  --root-font-size-sm: .75rem;
+  --root-font-size-lg: 1.5rem;
+
+
+  /**
+   * Colors
+   */
+
+  /**
+   * a default neutral color scale.
+   */
+  --color-gray-50:  #f2f2f2;
+  --color-gray-100: #e5e5e5;
+  --color-gray-200: #cccccc;
+  --color-gray-300: #b3b3b3;
+  --color-gray-400: #999999;
+  --color-gray-500: #808080;
+  --color-gray-600: #666666;
+  --color-gray-700: #4c4c4c;
+  --color-gray-800: #333333;
+  --color-gray-900: #1a1a1a;
+  --color-gray-950: #0d0d0d;
+
+  /**
+   * Site/brand colors. Add more as needed.
+   */
+  --color-purple: #9933ff;
+  --color-blue: #0066FF;
+  --color-blue-700: #003D99;
+  --color-aqua: #00CCCC;
+  --color-aqua-700: #009999;
+  --color-dark-blue: #14284E;
+  --color-white: #ffffff;
+  --color-mid-blue: #12305A;
+  --color-light-gray: #F5F5F5;
+  --color-light-gold: #FBF4EF;
+  --color-dark-gray: #686F73;
+  --color-turquoise: #01ABE6;
+  --color-black:#000000;
+  --color-mid-gray:  #686F73;
+
+  /**
+   * Default accent color.
+   */
+  --accent-color: var(--color-dark-blue);
+
+  /**
+   * Primary text color.
+   */
+  --root-color: #666666;
+
+  /**
+   * Text color to use when placed on a light color. See --accent-color-text.
+   */
+  --accent-color-dark: #222222;
+
+  /**
+   * Default heading text color.
+   */
+  --root-color-headings: #222222;
+
+  /**
+   * Default border color.
+   */
+  --root-border-color: #b3b3b3;
+
+  /**
+   * default background color.
+   */
+  --root-background-color: #ffffff;
+
+  /**
+   * default colors for inactive elements.
+   */
+  --root-color-inactive: #999999;
+  --root-background-color-inactive: #cccccc;
+
+  /**
+   * Icon defaults.
+   */
+  --icon-fill-color: var(--root-icon-fill-color);
+  --icon-stroke-color: var(--root-icon-stroke-color);
+
+  /**
+   * default accent colors for errors and destructive (danger) buttons.
+   */
+  --root-color-error-50: #fff3f1;
+  --root-color-error: #e53411;
+  --root-color-error-900: #320800;
+
+  /**
+   * default accent colors for warnings.
+   */
+  --root-color-warning-50: #fff8ea;
+  --root-color-warning: #f2a60f;
+  --root-color-warning-900: #322100;
+
+  /**
+   * default accent colors for success messages.
+   */
+  --root-color-success-50: #ebffee;
+  --root-color-success: #28c642;
+  --root-color-success-900: #003208;
+
+  /**
+   * default accent colors for notices and info messages.
+   */
+  --root-color-info-50: #ebf8ff;
+  --root-color-info: #1ba9f0;
+  --root-color-info-900: #002233;
+
+
+  /**
+   * Easings
+   */
+  --root-ease-in-fast: var(--root-duration-fast) var(--root-ease-in);
+  --root-ease-in-moderate: var(--root-duration-moderate) var(--root-ease-in);
+  --root-ease-in-slow: var(--root-duration-slow) var(--root-ease-in);
+  --root-ease-out-fast: var(--root-duration-fast) var(--root-ease-out);
+  --root-ease-out-moderate: var(--root-duration-moderate) var(--root-ease-out);
+  --root-ease-out-slow: var(--root-duration-slow) var(--root-ease-out);
+  --root-ease-in-out-fast: var(--root-duration-fast) var(--root-ease-in-out);
+  --root-ease-in-out-moderate: var(--root-duration-moderate) var(--root-ease-in-out);
+  --root-ease-in-out-slow: var(--root-duration-slow) var(--root-ease-in-out);
+
+
+  /**
+   * Breakpoints
+   */
+
+  @include setBreakpoints((
+    sm: 320px,
+    md: 744px,
+    lg: 1300px
+  ));
+
+  --root-gap: 16px;
+
+  /* should be max mobile width + tablet outer gutters */
+  @media (min-width: 368px) {
+    --root-gap: 24px;
+  }
+
+  /* should be max tablet width + desktop outer gutters */
+  @media (min-width: 808px) {
+    --root-gap: 32px;
+  }
+
+  /**
+   * Prefers Reduced Motion
+   */
+  @media (prefers-reduced-motion: reduce) {
+    --root-duration-fast: 0;
+    --root-duration-moderate: 0;
+    --root-duration-slow: 0;
+  }
+
+
+}

package/src/styles/index.scss

@@ -0,0 +1,8 @@
+@forward "@imarc/pronto/resources/styles/imported";
+@forward "@imarc/pronto/resources/styles/imported/dev";
+@forward "config";
+@forward "atoms";
+@forward "molecules";
+@forward "organisms";
+@forward "templates";
+//@forward "utilities";

package/src/styles/molecules/accordion/accordion.html

@@ -0,0 +1,97 @@
+<div style="display: grid; gap: 1rem">
+
+    <p-accordion name="example" class="accordion">
+        <summary class="accordion__summary">
+            <h3 class="accordion__heading">
+                Why do we need to use Vue for an accordion element?
+            </h3>
+            <div class="accordion__iconWrapper">
+                <svg class="accordion__icon icon icon--chevron-right" aria-hidden="true" role="presentation">
+                    <use href="/main-icons-sprite.svg#chevron-right" />
+                </svg>
+            </div>
+        </summary>
+        <div class="accordion__content">
+            <p>
+                Technically you don't – the functionality in Pronto does not require <code>p-accordion</code> to be
+                used.
+            </p>
+            <p>
+                However, without JS, the height of the collapsed details element only allows for one row of
+                summary text, and it's not possible to animate closing the details element.
+            </p>
+        </div>
+    </p-accordion>
+
+    <p-accordion name="example" class="warning">
+        <summary class="accordion__summary">
+            <h3 class="accordion__heading">
+                Why do we need a FAQ style module?
+            </h3>
+            <div class="accordion__iconWrapper">
+                <svg class="accordion__icon icon icon--chevron-right" aria-hidden="true" role="presentation">
+                    <use href="/main-icons-sprite.svg#chevron-right" />
+                </svg>
+            </div>
+        </summary>
+        <div class="accordion__content">
+            <p>
+                Donec mattis consequat libero at fermentum. Phasellus ultricies ultrices felis eu dapibus. Donec nec pellentesque eros. Proin cursus, felis eu sollicitudin sodales, mi tellus posuere risus, id vehicula enim nisi id risus. Praesent ultrices, eros tempor tincidunt vehicula, sem orci imperdiet ante, iaculis egestas arcu dolor pretium dui. Nullam egestas cursus diam quis ultrices. Praesent mollis ligula vel lorem gravida, at commodo nibh posuere. Maecenas id mollis metus, sit amet ultricies urna. Pellentesque congue elementum massa, a tristique sem feugiat ac.
+            </p>
+        </div>
+    </p-accordion>
+
+    <p-accordion name="example" class="accordion">
+        <summary class="accordion__summary">
+            <h3 class="accordion__heading">
+                Is this considered a frequently asked question?
+            </h3>
+            <div class="accordion__iconWrapper">
+                <svg class="accordion__icon icon icon--chevron-right" aria-hidden="true" role="presentation">
+                    <use href="/main-icons-sprite.svg#chevron-right" />
+                </svg>
+            </div>
+        </summary>
+        <div class="accordion__content">
+            <p>
+                Donec mattis consequat libero at fermentum. Phasellus ultricies ultrices felis eu dapibus. Donec nec pellentesque eros. Proin cursus, felis eu sollicitudin sodales, mi tellus posuere risus, id vehicula enim nisi id risus. Praesent ultrices, eros tempor tincidunt vehicula, sem orci imperdiet ante, iaculis egestas arcu dolor pretium dui. Nullam egestas cursus diam quis ultrices. Praesent mollis ligula vel lorem gravida, at commodo nibh posuere. Maecenas id mollis metus, sit amet ultricies urna. Pellentesque congue elementum massa, a tristique sem feugiat ac.
+            </p>
+        </div>
+    </p-accordion>
+
+    <p-accordion name="example" class="accordion">
+        <summary class="accordion__summary">
+            <h3 class="accordion__heading">
+                Can this be used in more general situations?
+            </h3>
+            <div class="accordion__iconWrapper">
+                <svg class="accordion__icon icon icon--chevron-right" aria-hidden="true" role="presentation">
+                    <use href="/main-icons-sprite.svg#chevron-right" />
+                </svg>
+            </div>
+        </summary>
+        <div class="accordion__content">
+            <p>
+                Donec mattis consequat libero at fermentum. Phasellus ultricies ultrices felis eu dapibus. Donec nec pellentesque eros. Proin cursus, felis eu sollicitudin sodales, mi tellus posuere risus, id vehicula enim nisi id risus. Praesent ultrices, eros tempor tincidunt vehicula, sem orci imperdiet ante, iaculis egestas arcu dolor pretium dui. Nullam egestas cursus diam quis ultrices. Praesent mollis ligula vel lorem gravida, at commodo nibh posuere. Maecenas id mollis metus, sit amet ultricies urna. Pellentesque congue elementum massa, a tristique sem feugiat ac.
+            </p>
+        </div>
+    </p-accordion>
+
+    <p-accordion name="example" class="accordion">
+        <summary class="accordion__summary">
+            <h3 class="accordion__heading">
+                Why use a different color for interactions vs. navigation?
+            </h3>
+            <div class="accordion__iconWrapper">
+                <svg class="accordion__icon icon icon--chevron-right" aria-hidden="true" role="presentation">
+                    <use href="/main-icons-sprite.svg#chevron-right" />
+                </svg>
+            </div>
+        </summary>
+        <div class="accordion__content">
+            <p>
+                Donec mattis consequat libero at fermentum. Phasellus ultricies ultrices felis eu dapibus. Donec nec pellentesque eros. Proin cursus, felis eu sollicitudin sodales, mi tellus posuere risus, id vehicula enim nisi id risus. Praesent ultrices, eros tempor tincidunt vehicula, sem orci imperdiet ante, iaculis egestas arcu dolor pretium dui. Nullam egestas cursus diam quis ultrices. Praesent mollis ligula vel lorem gravida, at commodo nibh posuere. Maecenas id mollis metus, sit amet ultricies urna. Pellentesque congue elementum massa, a tristique sem feugiat ac.
+            </p>
+        </div>
+    </p-accordion>
+</div>

package/src/styles/molecules/accordion/index.scss

@@ -0,0 +1,76 @@
+/**
+ * @uses PAccordion
+ */
+.accordion {
+    $b: &;
+
+    --accordion-height-closed: calc(2rem + var(--root-font-size-h3));
+    background: white;
+    //box-shadow: var(--root-box-shadow-low);
+    height: var(--accordion-height-closed);
+    overflow: hidden;
+    transition: height var(--root-duration-moderate) var(--root-ease-out);
+    border-top: thin solid var(--color-gray-300);
+
+    &__summary {
+        align-items: center;
+        cursor: pointer;
+        display: grid;
+        grid-auto-flow: column;
+        justify-items: start;
+        list-style: none;
+        outline-offset: -2px;
+        padding: .5rem 0;
+        user-select: none;
+
+        &::-webkit-details-marker {
+          display: none;
+        }
+    }
+    
+    &__heading {
+        margin: 0;
+        padding: .25rem 1rem .25rem 0;
+        &.-thin {
+            font-weight: 100;
+            color: var(--color-mid-gray);
+        }
+    }
+    
+    &__iconWrapper {
+        background: var(--color-white);
+        display: grid;
+        justify-self: end;
+        padding: .5rem;
+    }
+    
+    &__icon {
+        --icon-color: var(--color-dark-blue);
+        aspect-ratio: 1;
+        height: var(--root-font-size-h6);
+        transition: transform var(--root-duration-moderate) var(--root-ease-out);
+        padding: 0.15rem;
+    }
+    
+    &__content {
+        padding: 0 .5rem 1.5rem 0;
+    }
+    
+    &[open]:not(&.-closing) {
+        height: fit-content;
+        //box-shadow: var(--root-box-shadow-high);
+        
+        // #{$b}__iconWrapper {
+        //     background: var(--color-gray-200);
+        // }
+        
+        #{$b}__icon {
+            //--icon-color: #000;
+            transform: rotate(90deg);
+        }
+    }
+
+    .-gray {
+        color: var(--color-gray-200);
+    }
+}

package/src/styles/molecules/currentRefinements/index.scss

@@ -0,0 +1,22 @@
+@use "@imarc/pronto/resources/styles/imported" as *;
+
+.ais-CurrentRefinements {
+    border: none;
+    padding: 0 1.5rem;
+    @include at(lg) {
+        padding: 0;
+        border-top: thin solid var(--color-gray-200);
+    }
+    grid-area: filters;
+}
+
+.ais-CurrentRefinements--noRefinement {
+    border: none;
+}
+
+.ais-RefinementList {
+    padding: 0 0.5rem;
+    @include at(lg) {
+        padding: 0;
+    }
+}

package/src/styles/molecules/dateRange/index.scss

@@ -0,0 +1,184 @@
+@use "@imarc/pronto/resources/styles/imported" as *;
+
+.dateRange {
+    grid-area: date;
+    .ais-RangeInput {
+        display: flex;
+        gap: 1rem;
+        justify-content: flex-start;
+        align-content: space-around;
+    }
+    .dp__input_wrap {
+        height: 40px !important;
+    }
+
+    .dp__input {
+        height: 40px !important;
+        border: 1px solid #D6D6D6 !important;
+        border-radius: 5px !important;
+        background: #FDF9F7 !important;
+        padding: 0 2.5rem !important;
+        font-size: 14px !important;
+        box-sizing: border-box !important;
+        display: flex !important;
+        align-items: center !important;
+
+        &::placeholder {
+            color: #666;
+        }
+
+        @media screen and (min-width: 1070px) {
+            font-size: 16px !important;
+            padding: 0 2.75rem !important;
+        }
+    }
+
+    .dp__input_icon {
+        margin-left: 8px !important;
+        flex-shrink: 0 !important;
+    }
+
+    // Mobile fullscreen date picker styles
+    @media screen and (max-width: 767px) {
+    .dp__menu {
+        position: fixed !important;
+        top: 60px !important; // Leave space for custom header
+        left: 0 !important;
+        right: 0 !important;
+        bottom: 0 !important;
+        width: 100vw !important;
+        height: calc(100vh - 60px) !important; // Adjust for header
+        max-width: none !important;
+        max-height: none !important;
+        border-radius: 0 !important;
+        z-index: 9999 !important;
+        background: white !important;
+        box-shadow: none !important;
+        border: none !important;
+        margin: 0 !important;
+        padding: 0 !important;
+        display: flex !important;
+        flex-direction: column !important;
+    }
+
+
+    .dp__menu_inner {
+        flex: 1 !important;
+        display: flex !important;
+        flex-direction: column !important;
+        padding: 1rem !important;
+        height: 100% !important;
+        box-sizing: border-box !important;
+    }
+
+    .dp__calendar_header {
+        padding: 1rem 0 !important;
+        border-bottom: 1px solid #e0e0e0 !important;
+        margin-bottom: 1rem !important;
+    }
+
+    .dp__calendar_header_item {
+        font-size: 18px !important;
+        font-weight: 600 !important;
+    }
+
+    .dp__calendar_wrap {
+        flex: 1 !important;
+        display: flex !important;
+        flex-direction: column !important;
+        justify-content: flex-start !important;
+        overflow: hidden !important;
+    }
+
+    .dp__calendar {
+        width: 100% !important;
+        max-width: none !important;
+    }
+
+    // Force single month display
+    .dp__instance_calendar {
+        width: 95% !important;
+        @include at(lg) {
+        width: 100% !important;
+        }
+
+        &:not(:first-child) {
+        display: none !important;
+        }
+    }
+
+    // Hide multi-calendar controls if they exist
+    .dp__calendar_header_separator,
+    .dp__calendar_next,
+    .dp__calendar_prev {
+        display: none !important;
+    }
+
+    .dp__calendar_row {
+        margin-bottom: 0.5rem !important;
+    }
+
+    .dp__calendar_item {
+        height: 48px !important;
+        width: 48px !important;
+        font-size: 16px !important;
+        margin: 2px !important;
+    }
+
+    // Essential dp__ button styles for functionality
+    .dp__action_button {
+        height: 200%;
+        cursor: pointer !important;
+        border: none !important;
+        padding: 0.75rem 1.5rem !important;
+        border-radius: 0.375rem !important;
+        font-weight: 500 !important;
+        transition: all 0.2s ease !important;
+    }
+
+    .dp__action_select,
+    .dp__select {
+        background: var(--color-turquoise) !important;
+        color: white !important;
+        border: none !important;
+
+        &:hover {
+        background: var(--c-brand-dark, var(--color-dark-blue)) !important;
+        }
+    }
+
+    .dp__action_cancel {
+        background: #f5f5f5 !important;
+        color: #333 !important;
+        border: 1px solid #ddd !important;
+
+        &:hover {
+        background: #e8e8e8 !important;
+        }
+    }
+
+    // Hide original action row positioning to prevent flash
+    .dp__action_row {
+        &:not(.dp__action_row--repositioned) {
+        //opacity: 0 !important;
+        //transition: opacity 0.1s ease !important;
+        }
+    }
+
+    // Note: CSS styles don't work for modals inserted outside component scope
+    // Using inline styles in JavaScript instead
+
+    // Add overlay backdrop
+    .dp__overlay {
+        position: fixed !important;
+        top: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        bottom: 0 !important;
+        background: rgba(0, 0, 0, 0.5) !important;
+        z-index: 9998 !important;
+    }
+    }
+
+
+}

package/src/styles/molecules/headerLinks/index.scss

@@ -0,0 +1,40 @@
+@use "@imarc/pronto/resources/styles/imported" as *;
+
+.headerLinks {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    border-bottom:1px solid var(--color-light-gray);
+    padding: 1.5rem 0;
+    .audioLinks__box.-open {
+        position: absolute;
+        margin-top: 2.5rem;
+        z-index: 100;
+        display: block;
+        @include at(md) {
+            left: 7rem;
+        }
+        
+        .audioLinks__links {
+            width: 18rem;
+        }
+    }
+    &__media {
+        display: flex;
+        justify-content: left;
+        background-color: white;
+        margin-bottom: 0;
+        gap: 2rem;
+        
+    }
+    a {
+            font-size: 1.25rem;
+            font-weight: 600;
+            gap: 0.2rem;
+            cursor: pointer;
+        }
+    &__icon {
+        height: 1.5rem;
+        width: 1.5rem;
+    }
+}

package/src/styles/molecules/index.scss

@@ -0,0 +1,7 @@
+@forward "accordion";
+@forward "currentRefinements";
+@forward "dateRange";
+@forward "headerLinks";
+@forward "pagination";
+@forward "resultActions";
+@forward "searchBox";