@ndla/ui 22.2.0 → 24.0.0

package/src/Search/component.search-filter.scss

@@ -1,67 +0,0 @@
-.c-search-filter {
-  @include mq(mobileWide) {
-    + .c-search-filter {
-      margin-top: $spacing--medium;
-    }
-  }
-
-  width: 100%;
-  text-align: left;
-
-  &--narrow-screen-only {
-    @include mq(desktop) {
-      display: none;
-    }
-  }
-
-  @include mq(desktop) {
-    padding: $spacing;
-    background: $white;
-    border: none;
-    margin-bottom: $spacing--small;
-  }
-
-  &--context-filter {
-    background: $brand-color--light;
-    padding: $spacing--medium;
-  }
-
-  &:first-child {
-    .c-filter__list {
-      border-top: 0;
-    }
-  }
-
-  @include mq($until: mobileWide) {
-    margin-bottom: $spacing;
-
-    .c-search-filter {
-      label {
-        padding-left: $spacing--large;
-      }
-    }
-
-    .c-filter__item {
-      width: 100%;
-    }
-  }
-
-  @include mq($from: mobileWide, $until: desktop) {
-    .c-search-filter {
-      + .c-filter__item {
-        margin-top: $spacing;
-      }
-
-      .c-filter__item-wrapper {
-        padding-left: $spacing;
-        padding-top: $spacing--small;
-      }
-    }
-  }
-
-  @include mq(568px) {
-    .c-search-filter .c-filter__item {
-      width: 235px - $spacing;
-    }
-  }
-}

package/src/Search/component.search-overlay.scss

@@ -1,103 +0,0 @@
-$overlay-height: 150px;
-
-@keyframes searchAnimation {
-  0% {
-    display: none;
-    opacity: 0;
-  }
-  1% {
-    opacity: 0.3;
-    display: block;
-    top: 13px;
-    height: 58px;
-    left: calc(100% - 302px);
-    right: 302px;
-  }
-  100% {
-    opacity: 1;
-    height: $overlay-height;
-    top: 0;
-    left: 0;
-    right: 0;
-  }
-}
-
-@keyframes closeButton {
-  0% {
-    opacity: 0;
-  }
-
-  70% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-.c-search-overlay {
-  z-index: 1000;
-  height: $overlay-height;
-  background: $brand-grey--lighter;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  &-enter {
-    opacity: 0.3;
-    top: 13px;
-    height: 58px;
-    left: calc(100% - 302px);
-    right: 302px;
-
-    transition: all 0.3s ease;
-
-    &-active {
-      opacity: 1;
-      height: $overlay-height;
-      top: 0;
-      left: 0;
-      right: 0;
-    }
-  }
-
-  &-exit {
-    transition: all 0.3s ease;
-
-    &-active {
-      @extend .c-search-overlay-enter;
-      opacity: 0;
-    }
-  }
-
-  &__container {
-    padding: 0;
-    position: relative;
-  }
-
-  &__close-button {
-    position: absolute;
-    top: $spacing--small;
-    right: -($spacing--large + 36px);
-    width: 36px;
-    height: 36px;
-    color: $brand-color--dark;
-    background: none;
-    border: 0;
-    padding: 0;
-    cursor: pointer;
-
-    animation: closeButton 0.7s;
-
-    .c-icon {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}

package/src/Search/component.search-page.scss

@@ -1,125 +0,0 @@
-$filter-width: 250px;
-$search-field-wrapper-margin: $filter-width;
-.c-search-page {
-  &__close-button {
-    display: inline-flex;
-    align-items: center;
-    box-shadow: none;
-    position: absolute;
-    right: $spacing--small;
-    top: $spacing--small;
-    @include font-size(16px, 20px);
-    cursor: pointer;
-
-    @include mq(desktop) {
-      display: none;
-    }
-
-    span {
-      box-shadow: $link;
-      color: $brand-color;
-      margin-right: $spacing--small;
-    }
-
-    .c-icon {
-      color: $brand-color--dark;
-      width: 24px;
-      height: 24px;
-    }
-  }
-
-  &__toggle-filter {
-    @include mq(desktop) {
-      display: none;
-    }
-    margin-bottom: $spacing;
-  }
-
-  &__filter-result-wrapper {
-    @include mq(desktop) {
-      display: flex;
-    }
-  }
-
-  &__search-field-wrapper {
-    padding: $spacing 0 $spacing 0;
-    @include mq(desktop) {
-      padding: $spacing--large 0 $spacing--large $spacing--small;
-      margin-left: $search-field-wrapper-margin;
-    }
-    .c-search-field__input-wrapper {
-      padding: 0;
-      margin: 0;
-    }
-    @include mq($until: desktop) {
-      .c-active-filters {
-        display: none;
-      }
-    }
-  }
-
-  &__active-filters {
-    margin-bottom: $spacing;
-
-    @include mq(desktop) {
-      display: none;
-    }
-  }
-
-  &__filter-wrapper {
-    display: none;
-
-    @include mq($until: desktop) {
-      position: fixed;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      overflow: auto;
-      background: $white;
-      margin-right: 0;
-      z-index: 100;
-      padding-top: $spacing * 3;
-    }
-
-    flex-basis: $filter-width;
-    flex-shrink: 0;
-    margin-right: $spacing--small;
-    text-align: center;
-
-    &--expanded {
-      display: block;
-      position: fixed;
-      padding-bottom: $spacing--large;
-      animation: slideIn 0.5s;
-    }
-
-    @include mq(desktop) {
-      display: block;
-      width: $filter-width;
-    }
-  }
-
-  &__filter-heading {
-    text-align: left;
-    text-transform: uppercase;
-    display: none;
-    margin: 0;
-    font-weight: 600;
-    @include font-size(18px, 32px);
-
-    @include mq(desktop) {
-      display: block;
-    }
-  }
-
-  &__filters {
-    & > button {
-      margin-top: $spacing;
-    }
-  }
-
-  &__result-wrapper {
-    flex-grow: 1;
-  }
-}

package/src/Search/component.search-result-author.scss

@@ -1,65 +0,0 @@
-.c-search-result-author {
-  background: $brand-grey--lighter;
-  padding: $spacing;
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  margin-bottom: $spacing;
-  &--desktop {
-    @include mq($until: desktop) {
-      display: none;
-    }
-  }
-  &--tablet {
-    @include mq(desktop) {
-      display: none;
-    }
-  }
-  @include mq($until: desktop) {
-    flex-direction: row-reverse;
-    background: none;
-    padding: 0 0 $spacing 0;
-    justify-content: flex-end;
-    align-items: center;
-    &__portrait-image {
-      margin-right: $spacing--medium;
-    }
-    &__url {
-      display: none;
-    }
-  }
-  &__heading {
-    margin: 0 0 $spacing--small;
-    @include font-size(24px, 32px);
-    font-weight: $font-weight-bold;
-    @include mq($until: desktop) {
-      display: none;
-    }
-  }
-  p {
-    margin: 0;
-  }
-  &__links {
-    display: flex;
-    &:empty {
-      display: none;
-    }
-    a:not(:last-child) {
-      margin-right: $spacing--large;
-    }
-  }
-  @include mq($until: tablet) {
-    p, a {
-      @include font-size(16px, 24px);
-    }
-    &__portrait-image {
-      margin-right: $spacing;
-      width: 4rem;
-      height: 4rem;
-      span {
-        width: 4rem;
-        height: 4rem;
-      }
-    }
-  }
-}

package/src/Search/index.js

@@ -1,34 +0,0 @@
-/**
- * Copyright (c) 2017-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import SearchField from './SearchField';
-import SearchOverlay from './SearchOverlay';
-import SearchPage from './SearchPage';
-
-import { SearchResult, SearchResultList, SearchResultItem } from './SearchResult';
-
-import SearchFilter from './SearchFilter';
-import SearchFilterList from './SearchFilterList';
-import SearchPopoverFilter from './SearchPopoverFilter';
-import SearchResultAuthor from './SearchResultAuthor';
-import ActiveFilters from './ActiveFilters';
-export { default as ToggleSearchButton } from './ToggleSearchButton';
-
-export {
-  SearchField,
-  SearchOverlay,
-  SearchPage,
-  SearchResult,
-  SearchResultItem,
-  SearchResultList,
-  SearchFilter,
-  SearchFilterList,
-  SearchPopoverFilter,
-  SearchResultAuthor,
-  ActiveFilters,
-};