@ndla/ui 56.0.39-alpha.0 → 56.0.40-alpha.0

package/dist/panda.buildinfo.json

@@ -297,6 +297,7 @@
       "outlineColor]___[value:stroke.default]___[cond:_focusVisible<___>_after",
       "outlineOffset]___[value:3px]___[cond:_focusVisible<___>_after",
       "outlineStyle]___[value:solid]___[cond:_focusVisible<___>_after",
+      "paddingInlineStart]___[value:4xsmall",
       "textAlign]___[value:center",
       "color]___[value:text.strong]___[cond:& a",
       "marginTop]___[value:0]___[cond:& h1",
@@ -375,6 +376,7 @@
       "borderColor]___[value:surface.brand.2",
       "top]___[value:var(--masthead-height, 0px)]___[cond:& > div",
       "position]___[value:sticky]___[cond:& > div",
+      "paddingBlock]___[value:xxlarge]___[cond:&:not(:has(> img))",
       "width]___[value:surface.3xsmall",
       "textStyle]___[value:heading.large",
       "textStyle]___[value:title.medium",

package/dist/styles.css

@@ -546,6 +546,10 @@
     padding-inline: var(--spacing-4xsmall);
 }
 
+  .ps_4xsmall {
+    padding-inline-start: var(--spacing-4xsmall);
+}
+
   .ta_center {
     text-align: center;
 }
@@ -1179,6 +1183,10 @@
     position: sticky;
 }
 
+  .\[\&\:not\(\:has\(\>_img\)\)\]\:py_xxlarge:not(:has(> img)) {
+    padding-block: var(--spacing-xxlarge);
+}
+
   .after\:d_block\!::after {
     display: block !important;
 }

package/es/Article/Article.js

@@ -109,6 +109,7 @@ export const ArticleTitle = _ref2 => {
     lang,
     id,
     introduction,
+    contentTypeLabel,
     competenceGoals
   } = _ref2;
   return /*#__PURE__*/_jsxs(ArticleHeader, {
@@ -119,7 +120,8 @@ export const ArticleTitle = _ref2 => {
         direction: "row",
         gap: "small",
         children: [!!contentType && /*#__PURE__*/_jsx(ContentTypeBadgeNew, {
-          contentType: contentType
+          contentType: contentType,
+          children: contentTypeLabel
         }), heartButton]
       }), /*#__PURE__*/_jsx(Heading, {
         textStyle: "heading.medium",
@@ -146,6 +148,7 @@ export const Article = _ref3 => {
     licenseBox,
     children,
     competenceGoals,
+    contentTypeLabel,
     id,
     heartButton,
     lang
@@ -167,7 +170,8 @@ export const Article = _ref3 => {
       title: title,
       introduction: introduction,
       competenceGoals: competenceGoals,
-      lang: lang
+      lang: lang,
+      contentTypeLabel: contentTypeLabel
     }), /*#__PURE__*/_jsx(ArticleContent, {
       children: content
     }), /*#__PURE__*/_jsxs(ArticleFooter, {

package/es/Embed/UuDisclaimerEmbed.js

@@ -6,12 +6,11 @@
  *
  */
 
-import { useTranslation } from "react-i18next";
 import { InformationLine } from "@ndla/icons/common";
 import { MessageBox } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const StyledMessageBox = styled(MessageBox, {
   base: {
     display: "flex",
@@ -24,14 +23,16 @@ const Disclaimer = styled("div", {
     textStyle: "body.medium"
   }
 });
+const StyledSafeLink = styled(SafeLink, {
+  base: {
+    paddingInlineStart: "4xsmall"
+  }
+});
 const UuDisclaimerEmbed = _ref => {
   let {
     embed,
     children
   } = _ref;
-  const {
-    t
-  } = useTranslation();
   if (embed.status === "error") {
     return null;
   }
@@ -39,13 +40,11 @@ const UuDisclaimerEmbed = _ref => {
     embedData,
     data
   } = embed;
-  const disclaimerLink = data?.disclaimerLink ? /*#__PURE__*/_jsxs(_Fragment, {
-    children: [` ${t("uuDisclaimer.alternative")} `, /*#__PURE__*/_jsx(SafeLink, {
-      to: data.disclaimerLink.href,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      children: data.disclaimerLink.text
-    })]
+  const disclaimerLink = data?.disclaimerLink ? /*#__PURE__*/_jsx(StyledSafeLink, {
+    to: data.disclaimerLink.href,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    children: data.disclaimerLink.text
   }) : null;
   return /*#__PURE__*/_jsxs("div", {
     role: "region",

package/es/KeyFigure/KeyFigure.js

@@ -14,7 +14,11 @@ const ContentWrapper = styled("div", {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    gap: "xsmall",
+    "&:not(:has(> img))": {
+      paddingBlock: "xxlarge"
+    }
   }
 });
 const StyledImage = styled("img", {

package/es/locale/messages-en.js

@@ -1404,9 +1404,6 @@ const messages = {
       pinyin: "Pinyin"
     }
   },
-  uuDisclaimer: {
-    alternative: "You can find alternative content in the article"
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjective",
     [wordClass.wordClass.adverb]: "Adverb",

package/es/locale/messages-nb.js

@@ -1404,9 +1404,6 @@ const messages = {
       pinyin: "Pinyin"
     }
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhold i artikkelen"
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",

package/es/locale/messages-nn.js

@@ -1404,9 +1404,6 @@ const messages = {
       pinyin: "Pinyin"
     }
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhald i artikkelen"
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",

package/es/locale/messages-se.js

@@ -1404,9 +1404,6 @@ const messages = {
       pinyin: "Pinyin"
     }
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhold i artikkelen"
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiivvat",
     [wordClass.wordClass.adverb]: "Advearba",

package/es/locale/messages-sma.js

@@ -1404,9 +1404,6 @@ const messages = {
       pinyin: "Pinyin"
     }
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhold i artikkelen"
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",

package/lib/Article/Article.d.ts

@@ -28,22 +28,24 @@ export declare const ArticleFooter: import("@ndla/styled-system/types").StyledCo
 interface ArticleTitleProps {
     heartButton?: ReactNode;
     contentType?: ContentType;
+    contentTypeLabel?: ReactNode;
     competenceGoals?: ReactNode;
     id: string;
     lang?: string;
     title?: ReactNode;
     introduction?: ReactNode;
 }
-export declare const ArticleTitle: ({ contentType, heartButton, title, lang, id, introduction, competenceGoals, }: ArticleTitleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ArticleTitle: ({ contentType, heartButton, title, lang, id, introduction, contentTypeLabel, competenceGoals, }: ArticleTitleProps) => import("react/jsx-runtime").JSX.Element;
 interface Props {
     heartButton?: ReactNode;
     article: ArticleType;
     licenseBox?: ReactNode;
     contentType?: ContentType;
+    contentTypeLabel?: ReactNode;
     children?: ReactNode;
     competenceGoals?: ReactNode;
     id: string;
     lang?: string;
 }
-export declare const Article: ({ article, contentType, licenseBox, children, competenceGoals, id, heartButton, lang, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Article: ({ article, contentType, licenseBox, children, competenceGoals, contentTypeLabel, id, heartButton, lang, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/Article/Article.js

@@ -115,6 +115,7 @@ const ArticleTitle = _ref2 => {
     lang,
     id,
     introduction,
+    contentTypeLabel,
     competenceGoals
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleHeader, {
@@ -125,7 +126,8 @@ const ArticleTitle = _ref2 => {
         direction: "row",
         gap: "small",
         children: [!!contentType && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ContentTypeBadgeNew, {
-          contentType: contentType
+          contentType: contentType,
+          children: contentTypeLabel
         }), heartButton]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Heading, {
         textStyle: "heading.medium",
@@ -153,6 +155,7 @@ const Article = _ref3 => {
     licenseBox,
     children,
     competenceGoals,
+    contentTypeLabel,
     id,
     heartButton,
     lang
@@ -174,7 +177,8 @@ const Article = _ref3 => {
       title: title,
       introduction: introduction,
       competenceGoals: competenceGoals,
-      lang: lang
+      lang: lang,
+      contentTypeLabel: contentTypeLabel
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ArticleContent, {
       children: content
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleFooter, {

package/lib/Embed/UuDisclaimerEmbed.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _reactI18next = require("react-i18next");
 var _common = require("@ndla/icons/common");
 var _primitives = require("@ndla/primitives");
 var _safelink = require("@ndla/safelink");
@@ -30,14 +29,16 @@ const Disclaimer = (0, _jsx2.styled)("div", {
     textStyle: "body.medium"
   }
 });
+const StyledSafeLink = (0, _jsx2.styled)(_safelink.SafeLink, {
+  base: {
+    paddingInlineStart: "4xsmall"
+  }
+});
 const UuDisclaimerEmbed = _ref => {
   let {
     embed,
     children
   } = _ref;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
   if (embed.status === "error") {
     return null;
   }
@@ -45,13 +46,11 @@ const UuDisclaimerEmbed = _ref => {
     embedData,
     data
   } = embed;
-  const disclaimerLink = data?.disclaimerLink ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [` ${t("uuDisclaimer.alternative")} `, /*#__PURE__*/(0, _jsxRuntime.jsx)(_safelink.SafeLink, {
-      to: data.disclaimerLink.href,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      children: data.disclaimerLink.text
-    })]
+  const disclaimerLink = data?.disclaimerLink ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSafeLink, {
+    to: data.disclaimerLink.href,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    children: data.disclaimerLink.text
   }) : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     role: "region",

package/lib/KeyFigure/KeyFigure.js

@@ -21,7 +21,11 @@ const ContentWrapper = (0, _jsx2.styled)("div", {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    gap: "xsmall",
+    "&:not(:has(> img))": {
+      paddingBlock: "xxlarge"
+    }
   }
 });
 const StyledImage = (0, _jsx2.styled)("img", {

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

@@ -1394,9 +1394,6 @@ declare const messages: {
             pinyin: string;
         };
     };
-    uuDisclaimer: {
-        alternative: string;
-    };
     wordClass: {
         [x: string]: string;
     };

package/lib/locale/messages-en.js

@@ -1411,9 +1411,6 @@ const messages = {
       pinyin: "Pinyin"
     }
   },
-  uuDisclaimer: {
-    alternative: "You can find alternative content in the article"
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjective",
     [wordClass.wordClass.adverb]: "Adverb",

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

@@ -1394,9 +1394,6 @@ declare const messages: {
             pinyin: string;
         };
     };
-    uuDisclaimer: {
-        alternative: string;
-    };
     wordClass: {
         [x: string]: string;
     };

package/lib/locale/messages-nb.js

@@ -1411,9 +1411,6 @@ const messages = {
       pinyin: "Pinyin"
     }
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhold i artikkelen"
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",

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

@@ -1394,9 +1394,6 @@ declare const messages: {
             pinyin: string;
         };
     };
-    uuDisclaimer: {
-        alternative: string;
-    };
     wordClass: {
         [x: string]: string;
     };

package/lib/locale/messages-nn.js

@@ -1411,9 +1411,6 @@ const messages = {
       pinyin: "Pinyin"
     }
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhald i artikkelen"
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",

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

@@ -1394,9 +1394,6 @@ declare const messages: {
             pinyin: string;
         };
     };
-    uuDisclaimer: {
-        alternative: string;
-    };
     wordClass: {
         [x: string]: string;
     };

package/lib/locale/messages-se.js

@@ -1411,9 +1411,6 @@ const messages = {
       pinyin: "Pinyin"
     }
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhold i artikkelen"
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiivvat",
     [wordClass.wordClass.adverb]: "Advearba",

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

@@ -1394,9 +1394,6 @@ declare const messages: {
             pinyin: string;
         };
     };
-    uuDisclaimer: {
-        alternative: string;
-    };
     wordClass: {
         [x: string]: string;
     };

package/lib/locale/messages-sma.js

@@ -1411,9 +1411,6 @@ const messages = {
       pinyin: "Pinyin"
     }
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhold i artikkelen"
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.39-alpha.0",
+  "version": "56.0.40-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -58,5 +58,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "84234a46743d9d044f220e90e6710e2da307d65d"
+  "gitHead": "4bdd26c1af4c3ed459924af5888de4040de6d47b"
 }

package/src/Article/Article.tsx

@@ -113,6 +113,7 @@ const StyledStack = styled(Stack, {
 interface ArticleTitleProps {
   heartButton?: ReactNode;
   contentType?: ContentType;
+  contentTypeLabel?: ReactNode;
   competenceGoals?: ReactNode;
   id: string;
   lang?: string;
@@ -127,6 +128,7 @@ export const ArticleTitle = ({
   lang,
   id,
   introduction,
+  contentTypeLabel,
   competenceGoals,
 }: ArticleTitleProps) => {
   return (
@@ -134,7 +136,7 @@ export const ArticleTitle = ({
       <ArticleHGroup>
         {(!!contentType || !!heartButton) && (
           <StyledStack justify="space-between" align="center" direction="row" gap="small">
-            {!!contentType && <ContentTypeBadgeNew contentType={contentType} />}
+            {!!contentType && <ContentTypeBadgeNew contentType={contentType}>{contentTypeLabel}</ContentTypeBadgeNew>}
             {heartButton}
           </StyledStack>
         )}
@@ -157,6 +159,7 @@ interface Props {
   article: ArticleType;
   licenseBox?: ReactNode;
   contentType?: ContentType;
+  contentTypeLabel?: ReactNode;
   children?: ReactNode;
   competenceGoals?: ReactNode;
   id: string;
@@ -169,6 +172,7 @@ export const Article = ({
   licenseBox,
   children,
   competenceGoals,
+  contentTypeLabel,
   id,
   heartButton,
   lang,
@@ -188,6 +192,7 @@ export const Article = ({
         introduction={introduction}
         competenceGoals={competenceGoals}
         lang={lang}
+        contentTypeLabel={contentTypeLabel}
       />
       <ArticleContent>{content}</ArticleContent>
       <ArticleFooter>

package/src/Embed/UuDisclaimerEmbed.tsx

@@ -7,7 +7,6 @@
  */
 
 import { ReactNode } from "react";
-import { useTranslation } from "react-i18next";
 import { InformationLine } from "@ndla/icons/common";
 import { MessageBox } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
@@ -31,10 +30,13 @@ const Disclaimer = styled("div", {
     textStyle: "body.medium",
   },
 });
+const StyledSafeLink = styled(SafeLink, {
+  base: {
+    paddingInlineStart: "4xsmall",
+  },
+});
 
 const UuDisclaimerEmbed = ({ embed, children }: Props) => {
-  const { t } = useTranslation();
-
   if (embed.status === "error") {
     return null;
   }
@@ -42,12 +44,9 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => {
   const { embedData, data } = embed;
 
   const disclaimerLink = data?.disclaimerLink ? (
-    <>
-      {` ${t("uuDisclaimer.alternative")} `}
-      <SafeLink to={data.disclaimerLink.href} target="_blank" rel="noopener noreferrer">
-        {data.disclaimerLink.text}
-      </SafeLink>
-    </>
+    <StyledSafeLink to={data.disclaimerLink.href} target="_blank" rel="noopener noreferrer">
+      {data.disclaimerLink.text}
+    </StyledSafeLink>
   ) : null;
 
   return (

package/src/Grid/Grid.stories.tsx

@@ -50,7 +50,11 @@ export const GridKeyPerformanceStory: StoryFn<typeof Grid> = ({ ...args }) => {
   const columns = args.columns === "2x2" ? 4 : parseInt(args.columns);
   const items = new Array(columns).fill(0).map((_, idx) => {
     const args = keyFigureArgs[idx % keyFigureArgs.length];
-    return <Plain key={idx} {...args} />;
+    return (
+      <div key={idx} data-type="grid-cell" data-parallax-cell="false">
+        <Plain key={idx} {...args} />
+      </div>
+    );
   });
   return <Grid {...args}>{items}</Grid>;
 };
@@ -58,14 +62,16 @@ export const GridKeyPerformanceStory: StoryFn<typeof Grid> = ({ ...args }) => {
 export const GridBlogPostStory: StoryFn<typeof Grid> = ({ ...args }) => {
   const columns = args.columns === "2x2" ? 4 : parseInt(args.columns);
   const items = new Array(columns).fill(
-    <BlogPostStory
-      metaImage={BlogPostStory.args?.metaImage!}
-      title={BlogPostStory.args?.title!}
-      size={"normal"}
-      headingLevel={BlogPostStory.args?.headingLevel}
-      url={BlogPostStory.args?.url!}
-      author={BlogPostStory.args?.author}
-    />,
+    <div data-type="grid-cell" data-parallax-cell="false">
+      <BlogPostStory
+        metaImage={BlogPostStory.args?.metaImage!}
+        title={BlogPostStory.args?.title!}
+        size={"normal"}
+        headingLevel={BlogPostStory.args?.headingLevel}
+        url={BlogPostStory.args?.url!}
+        author={BlogPostStory.args?.author}
+      />
+    </div>,
   );
   return <Grid {...args}>{items}</Grid>;
 };

package/src/KeyFigure/KeyFigure.tsx

@@ -15,6 +15,11 @@ const ContentWrapper = styled("div", {
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
+    gap: "xsmall",
+
+    "&:not(:has(> img))": {
+      paddingBlock: "xxlarge",
+    },
   },
 });
 

package/src/locale/messages-en.ts

@@ -1437,9 +1437,6 @@ const messages = {
       pinyin: "Pinyin",
     },
   },
-  uuDisclaimer: {
-    alternative: "You can find alternative content in the article",
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjective",
     [wordClass.wordClass.adverb]: "Adverb",

package/src/locale/messages-nb.ts

@@ -1437,9 +1437,6 @@ const messages = {
       pinyin: "Pinyin",
     },
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhold i artikkelen",
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",

package/src/locale/messages-nn.ts

@@ -1436,9 +1436,6 @@ const messages = {
       pinyin: "Pinyin",
     },
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhald i artikkelen",
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",

package/src/locale/messages-se.ts

@@ -1439,9 +1439,6 @@ const messages = {
       pinyin: "Pinyin",
     },
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhold i artikkelen",
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiivvat",
     [wordClass.wordClass.adverb]: "Advearba",

package/src/locale/messages-sma.ts

@@ -1441,9 +1441,6 @@ const messages = {
       pinyin: "Pinyin",
     },
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhold i artikkelen",
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",