@ndla/ui 50.9.7 → 50.9.9

package/lib/Filter/FilterListPhone.js

@@ -1,229 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
-var _react = require("react");
-var _button = require("@ndla/button");
-var _common = require("@ndla/icons/common");
-var _modal = require("@ndla/modal");
-var _filterClasses = require("./filterClasses");
-var _ToggleItem = _interopRequireDefault(require("./ToggleItem"));
-var _ActiveFilters = _interopRequireDefault(require("../Search/ActiveFilters"));
-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 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] = (0, _react.useState)(false);
-  const [isNarrowScreen, setIsNarrowScreen] = (0, _react.useState)(false);
-  const [visibleCount, setVisibleCount] = (0, _react.useState)(defaultVisibleCount);
-  (0, _react.useEffect)(() => {
-    setScreenSize(true);
-    const debounced = (0, _debounce.default)(() => 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 = (0, _react.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" ? (0, _filterClasses.classes)("narrow-active-filters").className : "";
-    return (0, _jsxRuntime.jsxs)("div", {
-      className: wrapperClassName,
-      children: [currentlyActiveFilters.length > 0 && (0, _jsxRuntime.jsx)(_ActiveFilters.default, {
-        filters: currentlyActiveFilters,
-        showOnSmallScreen: showActiveFiltersOnSmallScreen,
-        onFilterRemove: value => {
-          onChange(values.filter(option => option !== value), value);
-        }
-      }), (0, _jsxRuntime.jsxs)(_modal.Modal, {
-        open: open,
-        onOpenChange: setOpen,
-        children: [(0, _jsxRuntime.jsx)(_modal.ModalTrigger, {
-          children: (0, _jsxRuntime.jsx)(_button.ButtonV2, {
-            variant: "outline",
-            ...(0, _filterClasses.classes)("modal-button"),
-            children: messages.openFilter
-          })
-        }), (0, _jsxRuntime.jsxs)(_modal.ModalContent, {
-          size: "full",
-          children: [(0, _jsxRuntime.jsx)(_modal.ModalHeader, {
-            children: (0, _jsxRuntime.jsxs)("div", {
-              ...(0, _filterClasses.classes)("modal-header"),
-              children: [(0, _jsxRuntime.jsxs)("div", {
-                ...(0, _filterClasses.classes)("modal-heading"),
-                children: [!isNarrowScreen && label && (0, _jsxRuntime.jsx)("h1", {
-                  ...(0, _filterClasses.classes)("label"),
-                  children: label
-                }), (0, _jsxRuntime.jsx)(_button.ButtonV2, {
-                  variant: "outline",
-                  onClick: onClose,
-                  children: messages.useFilter
-                })]
-              }), (0, _jsxRuntime.jsx)(_modal.ModalCloseButton, {
-                title: messages.closeFilter
-              })]
-            })
-          }), (0, _jsxRuntime.jsxs)(_modal.ModalBody, {
-            modifier: "no-side-padding-mobile",
-            children: [isNarrowScreen && label && (0, _jsxRuntime.jsx)("h1", {
-              ...(0, _filterClasses.classes)("label"),
-              children: label
-            }), groupedOptions.map((options, index) => (0, _jsxRuntime.jsx)("ul", {
-              ...(0, _filterClasses.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 (0, _jsxRuntime.jsx)(_ToggleItem.default, {
-                  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)), (0, _jsxRuntime.jsx)("div", {
-              ...(0, _filterClasses.classes)("usefilter-wrapper"),
-              children: (0, _jsxRuntime.jsx)(_button.ButtonV2, {
-                variant: "outline",
-                onClick: onClose,
-                children: messages.useFilter
-              })
-            })]
-          })]
-        })]
-      })]
-    });
-  }
-  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [isGroupedOptions && label && (0, _jsxRuntime.jsx)("h2", {
-      ...(0, _filterClasses.classes)("label", labelModifiers),
-      children: label
-    }), groupedOptions.map((options, index) => (0, _jsxRuntime.jsxs)("section", {
-      ...(0, _filterClasses.classes)("list", modifiers),
-      children: [!isGroupedOptions && label && (0, _jsxRuntime.jsx)("h1", {
-        ...(0, _filterClasses.classes)("label", labelModifiers),
-        children: label
-      }), (0, _jsxRuntime.jsx)("ul", {
-        ...(0, _filterClasses.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 (0, _jsxRuntime.jsx)(_ToggleItem.default, {
-            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 && (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, {})]
-        })
-      })]
-    }, index))]
-  });
-};
-var _default = exports.default = FilterListPhone;

package/lib/Filter/filterClasses.d.ts

@@ -1,9 +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 declare const classes: BEMHelper<BEMHelper.ReturnObject>;

package/lib/Filter/filterClasses.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.classes = void 0;
-var _reactBemHelper = _interopRequireDefault(require("react-bem-helper"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/**
- * 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.
- *
- */
-
-const classes = exports.classes = new _reactBemHelper.default({
-  name: "filter",
-  prefix: "c-"
-});

package/src/Filter/FilterList.tsx

@@ -1,137 +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, useState } from "react";
-import { ChevronDown, ChevronUp } from "@ndla/icons/common";
-
-import { classes } from "./filterClasses";
-import ToggleItem from "./ToggleItem";
-
-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;
-}
-
-const FilterList = ({
-  modifiers = "",
-  preid = "",
-  label = "FILTER:",
-  labelNotVisible,
-  options,
-  values = [],
-  onChange,
-  defaultVisibleCount,
-  showLabel,
-  hideLabel,
-  alignedGroup,
-  collapseMobile,
-  noFilterSelectedLabel,
-}: Props) => {
-  const [visibleCount, setVisibleCount] = useState<number | undefined>(defaultVisibleCount);
-
-  const showAll = defaultVisibleCount === undefined || options.length <= defaultVisibleCount;
-  const labelModifiers = [];
-
-  if (labelNotVisible) {
-    labelModifiers.push("hidden");
-  }
-
-  return (
-    <section {...classes("list", modifiers)}>
-      {label && <h1 {...classes("label", labelModifiers)}>{label}</h1>}
-      {noFilterSelectedLabel && options.length === 0 && (
-        <span {...classes("no-filter-selected")}>{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 > (visibleCount ?? 0)) {
-            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}
-              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={() => {
-            setVisibleCount((prev) => (prev === defaultVisibleCount ? options.length : defaultVisibleCount));
-          }}
-        >
-          {visibleCount === defaultVisibleCount ? (
-            <>
-              <span>{showLabel}</span> <ChevronDown />
-            </>
-          ) : (
-            <>
-              <span>{hideLabel}</span> <ChevronUp />
-            </>
-          )}
-        </button>
-      )}
-    </section>
-  );
-};
-
-export default FilterList;

package/src/Filter/FilterListPhone.tsx

@@ -1,278 +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 { ChangeEvent, 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";
-
-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;
-}
-
-const is2DArray = (options: Option[] | Option[][]): options is Option[][] => {
-  return Array.isArray(options[0]);
-};
-
-const FilterListPhone = ({
-  preid,
-  label,
-  labelNotVisible,
-  modifiers = "",
-  onChange,
-  options,
-  values = [],
-  defaultVisibleCount,
-  showLabel,
-  hideLabel,
-  alignedGroup = false,
-  collapseMobile = true,
-  activeFiltersNarrow,
-  messages,
-  viewMode = "inlineDesktop",
-  isGroupedOptions,
-  showActiveFiltersOnSmallScreen,
-}: Props) => {
-  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 = (initial = 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: ChangeEvent<HTMLInputElement>, option: 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: string[] = [];
-
-  if (labelNotVisible) {
-    labelModifiers.push("hidden");
-  }
-
-  const groupedOptions = is2DArray(options) ? options : [options];
-
-  if (isNarrowScreen || viewMode === "allModal") {
-    let currentlyActiveFilters: Option[] = [];
-    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 open={open} onOpenChange={setOpen}>
-          <ModalTrigger>
-            <ButtonV2 variant="outline" {...classes("modal-button")}>
-              {messages.openFilter}
-            </ButtonV2>
-          </ModalTrigger>
-          <ModalContent size="full">
-            <ModalHeader>
-              <div {...classes("modal-header")}>
-                <div {...classes("modal-heading")}>
-                  {!isNarrowScreen && label && <h1 {...classes("label")}>{label}</h1>}
-                  <ButtonV2 variant="outline" onClick={onClose}>
-                    {messages.useFilter}
-                  </ButtonV2>
-                </div>
-                <ModalCloseButton title={messages.closeFilter} />
-              </div>
-            </ModalHeader>
-            <ModalBody modifier="no-side-padding-mobile">
-              {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) => handleChange(event, option)}
-                        label={option.title}
-                        disabled={option.disabled}
-                        modifiers={itemModifiers}
-                      />
-                    );
-                  })}
-                </ul>
-              ))}
-
-              <div {...classes("usefilter-wrapper")}>
-                <ButtonV2 variant="outline" onClick={onClose}>
-                  {messages.useFilter}
-                </ButtonV2>
-              </div>
-            </ModalBody>
-          </ModalContent>
-        </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 && !!visibleCount && index + 1 > 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) => handleChange(event, option)}
-                  label={option.title}
-                  modifiers={itemModifiers}
-                  disabled={option.disabled}
-                />
-              );
-            })}
-          </ul>
-          {!showAll && (
-            <button
-              {...classes("expand")}
-              type="button"
-              onClick={() => {
-                setVisibleCount((prev) => (prev === defaultVisibleCount ? options.length : defaultVisibleCount));
-              }}
-            >
-              {visibleCount === defaultVisibleCount ? (
-                <>
-                  <span>{showLabel}</span> <ChevronDown />
-                </>
-              ) : (
-                <>
-                  <span>{hideLabel}</span> <ChevronUp />
-                </>
-              )}
-            </button>
-          )}
-        </section>
-      ))}
-    </>
-  );
-};
-
-export default FilterListPhone;