@ndla/ui 56.0.92-alpha.0 → 56.0.93-alpha.0

package/dist/panda.buildinfo.json

@@ -219,14 +219,6 @@
       "clear]___[value:both]___[cond:& + [data-embed-wrapper]",
       "height]___[value:auto]___[cond:& iframe",
       "width]___[value:100%]___[cond:& iframe",
-      "color]___[value:text.link",
-      "textDecoration]___[value:unset]___[cond:_hover",
-      "backgroundColor]___[value:surface.brand.2.subtle",
-      "borderRadius]___[value:xxsmall",
-      "borderColor]___[value:stroke.info",
-      "lineClamp]___[value:1",
-      "inset]___[value:0]___[cond:_before",
-      "zIndex]___[value:0]___[cond:_before",
       "textStyle]___[value:label.xsmall]___[cond:& a",
       "marginInlineStart]___[value:1]___[cond:& a",
       "borderRadius]___[value:0]___[cond:& img",
@@ -298,6 +290,8 @@
       "paddingInlineEnd]___[value:medium",
       "paddingInlineStart]___[value:small",
       "flexDirection]___[value:row",
+      "inset]___[value:0]___[cond:_before",
+      "zIndex]___[value:0]___[cond:_before",
       "background]___[value:surface.infoSubtle",
       "borderBlockEnd]___[value:1px solid",
       "backgroundColor]___[value:surface.infoSubtle.hover]___[cond:_hover",
@@ -351,6 +345,7 @@
       "whiteSpace]___[value:pre-wrap]___[cond:mobileWideDown<___>_open",
       "maxHeight]___[value:none]___[cond:mobileWideDown<___>_open",
       "display]___[value:none]___[cond:mobileWide",
+      "color]___[value:text.link",
       "whiteSpace]___[value:nowrap",
       "textDecoration]___[value:none]___[cond:_focusWithin",
       "display]___[value:none]___[cond:mobileWideDown<___>_disabled",

package/dist/styles.css

@@ -445,21 +445,6 @@
     background: var(--colors-background-subtle);
 }
 
-  .c_text\.link {
-    color: var(--colors-text-link);
-}
-
-  .bdr_xxsmall {
-    border-radius: xxsmall;
-}
-
-  .lc_1 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-}
-
   .z_docked {
     z-index: var(--z-index-docked);
 }
@@ -544,6 +529,10 @@
     white-space: pre-wrap;
 }
 
+  .c_text\.link {
+    color: var(--colors-text-link);
+}
+
   .white-space_nowrap {
     white-space: nowrap;
 }
@@ -680,14 +669,6 @@
     border-color: var(--colors-stroke-hover);
 }
 
-  .bg-c_surface\.brand\.2\.subtle {
-    background-color: var(--colors-surface-brand-2-subtle);
-}
-
-  .bd-c_stroke\.info {
-    border-color: var(--colors-stroke-info);
-}
-
   .top_xsmall {
     top: var(--spacing-xsmall);
 }
@@ -918,14 +899,6 @@
     width: 100%;
 }
 
-  .before\:inset_0::before {
-    inset: 0;
-}
-
-  .before\:z_0::before {
-    z-index: 0;
-}
-
   .\[\&_a\]\:ms_1 a {
     margin-inline-start: var(--spacing-1);
 }
@@ -994,6 +967,14 @@
     padding-block-end: var(--spacing-xsmall);
 }
 
+  .before\:inset_0::before {
+    inset: 0;
+}
+
+  .before\:z_0::before {
+    z-index: 0;
+}
+
   .first\:bg_surface\.brand\.1\.subtle:first-child {
     background: var(--colors-surface-brand-1-subtle);
 }
@@ -1149,10 +1130,6 @@
     background: var(--colors-surface-action-subtle-hover);
 }
 
-  .hover\:td_unset:is(:hover, [data-hover]) {
-    text-decoration: unset;
-}
-
   .hover\:bd-c_text\.link:is(:hover, [data-hover]) {
     border-color: var(--colors-text-link);
 }

package/es/Article/ArticleByline.js

@@ -123,10 +123,10 @@ export const ArticleByline = _ref => {
             escapeValue: false
           }
         })}. `, getSuppliersText(suppliers, t)]
-      }), /*#__PURE__*/_jsxs("div", {
+      }), published ? /*#__PURE__*/_jsxs("div", {
         "data-contributors": showPrimaryContributors,
         children: [t(`${bylineType}.lastUpdated`), " ", published]
-      })]
+      }) : null]
     }), (!!licenseBox || !!footnotes?.length) && /*#__PURE__*/_jsxs(StyledAccordionRoot, {
       multiple: true,
       value: openAccordions,

package/es/Embed/ExternalEmbed.js

@@ -8,14 +8,11 @@
 
 import { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { ArrowRightShortLine } from "@ndla/icons";
-import { Figure, Text } from "@ndla/primitives";
-import { SafeLink } from "@ndla/safelink";
+import { Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import { linkOverlay } from "@ndla/styled-system/patterns";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import { ResourceBox } from "../ResourceBox";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const StyledFigure = styled(Figure, {
   base: {
     "& iframe": {
@@ -24,54 +21,6 @@ const StyledFigure = styled(Figure, {
     }
   }
 });
-
-// TODO: Move this to own component in UI? Use variant of existing?
-const StyledSafeLink = styled(SafeLink, {
-  base: {
-    textDecoration: "underline",
-    textStyle: "label.large",
-    color: "text.link",
-    fontWeight: "bold",
-    _hover: {
-      textDecoration: "unset"
-    }
-  }
-});
-const LinkWrapper = styled("div", {
-  base: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: "xsmall"
-  }
-});
-const TextWrapper = styled("div", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "flex-start",
-    gap: "xxsmall"
-  }
-});
-const Wrapper = styled("div", {
-  base: {
-    display: "flex",
-    width: "100%",
-    gap: "small",
-    flexDirection: "column",
-    backgroundColor: "surface.brand.2.subtle",
-    borderRadius: "xxsmall",
-    padding: "medium",
-    border: "1px solid",
-    borderColor: "stroke.info"
-  }
-});
-const UrlText = styled(Text, {
-  base: {
-    lineClamp: "1",
-    overflow: "hidden"
-  }
-});
 const ExternalEmbed = _ref => {
   let {
     embed
@@ -114,30 +63,6 @@ const ExternalEmbed = _ref => {
       })
     });
   }
-  if (embedData.type === "link") {
-    return /*#__PURE__*/_jsx(Figure, {
-      "data-embed-type": "external",
-      children: /*#__PURE__*/_jsxs(Wrapper, {
-        children: [/*#__PURE__*/_jsxs(LinkWrapper, {
-          children: [/*#__PURE__*/_jsxs(TextWrapper, {
-            children: [/*#__PURE__*/_jsx(StyledSafeLink, {
-              to: embedData.url,
-              unstyled: true,
-              css: linkOverlay.raw(),
-              children: embedData.title
-            }), /*#__PURE__*/_jsx(Text, {
-              textStyle: "label.medium",
-              children: embedData.caption
-            })]
-          }), /*#__PURE__*/_jsx(ArrowRightShortLine, {})]
-        }), /*#__PURE__*/_jsx(UrlText, {
-          textStyle: "label.medium",
-          color: "text.subtle",
-          children: embedData.url
-        })]
-      })
-    });
-  }
   return /*#__PURE__*/_jsx(StyledFigure, {
     "data-embed-type": "external",
     ref: figRef,

package/es/ResourceBox/ResourceBox.js

@@ -70,12 +70,12 @@ export const ResourceBox = _ref => {
     buttonText
   } = _ref;
   return /*#__PURE__*/_jsxs(Container, {
-    children: [/*#__PURE__*/_jsx(StyledImage, {
+    children: [image ? /*#__PURE__*/_jsx(StyledImage, {
       src: image.src,
       alt: image.alt,
       sizes: `(min-width: ${breakpoints.desktop}) 150px, (max-width: ${breakpoints.tablet} ) 400px, 200px`,
       variant: "rounded"
-    }), /*#__PURE__*/_jsxs(ContentWrapper, {
+    }) : null, /*#__PURE__*/_jsxs(ContentWrapper, {
       children: [/*#__PURE__*/_jsx(Heading, {
         textStyle: "label.large",
         fontWeight: "bold",

package/lib/Article/ArticleByline.js

@@ -129,10 +129,10 @@ const ArticleByline = _ref => {
             escapeValue: false
           }
         })}. `, getSuppliersText(suppliers, t)]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      }), published ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         "data-contributors": showPrimaryContributors,
         children: [t(`${bylineType}.lastUpdated`), " ", published]
-      })]
+      }) : null]
     }), (!!licenseBox || !!footnotes?.length) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledAccordionRoot, {
       multiple: true,
       value: openAccordions,

package/lib/Embed/ExternalEmbed.js

@@ -6,11 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _reactI18next = require("react-i18next");
-var _icons = require("@ndla/icons");
 var _primitives = require("@ndla/primitives");
-var _safelink = require("@ndla/safelink");
 var _jsx2 = require("@ndla/styled-system/jsx");
-var _patterns = require("@ndla/styled-system/patterns");
 var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
 var _ResourceBox = require("../ResourceBox");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -31,54 +28,6 @@ const StyledFigure = (0, _jsx2.styled)(_primitives.Figure, {
     }
   }
 });
-
-// TODO: Move this to own component in UI? Use variant of existing?
-const StyledSafeLink = (0, _jsx2.styled)(_safelink.SafeLink, {
-  base: {
-    textDecoration: "underline",
-    textStyle: "label.large",
-    color: "text.link",
-    fontWeight: "bold",
-    _hover: {
-      textDecoration: "unset"
-    }
-  }
-});
-const LinkWrapper = (0, _jsx2.styled)("div", {
-  base: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: "xsmall"
-  }
-});
-const TextWrapper = (0, _jsx2.styled)("div", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "flex-start",
-    gap: "xxsmall"
-  }
-});
-const Wrapper = (0, _jsx2.styled)("div", {
-  base: {
-    display: "flex",
-    width: "100%",
-    gap: "small",
-    flexDirection: "column",
-    backgroundColor: "surface.brand.2.subtle",
-    borderRadius: "xxsmall",
-    padding: "medium",
-    border: "1px solid",
-    borderColor: "stroke.info"
-  }
-});
-const UrlText = (0, _jsx2.styled)(_primitives.Text, {
-  base: {
-    lineClamp: "1",
-    overflow: "hidden"
-  }
-});
 const ExternalEmbed = _ref => {
   let {
     embed
@@ -121,30 +70,6 @@ const ExternalEmbed = _ref => {
       })
     });
   }
-  if (embedData.type === "link") {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Figure, {
-      "data-embed-type": "external",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(LinkWrapper, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(TextWrapper, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSafeLink, {
-              to: embedData.url,
-              unstyled: true,
-              css: _patterns.linkOverlay.raw(),
-              children: embedData.title
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-              textStyle: "label.medium",
-              children: embedData.caption
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ArrowRightShortLine, {})]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(UrlText, {
-          textStyle: "label.medium",
-          color: "text.subtle",
-          children: embedData.url
-        })]
-      })
-    });
-  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFigure, {
     "data-embed-type": "external",
     ref: figRef,

package/lib/ResourceBox/ResourceBox.d.ts

@@ -10,7 +10,7 @@ interface ImageMeta {
     alt: string;
 }
 interface Props {
-    image: ImageMeta;
+    image?: ImageMeta;
     title: string;
     caption: string;
     url: string;

package/lib/ResourceBox/ResourceBox.js

@@ -76,12 +76,12 @@ const ResourceBox = _ref => {
     buttonText
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledImage, {
+    children: [image ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledImage, {
       src: image.src,
       alt: image.alt,
       sizes: `(min-width: ${_core.breakpoints.desktop}) 150px, (max-width: ${_core.breakpoints.tablet} ) 400px, 200px`,
       variant: "rounded"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentWrapper, {
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentWrapper, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Heading, {
         textStyle: "label.large",
         fontWeight: "bold",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.92-alpha.0",
+  "version": "56.0.93-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -35,8 +35,8 @@
     "@ndla/core": "^5.0.3",
     "@ndla/icons": "^8.0.50-alpha.0",
     "@ndla/licenses": "^8.0.6-alpha.0",
-    "@ndla/primitives": "^1.0.69-alpha.0",
-    "@ndla/safelink": "^7.0.70-alpha.0",
+    "@ndla/primitives": "^1.0.70-alpha.0",
+    "@ndla/safelink": "^7.0.71-alpha.0",
     "@ndla/styled-system": "^0.0.30",
     "@ndla/util": "^5.0.5-alpha.0",
     "html-react-parser": "^5.1.19",
@@ -52,11 +52,11 @@
   "devDependencies": {
     "@ndla/preset-panda": "^0.0.49",
     "@ndla/types-backend": "^1.0.1",
-    "@ndla/types-embed": "^5.0.9-alpha.0",
+    "@ndla/types-embed": "^5.0.10-alpha.0",
     "@pandacss/dev": "^0.48.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1c528e8987406a8e56d6bfa3a6ab1064684ef6ff"
+  "gitHead": "bc5f8092371f02515fc71673766a799654edb5e5"
 }

package/src/Article/ArticleByline.tsx

@@ -162,9 +162,11 @@ export const ArticleByline = ({
               {getSuppliersText(suppliers, t)}
             </span>
           )}
-          <div data-contributors={showPrimaryContributors}>
-            {t(`${bylineType}.lastUpdated`)} {published}
-          </div>
+          {published ? (
+            <div data-contributors={showPrimaryContributors}>
+              {t(`${bylineType}.lastUpdated`)} {published}
+            </div>
+          ) : null}
         </TextWrapper>
       )}
       {(!!licenseBox || !!footnotes?.length) && (

package/src/Embed/ExternalEmbed.stories.tsx

@@ -174,14 +174,3 @@ export const Fullscreen: StoryObj<typeof ExternalEmbed> = {
     },
   },
 };
-
-export const Link: StoryObj<typeof ExternalEmbed> = {
-  args: {
-    embed: {
-      resource: "external",
-      status: "success",
-      embedData: { ...embedDataFullscreen, type: "link" },
-      data: opensInNewMetaData,
-    },
-  },
-};

package/src/Embed/ExternalEmbed.tsx

@@ -8,11 +8,8 @@
 
 import { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { ArrowRightShortLine } from "@ndla/icons";
-import { Figure, Text } from "@ndla/primitives";
-import { SafeLink } from "@ndla/safelink";
+import { Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import { linkOverlay } from "@ndla/styled-system/patterns";
 import type { OembedMetaData } from "@ndla/types-embed";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import { ResourceBox } from "../ResourceBox";
@@ -30,58 +27,6 @@ const StyledFigure = styled(Figure, {
   },
 });
 
-// TODO: Move this to own component in UI? Use variant of existing?
-const StyledSafeLink = styled(SafeLink, {
-  base: {
-    textDecoration: "underline",
-    textStyle: "label.large",
-    color: "text.link",
-    fontWeight: "bold",
-    _hover: {
-      textDecoration: "unset",
-    },
-  },
-});
-
-const LinkWrapper = styled("div", {
-  base: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: "xsmall",
-  },
-});
-
-const TextWrapper = styled("div", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "flex-start",
-    gap: "xxsmall",
-  },
-});
-
-const Wrapper = styled("div", {
-  base: {
-    display: "flex",
-    width: "100%",
-    gap: "small",
-    flexDirection: "column",
-    backgroundColor: "surface.brand.2.subtle",
-    borderRadius: "xxsmall",
-    padding: "medium",
-    border: "1px solid",
-    borderColor: "stroke.info",
-  },
-});
-
-const UrlText = styled(Text, {
-  base: {
-    lineClamp: "1",
-    overflow: "hidden",
-  },
-});
-
 const ExternalEmbed = ({ embed }: Props) => {
   const { t } = useTranslation();
   const figRef = useRef<HTMLElement>(null);
@@ -120,27 +65,6 @@ const ExternalEmbed = ({ embed }: Props) => {
     );
   }
 
-  if (embedData.type === "link") {
-    return (
-      <Figure data-embed-type="external">
-        <Wrapper>
-          <LinkWrapper>
-            <TextWrapper>
-              <StyledSafeLink to={embedData.url} unstyled css={linkOverlay.raw()}>
-                {embedData.title}
-              </StyledSafeLink>
-              <Text textStyle="label.medium">{embedData.caption}</Text>
-            </TextWrapper>
-            <ArrowRightShortLine />
-          </LinkWrapper>
-          <UrlText textStyle="label.medium" color="text.subtle">
-            {embedData.url}
-          </UrlText>
-        </Wrapper>
-      </Figure>
-    );
-  }
-
   return (
     <StyledFigure
       data-embed-type="external"

package/src/ResourceBox/ResourceBox.tsx

@@ -71,7 +71,7 @@ interface ImageMeta {
 }
 
 interface Props {
-  image: ImageMeta;
+  image?: ImageMeta;
   title: string;
   caption: string;
   url: string;
@@ -81,12 +81,14 @@ interface Props {
 export const ResourceBox = ({ image, title, caption, url, buttonText }: Props) => {
   return (
     <Container>
-      <StyledImage
-        src={image.src}
-        alt={image.alt}
-        sizes={`(min-width: ${breakpoints.desktop}) 150px, (max-width: ${breakpoints.tablet} ) 400px, 200px`}
-        variant="rounded"
-      />
+      {image ? (
+        <StyledImage
+          src={image.src}
+          alt={image.alt}
+          sizes={`(min-width: ${breakpoints.desktop}) 150px, (max-width: ${breakpoints.tablet} ) 400px, 200px`}
+          variant="rounded"
+        />
+      ) : null}
       <ContentWrapper>
         <Heading textStyle="label.large" fontWeight="bold" asChild consumeCss>
           <h3>{title}</h3>