@rededor/site-front-end-lib 20.0.25 → 20.0.27

package/components/algolia-search/components/algolia-search/algolia-search.component.scss

@@ -0,0 +1,588 @@
+@use '../../../../styles/_breakpoints.scss' as breakpoints;
+@use '../../../../styles/_mixins.scss' as mixins;
+
+// Vars
+$controls-height: 72px;
+$padding: 20px;
+
+:host {
+  --results-height: calc(100vh - #{$controls-height});
+}
+
+// Algolia Search
+.algolia-search {
+  position: relative;
+  box-sizing: border-box;
+
+  * {
+    font-family: var(--font-family);
+  }
+
+  algolia-search-results,
+  .algolia-search-results {
+    z-index: 5001;
+  }
+
+  &.star-theme {
+    border-radius: 0px !important;
+  }
+
+  &.maternity-star-theme {
+    border-radius: 2rem !important;
+    .algolia-search-controls {
+      border-radius: 2rem !important;
+    }
+  }
+
+  &-controls {
+    z-index: 5002;
+    display: grid;
+    position: relative;
+    grid-template-columns: $padding 14px $padding 1fr auto (calc($padding / 2));
+    grid-template-rows: auto;
+    grid-template-areas: '. left-icon . field clean-icon .';
+    background: #ffffff;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
+    padding-top: 6px;
+    transition: ease 0.2s all;
+
+    algolia-search-field {
+      display: block;
+      position: relative;
+      grid-area: field;
+    }
+
+    .left-icon {
+      grid-area: left-icon;
+      align-self: center;
+    }
+
+    .clean-icon {
+      grid-area: clean-icon;
+      align-self: center;
+    }
+
+    &-hint {
+      grid-area: field;
+      height: 66px;
+      font-weight: 300;
+      font-size: 25px;
+      color: rgb(226, 226, 226);
+      white-space: nowrap;
+      overflow: hidden;
+      text-transform: uppercase;
+      display: flex;
+      align-items: center;
+
+      @media screen and (max-width: breakpoints.$breakpoint-medium) {
+        font-size: 22px;
+      }
+    }
+
+    &-field {
+      input {
+        width: 100%;
+        height: 66px;
+        font-weight: 300;
+        font-size: 25px;
+        font-style: normal;
+        color: rgb(74, 74, 74);
+        background: transparent;
+
+        &::placeholder {
+          color: rgb(110, 110, 110);
+          font-size: 18px;
+          font-weight: 500;
+          opacity: 1;
+        }
+      }
+
+      &.disabled {
+        input {
+          opacity: 1;
+          -webkit-text-fill-color: rgb(146, 146, 146);
+        }
+      }
+    }
+  }
+
+  &.focus,
+  &.focus-mobile:not(.no-overlay) {
+    z-index: 9998;
+
+    @media screen and (max-width: breakpoints.$breakpoint-medium) {
+      width: 100%;
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 10000;
+
+      // Results overlay on mobile
+      .algolia-search-results-overlay {
+        width: 100%;
+        height: 100vh;
+        background:
+          linear-gradient(259.8deg, #f2f2f2 37.83%, #fffbff 55.77%, rgba(255, 251, 255, 0) 76.8%),
+          linear-gradient(79.63deg, #f5f6f8 45.51%, rgba(245, 246, 248, 0) 75.93%);
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+    }
+
+    .algolia-search-controls {
+      &-field {
+        input {
+          &::placeholder {
+            color: rgb(183, 183, 183);
+            font-size: 25px;
+            font-weight: 300;
+          }
+
+          @media screen and (max-width: breakpoints.$breakpoint-medium) {
+            font-size: 22px;
+            text-transform: uppercase;
+
+            &::placeholder {
+              font-size: 20px;
+            }
+          }
+        }
+      }
+    }
+
+    &.no-results {
+      .algolia-search-controls {
+        &-field {
+          input {
+            color: rgb(157, 58, 58) !important;
+          }
+        }
+      }
+    }
+  }
+
+  &.disabled {
+    background-color: rgba(246, 246, 246, 1) !important;
+    border: 2px solid rgba(183, 183, 183, 1);
+
+    .algolia-search-controls {
+      background-color: rgba(246, 246, 246, 1) !important;
+    }
+  }
+
+  @mixin light-control {
+    background-color: #ffffff;
+    border-radius: 4px;
+    padding: 6px 0px;
+    border: 2px solid rgb(146, 146, 146);
+
+    .algolia-search-controls {
+      height: auto;
+      padding-top: 0;
+      grid-template-areas: '. search-icon . field clean-icon .';
+      grid-template-columns: 12px auto 8px 1fr auto 12px;
+      grid-template-rows: minmax(28px, auto);
+      box-shadow: none;
+
+      &-hint {
+        grid-area: field;
+        width: 100%;
+        height: auto;
+        font-weight: 500;
+        font-size: 16px;
+        font-style: normal;
+        text-transform: none;
+      }
+
+      algolia-search-field {
+        display: flex;
+        align-items: center;
+      }
+
+      &-field {
+        padding-bottom: 0;
+        flex-grow: 1;
+
+        display: flex;
+
+        input {
+          display: flex;
+          flex: 1 1 0;
+
+          width: 100%;
+          height: auto;
+          font-weight: 500;
+          font-size: 16px;
+          font-style: normal;
+          color: rgb(110, 110, 110);
+          text-transform: capitalize;
+
+          &::placeholder {
+            font-style: normal;
+            font-weight: 500;
+            font-size: 16px;
+            line-height: 135%;
+            display: flex;
+            align-items: center;
+            color: rgb(110, 110, 110);
+            text-transform: none;
+          }
+
+          &:focus {
+            color: rgb(38, 38, 38);
+          }
+        }
+
+        &.disabled {
+          input {
+            width: 100%;
+            height: auto;
+            font-style: normal;
+            font-weight: 500;
+            font-size: 16px;
+            line-height: 135%;
+            color: rgb(146, 146, 146);
+            text-transform: uppercase;
+            cursor: not-allowed;
+            &::placeholder {
+              color: rgb(146, 146, 146);
+              -webkit-text-fill-color: rgb(146, 146, 146);
+            }
+          }
+        }
+      }
+
+      .search-icon {
+        grid-area: search-icon;
+        align-self: center;
+      }
+
+      .clean-icon {
+        grid-area: clean-icon;
+        align-self: center;
+      }
+    }
+
+    &.focus {
+      z-index: 9998;
+      border: 2px solid rgb(110, 168, 255);
+
+      @media screen and (max-width: breakpoints.$breakpoint-medium) {
+        border: none;
+        width: 100%;
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 10000;
+
+        // Results overlay on mobile
+        .algolia-search-results-overlay {
+          width: 100%;
+          height: 100vh;
+          background:
+            linear-gradient(259.8deg, #f2f2f2 37.83%, #fffbff 55.77%, rgba(255, 251, 255, 0) 76.8%),
+            linear-gradient(79.63deg, #f5f6f8 45.51%, rgba(245, 246, 248, 0) 75.93%);
+          position: absolute;
+          top: 0;
+          left: 0;
+        }
+      }
+
+      &.no-results {
+        border: solid 2px rgb(157, 58, 58);
+        .algolia-search-controls {
+          @media screen and (max-width: breakpoints.$breakpoint-medium) {
+            border: none;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
+          }
+
+          &-field {
+            input {
+              color: rgb(157, 58, 58) !important;
+            }
+          }
+        }
+      }
+    }
+
+    .algolia-search-results {
+      background: #ffffff;
+      border: none;
+      border-radius: 0 0 4px 4px;
+      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
+      margin-top: 2px;
+
+      .algolia-search-results-item {
+        background-color: #ffffff;
+      }
+
+      .algolia-multiple-results {
+        width: 100%;
+        max-height: 398px;
+        overflow: hidden;
+        display: flex;
+
+        &-primary {
+          width: 60%;
+
+          algolia-search-result-item:nth-child(1n + 8) {
+            display: none;
+          }
+        }
+
+        &-secondary {
+          width: 40%;
+          overflow-x: auto;
+        }
+
+        @media screen and (min-width: breakpoints.$breakpoint-medium) {
+          .algolia-multiple-results-primary,
+          .algolia-multiple-results-secondary {
+            width: 100%;
+          }
+        }
+
+        &.single-result {
+          display: block;
+        }
+      }
+    }
+  }
+
+  @media screen and (min-width: breakpoints.$breakpoint-medium) {
+    &.light-style {
+      @include light-control;
+    }
+  }
+
+  @media screen and (max-width: breakpoints.$breakpoint-medium) {
+    &.light-style:not(.focus-mobile),
+    &.light-style.no-overlay {
+      @include light-control;
+    }
+  }
+
+  // Results container
+  algolia-search-results,
+  &.no-results > .algolia-search-results {
+    display: block;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+  }
+
+  .algolia-search-results {
+    max-height: 70vh;
+    overflow-y: auto;
+    z-index: 1;
+
+    @media screen and (max-height: breakpoints.$breakpoint-medium) {
+      max-height: 400px;
+    }
+
+    @media screen and (max-width: breakpoints.$breakpoint-medium) {
+      max-height: var(--results-height);
+    }
+  }
+
+  &.no-results .algolia-search-results {
+    max-height: 70vh;
+    overflow-y: auto;
+    z-index: 1;
+
+    @media screen and (max-height: breakpoints.$breakpoint-medium) {
+      max-height: 400px;
+    }
+
+    @media screen and (max-width: breakpoints.$breakpoint-medium) {
+      max-height: var(--results-height);
+    }
+  }
+
+  // Result Item
+  algolia-search-result-item {
+    display: block;
+    position: relative;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid rgb(226, 226, 226);
+    }
+  }
+
+  .algolia-multiple-results-secondary {
+    algolia-search-result-item {
+      &:not(:last-child) {
+        border-bottom: none;
+      }
+
+      .algolia-search-results-item {
+        h4 {
+          font-size: 13px;
+          font-weight: 400;
+        }
+
+        p {
+          font-size: 12px;
+          font-weight: 300;
+        }
+      }
+    }
+  }
+
+  .algolia-search-results-item {
+    width: 100%;
+    display: grid;
+    padding: 8px $padding;
+    grid-template-columns: auto 1fr 8px auto auto;
+    grid-template-rows: 1fr auto;
+    grid-template-areas:
+      'icon title . action .'
+      'icon subtitle . action description';
+    align-items: center;
+    background-color: #fff;
+    cursor: pointer;
+
+    @media screen and (max-width: breakpoints.$breakpoint-medium) {
+      background-color: unset;
+    }
+
+    &-icon,
+    &-img,
+    &-distance {
+      grid-area: icon;
+    }
+
+    h4,
+    p {
+      padding: 0;
+      margin: 0;
+      color: #6e6e6e;
+      line-height: 16px;
+      letter-spacing: 0.72px;
+    }
+
+    h4 {
+      grid-area: title;
+      font-size: 12px;
+      color: #262626;
+      font-weight: 700;
+
+      &.hasSubtitle {
+        @include mixins.truncate();
+      }
+
+      &:not(.hasSubtitle) {
+        @include mixins.multilineTruncate(2);
+      }
+
+      &.error-message {
+        color: rgb(157, 58, 58);
+        font-size: 14px;
+        font-weight: 300;
+        height: 70px;
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    p {
+      grid-area: subtitle;
+      @include mixins.truncate();
+      font-size: 12px;
+    }
+
+    h4 em,
+    p em {
+      color: rgb(0, 150, 129);
+      font-weight: 500;
+      font-style: normal;
+    }
+
+    h5 {
+      grid-area: description;
+      color: rgb(74, 74, 74);
+      font-weight: 300;
+      font-style: normal;
+      font-size: 12px;
+      line-height: 14px;
+    }
+
+    &-icon,
+    &-img {
+      display: flex;
+      align-items: center;
+      margin-right: calc($padding / 2);
+
+      cura-icon {
+        stroke: rgb(183, 183, 183);
+        transition: ease 0.5s stroke;
+      }
+    }
+
+    &-img img {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      overflow: hidden;
+      object-fit: cover;
+    }
+
+    &-distance {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      margin-right: 8px;
+      min-width: 30px;
+    }
+
+    &:hover,
+    &.preselected {
+      background: #f6f6f6 !important;
+    }
+
+    &-action {
+      grid-area: action;
+      a {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        font-weight: 300;
+        color: rgb(0, 150, 129);
+
+        @media screen and (max-width: breakpoints.$breakpoint-medium) {
+          span {
+            display: none;
+          }
+        }
+
+        cura-icon {
+          margin-left: 8px;
+          stroke: rgb(0, 150, 129);
+        }
+      }
+
+      > cura-icon {
+        @extend a;
+        stroke: rgb(0, 150, 129);
+      }
+    }
+  }
+
+  &.light-style .algolia-search-results-item {
+    padding-right: 12px;
+    padding-left: 12px;
+  }
+
+  &.no-results .algolia-search-results-item {
+    background: transparent !important;
+    cursor: default;
+
+    .algolia-search-results-item-icon {
+      cura-icon {
+        stroke: rgb(183, 183, 183);
+      }
+    }
+  }
+}

package/components/algolia-search/components/algolia-search/algolia-search.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AlgoliaSearchComponent } from './algolia-search.component';
+
+describe('AlgoliaSearchComponent', () => {
+  let component: AlgoliaSearchComponent;
+  let fixture: ComponentFixture<AlgoliaSearchComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AlgoliaSearchComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AlgoliaSearchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});