henry-search 1.0.13 → 1.0.15

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";

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

@@ -0,0 +1,44 @@
+@use "@imarc/pronto/resources/styles/imported" as *;
+
+.resultsPagination {
+    margin-top: 2rem;
+    display: flex;
+    justify-content: space-between;
+    padding: 1rem 1.5rem;
+    @include at(lg) {
+        padding: 2rem  0;
+    }
+
+    &__paginationComponent {
+
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      li {
+        padding: 0 .2rem;
+        height: 1.5rem;
+      }
+      li.arrow a{
+        color: var(--color-turquoise);
+      }
+
+      li:hover {
+        border-bottom: 2px solid var(--color-turquoise);
+      }
+
+      a {
+        font-size: 1.1rem;
+        color: var(--color-gray-500);
+       
+      }
+      // a:hover {
+      //     text-decoration: underline;
+      // }
+
+      
+  }
+}

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

@@ -0,0 +1,42 @@
+@use "@imarc/pronto/resources/styles/imported" as *;
+
+.resultActions {
+    display: none;
+    @include at(lg) {
+      display:flex;
+      flex-wrap: nowrap;
+    }
+
+    &__buttons {
+        @include at(lg) {
+          display: inline;
+          border-left: thin solid var(--color-gray-400);
+          height: 1.75rem;
+          padding-left: .25rem;
+        }
+    }
+
+    &__icon {
+        background-color: var(--color-light-gray);
+        padding: 10px;
+        border-radius: 1rem;
+        margin: 0 .5rem;
+        cursor: pointer;
+    }
+
+    &__sort {
+        font-weight: 100;
+        font-size: 1.1rem;
+        margin-right: .5rem;
+        display: flex;
+        //align-items: center;
+        // select {
+        //   margin-bottom: 0;
+        // }
+    }
+
+    &__sortText {
+      padding-top:0.25rem;
+    }
+}
+

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

@@ -0,0 +1,69 @@
+.searchBox {
+     border: 1px solid #D7D7D7;
+     border-radius: 5px;
+     width: 100%;
+     background-color: #FDF9F7;
+     padding: .5rem;
+     height: 40px;
+     display: flex;
+     align-items: center;
+     box-sizing: border-box;
+
+     &.-filter {
+      background-color:#ffffff;
+     }
+
+     .ais-SearchBox-form {
+       display: flex;
+       align-items: center;
+       justify-content: start;
+       flex-direction: row-reverse;
+       gap: .5rem;
+       height: 100%;
+       width: 100%;
+       .ais-SearchBox-reset {
+        display:none;
+       }
+     }
+
+     .ais-SearchBox-input {
+       font-size: var(--font-size-2);
+       color: var(--color-dark-blue);
+       font-style: italic;
+       font-weight: 100;
+       width: 100%;
+       height: 100%;
+       background-color: #FDF9F7;
+       border: none;
+       outline: none;
+       &::placeholder {
+        color: var(--color-gray-100);
+       }
+       &.-filter {
+          background-color:#ffffff;
+          border: none;
+          color:var(--color-dark-blue);
+          font-style: normal;
+          width: 100%;
+       }
+       &.-filter::placeholder {
+        color: var(--color-gray-100);
+       }
+     }
+
+     .ais-SearchBox-submitIcon {
+       width: 16px;
+       height: 16px;
+     }
+
+     .ais-SearchBox-reset, .ais-SearchBox-submit {
+       align-self: center !important;
+       border: none;
+       background-color: #FDF9F7;
+       display: flex;
+       align-items: center !important;
+       justify-content: center !important;
+       line-height: 1 !important;
+       vertical-align: middle !important;
+     }
+  }

package/src/styles/organisms/activeFilters/index.scss

@@ -0,0 +1,49 @@
+.activeFilters {
+    align-items: center;
+    display: grid;
+    gap: 0.5rem;
+    grid-template-columns: 1fr auto;
+    padding-top: 1rem;
+
+    
+
+    &__clearFilters {
+        font-weight: 100;
+        font-size: 1.15rem;
+        color: var(--color-mid-gray);
+    }
+
+    &__item {
+        background-color: var(--color-light-gray);
+        color: var(--color-dark-blue);
+        font-weight: 100;
+        border-radius: 4px;
+        padding: .25rem .5rem;
+    }
+
+    &__items {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    &__filtersList {
+        grid-column: 1/span 2;
+        display: flex;
+        gap: .75rem;
+        margin-bottom: 1rem;
+    }
+    &__remove {
+        color: var(--color-dark-blue);
+        .eventLocation {
+        margin-left: 0.25rem;
+        }
+    }
+
+    &__title {
+        font-weight: bold;
+    }
+
+  
+}

package/src/styles/organisms/filters/index.scss

@@ -0,0 +1,241 @@
+@use "@imarc/pronto/resources/styles/imported" as *;
+
+.filters {
+    flex: 1;
+    min-width: 0;
+
+    &__button {
+        justify-self: end;
+        @include at(md) {
+                justify-self: stretch;
+        }
+
+
+        .mobileSearch {
+            display: inline;
+            @include at(md) {
+            display: none;
+            }
+        }
+    }
+
+    &__filterGroup {
+        flex: 1;      
+    }
+
+    &__header {
+        align-items: center;
+        display: flex;
+        padding-top:0.85rem;
+        width: 100%;
+        justify-content: space-between;
+    }
+
+    &__filterRail {
+        grid-column-start: 1;
+        padding-right: 2rem;
+        padding-top: 3rem;
+        background-color:#ffffff;
+        transition: width 400ms, padding-left 400ms;
+        width: 0;
+        &.closed {
+            width: 0;
+            padding-left: 6rem;
+        }
+
+        @include at(lg) {
+            width: 28rem;
+            flex-direction: column;
+            gap: 1rem;
+            padding-left: 8rem;
+        }
+
+        .clearRefinements {
+            display: none;
+        }
+
+        button.hideButton {
+            display: none;
+            @include at(lg) {
+                --accent-color: var(--link-color, var(--color-turquoise));
+                align-items: center;
+                color: var(--accent-color);
+                display: inline-flex;
+                gap: 1em;
+                text-decoration: none;
+                transition: color var(--root-ease-out-fast);
+                background-color: var(--color-white);
+                border: none;
+            }
+        }
+
+        .hideMobile {
+            display: inline;
+            padding-right: 1rem;
+            svg {
+                height: auto;
+            }
+            @include at(lg) {
+                display: none;
+            }
+        }
+
+        &.openMobile {
+        display: flex;
+        flex-wrap: wrap;
+        position: absolute;
+        top: -50px;
+        left: 0px;
+        z-index:100;
+        width: 100vw;
+        height: 100%;
+        padding-right: 0;
+        .clearRefinements {
+
+            display:inline;
+            
+            //padding: 1rem 2rem 0 1rem;
+            
+            position: sticky;
+            bottom: 0;
+            z-index: 3;
+            height: 100px;
+            width: 100vw;
+            box-shadow: 0 -30px 30px var(--color-gray-100);
+            background-color: white;
+            @include at(lg) {
+                display: none;
+            }
+            .ais-ClearRefinements {
+                width: 100%;
+                height: 100%;
+                a {
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+                gap: 1rem;
+                justify-content: space-around;
+                padding: .5rem 2rem 0.5rem 1rem;
+                width: 100%;
+                height: 100%;
+                }
+                button {
+                    align-self: top;
+                width: 100%;
+                }
+            } 
+            button {
+                width: 100%;
+                height: 80%;
+                justify-self: center;
+                border: 0;
+                border-radius: 5px;
+                &.filterApply {
+                background-color: var(--color-turquoise);
+                color: var(--color-dark-blue);
+                font-weight: 600;
+                }
+            }
+            
+        }
+        .label {
+            font-weight: 700;
+            color: var(--color-dark-blue);
+            @include at(lg) {
+            font-weight: normal;
+            color: var(--color-gray-500);
+            }
+        }
+        .location {
+            padding: 0 0.5rem;
+            @include at(lg) {
+            padding: 0;
+            }
+        }
+
+
+        @include at(lg) {
+            display:inline;
+            position:relative;
+            width: 28rem;
+            flex-direction: column;
+            gap: 1rem;
+            padding-left: 8rem;
+            height: auto;
+            padding-right: 2rem;
+            padding-top: 3rem;
+        }
+        }
+    }
+
+
+    &__icon {
+        display: none;
+        @include at(lg) {
+            display:inline;
+        }
+    }
+    &__search {
+        grid-area: search;
+    }
+
+    &__searchButton {
+        display: none;
+        @include at(md) {
+            display: inline;
+        }
+    }
+
+    &__row {
+        width: 100%;
+        display: grid;
+        gap: 1rem;
+        grid-template-columns: 4fr 4fr 1fr;
+        justify-content: space-between;
+        @include at(lg) {
+            grid-template-columns: 1fr 1fr 1fr;
+        }
+        
+        grid-template-areas:
+        "search search search"
+        "date date button";
+
+        @include at(lg) {
+            grid-template-columns: minmax(18rem, 2fr) minmax(24rem, 1fr) 18rem;
+            //grid-template-columns: 100% rem 18rem;
+            grid-template-areas:
+            "search date button";
+        }
+    }
+
+    &__toggle {
+        display: flex;
+        padding: 0.5rem 0;
+        .label {
+        padding-left: 0.5rem;
+        }
+    }
+
+    &__toggleOn {
+        display: none;
+        margin-right: 1rem;
+        transition: display 400ms;
+        &.closed {
+            //display: none;
+            @include at(lg) {
+                display: inline;
+            }
+        }
+        
+    }
+    
+    &__wrapper {
+        overflow: scroll;
+        width: 100%;
+        height: 100%;
+        @include at(lg) {
+            overflow: hidden;
+            display: grid;
+            height: auto;
+        }
+    }
+}

package/src/styles/organisms/index.scss

@@ -0,0 +1,4 @@
+@forward "activeFilters";
+@forward "filters";
+@forward "performanceGrid";
+@forward "resultsGrid";

package/src/styles/organisms/performanceGrid/index.scss

@@ -0,0 +1,121 @@
+@use "@imarc/pronto/resources/styles/imported" as *;
+
+.performanceGrid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    @include at(md) {
+        grid-template-columns: repeat(5, 1fr);
+        margin-bottom: 6rem;
+    }
+    
+    &__cell {
+        padding: 0.5rem 1rem;
+        border-right: thin solid var(--color-gray-200);
+        border-left: thin solid var(--color-gray-200);
+        grid-column: 1/span 2;
+        display: grid;
+        @include at(md) {
+            padding: 1rem;
+            border-left: none;
+            grid-column: auto;
+        }
+        a{
+            color: var(--color-dark-blue);
+        }
+
+        &.-artist {
+            grid-column: auto;
+            border-right:none;
+            border-bottom: thin solid var(--color-gray-200);
+            @include at(md) {
+                border-right: thin solid var(--color-gray-200);
+                border-bottom: none;
+            }
+        }
+         &.-artist.-last {
+            border-bottom: thin solid var(--color-gray-200);
+         }
+         &.-composers {
+            display: inline;
+         }
+        &.-role {
+            grid-column: auto;
+            border-right: thin solid var(--color-gray-200);
+            border-bottom: thin solid var(--color-gray-200);
+            border-left: none;
+            @include at(md) {
+               border-bottom: none;
+            }
+        }
+        &.-role.-last {
+            border-bottom: thin solid var(--color-gray-200);
+        }
+        
+        font-weight: bold;
+        font-size: 0.9rem;
+        &.-even {
+            background-color: var(--color-light-gray);
+        }
+        &.-first {
+            //border-left: none;
+            @include at(md) {
+                border-left: thin solid var(--color-gray-200);
+            }
+        }
+        &.-header {
+            display: none;
+            @include at(md) {
+                display: inline;
+                border-top: thin solid var(--color-gray-200);
+                border-bottom: thin solid var(--color-gray-200);
+                font-weight:100;
+                color: var(--color-gray-400);
+            }
+           
+        }
+        &.-last, &.-top.-last {
+            border-bottom: none;
+            @include at(md) {
+                border-bottom: thin solid var(--color-gray-200);
+            }
+            
+        }
+        &.-top {
+            border-top:  thin solid var(--color-gray-200);
+            border-bottom: none;
+            @include at(md) {
+                border-top: none;
+            }
+        }
+        
+
+    }
+
+    &__infoItem {
+        min-height: 2.5rem;
+        &.-small {
+            font-size: .8rem;
+            font-weight: 100;
+            a {
+                font-weight: 600;
+            }
+        }
+    }
+
+    &__mobileHeader {
+        display: block;
+        font-weight:100;
+        color: var(--color-gray-400);
+        @include at(md) {
+            display: none;
+        }
+    }
+
+    &__workItem {
+        display:grid;
+        grid-template-rows: auto;
+        height: fit-content;
+        
+    }
+    
+}