@ndla/ui 24.2.0 → 25.0.0

package/src/Filter/FilterList.jsx

@@ -1,167 +0,0 @@
-/*
- * Copyright (c) 2016-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- * FRI OG BEGRENSET
- */
-
-import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { ChevronDown, ChevronUp } from '@ndla/icons/common';
-
-import { classes } from './filterClasses';
-import ToggleItem from './ToggleItem';
-
-class FilterList extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      visibleCount: props.defaultVisibleCount,
-    };
-  }
-
-  render() {
-    const {
-      modifiers,
-      preid,
-      label,
-      labelNotVisible,
-      options,
-      values,
-      onChange,
-      defaultVisibleCount,
-      showLabel,
-      hideLabel,
-      alignedGroup,
-      collapseMobile,
-    } = this.props;
-
-    const showAll = defaultVisibleCount === null || options.length <= defaultVisibleCount;
-    const labelModifiers = [];
-
-    if (labelNotVisible) {
-      labelModifiers.push('hidden');
-    }
-
-    return (
-      <section {...classes('list', modifiers)}>
-        {label && <h1 {...classes('label', labelModifiers)}>{label}</h1>}
-        {this.props.noFilterSelectedLabel && options.length === 0 && (
-          <span {...classes('no-filter-selected')}>{this.props.noFilterSelectedLabel}</span>
-        )}
-        <ul
-          {...classes('item-wrapper', {
-            'aligned-grouping': alignedGroup,
-            'collapse-mobile': collapseMobile,
-          })}>
-          {options.map((option, index) => {
-            const itemModifiers = [];
-
-            const checked = values.some((value) => value === option.value);
-
-            if (!showAll && !checked && index + 1 > this.state.visibleCount) {
-              itemModifiers.push('hidden');
-            }
-
-            const disabled = option.noResults || option.hits === 0;
-
-            if (disabled) {
-              itemModifiers.push('no-results');
-            }
-
-            return (
-              <ToggleItem
-                modifiers={itemModifiers}
-                id={preid + option.value}
-                key={option.value}
-                value={option.value}
-                disabled={disabled}
-                tabIndex={disabled ? -1 : 0}
-                checked={checked}
-                icon={option.icon}
-                label={option.title}
-                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);
-                  }
-                }}
-              />
-            );
-          })}
-        </ul>
-        {!showAll && (
-          <button
-            {...classes('expand')}
-            type="button"
-            onClick={() => {
-              this.setState((prevState) => {
-                if (prevState.visibleCount === defaultVisibleCount) {
-                  return {
-                    visibleCount: options.length,
-                  };
-                }
-
-                return {
-                  visibleCount: defaultVisibleCount,
-                };
-              });
-            }}>
-            {this.state.visibleCount === defaultVisibleCount ? (
-              <Fragment>
-                <span>{showLabel}</span> <ChevronDown />
-              </Fragment>
-            ) : (
-              <Fragment>
-                <span>{hideLabel}</span> <ChevronUp />
-              </Fragment>
-            )}
-          </button>
-        )}
-      </section>
-    );
-  }
-}
-
-const valueShape = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
-
-FilterList.propTypes = {
-  children: PropTypes.node,
-  label: PropTypes.string,
-  preid: PropTypes.string,
-  labelNotVisible: PropTypes.bool,
-  modifiers: PropTypes.string,
-  onChange: PropTypes.func, // isRequired
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string.isRequired,
-      value: valueShape.isRequired,
-      hits: PropTypes.number,
-      icon: PropTypes.func,
-      noResults: PropTypes.bool,
-    }),
-  ).isRequired,
-  values: PropTypes.arrayOf(valueShape),
-  defaultVisibleCount: PropTypes.number,
-  showLabel: PropTypes.string,
-  noFilterSelectedLabel: PropTypes.string,
-  hideLabel: PropTypes.string,
-  alignedGroup: PropTypes.bool,
-  collapseMobile: PropTypes.bool,
-};
-
-FilterList.defaultProps = {
-  label: 'FILTER:',
-  preid: '',
-  modifiers: '',
-  values: [],
-  defaultVisibleCount: null,
-};
-
-export default FilterList;

package/src/Filter/FilterListPhone.jsx

@@ -1,329 +0,0 @@
-/*
- * Copyright (c) 2016-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- * FRI OG BEGRENSET
- */
-
-import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { ChevronDown, ChevronUp } from '@ndla/icons/common';
-import { Cross } from '@ndla/icons/action';
-import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
-import Button from '@ndla/button';
-import { debounce } from 'lodash';
-import { classes } from './filterClasses';
-import ToggleItem from './ToggleItem';
-import ActiveFilters from '../Search/ActiveFilters';
-
-class FilterListPhone extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isNarrowScreen: false,
-      visibleCount: props.defaultVisibleCount,
-    };
-    this.setScreenSizeDebounced = debounce(() => this.setScreenSize(false), 50);
-    this.handleChange = this.handleChange.bind(this);
-  }
-
-  componentDidMount() {
-    this.setScreenSize(true);
-    window.addEventListener('resize', this.setScreenSizeDebounced);
-  }
-
-  componentWillUnmount() {
-    this.setScreenSizeDebounced.cancel();
-    window.removeEventListener('resize', this.setScreenSizeDebounced);
-  }
-
-  setScreenSize(initial = false) {
-    const isNarrowScreen = (window.innerWidth || document.documentElement.clientWidth) < 768;
-
-    /* eslint react/no-did-mount-set-state: 0 */
-    if ((initial && isNarrowScreen) || !initial) {
-      this.setState({
-        isNarrowScreen,
-      });
-    }
-    /* eslint react/no-did-mount-set-state: 1 */
-  }
-
-  handleChange(event, option) {
-    const { onChange, values } = this.props;
-    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);
-    }
-  }
-
-  render() {
-    const {
-      preid,
-      modifiers,
-      label,
-      labelNotVisible,
-      options,
-      values,
-      onChange,
-      defaultVisibleCount,
-      showLabel,
-      hideLabel,
-      messages,
-      alignedGroup,
-      collapseMobile,
-      activeFiltersNarrow,
-      viewMode,
-      isGroupedOptions,
-      showActiveFiltersOnSmallScreen,
-    } = this.props;
-
-    const showAll = defaultVisibleCount === null || options.length <= defaultVisibleCount;
-    const labelModifiers = [];
-
-    if (labelNotVisible) {
-      labelModifiers.push('hidden');
-    }
-
-    let groupedOptions = options;
-    if (!isGroupedOptions) {
-      groupedOptions = [options];
-    }
-
-    if (this.state.isNarrowScreen || viewMode === 'allModal') {
-      let currentlyActiveFilters = [];
-      groupedOptions.forEach((options) => {
-        const activeFilters = options.filter((option) => values.some((value) => value === option.value));
-        currentlyActiveFilters = [...currentlyActiveFilters, ...activeFilters];
-      });
-
-      const wrapperClassName =
-        activeFiltersNarrow || viewMode === 'allModal' ? classes('narrow-active-filters').className : '';
-      return (
-        <div className={wrapperClassName}>
-          {currentlyActiveFilters.length > 0 && (
-            <ActiveFilters
-              filters={currentlyActiveFilters}
-              showOnSmallScreen={showActiveFiltersOnSmallScreen}
-              onFilterRemove={(value) => {
-                onChange(
-                  values.filter((option) => option !== value),
-                  value,
-                );
-              }}
-            />
-          )}
-          <Modal
-            size="fullscreen"
-            animation="slide-up"
-            backgroundColor="grey"
-            activateButton={
-              <Button outline {...classes('modal-button')}>
-                {messages.openFilter}
-              </Button>
-            }>
-            {(onClose) => (
-              <Fragment>
-                <ModalHeader modifier={['left-align']}>
-                  <div {...classes('modal-header')}>
-                    <div {...classes('modal-heading')}>
-                      {!this.state.isNarrowScreen && label && <h1 {...classes('label')}>{label}</h1>}
-                      <Button outline onClick={onClose}>
-                        {messages.useFilter}
-                      </Button>
-                    </div>
-                    <ModalCloseButton
-                      title={
-                        <Fragment>
-                          <Cross /> {messages.closeFilter}
-                        </Fragment>
-                      }
-                      onClick={onClose}
-                    />
-                  </div>
-                </ModalHeader>
-                <ModalBody modifier="no-side-padding-mobile">
-                  {this.state.isNarrowScreen && label && <h1 {...classes('label')}>{label}</h1>}
-                  {groupedOptions.map((options, index) => (
-                    <ul
-                      key={index}
-                      {...classes('item-wrapper', {
-                        'aligned-grouping': alignedGroup,
-                        'collapse-mobile': collapseMobile,
-                        'grouped-options': isGroupedOptions,
-                      })}>
-                      {options.map((option) => {
-                        const itemModifiers = [];
-
-                        const checked = values.some((value) => value === option.value);
-
-                        if (option.noResults) {
-                          itemModifiers.push('no-results');
-                        }
-
-                        if (option.disabled) {
-                          itemModifiers.push('disabled');
-                        }
-                        return (
-                          <ToggleItem
-                            key={option.value}
-                            id={preid + option.value}
-                            value={option.value}
-                            checked={checked}
-                            onChange={(event) => {
-                              this.handleChange(event, option);
-                            }}
-                            icon={option.icon}
-                            label={option.title}
-                            disabled={option.disabled}
-                            modifiers={itemModifiers}
-                          />
-                        );
-                      })}
-                    </ul>
-                  ))}
-
-                  <div {...classes('usefilter-wrapper')}>
-                    <Button outline onClick={onClose}>
-                      {messages.useFilter}
-                    </Button>
-                  </div>
-                </ModalBody>
-              </Fragment>
-            )}
-          </Modal>
-        </div>
-      );
-    }
-
-    return (
-      <>
-        {isGroupedOptions && label && <h2 {...classes('label', labelModifiers)}>{label}</h2>}
-        {groupedOptions.map((options, index) => (
-          <section key={index} {...classes('list', modifiers)}>
-            {!isGroupedOptions && label && <h1 {...classes('label', labelModifiers)}>{label}</h1>}
-            <ul {...classes('item-wrapper')}>
-              {options.map((option, index) => {
-                const itemModifiers = [];
-
-                const checked = values.some((value) => value === option.value);
-
-                if (!showAll && !checked && index + 1 > this.state.visibleCount) {
-                  itemModifiers.push('hidden');
-                }
-
-                if (option.noResults) {
-                  itemModifiers.push('no-results');
-                }
-
-                if (option.disabled) {
-                  itemModifiers.push('disabled');
-                }
-
-                return (
-                  <ToggleItem
-                    key={option.value}
-                    id={preid + option.value}
-                    value={option.value}
-                    tabIndex={option.noResults ? -1 : 0}
-                    checked={checked}
-                    onChange={(event) => {
-                      this.handleChange(event, option);
-                    }}
-                    icon={option.icon}
-                    label={option.title}
-                    modifiers={itemModifiers}
-                    disabled={option.disabled}
-                  />
-                );
-              })}
-            </ul>
-            {!showAll && (
-              <button
-                {...classes('expand')}
-                type="button"
-                onClick={() => {
-                  this.setState((prevState) => {
-                    if (prevState.visibleCount === defaultVisibleCount) {
-                      return {
-                        visibleCount: options.length,
-                      };
-                    }
-
-                    return {
-                      visibleCount: defaultVisibleCount,
-                    };
-                  });
-                }}>
-                {this.state.visibleCount === defaultVisibleCount ? (
-                  <Fragment>
-                    <span>{showLabel}</span> <ChevronDown />
-                  </Fragment>
-                ) : (
-                  <Fragment>
-                    <span>{hideLabel}</span> <ChevronUp />
-                  </Fragment>
-                )}
-              </button>
-            )}
-          </section>
-        ))}
-      </>
-    );
-  }
-}
-
-const valueShape = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
-
-const optionsShape = PropTypes.shape({
-  title: PropTypes.string.isRequired,
-  value: valueShape.isRequired,
-  icon: PropTypes.func,
-  noResults: PropTypes.bool,
-  disabled: PropTypes.bool,
-});
-
-FilterListPhone.propTypes = {
-  preid: PropTypes.string.isRequired,
-  children: PropTypes.node,
-  label: PropTypes.string,
-  labelNotVisible: PropTypes.bool,
-  modifiers: PropTypes.string,
-  onChange: PropTypes.func, // isRequired
-  options: PropTypes.oneOfType([PropTypes.arrayOf(optionsShape), PropTypes.arrayOf(PropTypes.arrayOf(optionsShape))])
-    .isRequired,
-  values: PropTypes.arrayOf(valueShape),
-  defaultVisibleCount: PropTypes.number,
-  showLabel: PropTypes.string,
-  hideLabel: PropTypes.string,
-  onToggle: PropTypes.func,
-  alignedGroup: PropTypes.bool,
-  collapseMobile: PropTypes.bool,
-  activeFiltersNarrow: PropTypes.bool,
-  messages: PropTypes.shape({
-    useFilter: PropTypes.string.isRequired,
-    openFilter: PropTypes.string.isRequired,
-    closeFilter: PropTypes.string.isRequired,
-  }).isRequired,
-  viewMode: PropTypes.oneOf(['inlineDesktop', 'allModal']),
-  isGroupedOptions: PropTypes.bool,
-  showActiveFiltersOnSmallScreen: PropTypes.bool,
-};
-
-FilterListPhone.defaultProps = {
-  modifiers: '',
-  values: [],
-  defaultVisibleCount: null,
-  onToggle: null,
-  alignedGroup: false,
-  collapseMobile: true,
-  viewMode: 'inlineDesktop',
-};
-
-export default FilterListPhone;

package/src/Filter/ToggleItem.jsx

@@ -1,71 +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 React, { createElement } from 'react';
-import PropTypes from 'prop-types';
-import { classes } from './filterClasses';
-
-const ToggleItem = ({
-  id,
-  checked,
-  modifiers,
-  label,
-  component: Component,
-  icon,
-  onChange,
-  tabIndex,
-  value,
-  disabled,
-  hits,
-}) => (
-  <Component {...classes('item', modifiers)}>
-    <input
-      {...classes('input')}
-      type="checkbox"
-      id={id}
-      value={value}
-      disabled={disabled}
-      tabIndex={tabIndex}
-      checked={checked}
-      onChange={onChange}
-    />
-    <label htmlFor={id}>
-      <span {...classes('item-checkbox')} />
-      <span {...classes('text')}>
-        {label}
-        {hits !== undefined && ` (${hits})`}
-      </span>
-      {icon
-        ? createElement(icon, {
-            className: `c-icon--22 ${classes('icon').className}`,
-          })
-        : null}
-    </label>
-  </Component>
-);
-
-ToggleItem.propTypes = {
-  id: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  checked: PropTypes.bool,
-  disabled: PropTypes.bool,
-  tabIndex: PropTypes.number,
-  modifiers: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
-  hits: PropTypes.number,
-  icon: PropTypes.func,
-};
-
-ToggleItem.defaultProps = {
-  component: 'li',
-  checked: false,
-};
-
-export default ToggleItem;

package/src/Masthead/component.masthead.scss

@@ -1,146 +0,0 @@
-.c-masthead {
-  z-index: 99;
-  position: relative;
-  background: white;
-  border-bottom: 1px solid $brand-grey--lighter;
-  min-height: $masthead-height;
-  display: flex;
-  flex-flow: column;
-  justify-content: flex-end;
-
-  &__skip-to-main-content {
-    left: -999px;
-    position: absolute;
-    top: auto;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    z-index: -999;
-    &:focus,
-    &:active {
-      color: #fff;
-      background: $brand-color;
-      left: auto;
-      top: auto;
-      width: 30%;
-      height: auto;
-      overflow: auto;
-      margin: 10px 35%;
-      padding: 5px;
-      border-radius: 15px;
-      border: 4px solid $brand-color--tertiary;
-      text-align: center;
-      font-size: 1.2em;
-      z-index: 9999;
-      animation-name: fadeIn;
-      animation-duration: 0.3s;
-    }
-  }
-
-  &--fixed {
-    top: 0;
-    position: sticky;
-    @media print {
-      position: relative;
-    }
-  }
-
-  &--ndlaFilm {
-    background: $film-color-light;
-    background-image: linear-gradient(0deg, $film-color-light, $film-color);
-    border: 0;
-    border-bottom: 1px solid $film-color-lighter;
-    .c-breadcrumb-block,
-    .c-breadcrumb-block__item,
-    .c-breadcrumb-block__item a,
-    .c-breadcrumb-block__item span,
-    .c-breadcrumb-block__item .c-icon {
-      color: #fff;
-    }
-  }
-
-  &__content {
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    padding: $spacing--small;
-    font-weight: $font-weight-normal;
-    display: flex;
-    height: $masthead-height;
-    justify-content: space-between;
-
-    @include mq(tablet) {
-      flex-direction: row;
-      padding: $spacing--small $spacing;
-    }
-    @include mq(desktop) {
-      padding: $spacing--small $spacing--large;
-    }
-  }
-
-  &__info {
-    text-align: center;
-  }
-
-  &__info-content {
-    background: $yellow-light;
-    padding: 0 $spacing;
-    display: inline-block;
-    @include font-size(12px, 30px);
-
-    @include mq(tablet) {
-      padding: 0 $spacing--large;
-      @include font-size(14px, 35px);
-    }
-
-    @include mq(wide) {
-      @include font-size(16px, 45px);
-
-      z-index: 1;
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      top: 0;
-    }
-  }
-
-  &__left {
-    display: flex;
-    button {
-      white-space: nowrap;
-    }
-    > div:last-child {
-      flex-grow: 1;
-    }
-    @include mq(desktop) {
-      flex-grow: 1;
-      text-align: left;
-    }
-  }
-
-  &__right {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-
-    @include mq(tablet) {
-      padding: $spacing--small 0;
-      padding: 0;
-    }
-  }
-}
-
-.c-masthead,
-.c-masthead__placeholder {
-  &--infoContent {
-    min-height: $masthead-height + 30px;
-
-    @include mq(tablet) {
-      min-height: $masthead-height + 35px;
-    }
-
-    @include mq(wide) {
-      min-height: $masthead-height;
-    }
-  }
-}