@ndla/ui 24.2.0 → 25.0.0

package/lib/CompetenceGoals/CompetenceGoals.js

@@ -1,184 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.classes = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _reactBemHelper = _interopRequireDefault(require("react-bem-helper"));
-
-var _common = require("@ndla/icons/common");
-
-var _reactI18next = require("react-i18next");
-
-var _Filter = require("../Filter");
-
-var _CompetenceGoalList = _interopRequireDefault(require("./CompetenceGoalList"));
-
-var _core = require("@emotion/core");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-var classes = new _reactBemHelper["default"]({
-  name: 'competence-goals',
-  prefix: 'c-'
-});
-exports.classes = classes;
-
-var CompetenceGoals = /*#__PURE__*/function (_Component) {
-  _inherits(CompetenceGoals, _Component);
-
-  var _super = _createSuper(CompetenceGoals);
-
-  function CompetenceGoals(props) {
-    var _this;
-
-    _classCallCheck(this, CompetenceGoals);
-
-    _this = _super.call(this, props);
-    _this.state = {
-      expanded: null
-    };
-    return _this;
-  }
-
-  _createClass(CompetenceGoals, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          messages = _this$props.messages,
-          headingId = _this$props.headingId,
-          topics = _this$props.topics,
-          id = _this$props.id,
-          menu = _this$props.menu,
-          search = _this$props.search,
-          subjectName = _this$props.subjectName,
-          filterOptions = _this$props.filterOptions,
-          filterValues = _this$props.filterValues,
-          onFilterClick = _this$props.onFilterClick,
-          description = _this$props.description,
-          t = _this$props.t;
-      return (0, _core.jsx)("div", classes('', {
-        menu: menu,
-        search: search
-      }), !menu && !search ? (0, _core.jsx)(_react.Fragment, null, (0, _core.jsx)("h1", {
-        id: headingId
-      }, messages.heading), (0, _core.jsx)("hr", null), (0, _core.jsx)("p", null, description), (0, _core.jsx)("p", null, messages.listDescription), (0, _core.jsx)("div", classes('topic'), (0, _core.jsx)(_CompetenceGoalList["default"], {
-        goals: topics[0].items
-      }))) : (0, _core.jsx)(_react.Fragment, null, (0, _core.jsx)("h1", classes('subject-heading'), subjectName), (0, _core.jsx)("h2", _extends({
-        id: headingId
-      }, classes('heading')), messages.heading), (0, _core.jsx)("p", classes('description'), messages.listDescription), filterOptions && filterOptions.length > 0 && (0, _core.jsx)(_react.Fragment, null, (0, _core.jsx)(_Filter.FilterListPhone, {
-        preid: "competence",
-        label: "Filtrer kompetansem\xE5l",
-        options: filterOptions,
-        alignedGroup: true,
-        values: filterValues,
-        onChange: onFilterClick,
-        messages: {
-          openFilter: t('competenceGoals.openCompentenceGoalsFilter'),
-          useFilter: t('competenceGoals.useCompentenceGoalsFilter'),
-          closeFilter: t('competenceGoals.closeCompentenceGoalsFilter')
-        }
-      })), topics.map(function (topic) {
-        return (0, _core.jsx)("div", _extends({}, classes('topic', {
-          expandable: true,
-          expanded: _this2.state.expanded === topic.heading
-        }), {
-          key: topic.heading
-        }), (0, _core.jsx)("h3", classes('topic-heading'), (0, _core.jsx)("button", _extends({}, classes('topic-heading-button'), {
-          type: "button",
-          "aria-expanded": _this2.state.expanded === topic.heading,
-          "aria-controls": id,
-          onClick: function onClick() {
-            _this2.setState(function (prevState) {
-              var expanded = null;
-
-              if (prevState.expanded !== topic.heading) {
-                expanded = topic.heading;
-              }
-
-              return {
-                expanded: expanded
-              };
-            });
-          }
-        }), _this2.state.expanded === topic.heading ? (0, _core.jsx)(_common.ChevronDown, null) : (0, _core.jsx)(_common.ChevronRight, null), topic.heading)), (0, _core.jsx)(_CompetenceGoalList["default"], {
-          id: id,
-          "aria-hidden": _this2.state.expanded !== topic.heading,
-          goals: topic.items
-        }));
-      })));
-    }
-  }]);
-
-  return CompetenceGoals;
-}(_react.Component);
-
-CompetenceGoals.propTypes = {
-  id: _propTypes["default"].string,
-  headingId: _propTypes["default"].string,
-  menu: _propTypes["default"].bool,
-  search: _propTypes["default"].bool,
-  description: _propTypes["default"].string.isRequired,
-  messages: _propTypes["default"].shape({
-    heading: _propTypes["default"].string.isRequired,
-    listDescription: _propTypes["default"].string.isRequired
-  }).isRequired,
-  subjectName: _propTypes["default"].string,
-  filterOptions: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    title: _propTypes["default"].string.isRequired,
-    value: _propTypes["default"].string.isRequired
-  })),
-  filterValues: _propTypes["default"].arrayOf(_propTypes["default"].string),
-  onFilterClick: _propTypes["default"].func.isRequired,
-  topics: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    heading: _propTypes["default"].string,
-    items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-      text: _propTypes["default"].string.isRequired,
-      url: _propTypes["default"].string
-    }))
-  }))
-};
-CompetenceGoals.defaultProps = {
-  headingId: null,
-  menu: false,
-  search: false
-};
-
-var _default = (0, _reactI18next.withTranslation)()(CompetenceGoals);
-
-exports["default"] = _default;

package/lib/Subject/SubjectFilter.d.ts

@@ -1,27 +0,0 @@
-import { ChangeEvent } from 'react';
-import PropTypes from 'prop-types';
-interface Props {
-    label: string;
-    onChange: (evt: ChangeEvent<HTMLInputElement>) => void;
-    options: {
-        value: string | number;
-        title: string;
-    }[];
-    values: (string | number)[];
-}
-declare const SubjectFilter: {
-    ({ label, options, values, onChange }: Props): JSX.Element;
-    propTypes: {
-        label: PropTypes.Validator<string>;
-        onChange: PropTypes.Validator<(...args: any[]) => any>;
-        options: PropTypes.Validator<(PropTypes.InferProps<{
-            value: PropTypes.Validator<string | number>;
-            title: PropTypes.Validator<string>;
-        }> | null | undefined)[]>;
-        values: PropTypes.Requireable<(string | number | null | undefined)[]>;
-    };
-    defaultProps: {
-        values: never[];
-    };
-};
-export default SubjectFilter;

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;