@ndla/ui 51.0.0 → 53.0.0

package/src/Filter/FilterButtons.tsx

@@ -1,199 +0,0 @@
-/**
- * Copyright (c) 2021-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 { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
-import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
-import { Cross as CrossIcon, Plus as PlusIcon } from "@ndla/icons/action";
-import { ModalHeader, ModalBody, ModalCloseButton, Modal, ModalTrigger, ModalContent } from "@ndla/modal";
-import FilterCarousel from "./FilterCarousel";
-import ToggleItem from "./ToggleItem";
-
-const StyledHeading = styled.h3`
-  ${fonts.sizes("16px", "32px")};
-  margin: 0 0 ${spacing.small};
-  color: ${colors.text.light};
-  font-weight: ${fonts.weight.semibold};
-`;
-
-const StyledButtonsWrapper = styled.div`
-  display: inline-flex;
-  flex-wrap: wrap;
-`;
-
-const StyledButtonElementWrapper = styled.div`
-  margin: 0 ${spacing.xsmall} ${spacing.xsmall} 0;
-  break-inside: avoid;
-  flex-shrink: 0;
-`;
-
-const StyledList = styled.ul`
-  list-style: none;
-  padding: 0;
-  ${mq.range({ from: breakpoints.tablet })} {
-    column-count: 2;
-    column-gap: 20px;
-  }
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    column-count: 3;
-    column-gap: 20px;
-  }
-`;
-const StyledListItem = styled.li`
-  padding-bottom: 0;
-  break-inside: avoid;
-`;
-
-const StyledButtonContent = styled.span``;
-
-const StyledButtonContentSelected = styled.span`
-  margin-left: ${spacing.small};
-  display: inline-flex;
-  align-items: center;
-`;
-
-const StyledRemoveWrapper = styled.div`
-  margin-top: ${spacing.xsmall};
-  margin-left: 10px;
-`;
-
-const ButtonRemoveText = styled.span`
-  ${fonts.sizes("16px", "32px")};
-  font-weight: ${fonts.weight.semibold};
-`;
-
-export type ItemProps = {
-  label: string;
-  value: string;
-  selected?: boolean;
-};
-export type FilterButtonsProps = {
-  heading?: string;
-  items: ItemProps[];
-  onFilterToggle: (value: string) => void;
-  onRemoveAllFilters: () => void;
-  labels: {
-    openFilter: string;
-  };
-};
-
-export const FilterButtons = ({ heading, items, onFilterToggle, onRemoveAllFilters, labels }: FilterButtonsProps) => {
-  const { t } = useTranslation();
-  const [isNarrowScreen, setIsNarrowScreen] = useState(false);
-
-  useEffect(() => {
-    const isNarrowScreenMatch = window.matchMedia("(max-width: 767px)");
-    const handleChange = (e: MediaQueryListEvent | MediaQueryList) => {
-      setIsNarrowScreen(e.matches);
-    };
-    isNarrowScreenMatch.addEventListener("change", handleChange);
-    handleChange(isNarrowScreenMatch);
-    return () => {
-      isNarrowScreenMatch.removeEventListener("change", handleChange);
-    };
-  }, []);
-
-  const hasSelectedFilters = items.some((item) => {
-    return item.selected;
-  });
-
-  const activeItems = items.filter((item) => item.selected);
-
-  return (
-    <>
-      {isNarrowScreen && (
-        <StyledButtonsWrapper>
-          {activeItems.map((item: ItemProps) => (
-            <StyledButtonElementWrapper key={item.value}>
-              <ButtonV2
-                size="normal"
-                shape="pill"
-                onClick={() => {
-                  onFilterToggle(item.value);
-                }}
-              >
-                <StyledButtonContent>{item.label}</StyledButtonContent>
-                <StyledButtonContentSelected>
-                  <CrossIcon />
-                </StyledButtonContentSelected>
-              </ButtonV2>
-            </StyledButtonElementWrapper>
-          ))}
-          <Modal aria-label={t("searchPage.searchFilterMessages.resourceTypeFilter.button")}>
-            <StyledButtonElementWrapper>
-              <ModalTrigger>
-                <ButtonV2 colorTheme="light" size="normal" shape="pill">
-                  <StyledButtonContent>{labels.openFilter}</StyledButtonContent>
-                  <StyledButtonContentSelected>
-                    <PlusIcon />
-                  </StyledButtonContentSelected>
-                </ButtonV2>
-              </ModalTrigger>
-            </StyledButtonElementWrapper>
-            <ModalContent size="full" animation="subtle">
-              <ModalHeader>
-                <h1>{heading}</h1>
-                <ModalCloseButton />
-              </ModalHeader>
-              <ModalBody modifier="slide-in-left">
-                <StyledList>
-                  {items.map((item: ItemProps) => (
-                    <StyledListItem key={item.value}>
-                      <ToggleItem
-                        id={item.value}
-                        value={item.value}
-                        checked={item.selected}
-                        label={item.label}
-                        component="div"
-                        onChange={() => onFilterToggle(item.value)}
-                      />
-                    </StyledListItem>
-                  ))}
-                </StyledList>
-              </ModalBody>
-            </ModalContent>
-          </Modal>
-        </StyledButtonsWrapper>
-      )}
-      {!isNarrowScreen && (
-        <>
-          {heading && <StyledHeading>{heading}</StyledHeading>}
-          <FilterCarousel>
-            {items.map((item: ItemProps) => (
-              <StyledButtonElementWrapper key={item.value}>
-                <ButtonV2
-                  size="normal"
-                  colorTheme={!item.selected ? "greyLighter" : undefined}
-                  shape="pill"
-                  onClick={() => onFilterToggle(item.value)}
-                >
-                  <StyledButtonContent>{item.label}</StyledButtonContent>
-                  {item.selected && (
-                    <StyledButtonContentSelected>
-                      <CrossIcon />
-                    </StyledButtonContentSelected>
-                  )}
-                </ButtonV2>
-              </StyledButtonElementWrapper>
-            ))}
-          </FilterCarousel>
-          <StyledRemoveWrapper>
-            {hasSelectedFilters && (
-              <ButtonV2 variant="link" onClick={onRemoveAllFilters}>
-                <ButtonRemoveText>{t(`filterButtons.removeAllFilters`)}</ButtonRemoveText>
-              </ButtonV2>
-            )}
-          </StyledRemoveWrapper>
-        </>
-      )}
-    </>
-  );
-};
-
-export default FilterButtons;

package/src/Filter/FilterCarousel.tsx

@@ -1,172 +0,0 @@
-/**
- * Copyright (c) 2021-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 { ReactChild, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { useSwipeable } from "react-swipeable";
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { stackOrder } from "@ndla/core";
-import { ChevronLeft, ChevronRight } from "@ndla/icons/common";
-
-interface Props {
-  children: ReactChild[];
-}
-
-const Carousel = styled.div`
-  overflow-x: hidden;
-  position: relative;
-  margin: 0 13px;
-`;
-
-const Inner = styled.div`
-  flex-wrap: nowrap;
-  transition: transform 0.3s;
-  display: inline-flex;
-  padding: 8px 0;
-`;
-
-const NavButton = styled("button")<{
-  alignRight?: boolean;
-}>`
-  box-sizing: border-box;
-  width: 48px;
-  height: 48px;
-  background-color: #fff;
-  border: none;
-  box-shadow: none;
-  border-radius: 100px;
-  transition:
-    opacity 0.5s ease,
-    transform 0.5s ease;
-  transform: translate(0px, 0px, 1);
-  position: absolute;
-  bottom: 0;
-  top: 4px;
-  z-index: ${stackOrder.trigger};
-  left: 3px;
-
-  svg {
-    color: #20588f;
-  }
-
-  &:hover {
-    box-shadow: 0 0 4px rgba(0, 0, 0, 0.24);
-    cursor: pointer;
-  }
-
-  ${(props) =>
-    props.alignRight &&
-    `
-        right: 2px;
-        left: unset;
-
-    `}
-`;
-
-const handlerWrapperCSS = css`
-  position: relative;
-  max-width: 100%;
-  overflow-x: hidden;
-`;
-
-const FilterCarousel = ({ children }: Props) => {
-  const { t } = useTranslation();
-  const [hideNext, setHideNext] = useState(false);
-  const [translateX, setTranslateX] = useState(0);
-  const carouselRef: { current: HTMLDivElement | null } = useRef(null);
-  const innerRef: { current: HTMLDivElement | null } = useRef(null);
-
-  // Check if we need to show the nav buttons
-  const showButtons = () => {
-    if (carouselRef.current && innerRef.current) {
-      const carouselWidth = carouselRef.current.offsetWidth || 0;
-      const innerWidth = innerRef.current.scrollWidth;
-      if (innerWidth <= carouselWidth) {
-        setHideNext(true);
-      } else {
-        setHideNext(false);
-      }
-    } else {
-      setHideNext(true);
-    }
-  };
-
-  useLayoutEffect(() => {
-    showButtons();
-  }, [children]);
-
-  useEffect(() => {
-    const resetTranslateX = () => {
-      setTranslateX(0);
-      showButtons();
-    };
-    window.addEventListener("resize", resetTranslateX);
-    return () => window.removeEventListener("resize", resetTranslateX);
-  }, []);
-
-  const updateIndex = (direction: string) => {
-    const carousel = carouselRef.current;
-    const inner = innerRef.current;
-    if (carousel && inner) {
-      const carouselWidth = carousel.offsetWidth;
-      const innerWidth = inner.scrollWidth;
-      if (direction === "NEXT") {
-        // If we cannot move more than one carouselWidth then just adjust to show all of the concealed items
-        if (carouselWidth + translateX + carouselWidth > innerWidth) {
-          const newOffset = innerWidth - carouselWidth;
-          setTranslateX(translateX + newOffset);
-          setHideNext(true);
-        } else {
-          if (hideNext) {
-            setHideNext(false);
-          }
-          setTranslateX(translateX + carouselWidth);
-        }
-      } else {
-        if (translateX - carouselWidth > 0) {
-          setTranslateX(translateX - carouselWidth);
-        } else {
-          setTranslateX(0);
-        }
-        if (hideNext) {
-          setHideNext(false);
-        }
-      }
-    }
-  };
-
-  const handlers = useSwipeable({
-    onSwipedLeft: () => updateIndex("NEXT"),
-    onSwipedRight: () => updateIndex("PREV"),
-    preventScrollOnSwipe: false,
-    trackMouse: true,
-  });
-
-  return (
-    <div {...handlers} css={handlerWrapperCSS}>
-      <Carousel ref={carouselRef}>
-        <Inner ref={innerRef} style={{ transform: `translateX(-${translateX}px)` }}>
-          {children}
-        </Inner>
-      </Carousel>
-      {!hideNext && (
-        <NavButton title={t("carousel.forward")} onClick={() => updateIndex("NEXT")} alignRight>
-          <ChevronRight style={{ width: "18px", height: "18px" }} aria-hidden title="" />
-        </NavButton>
-      )}
-      {translateX >= 1 && (
-        <NavButton title={t("carousel.back")} onClick={() => updateIndex("PREV")}>
-          <ChevronLeft style={{ width: "18px", height: "18px" }} aria-hidden title="" />
-        </NavButton>
-      )}
-    </div>
-  );
-};
-
-export default FilterCarousel;

package/src/Filter/ToggleItem.tsx

@@ -1,180 +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 { ChangeEvent, ElementType } from "react";
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { breakpoints, colors, fonts, misc, mq, spacing, stackOrder } from "@ndla/core";
-
-interface Props {
-  id: string;
-  label: string;
-  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-  checked?: boolean;
-  disabled?: boolean;
-  tabIndex?: number;
-  value?: string;
-  component?: ElementType;
-  hits?: number;
-}
-
-const StyledText = styled.span`
-  flex-grow: 1;
-  z-index: ${stackOrder.offsetDouble};
-`;
-
-const StyledInput = styled.input`
-  position: absolute;
-  opacity: 0;
-  z-index: ${stackOrder.trigger};
-  cursor: pointer;
-
-  &:checked {
-    & + label [data-checkbox] {
-      border: 2px solid ${colors.brand.primary};
-      background: ${colors.brand.primary};
-      ::before {
-        background: white;
-        width: 5px;
-      }
-      ::after {
-        background: white;
-        width: 10px;
-      }
-    }
-  }
-`;
-
-const StyledItemCheckbox = styled.span`
-  content: "";
-  display: inline-block;
-  position: relative;
-  width: ${spacing.normal};
-  height: ${spacing.normal};
-  padding: 0;
-  background: ${colors.white};
-  border: 2px solid ${colors.brand.tertiary};
-  margin: 2px ${spacing.small} 2px 3px;
-  border-radius: 2px;
-  flex-shrink: 0;
-  ${mq.range({ from: breakpoints.tablet })} {
-    width: 20px;
-    height: 20px;
-    margin: 4px ${spacing.small} 4px 3px;
-  }
-  &::before {
-    content: "";
-    width: 0px;
-    height: 2px;
-    border-radius: 2px;
-    background: ${colors.brand.tertiary};
-    position: absolute;
-    transform: rotate(45deg);
-    top: 10px;
-    left: 7px;
-    ${mq.range({ from: breakpoints.tablet })} {
-      top: 8px;
-      left: 5px;
-    }
-    transition: width 50ms ease 50ms;
-    transform-origin: 0% 0%;
-  }
-
-  &::after {
-    content: "";
-    width: 0;
-    height: 2px;
-    border-radius: 2px;
-    background: ${colors.brand.tertiary};
-    position: absolute;
-    transform: rotate(305deg);
-    top: 13px;
-    left: 8px;
-
-    ${mq.range({ from: breakpoints.tablet })} {
-      top: 11px;
-      left: 6px;
-    }
-    transition: width 50ms ease;
-    transform-origin: 0% 0%;
-  }
-`;
-
-const toggleItemCss = css`
-  display: inline-block;
-  position: relative;
-  margin: 0 ${spacing.small} 0 2px;
-  color: ${colors.brand.primary};
-  border-radius: ${misc.borderRadius};
-  transition: all 0.2s cubic-bezier(0.17, 0.04, 0.03, 0.94);
-  cursor: pointer;
-  ${fonts.sizes("16px", "18px")};
-
-  &:hover {
-    [data-checkbox] {
-      border: 2px solid ${colors.brand.tertiary};
-    }
-    [data-checkbox]::before {
-      width: 5px;
-      transition: width 100ms ease;
-    }
-
-    [data-checkbox]::after {
-      width: 10px;
-      transition: width 150ms ease 100ms;
-    }
-  }
-  label {
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    ${mq.range({ until: breakpoints.tabletWide })} {
-      width: 100%;
-    }
-    ${mq.range({ until: breakpoints.mobileWide })} {
-      width: 100%;
-      padding: $spacing--xsmall 0;
-      justify-content: space-between;
-      min-height: 52px;
-      align-items: center;
-    }
-  }
-`;
-
-const ToggleItem = ({
-  id,
-  checked = false,
-  label,
-  component: Component = "li",
-  onChange,
-  tabIndex,
-  value,
-  disabled,
-  hits,
-}: Props) => (
-  <Component css={toggleItemCss}>
-    <StyledInput
-      type="checkbox"
-      id={id}
-      value={value}
-      disabled={disabled}
-      tabIndex={tabIndex}
-      checked={checked}
-      onChange={onChange}
-    />
-    <label htmlFor={id}>
-      <StyledItemCheckbox data-checkbox="" />
-      <StyledText>
-        {label}
-        {hits !== undefined && ` (${hits})`}
-      </StyledText>
-    </label>
-  </Component>
-);
-
-export default ToggleItem;

package/src/Filter/index.ts

@@ -1,10 +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.
- *
- */
-
-export { default as ToggleItem } from "./ToggleItem";
-export { default as FilterButtons } from "./FilterButtons";