@ndla/ui 56.0.36-alpha.0 → 56.0.37-alpha.0

package/es/ContentTypeBlockQuote/ContentTypeBlockQuote.js

@@ -0,0 +1,30 @@
+/**
+ * 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 { BlockQuote } from "@ndla/primitives";
+import { jsx as _jsx } from "react/jsx-runtime";
+const contentTypeToVariantMapping = {
+  "subject-material": "brand1",
+  "source-material": "brand1",
+  concept: "brand1",
+  "tasks-and-activities": "brand2",
+  "assessment-resources": "brand2"
+};
+export const ContentTypeBlockQuote = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    variant,
+    contentType,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(BlockQuote, {
+    ...props,
+    variant: variant === "colored" && contentType ? contentTypeToVariantMapping[contentType] : undefined,
+    ref: ref
+  });
+});

package/es/ContentTypeFramedContent/ContentTypeFramedContent.js

@@ -0,0 +1,30 @@
+/**
+ * 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 { FramedContent } from "@ndla/primitives";
+import { jsx as _jsx } from "react/jsx-runtime";
+const contentTypeToVariantMapping = {
+  "subject-material": "brand1",
+  "source-material": "brand1",
+  concept: "brand1",
+  "tasks-and-activities": "brand2",
+  "assessment-resources": "brand2"
+};
+export const ContentTypeFramedContent = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    variant = "neutral",
+    contentType,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(FramedContent, {
+    ...props,
+    colorTheme: variant === "colored" && contentType ? contentTypeToVariantMapping[contentType] : undefined,
+    ref: ref
+  });
+});

package/es/index.js

@@ -33,6 +33,8 @@ export { i18nInstance, formatNestedMessages, useTagsInputTranslations, useTagSel
 export { OneColumn, PageContainer } from "./Layout";
 export { default as ContentTypeBadge, SubjectMaterialBadge, TasksAndActivitiesBadge, AssessmentResourcesBadge, LearningPathBadge, SubjectBadge, SourceMaterialBadge, ConceptBadge } from "./ContentTypeBadge";
 export { ContentTypeBadge as ContentTypeBadgeNew, contentTypeToBadgeVariantMap } from "./ContentTypeBadge/ContentTypeBadgeNew";
+export { ContentTypeBlockQuote } from "./ContentTypeBlockQuote/ContentTypeBlockQuote";
+export { ContentTypeFramedContent } from "./ContentTypeFramedContent/ContentTypeFramedContent";
 export { default as CopyParagraphButton } from "./CopyParagraphButton";
 export { TagSelectorRoot, TagSelectorLabel, TagSelectorItemInput, TagSelectorTrigger, TagSelectorControl, TagSelectorClearTrigger, TagSelectorInputBase, TagSelectorInput } from "./TagSelector/TagSelector";
 export { BlogPostV2 } from "./BlogPost";

package/lib/ContentTypeBadge/ContentTypeBadgeNew.d.ts

@@ -11,6 +11,7 @@ import * as contentTypes from "../model/ContentType";
 export interface ContentTypeBadgeProps extends Omit<BadgeProps, "colorTheme"> {
     contentType: ContentType | undefined;
 }
-export type ContentType = typeof contentTypes.SUBJECT_MATERIAL | typeof contentTypes.TASKS_AND_ACTIVITIES | typeof contentTypes.ASSESSMENT_RESOURCES | typeof contentTypes.SUBJECT | typeof contentTypes.SOURCE_MATERIAL | typeof contentTypes.LEARNING_PATH | typeof contentTypes.TOPIC | typeof contentTypes.MULTIDISCIPLINARY | typeof contentTypes.CONCEPT | typeof contentTypes.EXTERNAL | typeof contentTypes.IMAGE | typeof contentTypes.AUDIO | typeof contentTypes.VIDEO | typeof contentTypes.MISSING | typeof contentTypes.PODCAST | (string & {});
+export type StrictContentType = typeof contentTypes.SUBJECT_MATERIAL | typeof contentTypes.TASKS_AND_ACTIVITIES | typeof contentTypes.ASSESSMENT_RESOURCES | typeof contentTypes.SUBJECT | typeof contentTypes.SOURCE_MATERIAL | typeof contentTypes.LEARNING_PATH | typeof contentTypes.TOPIC | typeof contentTypes.MULTIDISCIPLINARY | typeof contentTypes.CONCEPT | typeof contentTypes.EXTERNAL | typeof contentTypes.IMAGE | typeof contentTypes.AUDIO | typeof contentTypes.VIDEO | typeof contentTypes.MISSING | typeof contentTypes.PODCAST;
+export type ContentType = StrictContentType | (string & {});
 export declare const contentTypeToBadgeVariantMap: Record<ContentType, BadgeVariant>;
 export declare const ContentTypeBadge: import("react").ForwardRefExoticComponent<ContentTypeBadgeProps & import("react").RefAttributes<HTMLDivElement>>;

package/lib/ContentTypeBlockQuote/ContentTypeBlockQuote.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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.
+ *
+ */
+/// <reference types="react" />
+import { BlockQuoteProps } from "@ndla/primitives";
+import { ContentType } from "../ContentTypeBadge/ContentTypeBadgeNew";
+export type ContentTypeBlockQuoteVariant = "colored" | "neutral";
+interface Props extends Omit<BlockQuoteProps, "variant"> {
+    variant?: ContentTypeBlockQuoteVariant;
+    contentType?: ContentType;
+}
+export declare const ContentTypeBlockQuote: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLQuoteElement>>;
+export {};

package/lib/ContentTypeBlockQuote/ContentTypeBlockQuote.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContentTypeBlockQuote = void 0;
+var _react = require("react");
+var _primitives = require("@ndla/primitives");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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.
+ *
+ */
+
+const contentTypeToVariantMapping = {
+  "subject-material": "brand1",
+  "source-material": "brand1",
+  concept: "brand1",
+  "tasks-and-activities": "brand2",
+  "assessment-resources": "brand2"
+};
+const ContentTypeBlockQuote = exports.ContentTypeBlockQuote = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    variant,
+    contentType,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.BlockQuote, {
+    ...props,
+    variant: variant === "colored" && contentType ? contentTypeToVariantMapping[contentType] : undefined,
+    ref: ref
+  });
+});

package/lib/ContentTypeFramedContent/ContentTypeFramedContent.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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.
+ *
+ */
+/// <reference types="react" />
+import { FramedContentProps } from "@ndla/primitives";
+import { ContentType } from "..";
+export type ContentTypeFramedContentVariant = "colored" | "neutral";
+interface Props extends FramedContentProps {
+    variant?: ContentTypeFramedContentVariant;
+    contentType?: ContentType;
+}
+export declare const ContentTypeFramedContent: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/lib/ContentTypeFramedContent/ContentTypeFramedContent.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContentTypeFramedContent = void 0;
+var _react = require("react");
+var _primitives = require("@ndla/primitives");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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.
+ *
+ */
+
+const contentTypeToVariantMapping = {
+  "subject-material": "brand1",
+  "source-material": "brand1",
+  concept: "brand1",
+  "tasks-and-activities": "brand2",
+  "assessment-resources": "brand2"
+};
+const ContentTypeFramedContent = exports.ContentTypeFramedContent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    variant = "neutral",
+    contentType,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.FramedContent, {
+    ...props,
+    colorTheme: variant === "colored" && contentType ? contentTypeToVariantMapping[contentType] : undefined,
+    ref: ref
+  });
+});

package/lib/index.d.ts

@@ -30,8 +30,12 @@ export type { SimpleBreadcrumbItem, IndexedBreadcrumbItem } from "./Breadcrumb";
 export { i18nInstance, formatNestedMessages, useTagsInputTranslations, useTagSelectorTranslations, useComboboxTranslations, usePaginationTranslations, useAudioSearchTranslations, useImageSearchTranslations, useVideoSearchTranslations, } from "./i18n";
 export { OneColumn, PageContainer } from "./Layout";
 export { default as ContentTypeBadge, SubjectMaterialBadge, TasksAndActivitiesBadge, AssessmentResourcesBadge, LearningPathBadge, SubjectBadge, SourceMaterialBadge, ConceptBadge, } from "./ContentTypeBadge";
-export type { ContentTypeBadgeProps, ContentType } from "./ContentTypeBadge/ContentTypeBadgeNew";
+export type { ContentTypeBadgeProps, StrictContentType, ContentType } from "./ContentTypeBadge/ContentTypeBadgeNew";
 export { ContentTypeBadge as ContentTypeBadgeNew, contentTypeToBadgeVariantMap, } from "./ContentTypeBadge/ContentTypeBadgeNew";
+export { ContentTypeBlockQuote } from "./ContentTypeBlockQuote/ContentTypeBlockQuote";
+export { type ContentTypeBlockQuoteVariant } from "./ContentTypeBlockQuote/ContentTypeBlockQuote";
+export { ContentTypeFramedContent } from "./ContentTypeFramedContent/ContentTypeFramedContent";
+export { type ContentTypeFramedContentVariant } from "./ContentTypeFramedContent/ContentTypeFramedContent";
 export { default as CopyParagraphButton } from "./CopyParagraphButton";
 export { TagSelectorRoot, TagSelectorLabel, TagSelectorItemInput, TagSelectorTrigger, TagSelectorControl, TagSelectorClearTrigger, TagSelectorInputBase, TagSelectorInput, } from "./TagSelector/TagSelector";
 export { BlogPostV2 } from "./BlogPost";

package/lib/index.js

@@ -171,6 +171,18 @@ Object.defineProperty(exports, "ContentTypeBadgeNew", {
     return _ContentTypeBadgeNew.ContentTypeBadge;
   }
 });
+Object.defineProperty(exports, "ContentTypeBlockQuote", {
+  enumerable: true,
+  get: function () {
+    return _ContentTypeBlockQuote.ContentTypeBlockQuote;
+  }
+});
+Object.defineProperty(exports, "ContentTypeFramedContent", {
+  enumerable: true,
+  get: function () {
+    return _ContentTypeFramedContent.ContentTypeFramedContent;
+  }
+});
 Object.defineProperty(exports, "ContentTypeHero", {
   enumerable: true,
   get: function () {
@@ -633,6 +645,8 @@ var _i18n = require("./i18n");
 var _Layout = require("./Layout");
 var _ContentTypeBadge = _interopRequireWildcard(require("./ContentTypeBadge"));
 var _ContentTypeBadgeNew = require("./ContentTypeBadge/ContentTypeBadgeNew");
+var _ContentTypeBlockQuote = require("./ContentTypeBlockQuote/ContentTypeBlockQuote");
+var _ContentTypeFramedContent = require("./ContentTypeFramedContent/ContentTypeFramedContent");
 var _CopyParagraphButton = _interopRequireDefault(require("./CopyParagraphButton"));
 var _TagSelector = require("./TagSelector/TagSelector");
 var _BlogPost = require("./BlogPost");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.36-alpha.0",
+  "version": "56.0.37-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,11 +33,11 @@
   ],
   "dependencies": {
     "@ndla/core": "^5.0.2",
-    "@ndla/icons": "^8.0.25-alpha.0",
+    "@ndla/icons": "^8.0.26-alpha.0",
     "@ndla/licenses": "^8.0.3-alpha.0",
-    "@ndla/primitives": "^1.0.33-alpha.0",
-    "@ndla/safelink": "^7.0.33-alpha.0",
-    "@ndla/styled-system": "^0.0.22",
+    "@ndla/primitives": "^1.0.34-alpha.0",
+    "@ndla/safelink": "^7.0.34-alpha.0",
+    "@ndla/styled-system": "^0.0.23",
     "@ndla/util": "^5.0.0-alpha.0",
     "html-react-parser": "^5.1.8",
     "i18next-browser-languagedetector": "^7.1.0"
@@ -50,7 +50,7 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.34",
+    "@ndla/preset-panda": "^0.0.35",
     "@ndla/types-backend": "^0.2.86",
     "@ndla/types-embed": "^5.0.3-alpha.0",
     "@pandacss/dev": "^0.46.0"
@@ -58,5 +58,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "183d252ef9c40520099fadd2ee6a48e46eb1c71e"
+  "gitHead": "5bad5d1659659f8f6a1a8cb790d43fdbbfcdedbc"
 }

package/src/ContentTypeBadge/ContentTypeBadgeNew.tsx

@@ -15,7 +15,7 @@ export interface ContentTypeBadgeProps extends Omit<BadgeProps, "colorTheme"> {
   contentType: ContentType | undefined;
 }
 
-export type ContentType =
+export type StrictContentType =
   | typeof contentTypes.SUBJECT_MATERIAL
   | typeof contentTypes.TASKS_AND_ACTIVITIES
   | typeof contentTypes.ASSESSMENT_RESOURCES
@@ -30,7 +30,10 @@ export type ContentType =
   | typeof contentTypes.AUDIO
   | typeof contentTypes.VIDEO
   | typeof contentTypes.MISSING
-  | typeof contentTypes.PODCAST
+  | typeof contentTypes.PODCAST;
+
+export type ContentType =
+  | StrictContentType
   // This allows for us to fallback to string without getting a ts error, while still keeping intellisense
   | (string & {});
 

package/src/ContentTypeBlockQuote/ContentTypeBlockQuote.tsx

@@ -0,0 +1,36 @@
+/**
+ * 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 { BlockQuote, BlockQuoteProps, BlockQuoteVariantProps } from "@ndla/primitives";
+import { ContentType } from "../ContentTypeBadge/ContentTypeBadgeNew";
+
+export type ContentTypeBlockQuoteVariant = "colored" | "neutral";
+
+const contentTypeToVariantMapping = {
+  "subject-material": "brand1",
+  "source-material": "brand1",
+  concept: "brand1",
+  "tasks-and-activities": "brand2",
+  "assessment-resources": "brand2",
+} as Record<ContentType, NonNullable<BlockQuoteVariantProps>["variant"]>;
+
+interface Props extends Omit<BlockQuoteProps, "variant"> {
+  variant?: ContentTypeBlockQuoteVariant;
+  contentType?: ContentType;
+}
+
+export const ContentTypeBlockQuote = forwardRef<HTMLQuoteElement, Props>(({ variant, contentType, ...props }, ref) => {
+  return (
+    <BlockQuote
+      {...props}
+      variant={variant === "colored" && contentType ? contentTypeToVariantMapping[contentType] : undefined}
+      ref={ref}
+    />
+  );
+});

package/src/ContentTypeFramedContent/ContentTypeFramedContent.tsx

@@ -0,0 +1,38 @@
+/**
+ * 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 { FramedContent, FramedContentProps, FramedContentVariantProps } from "@ndla/primitives";
+import { ContentType } from "..";
+
+const contentTypeToVariantMapping = {
+  "subject-material": "brand1",
+  "source-material": "brand1",
+  concept: "brand1",
+  "tasks-and-activities": "brand2",
+  "assessment-resources": "brand2",
+} as Record<ContentType, NonNullable<FramedContentVariantProps>["colorTheme"]>;
+
+export type ContentTypeFramedContentVariant = "colored" | "neutral";
+
+interface Props extends FramedContentProps {
+  variant?: ContentTypeFramedContentVariant;
+  contentType?: ContentType;
+}
+
+export const ContentTypeFramedContent = forwardRef<HTMLDivElement, Props>(
+  ({ variant = "neutral", contentType, ...props }, ref) => {
+    return (
+      <FramedContent
+        {...props}
+        colorTheme={variant === "colored" && contentType ? contentTypeToVariantMapping[contentType] : undefined}
+        ref={ref}
+      />
+    );
+  },
+);

package/src/index.ts

@@ -103,12 +103,18 @@ export {
   ConceptBadge,
 } from "./ContentTypeBadge";
 
-export type { ContentTypeBadgeProps, ContentType } from "./ContentTypeBadge/ContentTypeBadgeNew";
+export type { ContentTypeBadgeProps, StrictContentType, ContentType } from "./ContentTypeBadge/ContentTypeBadgeNew";
 export {
   ContentTypeBadge as ContentTypeBadgeNew,
   contentTypeToBadgeVariantMap,
 } from "./ContentTypeBadge/ContentTypeBadgeNew";
 
+export { ContentTypeBlockQuote } from "./ContentTypeBlockQuote/ContentTypeBlockQuote";
+export { type ContentTypeBlockQuoteVariant } from "./ContentTypeBlockQuote/ContentTypeBlockQuote";
+
+export { ContentTypeFramedContent } from "./ContentTypeFramedContent/ContentTypeFramedContent";
+export { type ContentTypeFramedContentVariant } from "./ContentTypeFramedContent/ContentTypeFramedContent";
+
 export { default as CopyParagraphButton } from "./CopyParagraphButton";
 
 export {