@ndla/ui 23.0.0 → 24.0.0

package/src/FileList/component.file-list.scss

@@ -1,102 +0,0 @@
-.c-file-list {
-  margin: $spacing--large 0;
-  padding: $spacing--small 0 $spacing $spacing;
-  border-left: 2px solid $brand-grey--lightest;
-  font-family: $font;
-
-  &__heading {
-    @include font-size(16px, 18px);
-    letter-spacing: 0.05em;
-    margin: 0 0 $spacing--small / 2 0;
-    padding-bottom: $spacing--small / 2;
-
-    border-bottom: 2px solid $brand-grey--light;
-    font-weight: $font-weight-bold;
-    text-transform: uppercase;
-  }
-
-  &__files {
-    margin: 0;
-    padding: 0;
-  }
-
-  &__item {
-    @include font-size(18px, 26px);
-    font-weight: $font-weight-semibold;
-    min-height: 60px;
-    background: $brand-grey--lighter;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    margin-bottom: $spacing--small / 2;
-    padding: $spacing--small;
-
-    @include mq(tablet) {
-      padding: $spacing--small $spacing;
-    }
-  }
-
-  &__link {
-    box-shadow: none;
-    position: relative;
-    color: $brand-color;
-    margin-right: $spacing;
-    display: flex;
-    align-items: center;
-
-    &:last-child {
-      margin-right: 0;
-    }
-
-    &:hover,
-    &:focus,
-    &:active {
-      .c-file-list__link-text {
-        & > span {
-          box-shadow: $link--hover;
-        }
-      }
-    }
-  }
-
-  &__link-text {
-    & > span {
-      box-shadow: $link;
-    }
-  }
-
-  &__tooltip {
-    position: absolute;
-    display: none;
-    left: 50%;
-    top: -$spacing--small;
-    transform: translate3d(-50%, -100%, 0);
-    width: 300px;
-    text-align: center;
-    z-index: 1;
-
-    &[aria-hidden='false'] {
-      display: block;
-      animation-name: fadeIn;
-      animation-duration: 0.3s;
-    }
-  }
-
-  &__tooltip-text {
-    display: inline-block;
-    text-align: left;
-    background: $brand-color;
-    padding: $spacing--small;
-    @include font-size(14px, 18px);
-    font-weight: $font-weight-normal;
-    color: $white;
-  }
-
-  .c-icon {
-    margin-top: 3px;
-    flex-shrink: 0;
-    margin-right: $spacing--small;
-    height: 18px;
-    width: 18px;
-  }
-}

package/src/InfoBox/component.info-box.scss

@@ -1,21 +0,0 @@
-.c-info-box {
-  background: $yellow-light;
-  padding: $spacing--small $spacing;
-  font-family: $font;
-  @include font-size(14px, 18px);
-
-  margin-bottom: $spacing--medium;
-
-  @include mq(tablet) {
-    @include font-size(16px, 20px);
-    padding: $spacing;
-  }
-
-  & > *:first-child {
-    margin-top: 0;
-  }
-
-  & > *:last-child {
-    margin-bottom: 0;
-  }
-}

package/src/InfoWidget/component.info-widget.scss

@@ -1,52 +0,0 @@
-.c-info-widget {
-  max-width: 600px;
-
-  &--center {
-    margin: 0 auto;
-  }
-
-  &__description {
-    padding: $spacing;
-    background: $brand-color--lighter;
-    color: $brand-color--dark;
-    @include font-size(18px, 26px);
-
-    p {
-      margin-top: 0;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  &__links {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-  }
-
-  &__main-link {
-    color: $brand-color--dark;
-    @include font-size(16px, 24px);
-  }
-
-  &__icon-link {
-    width: 47px;
-    height: 47px;
-    border-radius: 100%;
-    background: $brand-color--lighter;
-    color: $brand-color--dark;
-    box-shadow: none;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    .c-icon {
-      width: 20px;
-      height: 20px;
-    }
-
-    margin-right: $spacing--small;
-  }
-}

package/src/Portrait/component.portrait.scss

@@ -1,29 +0,0 @@
-.c-portrait {
-	width: 7rem;
-	height: 7rem;
-	span {
-		display: block;
-		border-radius: 50%;
-		background-color: rgba(0,0,0,0.16);
-		background-size: cover;
-		background-position: center center;
-		width: 7rem;
-		height: 7rem;
-	}
-	&--small {
-		width: 4rem;
-		height: 4rem;
-		span {
-			width: 4rem;
-			height: 4rem;
-		}
-	}
-	&--large {
-		width: 10rem;
-		height: 10rem;
-		span {
-			width: 10rem;
-			height: 10rem;
-		}
-	}
-}

package/src/Search/SearchFilter.jsx

@@ -1,82 +0,0 @@
-import React from 'react';
-import BEMHelper from 'react-bem-helper';
-import PropTypes from 'prop-types';
-
-import { FilterList } from '../Filter';
-
-const searchFilterClasses = BEMHelper({
-  prefix: 'c-',
-  name: 'search-filter',
-  outputIsString: true,
-});
-
-const valueShape = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
-
-const SearchFilter = ({
-  label,
-  options,
-  values,
-  defaultVisibleCount,
-  showLabel,
-  hideLabel,
-  narrowScreenOnly,
-  contextFilter,
-  onChange,
-  noFilterSelectedLabel,
-  children,
-}) => {
-  const modifiers = [];
-
-  if (narrowScreenOnly) {
-    modifiers.push('narrow-screen-only');
-  }
-
-  if (contextFilter) {
-    modifiers.push('context-filter');
-  }
-
-  return (
-    <div className={searchFilterClasses('', modifiers)}>
-      <FilterList
-        options={options}
-        label={label}
-        labelNotVisible={contextFilter}
-        values={values}
-        defaultVisibleCount={defaultVisibleCount}
-        modifiers={!contextFilter ? 'search' : null}
-        showLabel={showLabel}
-        hideLabel={hideLabel}
-        onChange={onChange}
-        alignedGroup
-        noFilterSelectedLabel={noFilterSelectedLabel}
-      />
-      {children}
-    </div>
-  );
-};
-
-SearchFilter.propTypes = {
-  label: PropTypes.string.isRequired,
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: valueShape.isRequired,
-      title: PropTypes.string.isRequired,
-      noResults: PropTypes.bool,
-    }),
-  ).isRequired,
-  values: PropTypes.arrayOf(valueShape),
-  defaultVisibleCount: PropTypes.number,
-  onChange: PropTypes.func,
-  showLabel: PropTypes.string,
-  hideLabel: PropTypes.string,
-  narrowScreenOnly: PropTypes.bool,
-  noFilterSelectedLabel: PropTypes.string,
-  contextFilter: PropTypes.bool,
-  children: PropTypes.node,
-};
-
-SearchFilter.defaultProps = {
-  values: [],
-};
-
-export default SearchFilter;

package/src/Search/SearchFilterList.jsx

@@ -1,110 +0,0 @@
-import React, { Fragment } from 'react';
-import BEMHelper from 'react-bem-helper';
-import PropTypes from 'prop-types';
-
-import { FilterList, ToggleItem } from '../Filter';
-
-const searchFilterClasses = BEMHelper({
-  prefix: 'c-',
-  name: 'search-filter',
-  outputIsString: true,
-});
-
-const valueShape = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
-
-const SearchFilterList = ({
-  label,
-  options,
-  values,
-  narrowScreenOnly,
-  onChange,
-  onSubfilterChange,
-  preid,
-  noFilterSelectedLabel,
-  subjectValues,
-  children,
-}) => {
-  return (
-    <div className={searchFilterClasses('')}>
-      <div>
-        {options.map((option, index) => {
-          const itemModifiers = [];
-          const checked = values.some((value) => value === option.value);
-
-          if (!checked && index + 1 > this.state.visibleCount) {
-            itemModifiers.push('hidden');
-          }
-
-          const disabled = option.noResults || option.hits === 0;
-
-          if (disabled) {
-            itemModifiers.push('no-results');
-          }
-
-          return (
-            <Fragment key={option.value}>
-              <ToggleItem
-                modifiers={itemModifiers}
-                id={preid + option.value}
-                value={option.value}
-                disabled={disabled}
-                tabIndex={disabled ? -1 : 0}
-                checked={checked}
-                icon={option.icon}
-                label={option.title}
-                component="div"
-                onChange={(event) => {
-                  let newValues = null;
-                  if (event.currentTarget.checked) {
-                    newValues = [...values, option.value];
-                  } else {
-                    newValues = values.filter((value) => value !== option.value);
-                  }
-                  if (onChange) {
-                    onChange(newValues, option.value);
-                  }
-                }}
-              />
-              <div className={searchFilterClasses()}>
-                <FilterList
-                  options={option.subjectFilters}
-                  label={label}
-                  labelNotVisible
-                  values={subjectValues[option.value]}
-                  onChange={(subjectFilters, subjectFilter) =>
-                    onSubfilterChange(option.value, subjectFilters, subjectFilter)
-                  }
-                  alignedGroup
-                  noFilterSelectedLabel={noFilterSelectedLabel}
-                />
-              </div>
-            </Fragment>
-          );
-        })}
-      </div>
-      {children}
-    </div>
-  );
-};
-
-SearchFilterList.propTypes = {
-  label: PropTypes.string.isRequired,
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: valueShape.isRequired,
-      title: PropTypes.string.isRequired,
-      noResults: PropTypes.bool,
-    }),
-  ).isRequired,
-  values: PropTypes.arrayOf(valueShape),
-  onChange: PropTypes.func,
-  onSubfilterChange: PropTypes.func,
-  noFilterSelectedLabel: PropTypes.string,
-  children: PropTypes.node,
-};
-
-SearchFilterList.defaultProps = {
-  values: [],
-};
-
-export default SearchFilterList;

package/src/Search/SearchOverlay.jsx

@@ -1,38 +0,0 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import BEMHelper from 'react-bem-helper';
-import { Cross } from '@ndla/icons/action';
-import { CSSTransition } from 'react-transition-group';
-
-import Fade from '../Animation/Fade';
-
-const classes = BEMHelper({
-  prefix: 'c-',
-  name: 'search-overlay',
-});
-
-const SearchOverlay = ({ close, isOpen, children }) => (
-  <Fragment>
-    <Fade in={isOpen}>
-      <div className="o-backdrop" />
-    </Fade>
-    <CSSTransition timeout={300} classNames={classes().className} unmountOnExit in={isOpen}>
-      <div {...classes()}>
-        <div {...classes('container o-wrapper')}>
-          {children}
-          <button {...classes('close-button')} type="button" onClick={close}>
-            <Cross />
-          </button>
-        </div>
-      </div>
-    </CSSTransition>
-  </Fragment>
-);
-
-SearchOverlay.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  close: PropTypes.func,
-  children: PropTypes.node.isRequired,
-};
-
-export default SearchOverlay;

package/src/Search/SearchPage.jsx

@@ -1,178 +0,0 @@
-import React, { Component, Fragment, createRef } from 'react';
-import BEMHelper from 'react-bem-helper';
-import PropTypes from 'prop-types';
-import { Back } from '@ndla/icons/common';
-import { debounce } from 'lodash';
-import { getCurrentBreakpoint, breakpoints } from '@ndla/util';
-import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
-import Button from '@ndla/button';
-import { withTranslation } from 'react-i18next';
-
-import SearchField from './SearchField';
-import ActiveFilters from './ActiveFilters';
-import { SearchFieldForm } from './SearchFieldForm';
-
-const classes = BEMHelper('c-search-page');
-const filterClasses = BEMHelper('c-filter');
-
-class SearchPage extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isNarrowScreen: false,
-    };
-
-    this.filterCloseButton = null;
-    this.inputRef = createRef();
-    this.checkScreenSize = this.checkScreenSize.bind(this);
-    this.checkScreenSizeDebounce = debounce(() => this.checkScreenSize(), 100);
-  }
-
-  componentDidMount() {
-    window.addEventListener('resize', this.checkScreenSizeDebounce);
-    this.checkScreenSize();
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.checkScreenSizeDebounce);
-  }
-
-  checkScreenSize() {
-    const currentBreakpoint = getCurrentBreakpoint();
-    const isNarrowScreen = currentBreakpoint === breakpoints.mobile || currentBreakpoint === breakpoints.tablet;
-
-    /* eslint react/no-did-mount-set-state: 0 */
-    if (isNarrowScreen !== this.state.isNarrowScreen) {
-      this.setState({
-        isNarrowScreen,
-      });
-    }
-  }
-
-  render() {
-    const {
-      searchString,
-      onSearchFieldChange,
-      onSearchFieldFilterRemove,
-      searchFieldFilters,
-      onSearch,
-      // only on narrow screen
-      activeFilters,
-      resourceToLinkProps,
-      filters,
-      children,
-      messages,
-      author,
-      t,
-    } = this.props;
-
-    return (
-      <main {...classes()}>
-        <div {...classes('search-field-wrapper')}>
-          <SearchFieldForm onSubmit={onSearch}>
-            <SearchField
-              inputRef={this.inputRef}
-              value={searchString}
-              onChange={onSearchFieldChange}
-              placeholder={t('searchPage.searchFieldPlaceholder')}
-              filters={searchFieldFilters}
-              onFilterRemove={onSearchFieldFilterRemove}
-              resourceToLinkProps={resourceToLinkProps}
-              messages={{
-                searchFieldTitle: t('searchPage.search'),
-              }}
-            />
-          </SearchFieldForm>
-        </div>
-        {author}
-        <div {...classes('filter-result-wrapper')}>
-          <aside {...classes('filter-wrapper')}>
-            <h1 {...classes('filter-heading')}>{t('searchPage.searchPageMessages.filterHeading')}</h1>
-            <div {...classes('filters')}>{!this.state.isNarrowScreen && filters}</div>
-          </aside>
-          <div {...classes('result-wrapper')}>
-            <div {...classes('active-filters')}>
-              <ActiveFilters
-                filters={activeFilters}
-                showOnSmallScreen
-                onFilterRemove={(value, filterName) => onSearchFieldFilterRemove(value, filterName)}
-              />
-            </div>
-            <div {...classes('toggle-filter')}>
-              <Modal
-                animation="subtle"
-                animationDuration={150}
-                size="fullscreen"
-                backgroundColor="grey"
-                activateButton={<Button outline>{t('searchPage.searchPageMessages.filterHeading')}</Button>}>
-                {(onClose) => (
-                  <Fragment>
-                    <ModalHeader modifier="white left-align">
-                      <ModalCloseButton
-                        title={
-                          <Fragment>
-                            <Back /> {messages.narrowScreenFilterHeading}
-                          </Fragment>
-                        }
-                        onClick={onClose}>
-                        Close
-                      </ModalCloseButton>
-                    </ModalHeader>
-                    <ModalBody modifier="slide-in-left no-side-padding-mobile">
-                      {filters}
-                      <div {...filterClasses('usefilter-wrapper')}>
-                        <Button outline onClick={onClose}>
-                          {t('searchPage.searchFilterMessages.useFilter')}
-                        </Button>
-                      </div>
-                    </ModalBody>
-                  </Fragment>
-                )}
-              </Modal>
-            </div>
-
-            {children}
-          </div>
-        </div>
-      </main>
-    );
-  }
-}
-
-SearchPage.propTypes = {
-  // should be <Fragment />
-  filters: PropTypes.node.isRequired,
-  children: PropTypes.node.isRequired,
-  searchString: PropTypes.string.isRequired,
-  onSearchFieldChange: PropTypes.func.isRequired,
-  onSearch: PropTypes.func.isRequired,
-  onSearchFieldFilterRemove: PropTypes.func.isRequired,
-  resourceToLinkProps: PropTypes.func.isRequired,
-  searchFieldFilters: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.string.isRequired,
-      title: PropTypes.string.isRequired,
-      filterName: PropTypes.string.isRequired,
-    }),
-  ),
-  activeFilters: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.string.isRequired,
-      title: PropTypes.string.isRequired,
-      filterName: PropTypes.string.isRequired,
-    }),
-  ),
-  messages: PropTypes.shape({
-    narrowScreenFilterHeading: PropTypes.string.isRequired,
-  }).isRequired,
-  author: PropTypes.node,
-  hideResultText: PropTypes.bool,
-  filterScreenChange: PropTypes.func,
-  t: PropTypes.func.isRequired,
-};
-
-SearchPage.defaultProps = {
-  author: null,
-};
-
-export default withTranslation()(SearchPage);