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

package/src/Embed/conceptComponents.tsx

@@ -1,293 +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.
- *
- */
-
-/** @jsxImportSource @emotion/react */
-import { forwardRef, ReactNode, RefAttributes } from "react";
-import { useTranslation } from "react-i18next";
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { breakpoints, colors, fonts, misc, mq, spacing, stackOrder } from "@ndla/core";
-import { ConceptData, ConceptVisualElementMeta } from "@ndla/types-embed";
-import { ExternalEmbed, IframeEmbed } from ".";
-import BrightcoveEmbed from "./BrightcoveEmbed";
-import H5pEmbed from "./H5pEmbed";
-import ImageEmbed from "./ImageEmbed";
-import { Gloss } from "../Gloss";
-import { LicenseContainerContent } from "../LicenseByline/EmbedByline";
-import { Copyright } from "../types";
-
-export type ConceptType = "concept" | "gloss";
-
-export interface ConceptNotionData {
-  title: ConceptData["concept"]["title"];
-  content?: ReactNode;
-  metaImage?: {
-    url?: string;
-    alt?: string;
-  };
-  copyright?: Copyright;
-  source?: string;
-  visualElement?: ConceptVisualElementMeta;
-  conceptType: ConceptData["concept"]["conceptType"];
-  glossData?: ConceptData["concept"]["glossData"];
-  lang?: string;
-}
-
-interface ConceptNotionProps extends RefAttributes<HTMLDivElement>, Omit<ConceptNotionData, "metaImage"> {
-  className?: string;
-  closeButton?: ReactNode;
-  previewAlt?: boolean;
-  inPopover?: boolean;
-  tags?: string[];
-  subjects?: string[];
-  headerButtons?: ReactNode;
-  exampleIds?: string;
-  exampleLangs?: string;
-  showTitle?: boolean;
-}
-
-const NotionDialogText = styled.div`
-  font-weight: ${fonts.weight.normal};
-  ${fonts.sizes("18px", 1.3)};
-  color: ${colors.text.primary};
-  font-family: ${fonts.sans};
-`;
-
-const NotionDialogContent = styled.div`
-  padding-bottom: ${spacing.normal};
-  display: flex;
-  flex-direction: column;
-`;
-
-const ContentSpacing = styled.div`
-  padding: ${spacing.normal};
-  &[data-is-concept="false"] {
-    margin-bottom: ${spacing.normal};
-  }
-`;
-
-const notionContentCss = css`
-  @keyframes animateIn {
-    0% {
-      opacity: 0;
-      transform: translate3d(0, -13px, 0);
-    }
-    100% {
-      opacity: 1;
-      transform: translate3d(0, 0, 0);
-    }
-  }
-
-  animation-name: animateIn;
-  animation-duration: 300ms;
-  background-color: white;
-  z-index: ${stackOrder.offsetSingle};
-  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
-  ${mq.range({ from: breakpoints.tablet })} {
-    width: 500px;
-  }
-  ${mq.range({ from: breakpoints.desktop })} {
-    width: 720px;
-    max-width: 60vw;
-  }
-
-  ${mq.range({ until: breakpoints.tablet })} {
-    padding: ${spacing.small};
-    z-index: ${stackOrder.popover};
-    height: 100%;
-    width: 100%;
-    overflow: auto;
-  }
-`;
-
-const NotionHeader = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  border-bottom: 2px solid ${colors.brand.tertiary};
-  padding-bottom: ${spacing.small};
-  h1 {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    flex-grow: 1;
-    margin: 0;
-    font-weight: ${fonts.weight.bold};
-    ${fonts.sizes("22px", 1.2)};
-  }
-  small {
-    display: flex;
-    ${fonts.sizes("20px", 1.2)};
-    font-weight: ${fonts.weight.normal};
-  }
-  ${mq.range({ from: breakpoints.mobileWide })} {
-    &[data-is-concept="true"] {
-      small:before {
-        display: inline-flex;
-        align-self: center;
-        margin: 0 ${spacing.xsmall};
-        content: "";
-        height: ${spacing.normal};
-        width: 1px;
-        background-color: ${colors.brand.greyLight};
-      }
-    }
-  }
-  &[data-is-concept="false"] {
-    margin-bottom: ${spacing.large};
-  }
-`;
-
-const ListWrapper = styled.div`
-  display: flex;
-  gap: ${spacing.small};
-  align-items: center;
-`;
-
-const StyledNotionDialogContent = styled(NotionDialogContent)`
-  padding-top: ${spacing.small};
-  figure {
-    width: 100% !important;
-    padding: 0;
-    margin: 0;
-    padding-bottom: ${spacing.normal};
-  }
-`;
-
-const ButtonWrapper = styled.div`
-  display: flex;
-  gap: ${spacing.xsmall};
-  align-items: center;
-`;
-
-const StyledList = styled.ul`
-  display: flex;
-  gap: ${spacing.small};
-  align-items: center;
-  list-style: none;
-  > li {
-    font-family: ${fonts.sans};
-    font-weight: ${fonts.weight.semibold};
-    border-radius: ${misc.borderRadius};
-    background-color: ${colors.brand.greyLightest};
-    ${fonts.sizes("12px", 1.2)};
-    padding: ${spacing.xxsmall};
-  }
-`;
-const BylineWrapper = styled.div`
-  padding: 0 ${spacing.normal} ${spacing.small} ${spacing.normal};
-  span {
-    font-family: ${fonts.sans};
-    ${fonts.sizes("16px", "26px")};
-  }
-`;
-
-export const ConceptNotionV2 = forwardRef<HTMLDivElement, ConceptNotionProps>(
-  (
-    {
-      visualElement,
-      title,
-      content,
-      source,
-      copyright,
-      closeButton,
-      inPopover,
-      previewAlt,
-      tags,
-      subjects,
-      conceptType,
-      glossData,
-      headerButtons,
-      lang,
-      exampleIds,
-      exampleLangs,
-      showTitle = true,
-      ...rest
-    },
-    ref,
-  ) => {
-    const { t } = useTranslation();
-    const isConcept = conceptType === "concept";
-    return (
-      <div css={inPopover ? notionContentCss : undefined} {...rest} ref={ref}>
-        <ContentSpacing data-is-concept={isConcept}>
-          <NotionHeader data-is-concept={isConcept}>
-            {showTitle && (
-              <h1>
-                {isConcept && title.title}
-                {<small data-is-concept={isConcept}>{t(`searchPage.resultType.${conceptType}`)}</small>}
-              </h1>
-            )}
-            <ButtonWrapper>
-              {headerButtons}
-              {closeButton}
-            </ButtonWrapper>
-          </NotionHeader>
-          {isConcept ? (
-            <>
-              <StyledNotionDialogContent>
-                {visualElement?.resource === "image" ? (
-                  <ImageEmbed embed={visualElement} lang={lang} />
-                ) : visualElement?.resource === "brightcove" ? (
-                  <BrightcoveEmbed embed={visualElement} />
-                ) : visualElement?.resource === "h5p" ? (
-                  <H5pEmbed embed={visualElement} />
-                ) : visualElement?.resource === "iframe" ? (
-                  <IframeEmbed embed={visualElement} />
-                ) : visualElement?.resource === "external" ? (
-                  <ExternalEmbed embed={visualElement} />
-                ) : null}
-                {content && <NotionDialogText lang={lang}>{content}</NotionDialogText>}
-              </StyledNotionDialogContent>
-              {tags && (
-                <ListWrapper>
-                  {`${t("notions.tags")}:`}
-                  <StyledList>
-                    {tags.map((tag, index) => (
-                      <li key={index}>{tag}</li>
-                    ))}
-                  </StyledList>
-                </ListWrapper>
-              )}
-              {subjects && (
-                <ListWrapper>
-                  {`${t("notions.usedIn")}:`}
-                  <StyledList>
-                    {subjects.map((subject, index) => (
-                      <li key={index}>{subject}</li>
-                    ))}
-                  </StyledList>
-                </ListWrapper>
-              )}
-            </>
-          ) : (
-            <Gloss
-              title={title}
-              glossData={glossData!}
-              audio={
-                visualElement?.status === "success" && visualElement.resource === "audio"
-                  ? {
-                      src: visualElement.data.audioFile.url,
-                      title: visualElement.data.title.title,
-                    }
-                  : undefined
-              }
-              exampleIds={exampleIds}
-              exampleLangs={exampleLangs}
-            />
-          )}
-        </ContentSpacing>
-        {copyright && (
-          <BylineWrapper>
-            <LicenseContainerContent copyright={copyright} type={conceptType as ConceptType} />
-          </BylineWrapper>
-        )}
-      </div>
-    );
-  },
-);

package/src/ExpandableBox/ExpandableBox.stories.tsx

@@ -1,41 +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 { ExpandableBox, ExpandableBoxSummary } from "./ExpandableBox";
-
-/**
- * This is just a thin wrapper around the native HTML details element.
- * `ExpandableBoxSummary` is a thin wrapper around the native HTML summary element.
- * The components will eventually add style and functionality to the native elements, as opposed to the components being styled by global css.
- */
-export default {
-  title: "Components/ExpandableBox",
-  tags: ["autodocs"],
-  parameters: {
-    inlineStories: true,
-  },
-  component: ExpandableBox,
-  render: (args) => (
-    <ExpandableBox {...args}>
-      <ExpandableBoxSummary>Open me</ExpandableBoxSummary>
-      Everything here is only visible when the box is open
-    </ExpandableBox>
-  ),
-} as Meta<typeof ExpandableBox>;
-
-export const Default: StoryObj<typeof ExpandableBox> = {};
-
-export const WithHeader: StoryFn<typeof ExpandableBox> = ({ ...args }) => (
-  <ExpandableBox {...args}>
-    <ExpandableBoxSummary>
-      <h2>Open me as header text</h2>
-    </ExpandableBoxSummary>
-    Everything here is only visible when the box is open
-  </ExpandableBox>
-);

package/src/ExpandableBox/ExpandableBox.tsx

@@ -1,23 +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 { HTMLAttributes } from "react";
-import styled from "@emotion/styled";
-import { fonts } from "@ndla/core";
-
-interface Props extends HTMLAttributes<HTMLDetailsElement> {}
-
-export const ExpandableBox = ({ children, ...rest }: Props) => {
-  return <details {...rest}>{children}</details>;
-};
-
-interface SummaryProps extends HTMLAttributes<HTMLElement> {}
-
-export const ExpandableBoxSummary = ({ children, ...rest }: SummaryProps) => {
-  return <summary {...rest}>{children}</summary>;
-};

package/src/ExpandableBox/index.ts

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

package/src/Figure/Figure.tsx

@@ -1,167 +0,0 @@
-/**
- * Copyright (c) 2016-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-// N.B These components is used to render static markup serverside
-
-/** @jsxImportSource @emotion/react */
-import { ComponentPropsWithRef, forwardRef, useMemo } from "react";
-import { SerializedStyles, css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { breakpoints, mq, spacing } from "@ndla/core";
-
-const StyledFigure = styled.figure`
-  position: relative;
-  width: 100%;
-  transition:
-    transform 0.4s,
-    width 0.4s,
-    height 0.4s;
-  img {
-    width: 100%;
-  }
-  iframe {
-    display: block;
-    border: 0;
-  }
-  &[data-sizetype="full"][data-float=""] {
-    margin: ${spacing.normal} 0 ${spacing.normal};
-  }
-  &[data-sizetype="full"] {
-    margin-bottom: ${spacing.normal};
-  }
-`;
-
-const floatSizes: Record<FigureType, SerializedStyles> = {
-  left: css`
-    margin-top: ${spacing.xsmall};
-    --float: left;
-    --width: 50%;
-    --width-desktop: 65%;
-    & {
-      ${mq.range({ from: breakpoints.tablet })} {
-        padding-right: ${spacing.small};
-      }
-    }
-  `,
-  right: css`
-    margin-top: ${spacing.xsmall};
-    --float: right;
-    --width: 50%;
-    --width-desktop: 65%;
-    & {
-      ${mq.range({ from: breakpoints.tablet })} {
-        padding-left: ${spacing.small};
-      }
-    }
-  `,
-  "small-left": css`
-    margin-top: ${spacing.xsmall};
-    --float: left;
-    --width: 25%;
-    --width-desktop: 50%;
-    & {
-      ${mq.range({ from: breakpoints.tablet })} {
-        padding-right: ${spacing.small};
-      }
-    }
-  `,
-  "small-right": css`
-    margin-top: ${spacing.xsmall};
-    --float: right;
-    --width: 25%;
-    --width-desktop: 50%;
-    & {
-      ${mq.range({ from: breakpoints.tablet })} {
-        padding-left: ${spacing.small};
-      }
-    }
-  `,
-  "xsmall-left": css`
-    --float: left;
-    --width: 25%;
-    & {
-      ${mq.range({ from: breakpoints.tablet })} {
-        padding-right: ${spacing.small};
-        margin: ${spacing.xsmall} 0 ${spacing.medium};
-      }
-    }
-  `,
-  "xsmall-right": css`
-    --float: right;
-    --width: 25%;
-    & {
-      ${mq.range({ from: breakpoints.tablet })} {
-        padding-left: ${spacing.small};
-        margin: ${spacing.xsmall} 0 ${spacing.normal} ${spacing.xsmall};
-      }
-    }
-  `,
-  full: css`
-    margin-top: ${spacing.xsmall};
-  `,
-  "full-column": css`
-    left: auto !important;
-    right: auto !important;
-    width: auto !important;
-    padding-left: 0;
-    padding-right: 0;
-    padding-bottom: ${spacing.large};
-    margin-bottom: 0;
-  `,
-};
-
-const floatStyle = css`
-  ${mq.range({ from: breakpoints.tablet })} {
-    float: var(--float);
-    clear: var(--float);
-    width: var(--width) !important;
-    z-index: 1;
-    left: auto !important;
-    padding: 0;
-  }
-  ${mq.range({ from: breakpoints.desktop })} {
-    width: var(--width-desktop, var(--width)) !important;
-  }
-`;
-
-const Figure = forwardRef<HTMLElement, Props>(({ children, type = "full", ...rest }, ref) => {
-  const styles = useMemo(() => {
-    const styles = [];
-    const floatCss = floatSizes[type];
-    if (type !== "full-column" && type !== "full") {
-      styles.push(floatStyle);
-    }
-    if (floatCss) {
-      styles.push(floatCss);
-    }
-    return styles;
-  }, [type]);
-
-  return (
-    <StyledFigure data-sizetype={type} css={styles} {...rest} ref={ref}>
-      {children}
-    </StyledFigure>
-  );
-});
-
-export type FigureType =
-  | "full"
-  | "full-column"
-  | "left"
-  | "small-left"
-  | "right"
-  | "small-right"
-  | "xsmall-right"
-  | "xsmall-left";
-
-interface Props extends Omit<ComponentPropsWithRef<"figure">, "type"> {
-  type?: FigureType;
-  noFigcaption?: boolean;
-}
-
-export default Figure;

package/src/Figure/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.
- *
- */
-
-export { default as Figure } from "./Figure";
-
-export type { FigureType } from "./Figure";

package/src/FramedContent/FramedContent.stories.tsx

@@ -1,152 +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 { CopyrightMetaData } from "@ndla/types-embed";
-import FramedContent from "./FramedContent";
-import FigureImage from "../../../../stories/article/FigureImage";
-import { CopyrightEmbed } from "../Embed";
-
-export default {
-  title: "Components/FramedContent",
-  component: FramedContent,
-  tags: ["autodocs"],
-  parameters: {
-    inlineStories: true,
-  },
-  args: {
-    children: <p>Content!</p>,
-  },
-} as Meta<typeof FramedContent>;
-
-export const WithFloating: StoryObj<typeof FramedContent> = {
-  args: {
-    children: (
-      <>
-        <p>En boks med flytelementer</p>
-        <FigureImage embedData={{ alt: "", align: "right" }} />
-        <p>
-          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
-          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
-        </p>
-        <p>
-          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
-          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
-        </p>
-      </>
-    ),
-  },
-};
-
-export const WithFloatingSmall: StoryObj<typeof FramedContent> = {
-  args: {
-    children: (
-      <>
-        <p>En boks med flytelementer</p>
-        <FigureImage embedData={{ alt: "", align: "right", size: "small" }} />
-        <p>
-          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
-          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
-        </p>
-        <p>
-          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
-          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
-        </p>
-      </>
-    ),
-  },
-};
-
-export const TooMuchContent: StoryObj<typeof FramedContent> = {
-  args: {
-    children: (
-      <>
-        <h2>
-          Tekst i ramme fungerer <em>dårlig</em> med mye tekst.
-        </h2>
-        <p>
-          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
-          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
-        </p>
-        <p>
-          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
-          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
-        </p>
-        <p>
-          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
-          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
-        </p>
-        <p>
-          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
-          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
-        </p>
-        <p>
-          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
-          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
-        </p>
-        <p>
-          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
-          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
-        </p>
-        <p>
-          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
-          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
-        </p>
-        <p>
-          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
-          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
-        </p>
-      </>
-    ),
-  },
-};
-
-const copyrightEmbed: CopyrightMetaData = {
-  resource: "copyright",
-  status: "success",
-  data: undefined,
-  embedData: {
-    resource: "copyright",
-    title: "Hallo",
-    copyright: {
-      license: {
-        license: "CC-BY-SA-4.0",
-        description: "Creative Commons Attribution-ShareAlike 4.0 International",
-        url: "https://creativecommons.org/licenses/by-sa/4.0/",
-      },
-      creators: [
-        {
-          type: "originator",
-          name: "Camilla Øvstebø ",
-        },
-      ],
-      processors: [
-        {
-          type: "linguistic",
-          name: "Totaltekst",
-        },
-      ],
-      rightsholders: [],
-      processed: false,
-    },
-  },
-};
-
-export const WithCopyrightEmbed: StoryObj<typeof FramedContent> = {
-  args: {
-    children: (
-      <>
-        <h2>Her har du helt vanlig innhold</h2>
-        <p>Det kan som sagt være hva som helst.</p>
-        <CopyrightEmbed embed={copyrightEmbed}>
-          <p>Dette er innhold som er i en copyright-embed.</p>
-        </CopyrightEmbed>
-      </>
-    ),
-  },
-};