@ndla/ui 50.9.21 → 50.10.1

package/lib/index.d.ts

@@ -7,7 +7,7 @@
  */
 export { ExpandableBox, ExpandableBoxSummary } from "./ExpandableBox";
 export { default as FramedContent } from "./FramedContent";
-export { ConceptNotionV2, ImageEmbed, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, ConceptListEmbed, UnknownEmbed, InlineConcept, BlockConcept, UuDisclaimerEmbed, } from "./Embed";
+export { ConceptNotionV2, ImageEmbed, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, ConceptListEmbed, UnknownEmbed, InlineConcept, BlockConcept, UuDisclaimerEmbed, CopyrightEmbed, } from "./Embed";
 export { LicenseLink } from "./LicenseByline";
 export { ArticleByline, ArticleFootNotes, ArticleIntroduction, ArticleTitle, ArticleWrapper, ArticleHeaderWrapper, default as Article, } from "./Article";
 export { getPossiblyRelativeUrl } from "./utils/relativeUrl";

package/lib/index.js

@@ -207,6 +207,12 @@ Object.defineProperty(exports, "CopyParagraphButton", {
     return _CopyParagraphButton.default;
   }
 });
+Object.defineProperty(exports, "CopyrightEmbed", {
+  enumerable: true,
+  get: function () {
+    return _Embed.CopyrightEmbed;
+  }
+});
 Object.defineProperty(exports, "CreatedBy", {
   enumerable: true,
   get: function () {

package/lib/locale/messages-en.d.ts

@@ -434,6 +434,7 @@ declare const messages: {
             description: string;
             rules: string;
             title: string;
+            showOrHideExamples: string;
             embedlink: {
                 heading: string;
                 description: string;
@@ -1314,6 +1315,7 @@ declare const messages: {
             h5p: string;
             external: string;
             gloss: string;
+            copyright: string;
         };
     };
     gloss: {

package/lib/locale/messages-en.js

@@ -453,6 +453,7 @@ const messages = {
       description: "Remember that built-in content might have a different license than the gloss text",
       rules: "Rules for use of gloss:",
       title: "Title",
+      showOrHideExamples: "Show or hide examples",
       embedlink: {
         heading: "How to show the gloss in other content",
         description: "This url shows the gloss without menu and footer",
@@ -1332,7 +1333,8 @@ const messages = {
       concept: "Concept",
       h5p: "H5P",
       external: "External resource",
-      gloss: "Gloss"
+      gloss: "Gloss",
+      copyright: "Text"
     }
   },
   gloss: {

package/lib/locale/messages-nb.d.ts

@@ -449,6 +449,7 @@ declare const messages: {
             description: string;
             rules: string;
             title: string;
+            showOrHideExamples: string;
             embedlink: {
                 heading: string;
                 description: string;
@@ -1314,6 +1315,7 @@ declare const messages: {
             h5p: string;
             external: string;
             gloss: string;
+            copyright: string;
         };
     };
     gloss: {

package/lib/locale/messages-nb.js

@@ -468,6 +468,7 @@ const messages = {
       description: "Husk at innebygd innhold i en glose kan ha en annen lisens enn selve gloseteksten",
       rules: "Regler for bruk av glose:",
       title: "Tittel",
+      showOrHideExamples: "Vis eller skjul eksempler",
       embedlink: {
         heading: "Slik viser du glosen i annet innhold",
         description: "Denne lenken viser glosen uten kontekst (meny og bunntekst)",
@@ -1332,7 +1333,8 @@ const messages = {
       concept: "Forklaring",
       h5p: "H5P",
       external: "Ekstern ressurs",
-      gloss: "Glose"
+      gloss: "Glose",
+      copyright: "Tekst"
     }
   },
   gloss: {

package/lib/locale/messages-nn.d.ts

@@ -455,6 +455,7 @@ declare const messages: {
             description: string;
             rules: string;
             title: string;
+            showOrHideExamples: string;
         };
         files: {
             heading: string;
@@ -1314,6 +1315,7 @@ declare const messages: {
             h5p: string;
             external: string;
             gloss: string;
+            copyright: string;
         };
     };
     gloss: {

package/lib/locale/messages-nn.js

@@ -473,7 +473,8 @@ const messages = {
       heading: "Slik gjenbruker du gloser",
       description: "Husk at innebygd innhald i ei glose kan ha ein anna lisens enn sjølve gloseteksten",
       rules: "Regler for bruk av glose:",
-      title: "Tittel"
+      title: "Tittel",
+      showOrHideExamples: "Vis eller skjul eksempler"
     },
     files: {
       heading: "Slik gjenbruker du filer",
@@ -1332,7 +1333,8 @@ const messages = {
       concept: "Forklaring",
       h5p: "H5P",
       external: "Ekstern ressurs",
-      gloss: "Glose"
+      gloss: "Glose",
+      copyright: "Tekst"
     }
   },
   gloss: {

package/lib/locale/messages-se.d.ts

@@ -449,6 +449,7 @@ declare const messages: {
             description: string;
             rules: string;
             title: string;
+            showOrHideExamples: string;
             embedlink: {
                 heading: string;
                 description: string;
@@ -1314,6 +1315,7 @@ declare const messages: {
             h5p: string;
             external: string;
             gloss: string;
+            copyright: string;
         };
     };
     gloss: {

package/lib/locale/messages-se.js

@@ -468,6 +468,7 @@ const messages = {
       description: "Muitte ahte sisdoalus mii lea vuojuhuvvon ovtta gihppagii sáhttá leat eará liseansa go dušše jietnadat.",
       rules: "Glossa geavaheami njuolggadusat:",
       title: "Namahus",
+      showOrHideExamples: "Čájet dahje čiega ovdamearkkaid",
       embedlink: {
         heading: "Čájet jietnadaga eará sisdoaluin",
         description: "Dát liŋka čájeha teavstta konteavstta haga (fállu ja juolgeteaksta)",
@@ -1332,7 +1333,8 @@ const messages = {
       concept: "Čilgehus",
       h5p: "H5P",
       external: "Olgguldas resursa",
-      gloss: "Glose"
+      gloss: "Glose",
+      copyright: "Tekst"
     }
   },
   gloss: {

package/lib/locale/messages-sma.d.ts

@@ -449,6 +449,7 @@ declare const messages: {
             description: string;
             rules: string;
             title: string;
+            showOrHideExamples: string;
             embedlink: {
                 heading: string;
                 description: string;
@@ -1314,6 +1315,7 @@ declare const messages: {
             h5p: string;
             external: string;
             gloss: string;
+            copyright: string;
         };
     };
     gloss: {

package/lib/locale/messages-sma.js

@@ -468,6 +468,7 @@ const messages = {
       description: "Mujhtieh sisvege aktene raajesisnie maahta jeatjah lisensem utnedh enn jïjtjehke raajesisnie",
       rules: "Njoelkedassh guktie diejvesem nåhtadidh:",
       title: "Tihtele",
+      showOrHideExamples: "Vuesiehtimmieh vuesiehtidh jallh vöörhkedh",
       embedlink: {
         heading: "Naemhtie gïelem jeatjah sisvegisnie vuesehte",
         description: "Daate lïenghke vuesehte tjoejh konteksten namhtah (meny jïh nueliekapihtele)",
@@ -1332,7 +1333,8 @@ const messages = {
       concept: "Forklaring",
       h5p: "H5P",
       external: "Ekstern ressurs",
-      gloss: "Glosa"
+      gloss: "Glosa",
+      copyright: "Tekst"
     }
   },
   gloss: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "50.9.21",
+  "version": "50.10.1",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,23 +31,23 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^3.0.30",
-    "@ndla/button": "^12.0.34",
-    "@ndla/carousel": "^4.0.32",
-    "@ndla/core": "^4.4.1",
-    "@ndla/dropdown-menu": "^1.0.29",
-    "@ndla/forms": "^7.0.1",
+    "@ndla/accordion": "^3.0.31",
+    "@ndla/button": "^12.0.35",
+    "@ndla/carousel": "^4.0.33",
+    "@ndla/core": "^4.4.2",
+    "@ndla/dropdown-menu": "^1.0.30",
+    "@ndla/forms": "^7.0.3",
     "@ndla/hooks": "^2.1.5",
-    "@ndla/icons": "^5.0.11",
+    "@ndla/icons": "^5.0.12",
     "@ndla/licenses": "^7.2.5",
-    "@ndla/modal": "^5.0.31",
-    "@ndla/notion": "^6.0.32",
-    "@ndla/safelink": "^4.1.59",
-    "@ndla/select": "^3.3.6",
-    "@ndla/switch": "^1.1.35",
-    "@ndla/tabs": "^3.2.15",
-    "@ndla/tooltip": "^6.0.18",
-    "@ndla/typography": "^0.4.12",
+    "@ndla/modal": "^5.0.32",
+    "@ndla/notion": "^6.0.33",
+    "@ndla/safelink": "^4.1.60",
+    "@ndla/select": "^3.3.7",
+    "@ndla/switch": "^1.1.36",
+    "@ndla/tabs": "^3.2.16",
+    "@ndla/tooltip": "^6.0.19",
+    "@ndla/typography": "^0.4.13",
     "@ndla/util": "^4.0.4",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slider": "^1.1.2",
@@ -71,7 +71,7 @@
   },
   "devDependencies": {
     "@ndla/types-backend": "^0.2.21",
-    "@ndla/types-embed": "^4.0.19",
+    "@ndla/types-embed": "^4.1.0",
     "css-loader": "^6.7.3",
     "mini-css-extract-plugin": "^2.7.5",
     "sass-loader": "^13.2.2",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a989d47056d7398c88ac9c74c2efbde7c1418a0c"
+  "gitHead": "6d5e717f95c71a9548584cf88493e22ed51f77b4"
 }

package/src/Article/Article.tsx

@@ -10,7 +10,7 @@ import { ReactNode, useEffect, useRef, useState, forwardRef } from "react";
 import BEMHelper from "react-bem-helper";
 import styled from "@emotion/styled";
 
-import { spacing, spacingUnit, mq, breakpoints } from "@ndla/core";
+import { spacing, mq, breakpoints } from "@ndla/core";
 import { useIntersectionObserver } from "@ndla/hooks";
 import { Heading, Text } from "@ndla/typography";
 import { resizeObserver } from "@ndla/util";
@@ -100,12 +100,6 @@ const ArticleFavoritesButtonWrapper = styled.div`
   ${mq.range({ from: breakpoints.tablet })} {
     transform: translate(${spacing.normal}, -${spacing.medium});
   }
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    transform: translate(${spacing.large}, -${spacing.medium});
-  }
-  ${mq.range({ from: breakpoints.desktop })} {
-    transform: translate(${spacingUnit * 5.5}px, -${spacing.medium});
-  }
 `;
 
 type Props = {

package/src/Article/component.article.scss

@@ -145,10 +145,6 @@
 .c-article__title--icon {
   padding-left: 80px;
 
-  @include mq(desktop) {
-    padding-left: 0;
-  }
-
   [data-badge] {
     position: absolute;
     left: 0;
@@ -156,10 +152,5 @@
     @include mq(tablet) {
       top: $spacing--xsmall;
     }
-
-    @include mq(desktop) {
-      left: -80px;
-      top: $spacing--xsmall;
-    }
   }
 }

package/src/Embed/CopyrightEmbed.tsx

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2024-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 { CopyrightMetaData } from "@ndla/types-embed";
+import { EmbedByline } from "../LicenseByline";
+
+interface Props {
+  embed: CopyrightMetaData;
+  children?: ReactNode;
+}
+
+const StyledFigCaption = styled.figcaption`
+  background: unset;
+  font-size: unset;
+  padding: unset;
+  color: unset;
+`;
+
+const CopyrightEmbed = ({ embed, children }: Props) => {
+  return (
+    <figure>
+      {children}
+      <StyledFigCaption>
+        <EmbedByline type="copyright" copyright={embed.embedData.copyright} bottomRounded />
+      </StyledFigCaption>
+    </figure>
+  );
+};
+
+export default CopyrightEmbed;

package/src/Embed/index.ts

@@ -21,4 +21,5 @@ export { default as ConceptListEmbed } from "./ConceptListEmbed";
 export { default as UnknownEmbed } from "./UnknownEmbed";
 export { InlineConcept, BlockConcept } from "./ConceptEmbed";
 export { default as UuDisclaimerEmbed } from "./UuDisclaimerEmbed";
+export { default as CopyrightEmbed } from "./CopyrightEmbed";
 export type { HeartButtonType, CanonicalUrlFuncs, RenderContext } from "./types";

package/src/FramedContent/FramedContent.stories.tsx

@@ -7,9 +7,11 @@
  */
 
 import { Meta, StoryObj } from "@storybook/react";
+import { CopyrightMetaData } from "@ndla/types-embed";
 import FramedContent from "./FramedContent";
 import FigureImage from "../../../../stories/article/FigureImage";
 import { defaultParameters } from "../../../../stories/defaults";
+import { CopyrightEmbed } from "../Embed";
 
 export default {
   title: "Components/FramedContent",
@@ -86,3 +88,48 @@ export const TooMuchContent: StoryObj<typeof FramedContent> = {
     ),
   },
 };
+
+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>
+      </>
+    ),
+  },
+};

package/src/FramedContent/FramedContent.tsx

@@ -33,14 +33,6 @@ const StyledFramedContent = styled.div`
       margin-left: 0;
     }
   }
-
-  &:first-child {
-    margin-top: 0;
-  }
-
-  &:last-child {
-    margin-bottom: 0;
-  }
 `;
 
 const FramedContent = forwardRef<HTMLDivElement, ComponentPropsWithRef<"div">>(({ children, ...rest }, ref) => (

package/src/Gloss/Gloss.stories.tsx

@@ -8,6 +8,7 @@
 
 import { Meta, StoryObj, StoryFn } from "@storybook/react";
 import Gloss from "./Gloss";
+import GlossExample from "./GlossExample";
 import { defaultParameters } from "../../../../stories/defaults";
 import { wordClass } from "../model/WordClass";
 
@@ -105,3 +106,15 @@ export const GlossChineseStory: StoryObj<typeof Gloss> = {
     },
   },
 };
+
+const GlossExampleText = {
+  example: "我叫马红",
+  language: "zh",
+  transcriptions: {
+    pinyin: "wo jiao ma hong",
+  },
+};
+
+export const GlossExampleStory: StoryFn<typeof Gloss> = () => {
+  return <GlossExample originalLanguage="zh" index={0} example={GlossExampleText} isStandalone />;
+};

package/src/Gloss/Gloss.tsx

@@ -41,6 +41,10 @@ const Wrapper = styled.div`
   flex-wrap: wrap;
   justify-content: space-between;
   padding: ${spacing.nsmall} ${spacing.normal} 0 ${spacing.normal};
+  span {
+    ${fonts.size.text.content}
+    font-family: ${fonts.sans};
+  }
 `;
 
 const GlossContainer = styled.div`
@@ -48,9 +52,6 @@ const GlossContainer = styled.div`
   align-items: center;
   flex-wrap: wrap;
   gap: ${spacing.nsmall};
-  span {
-    ${fonts.size.text.metaText.small};
-  }
   span[data-pinyin] {
     font-style: italic;
   }
@@ -168,7 +169,7 @@ const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs }: Props) =>
               <>
                 <StyledWrapper>
                   <span lang={title.language}>{title.title}</span>
-                  <StyledTrigger data-styled-trigger>
+                  <StyledTrigger data-styled-trigger aria-label={t("gloss.examples")}>
                     <StyledChevron />
                   </StyledTrigger>
                 </StyledWrapper>
@@ -181,7 +182,6 @@ const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs }: Props) =>
                           example={example}
                           originalLanguage={glossData.originalLanguage}
                           index={innerIndex}
-                          lastExampleIndex={examples.length - 1}
                         />
                       ))}
                     </div>

package/src/Gloss/GlossExample.tsx

@@ -15,30 +15,42 @@ export interface Props {
   example: IGlossExample;
   originalLanguage: string | undefined;
   index: number;
-  lastExampleIndex: number;
+  isStandalone?: boolean;
 }
 
 const StyledGlossExampleWrapper = styled.div`
-  &:first-of-type {
+  &[data-is-standalone="true"] {
+    &:first-of-type {
+      border-top: 1px solid ${colors.brand.lighter};
+    }
+  }
+
+  &:first-of-type&:not([data-is-standalone="true"]) {
     border-top: 1px solid ${colors.brand.primary};
   }
-  &:last-of-type {
-    border-radius: ${misc.borderRadius};
+
+  &[data-is-standalone="false"] {
+    &:not(:last-child) {
+      div {
+        border-bottom: 1px solid ${colors.brand.lighter};
+        border-radius: 0;
+      }
+    }
   }
-  background-color: ${colors.background.default};
 `;
 
 const StyledGlossExample = styled.div`
   padding: ${spacing.small} ${spacing.normal};
-  border-bottom: 1px solid ${colors.brand.lighter};
   background-color: ${colors.background.default};
+  border: 1px solid ${colors.brand.lighter};
+  border-top: none;
+
   &[data-is-first="true"] {
     background-color: ${colors.background.lightBlue};
-    border-radius: 0px;
   }
-  &[data-is-last="true"] {
+  &[data-is-standalone="false"] {
+    border: none;
     border-radius: ${misc.borderRadius};
-    border-bottom: none;
   }
 `;
 
@@ -52,23 +64,27 @@ const StyledText = styled(Text)`
   }
 `;
 
-const GlossExample = ({ example, originalLanguage, index, lastExampleIndex }: Props) => {
+const GlossExample = ({ example, originalLanguage, index, isStandalone = false }: Props) => {
   return (
-    <StyledGlossExampleWrapper>
-      <StyledGlossExample data-is-first={index === 0} data-is-last={index === lastExampleIndex} lang={example.language}>
+    <StyledGlossExampleWrapper data-is-standalone={isStandalone}>
+      <StyledGlossExample data-is-first={index === 0} lang={example.language} data-is-standalone={isStandalone}>
         <StyledText data-is-first={index === 0} textStyle="meta-text-medium" margin="none">
           {example.example}
         </StyledText>
       </StyledGlossExample>
       {example.transcriptions.pinyin && (
-        <StyledGlossExample lang={originalLanguage}>
+        <StyledGlossExample
+          lang={originalLanguage}
+          data-is-standalone={isStandalone}
+          data-is-last={example.transcriptions.traditional?.length === 0}
+        >
           <StyledText data-pinyin textStyle="meta-text-medium" margin="none">
             {example.transcriptions?.pinyin}
           </StyledText>
         </StyledGlossExample>
       )}
       {example.transcriptions.traditional && (
-        <StyledGlossExample lang={originalLanguage}>
+        <StyledGlossExample lang={originalLanguage} data-is-standalone={isStandalone} data-is-last>
           <StyledText textStyle="meta-text-medium" margin="none">
             {example.transcriptions?.traditional}
           </StyledText>

package/src/Layout/LayoutItem.tsx

@@ -6,36 +6,28 @@
  *
  */
 
-import { HTMLAttributes, ReactNode } from "react";
+import { HTMLAttributes, ReactNode, useMemo } from "react";
 
 interface Props extends HTMLAttributes<HTMLElement> {
   children?: ReactNode;
-  layout?: string;
+  layout?: "extend" | "center";
 }
 
 export const LayoutItem = ({ children, layout, ...rest }: Props) => {
-  switch (layout) {
-    case "extend": {
-      return (
-        <section className="u-10/12@desktop u-push-1/12@desktop u-10/12@tablet u-push-1/12@tablet">{children}</section>
-      );
+  const className = useMemo(() => {
+    if (layout === "extend") {
+      return "u-10/12@desktop u-push-1/12@desktop u-10/12@tablet u-push-1/12@tablet";
+    } else if (layout === "center") {
+      return "u-10/12 u-push-1/12";
     }
-    case "center": {
-      return (
-        <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">{children}</section>
-      );
-    }
-    case "full": {
-      return <section className="u-1/1@desktop">{children}</section>;
-    }
-    default: {
-      return (
-        <section className="o-layout__item" {...rest}>
-          {children}
-        </section>
-      );
-    }
-  }
+    return undefined;
+  }, [layout]);
+
+  return (
+    <section className={className} {...rest}>
+      {children}
+    </section>
+  );
 };
 
 export default LayoutItem;

package/src/LicenseByline/EmbedByline.tsx

@@ -13,6 +13,7 @@ import styled from "@emotion/styled";
 import { breakpoints, colors, fonts, misc, mq, spacing } from "@ndla/core";
 import { WarningOutline } from "@ndla/icons/common";
 import { getLicenseByAbbreviation, getLicenseCredits } from "@ndla/licenses";
+import { ICopyright as ArticleCopyright } from "@ndla/types-backend/article-api";
 import { ICopyright as AudioCopyright } from "@ndla/types-backend/audio-api";
 import { IDraftCopyright as ConceptCopyright } from "@ndla/types-backend/concept-api";
 import { ICopyright as ImageCopyright } from "@ndla/types-backend/image-api";
@@ -62,7 +63,18 @@ interface ConceptProps extends BaseProps {
   copyright: ConceptCopyright | undefined;
 }
 
-export type EmbedBylineTypeProps = ImageProps | BrightcoveProps | AudioProps | PodcastProps | ConceptProps;
+interface CopyrightProps extends BaseProps {
+  type: "copyright";
+  copyright: ArticleCopyright | undefined;
+}
+
+export type EmbedBylineTypeProps =
+  | ImageProps
+  | BrightcoveProps
+  | AudioProps
+  | PodcastProps
+  | ConceptProps
+  | CopyrightProps;
 
 type Props = EmbedBylineTypeProps | EmbedBylineErrorProps;