@ndla/ui 55.0.12-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/__tests__/Image-test.tsx

@@ -1,66 +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.
- *
- */
-
-/* eslint-env jest */
-
-import { render } from "@testing-library/react";
-import "@testing-library/jest-dom";
-import Image, { makeSrcQueryString } from "../Image";
-
-test("Image renderers correctly", () => {
-  const { container } = render(<Image alt="example" src="https://example.com/image.png" />, { container: undefined });
-
-  expect(container.firstChild).toMatchSnapshot();
-});
-
-test("Lazyloaded image renderers correctly", () => {
-  const { container } = render(
-    <Image lazyLoad lazyLoadSrc="https://example.com/blurry.png" alt="example" src="https://example.com/image.png" />,
-  );
-
-  expect(container.firstChild).toMatchSnapshot();
-});
-
-test("Image with crop and focalpoint props renderers correctly", () => {
-  const { container } = render(
-    <Image
-      crop={{
-        startX: 14.59,
-        endX: 79.63,
-        startY: 20,
-        endY: 100,
-      }}
-      focalPoint={{
-        x: 65.08,
-        y: 45.28,
-      }}
-      alt="example"
-      src="https://example.com/image.png"
-    />,
-  );
-
-  expect(container.firstChild).toMatchSnapshot();
-});
-
-test("makeSrcQueryString renders correctly", () => {
-  const crop = {
-    startX: 14.59,
-    endX: 79.63,
-    startY: 20,
-    endY: 100,
-  };
-  const focalPoint = {
-    x: 65.08,
-    y: 45.28,
-  };
-  expect(makeSrcQueryString(undefined, undefined, undefined)).toMatch("");
-  expect(makeSrcQueryString(1024, undefined, undefined)).toMatch("width=1024");
-  expect(makeSrcQueryString(undefined, crop, undefined)).toMatchSnapshot();
-  expect(makeSrcQueryString(undefined, undefined, focalPoint)).toMatchSnapshot();
-  expect(makeSrcQueryString(1024, crop, focalPoint)).toMatchSnapshot();
-});

package/src/Image/__tests__/__snapshots__/Image-test.tsx.snap

@@ -1,194 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Image renderers correctly 1`] = `
-.emotion-0 {
-  overflow: hidden;
-  position: relative;
-}
-
-.emotion-0[data-expanded="true"] {
-  width: 100%;
-}
-
-.emotion-0 picture {
-  width: 100%;
-}
-
-.emotion-0[data-svg="true"] {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-0[data-border="true"] {
-  border: 1px solid #a5bcd3;
-  border-bottom: 0;
-  border-radius: 4px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.emotion-0[data-expandable="true"] {
-  cursor: pointer;
-}
-
-.emotion-1[data-border="true"] {
-  border-radius: 3px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-<div
-  class="emotion-0"
-  data-expandable="false"
-  data-svg="false"
->
-  <picture>
-    <source
-      sizes="(min-width: 1024px) 1024px, 100vw"
-      srcset="https://example.com/image.png?width=2720 2720w, https://example.com/image.png?width=2080 2080w, https://example.com/image.png?width=1760 1760w, https://example.com/image.png?width=1440 1440w, https://example.com/image.png?width=1120 1120w, https://example.com/image.png?width=1000 1000w, https://example.com/image.png?width=960 960w, https://example.com/image.png?width=800 800w, https://example.com/image.png?width=640 640w, https://example.com/image.png?width=480 480w, https://example.com/image.png?width=320 320w, https://example.com/image.png?width=240 240w, https://example.com/image.png?width=180 180w"
-    />
-    <img
-      alt="example"
-      class="emotion-1"
-      src="https://example.com/image.png?width=1024"
-    />
-  </picture>
-</div>
-`;
-
-exports[`Image with crop and focalpoint props renderers correctly 1`] = `
-.emotion-0 {
-  overflow: hidden;
-  position: relative;
-}
-
-.emotion-0[data-expanded="true"] {
-  width: 100%;
-}
-
-.emotion-0 picture {
-  width: 100%;
-}
-
-.emotion-0[data-svg="true"] {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-0[data-border="true"] {
-  border: 1px solid #a5bcd3;
-  border-bottom: 0;
-  border-radius: 4px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.emotion-0[data-expandable="true"] {
-  cursor: pointer;
-}
-
-.emotion-1[data-border="true"] {
-  border-radius: 3px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-<div
-  class="emotion-0"
-  data-expandable="false"
-  data-svg="false"
->
-  <picture>
-    <source
-      sizes="(min-width: 1024px) 1024px, 100vw"
-      srcset="https://example.com/image.png?width=2720&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 2720w, https://example.com/image.png?width=2080&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 2080w, https://example.com/image.png?width=1760&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 1760w, https://example.com/image.png?width=1440&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 1440w, https://example.com/image.png?width=1120&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 1120w, https://example.com/image.png?width=1000&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 1000w, https://example.com/image.png?width=960&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 960w, https://example.com/image.png?width=800&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 800w, https://example.com/image.png?width=640&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 640w, https://example.com/image.png?width=480&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 480w, https://example.com/image.png?width=320&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 320w, https://example.com/image.png?width=240&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 240w, https://example.com/image.png?width=180&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 180w"
-    />
-    <img
-      alt="example"
-      class="emotion-1"
-      src="https://example.com/image.png?width=1024&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28"
-    />
-  </picture>
-</div>
-`;
-
-exports[`Lazyloaded image renderers correctly 1`] = `
-.emotion-0 {
-  overflow: hidden;
-  position: relative;
-}
-
-.emotion-0[data-expanded="true"] {
-  width: 100%;
-}
-
-.emotion-0 picture {
-  width: 100%;
-}
-
-.emotion-0[data-svg="true"] {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-0[data-border="true"] {
-  border: 1px solid #a5bcd3;
-  border-bottom: 0;
-  border-radius: 4px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.emotion-0[data-expandable="true"] {
-  cursor: pointer;
-}
-
-.emotion-1[data-border="true"] {
-  border-radius: 3px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-<div
-  class="emotion-0"
-  data-expandable="false"
-  data-svg="false"
->
-  <picture>
-    <source
-      sizes="(min-width: 1024px) 1024px, 100vw"
-      srcset="https://example.com/image.png?width=2720 2720w, https://example.com/image.png?width=2080 2080w, https://example.com/image.png?width=1760 1760w, https://example.com/image.png?width=1440 1440w, https://example.com/image.png?width=1120 1120w, https://example.com/image.png?width=1000 1000w, https://example.com/image.png?width=960 960w, https://example.com/image.png?width=800 800w, https://example.com/image.png?width=640 640w, https://example.com/image.png?width=480 480w, https://example.com/image.png?width=320 320w, https://example.com/image.png?width=240 240w, https://example.com/image.png?width=180 180w"
-    />
-    <img
-      alt="example"
-      class="emotion-1"
-      loading="lazy"
-      src="https://example.com/image.png?width=1024"
-    />
-  </picture>
-</div>
-`;
-
-exports[`makeSrcQueryString renders correctly 1`] = `"cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100"`;
-
-exports[`makeSrcQueryString renders correctly 2`] = `"focalX=65.08&focalY=45.28"`;
-
-exports[`makeSrcQueryString renders correctly 3`] = `"width=1024&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28"`;

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;