@ndla/ui 51.0.0 → 52.0.0

package/src/CompetenceGoalTab/CoreElementItem.tsx

@@ -1,39 +0,0 @@
-/**
- * Copyright (c) 2023-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 { useTranslation } from "react-i18next";
-import SearchButton from "./SearchButton";
-import { GoalItem, GoalList, GoalText, GoalsHeading, ListItemContent } from "./styles";
-import { CoreElementsItemType } from "../types";
-
-const CoreElementItem = ({ title, text, url, id, isOembed }: CoreElementsItemType) => {
-  const { t } = useTranslation();
-  return (
-    <GoalItem>
-      <GoalsHeading>{title}</GoalsHeading>
-      <GoalList>
-        <li>
-          <ListItemContent>
-            <GoalText>{text}</GoalText>
-            {url && (
-              <SearchButton
-                url={url}
-                isOembed={isOembed}
-                searchText={t("competenceGoals.coreResourceSearchText", {
-                  code: id,
-                })}
-              />
-            )}
-          </ListItemContent>
-        </li>
-      </GoalList>
-    </GoalItem>
-  );
-};
-
-export default CoreElementItem;

package/src/CompetenceGoalTab/SearchButton.tsx

@@ -1,50 +0,0 @@
-/**
- * Copyright (c) 2023-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 styled from "@emotion/styled";
-import { spacing, mq, breakpoints } from "@ndla/core";
-import { Search } from "@ndla/icons/common";
-import { SafeLinkButton } from "@ndla/safelink";
-
-const StyledSearch = styled(Search)`
-  height: ${spacing.normal};
-  width: ${spacing.normal};
-  min-width: ${spacing.normal};
-`;
-
-const GoalSearchWrapper = styled.div`
-  margin-left: ${spacing.normal};
-  flex: 0 0 30%;
-  span {
-    text-align: left;
-  }
-
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    margin-left: 0;
-    margin-top: ${spacing.normal};
-    flex-basis: auto;
-  }
-`;
-
-interface SearchButtonProps {
-  url: string;
-  searchText: string;
-  isOembed?: boolean;
-}
-
-const SearchButton = ({ url, isOembed, searchText }: SearchButtonProps) => {
-  return (
-    <GoalSearchWrapper>
-      <SafeLinkButton variant="outline" to={url} target={isOembed ? "_blank" : "_self"}>
-        <StyledSearch size="normal" />
-        <span>{searchText}</span>
-      </SafeLinkButton>
-    </GoalSearchWrapper>
-  );
-};
-export default SearchButton;

package/src/CompetenceGoalTab/index.ts

@@ -1,10 +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 CompetenceGoalTab from "./CompetenceGoalTab";
-export default CompetenceGoalTab;

package/src/CompetenceGoalTab/styles.ts

@@ -1,37 +0,0 @@
-/**
- * Copyright (c) 2023-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 styled from "@emotion/styled";
-import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
-
-export const ListItemContent = styled.div`
-  display: flex;
-  justify-content: space-between;
-  ${fonts.sizes("22px", "32px")};
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    flex-direction: column;
-  }
-`;
-
-export const GoalItem = styled.li`
-  margin: ${spacing.medium} 0;
-  border-bottom: 1px solid ${colors.brand.neutral7};
-  padding: 0;
-`;
-
-export const GoalsHeading = styled.h3`
-  margin-top: 0;
-`;
-
-export const GoalList = styled.ul`
-  padding: 0;
-`;
-
-export const GoalText = styled.p`
-  margin: 0;
-`;

package/src/Figure/component.figure.scss

@@ -1,60 +0,0 @@
-/**
-** FIGURE
-** Figure element, displaying images, embeds, videos etc.
-** 1. Figure itself
-** 2. Figcaption element w/content
-**
-** PRINCIPLE:
-** <figure class="c-figure">
-**   <div class="c-figure__img">
-**      <img>
-**   </div>
-**   <figcaption class="c-figure__caption">
-**       <div class="c-figure__info">Caption</div>
-**       <div class="c-figure__byline">License, CTA</div>
-**   </figcaption>
-** </figure>
-**/
-
-/* 1. */
-
-.c-figure {
-  img {
-    width: 100%;
-  }
-  iframe {
-    display: block;
-    border: 0;
-  }
-
-  > * {
-    max-width: 100%;
-    border: 0;
-  }
-}
-.c-figure {
-  // display: flex; // TODO: Makes h5p-iframes appear small and not fullsize
-  margin: $spacing 0 $spacing;
-  position: relative;
-  width: 100%;
-  transition:
-    transform 0.4s,
-    width 0.4s,
-    height 0.4s;
-
-  &--full-column {
-    left: auto !important;
-    right: auto !important;
-    width: auto !important;
-    padding-left: 0;
-    padding-right: 0;
-    padding-bottom: $spacing--large;
-    margin-bottom: 0;
-  }
-  &--left {
-    float: left;
-  }
-  &--right {
-    float: right;
-  }
-}

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;