@ndla/ui 24.2.2 → 25.0.0

package/lib/Subject/SubjectFilter.js

@@ -1,58 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reactBemHelper = _interopRequireDefault(require("react-bem-helper"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _FilterList = _interopRequireDefault(require("../Filter/FilterList"));
-
-var _core = require("@emotion/core");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-// @ts-ignore
-var searchFilterClasses = (0, _reactBemHelper["default"])({
-  prefix: 'c-',
-  name: 'filter',
-  outputIsString: true
-});
-
-var valueShape = _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]);
-
-var SubjectFilter = function SubjectFilter(_ref) {
-  var label = _ref.label,
-      options = _ref.options,
-      values = _ref.values,
-      onChange = _ref.onChange;
-  return (0, _core.jsx)("div", {
-    className: searchFilterClasses('', ['subject', 'background'])
-  }, (0, _core.jsx)(_FilterList["default"], {
-    onChange: onChange,
-    labelNotVisible: true,
-    options: options,
-    label: label,
-    values: values
-  }));
-};
-
-SubjectFilter.propTypes = {
-  label: _propTypes["default"].string.isRequired,
-  onChange: _propTypes["default"].func.isRequired,
-  options: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    value: valueShape.isRequired,
-    title: _propTypes["default"].string.isRequired
-  })).isRequired,
-  values: _propTypes["default"].arrayOf(valueShape)
-};
-SubjectFilter.defaultProps = {
-  values: []
-};
-var _default = SubjectFilter;
-exports["default"] = _default;

package/src/CompetenceGoals/CompetenceGoalList.jsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-import { mq, breakpoints, fonts, spacing } from '@ndla/core';
-import SafeLink from '@ndla/safelink';
-import { classes } from './CompetenceGoals';
-import { CompetenceGoalShape } from '../shapes';
-
-export const CompetenceGoalListHeading = styled('p')`
-  font-weight: ${fonts.weight.semibold};
-  margin-bottom: ${spacing.small};
-`;
-
-const StyledListItem = styled('li')`
-  line-height: ${spacing.normal};
-  ${mq.range({ until: breakpoints.tablet })} {
-    ${fonts.sizes(16, 1.5)};
-  }
-  &:last-child {
-    margin-bottom: 0;
-  }
-`;
-
-export const CompetenceGoal = ({ goal }) => {
-  const content = goal.url ? <SafeLink to={goal.url}>{goal.name}</SafeLink> : goal.name;
-
-  return <StyledListItem {...classes('topic-item')}>{content}</StyledListItem>;
-};
-
-CompetenceGoal.propTypes = {
-  goal: CompetenceGoalShape,
-};
-
-const StyledList = styled('ul')`
-  margin: 0 0 ${spacing.large} ${spacing.normal};
-  padding: 0;
-  max-width: 650px;
-`;
-
-export const CompetenceGoalList = ({ goals, ...rest }) => (
-  <StyledList {...classes('topic-list')} {...rest}>
-    {goals.map((goal) => (
-      <CompetenceGoal key={goal.id} goal={goal} />
-    ))}
-  </StyledList>
-);
-CompetenceGoalList.propTypes = {
-  goals: PropTypes.arrayOf(CompetenceGoalShape).isRequired,
-};
-
-export default CompetenceGoalList;

package/src/CompetenceGoals/CompetenceGoals.jsx

@@ -1,152 +0,0 @@
-import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
-import BEMHelper from 'react-bem-helper';
-import { ChevronRight, ChevronDown } from '@ndla/icons/common';
-import { withTranslation } from 'react-i18next';
-import { FilterListPhone } from '../Filter';
-import CompetenceGoalList from './CompetenceGoalList';
-
-export const classes = new BEMHelper({
-  name: 'competence-goals',
-  prefix: 'c-',
-});
-
-class CompetenceGoals extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      expanded: null,
-    };
-  }
-
-  render() {
-    const {
-      messages,
-      headingId,
-      topics,
-      id,
-      menu,
-      search,
-      subjectName,
-      filterOptions,
-      filterValues,
-      onFilterClick,
-      description,
-      t,
-    } = this.props;
-
-    return (
-      <div {...classes('', { menu, search })}>
-        {!menu && !search ? (
-          <Fragment>
-            <h1 id={headingId}>{messages.heading}</h1>
-            <hr />
-            <p>{description}</p>
-            <p>{messages.listDescription}</p>
-            <div {...classes('topic')}>
-              <CompetenceGoalList goals={topics[0].items} />
-            </div>
-          </Fragment>
-        ) : (
-          <Fragment>
-            <h1 {...classes('subject-heading')}>{subjectName}</h1>
-            <h2 id={headingId} {...classes('heading')}>
-              {messages.heading}
-            </h2>
-            <p {...classes('description')}>{messages.listDescription}</p>
-            {filterOptions && filterOptions.length > 0 && (
-              <Fragment>
-                <FilterListPhone
-                  preid="competence"
-                  label="Filtrer kompetansemål"
-                  options={filterOptions}
-                  alignedGroup
-                  values={filterValues}
-                  onChange={onFilterClick}
-                  messages={{
-                    openFilter: t('competenceGoals.openCompentenceGoalsFilter'),
-                    useFilter: t('competenceGoals.useCompentenceGoalsFilter'),
-                    closeFilter: t('competenceGoals.closeCompentenceGoalsFilter'),
-                  }}
-                />
-              </Fragment>
-            )}
-            {topics.map((topic) => (
-              <div
-                {...classes('topic', {
-                  expandable: true,
-                  expanded: this.state.expanded === topic.heading,
-                })}
-                key={topic.heading}>
-                <h3 {...classes('topic-heading')}>
-                  <button
-                    {...classes('topic-heading-button')}
-                    type="button"
-                    aria-expanded={this.state.expanded === topic.heading}
-                    aria-controls={id}
-                    onClick={() => {
-                      this.setState((prevState) => {
-                        let expanded = null;
-                        if (prevState.expanded !== topic.heading) {
-                          expanded = topic.heading;
-                        }
-
-                        return {
-                          expanded,
-                        };
-                      });
-                    }}>
-                    {this.state.expanded === topic.heading ? <ChevronDown /> : <ChevronRight />}
-                    {topic.heading}
-                  </button>
-                </h3>
-
-                <CompetenceGoalList id={id} aria-hidden={this.state.expanded !== topic.heading} goals={topic.items} />
-              </div>
-            ))}
-          </Fragment>
-        )}
-      </div>
-    );
-  }
-}
-
-CompetenceGoals.propTypes = {
-  id: PropTypes.string,
-  headingId: PropTypes.string,
-  menu: PropTypes.bool,
-  search: PropTypes.bool,
-  description: PropTypes.string.isRequired,
-  messages: PropTypes.shape({
-    heading: PropTypes.string.isRequired,
-    listDescription: PropTypes.string.isRequired,
-  }).isRequired,
-  subjectName: PropTypes.string,
-  filterOptions: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string.isRequired,
-      value: PropTypes.string.isRequired,
-    }),
-  ),
-  filterValues: PropTypes.arrayOf(PropTypes.string),
-  onFilterClick: PropTypes.func.isRequired,
-  topics: PropTypes.arrayOf(
-    PropTypes.shape({
-      heading: PropTypes.string,
-      items: PropTypes.arrayOf(
-        PropTypes.shape({
-          text: PropTypes.string.isRequired,
-          url: PropTypes.string,
-        }),
-      ),
-    }),
-  ),
-};
-
-CompetenceGoals.defaultProps = {
-  headingId: null,
-  menu: false,
-  search: false,
-};
-
-export default withTranslation()(CompetenceGoals);

package/src/CompetenceGoals/component.competence-goals.scss

@@ -1,161 +0,0 @@
-.c-competence-goals {
-  height: 100%;
-  max-width: 960px;
-  width: 100%;
-  margin: 0 auto;
-  padding: 32px;
-
-  @include mq(mobile) {
-    padding: 0;
-  }
-
-  &__dialog-wrapper {
-    @include mq(tablet) {
-      padding-left: $spacing;
-    }
-  }
-
-  &__heading {
-    margin-top: 0;
-    @include font-size(20px, 32px);
-
-    @include mq(tablet) {
-      @include font-size(22px, 32px);
-    }
-  }
-
-  &__subject-heading {
-    @include font-size(20px, 32px);
-    margin: 0 0 $spacing 0;
-    color: $brand-color;
-
-    @include mq(desktop) {
-      display: none;
-    }
-  }
-
-  &__description {
-    margin-bottom: $spacing;
-    @include mq($until: tablet) {
-      @include font-size(16px, 20px);
-    }
-  }
-
-  .c-filter {
-    position: relative;
-
-    &__list {
-      padding-top: $spacing--small;
-      border-top: 0;
-      margin-bottom: $spacing--small;
-    }
-
-    &__item {
-      margin-bottom: $spacing--small;
-      margin-left: 0;
-    }
-
-    &__label {
-      @include visually-hidden();
-    }
-  }
-
-  &__topic {
-    margin-bottom: $spacing;
-    padding-top: $spacing;
-
-    @include mq(tabletWide) {
-      padding-top: $spacing--small;
-    }
-
-    &--expandable {
-      margin-bottom: $spacing--small;
-      max-height: 35px;
-      transition: max-height 0.3s ease-in-out;
-
-      .c-competence-goals {
-        &__topic-list {
-          opacity: 0;
-          transition: opacity 0.1s ease-in-out 0.1s;
-        }
-      }
-    }
-
-    &--expanded {
-      max-height: 4000px;
-      .c-competence-goals {
-        &__topic-list {
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  &__topic-heading {
-    margin: 0 0 $spacing 0;
-  }
-
-  &__topic-heading-button,
-  &__topic-heading {
-    color: $brand-color;
-    @include inuit-font-size(18px, 23px);
-    font-weight: $font-weight-semibold;
-  }
-
-  &__topic-heading-button {
-    background: none;
-    border: none;
-    margin: 0 0 0 -4px;
-    position: relative;
-    padding: $spacing--small/2 $spacing--small/2 0;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-
-    @include mq(desktop) {
-      margin: 0;
-    }
-
-    .c-icon {
-      @include mq(desktop) {
-        position: absolute;
-        left: -21px;
-        top: 9px;
-      }
-    }
-  }
-
-  &--menu,
-  &--search {
-    padding: $spacing--small $spacing $spacing--small $spacing--small;
-    @include mq($until: mobileWide) {
-      padding: 0;
-    }
-  }
-  .c-competence-goals {
-    &__heading {
-      text-transform: uppercase;
-      color: $primary-color;
-      font-weight: $font-weight-semibold;
-      @include font-size(16px, 20px);
-    }
-    &__topic--expandable {
-      padding-left: ($spacing--small + 10px);
-      .c-competence-goals__topic-list {
-        font-weight: $font-weight-normal;
-        padding-left: ($spacing--small + 12px);
-      }
-    }
-  }
-  @include mq($until: desktop) {
-    &--menu,
-    &--search {
-      .c-competence-goals {
-        &__topic--expandable {
-          padding-left: 0;
-          margin-left: -4px;
-        }
-      }
-    }
-  }
-}

package/src/CompetenceGoals/index.js

@@ -1,6 +0,0 @@
-import CompetenceGoals from './CompetenceGoals';
-
-export { default as CompetenceGoalsDialog } from './CompetenceGoalsDialog';
-export { default as CompetenceGoalList, CompetenceGoal, CompetenceGoalListHeading } from './CompetenceGoalList';
-
-export default CompetenceGoals;

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;