@ndla/ui 55.0.13-alpha.0 → 55.0.15-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/LicenseByline/LicenseDescription.tsx

@@ -1,100 +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 { t } from "i18next";
-import { ReactNode, useState } from "react";
-import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
-import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
-
-interface Props {
-  icon?: ReactNode;
-  children?: ReactNode;
-  warningByline?: boolean;
-}
-
-const StyledFigCaption = styled.div`
-  display: flex;
-  gap: ${spacing.small};
-  align-items: center;
-  background: unset;
-  padding: unset;
-  font-size: unset;
-  color: unset;
-  p {
-    margin: 0;
-  }
-`;
-
-const StyledDescription = styled.div`
-  display: inline-flex;
-  white-space: pre-wrap;
-  &[data-warning="false"] {
-    ${mq.range({ until: breakpoints.mobileWide })} {
-      &[data-open="true"] {
-        display: inline;
-      }
-      display: grid;
-      grid-template-columns: 1fr auto;
-      overflow: hidden;
-    }
-  }
-`;
-
-const TextContent = styled.span`
-  &[data-warning="false"] {
-    ${mq.range({ until: breakpoints.mobileWide })} {
-      white-space: nowrap;
-      max-height: ${spacing.medium};
-      &[data-open="true"] {
-        white-space: pre-wrap;
-        max-height: none;
-      }
-      overflow: hidden;
-      text-overflow: ellipsis;
-      transition: max-height 0.7s ease-in;
-      margin: auto 0;
-    }
-  }
-`;
-
-const Button = styled(ButtonV2)`
-  color: ${colors.brand.primary};
-  font-weight: ${fonts.weight.semibold};
-  min-width: fit-content;
-  margin-left: ${spacing.small};
-  ${mq.range({ from: breakpoints.mobileWide })} {
-    display: none;
-  }
-`;
-
-const LicenseDescription = ({ icon, children, warningByline = false }: Props) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleToggle = () => {
-    setIsOpen(!isOpen);
-  };
-
-  return (
-    <StyledFigCaption>
-      {icon}
-      <StyledDescription data-open={isOpen} data-warning={warningByline}>
-        <TextContent data-open={isOpen} data-warning={warningByline}>
-          {children}
-        </TextContent>
-        {!warningByline && (
-          <Button variant="link" onClick={handleToggle}>
-            {isOpen ? `${t("audio.readLessDescriptionLabel")}` : `${t("audio.readMoreDescriptionLabel")}`}
-          </Button>
-        )}
-      </StyledDescription>
-    </StyledFigCaption>
-  );
-};
-
-export default LicenseDescription;

package/src/List/OrderedList.stories.tsx

@@ -1,135 +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, StoryFn, StoryObj } from "@storybook/react";
-import OrderedList from "./OrderedList";
-
-/**
- * Lister bør ikke inneholde flere enn 10 punkter. Har du mye mer, bør du vurdere å organisere innholdet annerledes.
- */
-export default {
-  title: "Base Styles/Ordered List",
-  tags: ["autodocs"],
-  component: OrderedList,
-  parameters: {
-    inlineStories: true,
-  },
-  render: ({ ...args }) => (
-    <OrderedList {...args}>
-      <li>Listepunkt 1</li>
-      <li>Listepunkt 2</li>
-      <li>
-        Listepunkt 3
-        <OrderedList {...args}>
-          <li>Listepunkt 1</li>
-          <li>Listepunkt 2</li>
-          <li>
-            Listepunkt 3
-            <OrderedList {...args}>
-              <li>Listepunkt 1</li>
-              <li>Listepunkt 2</li>
-              <li>Listepunkt 3</li>
-            </OrderedList>
-          </li>
-        </OrderedList>
-      </li>
-      <li>Listepunkt 4</li>
-    </OrderedList>
-  ),
-} as Meta<typeof OrderedList>;
-
-export const Default: StoryObj = {};
-
-export const Letters: StoryObj = {
-  args: {
-    type: "letters",
-  },
-};
-
-export const WithNumbersAndLetters: StoryFn = () => (
-  <OrderedList>
-    <li>Listepunkt 1</li>
-    <li>Listepunkt 2</li>
-    <li>
-      Listepunkt 3
-      <OrderedList data-type="letters">
-        <li>Listepunkt 1</li>
-        <li>Listepunkt 2</li>
-        <li>
-          Listepunkt 3
-          <OrderedList data-type="letters">
-            <li>Listepunkt 1</li>
-            <li>Listepunkt 2</li>
-            <li>
-              Listepunkt 3
-              <OrderedList>
-                <li>Listepunkt 1</li>
-                <li>Listepunkt 2</li>
-                <li>Listepunkt 3</li>
-              </OrderedList>
-            </li>
-          </OrderedList>
-        </li>
-      </OrderedList>
-    </li>
-    <li>Listepunkt 4</li>
-  </OrderedList>
-);
-
-export const StartingAtFive: StoryFn = () => (
-  <OrderedList start={5} data-type="letters">
-    <li>Listepunkt 1</li>
-    <li>Listepunkt 2</li>
-    <li>
-      Listepunkt 3
-      <OrderedList data-type="letters">
-        <li>Listepunkt 1</li>
-        <li>Listepunkt 2</li>
-        <li>
-          Listepunkt 3
-          <OrderedList data-type="letters">
-            <li>Listepunkt 1</li>
-            <li>Listepunkt 2</li>
-            <li>
-              Listepunkt 3
-              <OrderedList start={5}>
-                <li>Listepunkt 1</li>
-                <li>Listepunkt 2</li>
-                <li>Listepunkt 3</li>
-              </OrderedList>
-            </li>
-          </OrderedList>
-        </li>
-      </OrderedList>
-    </li>
-    <li>Listepunkt 4</li>
-  </OrderedList>
-);
-
-export const NoStyle: StoryFn = () => (
-  <ol>
-    <li>Listepunkt 1</li>
-    <li>Listepunkt 2</li>
-    <li>
-      Listepunkt 3
-      <ol>
-        <li>Listepunkt 1</li>
-        <li>Listepunkt 2</li>
-        <li>
-          Listepunkt 3
-          <ol>
-            <li>Listepunkt 1</li>
-            <li>Listepunkt 2</li>
-            <li>Listepunkt 3</li>
-          </ol>
-        </li>
-      </ol>
-    </li>
-    <li>Listepunkt 4</li>
-  </ol>
-);