@ndla/ui 50.9.7 → 50.9.9

package/es/Filter/FilterList.js

@@ -1,100 +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.
- *
- */
-
-import { useState } from "react";
-import { ChevronDown, ChevronUp } from "@ndla/icons/common";
-import { classes } from "./filterClasses";
-import ToggleItem from "./ToggleItem";
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-const FilterList = _ref => {
-  let {
-    modifiers = "",
-    preid = "",
-    label = "FILTER:",
-    labelNotVisible,
-    options,
-    values = [],
-    onChange,
-    defaultVisibleCount,
-    showLabel,
-    hideLabel,
-    alignedGroup,
-    collapseMobile,
-    noFilterSelectedLabel
-  } = _ref;
-  const [visibleCount, setVisibleCount] = useState(defaultVisibleCount);
-  const showAll = defaultVisibleCount === undefined || options.length <= defaultVisibleCount;
-  const labelModifiers = [];
-  if (labelNotVisible) {
-    labelModifiers.push("hidden");
-  }
-  return _jsxs("section", {
-    ...classes("list", modifiers),
-    children: [label && _jsx("h1", {
-      ...classes("label", labelModifiers),
-      children: label
-    }), noFilterSelectedLabel && options.length === 0 && _jsx("span", {
-      ...classes("no-filter-selected"),
-      children: noFilterSelectedLabel
-    }), _jsx("ul", {
-      ...classes("item-wrapper", {
-        "aligned-grouping": !!alignedGroup,
-        "collapse-mobile": !!collapseMobile
-      }),
-      children: options.map((option, index) => {
-        const itemModifiers = [];
-        const checked = values.some(value => value === option.value);
-        if (!showAll && !checked && index + 1 > (visibleCount ?? 0)) {
-          itemModifiers.push("hidden");
-        }
-        const disabled = option.noResults || option.hits === 0;
-        if (disabled) {
-          itemModifiers.push("no-results");
-        }
-        return _jsx(ToggleItem, {
-          modifiers: itemModifiers,
-          id: preid + option.value,
-          value: option.value,
-          disabled: disabled,
-          tabIndex: disabled ? -1 : 0,
-          checked: checked,
-          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);
-            }
-          }
-        }, option.value);
-      })
-    }), !showAll && _jsx("button", {
-      ...classes("expand"),
-      type: "button",
-      onClick: () => {
-        setVisibleCount(prev => prev === defaultVisibleCount ? options.length : defaultVisibleCount);
-      },
-      children: visibleCount === defaultVisibleCount ? _jsxs(_Fragment, {
-        children: [_jsx("span", {
-          children: showLabel
-        }), " ", _jsx(ChevronDown, {})]
-      }) : _jsxs(_Fragment, {
-        children: [_jsx("span", {
-          children: hideLabel
-        }), " ", _jsx(ChevronUp, {})]
-      })
-    })]
-  });
-};
-export default FilterList;

package/es/Filter/FilterListPhone.js

@@ -1,224 +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.
- *
- */
-
-import debounce from "lodash/debounce";
-import { useCallback, useEffect, useState } from "react";
-import { ButtonV2 } from "@ndla/button";
-import { ChevronDown, ChevronUp } from "@ndla/icons/common";
-import { ModalHeader, ModalBody, ModalCloseButton, Modal, ModalTrigger, ModalContent } from "@ndla/modal";
-import { classes } from "./filterClasses";
-import ToggleItem from "./ToggleItem";
-import ActiveFilters from "../Search/ActiveFilters";
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-const is2DArray = options => {
-  return Array.isArray(options[0]);
-};
-const FilterListPhone = _ref => {
-  let {
-    preid,
-    label,
-    labelNotVisible,
-    modifiers = "",
-    onChange,
-    options,
-    values = [],
-    defaultVisibleCount,
-    showLabel,
-    hideLabel,
-    alignedGroup = false,
-    collapseMobile = true,
-    activeFiltersNarrow,
-    messages,
-    viewMode = "inlineDesktop",
-    isGroupedOptions,
-    showActiveFiltersOnSmallScreen
-  } = _ref;
-  const [open, setOpen] = useState(false);
-  const [isNarrowScreen, setIsNarrowScreen] = useState(false);
-  const [visibleCount, setVisibleCount] = useState(defaultVisibleCount);
-  useEffect(() => {
-    setScreenSize(true);
-    const debounced = debounce(() => setScreenSize(false), 50);
-    window.addEventListener("resize", debounced);
-    return () => {
-      debounced.cancel();
-      window.removeEventListener("resize", debounced);
-    };
-  }, []);
-  const setScreenSize = function () {
-    let initial = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    const newIsNarrowScreen = (window.innerWidth || document.documentElement.clientWidth) < 768;
-
-    /* eslint react/no-did-mount-set-state: 0 */
-    if (initial && newIsNarrowScreen || !initial) {
-      setIsNarrowScreen(newIsNarrowScreen);
-    }
-    /* eslint react/no-did-mount-set-state: 1 */
-  };
-  const onClose = useCallback(() => {
-    setOpen(false);
-  }, []);
-  const handleChange = (event, option) => {
-    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);
-    }
-  };
-  const showAll = defaultVisibleCount === undefined || options.length <= defaultVisibleCount;
-  const labelModifiers = [];
-  if (labelNotVisible) {
-    labelModifiers.push("hidden");
-  }
-  const groupedOptions = is2DArray(options) ? options : [options];
-  if (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 _jsxs("div", {
-      className: wrapperClassName,
-      children: [currentlyActiveFilters.length > 0 && _jsx(ActiveFilters, {
-        filters: currentlyActiveFilters,
-        showOnSmallScreen: showActiveFiltersOnSmallScreen,
-        onFilterRemove: value => {
-          onChange(values.filter(option => option !== value), value);
-        }
-      }), _jsxs(Modal, {
-        open: open,
-        onOpenChange: setOpen,
-        children: [_jsx(ModalTrigger, {
-          children: _jsx(ButtonV2, {
-            variant: "outline",
-            ...classes("modal-button"),
-            children: messages.openFilter
-          })
-        }), _jsxs(ModalContent, {
-          size: "full",
-          children: [_jsx(ModalHeader, {
-            children: _jsxs("div", {
-              ...classes("modal-header"),
-              children: [_jsxs("div", {
-                ...classes("modal-heading"),
-                children: [!isNarrowScreen && label && _jsx("h1", {
-                  ...classes("label"),
-                  children: label
-                }), _jsx(ButtonV2, {
-                  variant: "outline",
-                  onClick: onClose,
-                  children: messages.useFilter
-                })]
-              }), _jsx(ModalCloseButton, {
-                title: messages.closeFilter
-              })]
-            })
-          }), _jsxs(ModalBody, {
-            modifier: "no-side-padding-mobile",
-            children: [isNarrowScreen && label && _jsx("h1", {
-              ...classes("label"),
-              children: label
-            }), groupedOptions.map((options, index) => _jsx("ul", {
-              ...classes("item-wrapper", {
-                "aligned-grouping": !!alignedGroup,
-                "collapse-mobile": !!collapseMobile,
-                "grouped-options": !!isGroupedOptions
-              }),
-              children: 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 _jsx(ToggleItem, {
-                  id: preid + option.value,
-                  value: option.value,
-                  checked: checked,
-                  onChange: event => handleChange(event, option),
-                  label: option.title,
-                  disabled: option.disabled,
-                  modifiers: itemModifiers
-                }, option.value);
-              })
-            }, index)), _jsx("div", {
-              ...classes("usefilter-wrapper"),
-              children: _jsx(ButtonV2, {
-                variant: "outline",
-                onClick: onClose,
-                children: messages.useFilter
-              })
-            })]
-          })]
-        })]
-      })]
-    });
-  }
-  return _jsxs(_Fragment, {
-    children: [isGroupedOptions && label && _jsx("h2", {
-      ...classes("label", labelModifiers),
-      children: label
-    }), groupedOptions.map((options, index) => _jsxs("section", {
-      ...classes("list", modifiers),
-      children: [!isGroupedOptions && label && _jsx("h1", {
-        ...classes("label", labelModifiers),
-        children: label
-      }), _jsx("ul", {
-        ...classes("item-wrapper"),
-        children: options.map((option, index) => {
-          const itemModifiers = [];
-          const checked = values.some(value => value === option.value);
-          if (!showAll && !checked && !!visibleCount && index + 1 > visibleCount) {
-            itemModifiers.push("hidden");
-          }
-          if (option.noResults) {
-            itemModifiers.push("no-results");
-          }
-          if (option.disabled) {
-            itemModifiers.push("disabled");
-          }
-          return _jsx(ToggleItem, {
-            id: preid + option.value,
-            value: option.value,
-            tabIndex: option.noResults ? -1 : 0,
-            checked: checked,
-            onChange: event => handleChange(event, option),
-            label: option.title,
-            modifiers: itemModifiers,
-            disabled: option.disabled
-          }, option.value);
-        })
-      }), !showAll && _jsx("button", {
-        ...classes("expand"),
-        type: "button",
-        onClick: () => {
-          setVisibleCount(prev => prev === defaultVisibleCount ? options.length : defaultVisibleCount);
-        },
-        children: visibleCount === defaultVisibleCount ? _jsxs(_Fragment, {
-          children: [_jsx("span", {
-            children: showLabel
-          }), " ", _jsx(ChevronDown, {})]
-        }) : _jsxs(_Fragment, {
-          children: [_jsx("span", {
-            children: hideLabel
-          }), " ", _jsx(ChevronUp, {})]
-        })
-      })]
-    }, index))]
-  });
-};
-export default FilterListPhone;

package/es/Filter/filterClasses.js

@@ -1,13 +0,0 @@
-/**
- * Copyright (c) 2018-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 BEMHelper from "react-bem-helper";
-export const classes = new BEMHelper({
-  name: "filter",
-  prefix: "c-"
-});

package/lib/Filter/FilterList.d.ts

@@ -1,32 +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.
- *
- */
-import { ReactNode } from "react";
-interface Props {
-    children?: ReactNode;
-    label?: string;
-    preid?: string;
-    labelNotVisible?: boolean;
-    modifiers?: string;
-    onChange?: Function;
-    options: {
-        title: string;
-        value: string;
-        hits?: number;
-        icon?: ReactNode;
-        noResults?: boolean;
-    }[];
-    values: string[];
-    defaultVisibleCount?: number;
-    showLabel?: string;
-    noFilterSelectedLabel?: string;
-    hideLabel?: string;
-    alignedGroup?: boolean;
-    collapseMobile?: boolean;
-}
-declare const FilterList: ({ modifiers, preid, label, labelNotVisible, options, values, onChange, defaultVisibleCount, showLabel, hideLabel, alignedGroup, collapseMobile, noFilterSelectedLabel, }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
-export default FilterList;

package/lib/Filter/FilterList.js

@@ -1,105 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _common = require("@ndla/icons/common");
-var _filterClasses = require("./filterClasses");
-var _ToggleItem = _interopRequireDefault(require("./ToggleItem"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/**
- * 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.
- *
- */
-
-const FilterList = _ref => {
-  let {
-    modifiers = "",
-    preid = "",
-    label = "FILTER:",
-    labelNotVisible,
-    options,
-    values = [],
-    onChange,
-    defaultVisibleCount,
-    showLabel,
-    hideLabel,
-    alignedGroup,
-    collapseMobile,
-    noFilterSelectedLabel
-  } = _ref;
-  const [visibleCount, setVisibleCount] = (0, _react.useState)(defaultVisibleCount);
-  const showAll = defaultVisibleCount === undefined || options.length <= defaultVisibleCount;
-  const labelModifiers = [];
-  if (labelNotVisible) {
-    labelModifiers.push("hidden");
-  }
-  return (0, _jsxRuntime.jsxs)("section", {
-    ...(0, _filterClasses.classes)("list", modifiers),
-    children: [label && (0, _jsxRuntime.jsx)("h1", {
-      ...(0, _filterClasses.classes)("label", labelModifiers),
-      children: label
-    }), noFilterSelectedLabel && options.length === 0 && (0, _jsxRuntime.jsx)("span", {
-      ...(0, _filterClasses.classes)("no-filter-selected"),
-      children: noFilterSelectedLabel
-    }), (0, _jsxRuntime.jsx)("ul", {
-      ...(0, _filterClasses.classes)("item-wrapper", {
-        "aligned-grouping": !!alignedGroup,
-        "collapse-mobile": !!collapseMobile
-      }),
-      children: options.map((option, index) => {
-        const itemModifiers = [];
-        const checked = values.some(value => value === option.value);
-        if (!showAll && !checked && index + 1 > (visibleCount ?? 0)) {
-          itemModifiers.push("hidden");
-        }
-        const disabled = option.noResults || option.hits === 0;
-        if (disabled) {
-          itemModifiers.push("no-results");
-        }
-        return (0, _jsxRuntime.jsx)(_ToggleItem.default, {
-          modifiers: itemModifiers,
-          id: preid + option.value,
-          value: option.value,
-          disabled: disabled,
-          tabIndex: disabled ? -1 : 0,
-          checked: checked,
-          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);
-            }
-          }
-        }, option.value);
-      })
-    }), !showAll && (0, _jsxRuntime.jsx)("button", {
-      ...(0, _filterClasses.classes)("expand"),
-      type: "button",
-      onClick: () => {
-        setVisibleCount(prev => prev === defaultVisibleCount ? options.length : defaultVisibleCount);
-      },
-      children: visibleCount === defaultVisibleCount ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [(0, _jsxRuntime.jsx)("span", {
-          children: showLabel
-        }), " ", (0, _jsxRuntime.jsx)(_common.ChevronDown, {})]
-      }) : (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [(0, _jsxRuntime.jsx)("span", {
-          children: hideLabel
-        }), " ", (0, _jsxRuntime.jsx)(_common.ChevronUp, {})]
-      })
-    })]
-  });
-};
-var _default = exports.default = FilterList;

package/lib/Filter/FilterListPhone.d.ts

@@ -1,38 +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.
- *
- */
-interface Option {
-    title: string;
-    value: string;
-    noResults?: boolean;
-    disabled?: boolean;
-}
-interface Props {
-    preid: string;
-    label?: string;
-    labelNotVisible?: boolean;
-    modifiers?: string;
-    onChange: (values: string[], value: string) => void;
-    options: Option[] | Option[][];
-    values?: string[];
-    defaultVisibleCount?: number;
-    showLabel?: string;
-    hideLabel?: string;
-    alignedGroup?: boolean;
-    collapseMobile?: boolean;
-    activeFiltersNarrow?: boolean;
-    messages: {
-        useFilter: string;
-        openFilter: string;
-        closeFilter: string;
-    };
-    viewMode?: "inlineDesktop" | "allModal";
-    isGroupedOptions?: boolean;
-    showActiveFiltersOnSmallScreen?: boolean;
-}
-declare const FilterListPhone: ({ preid, label, labelNotVisible, modifiers, onChange, options, values, defaultVisibleCount, showLabel, hideLabel, alignedGroup, collapseMobile, activeFiltersNarrow, messages, viewMode, isGroupedOptions, showActiveFiltersOnSmallScreen, }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
-export default FilterListPhone;