diff --git a/packages/ndla-ui/src/RelatedArticleList/RelatedArticleList.tsx b/packages/ndla-ui/src/RelatedArticleList/RelatedArticleList.tsx
index d773b7cb47..43180e434e 100644
--- a/packages/ndla-ui/src/RelatedArticleList/RelatedArticleList.tsx
+++ b/packages/ndla-ui/src/RelatedArticleList/RelatedArticleList.tsx
@@ -6,16 +6,16 @@
*
*/
-import { Children, ComponentPropsWithoutRef, ReactNode, useMemo, useState } from "react";
+import { Children, type ComponentPropsWithoutRef, type ReactElement, type ReactNode, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
-import { ExternalLinkLine } from "@ndla/icons/common";
+import { ExternalLinkLine } from "@ndla/icons";
import { CardContent, CardHeading, CardRoot, Text, Heading, Button } from "@ndla/primitives";
import { SafeLink } from "@ndla/safelink";
import { styled } from "@ndla/styled-system/jsx";
import { linkOverlay } from "@ndla/styled-system/patterns";
-import { ContentTypeBadge } from "../ContentTypeBadge/ContentTypeBadgeNew";
+import { ContentTypeBadge } from "../ContentTypeBadge/ContentTypeBadge";
import { contentTypes } from "../model/ContentType";
-import { HeadingLevel } from "../types";
+import type { HeadingLevel } from "../types";
interface RelatedArticleProps {
title: string;
@@ -108,7 +108,7 @@ const StyledButton = styled(Button, {
});
interface Props extends ComponentPropsWithoutRef<"section"> {
- children?: JSX.Element[];
+ children?: ReactElement[];
articleCount?: number;
headingLevel?: HeadingLevel;
headingButtons?: ReactNode;
diff --git a/packages/ndla-ui/src/ResourceBox/ResourceBox.tsx b/packages/ndla-ui/src/ResourceBox/ResourceBox.tsx
index 828234db8c..d2f38e93eb 100644
--- a/packages/ndla-ui/src/ResourceBox/ResourceBox.tsx
+++ b/packages/ndla-ui/src/ResourceBox/ResourceBox.tsx
@@ -7,7 +7,7 @@
*/
import { breakpoints } from "@ndla/core";
-import { ShareBoxLine } from "@ndla/icons/common";
+import { ShareBoxLine } from "@ndla/icons";
import { Heading, Image, Text } from "@ndla/primitives";
import { SafeLinkButton } from "@ndla/safelink";
import { styled } from "@ndla/styled-system/jsx";
diff --git a/packages/ndla-ui/src/TagSelector/TagSelector.stories.tsx b/packages/ndla-ui/src/TagSelector/TagSelector.stories.tsx
index d034902c8f..266705a75a 100644
--- a/packages/ndla-ui/src/TagSelector/TagSelector.stories.tsx
+++ b/packages/ndla-ui/src/TagSelector/TagSelector.stories.tsx
@@ -9,16 +9,13 @@
import { useState } from "react";
import { type ComboboxInputValueChangeDetails, createListCollection } from "@ark-ui/react";
-import { Meta, StoryFn } from "@storybook/react";
-import { CloseLine } from "@ndla/icons/action";
-import { ArrowDownShortLine } from "@ndla/icons/common";
-import { CheckLine } from "@ndla/icons/editor";
+import type { Meta, StoryFn } from "@storybook/react";
+import { CloseLine, ArrowDownShortLine, CheckLine } from "@ndla/icons";
import {
ComboboxContent,
ComboboxItem,
ComboboxItemIndicator,
ComboboxItemText,
- ComboboxPositioner,
IconButton,
Input,
InputContainer,
@@ -95,18 +92,16 @@ export const Default: StoryFn
= ({ translations, ...args
-
-
- {options.map((item) => (
-
- {item}
-
-
-
- ))}
-
-
+
+ {options.map((item) => (
+
+ {item}
+
+
+
+ ))}
+
);
};
diff --git a/packages/ndla-ui/src/TagSelector/TagSelector.tsx b/packages/ndla-ui/src/TagSelector/TagSelector.tsx
index b9e72fc6d6..b4b4e1a8f7 100644
--- a/packages/ndla-ui/src/TagSelector/TagSelector.tsx
+++ b/packages/ndla-ui/src/TagSelector/TagSelector.tsx
@@ -7,29 +7,28 @@
*/
import { forwardRef, useEffect, useId, useRef } from "react";
-import type { CollectionItem } from "@ark-ui/react";
-import { useTagsInputContext, useComboboxContext } from "@ark-ui/react";
-import { CloseLine } from "@ndla/icons/action";
+import { type CollectionItem, useTagsInputContext, useComboboxContext } from "@ark-ui/react";
+import { CloseLine } from "@ndla/icons";
import {
ComboboxClearTrigger,
ComboboxControl,
- ComboboxControlProps,
+ type ComboboxControlProps,
ComboboxInput,
- ComboboxInputProps,
+ type ComboboxInputProps,
ComboboxLabel,
ComboboxRoot,
- ComboboxRootProps,
+ type ComboboxRootProps,
ComboboxTrigger,
TagsInputControl,
- TagsInputControlProps,
+ type TagsInputControlProps,
TagsInputInput,
- TagsInputInputProps,
+ type TagsInputInputProps,
TagsInputItem,
TagsInputItemDeleteTrigger,
TagsInputItemPreview,
TagsInputItemText,
TagsInputRoot,
- TagsInputRootProps,
+ type TagsInputRootProps,
TagsInputItemInput,
} from "@ndla/primitives";
import { contains } from "@ndla/util";
diff --git a/packages/ndla-ui/src/ZendeskButton/ZendeskButton.tsx b/packages/ndla-ui/src/ZendeskButton/ZendeskButton.tsx
index 7e1fd62405..cef1b571a1 100644
--- a/packages/ndla-ui/src/ZendeskButton/ZendeskButton.tsx
+++ b/packages/ndla-ui/src/ZendeskButton/ZendeskButton.tsx
@@ -7,7 +7,7 @@
*/
import { forwardRef, useState } from "react";
-import { Button, ButtonProps } from "@ndla/primitives";
+import { Button, type ButtonProps } from "@ndla/primitives";
// TODO: Let's consider abandoning `disabled` on the button here. It should instead just open/close the widget based on its current state.
diff --git a/packages/ndla-ui/src/i18n/formatNestedMessages.ts b/packages/ndla-ui/src/i18n/formatNestedMessages.ts
index f95ab60f83..30bca28023 100644
--- a/packages/ndla-ui/src/i18n/formatNestedMessages.ts
+++ b/packages/ndla-ui/src/i18n/formatNestedMessages.ts
@@ -21,7 +21,6 @@ export const formatNestedMessages = (
) => {
const messages = formattedMessages;
- // eslint-disable-next-line
Object.keys(phrases).forEach((key) => {
const value = phrases[key];
if ({}.hasOwnProperty.call(phrases, key)) {
diff --git a/packages/ndla-ui/src/i18n/useComponentTranslations.ts b/packages/ndla-ui/src/i18n/useComponentTranslations.ts
index 568b370938..1900693f15 100644
--- a/packages/ndla-ui/src/i18n/useComponentTranslations.ts
+++ b/packages/ndla-ui/src/i18n/useComponentTranslations.ts
@@ -9,7 +9,7 @@
import { useTranslation } from "react-i18next";
import type { CollectionItem } from "@ark-ui/react";
import type { ComboboxRootProps, PaginationRootProps, TagsInputRootProps } from "@ndla/primitives";
-import { TagSelectorRootProps } from "../TagSelector/TagSelector";
+import { type TagSelectorRootProps } from "../TagSelector/TagSelector";
type DeepPartial = {
[K in keyof T]?: T[K] extends object ? DeepPartial : T[K];
diff --git a/packages/ndla-ui/src/index.ts b/packages/ndla-ui/src/index.ts
index 5037b6e934..f41daca04f 100644
--- a/packages/ndla-ui/src/index.ts
+++ b/packages/ndla-ui/src/index.ts
@@ -54,8 +54,6 @@ export {
export { getPossiblyRelativeUrl } from "./utils/relativeUrl";
-export { default as ContentLoader } from "./ContentLoader";
-
export { default as RelatedArticleList, RelatedArticle } from "./RelatedArticleList";
export { ErrorResourceAccessDenied, default as ErrorMessage } from "./ErrorMessage";
@@ -94,24 +92,8 @@ export {
useVideoSearchTranslations,
} from "./i18n";
-export { OneColumn, PageContainer } from "./Layout";
-
-export {
- default as ContentTypeBadge,
- SubjectMaterialBadge,
- TasksAndActivitiesBadge,
- AssessmentResourcesBadge,
- LearningPathBadge,
- SubjectBadge,
- SourceMaterialBadge,
- ConceptBadge,
-} from "./ContentTypeBadge";
-
-export type { ContentTypeBadgeProps, StrictContentType, ContentType } from "./ContentTypeBadge/ContentTypeBadgeNew";
-export {
- ContentTypeBadge as ContentTypeBadgeNew,
- contentTypeToBadgeVariantMap,
-} from "./ContentTypeBadge/ContentTypeBadgeNew";
+export type { ContentTypeBadgeProps, StrictContentType, ContentType } from "./ContentTypeBadge/ContentTypeBadge";
+export { ContentTypeBadge, contentTypeToBadgeVariantMap } from "./ContentTypeBadge/ContentTypeBadge";
export { ContentTypeBlockQuote } from "./ContentTypeBlockQuote/ContentTypeBlockQuote";
export { type ContentTypeBlockQuoteVariant } from "./ContentTypeBlockQuote/ContentTypeBlockQuote";
diff --git a/packages/ndla-ui/src/locale/messages-en.ts b/packages/ndla-ui/src/locale/messages-en.ts
index fc4e931823..72216c09e1 100644
--- a/packages/ndla-ui/src/locale/messages-en.ts
+++ b/packages/ndla-ui/src/locale/messages-en.ts
@@ -556,6 +556,7 @@ const messages = {
blog: "Blog",
tips: "Tips to students",
vacancies: "Vacancies",
+ contact: "Contact us",
},
otherLanguages: "Other languages",
},
@@ -580,6 +581,10 @@ const messages = {
video: "Video",
missing: "Unknown",
external: "External",
+ gloss: "Gloss",
+ programme: "Programme",
+ "podcast-series": "Podcast series",
+ "frontpage-article": "About NDLA article",
},
modal: {
closeModal: "Close",
@@ -822,6 +827,7 @@ const messages = {
pause: "Pause",
download: "Download audio",
reuse: "Use audio",
+ progressBar: "Progress bar",
error: {
url: "Error loading the audio.",
caption: "Sorry, an error occurred while loading the audio.",
diff --git a/packages/ndla-ui/src/locale/messages-nb.ts b/packages/ndla-ui/src/locale/messages-nb.ts
index d66a0c4e6e..99e88dd211 100644
--- a/packages/ndla-ui/src/locale/messages-nb.ts
+++ b/packages/ndla-ui/src/locale/messages-nb.ts
@@ -557,6 +557,7 @@ const messages = {
blog: "Fagblogg",
tips: "Tips til elever",
vacancies: "Ledige stillinger",
+ contact: "Kontakt oss",
},
otherLanguages: "Andre språk",
},
@@ -581,6 +582,10 @@ const messages = {
video: "Video",
missing: "Ukjent",
external: "Ekstern",
+ gloss: "Glose",
+ programme: "Programfag",
+ "podcast-series": "Podkast-serie",
+ "frontpage-article": "Om NDLA-artikkel",
},
modal: {
closeModal: "Lukk",
@@ -823,6 +828,7 @@ const messages = {
pause: "Pause",
download: "Last ned lydfil",
reuse: "Bruk lydfil",
+ progressBar: "Fremdriftsindikator",
error: {
url: "Feil ved lasting av lydfil.",
caption: "Beklager, en feil oppstod ved lasting av lydfil.",
diff --git a/packages/ndla-ui/src/locale/messages-nn.ts b/packages/ndla-ui/src/locale/messages-nn.ts
index b10c3baa51..4dff84bf78 100644
--- a/packages/ndla-ui/src/locale/messages-nn.ts
+++ b/packages/ndla-ui/src/locale/messages-nn.ts
@@ -557,6 +557,7 @@ const messages = {
blog: "Fagblogg",
tips: "Tips til elevar",
vacancies: "Ledige stillingar",
+ contact: "Kontakt oss",
},
otherLanguages: "Andre språk",
},
@@ -581,6 +582,10 @@ const messages = {
video: "Video",
missing: "Ukjent",
external: "Ekstern",
+ gloss: "Glose",
+ programme: "Programfag",
+ "podcast-series": "Podkast-serie",
+ "frontpage-article": "Om NDLA-artikkel",
},
modal: {
closeModal: "Lukk",
@@ -823,6 +828,7 @@ const messages = {
pause: "Pause",
download: "Last ned lydfil",
reuse: "Bruk lydfil",
+ progressBar: "Framdriftsindikator",
error: {
url: "Feil ved lasting av lydfil.",
caption: "Orsak, ein feil oppstod ved lasting av lydfil.",
diff --git a/packages/ndla-ui/src/locale/messages-se.ts b/packages/ndla-ui/src/locale/messages-se.ts
index 7f01e06ed3..b0cc2da75c 100644
--- a/packages/ndla-ui/src/locale/messages-se.ts
+++ b/packages/ndla-ui/src/locale/messages-se.ts
@@ -558,6 +558,7 @@ const messages = {
blog: "Fágablogga",
tips: "Cavgileapmi ohppiide",
vacancies: "Rabas virggit",
+ contact: "Kontakt oss",
},
otherLanguages: "Andre språk",
},
@@ -582,6 +583,10 @@ const messages = {
video: "Video",
missing: "Ukjent",
external: "Ekstern",
+ gloss: "Glose",
+ programme: "Programfag",
+ "podcast-series": "Podkast-serie",
+ "frontpage-article": "Om NDLA-artikkel",
},
modal: {
closeModal: "Govčča",
@@ -824,6 +829,7 @@ const messages = {
pause: "Boatkke",
download: "Viečča jietnafiilla",
reuse: "Geavat jietnafiilla",
+ progressBar: "Fremdriftsindikator",
error: {
url: "Boasttuvuohta jietnafiilla viežžamis.",
caption: "Šállošat, boasttuvuohta čuožžilii jietnafiilla viežžamis.",
diff --git a/packages/ndla-ui/src/locale/messages-sma.ts b/packages/ndla-ui/src/locale/messages-sma.ts
index ef38545857..9794014eb0 100644
--- a/packages/ndla-ui/src/locale/messages-sma.ts
+++ b/packages/ndla-ui/src/locale/messages-sma.ts
@@ -560,6 +560,7 @@ const messages = {
blog: "Faageblogge",
tips: "Tipsh learoehkidie",
vacancies: "Gaavnoes barkoeh",
+ contact: "Kontakt oss",
},
otherLanguages: "Andre språk",
},
@@ -584,6 +585,10 @@ const messages = {
video: "Video",
missing: "Ukjent",
external: "Ekstern",
+ gloss: "Glose",
+ programme: "Programfag",
+ "podcast-series": "Podkast-serie",
+ "frontpage-article": "Om NDLA-artikkel",
},
modal: {
closeModal: "Dahph",
@@ -826,6 +831,7 @@ const messages = {
pause: "Pause",
download: "Veedtjh tjoeje-fijlem",
reuse: "Nuhtjh tjoeje-fijlem",
+ progressBar: "Fremdriftsindikator",
error: {
url: "Fiejlie tjoeje-veedtjemisnie.",
caption: "Gaatesjen, fiejlie sjïdti tjoeje-veedtjemisnie.",
diff --git a/packages/ndla-ui/src/model/ContentType.ts b/packages/ndla-ui/src/model/ContentType.ts
index d441371e01..c531490699 100644
--- a/packages/ndla-ui/src/model/ContentType.ts
+++ b/packages/ndla-ui/src/model/ContentType.ts
@@ -21,6 +21,10 @@ export const IMAGE = "image";
export const VIDEO = "video";
export const AUDIO = "audio";
export const PODCAST = "podcast";
+export const GLOSS = "gloss";
+export const PROGRAMME = "programme";
+export const PODCAST_SERIES = "podcast-series";
+export const FRONTPAGE_ARTICLE = "frontpage-article";
export const contentTypes = {
SUBJECT_MATERIAL,
@@ -34,6 +38,8 @@ export const contentTypes = {
CONCEPT,
EXTERNAL,
MISSING,
+ PROGRAMME,
+ PODCAST_SERIES,
};
export const RESOURCE_TYPE_LEARNING_PATH = "urn:resourcetype:learningPath";
@@ -51,6 +57,8 @@ export const contentTypeMapping: Record = {
[RESOURCE_TYPE_SOURCE_MATERIAL]: SOURCE_MATERIAL,
[RESOURCE_TYPE_CONCEPT]: CONCEPT,
[MULTIDISCIPLINARY]: MULTIDISCIPLINARY,
+ [TOPIC]: TOPIC,
+ [FRONTPAGE_ARTICLE]: FRONTPAGE_ARTICLE,
default: SUBJECT_MATERIAL,
};
@@ -60,4 +68,5 @@ export const resourceEmbedTypeMapping: Record = {
concept: "concept",
audio: "audio",
podcast: "podcast",
+ gloss: "gloss",
};
diff --git a/packages/ndla-ui/src/types.ts b/packages/ndla-ui/src/types.ts
index 10b7065d65..7c2ad9fb60 100644
--- a/packages/ndla-ui/src/types.ts
+++ b/packages/ndla-ui/src/types.ts
@@ -6,7 +6,7 @@
*
*/
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
diff --git a/packages/ndla-video-search/package.json b/packages/ndla-video-search/package.json
index ecf6798977..1ba27035f7 100644
--- a/packages/ndla-video-search/package.json
+++ b/packages/ndla-video-search/package.json
@@ -1,6 +1,6 @@
{
"name": "@ndla/video-search",
- "version": "8.0.58-alpha.0",
+ "version": "8.0.67-alpha.0",
"description": "A simple library for searching NDLA videos",
"license": "GPL-3.0",
"main": "lib/index.js",
@@ -33,8 +33,8 @@
},
"devDependencies": {
"@ndla/preset-panda": "workspace:^",
- "@ndla/types-embed": "^5.0.4-alpha.0",
- "@pandacss/dev": "^0.46.0"
+ "@ndla/types-embed": "^5.0.5-alpha.0",
+ "@pandacss/dev": "^0.48.0"
},
"peerDependencies": {
"react": ">= 18",
diff --git a/packages/ndla-video-search/src/VideoListItem.tsx b/packages/ndla-video-search/src/VideoListItem.tsx
index 1afa9e5f8c..006908bc0b 100644
--- a/packages/ndla-video-search/src/VideoListItem.tsx
+++ b/packages/ndla-video-search/src/VideoListItem.tsx
@@ -7,13 +7,12 @@
*/
import { useState } from "react";
-import { CloseLine } from "@ndla/icons/action";
-import { PanoramaPhotosphere } from "@ndla/icons/common";
-import { getLicenseByNBTitle, LicenseLocaleType } from "@ndla/licenses";
+import { CloseLine, PanoramaPhotosphere } from "@ndla/icons";
+import { getLicenseByNBTitle, type LicenseLocaleType } from "@ndla/licenses";
import { Image, Text, ListItemContent, ListItemRoot, Button, IconButton } from "@ndla/primitives";
import { styled } from "@ndla/styled-system/jsx";
-import { BrightcoveApiType } from "@ndla/types-embed";
-import { VideoTranslations } from "./VideoSearch";
+import type { BrightcoveApiType } from "@ndla/types-embed";
+import type { VideoTranslations } from "./VideoSearch";
const ButtonWrapper = styled("div", {
base: {
@@ -143,7 +142,7 @@ export const VideoListItem = ({ video, onVideoSelect, translations, locale }: Vi
- {isPreviewing && (
+ {!!isPreviewing && (
)}
- {isLoading && {translations.loadMoreVideos} }
+ {!!isLoading && {translations.loadMoreVideos} }
);
};
diff --git a/packages/ndla-video-search/src/VideoSearch.stories.tsx b/packages/ndla-video-search/src/VideoSearch.stories.tsx
index c1222336bf..b26ef13e5a 100644
--- a/packages/ndla-video-search/src/VideoSearch.stories.tsx
+++ b/packages/ndla-video-search/src/VideoSearch.stories.tsx
@@ -6,11 +6,10 @@
*
*/
-import { StoryFn } from "@storybook/react";
-import { BrightcoveApiType } from "@ndla/types-embed";
-import { VideoSearch, VideoQueryType } from "./VideoSearch";
-//@ts-ignore
-import { firstBrightcoveList, secondBrightcoveList } from "../../../dummydata";
+import type { StoryFn } from "@storybook/react";
+import type { BrightcoveApiType } from "@ndla/types-embed";
+import { VideoSearch, type VideoQueryType } from "./VideoSearch";
+import { firstBrightcoveList, secondBrightcoveList } from "../../../dummydata/mockBrightcove";
const firstDummyData = firstBrightcoveList as unknown as BrightcoveApiType[];
const secondDummyData = secondBrightcoveList as unknown as BrightcoveApiType[];
diff --git a/packages/ndla-video-search/src/VideoSearch.tsx b/packages/ndla-video-search/src/VideoSearch.tsx
index dd6e28a2c8..a58fe43a8a 100644
--- a/packages/ndla-video-search/src/VideoSearch.tsx
+++ b/packages/ndla-video-search/src/VideoSearch.tsx
@@ -6,11 +6,11 @@
*
*/
-import { ChangeEvent, useCallback, useEffect, useState, KeyboardEvent } from "react";
-import { SearchLine } from "@ndla/icons/common";
+import { type ChangeEvent, useCallback, useEffect, useState, type KeyboardEvent } from "react";
+import { SearchLine } from "@ndla/icons";
import { IconButton, Input } from "@ndla/primitives";
import { styled } from "@ndla/styled-system/jsx";
-import { BrightcoveApiType } from "@ndla/types-embed";
+import type { BrightcoveApiType } from "@ndla/types-embed";
import { VideoResultList } from "./VideoResultList";
export interface VideoTranslations {
diff --git a/packages/preset-panda/package.json b/packages/preset-panda/package.json
index 585f26f99b..25310bca38 100644
--- a/packages/preset-panda/package.json
+++ b/packages/preset-panda/package.json
@@ -1,6 +1,6 @@
{
"name": "@ndla/preset-panda",
- "version": "0.0.44",
+ "version": "0.0.48",
"description": "Panda preset for NDLA.",
"license": "GPL-3.0",
"main": "lib/index.js",
@@ -32,7 +32,7 @@
],
"devDependencies": {
"@ndla/core": "workspace:^",
- "@pandacss/dev": "^0.46.0"
+ "@pandacss/dev": "^0.48.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/preset-panda/panda.config.ts b/packages/preset-panda/panda.config.ts
index ad8bdc7550..7c24aeab45 100644
--- a/packages/preset-panda/panda.config.ts
+++ b/packages/preset-panda/panda.config.ts
@@ -7,7 +7,7 @@
*/
import { defineConfig } from "@pandacss/dev";
-import { ArtifactContent, Artifact } from "@pandacss/types";
+import type { ArtifactContent, Artifact, ArtifactId } from "@pandacss/types";
import preset from "./src";
import { forwardCssPropPlugin } from "./src/plugins/forwardCssPropPlugin";
@@ -51,8 +51,7 @@ export default defineConfig({
});
acc.push({
- //@ts-ignore
- id: artifact.id + "-types",
+ id: (artifact.id + "-types") as ArtifactId,
dir: artifact.dir?.map((path, index) => (index === 1 ? path.replace("/src", "/lib") : path)),
files: typeFiles,
});
diff --git a/packages/preset-panda/src/boxShadows.stories.tsx b/packages/preset-panda/src/boxShadows.stories.tsx
index a998db6fce..276a1c9fbe 100644
--- a/packages/preset-panda/src/boxShadows.stories.tsx
+++ b/packages/preset-panda/src/boxShadows.stories.tsx
@@ -6,10 +6,10 @@
*
*/
-import { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react";
import { css } from "@ndla/styled-system/css";
import { styled } from "@ndla/styled-system/jsx";
-import { ShadowToken } from "@ndla/styled-system/tokens";
+import type { ShadowToken } from "@ndla/styled-system/tokens";
const ShadowsContainer = styled("div", {
base: {
diff --git a/packages/preset-panda/src/breakpoints.stories.tsx b/packages/preset-panda/src/breakpoints.stories.tsx
index 23f8656124..651981fba3 100644
--- a/packages/preset-panda/src/breakpoints.stories.tsx
+++ b/packages/preset-panda/src/breakpoints.stories.tsx
@@ -6,10 +6,10 @@
*
*/
-import { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react";
import { css } from "@ndla/styled-system/css";
import { styled } from "@ndla/styled-system/jsx";
-import { SizeToken } from "@ndla/styled-system/tokens";
+import type { SizeToken } from "@ndla/styled-system/tokens";
const BreakpointsContainer = styled("div", {
base: {
diff --git a/packages/preset-panda/src/colors.stories.tsx b/packages/preset-panda/src/colors.stories.tsx
index ffd4c896de..8eb126fe07 100644
--- a/packages/preset-panda/src/colors.stories.tsx
+++ b/packages/preset-panda/src/colors.stories.tsx
@@ -6,12 +6,12 @@
*
*/
-import { ReactNode } from "react";
-import { Meta, StoryFn } from "@storybook/react";
+import type { ReactNode } from "react";
+import type { Meta, StoryFn } from "@storybook/react";
import { Heading, Text } from "@ndla/primitives";
import { css } from "@ndla/styled-system/css";
import { styled } from "@ndla/styled-system/jsx";
-import { ColorToken, token } from "@ndla/styled-system/tokens";
+import { type ColorToken, token } from "@ndla/styled-system/tokens";
const StyledColorBlocks = styled("div", {
base: {
@@ -29,12 +29,12 @@ interface ColorBlocksProps {
const ColorBlocks = ({ title, description, children }: ColorBlocksProps) => (
- {title && (
+ {!!title && (
{title}
)}
- {description && {description} }
+ {!!description && {description} }
{children}
);
@@ -254,6 +254,10 @@ export const SemanticColors: StoryFn = () => (
+