@ndla/ui 55.0.13-alpha.0 → 55.0.14-alpha.0

package/src/FramedContent/FramedContent.tsx

@@ -1,26 +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 { ComponentPropsWithRef, forwardRef } from "react";
-import styled from "@emotion/styled";
-import { colors, spacing } from "@ndla/core";
-
-const StyledFramedContent = styled.div`
-  padding: ${spacing.mediumlarge};
-  margin: ${spacing.large} 0;
-  border: 1px solid ${colors.brand.tertiary};
-  overflow: hidden;
-`;
-
-const FramedContent = forwardRef<HTMLDivElement, ComponentPropsWithRef<"div">>(({ children, ...rest }, ref) => (
-  <StyledFramedContent {...rest} ref={ref}>
-    {children}
-  </StyledFramedContent>
-));
-
-export default FramedContent;

package/src/FramedContent/index.ts

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

package/src/Image/Image.stories.tsx

@@ -1,61 +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 { Meta, StoryObj } from "@storybook/react";
-import Image from "./Image";
-
-export default {
-  title: "Components/Image",
-  tags: ["autodocs"],
-  component: Image,
-  parameters: {
-    inlineStories: true,
-  },
-  args: {
-    alt: "Mann med maske",
-    src: "https://api.test.ndla.no/image-api/raw/id/604",
-  },
-} as Meta<typeof Image>;
-
-export const Default: StoryObj<typeof Image> = {};
-
-export const Crop: StoryObj<typeof Image> = {
-  args: {
-    crop: {
-      startX: 14.59,
-      endX: 79.63,
-      startY: 20,
-      endY: 100,
-    },
-  },
-};
-
-export const FocalPoint: StoryObj<typeof Image> = {
-  args: {
-    focalPoint: {
-      x: 65.08,
-      y: 45.28,
-    },
-    sizes: "(min-width: 320px) 320px",
-  },
-};
-
-export const LazyLoad: StoryObj<typeof Image> = {
-  args: {
-    alt: "Lyspære",
-    src: "https://api.staging.ndla.no/image-api/raw/Ide.jpg",
-    lazyLoad: true,
-    lazyLoadSrc: `data:image/svg+xml;utf8,
-    <svg xmlns="http://www.w3.org/2000/svg" height="400" width="100%">
-      <rect x="0" y="0" width="100%" height="100%" style="fill:#EFF0F2;">
-      <animate attributeType="XML" attributeName="fill" values="#EFF0F2;#E8E3E3;#EFF0F2;" dur="3s" repeatCount="indefinite"/>
-      </rect>
-      </svg>
-      `,
-  },
-};

package/src/Image/Image.tsx

@@ -1,147 +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 { ReactNode } from "react";
-import styled from "@emotion/styled";
-import { colors, misc } from "@ndla/core";
-
-export interface ImageCrop {
-  startX: number;
-  startY: number;
-  endX: number;
-  endY: number;
-}
-
-export interface ImageFocalPoint {
-  x: number;
-  y: number;
-}
-
-export const makeSrcQueryString = (width: number | undefined, crop?: ImageCrop, focalPoint?: ImageFocalPoint) => {
-  const widthParams = width && `width=${width}`;
-  const cropParams =
-    crop && `cropStartX=${crop.startX}&cropEndX=${crop.endX}&cropStartY=${crop.startY}&cropEndY=${crop.endY}`;
-  const focalPointParams = focalPoint && `focalX=${focalPoint.x}&focalY=${focalPoint.y}`;
-  const params = [widthParams, cropParams, focalPointParams].filter((p) => p).join("&");
-
-  return params;
-};
-
-const getSrcSet = (src: string, crop: ImageCrop | undefined, focalPoint: ImageFocalPoint | undefined) => {
-  const widths = [2720, 2080, 1760, 1440, 1120, 1000, 960, 800, 640, 480, 320, 240, 180];
-  return widths.map((width) => `${src}?${makeSrcQueryString(width, crop, focalPoint)} ${width}w`).join(", ");
-};
-
-const StyledImageWrapper = styled.div`
-  overflow: hidden;
-  position: relative;
-
-  &[data-expanded="true"] {
-    width: 100%;
-  }
-
-  picture {
-    width: 100%;
-  }
-
-  &[data-svg="true"] {
-    display: flex;
-    justify-content: center;
-  }
-  &[data-border="true"] {
-    border: 1px solid ${colors.brand.tertiary};
-    border-bottom: 0;
-    border-radius: ${misc.borderRadius};
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-  &[data-expandable="true"] {
-    cursor: pointer;
-  }
-`;
-
-const StyledImage = styled.img`
-  &[data-border="true"] {
-    border-radius: 3px;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-`;
-
-interface Props {
-  alt: string;
-  src: string;
-  sizes?: string;
-  fallbackWidth?: number;
-  contentType?: string;
-  srcSet?: string;
-  lazyLoad?: boolean;
-  lazyLoadSrc?: string;
-  expandButton?: ReactNode;
-  crop?: ImageCrop;
-  focalPoint?: ImageFocalPoint;
-  border?: string;
-  lang?: string;
-  onExpand?: () => void;
-  expanded?: boolean;
-}
-
-const Image = ({
-  alt,
-  src,
-  lazyLoad,
-  lazyLoadSrc,
-  crop,
-  focalPoint,
-  contentType,
-  sizes = "(min-width: 1024px) 1024px, 100vw",
-  expandButton,
-  fallbackWidth = 1024,
-  border,
-  lang,
-  onExpand,
-  expanded,
-  ...rest
-}: Props) => {
-  const srcSet = rest.srcSet ?? getSrcSet(src, crop, focalPoint);
-  const queryString = makeSrcQueryString(fallbackWidth, crop, focalPoint);
-  const loading = lazyLoad ? "lazy" : undefined;
-
-  if (contentType && contentType === "image/gif") {
-    return (
-      <StyledImageWrapper data-border={border} data-expanded={expanded} data-expandable={!!onExpand} onClick={onExpand}>
-        <StyledImage alt={alt} loading={loading} src={`${src}`} {...rest} data-border={border} lang={lang} />
-      </StyledImageWrapper>
-    );
-  }
-
-  return (
-    <StyledImageWrapper
-      data-svg={contentType === "image/svg+xml"}
-      data-border={border}
-      data-expandable={!!onExpand}
-      data-expanded={expanded}
-      onClick={onExpand}
-    >
-      <picture>
-        <source type={contentType} srcSet={srcSet} sizes={sizes} />
-        <StyledImage
-          alt={alt}
-          loading={loading}
-          src={`${src}?${queryString}`}
-          {...rest}
-          data-border={border}
-          lang={lang}
-        />
-      </picture>
-      {expandButton}
-    </StyledImageWrapper>
-  );
-};
-
-export default Image;

package/src/Image/ImageLink.tsx

@@ -1,37 +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 { ReactNode } from "react";
-import styled from "@emotion/styled";
-import { ImageCrop, ImageFocalPoint } from ".";
-import { makeSrcQueryString } from "./Image";
-
-const StyledLink = styled.a`
-  box-shadow: inset 0 0;
-`;
-
-interface Props {
-  src: string;
-  children: ReactNode;
-  sizes?: string;
-  crop?: ImageCrop;
-  focalPoint?: ImageFocalPoint;
-}
-
-export function ImageLink({ src, crop, children, ...rest }: Props) {
-  return (
-    <StyledLink
-      target="_blank"
-      href={`${src}?${makeSrcQueryString(undefined, crop)}`}
-      rel="noopener noreferrer"
-      {...rest}
-    >
-      {children}
-    </StyledLink>
-  );
-}

package/src/Image/index.ts

@@ -1,14 +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 Image from "./Image";
-export { makeSrcQueryString } from "./Image";
-export { ImageLink } from "./ImageLink";
-export type { ImageCrop, ImageFocalPoint } from "./Image";
-
-export default Image;

package/src/LetterFilter/LetterFilter.stories.tsx

@@ -1,29 +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 { useArgs } from "@storybook/preview-api";
-import { Meta, StoryFn } from "@storybook/react";
-import LetterFilter from "./LetterFilter";
-
-export default {
-  title: "Components/LetterFilter",
-  component: LetterFilter,
-  tags: ["autodocs"],
-  args: {
-    enabledLetters: ["a", "c"],
-    onChange: (value?: string) => {},
-  },
-} as Meta<typeof LetterFilter>;
-
-export const LetterFilterStory: StoryFn<typeof LetterFilter> = (args) => {
-  const [, updateArgs] = useArgs();
-
-  return <LetterFilter {...args} onChange={(val) => updateArgs({ value: val })} />;
-};
-
-LetterFilterStory.storyName = "LetterFilter";

package/src/LetterFilter/LetterFilter.tsx

@@ -1,78 +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 { useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { IconButtonV2 as IconButton } from "@ndla/button";
-import { colors, fonts, spacing } from "@ndla/core";
-import { alphabet } from "./alphabet";
-
-const StyledUL = styled.ul`
-  list-style: none;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: ${spacing.xsmall};
-`;
-
-const StyledButton = styled(IconButton)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: ${spacing.normal};
-  height: ${spacing.normal};
-  padding: 0;
-  ${fonts.sizes(18)};
-  && {
-    font-weight: ${fonts.weight.semibold};
-  }
-
-  :disabled {
-    pointer-events: none;
-    color: ${colors.brand.light};
-  }
-`;
-
-interface Props {
-  value?: string | undefined;
-  onChange: (value?: string) => void;
-  enabledLetters: string[];
-}
-
-const LetterFilter = ({ value, onChange, enabledLetters }: Props) => {
-  const { t } = useTranslation();
-  const uppercaseLetters = useMemo(() => enabledLetters.map((letter) => letter.toUpperCase()), [enabledLetters]);
-
-  return (
-    <StyledUL>
-      {alphabet.map((letter) => {
-        const disabled = !uppercaseLetters.includes(letter.toUpperCase());
-        const selected = letter.toUpperCase() === value?.toUpperCase();
-        return (
-          <li key={letter}>
-            <StyledButton
-              onClick={() => (selected ? onChange(undefined) : onChange(letter))}
-              aria-label={t("listview.filters.alphabet.letterFilter", {
-                letter,
-              })}
-              variant={!selected ? "ghost" : undefined}
-              colorTheme={!selected ? "lighter" : "primary"}
-              disabled={disabled}
-              size="xsmall"
-            >
-              {letter}
-            </StyledButton>
-          </li>
-        );
-      })}
-    </StyledUL>
-  );
-};
-
-export default LetterFilter;

package/src/LetterFilter/alphabet.ts

@@ -1,39 +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.
- *
- */
-
-export const alphabet = [
-  "A",
-  "B",
-  "C",
-  "D",
-  "E",
-  "F",
-  "G",
-  "H",
-  "I",
-  "J",
-  "K",
-  "L",
-  "M",
-  "N",
-  "O",
-  "P",
-  "Q",
-  "R",
-  "S",
-  "T",
-  "U",
-  "V",
-  "W",
-  "X",
-  "Y",
-  "Z",
-  "Æ",
-  "Ø",
-  "Å",
-];

package/src/LetterFilter/index.ts

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

package/src/Notion/Notion.tsx

@@ -1,96 +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 { Fragment, ReactNode } from "react";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { breakpoints, fonts, mq, spacing } from "@ndla/core";
-
-const ContentWrapper = styled.div`
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    display: flex;
-    flex-direction: column-reverse;
-  }
-  figure {
-    margin: 0;
-  }
-`;
-const TextWrapper = styled.div<{ hasVisualElement: boolean }>`
-  width: ${(props) => (props.hasVisualElement ? "75%" : "100%")};
-
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    width: 100%;
-  }
-  font-family: ${fonts.sans};
-  ${fonts.sizes("18px", "28px")};
-  ${mq.range({ from: breakpoints.desktop })} {
-    ul,
-    ol {
-      margin: ${spacing.small} 0;
-      padding: 0 1rem 0 2rem;
-    }
-    ol > li {
-      margin-left: ${spacing.normal};
-    }
-  }
-`;
-
-const ClearWrapper = styled.div`
-  clear: both;
-`;
-
-const LabelsContainer = styled.div`
-  display: flex;
-  align-items: center;
-  ${fonts.sizes("14px", "24px")};
-  font-family: ${fonts.sans};
-  margin: ${spacing.small} 0;
-`;
-
-export type NotionProps = {
-  id: string | number;
-  labels?: string[];
-  text: ReactNode;
-  title: string;
-  visualElement: ReactNode;
-  imageElement?: ReactNode;
-  children?: ReactNode;
-  lang?: string;
-};
-
-const Notion = ({ id, labels = [], text, title, visualElement, imageElement, children, lang }: NotionProps) => {
-  const { t } = useTranslation();
-
-  return (
-    <div>
-      <ContentWrapper>
-        {imageElement}
-        {visualElement}
-        <TextWrapper hasVisualElement={!!(imageElement || visualElement)} lang={lang}>
-          <b>{title.trim()}</b>
-          {text}
-          {!!labels.length && (
-            <LabelsContainer>
-              {t("searchPage.resultType.notionLabels")}
-              {labels.map((label, i) => (
-                <Fragment key={`notion-${id}-label-${i + 1}`}>
-                  {" "}
-                  {label}
-                  {i < labels?.length - 1 && <> &#8226;</>}
-                </Fragment>
-              ))}
-            </LabelsContainer>
-          )}
-        </TextWrapper>
-        <ClearWrapper />
-      </ContentWrapper>
-      {children}
-    </div>
-  );
-};
-
-export default Notion;

package/src/Notion/NotionImage.tsx

@@ -1,64 +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.
- *
- */
-
-/** @jsxImportSource @emotion/react */
-import styled from "@emotion/styled";
-import { animations, breakpoints, colors, mq, spacing } from "@ndla/core";
-import { Image } from "@ndla/primitives";
-import { Figure } from "../Figure";
-
-const StyledImageWrapper = styled.div`
-  overflow: hidden;
-  width: 260px;
-  padding-top: ${spacing.small};
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    margin: 0 auto;
-  }
-  &:hover {
-    img {
-      transform: scale(1.1);
-      opacity: 1.1;
-      transition-duration: 0.5s;
-    }
-  }
-`;
-
-const StyledImage = styled(Image)`
-  object-fit: cover;
-  max-height: 162px;
-  transition: transform ${animations.durations.fast};
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    min-width: 260px;
-  }
-`;
-
-interface Props {
-  src: string;
-  alt: string;
-}
-
-const StyledFigure = styled(Figure)`
-  &:hover {
-    [data-open-button] {
-      background: ${colors.white};
-      svg {
-        transform: scale(1.2);
-      }
-    }
-  }
-`;
-
-export const NotionImage = ({ src, alt }: Props) => {
-  return (
-    <StyledFigure type={"full-column"}>
-      <StyledImageWrapper>
-        <StyledImage alt={alt} src={src} />
-      </StyledImageWrapper>
-    </StyledFigure>
-  );
-};

package/src/Notion/index.ts

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