@ndla/ui 55.0.15-alpha.0 → 55.0.17-alpha.0

package/src/Logo/index.ts

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

package/src/Messages/MessageBanner.stories.tsx

@@ -1,31 +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 { Meta, StoryFn } from "@storybook/react";
-import MessageBanner from "./MessageBanner";
-
-/**
- * Brukes i toppen av nettleseren når noe trenger mye oppmerksomhet globalt i systemet.
- */
-export default {
-  title: "Patterns/MessageBanner",
-  component: MessageBanner,
-  tags: ["autodocs"],
-  parameters: {
-    inlineStories: true,
-  },
-  args: {
-    showCloseButton: true,
-  },
-} as Meta<typeof MessageBanner>;
-
-export const Default: StoryFn<typeof MessageBanner> = ({ ...args }) => {
-  const { t } = useTranslation();
-  return <MessageBanner {...args}>{t("messageBoxInfo.updateBrowser")}</MessageBanner>;
-};

package/src/Messages/MessageBanner.tsx

@@ -1,67 +0,0 @@
-/**
- * Copyright (c) 2022-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";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { IconButtonV2 } from "@ndla/button";
-import { colors, spacing } from "@ndla/core";
-import { Cross } from "@ndla/icons/action";
-
-interface WrapperProps {
-  small?: boolean;
-}
-
-const MessageBannerWrapper = styled.div<WrapperProps>`
-  display: grid;
-  grid-template-areas: ". content closebutton";
-  grid-template-columns: minmax(30px, 1fr) minmax(0, auto) minmax(30px, 1fr);
-  padding: ${({ small }) => (small ? spacing.xxsmall : spacing.small)};
-  background: ${colors.support.yellowLight};
-  color: ${colors.brand.greyDark};
-  border-bottom: solid 1px ${colors.white};
-`;
-
-const TextWrapper = styled.div`
-  display: flex;
-  grid-area: content;
-  align-items: center;
-  & p {
-    margin: 0;
-  }
-`;
-
-const StyledClosebutton = styled(IconButtonV2)`
-  grid-area: closebutton;
-  padding: 0;
-  justify-self: flex-end;
-  align-self: flex-start;
-`;
-
-interface Props {
-  small?: boolean;
-  children?: ReactNode;
-  showCloseButton?: boolean;
-  onClose?: () => void;
-}
-
-const MessageBanner = ({ children, onClose, showCloseButton, small }: Props) => {
-  const { t } = useTranslation();
-  return (
-    <MessageBannerWrapper small={small}>
-      <TextWrapper>{children}</TextWrapper>
-      {showCloseButton && (
-        <StyledClosebutton onClick={onClose} variant="ghost" aria-label={t("close")} title={t("close")}>
-          <Cross />
-        </StyledClosebutton>
-      )}
-    </MessageBannerWrapper>
-  );
-};
-
-export default MessageBanner;

package/src/Search/ActiveFilterContent.tsx

@@ -1,64 +0,0 @@
-/**
- * Copyright (c) 2019-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 { forwardRef } from "react";
-import styled from "@emotion/styled";
-import { spacing, mq, breakpoints, colors, misc, fonts } from "@ndla/core";
-import { Cross } from "@ndla/icons/action";
-
-const StyledActiveFilter = styled("button")`
-  height: 38px;
-  border: 0;
-  background: ${colors.brand.light};
-  color: ${colors.brand.dark};
-  border-radius: ${misc.borderRadius};
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  padding: 0 ${spacing.small};
-  width: 100%;
-  justify-content: space-between;
-  ${fonts.sizes("16px", "36px")};
-  font-weight: ${fonts.weight.semibold};
-
-  ${mq.range({ from: breakpoints.desktop })} {
-    width: auto;
-    justify-content: flex-start;
-    ${fonts.sizes("18px", "40px")};
-    height: 40px;
-  }
-`;
-
-export const StyledActiveFilterTitle = styled("span")`
-  white-space: nowrap;
-  padding-right: ${spacing.small};
-`;
-
-interface Props {
-  filter: {
-    value: string;
-    title: string;
-    filterName?: string;
-  };
-  onFilterRemove: (value: string, filterName?: string) => void;
-  ariaLabel: string;
-}
-
-const ActiveFilterContent = forwardRef<HTMLButtonElement, Props>(({ filter, onFilterRemove, ariaLabel }, ref) => (
-  <StyledActiveFilter
-    aria-label={ariaLabel}
-    type="button"
-    ref={ref}
-    onClick={() => onFilterRemove(filter.value, filter.filterName)}
-  >
-    <StyledActiveFilterTitle>{filter.title}</StyledActiveFilterTitle>
-    <Cross />
-  </StyledActiveFilter>
-));
-
-export default ActiveFilterContent;

package/src/Search/ActiveFilters.tsx

@@ -1,145 +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 { useTranslation } from "react-i18next";
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { spacing, mq, breakpoints } from "@ndla/core";
-import { Tooltip } from "@ndla/tooltip";
-import ActiveFilterContent, { StyledActiveFilterTitle } from "./ActiveFilterContent";
-
-interface StyledActiveFiltersProps {
-  showOnSmallScreen?: boolean;
-  filterLength?: number;
-}
-
-const StyledActiveFilters = styled("ul")<StyledActiveFiltersProps>`
-  margin: 0;
-  padding: 0;
-  flex-direction: column;
-  align-items: stretch;
-  flex-wrap: wrap;
-  display: none;
-
-  ${({ showOnSmallScreen }) =>
-    showOnSmallScreen &&
-    css`
-      ${mq.range({ until: breakpoints.desktop })} {
-        display: flex;
-      }
-    `}
-
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    ${StyledActiveFilterTitle} {
-      ${({ filterLength }) =>
-        filterLength &&
-        filterLength >= 2 &&
-        css`
-          text-overflow: ellipsis;
-          overflow: hidden;
-          padding-right: ${spacing.small};
-          display: block;
-        `}
-
-      ${({ filterLength }) =>
-        filterLength &&
-        filterLength === 2 &&
-        css`
-          max-width: 90px;
-        `}
-
-    ${({ filterLength }) =>
-        filterLength &&
-        filterLength > 2 &&
-        css`
-          max-width: 70px;
-        `}
-    }
-  }
-`;
-
-const StyledActiveFilterWrapper = styled("li")`
-  list-style: none;
-  display: flex;
-
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    padding: 0 ${spacing.small} 0 0;
-
-    &:last-of-type {
-      padding-right: 0;
-    }
-  }
-`;
-
-const getFilterLength = (filters: Filter[]) =>
-  filters.filter((filter) => filter.filterName === "filter_subjects" && filter.title).length;
-
-interface Filter {
-  title: string;
-  value: string;
-  filterName?: string;
-}
-
-interface Props {
-  filters: Filter[];
-  onFilterRemove: (value: string, filterName?: string) => void;
-  showOnSmallScreen?: boolean;
-}
-
-const ActiveFilters = ({ filters, onFilterRemove, showOnSmallScreen }: Props) => {
-  const { t } = useTranslation();
-  if (filters && filters.length > 0) {
-    const filterLength = getFilterLength(filters);
-
-    const filterItems = filters.map((filter) => {
-      const filterKey = filter.filterName ? `${filter.filterName}${filter.value}` : filter.value;
-
-      return (
-        <StyledActiveFilterWrapper key={filterKey}>
-          {filterLength > 1 ? (
-            <Tooltip
-              tooltip={t("searchPage.searchFilterMessages.removeFilter", {
-                filterName: filter.title,
-              })}
-            >
-              <ActiveFilterContent
-                filter={filter}
-                ariaLabel={t("searchPage.searchFilterMessages.removeFilter", {
-                  filterName: filter.title,
-                })}
-                onFilterRemove={onFilterRemove}
-              />
-            </Tooltip>
-          ) : (
-            <ActiveFilterContent
-              filter={filter}
-              onFilterRemove={onFilterRemove}
-              ariaLabel={t("searchPage.searchFilterMessages.removeFilter", {
-                filterName: filter.title,
-              })}
-            />
-          )}
-        </StyledActiveFilterWrapper>
-      );
-    });
-
-    return (
-      <StyledActiveFilters showOnSmallScreen={showOnSmallScreen} filterLength={filterLength}>
-        {filterItems}
-      </StyledActiveFilters>
-    );
-  }
-
-  return null;
-};
-
-export default ActiveFilters;

package/src/Search/ContentTypeResult.tsx

@@ -1,190 +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.
- *
- */
-
-/** @jsxImportSource @emotion/react */
-import { ReactElement, useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
-import { Additional, ChevronDown, ChevronUp } from "@ndla/icons/common";
-import { SafeLink } from "@ndla/safelink";
-import { Tooltip } from "@ndla/tooltip";
-import {
-  highlightStyle,
-  noWidthhighlightStyle,
-  showAllButtonStyle,
-  StyledHeader,
-  StyledList,
-  StyledListItem,
-  StyledNoHit,
-  StyledTag,
-  StyledWrapper,
-} from "./ContentTypeResultStyles";
-import { isPathToHighlight } from "./IsPathToHighlight";
-import ContentTypeBadge from "../ContentTypeBadge";
-import { ContentTypeResultType, Resource } from "../types";
-
-const renderAdditionalIcon = (label: string, isAdditional?: boolean): ReactElement | null => {
-  if (isAdditional && label) {
-    return (
-      <Tooltip tooltip={label}>
-        <div>
-          <Additional size="medium" aria-hidden={false} />
-        </div>
-      </Tooltip>
-    );
-  }
-  if (isAdditional) {
-    return <Additional size="medium" />;
-  }
-  return null;
-};
-
-type Props = {
-  contentTypeResult: ContentTypeResultType;
-  onNavigate?: VoidFunction;
-  defaultCount?: number;
-  resourceToLinkProps: (resource: Resource) => {
-    to: string;
-  };
-  showAdditionalResources?: boolean;
-  messages: {
-    allResultLabel?: string;
-    showLessResultLabel?: string;
-    noHit: string;
-  };
-  ignoreContentTypeBadge?: boolean;
-  keyboardPathNavigation?: HTMLElement | string | null;
-  inMenu?: boolean;
-  animateList?: number;
-  unGrouped?: boolean;
-};
-
-const StyledSafeLink = styled(SafeLink)`
-  &[data-highlighted="true"] {
-    ${highlightStyle}
-  }
-`;
-
-const ContentTypeResult = ({
-  contentTypeResult,
-  onNavigate,
-  defaultCount,
-  resourceToLinkProps,
-  showAdditionalResources,
-  messages,
-  ignoreContentTypeBadge,
-  keyboardPathNavigation,
-  inMenu,
-  animateList,
-  unGrouped,
-}: Props) => {
-  const { t } = useTranslation();
-  const [showAll, toggleShowAll] = useState(false);
-  const showAllRef = useRef<HTMLLIElement>(null);
-
-  const results =
-    showAdditionalResources || !contentTypeResult.resources
-      ? contentTypeResult.resources
-      : contentTypeResult.resources.filter((items) => !items.additional);
-
-  const resources = showAll || !defaultCount ? results : results.slice(0, defaultCount);
-
-  const displayShowAllButton = defaultCount && results.length > defaultCount;
-  const shouldHighlightShowAllButton = showAllRef.current === keyboardPathNavigation;
-
-  useEffect(() => {
-    if (showAll && showAllRef.current) {
-      showAllRef.current.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest",
-      });
-    }
-  }, [showAll]);
-
-  return (
-    <StyledWrapper>
-      {!unGrouped && (
-        <StyledHeader>
-          {!ignoreContentTypeBadge && contentTypeResult.contentType && (
-            <ContentTypeBadge type={contentTypeResult.contentType} size="x-small" background border />
-          )}
-          <h1>
-            {contentTypeResult.title} <small>({results.length})</small>
-          </h1>
-        </StyledHeader>
-      )}
-      {resources.length > 0 ? (
-        <StyledList inMenu={inMenu} animateList={animateList} unGrouped={unGrouped}>
-          {resources.map((resource) => {
-            const { path, name, resourceTypes, subject, additional } = resource;
-
-            const linkProps = resourceToLinkProps(resource);
-            const linkContent = (
-              <>
-                <strong>{name}</strong>
-                {!inMenu && subject && <small>{subject}</small>}
-                {!inMenu &&
-                  resourceTypes &&
-                  resourceTypes.map((type) => <StyledTag key={type.name}>{type.name}</StyledTag>)}
-              </>
-            );
-            const delayAnimation = !!animateList && !!additional && animateList > 0 && !!showAdditionalResources;
-
-            // Figure out highlighting by comparing path of link with keyboard navigated anchor
-            const anchor =
-              keyboardPathNavigation instanceof HTMLElement && keyboardPathNavigation
-                ? keyboardPathNavigation.querySelector("a")
-                : undefined;
-            const anchorHref = anchor?.getAttribute("href") ?? null;
-            const shouldHighlight = isPathToHighlight(path, anchorHref);
-
-            return (
-              <StyledListItem key={path} delayAnimation={delayAnimation}>
-                <StyledSafeLink
-                  data-highlighted={shouldHighlight || false}
-                  {...linkProps}
-                  onClick={() => {
-                    if (onNavigate) {
-                      onNavigate();
-                    }
-                  }}
-                >
-                  {unGrouped && !ignoreContentTypeBadge && (
-                    <ContentTypeBadge type={resource.contentType ?? ""} size="x-small" background border />
-                  )}
-                  {linkContent}
-                  {renderAdditionalIcon(t("resource.additionalTooltip"), additional)}
-                </StyledSafeLink>
-              </StyledListItem>
-            );
-          })}
-          {displayShowAllButton && (
-            <StyledListItem ref={showAllRef}>
-              <ButtonV2
-                variant="ghost"
-                shape="pill"
-                css={[showAllButtonStyle, shouldHighlightShowAllButton && noWidthhighlightStyle]}
-                data-highlighted={shouldHighlightShowAllButton}
-                onClick={() => toggleShowAll(!showAll)}
-                tabIndex={-1}
-              >
-                {showAll ? messages.showLessResultLabel : messages.allResultLabel}
-                {showAll ? <ChevronUp /> : <ChevronDown />}
-              </ButtonV2>
-            </StyledListItem>
-          )}
-        </StyledList>
-      ) : (
-        <StyledNoHit inMenu={inMenu}>{messages.noHit}</StyledNoHit>
-      )}
-    </StyledWrapper>
-  );
-};
-
-export default ContentTypeResult;

package/src/Search/ContentTypeResultStyles.tsx

@@ -1,172 +0,0 @@
-/**
- * Copyright (c) 2019-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 { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { colors, spacing, spacingUnit, fonts, misc, animations, mq, breakpoints } from "@ndla/core";
-
-export const highlightStyle = css`
-  background: ${colors.brand.light};
-  color: ${colors.brand.dark};
-  width: 100%;
-  small {
-    color: ${colors.text.primary} !important;
-  }
-`;
-
-export const noWidthhighlightStyle = css`
-  background: ${colors.brand.light};
-  color: ${colors.brand.dark};
-  small {
-    color: ${colors.text.primary} !important;
-  }
-`;
-
-type inMenuProps = {
-  inMenu?: boolean;
-  animateList?: number;
-  unGrouped?: boolean;
-};
-
-export const StyledNoHit = styled.p<inMenuProps>`
-  color: ${colors.text.light};
-  margin: 0;
-  font-style: italic;
-  ${fonts.sizes(16, 1.1)};
-  ${(props) =>
-    props.inMenu &&
-    css`
-      ${mq.range({ from: breakpoints.desktop })} {
-        margin-left: ${spacingUnit * 1.5}px;
-      }
-    `}
-`;
-
-export const showAllButtonStyle = css`
-  margin-left: -${spacing.xsmall};
-  margin-top: ${spacing.small};
-`;
-
-export const tooltipStyle = css`
-  padding-left: ${spacing.xsmall};
-`;
-
-export const StyledWrapper = styled.section`
-  padding-bottom: ${spacing.normal};
-  padding-top: ${spacing.normal};
-`;
-
-export const StyledHeader = styled.header`
-  margin-bottom: ${spacing.small};
-  display: flex;
-  align-items: center;
-  > div {
-    margin-right: ${spacing.small};
-  }
-  h1 {
-    margin: 0;
-    ${fonts.sizes(16, 1.1)};
-    small {
-      font-weight: ${fonts.weight.normal};
-      font-size: inherit;
-    }
-  }
-`;
-
-type StyledListItemProps = {
-  delayAnimation?: boolean;
-};
-
-export const StyledListItem = styled.li<StyledListItemProps>`
-  ${(props) =>
-    props.delayAnimation &&
-    css`
-      ${animations.fadeInLeftFromZero()}
-      animation-delay: ${animations.durations.normal};
-    `}
-  ${(props) => !props.delayAnimation && animations.fadeInLeft()}
-`;
-
-export const StyledList = styled.ul<inMenuProps>`
-  list-style: none;
-  padding: 0;
-  ${(props) => {
-    if (props.animateList && props.animateList > 0) {
-      return animations.toggledContentWithSwitchAnimation(
-        animations.durations.normal,
-        `contentTypeResultAnimation${props.animateList % 2 ? "1" : "2"}`,
-      );
-    }
-  }}
-  li {
-    margin: 0 -${spacing.small};
-    a {
-      > div {
-        margin-right: ${spacing.small};
-      }
-      color: ${colors.brand.primary};
-      box-shadow: none;
-      display: inline-flex;
-      flex-grow: 1;
-      align-items: center;
-      padding: ${spacing.xsmall} ${spacing.small};
-      small {
-        color: ${colors.text.light};
-        padding-left: ${spacing.xsmall};
-        ${mq.range({ until: breakpoints.tablet })} {
-          display: none;
-        }
-      }
-      &:focus {
-        ${highlightStyle};
-      }
-      ${(props) =>
-        props.inMenu
-          ? css`
-              ${mq.range({ from: breakpoints.desktop })} {
-                margin-left: ${!props.unGrouped && spacingUnit * 1.5}px;
-              }
-              strong {
-                text-decoration: underline;
-                font-weight: ${fonts.weight.normal};
-              }
-              &:hover {
-                strong {
-                  text-decoration: none;
-                }
-              }
-            `
-          : css`
-              strong {
-                font-weight: ${fonts.weight.semibold};
-              }
-              &:hover {
-                strong {
-                  text-decoration: underline;
-                }
-              }
-            `}
-    }
-  }
-`;
-
-export const StyledTag = styled.span`
-  background: ${colors.brand.greyLightest};
-  border-radius: ${misc.borderRadius};
-  color: ${colors.text.primary};
-  ${fonts.sizes("12px", "20px")};
-  font-weight: ${fonts.weight.semibold};
-  margin: 0 0 0 ${spacing.small};
-  height: ${spacing.normal};
-  display: flex;
-  align-items: center;
-  padding: 0 ${spacingUnit / 6}px;
-  ${mq.range({ until: breakpoints.desktop })} {
-    display: none;
-  }
-`;

package/src/Search/IsPathToHighlight.ts

@@ -1,12 +0,0 @@
-/**
- * Copyright (c) 2020-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 const isPathToHighlight = (path: string, href: string | false | null): boolean => {
-  const regexForPath = new RegExp(`^(/.*)?${path}$`);
-  return regexForPath.test(href || "") || path === href;
-};