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

package/es/Concept/Concept.js

@@ -0,0 +1,69 @@
+/**
+ * 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 { forwardRef } from "react";
+import { Figure } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { BrightcoveEmbed, ExternalEmbed, H5pEmbed, IframeEmbed, ImageEmbed } from "../Embed";
+import { EmbedByline } from "../LicenseByline/EmbedByline";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+const StyledFigure = styled(Figure, {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "medium"
+  }
+});
+const ContentWrapper = styled("div", {
+  base: {
+    textStyle: "body.large",
+    display: "inline",
+    "& p": {
+      display: "inline"
+    }
+  }
+});
+
+// TODO: Figure out if we need to support tags, subjects and headerButtons.
+
+export const Concept = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    copyright,
+    visualElement,
+    lang,
+    children,
+    title,
+    ...rest
+  } = _ref;
+  return _jsxs(StyledFigure, {
+    ref: ref,
+    ...rest,
+    children: [_jsxs(ContentWrapper, {
+      lang: lang,
+      children: [!!title && _jsxs(_Fragment, {
+        children: [_jsx("b", {
+          children: title
+        }), ` – `]
+      }), children]
+    }), visualElement?.resource === "image" ? _jsx(ImageEmbed, {
+      embed: visualElement,
+      lang: lang
+    }) : visualElement?.resource === "brightcove" ? _jsx(BrightcoveEmbed, {
+      embed: visualElement
+    }) : visualElement?.resource === "h5p" ? _jsx(H5pEmbed, {
+      embed: visualElement
+    }) : visualElement?.resource === "iframe" ? _jsx(IframeEmbed, {
+      embed: visualElement
+    }) : visualElement?.resource === "external" ? _jsx(ExternalEmbed, {
+      embed: visualElement
+    }) : null, copyright && _jsx(EmbedByline, {
+      copyright: copyright,
+      type: "concept"
+    })]
+  });
+});